/* =========================================================
   TROPHY TOAST
   Estilo oscuro/verde acorde a Formula1_Simulation
   ========================================================= */

:root {
    --tt-bg: rgba(10, 10, 10, 0.96);
    --tt-bg-soft: rgba(20, 20, 20, 0.96);
    --tt-text: #f5f5f5;
    --tt-muted: #c9d1c9;
    --tt-accent: #6dff00;
    --tt-accent-soft: #49b800;
    --tt-border: rgba(109, 255, 0, 0.75);
    --tt-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    --tt-radius: 18px;
    --tt-z: 9999;
}

/* Contenedor global */
.trophy-toast-container {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: var(--tt-z);
    display: flex;
    flex-direction: column;
    gap: 14px;
    pointer-events: none;
    max-width: 420px;
    width: calc(100vw - 32px);
}

/* Toast base */
.trophy-toast {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    width: 100%;
    padding: 16px 18px;
    border-radius: var(--tt-radius);
    background: linear-gradient(135deg, rgba(109, 255, 0, 0.06), transparent 45%), linear-gradient(180deg, var(--tt-bg), var(--tt-bg-soft));
    border: 1px solid var(--tt-border);
    box-shadow: var(--tt-shadow);
    color: var(--tt-text);
    overflow: hidden;
    pointer-events: auto;
    transform: translateY(-12px) scale(0.98);
    opacity: 0;
    animation: trophyToastIn 0.35s ease-out forwards;
}

    /* Barra decorativa lateral */
    .trophy-toast::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        background: linear-gradient(180deg, var(--tt-accent), var(--tt-accent-soft));
        box-shadow: 0 0 12px rgba(109, 255, 0, 0.45);
    }

    /* Animación de salida */
    .trophy-toast.is-hiding {
        animation: trophyToastOut 0.28s ease-in forwards;
    }

    /* Icono / tier */
    .trophy-toast__icon,
    .trophy-toast .toast-icon,
    .trophy-toast .trophy-icon {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        font-size: 1.5rem;
        font-weight: 800;
        color: #111;
        background: radial-gradient(circle at 30% 30%, #d8ffd0, var(--tt-accent));
        box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 0 18px rgba(109,255,0,0.28);
        flex-shrink: 0;
    }

    /* Cuerpo */
    .trophy-toast__body,
    .trophy-toast .toast-body {
        min-width: 0;
    }

    .trophy-toast__title,
    .trophy-toast .toast-title {
        margin: 0 0 4px;
        font-size: 1.05rem;
        line-height: 1.2;
        font-weight: 800;
        color: var(--tt-accent);
        word-break: break-word;
    }

    .trophy-toast__desc,
    .trophy-toast .toast-desc,
    .trophy-toast .toast-text {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.35;
        color: var(--tt-muted);
        word-break: break-word;
    }

    /* Tier / badge */
    .trophy-toast__badge,
    .trophy-toast .toast-badge {
        align-self: start;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: rgba(255,255,255,0.08);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.12);
        white-space: nowrap;
    }

    /* Botón cerrar opcional */
    .trophy-toast__close,
    .trophy-toast .toast-close {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: rgba(255,255,255,0.75);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

        .trophy-toast__close:hover,
        .trophy-toast .toast-close:hover {
            background: rgba(255,255,255,0.08);
            color: #fff;
            transform: scale(1.05);
        }

    /* Barra de progreso opcional */
    .trophy-toast__progress,
    .trophy-toast .toast-progress {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 4px;
        width: 100%;
        background: rgba(255,255,255,0.07);
        overflow: hidden;
    }

        .trophy-toast__progress::after,
        .trophy-toast .toast-progress::after {
            content: "";
            display: block;
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, var(--tt-accent), #d8ffd0);
            transform-origin: left center;
            animation: trophyToastTimer 4.8s linear forwards;
        }

    /* Variantes por tier */
    .trophy-toast--bronze,
    .trophy-toast[data-tier="Bronze"],
    .trophy-toast[data-tier="bronce"] {
        border-color: rgba(205, 127, 50, 0.9);
    }

        .trophy-toast--bronze::before,
        .trophy-toast[data-tier="Bronze"]::before,
        .trophy-toast[data-tier="bronce"]::before {
            background: linear-gradient(180deg, #cd7f32, #8f5821);
        }

        .trophy-toast--bronze .trophy-toast__icon,
        .trophy-toast--bronze .toast-icon,
        .trophy-toast[data-tier="Bronze"] .trophy-toast__icon,
        .trophy-toast[data-tier="Bronze"] .toast-icon,
        .trophy-toast[data-tier="bronce"] .trophy-toast__icon,
        .trophy-toast[data-tier="bronce"] .toast-icon {
            background: radial-gradient(circle at 30% 30%, #f0c7a0, #cd7f32);
        }

    .trophy-toast--silver,
    .trophy-toast[data-tier="Silver"],
    .trophy-toast[data-tier="Plata"],
    .trophy-toast[data-tier="plata"] {
        border-color: rgba(192, 192, 192, 0.95);
    }

        .trophy-toast--silver::before,
        .trophy-toast[data-tier="Silver"]::before,
        .trophy-toast[data-tier="Plata"]::before,
        .trophy-toast[data-tier="plata"]::before {
            background: linear-gradient(180deg, #e0e0e0, #9f9f9f);
        }

        .trophy-toast--silver .trophy-toast__icon,
        .trophy-toast--silver .toast-icon,
        .trophy-toast[data-tier="Silver"] .trophy-toast__icon,
        .trophy-toast[data-tier="Silver"] .toast-icon,
        .trophy-toast[data-tier="Plata"] .trophy-toast__icon,
        .trophy-toast[data-tier="Plata"] .toast-icon,
        .trophy-toast[data-tier="plata"] .trophy-toast__icon,
        .trophy-toast[data-tier="plata"] .toast-icon {
            background: radial-gradient(circle at 30% 30%, #ffffff, #bdbdbd);
        }

    .trophy-toast--gold,
    .trophy-toast[data-tier="Gold"],
    .trophy-toast[data-tier="Oro"],
    .trophy-toast[data-tier="oro"] {
        border-color: rgba(255, 215, 0, 0.95);
    }

        .trophy-toast--gold::before,
        .trophy-toast[data-tier="Gold"]::before,
        .trophy-toast[data-tier="Oro"]::before,
        .trophy-toast[data-tier="oro"]::before {
            background: linear-gradient(180deg, #ffe76a, #d5a900);
        }

        .trophy-toast--gold .trophy-toast__icon,
        .trophy-toast--gold .toast-icon,
        .trophy-toast[data-tier="Gold"] .trophy-toast__icon,
        .trophy-toast[data-tier="Gold"] .toast-icon,
        .trophy-toast[data-tier="Oro"] .trophy-toast__icon,
        .trophy-toast[data-tier="Oro"] .toast-icon,
        .trophy-toast[data-tier="oro"] .trophy-toast__icon,
        .trophy-toast[data-tier="oro"] .toast-icon {
            background: radial-gradient(circle at 30% 30%, #fff5b5, #ffd700);
        }

    .trophy-toast--platinum,
    .trophy-toast[data-tier="Platinum"],
    .trophy-toast[data-tier="Platino"],
    .trophy-toast[data-tier="platino"] {
        border-color: rgba(135, 224, 255, 0.95);
    }

        .trophy-toast--platinum::before,
        .trophy-toast[data-tier="Platinum"]::before,
        .trophy-toast[data-tier="Platino"]::before,
        .trophy-toast[data-tier="platino"]::before {
            background: linear-gradient(180deg, #baf2ff, #68b6ff);
        }

        .trophy-toast--platinum .trophy-toast__icon,
        .trophy-toast--platinum .toast-icon,
        .trophy-toast[data-tier="Platinum"] .trophy-toast__icon,
        .trophy-toast[data-tier="Platinum"] .toast-icon,
        .trophy-toast[data-tier="Platino"] .trophy-toast__icon,
        .trophy-toast[data-tier="Platino"] .toast-icon,
        .trophy-toast[data-tier="platino"] .trophy-toast__icon,
        .trophy-toast[data-tier="platino"] .toast-icon {
            background: radial-gradient(circle at 30% 30%, #ecfbff, #86dfff);
        }

    /* Variante por defecto verde */
    .trophy-toast--default .trophy-toast__badge,
    .trophy-toast .toast-badge--default {
        background: rgba(109, 255, 0, 0.14);
        border-color: rgba(109, 255, 0, 0.35);
        color: var(--tt-accent);
    }

/* Responsive */
@media (max-width: 768px) {
    .trophy-toast-container {
        top: 14px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .trophy-toast {
        grid-template-columns: 56px 1fr;
        gap: 12px;
        padding: 14px 14px 16px;
    }

        .trophy-toast__icon,
        .trophy-toast .toast-icon,
        .trophy-toast .trophy-icon {
            width: 48px;
            height: 48px;
            font-size: 1.15rem;
        }

        .trophy-toast__badge,
        .trophy-toast .toast-badge {
            grid-column: 2;
            justify-self: start;
            margin-top: 2px;
        }
}

@media (max-width: 480px) {
    .trophy-toast {
        min-height: 84px;
        border-radius: 14px;
    }

        .trophy-toast__title,
        .trophy-toast .toast-title {
            font-size: 0.98rem;
        }

        .trophy-toast__desc,
        .trophy-toast .toast-desc,
        .trophy-toast .toast-text {
            font-size: 0.88rem;
        }
}

/* Animaciones */
@keyframes trophyToastIn {
    0% {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes trophyToastOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
}

@keyframes trophyToastTimer {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}