/* /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: #0a0f1e;
    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: rgba(255, 255, 255, 0.05);
    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: rgba(255, 255, 255, 0.08);
    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: #0a0f1e;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.waypoint-name[b-sdrctgwcm2] {
    flex: 1;
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    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: rgba(255, 255, 255, 0.08);
}

.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: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    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: #86efac;
}

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

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

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

.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: #fca5a5;
}

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, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    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: #f1f5f9;
}

.close-button[b-77fb9njh7i] {
    background: none;
    border: none;
    font-size: 2rem;
    color: #94a3b8;
    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: #f1f5f9;
}

/* 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: #93c5fd;
}

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

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

.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: #cbd5e1;
}

.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: #f1f5f9;
    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: #3b82f6;
    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: #cbd5e1;
    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: #3b82f6;
}

.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: #f1f5f9;
    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: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

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

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

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

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

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

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

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

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

.event-description[b-77fb9njh7i] {
    font-size: 0.9rem;
    color: #94a3b8;
    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: #3b82f6;
    color: white;
}

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

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

.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/Characters/Detail/CharacterDetailPanel.razor.rz.scp.css */
/* Character Detail Panel - Enhanced Informative Layout */

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

/* ===== MOBILE ACTION BAR ===== */
.mobile-action-bar[b-jywxoucvm6] {
    display: none;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.mobile-action-bar[b-jywxoucvm6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer-b-jywxoucvm6 3s infinite;
}

@keyframes shimmer-b-jywxoucvm6 {
    0% { left: -100%; }
    100% { left: 100%; }
}

.btn-play-mobile[b-jywxoucvm6] {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: white !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 0.5px !important;
    padding: 0.875rem 1.25rem !important;
    border-radius: 8px !important;
    text-transform: none !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative;
    z-index: 1;
}

.btn-play-mobile.locked[b-jywxoucvm6] {
    background: linear-gradient(135deg, #475569, #334155) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .mobile-action-bar[b-jywxoucvm6] {
        display: block;
    }
}

/* ===== HERO HEADER - COMPACT ===== */
.detail-header[b-jywxoucvm6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Class-specific header accent */
.detail-header.warrior[b-jywxoucvm6] { border-left: 3px solid #ef4444; }
.detail-header.wizard[b-jywxoucvm6] { border-left: 3px solid #3b82f6; }
.detail-header.ranger[b-jywxoucvm6] { border-left: 3px solid #22c55e; }
.detail-header.rogue[b-jywxoucvm6] { border-left: 3px solid #6366f1; }
.detail-header.paladin[b-jywxoucvm6] { border-left: 3px solid #f59e0b; }
.detail-header.bard[b-jywxoucvm6] { border-left: 3px solid #ec4899; }
.detail-header.cleric[b-jywxoucvm6] { border-left: 3px solid #10b981; }
.detail-header.monk[b-jywxoucvm6] { border-left: 3px solid #8b5cf6; }
.detail-header.barbarian[b-jywxoucvm6] { border-left: 3px solid #dc2626; }

.hero-identity[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.hero-portrait[b-jywxoucvm6] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.portrait-icon[b-jywxoucvm6] {
    font-size: 1.75rem !important;
    color: #ffd700;
}

.hero-info[b-jywxoucvm6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hero-name[b-jywxoucvm6] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffd700;
    margin: 0;
    line-height: 1.2;
}

.hero-meta[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.hero-title[b-jywxoucvm6] {
    font-weight: 600;
    color: #ffd700;
}

.hero-separator[b-jywxoucvm6] {
    color: #475569;
}

.hero-race[b-jywxoucvm6] {
    color: #cbd5e1;
}

.hero-actions[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero-level[b-jywxoucvm6] {
    font-family: 'Cinzel', serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffd700;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
}

.btn-play[b-jywxoucvm6] {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: white !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.btn-play.locked[b-jywxoucvm6] {
    background: linear-gradient(135deg, #475569, #334155) !important;
    color: #94a3b8 !important;
}

@media (max-width: 768px) {
    .hero-actions .btn-play[b-jywxoucvm6] {
        display: none;
    }
}

/* ===== COMBAT READINESS BANNER ===== */
.combat-readiness-banner[b-jywxoucvm6] {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.combat-readiness-banner.grade-a[b-jywxoucvm6] {
    border-left: 4px solid #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
}

.combat-readiness-banner.grade-b[b-jywxoucvm6] {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
}

.combat-readiness-banner.grade-c[b-jywxoucvm6] {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
}

.combat-readiness-banner.grade-d[b-jywxoucvm6] {
    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-jywxoucvm6] {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
}

.readiness-score[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.readiness-icon[b-jywxoucvm6] {
    color: #ffd700;
}

.readiness-content[b-jywxoucvm6] {
    flex: 1;
}

.readiness-label[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.readiness-grade[b-jywxoucvm6] {
    font-family: 'Cinzel', serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffd700;
}

.readiness-percentage[b-jywxoucvm6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
    font-family: 'Cinzel', serif;
}

.readiness-improvements[b-jywxoucvm6] {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.improvements-header[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: #cbd5e1;
    font-size: 0.875rem;
    font-weight: 600;
}

.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: #94a3b8;
    padding-left: 1.25rem;
    position: relative;
}

.improvements-list li[b-jywxoucvm6]::before {
    content: '?';
    position: absolute;
    left: 0;
    color: #ffd700;
}

/* ===== TWO COLUMN LAYOUT ===== */
.detail-content[b-jywxoucvm6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 1200px) {
    .detail-content[b-jywxoucvm6] {
        grid-template-columns: 1fr;
    }
}

.detail-column[b-jywxoucvm6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ===== SECTION STYLING ===== */
.detail-section[b-jywxoucvm6] {
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.875rem;
}

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

/* ===== VITALS - RESOURCE BARS ===== */
.resources[b-jywxoucvm6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.resource-bar[b-jywxoucvm6] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.resource-header[b-jywxoucvm6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.resource-name[b-jywxoucvm6] {
    color: #cbd5e1;
    font-weight: 600;
}

.resource-values[b-jywxoucvm6] {
    color: #94a3b8;
    font-family: monospace;
}

.resource-track[b-jywxoucvm6] {
    height: 8px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.resource-fill[b-jywxoucvm6] {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 3px;
}

.resource-fill.hp[b-jywxoucvm6] {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.resource-fill.mana[b-jywxoucvm6] {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.resource-fill.xp[b-jywxoucvm6] {
    background: linear-gradient(90deg, #ffd700, #f59e0b);
}

/* ===== ATTRIBUTES - DETAILED STATS ===== */
.stats-detailed[b-jywxoucvm6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

@media (max-width: 600px) {
    .stats-detailed[b-jywxoucvm6] {
        grid-template-columns: 1fr;
    }
}

.stat-card-detailed[b-jywxoucvm6] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 0.625rem;
    transition: all 0.2s ease;
}

.stat-card-detailed:hover[b-jywxoucvm6] {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.stat-header-row[b-jywxoucvm6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.stat-name-group[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-abbr[b-jywxoucvm6] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.5px;
}

.stat-full[b-jywxoucvm6] {
    font-size: 0.8125rem;
    color: #cbd5e1;
    font-weight: 500;
}

.stat-value-group[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-score[b-jywxoucvm6] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffd700;
    font-family: 'Cinzel', serif;
}

.stat-mod[b-jywxoucvm6] {
    font-size: 0.875rem;
    color: #94a3b8;
    font-weight: 600;
    font-family: monospace;
}

.stat-description[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.3;
}

/* ===== COMBAT STATS GRID ===== */
.combat-stats-grid[b-jywxoucvm6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

@media (max-width: 600px) {
    .combat-stats-grid[b-jywxoucvm6] {
        grid-template-columns: 1fr;
    }
}

.combat-stat-card[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.combat-stat-card:hover[b-jywxoucvm6] {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-1px);
}

.stat-icon[b-jywxoucvm6] {
    opacity: 0.8;
}

.stat-icon.ac[b-jywxoucvm6] { color: #3b82f6; }
.stat-icon.init[b-jywxoucvm6] { color: #22c55e; }
.stat-icon.attack[b-jywxoucvm6] { color: #ef4444; }
.stat-icon.saves[b-jywxoucvm6] { color: #8b5cf6; }

.stat-info[b-jywxoucvm6] {
    flex: 1;
}

.stat-value-large[b-jywxoucvm6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
    font-family: 'Cinzel', serif;
    line-height: 1;
}

.stat-label-small[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 0.125rem;
}

/* ===== CLASS TIPS ===== */
.class-tips[b-jywxoucvm6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tip-item[b-jywxoucvm6] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #cbd5e1;
    line-height: 1.4;
}

.tip-icon[b-jywxoucvm6] {
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ===== EQUIPMENT - DETAILED ===== */
.equipment-detailed[b-jywxoucvm6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.equip-card[b-jywxoucvm6] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.equip-card.primary[b-jywxoucvm6] {
    padding: 0.875rem;
}

.equip-card.equipped[b-jywxoucvm6] {
    border-color: rgba(34, 197, 94, 0.3);
}

.equip-card.empty[b-jywxoucvm6] {
    border-color: rgba(239, 68, 68, 0.2);
    opacity: 0.6;
}

.equip-card:hover[b-jywxoucvm6] {
    border-color: rgba(255, 215, 0, 0.3);
}

.equip-header[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.equip-icon[b-jywxoucvm6] {
    color: #ffd700;
}

.equip-info[b-jywxoucvm6] {
    flex: 1;
}

.equip-slot[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.equip-name[b-jywxoucvm6] {
    font-size: 0.9375rem;
    color: #cbd5e1;
    font-weight: 600;
    margin-top: 0.125rem;
}

.equip-bonus[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    color: #22c55e;
}

.armor-grid[b-jywxoucvm6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.equip-header-compact[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.equip-icon-sm[b-jywxoucvm6] {
    color: #94a3b8;
}

.equip-info-compact[b-jywxoucvm6] {
    flex: 1;
    min-width: 0;
}

.equip-slot-sm[b-jywxoucvm6] {
    font-size: 0.6875rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.equip-name-sm[b-jywxoucvm6] {
    font-size: 0.8125rem;
    color: #cbd5e1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-summary[b-jywxoucvm6] {
    padding: 0.5rem;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 6px;
    text-align: center;
}

.summary-stat[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

/* ===== ACHIEVEMENTS GRID ===== */
.achievements-grid[b-jywxoucvm6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.achievement-card[b-jywxoucvm6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.875rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.achievement-card:hover[b-jywxoucvm6] {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

.achievement-icon[b-jywxoucvm6] {
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.achievement-icon.kills[b-jywxoucvm6] { color: #ef4444; }
.achievement-icon.wins[b-jywxoucvm6] { color: #ffd700; }
.achievement-icon.bosses[b-jywxoucvm6] { color: #8b5cf6; }
.achievement-icon.quests[b-jywxoucvm6] { color: #22c55e; }

.achievement-value[b-jywxoucvm6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
    font-family: 'Cinzel', serif;
    line-height: 1;
}

.achievement-label[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 0.25rem;
    text-align: center;
}

/* ===== CURRENCY GRID ===== */
.currency-grid[b-jywxoucvm6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.currency-card[b-jywxoucvm6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.currency-card:hover[b-jywxoucvm6] {
    transform: translateY(-1px);
}

.currency-card.gold[b-jywxoucvm6] {
    border-color: rgba(255, 215, 0, 0.3);
}

.currency-card.silver[b-jywxoucvm6] {
    border-color: rgba(192, 192, 192, 0.3);
}

.currency-card.copper[b-jywxoucvm6] {
    border-color: rgba(205, 127, 50, 0.3);
}

.currency-icon[b-jywxoucvm6] {
    opacity: 0.6;
}

.currency-card.gold .currency-icon[b-jywxoucvm6] { color: #ffd700; }
.currency-card.silver .currency-icon[b-jywxoucvm6] { color: #c0c0c0; }
.currency-card.copper .currency-icon[b-jywxoucvm6] { color: #cd7f32; }

.currency-amount[b-jywxoucvm6] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffd700;
    font-family: 'Cinzel', serif;
    line-height: 1;
    margin: 0.375rem 0;
}

.currency-type[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.currency-total[b-jywxoucvm6] {
    padding: 0.5rem;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 6px;
    text-align: center;
    font-size: 0.8125rem;
    color: #94a3b8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-copper[b-jywxoucvm6] {
    color: #cbd5e1;
    font-weight: 600;
}

/* ===== FOOTER ===== */
.detail-footer[b-jywxoucvm6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-top: 1rem;
}

.footer-left[b-jywxoucvm6] {
    flex: 1;
}

.character-motto[b-jywxoucvm6] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.quote-icon[b-jywxoucvm6] {
    color: #ffd700;
    opacity: 0.6;
    flex-shrink: 0;
}

.motto-text[b-jywxoucvm6] {
    font-size: 0.8125rem;
    color: #cbd5e1;
    font-style: italic;
    line-height: 1.4;
}

.footer-right[b-jywxoucvm6] {
    display: flex;
    gap: 0.5rem;
}

.btn-speak[b-jywxoucvm6] {
    color: #cbd5e1 !important;
    transition: all 0.3s ease !important;
}

.btn-speak.speaking[b-jywxoucvm6] {
    color: #22c55e !important;
}

.btn-delete-compact[b-jywxoucvm6] {
    color: #ef4444 !important;
}

/* ===== 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: #f59e0b;
    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: #cbd5e1;
    margin: 0 0 0.5rem 0;
}

.detail-empty-state p[b-jywxoucvm6] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
}

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

    .detail-header[b-jywxoucvm6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .hero-actions[b-jywxoucvm6] {
        width: 100%;
        justify-content: space-between;
    }

    .combat-readiness-banner[b-jywxoucvm6] {
        padding: 0.875rem;
    }

    .readiness-percentage[b-jywxoucvm6] {
        font-size: 1.25rem;
    }

    .stats-detailed[b-jywxoucvm6] {
        gap: 0.5rem;
    }

    .combat-stats-grid[b-jywxoucvm6] {
        gap: 0.5rem;
    }

    .achievements-grid[b-jywxoucvm6] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .currency-grid[b-jywxoucvm6] {
        gap: 0.375rem;
    }

    .detail-footer[b-jywxoucvm6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .footer-right[b-jywxoucvm6] {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .hero-name[b-jywxoucvm6] {
        font-size: 1.125rem;
    }

    .hero-meta[b-jywxoucvm6] {
        font-size: 0.75rem;
    }

    .armor-grid[b-jywxoucvm6] {
        grid-template-columns: 1fr;
    }

    .achievements-grid[b-jywxoucvm6] {
        grid-template-columns: 1fr;
    }
}
/* /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 rgba(255, 215, 0, 0.12);
    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, #ffd700, #daa520);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    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: #ffd700;
    margin: 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.header-subtitle[b-8tilutqcxa] {
    font-size: 0.8rem;
    color: #64748b;
    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, #16a34a, #22c55e) !important;
    color: white !important;
}

.btn-create-header[b-8tilutqcxa] {
    background: linear-gradient(135deg, #ffd700, #daa520) !important;
    color: #0f172a !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 rgba(255, 215, 0, 0.35) !important;
    transform: translateY(-1px);
}

.btn-create-header.disabled[b-8tilutqcxa] {
    background: #334155 !important;
    color: #64748b !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: rgba(255, 215, 0, 0.25);
    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 rgba(255, 215, 0, 0.12);
}

.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);
}

.list-item-avatar[b-4w00ae2ssc] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.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: #ffd700;
    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: #64748b;
    margin: 0;
}

.list-item-level[b-4w00ae2ssc] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffd700;
    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;
    }
    
    .list-item-avatar[b-4w00ae2ssc] {
        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), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.15);
    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: rgba(255, 215, 0, 0.4);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 1));
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.25);
}

.mobile-character-card.selected[b-mcs94j69xw] {
    border-color: rgba(255, 215, 0, 0.6);
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.12), rgba(218, 165, 32, 0.08));
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.25);
    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, #ffd700, #daa520);
    color: #0f172a;
    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 rgba(255, 215, 0, 0.3);
}

.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 rgba(255, 215, 0, 0.3);
}

.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;
}

.mobile-card-avatar[b-mcs94j69xw] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 215, 0, 0.2);
}

.mobile-card-level-badge[b-mcs94j69xw] {
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #0f172a;
    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 rgba(255, 215, 0, 0.4);
    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: #f8fafc;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.premium-star[b-mcs94j69xw] {
    color: #ffd700;
    font-size: 0.7rem !important;
    margin: 0;
}

.premium-star-icon[b-mcs94j69xw] {
    color: #ffd700;
    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: #cbd5e1;
    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: #f59e0b;
    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-bar[b-mcs94j69xw] {
    display: grid;
    grid-template-columns: 35px 1fr 50px;
    align-items: center;
    gap: 0.35rem;
}

.vital-label[b-mcs94j69xw] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
}

.vital-track[b-mcs94j69xw] {
    height: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    overflow: hidden;
    border: 0.5px solid rgba(255, 215, 0, 0.1);
}

.vital-fill[b-mcs94j69xw] {
    height: 100%;
    transition: width 0.3s ease;
}

.vital-fill.hp[b-mcs94j69xw] {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.vital-fill.mana[b-mcs94j69xw] {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.vital-fill.focus[b-mcs94j69xw] {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.vital-fill.ki[b-mcs94j69xw] {
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.vital-value[b-mcs94j69xw] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #cbd5e1;
    text-align: right;
}

/* 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;
}

.item-avatar[b-ypdciz4wut] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    box-shadow: var(--shadow-lg);
    border: 3px solid var(--color-border-base);
    flex-shrink: 0;
    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/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 rgba(255, 215, 0, 0.2);
    border-top: 2px solid rgba(255, 215, 0, 0.4);
    padding: 10px 16px;
    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: rgba(255, 215, 0, 0.4);
    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 */
@media (max-width: 768px) {
    .adventure-waypoint-info[b-uwhaqyzxcm] {
        padding: 8px 12px;
        min-height: 42px;
        min-width: unset;
        max-width: unset;
        width: 100%;
    }

    .adventure-waypoint-header[b-uwhaqyzxcm] {
        gap: 8px;
    }

    .adventure-name[b-uwhaqyzxcm] {
        font-size: 0.8rem;
    }

    .waypoint-name[b-uwhaqyzxcm] {
        font-size: 0.72rem;
    }
}

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

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

    .waypoint-divider[b-uwhaqyzxcm] {
        display: none;
    }

    .adventure-name[b-uwhaqyzxcm] {
        font-size: 0.75rem;
    }

    .waypoint-name[b-uwhaqyzxcm] {
        font-size: 0.68rem;
    }
}
/* /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 rgba(255, 215, 0, 0.2);
    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);
}

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

.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, rgba(255, 215, 0, 0.35), 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, rgba(255, 215, 0, 0.25), transparent);
}

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

/* ===== 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.12);
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(25, 33, 55, 0.9), rgba(12, 16, 32, 0.95));
    color: #cbd5e1;
    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: #fca5a5;
}

.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: #fecaca;
}

.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: #93c5fd;
}

.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: #bfdbfe;
}

.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: #6ee7b7;
}

.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: #a7f3d0;
}

/* ===== 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: #fcd34d;
}

.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: #fde68a;
}

/* 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: #f9a8d4;
}

.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: #fbcfe8;
}

/* 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: #fca5a5;
}

.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: #fecaca;
}

.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: #c4b5fd;
}

.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: #ddd6fe;
}

/* 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: #67e8f9;
}

.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: #a5f3fc;
}

/* 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: #a5b4fc;
}

.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: #c7d2fe;
}

/* ===== 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: #fbbf24;
}

.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: #fde68a;
}

/* ===== 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 #0a0f1e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.action-badge.count[b-x875gdys2p] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.action-badge.mana[b-x875gdys2p] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.action-badge.cooldown[b-x875gdys2p] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #e2e8f0;
}

.action-badge.ready[b-x875gdys2p] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    animation: pulse-badge-b-x875gdys2p 1.5s ease-in-out infinite;
}

@keyframes pulse-badge-b-x875gdys2p {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0   rgba(245, 158, 11, 0.5); }
    50%       { transform: scale(1.18); box-shadow: 0 0 12px rgba(245, 158, 11, 0.85); }
}

/* =========================================================
   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;
    }
}
/* /Components/Combat/FocusMonsterPanel.razor.rz.scp.css */
/* =====================================================
   MONSTER PANEL - FOCUS MODE
   BG3-Inspired Design with Initiative Tracker
   ===================================================== */

/* CSS Variables for theming */
:root[b-wah4937br2] {
    --mp-bg-deep: #0a0c10;
    --mp-bg-panel: #12151c;
    --mp-bg-card: #1a1e28;
    --mp-bg-hover: #242936;
    --mp-border-subtle: #2a3040;
    --mp-border-gold: #c9a227;
    --mp-border-gold-dim: #8a7019;
    --mp-text-primary: #e8e6e1;
    --mp-text-secondary: #9a9590;
    --mp-text-muted: #5a5550;
    --mp-gold: #ffd700;
    --mp-gold-light: #ffe066;
    --mp-health-green: #4ade80;
    --mp-health-yellow: #facc15;
    --mp-health-orange: #fb923c;
    --mp-health-red: #ef4444;
    --mp-damage-red: #ff6b6b;
    --mp-heal-green: #69db7c;
    --mp-enemy-glow: rgba(239, 68, 68, 0.3);
    --mp-boss-glow: rgba(245, 158, 11, 0.4);
}

/* ===== MONSTER PANEL CONTAINER ===== */
.monster-panel[b-wah4937br2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.focused-monster[b-wah4937br2] {
    min-width: 320px; /* Prevent content from collapsing */
}

.actions-row[b-wah4937br2] {
    flex-wrap: wrap; /* Allow buttons to wrap on small widths */
}

.action-btn[b-wah4937br2] {
    min-width: 120px; /* Ensure buttons don't get too small */
}

.monster-panel[b-wah4937br2]::-webkit-scrollbar {
    width: 6px;
}

.monster-panel[b-wah4937br2]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.monster-panel[b-wah4937br2]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 3px;
}

/* ===== INITIATIVE TRACKER ===== */
.initiative-tracker[b-wah4937br2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(18, 21, 28, 0.95) 0%, rgba(10, 12, 16, 0.98) 100%);
    border: 1px solid var(--mp-border-subtle);
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

    .initiative-tracker[b-wah4937br2]::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 30px;
        padding: 1px;
        background: linear-gradient(90deg, transparent, var(--mp-border-gold-dim), transparent);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }

.turn-label[b-wah4937br2] {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mp-text-muted);
    text-transform: uppercase;
    padding-right: 12px;
    border-right: 1px solid var(--mp-border-subtle);
    white-space: nowrap;
}

.initiative-slot[b-wah4937br2] {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--mp-border-subtle);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    background: var(--mp-bg-card);
}

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

    .initiative-slot.active[b-wah4937br2] {
        border-color: var(--mp-gold);
        box-shadow: 0 0 0 3px var(--mp-gold), 0 0 20px var(--mp-gold), 0 0 40px rgba(255, 215, 0, 0.4);
        transform: scale(1.15);
        z-index: 2;
    }

        .initiative-slot.active[b-wah4937br2]::before {
            content: '';
            position: absolute;
            inset: -6px;
            border: 2px solid var(--mp-gold);
            border-radius: 50%;
            animation: active-turn-ring-b-wah4937br2 1.5s ease-in-out infinite;
        }

        .initiative-slot.active[b-wah4937br2]::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 2px solid var(--mp-gold-light);
            border-radius: 50%;
            animation: initiative-pulse-b-wah4937br2 2s ease-out infinite;
        }

@keyframes active-turn-ring-b-wah4937br2 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes initiative-pulse-b-wah4937br2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.player-initial[b-wah4937br2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mp-gold);
    background: linear-gradient(135deg, #1a1e28 0%, #0a0c10 100%);
    text-transform: uppercase;
}

.initiative-slot.player.active .player-initial[b-wah4937br2] {
    color: #fff;
    text-shadow: 0 0 10px var(--mp-gold);
}

.initiative-slot.enemy[b-wah4937br2] {
    border-color: rgba(239, 68, 68, 0.5);
}

    .initiative-slot.enemy.active[b-wah4937br2] {
        border-color: var(--mp-health-red);
        box-shadow: 0 0 16px var(--mp-health-red), 0 0 32px rgba(239, 68, 68, 0.3);
    }

.initiative-slot.player[b-wah4937br2] {
    border-color: rgba(74, 222, 128, 0.5);
}

    .initiative-slot.player.active[b-wah4937br2] {
        border-color: var(--mp-health-green);
        box-shadow: 0 0 16px var(--mp-health-green), 0 0 32px rgba(74, 222, 128, 0.3);
    }

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

.initiative-slot:hover:not(.active):not(.defeated)[b-wah4937br2] {
    transform: scale(1.08);
    border-color: var(--mp-text-secondary);
}

.initiative-slot .init-value[b-wah4937br2] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--mp-bg-deep);
    border: 1px solid var(--mp-border-subtle);
    border-radius: 8px;
    padding: 1px 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--mp-text-secondary);
}

.initiative-slot .defeated-marker[b-wah4937br2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: var(--mp-health-red);
    font-size: 20px;
    font-weight: bold;
}

.initiative-divider[b-wah4937br2] {
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, transparent, var(--mp-border-gold-dim), transparent);
    margin: 0 4px;
}

/* ===== FOCUSED MONSTER DISPLAY ===== */
.focused-monster[b-wah4937br2] {
    position: relative;
    background: var(--mp-bg-panel);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--mp-border-subtle);
    transition: all 0.3s ease;
}

    .focused-monster[b-wah4937br2]::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at top center, var(--mp-enemy-glow) 0%, transparent 60%);
        pointer-events: none;
        z-index: 1;
    }

    .focused-monster.boss[b-wah4937br2]::before {
        background: radial-gradient(ellipse at top center, var(--mp-boss-glow) 0%, transparent 60%);
    }

    .focused-monster.boss[b-wah4937br2] {
        border-color: rgba(245, 158, 11, 0.4);
    }

    .focused-monster.defeated[b-wah4937br2] {
        opacity: 0.6;
        filter: grayscale(50%);
    }

/* Ambient Particles */
.monster-ambient-effects[b-wah4937br2] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.particle[b-wah4937br2] {
    position: absolute;
    bottom: 20%;
    width: 4px;
    height: 4px;
    background: var(--mp-gold);
    border-radius: 50%;
    opacity: 0;
    animation: float-particle-b-wah4937br2 4s ease-in-out infinite;
}

@keyframes float-particle-b-wah4937br2 {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }

    10% {
        opacity: 0.6;
        transform: scale(1);
    }

    90% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: translateY(-120px) scale(0.5);
    }
}

/* Monster Image Container */
.monster-image-container[b-wah4937br2] {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.monster-image[b-wah4937br2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.focused-monster:hover .monster-image[b-wah4937br2] {
    transform: scale(1.03);
}

.monster-vignette[b-wah4937br2] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 12, 16, 0.4) 100%), linear-gradient(to bottom, transparent 40%, var(--mp-bg-panel) 100%);
    pointer-events: none;
}

/* Badges */
.creature-type[b-wah4937br2] {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(10, 12, 16, 0.85);
    backdrop-filter: blur(8px);
    padding: 5px 12px;
    border-radius: 16px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    color: var(--mp-text-secondary);
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 3;
    border: 1px solid var(--mp-border-subtle);
}

.level-badge[b-wah4937br2] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--mp-border-gold) 0%, var(--mp-border-gold-dim) 100%);
    padding: 5px 14px;
    border-radius: 16px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--mp-bg-deep);
    letter-spacing: 1px;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.boss-crown[b-wah4937br2] {
    position: absolute;
    top: 48px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.5);
}

.enemy-turn-indicator[b-wah4937br2] {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(185, 28, 28, 0.9));
    padding: 6px 16px;
    border-radius: 20px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    color: white;
    letter-spacing: 1px;
    z-index: 3;
    animation: enemy-turn-pulse-b-wah4937br2 1.5s ease-in-out infinite;
}

@keyframes enemy-turn-pulse-b-wah4937br2 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    }

    50% {
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.8), 0 0 40px rgba(239, 68, 68, 0.4);
    }
}

/* Monster Info Overlay */
.monster-info-overlay[b-wah4937br2] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 3;
}

.monster-name[b-wah4937br2] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mp-text-primary);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    margin: 0 0 8px 0;
    letter-spacing: 1px;
}

/* Status Effects */
.status-effects[b-wah4937br2] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.status-effect[b-wah4937br2] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    font-size: 11px;
    color: var(--mp-text-secondary);
    border: 1px solid var(--mp-border-subtle);
    position: relative;
}

    .status-effect.debuff[b-wah4937br2] {
        border-color: rgba(239, 68, 68, 0.5);
        color: var(--mp-health-red);
    }

    .status-effect.buff[b-wah4937br2] {
        border-color: rgba(74, 222, 128, 0.5);
        color: var(--mp-health-green);
    }

    .status-effect.more[b-wah4937br2] {
        background: rgba(100, 100, 100, 0.4);
        color: var(--mp-text-muted);
    }

    .status-effect .effect-duration[b-wah4937br2] {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        font-weight: 600;
    }

/* Health Bar */
.health-bar-container[b-wah4937br2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    width: 100%;
}

.health-bar-bg[b-wah4937br2] {
    flex: 1;
    height: 26px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    overflow: visible; /* Changed from hidden to allow glow */
    position: relative;
    border: 1px solid var(--mp-border-subtle);
    min-width: 100px;
}

.health-bar-fill[b-wah4937br2] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    min-width: 4px; /* Always visible when HP > 0 */
    background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
}

.health-bar-fill.warning[b-wah4937br2] {
    background: linear-gradient(90deg, #facc15 0%, #eab308 100%);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
}

.health-bar-fill.danger[b-wah4937br2] {
    background: linear-gradient(90deg, #fb923c 0%, #ea580c 100%);
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.6);
}

.health-bar-fill.critical[b-wah4937br2] {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
    animation: health-critical-pulse-b-wah4937br2 1s ease-in-out infinite;
}

@keyframes health-critical-pulse-b-wah4937br2 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.health-text[b-wah4937br2] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--mp-text-primary);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Defeated Overlay */
.defeated-overlay-full[b-wah4937br2] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--mp-text-secondary);
    z-index: 10;
}

    .defeated-overlay-full span[b-wah4937br2] {
        font-family: 'Cinzel', serif;
        font-size: 1.5rem;
        font-weight: 600;
        margin-top: 0.5rem;
        letter-spacing: 3px;
    }

/* Damage Overlay */
.damage-overlay[b-wah4937br2] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 9;
    animation: damage-fade-in-b-wah4937br2 0.2s ease-out, damage-fade-out-b-wah4937br2 0.3s ease-in 0.7s forwards;
}

.damage-amount[b-wah4937br2] {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ff6b6b;
    text-shadow: 0 0 20px rgba(255, 107, 107, 0.8), 0 2px 10px rgba(0, 0, 0, 0.8);
    animation: damage-bounce-b-wah4937br2 0.4s ease-out;
}

.damage-source[b-wah4937br2] {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #60a5fa;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes damage-fade-in-b-wah4937br2 {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes damage-fade-out-b-wah4937br2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes damage-bounce-b-wah4937br2 {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* Roster Damage Overlay */
.roster-damage-overlay[b-wah4937br2] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    animation: damage-fade-in-b-wah4937br2 0.2s ease-out, damage-fade-out-b-wah4937br2 0.3s ease-in 0.7s forwards;
}

.roster-damage-amount[b-wah4937br2] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.8), 0 2px 6px rgba(0, 0, 0, 0.8);
    animation: damage-bounce-b-wah4937br2 0.4s ease-out;
}

/* ===== STATS ROW ===== */
.stats-row[b-wah4937br2] {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 20px;
    background: var(--mp-bg-card);
    border-top: 1px solid var(--mp-border-subtle);
    gap: 24px;
}

.stat-card[b-wah4937br2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
}

    .stat-card .stat-icon[b-wah4937br2] {
        font-size: 1.25rem;
    }

    /* Icon colors by stat type */
    .stat-card:nth-child(1) .stat-icon[b-wah4937br2] {
        color: #60a5fa; /* Blue for AC */
    }

    .stat-card:nth-child(2) .stat-icon[b-wah4937br2] {
        color: #f87171; /* Red for Damage */
    }

    .stat-card:nth-child(3) .stat-icon[b-wah4937br2] {
        color: #4ade80; /* Green for Speed */
    }

.stat-value[b-wah4937br2] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mp-text-primary);
}

.stat-label[b-wah4937br2] {
    display: none; /* Hide labels for cleaner look like mobile */
}

/* ===== ACTION BUTTONS ===== */
.actions-row[b-wah4937br2] {
    display: flex;
    gap: 10px;
    padding: 12px 20px 20px;
    background: var(--mp-bg-card);
}

.action-btn[b-wah4937br2] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

    .action-btn.attack[b-wah4937br2] {
        background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
        color: white;
        box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
    }

        .action-btn.attack:hover[b-wah4937br2] {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(220, 38, 38, 0.5);
        }

        .action-btn.attack:active[b-wah4937br2] {
            transform: translateY(0);
        }

    .action-btn.spell[b-wah4937br2] {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        color: white;
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    }

        .action-btn.spell:hover[b-wah4937br2] {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5);
        }

        .action-btn.spell:active[b-wah4937br2] {
            transform: translateY(0);
        }

/* ===== LORE SECTION ===== */
.lore-section[b-wah4937br2] {
    border-top: 1px solid var(--mp-border-subtle);
    background: var(--mp-bg-card);
}

.lore-toggle[b-wah4937br2] {
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease;
    color: var(--mp-gold);
}

    .lore-toggle:hover[b-wah4937br2] {
        background: var(--mp-bg-hover);
    }

.lore-toggle-left[b-wah4937br2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .lore-toggle-left span[b-wah4937br2] {
        font-family: 'Cinzel', serif;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

.lore-chevron[b-wah4937br2] {
    transition: transform 0.3s ease;
}

.lore-toggle.expanded .lore-chevron[b-wah4937br2] {
    transform: rotate(180deg);
}

.lore-content[b-wah4937br2] {
    padding: 0 20px 16px;
    animation: lore-expand-b-wah4937br2 0.3s ease-out;
}

    .lore-content p[b-wah4937br2] {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.7;
        color: var(--mp-text-secondary);
        font-style: italic;
        border-left: 2px solid var(--mp-border-gold-dim);
        padding-left: 12px;
    }

@keyframes lore-expand-b-wah4937br2 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== NO ENEMIES DISPLAY ===== */
.no-enemies-display[b-wah4937br2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    background: var(--mp-bg-panel);
    border-radius: 16px;
    border: 1px solid var(--mp-border-subtle);
    color: var(--mp-health-green);
}

    .no-enemies-display span[b-wah4937br2] {
        font-family: 'Cinzel', serif;
        font-size: 1.25rem;
        letter-spacing: 1px;
    }

/* ===== ENEMY ROSTER ===== */
.enemy-roster[b-wah4937br2] {
    padding: 14px;
    background: var(--mp-bg-panel);
    border-radius: 12px;
    border: 1px solid var(--mp-border-subtle);
}

.roster-header[b-wah4937br2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.roster-title[b-wah4937br2] {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mp-text-muted);
}

.roster-count[b-wah4937br2] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--mp-text-secondary);
}

.roster-grid[b-wah4937br2] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
}

    .roster-grid[b-wah4937br2]::-webkit-scrollbar {
        height: 4px;
    }

    .roster-grid[b-wah4937br2]::-webkit-scrollbar-thumb {
        background: var(--mp-border-gold-dim);
        border-radius: 2px;
    }

.roster-enemy[b-wah4937br2] {
    flex-shrink: 0;
    width: 90px;
    background: var(--mp-bg-card);
    border-radius: 8px;
    border: 2px solid var(--mp-border-subtle);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .roster-enemy:hover:not(.defeated)[b-wah4937br2] {
        border-color: var(--mp-text-secondary);
        transform: translateY(-2px);
    }

    .roster-enemy.selected[b-wah4937br2] {
        border-color: var(--mp-gold);
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
    }

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

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

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

.roster-defeated-overlay[b-wah4937br2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: var(--mp-health-red);
    font-size: 24px;
    font-weight: bold;
}

.roster-turn-indicator[b-wah4937br2] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    background: var(--mp-health-red);
    border-radius: 50%;
    animation: roster-turn-pulse-b-wah4937br2 1s ease-in-out infinite;
}

@keyframes roster-turn-pulse-b-wah4937br2 {
    0%, 100% {
        box-shadow: 0 0 4px var(--mp-health-red);
    }

    50% {
        box-shadow: 0 0 10px var(--mp-health-red), 0 0 16px var(--mp-health-red);
    }
}

.roster-enemy-info[b-wah4937br2] {
    padding: 6px 8px;
    text-align: center;
}

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

.roster-enemy-hp[b-wah4937br2] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 2;
}

.roster-enemy-hp-fill[b-wah4937br2] {
    height: 100%;
    background: var(--mp-health-green);
    transition: width 0.3s ease;
}

    .roster-enemy-hp-fill.warning[b-wah4937br2] {
        background: var(--mp-health-yellow);
    }

    .roster-enemy-hp-fill.danger[b-wah4937br2] {
        background: var(--mp-health-orange);
    }

    .roster-enemy-hp-fill.critical[b-wah4937br2] {
        background: var(--mp-health-red);
    }

/* ===== FLOATING DAMAGE ===== */
.floating-damage-container[b-wah4937br2] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
}

.floating-damage[b-wah4937br2] {
    position: absolute;
    font-family: 'Cinzel', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--mp-damage-red);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 16px var(--mp-damage-red);
    animation: float-damage-b-wah4937br2 1.2s ease-out forwards;
}

@keyframes float-damage-b-wah4937br2 {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    20% {
        transform: translateY(-15px) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}

/* ===== ANIMATIONS ===== */
.focused-monster.taking-damage[b-wah4937br2] {
    animation: monster-damage-shake-b-wah4937br2 0.4s ease-out;
}

.focused-monster.critical-hit[b-wah4937br2] {
    animation: monster-critical-flash-b-wah4937br2 0.6s ease-out;
}

.focused-monster.dying[b-wah4937br2] {
    animation: monster-death-b-wah4937br2 0.8s ease-out forwards;
}

@keyframes monster-damage-shake-b-wah4937br2 {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-4px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(4px);
    }
}

@keyframes monster-critical-flash-b-wah4937br2 {
    0% {
        filter: brightness(1);
    }

    25% {
        filter: brightness(1.5);
        box-shadow: 0 0 30px var(--mp-gold);
    }

    50% {
        filter: brightness(0.8);
    }

    100% {
        filter: brightness(1);
    }
}

@keyframes monster-death-b-wah4937br2 {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.98);
        filter: grayscale(50%);
    }

    100% {
        opacity: 0.5;
        transform: scale(0.98);
        filter: grayscale(80%);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1366px) {
    .monster-name[b-wah4937br2] {
        font-size: 1.5rem;
    }

    .stats-row[b-wah4937br2] {
        padding: 12px 16px;
    }

    .stat-value[b-wah4937br2] {
        font-size: 1.1rem;
    }

    .initiative-slot[b-wah4937br2] {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 1023px) {
    .initiative-tracker[b-wah4937br2] {
        padding: 8px 12px;
        gap: 6px;
    }

    .initiative-slot[b-wah4937br2] {
        width: 36px;
        height: 36px;
    }

    .turn-label[b-wah4937br2] {
        font-size: 10px;
        padding-right: 10px;
    }

    .monster-name[b-wah4937br2] {
        font-size: 1.35rem;
    }

    .action-btn[b-wah4937br2] {
        padding: 12px 16px;
        font-size: 12px;
    }

    .roster-enemy[b-wah4937br2] {
        width: 80px;
    }
}

@media (max-width: 767px) {
    .initiative-tracker[b-wah4937br2] {
        border-radius: 20px;
    }

    .initiative-slot[b-wah4937br2] {
        width: 32px;
        height: 32px;
    }

    .turn-label[b-wah4937br2] {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .monster-image-container[b-wah4937br2] {
        aspect-ratio: 4/3;
    }

    .monster-name[b-wah4937br2] {
        font-size: 1.2rem;
    }

    .stats-row[b-wah4937br2] {
        flex-wrap: wrap;
    }

    .stat-card[b-wah4937br2] {
        min-width: calc(33% - 8px);
    }

    .actions-row[b-wah4937br2] {
        flex-direction: column;
    }

    .roster-enemy[b-wah4937br2] {
        width: 70px;
    }

    .roster-enemy-name[b-wah4937br2] {
        font-size: 8px;
    }
}
/* /Components/Combat/InitiativeTracker.razor.rz.scp.css */
/* Desktop Initiative Tracker */
.initiative-tracker[b-el113q63ts] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 16px;
}

.turn-label[b-el113q63ts] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.initiative-slots[b-el113q63ts] {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.initiative-slot[b-el113q63ts] {
    position: relative;
    width: 48px;
    height: 48px;
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.initiative-slot:hover[b-el113q63ts] {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.3);
}

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

.initiative-slot.player[b-el113q63ts] {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.2);
}

.initiative-slot.enemy[b-el113q63ts] {
    border-color: rgba(239, 68, 68, 0.3);
}

.initiative-slot.active[b-el113q63ts] {
    border-color: #fbbf24;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.6);
    animation: turnPulse-b-el113q63ts 1.5s ease-in-out infinite;
}

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

.player-initial[b-el113q63ts] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    font-weight: 700;
    color: #3b82f6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.defeated-marker[b-el113q63ts] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ef4444;
    font-weight: 700;
}

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

@keyframes turnPulse-b-el113q63ts {
    0%, 100% { 
        box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
    }
    50% { 
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.8);
    }
}

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

.initiative-tracker.mobile .turn-label[b-el113q63ts] {
    font-size: 0.75rem;
}

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

.initiative-tracker.mobile .initiative-slot[b-el113q63ts] {
    width: 36px;
    height: 36px;
    min-width: 36px;
}

.initiative-tracker.mobile .player-initial[b-el113q63ts] {
    font-size: 1rem;
}

.initiative-tracker.mobile .defeated-marker[b-el113q63ts] {
    font-size: 1rem;
}
/* /Components/Combat/LevelUpDisplay.razor.rz.scp.css */
/* ===================================
   LEVEL UP BANNER
   =================================== */

.level-up-banner[b-j42zlpqp4g] {
    background: linear-gradient(145deg, 
        rgba(34, 197, 94, 0.15), 
        rgba(34, 197, 94, 0.05));
    border: 2px solid var(--color-success);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    animation: banner-glow-b-j42zlpqp4g 2s ease-in-out infinite;
}

.level-up-banner.milestone[b-j42zlpqp4g] {
    background: linear-gradient(145deg, 
        rgba(255, 215, 0, 0.2), 
        rgba(255, 215, 0, 0.05));
    border-color: var(--color-primary);
    animation: milestone-glow-b-j42zlpqp4g 2s ease-in-out infinite;
}

.banner-content[b-j42zlpqp4g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xl);
}

.banner-left[b-j42zlpqp4g] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.banner-icon[b-j42zlpqp4g] {
    color: var(--color-success);
    font-size: 2.5rem !important;
    flex-shrink: 0;
}

.milestone .banner-icon[b-j42zlpqp4g] {
    color: var(--color-primary);
}

.banner-text[b-j42zlpqp4g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.banner-title[b-j42zlpqp4g] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.banner-level[b-j42zlpqp4g] {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1;
}

.milestone-icon[b-j42zlpqp4g] {
    color: var(--color-primary);
    font-size: 2rem !important;
    animation: trophy-spin-b-j42zlpqp4g 3s ease-in-out infinite;
}

.view-details-btn[b-j42zlpqp4g] {
    border-color: var(--color-border-hover) !important;
    color: var(--color-text-primary) !important;
    transition: all var(--transition-base);
}

.view-details-btn:hover[b-j42zlpqp4g] {
    border-color: var(--color-primary) !important;
    background: rgba(255, 215, 0, 0.1) !important;
    transform: translateY(-2px);
}

/* Animations */
@keyframes banner-glow-b-j42zlpqp4g {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); 
    }
    50% { 
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.5); 
    }
}

@keyframes milestone-glow-b-j42zlpqp4g {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); 
    }
    50% { 
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); 
    }
}

@keyframes trophy-spin-b-j42zlpqp4g {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-15deg) scale(1.1); }
    50% { transform: rotate(0deg) scale(1); }
    75% { transform: rotate(15deg) scale(1.1); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .banner-content[b-j42zlpqp4g] {
        flex-direction: column;
        text-align: center;
    }

    .banner-left[b-j42zlpqp4g] {
        flex-direction: column;
        width: 100%;
    }

    .view-details-btn[b-j42zlpqp4g] {
        width: 100%;
    }
}

/* ===================================
   LEVEL UP MODAL
   =================================== */

.level-up-modal-overlay[b-j42zlpqp4g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    animation: fade-in-b-j42zlpqp4g 0.2s ease-out;
}

.level-up-modal[b-j42zlpqp4g] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
    animation: slide-up-b-j42zlpqp4g 0.3s ease-out;
}

/* Modal Header */
.modal-header[b-j42zlpqp4g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xl);
    border-bottom: 1px solid var(--color-border-base);
}

.modal-title-section[b-j42zlpqp4g] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.modal-title-icon[b-j42zlpqp4g] {
    color: var(--color-success);
    font-size: 2rem !important;
}

.modal-title[b-j42zlpqp4g] {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

/* Modal Content */
.modal-content[b-j42zlpqp4g] {
    padding: var(--space-xl);
    overflow-y: auto;
    flex: 1;
}

/* Milestone Banner */
.milestone-banner[b-j42zlpqp4g] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: linear-gradient(145deg, 
        rgba(255, 215, 0, 0.15), 
        rgba(255, 215, 0, 0.05));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.milestone-banner-icon[b-j42zlpqp4g] {
    color: var(--color-primary);
    font-size: 2.5rem !important;
    flex-shrink: 0;
}

.milestone-banner-title[b-j42zlpqp4g] {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.milestone-banner-subtitle[b-j42zlpqp4g] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
}

/* Growth Section */
.growth-section[b-j42zlpqp4g] {
    margin-bottom: var(--space-xl);
}

.section-title[b-j42zlpqp4g] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-lg);
}

/* Growth Table */
.growth-table[b-j42zlpqp4g] {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.growth-table-header[b-j42zlpqp4g],
.growth-table-row[b-j42zlpqp4g] {
    display: grid;
    grid-template-columns: 1.5fr 0.75fr 0.5fr 0.75fr 0.75fr;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    align-items: center;
}

.growth-table-header[b-j42zlpqp4g] {
    background: var(--color-bg-elevated-alt);
    border-bottom: 1px solid var(--color-border-base);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.growth-table-row[b-j42zlpqp4g] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.growth-table-row:last-child[b-j42zlpqp4g] {
    border-bottom: none;
}

.growth-table-row:hover[b-j42zlpqp4g] {
    background: rgba(255, 255, 255, 0.02);
}

.growth-col[b-j42zlpqp4g] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.stat-col[b-j42zlpqp4g] {
    color: var(--color-text-primary);
}

.value-col[b-j42zlpqp4g] {
    justify-content: flex-end;
    color: var(--color-text-secondary);
}

.arrow-col[b-j42zlpqp4g] {
    justify-content: center;
    color: var(--color-text-muted);
}

.gain-col[b-j42zlpqp4g] {
    justify-content: center;
}

.gain-badge[b-j42zlpqp4g] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
}

/* Bonus Cards */
.bonus-card[b-j42zlpqp4g] {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    border: 1px solid;
}

.bonus-card:last-child[b-j42zlpqp4g] {
    margin-bottom: 0;
}

.bonus-card-header[b-j42zlpqp4g] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.bonus-card-text[b-j42zlpqp4g] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-left: calc(1.5rem + var(--space-md));
}

.bonus-badge[b-j42zlpqp4g] {
    background: rgba(255, 255, 255, 0.1);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    margin-left: auto;
}

/* Stat Points Card */
.bonus-card.stat-points[b-j42zlpqp4g] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.bonus-card.stat-points .bonus-card-header[b-j42zlpqp4g] {
    color: var(--color-warning);
}

/* Spells Card */
.bonus-card.spells[b-j42zlpqp4g] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.bonus-card.spells .bonus-card-header[b-j42zlpqp4g] {
    color: var(--color-info);
}

/* Available Points Card */
.bonus-card.available-points[b-j42zlpqp4g] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.bonus-card.available-points .bonus-card-header[b-j42zlpqp4g] {
    color: var(--color-info);
}

/* Milestone Bonus Card */
.bonus-card.milestone-bonus[b-j42zlpqp4g] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.bonus-card.milestone-bonus .bonus-card-header[b-j42zlpqp4g] {
    color: var(--color-success);
}

/* Modal Footer */
.modal-footer[b-j42zlpqp4g] {
    padding: var(--space-xl);
    border-top: 1px solid var(--color-border-base);
}

/* Animations */
@keyframes fade-in-b-j42zlpqp4g {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-up-b-j42zlpqp4g {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .level-up-modal[b-j42zlpqp4g] {
        max-height: 95vh;
        margin: var(--space-md);
    }

    .modal-header[b-j42zlpqp4g],
    .modal-content[b-j42zlpqp4g],
    .modal-footer[b-j42zlpqp4g] {
        padding: var(--space-lg);
    }

    .growth-table-header[b-j42zlpqp4g],
    .growth-table-row[b-j42zlpqp4g] {
        grid-template-columns: 1fr 0.6fr 0.4fr 0.6fr 0.6fr;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        font-size: 0.875rem;
    }

    .growth-table-header[b-j42zlpqp4g] {
        font-size: 0.7rem;
    }
}


/* /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: #ffd700;
}

.consumable-empty-state[b-t8ytr3yszx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    color: #94a3b8;
}

.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, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 215, 0, 0.15);
    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: rgba(255, 215, 0, 0.3);
    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: #4ade80;
    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, #4ade80, 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 #94a3b8;
}

.consumable-card.rarity-uncommon[b-t8ytr3yszx] {
    border-left: 3px solid #22c55e;
}

.consumable-card.rarity-rare[b-t8ytr3yszx] {
    border-left: 3px solid #3b82f6;
}

.consumable-card.rarity-epic[b-t8ytr3yszx] {
    border-left: 3px solid #a855f7;
}

.consumable-card.rarity-legendary[b-t8ytr3yszx] {
    border-left: 3px solid #f59e0b;
    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: #fbbf24;
    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: #94a3b8;
    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: #fca5a5 !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: #93c5fd !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: #fcd34d !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: #c4b5fd !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: #86efac !important;
}

.consumable-type[b-t8ytr3yszx] {
    display: flex;
    align-items: center;
    color: #64748b;
    font-size: 0.75rem;
}

/* Rarity chip styling */
.rarity-chip-common[b-t8ytr3yszx] {
    background: rgba(148, 163, 184, 0.2) !important;
    color: #94a3b8 !important;
}

.rarity-chip-uncommon[b-t8ytr3yszx] {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

.rarity-chip-rare[b-t8ytr3yszx] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !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: #fbbf24 !important;
    font-weight: 600 !important;
}

/* Button styling */
.btn-cancel-consumable[b-t8ytr3yszx] {
    color: #94a3b8 !important;
}

.btn-cancel-consumable:hover:not(:disabled)[b-t8ytr3yszx] {
    background: rgba(255, 215, 0, 0.1) !important;
    color: #ffd700 !important;
}

/* Custom scrollbar */
.consumable-list[b-t8ytr3yszx]::-webkit-scrollbar {
    width: 8px;
}

.consumable-list[b-t8ytr3yszx]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.consumable-list[b-t8ytr3yszx]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    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 Styles */

.formation-zone-card[b-pc6jqeqxsb],
.formation-zone-card-selected[b-pc6jqeqxsb],
.formation-zone-card-disabled[b-pc6jqeqxsb] {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.formation-zone-card:hover[b-pc6jqeqxsb] {
    transform: translateY(-4px);
    border-color: var(--mud-palette-primary);
}

.formation-zone-card-selected[b-pc6jqeqxsb] {
    border-color: var(--mud-palette-success);
    background-color: rgba(76, 175, 80, 0.1);
}

.formation-zone-card-disabled[b-pc6jqeqxsb] {
    cursor: not-allowed !important;
    opacity: 0.5;
}

.formation-zone-card-disabled:hover[b-pc6jqeqxsb] {
    transform: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .formation-zone-card[b-pc6jqeqxsb],
    .formation-zone-card-selected[b-pc6jqeqxsb],
    .formation-zone-card-disabled[b-pc6jqeqxsb] {
        min-height: 150px;
    }
}
/* /Components/Combat/Modals/SpellModal.razor.rz.scp.css */
/* SpellModal.razor.css - Mobile-First Design */

/* ========================================
   Mana Header (Sticky)
   ======================================== */
.spell-modal-mana-header[b-f8cghy0244] {
    position: sticky;
    top: 0;
    background: var(--color-bg-elevated);
    backdrop-filter: blur(10px);
    padding: var(--space-md) var(--space-lg);
    margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-lg);
    border-bottom: 1px solid var(--color-border-base);
    z-index: 10;
}

/* ========================================
   Spell List (Mobile-First: Vertical Stack)
   ======================================== */
.spell-modal-list[b-f8cghy0244] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 500px;
    overflow-y: auto;
    padding: var(--space-xs);
}

/* Scrollbar styling */
.spell-modal-list[b-f8cghy0244]::-webkit-scrollbar {
    width: 8px;
}

.spell-modal-list[b-f8cghy0244]::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.spell-modal-list[b-f8cghy0244]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: var(--radius-md);
}

.spell-modal-list[b-f8cghy0244]::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}

