/* Position the container once */
#flash-messages {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column-reverse; /* newest on top */
    gap: 8px;
    z-index: 1000;
}

/* Flash messages no longer fixed */
.flash {
    font-family: monospace;
    text-transform: uppercase;
    font-size: 14px;
    padding: 8px;
    background-color: #111;
    border: 2px solid #333;
    border-radius: 10px;
    color: lime;
    text-align: center;
    transition: opacity 1s ease-out;
}

/* Variants */
.flash.notice   { border-color: lime; }
.flash.alert    { border-color: red; color: red; }

/* Payment notification variants - reusing colors from progress_bar.css */
.flash.normal       { border-color: #0f0; color: #0f0; }      /* Green for normal payment */
.flash.trivial      { border-color: #888; color: #888; }      /* Grey for unpaid/too slow */
.flash.decay        { border-color: #fff52d; color: #fff52d; } /* Yellow for reduced rewards */
.flash.penalty      { border-color: #ff8000; color: #ff8000; } /* Orange for penalty */
.flash.out_of_bounds { border-color: #ff0000; color: #ff0000; font-weight: bold; } /* Red for fines */

/* When you add this class via Stimulus, the message will fade and then be removed */
.flash.fade-out {
    opacity: 0;
}