/* /Components/AdventureEditor/AdventureEditorFormView.razor.rz.scp.css */
/* Adventure Editor Form View - Pure HTML/CSS with Design System Tokens */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .btn[b-77fb9njh7i] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/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 var(--color-border-base);
    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, var(--color-success), var(--color-success-dark)) !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, var(--color-gray-700)) !important;
    color: var(--color-text-secondary) !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 var(--color-border-subtle);
}

/* Class-specific header accent */
.detail-header.warrior[b-jywxoucvm6] { border-left: 3px solid var(--color-danger); }
.detail-header.wizard[b-jywxoucvm6] { border-left: 3px solid var(--color-info); }
.detail-header.ranger[b-jywxoucvm6] { border-left: 3px solid var(--color-success); }
.detail-header.rogue[b-jywxoucvm6] { border-left: 3px solid var(--color-rogue); }
.detail-header.paladin[b-jywxoucvm6] { border-left: 3px solid var(--color-warning); }
.detail-header.bard[b-jywxoucvm6] { border-left: 3px solid var(--color-bard); }
.detail-header.cleric[b-jywxoucvm6] { border-left: 3px solid var(--color-cleric); }
.detail-header.monk[b-jywxoucvm6] { border-left: 3px solid var(--color-monk); }
.detail-header.barbarian[b-jywxoucvm6] { border-left: 3px solid var(--color-barbarian); }

.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, var(--color-border-base), rgba(255, 215, 0, 0.05));
    border: 2px solid var(--color-border-active);
}

.portrait-icon[b-jywxoucvm6] {
    font-size: 1.75rem !important;
    color: var(--color-primary);
}

.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: var(--color-primary);
    margin: 0;
    line-height: 1.2;
}

.hero-meta[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.hero-title[b-jywxoucvm6] {
    font-weight: 600;
    font-size: inherit;
    color: var(--color-primary);
}

.hero-separator[b-jywxoucvm6] {
    display: inline-block;
    width: 1px;
    height: 0.75em;
    background: #475569;
    vertical-align: middle;
    margin: 0 0.35rem;
}

.hero-race[b-jywxoucvm6] {
    color: var(--color-text-light);
}

.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: var(--color-primary);
    padding: 0.375rem 0.75rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-active);
    border-radius: 6px;
}

.btn-play[b-jywxoucvm6] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !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, var(--color-gray-700)) !important;
    color: var(--color-text-secondary) !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 var(--color-border-subtle);
}

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

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

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

.combat-readiness-banner.grade-d[b-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 var(--color-danger);
    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: var(--color-primary);
}

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

.readiness-label[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    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: var(--color-primary);
}

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

.readiness-improvements[b-jywxoucvm6] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border-subtle);
}

.improvements-header[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-light);
    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: var(--color-text-secondary);
    padding-left: 1.25rem;
    position: relative;
}

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

/* ===== 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 var(--color-border-subtle);
    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 var(--color-border-subtle);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

/* ===== 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: var(--color-text-light);
    font-weight: 600;
}

.resource-values[b-jywxoucvm6] {
    color: var(--color-text-secondary);
    font-family: monospace;
}

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

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

.resource-fill.hp[b-jywxoucvm6] {
    background: linear-gradient(90deg, var(--color-danger), var(--color-barbarian));
}

.resource-fill.mana[b-jywxoucvm6] {
    background: linear-gradient(90deg, var(--color-info), var(--color-info-dark));
}

.resource-fill.xp[b-jywxoucvm6] {
    background: linear-gradient(90deg, var(--color-primary), var(--color-warning));
}

/* ===== 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 var(--color-border-subtle);
    border-radius: 6px;
    padding: 0.625rem;
    transition: all 0.2s ease;
}

.stat-card-detailed:hover[b-jywxoucvm6] {
    border-color: rgba(255, 255, 255, 0.1);
    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: var(--color-primary);
    letter-spacing: 0.5px;
}

.stat-full[b-jywxoucvm6] {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    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: var(--color-primary);
    font-family: 'Cinzel', serif;
}

.stat-mod[b-jywxoucvm6] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-family: monospace;
}

.stat-description[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    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 var(--color-border-subtle);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.combat-stat-card:hover[b-jywxoucvm6] {
    border-color: var(--color-border-active);
    transform: translateY(-1px);
}

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

.stat-icon.ac[b-jywxoucvm6] { color: var(--color-info); }
.stat-icon.init[b-jywxoucvm6] { color: var(--color-success); }
.stat-icon.attack[b-jywxoucvm6] { color: var(--color-danger); }
.stat-icon.saves[b-jywxoucvm6] { color: var(--color-monk); }

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

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

.stat-label-small[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    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: var(--color-text-light);
    line-height: 1.4;
}

.tip-icon[b-jywxoucvm6] {
    color: var(--color-success);
    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 var(--color-border-subtle);
    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: var(--color-border-active);
}

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

.equip-icon[b-jywxoucvm6] {
    color: var(--color-primary);
}

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

.equip-slot[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.equip-name[b-jywxoucvm6] {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    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 var(--color-border-subtle);
    font-size: 0.75rem;
    color: var(--color-success);
}

.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: var(--color-text-secondary);
}

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

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

.equip-name-sm[b-jywxoucvm6] {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    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: var(--color-text-secondary);
}

/* ===== 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 var(--color-border-subtle);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.achievement-card:hover[b-jywxoucvm6] {
    border-color: var(--color-border-active);
    transform: translateY(-2px);
}

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

.achievement-icon.kills[b-jywxoucvm6] { color: var(--color-danger); }
.achievement-icon.wins[b-jywxoucvm6] { color: var(--color-primary); }
.achievement-icon.bosses[b-jywxoucvm6] { color: var(--color-monk); }
.achievement-icon.quests[b-jywxoucvm6] { color: var(--color-success); }

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

.achievement-label[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    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 var(--color-border-subtle);
    border-radius: 6px;
    transition: all 0.2s ease;
}

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

.currency-card.gold[b-jywxoucvm6] {
    border-color: var(--color-border-active);
}

.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: var(--color-primary); }
.currency-card.silver .currency-icon[b-jywxoucvm6] { color: var(--color-silver); }
.currency-card.copper .currency-icon[b-jywxoucvm6] { color: var(--color-bronze); }

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

.currency-type[b-jywxoucvm6] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    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: var(--color-text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-copper[b-jywxoucvm6] {
    color: var(--color-text-light);
    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 var(--color-border-subtle);
    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: var(--color-primary);
    opacity: 0.6;
    flex-shrink: 0;
}

.motto-text[b-jywxoucvm6] {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    font-style: italic;
    line-height: 1.4;
}

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

.btn-speak[b-jywxoucvm6] {
    color: var(--color-text-light) !important;
    transition: all 0.3s ease !important;
}

.btn-speak.speaking[b-jywxoucvm6] {
    color: var(--color-success) !important;
}

.btn-delete-compact[b-jywxoucvm6] {
    color: var(--color-danger) !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: var(--color-warning);
    font-weight: 600;
}

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

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

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

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

/* ===== RESPONSIVE 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 var(--color-border-base);
    border-radius: 10px;
    margin-bottom: 1rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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: var(--color-primary);
    margin: 0 0 0.1rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

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

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

/* Mobile responsive */
@media (max-width: 768px) {
    .character-list[b-4w00ae2ssc] {
        max-height: 280px;
    }
    
    .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), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

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

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

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

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

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

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

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

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

.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 var(--color-border-hover);
}

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

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

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

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

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

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

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

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

.vital-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: var(--color-text-secondary);
    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, var(--color-danger), var(--color-barbarian));
}

.vital-fill.mana[b-mcs94j69xw] {
    background: linear-gradient(90deg, var(--color-info), var(--color-info-dark));
}

.vital-fill.focus[b-mcs94j69xw] {
    background: linear-gradient(90deg, var(--color-success), var(--color-success-dark));
}

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

.vital-value[b-mcs94j69xw] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-light);
    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/Characters/Portrait/CharacterPortraitEditor.razor.rz.scp.css */
/* ── Dialog content wrapper ─────────────────────────────────────────────── */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Responsive design */
@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/CombatActionBanner.razor.rz.scp.css */
/* ===== COMBAT ACTION BANNER ===== */

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

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

/* Variants */
.banner-player .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(5, 150, 105, 0.85));
    border: 2px solid rgba(74, 222, 128, 0.6);
    color: #ffffff;
}

.banner-enemy .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(185, 28, 28, 0.85));
    border: 2px solid rgba(248, 113, 113, 0.6);
    color: #ffffff;
}

.banner-healing-type .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.85));
    border: 2px solid rgba(52, 211, 153, 0.6);
    color: #ffffff;
}

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

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

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

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

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

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

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

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

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

.banner-damage[b-7pxstjwh39] {
    color: #fca5a5;
    font-weight: 700;
    font-size: 1.1rem;
}

.banner-healing[b-7pxstjwh39] {
    color: #86efac;
    font-weight: 700;
    font-size: 1.1rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Ready — green glow beacon that says "use me now!" */
.action-badge.ready[b-x875gdys2p] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: white;
    border-color: rgba(34, 197, 94, 0.6);
    animation: ready-beacon-b-x875gdys2p 1.8s ease-in-out infinite;
}

@keyframes ready-beacon-b-x875gdys2p {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.6),
            0 0 6px rgba(34, 197, 94, 0.4);
    }
    50% {
        transform: scale(1.15);
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.6),
            0 0 16px rgba(34, 197, 94, 0.8);
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.passive-indicator.active[b-x875gdys2p] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.1) 100%);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 
        0 2px 8px rgba(34, 197, 94, 0.2),
        inset 0 1px 0 rgba(34, 197, 94, 0.1);
}

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

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

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

.passive-indicator.active .passive-content[b-x875gdys2p] {
    color: rgba(34, 197, 94, 1);
}

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

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

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

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

.passive-indicator.active .passive-status[b-x875gdys2p] {
    background: rgba(34, 197, 94, 0.2);
    color: rgba(34, 197, 94, 1);
}

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

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

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

.passive-indicator.active:hover[b-x875gdys2p] {
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: 
        0 4px 12px rgba(34, 197, 94, 0.3),
        inset 0 1px 0 rgba(34, 197, 94, 0.15);
}

.passive-indicator.info:hover[b-x875gdys2p] {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.25),
        inset 0 1px 0 rgba(59, 130, 246, 0.12);
}
/* /Components/Combat/EnemyRoster.razor.rz.scp.css */
/* EnemyRoster component — reuses --mp-* variables defined globally in FocusMonsterPanel.razor.css */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.roster-enemy-hp-fill[b-ge04umde3e] {
    height: 100%;
    background: #4ade80;
    transition: width 0.35s ease;
}

.roster-enemy-hp-fill.warning[b-ge04umde3e] {
    background: #facc15;
}

.roster-enemy-hp-fill.danger[b-ge04umde3e] {
    background: #fb923c;
}

.roster-enemy-hp-fill.critical[b-ge04umde3e] {
    background: #ef4444;
    animation: critRosterPulse-b-ge04umde3e 1s ease-in-out infinite;
}

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

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

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

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

.roster-zone-label.zone-vanguard[b-ge04umde3e] { color: #ef4444; }
.roster-zone-label.zone-flankleft[b-ge04umde3e] { color: #f59e0b; }
.roster-zone-label.zone-flankright[b-ge04umde3e] { color: #f59e0b; }
.roster-zone-label.zone-rear[b-ge04umde3e] { color: #6b7280; }
/* /Components/Combat/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: var(--color-gray-850);
    --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: var(--color-primary);
    --mp-gold-light: #ffe066;
    --mp-health-green: var(--color-success-light);
    --mp-health-yellow: #facc15;
    --mp-health-orange: #fb923c;
    --mp-health-red: var(--color-danger);
    --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: var(--color-border-active);
    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 var(--color-border-active);
        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: 1/1;
    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: rgba(10, 12, 16, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid var(--mp-border-gold);
    padding: 5px 14px;
    border-radius: 16px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--mp-gold);
    letter-spacing: 1px;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.boss-crown[b-wah4937br2] {
    position: absolute;
    top: 48px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark));
    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;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -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 Body — below the image */
.monster-body[b-wah4937br2] {
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--mp-bg-card);
    border-top: 1px solid var(--mp-border-subtle);
}

.monster-name-row[b-wah4937br2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.monster-name-col[b-wah4937br2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.monster-name[b-wah4937br2] {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mp-text-primary);
    margin: 0;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.monster-classification[b-wah4937br2] {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Status Effects */
.status-effects[b-wah4937br2] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.status-effect[b-wah4937br2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    border: 1px solid var(--mp-border-subtle);
}

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

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

    .status-effect.more[b-wah4937br2] {
        color: var(--mp-text-muted);
        font-size: 11px;
        justify-content: center;
    }

    .status-effect .effect-name[b-wah4937br2] {
        font-size: 12px;
        font-weight: 500;
        flex: 1;
    }

    .status-effect .effect-duration[b-wah4937br2] {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        font-weight: 600;
        opacity: 0.75;
        white-space: nowrap;
        flex-shrink: 0;
    }

/* 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, var(--color-success-light) 0%, var(--color-success) 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, var(--color-danger) 0%, var(--color-barbarian) 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: var(--color-info-light);
    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-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--mp-bg-card);
    border-top: 1px solid var(--mp-border-subtle);
    gap: 16px;
}

.stat-inline[b-wah4937br2] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.stat-divider[b-wah4937br2] {
    color: var(--mp-border-subtle);
    font-size: 1.1rem;
    opacity: 0.6;
    user-select: none;
}

.stat-icon[b-wah4937br2] {
    opacity: 0.85;
}

.stat-icon-ac[b-wah4937br2] {
    color: var(--color-info-light);
}

.stat-icon-dmg[b-wah4937br2] {
    color: var(--color-danger-light);
}

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

/* ===== 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, var(--color-barbarian) 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, var(--color-info) 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);
    padding: 12px 20px 16px;
}

.lore-header[b-wah4937br2] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mp-gold);
    margin-bottom: 10px;
}

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

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

/* ===== 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 var(--color-border-active);
    }

    .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] {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    border-radius: 0;
}

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

/* ===== ZONE BADGES ===== */
.zone-badge[b-wah4937br2] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(10, 12, 16, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--mp-text-secondary);
}

    .zone-badge.zone-vanguard[b-wah4937br2] {
        border-color: rgba(239, 68, 68, 0.5);
        color: #ef4444;
    }

    .zone-badge.zone-flankleft[b-wah4937br2],
    .zone-badge.zone-flankright[b-wah4937br2] {
        border-color: rgba(245, 158, 11, 0.5);
        color: #f59e0b;
    }

    .zone-badge.zone-rear[b-wah4937br2] {
        border-color: rgba(59, 130, 246, 0.5);
        color: #3b82f6;
    }

/* Zone label inside roster cards */
.roster-zone-label[b-wah4937br2] {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mp-text-muted);
    margin-top: 2px;
}

    .roster-zone-label.zone-vanguard[b-wah4937br2] { color: #ef4444; }

    .roster-zone-label.zone-flankleft[b-wah4937br2],
    .roster-zone-label.zone-flankright[b-wah4937br2] { color: #f59e0b; }

    .roster-zone-label.zone-rear[b-wah4937br2] { color: #3b82f6; }

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

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

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

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

    .roster-enemy-name[b-wah4937br2] {
        font-size: 8px;
    }
}
/* /Components/Combat/FormationZoneCard.razor.rz.scp.css */
/* FormationZoneCard scoped styles */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fzc-occupant-monster[b-6cgvfcqnxc] {
    /* Error color handled by MudChip Color.Error */
}
/* /Components/Combat/InitiativeTracker.razor.rz.scp.css */
/* Desktop Initiative Tracker */
.initiative-tracker[b-el113q63ts] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-elevated-alt);
    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: var(--color-primary);
    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: var(--color-warning-bright);
    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: var(--color-info);
    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: var(--color-danger);
    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;
}

/* ===== SLOT WRAPPER (slot + HP strip) ===== */
.initiative-slot-wrapper[b-el113q63ts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

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

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

.hp-strip-healthy[b-el113q63ts] {
    background: #34d399;
}

.hp-strip-low[b-el113q63ts] {
    background: var(--color-warning-bright);
}

.hp-strip-critical[b-el113q63ts] {
    background: var(--color-danger);
    animation: critStripPulse-b-el113q63ts 1s ease-in-out infinite;
}

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

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

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

/* Active ring: pulsing gold outline inside active slot */
.initiative-active-ring[b-el113q63ts] {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--color-warning-bright);
    animation: activeRingPulse-b-el113q63ts 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes activeRingPulse-b-el113q63ts {
    0%, 100% {
        transform: scale(1);
        opacity: 0.75;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Mobile: hide HP strips */
.initiative-tracker.mobile .initiative-hp-strip[b-el113q63ts] {
    display: none;
}
/* /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, 
        var(--color-border-hover), 
        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 var(--color-border-active); 
    }
    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, 
        var(--color-border-base), 
        rgba(255, 215, 0, 0.05));
    border: 1px solid var(--color-border-active);
    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 var(--color-border-subtle);
}

.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: var(--color-primary);
}

.consumable-empty-state[b-t8ytr3yszx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    color: var(--color-text-secondary);
}

.consumable-list[b-t8ytr3yszx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    min-height: 150px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.consumable-list.consuming[b-t8ytr3yszx] {
    pointer-events: none;
    opacity: 0.8;
}

.consumable-card[b-t8ytr3yszx] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* Prevent cards from being compressed */
    min-height: auto;
}

.consumable-card:hover:not(.selected-consume)[b-t8ytr3yszx] {
    transform: translateY(-2px);
    border-color: var(--color-border-active);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.1);
}

.consumable-card.selected-consume[b-t8ytr3yszx] {
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.4), inset 0 0 20px rgba(34, 197, 94, 0.1);
    animation: consume-pulse-b-t8ytr3yszx 0.6s ease-in-out;
}

@keyframes consume-pulse-b-t8ytr3yszx {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 50px rgba(34, 197, 94, 0.6);
    }
}

.consume-effect[b-t8ytr3yszx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.consume-text[b-t8ytr3yszx] {
    color: var(--color-success-light);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
    animation: pulse-text-b-t8ytr3yszx 1s ease-in-out infinite;
}

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

.consume-particles[b-t8ytr3yszx] {
    position: absolute;
    inset: 0;
}

.particle[b-t8ytr3yszx] {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, var(--color-success-light), transparent);
    border-radius: 50%;
    animation: float-particle-b-t8ytr3yszx 1s ease-in-out infinite;
}

.particle:nth-child(1)[b-t8ytr3yszx] {
    left: 20%;
    animation-delay: 0s;
}

.particle:nth-child(2)[b-t8ytr3yszx] {
    left: 40%;
    animation-delay: 0.2s;
}

.particle:nth-child(3)[b-t8ytr3yszx] {
    left: 60%;
    animation-delay: 0.4s;
}

.particle:nth-child(4)[b-t8ytr3yszx] {
    left: 80%;
    animation-delay: 0.6s;
}

.particle:nth-child(5)[b-t8ytr3yszx] {
    left: 50%;
    animation-delay: 0.3s;
}

@keyframes float-particle-b-t8ytr3yszx {
    0% {
        bottom: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        bottom: 100%;
        opacity: 0;
    }
}

/* Rarity border colors */
.consumable-card.rarity-common[b-t8ytr3yszx] {
    border-left: 3px solid var(--color-text-secondary);
}

.consumable-card.rarity-uncommon[b-t8ytr3yszx] {
    border-left: 3px solid var(--color-success);
}

.consumable-card.rarity-rare[b-t8ytr3yszx] {
    border-left: 3px solid var(--color-info);
}

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

.consumable-card.rarity-legendary[b-t8ytr3yszx] {
    border-left: 3px solid var(--color-warning);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.consumable-card.rarity-legendary:hover[b-t8ytr3yszx] {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(245, 158, 11, 0.3);
}

.consumable-card-header[b-t8ytr3yszx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.consumable-name-section[b-t8ytr3yszx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.consumable-name[b-t8ytr3yszx] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quantity-badge[b-t8ytr3yszx] {
    background: rgba(0, 0, 0, 0.4);
    color: var(--color-warning-bright);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(251, 191, 36, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

.consumable-meta[b-t8ytr3yszx] {
    flex-shrink: 0;
}

.consumable-description[b-t8ytr3yszx] {
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.consumable-effects[b-t8ytr3yszx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Effect chip styling */
.effect-chip-hp[b-t8ytr3yszx] {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: var(--color-danger-lighter) !important;
}

.effect-chip-mana[b-t8ytr3yszx] {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: var(--color-info-lighter) !important;
}

.effect-chip-buff[b-t8ytr3yszx] {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: var(--color-warning-light) !important;
}

.effect-chip-damage[b-t8ytr3yszx] {
    background: rgba(139, 92, 246, 0.15) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: var(--color-monk-lighter) !important;
}

.effect-chip-full[b-t8ytr3yszx] {
    background: rgba(34, 197, 94, 0.15) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: var(--color-success-lighter) !important;
}

.consumable-type[b-t8ytr3yszx] {
    display: flex;
    align-items: center;
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
}

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

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

.rarity-chip-rare[b-t8ytr3yszx] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--color-info-light) !important;
}

.rarity-chip-epic[b-t8ytr3yszx] {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #a78bfa !important;
}

.rarity-chip-legendary[b-t8ytr3yszx] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--color-warning-bright) !important;
    font-weight: 600 !important;
}

/* Button styling */
.btn-cancel-consumable[b-t8ytr3yszx] {
    color: var(--color-text-secondary) !important;
}

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

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

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

.consumable-list[b-t8ytr3yszx]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: 4px;
}

.consumable-list[b-t8ytr3yszx]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5);
}

/* ===== MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    .consumable-list[b-t8ytr3yszx] {
        max-height: none; /* Let the dialog control the height */
        min-height: auto;
        padding: 0.25rem;
        gap: 0.5rem;
        overflow-y: visible; /* Content handled by dialog */
    }

    .consumable-card[b-t8ytr3yszx] {
        padding: 0.75rem;
        flex-shrink: 0;
    }

    .consumable-card-header[b-t8ytr3yszx] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .consumable-name-section[b-t8ytr3yszx] {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .consumable-name[b-t8ytr3yszx] {
        font-size: 0.95rem !important;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .consumable-meta[b-t8ytr3yszx] {
        flex-shrink: 0;
    }

    .consumable-meta[b-t8ytr3yszx]  .mud-chip {
        font-size: 0.65rem !important;
        height: 20px !important;
    }

    .consumable-description[b-t8ytr3yszx] {
        display: none; /* Hide description on mobile to save space */
    }

    .consumable-effects[b-t8ytr3yszx] {
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    .consumable-effects[b-t8ytr3yszx]  .mud-chip {
        font-size: 0.65rem !important;
        padding: 0.1rem 0.4rem !important;
        height: auto !important;
        min-height: 22px;
    }

    .quantity-badge[b-t8ytr3yszx] {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }

    .consumable-type[b-t8ytr3yszx] {
        display: none; /* Hide type on mobile */
    }

    .consumable-modal-title[b-t8ytr3yszx] {
        font-size: 1rem;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .consumable-card[b-t8ytr3yszx] {
        padding: 0.6rem;
    }

    .consumable-name[b-t8ytr3yszx] {
        font-size: 0.85rem !important;
    }

    .consumable-effects[b-t8ytr3yszx]  .mud-chip {
        font-size: 0.6rem !important;
    }

    .quantity-badge[b-t8ytr3yszx] {
        font-size: 0.65rem;
    }
}
/* /Components/Combat/Modals/FormationPickerModal.razor.rz.scp.css */
/* ── Formation Picker Modal – Hex Board Styles ── */

/* Title */
.formation-title[b-pc6jqeqxsb] {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.02em;
}

/* ── Hex board container ── */
.formation-hex-board[b-pc6jqeqxsb] {
    position: relative;
    width: 100%;
    max-height: 340px;
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.12);
}

.formation-hex-svg[b-pc6jqeqxsb] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
}

/* ── Hex cell base ── */
.fp-hex[b-pc6jqeqxsb] {
    fill: rgba(30, 41, 59, 0.6);
    stroke: rgba(148, 163, 184, 0.15);
    stroke-width: 0.5;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

/* ── Player-side zone colours ── */
.fp-player-zone[b-pc6jqeqxsb] {
    stroke: rgba(148, 163, 184, 0.25);
}

.fp-zone-vanguard[b-pc6jqeqxsb] {
    fill: rgba(239, 68, 68, 0.12);
}

.fp-zone-flank[b-pc6jqeqxsb] {
    fill: rgba(245, 158, 11, 0.10);
}

.fp-zone-rear[b-pc6jqeqxsb] {
    fill: rgba(59, 130, 246, 0.10);
}

/* Hover */
.fp-player-zone:hover:not(.fp-full)[b-pc6jqeqxsb] {
    stroke: rgba(255, 215, 0, 0.5);
    stroke-width: 1;
}

.fp-zone-vanguard:hover:not(.fp-full)[b-pc6jqeqxsb] {
    fill: rgba(239, 68, 68, 0.25);
}

.fp-zone-flank:hover:not(.fp-full)[b-pc6jqeqxsb] {
    fill: rgba(245, 158, 11, 0.22);
}

.fp-zone-rear:hover:not(.fp-full)[b-pc6jqeqxsb] {
    fill: rgba(59, 130, 246, 0.22);
}

/* Selected */
.fp-selected[b-pc6jqeqxsb] {
    stroke: rgba(74, 222, 128, 0.7) !important;
    stroke-width: 1.5 !important;
    filter: url(#fp-glow);
}

.fp-zone-vanguard.fp-selected[b-pc6jqeqxsb] {
    fill: rgba(239, 68, 68, 0.35);
}

.fp-zone-flank.fp-selected[b-pc6jqeqxsb] {
    fill: rgba(245, 158, 11, 0.30);
}

.fp-zone-rear.fp-selected[b-pc6jqeqxsb] {
    fill: rgba(59, 130, 246, 0.30);
}

/* Full (disabled) */
.fp-full[b-pc6jqeqxsb] {
    opacity: 0.35;
}

/* ── Barrier hexes ── */
.fp-barrier[b-pc6jqeqxsb] {
    fill: rgba(148, 163, 184, 0.08);
    stroke: rgba(148, 163, 184, 0.12);
    stroke-width: 0.4;
}

/* ── Enemy-side hexes (dimmed, non-interactive) ── */
.fp-enemy[b-pc6jqeqxsb] {
    fill: rgba(239, 68, 68, 0.04);
    stroke: rgba(148, 163, 184, 0.08);
    stroke-width: 0.3;
    pointer-events: none;
}

/* ── Zone labels ── */
.fp-zone-label[b-pc6jqeqxsb] {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 600;
    fill: rgba(248, 250, 252, 0.7);
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fp-zone-label-selected[b-pc6jqeqxsb] {
    fill: rgba(74, 222, 128, 0.9);
}

.fp-zone-bonus[b-pc6jqeqxsb] {
    font-family: inherit;
    font-size: 6px;
    fill: rgba(148, 163, 184, 0.6);
    pointer-events: none;
}

.fp-side-label[b-pc6jqeqxsb] {
    font-family: 'Cinzel', serif;
    font-size: 7px;
    font-weight: 600;
    fill: rgba(59, 130, 246, 0.5);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
}

.fp-side-label-enemy[b-pc6jqeqxsb] {
    fill: rgba(239, 68, 68, 0.4);
}

/* ── Zone detail strip (below the hex board) ── */
.formation-zone-strip[b-pc6jqeqxsb] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fzs-item[b-pc6jqeqxsb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(30, 41, 59, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 100px;
}

.fzs-item:hover:not(.fzs-full)[b-pc6jqeqxsb] {
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(30, 41, 59, 0.7);
}

.fzs-selected[b-pc6jqeqxsb] {
    border-color: rgba(74, 222, 128, 0.5);
    background: rgba(74, 222, 128, 0.08);
}

.fzs-full[b-pc6jqeqxsb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fzs-name[b-pc6jqeqxsb] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-primary, #f8fafc);
    white-space: nowrap;
}

.fzs-chip[b-pc6jqeqxsb] {
    font-size: 0.7rem !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .formation-hex-board[b-pc6jqeqxsb] {
        max-height: 260px;
    }

    .formation-zone-strip[b-pc6jqeqxsb] {
        flex-direction: column;
    }

    .fzs-item[b-pc6jqeqxsb] {
        min-width: unset;
    }
}
/* /Components/Combat/Modals/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: var(--color-border-active);
}

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

    .spell-modal-list[b-f8cghy0244] {
        max-height: 60vh;
    }

    /* 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 var(--color-border-base);
    }

    .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, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 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, var(--color-danger) 0%, var(--color-barbarian) 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: var(--color-text-light);
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.defeat-message em[b-zdtpgqkwhj] {
    color: var(--color-monk-lighter);
    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: var(--color-success-light);
    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, var(--color-info), var(--color-info-dark));
    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] {
    /* Border/background/radius are now owned by the MudPaper modal wrapper */
    overflow: visible;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.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: visible;
    flex: 1;
}

/* 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.3);
    border-radius: 4px;
}

.victory-content[b-p0w3c6mk6e]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    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.3);
    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, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.player-card.warrior[b-fcvalyuo0k] {
    border-left: 4px solid var(--color-danger);
}

.player-card.wizard[b-fcvalyuo0k] {
    border-left: 4px solid var(--color-info);
}

.player-card.ranger[b-fcvalyuo0k] {
    border-left: 4px solid var(--color-success);
}

.player-card.rogue[b-fcvalyuo0k] {
    border-left: 4px solid var(--color-rogue);
}

.player-card.paladin[b-fcvalyuo0k] {
    border-left: 4px solid var(--color-warning);
}

.player-card.bard[b-fcvalyuo0k] {
    border-left: 4px solid var(--color-bard);
}

.player-card.monk[b-fcvalyuo0k] {
    border-left: 4px solid var(--color-monk);
}

.player-card.barbarian[b-fcvalyuo0k] {
    border-left: 4px solid var(--color-barbarian);
}

.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, var(--color-border-base) 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: var(--color-primary);
}

.you-badge[b-fcvalyuo0k] {
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    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: var(--color-warning-light);
    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: var(--color-text-secondary);
}

.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.4s ease;
    position: relative;
    z-index: 2;
}

.stat-bar-fill.hp[b-fcvalyuo0k] {
    background: linear-gradient(90deg, var(--color-success), var(--color-success-light));
}

.stat-bar-fill.hp.low[b-fcvalyuo0k] {
    background: linear-gradient(90deg, var(--color-warning), var(--color-warning-bright));
}

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

.stat-bar-fill.mana[b-fcvalyuo0k] {
    background: linear-gradient(90deg, var(--color-info), var(--color-info-light));
}

.stat-bar-fill.ki[b-fcvalyuo0k] {
    background: linear-gradient(90deg, var(--color-warning), var(--color-warning-bright));
}

.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 var(--color-border-subtle);
    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: var(--color-text-tertiary);
    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: var(--color-warning-light);
    text-align: center;
    width: 100%;
}

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

.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: var(--color-text-secondary);
    flex-shrink: 0;
}

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

.equipment-value.clickable[b-fcvalyuo0k] {
    color: var(--color-info-light);
    cursor: pointer;
    text-decoration: underline;
}

.equipment-value.clickable:hover[b-fcvalyuo0k] {
    color: var(--color-info-lighter);
}

.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: var(--color-text-secondary);
}

.spell-count[b-fcvalyuo0k] {
    color: var(--color-info-lighter);
}

.spell-warning[b-fcvalyuo0k] {
    color: var(--color-warning-bright);
}

.buffs-section[b-fcvalyuo0k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem 0;
}

.buff-chip[b-fcvalyuo0k] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    cursor: default;
    transition: background 0.15s ease;
}

.buff-chip:hover[b-fcvalyuo0k] {
    background: rgba(255, 255, 255, 0.12);
}

.buff-turns[b-fcvalyuo0k] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    line-height: 1;
}

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

.connection-status[b-fcvalyuo0k] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

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

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

.connection-dot.disconnected[b-fcvalyuo0k] {
    background: var(--color-danger);
}

.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: var(--color-warning-bright);
}

.fled-badge[b-fcvalyuo0k] {
    background: rgba(100, 116, 139, 0.2);
    color: var(--color-text-secondary);
}

/* 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 var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    flex-wrap: wrap;
}

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

.card-icon-button[b-fcvalyuo0k] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--color-border-subtle);
    border: 1px solid rgba(255, 255, 255, 0.1);
    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.1);
    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, var(--color-cleric), #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, var(--color-info), var(--color-info-dark));
}

.card-icon-badge.ready[b-fcvalyuo0k] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    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: var(--color-danger-light);
    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: var(--color-success-light);
}

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

/* 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, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
        backdrop-filter: blur(10px);
        border-bottom: 2px solid var(--color-border-hover);
        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: var(--color-primary);
    }

    .sticky-you-badge[b-fcvalyuo0k] {
        background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
        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: var(--color-warning-light);
        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: var(--color-text-secondary);
        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: var(--color-text-secondary);
        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: var(--color-border-subtle);
        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, var(--color-cleric), #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, var(--color-info), var(--color-info-dark));
    }

    .sticky-icon-badge.ready[b-fcvalyuo0k] {
        background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
        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: var(--color-border-subtle);
        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.1);
        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;
        min-height: 44px; /* reserve space — prevents sticky bar height shift */
        align-items: center;
    }

    .sticky-status-badge[b-fcvalyuo0k] {
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease;
        cursor: help;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

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

    .sticky-status-badge.se-more[b-fcvalyuo0k] {
        font-size: 10px;
        font-weight: 700;
        color: white;
    }

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

/* ===== PLAYER DAMAGE / HEALING OVERLAY ===== */

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

.player-damage-overlay[b-fcvalyuo0k] {
    background: rgba(127, 29, 29, 0.85);
    border: 2px solid rgba(239, 68, 68, 0.6);
}

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

.player-healing-overlay[b-fcvalyuo0k] {
    background: rgba(5, 46, 22, 0.85);
    border: 2px solid rgba(34, 197, 94, 0.6);
}

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

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

.player-overlay-amount.damage[b-fcvalyuo0k] {
    font-size: 2rem;
    color: #ff6b6b;
}

.player-damage-overlay.crit .player-overlay-amount.damage[b-fcvalyuo0k] {
    font-size: 2.4rem;
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.8), 0 2px 8px rgba(0, 0, 0, 0.8);
}

.player-overlay-amount.healing[b-fcvalyuo0k] {
    font-size: 2rem;
    color: #4ade80;
}

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

@keyframes player-overlay-in-b-fcvalyuo0k {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes player-overlay-out-b-fcvalyuo0k {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

/* ===== HEALTH BAR DRAIN EFFECT ===== */
/* Ghost bar that slowly drains after the actual fill changes */

.stat-bar[b-fcvalyuo0k] {
    position: relative;
}

.stat-bar-fill.hp[b-fcvalyuo0k] {
    position: relative;
    z-index: 2;
}

.stat-bar-fill.hp[b-fcvalyuo0k]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: inherit;
    background: rgba(255, 255, 255, 0.25);
    border-radius: inherit;
    z-index: -1;
    transition: width 1.5s ease-in 0.3s;
}

/* The player-card wrapper needs position relative for damage overlay */
.player-card[b-fcvalyuo0k] {
    position: relative;
}

/* ===== HEALTH BAR DRAIN EFFECT ===== */
/* Ghost bar sits behind the fill and drains slowly after HP drops */

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

.stat-bar-drain.hp-drain[b-fcvalyuo0k] {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.45), rgba(248, 113, 113, 0.35));
}

/* ===== Active Companion compact row ===== */
.player-pet-compact[b-fcvalyuo0k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(251, 191, 36, 0.07);
    border-top: 1px solid rgba(251, 191, 36, 0.18);
    margin-top: 4px;
    transition: background 0.15s ease;
}

.player-pet-compact.clickable:hover[b-fcvalyuo0k] {
    background: rgba(251, 191, 36, 0.12);
}

.pet-mini-portrait-wrap[b-fcvalyuo0k] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(251, 191, 36, 0.45);
}

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

.pet-compact-name[b-fcvalyuo0k] {
    font-size: 0.75rem;
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.pet-compact-level[b-fcvalyuo0k] {
    font-size: 0.68rem;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    font-weight: 600;
}

.pet-evolution-gem[b-fcvalyuo0k] {
    font-size: 0.6rem;
    flex-shrink: 0;
}
.pet-evolution-gem.stage-1[b-fcvalyuo0k] { color: #94a3b8; }
.pet-evolution-gem.stage-2[b-fcvalyuo0k] { color: #22d3ee; }
.pet-evolution-gem.stage-3[b-fcvalyuo0k] { color: #fbbf24; }
/* /Components/Combat/TabletCombatActionsBar.razor.rz.scp.css */
/* TabletCombatActionsBar — sticky bottom action bar for portrait tablet */

.tablet-action-bar[b-0tnj4fr28z] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    background: linear-gradient(180deg, rgba(10, 15, 30, 0.97) 0%, rgba(15, 23, 42, 0.99) 100%);
    border-top: 1px solid var(--color-border-base);
    display: none; /* hidden by default; shown only on portrait tablet via combat-responsive.css */
    flex-direction: column;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    padding-bottom: env(safe-area-inset-bottom, 0px); /* notch-safe */
}

/* Active turn: gold top border glow */
.tablet-action-bar.is-turn[b-0tnj4fr28z] {
    border-top-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5), 0 -1px 12px rgba(255, 215, 0, 0.15);
}

/* ===== TURN STATUS STRIP ===== */
.tab-bar-status[b-0tnj4fr28z] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    min-height: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-status[b-0tnj4fr28z] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tab-status.ready[b-0tnj4fr28z] {
    color: #ffd700;
}

.tab-status.waiting[b-0tnj4fr28z] {
    color: var(--color-text-tertiary);
}

.tab-status.done[b-0tnj4fr28z] {
    color: var(--color-success);
}

.tab-status.ended[b-0tnj4fr28z] {
    color: var(--color-text-secondary);
}

/* ===== ACTION BUTTONS ROW ===== */
.tab-bar-buttons[b-0tnj4fr28z] {
    display: flex;
    align-items: stretch;
    height: 64px;
}

.tab-action-btn[b-0tnj4fr28z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
}

.tab-action-btn:last-child[b-0tnj4fr28z] {
    border-right: none;
}

.tab-action-btn:active[b-0tnj4fr28z] {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.96);
}

.tab-action-btn:disabled[b-0tnj4fr28z] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Per-button accent colours */
.tab-action-btn.attack[b-0tnj4fr28z]      { color: rgba(239, 68, 68, 0.85); }
.tab-action-btn.spell[b-0tnj4fr28z]       { color: rgba(139, 92, 246, 0.85); }
.tab-action-btn.item[b-0tnj4fr28z]        { color: rgba(34, 197, 94, 0.85); }
.tab-action-btn.item.empty[b-0tnj4fr28z]  { color: var(--color-text-tertiary); }
.tab-action-btn.flee[b-0tnj4fr28z]        { color: rgba(148, 163, 184, 0.7); }
.tab-action-btn.more[b-0tnj4fr28z]        { color: var(--color-text-secondary); }

/* Party button — orange-gold, draws the eye */
.tab-action-btn.party[b-0tnj4fr28z] {
    color: rgba(251, 191, 36, 0.8);
}
.tab-action-btn.party.has-actions[b-0tnj4fr28z] {
    color: #fbbf24;
}

/* Class signature buttons */
.tab-action-btn.class-sig[b-0tnj4fr28z]           { color: rgba(255, 215, 0, 0.85); }
.tab-action-btn.class-sig.warrior[b-0tnj4fr28z]   { color: rgba(239, 68, 68, 0.9); }
.tab-action-btn.class-sig.paladin[b-0tnj4fr28z]   { color: rgba(251, 191, 36, 0.9); }
.tab-action-btn.class-sig.bard[b-0tnj4fr28z]      { color: rgba(168, 85, 247, 0.9); }
.tab-action-btn.class-sig.barbarian[b-0tnj4fr28z] { color: rgba(239, 68, 68, 0.9); }
.tab-action-btn.class-sig.monk[b-0tnj4fr28z]      { color: rgba(234, 179, 8, 0.9); }
.tab-action-btn.class-sig.rogue[b-0tnj4fr28z]     { color: rgba(139, 92, 246, 0.9); }
.tab-action-btn.class-sig.ranger[b-0tnj4fr28z]    { color: rgba(34, 197, 94, 0.9); }
.tab-action-btn.class-sig.wizard[b-0tnj4fr28z]    { color: rgba(99, 102, 241, 0.9); }
.tab-action-btn.class-sig.cleric[b-0tnj4fr28z]    { color: rgba(251, 191, 36, 0.9); }
.tab-action-btn.class-sig.pirate[b-0tnj4fr28z]    { color: rgba(6, 182, 212, 0.9); }
.tab-action-btn.class-sig.active[b-0tnj4fr28z]    { color: #ef4444; }
.tab-action-btn.class-sig.on-cd[b-0tnj4fr28z]     { opacity: 0.5; }

/* Hover state (mouse/stylus) */
.tab-action-btn:not(:disabled):hover[b-0tnj4fr28z] {
    background: rgba(255, 255, 255, 0.06);
}

/* ===== BADGES ===== */
.tab-badge[b-0tnj4fr28z] {
    position: absolute;
    top: 5px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.85);
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* Mana cost — static blue pill with inner glow */
.tab-badge.mana[b-0tnj4fr28z] {
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    border: 1px solid rgba(59, 130, 246, 0.5);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(147, 197, 253, 0.2);
}

/* Ready — green beacon pulse */
.tab-badge.ready[b-0tnj4fr28z] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    border: 1px solid rgba(34, 197, 94, 0.5);
    animation: tabReadyPulse-b-0tnj4fr28z 1.8s ease-in-out infinite;
}

.tab-badge.pulse[b-0tnj4fr28z] {
    animation: tabReadyPulse-b-0tnj4fr28z 1.2s ease-in-out infinite;
}

/* Cooldown indicator — amber-to-red ticking badge */
.tab-cd[b-0tnj4fr28z] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--color-warning-lightest);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.9), rgba(153, 27, 27, 0.9));
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 4px;
    padding: 1px 4px;
    animation: tabCooldownTick-b-0tnj4fr28z 2s ease-in-out infinite;
}

@keyframes tabCooldownTick-b-0tnj4fr28z {
    0%, 100% {
        border-color: rgba(245, 158, 11, 0.5);
        box-shadow: 0 0 4px rgba(245, 158, 11, 0.2);
    }
    50% {
        border-color: rgba(239, 68, 68, 0.7);
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    }
}

@keyframes tabReadyPulse-b-0tnj4fr28z {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 4px rgba(34, 197, 94, 0.3); }
    50%       { opacity: 0.85; transform: scale(1.15); box-shadow: 0 0 10px rgba(34, 197, 94, 0.6); }
}

/* ===== LOCKED STATE ===== */
.tablet-action-bar.locked .tab-bar-buttons[b-0tnj4fr28z] {
    opacity: 0.7;
}
/* /Components/Combat/TabletCombatCharacterStrip.razor.rz.scp.css */
/* TabletCombatCharacterStrip — compact sticky character header for portrait tablet */

.tccs-strip[b-t6ehbsolwm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tccs-strip.is-turn[b-t6ehbsolwm] {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.12);
}

.tccs-strip.ended[b-t6ehbsolwm] {
    opacity: 0.7;
}

/* ===== AVATAR ===== */
.tccs-avatar[b-t6ehbsolwm] {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tccs-avatar-bg[b-t6ehbsolwm] {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
}

.tccs-portrait[b-t6ehbsolwm] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* ===== INFO SECTION ===== */
.tccs-info[b-t6ehbsolwm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tccs-name-row[b-t6ehbsolwm] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.tccs-name[b-t6ehbsolwm] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tccs-meta[b-t6ehbsolwm] {
    font-size: 0.65rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== RESOURCE BARS ===== */
.tccs-bar-row[b-t6ehbsolwm] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tccs-bar-label[b-t6ehbsolwm] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
    min-width: 22px;
}

.tccs-bar-track[b-t6ehbsolwm] {
    flex: 1;
    height: 5px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 3px;
    overflow: hidden;
}

.tccs-bar-fill[b-t6ehbsolwm] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    background: #22c55e;
}

.tccs-bar-fill.warning[b-t6ehbsolwm]  { background: #f59e0b; }
.tccs-bar-fill.danger[b-t6ehbsolwm]   { background: #ef4444; }
.tccs-bar-fill.critical[b-t6ehbsolwm] {
    background: #dc2626;
    animation: tccsCritPulse-b-t6ehbsolwm 1s ease-in-out infinite;
}
.tccs-bar-fill.mana[b-t6ehbsolwm] { background: #8b5cf6; }
.tccs-bar-fill.ki[b-t6ehbsolwm]   { background: #eab308; }

@keyframes tccsCritPulse-b-t6ehbsolwm {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.tccs-bar-value[b-t6ehbsolwm] {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ===== AC + TURN BADGES ===== */
.tccs-badges[b-t6ehbsolwm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.tccs-ac[b-t6ehbsolwm] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-primary);
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tccs-turn-badge[b-t6ehbsolwm] {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    font-family: var(--font-display);
}

.tccs-turn-badge.active[b-t6ehbsolwm] {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.55);
    color: #ffd700;
    animation: tccsTurnPulse-b-t6ehbsolwm 1.5s ease-in-out infinite;
}

.tccs-turn-badge.done[b-t6ehbsolwm] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.tccs-turn-badge.waiting[b-t6ehbsolwm] {
    background: rgba(100, 116, 139, 0.12);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--color-text-tertiary);
}

.tccs-turn-badge.ended[b-t6ehbsolwm] {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.2);
    color: var(--color-text-tertiary);
}

@keyframes tccsTurnPulse-b-t6ehbsolwm {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 215, 0, 0.25); }
    50%       { box-shadow: 0 0 12px rgba(255, 215, 0, 0.55); }
}
/* /Components/Combat/TabletPartySummaryStrip.razor.rz.scp.css */
/* TabletPartySummaryStrip — compact horizontal party bar for portrait tablet multiplayer */

.tablet-party-strip[b-1v5xnp278p] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tablet-party-strip[b-1v5xnp278p]::-webkit-scrollbar {
    display: none;
}

/* ===== PLAYER CARDS ===== */
.tps-players[b-1v5xnp278p] {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.tps-player-card[b-1v5xnp278p] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    min-width: 120px;
    max-width: 160px;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
    position: relative;
}

.tps-player-card.is-turn[b-1v5xnp278p] {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
    animation: tpsCardTurnPulse-b-1v5xnp278p 1.5s ease-in-out infinite;
}

.tps-player-card.is-self[b-1v5xnp278p] {
    border-color: rgba(59, 130, 246, 0.4);
}

.tps-player-card.is-fled[b-1v5xnp278p] {
    opacity: 0.45;
    filter: grayscale(60%);
}

@keyframes tpsCardTurnPulse-b-1v5xnp278p {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.2); }
    50%       { box-shadow: 0 0 14px rgba(255, 215, 0, 0.45); }
}

/* ===== AVATAR ===== */
.tps-avatar[b-1v5xnp278p] {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.tps-class-icon[b-1v5xnp278p] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.tps-portrait[b-1v5xnp278p] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.tps-turn-dot[b-1v5xnp278p] {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffd700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
    animation: tpsTurnDotPulse-b-1v5xnp278p 1s ease-in-out infinite;
}

@keyframes tpsTurnDotPulse-b-1v5xnp278p {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.3); }
}

/* ===== INFO ===== */
.tps-info[b-1v5xnp278p] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tps-name[b-1v5xnp278p] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tps-hp-track[b-1v5xnp278p] {
    height: 4px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    overflow: hidden;
}

.tps-hp-fill[b-1v5xnp278p] {
    height: 100%;
    border-radius: 2px;
    background: #22c55e;
    transition: width 0.3s ease;
}

.tps-hp-fill.warning[b-1v5xnp278p]  { background: #f59e0b; }
.tps-hp-fill.danger[b-1v5xnp278p]   { background: #ef4444; }
.tps-hp-fill.critical[b-1v5xnp278p] { background: #dc2626; animation: tpsHpCritPulse-b-1v5xnp278p 1s ease-in-out infinite; }

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

.tps-hp-text[b-1v5xnp278p] {
    font-size: 0.58rem;
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* ===== CONNECTION DOT ===== */
.tps-conn-dot[b-1v5xnp278p] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tps-conn-dot.online[b-1v5xnp278p]  { background: #22c55e; box-shadow: 0 0 4px rgba(34, 197, 94, 0.6); }
.tps-conn-dot.offline[b-1v5xnp278p] { background: #ef4444; }

/* ===== PARTY ACTIONS BUTTON ===== */
.tps-party-btn[b-1v5xnp278p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--radius-md);
    color: rgba(251, 191, 36, 0.75);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.tps-party-btn:active[b-1v5xnp278p] {
    transform: scale(0.96);
    background: rgba(251, 191, 36, 0.2);
}

.tps-party-btn.available[b-1v5xnp278p] {
    border-color: rgba(251, 191, 36, 0.7);
    color: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.2);
    animation: tpsPartyBtnPulse-b-1v5xnp278p 2s ease-in-out infinite;
}

@keyframes tpsPartyBtnPulse-b-1v5xnp278p {
    0%, 100% { box-shadow: 0 0 6px rgba(251, 191, 36, 0.2); }
    50%       { box-shadow: 0 0 14px rgba(251, 191, 36, 0.45); }
}

.tps-pa-dot[b-1v5xnp278p] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.8);
}
/* /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 var(--color-rogue);
    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 var(--color-rogue);
    color: var(--color-rogue-light);
    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: var(--color-monk-lighter);
    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.zone-move-entry[b-pd6xoww0ax] {
    background: rgba(6, 182, 212, 0.07);
}

.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: var(--color-warning-bright) !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 var(--color-border-hover);
}

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

.breakdown-label[b-pd6xoww0ax] {
    font-weight: 600;
    color: var(--color-text-secondary);
    min-width: 55px;
}

.dice-notation[b-pd6xoww0ax] {
    color: var(--color-info-light);
    font-weight: 500;
}

.dice-rolls[b-pd6xoww0ax] {
    color: var(--color-warning-bright);
    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: var(--color-danger-light);
    font-weight: 600;
}

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

.text-player[b-pd6xoww0ax] {
    color: var(--color-success-light);
}

.text-enemy[b-pd6xoww0ax] {
    color: var(--color-danger-light);
}

.text-critical[b-pd6xoww0ax] {
    color: var(--color-warning-bright);
    font-weight: bold;
}

.text-victory[b-pd6xoww0ax] {
    color: var(--color-warning-bright);
    font-weight: bold;
}

.text-defeat[b-pd6xoww0ax] {
    color: var(--color-danger-light);
    font-weight: bold;
}

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

.text-movement[b-pd6xoww0ax] {
    color: #06b6d4;
    font-style: italic;
}

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

.icon-movement[b-pd6xoww0ax] {
    color: #06b6d4 !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 var(--color-border-hover);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

.settings-menu-button:hover[b-pd6xoww0ax] {
    background: var(--color-border-hover);
    border-color: var(--color-border-active);
}

.settings-dropdown[b-pd6xoww0ax] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: var(--color-gray-800);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.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: var(--color-text-primary);
    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: var(--color-primary);
}

.settings-menu-divider[b-pd6xoww0ax] {
    height: 1px;
    background: var(--color-border-base);
    margin: 0.5rem 0;
}

.settings-volume-slider[b-pd6xoww0ax] {
    padding: 0.5rem 1rem;
}
/* /Components/Combat/ZoneBattlefieldCanvas.razor.rz.scp.css */
/* ==========================================================================
   ZoneBattlefieldCanvas — board wrapper, SVG board, HTML overlay, VFX canvas
   Desktop-only (mobile/tablet remain on ZoneBattlefieldVertical).
   ========================================================================== */

/* ---------- Board outer wrapper ---------- */

.board-canvas-wrapper[b-v3rykgefk7] {
    position: relative;
    width: 100%;
    /* Maintain SVG viewBox aspect ratio 800:450 */
    aspect-ratio: 800 / 450;
    border-radius: 12px;
    overflow: hidden;
    /* Dark fantasy texture: diagonal crosshatch over a deep purple/red dungeon gradient */
    background:
        radial-gradient(ellipse 60% 80% at 22% 50%, rgba(30, 50, 120, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 60% 80% at 78% 50%, rgba(120, 20,  20,  0.18) 0%, transparent 65%),
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.012) 0px,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 12px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.012) 0px,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 12px
        ),
        linear-gradient(160deg, #1c1826 0%, #16121e 40%, #1a1014 60%, #1c1218 100%);
    border: 1px solid rgba(100, 116, 139, 0.22);
    box-shadow:
        0 0 0 1px rgba(100, 116, 139, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ---------- SVG board layer ---------- */

.board-svg[b-v3rykgefk7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* all interaction via HTML overlay */
}

/* ---- Frontline rift divider ---- */

.frontline-rift[b-v3rykgefk7] {
    stroke: rgba(239, 68, 68, 0.30);
    stroke-width: 2;
    stroke-dasharray: 8 6;
}

/* ---- Cross-frontline connector (Vanguard <-> Vanguard) ---- */

.frontline-connector[b-v3rykgefk7] {
    stroke: rgba(100, 116, 139, 0.25);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke 0.3s, stroke-width 0.3s;
}

.frontline-connector.charge-available[b-v3rykgefk7] {
    stroke: rgba(251, 146, 60, 0.80);
    stroke-width: 4;
    animation: connectorPulse-b-v3rykgefk7 1.4s ease-in-out infinite;
}

@keyframes connectorPulse-b-v3rykgefk7 {
    0%, 100% { stroke-opacity: 0.80; }
    50%       { stroke-opacity: 1; }
}

/* ---- Side labels in SVG ---- */

.side-label[b-v3rykgefk7] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
}

.player-side-label[b-v3rykgefk7] { fill: rgba(147, 197, 253, 1.0); }
.enemy-side-label[b-v3rykgefk7]  { fill: rgba(252, 165, 165, 1.0); }

/* ---- Zone polygon base styles ---- */

.zone-poly[b-v3rykgefk7] {
    fill: rgba(22, 30, 46, 0.82);
    stroke: rgba(100, 116, 139, 0.35);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}

.zone-poly.player-zone[b-v3rykgefk7] {
    fill: rgba(17, 30, 64, 0.80);
    stroke: rgba(59, 130, 246, 0.40);
}

.zone-poly.enemy-zone[b-v3rykgefk7] {
    fill: rgba(44, 14, 14, 0.80);
    stroke: rgba(239, 68, 68, 0.40);
}

/* Zone type tints */
.zone-poly.zone-vanguard.player-zone[b-v3rykgefk7] { fill: rgba(22, 38, 80, 0.85); }
.zone-poly.zone-vanguard.enemy-zone[b-v3rykgefk7]  { fill: rgba(58, 16, 16, 0.85); }
.zone-poly.zone-rear.player-zone[b-v3rykgefk7]     { fill: rgba(13, 24, 56, 0.75); }
.zone-poly.zone-rear.enemy-zone[b-v3rykgefk7]      { fill: rgba(34, 10, 10, 0.75); }

/* ---- Zone states ---- */

.zone-poly.zone-current[b-v3rykgefk7] {
    fill: rgba(29, 58, 138, 0.90);
    stroke: rgba(96, 165, 250, 0.95);
    stroke-width: 2.5;
    filter: url(#zone-glow);
}

.zone-poly.zone-available[b-v3rykgefk7] {
    fill: rgba(20, 48, 110, 0.85);
    stroke: rgba(96, 165, 250, 0.80);
    stroke-width: 2;
    filter: url(#zone-glow);
    animation: zoneAvailablePulse-b-v3rykgefk7 1.8s ease-in-out infinite;
}

@keyframes zoneAvailablePulse-b-v3rykgefk7 {
    0%, 100% { stroke-opacity: 0.80; }
    50%       { stroke-opacity: 1; fill: rgba(25, 55, 130, 0.92); }
}

.zone-poly.zone-pending[b-v3rykgefk7] {
    fill: rgba(16, 70, 38, 0.88);
    stroke: rgba(74, 222, 128, 0.95);
    stroke-width: 2.5;
    filter: url(#zone-glow);
}

.zone-poly.zone-full[b-v3rykgefk7] {
    opacity: 0.70;
    stroke-dasharray: 4 3;
}

/* ---------- HTML overlay layer ---------- */

.board-overlay[b-v3rykgefk7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ---- Zone overlays ---- */

.zone-overlay[b-v3rykgefk7] {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: default;
    padding: 2px 4px;
    box-sizing: border-box;
}

.zone-overlay.overlay-available[b-v3rykgefk7] {
    cursor: pointer;
}

/* ---- Zone name label ---- */

.zone-overlay-name[b-v3rykgefk7] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1;
    opacity: 1.0;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8);
}

.zone-overlay-name.player[b-v3rykgefk7] { color: rgba(186, 220, 255, 1.0); }
.zone-overlay-name.enemy[b-v3rykgefk7]  { color: rgba(255, 180, 180, 1.0); }

/* ---- YOU badge ---- */

.zone-you-badge[b-v3rykgefk7] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #fde68a;
    background: rgba(251, 191, 36, 0.20);
    border: 1px solid rgba(251, 191, 36, 0.65);
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ---- Token row ---- */

.zone-tokens[b-v3rykgefk7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

/* ---- Base token ---- */

.token[b-v3rykgefk7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(100, 116, 139, 0.50);
    background: rgba(10, 15, 28, 0.92);
    padding: 0;
    cursor: default;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.token .material-icons[b-v3rykgefk7] {
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

/* Player token */
.token.player-token[b-v3rykgefk7] {
    border-color: rgba(59, 130, 246, 0.80);
    color: rgba(147, 197, 253, 1.0);
}

/* Enemy token */
.token.enemy-token[b-v3rykgefk7] {
    border-color: rgba(239, 68, 68, 0.80);
    color: rgba(252, 165, 165, 1.0);
    cursor: pointer;
}

.token.enemy-token:hover[b-v3rykgefk7] {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.45), 0 0 10px rgba(239, 68, 68, 0.30);
}

/* Selected enemy */
.token.token-selected[b-v3rykgefk7] {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.50);
}

/* Active combatant (current turn) */
.token.token-active[b-v3rykgefk7] {
    border-color: #fbbf24;
    animation: tokenActivePulse-b-v3rykgefk7 1.5s ease-in-out infinite;
}

@keyframes tokenActivePulse-b-v3rykgefk7 {
    0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.50); }
    50%       { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.70), 0 0 12px rgba(251, 191, 36, 0.35); }
}

/* Defeated token */
.token.token-defeated[b-v3rykgefk7] {
    opacity: 0.28;
    border-color: rgba(100, 116, 139, 0.2);
    cursor: default;
}

.token.token-defeated .material-icons[b-v3rykgefk7] { color: rgba(100, 116, 139, 0.5); }

/* Overflow count */
.token-overflow[b-v3rykgefk7] {
    font-size: 11px;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.85);
    line-height: 1;
    padding: 0 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ---- Hazard pips ---- */

.zone-hazard-pips[b-v3rykgefk7] {
    display: flex;
    gap: 2px;
    justify-content: center;
    pointer-events: all;
}

.hazard-pip[b-v3rykgefk7] {
    font-size: 11px;
    line-height: 1;
}

.hazard-fire[b-v3rykgefk7]    { color: rgba(239, 68,  68,  0.90); }
.hazard-ice[b-v3rykgefk7]     { color: rgba(96,  165, 250, 0.90); }
.hazard-toxic[b-v3rykgefk7]   { color: rgba(163, 230, 53,  0.90); }
.hazard-blessed[b-v3rykgefk7] { color: rgba(74,  222, 128, 0.90); }
.hazard-arcane[b-v3rykgefk7]  { color: rgba(167, 139, 250, 0.90); }
.hazard-rubble[b-v3rykgefk7]  { color: rgba(156, 163, 175, 0.90); }
.hazard-dark[b-v3rykgefk7]    { color: rgba(100,  90, 160, 0.90); }

/* ---- Zone bonus description ---- */

.zone-overlay-bonus[b-v3rykgefk7] {
    font-size: 8px;
    color: rgba(148, 163, 184, 0.75);
    text-align: center;
    line-height: 1;
    pointer-events: none;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ---------- VFX canvas layer ---------- */

.board-vfx-canvas[b-v3rykgefk7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* ---------- Movement controls below the board ---------- */

/* Inherits .zone-movement-controls from combat-responsive.css */
/* /Components/Combat/ZoneBattlefieldHex.razor.rz.scp.css */
/* ==========================================================================
   ZoneBattlefieldHex — pointy-top hex grid board for desktop combat
   Desktop-only (mobile/tablet portrait remain on ZoneBattlefieldVertical).
   TODO: Add BoardSize.Small layout at 32px hex for landscape phone (M4 milestone)
   ========================================================================== */

/* ---------- Adventure waypoint info strip above the board ---------- */

.combat-adventure-info[b-nog2z1p06p] {
    margin-bottom: 10px;
}

/* ---------- Zoom viewport (clips zoomed board, captures wheel) ---------- */

.board-zoom-viewport[b-nog2z1p06p] {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.board-zoom-viewport.panning[b-nog2z1p06p] {
    cursor: grabbing;
}

/* ---------- Isometric perspective container ---------- */

.board-iso-container[b-nog2z1p06p] {
    perspective: 1100px;
    perspective-origin: 50% 15%;
    width: 100%;
    max-width: clamp(980px, 40vw, 1400px);
    margin: 0 auto;
    position: relative;
    transition: transform 0.15s ease-out;
    transform-origin: 50% 50%;
    will-change: transform;
}

/* Disable transition during active pan for instant visual feedback */
.board-zoom-viewport.panning .board-iso-container[b-nog2z1p06p] {
    transition: none;
}

/* ---------- Zoom controls ---------- */

.board-zoom-controls[b-nog2z1p06p] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 20;
}

.zoom-btn[b-nog2z1p06p] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(100, 90, 70, 0.25);
    background: rgba(20, 18, 14, 0.85);
    color: rgba(200, 190, 170, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
    backdrop-filter: blur(6px);
}

.zoom-btn:hover[b-nog2z1p06p] {
    background: rgba(40, 36, 28, 0.9);
    border-color: rgba(140, 130, 100, 0.4);
}

.zoom-btn .material-icons[b-nog2z1p06p] {
    font-size: 18px;
    pointer-events: none;
}

/* ---------- Board outer wrapper (tilted in 3D) ---------- */

.board-hex-wrapper[b-nog2z1p06p] {
    position: relative;
    width: 100%;
    max-height: 100%;
    border-radius: 14px;
    overflow: hidden;
    transform: rotateX(42deg);
    transform-origin: 50% 50%;
    will-change: transform;
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(30, 60, 28, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(80, 40, 20, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(18, 16, 12, 0.0) 40%, rgba(0, 0, 0, 0.5) 100%),
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.006) 0px,
            rgba(255, 255, 255, 0.006) 1px,
            transparent 1px,
            transparent 14px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.006) 0px,
            rgba(255, 255, 255, 0.006) 1px,
            transparent 1px,
            transparent 14px
        ),
        linear-gradient(160deg, #1a1810 0%, #14120c 40%, #161210 60%, #181410 100%);
    border: 1px solid rgba(90, 80, 60, 0.15);
    box-shadow:
        0 0 0 1px rgba(90, 80, 60, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        inset 0 0 60px rgba(0, 0, 0, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 32px 64px rgba(0, 0, 0, 0.8);
}

/* ---------- SVG hex grid layer ---------- */

.board-hex-svg[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ---- Hex cell base ---- */

.hex-cell[b-nog2z1p06p] {
    fill: rgb(34, 32, 28);
    stroke: rgba(100, 90, 70, 0.16);
    stroke-width: 0.6;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
    transition: fill 0.2s ease, stroke 0.2s ease, filter 0.2s ease;
    pointer-events: all;
    cursor: default;
}

/* Side tints */
.hex-cell.player-zone[b-nog2z1p06p] {
    fill: rgb(28, 42, 28);
    stroke: rgba(80, 120, 70, 0.12);
}
.hex-cell.enemy-zone[b-nog2z1p06p] {
    fill: rgb(50, 34, 24);
    stroke: rgba(140, 90, 50, 0.12);
}

/* Zone-type tints */
.hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(34, 52, 32); }
.hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(58, 38, 26); }
.hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(26, 40, 26); }
.hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(46, 32, 22); }
.hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(22, 34, 22); }
.hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(38, 26, 18); }

/* ---- Zone states ---- */

.hex-cell.zone-current[b-nog2z1p06p] {
    fill: rgb(36, 58, 30);
    stroke: rgba(120, 190, 90, 0.50);
    stroke-width: 0.9;
    filter: url(#zone-glow);
}

.hex-cell.zone-available[b-nog2z1p06p] {
    fill: rgb(48, 44, 22);
    stroke: rgba(200, 170, 60, 0.45);
    stroke-width: 0.8;
    filter: url(#zone-glow);
    animation: hexAvailablePulse-b-nog2z1p06p 1.8s ease-in-out infinite;
    cursor: pointer;
}

@keyframes hexAvailablePulse-b-nog2z1p06p {
    0%, 100% { stroke-opacity: 0.40; }
    50%       { stroke-opacity: 0.65; fill: rgb(52, 48, 26); }
}

.hex-cell.zone-pending[b-nog2z1p06p] {
    fill: rgb(26, 52, 30);
    stroke: rgba(100, 180, 80, 0.50);
    stroke-width: 0.9;
    filter: url(#zone-glow);
}

.hex-cell.zone-full[b-nog2z1p06p] {
    opacity: 0.65;
    stroke-dasharray: 3 3;
}

/* ---- Barrier hexes ---- */

.hex-cell.hex-barrier[b-nog2z1p06p] {
    fill: rgb(46, 42, 38);
    stroke: rgba(120, 110, 95, 0.20);
    stroke-width: 0.6;
    animation: barrierPulse-b-nog2z1p06p 3.0s ease-in-out infinite;
    cursor: default;
    pointer-events: none;
}

/* Barrier hex is reachable this turn — make it clickable */
.hex-cell.hex-barrier.hex-movable-free[b-nog2z1p06p] {
    pointer-events: all;
    cursor: pointer;
    animation: hexMovablePulse-b-nog2z1p06p 1.6s ease-in-out infinite;
}

@keyframes barrierPulse-b-nog2z1p06p {
    0%, 100% { fill: rgb(46, 42, 38); stroke-opacity: 0.20; }
    50%       { fill: rgb(54, 50, 44); stroke-opacity: 0.35; }
}

/* ---- Hazard hex overlays ---- */

.hex-cell.hex-hazard[b-nog2z1p06p] { animation: hazardFlicker-b-nog2z1p06p 1.6s ease-in-out infinite; }

.hex-cell.hex-hazard-fire[b-nog2z1p06p]    { fill: rgb(120, 32, 22);   stroke: rgba(255, 100,  40, 0.65); stroke-width: 1.2; }
.hex-cell.hex-hazard-ice[b-nog2z1p06p]     { fill: rgb(22,  55, 110);  stroke: rgba(120, 190, 255, 0.60); stroke-width: 1.2; }
.hex-cell.hex-hazard-toxic[b-nog2z1p06p]   { fill: rgb(44,  80, 14);   stroke: rgba(140, 230,  50, 0.60); stroke-width: 1.2; }
.hex-cell.hex-hazard-blessed[b-nog2z1p06p] { fill: rgb(22,  72, 40);   stroke: rgba(100, 240, 150, 0.55); stroke-width: 1.2; }
.hex-cell.hex-hazard-arcane[b-nog2z1p06p]  { fill: rgb(62,  30, 110);  stroke: rgba(180, 140, 255, 0.60); stroke-width: 1.2; }
.hex-cell.hex-hazard-rubble[b-nog2z1p06p]  { fill: rgb(58,  54, 48);   stroke: rgba(170, 165, 150, 0.45); stroke-width: 1.0; }
.hex-cell.hex-hazard-dark[b-nog2z1p06p]    { fill: rgb(22,  18, 48);   stroke: rgba(90,  70,  160, 0.55); stroke-width: 1.2; }

@keyframes hazardFlicker-b-nog2z1p06p {
    0%, 100% { filter: brightness(0.85); }
    50%       { filter: brightness(1.25); }
}

/* ---- Side-face hazard tinting (elevated hexes glow on walls) ---- */

.hex-side-face.side-hex-hazard-fire[b-nog2z1p06p]    { fill: rgb(100, 22, 14); }
.hex-side-face.side-hex-hazard-ice[b-nog2z1p06p]     { fill: rgb(14, 38, 90);  }
.hex-side-face.side-hex-hazard-toxic[b-nog2z1p06p]   { fill: rgb(32, 60, 10);  }
.hex-side-face.side-hex-hazard-blessed[b-nog2z1p06p] { fill: rgb(14, 54, 30);  }
.hex-side-face.side-hex-hazard-arcane[b-nog2z1p06p]  { fill: rgb(48, 24, 88);  }
.hex-side-face.side-hex-hazard-rubble[b-nog2z1p06p]  { fill: rgb(44, 42, 38);  }
.hex-side-face.side-hex-hazard-dark[b-nog2z1p06p]    { fill: rgb(16, 12, 38);  }

/* ---- Movable hex highlights (shown during player's turn) ---- */

/* Within-zone free reposition: golden-amber tint + pulsing stroke */
.hex-cell.hex-movable-free[b-nog2z1p06p] {
    fill: rgb(46, 42, 22);
    stroke: rgba(200, 170, 60, 0.50);
    stroke-width: 0.9;
    animation: hexMovablePulse-b-nog2z1p06p 1.6s ease-in-out infinite;
    cursor: pointer;
}

/* Adjacent-zone move destination: warm green tint + pulsing stroke */
.hex-cell.hex-movable-zone[b-nog2z1p06p] {
    fill: rgb(28, 50, 24);
    stroke: rgba(120, 190, 80, 0.50);
    stroke-width: 0.8;
    animation: hexMovablePulse-b-nog2z1p06p 1.6s ease-in-out infinite;
    cursor: pointer;
}

@keyframes hexMovablePulse-b-nog2z1p06p {
    0%, 100% { stroke-opacity: 0.45; filter: brightness(1.0); }
    50%       { stroke-opacity: 0.80; filter: brightness(1.12); }
}

/* ---- Attackable hex highlight (enemy hexes with in-range targets) ---- */

.hex-cell.hex-attackable[b-nog2z1p06p] {
    stroke: rgba(220, 120, 40, 0.55);
    stroke-width: 1.0;
    filter: url(#zone-glow);
}

/* ---- Out-of-range enemy token ---- */

.token.hex-out-of-range[b-nog2z1p06p] {
    opacity: 0.45;
    filter: grayscale(60%);
}

/* ---- Board side labels (HTML, float above the tilted board) ---- */

.board-side-labels[b-nog2z1p06p] {
    position: absolute;
    top: -22px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 12%;
    box-sizing: border-box;
    z-index: 5;
}

.board-side-label[b-nog2z1p06p] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}

.board-side-label-player[b-nog2z1p06p] { color: rgba(140, 190, 130, 1.0); }
.board-side-label-enemy[b-nog2z1p06p]  { color: rgba(210, 160, 110, 1.0); }

/* ---------- Token standee layer ---------- */
/* Separate from board-hex-wrapper so preserve-3d can propagate without conflicting with overflow:hidden */

.board-token-layer[b-nog2z1p06p] {
    position: absolute;
    inset: 0;
    transform: rotateX(42deg);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}

/* ---------- HTML overlay layer ---------- */

.board-overlay[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* ---- Per-hex token anchor — positioned at hex center, stays on the board plane ---- */

.hex-token-anchor[b-nog2z1p06p] {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Slide animation: Blazor patches left/top when position changes */
    transition: left 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top  0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

/* ---- Oval base — flat on the board surface (no counter-rotation) ---- */

.token-base[b-nog2z1p06p] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.20) 60%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.token-base.base-player[b-nog2z1p06p] {
    background: radial-gradient(ellipse, rgba(30, 70, 160, 0.40) 0%, rgba(30, 70, 160, 0.12) 55%, transparent 100%);
}

.token-base.base-enemy[b-nog2z1p06p] {
    background: radial-gradient(ellipse, rgba(160, 40, 40, 0.40) 0%, rgba(160, 40, 40, 0.12) 55%, transparent 100%);
}

.token-base.base-active[b-nog2z1p06p] {
    background: radial-gradient(ellipse, rgba(200, 160, 40, 0.50) 0%, rgba(200, 160, 40, 0.15) 55%, transparent 100%);
    animation: basePulse-b-nog2z1p06p 1.5s ease-in-out infinite;
}

@keyframes basePulse-b-nog2z1p06p {
    0%, 100% { transform: translateX(-50%) scale(1.0); opacity: 0.8; }
    50%      { transform: translateX(-50%) scale(1.15); opacity: 1.0; }
}

.token-base.base-defeated[b-nog2z1p06p] {
    opacity: 0.15;
}

/* ---- Card container — counter-rotates to face the viewer ---- */

/* ---- Zone click overlay (for zone-move selection) ---- */

.hex-zone-click-overlay[b-nog2z1p06p] {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: all;
    cursor: pointer;
    border-radius: 4px;
    background: transparent;
}

.hex-zone-click-overlay.overlay-available[b-nog2z1p06p] {
    background: rgba(200, 170, 60, 0.06);
}

/* ---- Card container — counter-rotates to face the viewer ---- */

.token-card[b-nog2z1p06p] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotateX(-42deg);
    transform-origin: 50% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.token-card.card-defeated[b-nog2z1p06p] {
    opacity: 0.30;
}

/* ---- Base token — portrait-oriented rounded rect card ---- */

.token[b-nog2z1p06p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 54px;
    border-radius: 5px;
    border: 2px solid rgba(100, 116, 139, 0.45);
    background: linear-gradient(180deg, rgba(36, 34, 28, 0.92) 0%, rgba(18, 16, 12, 0.97) 100%);
    padding: 0;
    cursor: default;
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
    pointer-events: all;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7),
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.token .material-icons[b-nog2z1p06p] {
    font-size: 24px;
    line-height: 1;
    pointer-events: none;
}

/* Portrait token — image fills the card */
.token.token-portrait[b-nog2z1p06p] {
    background-size: cover;
    background-position: center 20%;
    background-color: rgba(10, 15, 28, 0.92);
}

/* Player token */
.token.player-token[b-nog2z1p06p] {
    border-color: rgba(59, 130, 246, 0.70);
    color: rgba(147, 197, 253, 1.0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7),
                0 0 12px rgba(59, 130, 246, 0.10),
                inset 0 1px 0 rgba(147, 197, 253, 0.10),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Enemy token */
.token.enemy-token[b-nog2z1p06p] {
    border-color: rgba(239, 68, 68, 0.70);
    color: rgba(252, 165, 165, 1.0);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7),
                0 0 12px rgba(239, 68, 68, 0.10),
                inset 0 1px 0 rgba(252, 165, 165, 0.08),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.token.enemy-token:hover[b-nog2z1p06p] {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35),
                0 0 16px rgba(239, 68, 68, 0.18),
                0 4px 12px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(252, 165, 165, 0.12);
}

/* Selected enemy */
.token.token-selected[b-nog2z1p06p] {
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.50),
                0 0 12px rgba(251, 191, 36, 0.15),
                inset 0 1px 0 rgba(251, 191, 36, 0.12);
}

/* Active combatant (current turn) */
.token.token-active[b-nog2z1p06p] {
    border-color: #fbbf24;
    animation: tokenActivePulse-b-nog2z1p06p 1.5s ease-in-out infinite;
}

@keyframes tokenActivePulse-b-nog2z1p06p {
    0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.50), inset 0 1px 0 rgba(251, 191, 36, 0.10); }
    50%       { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.65), 0 0 14px rgba(251, 191, 36, 0.30), inset 0 1px 0 rgba(251, 191, 36, 0.15); }
}

/* Defeated token */
.token.token-defeated[b-nog2z1p06p] {
    opacity: 0.35;
    border-color: rgba(100, 116, 139, 0.2);
    cursor: default;
    filter: grayscale(0.6);
}

.token.token-defeated .material-icons[b-nog2z1p06p] { color: rgba(100, 116, 139, 0.5); }

/* ======================================================
   MOBILE RESPONSIVE — scale tokens and UI for mobile viewports
   ====================================================== */

/* Tablet and mobile portrait (max-width: 1024px) — aggressive scaling */
@media (max-width: 1024px) {
    /* Scale tokens to 30% on tablet/mobile to fit smaller hex cells */
    .token[b-nog2z1p06p] {
        width: 13px;
        height: 16px;
    }

    .token .material-icons[b-nog2z1p06p] {
        font-size: 8px;
    }

    /* Scale token base proportionally */
    .token-base[b-nog2z1p06p] {
        width: 11px;
        height: 3px;
    }

    /* Scale mini HP bar */
    .token-hp-bar[b-nog2z1p06p] {
        width: 11px;
        height: 1px;
    }

    /* Scale boss tokens proportionally */
    .boss-token-anchor .token-base[b-nog2z1p06p] {
        width: 13px;
        height: 4px;
    }

    .boss-token-anchor .token[b-nog2z1p06p] {
        width: 16px;
        height: 20px;
    }

    .boss-token-anchor .token .material-icons[b-nog2z1p06p] {
        font-size: 9px;
    }

    .boss-token-anchor .token-hp-bar[b-nog2z1p06p] {
        width: 15px;
    }

    /* Scale status effect pips */
    .token-status-pips[b-nog2z1p06p] {
        gap: 0.5px;
        margin-bottom: 0.5px;
    }

    .status-pip[b-nog2z1p06p] {
        width: 6px;
        height: 6px;
    }

    .status-pip .material-icons[b-nog2z1p06p] {
        font-size: 4px;
    }
}

/* Mobile-only (max-width: 768px) — maximum scaling down */
@media (max-width: 768px) {
    /* Scale tokens to 25% on small mobile screens */
    .token[b-nog2z1p06p] {
        width: 10px;
        height: 13px;
    }

    .token .material-icons[b-nog2z1p06p] {
        font-size: 7px;
    }

    /* Scale token base proportionally */
    .token-base[b-nog2z1p06p] {
        width: 9px;
        height: 3px;
    }

    /* Scale mini HP bar */
    .token-hp-bar[b-nog2z1p06p] {
        width: 10px;
        height: 1px;
    }

    /* Scale boss tokens proportionally */
    .boss-token-anchor .token-base[b-nog2z1p06p] {
        width: 11px;
        height: 3px;
    }

    .boss-token-anchor .token[b-nog2z1p06p] {
        width: 13px;
        height: 16px;
    }

    .boss-token-anchor .token .material-icons[b-nog2z1p06p] {
        font-size: 7px;
    }

    .boss-token-anchor .token-hp-bar[b-nog2z1p06p] {
        width: 12px;
    }

    /* Scale status effect pips */
    .token-status-pips[b-nog2z1p06p] {
        gap: 0.5px;
        margin-bottom: 0.5px;
    }

    .status-pip[b-nog2z1p06p] {
        width: 5px;
        height: 5px;
    }

    .status-pip .material-icons[b-nog2z1p06p] {
        font-size: 3px;
    }

    /* Hide desktop zoom controls on mobile, show only touch controls */
    .board-zoom-controls[b-nog2z1p06p] {
        display: none !important;
    }

    .board-touch-controls[b-nog2z1p06p] {
        display: flex !important;
        position: absolute;
        bottom: 12px;
        right: 12px;
        flex-direction: column;
        gap: 4px;
        z-index: 20;
    }

    .touch-ctrl-btn[b-nog2z1p06p] {
        width: 28px;
        height: 28px;
        border-radius: 5px;
        border: 1px solid rgba(100, 90, 70, 0.25);
        background: rgba(20, 18, 14, 0.85);
        color: rgba(200, 190, 170, 0.85);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background 0.15s ease, border-color 0.15s ease;
        backdrop-filter: blur(6px);
    }

    .touch-ctrl-btn:hover[b-nog2z1p06p] {
        background: rgba(40, 36, 28, 0.9);
        border-color: rgba(140, 130, 100, 0.4);
    }

    .touch-ctrl-btn .material-icons[b-nog2z1p06p] {
        font-size: 16px;
        pointer-events: none;
    }
}

/* ---------- VFX canvas layer ---------- */

.board-vfx-canvas[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* ---------- Movement hint below the board ---------- */

/* Inherits .zone-movement-hint from combat-responsive.css */

/* ======================================================
   COMBAT FLOATIES — floating numbers over hex tokens
   ====================================================== */

@keyframes floatie-up-b-nog2z1p06p {
    0%   { opacity: 1;   transform: translate(-50%, -50%) scale(1);    }
    15%  { opacity: 1;   transform: translate(-50%, -120%) scale(1.15); }
    100% { opacity: 0;   transform: translate(-50%, -260%) scale(0.9); }
}

@keyframes floatie-crit-b-nog2z1p06p {
    0%   { opacity: 1;   transform: translate(-50%, -50%) scale(1.3);   }
    10%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.0) rotate(-4deg); }
    20%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.2) rotate(4deg);  }
    30%  { opacity: 1;   transform: translate(-50%, -110%) scale(1.3); }
    100% { opacity: 0;   transform: translate(-50%, -280%) scale(0.85); }
}

.combat-floatie[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.6);
    z-index: 20;
    animation: floatie-up-b-nog2z1p06p 1.4s ease-out forwards;
}

.combat-floatie.floatie-damage[b-nog2z1p06p] {
    color: #f87171;
}

.combat-floatie.floatie-crit[b-nog2z1p06p] {
    color: #fbbf24;
    font-size: 1.05rem;
    animation: floatie-crit-b-nog2z1p06p 1.4s ease-out forwards;
}

.combat-floatie.floatie-heal[b-nog2z1p06p] {
    color: #4ade80;
}

/* Miss — grey, slides sideways */
@keyframes floatie-miss-b-nog2z1p06p {
    0%   { opacity: 1;   transform: translate(-50%, -50%) scale(0.9);    }
    20%  { opacity: 1;   transform: translate(-30%, -100%) scale(1.05);  }
    100% { opacity: 0;   transform: translate(-10%, -200%) scale(0.8);   }
}

.combat-floatie.floatie-miss[b-nog2z1p06p] {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.8rem;
    animation: floatie-miss-b-nog2z1p06p 1.2s ease-out forwards;
}

/* Dodge — teal, quick zip */
.combat-floatie.floatie-dodge[b-nog2z1p06p] {
    color: #67e8f9;
    font-style: italic;
    font-size: 0.8rem;
    animation: floatie-miss-b-nog2z1p06p 1.2s ease-out forwards;
}

/* Block — amber, solid feel */
.combat-floatie.floatie-block[b-nog2z1p06p] {
    color: #fbbf24;
    font-weight: 800;
    font-size: 0.8rem;
    animation: floatie-up-b-nog2z1p06p 1.2s ease-out forwards;
}

/* Damage scale — additive font-size multipliers */
.combat-floatie.floatie-scale-small[b-nog2z1p06p] {
    font-size: 0.75rem;
}

.combat-floatie.floatie-scale-medium[b-nog2z1p06p] {
    font-size: 0.85rem;
}

.combat-floatie.floatie-scale-large[b-nog2z1p06p] {
    font-size: 1.05rem;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 12px rgba(248, 113, 113, 0.4);
}

.combat-floatie.floatie-scale-massive[b-nog2z1p06p] {
    font-size: 1.25rem;
    text-shadow: 0 2px 8px rgba(0,0,0,1), 0 0 16px rgba(248, 113, 113, 0.6);
}

/* ======================================================
   TOKEN FLASH — brief glow on hit/heal/crit
   ====================================================== */

@keyframes token-flash-damage-anim-b-nog2z1p06p {
    0%   { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); filter: brightness(1);   }
    20%  { box-shadow: 0 0 14px 6px rgba(248, 113, 113, 0.85); filter: brightness(1.5); }
    100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); filter: brightness(1);   }
}

@keyframes token-flash-crit-anim-b-nog2z1p06p {
    0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);  filter: brightness(1);   }
    15%  { box-shadow: 0 0 20px 10px rgba(251, 191, 36, 1); filter: brightness(2.0); }
    35%  { box-shadow: 0 0 8px 4px rgba(251, 191, 36, 0.6);  filter: brightness(1.6); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);  filter: brightness(1);   }
}

@keyframes token-flash-heal-anim-b-nog2z1p06p {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);  filter: brightness(1);   }
    20%  { box-shadow: 0 0 14px 6px rgba(74, 222, 128, 0.8); filter: brightness(1.4); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);  filter: brightness(1);   }
}

.token.token-flash-damage[b-nog2z1p06p] {
    animation: token-flash-damage-anim-b-nog2z1p06p 0.7s ease-out forwards;
}

.token.token-flash-crit[b-nog2z1p06p] {
    animation: token-flash-crit-anim-b-nog2z1p06p 0.8s ease-out forwards;
}

.token.token-flash-heal[b-nog2z1p06p] {
    animation: token-flash-heal-anim-b-nog2z1p06p 0.7s ease-out forwards;
}

/* Miss flash — brief grey shimmer */
@keyframes token-flash-miss-anim-b-nog2z1p06p {
    0%   { box-shadow: 0 0 0 0 rgba(148, 163, 184, 0);  filter: brightness(1);   }
    20%  { box-shadow: 0 0 10px 4px rgba(148, 163, 184, 0.5); filter: brightness(1.2); }
    100% { box-shadow: 0 0 0 0 rgba(148, 163, 184, 0);  filter: brightness(1);   }
}

.token.token-flash-miss[b-nog2z1p06p] {
    animation: token-flash-miss-anim-b-nog2z1p06p 0.5s ease-out forwards;
}

/* ======================================================
   MINI HP BARS — thin bar flush at bottom of the card
   ====================================================== */

.token-hp-bar[b-nog2z1p06p] {
    width: 38px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: rgba(0, 0, 0, 0.65);
    overflow: hidden;
    pointer-events: none;
    margin-top: -3px;
    z-index: 12;
}

.token-hp-fill[b-nog2z1p06p] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease-out, background-color 0.3s ease;
}

.token-hp-fill.hp-high[b-nog2z1p06p] { background: linear-gradient(90deg, #22c55e, #4ade80); }
.token-hp-fill.hp-mid[b-nog2z1p06p]  { background: linear-gradient(90deg, #eab308, #facc15); }
.token-hp-fill.hp-low[b-nog2z1p06p]  { background: linear-gradient(90deg, #dc2626, #f87171); }

.token-hp-bar.hp-player[b-nog2z1p06p] { border-left: 1px solid rgba(59, 130, 246, 0.25); border-right: 1px solid rgba(59, 130, 246, 0.25); }
.token-hp-bar.hp-enemy[b-nog2z1p06p]  { border-left: 1px solid rgba(239, 68, 68, 0.25); border-right: 1px solid rgba(239, 68, 68, 0.25); }

/* ======================================================
   STATUS EFFECT PIPS — icon indicators above the card
   ====================================================== */

.token-status-pips[b-nog2z1p06p] {
    display: flex;
    gap: 2px;
    pointer-events: none;
    z-index: 15;
    white-space: nowrap;
    margin-bottom: 2px;
    justify-content: center;
}

.status-pip[b-nog2z1p06p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    pointer-events: all;
    cursor: help;
    animation: statusPipPulse-b-nog2z1p06p 2.5s ease-in-out infinite;
}

.status-pip .material-icons[b-nog2z1p06p] {
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
}

/* Buff — green tint */
.status-pip.status-pip-buff[b-nog2z1p06p] {
    background: rgba(34, 197, 94, 0.25);
    border: 1px solid rgba(34, 197, 94, 0.55);
    color: #4ade80;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.3);
}

/* Debuff — red tint */
.status-pip.status-pip-debuff[b-nog2z1p06p] {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid rgba(239, 68, 68, 0.55);
    color: #f87171;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.3);
}

/* DoT — orange tint */
.status-pip.status-pip-dot[b-nog2z1p06p] {
    background: rgba(234, 179, 8, 0.25);
    border: 1px solid rgba(234, 179, 8, 0.55);
    color: #fbbf24;
    box-shadow: 0 0 4px rgba(234, 179, 8, 0.3);
}

/* CC — purple tint */
.status-pip.status-pip-cc[b-nog2z1p06p] {
    background: rgba(168, 85, 247, 0.25);
    border: 1px solid rgba(168, 85, 247, 0.55);
    color: #c084fc;
    box-shadow: 0 0 4px rgba(168, 85, 247, 0.3);
}

/* Overflow badge (+N) */
.status-pip.status-pip-overflow[b-nog2z1p06p] {
    background: rgba(148, 163, 184, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: #94a3b8;
    font-size: 8px;
    font-weight: 700;
    width: auto;
    padding: 0 3px;
}

@keyframes statusPipPulse-b-nog2z1p06p {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1.0; }
}

/* ======================================================
   BOSS ENCOUNTER — larger card + crown + board vignette
   ====================================================== */

.boss-token-anchor .token-base[b-nog2z1p06p] {
    width: 44px;
    height: 14px;
}

.boss-token-anchor .token[b-nog2z1p06p] {
    width: 52px;
    height: 66px;
}

.boss-token-anchor .token .material-icons[b-nog2z1p06p] {
    font-size: 28px;
}

.token.token-boss[b-nog2z1p06p] {
    border-width: 3px;
    border-color: rgba(200, 50, 30, 0.80);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25),
                0 0 18px rgba(239, 68, 68, 0.18),
                0 4px 16px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 200, 100, 0.10);
}

.token.token-boss[b-nog2z1p06p]::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M12 0L16 7L24 7L18 12L20 18L12 14L4 18L6 12L0 7L8 7Z' fill='%23fbbf24'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
    z-index: 5;
}

.boss-token-anchor .token-hp-bar[b-nog2z1p06p] {
    width: 48px;
}

/* ======================================================
   HEX HOVER STATES — interactive feedback on hex cells
   ====================================================== */

.hex-cell:hover[b-nog2z1p06p] {
    filter: brightness(1.20);
    stroke: rgba(200, 190, 160, 0.30);
    stroke-width: 0.8;
}

.hex-cell.hex-movable-free:hover[b-nog2z1p06p] {
    filter: brightness(1.30);
    stroke: rgba(200, 170, 60, 0.70);
    stroke-width: 1.2;
}

.hex-cell.hex-attackable:hover[b-nog2z1p06p] {
    filter: brightness(1.25);
    stroke: rgba(220, 120, 40, 0.75);
    stroke-width: 1.3;
}

.hex-cell.hex-barrier:hover[b-nog2z1p06p] {
    filter: brightness(1.15);
}

/* Disable hover effects on touch devices */
@media (hover: none) {
    .hex-cell:hover[b-nog2z1p06p] {
        filter: none;
        stroke: rgba(100, 90, 70, 0.10);
        stroke-width: 0.5;
    }
    .hex-cell.hex-movable-free:hover[b-nog2z1p06p] {
        filter: none;
    }
    .hex-cell.hex-attackable:hover[b-nog2z1p06p] {
        filter: none;
    }
}

/* ======================================================
   ACTIVE TURN SPOTLIGHT — hex glow for active combatant
   ====================================================== */

.token.token-active[b-nog2z1p06p] {
    transform: scale(1.06);
}

/* ======================================================
   ZONE BOUNDARY LINES — dashed lines between zone regions
   ====================================================== */

.zone-boundary-line[b-nog2z1p06p] {
    stroke: rgba(140, 130, 110, 0.12);
    stroke-width: 0.6;
    stroke-dasharray: 3 4;
    fill: none;
    pointer-events: none;
}

/* Active hex spotlight — subtle glow on the active combatant's hex */
.active-hex-spotlight[b-nog2z1p06p] {
    animation: spotlightPulse-b-nog2z1p06p 1.8s ease-in-out infinite;
}

@keyframes spotlightPulse-b-nog2z1p06p {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1.0; }
}

/* ======================================================
   PROJECTILE — animated attack from source → target
   ====================================================== */

.combat-projectile[b-nog2z1p06p] {
    position: absolute;
    pointer-events: none;
    z-index: 60;
    /* Start at source, animate to target */
    left: var(--from-x);
    top: var(--from-y);
    animation: projectile-fly-b-nog2z1p06p 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    /* Translate so the projectile is centred on the coordinate */
    transform: translate(-50%, -50%);
}

/* Per-category animation timing overrides */
.combat-projectile.proj-cat-melee[b-nog2z1p06p] {
    animation: projectile-fly-melee-b-nog2z1p06p 0.30s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.combat-projectile.proj-cat-ranged[b-nog2z1p06p] {
    animation: projectile-fly-b-nog2z1p06p 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.combat-projectile.proj-cat-spell[b-nog2z1p06p] {
    animation: projectile-fly-spell-b-nog2z1p06p 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.combat-projectile.proj-cat-monster[b-nog2z1p06p] {
    animation: projectile-fly-monster-b-nog2z1p06p 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

@keyframes projectile-fly-b-nog2z1p06p {
    0% {
        left: var(--from-x);
        top: var(--from-y);
        opacity: 1;
        filter: brightness(1.2);
    }
    80% {
        opacity: 1;
        filter: brightness(1.4);
    }
    100% {
        left: var(--to-x);
        top: var(--to-y);
        opacity: 0;
        filter: brightness(2);
    }
}

/* Melee: fast lunge, bright on impact */
@keyframes projectile-fly-melee-b-nog2z1p06p {
    0% {
        left: var(--from-x);
        top: var(--from-y);
        opacity: 1;
        filter: brightness(1.0);
        transform: translate(-50%, -50%) scale(0.8);
    }
    60% {
        opacity: 1;
        filter: brightness(1.8);
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        left: var(--to-x);
        top: var(--to-y);
        opacity: 0;
        filter: brightness(2.5);
        transform: translate(-50%, -50%) scale(1.4);
    }
}

/* Spell: slower arc with pulsing glow */
@keyframes projectile-fly-spell-b-nog2z1p06p {
    0% {
        left: var(--from-x);
        top: var(--from-y);
        opacity: 1;
        filter: brightness(1.3);
        transform: translate(-50%, -50%) scale(0.9);
    }
    40% {
        opacity: 1;
        filter: brightness(1.6);
        transform: translate(-50%, -50%) scale(1.15);
    }
    70% {
        opacity: 1;
        filter: brightness(1.3);
        transform: translate(-50%, -50%) scale(1.0);
    }
    100% {
        left: var(--to-x);
        top: var(--to-y);
        opacity: 0;
        filter: brightness(2.2);
        transform: translate(-50%, -50%) scale(1.3);
    }
}

/* Monster: aggressive fast lunge */
@keyframes projectile-fly-monster-b-nog2z1p06p {
    0% {
        left: var(--from-x);
        top: var(--from-y);
        opacity: 1;
        filter: brightness(1.0) saturate(1.4);
        transform: translate(-50%, -50%) scale(1.0);
    }
    50% {
        opacity: 1;
        filter: brightness(1.6) saturate(1.6);
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        left: var(--to-x);
        top: var(--to-y);
        opacity: 0;
        filter: brightness(2.0) saturate(1.0);
        transform: translate(-50%, -50%) scale(0.6);
    }
}

/* --- Projectile head (glowing orb shape) --- */
.projectile-head[b-nog2z1p06p] {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #fbbf24 50%, #d97706 100%);
    box-shadow: 0 0 12px 4px rgba(251, 191, 36, 0.7);
    transform: rotate(var(--angle));
    position: relative;
}

/* Comet trail behind projectile */
.projectile-head[b-nog2z1p06p]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 22px;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: linear-gradient(to left, rgba(251, 191, 36, 0.8), transparent);
    opacity: 0.9;
}

/* --- Per-style projectile head variants --- */

/* Slash — orange-gold oblong blade */
.proj-slash .projectile-head[b-nog2z1p06p] {
    width: 18px;
    height: 8px;
    border-radius: 40%;
    background: linear-gradient(135deg, #fff4e0 0%, #fbbf24 40%, #b45309 100%);
    box-shadow: 0 0 14px 5px rgba(251, 191, 36, 0.75);
}

.proj-slash .projectile-head[b-nog2z1p06p]::after {
    width: 16px;
    background: linear-gradient(to left, rgba(251, 191, 36, 0.7), transparent);
}

/* Arrow — small brown projectile */
.proj-arrow .projectile-head[b-nog2z1p06p] {
    width: 10px;
    height: 6px;
    border-radius: 2px 50% 50% 2px;
    background: linear-gradient(135deg, #fef3c7, #92400e);
    box-shadow: 0 0 8px 3px rgba(146, 64, 14, 0.5);
}

.proj-arrow .projectile-head[b-nog2z1p06p]::after {
    width: 24px;
    height: 2px;
    background: linear-gradient(to left, rgba(146, 64, 14, 0.6), transparent);
}

/* SpellOrb — large purple glow */
.proj-spell .projectile-head[b-nog2z1p06p] {
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at 35% 35%, #f0abfc 0%, #a855f7 45%, #6b21a8 100%);
    box-shadow: 0 0 18px 7px rgba(168, 85, 247, 0.7);
}

.proj-spell .projectile-head[b-nog2z1p06p]::after {
    width: 20px;
    height: 5px;
    background: linear-gradient(to left, rgba(168, 85, 247, 0.7), transparent);
}

/* ShadowBlade — dark violet */
.proj-shadow .projectile-head[b-nog2z1p06p] {
    width: 16px;
    height: 7px;
    border-radius: 40%;
    background: linear-gradient(135deg, #c4b5fd, #7c3aed, #312e81);
    box-shadow: 0 0 12px 5px rgba(124, 58, 237, 0.6);
}

.proj-shadow .projectile-head[b-nog2z1p06p]::after {
    width: 18px;
    background: linear-gradient(to left, rgba(124, 58, 237, 0.5), transparent);
}

/* HolyBeam — golden bright glow */
.proj-holy .projectile-head[b-nog2z1p06p] {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 35% 35%, #fff 10%, #fde68a 50%, #f59e0b 100%);
    box-shadow: 0 0 22px 9px rgba(245, 158, 11, 0.8);
}

.proj-holy .projectile-head[b-nog2z1p06p]::after {
    width: 26px;
    height: 6px;
    background: linear-gradient(to left, rgba(245, 158, 11, 0.8), transparent);
}

/* KiBlast — cyan-white energy */
.proj-ki .projectile-head[b-nog2z1p06p] {
    width: 13px;
    height: 13px;
    background: radial-gradient(circle at 35% 35%, #fff 15%, #67e8f9 50%, #0891b2 100%);
    box-shadow: 0 0 16px 6px rgba(103, 232, 249, 0.7);
}

.proj-ki .projectile-head[b-nog2z1p06p]::after {
    width: 18px;
    height: 4px;
    background: linear-gradient(to left, rgba(103, 232, 249, 0.7), transparent);
}

/* MusicWave — pink musical note wave */
.proj-music .projectile-head[b-nog2z1p06p] {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #f9a8d4 50%, #ec4899 100%);
    box-shadow: 0 0 14px 5px rgba(236, 72, 153, 0.6);
}

.proj-music .projectile-head[b-nog2z1p06p]::after {
    width: 16px;
    height: 4px;
    background: linear-gradient(to left, rgba(236, 72, 153, 0.6), transparent);
}

/* ClawSwipe — red slash */
.proj-claw .projectile-head[b-nog2z1p06p] {
    width: 16px;
    height: 7px;
    border-radius: 40%;
    background: linear-gradient(135deg, #fecaca, #ef4444, #7f1d1d);
    box-shadow: 0 0 14px 5px rgba(239, 68, 68, 0.7);
}

.proj-claw .projectile-head[b-nog2z1p06p]::after {
    width: 14px;
    background: linear-gradient(to left, rgba(239, 68, 68, 0.6), transparent);
}

/* Smash — heavy teal-white impact orb */
.proj-smash .projectile-head[b-nog2z1p06p] {
    width: 16px;
    height: 16px;
    border-radius: 30%;
    background: radial-gradient(circle at 40% 35%, #fff 10%, #94a3b8 45%, #475569 100%);
    box-shadow: 0 0 16px 6px rgba(148, 163, 184, 0.7);
}

.proj-smash .projectile-head[b-nog2z1p06p]::after {
    width: 12px;
    height: 6px;
    background: linear-gradient(to left, rgba(148, 163, 184, 0.6), transparent);
}

/* Thrust — narrow elongated spear jab */
.proj-thrust .projectile-head[b-nog2z1p06p] {
    width: 20px;
    height: 5px;
    border-radius: 2px 50% 50% 2px;
    background: linear-gradient(135deg, #e2e8f0, #64748b, #334155);
    box-shadow: 0 0 10px 4px rgba(100, 116, 139, 0.6);
}

.proj-thrust .projectile-head[b-nog2z1p06p]::after {
    width: 28px;
    height: 2px;
    background: linear-gradient(to left, rgba(100, 116, 139, 0.5), transparent);
}

/* Gunshot — bright yellow-white flash */
.proj-gunshot .projectile-head[b-nog2z1p06p] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #fff 30%, #fef08a 60%, #eab308 100%);
    box-shadow: 0 0 14px 6px rgba(234, 179, 8, 0.8);
}

.proj-gunshot .projectile-head[b-nog2z1p06p]::after {
    width: 30px;
    height: 2px;
    background: linear-gradient(to left, rgba(254, 240, 138, 0.9), transparent);
}

/* DarkBolt — ominous purple-black energy */
.proj-darkbolt .projectile-head[b-nog2z1p06p] {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 35% 35%, #a78bfa 0%, #6d28d9 45%, #1e1b4b 100%);
    box-shadow: 0 0 18px 7px rgba(109, 40, 217, 0.7);
}

.proj-darkbolt .projectile-head[b-nog2z1p06p]::after {
    width: 20px;
    height: 5px;
    background: linear-gradient(to left, rgba(109, 40, 217, 0.6), transparent);
}

/* FangStrike — green-tinged feral slash */
.proj-fang .projectile-head[b-nog2z1p06p] {
    width: 14px;
    height: 6px;
    border-radius: 40%;
    background: linear-gradient(135deg, #bbf7d0, #22c55e, #14532d);
    box-shadow: 0 0 12px 5px rgba(34, 197, 94, 0.6);
}

.proj-fang .projectile-head[b-nog2z1p06p]::after {
    width: 14px;
    background: linear-gradient(to left, rgba(34, 197, 94, 0.5), transparent);
}

/* ======================================================
   PARTICLES — scattered sparks that trail the projectile
   ====================================================== */

.particle[b-nog2z1p06p] {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 6px 2px rgba(251, 191, 36, 0.6);
    opacity: 0;
    pointer-events: none;
    top: 50%;
    left: 50%;
    animation: particle-scatter-b-nog2z1p06p 0.6s ease-out forwards;
}

@keyframes particle-scatter-b-nog2z1p06p {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.9;
    }
    60% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--px), var(--py)) scale(0);
        opacity: 0;
    }
}

/* Each particle scatters in a different direction with a stagger */
.particle.p1[b-nog2z1p06p] { --px: -12px; --py: -10px; animation-delay: 0.04s; }
.particle.p2[b-nog2z1p06p] { --px:  14px; --py:  -8px; animation-delay: 0.10s; }
.particle.p3[b-nog2z1p06p] { --px:  -8px; --py:  12px; animation-delay: 0.16s; }
.particle.p4[b-nog2z1p06p] { --px:  10px; --py:  10px; animation-delay: 0.22s; }
.particle.p5[b-nog2z1p06p] { --px: -16px; --py:   2px; animation-delay: 0.28s; }
.particle.p6[b-nog2z1p06p] { --px:  12px; --py:  -4px; animation-delay: 0.34s; }

/* Per-style particle colors */
.proj-slash .particle[b-nog2z1p06p]   { background: #fbbf24; box-shadow: 0 0 6px 2px rgba(251, 191, 36, 0.6); }
.proj-arrow .particle[b-nog2z1p06p]   { background: #a16207; box-shadow: 0 0 5px 2px rgba(161, 98, 7, 0.5); }
.proj-spell .particle[b-nog2z1p06p]   { background: #c084fc; box-shadow: 0 0 7px 3px rgba(192, 132, 252, 0.6); }
.proj-shadow .particle[b-nog2z1p06p]  { background: #a78bfa; box-shadow: 0 0 6px 2px rgba(167, 139, 250, 0.6); }
.proj-holy .particle[b-nog2z1p06p]    { background: #fde68a; box-shadow: 0 0 8px 3px rgba(253, 230, 138, 0.7); }
.proj-ki .particle[b-nog2z1p06p]      { background: #67e8f9; box-shadow: 0 0 7px 3px rgba(103, 232, 249, 0.6); }
.proj-music .particle[b-nog2z1p06p]   { background: #f9a8d4; box-shadow: 0 0 6px 2px rgba(249, 168, 212, 0.6); }
.proj-claw .particle[b-nog2z1p06p]    { background: #fca5a5; box-shadow: 0 0 6px 2px rgba(252, 165, 165, 0.6); }
.proj-smash .particle[b-nog2z1p06p]   { background: #cbd5e1; box-shadow: 0 0 6px 2px rgba(203, 213, 225, 0.6); }
.proj-thrust .particle[b-nog2z1p06p]  { background: #94a3b8; box-shadow: 0 0 5px 2px rgba(148, 163, 184, 0.5); }
.proj-gunshot .particle[b-nog2z1p06p] { background: #fef08a; box-shadow: 0 0 8px 3px rgba(254, 240, 138, 0.7); }
.proj-darkbolt .particle[b-nog2z1p06p] { background: #a78bfa; box-shadow: 0 0 7px 3px rgba(167, 139, 250, 0.6); }
.proj-fang .particle[b-nog2z1p06p]    { background: #86efac; box-shadow: 0 0 6px 2px rgba(134, 239, 172, 0.6); }

/* ======================================================
   ELEVATION — side faces + brightness tiers
   ====================================================== */

/* Side-face wall polygons (rendered below each elevated top face).
   Dark shadows beneath each hex create the tiled/stacked depth effect. */
.hex-side-face[b-nog2z1p06p] {
    pointer-events: none;
    stroke-width: 0.3;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
}

/* Player side wall — dark forest shadow beneath hex */
.hex-side-face.player-side[b-nog2z1p06p] {
    fill: rgb(8, 14, 8);
    stroke: rgba(30, 50, 25, 0.12);
}

/* Enemy side wall — dark earth shadow beneath hex */
.hex-side-face.enemy-side[b-nog2z1p06p] {
    fill: rgb(18, 10, 6);
    stroke: rgba(60, 30, 15, 0.12);
}

/* Barrier side wall — dark stone shadow beneath hex */
.hex-side-face.barrier-side[b-nog2z1p06p] {
    fill: rgb(16, 14, 12);
    stroke: rgba(50, 45, 35, 0.15);
}

/* Top-face brightness: higher elevation = brighter top surface (light from above) */
.hex-cell.hex-elevation-3[b-nog2z1p06p] { filter: brightness(1.30); }
.hex-cell.hex-elevation-2[b-nog2z1p06p] { filter: brightness(1.18); }
.hex-cell.hex-elevation-1[b-nog2z1p06p] { filter: brightness(1.08); }

/* ======================================================
   BIOME THEMES — per-biome hex palette overrides
   Applied via .biome-{name} on .board-hex-wrapper
   ====================================================== */

/* ---- Forest ---- */
.biome-forest[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(20, 60, 15, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(50, 70, 20, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(12, 18, 8, 0.0) 40%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(160deg, #12180c 0%, #0e140a 40%, #101608 60%, #141a0c 100%) !important;
    border-color: rgba(60, 90, 40, 0.15) !important;
}
.biome-forest .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(22, 42, 18); }
.biome-forest .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(38, 44, 18); }
.biome-forest .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(28, 52, 22); }
.biome-forest .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(44, 50, 22); }
.biome-forest .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(20, 38, 16); }
.biome-forest .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(36, 40, 16); }
.biome-forest .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(16, 30, 14); }
.biome-forest .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(30, 34, 14); }
.biome-forest .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(6, 14, 4); }
.biome-forest .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 14, 4); }
.biome-forest .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(32, 40, 28); }
.biome-forest .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(10, 14, 8); }
.biome-forest .hex-cell[b-nog2z1p06p] { stroke: rgba(60, 110, 40, 0.18); stroke-width: 0.6; }

/* ---- Volcanic ---- */
.biome-volcanic[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(80, 30, 5, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(100, 20, 0, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(20, 8, 4, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #1a0e08 0%, #140a06 40%, #180c06 60%, #1c0e08 100%) !important;
    border-color: rgba(120, 50, 20, 0.18) !important;
}
.biome-volcanic .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(42, 22, 14); }
.biome-volcanic .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(56, 26, 12); }
.biome-volcanic .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(50, 28, 16); }
.biome-volcanic .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(64, 30, 14); }
.biome-volcanic .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(38, 20, 12); }
.biome-volcanic .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(50, 24, 10); }
.biome-volcanic .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(32, 16, 10); }
.biome-volcanic .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(42, 20, 8); }
.biome-volcanic .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(14, 6, 2); }
.biome-volcanic .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(20, 8, 2); }
.biome-volcanic .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(48, 22, 12); stroke: rgba(180, 80, 20, 0.20); }
.biome-volcanic .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(16, 6, 2); }
.biome-volcanic .hex-cell[b-nog2z1p06p] { stroke: rgba(180, 80, 20, 0.18); stroke-width: 0.6; }

/* ---- Underground ---- */
.biome-underground[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(20, 24, 40, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(30, 22, 15, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(10, 10, 12, 0.0) 40%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(160deg, #111014 0%, #0e0c10 40%, #100e12 60%, #121014 100%) !important;
    border-color: rgba(60, 55, 70, 0.15) !important;
}
.biome-underground .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(26, 26, 34); }
.biome-underground .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(36, 30, 26); }
.biome-underground .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(30, 30, 40); }
.biome-underground .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(42, 34, 28); }
.biome-underground .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(24, 24, 30); }
.biome-underground .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(32, 28, 24); }
.biome-underground .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(20, 20, 26); }
.biome-underground .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(28, 24, 20); }
.biome-underground .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(6, 6, 10); }
.biome-underground .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(10, 8, 6); }
.biome-underground .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(34, 32, 36); }
.biome-underground .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(8, 8, 10); }
.biome-underground .hex-cell[b-nog2z1p06p] { stroke: rgba(80, 100, 160, 0.16); stroke-width: 0.6; }

/* ---- Mountain ---- */
.biome-mountain[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(40, 45, 50, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(50, 50, 55, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(14, 14, 16, 0.0) 40%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(160deg, #161618 0%, #121214 40%, #141416 60%, #181818 100%) !important;
    border-color: rgba(80, 80, 90, 0.15) !important;
}
.biome-mountain .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(30, 34, 36); }
.biome-mountain .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(38, 36, 32); }
.biome-mountain .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(36, 40, 42); }
.biome-mountain .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(44, 42, 36); }
.biome-mountain .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(28, 32, 34); }
.biome-mountain .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(34, 32, 28); }
.biome-mountain .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(24, 28, 30); }
.biome-mountain .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(30, 28, 24); }
.biome-mountain .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(8, 10, 12); }
.biome-mountain .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 10, 8); }
.biome-mountain .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(40, 40, 42); }
.biome-mountain .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(10, 10, 12); }
.biome-mountain .hex-cell[b-nog2z1p06p] { stroke: rgba(140, 150, 170, 0.16); stroke-width: 0.6; }

/* ---- Coastal ---- */
.biome-coastal[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(15, 35, 50, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(50, 40, 25, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(10, 14, 18, 0.0) 40%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(160deg, #0e1418 0%, #0c1014 40%, #0e1216 60%, #101618 100%) !important;
    border-color: rgba(50, 70, 90, 0.15) !important;
}
.biome-coastal .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(22, 32, 38); }
.biome-coastal .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(36, 32, 24); }
.biome-coastal .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(26, 38, 44); }
.biome-coastal .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(42, 36, 26); }
.biome-coastal .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(20, 28, 34); }
.biome-coastal .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(32, 28, 22); }
.biome-coastal .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(18, 24, 30); }
.biome-coastal .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(28, 24, 18); }
.biome-coastal .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(4, 8, 12); }
.biome-coastal .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 10, 6); }
.biome-coastal .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(30, 36, 40); }
.biome-coastal .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(6, 10, 14); }
.biome-coastal .hex-cell[b-nog2z1p06p] { stroke: rgba(80, 150, 200, 0.16); stroke-width: 0.6; }

/* ---- Urban ---- */
.biome-urban[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(40, 30, 15, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(30, 25, 20, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(14, 12, 10, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #16140e 0%, #12100c 40%, #14120e 60%, #181610 100%) !important;
    border-color: rgba(80, 70, 50, 0.15) !important;
}
.biome-urban .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(30, 28, 22); }
.biome-urban .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(38, 34, 26); }
.biome-urban .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(36, 34, 26); }
.biome-urban .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(44, 38, 28); }
.biome-urban .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(28, 26, 20); }
.biome-urban .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(34, 30, 22); }
.biome-urban .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(24, 22, 18); }
.biome-urban .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(30, 26, 20); }
.biome-urban .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(8, 6, 4); }
.biome-urban .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 10, 6); }
.biome-urban .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(40, 36, 30); stroke: rgba(100, 90, 60, 0.18); }
.biome-urban .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(10, 8, 6); }
.biome-urban .hex-cell[b-nog2z1p06p] { stroke: rgba(140, 130, 100, 0.18); stroke-width: 0.6; }

/* ---- FeyForest ---- */
.biome-feyforest[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(40, 20, 60, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(15, 50, 45, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(12, 10, 18, 0.0) 40%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(160deg, #140e1a 0%, #100c16 40%, #120e18 60%, #16101c 100%) !important;
    border-color: rgba(80, 50, 100, 0.15) !important;
}
.biome-feyforest .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(24, 28, 34); }
.biome-feyforest .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(34, 24, 38); }
.biome-feyforest .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(28, 34, 40); }
.biome-feyforest .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(40, 28, 44); }
.biome-feyforest .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(22, 26, 30); }
.biome-feyforest .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(30, 22, 34); }
.biome-feyforest .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(18, 22, 26); }
.biome-feyforest .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(26, 18, 30); }
.biome-feyforest .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(6, 8, 12); }
.biome-feyforest .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(10, 6, 14); }
.biome-feyforest .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(30, 28, 38); }
.biome-feyforest .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(8, 6, 12); }
.biome-feyforest .hex-cell[b-nog2z1p06p] { stroke: rgba(120, 80, 180, 0.18); stroke-width: 0.6; }

/* ---- Ruins ---- */
.biome-ruins[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(40, 24, 60, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(30, 28, 40, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(12, 10, 16, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #141018 0%, #100e14 40%, #121016 60%, #16121a 100%) !important;
    border-color: rgba(70, 50, 90, 0.15) !important;
}
.biome-ruins .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(28, 26, 36); }
.biome-ruins .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(36, 28, 38); }
.biome-ruins .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(34, 30, 42); }
.biome-ruins .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(42, 32, 44); }
.biome-ruins .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(26, 24, 32); }
.biome-ruins .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(32, 26, 34); }
.biome-ruins .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(22, 20, 28); }
.biome-ruins .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(28, 22, 30); }
.biome-ruins .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(8, 6, 12); }
.biome-ruins .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 8, 14); }
.biome-ruins .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(36, 32, 42); stroke: rgba(120, 80, 160, 0.18); }
.biome-ruins .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(10, 8, 14); }
.biome-ruins .hex-cell[b-nog2z1p06p] { stroke: rgba(120, 80, 160, 0.16); stroke-width: 0.6; }

/* ---- Undead ---- */
.biome-undead[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(30, 35, 30, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(40, 38, 35, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(14, 14, 14, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #161614 0%, #121210 40%, #141412 60%, #181816 100%) !important;
    border-color: rgba(80, 80, 70, 0.15) !important;
}
.biome-undead .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(30, 32, 28); }
.biome-undead .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(36, 34, 30); }
.biome-undead .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(36, 38, 32); }
.biome-undead .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(42, 38, 34); }
.biome-undead .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(28, 30, 26); }
.biome-undead .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(32, 30, 28); }
.biome-undead .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(24, 26, 22); }
.biome-undead .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(28, 26, 24); }
.biome-undead .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(8, 10, 6); }
.biome-undead .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 10, 8); }
.biome-undead .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(38, 38, 36); }
.biome-undead .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(10, 10, 8); }
.biome-undead .hex-cell[b-nog2z1p06p] { stroke: rgba(160, 170, 140, 0.15); stroke-width: 0.6; }

/* ---- Demonic ---- */
.biome-demonic[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(80, 10, 10, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(60, 5, 20, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(16, 6, 6, 0.0) 40%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(160deg, #1a0808 0%, #140606 40%, #160808 60%, #1c0a0a 100%) !important;
    border-color: rgba(120, 30, 30, 0.18) !important;
}
.biome-demonic .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(36, 18, 18); }
.biome-demonic .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(48, 16, 16); }
.biome-demonic .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(42, 22, 22); }
.biome-demonic .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(56, 20, 18); }
.biome-demonic .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(32, 16, 16); }
.biome-demonic .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(42, 14, 14); }
.biome-demonic .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(28, 14, 14); }
.biome-demonic .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(36, 12, 12); }
.biome-demonic .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(12, 4, 4); }
.biome-demonic .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(18, 4, 4); }
.biome-demonic .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(44, 18, 16); stroke: rgba(180, 40, 30, 0.20); }
.biome-demonic .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(14, 4, 4); }
.biome-demonic .hex-cell[b-nog2z1p06p] { stroke: rgba(180, 40, 30, 0.18); stroke-width: 0.6; }

/* ---- Swamp ---- */
.biome-swamp[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(30, 50, 20, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(40, 35, 15, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(12, 14, 8, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #14160c 0%, #10120a 40%, #12140a 60%, #16180c 100%) !important;
    border-color: rgba(60, 70, 40, 0.15) !important;
}
.biome-swamp .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(24, 34, 18); }
.biome-swamp .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(36, 34, 16); }
.biome-swamp .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(28, 40, 20); }
.biome-swamp .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(42, 38, 18); }
.biome-swamp .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(22, 30, 16); }
.biome-swamp .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(32, 30, 14); }
.biome-swamp .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(18, 26, 14); }
.biome-swamp .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(28, 26, 12); }
.biome-swamp .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(6, 12, 4); }
.biome-swamp .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 10, 4); }
.biome-swamp .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(32, 38, 24); }
.biome-swamp .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(8, 12, 6); }
.biome-swamp .hex-cell[b-nog2z1p06p] { stroke: rgba(80, 100, 40, 0.16); stroke-width: 0.6; }

/* ----- Ice — frozen tundra, frost giant lairs, ice caves ----- */
.biome-ice[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(80, 140, 200, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(100, 160, 220, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(10, 14, 20, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #0c1018 0%, #0e1420 40%, #101824 60%, #0c1420 100%) !important;
    border-color: rgba(100, 160, 220, 0.12) !important;
}
.biome-ice .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(22, 36, 50); }
.biome-ice .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(24, 30, 44); }
.biome-ice .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(26, 42, 58); }
.biome-ice .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(28, 34, 50); }
.biome-ice .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(20, 32, 46); }
.biome-ice .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(22, 28, 40); }
.biome-ice .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(16, 26, 38); }
.biome-ice .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(18, 24, 34); }
.biome-ice .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(6, 12, 20); }
.biome-ice .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(8, 10, 18); }
.biome-ice .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(30, 50, 68); }
.biome-ice .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(8, 16, 24); }
.biome-ice .hex-cell[b-nog2z1p06p] { stroke: rgba(120, 190, 255, 0.20); stroke-width: 0.6; }

/* ----- Ice barrier pulse ----- */
.biome-ice .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseIce-b-nog2z1p06p 3.0s ease-in-out infinite;
}
@keyframes barrierPulseIce-b-nog2z1p06p {
    0%, 100% { fill: rgb(30, 50, 68); stroke: rgba(120, 180, 240, 0.15); }
    50%      { fill: rgb(36, 60, 80); stroke: rgba(140, 200, 255, 0.35); }
}

/* ----- Biome-themed barrier pulse animations ----- */
.biome-volcanic .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseVolcanic-b-nog2z1p06p 3.0s ease-in-out infinite;
}
@keyframes barrierPulseVolcanic-b-nog2z1p06p {
    0%, 100% { fill: rgb(48, 22, 12); stroke: rgba(180, 80, 20, 0.20); }
    50%      { fill: rgb(60, 28, 14); stroke: rgba(220, 100, 30, 0.40); }
}

.biome-demonic .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseDemonic-b-nog2z1p06p 3.0s ease-in-out infinite;
}
@keyframes barrierPulseDemonic-b-nog2z1p06p {
    0%, 100% { fill: rgb(44, 18, 16); stroke: rgba(180, 40, 30, 0.20); }
    50%      { fill: rgb(56, 24, 20); stroke: rgba(220, 50, 40, 0.40); }
}

.biome-feyforest .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseFey-b-nog2z1p06p 4.0s ease-in-out infinite;
}
@keyframes barrierPulseFey-b-nog2z1p06p {
    0%, 100% { fill: rgb(30, 28, 38); stroke: rgba(160, 100, 200, 0.18); }
    50%      { fill: rgb(36, 32, 48); stroke: rgba(180, 120, 220, 0.35); }
}

.biome-ruins .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseRuins-b-nog2z1p06p 3.5s ease-in-out infinite;
}
@keyframes barrierPulseRuins-b-nog2z1p06p {
    0%, 100% { fill: rgb(36, 32, 42); stroke: rgba(120, 80, 160, 0.18); }
    50%      { fill: rgb(42, 36, 52); stroke: rgba(150, 100, 200, 0.35); }
}

.biome-underground .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseUnderground-b-nog2z1p06p 3.5s ease-in-out infinite;
}
@keyframes barrierPulseUnderground-b-nog2z1p06p {
    0%, 100% { fill: rgb(34, 32, 36); stroke: rgba(60, 80, 120, 0.18); }
    50%      { fill: rgb(40, 38, 46); stroke: rgba(80, 110, 160, 0.30); }
}

.biome-undead .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseUndead-b-nog2z1p06p 4.0s ease-in-out infinite;
}
@keyframes barrierPulseUndead-b-nog2z1p06p {
    0%, 100% { fill: rgb(38, 38, 36); stroke: rgba(100, 100, 80, 0.18); }
    50%      { fill: rgb(48, 48, 44); stroke: rgba(140, 140, 100, 0.30); }
}

/* ======================================================
   MOBILE & TABLET TOUCH OPTIMIZATIONS
   ====================================================== */

/* Prevent browser default pinch-zoom / scroll on the board */
.board-zoom-viewport[b-nog2z1p06p] {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    overscroll-behavior: contain;
}

/* ---- Mobile token sizing (44px min touch target) ---- */
@media (max-width: 767px) {
    .board-iso-container[b-nog2z1p06p] {
        max-width: 100% !important;
    }

    /* Reduce isometric tilt on mobile for easier reading */
    .board-hex-wrapper[b-nog2z1p06p] {
        transform: rotateX(32deg);
    }

    .board-token-layer[b-nog2z1p06p] {
        transform: rotateX(32deg);
    }

    /* Card container: match mobile tilt */
    .token-card[b-nog2z1p06p] {
        transform: translateX(-50%) rotateX(-32deg);
    }

    /* Token cards: compact for mobile — visual size scaled to board rendering */
    .token[b-nog2z1p06p] {
        width: 26px !important;
        height: 34px !important;
        min-width: unset;
        min-height: unset;
        border-width: 1.5px;
        border-radius: 4px;
    }

    /* Enemy tokens are <button> — extend touch target without growing the visual card */
    button.token.enemy-token[b-nog2z1p06p] {
        min-width: 44px;
        min-height: 44px;
        border-width: 2px;
    }

    .token .material-icons[b-nog2z1p06p] {
        font-size: 14px !important;
    }

    /* Base: smaller on mobile */
    .token-base[b-nog2z1p06p] {
        width: 22px;
        height: 8px;
    }

    /* Selected token: extra-visible ring on mobile */
    .token.token-selected[b-nog2z1p06p] {
        box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.60), 0 0 16px rgba(251, 191, 36, 0.30);
    }

    /* Active combatant: bigger pulse on mobile */
    .token.token-active[b-nog2z1p06p] {
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.55);
    }

    /* Pet companion: smaller on mobile */
    .pet-companion-token[b-nog2z1p06p] {
        width: 18px;
        height: 18px;
        right: -10px;
        top: 6px;
    }

    /* Board side labels: smaller on mobile */
    .board-side-labels[b-nog2z1p06p] {
        top: -16px;
        padding: 0 6%;
    }

    .board-side-label[b-nog2z1p06p] {
        font-size: 8px;
        letter-spacing: 0.08em;
    }

    /* Floatie text: slightly larger for readability */
    .combat-floatie[b-nog2z1p06p] {
        font-size: 0.9rem;
    }

    .combat-floatie.floatie-crit[b-nog2z1p06p] {
        font-size: 1.1rem;
    }

    /* HP bars: scaled to smaller token */
    .token-hp-bar[b-nog2z1p06p] {
        width: 22px;
        height: 2px;
    }

    .boss-token-anchor .token-hp-bar[b-nog2z1p06p] {
        width: 28px;
    }

    /* Status pips: smaller on mobile */
    .token-status-pips[b-nog2z1p06p] {
        margin-bottom: 1px;
    }

    .status-pip[b-nog2z1p06p] {
        width: 10px;
        height: 10px;
    }

    .status-pip .material-icons[b-nog2z1p06p] {
        font-size: 7px;
    }

    .status-pip.status-pip-overflow[b-nog2z1p06p] {
        font-size: 6px;
    }

    /* Boss token: slightly larger than normal but still compact */
    .boss-token-anchor .token[b-nog2z1p06p] {
        width: 32px !important;
        height: 42px !important;
        min-width: 44px;
        min-height: 44px;
    }

    .boss-token-anchor .token-base[b-nog2z1p06p] {
        width: 28px;
    }

    .boss-token-anchor .token .material-icons[b-nog2z1p06p] {
        font-size: 16px !important;
    }
}

/* ---- Mobile zoom controls: horizontal bar, larger touch targets ---- */
@media (max-width: 767px) {
    .board-zoom-controls[b-nog2z1p06p] {
        flex-direction: row;
        bottom: 8px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        gap: 6px;
        background: rgba(10, 8, 6, 0.85);
        backdrop-filter: blur(8px);
        padding: 4px 8px;
        border-radius: 20px;
        border: 1px solid rgba(100, 90, 70, 0.20);
    }

    .zoom-btn[b-nog2z1p06p] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        min-width: 44px;
        min-height: 44px;
    }

    .zoom-btn .material-icons[b-nog2z1p06p] {
        font-size: 20px;
    }
}

/* ---- Mobile zoom level badge ---- */
.board-zoom-badge[b-nog2z1p06p] {
    display: none;
}

@media (max-width: 1199px) {
    .board-zoom-badge[b-nog2z1p06p] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: rgba(200, 190, 170, 0.75);
        min-width: 32px;
        white-space: nowrap;
        letter-spacing: 0.02em;
    }
}

/* ---- Mobile extra controls (center, fit-all) ---- */
.board-touch-controls[b-nog2z1p06p] {
    display: none;
}

@media (max-width: 1199px) {
    .board-touch-controls[b-nog2z1p06p] {
        display: flex;
        position: absolute;
        bottom: 8px;
        left: 12px;
        gap: 6px;
        z-index: 20;
    }

    .touch-ctrl-btn[b-nog2z1p06p] {
        width: 40px;
        height: 40px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(100, 90, 70, 0.25);
        background: rgba(20, 18, 14, 0.85);
        color: rgba(200, 190, 170, 0.85);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        backdrop-filter: blur(6px);
        transition: background 0.15s ease, border-color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .touch-ctrl-btn:active[b-nog2z1p06p] {
        background: rgba(50, 46, 38, 0.95);
        border-color: rgba(180, 170, 140, 0.4);
    }

    .touch-ctrl-btn .material-icons[b-nog2z1p06p] {
        font-size: 20px;
        pointer-events: none;
    }
}

/* ---- Tablet: moderate adjustments ---- */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Slightly reduced tilt for better touch interaction */
    .board-hex-wrapper[b-nog2z1p06p] {
        transform: rotateX(36deg);
    }

    .board-token-layer[b-nog2z1p06p] {
        transform: rotateX(36deg);
    }

    /* Card container: match tablet tilt */
    .token-card[b-nog2z1p06p] {
        transform: translateX(-50%) rotateX(-36deg);
    }

    .token[b-nog2z1p06p] {
        width: 30px !important;
        height: 40px !important;
        min-width: unset;
        min-height: unset;
    }

    button.token.enemy-token[b-nog2z1p06p] {
        min-width: 44px;
        min-height: 44px;
    }

    .token .material-icons[b-nog2z1p06p] {
        font-size: 16px !important;
    }

    .token-base[b-nog2z1p06p] {
        width: 26px;
        height: 9px;
    }

    .board-zoom-controls[b-nog2z1p06p] {
        flex-direction: row;
        bottom: 10px;
        right: 12px;
        gap: 4px;
        background: rgba(10, 8, 6, 0.80);
        backdrop-filter: blur(8px);
        padding: 4px 6px;
        border-radius: 16px;
        border: 1px solid rgba(100, 90, 70, 0.20);
    }

    .zoom-btn[b-nog2z1p06p] {
        width: 36px;
        height: 36px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Pet companion: slightly smaller on tablet */
    .pet-companion-token[b-nog2z1p06p] {
        width: 20px;
        height: 20px;
        right: -12px;
        top: 6px;
    }

    /* HP bar: slightly narrower */
    .token-hp-bar[b-nog2z1p06p] {
        width: 26px;
    }

    .boss-token-anchor .token-hp-bar[b-nog2z1p06p] {
        width: 34px;
    }

    /* Boss token: moderate card on tablet */
    .boss-token-anchor .token[b-nog2z1p06p] {
        width: 38px !important;
        height: 50px !important;
    }

    .boss-token-anchor .token-base[b-nog2z1p06p] {
        width: 32px;
    }

    .boss-token-anchor .token .material-icons[b-nog2z1p06p] {
        font-size: 20px !important;
    }
}

/* ---- Movement hint: mobile compact ---- */
@media (max-width: 767px) {
    .zone-movement-hint[b-nog2z1p06p] {
        padding: var(--space-xs, 4px) var(--space-sm, 8px);
        gap: var(--space-sm, 8px);
    }

    .movement-hint-text[b-nog2z1p06p] {
        font-size: 11px;
    }
}

/* ===== Pet Companion Token ===== */
.pet-companion-token[b-nog2z1p06p] {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center top;
    background-color: rgba(15,23,42,0.8);
    right: -14px;
    top: 8px;
    pointer-events: none;
    z-index: 5;
    border: 2px solid rgba(148,163,184,0.5);
    animation: petFloat-b-nog2z1p06p 3.5s ease-in-out infinite;
}

.pet-companion-token.rarity-common[b-nog2z1p06p] {
    border-color: rgba(148,163,184,0.6);
}

.pet-companion-token.rarity-uncommon[b-nog2z1p06p] {
    border-color: rgba(74,222,128,0.7);
    box-shadow: 0 0 4px rgba(74,222,128,0.4);
}

.pet-companion-token.rarity-rare[b-nog2z1p06p] {
    border-color: rgba(96,165,250,0.8);
    box-shadow: 0 0 5px rgba(96,165,250,0.5);
}

.pet-companion-token.rarity-epic[b-nog2z1p06p] {
    border-color: rgba(192,132,252,0.9);
    box-shadow: 0 0 6px rgba(192,132,252,0.5);
}

.pet-companion-token.rarity-legendary[b-nog2z1p06p] {
    border-color: gold;
    box-shadow: 0 0 6px 2px rgba(255,215,0,0.6);
    animation: petFloat-b-nog2z1p06p 3.5s ease-in-out infinite, petLegendaryGlow-b-nog2z1p06p 2s ease-in-out infinite;
}

@keyframes petFloat-b-nog2z1p06p {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}

@keyframes petLegendaryGlow-b-nog2z1p06p {
    0%, 100% { box-shadow: 0 0 6px 2px rgba(255,215,0,0.6); }
    50%       { box-shadow: 0 0 14px 5px rgba(255,215,0,0.9); }
}

/* ======================================================
   HEX TOUCH OVERLAYS — enlarged tap targets for mobile movement mode
   Invisible buttons positioned over movable hexes, sized for fingers.
   ====================================================== */

.hex-touch-overlay[b-nog2z1p06p] {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    pointer-events: all;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Visual ring inside the touch target — shows the hex is tappable */
.hex-touch-overlay-ring[b-nog2z1p06p] {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(200, 170, 60, 0.55);
    background: rgba(200, 170, 60, 0.08);
    pointer-events: none;
    animation: touchOverlayPulse-b-nog2z1p06p 1.4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(200, 170, 60, 0.2);
}

.hex-touch-overlay-ring.ring-attack[b-nog2z1p06p] {
    border-color: rgba(239, 68, 68, 0.60);
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
    animation: touchOverlayPulseAttack-b-nog2z1p06p 1.4s ease-in-out infinite;
}

@keyframes touchOverlayPulse-b-nog2z1p06p {
    0%, 100% {
        transform: scale(1.0);
        border-color: rgba(200, 170, 60, 0.55);
        box-shadow: 0 0 8px rgba(200, 170, 60, 0.2);
    }
    50% {
        transform: scale(1.12);
        border-color: rgba(200, 170, 60, 0.80);
        box-shadow: 0 0 14px rgba(200, 170, 60, 0.35);
    }
}

@keyframes touchOverlayPulseAttack-b-nog2z1p06p {
    0%, 100% {
        transform: scale(1.0);
        border-color: rgba(239, 68, 68, 0.60);
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
    }
    50% {
        transform: scale(1.12);
        border-color: rgba(239, 68, 68, 0.85);
        box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
    }
}

/* Active state: brief flash on tap */
.hex-touch-overlay:active .hex-touch-overlay-ring[b-nog2z1p06p] {
    transform: scale(0.90);
    border-color: rgba(255, 215, 0, 0.90);
    background: rgba(255, 215, 0, 0.15);
    transition: all 0.08s ease-out;
}

.hex-touch-overlay:active .hex-touch-overlay-ring.ring-attack[b-nog2z1p06p] {
    border-color: rgba(252, 165, 165, 0.90);
    background: rgba(252, 165, 165, 0.15);
}

/* Hide overlays on desktop — they are only for touch */
@media (hover: hover) and (pointer: fine) {
    .hex-touch-overlay[b-nog2z1p06p] {
        display: none !important;
    }
}

/* ======================================================
   MOVEMENT MODE — active button state + transition
   ====================================================== */

/* Active state for movement mode toggle button */
.touch-ctrl-btn.touch-ctrl-active[b-nog2z1p06p] {
    background: rgba(200, 170, 60, 0.20);
    border-color: rgba(200, 170, 60, 0.50);
    color: rgba(255, 215, 0, 0.95);
}

.touch-ctrl-btn.touch-ctrl-active:active[b-nog2z1p06p] {
    background: rgba(200, 170, 60, 0.35);
}

/* Smooth zoom transition for movement mode entry/exit */
.board-iso-container.movement-mode-transition[b-nog2z1p06p] {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ======================================================
   MOVEMENT MODE BANNER — "Tap a hex to move" indicator
   ====================================================== */

.movement-mode-banner[b-nog2z1p06p] {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(200, 170, 60, 0.15);
    border: 1px solid rgba(200, 170, 60, 0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 215, 0, 0.90);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
    animation: movementBannerFadeIn-b-nog2z1p06p 0.3s ease-out;
}

.movement-mode-banner .material-icons[b-nog2z1p06p] {
    font-size: 16px;
    opacity: 0.85;
}

@keyframes movementBannerFadeIn-b-nog2z1p06p {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* /Components/Combat/ZoneCard.razor.rz.scp.css */
/* ZoneCard component scoped styles */

/* ===== BASE ZONE CARD ===== */
.zone-card[b-dfw9jzecwk] {
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
    border-radius: 8px;
}

/* ===== COMPACT ZONE CARD (portrait tablet) ===== */
.zone-card-compact[b-dfw9jzecwk] {
    padding: 8px !important;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zone-compact-header[b-dfw9jzecwk] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.zone-compact-name[b-dfw9jzecwk] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.zone-compact-name.player[b-dfw9jzecwk] {
    color: rgba(59, 130, 246, 0.9);
}

.zone-compact-name.enemy[b-dfw9jzecwk] {
    color: rgba(239, 68, 68, 0.9);
}

.zone-compact-full[b-dfw9jzecwk] {
    font-size: 0.9rem;
    color: rgba(251, 191, 36, 0.9);
    line-height: 1;
}

.zone-compact-you[b-dfw9jzecwk] {
    font-size: 0.6rem;
    font-weight: 700;
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 3px;
    padding: 1px 4px;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zone-compact-occupants[b-dfw9jzecwk] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Touch-friendly occupant buttons — 40x40 min for tablet */
.zone-occ-btn[b-dfw9jzecwk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: rgba(0, 0, 0, 0.25);
    cursor: default;
    transition: all 0.15s ease;
    padding: 0;
}

.zone-occ-btn.enemy-occ[b-dfw9jzecwk] {
    border-color: rgba(239, 68, 68, 0.4);
    cursor: pointer;
}

.zone-occ-btn.enemy-occ:hover[b-dfw9jzecwk],
.zone-occ-btn.enemy-occ:active[b-dfw9jzecwk] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.8);
    transform: scale(1.05);
}

.zone-occ-btn.enemy-occ.selected[b-dfw9jzecwk] {
    border-color: #fb923c;
    background: rgba(251, 146, 60, 0.2);
    box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.4);
}

.zone-occ-btn.player-occ[b-dfw9jzecwk] {
    border-color: rgba(59, 130, 246, 0.4);
}

.zone-occ-more[b-dfw9jzecwk] {
    font-size: 0.65rem;
    color: rgba(148, 163, 184, 0.8);
    font-weight: 600;
}

.zone-compact-empty[b-dfw9jzecwk] {
    font-size: 0.75rem;
    color: rgba(100, 116, 139, 0.6);
    font-style: italic;
}

.zone-compact-hazards[b-dfw9jzecwk] {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}



/* ===== PLAYER SIDE — blue left border accent only ===== */
.zone-card.player-zone[b-dfw9jzecwk] {
    border-left: 3px solid var(--color-zone-player-accent) !important;
}

/* ===== ENEMY SIDE — red left border accent only ===== */
.zone-card.enemy-zone[b-dfw9jzecwk] {
    border-left: 3px solid var(--color-zone-enemy-accent) !important;
}

/* ===== ZONE TYPE THEMING (from landing page CombatShowcase) ===== */
.zone-card.zone-type-vanguard[b-dfw9jzecwk] {
    background: var(--color-zone-vanguard-bg) !important;
    border-color: var(--color-zone-vanguard-border);
}

.zone-card.zone-type-flank[b-dfw9jzecwk] {
    background: var(--color-zone-flank-bg) !important;
    border-color: var(--color-zone-flank-border);
}

.zone-card.zone-type-rear[b-dfw9jzecwk] {
    background: var(--color-zone-rear-bg) !important;
    border-color: var(--color-zone-rear-border);
}

/* Zone type text glow */
.zone-card.zone-type-vanguard .zone-header .mud-typography[b-dfw9jzecwk] { text-shadow: 0 0 8px rgba(239, 68, 68, 0.35); }
.zone-card.zone-type-flank .zone-header .mud-typography[b-dfw9jzecwk]   { text-shadow: 0 0 8px rgba(245, 158, 11, 0.35); }
.zone-card.zone-type-rear .zone-header .mud-typography[b-dfw9jzecwk]    { text-shadow: 0 0 8px rgba(59, 130, 246, 0.35); }

/* Zone hover lift — only on idle cards (not active/pending states) */
.zone-card:not(.current-player-zone):not(.available-move):not(.pending-move):not(.empty-zone):hover[b-dfw9jzecwk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ===== EMPTY ZONE — dimmed ===== */
.zone-card.empty-zone[b-dfw9jzecwk] {
    opacity: 0.55;
}

/* ===== ACTIVE MOVE STATES ===== */
.zone-card.current-player-zone[b-dfw9jzecwk] {
    opacity: 1;
}

.zone-card.available-move[b-dfw9jzecwk] {
    opacity: 1;
}
/* /Components/Friends/ActivityFeed.razor.rz.scp.css */
.activity-feed[b-fax3bfvfg4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Loading & Empty States */
.loading-state[b-fax3bfvfg4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

.spinner[b-fax3bfvfg4] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-fax3bfvfg4 0.8s linear infinite;
}

.spinner-small[b-fax3bfvfg4] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-hover);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-fax3bfvfg4 0.8s linear infinite;
}

@keyframes spin-b-fax3bfvfg4 {
    to { transform: rotate(360deg); }
}

.empty-state[b-fax3bfvfg4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.empty-state .material-icons[b-fax3bfvfg4] {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.empty-state p[b-fax3bfvfg4] {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin: 0;
    max-width: 500px;
}

.empty-hint[b-fax3bfvfg4] {
    color: var(--color-text-secondary) !important;
    font-size: 0.95rem !important;
}

/* Activity List */
.activity-list[b-fax3bfvfg4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-card[b-fax3bfvfg4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.activity-card:hover[b-fax3bfvfg4] {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--color-border-hover);
    transform: translateX(4px);
}

/* Activity Icon */
.activity-icon[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.05);
    flex-shrink: 0;
}

.activity-icon .material-icons[b-fax3bfvfg4] {
    font-size: 24px;
}

/* Activity Content */
.activity-content[b-fax3bfvfg4] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.activity-title[b-fax3bfvfg4] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.activity-description[b-fax3bfvfg4] {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.activity-meta[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.meta-item[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.meta-item .material-icons[b-fax3bfvfg4] {
    font-size: 1rem;
}

/* Activity Action */
.activity-action[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
}

.action-link[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-fax3bfvfg4] {
    background: var(--color-border-base);
    transform: scale(1.1);
}

.action-link .material-icons[b-fax3bfvfg4] {
    font-size: 1.25rem;
}

/* Activity Type Colors */
.activity-card.levelup[b-fax3bfvfg4] {
    border-left: 3px solid var(--color-info);
}

.activity-card.bossdefeat[b-fax3bfvfg4] {
    border-left: 3px solid var(--color-warning-bright);
}

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

.activity-card.achievement[b-fax3bfvfg4] {
    border-left: 3px solid var(--color-success);
}

.activity-card.newcharacter[b-fax3bfvfg4] {
    border-left: 3px solid var(--color-info-light);
}

.activity-card.adventurecomplete[b-fax3bfvfg4] {
    border-left: 3px solid var(--color-cleric);
}

/* Load More */
.load-more[b-fax3bfvfg4] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.btn-load-more[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-load-more:hover:not(:disabled)[b-fax3bfvfg4] {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}

.btn-load-more:disabled[b-fax3bfvfg4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-load-more .material-icons[b-fax3bfvfg4] {
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .activity-card[b-fax3bfvfg4] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .activity-action[b-fax3bfvfg4] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Quick-Join Button */
.quick-join-btn[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-join-btn:hover[b-fax3bfvfg4] {
    background: linear-gradient(135deg, var(--color-info-dark) 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.quick-join-btn .material-icons[b-fax3bfvfg4] {
    font-size: 1.125rem;
}

.join-text[b-fax3bfvfg4] {
    display: inline-block;
}

@media (max-width: 768px) {
    .join-text[b-fax3bfvfg4] {
        display: none;
    }
    
    .quick-join-btn[b-fax3bfvfg4] {
        padding: 0.5rem;
        min-width: 40px;
        justify-content: center;
    }
}

/* /Components/Friends/BlockedUsersList.razor.rz.scp.css */
.blocked-users-list[b-jc7zc9rvng] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Loading & Empty States */
.loading-state[b-jc7zc9rvng] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

.spinner[b-jc7zc9rvng] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-jc7zc9rvng 0.8s linear infinite;
}

@keyframes spin-b-jc7zc9rvng {
    to { transform: rotate(360deg); }
}

.empty-state[b-jc7zc9rvng] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.empty-state .material-icons[b-jc7zc9rvng] {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.empty-state p[b-jc7zc9rvng] {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin: 0;
    max-width: 500px;
}

.empty-hint[b-jc7zc9rvng] {
    color: var(--color-text-secondary) !important;
    font-size: 0.95rem !important;
}

/* Blocked List */
.blocked-list[b-jc7zc9rvng] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blocked-card[b-jc7zc9rvng] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-left: 3px solid var(--color-danger);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.blocked-card:hover[b-jc7zc9rvng] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Blocked Info */
.blocked-info[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.blocked-avatar[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.3);
    flex-shrink: 0;
}

.blocked-avatar .material-icons[b-jc7zc9rvng] {
    font-size: 24px;
    color: var(--color-danger-light);
}

.blocked-details[b-jc7zc9rvng] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.blocked-name[b-jc7zc9rvng] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.blocked-meta[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-danger-light);
    font-size: 0.875rem;
    margin: 0;
}

.blocked-meta .material-icons[b-jc7zc9rvng] {
    font-size: 1rem;
}

.blocked-reason[b-jc7zc9rvng] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
    font-style: italic;
}

/* Blocked Actions */
.blocked-actions[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
}

.btn-unblock[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    color: var(--color-success);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-unblock .material-icons[b-jc7zc9rvng] {
    font-size: 1.125rem;
}

.btn-unblock:hover[b-jc7zc9rvng] {
    background: rgba(34, 197, 94, 0.2);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .blocked-card[b-jc7zc9rvng] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
    }

    .blocked-info[b-jc7zc9rvng] {
        width: 100%;
    }

    .blocked-actions[b-jc7zc9rvng] {
        width: 100%;
        justify-content: flex-end;
    }

    .btn-unblock[b-jc7zc9rvng] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Friends/ConversationList.razor.rz.scp.css */
.conversation-list[b-bygb7wt996] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */
.list-header[b-bygb7wt996] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    flex-shrink: 0;
}

.list-header h3[b-bygb7wt996] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-refresh[b-bygb7wt996] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover[b-bygb7wt996] {
    background: var(--color-border-base);
    transform: rotate(90deg);
}

.btn-refresh .material-icons[b-bygb7wt996] {
    font-size: 1.25rem;
}

/* Search */
.search-box[b-bygb7wt996] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    flex-shrink: 0;
}

.search-box .material-icons[b-bygb7wt996] {
    color: var(--color-text-tertiary);
    font-size: 1.25rem;
}

.search-box input[b-bygb7wt996] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    outline: none;
}

.search-box input[b-bygb7wt996]::placeholder {
    color: var(--color-text-tertiary);
}

/* Conversations Scroll */
.conversations-scroll[b-bygb7wt996] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.conversations-scroll[b-bygb7wt996]::-webkit-scrollbar {
    width: 6px;
}

.conversations-scroll[b-bygb7wt996]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

.conversations-scroll[b-bygb7wt996]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

.conversations-scroll[b-bygb7wt996]::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}

/* Conversation Item */
.conversation-item[b-bygb7wt996] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.05);
    cursor: pointer;
    transition: all 0.15s ease;
}

.conversation-item:hover[b-bygb7wt996] {
    background: rgba(255, 215, 0, 0.05);
}

.conversation-item.active[b-bygb7wt996] {
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid var(--color-primary);
    padding-left: calc(1.5rem - 3px);
}

.conversation-item.unread[b-bygb7wt996] {
    background: rgba(59, 130, 246, 0.02);
}

/* Avatar */
.conversation-avatar[b-bygb7wt996] {
    position: relative;
    flex-shrink: 0;
}

.avatar-circle[b-bygb7wt996] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
}

.avatar-circle .material-icons[b-bygb7wt996] {
    font-size: 24px;
    color: var(--color-primary);
}

.avatar-circle.online[b-bygb7wt996]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: var(--color-success);
    border: 2px solid var(--color-gray-900);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.unread-badge[b-bygb7wt996] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: var(--color-info);
    border: 2px solid var(--color-gray-900);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Content */
.conversation-content[b-bygb7wt996] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.conversation-header[b-bygb7wt996] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.conversation-name[b-bygb7wt996] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time[b-bygb7wt996] {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.conversation-preview[b-bygb7wt996] {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item.unread .conversation-preview[b-bygb7wt996] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.you-label[b-bygb7wt996] {
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Empty List */
.empty-list[b-bygb7wt996] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-list .material-icons[b-bygb7wt996] {
    font-size: 3rem;
    color: var(--color-text-tertiary);
}

.empty-list p[b-bygb7wt996] {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin: 0;
}
/* /Components/Friends/FriendCard.razor.rz.scp.css */
.friend-card[b-wy5ztsoayb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.friend-card:hover[b-wy5ztsoayb] {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.friend-card.favorite[b-wy5ztsoayb] {
    border-color: var(--color-border-active);
    background: rgba(255, 215, 0, 0.02);
}

.friend-card.list[b-wy5ztsoayb] {
    padding: 1.25rem 1.5rem;
}

/* Friend Info */
.friend-info[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.friend-avatar[b-wy5ztsoayb] {
    position: relative;
    flex-shrink: 0;
}

.avatar-circle[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
}

.list .avatar-circle[b-wy5ztsoayb] {
    width: 48px;
    height: 48px;
}

.avatar-circle .material-icons[b-wy5ztsoayb] {
    font-size: 28px;
    color: var(--color-primary);
}

.status-dot[b-wy5ztsoayb] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-900);
}

.status-dot.online[b-wy5ztsoayb] {
    background: var(--color-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.status-dot.away[b-wy5ztsoayb] {
    background: var(--color-warning);
}

.status-dot.busy[b-wy5ztsoayb] {
    background: var(--color-danger);
}

.status-dot.offline[b-wy5ztsoayb] {
    background: var(--color-text-tertiary);
}

/* Friend Details */
.friend-details[b-wy5ztsoayb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.friend-header[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.friend-name[b-wy5ztsoayb] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-icon[b-wy5ztsoayb] {
    font-size: 1rem;
    color: var(--color-primary);
}

.muted-badge[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background: rgba(100, 116, 139, 0.2);
    border-radius: 4px;
}

.muted-badge .material-icons[b-wy5ztsoayb] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.friend-meta[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.status-text[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-text .material-icons[b-wy5ztsoayb] {
    font-size: 0.75rem;
}

.status-text.online[b-wy5ztsoayb] {
    color: var(--color-success);
}

.status-text.away[b-wy5ztsoayb] {
    color: var(--color-warning);
}

.status-text.busy[b-wy5ztsoayb] {
    color: var(--color-danger);
}

.status-text.offline[b-wy5ztsoayb] {
    color: var(--color-text-secondary);
}

.activity-text[b-wy5ztsoayb] {
    color: var(--color-text-light);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-stats[b-wy5ztsoayb] {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.25rem;
}

.stat-item[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.stat-item .material-icons[b-wy5ztsoayb] {
    font-size: 1rem;
}

/* Friend Actions */
.friend-actions[b-wy5ztsoayb] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.action-btn[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn .material-icons[b-wy5ztsoayb] {
    font-size: 1.25rem;
}

.list .action-btn span:not(.material-icons)[b-wy5ztsoayb] {
    display: inline;
    font-size: 0.875rem;
    font-weight: 500;
}

.list .action-btn[b-wy5ztsoayb] {
    width: auto;
    padding: 0 1rem;
}

.action-btn:hover[b-wy5ztsoayb] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-hover);
    color: var(--color-primary);
}

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

.action-btn.primary:hover[b-wy5ztsoayb] {
    background: var(--color-border-base);
}

.action-btn.active[b-wy5ztsoayb] {
    color: var(--color-primary);
}

/* Dropdown */
.dropdown[b-wy5ztsoayb] {
    position: relative;
}

.dropdown-toggle:focus + .dropdown-menu[b-wy5ztsoayb],
.dropdown-menu:hover[b-wy5ztsoayb] {
    display: block;
}

.dropdown-menu[b-wy5ztsoayb] {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 200px;
    padding: 0.5rem;
    background: var(--color-gray-800);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.dropdown-item[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-light);
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dropdown-item .material-icons[b-wy5ztsoayb] {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
}

.dropdown-item:hover[b-wy5ztsoayb] {
    background: rgba(255, 215, 0, 0.05);
    color: var(--color-primary);
}

.dropdown-item:hover .material-icons[b-wy5ztsoayb] {
    color: var(--color-primary);
}

.dropdown-item.danger:hover[b-wy5ztsoayb] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger-light);
}

.dropdown-item.danger:hover .material-icons[b-wy5ztsoayb] {
    color: var(--color-danger-light);
}

.dropdown-divider[b-wy5ztsoayb] {
    height: 1px;
    margin: 0.5rem 0;
    background: rgba(255, 215, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .friend-card[b-wy5ztsoayb] {
        flex-direction: column;
        align-items: flex-start;
    }

    .friend-info[b-wy5ztsoayb] {
        width: 100%;
    }

    .friend-actions[b-wy5ztsoayb] {
        width: 100%;
        justify-content: flex-end;
    }

    .list .action-btn[b-wy5ztsoayb] {
        width: 40px;
        padding: 0;
    }

    .list .action-btn span:not(.material-icons)[b-wy5ztsoayb] {
        display: none;
    }
}
/* /Components/Friends/FriendListView.razor.rz.scp.css */
.friend-list-view[b-m7pddgq47e] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* List Controls */
.list-controls[b-m7pddgq47e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.search-box[b-m7pddgq47e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    max-width: 400px;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
}

.search-box .material-icons[b-m7pddgq47e] {
    color: var(--color-text-tertiary);
    font-size: 1.25rem;
}

.search-box input[b-m7pddgq47e] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 1rem;
    outline: none;
}

.search-box input[b-m7pddgq47e]::placeholder {
    color: var(--color-text-tertiary);
}

.view-controls[b-m7pddgq47e] {
    display: flex;
    gap: 0.5rem;
}

.view-toggle[b-m7pddgq47e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle .material-icons[b-m7pddgq47e] {
    font-size: 1.25rem;
}

.view-toggle:hover[b-m7pddgq47e] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-hover);
}

.view-toggle.active[b-m7pddgq47e] {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-border-active);
    color: var(--color-primary);
}

/* Friends Container */
.friends-container[b-m7pddgq47e] {
    display: grid;
    gap: 1rem;
}

.friends-container.grid[b-m7pddgq47e] {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.friends-container.list[b-m7pddgq47e] {
    grid-template-columns: 1fr;
}

/* Empty State */
.empty-state[b-m7pddgq47e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.empty-state .material-icons[b-m7pddgq47e] {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.empty-state p[b-m7pddgq47e] {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin: 0;
}

.empty-hint[b-m7pddgq47e] {
    color: var(--color-text-secondary) !important;
    font-size: 0.95rem !important;
}

/* Responsive */
@media (max-width: 768px) {
    .list-controls[b-m7pddgq47e] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-box[b-m7pddgq47e] {
        max-width: 100%;
    }

    .friends-container.grid[b-m7pddgq47e] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Friends/FriendRequestList.razor.rz.scp.css */
.friend-request-list[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Loading State */
.loading-state[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

.spinner[b-yhg89t85ut] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-yhg89t85ut 0.8s linear infinite;
}

@keyframes spin-b-yhg89t85ut {
    to { transform: rotate(360deg); }
}

/* Request Section */
.request-section[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-title[b-yhg89t85ut] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.section-title .material-icons[b-yhg89t85ut] {
    font-size: 1.5rem;
}

.section-title .badge[b-yhg89t85ut] {
    background: var(--color-border-hover);
    color: var(--color-primary);
    padding: 0.125rem 0.625rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Request Cards */
.request-cards[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.request-card[b-yhg89t85ut] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.request-card:hover[b-yhg89t85ut] {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--color-border-hover);
}

.request-card.received[b-yhg89t85ut] {
    border-left: 3px solid var(--color-success);
}

.request-card.sent[b-yhg89t85ut] {
    border-left: 3px solid var(--color-info-light);
}

/* Request Info */
.request-info[b-yhg89t85ut] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.request-avatar[b-yhg89t85ut] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
    flex-shrink: 0;
}

.request-avatar .material-icons[b-yhg89t85ut] {
    font-size: 24px;
    color: var(--color-primary);
}

.request-details[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.request-name[b-yhg89t85ut] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.request-message[b-yhg89t85ut] {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.request-time[b-yhg89t85ut] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.request-time .material-icons[b-yhg89t85ut] {
    font-size: 1rem;
}

/* Request Actions */
.request-actions[b-yhg89t85ut] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.request-actions button[b-yhg89t85ut] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.request-actions .material-icons[b-yhg89t85ut] {
    font-size: 1.125rem;
}

.btn-accept[b-yhg89t85ut] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success);
}

.btn-accept:hover[b-yhg89t85ut] {
    background: rgba(34, 197, 94, 0.2);
    transform: translateY(-2px);
}

.btn-decline[b-yhg89t85ut] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger-light);
}

.btn-decline:hover[b-yhg89t85ut] {
    background: rgba(239, 68, 68, 0.2);
    transform: translateY(-2px);
}

.btn-cancel[b-yhg89t85ut] {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--color-text-secondary);
}

.btn-cancel:hover[b-yhg89t85ut] {
    background: rgba(100, 116, 139, 0.2);
    transform: translateY(-2px);
}

/* Empty State */
.empty-state[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.empty-state .material-icons[b-yhg89t85ut] {
    font-size: 3rem;
    color: var(--color-text-tertiary);
}

.empty-state p[b-yhg89t85ut] {
    color: var(--color-text-light);
    font-size: 1rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .request-card[b-yhg89t85ut] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
    }

    .request-info[b-yhg89t85ut] {
        width: 100%;
    }

    .request-actions[b-yhg89t85ut] {
        width: 100%;
        justify-content: flex-end;
    }

    .request-actions button[b-yhg89t85ut] {
        flex: 1;
    }
}
/* /Components/Friends/InviteFriendDialog.razor.rz.scp.css */
/* Dialog Overlay */
.dialog-overlay[b-l8bqg2k8av] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-l8bqg2k8av 0.2s ease;
}

@keyframes fadeIn-b-l8bqg2k8av {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dialog Container */
.dialog-container[b-l8bqg2k8av] {
    background: var(--color-gray-800);
    border: 1px solid var(--color-border-active);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-l8bqg2k8av 0.3s ease;
}

@keyframes slideUp-b-l8bqg2k8av {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dialog Header */
.dialog-header[b-l8bqg2k8av] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border-hover);
}

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

.close-btn[b-l8bqg2k8av] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.close-btn .material-icons[b-l8bqg2k8av] {
    font-size: 1.25rem;
}

/* Dialog Content */
.dialog-content[b-l8bqg2k8av] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.dialog-content[b-l8bqg2k8av]::-webkit-scrollbar {
    width: 6px;
}

.dialog-content[b-l8bqg2k8av]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

.dialog-content[b-l8bqg2k8av]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

/* Alerts */
.alert[b-l8bqg2k8av] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.alert .material-icons[b-l8bqg2k8av] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alert p[b-l8bqg2k8av] {
    margin: 0;
    line-height: 1.5;
}

.alert-hint[b-l8bqg2k8av] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 0.5rem !important;
}

.alert.error[b-l8bqg2k8av] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger-light);
}

.alert.error .material-icons[b-l8bqg2k8av] {
    color: var(--color-danger-light);
}

.alert.success[b-l8bqg2k8av] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success-light);
}

.alert.success .material-icons[b-l8bqg2k8av] {
    color: var(--color-success-light);
}

/* Form Groups */
.form-group[b-l8bqg2k8av] {
    margin-bottom: 1.5rem;
}

.form-group label[b-l8bqg2k8av] {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.form-group input[b-l8bqg2k8av],
.form-group textarea[b-l8bqg2k8av] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input:focus[b-l8bqg2k8av],
.form-group textarea:focus[b-l8bqg2k8av] {
    outline: none;
    border-color: var(--color-border-active);
    background: rgba(15, 23, 42, 0.8);
}

.form-group input:disabled[b-l8bqg2k8av],
.form-group textarea:disabled[b-l8bqg2k8av] {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-group textarea[b-l8bqg2k8av] {
    resize: vertical;
    min-height: 80px;
}

.form-hint[b-l8bqg2k8av] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0.375rem 0 0 0;
}

/* Dialog Actions */
.dialog-actions[b-l8bqg2k8av] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--color-border-hover);
}

.btn-primary[b-l8bqg2k8av],
.btn-secondary[b-l8bqg2k8av] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary .material-icons[b-l8bqg2k8av],
.btn-secondary .material-icons[b-l8bqg2k8av] {
    font-size: 1.125rem;
}

.btn-primary[b-l8bqg2k8av] {
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffed4e 100%);
    color: var(--color-gray-900);
}

.btn-primary:hover:not(:disabled)[b-l8bqg2k8av] {
    background: linear-gradient(135deg, #ffed4e 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-active);
}

.btn-primary:disabled[b-l8bqg2k8av] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-l8bqg2k8av] {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--color-text-light);
}

.btn-secondary:hover:not(:disabled)[b-l8bqg2k8av] {
    background: rgba(100, 116, 139, 0.3);
    border-color: rgba(100, 116, 139, 0.4);
}

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

/* Spinner */
.spinner-small[b-l8bqg2k8av] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(15, 23, 42, 0.3);
    border-top-color: var(--color-gray-900);
    border-radius: 50%;
    animation: spin-b-l8bqg2k8av 0.8s linear infinite;
}

@keyframes spin-b-l8bqg2k8av {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .dialog-container[b-l8bqg2k8av] {
        width: 95%;
        max-height: 95vh;
    }

    .dialog-header[b-l8bqg2k8av],
    .dialog-content[b-l8bqg2k8av],
    .dialog-actions[b-l8bqg2k8av] {
        padding: 1.25rem;
    }

    .dialog-actions[b-l8bqg2k8av] {
        flex-direction: column;
    }

    .btn-primary[b-l8bqg2k8av],
    .btn-secondary[b-l8bqg2k8av] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Friends/MessageInput.razor.rz.scp.css */
.message-input[b-n8d25k6q2v] {
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    padding: 1rem 1.5rem;
    flex-shrink: 0;
}

.input-wrapper[b-n8d25k6q2v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--color-border-hover);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    transition: all 0.2s ease;
}

.input-wrapper:focus-within[b-n8d25k6q2v] {
    border-color: var(--color-border-active);
    background: rgba(15, 23, 42, 0.6);
}

textarea[b-n8d25k6q2v] {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 0.975rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    resize: none;
    outline: none;
    min-height: 24px;
    max-height: 150px;
}

textarea[b-n8d25k6q2v]::placeholder {
    color: var(--color-text-tertiary);
}

textarea:disabled[b-n8d25k6q2v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-actions[b-n8d25k6q2v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.char-count[b-n8d25k6q2v] {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
}

.char-count.warning[b-n8d25k6q2v] {
    color: var(--color-warning);
    font-weight: 600;
}

.btn-send[b-n8d25k6q2v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffed4e 100%);
    border: none;
    border-radius: 8px;
    color: var(--color-gray-900);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-send:hover:not(:disabled)[b-n8d25k6q2v] {
    background: linear-gradient(135deg, #ffed4e 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-active);
}

.btn-send:active:not(:disabled)[b-n8d25k6q2v] {
    transform: translateY(0);
}

.btn-send:disabled[b-n8d25k6q2v] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn-send .material-icons[b-n8d25k6q2v] {
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .message-input[b-n8d25k6q2v] {
        padding: 0.875rem 1rem;
    }

    .input-wrapper[b-n8d25k6q2v] {
        padding: 0.75rem 0.875rem;
    }
}
/* /Components/Friends/MessageThread.razor.rz.scp.css */
.message-thread[b-yf47xgzeds] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Thread Header */
.thread-header[b-yf47xgzeds] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    flex-shrink: 0;
}

.header-info[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.friend-avatar[b-yf47xgzeds] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
    flex-shrink: 0;
}

.friend-avatar .material-icons[b-yf47xgzeds] {
    font-size: 24px;
    color: var(--color-primary);
}

.friend-avatar.online[b-yf47xgzeds]::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--color-success);
    border: 2px solid var(--color-gray-900);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.header-details[b-yf47xgzeds] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.friend-name[b-yf47xgzeds] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.friend-status[b-yf47xgzeds] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.status-indicator[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.status-indicator.online[b-yf47xgzeds] {
    color: var(--color-success);
}

.status-indicator .material-icons[b-yf47xgzeds] {
    font-size: 0.875rem;
}

.header-actions[b-yf47xgzeds] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover[b-yf47xgzeds] {
    background: var(--color-border-base);
}

.action-btn .material-icons[b-yf47xgzeds] {
    font-size: 1.25rem;
}

/* Messages Area */
.messages-area[b-yf47xgzeds] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.messages-area[b-yf47xgzeds]::-webkit-scrollbar {
    width: 6px;
}

.messages-area[b-yf47xgzeds]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

.messages-area[b-yf47xgzeds]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

.messages-area[b-yf47xgzeds]::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}

/* Loading & Empty States */
.loading-messages[b-yf47xgzeds],
.empty-messages[b-yf47xgzeds] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    flex: 1;
}

.spinner[b-yf47xgzeds] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-yf47xgzeds 0.8s linear infinite;
}

@keyframes spin-b-yf47xgzeds {
    to { transform: rotate(360deg); }
}

.empty-messages .material-icons[b-yf47xgzeds] {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.empty-messages p[b-yf47xgzeds] {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin: 0;
    text-align: center;
}

.empty-hint[b-yf47xgzeds] {
    color: var(--color-text-secondary) !important;
    font-size: 0.95rem !important;
}

/* Message Bubbles */
.message[b-yf47xgzeds] {
    display: flex;
    width: 100%;
}

.message.mine[b-yf47xgzeds] {
    justify-content: flex-end;
}

.message.theirs[b-yf47xgzeds] {
    justify-content: flex-start;
}

.message-bubble[b-yf47xgzeds] {
    max-width: 70%;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    position: relative;
}

.message.mine .message-bubble[b-yf47xgzeds] {
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffed4e 100%);
    color: var(--color-gray-900);
    border-bottom-right-radius: 4px;
}

.message.theirs .message-bubble[b-yf47xgzeds] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    color: var(--color-text-primary);
    border-bottom-left-radius: 4px;
}

.message-content[b-yf47xgzeds] {
    margin: 0;
    font-size: 0.975rem;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.message-meta[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.message-time[b-yf47xgzeds] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.message.mine .message-time[b-yf47xgzeds] {
    color: var(--color-gray-900);
}

.message.theirs .message-time[b-yf47xgzeds] {
    color: var(--color-text-light);
}

.message-read[b-yf47xgzeds],
.message-sent[b-yf47xgzeds] {
    display: flex;
    align-items: center;
}

.message-read .material-icons[b-yf47xgzeds],
.message-sent .material-icons[b-yf47xgzeds] {
    font-size: 0.875rem;
}

.message.mine .message-read .material-icons[b-yf47xgzeds] {
    color: var(--color-gray-900);
}

.message.mine .message-sent .material-icons[b-yf47xgzeds] {
    color: rgba(15, 23, 42, 0.6);
}

/* Typing Indicator */
.typing-indicator[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 1.125rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    max-width: 70px;
}

.typing-indicator span[b-yf47xgzeds] {
    width: 8px;
    height: 8px;
    background: var(--color-text-light);
    border-radius: 50%;
    animation: typing-b-yf47xgzeds 1.4s infinite;
}

.typing-indicator span:nth-child(1)[b-yf47xgzeds] {
    animation-delay: 0s;
}

.typing-indicator span:nth-child(2)[b-yf47xgzeds] {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3)[b-yf47xgzeds] {
    animation-delay: 0.4s;
}

@keyframes typing-b-yf47xgzeds {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .thread-header[b-yf47xgzeds] {
        padding: 1rem 1.25rem;
    }

    .friend-name[b-yf47xgzeds] {
        font-size: 1rem;
    }

    .messages-area[b-yf47xgzeds] {
        padding: 1rem;
    }

    .message-bubble[b-yf47xgzeds] {
        max-width: 85%;
    }
}
/* /Components/Friends/SendFriendRequestDialog.razor.rz.scp.css */
/* Dialog Overlay */
.dialog-overlay[b-j2yse8eoku] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-j2yse8eoku 0.2s ease;
}

@keyframes fadeIn-b-j2yse8eoku {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dialog Container */
.dialog-container[b-j2yse8eoku] {
    background: var(--color-gray-800);
    border: 1px solid var(--color-border-active);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-j2yse8eoku 0.3s ease;
}

@keyframes slideUp-b-j2yse8eoku {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dialog Header */
.dialog-header[b-j2yse8eoku] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border-hover);
}

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

.close-btn[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.close-btn .material-icons[b-j2yse8eoku] {
    font-size: 1.25rem;
}

/* Dialog Content */
.dialog-content[b-j2yse8eoku] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.dialog-content[b-j2yse8eoku]::-webkit-scrollbar {
    width: 6px;
}

.dialog-content[b-j2yse8eoku]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

.dialog-content[b-j2yse8eoku]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

/* Dialog Actions */
.dialog-actions[b-j2yse8eoku] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--color-border-hover);
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.3);
    flex-shrink: 0;
}

.dialog-actions button[b-j2yse8eoku] {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-actions .btn-primary[b-j2yse8eoku] {
    background: linear-gradient(135deg, var(--color-primary), #ffed4e);
    color: var(--color-gray-900);
}

.dialog-actions .btn-primary:hover:not(:disabled)[b-j2yse8eoku] {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px var(--color-border-active);
}

.dialog-actions .btn-secondary[b-j2yse8eoku] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    color: var(--color-primary);
}

.dialog-actions .btn-secondary:hover:not(:disabled)[b-j2yse8eoku] {
    background: var(--color-border-base);
    border-color: var(--color-border-active);
}

.dialog-actions button:disabled[b-j2yse8eoku] {
    opacity: 0.6;
    cursor: not-allowed;
}

.dialog-actions .material-icons[b-j2yse8eoku] {
    font-size: 1.2rem;
}

/* Form Groups (shared) */
.form-group[b-j2yse8eoku] {
    margin-bottom: 1.5rem;
}

.form-group:last-child[b-j2yse8eoku] {
    margin-bottom: 0;
}

.form-group label[b-j2yse8eoku] {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input[b-j2yse8eoku],
.form-group textarea[b-j2yse8eoku] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--color-border-hover);
    border-radius: 6px;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus[b-j2yse8eoku],
.form-group textarea:focus[b-j2yse8eoku] {
    outline: none;
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(15, 23, 42, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-group input[b-j2yse8eoku]::placeholder,
.form-group textarea[b-j2yse8eoku]::placeholder {
    color: var(--color-text-tertiary);
}

.form-group textarea[b-j2yse8eoku] {
    resize: vertical;
    min-height: 100px;
}

.form-hint[b-j2yse8eoku] {
    color: var(--color-text-tertiary);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* Alerts */
.alert[b-j2yse8eoku] {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.alert .material-icons[b-j2yse8eoku] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.alert p[b-j2yse8eoku] {
    margin: 0;
    font-size: 0.95rem;
}

.alert.success[b-j2yse8eoku] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--color-success-lighter);
}

.alert.error[b-j2yse8eoku] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--color-danger-light);
}

.alert-hint[b-j2yse8eoku] {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Spinners */
.spinner-small[b-j2yse8eoku] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-j2yse8eoku 0.6s linear infinite;
}

@keyframes spin-b-j2yse8eoku {
    to { transform: rotate(360deg); }
}

/* User Preview */
.user-preview[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--color-border-hover);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.user-avatar[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
    flex-shrink: 0;
}

.user-avatar .material-icons[b-j2yse8eoku] {
    font-size: 28px;
    color: var(--color-primary);
}

.user-info[b-j2yse8eoku] {
    flex: 1;
    min-width: 0;
}

.user-info h4[b-j2yse8eoku] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem 0;
}

.user-info p[b-j2yse8eoku] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.btn-clear[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    color: var(--color-danger-light);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-clear:hover[b-j2yse8eoku] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-clear .material-icons[b-j2yse8eoku] {
    font-size: 1rem;
}

/* Search Input Wrapper */
.search-input-wrapper[b-j2yse8eoku] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .material-icons[b-j2yse8eoku] {
    position: absolute;
    left: 1rem;
    color: var(--color-text-tertiary);
    font-size: 1.25rem;
    pointer-events: none;
}

.search-input-wrapper input[b-j2yse8eoku] {
    padding-left: 3rem;
}

/* Search Loading */
.search-loading[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    justify-content: center;
}

.search-loading p[b-j2yse8eoku] {
    color: var(--color-text-light);
    margin: 0;
}

/* Search Results */
.search-results[b-j2yse8eoku] {
    max-height: 300px;
    overflow-y: auto;
}

.search-results[b-j2yse8eoku]::-webkit-scrollbar {
    width: 6px;
}

.search-results[b-j2yse8eoku]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

.search-results[b-j2yse8eoku]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

.results-label[b-j2yse8eoku] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}

.search-result-item[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-result-item:hover[b-j2yse8eoku] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-hover);
    transform: translateX(4px);
}

.result-avatar[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-hover);
    flex-shrink: 0;
}

.result-avatar .material-icons[b-j2yse8eoku] {
    font-size: 24px;
    color: var(--color-primary);
}

.result-info[b-j2yse8eoku] {
    flex: 1;
    min-width: 0;
}

.result-info h5[b-j2yse8eoku] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem 0;
}

.result-info p[b-j2yse8eoku] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-item > .material-icons[b-j2yse8eoku] {
    color: var(--color-text-tertiary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Empty Results */
.empty-results[b-j2yse8eoku] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-results .material-icons[b-j2yse8eoku] {
    font-size: 3rem;
    color: var(--color-text-tertiary);
}

.empty-results p[b-j2yse8eoku] {
    color: var(--color-text-light);
    margin: 0;
}
/* /Components/Inventory/InventoryHeader.razor.rz.scp.css */
/* Inventory Topbar - Compact stats bar */

.inventory-topbar[b-xms61v952k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
}

.topbar-left[b-xms61v952k] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.topbar-icon[b-xms61v952k] {
    font-size: 1.25rem;
    color: var(--color-info);
    flex-shrink: 0;
}

.topbar-title[b-xms61v952k] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-info-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-stats[b-xms61v952k] {
    display: flex;
    gap: var(--space-md);
    flex-shrink: 0;
}

.topbar-stat[b-xms61v952k] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-xs) var(--space-md);
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.stat-icon[b-xms61v952k] {
    font-size: 0.875rem;
}

.stat-icon.equipped-icon[b-xms61v952k] {
    color: var(--color-success-light);
}

.stat-icon.items-icon[b-xms61v952k] {
    color: var(--color-info-light);
}

.stat-icon.consumable-icon[b-xms61v952k] {
    color: var(--color-warning-light);
}

.stat-value[b-xms61v952k] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.stat-label[b-xms61v952k] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: none;
}

@media (min-width: 769px) {
    .stat-label[b-xms61v952k] {
        display: inline;
    }
}

@media (max-width: 768px) {
    .inventory-topbar[b-xms61v952k] {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .topbar-title[b-xms61v952k] {
        font-size: var(--font-size-sm);
    }

    .topbar-stats[b-xms61v952k] {
        gap: var(--space-sm);
    }

    .topbar-stat[b-xms61v952k] {
        padding: var(--space-xs) var(--space-sm);
    }

    .stat-icon[b-xms61v952k] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .inventory-topbar[b-xms61v952k] {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-stats[b-xms61v952k] {
        justify-content: space-between;
    }

    .stat-label[b-xms61v952k] {
        display: inline;
    }
}
/* /Components/Inventory/InventoryTabs.razor.rz.scp.css */
/* InventoryTabs - Compact horizontal tabs (mirrors MerchantTabs pattern) */

/* ===== CONTAINER ===== */
.inventory-tabs-container[b-zm6z1q1tqn] {
    margin-bottom: var(--space-md);
}

/* ===== TABS ROW ===== */
.inventory-tabs[b-zm6z1q1tqn] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(59, 130, 246, 0.15);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .inventory-tabs[b-zm6z1q1tqn]::-webkit-scrollbar {
        display: none;
    }

/* ===== INDIVIDUAL TAB (horizontal: icon + label + count inline) ===== */
.inventory-tab[b-zm6z1q1tqn] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.18s ease, border-bottom-color 0.18s ease, background 0.18s ease;
    color: #64748b;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    justify-content: center;
    outline: none;
}

    .inventory-tab.active[b-zm6z1q1tqn] {
        color: #60a5fa;
        border-bottom-color: #60a5fa;
    }

    /* ===== ICON WRAPPER ===== */
    .tab-icon-wrapper[b-zm6z1q1tqn] {
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        flex-shrink: 0;
    }

    .tab-icon-wrapper.weapons[b-zm6z1q1tqn] {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.25);
    }

    .tab-icon-wrapper.armor[b-zm6z1q1tqn] {
        background: rgba(59, 130, 246, 0.15);
        border: 1px solid rgba(59, 130, 246, 0.25);
    }

    .tab-icon-wrapper.consumables[b-zm6z1q1tqn] {
        background: rgba(34, 197, 94, 0.15);
        border: 1px solid rgba(34, 197, 94, 0.25);
    }

    .tab-icon-wrapper.weapons .tab-icon[b-zm6z1q1tqn] {
        color: #f87171;
    }

    .tab-icon-wrapper.armor .tab-icon[b-zm6z1q1tqn] {
        color: #60a5fa;
    }

    .tab-icon-wrapper.consumables .tab-icon[b-zm6z1q1tqn] {
        color: #4ade80;
    }

/* ===== HOVER & FOCUS ===== */
.inventory-tab:hover[b-zm6z1q1tqn] {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.03);
}

.inventory-tab:focus-visible[b-zm6z1q1tqn] {
    outline: 2px solid rgba(59, 130, 246, 0.6);
    outline-offset: -2px;
    border-radius: 4px 4px 0 0;
}

.inventory-tab.active .tab-icon-wrapper[b-zm6z1q1tqn] {
    transform: scale(1.05);
}

    .inventory-tab.active .tab-icon-wrapper.weapons[b-zm6z1q1tqn] {
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
    }

    .inventory-tab.active .tab-icon-wrapper.armor[b-zm6z1q1tqn] {
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
    }

    .inventory-tab.active .tab-icon-wrapper.consumables[b-zm6z1q1tqn] {
        box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
    }

.tab-icon[b-zm6z1q1tqn] {
    font-size: 0.95rem !important;
    transition: none;
}

/* ===== TAB LABEL ===== */
.tab-label[b-zm6z1q1tqn] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: inherit;
    transition: none;
}

/* ===== INLINE COUNT PILL ===== */
.tab-count[b-zm6z1q1tqn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.inventory-tab.active .tab-count[b-zm6z1q1tqn] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
    .inventory-tab[b-zm6z1q1tqn] {
        padding: var(--space-sm) var(--space-md);
    }

    .tab-icon-wrapper[b-zm6z1q1tqn] {
        width: 24px;
        height: 24px;
    }

    .tab-icon[b-zm6z1q1tqn] {
        font-size: 0.9rem !important;
    }
}

/* ===== MOBILE: FIXED BOTTOM NAV BAR ===== */
@media (max-width: 768px) {
    .inventory-tabs-container[b-zm6z1q1tqn] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        margin: 0;
        padding: 4px var(--space-sm);
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        background: rgba(10, 15, 30, 0.97);
        border-top: 1px solid rgba(59, 130, 246, 0.25);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(12px);
    }

    .inventory-tabs[b-zm6z1q1tqn] {
        border-bottom: none;
        gap: 0;
        background: transparent;
    }

    .inventory-tab[b-zm6z1q1tqn] {
        flex-direction: column;
        border: none;
        border-bottom: none;
        border-radius: var(--radius-lg);
        padding: 6px 8px;
        min-height: 54px;
        margin-bottom: 0;
        gap: 2px;
    }

        .inventory-tab.active[b-zm6z1q1tqn] {
            background: rgba(59, 130, 246, 0.07);
            border-bottom: none;
            border-bottom-color: transparent;
        }

    .tab-icon-wrapper[b-zm6z1q1tqn] {
        width: 28px;
        height: 28px;
        background: transparent !important;
        border: none !important;
    }

    .inventory-tab.active .tab-icon-wrapper[b-zm6z1q1tqn] {
        transform: none;
        box-shadow: none;
    }

    .tab-icon[b-zm6z1q1tqn] {
        font-size: 1.15rem !important;
    }

    .tab-label[b-zm6z1q1tqn] {
        font-size: 0.65rem;
        letter-spacing: 0;
    }

    .tab-count[b-zm6z1q1tqn] {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 0.6rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout scoped styles - Uses Design System Tokens */

.page[b-ei8mtptfs0] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-base) 100%);
}

main[b-ei8mtptfs0] {
    flex: 1;
}

/* Sidebar fantasy gradient */
.sidebar[b-ei8mtptfs0] {
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%);
    border-right: 1px solid var(--color-border-base);
}

/* Top row styling */
.top-row[b-ei8mtptfs0] {
    background: linear-gradient(90deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-base);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-ei8mtptfs0]  a, 
.top-row[b-ei8mtptfs0]  .btn-link {
    white-space: nowrap;
    margin-left: var(--space-xl);
    text-decoration: none;
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
}

.top-row[b-ei8mtptfs0]  a:hover, 
.top-row[b-ei8mtptfs0]  .btn-link:hover {
    text-decoration: none;
    color: var(--color-primary);
}

.top-row[b-ei8mtptfs0]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile responsiveness */
@media (max-width: 640.98px) {
    .top-row[b-ei8mtptfs0] {
        justify-content: space-between;
    }

    .top-row[b-ei8mtptfs0]  a, 
    .top-row[b-ei8mtptfs0]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ei8mtptfs0] {
        flex-direction: row;
    }

    .sidebar[b-ei8mtptfs0] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ei8mtptfs0] {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
    }

    .top-row.auth[b-ei8mtptfs0]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ei8mtptfs0], article[b-ei8mtptfs0] {
        padding-left: var(--space-2xl);
        padding-right: var(--space-xl);
    }
}

/* Blazor Error UI - Fantasy themed */
#blazor-error-ui[b-ei8mtptfs0] {
    color-scheme: dark only;
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
    bottom: 0;
    box-shadow: 0 -4px 20px rgba(239, 68, 68, 0.3);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--space-md) var(--space-xl);
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--color-danger-lightest);
    font-family: 'Cinzel', serif;
    border-top: 2px solid var(--color-danger);
}

#blazor-error-ui .dismiss[b-ei8mtptfs0] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    color: var(--color-danger-lightest);
    transition: color 0.2s ease;
}

#blazor-error-ui .dismiss:hover[b-ei8mtptfs0] {
    color: #ffffff;
}

#blazor-error-ui .reload[b-ei8mtptfs0] {
    color: var(--color-primary);
    text-decoration: underline;
    margin-left: 0.5rem;
}

#blazor-error-ui .reload:hover[b-ei8mtptfs0] {
    color: var(--color-primary-light);
}

/* Custom scrollbar for fantasy theme */
[b-ei8mtptfs0]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-ei8mtptfs0]::-webkit-scrollbar-track {
    background: var(--color-gray-900);
}

[b-ei8mtptfs0]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #475569, var(--color-gray-700));
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

[b-ei8mtptfs0]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-text-tertiary), #475569);
    border-color: var(--color-border-hover);
}

/* Selection highlighting */
[b-ei8mtptfs0]::selection {
    background: var(--color-border-active);
    color: var(--color-primary);
}

/* ===== 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: var(--color-text-primary);
    transition: all 0.2s ease;
    border-radius: 50%;
}

.account-menu-button:hover[b-ei8mtptfs0] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
}

.account-dropdown[b-ei8mtptfs0] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: var(--color-gray-800);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.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 var(--color-border-base);
    background: rgba(255, 215, 0, 0.05);
}

.account-email-label[b-ei8mtptfs0] {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.account-email[b-ei8mtptfs0] {
    color: var(--color-primary);
    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: var(--color-text-primary);
    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: var(--color-primary);
}

.account-menu-item.logout[b-ei8mtptfs0] {
    color: var(--color-danger);
}

.account-menu-item.logout:hover[b-ei8mtptfs0] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger-light);
}

.account-menu-divider[b-ei8mtptfs0] {
    height: 1px;
    background: var(--color-border-base);
    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: var(--color-primary);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--color-border-hover);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 215, 0, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 215, 0, 0.05);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.navbar-toggler:hover[b-hjy8pn4tj3] {
    background-color: rgba(255, 215, 0, 0.1);
    border-color: var(--color-border-active);
}

.top-row[b-hjy8pn4tj3] {
    min-height: 3.5rem;
    background: linear-gradient(90deg, var(--color-gray-900) 0%, rgba(30, 41, 59, 0.8) 50%, var(--color-gray-900) 100%);
    border-bottom: 1px solid var(--color-border-base);
}

.navbar-brand[b-hjy8pn4tj3] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scrollable nav area */
.nav-scrollable[b-hjy8pn4tj3] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-hjy8pn4tj3] {
    display: block;
}

/* ============================================
   NAV MENU CONTAINER
   ============================================ */

[b-hjy8pn4tj3] .nav-menu-fantasy {
    padding: 0.75rem 0.5rem;
}

[b-hjy8pn4tj3] .nav-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    padding: 0.75rem 1rem 0.4rem;
}

[b-hjy8pn4tj3] .nav-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border-base), transparent);
    margin: 0.5rem 0;
}

/* ============================================
   CHARACTER PREVIEW CARD
   ============================================ */

[b-hjy8pn4tj3] .character-preview {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-hover);
    border-radius: 10px;
    padding: 0.75rem;
    margin: 0.25rem 0.25rem 0.75rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-hjy8pn4tj3] .character-preview-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

[b-hjy8pn4tj3] .character-preview-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

[b-hjy8pn4tj3] .character-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

[b-hjy8pn4tj3] .character-info {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* ============================================
   TIER BADGE
   ============================================ */

[b-hjy8pn4tj3] .tier-badge-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    margin-bottom: 0.25rem;
}

[b-hjy8pn4tj3] .tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

[b-hjy8pn4tj3] .tier-badge .mud-icon-root {
    font-size: 0.75rem !important;
}

[b-hjy8pn4tj3] .tier-badge.premium {
    background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.1));
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
}

[b-hjy8pn4tj3] .tier-badge.basic {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--color-text-secondary);
}

[b-hjy8pn4tj3] .tier-slots {
    font-size: 0.6rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* ============================================
   STAT BARS (HP/Mana)
   ============================================ */

[b-hjy8pn4tj3] .character-stat-bar {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--color-text-tertiary);
    font-weight: 500;
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-track {
    height: 5px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    overflow: hidden;
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-track.hp .stat-bar-fill {
    background: linear-gradient(90deg, var(--color-success), var(--color-success-light));
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-track.mana .stat-bar-fill {
    background: linear-gradient(90deg, var(--color-info), var(--color-info-light));
    box-shadow: 0 0 4px rgba(59, 130, 246, 0.4);
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ============================================
   NAV LINKS
   ============================================ */

[b-hjy8pn4tj3] .mud-nav-link {
    border-radius: 6px !important;
    margin: 1px 4px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    color: var(--color-text-secondary) !important;
    transition: all 0.2s ease !important;
    position: relative;
}

[b-hjy8pn4tj3] .mud-nav-link:hover {
    background: rgba(255, 215, 0, 0.08) !important;
    color: var(--color-text-primary) !important;
}

[b-hjy8pn4tj3] .mud-nav-link.active {
    background: linear-gradient(90deg, var(--color-border-base), rgba(255, 215, 0, 0.05)) !important;
    color: var(--color-primary) !important;
    border-left: 2px solid var(--color-primary) !important;
}

[b-hjy8pn4tj3] .mud-nav-link .mud-icon-root {
    font-size: 1.1rem !important;
    margin-right: 0.5rem;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
    [b-hjy8pn4tj3] .character-preview {
        padding: 0.6rem;
    }

    [b-hjy8pn4tj3] .character-name {
        font-size: 0.85rem;
    }

    [b-hjy8pn4tj3] .character-info {
        font-size: 0.65rem;
    }

    [b-hjy8pn4tj3] .mud-nav-link {
        padding: 0.45rem 0.6rem !important;
        font-size: 0.8rem !important;
    }

    [b-hjy8pn4tj3] .nav-badge {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }
}

/* ============================================
   NOTIFICATION BADGES
   ============================================ */

[b-hjy8pn4tj3] .nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0.15rem 0.45rem;
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    border-radius: 9px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.5rem;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
    animation: pulse-badge-b-hjy8pn4tj3 2s infinite;
}

@keyframes pulse-badge-b-hjy8pn4tj3 {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 2px 12px rgba(59, 130, 246, 0.5);
    }
}

/* ============================================
   SWITCH HERO BUTTON
   ============================================ */

[b-hjy8pn4tj3] .switch-hero-wrapper {
    padding-top: var(--space-sm);
    margin-top: var(--space-xs);
    border-top: 1px solid rgba(255, 215, 0, 0.08);
}

/* ============================================
   EXPANSION PANEL TITLE WITH ICON
   ============================================ */

[b-hjy8pn4tj3] .expansion-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

[b-hjy8pn4tj3] .expansion-panel-title .mud-icon-root {
    font-size: 1rem !important;
    color: var(--color-text-tertiary);
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */


@media (max-width: 599px) {
    [b-hjy8pn4tj3] .nav-menu-fantasy {
        padding: 0.5rem 0.25rem;
    }

    [b-hjy8pn4tj3] .character-preview {
        padding: 0.5rem;
        margin: 0.25rem 0.15rem 0.5rem 0.15rem;
        border-radius: 8px;
    }

    [b-hjy8pn4tj3] .character-preview-header {
        gap: 0.4rem;
    }

    [b-hjy8pn4tj3] .mud-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    [b-hjy8pn4tj3] .mud-avatar .mud-icon-root {
        font-size: 0.9rem !important;
    }

    [b-hjy8pn4tj3] .character-name {
        font-size: 0.8rem;
    }

    [b-hjy8pn4tj3] .character-info {
        font-size: 0.6rem;
    }

    [b-hjy8pn4tj3] .tier-badge {
        font-size: 0.55rem;
        padding: 0.15rem 0.35rem;
    }

    [b-hjy8pn4tj3] .tier-slots {
        font-size: 0.55rem;
    }

    [b-hjy8pn4tj3] .character-stat-bar .stat-bar-header {
        font-size: 0.55rem;
    }

    [b-hjy8pn4tj3] .character-stat-bar .stat-bar-track {
        height: 4px;
    }

    [b-hjy8pn4tj3] .nav-section-title {
        font-size: 0.6rem;
        padding: 0.5rem 0.75rem 0.3rem;
    }

    [b-hjy8pn4tj3] .mud-nav-link {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.75rem !important;
        margin: 1px 2px !important;
    }

    [b-hjy8pn4tj3] .mud-nav-link .mud-icon-root {
        font-size: 1rem !important;
        margin-right: 0.4rem;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* PublicLayout — Static SSR nav & footer for all public/indexable pages.
   Uses design-system tokens throughout. */

.pub-header[b-fswictcyvl] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(90deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-base);
}

.pub-nav[b-fswictcyvl] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);
}

/* Brand */
.pub-brand[b-fswictcyvl] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    flex-shrink: 0;
}

.pub-brand-icon[b-fswictcyvl] {
    color: var(--color-primary);
    font-size: 1.25rem;
}

.pub-brand-name[b-fswictcyvl] {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub-brand-sub[b-fswictcyvl] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Nav links */
.pub-nav-links[b-fswictcyvl] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: var(--space-lg);
}

.pub-nav-link[b-fswictcyvl] {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: color 0.2s, background 0.2s;
}

.pub-nav-link:hover[b-fswictcyvl] {
    color: var(--color-primary);
    background: rgba(255, 215, 0, 0.08);
}

/* Auth actions */
.pub-nav-actions[b-fswictcyvl] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
}

.pub-btn-secondary[b-fswictcyvl] {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-base);
    transition: all 0.2s;
}

.pub-btn-secondary:hover[b-fswictcyvl] {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.pub-btn-primary[b-fswictcyvl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-bg-base);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    transition: opacity 0.2s;
}

.pub-btn-primary:hover[b-fswictcyvl] {
    opacity: 0.9;
}

.pub-btn-primary .material-icons[b-fswictcyvl] {
    font-size: 1rem;
}

/* Main content */
.pub-main[b-fswictcyvl] {
    min-height: calc(100vh - 130px);
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-base) 100%);
}

/* Footer */
.pub-footer[b-fswictcyvl] {
    background: var(--color-bg-base);
    border-top: 1px solid var(--color-border-base);
    padding: var(--space-lg) var(--space-xl);
}

.pub-footer-inner[b-fswictcyvl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    max-width: 1400px;
    margin: 0 auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.pub-footer-links[b-fswictcyvl] {
    display: flex;
    gap: var(--space-lg);
}

.pub-footer-links a[b-fswictcyvl] {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.pub-footer-links a:hover[b-fswictcyvl] {
    color: var(--color-primary);
}

/* Mobile */
@media (max-width: 768px) {
    .pub-nav[b-fswictcyvl] {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .pub-nav-links[b-fswictcyvl] {
        display: none;
    }

    .pub-brand-sub[b-fswictcyvl] {
        display: none;
    }

    .pub-footer-inner[b-fswictcyvl] {
        flex-direction: column;
        text-align: center;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-o2d7qkooc8],
.components-reconnect-repeated-attempt-visible[b-o2d7qkooc8],
.components-reconnect-failed-visible[b-o2d7qkooc8],
.components-pause-visible[b-o2d7qkooc8],
.components-resume-failed-visible[b-o2d7qkooc8],
.components-rejoining-animation[b-o2d7qkooc8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-retrying[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-failed[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-o2d7qkooc8] {
    display: block;
}


#components-reconnect-modal[b-o2d7qkooc8] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-o2d7qkooc8 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-o2d7qkooc8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-o2d7qkooc8 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-o2d7qkooc8]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-o2d7qkooc8 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-o2d7qkooc8 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-o2d7qkooc8 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-o2d7qkooc8 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-o2d7qkooc8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-o2d7qkooc8] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-o2d7qkooc8] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-o2d7qkooc8] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-o2d7qkooc8] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-o2d7qkooc8] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-o2d7qkooc8] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-o2d7qkooc8 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-o2d7qkooc8] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-o2d7qkooc8 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Merchant/EquipmentGuide.razor.rz.scp.css */
/* Equipment Guide Component - Fantasy RPG Theme */

/* ===== CONTAINER ===== */
.equipment-guide-container[b-kii38ak5hk] {
    margin-bottom: var(--space-xl);
}

/* ===== TOGGLE BUTTON ===== */
.guide-toggle-btn[b-kii38ak5hk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08));
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-xl);
    color: var(--color-monk-lighter);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-slow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    overflow: hidden;
}

.guide-toggle-btn[b-kii38ak5hk]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.2), transparent);
    transition: height var(--transition-slow);
}

.guide-toggle-btn:hover[b-kii38ak5hk] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.15));
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
}

.guide-toggle-btn:hover[b-kii38ak5hk]::before {
    height: 100%;
}

/* Focus state for accessibility */
.guide-toggle-btn:focus-visible[b-kii38ak5hk] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-border-hover);
}

/* Chevron icon animation */
.guide-toggle-btn .chevron-icon[b-kii38ak5hk] {
    transition: transform 0.3s ease-out;
}

.guide-toggle-btn.expanded .chevron-icon[b-kii38ak5hk] {
    transform: rotate(180deg);
}

/* ===== GUIDE CONTENT ===== */
.guide-content[b-kii38ak5hk] {
    margin-top: var(--space-lg);
    padding: var(--space-2xl);
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--radius-2xl);
    animation: slideDown-b-kii38ak5hk 0.3s ease-out;
    position: relative;
}

.guide-content[b-kii38ak5hk]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(139, 92, 246, 0.6) 20%,
        var(--color-monk) 50%,
        rgba(139, 92, 246, 0.6) 80%,
        transparent 100%);
}

@keyframes slideDown-b-kii38ak5hk {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp-b-kii38ak5hk {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-15px);
    }
}

/* Guide content wrapper for smooth expand/collapse */
.guide-content-wrapper[b-kii38ak5hk] {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.guide-content-wrapper.collapsed[b-kii38ak5hk] {
    max-height: 0;
    opacity: 0;
}

.guide-content-wrapper.expanded[b-kii38ak5hk] {
    max-height: 2000px; /* Large enough to contain content */
    opacity: 1;
}

/* ===== GUIDE HEADER ===== */
.guide-header[b-kii38ak5hk] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}

.guide-header .guide-icon[b-kii38ak5hk] {
    color: #a78bfa;
    font-size: 2rem !important;
}

.guide-header h3[b-kii38ak5hk] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-monk-lighter);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* ===== GUIDE SECTIONS ===== */
.guide-section[b-kii38ak5hk] {
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-subtle);
    position: relative;
}

.guide-section:last-child[b-kii38ak5hk] {
    margin-bottom: 0;
}

.guide-section h4[b-kii38ak5hk] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--space-lg) 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ===== STAT PRIORITIES ===== */
.stat-priorities[b-kii38ak5hk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stat-badge[b-kii38ak5hk] {
    display: flex;
    padding: var(--space-md) var(--space-lg);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    border-left: 4px solid transparent;
    transition: all var(--transition-base);
}

.stat-badge:hover[b-kii38ak5hk] {
    background: rgba(0, 0, 0, 0.4);
    transform: translateX(4px);
}

.stat-badge.primary[b-kii38ak5hk] {
    border-left-color: var(--color-primary);
    color: var(--color-primary-light);
}

.stat-badge.secondary[b-kii38ak5hk] {
    border-left-color: var(--color-info);
    color: var(--color-info-light);
}

.stat-badge.tertiary[b-kii38ak5hk] {
    border-left-color: var(--color-text-tertiary);
    color: var(--color-text-secondary);
}

/* ===== RECOMMENDATIONS LIST ===== */
.recommendations-list[b-kii38ak5hk] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.recommendations-list li[b-kii38ak5hk] {
    padding: var(--space-md) var(--space-lg);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.recommendations-list li strong[b-kii38ak5hk] {
    color: var(--color-text-primary);
}

.stat-uses[b-kii38ak5hk] {
    margin-left: auto;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* ===== ARMOR INFO ===== */
.armor-info[b-kii38ak5hk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.armor-info p[b-kii38ak5hk] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.armor-info p strong[b-kii38ak5hk] {
    color: var(--color-text-primary);
}

.armor-info .tip[b-kii38ak5hk] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-lg);
    color: var(--color-warning-light);
    font-style: italic;
}

/* ===== SPELLCASTER INFO ===== */
.spellcaster-info[b-kii38ak5hk] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.spellcaster-info h4[b-kii38ak5hk] {
    color: var(--color-info-light);
}

/* ===== QUICK TIPS ===== */
.quick-tips[b-kii38ak5hk] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.quick-tips h4[b-kii38ak5hk] {
    color: var(--color-success-light);
}

/* ===== TIPS LIST ===== */
.tips-list[b-kii38ak5hk] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.tips-list li[b-kii38ak5hk] {
    position: relative;
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-xl);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.tips-list li[b-kii38ak5hk]::before {
    content: '?';
    position: absolute;
    left: var(--space-sm);
    color: var(--color-primary);
    font-weight: bold;
}

.tips-list li strong[b-kii38ak5hk] {
    color: var(--color-primary);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .guide-content[b-kii38ak5hk] {
        padding: var(--space-lg);
    }

    .guide-header[b-kii38ak5hk] {
        flex-direction: column;
        text-align: center;
    }

    .guide-header h3[b-kii38ak5hk] {
        font-size: var(--font-size-xl);
    }

    .guide-section[b-kii38ak5hk] {
        padding: var(--space-md);
    }

    .stat-badge[b-kii38ak5hk] {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .recommendations-list li[b-kii38ak5hk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .stat-uses[b-kii38ak5hk] {
        margin-left: 0;
        margin-top: var(--space-sm);
    }
}
/* /Components/Merchant/MerchantHeader.razor.rz.scp.css */
/* MerchantHeader - Compact topbar */

.merchant-topbar[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.15) 0%, rgba(101, 67, 33, 0.08) 100%);
    border: 1px solid var(--color-border-active);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
}

/* ===== LEFT: Shop identity ===== */

.topbar-left[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.topbar-emblem[b-6ud9r4a04e] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 10px var(--color-border-active);
    object-fit: cover;
    flex-shrink: 0;
}

.topbar-info[b-6ud9r4a04e] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.topbar-title[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-subtitle[b-6ud9r4a04e] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* ===== RIGHT: Currency + guide ===== */

.topbar-right[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.currency-display[b-6ud9r4a04e] {
    display: flex;
    gap: var(--space-sm);
}

.currency-coin[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.coin-icon[b-6ud9r4a04e] {
    font-size: 0.5rem;
}

.ci-gold[b-6ud9r4a04e] {
    color: var(--color-primary);
}

.ci-silver[b-6ud9r4a04e] {
    color: var(--color-silver);
}

.ci-copper[b-6ud9r4a04e] {
    color: var(--color-bronze);
}

.coin-value[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.coin-label[b-6ud9r4a04e] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    opacity: 0.6;
}

.currency-coin.gold .coin-value[b-6ud9r4a04e],
.currency-coin.gold .coin-label[b-6ud9r4a04e] {
    color: var(--color-primary);
}

.currency-coin.silver .coin-value[b-6ud9r4a04e],
.currency-coin.silver .coin-label[b-6ud9r4a04e] {
    color: var(--color-silver);
}

.currency-coin.copper .coin-value[b-6ud9r4a04e],
.currency-coin.copper .coin-label[b-6ud9r4a04e] {
    color: var(--color-bronze);
}

.guide-btn[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-monk-lighter);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.guide-btn:hover[b-6ud9r4a04e] {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.5);
}

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

@media (max-width: 768px) {
    .merchant-topbar[b-6ud9r4a04e] {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .topbar-emblem[b-6ud9r4a04e] {
        width: 28px;
        height: 28px;
    }

    .topbar-title[b-6ud9r4a04e] {
        font-size: var(--font-size-sm);
    }

    .topbar-subtitle[b-6ud9r4a04e] {
        display: none;
    }

    .currency-coin[b-6ud9r4a04e] {
        padding: var(--space-xs) 4px;
    }

    .coin-label[b-6ud9r4a04e] {
        display: none;
    }
}

@media (max-width: 480px) {
    .merchant-topbar[b-6ud9r4a04e] {
        flex-wrap: wrap;
    }

    .coin-label[b-6ud9r4a04e] {
        display: inline;
    }

    .currency-display[b-6ud9r4a04e] {
        flex: 1;
        justify-content: space-between;
    }
}

/* ===== FLOATING CURRENCY DISPLAY ===== */

.floating-currency[b-6ud9r4a04e] {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all var(--transition-slow);
}

.floating-currency.visible[b-6ud9r4a04e] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.floating-currency-inner[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(145deg, var(--color-bg-elevated-alt), var(--color-bg-elevated));
    border: 2px solid var(--color-border-active);
    border-radius: var(--radius-xl);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 20px var(--color-border-base);
    backdrop-filter: blur(10px);
}

.floating-wallet-icon[b-6ud9r4a04e] {
    color: var(--color-primary);
}

.floating-coin[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.floating-coin-value[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.floating-coin-label[b-6ud9r4a04e] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    opacity: 0.7;
}

.floating-coin.gold .floating-coin-value[b-6ud9r4a04e],
.floating-coin.gold .floating-coin-label[b-6ud9r4a04e] {
    color: var(--color-primary);
}

.floating-coin.silver .floating-coin-value[b-6ud9r4a04e],
.floating-coin.silver .floating-coin-label[b-6ud9r4a04e] {
    color: var(--color-silver);
}

.floating-coin.copper .floating-coin-value[b-6ud9r4a04e],
.floating-coin.copper .floating-coin-label[b-6ud9r4a04e] {
    color: var(--color-bronze);
}

@media (max-width: 768px) {
    .floating-currency[b-6ud9r4a04e] {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--space-md));
        right: var(--space-md);
        left: var(--space-md);
    }

    .floating-currency-inner[b-6ud9r4a04e] {
        justify-content: center;
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .floating-coin-value[b-6ud9r4a04e] {
        font-size: var(--font-size-sm);
    }
}
/* /Components/Merchant/MerchantTabs.razor.rz.scp.css */
/* MerchantTabs Component Styles */

/* ===== CONTAINER ===== */
.merchant-tabs-container[b-z6jpglsu1z] {
    margin-bottom: var(--space-md);
}

/* ===== TABS ROW ===== */
.merchant-tabs[b-z6jpglsu1z] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(255, 215, 0, 0.12);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .merchant-tabs[b-z6jpglsu1z]::-webkit-scrollbar {
        display: none;
    }

/* ===== INDIVIDUAL TAB (horizontal: icon + label inline) ===== */
.merchant-tab[b-z6jpglsu1z] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.18s ease, border-bottom-color 0.18s ease, background 0.18s ease;
    color: #64748b;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    justify-content: center;
    outline: none;
}

    /* ===== TAB INDICATOR (bottom underline via border) ===== */
    .merchant-tab.active[b-z6jpglsu1z] {
        color: #ffd700;
        border-bottom-color: #ffd700;
    }

    /* ===== ICON WRAPPER ===== */
    .tab-icon-wrapper[b-z6jpglsu1z] {
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        flex-shrink: 0;
    }

    /* Icon type colors */
    .tab-icon-wrapper.weapons[b-z6jpglsu1z] {
        background: rgba(239,68,68,0.15);
        border: 1px solid rgba(239,68,68,0.25);
    }

    .tab-icon-wrapper.armor[b-z6jpglsu1z] {
        background: rgba(59,130,246,0.15);
        border: 1px solid rgba(59,130,246,0.25);
    }

    .tab-icon-wrapper.consumables[b-z6jpglsu1z] {
        background: rgba(34,197,94,0.15);
        border: 1px solid rgba(34,197,94,0.25);
    }

    .tab-icon-wrapper.sell[b-z6jpglsu1z] {
        background: rgba(245,158,11,0.15);
        border: 1px solid rgba(245,158,11,0.25);
    }

    .tab-icon-wrapper.weapons .tab-icon[b-z6jpglsu1z] {
        color: #f87171;
    }

    .tab-icon-wrapper.armor .tab-icon[b-z6jpglsu1z] {
        color: #60a5fa;
    }

    .tab-icon-wrapper.consumables .tab-icon[b-z6jpglsu1z] {
        color: #4ade80;
    }

    .tab-icon-wrapper.sell .tab-icon[b-z6jpglsu1z] {
        color: #fcd34d;
    }

/* Active icon glow */
.merchant-tab:hover[b-z6jpglsu1z] {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.03);
}

.merchant-tab:focus-visible[b-z6jpglsu1z] {
    outline: 2px solid rgba(255, 215, 0, 0.6);
    outline-offset: -2px;
    border-radius: 4px 4px 0 0;
}

.merchant-tab.active .tab-icon-wrapper[b-z6jpglsu1z] {
    transform: scale(1.05);
}

    .merchant-tab.active .tab-icon-wrapper.weapons[b-z6jpglsu1z] {
        box-shadow: 0 0 12px rgba(239,68,68,0.35);
    }

    .merchant-tab.active .tab-icon-wrapper.armor[b-z6jpglsu1z] {
        box-shadow: 0 0 12px rgba(59,130,246,0.35);
    }

    .merchant-tab.active .tab-icon-wrapper.consumables[b-z6jpglsu1z] {
        box-shadow: 0 0 12px rgba(34,197,94,0.35);
    }

    .merchant-tab.active .tab-icon-wrapper.sell[b-z6jpglsu1z] {
        box-shadow: 0 0 12px rgba(245,158,11,0.35);
    }

.tab-icon[b-z6jpglsu1z] {
    font-size: 0.95rem !important;
    transition: none;
}

/* ===== TAB LABEL ===== */
.tab-label[b-z6jpglsu1z] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: inherit;
    transition: none;
}

/* ===== INLINE COUNT PILL ===== */
.tab-count[b-z6jpglsu1z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.merchant-tab.active .tab-count[b-z6jpglsu1z] {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
}

/* ===== SELL TAB SPECIAL ===== */
.sell-tab.active .tab-label[b-z6jpglsu1z] {
    color: #fcd34d;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
    .merchant-tab[b-z6jpglsu1z] {
        padding: var(--space-sm) var(--space-md);
    }

    .tab-icon-wrapper[b-z6jpglsu1z] {
        width: 24px;
        height: 24px;
    }

    .tab-icon[b-z6jpglsu1z] {
        font-size: 0.9rem !important;
    }
}

/* ===== MOBILE: FIXED BOTTOM NAV BAR ===== */
@media (max-width: 768px) {
    .merchant-tabs-container[b-z6jpglsu1z] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        margin: 0;
        padding: 4px var(--space-sm);
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        background: rgba(10, 15, 30, 0.97);
        border-top: 1px solid rgba(255, 215, 0, 0.2);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(12px);
    }

    .merchant-tabs[b-z6jpglsu1z] {
        border-bottom: none;
        gap: 0;
        background: transparent;
    }

    .merchant-tab[b-z6jpglsu1z] {
        flex-direction: column;
        border: none;
        border-bottom: none;
        border-radius: var(--radius-lg);
        padding: 6px 8px;
        min-height: 54px;
        margin-bottom: 0;
        gap: 2px;
    }

        .merchant-tab.active[b-z6jpglsu1z] {
            background: rgba(255, 215, 0, 0.07);
            border-bottom: none;
            border-bottom-color: transparent;
        }

    .tab-icon-wrapper[b-z6jpglsu1z] {
        width: 28px;
        height: 28px;
        background: transparent !important;
        border: none !important;
    }

    .merchant-tab.active .tab-icon-wrapper[b-z6jpglsu1z] {
        transform: none;
        box-shadow: none;
    }

    .tab-icon[b-z6jpglsu1z] {
        font-size: 1.15rem !important;
    }

    .tab-label[b-z6jpglsu1z] {
        font-size: 0.65rem;
        letter-spacing: 0;
    }

    .tab-count[b-z6jpglsu1z] {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 0.6rem;
    }
}
/* /Components/Merchant/SellTab.razor.rz.scp.css */
/* SellTab Component Styles - Fantasy RPG Theme */

/* ===== SELL INFO BAR ===== */
.sell-info-bar[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-md);
}

.sell-info-rates[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    background: rgba(0, 0, 0, 0.2);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-base);
}

/* ===== INFO SEPARATOR ===== */
.info-separator[b-qhj6j2hlmd] {
    margin: 0 var(--space-xs);
    color: var(--color-text-tertiary);
    opacity: 0.5;
}

/* ===== QUANTITY BADGE WITH ICON ===== */
.quantity-badge[b-qhj6j2hlmd] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: #a78bfa;
}

.quantity-badge .quantity-icon[b-qhj6j2hlmd] {
    font-size: 0.875rem !important;
}

/* ===== SELL PRICE SECTION ===== */
.sell-price-section[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-lg);
}

.sell-price-section .price-label[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sell-price-section .price-value[b-qhj6j2hlmd] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-success-light);
}

/* ===== SELL QUANTITY ROW ===== */
.sell-quantity-row[b-qhj6j2hlmd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
}

.quantity-slider-group[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
}

.quantity-display[b-qhj6j2hlmd] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    min-width: 60px;
    text-align: right;
}

/* ===== SELL BUTTONS ===== */
.sell-buttons[b-qhj6j2hlmd] {
    display: flex;
    gap: var(--space-sm);
}

.btn-sell-single[b-qhj6j2hlmd] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

/* ===== EQUIPPED BADGE ===== */
.equipped-badge[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-danger-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    width: 100%;
    justify-content: center;
}

/* ===== QUANTITY SELECTOR ===== */
.quantity-selector[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-hover);
    flex-shrink: 0;
}

.quantity-btn[b-qhj6j2hlmd] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.9), var(--color-bg-elevated));
    border: 1px solid var(--color-border-active);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all var(--transition-base);
    padding: 0;
}

.quantity-btn:hover:not(:disabled)[b-qhj6j2hlmd] {
    background: linear-gradient(145deg, var(--color-border-hover), rgba(255, 215, 0, 0.1));
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.quantity-btn:active:not(:disabled)[b-qhj6j2hlmd] {
    transform: scale(0.95);
}

.quantity-btn:disabled[b-qhj6j2hlmd] {
    opacity: 0.3;
    cursor: not-allowed;
}

.quantity-input[b-qhj6j2hlmd] {
    width: 44px;
    height: 28px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-border-active);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    padding: 0;
}

.quantity-input:focus[b-qhj6j2hlmd] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-border-base);
}

/* Focus state for accessibility */
.quantity-btn:focus-visible[b-qhj6j2hlmd] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-border-hover);
}

/* Quantity label pulse animation */
.quantity-label[b-qhj6j2hlmd] {
    transition: all 0.2s ease-out;
}

.quantity-label.updating[b-qhj6j2hlmd] {
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Remove spinner arrows in Chrome, Safari, Edge */
.quantity-input[b-qhj6j2hlmd]::-webkit-outer-spin-button,
.quantity-input[b-qhj6j2hlmd]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove spinner arrows in Firefox */
.quantity-input[type=number][b-qhj6j2hlmd] {
    -moz-appearance: textfield;
}

/* ===== ITEM FOOTER LAYOUT FIX ===== */
.item-footer[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
}

.item-footer > .price-display[b-qhj6j2hlmd] {
    flex: 0 0 auto;
}

.item-footer > .quantity-selector[b-qhj6j2hlmd] {
    flex: 0 0 auto;
}

.item-footer > .btn-sell[b-qhj6j2hlmd] {
    flex: 0 0 auto;
    min-width: 70px;
}

.item-footer > .equipped-badge[b-qhj6j2hlmd] {
    flex: 0 0 auto;
}

/* ===== ICON STYLES ===== */
.lock-icon[b-qhj6j2hlmd],
.info-icon[b-qhj6j2hlmd] {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
}

.section-icon[b-qhj6j2hlmd] {
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
}

.empty-state-icon[b-qhj6j2hlmd] {
    font-size: 4rem !important;
    display: flex;
    justify-content: center;
}

/* ===== QUANTITY CONTROLS ===== */
.quantity-controls[b-qhj6j2hlmd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.quantity-slider-container[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.quantity-slider[b-qhj6j2hlmd] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
}

.quantity-slider[b-qhj6j2hlmd]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--color-border-active);
    transition: transform var(--transition-fast);
}

.quantity-slider[b-qhj6j2hlmd]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.quantity-slider[b-qhj6j2hlmd]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--color-border-active);
}

/* Slider focus state */
.quantity-slider:focus-visible[b-qhj6j2hlmd] {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.quantity-slider:focus-visible[b-qhj6j2hlmd]::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--color-border-active);
}

.quantity-label[b-qhj6j2hlmd] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    min-width: 50px;
    text-align: right;
}

.sell-actions[b-qhj6j2hlmd] {
    display: flex;
    gap: var(--space-sm);
}

.btn-sell-all[b-qhj6j2hlmd] {
    padding: var(--space-sm) var(--space-md);
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: var(--radius-lg);
    color: var(--color-warning-light);
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-sell-all:hover[b-qhj6j2hlmd] {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(245, 158, 11, 0.6);
    transform: translateY(-1px);
}

.btn-sell-all:active[b-qhj6j2hlmd] {
    transform: translateY(0) scale(0.98);
}

.btn-sell-all:focus-visible[b-qhj6j2hlmd] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-border-hover);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .item-footer[b-qhj6j2hlmd] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .sell-price-section[b-qhj6j2hlmd] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .quantity-selector[b-qhj6j2hlmd] {
        width: 100%;
        justify-content: center;
    }

    .sell-buttons[b-qhj6j2hlmd] {
        flex-direction: column;
    }

    .btn-sell[b-qhj6j2hlmd],
    .btn-sell-all[b-qhj6j2hlmd] {
        width: 100%;
    }
}

/* Mobile - LARGER touch targets (minimum 44x44px) */
@media (max-width: 640px) {
    .quantity-btn[b-qhj6j2hlmd] {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .quantity-input[b-qhj6j2hlmd] {
        width: 56px;
        height: 44px;
        font-size: var(--font-size-base);
    }

    .quantity-slider[b-qhj6j2hlmd] {
        height: 8px;
    }

    .quantity-slider[b-qhj6j2hlmd]::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }

    .quantity-slider[b-qhj6j2hlmd]::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    .btn-sell[b-qhj6j2hlmd],
    .btn-sell-all[b-qhj6j2hlmd] {
        min-height: 44px;
        padding: var(--space-md) var(--space-lg);
        font-size: var(--font-size-sm);
    }

    .sell-actions[b-qhj6j2hlmd] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .sell-actions .btn-sell[b-qhj6j2hlmd],
    .sell-actions .btn-sell-all[b-qhj6j2hlmd] {
        width: 100%;
    }
}

/* Very small screens - even larger targets */
@media (max-width: 400px) {
    .quantity-btn[b-qhj6j2hlmd] {
        width: 48px;
        height: 48px;
    }

    .quantity-input[b-qhj6j2hlmd] {
        width: 52px;
        height: 48px;
    }
}
/* /Components/Pages/Account/CharacterSheet.razor.rz.scp.css */
/* Character Sheet - Complete Redesign */

/* ========================================
   Container Layout
   ======================================== */

.character-sheet-container[b-nclome5jxu] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ========================================
   Hero Header
   ======================================== */

.hero-header[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    padding: 2rem;
    gap: 2rem;
}

.hero-header-left[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

/* Clickable wrapper that reveals the edit overlay on hover */
.hero-avatar-wrapper[b-nclome5jxu] {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 12px;
    flex-shrink: 0;
}

.avatar-edit-overlay[b-nclome5jxu] {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.52);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.hero-avatar-wrapper:hover .avatar-edit-overlay[b-nclome5jxu] {
    opacity: 1;
}

.hero-avatar[b-nclome5jxu] {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-border-base), rgba(255, 215, 0, 0.05));
    border: 2px solid var(--color-border-active);
}

.hero-avatar.warrior[b-nclome5jxu] { border-color: var(--color-danger); background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05)); }
.hero-avatar.wizard[b-nclome5jxu] { border-color: var(--color-info); background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05)); }
.hero-avatar.ranger[b-nclome5jxu] { border-color: var(--color-success); background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05)); }
.hero-avatar.rogue[b-nclome5jxu] { border-color: var(--color-rogue); background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05)); }
.hero-avatar.paladin[b-nclome5jxu] { border-color: var(--color-warning); background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05)); }
.hero-avatar.bard[b-nclome5jxu] { border-color: var(--color-bard); background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.05)); }
.hero-avatar.cleric[b-nclome5jxu] { border-color: var(--color-cleric); background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05)); }
.hero-avatar.monk[b-nclome5jxu] { border-color: var(--color-monk); background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05)); }
.hero-avatar.barbarian[b-nclome5jxu] { border-color: var(--color-barbarian); background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(220, 38, 38, 0.05)); }
.hero-avatar.pirate[b-nclome5jxu] { border-color: #78716c; background: linear-gradient(135deg, rgba(120, 113, 108, 0.2), rgba(120, 113, 108, 0.05)); }

.hero-info[b-nclome5jxu] {
    flex: 1;
}

.hero-name[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
}

.hero-subtitle[b-nclome5jxu] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 1rem;
}

.hero-level[b-nclome5jxu] {
    color: var(--color-primary);
    font-weight: 600;
    font-family: 'Cinzel', serif;
}

.hero-class[b-nclome5jxu] {
    color: var(--color-text-secondary);
}

.hero-header-right[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.hero-stat-badges[b-nclome5jxu] {
    display: flex;
    gap: 0.75rem;
}

.stat-badge[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.625rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    min-width: 80px;
}

.badge-label[b-nclome5jxu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.badge-value[b-nclome5jxu] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
}

/* ========================================
   Combat Readiness Banner
   ======================================== */

.combat-readiness-banner[b-nclome5jxu] {
    padding: 1.5rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid var(--color-border-subtle);
}

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

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

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

.combat-readiness-banner.grade-d[b-nclome5jxu] {
    border-left: 4px solid #f97316;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.05));
}

.combat-readiness-banner.grade-f[b-nclome5jxu] {
    border-left: 4px solid var(--color-danger);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
}

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

.readiness-icon[b-nclome5jxu] {
    color: var(--color-primary);
    flex-shrink: 0;
}

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

.readiness-label[b-nclome5jxu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.readiness-grade[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.readiness-improvements[b-nclome5jxu] {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-subtle);
}

.improvements-header[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-light);
    font-size: 0.875rem;
    font-weight: 600;
}

.improvements-list[b-nclome5jxu] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

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

.improvements-list li[b-nclome5jxu]::before {
    content: '?';
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

/* ========================================
   Stat Points Alert
   ======================================== */

.stat-points-alert[b-nclome5jxu] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-left: 4px solid var(--color-warning);
    border-radius: 10px;
}

.alert-icon[b-nclome5jxu] {
    color: var(--color-warning);
    flex-shrink: 0;
    font-size: 1.5rem !important;
}

.stat-points-alert strong[b-nclome5jxu] {
    color: var(--color-warning-bright);
    font-family: 'Cinzel', serif;
    font-size: 1.125rem;
}

.stat-points-alert p[b-nclome5jxu] {
    color: var(--color-text-light);
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
}

/* ========================================
   Main Content Grid
   ======================================== */

.sheet-grid[b-nclome5jxu] {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1400px) {
    .sheet-grid[b-nclome5jxu] {
        grid-template-columns: 1fr 1fr;
    }

    .column-center[b-nclome5jxu] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 968px) {
    .sheet-grid[b-nclome5jxu] {
        grid-template-columns: 1fr;
    }
}

.sheet-column[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ========================================
   Card Styling
   ======================================== */

.sheet-card[b-nclome5jxu] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.6)) !important;
    border: 1px solid var(--color-border-base) !important;
    border-radius: 10px !important;
}

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

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

/* ========================================
   Progress Bars
   ======================================== */

.progress-bar-group[b-nclome5jxu] {
    margin-bottom: 1.25rem;
}

.progress-bar-group:last-child[b-nclome5jxu] {
    margin-bottom: 0;
}

.progress-label[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-light);
    font-weight: 600;
}

.progress-value[b-nclome5jxu] {
    color: var(--color-text-secondary);
    font-family: monospace;
}

.progress-bar[b-nclome5jxu] {
    height: 10px !important;
    border-radius: 5px !important;
}

/* ========================================
   Combat Stats Compact
   ======================================== */

.combat-stats-compact[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

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

.combat-stat-row:hover[b-nclome5jxu] {
    border-color: var(--color-border-active);
    transform: translateX(2px);
}

.stat-icon.ac[b-nclome5jxu] { color: var(--color-info); }
.stat-icon.init[b-nclome5jxu] { color: var(--color-success); }
.stat-icon.attack[b-nclome5jxu] { color: var(--color-danger); }
.stat-icon.saves[b-nclome5jxu] { color: var(--color-monk); }

.stat-details[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.stat-label[b-nclome5jxu] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.stat-value[b-nclome5jxu] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
}

/* ========================================
   Class Tips
   ======================================== */

.class-tips[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.tip-item[b-nclome5jxu] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--color-text-light);
    line-height: 1.5;
    transition: all 0.2s ease;
}

.tip-item:hover[b-nclome5jxu] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.tip-icon[b-nclome5jxu] {
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ========================================
   Currency Display
   ======================================== */

.currency-grid[b-nclome5jxu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.currency-box[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.currency-box:hover[b-nclome5jxu] {
    transform: translateY(-2px);
}

.currency-box.gold[b-nclome5jxu] { border-color: var(--color-border-active); }
.currency-box.silver[b-nclome5jxu] { border-color: rgba(192, 192, 192, 0.3); }
.currency-box.copper[b-nclome5jxu] { border-color: rgba(205, 127, 50, 0.3); }

.currency-icon[b-nclome5jxu] {
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.currency-box.gold .currency-icon[b-nclome5jxu] { color: var(--color-primary); }
.currency-box.silver .currency-icon[b-nclome5jxu] { color: var(--color-silver); }
.currency-box.copper .currency-icon[b-nclome5jxu] { color: var(--color-bronze); }

.currency-amount[b-nclome5jxu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
    line-height: 1;
}

.currency-name[b-nclome5jxu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 0.375rem;
}

.currency-total[b-nclome5jxu] {
    padding: 0.75rem;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.allocate-btn[b-nclome5jxu] {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 6px;
    color: var(--color-success);
    font-weight: 600;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
}

.allocate-btn:hover[b-nclome5jxu] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.15));
    border-color: rgba(34, 197, 94, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.allocate-btn:active[b-nclome5jxu] {
    transform: translateY(0);
}

.allocating-overlay[b-nclome5jxu] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 8px;
    z-index: 10;
}

/* ========================================
   Equipment & Inventory
   ======================================== */

.inventory-summary[b-nclome5jxu] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
}

.inv-stat-inline[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inv-label[b-nclome5jxu] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.inv-value-inline[b-nclome5jxu] {
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: 700;
    font-family: 'Cinzel', serif;
}

.equipment-slots-grid[b-nclome5jxu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.equipment-slot-card[b-nclome5jxu] {
    padding: 0.875rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.equipment-slot-card.full-width[b-nclome5jxu] {
    grid-column: 1 / -1;
}

.equipment-slot-card.equipped[b-nclome5jxu] {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.02));
}

.equipment-slot-card.empty[b-nclome5jxu] {
    border-color: rgba(100, 116, 139, 0.2);
    opacity: 0.7;
}

.equipment-slot-card:hover[b-nclome5jxu] {
    border-color: var(--color-border-active);
    transform: translateY(-1px);
}

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

.slot-icon[b-nclome5jxu] {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.equipment-slot-card.equipped .slot-icon[b-nclome5jxu] {
    color: var(--color-success);
}

.equipment-slot-card.full-width .slot-icon[b-nclome5jxu] {
    font-size: 2rem !important;
}

.slot-info[b-nclome5jxu] {
    flex: 1;
    min-width: 0;
}

.slot-label[b-nclome5jxu] {
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.slot-item-name[b-nclome5jxu] {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-slot-card.empty .slot-item-name[b-nclome5jxu] {
    color: var(--color-text-tertiary);
    font-style: italic;
    font-weight: 400;
}

.equipment-slot-card.full-width .slot-item-name[b-nclome5jxu] {
    font-size: 1.125rem;
    font-family: 'Cinzel', serif;
}

.slot-status[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
}

.slot-status.equipped-badge[b-nclome5jxu] {
    color: var(--color-success);
    font-weight: 600;
    padding: 0.375rem 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 4px;
}

.equipment-summary-footer[b-nclome5jxu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--color-text-light);
    font-weight: 600;
}

/* ========================================
   Combat Statistics
   ======================================== */

.combat-grid[b-nclome5jxu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.combat-stat[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
}

.combat-stat.wins[b-nclome5jxu] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.combat-icon[b-nclome5jxu] {
    flex-shrink: 0;
}

.combat-info[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
}

.combat-details[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.detail-row span[b-nclome5jxu] {
    color: var(--color-text-secondary);
}

.detail-row strong[b-nclome5jxu] {
    color: var(--color-text-primary);
}

/* ========================================
   Recommended Adventures
   ======================================== */

.adventures-list[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.adventure-card[b-nclome5jxu] {
    padding: 1.125rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.adventure-card:hover:not(.locked)[b-nclome5jxu] {
    border-color: var(--color-border-active);
    transform: translateY(-2px);
}

.adventure-card.locked[b-nclome5jxu] {
    opacity: 0.6;
}

.adventure-header[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.adventure-name[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-primary);
}

.adventure-meta[b-nclome5jxu] {
    display: flex;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.level-range[b-nclome5jxu] {
    color: var(--color-text-light);
    font-weight: 600;
}

.adventure-description[b-nclome5jxu] {
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.adventure-btn[b-nclome5jxu] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: var(--color-success) !important;
    font-weight: 600 !important;
}

.locked-overlay-small[b-nclome5jxu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 6px;
    color: var(--color-warning);
    font-size: 0.875rem;
    font-weight: 600;
}

.view-all-btn[b-nclome5jxu] {
    margin-top: 0.5rem;
    color: var(--color-text-light) !important;
}

.no-adventures[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.no-adventures-icon[b-nclome5jxu] {
    font-size: 3rem !important;
    color: #475569;
    margin-bottom: 1rem;
}

.no-adventures p[b-nclome5jxu] {
    color: var(--color-text-secondary);
    margin: 0;
}

/* ========================================
   No Character State
   ======================================== */

.no-character-panel[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.no-character-panel .warning-icon[b-nclome5jxu] {
    font-size: 4rem !important;
    color: var(--color-warning);
    margin-bottom: 1.5rem;
}

.no-character-title[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.no-character-text[b-nclome5jxu] {
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.btn-primary[b-nclome5jxu] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-gray-900) !important;
    font-weight: 600;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) { 
    .character-sheet-container[b-nclome5jxu] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .hero-header[b-nclome5jxu] {
        flex-direction: column;
        padding: 1.5rem;
    }

    .hero-header-left[b-nclome5jxu] {
        flex-direction: column;
        width: 100%;
    }

    .hero-info[b-nclome5jxu] {
        width: 100%;
    }

    .hero-name[b-nclome5jxu] {
        font-size: 1.8rem;
    }

    .hero-subtitle[b-nclome5jxu] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .hero-header-right[b-nclome5jxu] {
        align-items: center;
        width: 100%;
    }

    .hero-stat-badges[b-nclome5jxu] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .abilities-grid-detailed[b-nclome5jxu] {
        grid-template-columns: 1fr;
    }

    .currency-grid[b-nclome5jxu] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .improvements-list[b-nclome5jxu] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .character-sheet-container[b-nclome5jxu] {
        padding: 0.75rem;
        gap: 1rem;
    }

    .hero-name[b-nclome5jxu] {
        font-size: 1.5rem;
    }

    .hero-stat-badges[b-nclome5jxu] {
        gap: 0.5rem;
    }

    .stat-badge[b-nclome5jxu] {
        padding: 0.5rem 0.75rem;
    }

    .combat-grid[b-nclome5jxu] {
        grid-template-columns: 1fr;
    }
}

/* Active Companion Row */
.companion-row[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.15);
    border-radius: 8px;
    margin-top: 10px;
}

.companion-portrait-wrap[b-nclome5jxu] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(251,191,36,0.4);
}

.companion-portrait[b-nclome5jxu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.companion-info[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.companion-name[b-nclome5jxu] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.companion-level[b-nclome5jxu] {
    font-size: 0.68rem;
    color: #94a3b8;
}

.companion-gem[b-nclome5jxu] {
    font-size: 0.6rem;
}
.companion-gem.stage-1[b-nclome5jxu] { color: #94a3b8; }
.companion-gem.stage-2[b-nclome5jxu] { color: #22d3ee; }
.companion-gem.stage-3[b-nclome5jxu] { color: #fbbf24; }
/* /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: var(--color-primary);
    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: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.header-subtitle[b-oz535gjkut] {
    color: var(--color-text-light);
    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.3);
}

.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: var(--color-info);
}

.stat-icon-success[b-oz535gjkut] {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
}

.stat-icon-warning[b-oz535gjkut] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.stat-icon-primary[b-oz535gjkut] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
}

.stat-details[b-oz535gjkut] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-details h3[b-oz535gjkut] {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.75rem;
    margin: 0;
}

.stat-label[b-oz535gjkut] {
    color: var(--color-text-light);
    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 var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-text-primary);
    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: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-input[b-oz535gjkut]::placeholder {
    color: var(--color-text-secondary);
}

.form-select option[b-oz535gjkut] {
    background: var(--color-gray-800);
    color: var(--color-text-primary);
}

.input-icon[b-oz535gjkut] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary);
    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: var(--color-primary);
    color: var(--color-gray-900);
}

.btn-primary:hover[b-oz535gjkut] {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--color-border-active);
}

.btn-outline[b-oz535gjkut] {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.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: var(--color-info);
    border-color: rgba(59, 130, 246, 0.3);
}

.btn-icon-primary:hover[b-oz535gjkut] {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--color-info);
}

.btn-icon-success[b-oz535gjkut] {
    color: var(--color-success);
    border-color: rgba(34, 197, 94, 0.3);
}

.btn-icon-success:hover[b-oz535gjkut] {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--color-success);
}

.btn-icon-info[b-oz535gjkut] {
    color: var(--color-info-light);
    border-color: rgba(96, 165, 250, 0.3);
}

.btn-icon-info:hover[b-oz535gjkut] {
    background: rgba(96, 165, 250, 0.1);
    border-color: var(--color-info-light);
}

.btn-icon-error[b-oz535gjkut] {
    color: var(--color-danger-light);
    border-color: rgba(248, 113, 113, 0.3);
}

.btn-icon-error:hover[b-oz535gjkut] {
    background: rgba(248, 113, 113, 0.1);
    border-color: var(--color-danger-light);
}

/* 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, var(--color-primary) 0%, #ffed4e 50%, var(--color-primary) 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: var(--color-text-secondary);
}

.empty-state svg[b-oz535gjkut] {
    width: 64px;
    height: 64px;
    color: #475569;
}

.empty-state h3[b-oz535gjkut] {
    margin: 0;
    color: var(--color-text-light);
    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 var(--color-border-hover);
}

.posts-table th[b-oz535gjkut] {
    padding: 1rem;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    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: var(--color-text-light);
    vertical-align: top;
}

.post-title-cell[b-oz535gjkut] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.post-title[b-oz535gjkut] {
    font-weight: 600;
    color: var(--color-text-primary);
    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 var(--color-border-hover);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.tag-more[b-oz535gjkut] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.text-muted[b-oz535gjkut] {
    color: var(--color-text-secondary);
}

.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: var(--color-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

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

.badge-default[b-oz535gjkut] {
    background: rgba(148, 163, 184, 0.1);
    color: var(--color-text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

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

.badge-primary[b-oz535gjkut] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
    border: 1px solid var(--color-border-active);
}

.badge-secondary[b-oz535gjkut] {
    background: rgba(139, 92, 246, 0.1);
    color: var(--color-monk);
    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: var(--color-primary);
        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.3);
    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 var(--color-border-hover);
}

.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, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-tzodqnyl78] {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.header-actions[b-tzodqnyl78] {
    display: flex;
    gap: 0.75rem;
}

/* Loading Container */
.loading-container[b-tzodqnyl78] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    color: var(--color-text-secondary);
}

/* Stat Cards */
.stat-card[b-tzodqnyl78] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
}

.stat-card:hover[b-tzodqnyl78] {
    transform: translateY(-4px);
    border-color: var(--color-border-active);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(255, 215, 0, 0.1);
}

.stat-card-success[b-tzodqnyl78] {
    border-top: 3px solid var(--color-success);
}

.stat-card-info[b-tzodqnyl78] {
    border-top: 3px solid var(--color-info);
}

.stat-card-warning[b-tzodqnyl78] {
    border-top: 3px solid var(--color-warning);
}

.stat-card-error[b-tzodqnyl78] {
    border-top: 3px solid var(--color-danger);
}

[b-tzodqnyl78] .stat-card .mud-card-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem !important;
}

.stat-icon[b-tzodqnyl78] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
}

.stat-content[b-tzodqnyl78] {
    flex: 1;
}

.stat-label[b-tzodqnyl78] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-value[b-tzodqnyl78] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: 'Cinzel', serif;
}

/* Card Header Title */
.card-header-title[b-tzodqnyl78] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

/* Metrics Tables */
.metrics-table[b-tzodqnyl78] {
    background: transparent !important;
}

[b-tzodqnyl78] .metrics-table td {
    border-bottom: 1px solid rgba(255, 215, 0, 0.05) !important;
    padding: 0.75rem 0.5rem !important;
    color: var(--color-text-primary);
}

[b-tzodqnyl78] .metrics-table tr:last-child td {
    border-bottom: none !important;
}

[b-tzodqnyl78] .metrics-table tbody tr:hover {
    background: rgba(255, 215, 0, 0.05) !important;
}

.text-right[b-tzodqnyl78] {
    text-align: right !important;
}

.success-text[b-tzodqnyl78] {
    color: var(--color-success) !important;
    font-weight: 600;
}

.error-text[b-tzodqnyl78] {
    color: var(--color-danger) !important;
    font-weight: 600;
}

.warning-text[b-tzodqnyl78] {
    color: var(--color-warning) !important;
    font-weight: 600;
}

/* Subsection Title */
.subsection-title[b-tzodqnyl78] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Activity Feed */
.activity-feed[b-tzodqnyl78] {
    max-height: 500px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.activity-item[b-tzodqnyl78] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.05);
    transition: all 0.2s ease;
}

.activity-item:hover[b-tzodqnyl78] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-base);
}

.activity-icon[b-tzodqnyl78] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
    flex-shrink: 0;
}

.activity-content[b-tzodqnyl78] {
    flex: 1;
    min-width: 0;
}

.activity-description[b-tzodqnyl78] {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.activity-description strong[b-tzodqnyl78] {
    color: var(--color-primary);
    font-weight: 600;
}

.activity-time[b-tzodqnyl78] {
    color: var(--color-text-tertiary);
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-dashboard[b-tzodqnyl78] {
        padding: 1rem;
    }

    .dashboard-header[b-tzodqnyl78] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-tzodqnyl78] {
        width: 100%;
    }

    .header-actions button[b-tzodqnyl78] {
        flex: 1;
    }

    .page-title[b-tzodqnyl78] {
        font-size: 1.5rem;
    }

    .stat-value[b-tzodqnyl78] {
        font-size: 1.5rem;
    }

    .stat-icon[b-tzodqnyl78] {
        width: 48px;
        height: 48px;
    }
}

/* Custom Scrollbar for Activity Feed */
.activity-feed[b-tzodqnyl78]::-webkit-scrollbar {
    width: 8px;
}

.activity-feed[b-tzodqnyl78]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.activity-feed[b-tzodqnyl78]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: 4px;
}

.activity-feed[b-tzodqnyl78]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5);
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* Admin Users Page Styles */
.admin-users-page[b-73i8al9my5] {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-73i8al9my5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-73i8al9my5] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    display: flex;
    align-items: center;
    text-shadow: 0 0 10px var(--color-border-active);
}

.page-subtitle[b-73i8al9my5] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0 0 0;
}

.header-actions[b-73i8al9my5] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Statistics Cards */
.stat-card[b-73i8al9my5] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-hover);
    transition: all 0.3s ease;
}

.stat-card:hover[b-73i8al9my5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--color-border-hover);
    border-color: var(--color-border-active);
}

.stat-card .mud-card-content[b-73i8al9my5] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem !important;
}

.stat-icon[b-73i8al9my5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-active);
}

.stat-icon .mud-icon-root[b-73i8al9my5] {
    color: var(--color-primary);
}

.stat-content[b-73i8al9my5] {
    flex: 1;
}

.stat-label[b-73i8al9my5] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

/* Stat Card Variants */
.stat-card-info .stat-icon[b-73i8al9my5] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.stat-card-info .stat-icon .mud-icon-root[b-73i8al9my5] {
    color: var(--color-info);
}

.stat-card-info .stat-value[b-73i8al9my5] {
    color: var(--color-info);
}

.stat-card-warning .stat-icon[b-73i8al9my5] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.stat-card-warning .stat-icon .mud-icon-root[b-73i8al9my5] {
    color: var(--color-warning);
}

.stat-card-warning .stat-value[b-73i8al9my5] {
    color: var(--color-warning);
}

.stat-card-success .stat-icon[b-73i8al9my5] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.stat-card-success .stat-icon .mud-icon-root[b-73i8al9my5] {
    color: var(--color-success);
}

.stat-card-success .stat-value[b-73i8al9my5] {
    color: var(--color-success);
}

.stat-card-primary .stat-icon[b-73i8al9my5] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.stat-card-primary .stat-icon .mud-icon-root[b-73i8al9my5] {
    color: var(--color-monk);
}

.stat-card-primary .stat-value[b-73i8al9my5] {
    color: var(--color-monk);
}

/* Table Card */
.card-header-title[b-73i8al9my5] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

.search-field[b-73i8al9my5] {
    min-width: 300px;
}

.search-field .mud-input-root[b-73i8al9my5] {
    background: rgba(0, 0, 0, 0.3);
}

/* Loading State */
.loading-container[b-73i8al9my5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Empty State */
.empty-state[b-73i8al9my5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.5);
}

.empty-state .mud-icon-root[b-73i8al9my5] {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Users Table */
.users-table[b-73i8al9my5] {
    background: transparent;
}

.users-table .mud-table-head .mud-table-cell[b-73i8al9my5] {
    background: rgba(255, 215, 0, 0.05);
    border-bottom: 2px solid var(--color-border-active);
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.users-table .mud-table-row:hover[b-73i8al9my5] {
    background: rgba(255, 215, 0, 0.05);
}

.users-table .mud-table-cell[b-73i8al9my5] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* User Cell */
.user-cell[b-73i8al9my5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-email[b-73i8al9my5] {
    font-weight: 500;
    color: #fff;
    font-size: 0.95rem;
}

.user-id[b-73i8al9my5] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
}

/* Status Badges */
.status-badges[b-73i8al9my5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Date Cell */
.date-cell[b-73i8al9my5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-cell > div:first-child[b-73i8al9my5] {
    color: #fff;
    font-size: 0.9rem;
}

.date-relative[b-73i8al9my5] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

/* Dialog Styles */
.dialog-title[b-73i8al9my5] {
    font-family: 'Cinzel', serif;
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

.edit-dialog-content[b-73i8al9my5] {
    padding-top: 1rem;
}

.role-option[b-73i8al9my5] {
    display: flex;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 960px) {
    .admin-users-page[b-73i8al9my5] {
        padding: 1rem;
    }

    .page-header[b-73i8al9my5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title[b-73i8al9my5] {
        font-size: 2rem;
    }

    .header-actions[b-73i8al9my5] {
        width: 100%;
    }

    .search-field[b-73i8al9my5] {
        min-width: auto;
        width: 100%;
    }

    .stat-card .mud-card-content[b-73i8al9my5] {
        padding: 1rem !important;
    }

    .stat-icon[b-73i8al9my5] {
        width: 50px;
        height: 50px;
    }

    .stat-value[b-73i8al9my5] {
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    .page-title[b-73i8al9my5] {
        font-size: 1.5rem;
    }

    .stat-card .mud-card-content[b-73i8al9my5] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .stat-content[b-73i8al9my5] {
        width: 100%;
    }
}
/* /Components/Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* Shared authentication page styles - Forgot Password & Reset Password */

[b-y47c9xc3s4] .login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-y47c9xc3s4] .login-paper {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(255, 215, 0, 0.1);
    padding: 3rem 2.5rem;
    max-width: 480px;
    width: 100%;
    margin: auto;
}

[b-y47c9xc3s4] .login-title {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px var(--color-border-hover);
}

[b-y47c9xc3s4] .login-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

[b-y47c9xc3s4] .login-form-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

[b-y47c9xc3s4] .mud-text-field {
    --text-field-background: rgba(0, 0, 0, 0.3);
}

[b-y47c9xc3s4] .mud-text-field .mud-input {
    color: var(--color-text-primary);
}

[b-y47c9xc3s4] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

[b-y47c9xc3s4] .mud-text-field .mud-input-underline {
    display: none;
}

[b-y47c9xc3s4] .mud-text-field .mud-input-outlined {
    border: 1px solid var(--color-border-hover);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-y47c9xc3s4] .mud-text-field .mud-input-outlined:hover {
    border-color: var(--color-border-active);
}

[b-y47c9xc3s4] .mud-text-field .mud-input-outlined:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-border-hover);
}

[b-y47c9xc3s4] .mud-text-field-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-y47c9xc3s4] .mud-text-field-outlined .mud-notched-outline {
    border: 1px solid var(--color-border-hover);
}

[b-y47c9xc3s4] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: var(--color-border-active);
}

[b-y47c9xc3s4] .login-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-gray-900);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-border-active);
    margin-top: 1.5rem;
}

[b-y47c9xc3s4] .login-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

[b-y47c9xc3s4] .login-button:active:not(:disabled) {
    transform: translateY(0);
}

[b-y47c9xc3s4] .login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

[b-y47c9xc3s4] .mud-progress-circular {
    color: var(--color-gray-900) !important;
}

[b-y47c9xc3s4] .login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--color-danger-lighter);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

[b-y47c9xc3s4] .login-divider {
    border-color: var(--color-border-base);
    margin: 1.5rem 0;
}

[b-y47c9xc3s4] .login-footer {
    text-align: center;
    margin-top: 1.5rem;
}

[b-y47c9xc3s4] .login-footer-text {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

[b-y47c9xc3s4] .login-footer-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

[b-y47c9xc3s4] .login-footer-link:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}

/* Alert styles */
[b-y47c9xc3s4] .mud-alert {
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

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

[b-y47c9xc3s4] .mud-alert-filled-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger-lighter);
}

/* Password requirements box */
[b-y47c9xc3s4] .password-requirements {
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid var(--color-primary);
    padding: 0.75rem;
    margin: 1rem 0;
    border-radius: 4px;
}

[b-y47c9xc3s4] .password-requirements strong {
    color: var(--color-primary);
}

/* Outlined button style */
[b-y47c9xc3s4] .mud-button-outlined {
    border-color: var(--color-border-active);
    color: var(--color-primary);
    transition: all 0.3s ease;
}

[b-y47c9xc3s4] .mud-button-outlined:hover {
    border-color: var(--color-primary);
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
[b-be9mscd9b5] .login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-be9mscd9b5] .login-paper {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(255, 215, 0, 0.1);
    padding: 3rem 2.5rem;
    max-width: 420px;
    width: 100%;
    margin: auto;
}

[b-be9mscd9b5] .login-title {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px var(--color-border-hover);
}

[b-be9mscd9b5] .login-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

[b-be9mscd9b5] .login-form-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

[b-be9mscd9b5] .mud-text-field {
    --text-field-background: rgba(0, 0, 0, 0.3);
}

[b-be9mscd9b5] .mud-text-field .mud-input {
    color: var(--color-text-primary);
}

[b-be9mscd9b5] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

[b-be9mscd9b5] .mud-text-field .mud-input-underline {
    display: none;
}

[b-be9mscd9b5] .mud-text-field .mud-input-outlined {
    border: 1px solid var(--color-border-hover);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-be9mscd9b5] .mud-text-field .mud-input-outlined:hover {
    border-color: var(--color-border-active);
}

[b-be9mscd9b5] .mud-text-field .mud-input-outlined:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-border-hover);
}

[b-be9mscd9b5] .mud-text-field-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline {
    border: 1px solid var(--color-border-hover);
}

[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: var(--color-border-active);
}

[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline-trailing,
[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline-leading {
    border-top-color: var(--color-border-hover);
}

[b-be9mscd9b5] .login-remember-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

[b-be9mscd9b5] .mud-checkbox {
    margin: 0;
}

[b-be9mscd9b5] .mud-checkbox-root {
    color: var(--color-primary);
}

[b-be9mscd9b5] .remember-label {
    color: var(--color-text-light);
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

[b-be9mscd9b5] .remember-label:hover {
    color: var(--color-primary);
}

[b-be9mscd9b5] .forgot-password-link {
    transition: all 0.3s ease;
}

[b-be9mscd9b5] .forgot-password-link:hover {
    color: var(--color-primary-light) !important;
    text-decoration: underline !important;
}

[b-be9mscd9b5] .login-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-gray-900);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-border-active);
    margin-bottom: 1.5rem;
}

[b-be9mscd9b5] .login-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

[b-be9mscd9b5] .login-button:active:not(:disabled) {
    transform: translateY(0);
}

[b-be9mscd9b5] .login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

[b-be9mscd9b5] .mud-progress-circular {
    color: var(--color-gray-900) !important;
}

[b-be9mscd9b5] .login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--color-danger-lighter);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

[b-be9mscd9b5] .login-divider {
    border-color: var(--color-border-base);
    margin: 1.5rem 0;
}

[b-be9mscd9b5] .login-footer {
    text-align: center;
}

[b-be9mscd9b5] .login-footer-text {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

[b-be9mscd9b5] .login-footer-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

[b-be9mscd9b5] .login-footer-link:hover {
    color: var(--color-primary-light);
    text-shadow: 0 0 10px var(--color-border-active);
}

[b-be9mscd9b5] .mud-form {
    width: 100%;
}

/* Responsive */
@@media (max-width: 599px) {
    [b-be9mscd9b5] .login-paper {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    [b-be9mscd9b5] .login-title {
        font-size: 1.5rem;
    }

    [b-be9mscd9b5] .login-form-group {
        gap: 1rem;
        margin-bottom: 1rem;
    }
}

/* Animations */
@@keyframes fadeIn {
    from[b-be9mscd9b5] {
        opacity: 0;
        transform: translateY(20px);
    }
    to[b-be9mscd9b5] {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-be9mscd9b5] .login-paper {
    animation: fadeIn 0.5s ease-out;
}

/* Accessibility */
@@media (prefers-reduced-motion: reduce) {
    [b-be9mscd9b5] .login-button {
        transition: none;
    }

    [b-be9mscd9b5] .login-paper {
        animation: none;
    }

    [b-be9mscd9b5] .login-footer-link {
        transition: none;
    }
}

/* MudBlazor overrides for consistency */
[b-be9mscd9b5] .mud-input-base-root input {
    font-family: inherit;
}

[b-be9mscd9b5] .mud-input-base-root input::placeholder {
    color: var(--color-text-tertiary);
    opacity: 0.8;
}

[b-be9mscd9b5] .mud-checkbox-root input {
    cursor: pointer;
}
/* /Components/Pages/Auth/ResetPassword.razor.rz.scp.css */
/* Shared authentication page styles - Reset Password */

[b-w25u27kobd] .login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-w25u27kobd] .login-paper {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(255, 215, 0, 0.1);
    padding: 3rem 2.5rem;
    max-width: 480px;
    width: 100%;
    margin: auto;
}

[b-w25u27kobd] .login-title {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px var(--color-border-hover);
}

[b-w25u27kobd] .login-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

[b-w25u27kobd] .login-form-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

[b-w25u27kobd] .mud-text-field {
    --text-field-background: rgba(0, 0, 0, 0.3);
}

[b-w25u27kobd] .mud-text-field .mud-input {
    color: var(--color-text-primary);
}

[b-w25u27kobd] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

[b-w25u27kobd] .mud-text-field .mud-input-underline {
    display: none;
}

[b-w25u27kobd] .mud-text-field .mud-input-outlined {
    border: 1px solid var(--color-border-hover);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-w25u27kobd] .mud-text-field .mud-input-outlined:hover {
    border-color: var(--color-border-active);
}

[b-w25u27kobd] .mud-text-field .mud-input-outlined:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-border-hover);
}

[b-w25u27kobd] .mud-text-field-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-w25u27kobd] .mud-text-field-outlined .mud-notched-outline {
    border: 1px solid var(--color-border-hover);
}

[b-w25u27kobd] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: var(--color-border-active);
}

[b-w25u27kobd] .login-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-gray-900);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-border-active);
    margin-top: 1.5rem;
}

[b-w25u27kobd] .login-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

[b-w25u27kobd] .login-button:active:not(:disabled) {
    transform: translateY(0);
}

[b-w25u27kobd] .login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

[b-w25u27kobd] .mud-progress-circular {
    color: var(--color-gray-900) !important;
}

[b-w25u27kobd] .login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--color-danger-lighter);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

/* Alert styles */
[b-w25u27kobd] .mud-alert {
    border-radius: 8px;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

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

[b-w25u27kobd] .mud-alert-filled-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger-lighter);
}

[b-w25u27kobd] .mud-alert .mud-alert-icon {
    color: inherit;
}

/* Password requirements box */
.password-requirements[b-w25u27kobd] {
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid var(--color-primary);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.password-requirements strong[b-w25u27kobd] {
    color: var(--color-primary);
}

/* Outlined button style */
[b-w25u27kobd] .mud-button-outlined {
    border-color: var(--color-border-active);
    color: var(--color-primary);
    transition: all 0.3s ease;
}

[b-w25u27kobd] .mud-button-outlined:hover {
    border-color: var(--color-primary);
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}
/* /Components/Pages/Auth/Signup.razor.rz.scp.css */
/* Signup Page Styles - Matches Login.razor.css with additional features */

[b-jiepl7sjeg] .signup-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-jiepl7sjeg] .signup-paper {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(255, 215, 0, 0.1);
    padding: 3rem 2.5rem;
    max-width: 420px;
    width: 100%;
    margin: auto;
}

[b-jiepl7sjeg] .signup-title {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px var(--color-border-hover);
}

[b-jiepl7sjeg] .signup-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

[b-jiepl7sjeg] .signup-form-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

/* Text Field Styling */
[b-jiepl7sjeg] .mud-text-field {
    --text-field-background: rgba(0, 0, 0, 0.3);
}

[b-jiepl7sjeg] .mud-text-field .mud-input {
    color: var(--color-text-primary);
}

[b-jiepl7sjeg] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

[b-jiepl7sjeg] .mud-text-field .mud-input-underline {
    display: none;
}

[b-jiepl7sjeg] .mud-text-field .mud-input-outlined {
    border: 1px solid var(--color-border-hover);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-jiepl7sjeg] .mud-text-field .mud-input-outlined:hover {
    border-color: var(--color-border-active);
}

[b-jiepl7sjeg] .mud-text-field .mud-input-outlined:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-border-hover);
}

[b-jiepl7sjeg] .mud-text-field-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline {
    border: 1px solid var(--color-border-hover);
}

[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: var(--color-border-active);
}

[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline-trailing,
[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline-leading {
    border-top-color: var(--color-border-hover);
}

/* Password Requirements */
[b-jiepl7sjeg] .password-requirements {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

[b-jiepl7sjeg] .requirements-icon {
    color: var(--color-info-light);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

[b-jiepl7sjeg] .requirement-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    transition: color 0.3s ease;
}

[b-jiepl7sjeg] .requirement-item.valid {
    color: var(--color-success-light);
}

[b-jiepl7sjeg] .requirement-item .mud-icon-root {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
}

[b-jiepl7sjeg] .requirement-item.valid .mud-icon-root {
    color: var(--color-success-light);
}

/* Buttons */
[b-jiepl7sjeg] .signup-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-gray-900);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-border-active);
    margin-bottom: 1.5rem;
}

[b-jiepl7sjeg] .signup-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

[b-jiepl7sjeg] .signup-button:active:not(:disabled) {
    transform: translateY(0);
}

[b-jiepl7sjeg] .signup-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

[b-jiepl7sjeg] .login-link-button {
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-jiepl7sjeg] .login-link-button:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* Error Message */
[b-jiepl7sjeg] .signup-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--color-danger-lighter);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

/* Divider */
[b-jiepl7sjeg] .signup-divider {
    text-align: center;
    position: relative;
    margin: 1.5rem 0;
}

[b-jiepl7sjeg] .signup-divider span {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    padding: 0 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
}

[b-jiepl7sjeg] .signup-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border-base);
    z-index: 0;
}

/* Email Verification Notice */
[b-jiepl7sjeg] .email-verification-notice {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    animation: slideUpFade-b-jiepl7sjeg 0.5s ease-out;
}

[b-jiepl7sjeg] .verification-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

[b-jiepl7sjeg] .verification-icon .mud-icon-root {
    font-size: 4rem;
    color: var(--color-success-light);
    filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.4));
}

[b-jiepl7sjeg] .verification-title {
    font-family: 'Cinzel', serif;
    color: var(--color-success-light);
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(74, 222, 128, 0.2);
}

[b-jiepl7sjeg] .verification-message {
    color: var(--color-text-lighter);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

[b-jiepl7sjeg] .verification-message strong {
    color: var(--color-primary);
    font-weight: 600;
}

[b-jiepl7sjeg] .verification-instructions {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

[b-jiepl7sjeg] .verification-note {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

[b-jiepl7sjeg] .verification-note .mud-icon-root {
    color: var(--color-info-light);
    font-size: 1rem;
    flex-shrink: 0;
}

[b-jiepl7sjeg] .verification-note span {
    color: var(--color-text-light);
    font-size: 0.8rem;
    text-align: left;
}

/* Progress Circular */
[b-jiepl7sjeg] .mud-progress-circular {
    color: var(--color-gray-900) !important;
}

/* Responsive */
@media (max-width: 599px) {
    [b-jiepl7sjeg] .signup-paper {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    [b-jiepl7sjeg] .signup-title {
        font-size: 1.5rem;
    }

    [b-jiepl7sjeg] .signup-form-group {
        gap: 1rem;
        margin-bottom: 1rem;
    }

    [b-jiepl7sjeg] .email-verification-notice {
        padding: 1.5rem;
    }

    [b-jiepl7sjeg] .verification-icon .mud-icon-root {
        font-size: 3rem;
    }
}

/* Animations */
@keyframes fadeIn-b-jiepl7sjeg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpFade-b-jiepl7sjeg {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

[b-jiepl7sjeg] .signup-paper {
    animation: fadeIn-b-jiepl7sjeg 0.5s ease-out;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    [b-jiepl7sjeg] .signup-button,
    [b-jiepl7sjeg] .login-link-button {
        transition: none;
    }

    [b-jiepl7sjeg] .signup-paper,
    [b-jiepl7sjeg] .email-verification-notice {
        animation: none;
    }
}
/* /Components/Pages/Characters/Characters.razor.rz.scp.css */
/* Characters Page Styles - Updated January 2025 */

/* ===== Page Header ===== */
.page-header[b-zy3wbuwm0q] {
    text-align: center;
    margin-bottom: 2rem;
}

.page-title[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.page-subtitle[b-zy3wbuwm0q] {
    color: var(--color-text-tertiary);
    font-size: 1rem;
}

/* ===== Character Slots Banner ===== */
.character-slots-banner[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.slots-info[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.slots-text strong[b-zy3wbuwm0q] {
    color: var(--color-primary);
}

/* ===== Character Limit Notice ===== */
.character-limit-notice[b-zy3wbuwm0q] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid rgba(245, 158, 11, 0.3);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.character-limit-notice strong[b-zy3wbuwm0q] {
    color: var(--color-primary);
}

/* ===== Animations ===== */
@keyframes fadeIn-b-zy3wbuwm0q {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-zy3wbuwm0q {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromRight-b-zy3wbuwm0q {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulseGlow-b-zy3wbuwm0q {
    0%, 100% { box-shadow: 0 0 20px var(--color-border-active); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }
}

@keyframes diceRoll-b-zy3wbuwm0q {
    0% { transform: rotateY(0deg) scale(0.8); opacity: 0.5; }
    25% { transform: rotateY(90deg) scale(1.1); }
    50% { transform: rotateY(180deg) scale(0.9); }
    75% { transform: rotateY(270deg) scale(1.05); }
    100% { transform: rotateY(360deg) scale(1); opacity: 1; }
}

@keyframes statReveal-b-zy3wbuwm0q {
    from { opacity: 0; transform: scale(0.8) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes shimmer-b-zy3wbuwm0q {
    to { background-position: 200% center; }
}

@keyframes borderGlow-b-zy3wbuwm0q {
    0%, 100% { border-color: var(--color-border-active); }
    50% { border-color: rgba(255, 215, 0, 0.6); }
}

.fade-in[b-zy3wbuwm0q] {
    animation: fadeIn-b-zy3wbuwm0q 0.5s ease-out;
}

.step-slide-in[b-zy3wbuwm0q] {
    animation: slideUp-b-zy3wbuwm0q 0.4s ease-out;
}

.pulse-glow[b-zy3wbuwm0q] {
    animation: pulseGlow-b-zy3wbuwm0q 2s ease-in-out infinite;
}

.dice-roll-animation[b-zy3wbuwm0q] {
    animation: diceRoll-b-zy3wbuwm0q 0.6s ease-out;
}

.stat-reveal[b-zy3wbuwm0q] {
    animation: statReveal-b-zy3wbuwm0q 0.5s ease-out backwards;
}

/* ===== Creation Container ===== */
.creation-container[b-zy3wbuwm0q] {
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== Progress Indicator ===== */
.creation-progress[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.progress-step[b-zy3wbuwm0q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.step-icon[b-zy3wbuwm0q] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--color-text-tertiary);
    transition: all 0.3s ease;
}

.progress-step.active .step-icon[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-color: var(--color-primary);
    color: var(--color-gray-900);
    box-shadow: 0 0 20px var(--color-border-active);
}

.progress-step.completed .step-icon[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    border-color: var(--color-success);
    color: white;
}

.step-label[b-zy3wbuwm0q] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    transition: color 0.3s ease;
}

.progress-step.active .step-label[b-zy3wbuwm0q],
.progress-step.completed .step-label[b-zy3wbuwm0q] {
    color: var(--color-primary);
}

.progress-line[b-zy3wbuwm0q] {
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    transition: background 0.3s ease;
}

.progress-line.active[b-zy3wbuwm0q] {
    background: linear-gradient(90deg, var(--color-success), var(--color-primary));
}

/* ===== Creation Step ===== */
.creation-step[b-zy3wbuwm0q] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1rem;
}

.step-header[b-zy3wbuwm0q] {
    text-align: center;
    margin-bottom: 2rem;
}

.step-title[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.step-subtitle[b-zy3wbuwm0q] {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

/* ===== Form Styles ===== */
.form-grid[b-zy3wbuwm0q] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
}

.form-row[b-zy3wbuwm0q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-section[b-zy3wbuwm0q] {
    width: 100%;
}

[b-zy3wbuwm0q] .fantasy-input .mud-input-outlined .mud-input-root {
    background: rgba(15, 23, 42, 0.8);
}

[b-zy3wbuwm0q] .fantasy-input .mud-input-label {
    color: var(--color-text-secondary);
}

.race-info-card[b-zy3wbuwm0q] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: var(--color-info-lighter);
    font-size: 0.9rem;
}

.race-info-icon[b-zy3wbuwm0q] {
    color: var(--color-info-light);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== Class Selection Grid ===== */
.class-grid[b-zy3wbuwm0q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .class-grid[b-zy3wbuwm0q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .class-grid[b-zy3wbuwm0q] {
        grid-template-columns: 1fr;
    }
    
    .form-row[b-zy3wbuwm0q] {
        grid-template-columns: 1fr;
    }
}

/* ===== Class Card ===== */
.class-card[b-zy3wbuwm0q] {
    position: relative;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.class-card:hover[b-zy3wbuwm0q] {
    transform: translateY(-4px);
    border-color: var(--color-border-active);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.class-card.selected[b-zy3wbuwm0q] {
    border-color: var(--color-primary);
    animation: borderGlow-b-zy3wbuwm0q 2s ease-in-out infinite;
}

.class-card-glow[b-zy3wbuwm0q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.class-card:hover .class-card-glow[b-zy3wbuwm0q],
.class-card.selected .class-card-glow[b-zy3wbuwm0q] {
    opacity: 1;
}

.class-card-content[b-zy3wbuwm0q] {
    position: relative;
    z-index: 1;
}

/* Class-specific colors */
.class-card.warrior .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, var(--color-danger), transparent); }
.class-card.wizard .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, var(--color-info), transparent); }
.class-card.ranger .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, var(--color-success), transparent); }
.class-card.rogue .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, var(--color-rogue), transparent); }
.class-card.paladin .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, var(--color-warning), transparent); }
.class-card.bard .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, var(--color-bard), transparent); }
.class-card.cleric .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, var(--color-cleric), transparent); }
.class-card.monk .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, var(--color-monk), transparent); }
.class-card.barbarian .class-card-glow[b-zy3wbuwm0q] { background: linear-gradient(90deg, transparent, var(--color-barbarian), transparent); }

.class-card.warrior .class-icon-container[b-zy3wbuwm0q] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05)); border-color: rgba(239, 68, 68, 0.3); color: var(--color-danger); }
.class-card.wizard .class-icon-container[b-zy3wbuwm0q] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05)); border-color: rgba(59, 130, 246, 0.3); color: var(--color-info); }
.class-card.ranger .class-icon-container[b-zy3wbuwm0q] { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05)); border-color: rgba(34, 197, 94, 0.3); color: var(--color-success); }
.class-card.rogue .class-icon-container[b-zy3wbuwm0q] { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05)); border-color: rgba(99, 102, 241, 0.3); color: var(--color-rogue); }
.class-card.paladin .class-icon-container[b-zy3wbuwm0q] { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05)); border-color: rgba(245, 158, 11, 0.3); color: var(--color-warning); }
.class-card.bard .class-icon-container[b-zy3wbuwm0q] { background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.05)); border-color: rgba(236, 72, 153, 0.3); color: var(--color-bard); }
.class-card.cleric .class-icon-container[b-zy3wbuwm0q] { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05)); border-color: rgba(16, 185, 129, 0.3); color: var(--color-cleric); }
.class-card.monk .class-icon-container[b-zy3wbuwm0q] { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05)); border-color: rgba(139, 92, 246, 0.3); color: var(--color-monk); }
.class-card.barbarian .class-icon-container[b-zy3wbuwm0q] { background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(220, 38, 38, 0.05)); border-color: rgba(220, 38, 38, 0.3); color: var(--color-barbarian); }

.class-card.warrior.selected[b-zy3wbuwm0q] { border-color: var(--color-danger); box-shadow: 0 0 30px rgba(239, 68, 68, 0.3); }
.class-card.wizard.selected[b-zy3wbuwm0q] { border-color: var(--color-info); box-shadow: 0 0 30px rgba(59, 130, 246, 0.3); }
.class-card.ranger.selected[b-zy3wbuwm0q] { border-color: var(--color-success); box-shadow: 0 0 30px rgba(34, 197, 94, 0.3); }
.class-card.rogue.selected[b-zy3wbuwm0q] { border-color: var(--color-rogue); box-shadow: 0 0 30px rgba(99, 102, 241, 0.3); }
.class-card.paladin.selected[b-zy3wbuwm0q] { border-color: var(--color-warning); box-shadow: 0 0 30px rgba(245, 158, 11, 0.3); }
.class-card.bard.selected[b-zy3wbuwm0q] { border-color: var(--color-bard); box-shadow: 0 0 30px rgba(236, 72, 153, 0.3); }
.class-card.cleric.selected[b-zy3wbuwm0q] { border-color: var(--color-cleric); box-shadow: 0 0 30px rgba(16, 185, 129, 0.3); }
.class-card.monk.selected[b-zy3wbuwm0q] { border-color: var(--color-monk); box-shadow: 0 0 30px rgba(139, 92, 246, 0.3); }
.class-card.barbarian.selected[b-zy3wbuwm0q] { border-color: var(--color-barbarian); box-shadow: 0 0 30px rgba(220, 38, 38, 0.3); }

.class-icon-container[b-zy3wbuwm0q] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: all 0.3s ease;
}

.class-card:hover .class-icon-container[b-zy3wbuwm0q] {
    transform: scale(1.1);
}

.class-name[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: 0.25rem;
}

.class-role[b-zy3wbuwm0q] {
    font-size: 0.75rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 0.75rem;
}

.class-description[b-zy3wbuwm0q] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 1rem;
    min-height: 40px;
}

.class-features[b-zy3wbuwm0q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.class-feature[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.feature-icon[b-zy3wbuwm0q] {
    color: var(--color-primary);
}

.class-armor-types[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.armor-label[b-zy3wbuwm0q] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-weight: 600;
}

.armor-badge[b-zy3wbuwm0q] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.armor-badge.light[b-zy3wbuwm0q] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-lighter);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.armor-badge.medium[b-zy3wbuwm0q] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-lighter);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.armor-badge.heavy[b-zy3wbuwm0q] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-danger-lighter);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Premium Class Badge */
.premium-class-badge[b-zy3wbuwm0q] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 2;
    box-shadow: 0 2px 8px var(--color-border-active);
}

/* Locked Overlay */
.class-card.premium-locked[b-zy3wbuwm0q] {
    opacity: 0.6;
    cursor: not-allowed;
}

.locked-overlay[b-zy3wbuwm0q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 10;
}

.lock-icon[b-zy3wbuwm0q] {
    color: var(--color-warning);
    margin-bottom: 0.5rem;
}

.lock-text[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Selected Indicator */
.selected-indicator[b-zy3wbuwm0q] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    color: var(--color-success);
    z-index: 2;
    animation: pulseGlow-b-zy3wbuwm0q 1.5s ease-in-out infinite;
}

/* ===== Step Actions ===== */
.step-actions[b-zy3wbuwm0q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.btn-cancel[b-zy3wbuwm0q] {
    color: var(--color-text-secondary) !important;
}

.btn-cancel:hover[b-zy3wbuwm0q] {
    color: var(--color-text-primary) !important;
}

.btn-back[b-zy3wbuwm0q],
.btn-next[b-zy3wbuwm0q],
.btn-reroll[b-zy3wbuwm0q],
.btn-create[b-zy3wbuwm0q],
.btn-roll[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-next[b-zy3wbuwm0q],
.btn-create[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-gray-900) !important;
}

.btn-next:hover[b-zy3wbuwm0q],
.btn-create:hover[b-zy3wbuwm0q] {
    box-shadow: 0 8px 25px var(--color-border-active);
    transform: translateY(-2px);
}

.btn-roll[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-roll:hover[b-zy3wbuwm0q] {
    box-shadow: 0 8px 25px var(--color-border-active);
    transform: translateY(-2px);
}

/* ===== Summary Card ===== */
.summary-card[b-zy3wbuwm0q] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.summary-header[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), transparent);
}

.summary-avatar[b-zy3wbuwm0q] {
    flex-shrink: 0;
}

.summary-info[b-zy3wbuwm0q] {
    flex: 1;
}

.summary-name[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.25rem 0;
}

.summary-details[b-zy3wbuwm0q] {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.summary-backstory[b-zy3wbuwm0q] {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    font-size: 0.9rem;
    font-style: italic;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.quote-icon[b-zy3wbuwm0q] {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== Roll Prompt ===== */
.roll-prompt[b-zy3wbuwm0q] {
    text-align: center;
    padding: 2rem;
}

.roll-prompt-icon[b-zy3wbuwm0q] {
    color: var(--color-primary);
    font-size: 4rem;
    margin-bottom: 1rem;
}

.roll-prompt h3[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.roll-prompt p[b-zy3wbuwm0q] {
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.roll-info[b-zy3wbuwm0q] {
    font-size: 0.9rem;
    color: var(--color-text-tertiary);
    margin-bottom: 1.5rem !important;
}

/* ===== Stats Rolled ===== */
.stats-rolled[b-zy3wbuwm0q] {
    transition: opacity 0.3s ease;
}

.stats-rolled.rolling[b-zy3wbuwm0q] {
    opacity: 0.7;
}

.stats-header[b-zy3wbuwm0q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.stats-header h3[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin: 0;
}

.stats-grid-rolled[b-zy3wbuwm0q] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .stats-grid-rolled[b-zy3wbuwm0q] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-grid-rolled[b-zy3wbuwm0q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-roll-card[b-zy3wbuwm0q] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid;
    border-color: color-mix(in srgb, var(--stat-color) 30%, transparent);
    border-radius: 10px;
    padding: 1rem 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stat-roll-card[b-zy3wbuwm0q]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--stat-color);
    opacity: 0.5;
}

.stat-roll-header[b-zy3wbuwm0q] {
    margin-bottom: 0.5rem;
}

.stat-abbrev[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    font-weight: 600;
    display: block;
}

.stat-full-name[b-zy3wbuwm0q] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    display: block;
}

.stat-roll-value[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--stat-color);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-roll-modifier[b-zy3wbuwm0q] {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.stat-roll-dice[b-zy3wbuwm0q] {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.die[b-zy3wbuwm0q] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.die.kept[b-zy3wbuwm0q] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-lighter);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.die.dropped[b-zy3wbuwm0q] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger-light);
    border: 1px solid rgba(239, 68, 68, 0.2);
    opacity: 0.5;
    text-decoration: line-through;
}

/* Primary and Spellcasting Indicators */
.stat-roll-card.primary[b-zy3wbuwm0q] {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-border-active);
}

.stat-roll-card.spellcasting[b-zy3wbuwm0q] {
    border-color: var(--color-info);
}

.primary-indicator[b-zy3wbuwm0q],
.spellcasting-indicator[b-zy3wbuwm0q] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--color-primary);
}

.spellcasting-indicator[b-zy3wbuwm0q] {
    color: var(--color-info);
}

.stat-note[b-zy3wbuwm0q] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
    font-weight: 600;
}

.primary-note[b-zy3wbuwm0q] {
    color: var(--color-primary);
}

.spellcasting-note[b-zy3wbuwm0q] {
    color: var(--color-info);
}

/* Primary Stat Info Banner */
.primary-stat-info[b-zy3wbuwm0q] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-active);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.info-icon[b-zy3wbuwm0q] {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-text[b-zy3wbuwm0q] {
    color: var(--color-warning-light);
    font-size: 0.85rem;
    line-height: 1.5;
}

.spellcasting-note[b-zy3wbuwm0q] {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-info-lighter);
}

/* Combat Preview */
.combat-preview[b-zy3wbuwm0q] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .combat-preview[b-zy3wbuwm0q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.combat-stat-item[b-zy3wbuwm0q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.hp-icon[b-zy3wbuwm0q] { color: var(--color-danger); }
.mana-icon[b-zy3wbuwm0q] { color: var(--color-info); }
.ac-icon[b-zy3wbuwm0q] { color: var(--color-primary); }
.total-icon[b-zy3wbuwm0q] { color: var(--color-success); }

.combat-stat-label[b-zy3wbuwm0q] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.combat-stat-value[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

/* Low Stats Warning */
.low-stats-warning[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    color: var(--color-warning-bright);
    font-size: 0.85rem;
}

/* Empty State */
.empty-state-full[b-zy3wbuwm0q] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state-icon[b-zy3wbuwm0q] {
    font-size: 4rem;
    color: var(--color-border-active);
    margin-bottom: 1rem;
}

/* Class Helper Link */
.class-helper-link[b-zy3wbuwm0q] {
    text-align: right;
    margin-bottom: 1.5rem;
}
/* /Components/Pages/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: var(--color-border-subtle);
    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: var(--color-border-base);
    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%;
}

/* ===== TABLET PORTRAIT — UTILITY WRAPPERS ===== */
.tablet-party-strip-wrapper[b-necssm1ckz] {
    display: none; /* shown via responsive CSS on portrait tablet */
}

.tablet-portrait-zone[b-necssm1ckz] {
    display: none; /* shown via responsive CSS on portrait tablet */
}

/* ===== LOG FAB (portrait tablet) ===== */
.log-fab[b-necssm1ckz] {
    position: fixed;
    /* sits above the action bar (64px buttons + 26px status + 1px border = ~92px) plus a gap */
    bottom: 102px;
    right: 14px;
    z-index: 450;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    display: none; /* shown via responsive CSS on portrait tablet */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.log-fab:active[b-necssm1ckz] {
    transform: scale(0.94);
    background: rgba(30, 41, 59, 0.99);
}

.log-fab.has-unread[b-necssm1ckz] {
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 215, 0, 0.2);
    animation: logFabPulse-b-necssm1ckz 2s ease-in-out infinite;
}

@keyframes logFabPulse-b-necssm1ckz {
    0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 8px rgba(255,215,0,0.15); }
    50%       { box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 18px rgba(255,215,0,0.35); }
}

.log-fab-badge[b-necssm1ckz] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 1px solid rgba(15, 23, 42, 0.8);
}


/* Screen shake for big hits / crits */
.combat-page.screen-shake[b-necssm1ckz] {
    animation: screen-shake-b-necssm1ckz 0.45s ease-out;
}

@keyframes screen-shake-b-necssm1ckz {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-6px, 3px); }
    20%  { transform: translate(5px, -4px); }
    30%  { transform: translate(-4px, 2px); }
    40%  { transform: translate(4px, -2px); }
    50%  { transform: translate(-3px, 3px); }
    60%  { transform: translate(3px, -1px); }
    70%  { transform: translate(-2px, 1px); }
    80%  { transform: translate(1px, -1px); }
    90%  { transform: translate(-1px, 0); }
    100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .combat-page.screen-shake[b-necssm1ckz] {
        animation: none;
    }
}

/* ===== BATTLE RESULT INLINE (Victory/Defeat in Middle Column) ===== */
.battle-result-inline[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    padding: var(--space-md);
    overflow-y: auto;
    animation: fadeInScale-b-necssm1ckz 0.4s ease-out;
    border-radius: var(--radius-2xl);
    min-height: 0;
    max-height: calc(100vh - 200px);
}

@keyframes fadeInScale-b-necssm1ckz {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Victory Inline - Subtle Green Glow Background */
.battle-result-inline.victory[b-necssm1ckz] {
    background: radial-gradient(ellipse at center, 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.3);
    border-radius: var(--radius-sm);
}

.battle-result-inline[b-necssm1ckz]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: var(--radius-sm);
}

.battle-result-inline[b-necssm1ckz]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.6);
}

/* ===== HEADER ===== */
.combat-header[b-necssm1ckz] {
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border-bottom: 1px solid var(--color-border-base);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    flex-shrink: 0;
}

.combat-header-left[b-necssm1ckz] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-primary);
}

.combat-title[b-necssm1ckz] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.combat-header-right[b-necssm1ckz] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.turn-badge[b-necssm1ckz] {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-xs) var(--space-md);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.turn-indicator[b-necssm1ckz] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 20px;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning-light);
    text-transform: uppercase;
    white-space: nowrap;
}

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

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

/* ===== MAIN LAYOUT (DESKTOP DEFAULT) ===== */
.combat-layout[b-necssm1ckz] {
    display: grid;
    grid-template-columns: 280px minmax(400px, 500px) 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
    /* Account for: AppBar (64px) + Container padding (32px) + Footer (100px) + Combat header (60px) */
    height: calc(100vh - 256px);
    overflow: hidden;
    /* Isolate stacking context to prevent z-index conflicts with MudBlazor popovers */
    isolation: isolate;
}

.combat-sidebar[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    overflow-y: auto;
}

.combat-monsters[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: var(--space-md);
    padding-right: var(--space-sm);
}

.combat-log-container[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollbars */
.combat-sidebar[b-necssm1ckz]::-webkit-scrollbar,
.combat-monsters[b-necssm1ckz]::-webkit-scrollbar {
    width: 6px;
}

.combat-sidebar[b-necssm1ckz]::-webkit-scrollbar-track,
.combat-monsters[b-necssm1ckz]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.combat-sidebar[b-necssm1ckz]::-webkit-scrollbar-thumb,
.combat-monsters[b-necssm1ckz]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: 3px;
}

.combat-sidebar[b-necssm1ckz]::-webkit-scrollbar-thumb:hover,
.combat-monsters[b-necssm1ckz]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5);
}

/* Formation Picker */
.formation-picker-diamond[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-2xl);
}

.formation-row[b-necssm1ckz] {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    .combat-header[b-necssm1ckz] {
        padding: var(--space-sm);
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .combat-header-left[b-necssm1ckz],
    .combat-header-right[b-necssm1ckz] {
        flex: 1 1 100%;
        justify-content: center;
    }

    .combat-title[b-necssm1ckz] {
        font-size: 0.85rem;
    }

    .combat-layout[b-necssm1ckz] {
        gap: var(--space-lg);
        padding: var(--space-sm);
        height: calc(100vh - 240px);
    }

    .combat-sidebar[b-necssm1ckz] {
        gap: var(--space-sm);
    }

    .combat-monsters[b-necssm1ckz] {
        gap: var(--space-sm);
    }

    .combat-log-container[b-necssm1ckz] {
        max-height: 300px;
        min-height: 250px;
    }

    .formation-picker-diamond[b-necssm1ckz] {
        padding: var(--space-lg);
        gap: var(--space-md);
    }

    .formation-row[b-necssm1ckz] {
        gap: var(--space-sm);
    }
}


/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 926px) and (max-height: 428px) and (orientation: landscape) {
    .combat-layout[b-necssm1ckz] {
        grid-template-columns: 200px 1fr 1fr;
        grid-template-rows: 1fr;
        height: calc(100vh - 60px);
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .combat-sidebar[b-necssm1ckz],
    .combat-monsters[b-necssm1ckz] {
        overflow-y: auto;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .turn-indicator.active[b-necssm1ckz] {
        animation: none;
    }
}

/* ===== CLASS FEATURES PANEL ===== */
.class-features-panel[b-necssm1ckz] {
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.class-features-panel .panel-title[b-necssm1ckz] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-md) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-necssm1ckz] .class-feature-btn {
    background: linear-gradient(135deg, var(--color-border-base), rgba(218, 165, 32, 0.1)) !important;
    border: 1px solid var(--color-border-active) !important;
    color: var(--color-primary) !important;
    transition: all var(--transition-slow) !important;
}

[b-necssm1ckz] .class-feature-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.15)) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

[b-necssm1ckz] .class-feature-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-necssm1ckz] .class-feature-btn .mud-chip {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--color-info-lighter) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* Paladin-specific */
[b-necssm1ckz] .class-feature-btn.mud-button-filled.mud-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15)) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: var(--color-warning-light) !important;
}

/* Bard-specific */
[b-necssm1ckz] .class-feature-btn.mud-button-filled.mud-secondary {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(219, 39, 119, 0.15)) !important;
    border-color: rgba(236, 72, 153, 0.4) !important;
    color: var(--color-bard-light) !important;
}

/* Responsive adjustments */
@media (max-width: 1023px) {
    .class-features-panel[b-necssm1ckz] {
        margin-top: var(--space-lg);
    }
}

/* ===== STATUS EFFECTS OVERLAY ===== */
.player-card-wrapper[b-necssm1ckz],
.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;
}

/* Per-category colors provided by se-* classes in design-system.css */

/* More effects indicator */
.status-effect-badge.se-more[b-necssm1ckz] {
    border-color: var(--color-text-secondary);
    background: rgba(148, 163, 184, 0.2);
}

.status-effect-badge.se-more[b-necssm1ckz]  .mud-icon-root {
    color: var(--color-text-light);
}

/* Duration badge */
.duration-badge[b-necssm1ckz] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    width: 16px;
    height: 16px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Pulse animation for status effects */
@keyframes statusEffectPulse-b-necssm1ckz {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 20px currentColor;
    }
}

/* Responsive adjustments */
@media (max-width: 1023px) {
    .status-effects-overlay[b-necssm1ckz] {
        max-width: 140px;
    }

    .status-effect-badge[b-necssm1ckz] {
        width: 28px;
        height: 28px;
    }

    .duration-badge[b-necssm1ckz] {
        width: 14px;
        height: 14px;
        font-size: 0.6rem;
    }
}

@media (max-width: 767px) {
    .status-effects-overlay[b-necssm1ckz] {
        max-width: 120px;
        gap: 3px;
    }

    .status-effect-badge[b-necssm1ckz] {
        width: 24px;
        height: 24px;
    }

    .duration-badge[b-necssm1ckz] {
        width: 12px;
        height: 12px;
        font-size: 0.55rem;
    }
}
/* /Components/Pages/Editors/AdventureEditor.razor.rz.scp.css */
/* Adventure Editor - Fantasy RPG Theme */

/* Admin Warning Banner - Dark theme */
[b-ih81enozou] .admin-warning-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05)) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-left: 4px solid var(--color-warning) !important;
    border-radius: 12px;
}

[b-ih81enozou] .admin-warning-banner .mud-typography-h5 {
    color: var(--color-warning-bright) !important;
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

[b-ih81enozou] .admin-warning-banner .mud-typography-caption {
    color: var(--color-warning-light) !important;
}

[b-ih81enozou] .admin-warning-banner strong {
    color: var(--color-warning-bright);
    font-weight: 700;
}

/* Loading Paper - Centered content */
[b-ih81enozou] .loading-paper {
    text-align: center;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
    border: 1px solid var(--color-border-base) !important;
}

[b-ih81enozou] .loading-paper .mud-typography {
    color: var(--color-text-primary) !important;
}

/* Page Header */
.adventure-editor-header[b-ih81enozou] {
    background: linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.adventure-editor-header h1[b-ih81enozou] {
    font-family: 'Cinzel', serif;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

/* Waypoint Section Header */
[b-ih81enozou] .mud-typography[class*="h"] {
    font-family: 'Cinzel', serif;
    color: var(--color-primary);
}

/* Waypoint Cards - Override MudBlazor Paper defaults */
[b-ih81enozou] .mud-paper {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
    color: var(--color-text-primary) !important;
}

[b-ih81enozou] .mud-paper.mud-elevation-2,
[b-ih81enozou] .mud-paper.mud-elevation-4 {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
}

/* Waypoint Card specific styling */
.waypoint-card[b-ih81enozou],
[b-ih81enozou] .mud-paper:has(.mud-typography:contains("Waypoint")) {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid var(--color-border-base) !important;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Waypoint Title Styling */
[b-ih81enozou] .mud-typography-h6,
[b-ih81enozou] .mud-typography-body1,
[b-ih81enozou] .mud-typography-body2 {
    color: var(--color-text-primary) !important;
}

[b-ih81enozou] .mud-paper .mud-typography-h6 {
    font-family: 'Cinzel', serif;
    color: var(--color-primary) !important;
    font-weight: 600;
}

/* Form Fields - Dark theme overrides */
[b-ih81enozou] .mud-input-outlined .mud-input-root {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: var(--color-border-hover) !important;
}

[b-ih81enozou] .mud-input-outlined:hover .mud-input-root {
    border-color: var(--color-border-active) !important;
}

[b-ih81enozou] .mud-input-outlined.mud-input-focused .mud-input-root {
    border-color: rgba(255, 215, 0, 0.5) !important;
}

[b-ih81enozou] .mud-input-label {
    color: var(--color-text-secondary) !important;
}

[b-ih81enozou] .mud-input-text,
[b-ih81enozou] .mud-input input {
    color: var(--color-text-primary) !important;
}

/* Textarea fields */
[b-ih81enozou] .mud-input-outlined textarea {
    background: rgba(15, 23, 42, 0.8) !important;
    color: var(--color-text-primary) !important;
}

/* Select dropdowns */
[b-ih81enozou] .mud-select .mud-input-root {
    background: rgba(15, 23, 42, 0.8) !important;
}

[b-ih81enozou] .mud-popover .mud-list {
    background: var(--color-gray-800) !important;
}

[b-ih81enozou] .mud-list-item {
    color: var(--color-text-primary) !important;
}

[b-ih81enozou] .mud-list-item:hover {
    background: rgba(255, 215, 0, 0.1) !important;
}

/* Chips & Badges */
[b-ih81enozou] .mud-chip {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--color-warning-bright) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-ih81enozou] .mud-chip .mud-chip-icon {
    color: var(--color-warning) !important;
}

/* Loading States */
[b-ih81enozou] .mud-progress-linear {
    background-color: rgba(255, 215, 0, 0.1) !important;
}

[b-ih81enozou] .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)) !important;
}

[b-ih81enozou] .mud-progress-circular circle {
    stroke: var(--color-primary) !important;
}

/* Tab styling for editor sections */
[b-ih81enozou] .mud-tabs {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px 8px 0 0;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

[b-ih81enozou] .mud-tab {
    color: var(--color-text-secondary) !important;
}

[b-ih81enozou] .mud-tab.mud-tab-active {
    color: var(--color-primary) !important;
}

[b-ih81enozou] .mud-tab-slider {
    background: var(--color-primary) !important;
}

/* Switch toggles */
[b-ih81enozou] .mud-switch .mud-switch-track {
    background: rgba(255, 255, 255, 0.1) !important;
}

[b-ih81enozou] .mud-switch.mud-checked .mud-switch-track {
    background: var(--color-border-active) !important;
}

[b-ih81enozou] .mud-switch.mud-checked .mud-switch-thumb {
    background: var(--color-primary) !important;
}

/* Monster/Item Selection Chips */
[b-ih81enozou] .mud-chip-set .mud-chip {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: var(--color-info-lighter) !important;
}

[b-ih81enozou] .mud-chip-set .mud-chip .mud-chip-icon {
    color: var(--color-info-light) !important;
}

/* Delete buttons */
[b-ih81enozou] .mud-button-text.mud-button-text-error {
    color: var(--color-danger-light) !important;
}

[b-ih81enozou] .mud-button-text.mud-button-text-error:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Info/Alert boxes */
[b-ih81enozou] .mud-alert.mud-alert-outlined-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: var(--color-info-lighter) !important;
}

[b-ih81enozou] .mud-alert.mud-alert-outlined-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: var(--color-warning-light) !important;
}

[b-ih81enozou] .mud-alert.mud-alert-outlined-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: var(--color-danger-lighter) !important;
}

/* Expansion panels for waypoint details */
[b-ih81enozou] .mud-expand-panel {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid var(--color-border-base) !important;
}

[b-ih81enozou] .mud-expand-panel-header {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* ====================================================================== */
/* SIMULATION DIALOG STYLING (PHASE 1-3) */
/* ====================================================================== */

/* Simulation Dialog Styling */
[b-ih81enozou] .mud-dialog .mud-dialog-content {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
    color: var(--color-text-primary) !important;
}

[b-ih81enozou] .mud-dialog .mud-dialog-title {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid var(--color-border-hover) !important;
}

/* Expansion Panels in Results */
[b-ih81enozou] .mud-expansion-panel {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid var(--color-border-base) !important;
    margin-bottom: 0.5rem !important;
    border-radius: 8px !important;
}

[b-ih81enozou] .mud-expansion-panel-header {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px 8px 0 0 !important;
}

[b-ih81enozou] .mud-expansion-panel-text {
    color: var(--color-primary) !important;
}

/* Simple Table Styling */
[b-ih81enozou] .mud-table {
    background: transparent !important;
}

[b-ih81enozou] .mud-table-head {
    background: rgba(255, 215, 0, 0.1) !important;
}

[b-ih81enozou] .mud-table-cell {
    color: var(--color-text-primary) !important;
    border-bottom-color: rgba(255, 215, 0, 0.1) !important;
    padding: 0.75rem 1rem !important;
}

[b-ih81enozou] .mud-table-row:hover {
    background: rgba(255, 215, 0, 0.05) !important;
}

/* Warning Color Coding */
[b-ih81enozou] .mud-alert.mud-alert-outlined-error,
[b-ih81enozou] .mud-alert.mud-alert-text-error {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

[b-ih81enozou] .mud-alert.mud-alert-outlined-warning,
[b-ih81enozou] .mud-alert.mud-alert-text-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

[b-ih81enozou] .mud-alert.mud-alert-outlined-success,
[b-ih81enozou] .mud-alert.mud-alert-text-success {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

[b-ih81enozou] .mud-alert.mud-alert-outlined-info,
[b-ih81enozou] .mud-alert.mud-alert-text-info {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

/* Balance Testing Section */
[b-ih81enozou] .mud-paper:has([style*="rgba(59, 130, 246"]) {
    transition: all 0.3s ease;
}

[b-ih81enozou] .mud-paper:has([style*="rgba(59, 130, 246"]):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2) !important;
}

/* Simulation Progress */
[b-ih81enozou] .mud-progress-circular {
    color: var(--color-info-light) !important;
}

/* Dialog Actions */
[b-ih81enozou] .mud-dialog-actions {
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.1) !important;
}

/* MudChip in Results */
[b-ih81enozou] .mud-chip {
    font-weight: 600 !important;
    border-radius: 16px !important;
}

[b-ih81enozou] .mud-expand-panel-text {
    font-family: 'Cinzel', serif;
    color: var(--color-primary) !important;
}

/* Numeric fields */
[b-ih81enozou] .mud-input-numeric {
    text-align: right;
}

/* Buttons - Primary (Golden) */
[b-ih81enozou] .mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, #b8860b 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%) !important;
    color: var(--color-gray-900) !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[b-ih81enozou] .mud-button-filled.mud-button-filled-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(218, 165, 32, 0.5) !important;
}

/* Buttons - Success (Green) */
[b-ih81enozou] .mud-button-filled.mud-button-filled-success {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !important;
    color: white !important;
}

[b-ih81enozou] .mud-button-filled.mud-button-filled-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4) !important;
}

/* Buttons - Error (Red) */
[b-ih81enozou] .mud-button-filled.mud-button-filled-error {
    background: linear-gradient(135deg, var(--color-danger), var(--color-barbarian)) !important;
    color: white !important;
}

[b-ih81enozou] .mud-button-filled.mud-button-filled-error:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4) !important;
}

/* Status Badges */
[b-ih81enozou] .status-draft {
    background: rgba(148, 163, 184, 0.2) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

[b-ih81enozou] .status-live {
    background: rgba(34, 197, 94, 0.2) !important;
    color: var(--color-success-light) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

[b-ih81enozou] .status-archived {
    background: rgba(239, 68, 68, 0.2) !important;
    color: var(--color-danger-lighter) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* Checkbox styling */
[b-ih81enozou] .mud-checkbox .mud-checkbox-icon {
    color: var(--color-primary) !important;
}

[b-ih81enozou] .mud-checkbox.mud-checked .mud-checkbox-icon {
    color: var(--color-primary) !important;
}

/* Icon buttons */
[b-ih81enozou] .mud-icon-button {
    color: var(--color-text-secondary) !important;
}

[b-ih81enozou] .mud-icon-button:hover {
    background: rgba(255, 215, 0, 0.1) !important;
    color: var(--color-primary) !important;
}

/* Text inside waypoint cards */
[b-ih81enozou] .mud-paper .mud-typography {
    color: var(--color-text-primary) !important;
}

[b-ih81enozou] .mud-paper .mud-typography.mud-typography-caption {
    color: var(--color-text-secondary) !important;
}

/* Boss waypoint indicator */
[b-ih81enozou] .mud-paper:has(.mud-checkbox[checked]) {
    border-left: 3px solid var(--color-danger) !important;
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), var(--color-bg-elevated)) !important;
}

/* Waypoint Cards */
[b-ih81enozou] .waypoint-card {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
    border: 1px solid var(--color-border-base) !important;
    border-radius: 12px;
}

[b-ih81enozou] .waypoint-header-item {
    display: flex;
    align-items: center;
}

[b-ih81enozou] .waypoint-number {
    font-family: 'Cinzel', serif;
    color: var(--color-primary) !important;
    font-weight: 600;
}

/* JSON Preview */
[b-ih81enozou] .json-preview {
    background: var(--color-bg-elevated-alt) !important;
    border: 1px solid var(--color-border-base) !important;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
}

[b-ih81enozou] .json-code {
    font-size: 0.85em;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--color-success-lighter) !important;
    font-family: 'Courier New', monospace;
}
/* /Components/Pages/Game/Components/AdventureSelectionCard.razor.rz.scp.css */
/* AdventureSelectionCard scoped styles - Uses Design System Tokens */

.adventure-card[b-lq7enfpgcd] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    cursor: pointer;
    transition: all var(--transition-slow);
}

.adventure-card:hover[b-lq7enfpgcd] {
    transform: translateY(-4px);
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-lg), var(--shadow-gold);
}

.adventure-card-title[b-lq7enfpgcd] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.adventure-card-description[b-lq7enfpgcd] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.5;
}

.adventure-card-meta[b-lq7enfpgcd] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
}

.meta-item[b-lq7enfpgcd] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}
/* /Components/Pages/Game/Components/CompletedAdventureCard.razor.rz.scp.css */
/* CompletedAdventureCard scoped styles - Uses Design System Tokens */

.completed-adventure-card[b-rvc6jconrm] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    transition: all var(--transition-slow);
}

.completed-adventure-card:hover[b-rvc6jconrm] {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-lg);
}

.completed-adventure-header[b-rvc6jconrm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.completed-adventure-info[b-rvc6jconrm] {
    flex: 1;
}

.completed-adventure-title[b-rvc6jconrm] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.completed-adventure-meta[b-rvc6jconrm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.completed-meta-divider[b-rvc6jconrm] {
    margin: 0 var(--space-xs);
}

.completed-adventure-actions[b-rvc6jconrm] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
}

.completed-date[b-rvc6jconrm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.completed-adventure-players[b-rvc6jconrm] {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    margin: var(--space-md) 0;
}

.players-label[b-rvc6jconrm] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    display: block;
}

.player-badges[b-rvc6jconrm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.player-badge[b-rvc6jconrm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    transition: all var(--transition-base);
}

.player-badge.connected[b-rvc6jconrm] {
    border-color: rgba(34, 197, 94, 0.3);
}

.player-badge.disconnected[b-rvc6jconrm] {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.3);
}

.player-badge-avatar[b-rvc6jconrm] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.2));
    border: 1px solid var(--color-border-hover);
}

.player-badge-avatar.warrior[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(185, 28, 28, 0.2)); border-color: rgba(220, 38, 38, 0.3); }
.player-badge-avatar.wizard[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2)); border-color: rgba(59, 130, 246, 0.3); }
.player-badge-avatar.ranger[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2)); border-color: rgba(34, 197, 94, 0.3); }
.player-badge-avatar.rogue[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(75, 85, 99, 0.2)); border-color: rgba(107, 114, 128, 0.3); }
.player-badge-avatar.paladin[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(202, 138, 4, 0.2)); border-color: rgba(234, 179, 8, 0.3); }
.player-badge-avatar.bard[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(147, 51, 234, 0.2)); border-color: rgba(168, 85, 247, 0.3); }
.player-badge-avatar.barbarian[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2)); border-color: rgba(239, 68, 68, 0.3); }

.player-badge-info[b-rvc6jconrm] {
    display: flex;
    flex-direction: column;
}

.player-badge-name[b-rvc6jconrm] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-lighter);
}

.player-badge-status[b-rvc6jconrm] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
}

.host-tag[b-rvc6jconrm] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #000;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
}

.connected-tag[b-rvc6jconrm] {
    color: var(--color-success);
}

.completed-adventure-code[b-rvc6jconrm] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    margin-top: var(--space-md);
}

.code-label[b-rvc6jconrm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.code-value[b-rvc6jconrm] {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    letter-spacing: 0.15em;
}

.btn-copy-small[b-rvc6jconrm] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--color-info-light);
    padding: 0.375rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-left: auto;
}

.btn-copy-small:hover[b-rvc6jconrm] {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    transform: scale(1.05);
}
/* /Components/Pages/Game/Components/PlayerSlot.razor.rz.scp.css */
/* PlayerSlot scoped styles - Uses Design System Tokens */

.player-slot[b-gsvtxennrc] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-base);
}

.player-slot:hover[b-gsvtxennrc] {
    border-color: var(--color-border-hover);
}

.player-slot.host[b-gsvtxennrc] {
    border-left: 3px solid var(--color-primary);
}

.player-slot.ready[b-gsvtxennrc] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
}

.player-slot-info[b-gsvtxennrc] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.player-avatar[b-gsvtxennrc] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-avatar.warrior[b-gsvtxennrc] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-danger-light);
}

.player-avatar.wizard[b-gsvtxennrc] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-light);
}

.player-avatar.ranger[b-gsvtxennrc] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
}

.player-avatar.rogue[b-gsvtxennrc] {
    background: rgba(99, 102, 241, 0.2);
    color: var(--color-rogue-light);
}

.player-avatar.paladin[b-gsvtxennrc] {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-warning-light);
}

.player-avatar.bard[b-gsvtxennrc] {
    background: rgba(236, 72, 153, 0.2);
    color: var(--color-bard-light);
}

.player-avatar.barbarian[b-gsvtxennrc] {
    background: rgba(220, 38, 38, 0.2);
    color: var(--color-danger-light);
}

.player-details[b-gsvtxennrc] {
    display: flex;
    flex-direction: column;
}

.player-slot-name[b-gsvtxennrc] {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.player-slot-class[b-gsvtxennrc] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.player-slot-status[b-gsvtxennrc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.connection-dot[b-gsvtxennrc] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
}

.connection-dot.connected[b-gsvtxennrc] {
    background: var(--color-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.connection-dot.disconnected[b-gsvtxennrc] {
    background: var(--color-danger);
}

.ready-badge[b-gsvtxennrc] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.not-ready-badge[b-gsvtxennrc] {
    background: rgba(100, 116, 139, 0.2);
    color: var(--color-text-secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.host-badge[b-gsvtxennrc] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}
/* /Components/Pages/Game/Components/SavedAdventureCard.razor.rz.scp.css */
/* SavedAdventureCard scoped styles - Uses Design System Tokens */

.saved-adventure-card[b-j5q6bgylwm] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    transition: all var(--transition-slow);
}

.saved-adventure-card:hover[b-j5q6bgylwm] {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-lg);
}

.saved-adventure-header[b-j5q6bgylwm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.saved-adventure-info[b-j5q6bgylwm] {
    flex: 1;
}

.saved-adventure-title[b-j5q6bgylwm] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.saved-adventure-meta[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.saved-meta-divider[b-j5q6bgylwm] {
    margin: 0 var(--space-xs);
}

.saved-adventure-actions[b-j5q6bgylwm] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
}

.saved-date[b-j5q6bgylwm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.btn-rejoin[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: white;
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

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

.saved-adventure-players[b-j5q6bgylwm] {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    margin: var(--space-md) 0;
}

.players-label[b-j5q6bgylwm] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    display: block;
}

.player-badges[b-j5q6bgylwm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.player-badge[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    transition: all var(--transition-base);
}

.player-badge.connected[b-j5q6bgylwm] {
    border-color: rgba(34, 197, 94, 0.3);
}

.player-badge.disconnected[b-j5q6bgylwm] {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.3);
}

.player-badge-avatar[b-j5q6bgylwm] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.2));
    border: 1px solid var(--color-border-hover);
}

.player-badge-avatar.warrior[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(185, 28, 28, 0.2)); border-color: rgba(220, 38, 38, 0.3); }
.player-badge-avatar.wizard[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2)); border-color: rgba(59, 130, 246, 0.3); }
.player-badge-avatar.ranger[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2)); border-color: rgba(34, 197, 94, 0.3); }
.player-badge-avatar.rogue[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(75, 85, 99, 0.2)); border-color: rgba(107, 114, 128, 0.3); }
.player-badge-avatar.paladin[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(202, 138, 4, 0.2)); border-color: rgba(234, 179, 8, 0.3); }
.player-badge-avatar.bard[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(147, 51, 234, 0.2)); border-color: rgba(168, 85, 247, 0.3); }
.player-badge-avatar.barbarian[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2)); border-color: rgba(239, 68, 68, 0.3); }

.player-badge-info[b-j5q6bgylwm] {
    display: flex;
    flex-direction: column;
}

.player-badge-name[b-j5q6bgylwm] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-lighter);
}

.player-badge-status[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
}

.host-tag[b-j5q6bgylwm] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #000;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
}

.connected-tag[b-j5q6bgylwm] {
    color: var(--color-success);
}

.saved-adventure-code[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    margin-top: var(--space-md);
}

.code-label[b-j5q6bgylwm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.code-value[b-j5q6bgylwm] {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    letter-spacing: 0.15em;
}

.btn-copy-small[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--color-info-light);
    padding: 0.375rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-left: auto;
}

.btn-copy-small:hover[b-j5q6bgylwm] {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    transform: scale(1.05);
}
/* /Components/Pages/Game/Consumables.razor.rz.scp.css */
/* Consumable Editor Styling */
.consumable-editor-container[b-c1a622ug76] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Header */
.consumable-editor-header[b-c1a622ug76] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.header-content[b-c1a622ug76] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-title-section[b-c1a622ug76] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-title[b-c1a622ug76] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #22c55e;
    margin: 0;
    line-height: 1.2;
}

.header-subtitle[b-c1a622ug76] {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0 0;
}

.header-actions[b-c1a622ug76] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Filters Section */
.filters-section[b-c1a622ug76] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.filter-group.search-group[b-c1a622ug76] {
    flex: 1;
    min-width: 250px;
}

.filter-label[b-c1a622ug76] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22c55e;
    opacity: 0.9;
}

/* Stats Bar */
.stats-bar[b-c1a622ug76] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.stat-chip[b-c1a622ug76] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 0.2s ease;
}

.stat-chip:hover[b-c1a622ug76] { transform: translateY(-2px); }

.stat-chip.total[b-c1a622ug76] {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--color-text-light);
}

.stat-chip.type-health[b-c1a622ug76] {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #86efac;
}

.stat-chip.type-mana[b-c1a622ug76] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--color-info-lighter);
}

.stat-chip.type-buff[b-c1a622ug76] {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--color-warning-light);
}

.stat-chip.type-cure[b-c1a622ug76] {
    background: rgba(20, 184, 166, 0.2);
    border: 1px solid rgba(45, 212, 191, 0.3);
    color: #5eead4;
}

.stat-chip.type-scroll[b-c1a622ug76] {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: var(--color-monk-lighter);
}

.stat-chip.type-special[b-c1a622ug76] {
    background: rgba(236, 72, 153, 0.2);
    border: 1px solid rgba(244, 114, 182, 0.3);
    color: var(--color-bard-light);
}

/* Loading & Empty States */
.loading-state[b-c1a622ug76], .empty-state[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

/* Consumables Grid */
.consumables-grid[b-c1a622ug76] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Consumable Cards */
.consumable-card[b-c1a622ug76] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.consumable-card[b-c1a622ug76]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: all 0.3s ease;
}

.consumable-card-health[b-c1a622ug76]::before   { background: linear-gradient(180deg, #22c55e, #15803d); }
.consumable-card-mana[b-c1a622ug76]::before     { background: linear-gradient(180deg, var(--color-info), #1e40af); }
.consumable-card-buff[b-c1a622ug76]::before     { background: linear-gradient(180deg, var(--color-warning), var(--color-warning-dark)); }
.consumable-card-cure[b-c1a622ug76]::before     { background: linear-gradient(180deg, #14b8a6, #0f766e); }
.consumable-card-scroll[b-c1a622ug76]::before   { background: linear-gradient(180deg, var(--color-monk), #7c3aed); }
.consumable-card-special[b-c1a622ug76]::before  { background: linear-gradient(180deg, var(--color-bard), #db2777); }

.consumable-card:hover[b-c1a622ug76] {
    transform: translateY(-4px);
    border-color: var(--color-border-active);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.consumable-card-deleted[b-c1a622ug76] {
    opacity: 0.6;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.consumable-card-header[b-c1a622ug76] { margin-bottom: 1rem; }

.consumable-card-title-row[b-c1a622ug76] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.consumable-name-section[b-c1a622ug76] { flex: 1; min-width: 0; }

.consumable-name[b-c1a622ug76] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #22c55e;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.consumable-id[b-c1a622ug76] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-family: 'Courier New', monospace;
}

.consumable-badges[b-c1a622ug76] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.consumable-actions[b-c1a622ug76] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.consumable-description[b-c1a622ug76] {
    color: var(--color-text-light);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Consumable Stats Grid */
.consumable-stats-grid[b-c1a622ug76] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.consumable-stat[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stat-label[b-c1a622ug76] {
    font-size: 0.65rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-value[b-c1a622ug76] {
    font-size: 0.875rem;
    color: var(--color-text-lighter);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rarity Badges */
.badge-rarity-common[b-c1a622ug76]   { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.3); }
.badge-rarity-uncommon[b-c1a622ug76] { background: rgba(34, 197, 94, 0.2);   color: #86efac; border: 1px solid rgba(74, 222, 128, 0.3); }
.badge-rarity-rare[b-c1a622ug76]     { background: rgba(59, 130, 246, 0.2);  color: #93c5fd; border: 1px solid rgba(96, 165, 250, 0.3); }
.badge-rarity-epic[b-c1a622ug76]     { background: rgba(139, 92, 246, 0.2);  color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.3); }
.badge-rarity-legendary[b-c1a622ug76]{ background: rgba(245, 158, 11, 0.2);  color: #fde68a; border: 1px solid rgba(251, 191, 36, 0.3); }

.badge-type[b-c1a622ug76] {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(74, 222, 128, 0.25);
}

/* Effects List */
.effects-list[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.effect-chip[b-c1a622ug76] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-light);
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
}

/* Effects Section in Modal */
.effects-section-header[b-c1a622ug76] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.effects-section-title[b-c1a622ug76] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22c55e;
}

.effect-editor-block[b-c1a622ug76] {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.effect-editor-header[b-c1a622ug76] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #86efac;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-sm[b-c1a622ug76] {
    padding: 0.3rem 0.75rem !important;
    font-size: 0.8rem !important;
}

.btn-xs[b-c1a622ug76] {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem !important;
    min-width: unset !important;
}

/* Modals */
.modal-overlay[b-c1a622ug76] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-dialog[b-c1a622ug76] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-dialog-wide[b-c1a622ug76] {
    max-width: 680px;
}

.modal[b-c1a622ug76] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content[b-c1a622ug76] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-header[b-c1a622ug76] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2[b-c1a622ug76] {
    margin: 0;
    color: #22c55e;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
}

.modal-body[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.modal-footer[b-c1a622ug76] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.close-btn[b-c1a622ug76] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.close-btn:hover[b-c1a622ug76] {
    color: var(--color-text-light);
    background: rgba(255, 255, 255, 0.08);
}

.form-row[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-row label[b-c1a622ug76] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.form-grid-2col[b-c1a622ug76] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.form-grid-2col .form-row-span[b-c1a622ug76] {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .form-grid-2col[b-c1a622ug76] {
        grid-template-columns: 1fr;
    }

    .form-grid-2col .form-row-span[b-c1a622ug76] {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .consumable-editor-container[b-c1a622ug76] {
        padding: 1rem;
    }

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

    .consumables-grid[b-c1a622ug76] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Game/FriendLeaderboards.razor.rz.scp.css */
/* Page Container */
.page-container[b-3g34hga7y9] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Hero Header */
.hero-header[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(15, 23, 42, 0.6) 100%);
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.hero-left[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.hero-icon[b-3g34hga7y9] {
    font-size: 3rem;
    color: var(--color-primary);
}

.hero-title h1[b-3g34hga7y9] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-title p[b-3g34hga7y9] {
    font-size: 1rem;
    color: var(--color-text-light);
    margin: 0;
}

/* Tab Navigation */
.tab-navigation[b-3g34hga7y9] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--color-border-hover);
}

.tab-button[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.tab-button:hover[b-3g34hga7y9] {
    color: var(--color-primary);
    background: rgba(255, 215, 0, 0.05);
}

.tab-button.active[b-3g34hga7y9] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-button .material-icons[b-3g34hga7y9] {
    font-size: 1.25rem;
}

/* Loading */
.loading-container[b-3g34hga7y9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.spinner[b-3g34hga7y9] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border-hover);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-3g34hga7y9 0.8s linear infinite;
}

@keyframes spin-b-3g34hga7y9 {
    to { transform: rotate(360deg); }
}

.loading-container p[b-3g34hga7y9] {
    color: var(--color-text-light);
    font-size: 1rem;
}

/* Empty State */
.empty-state[b-3g34hga7y9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    gap: 1rem;
}

.empty-state .material-icons[b-3g34hga7y9] {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.empty-state h3[b-3g34hga7y9] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.empty-state p[b-3g34hga7y9] {
    color: var(--color-text-secondary);
    margin: 0 0 1rem 0;
}

.btn-primary[b-3g34hga7y9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffed4e 100%);
    border: none;
    border-radius: 8px;
    color: var(--color-gray-900);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-3g34hga7y9] {
    background: linear-gradient(135deg, #ffed4e 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-active);
}

/* Leaderboard Grid */
.leaderboard-grid[b-3g34hga7y9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

/* Leaderboard Card */
.leaderboard-card[b-3g34hga7y9] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    overflow: hidden;
}

.leaderboard-header[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-bottom: 1px solid var(--color-border-hover);
}

.leaderboard-header .material-icons[b-3g34hga7y9] {
    font-size: 1.75rem;
    color: var(--color-primary);
}

.leaderboard-header h3[b-3g34hga7y9] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

/* Leaderboard List */
.leaderboard-list[b-3g34hga7y9] {
    padding: 0.75rem;
}

.leaderboard-item[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.leaderboard-item:last-child[b-3g34hga7y9] {
    margin-bottom: 0;
}

.leaderboard-item:hover[b-3g34hga7y9] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-hover);
}

.leaderboard-item.current-user[b-3g34hga7y9] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.leaderboard-item.current-user .rank[b-3g34hga7y9] {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
}

/* Rank Badge */
.rank[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 8px;
    color: var(--color-gray-900);
    font-size: 1.125rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Player Info */
.player-info[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.player-avatar[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
    flex-shrink: 0;
}

.player-avatar .material-icons[b-3g34hga7y9] {
    font-size: 20px;
    color: var(--color-primary);
}

.player-details[b-3g34hga7y9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.player-name[b-3g34hga7y9] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-stat[b-3g34hga7y9] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Score */
.score[b-3g34hga7y9] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .page-container[b-3g34hga7y9] {
        padding: 1rem;
    }

    .hero-header[b-3g34hga7y9] {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .hero-left[b-3g34hga7y9] {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-title h1[b-3g34hga7y9] {
        font-size: 1.5rem;
    }

    .tab-navigation[b-3g34hga7y9] {
        flex-wrap: wrap;
    }

    .tab-button[b-3g34hga7y9] {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

    .leaderboard-grid[b-3g34hga7y9] {
        grid-template-columns: 1fr;
    }

    .leaderboard-item[b-3g34hga7y9] {
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .rank[b-3g34hga7y9] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .player-avatar[b-3g34hga7y9] {
        width: 36px;
        height: 36px;
    }

    .player-name[b-3g34hga7y9] {
        font-size: 0.9rem;
    }

    .score[b-3g34hga7y9] {
        font-size: 1.125rem;
    }
}
/* /Components/Pages/Game/Friends.razor.rz.scp.css */
.friends-page[b-918busdmjg] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Hero Header */
.hero-header[b-918busdmjg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.hero-left[b-918busdmjg] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.hero-icon[b-918busdmjg] {
    font-size: 3rem;
    color: var(--color-primary);
}

.hero-info h1[b-918busdmjg] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-subtitle[b-918busdmjg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0 0;
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.hero-subtitle .separator[b-918busdmjg] {
    color: var(--color-text-tertiary);
}

.hero-right[b-918busdmjg] {
    display: flex;
    gap: 1rem;
}

/* Tab Navigation */
.tab-navigation[b-918busdmjg] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.tab-button[b-918busdmjg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-light);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.tab-button .material-icons[b-918busdmjg] {
    font-size: 1.25rem;
}

.tab-button:hover[b-918busdmjg] {
    background: rgba(255, 215, 0, 0.05);
    color: var(--color-primary);
}

.tab-button.active[b-918busdmjg] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
    border: 1px solid var(--color-border-active);
}

.tab-button .badge[b-918busdmjg] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-light);
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tab-button .badge.warning[b-918busdmjg] {
    background: rgba(251, 191, 36, 0.2);
    color: var(--color-warning-bright);
}

/* Tab Content */
.tab-content[b-918busdmjg] {
    min-height: 400px;
}

/* Buttons */
.btn-primary[b-918busdmjg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffed4e 100%);
    border: none;
    border-radius: 8px;
    color: var(--color-gray-900);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary .material-icons[b-918busdmjg] {
    font-size: 1.25rem;
}

.btn-primary:hover[b-918busdmjg] {
    background: linear-gradient(135deg, #ffed4e 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-active);
}

.btn-primary:active[b-918busdmjg] {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .friends-page[b-918busdmjg] {
        padding: 1rem;
        gap: 1rem;
    }

    .hero-header[b-918busdmjg] {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .hero-left[b-918busdmjg] {
        flex-direction: column;
        text-align: center;
    }

    .hero-icon[b-918busdmjg] {
        font-size: 2.5rem;
    }

    .hero-info h1[b-918busdmjg] {
        font-size: 1.5rem;
    }

    .hero-subtitle[b-918busdmjg] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .tab-navigation[b-918busdmjg] {
        flex-wrap: wrap;
    }

    .tab-button[b-918busdmjg] {
        flex: 1;
        min-width: calc(50% - 0.25rem);
        justify-content: center;
        padding: 0.625rem 1rem;
    }

    .tab-button span:not(.material-icons):not(.badge)[b-918busdmjg] {
        display: none;
    }
}
/* /Components/Pages/Game/Game.razor.rz.scp.css */
/* ============================================
   THE TAVERN - 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 var(--color-border-active);
    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%, var(--color-primary) 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, var(--color-bg-elevated-alt), rgba(30, 41, 59, 0.85));
}

.tavern-icon[b-vpuzfddh0s] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-900);
    box-shadow: 0 0 25px var(--color-border-active), 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: var(--color-primary);
    text-shadow: 0 2px 10px var(--color-border-active);
    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: var(--color-primary-dark);
    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 var(--color-border-hover);
    border-radius: 20px;
}

.tavern-greeting[b-vpuzfddh0s] {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0.5rem 0 0 0;
}

.hero-name[b-vpuzfddh0s] {
    color: var(--color-primary);
    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: var(--color-primary);
    font-size: 1.5rem !important;
}

.tavern-section-title[b-vpuzfddh0s] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
}

.tavern-section-description[b-vpuzfddh0s] {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    margin: 0 0 1.25rem 0;
    padding-left: 2.25rem;
    font-style: italic;
}

/* ============================================
   TAVERN ACTIVITY CARDS
   ============================================ */

.tavern-card[b-vpuzfddh0s] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    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: var(--color-border-active);
    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: var(--color-text-tertiary);
    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, var(--color-danger), 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: var(--color-danger); }
.combat-card .tavern-card-title[b-vpuzfddh0s] { color: var(--color-danger-lighter); }
.combat-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, var(--color-danger), var(--color-barbarian)) !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, var(--color-success), 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: var(--color-success); }
.adventures-card .tavern-card-title[b-vpuzfddh0s] { color: var(--color-success-lighter); }
.adventures-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !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, var(--color-monk), 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: var(--color-monk); }
.multiplayer-card .tavern-card-title[b-vpuzfddh0s] { color: var(--color-monk-lighter); }
.multiplayer-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, var(--color-monk), #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, var(--color-warning), 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: var(--color-warning); }
.inventory-card .tavern-card-title[b-vpuzfddh0s] { color: var(--color-warning-light); }
.inventory-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark)) !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, var(--color-primary), transparent); }
.merchant-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.15)); color: var(--color-primary); }
.merchant-card .tavern-card-title[b-vpuzfddh0s] { color: var(--color-primary); }
.merchant-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important; color: var(--color-gray-900) !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, var(--color-info), 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: var(--color-info); }
.spellbook-card .tavern-card-title[b-vpuzfddh0s] { color: var(--color-info-lighter); }
.spellbook-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, var(--color-info), var(--color-info-dark)) !important; color: white !important; }
.spellbook-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); }

/* Stables - Amber/Gold */
.stables-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, rgba(251,191,36,0.6), transparent); }
.stables-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.1)); color: #fbbf24; }
.stables-card .tavern-card-title[b-vpuzfddh0s] { color: #fde68a; }
.stables-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: white !important; }
.stables-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(245,158,11,0.5); }
.stables-locked[b-vpuzfddh0s] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Pet Shop - Amber/Gold (premium) */
.pet-shop-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, rgba(251,191,36,0.5), transparent); }
.pet-shop-card .tavern-card-icon[b-vpuzfddh0s] { background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(180,83,9,0.12)); color: #fbbf24; }
.pet-shop-card .tavern-card-title[b-vpuzfddh0s] { color: #fde68a; }
.pet-shop-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, #d97706, #b45309) !important; color: white !important; }
.pet-shop-btn:hover[b-vpuzfddh0s] { box-shadow: 0 6px 20px rgba(180,83,9,0.5); }

/* Leaderboards - Pink */
.leaderboards-card[b-vpuzfddh0s]::before { background: linear-gradient(90deg, transparent, var(--color-bard), 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: var(--color-bard); }
.leaderboards-card .tavern-card-title[b-vpuzfddh0s] { color: var(--color-bard-light); }
.leaderboards-btn[b-vpuzfddh0s] { background: linear-gradient(135deg, var(--color-bard), #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, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-3xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

/* Sticky wrapper keeps character panel + pet card together */
.left-sidebar-sticky[b-vpuzfddh0s] {
    position: sticky;
    top: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.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 var(--color-border-base);
    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: var(--color-primary);
    margin-bottom: 0.15rem;
}

.panel-character-title[b-vpuzfddh0s] {
    font-size: 0.8rem;
    color: var(--color-text-primary);
    font-style: italic;
    margin-bottom: 0.15rem;
}

.panel-character-info[b-vpuzfddh0s] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.level-badge-large[b-vpuzfddh0s] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 2px 10px var(--color-border-active);
    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: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-base);
}

.section-title a[b-vpuzfddh0s] {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.section-title a:hover[b-vpuzfddh0s] {
    color: var(--color-primary-light);
    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 var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-primary);
    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: var(--color-border-base);
    border-color: var(--color-border-active);
    color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-hover);
}

.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: var(--color-text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.stat-bar-value[b-vpuzfddh0s] {
    font-size: 0.7rem;
    color: var(--color-text-primary);
    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 var(--color-border-subtle);
}

.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, var(--color-success), var(--color-success-dark));
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.stat-bar-fill.mana[b-vpuzfddh0s] {
    background: linear-gradient(90deg, var(--color-info), var(--color-info-dark));
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.stat-bar-fill.xp[b-vpuzfddh0s] {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
    box-shadow: 0 0 8px var(--color-border-active);
}

/* Max Level Badge */
.max-level-badge[b-vpuzfddh0s] {
    background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.1));
    border: 1px solid var(--color-border-active);
    border-radius: 8px;
    padding: 0.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: var(--color-primary);
    text-shadow: 0 0 10px var(--color-border-active);
}

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

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

/* ============================================
   REALM UPDATES — RECENT POSTS INTEGRATION
   ::deep targets child component elements
   ============================================ */

/* Strip the widget's own box — the tavern-section already provides it */
.tavern-section[b-vpuzfddh0s]  .recent-posts-widget {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}

/* Hide the "Latest from the Blog" widget header — "Realm Updates" covers it */
.tavern-section[b-vpuzfddh0s]  .widget-header {
    display: none;
}

/* 3-column grid matching the rest of the tavern sections */
.tavern-section[b-vpuzfddh0s]  .recent-posts-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Cards styled to match tavern aesthetic */
.tavern-section[b-vpuzfddh0s]  .blog-post-card {
    border-color: rgba(255, 215, 0, 0.12);
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tavern-section[b-vpuzfddh0s]  .blog-post-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 215, 0, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Compact image height inside the tavern */
.tavern-section[b-vpuzfddh0s]  .post-image-container {
    height: 130px;
}

/* "View All Posts" button — full-width gold outline */
.tavern-section[b-vpuzfddh0s]  .view-all-posts-button {
    margin-top: 1.25rem;
}

/* ============================================
   RESPONSIVE — REALM UPDATES GRID
   ============================================ */

@media (max-width: 1279px) {
    .tavern-section[b-vpuzfddh0s]  .recent-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .tavern-section[b-vpuzfddh0s]  .recent-posts-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   RESPONSIVE — LEFT SIDEBAR STICKY
   On mobile the sidebar is not sticky
   ============================================ */

@media (max-width: 767px) {
    .left-sidebar-sticky[b-vpuzfddh0s] {
        position: relative;
        top: 0;
    }

    .character-panel[b-vpuzfddh0s] {
        margin-bottom: 0;
    }
}
/* /Components/Pages/Game/Inventory.razor.rz.scp.css */
/* Inventory Page - Scoped Styles */
/* Shared classes (item-grid, empty-state, filters-row, etc.) are in game-shared.css */

/* ============================================
   INVENTORY CONTAINER
   ============================================ */

.inventory-container[b-rt2ykpb1f9] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    position: relative;
}

    .inventory-container[b-rt2ykpb1f9]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-border-active), transparent);
    }

.items-container[b-rt2ykpb1f9] {
    border-color: rgba(59, 130, 246, 0.2);
}

    .items-container[b-rt2ykpb1f9]::before {
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
    }

/* ============================================
   INVENTORY TAB BAR (tabs + toolbar inline)
   ============================================ */

.inventory-tab-bar[b-rt2ykpb1f9] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

    .inventory-tab-bar > :first-child[b-rt2ykpb1f9] {
        flex: 1;
        min-width: 0;
    }

.inventory-toolbar[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    padding-bottom: var(--space-xs);
}

/* ============================================
   DENSITY GRID
   ============================================ */

[b-rt2ykpb1f9] .item-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}

[b-rt2ykpb1f9] .item-grid.item-grid-dense {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    [b-rt2ykpb1f9] .item-grid,
    [b-rt2ykpb1f9] .item-grid.item-grid-dense {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    [b-rt2ykpb1f9] .item-grid,
    [b-rt2ykpb1f9] .item-grid.item-grid-dense {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn[b-rt2ykpb1f9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-xl);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-slow);
    text-decoration: none;
    border: 2px solid transparent;
}

.btn-primary[b-rt2ykpb1f9] {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-gray-900);
    box-shadow: 0 4px 15px var(--color-border-active);
}

    .btn-primary:hover[b-rt2ykpb1f9] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px var(--color-border-active);
    }

.btn-secondary[b-rt2ykpb1f9] {
    background: rgba(51, 65, 85, 0.6);
    border-color: var(--color-border-active);
    color: var(--color-primary);
}

    .btn-secondary:hover[b-rt2ykpb1f9] {
        background: rgba(51, 65, 85, 0.9);
        border-color: var(--color-primary);
        transform: translateY(-3px);
    }

[b-rt2ykpb1f9] .btn-equip {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
    color: var(--color-gray-900) !important;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    padding: var(--space-sm) var(--space-lg) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 12px var(--color-border-active);
}

    [b-rt2ykpb1f9] .btn-equip:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--color-border-active);
    }

/* ============================================
   STAT CHIPS (drawer)
   ============================================ */

.stat-chip[b-rt2ykpb1f9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
}

.stat-damage[b-rt2ykpb1f9] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--color-danger-light);
}

.stat-ac[b-rt2ykpb1f9] {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--color-info-light);
}

.stat-type[b-rt2ykpb1f9] {
    text-transform: capitalize;
}

.stat-level[b-rt2ykpb1f9] {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}

.stat-bonus[b-rt2ykpb1f9] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--color-success-light);
}

.effect-chip[b-rt2ykpb1f9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success-light);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-rt2ykpb1f9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    min-height: 300px;
    padding: var(--space-3xl);
    text-align: center;
}

.empty-state-icon[b-rt2ykpb1f9] {
    font-size: 4rem !important;
    color: var(--color-text-tertiary);
    opacity: 0.4;
}

.warning-icon[b-rt2ykpb1f9] {
    color: var(--color-warning) !important;
    opacity: 0.8;
}

.empty-state-title[b-rt2ykpb1f9] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-transform: uppercase;
}

.empty-state-text[b-rt2ykpb1f9] {
    color: var(--color-text-secondary);
    max-width: 400px;
}

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

@media (max-width: 480px) {
    .inventory-container[b-rt2ykpb1f9] {
        padding: var(--space-lg);
    }
}
/* /Components/Pages/Game/LootTables.razor.rz.scp.css */
/* Loot Table Editor Styling */
.lt-editor-container[b-sisfwbmz2p] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Header */
.lt-editor-header[b-sisfwbmz2p] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.header-content[b-sisfwbmz2p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-title-section[b-sisfwbmz2p] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-title[b-sisfwbmz2p] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #f59e0b;
    margin: 0;
    line-height: 1.2;
}

.header-subtitle[b-sisfwbmz2p] {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0 0;
}

.header-actions[b-sisfwbmz2p] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Filters */
.filters-section[b-sisfwbmz2p] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-sisfwbmz2p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.filter-group.search-group[b-sisfwbmz2p] {
    flex: 1;
    min-width: 250px;
}

.filter-label[b-sisfwbmz2p] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f59e0b;
    opacity: 0.9;
}

/* Stats Bar */
.stats-bar[b-sisfwbmz2p] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.stat-chip[b-sisfwbmz2p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 0.2s ease;
}

.stat-chip:hover[b-sisfwbmz2p] { transform: translateY(-2px); }

.stat-chip.total[b-sisfwbmz2p] {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--color-text-light);
}

.stat-chip.total-entries[b-sisfwbmz2p] {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fde68a;
}

.stat-chip.type-weapon[b-sisfwbmz2p] {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #fca5a5;
}

.stat-chip.type-armor[b-sisfwbmz2p] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--color-info-lighter);
}

.stat-chip.type-consumable[b-sisfwbmz2p] {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #86efac;
}

.stat-chip.type-currency[b-sisfwbmz2p] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fde68a;
}

/* Loading & Empty */
.loading-state[b-sisfwbmz2p], .empty-state[b-sisfwbmz2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

/* Grid */
.lt-grid[b-sisfwbmz2p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Cards */
.lt-card[b-sisfwbmz2p] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.lt-card[b-sisfwbmz2p]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #f59e0b, #b45309);
}

.lt-card:hover[b-sisfwbmz2p] {
    transform: translateY(-4px);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.lt-card-header[b-sisfwbmz2p] { margin-bottom: 1rem; }

.lt-card-title-row[b-sisfwbmz2p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.lt-id-section[b-sisfwbmz2p] { flex: 1; min-width: 0; }

.lt-id[b-sisfwbmz2p] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f59e0b;
    margin: 0 0 0.35rem 0;
}

.lt-monster-badge[b-sisfwbmz2p] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.2rem 0.6rem;
    font-family: 'Courier New', monospace;
}

.lt-actions[b-sisfwbmz2p] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Entries Table */
.lt-entries-table[b-sisfwbmz2p] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.8rem;
}

.lt-entries-header[b-sisfwbmz2p] {
    display: grid;
    grid-template-columns: 1fr 90px 60px;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(245, 158, 11, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f59e0b;
}

.lt-entry-row[b-sisfwbmz2p] {
    display: grid;
    grid-template-columns: 1fr 90px 60px;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
}

.lt-entry-row:last-child[b-sisfwbmz2p] { border-bottom: none; }
.lt-entry-row:hover[b-sisfwbmz2p] { background: rgba(255, 255, 255, 0.03); }

.lt-entry-item[b-sisfwbmz2p] {
    color: var(--color-text-lighter);
    font-family: 'Courier New', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-entry-type[b-sisfwbmz2p] {
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
}

.lt-entry-type.type-weapon[b-sisfwbmz2p]    { background: rgba(239,68,68,0.15); color: #fca5a5; }
.lt-entry-type.type-armor[b-sisfwbmz2p]     { background: rgba(59,130,246,0.15); color: #93c5fd; }
.lt-entry-type.type-consumable[b-sisfwbmz2p]{ background: rgba(34,197,94,0.15);  color: #86efac; }
.lt-entry-type.type-currency[b-sisfwbmz2p]  { background: rgba(245,158,11,0.15); color: #fde68a; }

.lt-entry-chance[b-sisfwbmz2p] {
    font-weight: 700;
    text-align: right;
}

.lt-entry-chance.chance-high[b-sisfwbmz2p] { color: #4ade80; }
.lt-entry-chance.chance-mid[b-sisfwbmz2p]  { color: #facc15; }
.lt-entry-chance.chance-low[b-sisfwbmz2p]  { color: #fb923c; }
.lt-entry-chance.chance-rare[b-sisfwbmz2p] { color: #f87171; }

.lt-card-footer[b-sisfwbmz2p] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.lt-entry-count[b-sisfwbmz2p] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
}

/* Stat labels inside cards (reuse) */
.stat-label[b-sisfwbmz2p] {
    font-size: 0.65rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-value[b-sisfwbmz2p] {
    font-size: 0.875rem;
    color: var(--color-text-lighter);
    font-weight: 500;
}

/* Entry editor rows inside modal */
.entry-editor-row[b-sisfwbmz2p] {
    display: grid;
    grid-template-columns: 1fr 110px 130px 40px;
    gap: 0.75rem;
    align-items: end;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.04);
    border: 1px solid rgba(245, 158, 11, 0.12);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.entry-remove-field[b-sisfwbmz2p] {
    align-self: end;
}

/* Modals */
.modal-overlay[b-sisfwbmz2p] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-dialog[b-sisfwbmz2p] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-dialog-wide[b-sisfwbmz2p] { max-width: 720px; }

.modal[b-sisfwbmz2p] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content[b-sisfwbmz2p] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-header[b-sisfwbmz2p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2[b-sisfwbmz2p] {
    margin: 0;
    color: #f59e0b;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
}

.modal-body[b-sisfwbmz2p] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.modal-footer[b-sisfwbmz2p] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.close-btn[b-sisfwbmz2p] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.close-btn:hover[b-sisfwbmz2p] {
    color: var(--color-text-light);
    background: rgba(255, 255, 255, 0.08);
}

.form-row[b-sisfwbmz2p] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-row label[b-sisfwbmz2p] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.form-grid-2col[b-sisfwbmz2p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

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

.effects-section-title[b-sisfwbmz2p] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f59e0b;
}

.btn-sm[b-sisfwbmz2p] {
    padding: 0.3rem 0.75rem !important;
    font-size: 0.8rem !important;
}

.btn-xs[b-sisfwbmz2p] {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem !important;
    min-width: unset !important;
}

@media (max-width: 768px) {
    .lt-editor-container[b-sisfwbmz2p] { padding: 1rem; }
    .lt-grid[b-sisfwbmz2p] { grid-template-columns: 1fr; }
    .entry-editor-row[b-sisfwbmz2p] { grid-template-columns: 1fr 1fr; }
    .entry-remove-field[b-sisfwbmz2p] { grid-column: 1 / -1; }
    .form-grid-2col[b-sisfwbmz2p] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Game/Merchant.razor.rz.scp.css */
/* Merchant Page Styles - Fantasy RPG Theme */

/* ===== STORE CONTAINER ===== */
.store-container[b-p0opus3hoz] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
}

.store-container[b-p0opus3hoz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-border-active) 20%,
        var(--color-primary) 50%,
        var(--color-border-active) 80%,
        transparent 100%);
}

.store-container[b-p0opus3hoz]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-border-hover) 50%,
        transparent 100%);
}

/* ===== ALERT MESSAGES ===== */
.alert-message[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
    animation: slideIn-b-p0opus3hoz 0.3s ease-out;
}

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

.alert-success[b-p0opus3hoz] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.4);
    color: var(--color-success-light);
}

.alert-success[b-p0opus3hoz]::before {
    content: '?';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    font-weight: bold;
    flex-shrink: 0;
}

.alert-error[b-p0opus3hoz] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border: 2px solid rgba(239, 68, 68, 0.4);
    color: var(--color-danger-light);
}

.alert-error[b-p0opus3hoz]::before {
    content: '?';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 50%;
    font-weight: bold;
    flex-shrink: 0;
}

.alert-icon[b-p0opus3hoz] {
    display: none; /* Using CSS pseudo-elements instead */
}

.alert-close[b-p0opus3hoz] {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: inherit;
    cursor: pointer;
    padding: var(--space-sm);
    opacity: 0.7;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-close:hover[b-p0opus3hoz] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.close-icon[b-p0opus3hoz] {
    font-size: 1.2rem;
    line-height: 1;
}

/* ===== TOAST NOTIFICATION ===== */
.toast-notification[b-p0opus3hoz] {
    position: fixed;
    top: 80px;
    right: var(--space-xl);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-xl);
    min-width: 300px;
    max-width: 450px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-out;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.toast-notification.visible[b-p0opus3hoz] {
    opacity: 1;
    transform: translateX(0);
}

.toast-success[b-p0opus3hoz] {
    background: linear-gradient(135deg, var(--color-bg-elevated-alt), rgba(34, 197, 94, 0.15));
    border: 2px solid rgba(34, 197, 94, 0.5);
}

.toast-error[b-p0opus3hoz] {
    background: linear-gradient(135deg, var(--color-bg-elevated-alt), rgba(239, 68, 68, 0.15));
    border: 2px solid rgba(239, 68, 68, 0.5);
}

.toast-icon[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.toast-success .toast-icon[b-p0opus3hoz] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
}

.toast-error .toast-icon[b-p0opus3hoz] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-danger-light);
}

.toast-message[b-p0opus3hoz] {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.toast-success .toast-message[b-p0opus3hoz] {
    color: var(--color-success-light);
}

.toast-error .toast-message[b-p0opus3hoz] {
    color: var(--color-danger-light);
}

.toast-close[b-p0opus3hoz] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    opacity: 0.7;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover[b-p0opus3hoz] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.toast-progress[b-p0opus3hoz] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    animation: toast-progress-b-p0opus3hoz 4s linear forwards;
}

.progress-success[b-p0opus3hoz] {
    background: linear-gradient(90deg, var(--color-success), var(--color-success-light));
}

.progress-error[b-p0opus3hoz] {
    background: linear-gradient(90deg, var(--color-danger), var(--color-danger-light));
}

@keyframes toast-progress-b-p0opus3hoz {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Toast mobile responsive */
@media (max-width: 640px) {
    .toast-notification[b-p0opus3hoz] {
        top: auto;
        bottom: var(--space-lg);
        left: var(--space-md);
        right: var(--space-md);
        min-width: auto;
        max-width: none;
        transform: translateY(100%);
    }

    .toast-notification.visible[b-p0opus3hoz] {
        transform: translateY(0);
    }
}

/* ===== LOADING CONTAINER ===== */
.loading-container[b-p0opus3hoz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    min-height: 400px;
    color: var(--color-text-secondary);
}

.spinner[b-p0opus3hoz] {
    width: 70px;
    height: 70px;
    border: 4px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-p0opus3hoz 1s linear infinite;
    box-shadow: 0 0 20px var(--color-border-hover);
}

@keyframes spin-b-p0opus3hoz {
    to { transform: rotate(360deg); }
}

.loading-text[b-p0opus3hoz] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: pulse-b-p0opus3hoz 1.5s ease-in-out infinite;
}

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

/* ===== EMPTY STATE ===== */
.empty-state[b-p0opus3hoz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    min-height: 350px;
    padding: var(--space-3xl);
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.03), transparent 70%);
    border-radius: var(--radius-2xl);
}

.empty-state-icon[b-p0opus3hoz] {
    font-size: 5rem !important;
    color: var(--color-text-tertiary);
    opacity: 0.4;
}

.warning-icon[b-p0opus3hoz] {
    color: var(--color-warning) !important;
    opacity: 0.8;
}

.empty-state-title[b-p0opus3hoz] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.empty-state-text[b-p0opus3hoz] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    max-width: 400px;
}

/* ===== PAGE FOOTER ===== */
.page-footer[b-p0opus3hoz] {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    flex-wrap: wrap;
    justify-content: center;
}

/* ===== BUTTON STYLES ===== */
.btn[b-p0opus3hoz] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-xl);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-slow);
    text-decoration: none;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn[b-p0opus3hoz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover[b-p0opus3hoz]::before {
    left: 100%;
}

.btn-primary[b-p0opus3hoz] {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-gray-900);
    box-shadow: 
        0 4px 15px var(--color-border-active),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary:hover[b-p0opus3hoz] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    transform: translateY(-3px);
    box-shadow: 
        0 8px 25px var(--color-border-active),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-secondary[b-p0opus3hoz] {
    background: rgba(51, 65, 85, 0.6);
    border-color: var(--color-border-active);
    color: var(--color-primary);
    backdrop-filter: blur(5px);
}

.btn-secondary:hover[b-p0opus3hoz] {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn-icon[b-p0opus3hoz] {
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
}

/* ===== TABLET RESPONSIVE ===== */
@media (max-width: 1024px) {
    .store-container[b-p0opus3hoz] {
        padding: var(--space-lg);
    }

    .page-footer[b-p0opus3hoz] {
        justify-content: center;
    }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 640px) {
    .store-container[b-p0opus3hoz] {
        padding: var(--space-md);
        border-radius: var(--radius-lg);
    }

    .alert-message[b-p0opus3hoz] {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    .alert-close[b-p0opus3hoz] {
        position: absolute;
        top: var(--space-sm);
        right: var(--space-sm);
    }

    .alert-message[b-p0opus3hoz] {
        position: relative;
        padding-top: var(--space-xl);
    }

    .loading-container[b-p0opus3hoz] {
        min-height: 300px;
    }

    .empty-state[b-p0opus3hoz] {
        min-height: 250px;
        padding: var(--space-xl);
    }

    .empty-state-icon[b-p0opus3hoz] {
        font-size: 3.5rem !important;
    }

    .empty-state-title[b-p0opus3hoz] {
        font-size: var(--font-size-xl);
    }

    .page-footer[b-p0opus3hoz] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .btn[b-p0opus3hoz] {
        width: 100%;
        justify-content: center;
        padding: var(--space-lg);
    }
}

/* ===== PHASE 1B - AFFORDABILITY STATE UTILITIES ===== */

.price-affordable[b-p0opus3hoz] { color: #15803d; font-weight: 600; }
.price-unaffordable[b-p0opus3hoz] { color: #dc2626; font-weight: 600; }

/* ===== PHASE 1E - MERCHANT IDENTITY (now in left column portrait card) ===== */
/* Legacy identity-header styles removed — portrait card uses game-shared.css */

/* ===== PHASE 1D - COMPARE POPOVER ===== */

.compare-overlay[b-p0opus3hoz] {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.compare-popover[b-p0opus3hoz] {
    background: #1e293b;
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    padding: 1.5rem;
    width: 480px;
    max-width: 94vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.compare-header[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffd700;
    font-family: Cinzel, serif;
    font-size: 1rem;
    margin-bottom: 1rem;
    justify-content: space-between;
}

.compare-header-title[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.compare-cols[b-p0opus3hoz] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: start;
}

.compare-col-label[b-p0opus3hoz] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 4px;
}

.compare-item-name[b-p0opus3hoz] {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
}

.compare-empty[b-p0opus3hoz] {
    color: #475569;
    font-style: italic;
    font-size: 0.85rem;
}

.compare-divider[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    padding-top: 1.2rem;
}

.compare-stat-rows[b-p0opus3hoz] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.5rem;
}

.compare-stat-row[b-p0opus3hoz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.85rem;
}

.compare-stat-label[b-p0opus3hoz] {
    color: #94a3b8;
}

.compare-stat-values[b-p0opus3hoz] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.compare-val[b-p0opus3hoz] {
    font-size: 0.8rem;
    color: #64748b;
    min-width: 60px;
    text-align: right;
}

.diff-positive[b-p0opus3hoz] { color: #22c55e; font-weight: 700; }
.diff-negative[b-p0opus3hoz] { color: #ef4444; font-weight: 700; }
.diff-neutral[b-p0opus3hoz] { color: #64748b; }
.diff-new[b-p0opus3hoz] { color: #a78bfa; font-weight: 700; }

/* btn-compare in tab action buttons */
[b-p0opus3hoz] .btn-compare {
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
    min-width: unset !important;
    padding: 4px 8px !important;
    border-radius: 6px;
    transition: all 0.2s;
}

[b-p0opus3hoz] .btn-compare:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.5);
}

/* ===== MERCHANT TAB BAR (tabs + toolbar inline) ===== */
.merchant-tab-bar[b-p0opus3hoz] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

    .merchant-tab-bar > :first-child[b-p0opus3hoz] {
        flex: 1;
        min-width: 0;
    }

/* ===== MERCHANT SHOP TOOLBAR ===== */
.merchant-shop-toolbar[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    padding-bottom: var(--space-xs);
}

/* ===== SLOT SELECTION - LOADOUT PANEL (Phase 2D) ===== */
[b-p0opus3hoz] .slot-normal {
    cursor: pointer;
    transition: all 0.15s;
}

[b-p0opus3hoz] .slot-selected {
    border: 1px solid rgba(255,215,0,0.5) !important;
    background: rgba(255,215,0,0.05) !important;
    cursor: pointer;
}

/* ===== ITEM GRID HIGHLIGHT (Phase 2D) ===== */
[b-p0opus3hoz] .item-slot-highlighted {
    border: 2px solid rgba(255,215,0,0.4) !important;
    animation: slot-pulse-b-p0opus3hoz 1.8s ease-in-out infinite;
}

[b-p0opus3hoz] .item-slot-dimmed {
    opacity: 0.35;
    filter: grayscale(0.5);
    pointer-events: none;
}

@keyframes slot-pulse-b-p0opus3hoz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
    50%       { box-shadow: 0 0 0 4px rgba(255,215,0,0.15); }
}

/* ===== DENSITY GRID (Phase 3A) ===== */
[b-p0opus3hoz] .item-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}

[b-p0opus3hoz] .item-grid.item-grid-dense {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    [b-p0opus3hoz] .item-grid,
    [b-p0opus3hoz] .item-grid.item-grid-dense {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    [b-p0opus3hoz] .item-grid,
    [b-p0opus3hoz] .item-grid.item-grid-dense {
        grid-template-columns: 1fr;
    }
}

/* ===== BUY / SELL CONFIRMATION POPOVER (Phase 3B & 3C) ===== */
.buy-confirm-popover[b-p0opus3hoz] {
    background: #1e293b;
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 12px;
    padding: 1.5rem;
    width: 340px;
    max-width: 94vw;
}

.buy-confirm-title[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffd700;
    font-family: Cinzel, serif;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.buy-confirm-item-name[b-p0opus3hoz] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sell-confirm-qty[b-p0opus3hoz] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.buy-gold-summary[b-p0opus3hoz] { margin-bottom: 1.25rem; }

.gold-row[b-p0opus3hoz] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.875rem;
    color: #94a3b8;
}

.gold-row-cost[b-p0opus3hoz] { color: #ef4444; }

.gold-row-gain[b-p0opus3hoz] { color: #22c55e; }

.gold-row-after[b-p0opus3hoz] {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 10px;
    margin-top: 4px;
    font-weight: 600;
    color: #e2e8f0;
}

.gold-ok[b-p0opus3hoz] { color: #22c55e; }
.gold-danger[b-p0opus3hoz] { color: #ef4444; }

.buy-confirm-actions[b-p0opus3hoz] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ===== RESPONSIVE AUDIT (Phase 3D) ===== */
@media (max-width: 1024px) {
    .merchant-main-layout[b-p0opus3hoz] {
        flex-direction: column;
    }

    .merchant-loadout-column[b-p0opus3hoz] {
        width: 100%;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
    }

    .merchant-right-panel[b-p0opus3hoz] { width: 100%; }
}

@media (max-width: 600px) {
    .buy-confirm-popover[b-p0opus3hoz] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 16px 16px 0 0;
        width: 100%;
        max-width: 100%;
    }

    .compare-overlay[b-p0opus3hoz] {
        align-items: flex-end;
    }
}
/* /Components/Pages/Game/Messages.razor.rz.scp.css */
.messages-page[b-togmvom9vh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    height: calc(100vh - 4rem);
}

/* Hero Header */
.hero-header[b-togmvom9vh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    flex-shrink: 0;
}

.hero-left[b-togmvom9vh] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.hero-icon[b-togmvom9vh] {
    font-size: 2.5rem;
    color: var(--color-primary);
}

.hero-info h1[b-togmvom9vh] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-subtitle[b-togmvom9vh] {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin: 0.375rem 0 0 0;
}

.hero-right[b-togmvom9vh] {
    display: flex;
    gap: 0.75rem;
}

/* Split View Container */
.messages-container[b-togmvom9vh] {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.messages-container.no-selection[b-togmvom9vh] {
    grid-template-columns: 1fr;
}

.messages-container.has-selection .conversations-panel[b-togmvom9vh] {
    display: block;
}

.messages-container.no-selection .messages-panel[b-togmvom9vh] {
    display: flex;
}

/* Panels */
.conversations-panel[b-togmvom9vh],
.messages-panel[b-togmvom9vh] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Empty State */
.empty-state[b-togmvom9vh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 4rem 2rem;
    height: 100%;
}

.empty-state .material-icons[b-togmvom9vh] {
    font-size: 5rem;
    color: var(--color-text-tertiary);
}

.empty-state p[b-togmvom9vh] {
    color: var(--color-text-light);
    font-size: 1.2rem;
    margin: 0;
    text-align: center;
}

/* Buttons */
.btn-secondary[b-togmvom9vh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
    color: var(--color-text-light);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary .material-icons[b-togmvom9vh] {
    font-size: 1.125rem;
}

.btn-secondary:hover[b-togmvom9vh] {
    background: rgba(100, 116, 139, 0.3);
    border-color: rgba(100, 116, 139, 0.4);
}

/* Responsive */
@media (max-width: 1024px) {
    .messages-container[b-togmvom9vh] {
        grid-template-columns: 1fr;
    }

    .messages-container.has-selection .conversations-panel[b-togmvom9vh] {
        display: none;
    }

    .messages-container.no-selection .messages-panel[b-togmvom9vh] {
        display: none;
    }
}

@media (max-width: 768px) {
    .messages-page[b-togmvom9vh] {
        padding: 1rem;
        height: calc(100vh - 2rem);
    }

    .hero-header[b-togmvom9vh] {
        padding: 1rem 1.25rem;
    }

    .hero-icon[b-togmvom9vh] {
        font-size: 2rem;
    }

    .hero-info h1[b-togmvom9vh] {
        font-size: 1.5rem;
    }

    .messages-container[b-togmvom9vh] {
        gap: 1rem;
    }
}
/* /Components/Pages/Game/MultiplayerAdventure.razor.rz.scp.css */
/* Lourdin.Web/Components/Pages/MultiplayerAdventure.razor.css */
/* CSS Isolation for Multiplayer Adventures Page */
/* Uses Design System Tokens from design-system.css */

.multiplayer-container[b-eqihb5ltji] {
    max-width: var(--page-max-width-md);
    margin: 0 auto;
    padding: var(--page-padding-x);
}


/* Selection View */
.multiplayer-selection[b-eqihb5ltji] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-3xl);
    overflow: hidden;
}

.selection-header[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-border-base) 0%, rgba(218, 165, 32, 0.08) 100%);
    padding: var(--space-2xl);
    text-align: center;
    border-bottom: 1px solid var(--color-border-base);
}

.selection-title[b-eqihb5ltji] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin: 0 0 var(--space-sm) 0;
}

.selection-subtitle[b-eqihb5ltji] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

.multiplayer-tabs[b-eqihb5ltji] {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--color-border-subtle);
}

.multiplayer-tab[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    background: rgba(0, 0, 0, 0.3);
    color: var(--color-text-secondary);
}

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

.multiplayer-tab.active[b-eqihb5ltji] {
    background: var(--color-border-base);
    border-color: var(--color-border-hover);
    color: var(--color-primary);
}

.create-section[b-eqihb5ltji], .saved-section[b-eqihb5ltji], .completed-section[b-eqihb5ltji] {
    padding: var(--space-xl);
}

.adventure-grid[b-eqihb5ltji] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.adventure-card[b-eqihb5ltji] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    cursor: pointer;
    transition: all var(--transition-slow);
}

.adventure-card:hover[b-eqihb5ltji] {
    transform: translateY(-4px);
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-lg), var(--shadow-gold);
}

.adventure-card-title[b-eqihb5ltji] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.adventure-card-description[b-eqihb5ltji] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.5;
}

.adventure-card-meta[b-eqihb5ltji] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
}

.meta-item[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.empty-adventures[b-eqihb5ltji], .empty-saved[b-eqihb5ltji], .empty-completed[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-3xl);
    color: var(--color-text-tertiary);
    text-align: center;
}

.empty-saved-hint[b-eqihb5ltji], .empty-completed-hint[b-eqihb5ltji] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.join-code-container[b-eqihb5ltji] {
    padding: var(--space-2xl);
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.join-code-title[b-eqihb5ltji] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-xl) 0;
}

.join-code-input[b-eqihb5ltji] {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    font-size: var(--font-size-2xl);
    font-family: var(--font-display);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--space-lg);
}

.join-code-input:focus[b-eqihb5ltji] {
    outline: none;
    border-color: var(--color-border-active);
    box-shadow: var(--shadow-gold);
}

.join-code-input[b-eqihb5ltji]::placeholder {
    color: var(--color-text-muted);
    letter-spacing: 0.3em;
}

.btn-join[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: white;
    border: none;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-join:hover:not(:disabled)[b-eqihb5ltji] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

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

/* Saved & Completed Adventures Lists */
.loading-saved[b-eqihb5ltji], .loading-completed[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--color-text-secondary);
}

.saved-adventures-list[b-eqihb5ltji], .completed-adventures-list[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.saved-adventure-card[b-eqihb5ltji], .completed-adventure-card[b-eqihb5ltji] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.saved-adventure-card:hover[b-eqihb5ltji], .completed-adventure-card:hover[b-eqihb5ltji] {
    border-color: var(--color-border-active);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.saved-adventure-header[b-eqihb5ltji], .completed-adventure-header[b-eqihb5ltji] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.saved-adventure-info[b-eqihb5ltji], .completed-adventure-info[b-eqihb5ltji] {
    flex: 1;
}

.saved-adventure-title[b-eqihb5ltji], .completed-adventure-title[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
}

.saved-adventure-meta[b-eqihb5ltji], .completed-adventure-meta[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.saved-meta-divider[b-eqihb5ltji], .completed-meta-divider[b-eqihb5ltji] {
    margin: 0 0.25rem;
}

.saved-adventure-actions[b-eqihb5ltji], .completed-adventure-actions[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.saved-date[b-eqihb5ltji], .completed-date[b-eqihb5ltji] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.btn-rejoin[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.saved-adventure-players[b-eqihb5ltji], .completed-adventure-players[b-eqihb5ltji] {
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    margin: 0.75rem 0;
}

.players-label[b-eqihb5ltji] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.player-badges[b-eqihb5ltji] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.player-badge[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
}

.player-badge.connected[b-eqihb5ltji] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.player-badge-avatar[b-eqihb5ltji] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-badge-info[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.player-badge-name[b-eqihb5ltji] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.player-badge-status[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
}

.host-tag[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.connected-tag[b-eqihb5ltji] {
    color: var(--color-success);
    font-size: 1rem;
    line-height: 1;
}

.saved-adventure-code[b-eqihb5ltji], .completed-adventure-code[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid var(--color-border-hover);
    border-radius: 6px;
    margin-top: 0.75rem;
}

.code-label[b-eqihb5ltji] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.code-value[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.2em;
}

.btn-copy-small[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.btn-copy-small:hover[b-eqihb5ltji] {
    background: rgba(255, 215, 0, 0.1);
}

/* Lobby View */
.multiplayer-lobby[b-eqihb5ltji] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 16px;
    overflow: hidden;
}

.lobby-header[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-border-base) 0%, rgba(218, 165, 32, 0.08) 100%);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    flex-wrap: wrap;
}

.lobby-title[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
}

.lobby-description[b-eqihb5ltji] {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
}

.lobby-status[b-eqihb5ltji] {
    margin-top: 0.5rem;
}

.status-badge[b-eqihb5ltji] {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.waiting-for-players[b-eqihb5ltji] {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-warning-bright);
}

.status-badge.in-progress[b-eqihb5ltji],
.status-badge.in-combat[b-eqihb5ltji] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-light);
}

.status-badge.waiting-for-ready-check[b-eqihb5ltji] {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.status-badge.completed[b-eqihb5ltji] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
}

.lobby-code-section[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.lobby-code-label[b-eqihb5ltji] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}

.lobby-code-value[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.2em;
}

.btn-copy[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy:hover[b-eqihb5ltji] {
    background: rgba(255, 215, 0, 0.1);
}

/* Player List */
.player-list[b-eqihb5ltji] {
    padding: 1rem;
}

.player-list-header[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

.player-slots[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-slot[b-eqihb5ltji] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.player-slot:hover[b-eqihb5ltji] {
    border-color: var(--color-border-hover);
}

.player-slot.host[b-eqihb5ltji] {
    border-left: 3px solid var(--color-primary);
}

.player-slot.ready[b-eqihb5ltji] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
}

.player-slot-info[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.player-avatar[b-eqihb5ltji] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-avatar.warrior[b-eqihb5ltji] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-danger-lighter);
}

.player-avatar.wizard[b-eqihb5ltji] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-lighter);
}

.player-avatar.ranger[b-eqihb5ltji] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-lighter);
}

.player-avatar.rogue[b-eqihb5ltji] {
    background: rgba(99, 102, 241, 0.2);
    color: var(--color-rogue-light);
}

.player-avatar.paladin[b-eqihb5ltji] {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-warning-light);
}

.player-avatar.bard[b-eqihb5ltji] {
    background: rgba(236, 72, 153, 0.2);
    color: var(--color-bard-light);
}

.player-details[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
}

.player-slot-name[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--color-text-primary);
}

.player-slot-class[b-eqihb5ltji] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.player-slot-status[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.connection-dot.connected[b-eqihb5ltji] {
    background: var(--color-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.connection-dot.disconnected[b-eqihb5ltji] {
    background: var(--color-danger);
}

.ready-badge[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.not-ready-badge[b-eqihb5ltji] {
    background: rgba(100, 116, 139, 0.2);
    color: var(--color-text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.host-badge[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Lobby Actions */
.lobby-actions[b-eqihb5ltji] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--color-border-subtle);
}

.btn-primary-action[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary-action:hover:not(:disabled)[b-eqihb5ltji] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.btn-primary-action:disabled[b-eqihb5ltji] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary-action[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary-action:hover[b-eqihb5ltji] {
    background: rgba(255, 215, 0, 0.1);
}

.btn-ready[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ready:hover[b-eqihb5ltji] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.btn-ready.active[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-success-dark), #15803d);
}

.btn-leave[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger-light);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.btn-leave:hover[b-eqihb5ltji] {
    background: rgba(239, 68, 68, 0.1);
}

/* Dialog Styles */
.dialog-title[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.invite-form[b-eqihb5ltji] {
    padding: 1rem 0;
}

/* Invite Friends Dialog */
.invite-friends-content[b-eqihb5ltji] {
    padding: 1rem 0;
}

.loading-state[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    color: var(--color-text-secondary);
}

.empty-state[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: var(--color-text-tertiary);
}

.empty-state p[b-eqihb5ltji] {
    margin: 0;
}

.hint-text[b-eqihb5ltji] {
    font-size: 0.85rem;
    color: #475569;
}

.friends-list-invite[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.friends-list-invite[b-eqihb5ltji]::-webkit-scrollbar {
    width: 6px;
}

.friends-list-invite[b-eqihb5ltji]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.friends-list-invite[b-eqihb5ltji]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

.friends-list-invite[b-eqihb5ltji]::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}

.friend-card-invite[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.friend-card-invite:hover[b-eqihb5ltji] {
    border-color: var(--color-border-hover);
    background: rgba(0, 0, 0, 0.3);
}

.friend-card-invite.selected[b-eqihb5ltji] {
    border-color: var(--color-border-active);
    background: rgba(255, 215, 0, 0.05);
}

.friend-card-header[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.friend-avatar[b-eqihb5ltji] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.friend-info[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.friend-name[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.95rem;
}

.friend-status[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.friend-status.online[b-eqihb5ltji] {
    color: var(--color-success);
}

.friend-status.offline[b-eqihb5ltji] {
    color: var(--color-text-secondary);
}

.status-dot[b-eqihb5ltji] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.friend-status.online .status-dot[b-eqihb5ltji] {
    background: var(--color-success);
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
}

.friend-status.offline .status-dot[b-eqihb5ltji] {
    background: var(--color-text-tertiary);
}

.friend-card-action[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    margin-left: 0.75rem;
}

.friend-card-action input[type="checkbox"][b-eqihb5ltji] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.invite-message-section[b-eqihb5ltji] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-subtle);
}

.invite-message-section label[b-eqihb5ltji] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.invite-message-section textarea[b-eqihb5ltji] {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-hover);
    border-radius: 6px;
    padding: 0.75rem;
    color: var(--color-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 0.9rem;
    resize: vertical;
    transition: all 0.2s ease;
}

.invite-message-section textarea:focus[b-eqihb5ltji] {
    outline: none;
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 12px var(--color-border-base);
    background: rgba(0, 0, 0, 0.4);
}

.invite-message-section textarea[b-eqihb5ltji]::placeholder {
    color: #475569;
}

.char-count[b-eqihb5ltji] {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
    .multiplayer-container[b-eqihb5ltji] {
        padding: 1rem;
    }
    
    .lobby-header[b-eqihb5ltji] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .lobby-code-section[b-eqihb5ltji] {
        align-items: flex-start;
        width: 100%;
        padding-top: 1rem;
        border-top: 1px solid var(--color-border-subtle);
    }
    
    .lobby-title[b-eqihb5ltji] {
        font-size: 1.25rem;
    }
    
    .adventure-grid[b-eqihb5ltji] {
        grid-template-columns: 1fr;
    }
    
    .lobby-actions[b-eqihb5ltji] {
        flex-direction: column;
    }
    
    .btn-leave[b-eqihb5ltji] {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .selection-title[b-eqihb5ltji] {
        font-size: 1.4rem;
    }
    
    .multiplayer-tabs[b-eqihb5ltji] {
        flex-direction: column;
    }
    
    .saved-adventure-header[b-eqihb5ltji], .completed-adventure-header[b-eqihb5ltji] {
        flex-direction: column;
        align-items: flex-start;
    }

    .saved-adventure-actions[b-eqihb5ltji], .completed-adventure-actions[b-eqihb5ltji] {
        align-items: flex-start;
        width: 100%;
    }

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

    .player-badges[b-eqihb5ltji] {
        flex-direction: column;
    }
}

/* REST Event System Styles */

.rest-decision-overlay[b-eqihb5ltji] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-eqihb5ltji 0.3s ease-in-out;
}

.rest-decision-card[b-eqihb5ltji] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    max-width: 700px;
    width: 90%;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    animation: slideUp-b-eqihb5ltji 0.4s ease-out;
}

.rest-decision-header[b-eqihb5ltji] {
    text-align: center;
    padding: var(--space-2xl);
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.15) 0%, rgba(255, 215, 0, 0.08) 100%);
    border-bottom: 1px solid var(--color-border-base);
}

.rest-decision-header h2[b-eqihb5ltji] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: var(--space-md) 0 var(--space-sm) 0;
}

.rest-decision-header p[b-eqihb5ltji] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

.rest-decision-choices[b-eqihb5ltji] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-2xl);
}

.rest-choice-card[b-eqihb5ltji] {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rest-choice-card:hover[b-eqihb5ltji] {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.rest-choice-card h3[b-eqihb5ltji] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: var(--space-md) 0 var(--space-sm) 0;
}

.rest-choice-card p[b-eqihb5ltji] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.6;
}

.vote-counter[b-eqihb5ltji] {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-bg-base);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-top: var(--space-sm);
}

.rest-decision-footer[b-eqihb5ltji] {
    display: flex;
    justify-content: center;
    padding: var(--space-lg) var(--space-2xl) var(--space-2xl);
    border-top: 1px solid var(--color-border-subtle);
}

@keyframes fadeIn-b-eqihb5ltji {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-eqihb5ltji {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* /Components/Pages/Game/PetManagement.razor.rz.scp.css */
.pets-locked-panel[b-f30u39tu49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    gap: 0.5rem;
}

/* Page layout */
.pets-page[b-f30u39tu49] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.pets-page-header[b-f30u39tu49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

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

.pets-page-title[b-f30u39tu49] {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
}

.pets-page-subtitle[b-f30u39tu49] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0.15rem 0 0;
}

/* Panels */
.pets-panel[b-f30u39tu49] {
    background: linear-gradient(160deg, rgba(30,41,59,0.85), rgba(15,23,42,0.9));
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: 12px;
    padding: 1.25rem;
    height: 100%;
}

.pets-active-panel[b-f30u39tu49] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pets-panel-title[b-f30u39tu49] {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(251,191,36,0.2);
    padding-bottom: 0.5rem;
}

/* Active pet portrait */
.active-pet-portrait-wrapper[b-f30u39tu49] {
    position: relative;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
}

.active-pet-portrait-fallback[b-f30u39tu49] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.active-pet-rarity-glow[b-f30u39tu49] {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
}

.active-pet-rarity-glow.rarity-common[b-f30u39tu49]   { box-shadow: inset 0 0 0 2px rgba(148,163,184,0.4); }
.active-pet-rarity-glow.rarity-uncommon[b-f30u39tu49] { box-shadow: inset 0 0 0 2px rgba(74,222,128,0.5); }
.active-pet-rarity-glow.rarity-rare[b-f30u39tu49]     { box-shadow: inset 0 0 0 2px rgba(96,165,250,0.6); }
.active-pet-rarity-glow.rarity-epic[b-f30u39tu49]     { box-shadow: inset 0 0 0 2px rgba(192,132,252,0.7); }
.active-pet-rarity-glow.rarity-legendary[b-f30u39tu49] {
    box-shadow: inset 0 0 0 2px rgba(251,191,36,0.8), 0 0 20px rgba(251,191,36,0.3);
    animation: legendaryGlow-b-f30u39tu49 2.5s ease-in-out infinite;
}

@keyframes legendaryGlow-b-f30u39tu49 {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(251,191,36,0.8), 0 0 20px rgba(251,191,36,0.3); }
    50%       { box-shadow: inset 0 0 0 2px rgba(251,191,36,1.0), 0 0 35px rgba(251,191,36,0.5); }
}

/* Active pet info */
.active-pet-name-row[b-f30u39tu49] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.active-pet-name[b-f30u39tu49] {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
    text-align: center;
}

.active-pet-stage[b-f30u39tu49] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #94a3b8;
}

.stage-gem[b-f30u39tu49] { font-size: 0.75rem; }
.stage-gem.stage-1[b-f30u39tu49] { color: #94a3b8; }
.stage-gem.stage-2[b-f30u39tu49] { color: #22d3ee; }
.stage-gem.stage-3[b-f30u39tu49] { color: #fbbf24; }

/* XP bar */
.active-pet-xp-section[b-f30u39tu49] {
    width: 100%;
}

.xp-label-row[b-f30u39tu49] {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-bottom: 4px;
}

.xp-bar[b-f30u39tu49] {
    width: 100%;
    height: 6px;
    background: rgba(148,163,184,0.15);
    border-radius: 3px;
    overflow: hidden;
}

.xp-bar-fill[b-f30u39tu49] {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #93c5fd);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Stats */
.active-pet-stats[b-f30u39tu49] {
    width: 100%;
}

.stats-grid[b-f30u39tu49] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}

.stat-chip[b-f30u39tu49] {
    background: rgba(96,165,250,0.12);
    border: 1px solid rgba(96,165,250,0.3);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.7rem;
    color: #93c5fd;
    font-weight: 600;
}

.affinity-banner[b-f30u39tu49] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #fde68a;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 4px;
}

/* Evolution panel */
.evolve-panel[b-f30u39tu49] {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.evolve-title[b-f30u39tu49] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.evolve-info[b-f30u39tu49] {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    flex-wrap: wrap;
    gap: 4px;
}

/* No active pet */
.no-active-pet[b-f30u39tu49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
    flex: 1;
}

/* Owned pets grid */
.owned-pets-grid[b-f30u39tu49] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 2px;
}

/* Discovery grid */
.discovery-grid[b-f30u39tu49] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 2px;
}

.discovery-card[b-f30u39tu49] {
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.discovery-card.discovery-locked[b-f30u39tu49] {
    opacity: 0.75;
}

.discovery-silhouette[b-f30u39tu49] {
    aspect-ratio: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,0.8);
    overflow: hidden;
}

.discovery-silhouette-img[b-f30u39tu49] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0) brightness(0.35);
}

.discovery-info[b-f30u39tu49] {
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.discovery-rarity[b-f30u39tu49] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.discovery-hint[b-f30u39tu49] {
    font-size: 0.62rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Companion quest panel */
.companion-quest-panel[b-f30u39tu49] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.companion-quest-title[b-f30u39tu49] {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: #fbbf24;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.companion-quest-hint[b-f30u39tu49] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
    line-height: 1.3;
}
/* /Components/Pages/Game/PetShop.razor.rz.scp.css */
/* ============================================================
   PET SHOP — dark RPG aesthetic, mirrors PetManagement.razor.css
   ============================================================ */

/* Locked / no-character panel (re-uses pets-locked-panel class from PetManagement) */
.pets-locked-panel[b-l33gtl3fpp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    gap: 0.5rem;
}

/* ── Page layout ─────────────────────────────────────────── */

.shop-page[b-l33gtl3fpp] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.shop-page-header[b-l33gtl3fpp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

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

.shop-page-title[b-l33gtl3fpp] {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
}

.shop-page-subtitle[b-l33gtl3fpp] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0.15rem 0 0;
}

/* ── Premium banner ──────────────────────────────────────── */

.premium-banner[b-l33gtl3fpp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, rgba(161,89,14,0.25), rgba(120,53,15,0.2));
    border: 1px solid rgba(251,191,36,0.35);
    border-radius: 10px;
    color: #fde68a;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.premium-banner strong[b-l33gtl3fpp] {
    color: #fbbf24;
}

/* ── Shop grid ───────────────────────────────────────────── */

.shop-grid[b-l33gtl3fpp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

/* ── Shop card ───────────────────────────────────────────── */

.shop-pet-card[b-l33gtl3fpp] {
    background: linear-gradient(160deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95));
    border: 1px solid rgba(251,191,36,0.22);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.shop-pet-card:hover:not(.owned):not(.locked)[b-l33gtl3fpp] {
    transform: translateY(-4px);
    border-color: rgba(251,191,36,0.55);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 12px rgba(251,191,36,0.15);
}

.shop-pet-card.owned[b-l33gtl3fpp] {
    opacity: 0.72;
}

.shop-pet-card.locked .shop-pet-img[b-l33gtl3fpp] {
    filter: saturate(0.3) brightness(0.6);
}

/* ── Card image wrapper ──────────────────────────────────── */

.shop-pet-image-wrapper[b-l33gtl3fpp] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(15,23,42,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.shop-pet-image-fallback[b-l33gtl3fpp] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-pet-img[b-l33gtl3fpp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.2s ease;
}

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

.shop-rarity-badge[b-l33gtl3fpp] {
    position: absolute;
    top: 5px;
    left: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(15,23,42,0.75);
    padding: 2px 5px;
    border-radius: 4px;
}

.shop-owned-badge[b-l33gtl3fpp] {
    position: absolute;
    top: 5px;
    right: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(22,101,52,0.85);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.4);
    padding: 2px 5px;
    border-radius: 4px;
}

/* ── Card info section ───────────────────────────────────── */

.shop-pet-info[b-l33gtl3fpp] {
    padding: 0.6rem 0.65rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.shop-pet-name[b-l33gtl3fpp] {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fde68a;
    line-height: 1.2;
}

.shop-pet-category[b-l33gtl3fpp] {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shop-pet-desc[b-l33gtl3fpp] {
    font-size: 0.65rem;
    color: #94a3b8;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-stat-chips[b-l33gtl3fpp] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.shop-stat-chip[b-l33gtl3fpp] {
    background: rgba(96,165,250,0.1);
    border: 1px solid rgba(96,165,250,0.25);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.6rem;
    color: #93c5fd;
    font-weight: 600;
}

.shop-pet-price[b-l33gtl3fpp] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b45309;
    margin-top: auto;
    padding-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ── Buy button ──────────────────────────────────────────── */

.shop-buy-btn[b-l33gtl3fpp] {
    width: 100%;
    margin-top: 0.4rem;
    padding: 6px 10px;
    border-radius: 7px;
    border: none;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.15s ease;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.shop-buy-btn:hover:not(:disabled):not(.disabled):not(.owned)[b-l33gtl3fpp] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 14px rgba(245,158,11,0.45);
}

.shop-buy-btn.owned[b-l33gtl3fpp] {
    background: rgba(30,41,59,0.6);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
    cursor: default;
}

.shop-buy-btn.disabled[b-l33gtl3fpp],
.shop-buy-btn:disabled[b-l33gtl3fpp] {
    background: rgba(30,41,59,0.6);
    color: #475569;
    border: 1px solid rgba(71,85,105,0.3);
    cursor: not-allowed;
    box-shadow: none;
}
/* /Components/Pages/Game/Spells.razor.rz.scp.css */
/* Spell Editor Styling */
.spell-editor-container[b-5wuaiy90rn] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Header */
.spell-editor-header[b-5wuaiy90rn] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.header-content[b-5wuaiy90rn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-title-section[b-5wuaiy90rn] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-5wuaiy90rn] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-warning));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-800);
    font-size: 2rem;
}

.header-title[b-5wuaiy90rn] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
}

.header-subtitle[b-5wuaiy90rn] {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0 0;
}

.header-actions[b-5wuaiy90rn] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.create-spell-btn[b-5wuaiy90rn] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !important;
}

/* Filters Section */
.filters-section[b-5wuaiy90rn] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.filter-group.search-group[b-5wuaiy90rn] {
    flex: 1;
    min-width: 250px;
}

.filter-label[b-5wuaiy90rn] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    opacity: 0.9;
}

.filter-option[b-5wuaiy90rn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-option.wizard[b-5wuaiy90rn] { color: var(--color-info-light); }
.filter-option.paladin[b-5wuaiy90rn] { color: var(--color-warning-bright); }
.filter-option.bard[b-5wuaiy90rn] { color: #f472b6; }
.filter-option.any[b-5wuaiy90rn] { color: #a78bfa; }

/* Stats Bar */
.stats-bar[b-5wuaiy90rn] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.stat-chip[b-5wuaiy90rn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 0.2s ease;
}

.stat-chip:hover[b-5wuaiy90rn] {
    transform: translateY(-2px);
}

.stat-chip.total[b-5wuaiy90rn] {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--color-text-light);
}

.stat-chip.wizard[b-5wuaiy90rn] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--color-info-lighter);
}

.stat-chip.paladin[b-5wuaiy90rn] {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--color-warning-light);
}

.stat-chip.bard[b-5wuaiy90rn] {
    background: rgba(236, 72, 153, 0.2);
    border: 1px solid rgba(244, 114, 182, 0.3);
    color: var(--color-bard-light);
}

.stat-chip.any[b-5wuaiy90rn] {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: var(--color-monk-lighter);
}

/* Loading & Empty States */
.loading-state[b-5wuaiy90rn], .empty-state[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-5wuaiy90rn] {
    font-size: 4rem;
    color: #475569;
    margin-bottom: 1rem;
}

.empty-title[b-5wuaiy90rn] {
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.empty-text[b-5wuaiy90rn] {
    color: var(--color-text-secondary);
    max-width: 400px;
}

/* Spells Grid */
.spells-grid[b-5wuaiy90rn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Spell Cards */
.spell-card[b-5wuaiy90rn] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.spell-card[b-5wuaiy90rn]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: all 0.3s ease;
}

.spell-card-wizard[b-5wuaiy90rn]::before { background: linear-gradient(180deg, var(--color-info), #1e40af); }
.spell-card-paladin[b-5wuaiy90rn]::before { background: linear-gradient(180deg, var(--color-warning), var(--color-warning-dark)); }
.spell-card-bard[b-5wuaiy90rn]::before { background: linear-gradient(180deg, var(--color-bard), #db2777); }
.spell-card-any[b-5wuaiy90rn]::before { background: linear-gradient(180deg, var(--color-monk), #7c3aed); }

.spell-card:hover[b-5wuaiy90rn] {
    transform: translateY(-4px);
    border-color: var(--color-border-active);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.spell-card-deleted[b-5wuaiy90rn] {
    opacity: 0.6;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.spell-card-header[b-5wuaiy90rn] {
    margin-bottom: 1rem;
}

.spell-card-title-row[b-5wuaiy90rn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.spell-name-section[b-5wuaiy90rn] {
    flex: 1;
    min-width: 0;
}

.spell-name[b-5wuaiy90rn] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spell-id[b-5wuaiy90rn] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-family: 'Courier New', monospace;
}

.spell-badges[b-5wuaiy90rn] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.spell-actions[b-5wuaiy90rn] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.spell-description[b-5wuaiy90rn] {
    color: var(--color-text-light);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Spell Stats Grid */
.spell-stats-grid[b-5wuaiy90rn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.spell-stat[b-5wuaiy90rn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-icon[b-5wuaiy90rn] {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.stat-icon.mana[b-5wuaiy90rn] { color: var(--color-info); }
.stat-icon.effect[b-5wuaiy90rn] { color: var(--color-warning); }

.stat-content[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-label[b-5wuaiy90rn] {
    font-size: 0.65rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-value[b-5wuaiy90rn] {
    font-size: 0.875rem;
    color: var(--color-text-lighter);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Class Chips */
.class-chip-wizard[b-5wuaiy90rn] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--color-info-lighter) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

.class-chip-paladin[b-5wuaiy90rn] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--color-warning-light) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

.class-chip-bard[b-5wuaiy90rn] {
    background: rgba(236, 72, 153, 0.2) !important;
    color: var(--color-bard-light) !important;
    border: 1px solid rgba(244, 114, 182, 0.3) !important;
}

.class-chip-any[b-5wuaiy90rn] {
    background: rgba(139, 92, 246, 0.2) !important;
    color: var(--color-monk-lighter) !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
}

/* ── Modals ─────────────────────────────────────────────────────────── */

/* Create / Edit modal */
.modal-overlay[b-5wuaiy90rn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-dialog[b-5wuaiy90rn] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Delete / Restore modals */
.modal[b-5wuaiy90rn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content[b-5wuaiy90rn] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Shared modal structure */
.modal-header[b-5wuaiy90rn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2[b-5wuaiy90rn] {
    margin: 0;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
}

.modal-body[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.modal-footer[b-5wuaiy90rn] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.close-btn[b-5wuaiy90rn] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.close-btn:hover[b-5wuaiy90rn] {
    color: var(--color-text-light);
    background: rgba(255, 255, 255, 0.08);
}

/* Form rows inside modal */
.form-row[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-row label[b-5wuaiy90rn] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

/* 2-column form grid */
.form-grid-2col[b-5wuaiy90rn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.form-grid-2col .form-row-span[b-5wuaiy90rn] {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .form-grid-2col[b-5wuaiy90rn] {
        grid-template-columns: 1fr;
    }

    .form-grid-2col .form-row-span[b-5wuaiy90rn] {
        grid-column: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .spell-editor-container[b-5wuaiy90rn] {
        padding: 1rem;
    }

    .header-content[b-5wuaiy90rn] {
        flex-direction: column;
        align-items: flex-start;
    }

    .filters-section[b-5wuaiy90rn] {
        flex-direction: column;
    }

    .filter-group[b-5wuaiy90rn] {
        width: 100%;
    }

    .spells-grid[b-5wuaiy90rn] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Game/WeaponsEditor.razor.rz.scp.css */
/* Weapons Editor - Fantasy RPG Theme */

/* Page Header */
.weapons-header[b-mlh4t5yxj1] {
    background: linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.weapons-header h1[b-mlh4t5yxj1] {
    font-family: 'Cinzel', serif;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

/* Weapon Cards */
[b-mlh4t5yxj1] .weapon-card {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-mlh4t5yxj1] .weapon-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border-active);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(255, 215, 0, 0.1);
}

[b-mlh4t5yxj1] .weapon-card.deleted {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Action Buttons */
[b-mlh4t5yxj1] .btn-primary {
    background: linear-gradient(135deg, #b8860b 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%) !important;
    color: var(--color-gray-900) !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[b-mlh4t5yxj1] .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(218, 165, 32, 0.5) !important;
}

[b-mlh4t5yxj1] .btn-success {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !important;
    color: white !important;
}

[b-mlh4t5yxj1] .btn-error {
    background: linear-gradient(135deg, var(--color-danger), var(--color-barbarian)) !important;
    color: white !important;
}

/* Dialog Styling */
[b-mlh4t5yxj1] .mud-dialog {
    background: linear-gradient(145deg, var(--color-bg-elevated), rgba(15, 23, 42, 1));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
}

[b-mlh4t5yxj1] .mud-dialog-title {
    font-family: 'Cinzel', serif;
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    padding-bottom: 1rem;
}

/* Form Fields */
[b-mlh4t5yxj1] .mud-input-outlined {
    border-color: var(--color-border-hover) !important;
}

[b-mlh4t5yxj1] .mud-input-outlined:hover {
    border-color: var(--color-border-active) !important;
}

[b-mlh4t5yxj1] .mud-input-outlined.mud-input-focused {
    border-color: rgba(255, 215, 0, 0.5) !important;
}

/* Chips & Badges */
[b-mlh4t5yxj1] .mud-chip {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Loading States */
[b-mlh4t5yxj1] .mud-progress-linear {
    background-color: rgba(255, 215, 0, 0.1) !important;
}

[b-mlh4t5yxj1] .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)) !important;
}
/* /Components/Pages/Guilds/Leaderboards.razor.rz.scp.css */
/* Leaderboards Page - High Fantasy RPG Aesthetic */

.leaderboards-page[b-r0xlvthx51] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-gray-900);
    padding: 2rem;
    gap: 2rem;
}

/* ===== HEADER ===== */
.leaderboards-header[b-r0xlvthx51] {
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.header-content[b-r0xlvthx51] {
    max-width: 800px;
    margin: 0 auto;
}

.page-title[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.title-icon[b-r0xlvthx51] {
    font-size: 3rem;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    display: inline-flex;
    align-items: center;
}

.page-subtitle[b-r0xlvthx51] {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ===== TAB NAVIGATION ===== */
.leaderboard-tabs[b-r0xlvthx51] {
    display: flex;
    gap: 0.5rem;
    background: rgba(30, 41, 59, 0.5);
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    overflow-x: auto;
    flex-wrap: wrap;
}

.tab-button[b-r0xlvthx51] {
    flex: 1;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.5rem;
    background: rgba(51, 65, 85, 0.5);
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab-button:hover[b-r0xlvthx51] {
    background: rgba(51, 65, 85, 0.8);
    border-color: var(--color-border-active);
    transform: translateY(-2px);
}

.tab-button.active[b-r0xlvthx51] {
    background: linear-gradient(135deg, var(--color-border-hover), rgba(255, 215, 0, 0.1));
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 20px var(--color-border-active);
}

.tab-icon[b-r0xlvthx51] {
    font-size: 1.4rem;
    display: inline-flex;
}

.tab-label[b-r0xlvthx51] {
    font-size: 0.8rem;
}

/* ===== CONTENT AREA ===== */
.leaderboard-content[b-r0xlvthx51] {
    flex: 1;
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 2rem;
    min-height: 500px;
}

/* ===== CATEGORY HEADER ===== */
.category-header[b-r0xlvthx51] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.category-title[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.category-unit[b-r0xlvthx51] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ===== LOADING & ERROR STATES ===== */
.loading-state[b-r0xlvthx51],
.error-state[b-r0xlvthx51],
.empty-state[b-r0xlvthx51] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 400px;
    color: var(--color-text-secondary);
    text-align: center;
    padding: 1rem;
}

.spinner[b-r0xlvthx51] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-r0xlvthx51 1s linear infinite;
}

@keyframes spin-b-r0xlvthx51 {
    to { transform: rotate(360deg); }
}

.error-icon[b-r0xlvthx51],
.empty-icon[b-r0xlvthx51] {
    font-size: 4rem;
    display: inline-flex;
}

.retry-button[b-r0xlvthx51],
.back-button[b-r0xlvthx51] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retry-button:hover[b-r0xlvthx51],
.back-button:hover[b-r0xlvthx51] {
    background: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--color-border-active);
}

.button-icon[b-r0xlvthx51] {
    display: inline-flex;
}

/* ===== PODIUM ===== */
.podium-section[b-r0xlvthx51] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    padding: 0 0.5rem;
}

.podium-card[b-r0xlvthx51] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem 0;
    border-radius: 12px 12px 0 0;
    min-width: 140px;
    max-width: 200px;
    flex: 1;
    text-align: center;
    border: 2px solid transparent;
    transition: transform 0.3s ease;
}

.podium-card:hover[b-r0xlvthx51] {
    transform: translateY(-4px);
}

.podium-card.champion[b-r0xlvthx51] {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 215, 0, 0.04) 100%);
    border-color: var(--color-primary);
    animation: champion-glow-b-r0xlvthx51 3s ease-in-out infinite;
}

.podium-card.podium-silver[b-r0xlvthx51] {
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.12) 0%, rgba(192, 192, 192, 0.04) 100%);
    border-color: #C0C0C0;
}

.podium-card.podium-bronze[b-r0xlvthx51] {
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.12) 0%, rgba(205, 127, 50, 0.04) 100%);
    border-color: #CD7F32;
}

.champion-label[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 20px;
    white-space: nowrap;
}

.podium-avatar[b-r0xlvthx51] {
    font-size: 2.25rem;
    line-height: 1;
}

.podium-name[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.podium-meta[b-r0xlvthx51] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.podium-level[b-r0xlvthx51] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.podium-score[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-border-active);
    margin-top: 0.25rem;
}

.podium-stand[b-r0xlvthx51] {
    margin-top: auto;
    width: calc(100% + 4px);
    margin-left: -2px;
    margin-right: -2px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.75rem;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
}

.gold-stand[b-r0xlvthx51] {
    background: linear-gradient(180deg, var(--color-primary) 0%, #d4aa00 100%);
    min-height: 80px;
    color: #111;
}

.silver-stand[b-r0xlvthx51] {
    background: linear-gradient(180deg, #C0C0C0 0%, #909090 100%);
    min-height: 60px;
    color: #111;
}

.bronze-stand[b-r0xlvthx51] {
    background: linear-gradient(180deg, #CD7F32 0%, #9e5f20 100%);
    min-height: 40px;
    color: #fff;
}

@keyframes champion-glow-b-r0xlvthx51 {
    0%, 100% { box-shadow: 0 -4px 20px rgba(255, 215, 0, 0.2); }
    50%       { box-shadow: 0 -4px 35px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.1); }
}

/* ===== LEADERBOARD TABLE ===== */
.leaderboard-table-container[b-r0xlvthx51] {
    width: 100%;
}

.leaderboard-table[b-r0xlvthx51] {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.table-header[b-r0xlvthx51] {
    display: grid;
    grid-template-columns: 110px 1fr 90px 130px 140px;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 215, 0, 0.1);
    border-bottom: 2px solid var(--color-primary);
}

.header-cell[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
}

.table-body[b-r0xlvthx51] {
    display: flex;
    flex-direction: column;
}

.table-row[b-r0xlvthx51] {
    display: grid;
    grid-template-columns: 110px 1fr 90px 130px 140px;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: rgba(30, 41, 59, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.08);
    transition: all 0.3s ease;
}

.table-row:hover[b-r0xlvthx51] {
    background: rgba(51, 65, 85, 0.5);
    transform: translateX(4px);
}

.table-row.top-1[b-r0xlvthx51] {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.03));
    border-left: 4px solid var(--color-primary);
}

.table-row.top-2[b-r0xlvthx51] {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.03));
    border-left: 4px solid #C0C0C0;
}

.table-row.top-3[b-r0xlvthx51] {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.03));
    border-left: 4px solid #CD7F32;
}

.table-cell[b-r0xlvthx51] {
    display: flex;
    align-items: center;
    color: var(--color-text-primary);
}

.rank-cell[b-r0xlvthx51]      { justify-content: flex-start; }
.character-cell[b-r0xlvthx51] { justify-content: flex-start; }
.level-cell[b-r0xlvthx51],
.class-cell[b-r0xlvthx51],
.score-cell[b-r0xlvthx51]     { justify-content: center; }

/* ===== RANK BADGES ===== */
.rank-badge[b-r0xlvthx51] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.rank-gold[b-r0xlvthx51] {
    background: linear-gradient(135deg, var(--color-primary), #e6c200);
    color: #111;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

.rank-silver[b-r0xlvthx51] {
    background: linear-gradient(135deg, #C0C0C0, #e8e8e8);
    color: #111;
    box-shadow: 0 0 12px rgba(192, 192, 192, 0.5);
}

.rank-bronze[b-r0xlvthx51] {
    background: linear-gradient(135deg, #CD7F32, #daa06d);
    color: #fff;
    box-shadow: 0 0 12px rgba(205, 127, 50, 0.5);
}

.medal[b-r0xlvthx51] {
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
}

.rank-number[b-r0xlvthx51] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ===== CHARACTER & CLASS BADGES ===== */
.character-name[b-r0xlvthx51] {
    font-size: 1rem;
    color: var(--color-primary);
}

.level-badge[b-r0xlvthx51] {
    padding: 0.25rem 0.7rem;
    background: rgba(51, 65, 85, 0.8);
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.class-badge[b-r0xlvthx51] {
    padding: 0.25rem 0.7rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.class-warrior[b-r0xlvthx51] { background: rgba(239, 68, 68, 0.2);   color: var(--color-danger);          border: 1px solid var(--color-danger); }
.class-wizard[b-r0xlvthx51]  { background: rgba(59, 130, 246, 0.2);  color: var(--color-info);            border: 1px solid var(--color-info); }
.class-ranger[b-r0xlvthx51]  { background: rgba(34, 197, 94, 0.2);   color: var(--color-success);         border: 1px solid var(--color-success); }
.class-rogue[b-r0xlvthx51]   { background: rgba(99, 102, 241, 0.2);  color: var(--color-rogue);           border: 1px solid var(--color-rogue); }
.class-paladin[b-r0xlvthx51] { background: rgba(245, 158, 11, 0.2);  color: var(--color-warning);         border: 1px solid var(--color-warning); }
.class-bard[b-r0xlvthx51]    { background: rgba(236, 72, 153, 0.2);  color: var(--color-bard);            border: 1px solid var(--color-bard); }
.class-pirate[b-r0xlvthx51]  { background: rgba(20, 184, 166, 0.2);  color: #14b8a6;                      border: 1px solid #14b8a6; }
.class-default[b-r0xlvthx51] { background: rgba(148, 163, 184, 0.2); color: var(--color-text-secondary);  border: 1px solid var(--color-text-secondary); }

.score-value[b-r0xlvthx51] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-border-active);
}

/* ===== FOOTER ===== */
.leaderboards-footer[b-r0xlvthx51] {
    display: flex;
    justify-content: center;
}

.back-button[b-r0xlvthx51] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--color-gray-700), var(--color-gray-800));
    border: 2px solid var(--color-border-active);
    border-radius: 8px;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-button:hover[b-r0xlvthx51] {
    background: linear-gradient(135deg, #475569, var(--color-gray-700));
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-active);
}

/* ===== RESPONSIVE — TABLET LANDSCAPE (1024–1366px) ===== */
@media (max-width: 1366px) and (min-width: 1024px) {
    .leaderboards-page[b-r0xlvthx51] { padding: 1.5rem; }
    .page-title[b-r0xlvthx51]        { font-size: 2rem; }

    .table-header[b-r0xlvthx51],
    .table-row[b-r0xlvthx51] {
        grid-template-columns: 100px 1fr 80px 115px 125px;
    }
}

/* ===== RESPONSIVE — TABLET PORTRAIT (768–1023px) ===== */
@media (max-width: 1023px) and (min-width: 768px) {
    .leaderboards-page[b-r0xlvthx51] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .page-title[b-r0xlvthx51] { font-size: 1.75rem; }
    .title-icon[b-r0xlvthx51] { font-size: 2rem; }

    .tab-button[b-r0xlvthx51] {
        min-width: 80px;
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
    }

    .table-header[b-r0xlvthx51],
    .table-row[b-r0xlvthx51] {
        grid-template-columns: 90px 1fr 75px 100px 110px;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .podium-card[b-r0xlvthx51]  { min-width: 120px; }
    .podium-name[b-r0xlvthx51]  { font-size: 0.85rem; }
    .podium-score[b-r0xlvthx51] { font-size: 1rem; }
}

/* ===== RESPONSIVE — MOBILE (< 768px) ===== */
@media (max-width: 767px) {
    .leaderboards-page[b-r0xlvthx51] {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .leaderboards-header[b-r0xlvthx51] { padding: 1.25rem 1rem; }

    .page-title[b-r0xlvthx51] {
        font-size: 1.4rem;
        flex-direction: column;
        gap: 0.4rem;
    }

    .title-icon[b-r0xlvthx51]    { font-size: 1.75rem; }
    .page-subtitle[b-r0xlvthx51] { font-size: 0.85rem; }

    /* Tabs: 4-per-row grid so all 8 show in 2 rows */
    .leaderboard-tabs[b-r0xlvthx51] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
        padding: 0.5rem;
    }

    .tab-button[b-r0xlvthx51] {
        min-width: 0;
        padding: 0.6rem 0.25rem;
        gap: 0.3rem;
    }

    .tab-icon[b-r0xlvthx51]  { font-size: 1.1rem; }
    .tab-label[b-r0xlvthx51] { font-size: 0.65rem; }

    .leaderboard-content[b-r0xlvthx51] {
        padding: 0.875rem;
        min-height: auto;
    }

    .category-header[b-r0xlvthx51] { margin-bottom: 1.25rem; gap: 0.5rem; }
    .category-title[b-r0xlvthx51]  { font-size: 1.2rem; }
    .category-unit[b-r0xlvthx51]   { font-size: 0.8rem; }

    /* Podium: compact */
    .podium-section[b-r0xlvthx51] {
        gap: 0.4rem;
        margin-bottom: 1.5rem;
    }

    .podium-card[b-r0xlvthx51] {
        min-width: 0;
        padding: 0.75rem 0.4rem 0;
        gap: 0.3rem;
    }

    .champion-label[b-r0xlvthx51] { display: none; }     /* too cramped on mobile */

    .podium-avatar[b-r0xlvthx51] { font-size: 1.5rem; }

    .podium-name[b-r0xlvthx51] {
        font-size: 0.75rem;
        max-width: 80px;
    }

    .podium-meta[b-r0xlvthx51] { gap: 0.25rem; }
    .podium-level[b-r0xlvthx51] { font-size: 0.65rem; }

    .podium-score[b-r0xlvthx51] {
        font-size: 0.85rem;
        margin-top: 0.1rem;
    }

    .podium-stand[b-r0xlvthx51] {
        font-size: 0.7rem;
        padding-bottom: 0.5rem;
    }

    .gold-stand[b-r0xlvthx51]   { min-height: 55px; }
    .silver-stand[b-r0xlvthx51] { min-height: 40px; }
    .bronze-stand[b-r0xlvthx51] { min-height: 28px; }

    .podium-meta .class-badge[b-r0xlvthx51] {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }

    /* Table: hide header, use flex-wrap rows instead of grid */
    .table-header[b-r0xlvthx51] { display: none; }

    .table-row[b-r0xlvthx51] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.875rem;
        border-left-width: 3px;
    }

    .table-cell[b-r0xlvthx51] { justify-content: flex-start; }

    .rank-cell[b-r0xlvthx51]      { flex: 0 0 auto; order: 1; }
    .character-cell[b-r0xlvthx51] { flex: 1;        order: 2; min-width: 0; }
    .level-cell[b-r0xlvthx51]     { flex: 0 0 auto; order: 3; }
    .class-cell[b-r0xlvthx51]     { flex: 0 0 auto; order: 4; }
    .score-cell[b-r0xlvthx51]     { flex: 1;        order: 5; justify-content: flex-end; }

    .character-name[b-r0xlvthx51] {
        font-size: 0.95rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .score-value[b-r0xlvthx51] { font-size: 1.1rem; }
    .rank-badge[b-r0xlvthx51]  { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
    .level-badge[b-r0xlvthx51] { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
    .class-badge[b-r0xlvthx51] { font-size: 0.75rem; padding: 0.2rem 0.5rem; }

    .back-button[b-r0xlvthx51] { padding: 0.75rem 1.5rem; font-size: 0.9rem; }
}

/* ===== EXTRA SMALL (< 400px) ===== */
@media (max-width: 400px) {
    /* Tabs: icon only */
    .tab-label[b-r0xlvthx51]  { display: none; }
    .tab-icon[b-r0xlvthx51]   { font-size: 1.25rem; }
    .tab-button[b-r0xlvthx51] { padding: 0.65rem 0.25rem; }

    .podium-name[b-r0xlvthx51]  { max-width: 60px; font-size: 0.7rem; }
    .podium-score[b-r0xlvthx51] { font-size: 0.8rem; }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *[b-r0xlvthx51] {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Index.razor.rz.scp.css */
/* ============================================
   SPLASH PAGE STYLES
   ============================================ */

.splash-container[b-1rpnkthxdm] {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-base) 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/Pets/PetCard.razor.rz.scp.css */
.pet-card[b-wtc4tum2bp] {
    background: linear-gradient(145deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95));
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
}

    .pet-card:hover:not(.pet-card-locked)[b-wtc4tum2bp] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    }

    .pet-card.pet-card-selected[b-wtc4tum2bp] {
        border-width: 2px;
    }

    .pet-card.pet-card-locked[b-wtc4tum2bp] {
        cursor: default;
        opacity: 0.7;
    }

/* Image area */
.pet-card-image-wrapper[b-wtc4tum2bp] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.pet-card-fallback[b-wtc4tum2bp] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pet-card-img[b-wtc4tum2bp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-card-img-silhouette[b-wtc4tum2bp] {
    filter: brightness(0.4) saturate(0);
}

.img-locked[b-wtc4tum2bp] {
    filter: brightness(0.35);
}

/* Rarity badge */
.pet-card-rarity-badge[b-wtc4tum2bp] {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid;
    color: white;
    background: rgba(0,0,0,0.6);
}

/* Lock overlay */
.pet-card-lock-overlay[b-wtc4tum2bp] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0,0,0,0.4);
}

.lock-label[b-wtc4tum2bp] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.05em;
}

/* Selected check */
.pet-card-selected-check[b-wtc4tum2bp] {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

/* Info area */
.pet-card-info[b-wtc4tum2bp] {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.pet-card-name[b-wtc4tum2bp] {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pet-card-level[b-wtc4tum2bp] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
}

.pet-level-badge[b-wtc4tum2bp] {
    color: #94a3b8;
    font-weight: 600;
}

.pet-stage-gem[b-wtc4tum2bp] {
    font-size: 0.6rem;
}

.pet-stage-gem.stage-1[b-wtc4tum2bp] { color: #94a3b8; }
.pet-stage-gem.stage-2[b-wtc4tum2bp] { color: #22d3ee; }
.pet-stage-gem.stage-3[b-wtc4tum2bp] { color: #fbbf24; }

.pet-card-mood[b-wtc4tum2bp] {
    font-size: 0.65rem;
    color: #64748b;
    font-style: italic;
}

.pet-card-acquire-hint[b-wtc4tum2bp] {
    font-size: 0.65rem;
    color: #64748b;
}
/* /Components/Pets/PetSelectionModal.razor.rz.scp.css */
.pet-selection-modal[b-6o23ajs7k9] {
    min-width: 560px;
    max-width: 780px;
}

.pet-modal-filters[b-6o23ajs7k9] {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.pet-search[b-6o23ajs7k9] { flex: 1; }
.pet-rarity-filter[b-6o23ajs7k9] { width: 160px; }

.pet-modal-grid[b-6o23ajs7k9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-md);
    max-height: 380px;
    overflow-y: auto;
    padding-right: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.pet-modal-none[b-6o23ajs7k9] {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    aspect-ratio: 1;
    cursor: pointer;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    transition: border-color 0.15s, background 0.15s;
}

    .pet-modal-none:hover[b-6o23ajs7k9] {
        border-color: rgba(148, 163, 184, 0.5);
        background: rgba(255, 255, 255, 0.03);
    }

    .pet-modal-none.selected[b-6o23ajs7k9] {
        border-color: var(--color-info);
        box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
    }

/* Stat preview */
.pet-modal-preview[b-6o23ajs7k9] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.preview-pet-name[b-6o23ajs7k9] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    color: var(--color-text-lighter);
    font-weight: 600;
}

.preview-stats-grid[b-6o23ajs7k9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.preview-stat[b-6o23ajs7k9] {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: var(--radius-sm);
    padding: 3px var(--space-sm);
    font-size: var(--font-size-xs);
    color: #93c5fd;
    font-weight: 600;
}

.preview-affinity[b-6o23ajs7k9] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: #fde68a;
    margin-top: var(--space-xs);
}
/* /Components/Shared/ActiveAdventureBanner.razor.rz.scp.css */
/* ActiveAdventureBanner scoped styles - Uses Design System Tokens */

.adventure-banner-container[b-393f9jd6m1] {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding: var(--space-md) var(--space-xl);
    box-shadow: var(--shadow-gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    z-index: var(--z-fixed);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    flex-shrink: 0;
}

.adventure-banner-content[b-393f9jd6m1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0;
}

.adventure-banner-icon[b-393f9jd6m1] {
    font-size: var(--font-size-2xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.adventure-banner-label[b-393f9jd6m1] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.adventure-banner-title[b-393f9jd6m1] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: #1a1a1a;
    font-family: var(--font-display);
}

.adventure-banner-return[b-393f9jd6m1] {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: var(--color-primary);
    border: 1px solid var(--color-border-hover);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    height: fit-content;
}

.adventure-banner-return:hover[b-393f9jd6m1] {
    background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
    border-color: var(--color-border-active);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.adventure-banner-return:active[b-393f9jd6m1] {
    transform: translateY(0);
}

.adventure-banner-icon-small[b-393f9jd6m1] {
    font-size: var(--font-size-lg);
}
/* /Components/Shared/CombatReadinessModal.razor.rz.scp.css */
/* Combat Readiness Modal */
.combat-readiness-modal[b-oorfsw9xg1] {
    padding: 0;
}

/* Header Section */
.modal-header-section[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-700) 100%);
    border-radius: 8px 8px 0 0;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
}

.modal-header-section .header-icon[b-oorfsw9xg1] {
    color: var(--color-primary);
}

.modal-header-section .header-text[b-oorfsw9xg1] {
    flex: 1;
}

.modal-header-section .header-title[b-oorfsw9xg1] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.modal-header-section .header-subtitle[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0 0;
}

/* Info Section */
.info-section[b-oorfsw9xg1] {
    background: var(--color-gray-800);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.info-header[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1rem;
}

.info-text[b-oorfsw9xg1] {
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
    font-size: 0.9rem;
}

/* Current Score Section */
.current-score-section[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 2px solid var(--color-gray-700);
}

.score-display[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-gray-700);
}

.score-grade[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.score-grade .grade-letter[b-oorfsw9xg1] {
    font-size: 4rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    line-height: 1;
}

.score-grade .grade-label[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.score-percentage[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.score-percentage .percentage-value[b-oorfsw9xg1] {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.score-percentage .percentage-label[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Grade Classes */
.score-grade.grade-a .grade-letter[b-oorfsw9xg1],
.score-grade.grade-a + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: var(--color-success);
}

.score-grade.grade-b .grade-letter[b-oorfsw9xg1],
.score-grade.grade-b + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: var(--color-info);
}

.score-grade.grade-c .grade-letter[b-oorfsw9xg1],
.score-grade.grade-c + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: var(--color-warning);
}

.score-grade.grade-d .grade-letter[b-oorfsw9xg1],
.score-grade.grade-d + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: #f97316;
}

.score-grade.grade-f .grade-letter[b-oorfsw9xg1],
.score-grade.grade-f + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: var(--color-danger);
}

/* Grade Scale */
.grade-scale[b-oorfsw9xg1] {
    display: flex;
    gap: 0.5rem;
}

.grade-item[b-oorfsw9xg1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--color-gray-900);
    border-radius: 6px;
    border: 2px solid var(--color-gray-800);
    transition: all 0.3s ease;
}

.grade-item.active[b-oorfsw9xg1] {
    border-color: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.grade-item .grade-range[b-oorfsw9xg1] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.grade-item .grade-mark[b-oorfsw9xg1] {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
}

.grade-item .grade-status[b-oorfsw9xg1] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.grade-item:nth-child(1) .grade-mark[b-oorfsw9xg1] { color: var(--color-success); }
.grade-item:nth-child(2) .grade-mark[b-oorfsw9xg1] { color: var(--color-info); }
.grade-item:nth-child(3) .grade-mark[b-oorfsw9xg1] { color: var(--color-warning); }
.grade-item:nth-child(4) .grade-mark[b-oorfsw9xg1] { color: #f97316; }
.grade-item:nth-child(5) .grade-mark[b-oorfsw9xg1] { color: var(--color-danger); }

/* Breakdown Section */
.breakdown-section[b-oorfsw9xg1] {
    margin-bottom: 1.5rem;
}

.breakdown-header[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1rem;
}

.breakdown-items[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.breakdown-item[b-oorfsw9xg1] {
    background: var(--color-gray-800);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--color-gray-700);
}

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

.item-title-group[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-title[b-oorfsw9xg1] {
    font-weight: 600;
    color: var(--color-text-lighter);
}

.item-status[b-oorfsw9xg1] {
    font-size: 0.875rem;
    font-weight: 500;
}

.item-score-group[b-oorfsw9xg1] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.item-score[b-oorfsw9xg1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.item-max-score[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
}

.breakdown-progress[b-oorfsw9xg1] {
    margin-bottom: 0.5rem;
}

.breakdown-progress .progress-bar[b-oorfsw9xg1] {
    width: 100%;
    height: 8px;
    background: var(--color-gray-900);
    border-radius: 4px;
    overflow: hidden;
}

.breakdown-progress .progress-fill[b-oorfsw9xg1] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.breakdown-detail[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.equipment-details-list[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.equipment-detail-item[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-gray-900);
    border-radius: 4px;
    font-size: 0.875rem;
}

.equipment-detail-item.equipped[b-oorfsw9xg1] {
    color: var(--color-success);
}

.equipment-detail-item.equipped .equipment-icon[b-oorfsw9xg1] {
    color: var(--color-success);
}

.equipment-detail-item.empty[b-oorfsw9xg1] {
    color: var(--color-text-tertiary);
}

.equipment-detail-item.empty .equipment-icon[b-oorfsw9xg1] {
    color: var(--color-danger);
}

.breakdown-improvement[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-gray-900);
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-warning-bright);
}

/* Categories Section */
.categories-section[b-oorfsw9xg1] {
    margin-bottom: 1.5rem;
}

.categories-header[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1rem;
}

.category-cards[b-oorfsw9xg1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.category-card[b-oorfsw9xg1] {
    background: var(--color-gray-800);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--color-gray-700);
}

.category-icon-wrapper[b-oorfsw9xg1] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.category-icon-wrapper.primary[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    color: white;
}

.category-icon-wrapper.hp[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-barbarian) 100%);
    color: white;
}

.category-icon-wrapper.equipment[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-monk) 0%, #7c3aed 100%);
    color: white;
}

.category-icon-wrapper.level[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: white;
}

.category-title[b-oorfsw9xg1] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-lighter);
    margin: 0 0 0.5rem 0;
}

.category-description[b-oorfsw9xg1] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Tips Section */
.tips-section[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-700) 100%);
    border-radius: 8px;
    padding: 1rem;
    border: 2px solid var(--color-primary);
}

.tips-header[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1rem;
}

.tips-list[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tip-item[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-gray-900);
    border-radius: 4px;
    color: var(--color-text-light);
    font-size: 0.875rem;
}

.tip-item .tip-arrow[b-oorfsw9xg1] {
    color: var(--color-warning-bright);
}

/* Responsive Design */
@media (max-width: 768px) {
    .category-cards[b-oorfsw9xg1] {
        grid-template-columns: 1fr;
    }

    .grade-scale[b-oorfsw9xg1] {
        flex-wrap: wrap;
    }

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

    .modal-header-section .header-title[b-oorfsw9xg1] {
        font-size: 1.25rem;
    }
}
/* /Components/Shared/Filters/CompareTooltip.razor.rz.scp.css */
/* Compare Tooltip Component Styles */

.compare-tooltip[b-tn4085v97q] {
    background: linear-gradient(145deg, var(--color-bg-elevated-alt), var(--color-bg-elevated));
    border: 2px solid rgba(139, 92, 246, 0.4);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-top: var(--space-sm);
}

.compare-header[b-tn4085v97q] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    color: var(--color-monk-lighter);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.compare-content[b-tn4085v97q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.no-equipped[b-tn4085v97q] {
    text-align: center;
    padding: var(--space-sm);
}

.empty-indicator[b-tn4085v97q] {
    color: var(--color-text-tertiary);
    font-style: italic;
    font-size: var(--font-size-sm);
}

.compare-row[b-tn4085v97q] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.compare-row.upgrade[b-tn4085v97q] {
    background: rgba(34, 197, 94, 0.1);
}

.compare-row.downgrade[b-tn4085v97q] {
    background: rgba(239, 68, 68, 0.1);
}

.compare-row.sidegrade[b-tn4085v97q] {
    background: rgba(245, 158, 11, 0.1);
}

.compare-label[b-tn4085v97q] {
    color: var(--color-text-tertiary);
    min-width: 70px;
}

.compare-value.equipped[b-tn4085v97q] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.compare-current[b-tn4085v97q] {
    color: var(--color-text-secondary);
}

.compare-arrow[b-tn4085v97q] {
    color: var(--color-text-tertiary);
    padding: 0 var(--space-xs);
}

.compare-new[b-tn4085v97q] {
    font-weight: var(--font-weight-semibold);
}

.upgrade .compare-new[b-tn4085v97q] {
    color: var(--color-success-light);
}

.downgrade .compare-new[b-tn4085v97q] {
    color: var(--color-danger-light);
}

.sidegrade .compare-new[b-tn4085v97q] {
    color: var(--color-warning-light);
}

.compare-diff[b-tn4085v97q] {
    margin-left: auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.upgrade .compare-diff[b-tn4085v97q] {
    color: var(--color-success-light);
}

.downgrade .compare-diff[b-tn4085v97q] {
    color: var(--color-danger-light);
}

.sidegrade .compare-diff[b-tn4085v97q] {
    color: var(--color-warning-light);
}
/* /Components/Shared/Filters/EquipableFilter.razor.rz.scp.css */
/* EquipableFilter Component Styles - Fantasy RPG Theme */

.equipable-filter[b-5uhar1bnoj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.equipable-filter-checkbox[b-5uhar1bnoj] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    user-select: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.equipable-filter-checkbox:hover[b-5uhar1bnoj] {
    background: rgba(34, 197, 94, 0.1);
}

.equipable-filter-checkbox input[type="checkbox"][b-5uhar1bnoj] {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated-alt);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.equipable-filter-checkbox input[type="checkbox"]:hover[b-5uhar1bnoj] {
    border-color: var(--color-success);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.equipable-filter-checkbox input[type="checkbox"]:checked[b-5uhar1bnoj] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    border-color: var(--color-success);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

.equipable-filter-checkbox input[type="checkbox"]:checked[b-5uhar1bnoj]::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

/* Focus state for accessibility */
.equipable-filter-checkbox input[type="checkbox"]:focus-visible[b-5uhar1bnoj] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-border-hover);
}

.equipable-filter-label[b-5uhar1bnoj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color var(--transition-base);
}

.equipable-filter-checkbox:hover .equipable-filter-label[b-5uhar1bnoj] {
    color: var(--color-success-light);
}

.equipable-filter-label .mud-icon[b-5uhar1bnoj] {
    color: var(--color-success);
    transition: opacity var(--transition-base);
}

.equipable-filter-checkbox:not(:has(input:checked)) .equipable-filter-label .mud-icon[b-5uhar1bnoj] {
    color: var(--color-text-tertiary);
    opacity: 0.5;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden[b-5uhar1bnoj] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .equipable-filter[b-5uhar1bnoj] {
        justify-content: center;
    }

    .equipable-filter-label[b-5uhar1bnoj] {
        font-size: var(--font-size-xs);
    }
}
/* /Components/Shared/Filters/PriceDisplay.razor.rz.scp.css */
/* PriceDisplay Component Styles - Fantasy RPG Theme */

.price-display[b-yasrxod4ez] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.price-label[b-yasrxod4ez] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-semibold);
}

.price-value[b-yasrxod4ez] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
}

.price-value.can-afford[b-yasrxod4ez] {
    color: var(--color-success-light);
}

.price-value.cannot-afford[b-yasrxod4ez] {
    color: var(--color-danger-light);
}

.price-gold[b-yasrxod4ez] {
    color: var(--color-primary);
    text-shadow: 0 0 4px var(--color-border-active);
}

.price-silver[b-yasrxod4ez] {
    color: var(--color-silver);
}

.price-copper[b-yasrxod4ez] {
    color: var(--color-bronze);
}
/* /Components/Shared/Filters/SearchFilter.razor.rz.scp.css */
/* Search Filter Component Styles */

.search-filter-container[b-nf51x8f4fg] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.search-input-wrapper[b-nf51x8f4fg] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.search-icon[b-nf51x8f4fg] {
    position: absolute;
    left: var(--space-md);
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.search-input[b-nf51x8f4fg] {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    padding-left: calc(var(--space-md) + 24px + var(--space-sm));
    padding-right: calc(var(--space-md) + 24px);
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
}

.search-input[b-nf51x8f4fg]::placeholder {
    color: var(--color-text-tertiary);
}

.search-input:focus[b-nf51x8f4fg] {
    outline: none;
    border-color: var(--color-border-active);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

.search-clear[b-nf51x8f4fg] {
    position: absolute;
    right: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-clear:hover[b-nf51x8f4fg] {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

.search-results-count[b-nf51x8f4fg] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 640px) {
    .search-input-wrapper[b-nf51x8f4fg] {
        min-width: 100%;
        max-width: 100%;
    }

    .search-filter-container[b-nf51x8f4fg] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Shared/Filters/SecondaryFilters.razor.rz.scp.css */
/* SecondaryFilters Component Styles - Fantasy RPG Theme */

.secondary-filters[b-9tp3vtk2al] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.secondary-filter[b-9tp3vtk2al] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.secondary-filter:hover[b-9tp3vtk2al] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
    border-color: var(--color-border-hover);
    transform: translateY(-1px);
}

.secondary-filter.active[b-9tp3vtk2al] {
    background: linear-gradient(135deg, var(--color-border-base), rgba(255, 215, 0, 0.08));
    border-color: var(--color-border-active);
    color: var(--color-primary);
    box-shadow: 0 0 12px var(--color-border-base);
}

.filter-count[b-9tp3vtk2al] {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    min-width: 24px;
    text-align: center;
}

.secondary-filter.active .filter-count[b-9tp3vtk2al] {
    background: var(--color-border-hover);
}

/* Rarity Color Classes */
.rarity-common[b-9tp3vtk2al] { color: var(--color-rarity-common); }
.rarity-uncommon[b-9tp3vtk2al] { color: var(--color-rarity-uncommon); }
.rarity-rare[b-9tp3vtk2al] { color: var(--color-rarity-rare); }
.rarity-epic[b-9tp3vtk2al] { color: var(--color-rarity-epic); }
.rarity-legendary[b-9tp3vtk2al] { 
    color: var(--color-rarity-legendary);
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* Responsive */
@media (max-width: 640px) {
    .secondary-filters[b-9tp3vtk2al] {
        gap: var(--space-xs);
        padding: var(--space-sm);
    }

    .secondary-filter[b-9tp3vtk2al] {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.65rem;
    }
}
/* /Components/Shared/Filters/SkeletonCard.razor.rz.scp.css */
/* Skeleton Card - Loading Placeholder */

.skeleton-card[b-vapm1s6b2s] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    overflow: hidden;
}

/* Skeleton shimmer animation */
@keyframes skeleton-shimmer-b-vapm1s6b2s {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-line[b-vapm1s6b2s],
.skeleton-badge[b-vapm1s6b2s],
.skeleton-chip[b-vapm1s6b2s],
.skeleton-price[b-vapm1s6b2s],
.skeleton-qty[b-vapm1s6b2s],
.skeleton-button[b-vapm1s6b2s] {
    background: linear-gradient(
        90deg,
        var(--color-border-subtle) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        var(--color-border-subtle) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-vapm1s6b2s 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.skeleton-header[b-vapm1s6b2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.skeleton-name[b-vapm1s6b2s] {
    height: 20px;
    flex: 1;
    max-width: 60%;
}

.skeleton-badge[b-vapm1s6b2s] {
    height: 24px;
    width: 70px;
    border-radius: var(--radius-lg);
}

.skeleton-stats[b-vapm1s6b2s] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.skeleton-chip[b-vapm1s6b2s] {
    height: 32px;
    width: 80px;
    border-radius: var(--radius-lg);
}

.skeleton-chip-short[b-vapm1s6b2s] {
    width: 50px;
}

.skeleton-price[b-vapm1s6b2s] {
    height: 40px;
    width: 100%;
    border-radius: var(--radius-lg);
}

.skeleton-footer[b-vapm1s6b2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
    margin-top: auto;
}

.skeleton-qty[b-vapm1s6b2s] {
    height: 16px;
    width: 50px;
}

.skeleton-button[b-vapm1s6b2s] {
    height: 36px;
    width: 80px;
    border-radius: var(--radius-lg);
}

/* Responsive */
@media (max-width: 640px) {
    .skeleton-card[b-vapm1s6b2s] {
        padding: var(--space-md);
    }

    .skeleton-footer[b-vapm1s6b2s] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .skeleton-button[b-vapm1s6b2s] {
        width: 100%;
    }
}
/* /Components/Shared/Filters/SkeletonGrid.razor.rz.scp.css */
/* Skeleton Grid - Loading Placeholder Container */

.skeleton-grid-container[b-z029ewxaqz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.skeleton-section-header[b-z029ewxaqz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.skeleton-title[b-z029ewxaqz] {
    height: 24px;
    width: 150px;
}

.skeleton-subtitle[b-z029ewxaqz] {
    height: 16px;
    width: 200px;
}

.skeleton-filters[b-z029ewxaqz] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.skeleton-filter[b-z029ewxaqz] {
    height: 36px;
    width: 120px;
    background: linear-gradient(
        90deg,
        var(--color-border-subtle) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        var(--color-border-subtle) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-z029ewxaqz 1.5s ease-in-out infinite;
    border-radius: var(--radius-lg);
}

.skeleton-filter-short[b-z029ewxaqz] {
    width: 80px;
}

@keyframes skeleton-shimmer-b-z029ewxaqz {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Use shared item-grid styling from merchant-shared.css */
/* /Components/Shared/Filters/SortChips.razor.rz.scp.css */
.sort-chips[b-014qp395la] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.sort-label[b-014qp395la] {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-right: 0.125rem;
}

.sort-chip[b-014qp395la] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--surface-dark, rgba(255, 255, 255, 0.04));
    color: var(--text-secondary, #aaa);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.4;
}

.sort-chip:hover[b-014qp395la] {
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #fff);
    border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
}

.sort-chip.active[b-014qp395la] {
    background: var(--primary-surface, rgba(33, 150, 243, 0.15));
    color: var(--primary-color, #42a5f5);
    border-color: var(--primary-color, #42a5f5);
    font-weight: 600;
}

.sort-chip.active:hover[b-014qp395la] {
    background: var(--primary-surface-hover, rgba(33, 150, 243, 0.25));
}

.sort-arrow[b-014qp395la] {
    font-size: 0.875rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.sort-chip.asc .sort-arrow[b-014qp395la] {
    color: var(--primary-color, #42a5f5);
}

.sort-chip.desc .sort-arrow[b-014qp395la] {
    color: var(--primary-color, #42a5f5);
}

@media (max-width: 768px) {
    .sort-chips[b-014qp395la] {
        gap: 0.25rem;
    }

    .sort-chip[b-014qp395la] {
        padding: 0.2rem 0.5rem;
        font-size: 0.6875rem;
    }

    .sort-label[b-014qp395la] {
        font-size: 0.6875rem;
    }
}
/* /Components/Shared/Items/ArmorCard.razor.rz.scp.css */
/* ArmorCard Component Styles */

.item-card[b-wgh695ilcm] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    overflow: hidden;
}

    .item-card[b-wgh695ilcm]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
        opacity: 0;
        transition: opacity var(--transition-base);
    }

    .item-card:hover[b-wgh695ilcm] {
        transform: translateY(-3px);
        border-color: rgba(59, 130, 246, 0.35);
        box-shadow: var(--shadow-lg), 0 0 20px rgba(59, 130, 246, 0.12);
    }

        .item-card:hover[b-wgh695ilcm]::before {
            opacity: 1;
        }

    .item-card.item-card-can-equip[b-wgh695ilcm] {
        border-color: rgba(34, 197, 94, 0.55) !important;
        box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2), 0 4px 16px rgba(34, 197, 94, 0.15) !important;
    }

        .item-card.item-card-can-equip[b-wgh695ilcm]::before {
            background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
            opacity: 1;
        }

    .item-card.item-card-cannot-afford[b-wgh695ilcm] {
        opacity: 0.48 !important;
        filter: grayscale(0.4) !important;
        border-color: rgba(239, 68, 68, 0.25) !important;
    }

        .item-card.item-card-cannot-afford:hover[b-wgh695ilcm] {
            transform: none !important;
            box-shadow: none !important;
        }

    .item-card.item-card-owned[b-wgh695ilcm] {
        border-color: rgba(99, 102, 241, 0.55) !important;
        box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.15) !important;
    }

        .item-card.item-card-owned[b-wgh695ilcm]::before {
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
            opacity: 1;
        }

    .item-card.equipped[b-wgh695ilcm] {
        border-color: rgba(34, 197, 94, 0.5) !important;
        background: linear-gradient(145deg, rgba(34, 197, 94, 0.1), var(--color-bg-elevated-alt)) !important;
    }

        .item-card.equipped[b-wgh695ilcm]::before {
            background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
            opacity: 1;
        }

    .item-card.level-restricted[b-wgh695ilcm] {
        opacity: 0.7;
    }

.item-art-zone[b-wgh695ilcm] {
    position: relative;
    width: 100%;
    height: 72px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.09) 0%, rgba(99, 102, 241, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.item-art-zone-inner[b-wgh695ilcm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

    .item-art-zone-inner .mud-icon-root[b-wgh695ilcm] {
        font-size: 2.25rem !important;
        opacity: 0.75;
        filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.35));
        color: rgba(96, 165, 250, 0.85) !important;
    }

.item-art-img[b-wgh695ilcm] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

.rarity-badge[b-wgh695ilcm] {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rarity-uncommon[b-wgh695ilcm] {
    background: rgba(34,197,94,0.22);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}

.rarity-rare[b-wgh695ilcm] {
    background: rgba(59,130,246,0.22);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.3);
}

.rarity-epic[b-wgh695ilcm] {
    background: rgba(168,85,247,0.22);
    color: #c084fc;
    border: 1px solid rgba(168,85,247,0.3);
}

.rarity-legendary[b-wgh695ilcm] {
    background: rgba(255,215,0,0.22);
    color: #fcd34d;
    border: 1px solid rgba(255,215,0,0.35);
}

/* ===== STATUS BADGE (art-zone overlay, top-right) ===== */
.item-status-badge[b-wgh695ilcm] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2;
    white-space: nowrap;
}

.badge-status-equip[b-wgh695ilcm] {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.badge-status-poor[b-wgh695ilcm] {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-status-owned[b-wgh695ilcm] {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-status-equipped[b-wgh695ilcm] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.badge-status-restricted[b-wgh695ilcm] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger-light);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-status-hidden[b-wgh695ilcm] {
    display: none;
}

.item-header[b-wgh695ilcm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.item-name[b-wgh695ilcm] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    flex: 1;
    line-height: 1.3;
}

.item-badges[b-wgh695ilcm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-end;
}

.item-type-badge[b-wgh695ilcm] {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-equipped[b-wgh695ilcm] {
    background: rgba(34,197,94,0.2);
    color: var(--color-success-light);
    border: 1px solid rgba(34,197,94,0.4);
}

.item-stats[b-wgh695ilcm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.stat-chip[b-wgh695ilcm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    color: var(--color-text-secondary);
}

.stat-ac[b-wgh695ilcm] {
    color: var(--color-info-light);
    border-color: rgba(59,130,246,0.2);
}

.stat-type[b-wgh695ilcm] {
    color: var(--color-text-tertiary);
}

.stat-level[b-wgh695ilcm] {
    color: var(--color-warning-light);
    border-color: rgba(245,158,11,0.2);
}

.stat-bonus[b-wgh695ilcm] {
    color: var(--color-monk-lighter);
    border-color: rgba(139,92,246,0.2);
}

.armor-light[b-wgh695ilcm] {
    background: rgba(34,197,94,0.15);
    color: var(--color-success-light);
    border-color: rgba(34,197,94,0.2);
}

.armor-medium[b-wgh695ilcm] {
    background: rgba(245,158,11,0.15);
    color: var(--color-warning-light);
    border-color: rgba(245,158,11,0.2);
}

.armor-heavy[b-wgh695ilcm] {
    background: rgba(239,68,68,0.15);
    color: var(--color-danger-light);
    border-color: rgba(239,68,68,0.2);
}

.item-lore-preview[b-wgh695ilcm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(139,92,246,0.08);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: var(--radius-lg);
    cursor: default;
    transition: background var(--transition-base);
}

    .item-lore-preview:hover[b-wgh695ilcm], .item-lore-preview:focus[b-wgh695ilcm] {
        background: rgba(139,92,246,0.14);
    }

[b-wgh695ilcm] .lore-icon {
    color: var(--color-monk-lighter);
    flex-shrink: 0;
    margin-top: 2px;
}

.lore-text[b-wgh695ilcm] {
    font-size: var(--font-size-sm);
    color: var(--color-monk-lighter);
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all var(--transition-base);
}

.item-lore-preview:hover .lore-text[b-wgh695ilcm], .item-lore-preview:focus .lore-text[b-wgh695ilcm] {
    -webkit-line-clamp: unset;
}

/* ===== AVG / COMPARISON LINE ===== */
.item-avg-line[b-wgh695ilcm] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    min-height: 1.3em;
}

.avg-label[b-wgh695ilcm] {
    color: var(--color-text-tertiary);
}

.avg-value.upgrade[b-wgh695ilcm] {
    color: var(--color-success-light);
}

.avg-value.downgrade[b-wgh695ilcm] {
    color: var(--color-text-tertiary);
}

/* ===== FOOTER (price + actions in one row) ===== */
.item-footer[b-wgh695ilcm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
    flex-wrap: wrap;
}

.footer-price[b-wgh695ilcm] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-display);
    white-space: nowrap;
}

    .footer-price.affordable[b-wgh695ilcm] {
        color: var(--color-success-light);
    }

    .footer-price.unaffordable[b-wgh695ilcm] {
        color: var(--color-danger-light);
    }

    .footer-price.sell-price[b-wgh695ilcm] {
        color: var(--color-warning-light);
    }

.shortfall-hint[b-wgh695ilcm] {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
}

.item-warning[b-wgh695ilcm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

    .item-warning.level-warning[b-wgh695ilcm] {
        background: rgba(239,68,68,0.15);
        border: 1px solid rgba(239,68,68,0.35);
        color: var(--color-danger-light);
    }

    .item-warning.class-warning[b-wgh695ilcm] {
        background: rgba(245,158,11,0.1);
        border: 1px solid rgba(245,158,11,0.25);
        color: var(--color-warning-light);
    }

[b-wgh695ilcm] .btn-equip {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
    color: var(--color-gray-900) !important;
    font-family: var(--font-display) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: var(--space-sm) var(--space-xl) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-base) !important;
    box-shadow: 0 4px 12px rgba(255,215,0,0.25) !important;
    min-height: 36px !important;
}

    [b-wgh695ilcm] .btn-equip:hover:not(:disabled) {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(255,215,0,0.35) !important;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
    }

    [b-wgh695ilcm] .btn-equip:disabled {
        opacity: 0.35 !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
        transform: none !important;
    }

@media (max-width: 640px) {
    .item-card[b-wgh695ilcm] {
        padding: var(--space-md);
    }

    .item-name[b-wgh695ilcm] {
        font-size: var(--font-size-base);
    }

    .stat-chip[b-wgh695ilcm] {
        font-size: var(--font-size-xs);
        padding: var(--space-xs);
    }

    .item-footer[b-wgh695ilcm] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-wgh695ilcm] .btn-equip {
        width: 100% !important;
        justify-content: center !important;
    }
}
/* /Components/Shared/Items/ConsumableCard.razor.rz.scp.css */
/* ConsumableCard Component Styles - Fantasy RPG Theme */

.item-card[b-70xaujb2vo] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: all var(--transition-slow);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    overflow: hidden;
}

    .item-card[b-70xaujb2vo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(var(--color-success), 0.3), transparent);
        opacity: 0;
        transition: opacity var(--transition-base);
    }

    .item-card:hover[b-70xaujb2vo] {
        transform: translateY(-3px);
        border-color: rgba(34, 197, 94, 0.3);
        box-shadow: var(--shadow-lg), 0 0 20px rgba(34, 197, 94, 0.1);
    }

        .item-card:hover[b-70xaujb2vo]::before {
            opacity: 1;
        }

    /* Unaffordable state */
    .item-card.unaffordable[b-70xaujb2vo] {
        opacity: 0.6;
        border-color: rgba(239, 68, 68, 0.3);
    }

    /* Level restricted state */
    .item-card.level-restricted[b-70xaujb2vo] {
        opacity: 0.7;
    }

    /* Phase 1 - can equip/use (affordable + meets requirements) */
    .item-card.item-card-can-equip[b-70xaujb2vo] {
        border: 1px solid rgba(34, 197, 94, 0.45) !important;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.12);
    }

    /* Phase 1 - cannot afford */
    .item-card.item-card-cannot-afford[b-70xaujb2vo] {
        opacity: 0.52;
        filter: grayscale(0.3);
    }

/* Header */
.item-header[b-70xaujb2vo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.item-name[b-70xaujb2vo] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    flex: 1;
    line-height: 1.3;
}

/* Rarity colors */
.rarity-common[b-70xaujb2vo] {
    color: var(--color-rarity-common);
}

.rarity-uncommon[b-70xaujb2vo] {
    color: var(--color-rarity-uncommon);
}

.rarity-rare[b-70xaujb2vo] {
    color: var(--color-rarity-rare);
}

.rarity-epic[b-70xaujb2vo] {
    color: var(--color-rarity-epic);
}

.rarity-legendary[b-70xaujb2vo] {
    color: var(--color-rarity-legendary);
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
}

.item-badges[b-70xaujb2vo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-end;
}

/* Badges */
.item-type-badge[b-70xaujb2vo] {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-consumable[b-70xaujb2vo] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

/* Description */
.item-description[b-70xaujb2vo] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.5;
}

/* Description Hover Preview */
.item-lore-preview[b-70xaujb2vo] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
    cursor: default;
    transition: all var(--transition-base);
}

    .item-lore-preview:hover[b-70xaujb2vo],
    .item-lore-preview:focus[b-70xaujb2vo] {
        background: rgba(139, 92, 246, 0.14);
    }

[b-70xaujb2vo] .lore-icon {
    color: var(--badge-purple);
    flex-shrink: 0;
    margin-top: 2px;
}

.lore-text[b-70xaujb2vo] {
    font-size: var(--font-size-sm);
    color: var(--color-monk-lighter);
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all var(--transition-base);
}

.item-lore-preview:hover .lore-text[b-70xaujb2vo],
.item-lore-preview:focus .lore-text[b-70xaujb2vo] {
    -webkit-line-clamp: unset;
}

/* Effects */
.item-effects[b-70xaujb2vo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.effect-chip[b-70xaujb2vo] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.effect-hp[b-70xaujb2vo] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--color-danger-light);
}

.effect-mana[b-70xaujb2vo] {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--color-info-light);
}

.effect-buff[b-70xaujb2vo] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--color-warning-light);
}

.effect-damage[b-70xaujb2vo] {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: var(--color-monk-lighter);
}

.effect-full[b-70xaujb2vo] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: var(--color-success-light);
}

.effect-more[b-70xaujb2vo] {
    background: var(--color-border-subtle);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-tertiary);
}

/* Price */
.item-price[b-70xaujb2vo] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-display);
}

    .item-price.affordable[b-70xaujb2vo] {
        background: rgba(34, 197, 94, 0.1);
        color: var(--color-success-light);
        border: 1px solid rgba(34, 197, 94, 0.25);
    }

    .item-price.unaffordable[b-70xaujb2vo] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--color-danger-light);
        border: 1px solid rgba(239, 68, 68, 0.25);
        flex-wrap: wrap;
    }

/* Shortfall badge - shows how much gold is needed (inside price row) */
.shortfall-badge[b-70xaujb2vo] {
    margin-left: auto;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

/* Shortfall hint - shown below the price row */
.shortfall-hint[b-70xaujb2vo] {
    font-size: 0.7rem;
    color: #6b7280;
    text-align: center;
    margin-top: 2px;
}

/* Warning - base styles */
.item-warning[b-70xaujb2vo] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

    /* Level requirement warning - more prominent */
    .item-warning.level-warning[b-70xaujb2vo] {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.35);
        color: var(--color-danger-light);
    }

    /* Class restriction warning */
    .item-warning.class-warning[b-70xaujb2vo] {
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.25);
        color: var(--color-warning-light);
    }

/* Footer */
.item-footer[b-70xaujb2vo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
}

.item-quantity[b-70xaujb2vo] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-semibold);
}

/* Pouch Full Message */
.pouch-full-message[b-70xaujb2vo] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-danger-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Button Styling */
[b-70xaujb2vo] .btn-equip {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-gray-900) !important;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    box-shadow: 0 4px 12px var(--color-border-active);
}

    [b-70xaujb2vo] .btn-equip:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--color-border-active);
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    }

    [b-70xaujb2vo] .btn-equip:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Responsive */
@media (max-width: 640px) {
    .item-card[b-70xaujb2vo] {
        padding: var(--space-md);
    }

    .item-name[b-70xaujb2vo] {
        font-size: var(--font-size-base);
    }

    .effect-chip[b-70xaujb2vo] {
        font-size: var(--font-size-xs);
        padding: var(--space-xs) var(--space-sm);
    }

    .item-description[b-70xaujb2vo] {
        font-size: var(--font-size-xs);
    }

    .item-footer[b-70xaujb2vo] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-70xaujb2vo] .btn-equip {
        width: 100%;
        justify-content: center;
    }
}

/* ===== ITEM ART ZONE (Phase 2B) ===== */
.item-art-zone[b-70xaujb2vo] {
    position: relative; width: 100%; height: 64px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,215,0,0.07) 0%, rgba(99,102,241,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.item-art-zone-inner[b-70xaujb2vo] {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.item-art-img[b-70xaujb2vo] {
    width: 64px; height: 64px;
    object-fit: contain; image-rendering: pixelated;
}
.rarity-badge[b-70xaujb2vo] {
    position: absolute; top: 5px; right: 5px;
    font-size: 0.6rem; font-weight: 700; padding: 2px 6px;
    border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em;
}
.rarity-uncommon[b-70xaujb2vo] { background: rgba(34,197,94,0.18); color: #15803d; }
.rarity-rare[b-70xaujb2vo]     { background: rgba(59,130,246,0.18); color: #1d4ed8; }
.rarity-epic[b-70xaujb2vo]     { background: rgba(168,85,247,0.18); color: #7e22ce; }
.rarity-legendary[b-70xaujb2vo]{ background: rgba(255,215,0,0.18);  color: #92400e; }
/* /Components/Shared/Items/WeaponCard.razor.rz.scp.css */
/* WeaponCard Component Styles */

/* ===== BASE CARD ===== */
.item-card[b-n2iv4hz2mu] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    overflow: hidden;
}

    .item-card[b-n2iv4hz2mu]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-border-active), transparent);
        opacity: 0;
        transition: opacity var(--transition-base);
    }

    .item-card:hover[b-n2iv4hz2mu] {
        transform: translateY(-3px);
        border-color: var(--color-border-hover);
        box-shadow: var(--shadow-lg), var(--shadow-gold);
    }

        .item-card:hover[b-n2iv4hz2mu]::before {
            opacity: 1;
        }

    /* ===== AFFORDABILITY STATES ===== */
    /* Can equip: green border + glow */
    .item-card.item-card-can-equip[b-n2iv4hz2mu] {
        border-color: rgba(34, 197, 94, 0.55) !important;
        box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2), 0 4px 16px rgba(34, 197, 94, 0.15) !important;
    }

        .item-card.item-card-can-equip[b-n2iv4hz2mu]::before {
            background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
            opacity: 1;
        }

    /* Cannot afford: dim + desaturate + red tint */
    .item-card.item-card-cannot-afford[b-n2iv4hz2mu] {
        opacity: 0.48 !important;
        filter: grayscale(0.4) !important;
        border-color: rgba(239, 68, 68, 0.25) !important;
    }

        .item-card.item-card-cannot-afford:hover[b-n2iv4hz2mu] {
            transform: none !important;
            box-shadow: none !important;
        }

    /* Already owned: indigo border */
    .item-card.item-card-owned[b-n2iv4hz2mu] {
        border-color: rgba(99, 102, 241, 0.55) !important;
        box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.15) !important;
    }

        .item-card.item-card-owned[b-n2iv4hz2mu]::before {
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
            opacity: 1;
        }

    /* Equipped: green background tint */
    .item-card.equipped[b-n2iv4hz2mu] {
        border-color: rgba(34, 197, 94, 0.5) !important;
        background: linear-gradient(145deg, rgba(34, 197, 94, 0.1), var(--color-bg-elevated-alt)) !important;
    }

        .item-card.equipped[b-n2iv4hz2mu]::before {
            background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
            opacity: 1;
        }

    /* Level restricted: dim */
    .item-card.level-restricted[b-n2iv4hz2mu] {
        opacity: 0.7;
    }

/* ===== ITEM ART ZONE ===== */
.item-art-zone[b-n2iv4hz2mu] {
    position: relative;
    width: 100%;
    height: 72px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.09) 0%, rgba(99, 102, 241, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.item-art-zone-inner[b-n2iv4hz2mu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

    /* Art zone icon sizing - explicit override */
    .item-art-zone-inner .mud-icon-root[b-n2iv4hz2mu] {
        font-size: 2.25rem !important;
        opacity: 0.75;
        filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.3));
    }

.item-art-img[b-n2iv4hz2mu] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Rarity badge overlay */
.rarity-badge[b-n2iv4hz2mu] {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rarity-uncommon[b-n2iv4hz2mu] {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.rarity-rare[b-n2iv4hz2mu] {
    background: rgba(59, 130, 246, 0.22);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.rarity-epic[b-n2iv4hz2mu] {
    background: rgba(168, 85, 247, 0.22);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.rarity-legendary[b-n2iv4hz2mu] {
    background: rgba(255, 215, 0, 0.22);
    color: #fcd34d;
    border: 1px solid rgba(255, 215, 0, 0.35);
}

/* ===== STATUS BADGE (art-zone overlay, top-right) ===== */
.item-status-badge[b-n2iv4hz2mu] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2;
    white-space: nowrap;
}

.badge-status-equip[b-n2iv4hz2mu] {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.badge-status-poor[b-n2iv4hz2mu] {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-status-owned[b-n2iv4hz2mu] {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-status-equipped[b-n2iv4hz2mu] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.badge-status-restricted[b-n2iv4hz2mu] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger-light);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-status-hidden[b-n2iv4hz2mu] {
    display: none;
}

/* ===== HEADER ===== */
.item-header[b-n2iv4hz2mu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.item-name[b-n2iv4hz2mu] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    flex: 1;
    line-height: 1.3;
}

.item-badges[b-n2iv4hz2mu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-end;
}

.item-type-badge[b-n2iv4hz2mu] {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-equipped[b-n2iv4hz2mu] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

/* ===== STATS ===== */
.item-stats[b-n2iv4hz2mu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.stat-chip[b-n2iv4hz2mu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--color-text-secondary);
}

.stat-damage[b-n2iv4hz2mu] {
    color: var(--color-danger-light);
    border-color: rgba(239, 68, 68, 0.2);
}

.stat-type[b-n2iv4hz2mu] {
    color: var(--color-text-tertiary);
}

.stat-level[b-n2iv4hz2mu] {
    color: var(--color-warning-light);
    border-color: rgba(245, 158, 11, 0.2);
}

.stat-bonus[b-n2iv4hz2mu] {
    color: var(--color-monk-lighter);
    border-color: rgba(139, 92, 246, 0.2);
}

/* ===== LORE PREVIEW ===== */
.item-lore-preview[b-n2iv4hz2mu] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
    cursor: default;
    transition: background var(--transition-base);
}

    .item-lore-preview:hover[b-n2iv4hz2mu],
    .item-lore-preview:focus[b-n2iv4hz2mu] {
        background: rgba(139, 92, 246, 0.14);
    }

[b-n2iv4hz2mu] .lore-icon {
    color: var(--color-monk-lighter);
    flex-shrink: 0;
    margin-top: 2px;
}

.lore-text[b-n2iv4hz2mu] {
    font-size: var(--font-size-sm);
    color: var(--color-monk-lighter);
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all var(--transition-base);
}

.item-lore-preview:hover .lore-text[b-n2iv4hz2mu],
.item-lore-preview:focus .lore-text[b-n2iv4hz2mu] {
    -webkit-line-clamp: unset;
}

/* ===== AVG DAMAGE LINE ===== */
.item-avg-line[b-n2iv4hz2mu] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    min-height: 1.3em;
}

.avg-label[b-n2iv4hz2mu] {
    color: var(--color-text-tertiary);
}

.avg-value.upgrade[b-n2iv4hz2mu] {
    color: var(--color-success-light);
}

.avg-value.downgrade[b-n2iv4hz2mu] {
    color: var(--color-text-tertiary);
}

/* ===== FOOTER (price + actions in one row) ===== */
.item-footer[b-n2iv4hz2mu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
    flex-wrap: wrap;
}

.footer-price[b-n2iv4hz2mu] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-display);
    white-space: nowrap;
}

    .footer-price.affordable[b-n2iv4hz2mu] {
        color: var(--color-success-light);
    }

    .footer-price.unaffordable[b-n2iv4hz2mu] {
        color: var(--color-danger-light);
    }

    .footer-price.sell-price[b-n2iv4hz2mu] {
        color: var(--color-warning-light);
    }

.shortfall-hint[b-n2iv4hz2mu] {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
}

/* ===== WARNING ===== */
.item-warning[b-n2iv4hz2mu] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

    .item-warning.level-warning[b-n2iv4hz2mu] {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.35);
        color: var(--color-danger-light);
    }

    .item-warning.class-warning[b-n2iv4hz2mu] {
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.25);
        color: var(--color-warning-light);
    }

/* ===== BUY BUTTON ===== */
[b-n2iv4hz2mu] .btn-equip {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
    color: var(--color-gray-900) !important;
    font-family: var(--font-display) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: var(--space-sm) var(--space-xl) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-base) !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.25) !important;
    min-height: 36px !important;
}

    [b-n2iv4hz2mu] .btn-equip:hover:not(:disabled) {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.35) !important;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
    }

    [b-n2iv4hz2mu] .btn-equip:disabled {
        opacity: 0.35 !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
        transform: none !important;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .item-card[b-n2iv4hz2mu] {
        padding: var(--space-md);
    }

    .item-name[b-n2iv4hz2mu] {
        font-size: var(--font-size-base);
    }

    .stat-chip[b-n2iv4hz2mu] {
        font-size: var(--font-size-xs);
        padding: var(--space-xs);
    }

    .item-footer[b-n2iv4hz2mu] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-n2iv4hz2mu] .btn-equip {
        width: 100% !important;
        justify-content: center !important;
    }
}
/* /Components/Shared/LoadoutDrawer.razor.rz.scp.css */
/* LoadoutDrawer - scoped styles */
/* Global hide/show rules live in game-shared.css to guarantee desktop hiding */

/* ===== FAB BUTTON ===== */

@media (max-width: 1100px) {
    .loadout-fab[b-i5rxh8rpdz] {
        align-items: center;
        gap: var(--space-sm);
        position: fixed;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--space-md));
        right: var(--space-lg);
        z-index: 150;
        padding: var(--space-sm) var(--space-lg);
        background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
        color: var(--color-gray-900);
        border: none;
        border-radius: var(--radius-xl);
        font-family: var(--font-display);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
        transition: all var(--transition-base);
        white-space: nowrap;
    }

    .loadout-fab:hover[b-i5rxh8rpdz] {
        transform: translateY(-2px);
        box-shadow: 0 6px 28px rgba(255, 215, 0, 0.5), 0 3px 12px rgba(0, 0, 0, 0.4);
    }

    .loadout-fab.fab-active[b-i5rxh8rpdz] {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.08));
        color: var(--color-primary);
        border: 1px solid var(--color-border-active);
        box-shadow: 0 0 20px var(--color-border-active);
    }

    /* ===== OVERLAY ===== */

    .loadout-overlay[b-i5rxh8rpdz] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        z-index: 190;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-slow);
        backdrop-filter: blur(2px);
    }

    .loadout-overlay.open[b-i5rxh8rpdz] {
        opacity: 1;
        pointer-events: auto;
    }

    /* ===== BOTTOM SHEET ===== */

    .loadout-sheet[b-i5rxh8rpdz] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 195;
        max-height: 78vh;
        overflow-y: auto;
        background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
        border-top: 2px solid var(--color-border-active);
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    }

    .loadout-sheet.open[b-i5rxh8rpdz] {
        transform: translateY(0);
    }

    .loadout-sheet-handle[b-i5rxh8rpdz] {
        width: 48px;
        height: 4px;
        background: var(--color-border-hover);
        border-radius: 2px;
        margin: var(--space-md) auto var(--space-sm);
        cursor: pointer;
        transition: background var(--transition-fast);
    }

    .loadout-sheet-handle:hover[b-i5rxh8rpdz] {
        background: var(--color-border-active);
    }

    .loadout-sheet-content[b-i5rxh8rpdz] {
        padding: 0 var(--space-lg) var(--space-lg);
    }
}
/* /Components/Shared/NotificationDrawer.razor.rz.scp.css */
/* NotificationDrawer scoped styles - Uses Design System Tokens */

/* Notification Wrapper - ensures CSS isolation works with fixed elements */
.notification-wrapper[b-jvst0g8l77] {
    display: contents;
}

/* Notification Bell Button */
.notification-bell-container[b-jvst0g8l77] {
    position: relative;
    margin: 0 var(--space-sm);
}

.notification-bell-button[b-jvst0g8l77] {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-slow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-bell-button:hover[b-jvst0g8l77] {
    background: rgba(255, 215, 0, 0.1);
}

.bell-icon[b-jvst0g8l77] {
    font-size: var(--font-size-2xl);
    color: var(--color-text-secondary);
    transition: color var(--transition-slow);
}

.notification-bell-button:hover .bell-icon[b-jvst0g8l77] {
    color: var(--color-primary);
}

.notification-badge[b-jvst0g8l77] {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: 0.15rem 0.35rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    animation: pulse-badge-b-jvst0g8l77 2s infinite;
}

@keyframes pulse-badge-b-jvst0g8l77 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Notification Drawer Overlay */
.notification-drawer-overlay[b-jvst0g8l77] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    animation: fadeIn-b-jvst0g8l77 var(--transition-slow);
}

@keyframes fadeIn-b-jvst0g8l77 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Notification Drawer */
.notification-drawer[b-jvst0g8l77] {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%);
    border-left: 1px solid var(--color-border-base);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    transition: right var(--transition-slow);
}

.notification-drawer.open[b-jvst0g8l77] {
    right: 0;
}

/* Drawer Header */
.notification-drawer-header[b-jvst0g8l77] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xl);
    border-bottom: 1px solid var(--color-border-base);
    background: rgba(255, 215, 0, 0.05);
}

.notification-drawer-header h3[b-jvst0g8l77] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0;
}

.close-button[b-jvst0g8l77] {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-3xl);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    line-height: 1;
}

.close-button:hover[b-jvst0g8l77] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
}

/* Drawer Actions */
.notification-drawer-actions[b-jvst0g8l77] {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--color-border-base);
}

.mark-all-read-button[b-jvst0g8l77] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    width: 100%;
}

.mark-all-read-button:hover[b-jvst0g8l77] {
    background: var(--color-border-base);
    border-color: var(--color-border-active);
}

/* Notification List */
.notification-list[b-jvst0g8l77] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
}

.notification-list[b-jvst0g8l77]::-webkit-scrollbar {
    width: 8px;
}

.notification-list[b-jvst0g8l77]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
}

.notification-list[b-jvst0g8l77]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: var(--radius-sm);
}

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

/* Loading State */
.notification-loading[b-jvst0g8l77] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-lg);
    color: var(--color-text-secondary);
}

.loading-spinner[b-jvst0g8l77] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-round);
    animation: spin-b-jvst0g8l77 1s linear infinite;
    margin-bottom: var(--space-lg);
}

@keyframes spin-b-jvst0g8l77 {
    to {
        transform: rotate(360deg);
    }
}

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

.empty-icon[b-jvst0g8l77] {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-lg);
    opacity: 0.5;
}

.notification-empty p[b-jvst0g8l77] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text-secondary);
}

.empty-subtitle[b-jvst0g8l77] {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
}

/* Notification Item */
.notification-item[b-jvst0g8l77] {
    display: flex;
    align-items: flex-start;
    padding: var(--space-lg);
    margin: var(--space-sm) 0;
    border-radius: var(--radius-lg);
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--color-border-base);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}

.notification-item:hover[b-jvst0g8l77] {
    background: rgba(30, 41, 59, 0.8);
    border-color: var(--color-border-hover);
    transform: translateX(-4px);
}

.notification-item.unread[b-jvst0g8l77] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-hover);
}

.notification-icon-container[b-jvst0g8l77] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: rgba(255, 215, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-md);
}

.notification-type-icon[b-jvst0g8l77] {
    font-size: var(--font-size-xl);
}

.notification-content[b-jvst0g8l77] {
    flex: 1;
    min-width: 0;
}

.notification-header[b-jvst0g8l77] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.notification-title[b-jvst0g8l77] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unread-indicator[b-jvst0g8l77] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background: var(--color-primary);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.notification-message[b-jvst0g8l77] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-time[b-jvst0g8l77] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.notification-delete-button[b-jvst0g8l77] {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-2xl);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    margin-left: var(--space-sm);
    opacity: 0;
}

.notification-item:hover .notification-delete-button[b-jvst0g8l77] {
    opacity: 1;
}

.notification-delete-button:hover[b-jvst0g8l77] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .notification-drawer[b-jvst0g8l77] {
        width: 100vw;
        right: -100vw;
    }

    .notification-bell-container[b-jvst0g8l77] {
        margin: 0 var(--space-sm);
    }
}