/* ========================================
   Spell Card (Mobile-First)
   ======================================== */
.spell-modal-card[b-f8cghy0244] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: all var(--transition-fast);
}

.spell-modal-card.spell-castable[b-f8cghy0244] {
    cursor: pointer;
    border-color: rgba(255, 215, 0, 0.3);
}

.spell-modal-card.spell-castable:active[b-f8cghy0244] {
    transform: scale(0.98);
    background: rgba(255, 215, 0, 0.05);
}

.spell-modal-card.spell-disabled[b-f8cghy0244] {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--color-border-base);
}

/* ========================================
   Spell Header
   ======================================== */
.spell-modal-header[b-f8cghy0244] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.spell-modal-name[b-f8cghy0244] {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--color-primary);
    flex: 1;
}

/* ========================================
   Spell Description
   ======================================== */
.spell-modal-description[b-f8cghy0244] {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

/* ========================================
   Spell Stats (Mobile: Wrapping Chips)
   ======================================== */
.spell-modal-stats[b-f8cghy0244] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* ========================================
   Alerts (Warnings/Errors)
   ======================================== */
.spell-modal-alert[b-f8cghy0244] {
    font-size: 0.8rem !important;
    padding: var(--space-xs) var(--space-sm) !important;
}

/* ========================================
   Cast Button (Mobile: Full Width, 44px min height)
   ======================================== */
.spell-modal-cast-btn[b-f8cghy0244] {
    margin-top: var(--space-xs);
    min-height: 44px !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: none !important;
    font-size: 1rem !important;
}

/* ========================================
   Empty State
   ======================================== */
.spell-modal-empty[b-f8cghy0244] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    gap: var(--space-lg);
    color: var(--color-text-tertiary);
}

/* ========================================
   Desktop Enhancements (768px+)
   ======================================== */
@media (min-width: 768px) {
    .spell-modal-mana-header[b-f8cghy0244] {
        padding: var(--space-md) var(--space-lg);
    }

    /* Grid layout for desktop */
    .spell-modal-list[b-f8cghy0244] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: var(--space-md);
        max-height: 500px;
    }

    /* Hover effects for desktop */
    .spell-modal-card.spell-castable:hover[b-f8cghy0244] {
        border-color: rgba(255, 215, 0, 0.6);
        background: rgba(255, 215, 0, 0.05);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md), 0 0 15px rgba(255, 215, 0, 0.15);
    }

    .spell-modal-name[b-f8cghy0244] {
        font-size: 1rem;
    }

    .spell-modal-cast-btn[b-f8cghy0244] {
        min-height: 36px !important;
        font-size: 0.875rem !important;
    }
}

/* ========================================
   Mobile Optimizations (< 768px)
   ======================================== */
@media (max-width: 767px) {
    .spell-modal-mana-header[b-f8cghy0244] {
        padding: var(--space-sm) var(--space-md);
        margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md);
    }

    .spell-modal-list[b-f8cghy0244] {
        max-height: 400px;
        gap: var(--space-sm);
    }

    .spell-modal-card[b-f8cghy0244] {
        padding: var(--space-sm);
    }

    .spell-modal-name[b-f8cghy0244] {
        font-size: 1rem;
    }

    .spell-modal-description[b-f8cghy0244] {
        font-size: 0.8rem;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .spell-modal-list[b-f8cghy0244] {
        max-height: none;
        overflow: visible;
    }
}
/* /Components/Combat/Modals/ViciousMockeryModal.razor.rz.scp.css */
/* ViciousMockeryModal.razor.css - Using Design System Tokens */

/* Hover effect for monster cards */
.hover-card[b-cn5109kwk4] {
    transition: all var(--transition-fast);
    border: 1px solid var(--color-border-base) !important;
    background: var(--color-bg-elevated) !important;
}

.hover-card:hover[b-cn5109kwk4] {
    border-color: var(--color-border-hover) !important;
    box-shadow: var(--shadow-lg), 0 0 20px rgba(236, 72, 153, 0.15);
    transform: translateY(-2px);
}

/* Target selection button */
.hover-card :deep(.mud-button-root)[b-cn5109kwk4] {
    transition: all var(--transition-fast);
}

.hover-card :deep(.mud-button-root:hover)[b-cn5109kwk4] {
    transform: scale(1.02);
}
/* /Components/Combat/Modals/ZonePickerModal.razor.rz.scp.css */
/* Zone Picker Modal Styles */

.zone-picker-grid[b-svml33sat2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem 0;
}

.zone-picker-button[b-svml33sat2] {
    min-height: 100px;
    text-transform: none;
}

.zone-button-content[b-svml33sat2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.zone-name[b-svml33sat2] {
    font-size: 1.1rem;
    font-weight: 600;
}

.zone-current-label[b-svml33sat2] {
    font-size: 0.75rem;
    opacity: 0.7;
    font-style: italic;
}

.zone-bonus-text[b-svml33sat2] {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .zone-picker-grid[b-svml33sat2] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Combat/Panels/DefeatPanel.razor.rz.scp.css */
/* Lourdin.Web/Components/Combat/Panels/DefeatPanel.razor.css */
/* CSS Isolation for Defeat Panel */

.defeat-panel[b-zdtpgqkwhj] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 2px solid rgba(239, 68, 68, 0.4);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.defeat-header[b-zdtpgqkwhj] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    padding: 0.75rem 1rem;
    text-align: center;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.defeat-header[b-zdtpgqkwhj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

.defeat-icon[b-zdtpgqkwhj] {
    color: white;
    margin: 0;
    display: flex;
}

.defeat-title[b-zdtpgqkwhj] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.defeat-content[b-zdtpgqkwhj] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.defeat-message[b-zdtpgqkwhj] {
    color: #cbd5e1;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.defeat-message em[b-zdtpgqkwhj] {
    color: #c4b5fd;
    font-family: 'Cinzel', serif;
    font-weight: 500;
}

.restoration-notice[b-zdtpgqkwhj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    color: #4ade80;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.btn-return-defeat[b-zdtpgqkwhj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.btn-return-defeat:hover[b-zdtpgqkwhj] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* Responsive */
@media (max-width: 599px) {
    .defeat-title[b-zdtpgqkwhj] {
        font-size: 1.1rem;
    }

    .defeat-content[b-zdtpgqkwhj] {
        padding: 0.75rem;
    }

    .defeat-message[b-zdtpgqkwhj] {
        font-size: 0.85rem;
    }
}
/* /Components/Combat/Panels/VictoryPanel.razor.rz.scp.css */
/* Lourdin.Web/Components/Combat/Panels/VictoryPanel.razor.css */
/* CSS Isolation for Victory Panel */
/* Uses Design System Tokens from design-system.css */

.victory-panel[b-p0w3c6mk6e] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--radius-3xl);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.victory-header[b-p0w3c6mk6e] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.victory-header[b-p0w3c6mk6e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

.victory-header.adventure-complete[b-p0w3c6mk6e] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-warning));
}

.victory-icon[b-p0w3c6mk6e] {
    color: white;
    margin: 0;
    display: flex;
}

.victory-title[b-p0w3c6mk6e] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: white;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.victory-content[b-p0w3c6mk6e] {
    padding: var(--space-lg);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

/* Custom scrollbar for victory content */
.victory-content[b-p0w3c6mk6e]::-webkit-scrollbar {
    width: 8px;
}

.victory-content[b-p0w3c6mk6e]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.victory-content[b-p0w3c6mk6e]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.4);
    border-radius: 4px;
    transition: background var(--transition-base);
}

