/* ═══════════════════════════════════════════════════════════════════════════
   Shared Game Overlay Styles
   Used by both Singleplayer and Multiplayer modes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Countdown Number ───────────────────────────────────────────────────── */
.countdown-number {
    font-size: 6rem;
    font-weight: 900;
    color: var(--accent-primary);
    text-shadow: 0 0 30px rgba(0, 188, 212, 0.5);
    animation: countdown-pulse 1s ease infinite;
}

@keyframes countdown-pulse {
    0%   { transform: scale(0.5); opacity: 0; }
    50%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

/* ─── Line Clear Notification ────────────────────────────────────────────── */
.line-clear-notify {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    pointer-events: none;
}

.line-clear-notify span {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(0, 188, 212, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
    animation: line-clear-anim 1.2s ease forwards;
}

@keyframes line-clear-anim {
    0%   { opacity: 0; transform: scale(0.7) translateY(10px); }
    20%  { opacity: 1; transform: scale(1.15) translateY(0); }
    80%  { opacity: 1; transform: scale(1) translateY(-10px); }
    100% { opacity: 0; transform: scale(0.9) translateY(-30px); }
}