/**
 * Financial System UI Enhancements
 * Improved visibility and warnings for credits and debt
 */

/* Credits Display Enhancements */
.financial-item.credits-wealthy {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.2);

.financial-item.credits-comfortable {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.3);

.financial-item.credits-low {
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.3);

.financial-item.credits-poor {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.4);
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.3);
    animation: lowFundsPulse 2s ease-in-out infinite;

@keyframes lowFundsPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(231, 76, 60, 0.3);

    50% {
        box-shadow: 0 0 25px rgba(231, 76, 60, 0.5);

/* Debt Display Enhancements */
.financial-item.debt-high {
    background: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.5);
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);

.financial-item.debt-moderate {
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.3);

.financial-item.debt-none {
    background: rgba(46, 204, 113, 0.05);
    border-color: rgba(46, 204, 113, 0.2);

@keyframes debtWarningPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);
        transform: scale(1);

    50% {
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.6);
        transform: scale(1.01);

/* Financial Status Info Enhancements */
.financial-status-info.status-wealthy {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3);

.financial-status-info.status-comfortable {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.3);

.financial-status-info.status-in-debt {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.4);
    animation: debtStatusPulse 2s ease-in-out infinite;

.financial-status-info.status-low-funds {
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.3);

.financial-status-info.status-high-debt {
    background: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.5);
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);
    animation: debtStatusPulse 1.5s ease-in-out infinite;

.financial-status-info.status-debt {
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.3);

@keyframes debtStatusPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);

    50% {
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.6);

/* Enhanced Debt Warning */
#debt-warning {
    background: rgba(231, 76, 60, 0.15);
    border: 2px solid rgba(231, 76, 60, 0.5);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
    animation: debtWarningPulse 2s ease-in-out infinite;

/* Prominent Credits Display */
.financial-value {
    transition: all var(--transition-base);

.financial-item.credits-wealthy .financial-value,
.financial-item.credits-poor .financial-value,
.financial-item.debt-high .financial-value {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .financial-item.credits-poor,
    .financial-item.debt-high,
    .financial-status-info.status-in-debt,
    .financial-status-info.status-high-debt,
    #debt-warning {
        animation: none;

    .financial-item.debt-high {
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);

    .financial-status-info.status-high-debt {
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}