.victory-content[b-p0w3c6mk6e]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.6);
}

.rewards-section[b-p0w3c6mk6e] {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
}

.rewards-section.waypoint-rewards[b-p0w3c6mk6e] {
    border-color: var(--color-border-hover);
}

.section-title[b-p0w3c6mk6e] {
    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-primary);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reward-items-row[b-p0w3c6mk6e] {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.reward-items-row .reward-item[b-p0w3c6mk6e] {
    flex: 1;
    margin-bottom: 0;
}

.reward-item[b-p0w3c6mk6e] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    font-size: var(--font-size-sm);
}

.reward-item.xp[b-p0w3c6mk6e] {
    color: var(--color-warning-light);
}

.reward-item.currency[b-p0w3c6mk6e] {
    color: var(--color-success-light);
}

.reward-item.special[b-p0w3c6mk6e] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
}

.reward-value[b-p0w3c6mk6e] {
    font-weight: var(--font-weight-bold);
    flex: 1;
}

.reward-label[b-p0w3c6mk6e] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.loot-items[b-p0w3c6mk6e] {
    margin-top: var(--space-lg);
}

.loot-label[b-p0w3c6mk6e] {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.loot-chips[b-p0w3c6mk6e] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.loot-chip[b-p0w3c6mk6e] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-info-light);
}

.loot-chip.special[b-p0w3c6mk6e] {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--color-warning-light);
}

.level-up-section[b-p0w3c6mk6e] {
    margin: var(--space-sm) 0;
    padding: var(--space-md);
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-lg);
}

/* Ready Check Section (Multiplayer) */
.ready-check-section[b-p0w3c6mk6e] {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-2xl);
    text-align: center;
}

.ready-check-header[b-p0w3c6mk6e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-info-light);
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ready-count[b-p0w3c6mk6e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.btn-return-victory[b-p0w3c6mk6e] {
    width: 100%;
    padding: var(--space-md);
    margin-top: var(--space-md);
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-slow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.btn-return-victory:hover[b-p0w3c6mk6e] {
    background: linear-gradient(135deg, var(--color-info-dark), #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.btn-continue-waypoint[b-p0w3c6mk6e] {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    margin-top: var(--space-sm);
    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-bold);
    cursor: pointer;
    transition: all var(--transition-slow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
    flex-shrink: 0;
}

.btn-continue-waypoint:hover[b-p0w3c6mk6e] {
    background: linear-gradient(135deg, var(--color-success-dark), #15803d);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.6);
}

.btn-continue-waypoint:active[b-p0w3c6mk6e] {
    transform: translateY(0);
}

/* ===== RESPONSIVE ===== */

/* Stack reward items vertically on mobile */
@media (max-width: 600px) {
    .reward-items-row[b-p0w3c6mk6e] {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .reward-items-row .reward-item[b-p0w3c6mk6e] {
        flex: none;
        margin-bottom: var(--space-sm);
    }
    
    .reward-items-row .reward-item:last-child[b-p0w3c6mk6e] {
        margin-bottom: 0;
    }
}
/* /Components/Combat/PlayerCard.razor.rz.scp.css */
.player-card[b-fcvalyuo0k] {
    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.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.player-card.warrior[b-fcvalyuo0k] {
    border-left: 4px solid #ef4444;
}

.player-card.wizard[b-fcvalyuo0k] {
    border-left: 4px solid #3b82f6;
}

.player-card.ranger[b-fcvalyuo0k] {
    border-left: 4px solid #22c55e;
}

.player-card.rogue[b-fcvalyuo0k] {
    border-left: 4px solid #6366f1;
}

.player-card.paladin[b-fcvalyuo0k] {
    border-left: 4px solid #f59e0b;
}

.player-card.bard[b-fcvalyuo0k] {
    border-left: 4px solid #ec4899;
}

.player-card.monk[b-fcvalyuo0k] {
    border-left: 4px solid #8b5cf6;
}

.player-card.barbarian[b-fcvalyuo0k] {
    border-left: 4px solid #dc2626;
}

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

.player-card.taking-damage[b-fcvalyuo0k] {
    animation: damage-flash-b-fcvalyuo0k 0.5s ease-out, shake-b-fcvalyuo0k 0.4s ease-out;
}

.player-card.healing[b-fcvalyuo0k] {
    animation: heal-flash-b-fcvalyuo0k 0.6s ease-out;
}

.player-card.critical-hit[b-fcvalyuo0k] {
    animation: critical-flash-b-fcvalyuo0k 0.7s ease-out;
}

.player-card-header[b-fcvalyuo0k] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(218, 165, 32, 0.08) 100%);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.player-name[b-fcvalyuo0k] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffd700;
}

.you-badge[b-fcvalyuo0k] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

.turn-indicator[b-fcvalyuo0k] {
    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: 0.25rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fcd34d;
    text-transform: uppercase;
}

.turn-indicator.active[b-fcvalyuo0k] {
    animation: turn-pulse-b-fcvalyuo0k 1.5s ease-in-out infinite;
}

.player-card-content[b-fcvalyuo0k] {
    padding: 1rem;
}

.stat-bar-container[b-fcvalyuo0k] {
    margin-bottom: 0.75rem;
}

.stat-bar-label[b-fcvalyuo0k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.stat-bar[b-fcvalyuo0k] {
    height: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.stat-bar-fill[b-fcvalyuo0k] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}

.stat-bar-fill.hp[b-fcvalyuo0k] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.stat-bar-fill.hp.low[b-fcvalyuo0k] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.stat-bar-fill.hp.critical[b-fcvalyuo0k] {
    background: linear-gradient(90deg, #ef4444, #f87171);
    animation: hp-pulse-b-fcvalyuo0k 1.5s ease-in-out infinite;
}

.stat-bar-fill.mana[b-fcvalyuo0k] {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.stat-bar-fill.ki[b-fcvalyuo0k] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.stat-bar-text[b-fcvalyuo0k] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 5px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.character-stats-row[b-fcvalyuo0k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 1rem;
}

.stat-item[b-fcvalyuo0k] {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-label[b-fcvalyuo0k] {
    display: block;
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.stat-value[b-fcvalyuo0k] {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fcd34d;
    text-align: center;
    width: 100%;
}

.warrior-text[b-fcvalyuo0k] { color: #ef4444; }
.wizard-text[b-fcvalyuo0k] { color: #3b82f6; }
.ranger-text[b-fcvalyuo0k] { color: #22c55e; }
.rogue-text[b-fcvalyuo0k] { color: #6366f1; }
.paladin-text[b-fcvalyuo0k] { color: #f59e0b; }
.bard-text[b-fcvalyuo0k] { color: #ec4899; }
.cleric-text[b-fcvalyuo0k] { color: #10b981; }
.monk-text[b-fcvalyuo0k] { color: #8b5cf6; }
.barbarian-text[b-fcvalyuo0k] { color: #dc2626; }

.equipment-section[b-fcvalyuo0k] {
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.equipment-item[b-fcvalyuo0k] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.35rem 0;
    min-width: 0;
}

.equipment-item > :nth-child(1)[b-fcvalyuo0k] {
    flex-shrink: 0;
}

.equipment-label[b-fcvalyuo0k] {
    color: #94a3b8;
    flex-shrink: 0;
}

.equipment-value[b-fcvalyuo0k] {
    color: #f8fafc;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipment-value.clickable[b-fcvalyuo0k] {
    color: #60a5fa;
    cursor: pointer;
    text-decoration: underline;
}

.equipment-value.clickable:hover[b-fcvalyuo0k] {
    color: #93c5fd;
}

.spells-section[b-fcvalyuo0k] {
    margin-bottom: 0.5rem;
}

.spells-header[b-fcvalyuo0k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

.spell-count[b-fcvalyuo0k] {
    color: #93c5fd;
}

.spell-warning[b-fcvalyuo0k] {
    color: #fbbf24;
}

.buffs-section[b-fcvalyuo0k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.35rem 0;
    color: #4ade80;
}

.multiplayer-status[b-fcvalyuo0k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.connection-status[b-fcvalyuo0k] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.connection-dot[b-fcvalyuo0k] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.connection-dot.connected[b-fcvalyuo0k] {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.connection-dot.disconnected[b-fcvalyuo0k] {
    background: #ef4444;
}

.ai-badge[b-fcvalyuo0k], .fled-badge[b-fcvalyuo0k] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.ai-badge[b-fcvalyuo0k] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.fled-badge[b-fcvalyuo0k] {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

/* Animations */
@keyframes turn-pulse-b-fcvalyuo0k {
    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);
    }
}

@keyframes damage-flash-b-fcvalyuo0k {
    0% { filter: brightness(1); }
    25% { filter: brightness(1.3) saturate(1.5); box-shadow: 0 0 20px rgba(239, 68, 68, 0.8), inset 0 0 30px rgba(239, 68, 68, 0.3); }
    50% { filter: brightness(0.8); }
    100% { filter: brightness(1); }
}

@keyframes heal-flash-b-fcvalyuo0k {
    0% { filter: brightness(1); }
    25% { filter: brightness(1.3); box-shadow: 0 0 25px rgba(34, 197, 94, 0.8); }
    100% { filter: brightness(1); }
}

@keyframes critical-flash-b-fcvalyuo0k {
    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 shake-b-fcvalyuo0k {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes hp-pulse-b-fcvalyuo0k {
    0%, 100% { 
        filter: brightness(1);
    }
    50% { 
        filter: brightness(1.2);
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    }
}

/* ========== DESKTOP ACTION ICONS ========== */
.card-action-icons[b-fcvalyuo0k] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.card-icon-divider[b-fcvalyuo0k] {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 2px;
}

.card-icon-button[b-fcvalyuo0k] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.card-icon-button:hover:not(:disabled)[b-fcvalyuo0k] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-icon-button:active:not(:disabled)[b-fcvalyuo0k] {
    transform: translateY(0);
}

.card-icon-button:disabled[b-fcvalyuo0k] {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02);
}

.card-icon-button.flee-button[b-fcvalyuo0k] {
    border-color: rgba(251, 191, 36, 0.25);
}

.card-icon-button.flee-button:hover:not(:disabled)[b-fcvalyuo0k] {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.1);
}

.card-icon-button.active-ability[b-fcvalyuo0k] {
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(239, 68, 68, 0.15);
    animation: ability-pulse-b-fcvalyuo0k 1.5s ease-in-out infinite;
}

@keyframes ability-pulse-b-fcvalyuo0k {
    0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.6); }
}

.card-icon-badge[b-fcvalyuo0k] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1;
    min-width: 14px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-icon-badge.mana[b-fcvalyuo0k] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.card-icon-badge.ready[b-fcvalyuo0k] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    animation: pulse-ready-desktop-b-fcvalyuo0k 1.5s infinite;
}

@keyframes pulse-ready-desktop-b-fcvalyuo0k {
    0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.8); }
}

/* Passive Indicators (compact chips below action row) */
.card-passive-indicator[b-fcvalyuo0k] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.card-passive-indicator.rage[b-fcvalyuo0k] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    animation: ability-pulse-b-fcvalyuo0k 1.5s ease-in-out infinite;
}

.card-passive-indicator.aura[b-fcvalyuo0k] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.card-passive-indicator.crit[b-fcvalyuo0k] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

/* Responsive */
@media (max-width: 599px) {
    .player-name[b-fcvalyuo0k] {
        font-size: 0.95rem;
    }
    
    .stat-bar[b-fcvalyuo0k] {
        height: 20px;
    }
    
    .character-stats-row[b-fcvalyuo0k] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .stat-item[b-fcvalyuo0k] {
        flex: 1 1 30%;
    }
}

/* ========== MOBILE STICKY STATS BAR ========== */
/* Shows on mobile/tablet portrait mode only */

/* Wrapper to hold the PlayerCard component for sticky stats only */
/* Default: hidden */
.mobile-sticky-stats-wrapper[b-fcvalyuo0k] {
    display: none;
}

/* Hide explicitly on desktop and landscape modes */
@media (min-width: 1200px),
       (orientation: landscape) {
    .mobile-sticky-stats-wrapper[b-fcvalyuo0k] {
        display: none !important;
    }
}

/* Show ONLY on mobile portrait and tablet portrait */
@media (max-width: 767px) and (orientation: portrait),
       (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    
    /* Show the wrapper on mobile/tablet portrait */
    .mobile-sticky-stats-wrapper[b-fcvalyuo0k] {
        display: block !important;
    }

    /* Hide the regular player card inside the wrapper */
    .mobile-sticky-stats-wrapper .player-card[b-fcvalyuo0k] {
        display: none !important;
    }

    /* Only show the sticky stats bar from the wrapper */
    .mobile-sticky-stats-wrapper .mobile-sticky-stats[b-fcvalyuo0k] {
        display: block !important;
    }
}

/* Hide sticky stats on desktop by default */
.mobile-sticky-stats[b-fcvalyuo0k] {
    display: none;
}

@media (max-width: 767px) and (orientation: portrait),
       (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    
    .mobile-sticky-stats[b-fcvalyuo0k] {
        display: block;
        position: fixed;
        top: 56px; /* Below main header - adjusted */
        left: 0;
        right: 0;
        background: linear-gradient(145deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
        backdrop-filter: blur(10px);
        border-bottom: 2px solid rgba(255, 215, 0, 0.2);
        padding: 8px 12px;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        animation: slideDownFadeIn-b-fcvalyuo0k 0.3s ease-out;
        min-height: fit-content; /* Allow dynamic height */
    }

    .mobile-sticky-stats.is-turn[b-fcvalyuo0k] {
        border-bottom: 2px solid rgba(255, 193, 7, 0.6);
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
        animation: slideDownFadeIn-b-fcvalyuo0k 0.3s ease-out, turn-pulse-b-fcvalyuo0k 2s ease-in-out infinite;
    }

    .sticky-stats-header[b-fcvalyuo0k] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .sticky-player-name[b-fcvalyuo0k] {
        font-family: 'Cinzel', serif;
        font-size: 0.9rem;
        font-weight: 600;
        color: #ffd700;
    }

    .sticky-you-badge[b-fcvalyuo0k] {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
        padding: 0.1rem 0.3rem;
        border-radius: 3px;
        font-size: 0.6rem;
        font-weight: 600;
    }

    .sticky-turn-indicator[b-fcvalyuo0k] {
        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: 12px;
        padding: 0.15rem 0.5rem;
        font-size: 0.65rem;
        font-weight: 600;
        color: #fcd34d;
        text-transform: uppercase;
    }

    .sticky-stats-bars[b-fcvalyuo0k] {
        display: flex;
        gap: 8px;
    }

    .sticky-stat-bar-container[b-fcvalyuo0k] {
        flex: 1;
    }

    .sticky-stat-label[b-fcvalyuo0k] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3px;
        font-size: 0.7rem;
        color: #94a3b8;
        font-weight: 600;
    }

    /* Quick Info Row in Sticky Bar */
    .sticky-quick-info[b-fcvalyuo0k] {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sticky-info-item[b-fcvalyuo0k] {
        font-size: 0.7rem;
        color: #94a3b8;
        font-weight: 600;
    }

    /* Action Icons Row in Sticky Bar */
    .sticky-action-icons[b-fcvalyuo0k] {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
        padding-top: 8px;
        padding-bottom: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sticky-icon-wrapper[b-fcvalyuo0k] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sticky-icon-badge[b-fcvalyuo0k] {
        position: absolute;
        bottom: -4px;
        right: -4px;
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 5px;
        border-radius: 4px;
        line-height: 1;
        min-width: 16px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .sticky-icon-badge.mana[b-fcvalyuo0k] {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
    }

    .sticky-icon-badge.ready[b-fcvalyuo0k] {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        animation: pulse-ready-b-fcvalyuo0k 1.5s infinite;
    }

    @keyframes pulse-ready-b-fcvalyuo0k {
        0%, 100% {
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
        }
        50% {
            box-shadow: 0 0 16px rgba(34, 197, 94, 0.9);
        }
    }

    /* Sticky Action Buttons */
    .sticky-icon-button[b-fcvalyuo0k] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0;
        -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    }

    .sticky-icon-button:hover:not(:disabled)[b-fcvalyuo0k] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .sticky-icon-button:active:not(:disabled)[b-fcvalyuo0k] {
        transform: translateY(0);
    }

    .sticky-icon-button:disabled[b-fcvalyuo0k] {
        opacity: 0.4;
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.03);
    }

    .sticky-icon-button.flee-button[b-fcvalyuo0k] {
        border-color: rgba(251, 191, 36, 0.3);
    }

    .sticky-icon-button.flee-button:hover:not(:disabled)[b-fcvalyuo0k] {
        border-color: rgba(251, 191, 36, 0.6);
        background: rgba(251, 191, 36, 0.1);
    }

    /* Sticky Status Effects */
    .sticky-status-effects[b-fcvalyuo0k] {
        display: flex;
        gap: 4px;
        padding: 6px 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        flex-wrap: wrap;
        justify-content: center;
    }

    .sticky-status-badge[b-fcvalyuo0k] {
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease;
        cursor: help;
        -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
        user-select: none; /* Prevent text selection on long press */
    }

    .sticky-status-badge:hover[b-fcvalyuo0k] {
        transform: translateY(-2px) scale(1.05);
    }

    .sticky-status-badge.buff[b-fcvalyuo0k] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        border: 1px solid #34d399;
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    }

    .sticky-status-badge.debuff[b-fcvalyuo0k] {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        border: 1px solid #f87171;
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    }

    .sticky-status-badge.more[b-fcvalyuo0k] {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        border: 1px solid #9ca3af;
        font-size: 10px;
        font-weight: 700;
        color: white;
    }

    .sticky-status-badge .mud-icon-root[b-fcvalyuo0k] {
        color: white;
        font-size: 18px;
    }

    .sticky-status-duration[b-fcvalyuo0k] {
        position: absolute;
        bottom: 1px;
        right: 2px;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        font-size: 9px;
        font-weight: 700;
        padding: 1px 3px;
        border-radius: 3px;
        line-height: 1;
        min-width: 12px;
        text-align: center;
    }

    @keyframes slideDownFadeIn-b-fcvalyuo0k {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
/* /Components/Combat/UnifiedCombatLog.razor.rz.scp.css */
/* Lourdin.Web/Components/Combat/UnifiedCombatLog.razor.css */
/* CSS Isolation for Unified Combat Log Component */

/* ========================================
   COMBAT LOG CONTAINER
   ======================================== */

.combat-log-container[b-pd6xoww0ax] {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    scroll-behavior: smooth;
}

/* ========================================
   TURN GROUPING
   ======================================== */

.turn-panel[b-pd6xoww0ax] {
    border-left: 3px solid #6366f1;
    margin-left: 4px;
}

.turn-marker[b-pd6xoww0ax] {
    margin: 4px 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: 2px;
}

.turn-summary[b-pd6xoww0ax] {
    margin: 4px 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;
}

/* ========================================
   COMBAT ENTRIES
   ======================================== */

.combat-entry[b-pd6xoww0ax] {
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 4px;
    border-left: 2px solid #6b7280;
    transition: background 0.2s ease;
}

.combat-entry.player-action[b-pd6xoww0ax] {
    background: rgba(59, 130, 246, 0.1);
}

.combat-entry.enemy-action[b-pd6xoww0ax] {
    background: rgba(239, 68, 68, 0.1);
}

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

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

/* New entry animation */
.combat-entry.entry-new[b-pd6xoww0ax] {
    animation: slideIn-b-pd6xoww0ax 0.3s ease-out;
}

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

/* ========================================
   CRITICAL HIT EFFECTS
   ======================================== */

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

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

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

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

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

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

/* ========================================
   VERBOSE MODE - DICE BREAKDOWN
   ======================================== */

.dice-breakdown[b-pd6xoww0ax] {
    margin-top: 6px;
    padding-left: 10px;
    font-size: 10px;
    color: #9ca3af;
    line-height: 1.6;
    border-left: 2px solid rgba(255, 215, 0, 0.25);
}

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

.breakdown-label[b-pd6xoww0ax] {
    font-weight: 600;
    color: #94a3b8;
    min-width: 55px;
}

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

.dice-rolls[b-pd6xoww0ax] {
    color: #fbbf24;
    font-weight: 600;
}

.modifier[b-pd6xoww0ax] {
    color: #34d399;
    font-weight: 600;
}

.modifier-source[b-pd6xoww0ax] {
    color: #9ca3af;
    font-style: italic;
    font-size: 9px;
}

.roll-success[b-pd6xoww0ax] {
    color: #34d399;
    font-weight: 600;
}

.roll-fail[b-pd6xoww0ax] {
    color: #f87171;
    font-weight: 600;
}

/* ========================================
   TEXT COLORS
   ======================================== */

.text-player[b-pd6xoww0ax] {
    color: #4ade80;
}

.text-enemy[b-pd6xoww0ax] {
    color: #f87171;
}

.text-critical[b-pd6xoww0ax] {
    color: #fbbf24;
    font-weight: bold;
}

.text-victory[b-pd6xoww0ax] {
    color: #fbbf24;
    font-weight: bold;
}

.text-defeat[b-pd6xoww0ax] {
    color: #f87171;
    font-weight: bold;
}

.text-info[b-pd6xoww0ax] {
    color: #e5e7eb;
}

/* ========================================
   ICON COLORS
   ======================================== */

.icon-attack[b-pd6xoww0ax] {
    color: #51cf66 !important;
}

.icon-damage[b-pd6xoww0ax] {
    color: #ff6b6b !important;
}

.icon-heal[b-pd6xoww0ax] {
    color: #51cf66 !important;
}

.icon-special[b-pd6xoww0ax] {
    color: #ffd43b !important;
}

.icon-info[b-pd6xoww0ax] {
    color: #4dabf7 !important;
}

.icon-error[b-pd6xoww0ax] {
    color: #868e96 !important;
}

.icon-victory[b-pd6xoww0ax] {
    color: #ffd43b !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .combat-log-container[b-pd6xoww0ax] {
        font-size: 11px;
    }

    .dice-breakdown[b-pd6xoww0ax] {
        font-size: 9px;
    }

    .turn-marker[b-pd6xoww0ax],
    .turn-summary[b-pd6xoww0ax] {
        padding: 4px 8px;
    }
}

/* Mobile portrait - ensure log has good height */
@media (max-width: 767px) and (orientation: portrait) {
    .combat-log-container[b-pd6xoww0ax] {
        min-height: 180px;
    }
}

/* Mobile landscape - compact but usable */
@media (max-width: 900px) and (orientation: landscape) {
    .combat-log-container[b-pd6xoww0ax] {
        font-size: 10px;
        min-height: 80px;
    }

    .dice-breakdown[b-pd6xoww0ax] {
        font-size: 8px;
        margin-top: 4px;
        padding-left: 6px;
    }

    .turn-marker[b-pd6xoww0ax],
    .turn-summary[b-pd6xoww0ax] {
        padding: 3px 6px;
        margin: 2px 0;
    }

    .combat-entry[b-pd6xoww0ax] {
        padding: 3px 6px;
        margin: 1px 0;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

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

/* ========================================
   DAMAGE REDUCTION BADGES
   ======================================== */

[b-pd6xoww0ax] .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-pd6xoww0ax 0.3s ease-out;
}

[b-pd6xoww0ax] .damage-reduction-badge .mud-icon-root {
    font-size: 14px !important;
}

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

/* Rage badge (orange glow) */
[b-pd6xoww0ax] .damage-reduction-badge:has(.fa-dumbbell),
[b-pd6xoww0ax] .damage-reduction-badge:has([icon*="FitnessCenter"]) {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

/* Hardened badge (purple/shield) */
[b-pd6xoww0ax] .damage-reduction-badge:has([icon*="Shield"]) {
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

/* Mana Shield badge (blue glow) */
[b-pd6xoww0ax] .damage-reduction-badge:has([icon*="AutoAwesome"]) {
    background: rgba(96, 165, 250, 0.2) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

/* ========================================
   SETTINGS MENU (Pure HTML)
   ======================================== */

.settings-menu-backdrop[b-pd6xoww0ax] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1400;
    background: transparent;
}

.settings-menu-container[b-pd6xoww0ax] {
    position: relative;
    display: inline-block;
}

.settings-menu-button[b-pd6xoww0ax] {
    width: 32px;
    height: 32px;
    padding: 6px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f8fafc;
    transition: all 0.2s ease;
}

.settings-menu-button:hover[b-pd6xoww0ax] {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.3);
}

.settings-dropdown[b-pd6xoww0ax] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: #1e293b;
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1500;
    animation: dropdownFadeIn-b-pd6xoww0ax 0.15s ease-out;
}

@keyframes dropdownFadeIn-b-pd6xoww0ax {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-menu-item[b-pd6xoww0ax] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #f8fafc;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.settings-menu-item:hover[b-pd6xoww0ax] {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
}

.settings-menu-divider[b-pd6xoww0ax] {
    height: 1px;
    background: rgba(255, 215, 0, 0.15);
    margin: 0.5rem 0;
}

.settings-volume-slider[b-pd6xoww0ax] {
    padding: 0.5rem 1rem;
}
/* /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: #ffd700;
    border-radius: 50%;
    animation: spin-b-fax3bfvfg4 0.8s linear infinite;
}

.spinner-small[b-fax3bfvfg4] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 215, 0, 0.2);
    border-top-color: #ffd700;
    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: #64748b;
}

.empty-state p[b-fax3bfvfg4] {
    color: #cbd5e1;
    font-size: 1.1rem;
    margin: 0;
    max-width: 500px;
}

.empty-hint[b-fax3bfvfg4] {
    color: #94a3b8 !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: rgba(255, 215, 0, 0.2);
    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: #f8fafc;
    margin: 0;
}

.activity-description[b-fax3bfvfg4] {
    color: #cbd5e1;
    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: #94a3b8;
    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 rgba(255, 215, 0, 0.2);
    color: #ffd700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-fax3bfvfg4] {
    background: rgba(255, 215, 0, 0.15);
    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 #3b82f6;
}

.activity-card.bossdefeat[b-fax3bfvfg4] {
    border-left: 3px solid #fbbf24;
}

.activity-card.rareloot[b-fax3bfvfg4] {
    border-left: 3px solid #a855f7;
}

.activity-card.achievement[b-fax3bfvfg4] {
    border-left: 3px solid #22c55e;
}

.activity-card.newcharacter[b-fax3bfvfg4] {
    border-left: 3px solid #60a5fa;
}

.activity-card.adventurecomplete[b-fax3bfvfg4] {
    border-left: 3px solid #10b981;
}

/* 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 rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    color: #ffd700;
    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, #3b82f6 0%, #2563eb 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, #2563eb 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: #ffd700;
    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: #64748b;
}

.empty-state p[b-jc7zc9rvng] {
    color: #cbd5e1;
    font-size: 1.1rem;
    margin: 0;
    max-width: 500px;
}

.empty-hint[b-jc7zc9rvng] {
    color: #94a3b8 !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 #ef4444;
    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: #f87171;
}

.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: #f8fafc;
    margin: 0;
}

.blocked-meta[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #f87171;
    font-size: 0.875rem;
    margin: 0;
}

.blocked-meta .material-icons[b-jc7zc9rvng] {
    font-size: 1rem;
}

.blocked-reason[b-jc7zc9rvng] {
    color: #94a3b8;
    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: #22c55e;
    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: #ffd700;
    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 rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    color: #ffd700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover[b-bygb7wt996] {
    background: rgba(255, 215, 0, 0.15);
    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: #64748b;
    font-size: 1.25rem;
}

.search-box input[b-bygb7wt996] {
    flex: 1;
    background: transparent;
    border: none;
    color: #f8fafc;
    font-size: 0.95rem;
    outline: none;
}

.search-box input[b-bygb7wt996]::placeholder {
    color: #64748b;
}

/* 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: rgba(255, 215, 0, 0.2);
    border-radius: 3px;
}

.conversations-scroll[b-bygb7wt996]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.3);
}

/* 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 #ffd700;
    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 rgba(255, 215, 0, 0.3);
}

.avatar-circle .material-icons[b-bygb7wt996] {
    font-size: 24px;
    color: #ffd700;
}

.avatar-circle.online[b-bygb7wt996]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border: 2px solid #0f172a;
    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: #3b82f6;
    border: 2px solid #0f172a;
    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: #f8fafc;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time[b-bygb7wt996] {
    color: #94a3b8;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.conversation-preview[b-bygb7wt996] {
    color: #cbd5e1;
    font-size: 0.9rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item.unread .conversation-preview[b-bygb7wt996] {
    color: #f8fafc;
    font-weight: 500;
}

.you-label[b-bygb7wt996] {
    color: #94a3b8;
    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: #64748b;
}

.empty-list p[b-bygb7wt996] {
    color: #cbd5e1;
    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: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.friend-card.favorite[b-wy5ztsoayb] {
    border-color: rgba(255, 215, 0, 0.3);
    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 rgba(255, 215, 0, 0.3);
}

.list .avatar-circle[b-wy5ztsoayb] {
    width: 48px;
    height: 48px;
}

.avatar-circle .material-icons[b-wy5ztsoayb] {
    font-size: 28px;
    color: #ffd700;
}

.status-dot[b-wy5ztsoayb] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #0f172a;
}

.status-dot.online[b-wy5ztsoayb] {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.status-dot.away[b-wy5ztsoayb] {
    background: #f59e0b;
}

.status-dot.busy[b-wy5ztsoayb] {
    background: #ef4444;
}

.status-dot.offline[b-wy5ztsoayb] {
    background: #64748b;
}

/* 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: #f8fafc;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-icon[b-wy5ztsoayb] {
    font-size: 1rem;
    color: #ffd700;
}

.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: #94a3b8;
}

.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: #22c55e;
}

.status-text.away[b-wy5ztsoayb] {
    color: #f59e0b;
}

.status-text.busy[b-wy5ztsoayb] {
    color: #ef4444;
}

.status-text.offline[b-wy5ztsoayb] {
    color: #94a3b8;
}

.activity-text[b-wy5ztsoayb] {
    color: #cbd5e1;
    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: #94a3b8;
    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: #cbd5e1;
    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: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.action-btn.primary[b-wy5ztsoayb] {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.action-btn.primary:hover[b-wy5ztsoayb] {
    background: rgba(255, 215, 0, 0.15);
}

.action-btn.active[b-wy5ztsoayb] {
    color: #ffd700;
}

/* 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: #1e293b;
    border: 1px solid rgba(255, 215, 0, 0.2);
    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: #cbd5e1;
    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: #94a3b8;
}

.dropdown-item:hover[b-wy5ztsoayb] {
    background: rgba(255, 215, 0, 0.05);
    color: #ffd700;
}

.dropdown-item:hover .material-icons[b-wy5ztsoayb] {
    color: #ffd700;
}

.dropdown-item.danger:hover[b-wy5ztsoayb] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.dropdown-item.danger:hover .material-icons[b-wy5ztsoayb] {
    color: #f87171;
}

.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: #64748b;
    font-size: 1.25rem;
}

.search-box input[b-m7pddgq47e] {
    flex: 1;
    background: transparent;
    border: none;
    color: #f8fafc;
    font-size: 1rem;
    outline: none;
}

.search-box input[b-m7pddgq47e]::placeholder {
    color: #64748b;
}

.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: #cbd5e1;
    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: rgba(255, 215, 0, 0.2);
}

.view-toggle.active[b-m7pddgq47e] {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    color: #ffd700;
}

/* 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: #64748b;
}

.empty-state p[b-m7pddgq47e] {
    color: #cbd5e1;
    font-size: 1.1rem;
    margin: 0;
}

.empty-hint[b-m7pddgq47e] {
    color: #94a3b8 !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: #ffd700;
    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: #ffd700;
    margin: 0;
}

.section-title .material-icons[b-yhg89t85ut] {
    font-size: 1.5rem;
}

.section-title .badge[b-yhg89t85ut] {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    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: rgba(255, 215, 0, 0.2);
}

.request-card.received[b-yhg89t85ut] {
    border-left: 3px solid #22c55e;
}

.request-card.sent[b-yhg89t85ut] {
    border-left: 3px solid #60a5fa;
}

/* 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 rgba(255, 215, 0, 0.3);
    flex-shrink: 0;
}

.request-avatar .material-icons[b-yhg89t85ut] {
    font-size: 24px;
    color: #ffd700;
}

.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: #f8fafc;
    margin: 0;
}

.request-message[b-yhg89t85ut] {
    color: #cbd5e1;
    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: #94a3b8;
    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: #22c55e;
}

.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: #f87171;
}

.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: #94a3b8;
}

.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: #64748b;
}

.empty-state p[b-yhg89t85ut] {
    color: #cbd5e1;
    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: #1e293b;
    border: 1px solid rgba(255, 215, 0, 0.3);
    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 rgba(255, 215, 0, 0.2);
}

.dialog-header h3[b-l8bqg2k8av] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffd700;
    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 rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-btn:hover[b-l8bqg2k8av] {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    color: #ffd700;
}

.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: rgba(255, 215, 0, 0.2);
    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: #f87171;
}

.alert.error .material-icons[b-l8bqg2k8av] {
    color: #f87171;
}

.alert.success[b-l8bqg2k8av] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.alert.success .material-icons[b-l8bqg2k8av] {
    color: #4ade80;
}

/* 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: #ffd700;
    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 rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    color: #f8fafc;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input:focus[b-l8bqg2k8av],
.form-group textarea:focus[b-l8bqg2k8av] {
    outline: none;
    border-color: rgba(255, 215, 0, 0.4);
    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: #94a3b8;
    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 rgba(255, 215, 0, 0.2);
}

.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, #ffd700 0%, #ffed4e 100%);
    color: #0f172a;
}

.btn-primary:hover:not(:disabled)[b-l8bqg2k8av] {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.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: #cbd5e1;
}

.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: #0f172a;
    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 rgba(255, 215, 0, 0.2);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    transition: all 0.2s ease;
}

.input-wrapper:focus-within[b-n8d25k6q2v] {
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(15, 23, 42, 0.6);
}

textarea[b-n8d25k6q2v] {
    width: 100%;
    background: transparent;
    border: none;
    color: #f8fafc;
    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: #64748b;
}

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: #64748b;
}

.char-count.warning[b-n8d25k6q2v] {
    color: #f59e0b;
    font-weight: 600;
}

.btn-send[b-n8d25k6q2v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border: none;
    border-radius: 8px;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-send:hover:not(:disabled)[b-n8d25k6q2v] {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.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 rgba(255, 215, 0, 0.3);
    flex-shrink: 0;
}

.friend-avatar .material-icons[b-yf47xgzeds] {
    font-size: 24px;
    color: #ffd700;
}

.friend-avatar.online[b-yf47xgzeds]::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: #22c55e;
    border: 2px solid #0f172a;
    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: #ffd700;
    margin: 0;
}

.friend-status[b-yf47xgzeds] {
    margin: 0;
    font-size: 0.875rem;
    color: #94a3b8;
}

.status-indicator[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.status-indicator.online[b-yf47xgzeds] {
    color: #22c55e;
}

.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 rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    color: #ffd700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover[b-yf47xgzeds] {
    background: rgba(255, 215, 0, 0.15);
}

.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: rgba(255, 215, 0, 0.2);
    border-radius: 3px;
}

.messages-area[b-yf47xgzeds]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.3);
}

/* 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: #ffd700;
    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: #64748b;
}

.empty-messages p[b-yf47xgzeds] {
    color: #cbd5e1;
    font-size: 1.1rem;
    margin: 0;
    text-align: center;
}

.empty-hint[b-yf47xgzeds] {
    color: #94a3b8 !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, #ffd700 0%, #ffed4e 100%);
    color: #0f172a;
    border-bottom-right-radius: 4px;
}

.message.theirs .message-bubble[b-yf47xgzeds] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    color: #f8fafc;
    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: #0f172a;
}

.message.theirs .message-time[b-yf47xgzeds] {
    color: #cbd5e1;
}

.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: #0f172a;
}

.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 rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    max-width: 70px;
}

.typing-indicator span[b-yf47xgzeds] {
    width: 8px;
    height: 8px;
    background: #cbd5e1;
    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: #1e293b;
    border: 1px solid rgba(255, 215, 0, 0.3);
    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 rgba(255, 215, 0, 0.2);
}

.dialog-header h3[b-j2yse8eoku] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffd700;
    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 rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-btn:hover[b-j2yse8eoku] {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    color: #ffd700;
}

.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: rgba(255, 215, 0, 0.2);
    border-radius: 3px;
}

/* Dialog Actions */
.dialog-actions[b-j2yse8eoku] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    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, #ffd700, #ffed4e);
    color: #0f172a;
}

.dialog-actions .btn-primary:hover:not(:disabled)[b-j2yse8eoku] {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 215, 0, 0.3);
}

.dialog-actions .btn-secondary[b-j2yse8eoku] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.dialog-actions .btn-secondary:hover:not(:disabled)[b-j2yse8eoku] {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.3);
}

.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: #f8fafc;
    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 rgba(255, 215, 0, 0.2);
    border-radius: 6px;
    color: #f8fafc;
    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: #64748b;
}

.form-group textarea[b-j2yse8eoku] {
    resize: vertical;
    min-height: 100px;
}

.form-hint[b-j2yse8eoku] {
    color: #64748b;
    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: #86efac;
}

.alert.error[b-j2yse8eoku] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.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 rgba(255, 215, 0, 0.2);
    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 rgba(255, 215, 0, 0.3);
    flex-shrink: 0;
}

.user-avatar .material-icons[b-j2yse8eoku] {
    font-size: 28px;
    color: #ffd700;
}

.user-info[b-j2yse8eoku] {
    flex: 1;
    min-width: 0;
}

.user-info h4[b-j2yse8eoku] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 0.25rem 0;
}

.user-info p[b-j2yse8eoku] {
    font-size: 0.9rem;
    color: #94a3b8;
    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: #f87171;
    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: #64748b;
    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: #cbd5e1;
    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: rgba(255, 215, 0, 0.2);
    border-radius: 3px;
}

.results-label[b-j2yse8eoku] {
    font-size: 0.9rem;
    color: #94a3b8;
    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: rgba(255, 215, 0, 0.2);
    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 rgba(255, 215, 0, 0.2);
    flex-shrink: 0;
}

.result-avatar .material-icons[b-j2yse8eoku] {
    font-size: 24px;
    color: #ffd700;
}

.result-info[b-j2yse8eoku] {
    flex: 1;
    min-width: 0;
}

.result-info h5[b-j2yse8eoku] {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 0.25rem 0;
}

.result-info p[b-j2yse8eoku] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-item > .material-icons[b-j2yse8eoku] {
    color: #64748b;
    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: #64748b;
}

.empty-results p[b-j2yse8eoku] {
    color: #cbd5e1;
    margin: 0;
}
/* /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: #fecaca;
    font-family: 'Cinzel', serif;
    border-top: 2px solid #ef4444;
}

#blazor-error-ui .dismiss[b-ei8mtptfs0] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    color: #fecaca;
    transition: color 0.2s ease;
}

#blazor-error-ui .dismiss:hover[b-ei8mtptfs0] {
    color: #ffffff;
}

#blazor-error-ui .reload[b-ei8mtptfs0] {
    color: #ffd700;
    text-decoration: underline;
    margin-left: 0.5rem;
}

#blazor-error-ui .reload:hover[b-ei8mtptfs0] {
    color: #ffec8b;
}

/* Custom scrollbar for fantasy theme */
[b-ei8mtptfs0]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-ei8mtptfs0]::-webkit-scrollbar-track {
    background: #0f172a;
}

[b-ei8mtptfs0]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #475569, #334155);
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

[b-ei8mtptfs0]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #64748b, #475569);
    border-color: rgba(255, 215, 0, 0.2);
}

/* Selection highlighting */
[b-ei8mtptfs0]::selection {
    background: rgba(255, 215, 0, 0.3);
    color: #ffd700;
}

/* ===== CUSTOM ACCOUNT MENU (Pure HTML) ===== */
.menu-backdrop[b-ei8mtptfs0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1400;
    background: transparent;
}

.account-menu-container[b-ei8mtptfs0] {
    position: relative;
    display: inline-block;
}

.account-menu-button[b-ei8mtptfs0] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f8fafc;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.account-menu-button:hover[b-ei8mtptfs0] {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
}

.account-dropdown[b-ei8mtptfs0] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: #1e293b;
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1500;
    animation: dropdownFadeIn-b-ei8mtptfs0 0.15s ease-out;
}

@keyframes dropdownFadeIn-b-ei8mtptfs0 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.account-dropdown-header[b-ei8mtptfs0] {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    background: rgba(255, 215, 0, 0.05);
}

.account-email-label[b-ei8mtptfs0] {
    color: #94a3b8;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.account-email[b-ei8mtptfs0] {
    color: #ffd700;
    font-weight: 600;
    font-size: 0.9rem;
}

.account-menu-item[b-ei8mtptfs0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #f8fafc;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.account-menu-item:hover[b-ei8mtptfs0] {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
}

.account-menu-item.logout[b-ei8mtptfs0] {
    color: #ef4444;
}

.account-menu-item.logout:hover[b-ei8mtptfs0] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.account-menu-divider[b-ei8mtptfs0] {
    height: 1px;
    background: rgba(255, 215, 0, 0.15);
    margin: 0.5rem 0;
}
/* /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: #ffd700;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 215, 0, 0.2);
    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: rgba(255, 215, 0, 0.4);
}

.top-row[b-hjy8pn4tj3] {
    min-height: 3.5rem;
    background: linear-gradient(90deg, #0f172a 0%, rgba(30, 41, 59, 0.8) 50%, #0f172a 100%);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.navbar-brand[b-hjy8pn4tj3] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, #ffd700, #daa520);
    -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: #64748b;
    padding: 0.75rem 1rem 0.4rem;
}

[b-hjy8pn4tj3] .nav-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
    margin: 0.5rem 0;
}

/* ============================================
   CHARACTER PREVIEW CARD
   ============================================ */

[b-hjy8pn4tj3] .character-preview {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 215, 0, 0.2);
    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: #ffd700;
    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: #94a3b8;
    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, rgba(255, 215, 0, 0.2), rgba(218, 165, 32, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #ffd700;
}

[b-hjy8pn4tj3] .tier-badge.basic {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: #94a3b8;
}

[b-hjy8pn4tj3] .tier-slots {
    font-size: 0.6rem;
    color: #64748b;
    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: #64748b;
    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, #22c55e, #4ade80);
    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, #3b82f6, #60a5fa);
    box-shadow: 0 0 4px rgba(59, 130, 246, 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: #94a3b8 !important;
    transition: all 0.2s ease !important;
    position: relative;
}

[b-hjy8pn4tj3] .mud-nav-link:hover {
    background: rgba(255, 215, 0, 0.08) !important;
    color: #f8fafc !important;
}

[b-hjy8pn4tj3] .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05)) !important;
    color: #ffd700 !important;
    border-left: 2px solid #ffd700 !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, #3b82f6 0%, #2563eb 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);
    }
}

/* ============================================
   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/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: #c4b5fd;
    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 rgba(255, 215, 0, 0.2);
}

/* 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, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    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%,
        #8b5cf6 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: #c4b5fd;
    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.2);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
    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 rgba(255, 255, 255, 0.05);
    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 rgba(255, 215, 0, 0.2);
    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 Component Styles - Fantasy RPG Theme */

/* ===== MAIN HEADER CONTAINER ===== */
.merchant-header[b-6ud9r4a04e] {
    margin-bottom: var(--space-xl);
}

/* ===== BANNER SECTION ===== */
.merchant-banner[b-6ud9r4a04e] {
    position: relative;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    min-height: 200px;
}

.banner-background[b-6ud9r4a04e] {
    position: absolute;
    inset: 0;
    background-image: url('/images/merchant/merchant-banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.merchant-banner[b-6ud9r4a04e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.6) 20%,
        var(--color-primary) 50%,
        rgba(255, 215, 0, 0.6) 80%,
        transparent 100%);
    z-index: 2;
}

.merchant-banner[b-6ud9r4a04e]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(139, 69, 19, 0.6) 20%,
        rgba(139, 69, 19, 0.8) 50%,
        rgba(139, 69, 19, 0.6) 80%,
        transparent 100%);
    z-index: 2;
}

.banner-overlay[b-6ud9r4a04e] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.85) 0%, 
        rgba(30, 41, 59, 0.75) 50%, 
        rgba(15, 23, 42, 0.85) 100%);
    z-index: 1;
}

