/*
 * components/banner.css — SfxBanner canonical chrome.
 *
 * Persistent in-page notifications. Three placements:
 *   - top: pinned to top of viewport (stacks vertically).
 *   - bottom: pinned to bottom of viewport.
 *   - inline: mounted into a caller-provided slot element.
 *
 * Visual language matches SfxModal / SfxToast — glass gradient card,
 * hairline primary border, small themed close button.
 */

@layer components {
    /* Wave 13: top-center, BELOW the main header (was full-width edge-to-edge).
     * Capsule card stays centered + narrow so it never blocks gameplay. */
    .sfx-banner-host {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        z-index: 11400;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
        pointer-events: none;
        width: min(92vw, 460px);
    }
    .sfx-banner-host-top {
        /* ~60px is the main header height; safe-area-inset-top adds the iOS notch slot. */
        top: calc(60px + env(safe-area-inset-top, 0px));
    }
    .sfx-banner-host-bottom {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
    .sfx-banner-host > * { pointer-events: auto; }

    .sfx-banner {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: linear-gradient(160deg,
            rgba(20, 14, 38, 0.97),
            rgba(12, 8, 24, 0.98));
        border: 1px solid rgba(var(--primary-rgb), 0.35);
        border-radius: 12px;
        box-shadow:
            0 8px 28px rgba(0, 0, 0, 0.4),
            0 0 16px rgba(var(--primary-rgb), 0.12);
        color: var(--text-primary);
        font-size: 0.88rem;
        line-height: 1.4;
        max-width: min(720px, 92vw);
        margin: 0 auto;
        opacity: 0;
        transform: translateY(-12px);
        transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .sfx-banner.sfx-banner-in {
        opacity: 1;
        transform: translateY(0);
    }
    .sfx-banner.sfx-banner-out {
        opacity: 0;
        transform: translateY(-12px);
    }
    .sfx-banner-placement-bottom {
        transform: translateY(12px);
    }
    .sfx-banner-placement-bottom.sfx-banner-in {
        transform: translateY(0);
    }
    .sfx-banner-placement-inline {
        transform: translateY(4px);
        max-width: 100%;
    }
    .sfx-banner-placement-inline.sfx-banner-in {
        transform: translateY(0);
    }

    .sfx-banner-icon {
        flex-shrink: 0;
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
    }
    .sfx-banner-msg {
        flex: 1;
        min-width: 0;
        word-break: break-word;
    }
    .sfx-banner-countdown {
        flex-shrink: 0;
        color: var(--primary);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        padding: 2px 8px;
        background: rgba(var(--primary-rgb), 0.12);
        border-radius: 999px;
        font-size: 0.82rem;
    }
    .sfx-banner-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }
    .sfx-banner-btn {
        padding: 6px 12px;
        background: rgba(var(--primary-rgb), 0.15);
        border: 1px solid rgba(var(--primary-rgb), 0.35);
        border-radius: 8px;
        color: var(--primary);
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        white-space: nowrap;
    }
    .sfx-banner-btn:hover {
        background: rgba(var(--primary-rgb), 0.25);
        color: #fff;
    }
    .sfx-banner-close {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.55);
        font-size: 1.15rem;
        line-height: 1;
        width: 24px;
        height: 24px;
        padding: 0;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .sfx-banner-close:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-primary);
    }

    /* Kind accents — lean on border color; background stays neutral. */
    .sfx-banner-success {
        border-color: rgba(46, 213, 115, 0.45);
    }
    .sfx-banner-warning {
        border-color: rgba(245, 158, 11, 0.5);
    }
    .sfx-banner-warning .sfx-banner-icon,
    .sfx-banner-warning .sfx-banner-countdown {
        color: #f59e0b;
    }
    .sfx-banner-warning .sfx-banner-countdown {
        background: rgba(245, 158, 11, 0.15);
    }
    .sfx-banner-error {
        border-color: rgba(239, 68, 68, 0.5);
    }
    .sfx-banner-error .sfx-banner-icon,
    .sfx-banner-error .sfx-banner-countdown {
        color: #ef4444;
    }
    .sfx-banner-error .sfx-banner-countdown {
        background: rgba(239, 68, 68, 0.15);
    }

    @media (max-width: 600px) {
        .sfx-banner {
            padding: 9px 12px;
            font-size: 0.82rem;
            gap: 8px;
        }
        .sfx-banner-btn {
            padding: 5px 10px;
            font-size: 0.78rem;
        }
    }

    html[data-motion="reduced"] .sfx-banner {
        transition-duration: 0.1s;
    }
    html[data-motion="off"] .sfx-banner {
        transition: none !important;
    }
    @media (prefers-reduced-motion: reduce) {
        .sfx-banner {
            transition-duration: 0.01ms !important;
        }
    }
}