root {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 200;
}

.screen-flash {
    position: absolute;
    top: 0;
    left: 0;
     width: 1920px;    /* hardcode viewport — S&Box doesn't support 100% reliably here */
     height: 1080px;
    pointer-events: none;
}

.flash-text {
    position: relative;
    width: 10%;
    font-size: 72px;
    font-weight: 900;
    color: rgba(255,255,255,0.90);
    pointer-events: none;
    animation: flash-text-pop 2.5s cubic-bezier(0.22,1,0.36,1) forwards;
    z-index: 10;
}


@keyframes flash-text-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

/* ── Shared fade — defined FIRST so all rules below can reference it ── */
@keyframes flash-fade {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes flash-boss-spawn {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes flash-wave {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

.screen-flash.flash-boss-spawn {
    background-color: rgba(220, 30, 30, 0.15);
    animation: flash-boss-spawn 2.5s ease-out forwards;
}

.screen-flash.flash-boss-death {
    background-color: rgba(251,191,36,0.22);
    animation: flash-fade 0.6s ease-out forwards;
}

.screen-flash.flash-wave-start {
    background-color: rgba(139,92,246,0.18);
    animation: flash-wave 2.5s ease-out forwards;
}

.screen-flash.flash-new-best {
    background-color: rgba(52,211,153,0.15);
    animation: flash-fade 1.0s ease-out forwards;
}

.screen-flash.flash-game-over {
    background-color: rgba(180,20,20,0.25);
    animation: flash-fade 0.8s ease-out forwards;
}