.banner-content[b-6ud9r4a04e] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xl) var(--space-2xl);
    gap: var(--space-xl);
    flex-wrap: wrap;
}

/* ===== SHOP IDENTITY ===== */
.shop-identity[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.shop-emblem[b-6ud9r4a04e] {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(139, 69, 19, 0.6), rgba(101, 67, 33, 0.8));
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.3),
        inset 0 -3px 10px rgba(0, 0, 0, 0.4);
    animation: emblem-glow-b-6ud9r4a04e 3s ease-in-out infinite;
    overflow: hidden;
}

@keyframes emblem-glow-b-6ud9r4a04e {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), inset 0 -3px 10px rgba(0, 0, 0, 0.4); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), inset 0 -3px 10px rgba(0, 0, 0, 0.4); }
}

.emblem-image[b-6ud9r4a04e] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

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

.shop-name[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(255, 215, 0, 0.3);
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.shop-tagline[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-style: italic;
    color: var(--color-text-secondary);
    margin: 0;
    letter-spacing: 0.02em;
}

/* ===== CURRENCY POUCH ===== */
.currency-pouch[b-6ud9r4a04e] {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
    border: 2px solid rgba(255, 215, 0, 0.25);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    min-width: 280px;
    backdrop-filter: blur(10px);
}

.pouch-header[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.pouch-icon[b-6ud9r4a04e] {
    color: var(--color-primary);
}

.pouch-title[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.currency-coins[b-6ud9r4a04e] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.coin[b-6ud9r4a04e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    flex: 1;
    transition: transform var(--transition-fast);
}

.coin:hover[b-6ud9r4a04e] {
    transform: translateY(-2px);
}

.coin-icon-gold[b-6ud9r4a04e] {
    color: #ffd700;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.coin-icon-silver[b-6ud9r4a04e] {
    color: #c0c0c0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.coin-icon-copper[b-6ud9r4a04e] {
    color: #cd7f32;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.coin-value[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    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;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.gold-coin .coin-value[b-6ud9r4a04e],
.gold-coin .coin-label[b-6ud9r4a04e] {
    color: #ffd700;
}

.silver-coin .coin-value[b-6ud9r4a04e],
.silver-coin .coin-label[b-6ud9r4a04e] {
    color: #c0c0c0;
}

.copper-coin .coin-value[b-6ud9r4a04e],
.copper-coin .coin-label[b-6ud9r4a04e] {
    color: #cd7f32;
}

.currency-total[b-6ud9r4a04e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.total-label[b-6ud9r4a04e] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.total-value[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* ===== WELCOME MESSAGE ===== */
.merchant-welcome[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(139, 69, 19, 0.15) 20%,
        rgba(139, 69, 19, 0.2) 50%,
        rgba(139, 69, 19, 0.15) 80%,
        transparent 100%);
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    margin-top: var(--space-lg);
}

.welcome-decoration[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
}

.welcome-icon[b-6ud9r4a04e] {
    color: var(--color-primary);
    opacity: 0.6;
}

.welcome-message[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-style: italic;
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0;
}

.welcome-message strong[b-6ud9r4a04e] {
    color: var(--color-primary);
}

/* ===== TABLET RESPONSIVE ===== */
@media (max-width: 1024px) {
    .banner-content[b-6ud9r4a04e] {
        flex-direction: column;
        text-align: center;
        padding: var(--space-lg);
    }

    .shop-identity[b-6ud9r4a04e] {
        flex-direction: column;
    }

    .currency-pouch[b-6ud9r4a04e] {
        width: 100%;
        max-width: 350px;
    }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 640px) {
    .merchant-banner[b-6ud9r4a04e] {
        min-height: auto;
    }

    .shop-emblem[b-6ud9r4a04e] {
        width: 70px;
        height: 70px;
    }

    .shop-name[b-6ud9r4a04e] {
        font-size: var(--font-size-2xl);
    }

    .shop-tagline[b-6ud9r4a04e] {
        font-size: var(--font-size-sm);
    }

    .currency-pouch[b-6ud9r4a04e] {
        min-width: auto;
        padding: var(--space-md);
    }

    .currency-coins[b-6ud9r4a04e] {
        gap: var(--space-sm);
    }

    .coin[b-6ud9r4a04e] {
        padding: var(--space-xs) var(--space-sm);
    }

    .coin-value[b-6ud9r4a04e] {
        font-size: var(--font-size-lg);
    }

    .merchant-welcome[b-6ud9r4a04e] {
        padding: var(--space-md);
    }

    .welcome-decoration[b-6ud9r4a04e] {
        display: none;
    }

    .welcome-message[b-6ud9r4a04e] {
        font-size: var(--font-size-sm);
    }
}

/* ===== 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, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: var(--radius-xl);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.15);
    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: #ffd700;
}

.floating-coin.silver .floating-coin-value[b-6ud9r4a04e],
.floating-coin.silver .floating-coin-label[b-6ud9r4a04e] {
    color: #c0c0c0;
}

.floating-coin.copper .floating-coin-value[b-6ud9r4a04e],
.floating-coin.copper .floating-coin-label[b-6ud9r4a04e] {
    color: #cd7f32;
}

/* Mobile floating currency */
@media (max-width: 640px) {
    .floating-currency[b-6ud9r4a04e] {
        bottom: 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 - Fantasy RPG Theme */

/* ===== CONTAINER ===== */
.merchant-tabs-container[b-z6jpglsu1z] {
    margin-bottom: var(--space-xl);
    position: sticky;
    top: 64px; /* Below main nav bar */
    z-index: 100;
    background: linear-gradient(180deg, #0f172a 0%, #0f172a 85%, transparent 100%);
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    margin-left: calc(-1 * var(--space-lg));
    margin-right: calc(-1 * var(--space-lg));
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

/* ===== HEADER SECTION ===== */
.tabs-header[b-z6jpglsu1z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.tabs-decoration[b-z6jpglsu1z] {
    font-family: var(--font-display);
    color: rgba(255, 215, 0, 0.3);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.3em;
}

.tabs-title[b-z6jpglsu1z] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ===== TABS CONTAINER ===== */
.merchant-tabs[b-z6jpglsu1z] {
    display: flex;
    gap: var(--space-sm);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    padding: var(--space-sm);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-base);
}

/* ===== INDIVIDUAL TAB ===== */
.merchant-tab[b-z6jpglsu1z] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-slow);
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.merchant-tab[b-z6jpglsu1z]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.15), transparent);
    transition: height var(--transition-slow);
}

.merchant-tab:hover[b-z6jpglsu1z] {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.merchant-tab:hover[b-z6jpglsu1z]::before {
    height: 100%;
}

/* Focus State - Accessibility */
.merchant-tab:focus[b-z6jpglsu1z] {
    outline: none;
}

.merchant-tab:focus-visible[b-z6jpglsu1z] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow:
        0 0 0 4px rgba(255, 215, 0, 0.2),
        var(--shadow-md);
}

/* Active State */
.merchant-tab.active[b-z6jpglsu1z] {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.15), rgba(218, 165, 32, 0.1));
    border-color: var(--color-primary);
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 215, 0, 0.3);
}

.merchant-tab.active[b-z6jpglsu1z]::before {
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.1), transparent);
}

/* Tab Indicator - REMOVED the yellow bar */
.tab-indicator[b-z6jpglsu1z] {
    display: none;
}

/* ===== ICON WRAPPER ===== */
.tab-icon-wrapper[b-z6jpglsu1z] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.tab-icon-wrapper.weapons[b-z6jpglsu1z] {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.tab-icon-wrapper.weapons .tab-icon[b-z6jpglsu1z] {
    color: var(--color-danger-light);
}

.tab-icon-wrapper.armor[b-z6jpglsu1z] {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.tab-icon-wrapper.armor .tab-icon[b-z6jpglsu1z] {
    color: var(--color-info-light);
}

.tab-icon-wrapper.consumables[b-z6jpglsu1z] {
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.tab-icon-wrapper.consumables .tab-icon[b-z6jpglsu1z] {
    color: var(--color-success-light);
}

.tab-icon-wrapper.sell[b-z6jpglsu1z] {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.tab-icon-wrapper.sell .tab-icon[b-z6jpglsu1z] {
    color: var(--color-warning-light);
}

.merchant-tab.active .tab-icon-wrapper[b-z6jpglsu1z] {
    transform: scale(1.1);
    box-shadow: 0 0 15px currentColor;
}

.tab-icon[b-z6jpglsu1z] {
    font-size: 1.2rem !important;
    transition: transform var(--transition-base);
}

/* ===== TAB CONTENT ===== */
.tab-content[b-z6jpglsu1z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    min-width: 0;
    width: 100%;
}

.tab-label[b-z6jpglsu1z] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color var(--transition-base);
    white-space: nowrap;
}

.merchant-tab:hover .tab-label[b-z6jpglsu1z],
.merchant-tab.active .tab-label[b-z6jpglsu1z] {
    color: var(--color-primary);
}

.tab-count[b-z6jpglsu1z] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.merchant-tab.active .tab-count[b-z6jpglsu1z] {
    color: var(--color-text-secondary);
}

/* ===== SELL TAB SPECIAL STYLING ===== */
.sell-tab[b-z6jpglsu1z] {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.08), rgba(218, 165, 32, 0.05));
}

.sell-tab.active[b-z6jpglsu1z] {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.2), rgba(218, 165, 32, 0.15));
}

/* ===== TABLET RESPONSIVE ===== */
@media (max-width: 1024px) {
    .merchant-tab[b-z6jpglsu1z] {
        padding: var(--space-sm) var(--space-md);
    }
    
    .tab-icon-wrapper[b-z6jpglsu1z] {
        width: 32px;
        height: 32px;
    }
    
    .tab-icon[b-z6jpglsu1z] {
        font-size: 1.1rem !important;
    }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 640px) {
    .merchant-tabs-container[b-z6jpglsu1z] {
        top: 56px; /* Slightly smaller on mobile */
        margin-left: calc(-1 * var(--space-md));
        margin-right: calc(-1 * var(--space-md));
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .tabs-header[b-z6jpglsu1z] {
        margin-bottom: var(--space-sm);
    }

    .tabs-decoration[b-z6jpglsu1z] {
        display: none;
    }

    .merchant-tabs[b-z6jpglsu1z] {
        gap: 4px;
        padding: var(--space-xs);
    }

    /* Ensure minimum 44px touch target */
    .merchant-tab[b-z6jpglsu1z] {
        padding: var(--space-md);
        gap: 4px;
        min-height: 64px; /* Comfortable touch target */
    }

    .tab-icon-wrapper[b-z6jpglsu1z] {
        width: 32px;
        height: 32px;
    }

    .tab-icon[b-z6jpglsu1z] {
        font-size: 1.1rem !important;
    }

    .tab-label[b-z6jpglsu1z] {
        font-size: 0.85rem; /* Good readability on mobile */
    }

    .tab-count[b-z6jpglsu1z] {
        font-size: 0.75rem;
    }
}

/* ===== VERY SMALL SCREENS - ICON ONLY ===== */
@media (max-width: 400px) {
    .tab-content[b-z6jpglsu1z] {
        display: none; /* Hide labels on very small screens */
    }

    /* Larger touch targets when icon-only */
    .merchant-tab[b-z6jpglsu1z] {
        padding: var(--space-md);
        min-height: 64px;
        min-width: 64px;
    }

    .tab-icon-wrapper[b-z6jpglsu1z] {
        width: 36px;
        height: 36px;
    }

    .tab-icon[b-z6jpglsu1z] {
        font-size: 1.3rem !important;
    }
}
/* /Components/Merchant/SellTab.razor.rz.scp.css */
/* SellTab Component Styles - Fantasy RPG Theme */

/* ===== 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.2);
    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 rgba(255, 215, 0, 0.2);
    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), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 215, 0, 0.3);
    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, rgba(255, 215, 0, 0.2), 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 rgba(255, 215, 0, 0.3);
    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 rgba(255, 215, 0, 0.15);
}

/* 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 rgba(255, 215, 0, 0.2);
}

/* 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 rgba(255, 255, 255, 0.05);
}

.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 rgba(255, 215, 0, 0.4);
    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 rgba(255, 215, 0, 0.4);
}

/* 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 rgba(255, 215, 0, 0.3);
}

.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 rgba(255, 215, 0, 0.2);
}

/* ===== 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/Merchant/Shared/CompareTooltip.razor.rz.scp.css */
/* Compare Tooltip Component Styles */

.compare-tooltip[b-nxz68x4fvf] {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
    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-nxz68x4fvf] {
    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: #c4b5fd;
    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-nxz68x4fvf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.no-equipped[b-nxz68x4fvf] {
    text-align: center;
    padding: var(--space-sm);
}

.empty-indicator[b-nxz68x4fvf] {
    color: var(--color-text-tertiary);
    font-style: italic;
    font-size: var(--font-size-sm);
}

.compare-row[b-nxz68x4fvf] {
    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-nxz68x4fvf] {
    background: rgba(34, 197, 94, 0.1);
}

.compare-row.downgrade[b-nxz68x4fvf] {
    background: rgba(239, 68, 68, 0.1);
}

.compare-row.sidegrade[b-nxz68x4fvf] {
    background: rgba(245, 158, 11, 0.1);
}

.compare-label[b-nxz68x4fvf] {
    color: var(--color-text-tertiary);
    min-width: 70px;
}

.compare-value.equipped[b-nxz68x4fvf] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.compare-current[b-nxz68x4fvf] {
    color: var(--color-text-secondary);
}

.compare-arrow[b-nxz68x4fvf] {
    color: var(--color-text-tertiary);
    padding: 0 var(--space-xs);
}

.compare-new[b-nxz68x4fvf] {
    font-weight: var(--font-weight-semibold);
}

.upgrade .compare-new[b-nxz68x4fvf] {
    color: var(--color-success-light);
}

.downgrade .compare-new[b-nxz68x4fvf] {
    color: var(--color-danger-light);
}

.sidegrade .compare-new[b-nxz68x4fvf] {
    color: var(--color-warning-light);
}

.compare-diff[b-nxz68x4fvf] {
    margin-left: auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.upgrade .compare-diff[b-nxz68x4fvf] {
    color: var(--color-success-light);
}

.downgrade .compare-diff[b-nxz68x4fvf] {
    color: var(--color-danger-light);
}

.sidegrade .compare-diff[b-nxz68x4fvf] {
    color: var(--color-warning-light);
}
/* /Components/Merchant/Shared/EquipableFilter.razor.rz.scp.css */
/* EquipableFilter Component Styles - Fantasy RPG Theme */

.equipable-filter[b-a9a1u3gxrw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.4));
    border-radius: var(--radius-xl);
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.equipable-filter-checkbox[b-a9a1u3gxrw] {
    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-a9a1u3gxrw] {
    background: rgba(34, 197, 94, 0.1);
}

.equipable-filter-checkbox input[type="checkbox"][b-a9a1u3gxrw] {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.9);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.equipable-filter-checkbox input[type="checkbox"]:hover[b-a9a1u3gxrw] {
    border-color: var(--color-success);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.equipable-filter-checkbox input[type="checkbox"]:checked[b-a9a1u3gxrw] {
    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-a9a1u3gxrw]::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-a9a1u3gxrw] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
}

.equipable-filter-label[b-a9a1u3gxrw] {
    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-a9a1u3gxrw] {
    color: var(--color-success-light);
}

.equipable-filter-label .mud-icon[b-a9a1u3gxrw] {
    color: var(--color-success);
    transition: opacity var(--transition-base);
}

.equipable-filter-checkbox:not(:has(input:checked)) .equipable-filter-label .mud-icon[b-a9a1u3gxrw] {
    color: var(--color-text-tertiary);
    opacity: 0.5;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden[b-a9a1u3gxrw] {
    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-a9a1u3gxrw] {
        justify-content: center;
    }

    .equipable-filter-label[b-a9a1u3gxrw] {
        font-size: var(--font-size-xs);
    }
}
/* /Components/Merchant/Shared/PriceDisplay.razor.rz.scp.css */
/* PriceDisplay Component Styles - Fantasy RPG Theme */

.price-display[b-zc0bkudopa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.price-label[b-zc0bkudopa] {
    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-zc0bkudopa] {
    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-zc0bkudopa] {
    color: var(--color-success-light);
}

.price-value.cannot-afford[b-zc0bkudopa] {
    color: var(--color-danger-light);
}

.price-gold[b-zc0bkudopa] {
    color: #ffd700;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.3);
}

.price-silver[b-zc0bkudopa] {
    color: #c0c0c0;
}

.price-copper[b-zc0bkudopa] {
    color: #cd7f32;
}
/* /Components/Merchant/Shared/SearchFilter.razor.rz.scp.css */
/* Search Filter Component Styles */

.search-filter-container[b-jjyvxy2u07] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.search-input-wrapper[b-jjyvxy2u07] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.search-icon[b-jjyvxy2u07] {
    position: absolute;
    left: var(--space-md);
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.search-input[b-jjyvxy2u07] {
    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-jjyvxy2u07]::placeholder {
    color: var(--color-text-tertiary);
}

.search-input:focus[b-jjyvxy2u07] {
    outline: none;
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

.search-clear[b-jjyvxy2u07] {
    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-jjyvxy2u07] {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

.search-results-count[b-jjyvxy2u07] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 640px) {
    .search-input-wrapper[b-jjyvxy2u07] {
        min-width: 100%;
        max-width: 100%;
    }

    .search-filter-container[b-jjyvxy2u07] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Merchant/Shared/SecondaryFilters.razor.rz.scp.css */
/* SecondaryFilters Component Styles - Fantasy RPG Theme */

.secondary-filters[b-j42bjodzjp] {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
    padding: var(--space-md);
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.secondary-filter[b-j42bjodzjp] {
    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-j42bjodzjp] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-1px);
}

.secondary-filter.active[b-j42bjodzjp] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.08));
    border-color: rgba(255, 215, 0, 0.4);
    color: var(--color-primary);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
}

.filter-count[b-j42bjodzjp] {
    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-j42bjodzjp] {
    background: rgba(255, 215, 0, 0.25);
}

/* Rarity Color Classes */
.rarity-common[b-j42bjodzjp] { color: var(--color-rarity-common); }
.rarity-uncommon[b-j42bjodzjp] { color: var(--color-rarity-uncommon); }
.rarity-rare[b-j42bjodzjp] { color: var(--color-rarity-rare); }
.rarity-epic[b-j42bjodzjp] { color: var(--color-rarity-epic); }
.rarity-legendary[b-j42bjodzjp] { 
    color: var(--color-rarity-legendary);
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* Responsive */
@media (max-width: 640px) {
    .secondary-filters[b-j42bjodzjp] {
        gap: var(--space-xs);
        padding: var(--space-sm);
    }

    .secondary-filter[b-j42bjodzjp] {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.65rem;
    }
}
/* /Components/Merchant/Shared/SkeletonCard.razor.rz.scp.css */
/* Skeleton Card - Loading Placeholder */

.skeleton-card[b-334iwbg0ue] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.05);
    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-334iwbg0ue {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-line[b-334iwbg0ue],
.skeleton-badge[b-334iwbg0ue],
.skeleton-chip[b-334iwbg0ue],
.skeleton-price[b-334iwbg0ue],
.skeleton-qty[b-334iwbg0ue],
.skeleton-button[b-334iwbg0ue] {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-334iwbg0ue 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.skeleton-header[b-334iwbg0ue] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.skeleton-name[b-334iwbg0ue] {
    height: 20px;
    flex: 1;
    max-width: 60%;
}

.skeleton-badge[b-334iwbg0ue] {
    height: 24px;
    width: 70px;
    border-radius: var(--radius-lg);
}

.skeleton-stats[b-334iwbg0ue] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.skeleton-chip[b-334iwbg0ue] {
    height: 32px;
    width: 80px;
    border-radius: var(--radius-lg);
}

.skeleton-chip-short[b-334iwbg0ue] {
    width: 50px;
}

.skeleton-price[b-334iwbg0ue] {
    height: 40px;
    width: 100%;
    border-radius: var(--radius-lg);
}

.skeleton-footer[b-334iwbg0ue] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: auto;
}

.skeleton-qty[b-334iwbg0ue] {
    height: 16px;
    width: 50px;
}

.skeleton-button[b-334iwbg0ue] {
    height: 36px;
    width: 80px;
    border-radius: var(--radius-lg);
}

/* Responsive */
@media (max-width: 640px) {
    .skeleton-card[b-334iwbg0ue] {
        padding: var(--space-md);
    }

    .skeleton-footer[b-334iwbg0ue] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .skeleton-button[b-334iwbg0ue] {
        width: 100%;
    }
}
/* /Components/Merchant/Shared/SkeletonGrid.razor.rz.scp.css */
/* Skeleton Grid - Loading Placeholder Container */

.skeleton-grid-container[b-p56hf3jzdo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.skeleton-section-header[b-p56hf3jzdo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.skeleton-title[b-p56hf3jzdo] {
    height: 24px;
    width: 150px;
}

.skeleton-subtitle[b-p56hf3jzdo] {
    height: 16px;
    width: 200px;
}

.skeleton-filters[b-p56hf3jzdo] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.skeleton-filter[b-p56hf3jzdo] {
    height: 36px;
    width: 120px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-p56hf3jzdo 1.5s ease-in-out infinite;
    border-radius: var(--radius-lg);
}

.skeleton-filter-short[b-p56hf3jzdo] {
    width: 80px;
}

@keyframes skeleton-shimmer-b-p56hf3jzdo {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Use shared item-grid styling from merchant-shared.css */
/* /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, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    padding: 2rem;
    gap: 2rem;
}

.hero-header-left[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.hero-avatar[b-nclome5jxu] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.hero-avatar.warrior[b-nclome5jxu] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.2));
    border: 2px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.hero-avatar.wizard[b-nclome5jxu] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(29, 78, 216, 0.2));
    border: 2px solid rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

.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, #ffd700 0%, #ffec8b 50%, #daa520 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
}

.hero-subtitle[b-nclome5jxu] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}

.hero-level[b-nclome5jxu] {
    color: #ffd700;
    font-weight: 600;
}

.hero-class[b-nclome5jxu] {
    color: #64748b;
}

.hero-header-right[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.hero-stat-badges[b-nclome5jxu] {
    display: flex;
    gap: 1rem;
}

.stat-badge[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.badge-label[b-nclome5jxu] {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-value[b-nclome5jxu] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f8fafc;
    margin-top: 0.25rem;
}

/* ========================================
   Stat Points Alert
   ======================================== */

.stat-points-alert[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(218, 165, 32, 0.08));
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    animation: pulse-glow-b-nclome5jxu 2s ease-in-out infinite;
}

@keyframes pulse-glow-b-nclome5jxu {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.4); }
}

.alert-icon[b-nclome5jxu] {
    color: #ffd700;
    flex-shrink: 0;
}

.stat-points-alert strong[b-nclome5jxu] {
    color: #ffd700;
    display: block;
    margin-bottom: 0.25rem;
}

.stat-points-alert p[b-nclome5jxu] {
    color: #cbd5e1;
    margin: 0;
    font-size: 0.9rem;
}

/* ========================================
   Main Content Grid
   ======================================== */

.sheet-grid[b-nclome5jxu] {
    display: grid;
    grid-template-columns: 350px 1fr 350px;
    gap: 2rem;
}

.sheet-column[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sheet-card[b-nclome5jxu] {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 215, 0, 0.1) !important;
    border-radius: 10px !important;
}

.sheet-card :deep(.mud-card-header)[b-nclome5jxu] {
    padding: 1.25rem !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1) !important;
}

.sheet-card :deep(.mud-card-header-content)[b-nclome5jxu] {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
}

.card-icon[b-nclome5jxu] {
    color: #ffd700;
    flex-shrink: 0;
}

.card-title[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sheet-card :deep(.mud-card-content)[b-nclome5jxu] {
    padding: 1.25rem !important;
}

/* ========================================
   Progress Bars
   ======================================== */

.progress-bar-group[b-nclome5jxu] {
    margin-bottom: 1.5rem;
}

.progress-bar-group:last-child[b-nclome5jxu] {
    margin-bottom: 0;
}

.progress-label[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: #cbd5e1;
}

.progress-value[b-nclome5jxu] {
    color: #f8fafc;
    font-weight: 600;
}

.progress-bar[b-nclome5jxu] {
    border-radius: 8px !important;
    height: 8px !important;
}

/* ========================================
   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;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.currency-box.gold[b-nclome5jxu] {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
}

.currency-box.gold .currency-amount[b-nclome5jxu] {
    color: #ffd700;
}

.currency-box.silver[b-nclome5jxu] {
    background: rgba(192, 192, 192, 0.1);
    border-color: rgba(192, 192, 192, 0.3);
}

.currency-box.silver .currency-amount[b-nclome5jxu] {
    color: #c0c0c0;
}

.currency-box.copper[b-nclome5jxu] {
    background: rgba(205, 127, 50, 0.1);
    border-color: rgba(205, 127, 50, 0.3);
}

.currency-box.copper .currency-amount[b-nclome5jxu] {
    color: #cd7f32;
}

.currency-amount[b-nclome5jxu] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.currency-name[b-nclome5jxu] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.currency-total[b-nclome5jxu] {
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ========================================
   Equipment Slots
   ======================================== */

.equipment-slots[b-nclome5jxu] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.equipment-item[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.equipment-item.equipped[b-nclome5jxu] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.slot-label[b-nclome5jxu] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.item-name[b-nclome5jxu] {
    color: #f8fafc;
    font-weight: 500;
}

/* ========================================
   Ability Scores
   ======================================== */

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

.ability-card[b-nclome5jxu] {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.ability-card:hover[b-nclome5jxu] {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.25);
}

.ability-card.primary[b-nclome5jxu] {
    border-color: rgba(255, 215, 0, 0.2);
}

.ability-card.has-bonus[b-nclome5jxu] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.primary-indicator[b-nclome5jxu] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #0f172a;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.6);
    z-index: 10;
    border: 2px solid #0f172a;
}

.ability-header[b-nclome5jxu] {
    margin-bottom: 0.5rem;
}

.ability-abbr[b-nclome5jxu] {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.1em;
}

.ability-name[b-nclome5jxu] {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ability-value[b-nclome5jxu] {
    margin: 0.5rem 0;
}

.ability-value .total[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #f8fafc;
    display: block;
}

.ability-value .modifier[b-nclome5jxu] {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.25rem;
}

.modifier.positive[b-nclome5jxu] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.modifier.negative[b-nclome5jxu] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.ability-breakdown[b-nclome5jxu] {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.equipment[b-nclome5jxu] {
    font-weight: 600;
}

.equipment.positive[b-nclome5jxu] {
    color: #4ade80;
}

.equipment.negative[b-nclome5jxu] {
    color: #f87171;
}

.allocate-btn[b-nclome5jxu] {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: 2px solid #1e40af;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

.allocate-btn:hover[b-nclome5jxu] {
    transform: scale(1.15);
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.allocating-overlay[b-nclome5jxu] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

/* ========================================
   Inventory Summary
   ======================================== */

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

.inv-stat[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
}

.inv-value[b-nclome5jxu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
}

.inv-label[b-nclome5jxu] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* ========================================
   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;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.combat-stat.wins[b-nclome5jxu] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.combat-stat.losses[b-nclome5jxu] {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.stat-value[b-nclome5jxu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
}

.stat-label[b-nclome5jxu] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.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: #94a3b8;
}

.detail-row strong[b-nclome5jxu] {
    color: #f8fafc;
}

/* ========================================
   Spell Statistics
   ======================================== */

.spell-grid[b-nclome5jxu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.spell-stat[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.spell-value[b-nclome5jxu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #93c5fd;
}

.spell-label[b-nclome5jxu] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* ========================================
   No Character State
   ======================================== */

.no-character-panel[b-nclome5jxu] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    max-width: 500px;
    margin: 4rem auto;
}

.warning-icon[b-nclome5jxu] {
    color: #f59e0b;
    margin-bottom: 1rem;
}

.no-character-title[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f59e0b;
    margin: 0 0 0.5rem;
}

.no-character-text[b-nclome5jxu] {
    color: #94a3b8;
    margin-bottom: 1.5rem;
}

.btn-primary[b-nclome5jxu] {
    background: linear-gradient(135deg, #ffd700, #daa520) !important;
    color: #0f172a !important;
    font-weight: 600;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 1400px) {
    .sheet-grid[b-nclome5jxu] {
        grid-template-columns: 1fr;
    }
    
    .column-left[b-nclome5jxu],
    .column-center[b-nclome5jxu],
    .column-right[b-nclome5jxu] {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .character-sheet-container[b-nclome5jxu] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .hero-header[b-nclome5jxu] {
        flex-direction: column;
        text-align: center;
        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;
    }

    .abilities-grid[b-nclome5jxu] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .inventory-grid[b-nclome5jxu],
    .combat-grid[b-nclome5jxu],
    .spell-grid[b-nclome5jxu] {
        grid-template-columns: 1fr 1fr;
    }

    .currency-grid[b-nclome5jxu] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
}

@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;
    }

    .abilities-grid[b-nclome5jxu] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ability-card[b-nclome5jxu] {
        padding: 0.75rem;
    }

    .ability-value .total[b-nclome5jxu] {
        font-size: 1.25rem;
    }

    .inventory-grid[b-nclome5jxu],
    .spell-grid[b-nclome5jxu] {
        grid-template-columns: 1fr;
    }

    .combat-grid[b-nclome5jxu] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Admin/Blog/AdminBlog.razor.rz.scp.css */
.admin-blog-container[b-oz535gjkut] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Hero Header Pattern */
.hero-header[b-oz535gjkut] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    gap: 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.hero-left[b-oz535gjkut] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.header-icon[b-oz535gjkut] {
    width: 48px;
    height: 48px;
    color: #ffd700;
    flex-shrink: 0;
}

.header-icon svg[b-oz535gjkut] {
    width: 100%;
    height: 100%;
}

.header-info[b-oz535gjkut] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-title[b-oz535gjkut] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 600;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.header-subtitle[b-oz535gjkut] {
    color: #cbd5e1;
    font-size: 0.95rem;
    margin: 0;
}


/* Statistics Cards */
.stats-grid[b-oz535gjkut] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.stat-card[b-oz535gjkut] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.stat-content[b-oz535gjkut] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.stat-icon[b-oz535gjkut] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.stat-icon svg[b-oz535gjkut] {
    width: 32px;
    height: 32px;
}

.stat-icon-info[b-oz535gjkut] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-icon-success[b-oz535gjkut] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.stat-icon-warning[b-oz535gjkut] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stat-icon-primary[b-oz535gjkut] {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
}

.stat-details[b-oz535gjkut] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-details h3[b-oz535gjkut] {
    color: #ffd700;
    font-weight: 600;
    font-size: 1.75rem;
    margin: 0;
}

.stat-label[b-oz535gjkut] {
    color: #cbd5e1;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* Filters */
.filter-section[b-oz535gjkut] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
}

.filter-grid[b-oz535gjkut] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 1rem;
    align-items: center;
}

.form-group[b-oz535gjkut] {
    position: relative;
}

.form-input[b-oz535gjkut],
.form-select[b-oz535gjkut] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    color: #f8fafc;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-input[b-oz535gjkut] {
    padding-right: 3rem;
}

.form-input:focus[b-oz535gjkut],
.form-select:focus[b-oz535gjkut] {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-input[b-oz535gjkut]::placeholder {
    color: #94a3b8;
}

.form-select option[b-oz535gjkut] {
    background: #1e293b;
    color: #f8fafc;
}

.input-icon[b-oz535gjkut] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #94a3b8;
    pointer-events: none;
}

/* Buttons */
.btn[b-oz535gjkut] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn svg[b-oz535gjkut] {
    width: 20px;
    height: 20px;
}

.btn-primary[b-oz535gjkut] {
    background: #ffd700;
    color: #0f172a;
}

.btn-primary:hover[b-oz535gjkut] {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

.btn-outline[b-oz535gjkut] {
    background: transparent;
    color: #ffd700;
    border: 1px solid #ffd700;
}

.btn-outline:hover[b-oz535gjkut] {
    background: rgba(255, 215, 0, 0.1);
}

.btn-icon[b-oz535gjkut] {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.btn-icon svg[b-oz535gjkut] {
    width: 20px;
    height: 20px;
}

.btn-icon-primary[b-oz535gjkut] {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}

.btn-icon-primary:hover[b-oz535gjkut] {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.btn-icon-success[b-oz535gjkut] {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.btn-icon-success:hover[b-oz535gjkut] {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.btn-icon-info[b-oz535gjkut] {
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.3);
}

.btn-icon-info:hover[b-oz535gjkut] {
    background: rgba(96, 165, 250, 0.1);
    border-color: #60a5fa;
}

.btn-icon-error[b-oz535gjkut] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}

.btn-icon-error:hover[b-oz535gjkut] {
    background: rgba(248, 113, 113, 0.1);
    border-color: #f87171;
}

/* Progress Bar */
.progress-bar[b-oz535gjkut] {
    width: 100%;
    height: 4px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill[b-oz535gjkut] {
    height: 100%;
    background: linear-gradient(90deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    background-size: 200% 100%;
    animation: progress-animation-b-oz535gjkut 1.5s ease-in-out infinite;
}

@keyframes progress-animation-b-oz535gjkut {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Empty State */
.empty-state[b-oz535gjkut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    color: #94a3b8;
}

.empty-state svg[b-oz535gjkut] {
    width: 64px;
    height: 64px;
    color: #475569;
}

.empty-state h3[b-oz535gjkut] {
    margin: 0;
    color: #cbd5e1;
    font-size: 1.25rem;
}

.empty-state p[b-oz535gjkut] {
    margin: 0;
    font-size: 0.95rem;
}

.empty-state .btn[b-oz535gjkut] {
    margin-top: 1rem;
}


/* Posts Table */
.posts-table-wrapper[b-oz535gjkut] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.posts-table[b-oz535gjkut] {
    width: 100%;
    border-collapse: collapse;
}

.posts-table thead[b-oz535gjkut] {
    background: rgba(30, 41, 59, 0.8);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.posts-table th[b-oz535gjkut] {
    padding: 1rem;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.posts-table tbody tr[b-oz535gjkut] {
    border-bottom: 1px solid rgba(255, 215, 0, 0.05);
    transition: background 0.2s ease;
}

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

.posts-table td[b-oz535gjkut] {
    padding: 1rem;
    color: #cbd5e1;
    vertical-align: top;
}

.post-title-cell[b-oz535gjkut] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.post-title[b-oz535gjkut] {
    font-weight: 600;
    color: #f8fafc;
    font-size: 0.95rem;
}

.tags-preview[b-oz535gjkut] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.tag[b-oz535gjkut] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 4px;
    font-size: 0.75rem;
    color: #cbd5e1;
}

.tag-more[b-oz535gjkut] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.text-muted[b-oz535gjkut] {
    color: #94a3b8;
}

.action-buttons[b-oz535gjkut] {
    display: flex;
    gap: 0.5rem;
}

/* Badges */
.badge[b-oz535gjkut] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-success[b-oz535gjkut] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-warning[b-oz535gjkut] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-default[b-oz535gjkut] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.badge-info[b-oz535gjkut] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-primary[b-oz535gjkut] {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.badge-secondary[b-oz535gjkut] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Responsive Design */
@media (max-width: 1400px) {
    .filter-grid[b-oz535gjkut] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .admin-blog-container[b-oz535gjkut] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .hero-header[b-oz535gjkut] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }

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

    .stats-grid[b-oz535gjkut] {
        grid-template-columns: 1fr;
    }

    /* Responsive Table */
    .posts-table-wrapper[b-oz535gjkut] {
        overflow-x: auto;
    }

    .posts-table thead[b-oz535gjkut] {
        display: none;
    }

    .posts-table tbody tr[b-oz535gjkut] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid rgba(255, 215, 0, 0.1);
        border-radius: 8px;
        padding: 1rem;
    }

    .posts-table td[b-oz535gjkut] {
        display: block;
        padding: 0.5rem 0;
        border: none;
    }

    .posts-table td[b-oz535gjkut]::before {
        content: attr(data-label);
        display: inline-block;
        font-weight: 600;
        color: #ffd700;
        margin-right: 0.5rem;
        font-size: 0.875rem;
    }

    .action-buttons[b-oz535gjkut] {
        flex-wrap: wrap;
    }
}

.text-muted[b-oz535gjkut] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

/* Empty State */
.empty-state[b-oz535gjkut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.mt-4[b-oz535gjkut] {
    margin-top: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .filter-grid[b-oz535gjkut] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .admin-header[b-oz535gjkut] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-left[b-oz535gjkut] {
        width: 100%;
    }
    
    .filter-grid[b-oz535gjkut] {
        grid-template-columns: 1fr;
    }
    
    .stats-grid[b-oz535gjkut] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Blog/BlogPostEditor.razor.rz.scp.css */
.blog-editor-container[b-k3u7gjbxvo] {
    max-width: 1800px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Header */
.editor-header[b-k3u7gjbxvo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-left[b-k3u7gjbxvo] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-title[b-k3u7gjbxvo] {
    font-family: 'Cinzel', serif;
    color: var(--mud-palette-warning);
}

.header-subtitle[b-k3u7gjbxvo] {
    color: var(--mud-palette-text-secondary);
    margin-top: 0.25rem;
}

.header-actions[b-k3u7gjbxvo] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Editor Grid */
.editor-grid[b-k3u7gjbxvo] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
}

.editor-column[b-k3u7gjbxvo],
.settings-column[b-k3u7gjbxvo] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Editor Sections */
.editor-section[b-k3u7gjbxvo],
.settings-section[b-k3u7gjbxvo] {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 215, 0, 0.1) !important;
    padding: 2rem;
}

.mb-2[b-k3u7gjbxvo] {
    margin-bottom: 0.5rem;
}

.mb-3[b-k3u7gjbxvo] {
    margin-bottom: 1rem;
}

.mt-2[b-k3u7gjbxvo] {
    margin-top: 0.5rem;
}

.mt-3[b-k3u7gjbxvo] {
    margin-top: 1rem;
}

/* Markdown Editor */
.markdown-editor[b-k3u7gjbxvo]  textarea {
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Markdown Help */
.markdown-help[b-k3u7gjbxvo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.help-row[b-k3u7gjbxvo] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.help-row code[b-k3u7gjbxvo] {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

/* Featured Image Preview */
.featured-preview[b-k3u7gjbxvo] {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

/* Preview Content */
.preview-content[b-k3u7gjbxvo] {
    padding: 1.5rem;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 8px;
    line-height: 1.8;
    max-height: 600px;
    overflow-y: auto;
}

.preview-content[b-k3u7gjbxvo]  h1,
.preview-content[b-k3u7gjbxvo]  h2,
.preview-content[b-k3u7gjbxvo]  h3 {
    font-family: 'Cinzel', serif;
    color: var(--mud-palette-warning);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.preview-content[b-k3u7gjbxvo]  h1 {
    font-size: 2rem;
}

.preview-content[b-k3u7gjbxvo]  h2 {
    font-size: 1.5rem;
}

.preview-content[b-k3u7gjbxvo]  h3 {
    font-size: 1.25rem;
}

.preview-content[b-k3u7gjbxvo]  p {
    margin-bottom: 1rem;
}

.preview-content[b-k3u7gjbxvo]  a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.preview-content[b-k3u7gjbxvo]  code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.preview-content[b-k3u7gjbxvo]  pre {
    background: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
}

.preview-content[b-k3u7gjbxvo]  pre code {
    background: transparent;
    padding: 0;
}

.preview-content[b-k3u7gjbxvo]  img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.preview-content[b-k3u7gjbxvo]  ul,
.preview-content[b-k3u7gjbxvo]  ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.preview-content[b-k3u7gjbxvo]  li {
    margin-bottom: 0.5rem;
}

.preview-content[b-k3u7gjbxvo]  blockquote {
    border-left: 4px solid var(--mud-palette-warning);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

/* Responsive */
@media (max-width: 1400px) {
    .editor-grid[b-k3u7gjbxvo] {
        grid-template-columns: 1fr 350px;
    }
}

@media (max-width: 1024px) {
    .editor-grid[b-k3u7gjbxvo] {
        grid-template-columns: 1fr;
    }
    
    .settings-column[b-k3u7gjbxvo] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .editor-header[b-k3u7gjbxvo] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-actions[b-k3u7gjbxvo] {
        width: 100%;
        flex-direction: column;
    }
    
    .header-actions button[b-k3u7gjbxvo] {
        width: 100%;
    }
}
/* /Components/Pages/Admin/Blog/TagManagement.razor.rz.scp.css */
.tag-management-container[b-91otobiigs] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Header */
.admin-header[b-91otobiigs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-left[b-91otobiigs] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-91otobiigs] {
    color: var(--mud-palette-warning);
}

.header-title[b-91otobiigs] {
    font-family: 'Cinzel', serif;
    color: var(--mud-palette-warning);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.header-subtitle[b-91otobiigs] {
    color: var(--mud-palette-text-secondary);
    margin-top: 0.25rem;
}

/* Statistics Row */
.stats-row[b-91otobiigs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.stat-card[b-91otobiigs] {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 215, 0, 0.1) !important;
    padding: 1.5rem;
}

.stat-content[b-91otobiigs] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.stat-details[b-91otobiigs] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-details h5[b-91otobiigs] {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

/* Tags Grid */
.tags-grid[b-91otobiigs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.tag-card[b-91otobiigs] {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 215, 0, 0.1) !important;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tag-card:hover[b-91otobiigs] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.2);
}

.tag-header[b-91otobiigs] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tag-name[b-91otobiigs] {
    font-family: 'Cinzel', serif;
    color: var(--mud-palette-warning);
}

.tag-description[b-91otobiigs] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

.tag-metadata[b-91otobiigs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-actions[b-91otobiigs] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: auto;
}

/* Empty State */
.empty-state[b-91otobiigs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.mt-2[b-91otobiigs] {
    margin-top: 0.5rem;
}

.mt-4[b-91otobiigs] {
    margin-top: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-header[b-91otobiigs] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .tags-grid[b-91otobiigs] {
        grid-template-columns: 1fr;
    }
    
    .stats-row[b-91otobiigs] {
        grid-template-columns: 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, #ffd700 0%, #ffec8b 50%, #daa520 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: #94a3b8;
    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: #94a3b8;
}

/* Stat Cards */
.stat-card[b-tzodqnyl78] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
}

.stat-card:hover[b-tzodqnyl78] {
    transform: translateY(-4px);
    border-color: rgba(255, 215, 0, 0.3);
    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 #22c55e;
}

.stat-card-info[b-tzodqnyl78] {
    border-top: 3px solid #3b82f6;
}

.stat-card-warning[b-tzodqnyl78] {
    border-top: 3px solid #f59e0b;
}

.stat-card-error[b-tzodqnyl78] {
    border-top: 3px solid #ef4444;
}

[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: #ffd700;
}

.stat-content[b-tzodqnyl78] {
    flex: 1;
}

.stat-label[b-tzodqnyl78] {
    font-size: 0.85rem;
    color: #94a3b8;
    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: #f8fafc;
    font-family: 'Cinzel', serif;
}

/* Card Header Title */
.card-header-title[b-tzodqnyl78] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffd700;
    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: #f8fafc;
}

[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: #22c55e !important;
    font-weight: 600;
}

.error-text[b-tzodqnyl78] {
    color: #ef4444 !important;
    font-weight: 600;
}

.warning-text[b-tzodqnyl78] {
    color: #f59e0b !important;
    font-weight: 600;
}

/* Subsection Title */
.subsection-title[b-tzodqnyl78] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
    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.2);
    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: rgba(255, 215, 0, 0.15);
}

.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: #ffd700;
    flex-shrink: 0;
}

.activity-content[b-tzodqnyl78] {
    flex: 1;
    min-width: 0;
}

.activity-description[b-tzodqnyl78] {
    color: #f8fafc;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.activity-description strong[b-tzodqnyl78] {
    color: #ffd700;
    font-weight: 600;
}

.activity-time[b-tzodqnyl78] {
    color: #64748b;
    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.2);
    border-radius: 4px;
}

.activity-feed[b-tzodqnyl78]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    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: #ffd700;
    margin: 0;
    display: flex;
    align-items: center;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.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 rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.stat-card:hover[b-73i8al9my5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.4);
}

.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 rgba(255, 215, 0, 0.3);
}

.stat-icon .mud-icon-root[b-73i8al9my5] {
    color: #ffd700;
}

.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: #ffd700;
    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: #3b82f6;
}

.stat-card-info .stat-value[b-73i8al9my5] {
    color: #3b82f6;
}

.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: #f59e0b;
}

.stat-card-warning .stat-value[b-73i8al9my5] {
    color: #f59e0b;
}

.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: #22c55e;
}

.stat-card-success .stat-value[b-73i8al9my5] {
    color: #22c55e;
}

.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: #8b5cf6;
}

.stat-card-primary .stat-value[b-73i8al9my5] {
    color: #8b5cf6;
}

/* Table Card */
.card-header-title[b-73i8al9my5] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffd700;
    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 rgba(255, 215, 0, 0.3);
    font-weight: 600;
    color: #ffd700;
    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: #ffd700;
    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, #0f172a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-y47c9xc3s4] .login-paper {
    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: 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: #ffd700;
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
}

[b-y47c9xc3s4] .login-subtitle {
    font-size: 0.9rem;
    color: #94a3b8;
    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.2);
}

[b-y47c9xc3s4] .mud-text-field .mud-input {
    color: #f8fafc;
}

[b-y47c9xc3s4] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

[b-y47c9xc3s4] .mud-text-field .mud-input-underline {
    display: none;
}

[b-y47c9xc3s4] .mud-text-field .mud-input-outlined {
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-y47c9xc3s4] .mud-text-field .mud-input-outlined:hover {
    border-color: rgba(255, 215, 0, 0.4);
}

[b-y47c9xc3s4] .mud-text-field .mud-input-outlined:focus-within {
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

[b-y47c9xc3s4] .mud-text-field-label {
    color: #94a3b8;
    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 rgba(255, 215, 0, 0.2);
}

[b-y47c9xc3s4] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: rgba(255, 215, 0, 0.4);
}

[b-y47c9xc3s4] .login-button {
    background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
    color: #0f172a;
    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 rgba(255, 215, 0, 0.3);
    margin-top: 1.5rem;
}

[b-y47c9xc3s4] .login-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffec8b 0%, #ffd700 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: #0f172a !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: #fca5a5;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

[b-y47c9xc3s4] .login-divider {
    border-color: rgba(255, 215, 0, 0.15);
    margin: 1.5rem 0;
}

[b-y47c9xc3s4] .login-footer {
    text-align: center;
    margin-top: 1.5rem;
}

[b-y47c9xc3s4] .login-footer-text {
    color: #94a3b8;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

[b-y47c9xc3s4] .login-footer-link {
    color: #ffd700;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

[b-y47c9xc3s4] .login-footer-link:hover {
    color: #ffec8b;
    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: #86efac;
}

[b-y47c9xc3s4] .mud-alert-filled-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* Password requirements box */
[b-y47c9xc3s4] .password-requirements {
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid #ffd700;
    padding: 0.75rem;
    margin: 1rem 0;
    border-radius: 4px;
}

[b-y47c9xc3s4] .password-requirements strong {
    color: #ffd700;
}

/* Outlined button style */
[b-y47c9xc3s4] .mud-button-outlined {
    border-color: rgba(255, 215, 0, 0.4);
    color: #ffd700;
    transition: all 0.3s ease;
}

[b-y47c9xc3s4] .mud-button-outlined:hover {
    border-color: #ffd700;
    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, #0f172a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-be9mscd9b5] .login-paper {
    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: 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: #ffd700;
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
}

[b-be9mscd9b5] .login-subtitle {
    font-size: 0.9rem;
    color: #94a3b8;
    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.2);
}

[b-be9mscd9b5] .mud-text-field .mud-input {
    color: #f8fafc;
}

[b-be9mscd9b5] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

[b-be9mscd9b5] .mud-text-field .mud-input-underline {
    display: none;
}

[b-be9mscd9b5] .mud-text-field .mud-input-outlined {
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-be9mscd9b5] .mud-text-field .mud-input-outlined:hover {
    border-color: rgba(255, 215, 0, 0.4);
}

[b-be9mscd9b5] .mud-text-field .mud-input-outlined:focus-within {
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

[b-be9mscd9b5] .mud-text-field-label {
    color: #94a3b8;
    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 rgba(255, 215, 0, 0.2);
}

[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: rgba(255, 215, 0, 0.4);
}

[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline-trailing,
[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline-leading {
    border-top-color: rgba(255, 215, 0, 0.2);
}

[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: #ffd700;
}

[b-be9mscd9b5] .remember-label {
    color: #cbd5e1;
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

[b-be9mscd9b5] .remember-label:hover {
    color: #ffd700;
}

[b-be9mscd9b5] .forgot-password-link {
    transition: all 0.3s ease;
}

[b-be9mscd9b5] .forgot-password-link:hover {
    color: #ffec8b !important;
    text-decoration: underline !important;
}

[b-be9mscd9b5] .login-button {
    background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
    color: #0f172a;
    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 rgba(255, 215, 0, 0.3);
    margin-bottom: 1.5rem;
}

[b-be9mscd9b5] .login-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffec8b 0%, #ffd700 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: #0f172a !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: #fca5a5;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

[b-be9mscd9b5] .login-divider {
    border-color: rgba(255, 215, 0, 0.15);
    margin: 1.5rem 0;
}

[b-be9mscd9b5] .login-footer {
    text-align: center;
}

[b-be9mscd9b5] .login-footer-text {
    color: #94a3b8;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

[b-be9mscd9b5] .login-footer-link {
    color: #ffd700;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

[b-be9mscd9b5] .login-footer-link:hover {
    color: #ffec8b;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

[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: #64748b;
    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, #0f172a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-w25u27kobd] .login-paper {
    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: 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: #ffd700;
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
}

[b-w25u27kobd] .login-subtitle {
    font-size: 0.9rem;
    color: #94a3b8;
    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.2);
}

[b-w25u27kobd] .mud-text-field .mud-input {
    color: #f8fafc;
}

[b-w25u27kobd] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

[b-w25u27kobd] .mud-text-field .mud-input-underline {
    display: none;
}

[b-w25u27kobd] .mud-text-field .mud-input-outlined {
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-w25u27kobd] .mud-text-field .mud-input-outlined:hover {
    border-color: rgba(255, 215, 0, 0.4);
}

[b-w25u27kobd] .mud-text-field .mud-input-outlined:focus-within {
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

[b-w25u27kobd] .mud-text-field-label {
    color: #94a3b8;
    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 rgba(255, 215, 0, 0.2);
}

[b-w25u27kobd] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: rgba(255, 215, 0, 0.4);
}

[b-w25u27kobd] .login-button {
    background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
    color: #0f172a;
    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 rgba(255, 215, 0, 0.3);
    margin-top: 1.5rem;
}

[b-w25u27kobd] .login-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffec8b 0%, #ffd700 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: #0f172a !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: #fca5a5;
    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: #86efac;
}

[b-w25u27kobd] .mud-alert-filled-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

[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 #ffd700;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.password-requirements strong[b-w25u27kobd] {
    color: #ffd700;
}

/* Outlined button style */
[b-w25u27kobd] .mud-button-outlined {
    border-color: rgba(255, 215, 0, 0.4);
    color: #ffd700;
    transition: all 0.3s ease;
}

[b-w25u27kobd] .mud-button-outlined:hover {
    border-color: #ffd700;
    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, #0f172a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-jiepl7sjeg] .signup-paper {
    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: 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: #ffd700;
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
}

[b-jiepl7sjeg] .signup-subtitle {
    font-size: 0.9rem;
    color: #94a3b8;
    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.2);
}

[b-jiepl7sjeg] .mud-text-field .mud-input {
    color: #f8fafc;
}

[b-jiepl7sjeg] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

[b-jiepl7sjeg] .mud-text-field .mud-input-underline {
    display: none;
}

[b-jiepl7sjeg] .mud-text-field .mud-input-outlined {
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-jiepl7sjeg] .mud-text-field .mud-input-outlined:hover {
    border-color: rgba(255, 215, 0, 0.4);
}

[b-jiepl7sjeg] .mud-text-field .mud-input-outlined:focus-within {
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

[b-jiepl7sjeg] .mud-text-field-label {
    color: #94a3b8;
    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 rgba(255, 215, 0, 0.2);
}

[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: rgba(255, 215, 0, 0.4);
}

[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline-trailing,
[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline-leading {
    border-top-color: rgba(255, 215, 0, 0.2);
}

/* 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: #60a5fa;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

[b-jiepl7sjeg] .requirement-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: 0.8rem;
    transition: color 0.3s ease;
}

[b-jiepl7sjeg] .requirement-item.valid {
    color: #4ade80;
}

[b-jiepl7sjeg] .requirement-item .mud-icon-root {
    font-size: 0.875rem;
    color: #64748b;
}

[b-jiepl7sjeg] .requirement-item.valid .mud-icon-root {
    color: #4ade80;
}

/* Buttons */
[b-jiepl7sjeg] .signup-button {
    background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
    color: #0f172a;
    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 rgba(255, 215, 0, 0.3);
    margin-bottom: 1.5rem;
}

[b-jiepl7sjeg] .signup-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffec8b 0%, #ffd700 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 rgba(255, 215, 0, 0.3);
    color: #ffd700;
    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: #ffd700;
    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: #fca5a5;
    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, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    padding: 0 1rem;
    color: #94a3b8;
    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: rgba(255, 215, 0, 0.15);
    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: #4ade80;
    filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.4));
}

[b-jiepl7sjeg] .verification-title {
    font-family: 'Cinzel', serif;
    color: #4ade80;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(74, 222, 128, 0.2);
}

[b-jiepl7sjeg] .verification-message {
    color: #e2e8f0;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

[b-jiepl7sjeg] .verification-message strong {
    color: #ffd700;
    font-weight: 600;
}

[b-jiepl7sjeg] .verification-instructions {
    color: #94a3b8;
    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: #60a5fa;
    font-size: 1rem;
    flex-shrink: 0;
}

[b-jiepl7sjeg] .verification-note span {
    color: #cbd5e1;
    font-size: 0.8rem;
    text-align: left;
}

/* Progress Circular */
[b-jiepl7sjeg] .mud-progress-circular {
    color: #0f172a !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, #ffd700 0%, #ffec8b 50%, #daa520 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.page-subtitle[b-zy3wbuwm0q] {
    color: #64748b;
    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 rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.slots-info[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    color: #cbd5e1;
    font-size: 0.95rem;
}

.slots-text strong[b-zy3wbuwm0q] {
    color: #ffd700;
}

/* ===== Character Limit Notice ===== */
.character-limit-notice[b-zy3wbuwm0q] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    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: #ffd700;
}

/* ===== 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 rgba(255, 215, 0, 0.3); }
    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: rgba(255, 215, 0, 0.3); }
    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.2);
    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: #64748b;
    transition: all 0.3s ease;
}

.progress-step.active .step-icon[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, #ffd700, #daa520);
    border-color: #ffd700;
    color: #0f172a;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.progress-step.completed .step-icon[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #22c55e;
    color: white;
}

.step-label[b-zy3wbuwm0q] {
    font-size: 0.75rem;
    color: #64748b;
    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: #ffd700;
}

.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, #22c55e, #ffd700);
}

/* ===== Creation Step ===== */
.creation-step[b-zy3wbuwm0q] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.15);
    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, #ffd700 0%, #ffec8b 50%, #daa520 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.step-subtitle[b-zy3wbuwm0q] {
    color: #94a3b8;
    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: #94a3b8;
}

.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: #93c5fd;
    font-size: 0.9rem;
}

.race-info-icon[b-zy3wbuwm0q] {
    color: #60a5fa;
    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, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    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: rgba(255, 215, 0, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.class-card.selected[b-zy3wbuwm0q] {
    border-color: #ffd700;
    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, #ef4444, transparent); }
.class-card.wizard .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, #3b82f6, transparent); }
.class-card.ranger .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, #22c55e, transparent); }
.class-card.rogue .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, #6366f1, transparent); }
.class-card.paladin .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, #f59e0b, transparent); }
.class-card.bard .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, #ec4899, transparent); }
.class-card.cleric .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, #10b981, transparent); }
.class-card.monk .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, #8b5cf6, transparent); }
.class-card.barbarian .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, #dc2626, 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: #ef4444; }
.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: #3b82f6; }
.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: #22c55e; }
.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: #6366f1; }
.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: #f59e0b; }
.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: #ec4899; }
.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: #10b981; }
.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: #8b5cf6; }
.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: #dc2626; }

.class-card.warrior.selected[b-zy3wbuwm0q] { border-color: #ef4444; box-shadow: 0 0 30px rgba(239, 68, 68, 0.3); }
.class-card.wizard.selected[b-zy3wbuwm0q] { border-color: #3b82f6; box-shadow: 0 0 30px rgba(59, 130, 246, 0.3); }
.class-card.ranger.selected[b-zy3wbuwm0q] { border-color: #22c55e; box-shadow: 0 0 30px rgba(34, 197, 94, 0.3); }
.class-card.rogue.selected[b-zy3wbuwm0q] { border-color: #6366f1; box-shadow: 0 0 30px rgba(99, 102, 241, 0.3); }
.class-card.paladin.selected[b-zy3wbuwm0q] { border-color: #f59e0b; box-shadow: 0 0 30px rgba(245, 158, 11, 0.3); }
.class-card.bard.selected[b-zy3wbuwm0q] { border-color: #ec4899; box-shadow: 0 0 30px rgba(236, 72, 153, 0.3); }
.class-card.cleric.selected[b-zy3wbuwm0q] { border-color: #10b981; box-shadow: 0 0 30px rgba(16, 185, 129, 0.3); }
.class-card.monk.selected[b-zy3wbuwm0q] { border-color: #8b5cf6; box-shadow: 0 0 30px rgba(139, 92, 246, 0.3); }
.class-card.barbarian.selected[b-zy3wbuwm0q] { border-color: #dc2626; 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: #f8fafc;
    text-align: center;
    margin-bottom: 0.25rem;
}

.class-role[b-zy3wbuwm0q] {
    font-size: 0.75rem;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 0.75rem;
}

.class-description[b-zy3wbuwm0q] {
    font-size: 0.85rem;
    color: #94a3b8;
    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;
}

.class-feature[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #cbd5e1;
}

.feature-icon[b-zy3wbuwm0q] {
    color: #ffd700;
}

.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: #64748b;
    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: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.armor-badge.medium[b-zy3wbuwm0q] {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.armor-badge.heavy[b-zy3wbuwm0q] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    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, #ffd700, #daa520);
    color: #0f172a;
    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 rgba(255, 215, 0, 0.4);
}

/* 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: #f59e0b;
    margin-bottom: 0.5rem;
}

.lock-text[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    color: #ffd700;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Selected Indicator */
.selected-indicator[b-zy3wbuwm0q] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    color: #22c55e;
    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: #94a3b8 !important;
}

.btn-cancel:hover[b-zy3wbuwm0q] {
    color: #f8fafc !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, #ffd700, #daa520) !important;
    color: #0f172a !important;
}

.btn-next:hover[b-zy3wbuwm0q],
.btn-create:hover[b-zy3wbuwm0q] {
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    transform: translateY(-2px);
}

.btn-roll[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #0f172a !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-roll:hover[b-zy3wbuwm0q] {
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    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 rgba(255, 215, 0, 0.2);
    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: #ffd700;
    margin: 0 0 0.25rem 0;
}

.summary-details[b-zy3wbuwm0q] {
    color: #94a3b8;
    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: #cbd5e1;
    font-size: 0.9rem;
    font-style: italic;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.quote-icon[b-zy3wbuwm0q] {
    color: #ffd700;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== Roll Prompt ===== */
.roll-prompt[b-zy3wbuwm0q] {
    text-align: center;
    padding: 2rem;
}

.roll-prompt-icon[b-zy3wbuwm0q] {
    color: #ffd700;
    font-size: 4rem;
    margin-bottom: 1rem;
}

.roll-prompt h3[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: #ffd700;
    margin-bottom: 0.5rem;
}

.roll-prompt p[b-zy3wbuwm0q] {
    color: #94a3b8;
    margin-bottom: 0.5rem;
}

.roll-info[b-zy3wbuwm0q] {
    font-size: 0.9rem;
    color: #64748b;
    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: #ffd700;
    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, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    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: #64748b;
    font-weight: 600;
    display: block;
}

.stat-full-name[b-zy3wbuwm0q] {
    font-size: 0.7rem;
    color: #94a3b8;
    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: #cbd5e1;
    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: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.die.dropped[b-zy3wbuwm0q] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    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: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.stat-roll-card.spellcasting[b-zy3wbuwm0q] {
    border-color: #3b82f6;
}

.primary-indicator[b-zy3wbuwm0q],
.spellcasting-indicator[b-zy3wbuwm0q] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #ffd700;
}

.spellcasting-indicator[b-zy3wbuwm0q] {
    color: #3b82f6;
}

.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: #ffd700;
}

.spellcasting-note[b-zy3wbuwm0q] {
    color: #3b82f6;
}

/* 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 rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.info-icon[b-zy3wbuwm0q] {
    color: #ffd700;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-text[b-zy3wbuwm0q] {
    color: #fcd34d;
    font-size: 0.85rem;
    line-height: 1.5;
}

.spellcasting-note[b-zy3wbuwm0q] {
    display: block;
    margin-top: 0.25rem;
    color: #93c5fd;
}

/* Combat Preview */
.combat-preview[b-zy3wbuwm0q] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    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: #ef4444; }
.mana-icon[b-zy3wbuwm0q] { color: #3b82f6; }
.ac-icon[b-zy3wbuwm0q] { color: #ffd700; }
.total-icon[b-zy3wbuwm0q] { color: #22c55e; }

.combat-stat-label[b-zy3wbuwm0q] {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.combat-stat-value[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
}

/* 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: #fbbf24;
    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: rgba(255, 215, 0, 0.3);
    margin-bottom: 1rem;
}

/* Class Helper Link */
.class-helper-link[b-zy3wbuwm0q] {
    text-align: right;
    margin-bottom: 1.5rem;
}
/* /Components/Pages/Classes/Index.razor.rz.scp.css */
/* Classes Index Page Styles */

/* Filter Section */
.filter-section[b-op4wk4zjd0] {
    margin-bottom: var(--space-2xl);
}

.filter-buttons[b-op4wk4zjd0] {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.filter-btn[b-op4wk4zjd0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.filter-btn:hover[b-op4wk4zjd0] {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
}

.filter-btn.active[b-op4wk4zjd0] {
    background: rgba(255, 215, 0, 0.15);
    color: var(--color-primary);
    border-color: var(--color-border-active);
}

/* Premium filter button - gold star */
.filter-btn[b-op4wk4zjd0]  .mud-icon-root {
    color: var(--color-primary);
}

.filter-btn:not(.active)[b-op4wk4zjd0]  .mud-icon-root {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
}

.filter-btn:hover[b-op4wk4zjd0]  .mud-icon-root {
    color: var(--color-primary-light);
}
/* /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%;
}

/* ===== 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, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
    box-shadow:
        inset 0 0 30px rgba(34, 197, 94, 0.15),
        0 0 20px rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.3);
    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 rgba(34, 197, 94, 0.15),
            0 0 20px rgba(34, 197, 94, 0.2);
    }
    50% {
        box-shadow:
            inset 0 0 40px rgba(34, 197, 94, 0.2),
            0 0 30px rgba(34, 197, 94, 0.3);
    }
}

/* Defeat Inline - Subtle Red Glow Background */
.battle-result-inline.defeat[b-necssm1ckz] {
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
    box-shadow:
        inset 0 0 30px rgba(239, 68, 68, 0.15),
        0 0 20px rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    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 rgba(239, 68, 68, 0.15),
            0 0 20px rgba(239, 68, 68, 0.2);
    }
    50% {
        box-shadow:
            inset 0 0 40px rgba(239, 68, 68, 0.2),
            0 0 30px rgba(239, 68, 68, 0.3);
    }
}

/* 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.2);
    border-radius: var(--radius-sm);
}

.battle-result-inline[b-necssm1ckz]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.4);
    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: rgba(255, 215, 0, 0.3);
    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);
}

/* ===== ZONE COMBAT SYSTEM ===== */

/* Zone Battlefield Container */
.zone-battlefield-container[b-necssm1ckz] {
    grid-column: 3;
    grid-row: 2 / 4;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: rgba(15, 23, 42, 0.6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-subtle);
    overflow-y: auto;
}

/* Horizontal zone battlefield grid layout */
.zone-battlefield-horizontal[b-necssm1ckz] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: var(--space-sm);
    align-items: center;
    width: 100%;
}

/* Desktop: side wrappers are transparent to the grid */
.zone-player-side[b-necssm1ckz],
.zone-enemy-side[b-necssm1ckz] {
    display: contents;
}

.zone-side-title[b-necssm1ckz] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    margin: 0;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zone-side-title.player-label[b-necssm1ckz] {
    grid-column: 1 / 4;
    grid-row: 1;
}

.zone-side-title.enemy-label[b-necssm1ckz] {
    grid-column: 5 / 8;
    grid-row: 1;
}

.zone-slot[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    grid-row: 2;
}

.zone-slot.player-rear[b-necssm1ckz] {
    grid-column: 1;
}

.zone-slot.player-flanks[b-necssm1ckz] {
    grid-column: 2;
}

.zone-slot.player-vanguard[b-necssm1ckz] {
    grid-column: 3;
}

.zone-divider-horizontal[b-necssm1ckz] {
    grid-column: 4;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-sm);
}

.zone-slot.enemy-vanguard[b-necssm1ckz] {
    grid-column: 5;
}

.zone-slot.enemy-flanks[b-necssm1ckz] {
    grid-column: 6;
}

.zone-slot.enemy-rear[b-necssm1ckz] {
    grid-column: 7;
}

/* Zone Card Styles */
[b-necssm1ckz] .zone-card {
    padding: var(--space-sm);
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    min-width: 80px;
    width: 100%;
    max-width: 160px;
    transition: all var(--transition-base);
    font-size: var(--font-size-sm);
}

[b-necssm1ckz] .zone-card.current-player-zone {
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    animation: pulseBorder-b-necssm1ckz 2s ease-in-out infinite;
}

@keyframes pulseBorder-b-necssm1ckz {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
}

[b-necssm1ckz] .zone-card.available-move {
    border-color: rgba(59, 130, 246, 0.6);
    cursor: pointer;
}

[b-necssm1ckz] .zone-card.available-move:hover {
    border-color: rgba(59, 130, 246, 0.9);
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

[b-necssm1ckz] .zone-card.pending-move {
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.5);
}

[b-necssm1ckz] .zone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

[b-necssm1ckz] .zone-bonus {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
}

[b-necssm1ckz] .zone-occupants {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

[b-necssm1ckz] .empty-zone {
    font-style: italic;
    opacity: 0.5;
}

[b-necssm1ckz] .zone-hazards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

/* Movement Controls */
.zone-movement-controls[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(30, 41, 59, 0.6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
}

.movement-title[b-necssm1ckz] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.movement-buttons[b-necssm1ckz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* Mobile Zone Info */
.zone-info-mobile[b-necssm1ckz] {
    display: flex;
    align-items: center;
    padding: var(--space-sm);
    background: rgba(30, 41, 59, 0.8);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

/* 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;
}

[b-necssm1ckz] .formation-zone-card {
    padding: var(--space-xl);
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);
    min-width: 160px;
    max-width: 200px;
    cursor: pointer;
    transition: all var(--transition-base);
}

[b-necssm1ckz] .formation-zone-card:hover {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-4px);
}

[b-necssm1ckz] .formation-zone-card.selected {
    border-color: rgba(34, 197, 94, 0.8);
    background: rgba(34, 197, 94, 0.1);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

[b-necssm1ckz] .formation-zone-card.selected:hover {
    border-color: rgba(34, 197, 94, 0.9);
}

/* ===== TABLET LANDSCAPE ===== */
@media (max-width: 1366px) and (min-width: 1200px) {
    .combat-layout[b-necssm1ckz] {
        grid-template-columns: 240px minmax(350px, 420px) 1fr;
        gap: var(--space-md);
        padding: var(--space-md);
    }
}

/* ===== TABLET (768px - 1199px) - Stacked zone layout ===== */
@media (min-width: 768px) and (max-width: 1199px) {
    .combat-layout[b-necssm1ckz] {
        overflow-y: auto;
    }

    /* Zone battlefield tablet: override desktop grid positioning */
    .zone-battlefield-container[b-necssm1ckz] {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        padding: var(--space-md);
        overflow: visible;
    }

    /* Tablet: Switch from 7-col grid to vertical stack */
    .zone-battlefield-horizontal[b-necssm1ckz] {
        display: flex !important;
        flex-direction: column;
        gap: var(--space-sm);
        width: 100%;
    }

    /* Hide the VS divider on tablet */
    .zone-divider-horizontal[b-necssm1ckz] {
        display: none;
    }

    /* Side wrappers become their own 3-column grid rows on tablet */
    .zone-player-side[b-necssm1ckz],
    .zone-enemy-side[b-necssm1ckz] {
        display: grid !important;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--space-sm);
        align-items: start;
        background: rgba(15, 23, 42, 0.4);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-lg);
        padding: var(--space-sm);
    }

    .zone-player-side[b-necssm1ckz] {
        border-left: 3px solid rgba(59, 130, 246, 0.5);
    }

    .zone-enemy-side[b-necssm1ckz] {
        border-left: 3px solid rgba(239, 68, 68, 0.5);
    }

    /* Section titles span full width */
    .zone-side-title[b-necssm1ckz] {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 0.75rem;
        text-align: left;
        padding-bottom: var(--space-xs);
        margin: 0;
    }

    /* Reset desktop grid-column/grid-row on all slots */
    .zone-slot[b-necssm1ckz] {
        grid-row: 2;
    }

    .zone-slot.player-rear[b-necssm1ckz]   { grid-column: 1; }
    .zone-slot.player-flanks[b-necssm1ckz] { grid-column: 2; }
    .zone-slot.player-vanguard[b-necssm1ckz] { grid-column: 3; }
    .zone-slot.enemy-vanguard[b-necssm1ckz]  { grid-column: 1; }
    .zone-slot.enemy-flanks[b-necssm1ckz]    { grid-column: 2; }
    .zone-slot.enemy-rear[b-necssm1ckz]      { grid-column: 3; }

    /* Flanks: stack vertically within their column */
    .zone-slot.player-flanks[b-necssm1ckz],
    .zone-slot.enemy-flanks[b-necssm1ckz] {
        flex-direction: column;
        gap: var(--space-xs);
    }

    /* Zone cards: full-width within their column, compact text */
    [b-necssm1ckz] .zone-card {
        min-width: 0;
        max-width: none;
        width: 100%;
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.7rem;
    }

    /* Compact zone header on tablet */
    [b-necssm1ckz] .zone-header {
        margin-bottom: 2px;
    }

    /* Truncate bonus text on tablet */
    [b-necssm1ckz] .zone-bonus {
        font-size: 0.65rem;
        margin-bottom: 2px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Compact occupant chips */
    [b-necssm1ckz] .zone-occupants {
        margin-top: 2px;
        gap: 2px;
    }

    .zone-movement-controls[b-necssm1ckz] {
        padding: var(--space-md);
    }

    .movement-buttons[b-necssm1ckz] {
        flex-wrap: wrap;
    }
}

/* ===== TABLET LANDSCAPE ===== */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
    .combat-layout[b-necssm1ckz] {
        height: calc(100vh - 120px);
    }

    /* In landscape, side wrappers can use wider columns */
    .zone-player-side[b-necssm1ckz],
    .zone-enemy-side[b-necssm1ckz] {
        grid-template-columns: 1fr 1.5fr 1fr;
    }
}

/* ===== 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;
    }

    /* Zone system - mobile compact view */
    .zone-battlefield-container[b-necssm1ckz] {
        display: none; /* Hide full battlefield on mobile */
    }

    .zone-info-mobile[b-necssm1ckz] {
        display: flex; /* Show compact zone info */
    }

    .formation-picker-diamond[b-necssm1ckz] {
        padding: var(--space-lg);
        gap: var(--space-md);
    }

    [b-necssm1ckz] .formation-zone-card {
        min-width: 120px;
        max-width: 140px;
        padding: var(--space-lg);
    }

    .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%, rgba(15, 23, 42, 0.9) 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, rgba(255, 215, 0, 0.15), rgba(218, 165, 32, 0.1)) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: var(--color-primary) !important;
    transition: all var(--transition-slow) !important;
}

[b-necssm1ckz] .class-feature-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), 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: #93c5fd !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: #f9a8d4 !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],
.monster-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;
}

/* Buff icons (green) */
.status-effect-badge.buff-icon[b-necssm1ckz] {
    border-color: var(--color-success);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(21, 128, 61, 0.2));
}

.status-effect-badge.buff-icon[b-necssm1ckz]  .mud-icon-root {
    color: var(--color-success-light);
}

/* Debuff icons (red) */
.status-effect-badge.debuff-icon[b-necssm1ckz] {
    border-color: var(--color-danger);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.2));
}

.status-effect-badge.debuff-icon[b-necssm1ckz]  .mud-icon-root {
    color: var(--color-danger-light);
}

/* More effects indicator */
.status-effect-badge.more-effects[b-necssm1ckz] {
    border-color: var(--color-text-secondary);
    background: rgba(148, 163, 184, 0.2);
}

.status-effect-badge.more-effects[b-necssm1ckz]  .mud-icon-root {
    color: #cbd5e1;
}

/* 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/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 #f59e0b !important;
    border-radius: 12px;
}

[b-ih81enozou] .admin-warning-banner .mud-typography-h5 {
    color: #fbbf24 !important;
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

[b-ih81enozou] .admin-warning-banner .mud-typography-caption {
    color: #fcd34d !important;
}

[b-ih81enozou] .admin-warning-banner strong {
    color: #fbbf24;
    font-weight: 700;
}

/* Loading Paper - Centered content */
[b-ih81enozou] .loading-paper {
    text-align: center;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid rgba(255, 215, 0, 0.15) !important;
}

[b-ih81enozou] .loading-paper .mud-typography {
    color: #f8fafc !important;
}

/* Page Header */
.adventure-editor-header[b-ih81enozou] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.adventure-editor-header h1[b-ih81enozou] {
    font-family: 'Cinzel', serif;
    background: linear-gradient(135deg, #ffd700 0%, #ffec8b 50%, #daa520 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: #ffd700;
}

/* Waypoint Cards - Override MudBlazor Paper defaults */
[b-ih81enozou] .mud-paper {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important;
    color: #f8fafc !important;
}

[b-ih81enozou] .mud-paper.mud-elevation-2,
[b-ih81enozou] .mud-paper.mud-elevation-4 {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid rgba(255, 215, 0, 0.15);
    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 rgba(255, 215, 0, 0.15) !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: #f8fafc !important;
}

[b-ih81enozou] .mud-paper .mud-typography-h6 {
    font-family: 'Cinzel', serif;
    color: #ffd700 !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: rgba(255, 215, 0, 0.2) !important;
}

[b-ih81enozou] .mud-input-outlined:hover .mud-input-root {
    border-color: rgba(255, 215, 0, 0.3) !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: #94a3b8 !important;
}

[b-ih81enozou] .mud-input-text,
[b-ih81enozou] .mud-input input {
    color: #f8fafc !important;
}

/* Textarea fields */
[b-ih81enozou] .mud-input-outlined textarea {
    background: rgba(15, 23, 42, 0.8) !important;
    color: #f8fafc !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: #1e293b !important;
}

[b-ih81enozou] .mud-list-item {
    color: #f8fafc !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: #fbbf24 !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: #f59e0b !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, #ffd700, #ffec8b) !important;
}

[b-ih81enozou] .mud-progress-circular circle {
    stroke: #ffd700 !important;
}

/* Tab styling for editor sections */
[b-ih81enozou] .mud-tabs {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px 8px 0 0;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

[b-ih81enozou] .mud-tab {
    color: #94a3b8 !important;
}

[b-ih81enozou] .mud-tab.mud-tab-active {
    color: #ffd700 !important;
}

[b-ih81enozou] .mud-tab-slider {
    background: #ffd700 !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: rgba(255, 215, 0, 0.3) !important;
}

[b-ih81enozou] .mud-switch.mud-checked .mud-switch-thumb {
    background: #ffd700 !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: #93c5fd !important;
}

[b-ih81enozou] .mud-chip-set .mud-chip .mud-chip-icon {
    color: #60a5fa !important;
}

/* Delete buttons */
[b-ih81enozou] .mud-button-text.mud-button-text-error {
    color: #f87171 !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: #93c5fd !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: #fcd34d !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: #fca5a5 !important;
}

/* Expansion panels for waypoint details */
[b-ih81enozou] .mud-expand-panel {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(255, 215, 0, 0.15) !important;
}

[b-ih81enozou] .mud-expand-panel-header {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* ====================================================================== */
/* SIMULATION DIALOG STYLING (PHASE 1-3) */
/* ====================================================================== */

/* Simulation Dialog Styling */
[b-ih81enozou] .mud-dialog .mud-dialog-content {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)) !important;
    color: #f8fafc !important;
}

[b-ih81enozou] .mud-dialog .mud-dialog-title {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
}

/* Expansion Panels in Results */
[b-ih81enozou] .mud-expansion-panel {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(255, 215, 0, 0.15) !important;
    margin-bottom: 0.5rem !important;
    border-radius: 8px !important;
}

[b-ih81enozou] .mud-expansion-panel-header {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px 8px 0 0 !important;
}

[b-ih81enozou] .mud-expansion-panel-text {
    color: #ffd700 !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: #f8fafc !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: #60a5fa !important;
}

/* Dialog Actions */
[b-ih81enozou] .mud-dialog-actions {
    background: rgba(0, 0, 0, 0.2) !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: #ffd700 !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%, #daa520 50%, #ffd700 100%) !important;
    color: #0f172a !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, #22c55e, #16a34a) !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, #ef4444, #dc2626) !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: #94a3b8 !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

[b-ih81enozou] .status-live {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

[b-ih81enozou] .status-archived {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* Checkbox styling */
[b-ih81enozou] .mud-checkbox .mud-checkbox-icon {
    color: #ffd700 !important;
}

[b-ih81enozou] .mud-checkbox.mud-checked .mud-checkbox-icon {
    color: #ffd700 !important;
}

/* Icon buttons */
[b-ih81enozou] .mud-icon-button {
    color: #94a3b8 !important;
}

[b-ih81enozou] .mud-icon-button:hover {
    background: rgba(255, 215, 0, 0.1) !important;
    color: #ffd700 !important;
}

/* Text inside waypoint cards */
[b-ih81enozou] .mud-paper .mud-typography {
    color: #f8fafc !important;
}

[b-ih81enozou] .mud-paper .mud-typography.mud-typography-caption {
    color: #94a3b8 !important;
}

/* Boss waypoint indicator */
[b-ih81enozou] .mud-paper:has(.mud-checkbox[checked]) {
    border-left: 3px solid #ef4444 !important;
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(30, 41, 59, 0.9)) !important;
}

/* Waypoint Cards */
[b-ih81enozou] .waypoint-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid rgba(255, 215, 0, 0.15) !important;
    border-radius: 12px;
}

[b-ih81enozou] .waypoint-header-item {
    display: flex;
    align-items: center;
}

[b-ih81enozou] .waypoint-number {
    font-family: 'Cinzel', serif;
    color: #ffd700 !important;
    font-weight: 600;
}

/* JSON Preview */
[b-ih81enozou] .json-preview {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 215, 0, 0.15) !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: #86efac !important;
    font-family: 'Courier New', monospace;
}
/* /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.2);
    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.2);
    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, rgba(255, 215, 0, 0.2), 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: #e2e8f0;
}

.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.2);
    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: #a5b4fc;
}

.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: #f9a8d4;
}

.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: #0f172a;
    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.2);
    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, rgba(255, 215, 0, 0.2), 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: #e2e8f0;
}

.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/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 rgba(255, 215, 0, 0.2);
    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: #ffd700;
}

.hero-title h1[b-3g34hga7y9] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-title p[b-3g34hga7y9] {
    font-size: 1rem;
    color: #cbd5e1;
    margin: 0;
}

/* Tab Navigation */
.tab-navigation[b-3g34hga7y9] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
}

.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: #94a3b8;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.tab-button:hover[b-3g34hga7y9] {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.05);
}

.tab-button.active[b-3g34hga7y9] {
    color: #ffd700;
    border-bottom-color: #ffd700;
}

.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 rgba(255, 215, 0, 0.2);
    border-top-color: #ffd700;
    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: #cbd5e1;
    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: #64748b;
}

.empty-state h3[b-3g34hga7y9] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
}

.empty-state p[b-3g34hga7y9] {
    color: #94a3b8;
    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, #ffd700 0%, #ffed4e 100%);
    border: none;
    border-radius: 8px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-3g34hga7y9] {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

/* 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 rgba(255, 215, 0, 0.2);
    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 rgba(255, 215, 0, 0.2);
}

.leaderboard-header .material-icons[b-3g34hga7y9] {
    font-size: 1.75rem;
    color: #ffd700;
}

.leaderboard-header h3[b-3g34hga7y9] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f8fafc;
    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: rgba(255, 215, 0, 0.2);
}

.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, #3b82f6 0%, #2563eb 100%);
}

/* Rank Badge */
.rank[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
    border-radius: 8px;
    color: #0f172a;
    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 rgba(255, 215, 0, 0.3);
    flex-shrink: 0;
}

.player-avatar .material-icons[b-3g34hga7y9] {
    font-size: 20px;
    color: #ffd700;
}

.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: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-stat[b-3g34hga7y9] {
    font-size: 0.875rem;
    color: #94a3b8;
}

/* Score */
.score[b-3g34hga7y9] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffd700;
    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: #ffd700;
}

.hero-info h1[b-918busdmjg] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
    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: #cbd5e1;
    font-size: 0.95rem;
}

.hero-subtitle .separator[b-918busdmjg] {
    color: #64748b;
}

.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: #cbd5e1;
    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: #ffd700;
}

.tab-button.active[b-918busdmjg] {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.tab-button .badge[b-918busdmjg] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    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: #fbbf24;
}

/* 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, #ffd700 0%, #ffed4e 100%);
    border: none;
    border-radius: 8px;
    color: #0f172a;
    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%, #ffd700 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.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 - GAME DASHBOARD
   Fantasy RPG Hub with Responsive Design
   ============================================ */

/* ============================================
   TAVERN HEADER
   ============================================ */

.tavern-header[b-vpuzfddh0s] {
    position: relative;
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.3), rgba(101, 67, 33, 0.2));
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 2rem;
    overflow: hidden;
}

.tavern-header[b-vpuzfddh0s]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.6) 20%, #ffd700 50%, rgba(255, 215, 0, 0.6) 80%, transparent);
}

.tavern-header-content[b-vpuzfddh0s] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.85));
}

.tavern-icon[b-vpuzfddh0s] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #ffd700, #daa520);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4), inset 0 -3px 10px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.tavern-info[b-vpuzfddh0s] {
    flex: 1;
}

.tavern-title[b-vpuzfddh0s] {
    font-family: 'Cinzel', serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
    letter-spacing: 0.15em;
    margin: 0;
    text-transform: uppercase;
}

.tavern-location[b-vpuzfddh0s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: #daa520;
    margin: 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 20px;
}

.tavern-greeting[b-vpuzfddh0s] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0.5rem 0 0 0;
}

.hero-name[b-vpuzfddh0s] {
    color: #ffd700;
    font-weight: 600;
    font-family: 'Cinzel', serif;
}

/* ============================================
   TAVERN SECTIONS
   ============================================ */

.tavern-section[b-vpuzfddh0s] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 16px;
}

.tavern-section-header[b-vpuzfddh0s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.section-icon[b-vpuzfddh0s] {
    color: #ffd700;
    font-size: 1.5rem !important;
}

.tavern-section-title[b-vpuzfddh0s] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
}

.tavern-section-description[b-vpuzfddh0s] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 1.25rem 0;
    padding-left: 2.25rem;
    font-style: italic;
}

/* ============================================
   TAVERN ACTIVITY CARDS
   ============================================ */

.tavern-card[b-vpuzfddh0s] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 2px solid rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 180px;
    position: relative;
    overflow: hidden;
}

.tavern-card[b-vpuzfddh0s]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tavern-card:hover[b-vpuzfddh0s] {
    transform: translateY(-6px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.tavern-card:hover[b-vpuzfddh0s]::before {
    opacity: 1;
}

.tavern-card-icon[b-vpuzfddh0s] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.tavern-card:hover .tavern-card-icon[b-vpuzfddh0s] {
    transform: scale(1.15) rotate(5deg);
}

.tavern-card-content[b-vpuzfddh0s] {
    flex: 1;
    text-align: center;
}

.tavern-card-title[b-vpuzfddh0s] {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.35rem 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tavern-card-description[b-vpuzfddh0s] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.tavern-card-button[b-vpuzfddh0s] {
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-top: auto;
}

/* ============================================
   CARD VARIANTS
   ============================================ */

/* Combat - Red */
.combat-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, #ef4444, transparent); }
.combat-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.15)); color: #ef4444; }
.combat-card .tavern-card-title[b-vpuzfddh0s] { color: #fca5a5; }
.combat-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: white !important; }
.combat-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5); }

/* Adventures - Green */
.adventures-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, #22c55e, transparent); }
.adventures-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.15)); color: #22c55e; }
.adventures-card .tavern-card-title[b-vpuzfddh0s] { color: #86efac; }
.adventures-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, #22c55e, #16a34a) !important; color: white !important; }
.adventures-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5); }

/* Multiplayer - Purple */
.multiplayer-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, #8b5cf6, transparent); }
.multiplayer-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(124, 58, 237, 0.15)); color: #8b5cf6; }
.multiplayer-card .tavern-card-title[b-vpuzfddh0s] { color: #c4b5fd; }
.multiplayer-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; color: white !important; }
.multiplayer-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5); }

/* Inventory - Orange */
.inventory-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, #f59e0b, transparent); }
.inventory-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.15)); color: #f59e0b; }
.inventory-card .tavern-card-title[b-vpuzfddh0s] { color: #fcd34d; }
.inventory-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: white !important; }
.inventory-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5); }

/* Merchant - Gold */
.merchant-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, #ffd700, transparent); }
.merchant-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(218, 165, 32, 0.15)); color: #ffd700; }
.merchant-card .tavern-card-title[b-vpuzfddh0s] { color: #ffd700; }
.merchant-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, #ffd700, #daa520) !important; color: #0f172a !important; }
.merchant-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5); }

/* Spellbook - Blue */
.spellbook-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, #3b82f6, transparent); }
.spellbook-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.15)); color: #3b82f6; }
.spellbook-card .tavern-card-title[b-vpuzfddh0s] { color: #93c5fd; }
.spellbook-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: white !important; }
.spellbook-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); }

/* Leaderboards - Pink */
.leaderboards-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, #ec4899, transparent); }
.leaderboards-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(219, 39, 119, 0.15)); color: #ec4899; }
.leaderboards-card .tavern-card-title[b-vpuzfddh0s] { color: #f9a8d4; }
.leaderboards-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, #ec4899, #db2777) !important; color: white !important; }
.leaderboards-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(236, 72, 153, 0.5); }

/* Guilds - Teal */
.guilds-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, #14b8a6, transparent); }
.guilds-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(13, 148, 136, 0.15)); color: #14b8a6; }
.guilds-card .tavern-card-title[b-vpuzfddh0s] { color: #5eead4; }
.guilds-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, #14b8a6, #0d9488) !important; color: white !important; }
.guilds-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(20, 184, 166, 0.5); }

/* ============================================
   CHARACTER PANEL
   ============================================ */

.character-panel[b-vpuzfddh0s] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 2px solid rgba(255, 215, 0, 0.15);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    position: sticky;
    top: 1rem;
}

.character-panel[b-vpuzfddh0s]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);
}

.character-panel-header[b-vpuzfddh0s] {
    padding: 1.25rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    position: relative;
}

/* Class-specific header backgrounds */
.character-panel-header.warrior[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.08)); }
.character-panel-header.wizard[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.08)); }
.character-panel-header.ranger[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.08)); }
.character-panel-header.rogue[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(79, 70, 229, 0.08)); }
.character-panel-header.paladin[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.08)); }
.character-panel-header.bard[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(219, 39, 119, 0.08)); }
.character-panel-header.cleric[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.08)); }
.character-panel-header.monk[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.08)); }
.character-panel-header.barbarian[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(185, 28, 28, 0.08)); }

.panel-character-name[b-vpuzfddh0s] {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 0.15rem;
}

.panel-character-title[b-vpuzfddh0s] {
    font-size: 0.8rem;
    color: #f8fafc;
    font-style: italic;
    margin-bottom: 0.15rem;
}

.panel-character-info[b-vpuzfddh0s] {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.level-badge-large[b-vpuzfddh0s] {
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #0f172a;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
    white-space: nowrap;
}

.panel-content[b-vpuzfddh0s] {
    padding: 1.25rem;
}

.section-title[b-vpuzfddh0s] {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.section-title a[b-vpuzfddh0s] {
    color: #ffd700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.section-title a:hover[b-vpuzfddh0s] {
    color: #ffec8b;
    text-decoration: underline;
}

/* Character Details Link */
.character-details-link[b-vpuzfddh0s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    color: #ffd700;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
}

.character-details-link:hover[b-vpuzfddh0s] {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.4);
    color: #ffec8b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}

.character-details-link .mud-icon-root[b-vpuzfddh0s] {
    font-size: 1rem !important;
}

/* ============================================
   STAT BARS
   ============================================ */

.stat-bar-container[b-vpuzfddh0s] {
    margin-bottom: 0.75rem;
}

.stat-bar-header[b-vpuzfddh0s] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.stat-bar-label[b-vpuzfddh0s] {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.stat-bar-value[b-vpuzfddh0s] {
    font-size: 0.7rem;
    color: #f8fafc;
    font-weight: 600;
    font-family: 'Cinzel', serif;
}

.stat-bar[b-vpuzfddh0s] {
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-bar-fill[b-vpuzfddh0s] {
    height: 100%;
    transition: width 0.4s ease;
    border-radius: 3px;
}

.stat-bar-fill.hp[b-vpuzfddh0s] {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.stat-bar-fill.mana[b-vpuzfddh0s] {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.stat-bar-fill.xp[b-vpuzfddh0s] {
    background: linear-gradient(90deg, #ffd700, #daa520);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* Max Level Badge */
.max-level-badge[b-vpuzfddh0s] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(218, 165, 32, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 8px;
    padding: 0.6rem;
    text-align: center;
    margin-bottom: 0.75rem;
}

.max-level-text[b-vpuzfddh0s] {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* ============================================
   RESPONSIVE - TABLET (768px - 1023px)
   ============================================ */

@media (max-width: 1023px) and (min-width: 768px) {
    .tavern-header-content[b-vpuzfddh0s] {
        padding: 1.25rem 1.5rem;
    }

    .tavern-icon[b-vpuzfddh0s] {
        width: 60px;
        height: 60px;
    }

    .tavern-title[b-vpuzfddh0s] {
        font-size: 1.75rem;
    }

    .tavern-section[b-vpuzfddh0s] {
        padding: 1.25rem;
    }

    .tavern-section-title[b-vpuzfddh0s] {
        font-size: 1.1rem;
    }

    .tavern-card[b-vpuzfddh0s] {
        min-height: 160px;
        padding: 1rem;
    }

    .tavern-card-icon[b-vpuzfddh0s] {
        width: 44px;
        height: 44px;
    }

    .tavern-card-title[b-vpuzfddh0s] {
        font-size: 0.9rem;
    }

    .character-panel[b-vpuzfddh0s] {
        position: relative;
        top: 0;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (< 768px)
   ============================================ */

@media (max-width: 767px) {
    .tavern-header[b-vpuzfddh0s] {
        margin-bottom: 1.5rem;
    }

    .tavern-header-content[b-vpuzfddh0s] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.25rem;
    }

    .tavern-icon[b-vpuzfddh0s] {
        width: 56px;
        height: 56px;
    }

    .tavern-title[b-vpuzfddh0s] {
        font-size: 1.5rem;
        letter-spacing: 0.1em;
    }

    .tavern-location[b-vpuzfddh0s] {
        font-size: 0.7rem;
    }

    .tavern-greeting[b-vpuzfddh0s] {
        font-size: 0.9rem;
    }

    .tavern-section[b-vpuzfddh0s] {
        padding: 1rem;
        margin-bottom: 1.5rem;
        border-radius: 12px;
    }

    .tavern-section-header[b-vpuzfddh0s] {
        justify-content: center;
    }

    .tavern-section-title[b-vpuzfddh0s] {
        font-size: 1rem;
    }

    .tavern-section-description[b-vpuzfddh0s] {
        padding-left: 0;
        text-align: center;
        margin-bottom: 1rem;
    }

    .tavern-card[b-vpuzfddh0s] {
        min-height: 140px;
        padding: 1rem;
    }

    .tavern-card-icon[b-vpuzfddh0s] {
        width: 40px;
        height: 40px;
    }

    .tavern-card-title[b-vpuzfddh0s] {
        font-size: 0.85rem;
    }

    .tavern-card-description[b-vpuzfddh0s] {
        font-size: 0.75rem;
    }

    .tavern-card-button[b-vpuzfddh0s] {
        font-size: 0.7rem;
        padding: 8px 12px;
    }

    .character-panel[b-vpuzfddh0s] {
        position: relative;
        top: 0;
        margin-bottom: 1.5rem;
    }

    .character-panel-header[b-vpuzfddh0s] {
        padding: 1rem;
    }

    .panel-character-name[b-vpuzfddh0s] {
        font-size: 1rem;
    }

    .level-badge-large[b-vpuzfddh0s] {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    .panel-content[b-vpuzfddh0s] {
        padding: 1rem;
    }

    .section-title[b-vpuzfddh0s] {
        font-size: 0.7rem;
    }

    .stat-bar-label[b-vpuzfddh0s],
    .stat-bar-value[b-vpuzfddh0s] {
        font-size: 0.65rem;
    }

    .stat-bar[b-vpuzfddh0s] {
        height: 6px;
    }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE (< 480px)
   ============================================ */

@media (max-width: 479px) {
    .tavern-title[b-vpuzfddh0s] {
        font-size: 1.25rem;
    }

    .tavern-card[b-vpuzfddh0s] {
        min-height: 120px;
    }

    .tavern-card-icon[b-vpuzfddh0s] {
        width: 36px;
        height: 36px;
    }

    .tavern-card-title[b-vpuzfddh0s] {
        font-size: 0.8rem;
    }
}
/* /Components/Pages/Game/Inventory.razor.rz.scp.css */
/* Inventory Page - Fantasy RPG Theme */

/* ============================================
   HEADER BANNER
   ============================================ */

.inventory-header[b-rt2ykpb1f9] {
    margin-bottom: var(--space-xl);
}

.header-banner[b-rt2ykpb1f9] {
    position: relative;
    background: 
        linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.2) 50%, rgba(59, 130, 246, 0.3) 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    min-height: 160px;
}

.header-banner[b-rt2ykpb1f9]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6) 20%, var(--color-info) 50%, rgba(59, 130, 246, 0.6) 80%, transparent);
}

.banner-overlay[b-rt2ykpb1f9] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.banner-content[b-rt2ykpb1f9] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xl) var(--space-2xl);
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.header-identity[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.header-emblem[b-rt2ykpb1f9] {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.4), rgba(37, 99, 235, 0.6));
    border: 3px solid var(--color-info);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), inset 0 -3px 10px rgba(0, 0, 0, 0.4);
}

.emblem-icon[b-rt2ykpb1f9] {
    color: white;
    font-size: 2rem !important;
}

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

.header-title[b-rt2ykpb1f9] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-info-light);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 30px rgba(59, 130, 246, 0.3);
    margin: 0;
}

.header-tagline[b-rt2ykpb1f9] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.inventory-stats[b-rt2ykpb1f9] {
    display: flex;
    gap: var(--space-md);
}

.stat-box[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
}

.stat-icon[b-rt2ykpb1f9] { font-size: 1.25rem !important; }
.stat-icon.equipped-icon[b-rt2ykpb1f9] { color: var(--color-success-light); }
.stat-icon.items-icon[b-rt2ykpb1f9] { color: var(--color-info-light); }
.stat-icon.consumable-icon[b-rt2ykpb1f9] { color: var(--color-warning-light); }

.stat-info[b-rt2ykpb1f9] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-rt2ykpb1f9] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.stat-label[b-rt2ykpb1f9] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   MAIN LAYOUT
   ============================================ */

.inventory-main-layout[b-rt2ykpb1f9] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--space-xl);
    min-height: calc(100vh - 350px);
}

.equipped-panel-sticky[b-rt2ykpb1f9] {
    position: sticky;
    top: var(--space-lg);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

/* ============================================
   CONTAINERS
   ============================================ */

.inventory-container[b-rt2ykpb1f9] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 2px solid rgba(255, 215, 0, 0.15);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    position: relative;
}

.inventory-container[b-rt2ykpb1f9]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
}

.equipped-container[b-rt2ykpb1f9] {
    border-color: rgba(34, 197, 94, 0.2);
}

.equipped-container[b-rt2ykpb1f9]::before {
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.4), 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);
}

/* ============================================
   SECTION HEADER
   ============================================ */

.section-header[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid rgba(255, 215, 0, 0.1);
    margin-bottom: var(--space-xl);
}

.section-icon[b-rt2ykpb1f9] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
}

.equipped-section-icon[b-rt2ykpb1f9] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success-light);
}

.items-section-icon[b-rt2ykpb1f9] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--color-info-light);
}

.section-title[b-rt2ykpb1f9] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-count[b-rt2ykpb1f9] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
}

/* ============================================
   EQUIPMENT GRID
   ============================================ */

.equipment-grid[b-rt2ykpb1f9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.equipment-slot[b-rt2ykpb1f9] {
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    transition: all var(--transition-base);
}

.equipment-slot.equipped[b-rt2ykpb1f9] {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
}

.equipment-slot.empty[b-rt2ykpb1f9] {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.1);
}

.slot-header[b-rt2ykpb1f9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.slot-name-wrapper[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.slot-icon[b-rt2ykpb1f9] {
    color: var(--color-primary);
    opacity: 0.7;
}

.slot-name[b-rt2ykpb1f9] {
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.btn-unequip[b-rt2ykpb1f9] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    color: var(--color-danger-light);
    cursor: pointer;
    transition: all var(--transition-base);
    padding: 0;
}

.btn-unequip:hover[b-rt2ykpb1f9] {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
}

.equipped-item-content[b-rt2ykpb1f9] {
    padding-left: var(--space-lg);
}

.equipped-item-name[b-rt2ykpb1f9] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.equipped-item-details[b-rt2ykpb1f9] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.equipped-item-bonus[b-rt2ykpb1f9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-success-light);
    background: rgba(34, 197, 94, 0.15);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
}

.slot-empty-content[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
}

.empty-slot-icon[b-rt2ykpb1f9] {
    color: var(--color-text-tertiary);
    opacity: 0.4;
}

.slot-empty[b-rt2ykpb1f9] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* ============================================
   QUICK STATS
   ============================================ */

.quick-stats[b-rt2ykpb1f9] {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.quick-stats-header[b-rt2ykpb1f9] {
    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-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.quick-stats-grid[b-rt2ykpb1f9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.quick-stat[b-rt2ykpb1f9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
}

.quick-stat-label[b-rt2ykpb1f9] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.quick-stat-value[b-rt2ykpb1f9] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.ac-value[b-rt2ykpb1f9] { color: var(--color-info-light); }
.damage-value[b-rt2ykpb1f9] { color: var(--color-danger-light); }

/* ============================================
   CATEGORY TABS
   ============================================ */

.category-tabs[b-rt2ykpb1f9] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
    padding: var(--space-sm);
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-xl);
}

.category-tab[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    background: rgba(30, 41, 59, 0.6);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.category-tab:hover[b-rt2ykpb1f9] {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.2);
}

.category-tab.active[b-rt2ykpb1f9] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.08));
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tab-icon[b-rt2ykpb1f9] { font-size: 1.1rem !important; }
.tab-label[b-rt2ykpb1f9] { text-transform: uppercase; letter-spacing: 0.05em; }

.tab-count[b-rt2ykpb1f9] {
    font-size: var(--font-size-xs);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
}

.weapons-tab.active[b-rt2ykpb1f9] { border-color: var(--color-danger); }
.armor-tab.active[b-rt2ykpb1f9] { border-color: var(--color-info); }
.consumables-tab.active[b-rt2ykpb1f9] { border-color: var(--color-success); }

/* ============================================
   SECONDARY FILTERS
   ============================================ */

.secondary-filters[b-rt2ykpb1f9] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-xl);
}

.secondary-filter[b-rt2ykpb1f9] {
    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: 1px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.secondary-filter:hover[b-rt2ykpb1f9] {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.2);
}

.secondary-filter.active[b-rt2ykpb1f9] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.08));
    border-color: rgba(255, 215, 0, 0.4);
    color: var(--color-primary);
}

.filter-count[b-rt2ykpb1f9] {
    font-size: var(--font-size-xs);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-md);
}

/* ============================================
   CATEGORY HEADERS
   ============================================ */

.category-header[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
}

.category-icon[b-rt2ykpb1f9] { font-size: 1.2rem !important; }
.category-icon.weapons-icon[b-rt2ykpb1f9] { color: var(--color-danger-light); }
.category-icon.armor-icon[b-rt2ykpb1f9] { color: var(--color-info-light); }
.category-icon.consumables-icon[b-rt2ykpb1f9] { color: var(--color-success-light); }

.category-count[b-rt2ykpb1f9] {
    margin-left: auto;
    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-lg);
}

/* ============================================
   ITEM GRID
   ============================================ */

.item-grid[b-rt2ykpb1f9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

/* ============================================
   CONSUMABLE POUCH
   ============================================ */

.consumable-pouch[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
}

.consumable-pouch.full[b-rt2ykpb1f9] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    border-color: rgba(239, 68, 68, 0.3);
}

.pouch-icon[b-rt2ykpb1f9] { color: var(--color-success); }
.consumable-pouch.full .pouch-icon[b-rt2ykpb1f9] { color: var(--color-danger); }

.pouch-label[b-rt2ykpb1f9] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.pouch-count[b-rt2ykpb1f9] {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    color: var(--color-success-light);
}

.consumable-pouch.full .pouch-count[b-rt2ykpb1f9] { color: var(--color-danger-light); }

.pouch-full-warning[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-left: auto;
    color: var(--color-danger-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* ============================================
   INFO BANNER
   ============================================ */

.info-banner[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--radius-xl);
    margin-top: var(--space-lg);
    font-size: var(--font-size-sm);
    color: #c4b5fd;
}

/* ============================================
   ALERTS
   ============================================ */

.alert-message[b-rt2ykpb1f9] {
    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-rt2ykpb1f9 0.3s ease-out;
}

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

.alert-success[b-rt2ykpb1f9] {
    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-error[b-rt2ykpb1f9] {
    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-close[b-rt2ykpb1f9] {
    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);
    transition: all var(--transition-base);
}

.alert-close:hover[b-rt2ykpb1f9] { background: rgba(255, 255, 255, 0.2); }

/* ============================================
   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;
}

/* ============================================
   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: #0f172a;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-primary:hover[b-rt2ykpb1f9] {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

.btn-secondary[b-rt2ykpb1f9] {
    background: rgba(51, 65, 85, 0.6);
    border-color: rgba(255, 215, 0, 0.3);
    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: #0f172a !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 rgba(255, 215, 0, 0.3);
}

[b-rt2ykpb1f9] .btn-equip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

/* ============================================
   PAGE FOOTER
   ============================================ */

.page-footer[b-rt2ykpb1f9] {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   RARITY COLORS
   ============================================ */

.rarity-common[b-rt2ykpb1f9] { color: var(--color-rarity-common); }
.rarity-uncommon[b-rt2ykpb1f9] { color: var(--color-rarity-uncommon); }
.rarity-rare[b-rt2ykpb1f9] { color: var(--color-rarity-rare); }
.rarity-epic[b-rt2ykpb1f9] { color: var(--color-rarity-epic); }
.rarity-legendary[b-rt2ykpb1f9] { color: var(--color-rarity-legendary); text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }

/* ============================================
   SCROLLBAR
   ============================================ */

.equipped-panel-sticky[b-rt2ykpb1f9]::-webkit-scrollbar { width: 8px; }
.equipped-panel-sticky[b-rt2ykpb1f9]::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-md); }
.equipped-panel-sticky[b-rt2ykpb1f9]::-webkit-scrollbar-thumb { background: rgba(255, 215, 0, 0.3); border-radius: var(--radius-md); }
.equipped-panel-sticky[b-rt2ykpb1f9]::-webkit-scrollbar-thumb:hover { background: rgba(255, 215, 0, 0.5); }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .banner-content[b-rt2ykpb1f9] { flex-direction: column; text-align: center; padding: var(--space-lg); }
    .header-identity[b-rt2ykpb1f9] { flex-direction: column; }
    .inventory-stats[b-rt2ykpb1f9] { justify-content: center; }
    .inventory-main-layout[b-rt2ykpb1f9] { grid-template-columns: 1fr; }
    .equipped-panel-sticky[b-rt2ykpb1f9] { position: relative; top: 0; max-height: none; }
    .equipment-grid[b-rt2ykpb1f9] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md); }
}

@media (max-width: 768px) {
    .inventory-stats[b-rt2ykpb1f9] { flex-wrap: wrap; }
    .stat-box[b-rt2ykpb1f9] { min-width: 80px; padding: var(--space-sm) var(--space-md); }
    .item-grid[b-rt2ykpb1f9] { grid-template-columns: 1fr; }
    .category-tabs[b-rt2ykpb1f9] { flex-direction: column; }
    .page-footer[b-rt2ykpb1f9] { flex-direction: column; }
    .btn[b-rt2ykpb1f9] { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .inventory-container[b-rt2ykpb1f9] { padding: var(--space-lg); }
    .header-title[b-rt2ykpb1f9] { font-size: var(--font-size-xl); }
    .equipment-grid[b-rt2ykpb1f9] { grid-template-columns: 1fr; }
    .secondary-filters[b-rt2ykpb1f9] { flex-direction: column; }
}
/* /Components/Pages/Game/Merchant.razor.rz.scp.css */
/* Merchant Page Styles - Fantasy RPG Theme */

/* ===== STORE CONTAINER ===== */
.store-container[b-p0opus3hoz] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 2px solid rgba(255, 215, 0, 0.15);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
    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%, 
        rgba(255, 215, 0, 0.4) 20%,
        var(--color-primary) 50%,
        rgba(255, 215, 0, 0.4) 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%, 
        rgba(255, 215, 0, 0.2) 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, rgba(15, 23, 42, 0.98), rgba(34, 197, 94, 0.15));
    border: 2px solid rgba(34, 197, 94, 0.5);
}

.toast-error[b-p0opus3hoz] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), 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 rgba(255, 215, 0, 0.2);
}

@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: #0f172a;
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.3),
        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 rgba(255, 215, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-secondary[b-p0opus3hoz] {
    background: rgba(51, 65, 85, 0.6);
    border-color: rgba(255, 215, 0, 0.3);
    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-xl);
    }

    .page-footer[b-p0opus3hoz] {
        justify-content: center;
    }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 640px) {
    .store-container[b-p0opus3hoz] {
        padding: var(--space-lg);
        border-radius: var(--radius-xl);
    }

    .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);
    }
}
/* /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: #ffd700;
}

.hero-info h1[b-togmvom9vh] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffd700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-subtitle[b-togmvom9vh] {
    color: #cbd5e1;
    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: #64748b;
}

.empty-state p[b-togmvom9vh] {
    color: #cbd5e1;
    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: #cbd5e1;
    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, rgba(255, 215, 0, 0.15) 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.2);
    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.2);
    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: rgba(255, 215, 0, 0.15);
    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.2);
    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: #94a3b8;
}

.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.2);
    border: 1px solid rgba(255, 215, 0, 0.15);
    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: rgba(255, 215, 0, 0.3);
    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: #ffd700;
    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: #94a3b8;
    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: #64748b;
}

.btn-rejoin[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    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 rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin: 0.75rem 0;
}

.players-label[b-eqihb5ltji] {
    font-size: 0.8rem;
    color: #94a3b8;
    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: #f8fafc;
}

.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, #ffd700, #daa520);
    color: #0f172a;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.connected-tag[b-eqihb5ltji] {
    color: #22c55e;
    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 rgba(255, 215, 0, 0.2);
    border-radius: 6px;
    margin-top: 0.75rem;
}

.code-label[b-eqihb5ltji] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
}

.code-value[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.2em;
}

.btn-copy-small[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    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, 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: 16px;
    overflow: hidden;
}

.lobby-header[b-eqihb5ltji] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 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: #ffd700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
}

.lobby-description[b-eqihb5ltji] {
    color: #94a3b8;
    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: #fbbf24;
}

.status-badge.in-progress[b-eqihb5ltji],
.status-badge.in-combat[b-eqihb5ltji] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.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: #4ade80;
}

.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: #64748b;
    text-transform: uppercase;
}

.lobby-code-value[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.2em;
}

.btn-copy[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    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: #94a3b8;
    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.2);
    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: rgba(255, 215, 0, 0.25);
}

.player-slot.host[b-eqihb5ltji] {
    border-left: 3px solid #ffd700;
}

.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: #fca5a5;
}

.player-avatar.wizard[b-eqihb5ltji] {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.player-avatar.ranger[b-eqihb5ltji] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.player-avatar.rogue[b-eqihb5ltji] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.player-avatar.paladin[b-eqihb5ltji] {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.player-avatar.bard[b-eqihb5ltji] {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
}

.player-details[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
}

.player-slot-name[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: #f8fafc;
}

.player-slot-class[b-eqihb5ltji] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.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: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.connection-dot.disconnected[b-eqihb5ltji] {
    background: #ef4444;
}

.ready-badge[b-eqihb5ltji] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    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: #94a3b8;
    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, #ffd700, #daa520);
    color: #0f172a;
    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.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-primary-action[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    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 rgba(255, 215, 0, 0.3);
    color: #ffd700;
    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, #22c55e, #16a34a);
    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, #16a34a, #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: #f87171;
    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: #ffd700;
}

.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: #94a3b8;
}

.empty-state[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: #64748b;
}

.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.2);
    border-radius: 3px;
}

.friends-list-invite[b-eqihb5ltji]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.2);
    border-radius: 3px;
}

.friends-list-invite[b-eqihb5ltji]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.4);
}

.friend-card-invite[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.2);
    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: rgba(255, 215, 0, 0.25);
    background: rgba(0, 0, 0, 0.25);
}

.friend-card-invite.selected[b-eqihb5ltji] {
    border-color: rgba(255, 215, 0, 0.4);
    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: #ffd700;
    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: #f8fafc;
    font-size: 0.95rem;
}

.friend-status[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

.friend-status.online[b-eqihb5ltji] {
    color: #22c55e;
}

.friend-status.offline[b-eqihb5ltji] {
    color: #94a3b8;
}

.status-dot[b-eqihb5ltji] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.friend-status.online .status-dot[b-eqihb5ltji] {
    background: #22c55e;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
}

.friend-status.offline .status-dot[b-eqihb5ltji] {
    background: #64748b;
}

.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: #ffd700;
}

.invite-message-section[b-eqihb5ltji] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.invite-message-section label[b-eqihb5ltji] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 0.5rem;
}

.invite-message-section textarea[b-eqihb5ltji] {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 6px;
    padding: 0.75rem;
    color: #f8fafc;
    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 rgba(255, 215, 0, 0.15);
    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: #64748b;
    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 rgba(255, 255, 255, 0.05);
    }
    
    .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;
    }
}
/* /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 rgba(255, 215, 0, 0.2);
    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, #ffd700, #f59e0b);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    font-size: 2rem;
}

.header-title[b-5wuaiy90rn] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
    margin: 0;
    line-height: 1.2;
}

.header-subtitle[b-5wuaiy90rn] {
    font-size: 0.95rem;
    color: #94a3b8;
    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, #22c55e, #16a34a) !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: #ffd700;
    opacity: 0.9;
}

.filter-option[b-5wuaiy90rn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-option.wizard[b-5wuaiy90rn] { color: #60a5fa; }
.filter-option.paladin[b-5wuaiy90rn] { color: #fbbf24; }
.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: #cbd5e1;
}

.stat-chip.wizard[b-5wuaiy90rn] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #93c5fd;
}

.stat-chip.paladin[b-5wuaiy90rn] {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fcd34d;
}

.stat-chip.bard[b-5wuaiy90rn] {
    background: rgba(236, 72, 153, 0.2);
    border: 1px solid rgba(244, 114, 182, 0.3);
    color: #f9a8d4;
}

.stat-chip.any[b-5wuaiy90rn] {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: #c4b5fd;
}

/* 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: #cbd5e1;
    margin-bottom: 0.5rem;
}

.empty-text[b-5wuaiy90rn] {
    color: #94a3b8;
    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, #3b82f6, #1e40af); }
.spell-card-paladin[b-5wuaiy90rn]::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.spell-card-bard[b-5wuaiy90rn]::before { background: linear-gradient(180deg, #ec4899, #db2777); }
.spell-card-any[b-5wuaiy90rn]::before { background: linear-gradient(180deg, #8b5cf6, #7c3aed); }

.spell-card:hover[b-5wuaiy90rn] {
    transform: translateY(-4px);
    border-color: rgba(255, 215, 0, 0.3);
    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: #ffd700;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spell-id[b-5wuaiy90rn] {
    font-size: 0.75rem;
    color: #64748b;
    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: #cbd5e1;
    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: #64748b;
    flex-shrink: 0;
}

.stat-icon.mana[b-5wuaiy90rn] { color: #3b82f6; }
.stat-icon.effect[b-5wuaiy90rn] { color: #f59e0b; }

.stat-content[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-label[b-5wuaiy90rn] {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-value[b-5wuaiy90rn] {
    font-size: 0.875rem;
    color: #e2e8f0;
    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: #93c5fd !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: #fcd34d !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: #f9a8d4 !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: #c4b5fd !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
}

/* 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, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.weapons-header h1[b-mlh4t5yxj1] {
    font-family: 'Cinzel', serif;
    background: linear-gradient(135deg, #ffd700 0%, #ffec8b 50%, #daa520 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, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-mlh4t5yxj1] .weapon-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 215, 0, 0.3);
    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%, #daa520 50%, #ffd700 100%) !important;
    color: #0f172a !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, #22c55e, #16a34a) !important;
    color: white !important;
}

[b-mlh4t5yxj1] .btn-error {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}

/* Dialog Styling */
[b-mlh4t5yxj1] .mud-dialog {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 1));
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
}

[b-mlh4t5yxj1] .mud-dialog-title {
    font-family: 'Cinzel', serif;
    color: #ffd700;
    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: rgba(255, 215, 0, 0.2) !important;
}

[b-mlh4t5yxj1] .mud-input-outlined:hover {
    border-color: rgba(255, 215, 0, 0.3) !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, #ffd700, #ffec8b) !important;
}
/* /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: #0f172a;
    padding: 2rem;
    gap: 2rem;
}

/* ===== HEADER ===== */
.leaderboards-header[b-r0xlvthx51] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    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: #ffd700;
    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: #94a3b8;
    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;
}

.tab-button[b-r0xlvthx51] {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(51, 65, 85, 0.5);
    border: 2px solid transparent;
    border-radius: 8px;
    color: #94a3b8;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-button:hover[b-r0xlvthx51] {
    background: rgba(51, 65, 85, 0.8);
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

.tab-button.active[b-r0xlvthx51] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.tab-icon[b-r0xlvthx51] {
    font-size: 1.5rem;
    display: inline-flex;
}

.tab-label[b-r0xlvthx51] {
    font-size: 0.85rem;
}

/* ===== CONTENT AREA ===== */
.leaderboard-content[b-r0xlvthx51] {
    flex: 1;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
    padding: 2rem;
    min-height: 500px;
}

.category-title[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: #ffd700;
    margin: 0 0 2rem 0;
    text-align: center;
}

/* ===== 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: #94a3b8;
}

.spinner[b-r0xlvthx51] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 215, 0, 0.1);
    border-top-color: #ffd700;
    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 #ffd700;
    border-radius: 8px;
    color: #ffd700;
    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: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.button-icon[b-r0xlvthx51] {
    display: inline-flex;
}

/* ===== 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: 120px 1fr 100px 140px 150px;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 215, 0, 0.1);
    border-bottom: 2px solid #ffd700;
}

.header-cell[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffd700;
    text-transform: uppercase;
}

.table-body[b-r0xlvthx51] {
    display: flex;
    flex-direction: column;
}

.table-row[b-r0xlvthx51] {
    display: grid;
    grid-template-columns: 120px 1fr 100px 140px 150px;
    gap: 1rem;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    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.2), rgba(255, 215, 0, 0.05));
    border-left: 4px solid #ffd700;
}

.table-row.top-2[b-r0xlvthx51] {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.2), rgba(192, 192, 192, 0.05));
    border-left: 4px solid #c0c0c0;
}

.table-row.top-3[b-r0xlvthx51] {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.2), rgba(205, 127, 50, 0.05));
    border-left: 4px solid #cd7f32;
}

.table-cell[b-r0xlvthx51] {
    display: flex;
    align-items: center;
    color: #f8fafc;
}

.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.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.rank-gold[b-r0xlvthx51] {
    background: linear-gradient(135deg, #ffd700, #ffec8b);
    color: #0f172a;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.rank-silver[b-r0xlvthx51] {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #0f172a;
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}

.rank-bronze[b-r0xlvthx51] {
    background: linear-gradient(135deg, #cd7f32, #daa06d);
    color: #fff;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}

.medal[b-r0xlvthx51] {
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
}

.rank-number[b-r0xlvthx51] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #94a3b8;
}

/* ===== CHARACTER & CLASS BADGES ===== */
.character-name[b-r0xlvthx51] {
    font-size: 1.1rem;
    color: #ffd700;
}

.level-badge[b-r0xlvthx51] {
    padding: 0.3rem 0.8rem;
    background: rgba(51, 65, 85, 0.8);
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
}

.class-badge[b-r0xlvthx51] {
    padding: 0.3rem 0.8rem;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
}

.class-warrior[b-r0xlvthx51] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid #ef4444;
}

.class-wizard[b-r0xlvthx51] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

.class-ranger[b-r0xlvthx51] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid #22c55e;
}

.class-rogue[b-r0xlvthx51] {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
    border: 1px solid #6366f1;
}

.class-paladin[b-r0xlvthx51] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid #f59e0b;
}

.class-bard[b-r0xlvthx51] {
    background: rgba(236, 72, 153, 0.2);
    color: #ec4899;
    border: 1px solid #ec4899;
}

.class-default[b-r0xlvthx51] {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    border: 1px solid #94a3b8;
}

.score-value[b-r0xlvthx51] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* ===== 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, #334155, #1e293b);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    color: #ffd700;
    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, #334155);
    border-color: #ffd700;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.button-icon[b-r0xlvthx51] {
    font-size: 1.2rem;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet Landscape (1024px - 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 90px 120px 130px;
    }
}

/* Tablet Portrait (768px - 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;
    }

    .leaderboard-tabs[b-r0xlvthx51] {
        flex-wrap: wrap;
    }

    .tab-button[b-r0xlvthx51] {
        min-width: 100px;
        padding: 0.75rem;
    }

    .table-header[b-r0xlvthx51],
    .table-row[b-r0xlvthx51] {
        grid-template-columns: 90px 1fr 80px 100px 120px;
        gap: 0.5rem;
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .character-name[b-r0xlvthx51] {
        font-size: 1rem;
    }

    .score-value[b-r0xlvthx51] {
        font-size: 1.1rem;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .leaderboards-page[b-r0xlvthx51] {
        padding: 1rem;
        gap: 1rem;
    }

    .leaderboards-header[b-r0xlvthx51] {
        padding: 1.5rem 1rem;
    }

    .page-title[b-r0xlvthx51] {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .title-icon[b-r0xlvthx51] {
        font-size: 2rem;
    }

    .page-subtitle[b-r0xlvthx51] {
        font-size: 0.9rem;
    }

    .leaderboard-tabs[b-r0xlvthx51] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .tab-button[b-r0xlvthx51] {
        min-width: auto;
        flex-direction: row;
        justify-content: center;
    }

    .leaderboard-content[b-r0xlvthx51] {
        padding: 1rem;
    }

    .category-title[b-r0xlvthx51] {
        font-size: 1.25rem;
    }

    /* Mobile: Stack table cells vertically */
    .table-header[b-r0xlvthx51] {
        display: none;
    }

    .table-row[b-r0xlvthx51] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 0.75rem;
        padding: 1rem;
    }

    .table-cell[b-r0xlvthx51] {
        justify-content: flex-start;
    }

    .rank-cell[b-r0xlvthx51] {
        order: 1;
    }

    .character-cell[b-r0xlvthx51] {
        order: 2;
        font-size: 1.1rem;
    }

    .level-cell[b-r0xlvthx51],
    .class-cell[b-r0xlvthx51] {
        order: 3;
        justify-content: flex-start;
    }

    .score-cell[b-r0xlvthx51] {
        order: 4;
        justify-content: flex-start;
    }

    .score-value[b-r0xlvthx51] {
        font-size: 1.5rem;
    }
}

/* 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 */
/* ============================================
   SPLASH PAGE STYLES
   ============================================ */

.splash-container[b-1rpnkthxdm] {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0f1e 0%, #0f1419 50%, #0a0f1e 100%);
    overflow-x: hidden;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .splash-container[b-1rpnkthxdm] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .splash-container[b-1rpnkthxdm] {
        font-size: 12px;
    }
}
/* /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/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, #1e293b 0%, #334155 100%);
    border-radius: 8px 8px 0 0;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
}

.modal-header-section .header-icon[b-oorfsw9xg1] {
    color: #ffd700;
}

.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: #ffd700;
    margin: 0;
}

.modal-header-section .header-subtitle[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0.25rem 0 0 0;
}

/* Info Section */
.info-section[b-oorfsw9xg1] {
    background: #1e293b;
    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: #ffd700;
    font-size: 1rem;
}

.info-text[b-oorfsw9xg1] {
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
    font-size: 0.9rem;
}

/* Current Score Section */
.current-score-section[b-oorfsw9xg1] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 2px solid #334155;
}

.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 #334155;
}

.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: #94a3b8;
    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: #94a3b8;
}

/* Grade Classes */
.score-grade.grade-a .grade-letter[b-oorfsw9xg1],
.score-grade.grade-a + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: #22c55e;
}

.score-grade.grade-b .grade-letter[b-oorfsw9xg1],
.score-grade.grade-b + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: #3b82f6;
}

.score-grade.grade-c .grade-letter[b-oorfsw9xg1],
.score-grade.grade-c + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: #f59e0b;
}

.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: #ef4444;
}

/* 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: #0f172a;
    border-radius: 6px;
    border: 2px solid #1e293b;
    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: #64748b;
}

.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: #94a3b8;
}

.grade-item:nth-child(1) .grade-mark[b-oorfsw9xg1] { color: #22c55e; }
.grade-item:nth-child(2) .grade-mark[b-oorfsw9xg1] { color: #3b82f6; }
.grade-item:nth-child(3) .grade-mark[b-oorfsw9xg1] { color: #f59e0b; }
.grade-item:nth-child(4) .grade-mark[b-oorfsw9xg1] { color: #f97316; }
.grade-item:nth-child(5) .grade-mark[b-oorfsw9xg1] { color: #ef4444; }

/* 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: #ffd700;
    font-size: 1rem;
}

.breakdown-items[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.breakdown-item[b-oorfsw9xg1] {
    background: #1e293b;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #334155;
}

.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: #e2e8f0;
}

.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: #ffd700;
}

.item-max-score[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: #64748b;
}

.breakdown-progress[b-oorfsw9xg1] {
    margin-bottom: 0.5rem;
}

.breakdown-progress .progress-bar[b-oorfsw9xg1] {
    width: 100%;
    height: 8px;
    background: #0f172a;
    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: #94a3b8;
    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: #0f172a;
    border-radius: 4px;
    font-size: 0.875rem;
}

.equipment-detail-item.equipped[b-oorfsw9xg1] {
    color: #22c55e;
}

.equipment-detail-item.equipped .equipment-icon[b-oorfsw9xg1] {
    color: #22c55e;
}

.equipment-detail-item.empty[b-oorfsw9xg1] {
    color: #64748b;
}

.equipment-detail-item.empty .equipment-icon[b-oorfsw9xg1] {
    color: #ef4444;
}

.breakdown-improvement[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #0f172a;
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #fbbf24;
}

/* 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: #ffd700;
    font-size: 1rem;
}

.category-cards[b-oorfsw9xg1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.category-card[b-oorfsw9xg1] {
    background: #1e293b;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #334155;
}

.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, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.category-icon-wrapper.hp[b-oorfsw9xg1] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.category-icon-wrapper.equipment[b-oorfsw9xg1] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.category-icon-wrapper.level[b-oorfsw9xg1] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.category-title[b-oorfsw9xg1] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0 0 0.5rem 0;
}

.category-description[b-oorfsw9xg1] {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

/* Tips Section */
.tips-section[b-oorfsw9xg1] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 8px;
    padding: 1rem;
    border: 2px solid #ffd700;
}

.tips-header[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #ffd700;
    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: #0f172a;
    border-radius: 4px;
    color: #cbd5e1;
    font-size: 0.875rem;
}

.tip-item .tip-arrow[b-oorfsw9xg1] {
    color: #fbbf24;
}

/* 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/Items/ArmorCard.razor.rz.scp.css */
/* ArmorCard Component Styles - Fantasy RPG Theme */

.item-card[b-wgh695ilcm] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(255, 215, 0, 0.12);
    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-wgh695ilcm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.item-card:hover[b-wgh695ilcm] {
    transform: translateY(-3px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(59, 130, 246, 0.1);
}

.item-card:hover[b-wgh695ilcm]::before {
    opacity: 1;
}

/* Equipped state */
.item-card.equipped[b-wgh695ilcm] {
    border-color: rgba(34, 197, 94, 0.5);
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.1), rgba(15, 23, 42, 0.95));
}

.item-card.equipped[b-wgh695ilcm]::before {
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
    opacity: 1;
}

/* Unaffordable state */
.item-card.unaffordable[b-wgh695ilcm] {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Level restricted state */
.item-card.level-restricted[b-wgh695ilcm] {
    opacity: 0.7;
}

/* Header */
.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;
}

/* Badges */
.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);
}

.badge-armor[b-wgh695ilcm] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-light);
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.badge-slot[b-wgh695ilcm] {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    border: 1px solid rgba(139, 92, 246, 0.4);
}

/* Armor Type Badges */
.armor-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;
}

.armor-type-light[b-wgh695ilcm] {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.armor-type-medium[b-wgh695ilcm] {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.armor-type-heavy[b-wgh695ilcm] {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Stats */
.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-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);
    color: var(--color-text-secondary);
}

.stat-ac[b-wgh695ilcm] {
    color: var(--color-info-light);
    border-color: rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.1);
}

.stat-level[b-wgh695ilcm] {
    color: var(--color-warning-light);
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.1);
}

.stat-bonus[b-wgh695ilcm] {
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.25);
    background: rgba(139, 92, 246, 0.1);
}

/* Price */
.item-price[b-wgh695ilcm] {
    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-wgh695ilcm] {
    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-wgh695ilcm] {
    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 */
.shortfall-badge[b-wgh695ilcm] {
    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;
}

/* Warning - base styles */
.item-warning[b-wgh695ilcm] {
    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-wgh695ilcm] {
    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-wgh695ilcm] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: var(--color-warning-light);
}

/* Lore Expansion Panel */
[b-wgh695ilcm] .lore-panel {
    background: transparent !important;
    margin: 0 !important;
}

[b-wgh695ilcm] .lore-panel .mud-expand-panel {
    background: rgba(139, 92, 246, 0.08) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: var(--radius-lg) !important;
}

[b-wgh695ilcm] .lore-panel .mud-expand-panel-header {
    min-height: 36px !important;
    padding: var(--space-sm) var(--space-md) !important;
}

[b-wgh695ilcm] .lore-panel .mud-expand-panel-text {
    font-size: var(--font-size-sm) !important;
    color: #c4b5fd !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

[b-wgh695ilcm] .lore-panel .mud-expand-panel-content {
    padding: var(--space-md) !important;
}

.item-lore[b-wgh695ilcm] {
    font-size: var(--font-size-sm);
    color: #c4b5fd;
    font-style: italic;
    line-height: 1.5;
    border-left: 3px solid #8b5cf6;
    padding-left: var(--space-md);
}

/* Footer */
.item-footer[b-wgh695ilcm] {
    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 rgba(255, 255, 255, 0.05);
}

.item-quantity[b-wgh695ilcm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-semibold);
}

/* Button Styling */
[b-wgh695ilcm] .btn-equip {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: #0f172a !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 rgba(255, 215, 0, 0.3);
}

[b-wgh695ilcm] .btn-equip:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

[b-wgh695ilcm] .btn-equip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* Responsive */
@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)
/* /Components/Shared/Items/ConsumableCard.razor.rz.scp.css */
/* ConsumableCard Component Styles - Fantasy RPG Theme */

.item-card[b-70xaujb2vo] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(255, 215, 0, 0.12);
    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(34, 197, 94, 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: 
        0 10px 30px rgba(0, 0, 0, 0.4),
        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;
}

/* 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;
}

/* Lore Expansion Panel */
[b-70xaujb2vo] .lore-panel {
    background: transparent !important;
    margin: 0 !important;
}

[b-70xaujb2vo] .lore-panel .mud-expand-panel {
    background: rgba(139, 92, 246, 0.08) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: var(--radius-lg) !important;
}

[b-70xaujb2vo] .lore-panel .mud-expand-panel-header {
    min-height: 36px !important;
    padding: var(--space-sm) var(--space-md) !important;
}

[b-70xaujb2vo] .lore-panel .mud-expand-panel-text {
    font-size: var(--font-size-sm) !important;
    color: #c4b5fd !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

[b-70xaujb2vo] .lore-panel .mud-expand-panel-content {
    padding: var(--space-md) !important;
}

.item-lore[b-70xaujb2vo] {
    font-size: var(--font-size-sm);
    color: #c4b5fd;
    font-style: italic;
    line-height: 1.5;
    border-left: 3px solid #8b5cf6;
    padding-left: var(--space-md);
}

/* 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: #c4b5fd;
}

.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: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    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 */
.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;
}

/* 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 rgba(255, 255, 255, 0.05);
}

.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: #0f172a !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 rgba(255, 215, 0, 0.3);
}

[b-70xaujb2vo] .btn-equip:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    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;
    }
}
/* /Components/Shared/Items/WeaponCard.razor.rz.scp.css */
/* WeaponCard Component Styles - Fantasy RPG Theme */

.item-card[b-n2iv4hz2mu] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(255, 215, 0, 0.12);
    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-n2iv4hz2mu]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.item-card:hover[b-n2iv4hz2mu] {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 215, 0, 0.1);
}

.item-card:hover[b-n2iv4hz2mu]::before {
    opacity: 1;
}

/* Equipped state */
.item-card.equipped[b-n2iv4hz2mu] {
    border-color: rgba(34, 197, 94, 0.5);
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.1), rgba(15, 23, 42, 0.95));
}

.item-card.equipped[b-n2iv4hz2mu]::before {
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
    opacity: 1;
}

/* Unaffordable state */
.item-card.unaffordable[b-n2iv4hz2mu] {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Level restricted state */
.item-card.level-restricted[b-n2iv4hz2mu] {
    opacity: 0.7;
}

/* 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;
}

/* Badges */
.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: 2px var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: rgba(0, 0, 0, 0.25);
    color: var(--color-text-secondary);
}

.stat-damage[b-n2iv4hz2mu] { color: var(--color-danger-light); }
.stat-level[b-n2iv4hz2mu] { color: var(--color-text-tertiary); }
.stat-bonus[b-n2iv4hz2mu] { color: #c4b5fd; }
.stat-type[b-n2iv4hz2mu] { color: var(--color-text-tertiary); }

/* Price */
.item-price[b-n2iv4hz2mu] {
    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-n2iv4hz2mu] {
    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-n2iv4hz2mu] {
    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 */
.shortfall-badge[b-n2iv4hz2mu] {
    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;
}

/* Warning - base styles */
.item-warning[b-n2iv4hz2mu] {
    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-n2iv4hz2mu] {
    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-n2iv4hz2mu] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: var(--color-warning-light);
}

/* Lore Preview (hover to expand) */
.item-lore-preview[b-n2iv4hz2mu] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    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;
}

.lore-icon[b-n2iv4hz2mu] {
    color: #c4b5fd;
    flex-shrink: 0;
    margin-top: 2px;
}

.lore-text[b-n2iv4hz2mu] {
    font-size: var(--font-size-sm);
    color: #c4b5fd;
    font-style: italic;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all var(--transition-slow);
}

.item-lore-preview:hover .lore-text[b-n2iv4hz2mu],
.item-lore-preview:focus .lore-text[b-n2iv4hz2mu] {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Comparison Chip */
.comparison-chip[b-n2iv4hz2mu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.comparison-chip.upgrade[b-n2iv4hz2mu] {
    background: rgba(34, 197, 94, 0.12);
    color: var(--color-success-light);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.comparison-chip.downgrade[b-n2iv4hz2mu] {
    background: rgba(239, 68, 68, 0.08);
    color: var(--color-text-tertiary);
    border: 1px solid var(--color-border-subtle);
}

/* Footer */
.item-footer[b-n2iv4hz2mu] {
    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 rgba(255, 255, 255, 0.05);
}

.item-quantity[b-n2iv4hz2mu] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-semibold);
}

/* Button Styling */
[b-n2iv4hz2mu] .btn-equip {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: #0f172a !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 rgba(255, 215, 0, 0.3);
}

[b-n2iv4hz2mu] .btn-equip:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

[b-n2iv4hz2mu] .btn-equip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* 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) var(--space-sm);
    }

    .item-footer[b-n2iv4hz2mu] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-n2iv4hz2mu] .btn-equip {
        width: 100%;
        justify-content: center;
    }
}
/* /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: rgba(255, 215, 0, 0.15);
    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.2);
    border-radius: var(--radius-sm);
}

.notification-list[b-jvst0g8l77]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.2);
    border-radius: var(--radius-sm);
}

.notification-list[b-jvst0g8l77]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.3);
}

/* 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);
    }
}