/* --- Toasts & Notifications --- */
.achievement-toast {
    background: linear-gradient(to right, rgba(22, 163, 74, 0.5), rgba(22, 163, 74, 0.1));
    backdrop-filter: blur(10px);
    border: 1px solid var(--price-green);
    border-radius: 0.5rem;
    padding: 0.75rem;
    width: 280px;
    box-shadow: 0 0 25px var(--price-green);
    animation: slide-in-bounce-out 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.friend-toast {
    background: rgba(13, 17, 23, 0.85);
    backdrop-filter: blur(5px);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    width: 220px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    animation: friend-toast-in-out 5s ease-in-out forwards;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.friend-toast .online-status {
    width: 8px; height: 8px; background-color: var(--price-green); border-radius: 50%; box-shadow: 0 0 8px var(--price-green); flex-shrink: 0;
}

.duel-invite-toast-refined {
    width: 100%;
    max-width: 380px;
    background: 
        radial-gradient(ellipse at top, rgba(0, 229, 255, 0.2), transparent 70%),
        linear-gradient(to bottom, rgba(13, 17, 23, 0.95), rgba(1, 4, 9, 0.95));
    backdrop-filter: blur(10px);
    border: 1px solid var(--panel-border);
    border-top: 2px solid var(--accent-cyan);
    border-radius: 0.75rem;
    box-shadow: 0 0 30px var(--accent-glow);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: duel-invite-slide-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    position: relative;
    overflow: hidden;
}
.duel-invite-toast-refined::before {
    content: ''; position: absolute; inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="bp" patternUnits="userSpaceOnUse" width="20" height="20"><path d="M0 0 L0 20 M0 0 L20 0" stroke="%2300E5FF" stroke-width="0.5" opacity="0.3"/></pattern><pattern id="bp-dots" patternUnits="userSpaceOnUse" width="100" height="100"><circle cx="25" cy="25" r="1" fill="%2300E5FF" opacity="0.3"/><circle cx="0" cy="0" r="1" fill="%2300E5FF" opacity="0.3"/><circle cx="50" cy="0" r="1" fill="%2300E5FF" opacity="0.3"/><circle cx="0" cy="50" r="1" fill="%2300E5FF" opacity="0.3"/><circle cx="50" cy="50" r="1" fill="%2300E5FF" opacity="0.3"/></pattern></defs><rect width="100%" height="100%" fill="url(%23bp)"/><rect width="100%" height="100%" fill="url(%23bp-dots)"/></svg>');
    background-position: center; opacity: 0.1; animation: standard-bg-grid-pan 30s linear infinite;
}
.duel-invite-header { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--panel-border); padding-bottom: 0.75rem; }
.duel-invite-header .icon { font-size: 1.875rem; color: var(--accent-cyan); text-shadow: 0 0 10px var(--accent-cyan); }
.duel-invite-header .title { font-size: 1.125rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-cyan); }
.duel-invite-body .sender-name { font-size: 1.25rem; font-weight: 700; }
.duel-invite-body .details { font-family: 'Roboto Mono', monospace; font-size: 0.875rem; color: var(--text-dark); margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0 1rem; }
.duel-invite-timer-bar { position: relative; width: 100%; height: 0.5rem; background-color: rgba(0,0,0,0.2); border-radius: 9999px; overflow: hidden; }
.duel-invite-timer-progress { position: absolute; top: 0; left: 0; height: 100%; background-color: var(--accent-cyan); transition: width 1s linear; }

.system-toast {
    backdrop-filter: blur(10px);
    border-radius: 0.5rem;
    padding: 0.75rem;
    width: 280px;
    animation: slide-in-bounce-out 5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.system-toast.friend-request-invite {
    animation: slide-in-bounce-persistent 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.system-toast.toast-info {
    background: linear-gradient(to right, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.1));
    border: 1px solid var(--accent-cyan);
    box-shadow: 0 0 20px var(--accent-glow);
}
.system-toast.toast-error {
    background: linear-gradient(to right, rgba(247, 58, 142, 0.4), rgba(247, 58, 142, 0.1));
    border: 1px solid var(--price-red);
    box-shadow: 0 0 20px var(--red-glow);
}

.actionable-toast-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.actionable-toast-btn {
    flex-grow: 1;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.875rem;
    transition: background-color 0.2s ease-out;
}
.actionable-toast-btn.accept {
    background-color: rgba(26, 247, 175, 0.2);
    color: var(--price-green);
}
.actionable-toast-btn.accept:hover { background-color: rgba(26, 247, 175, 0.4); }
.actionable-toast-btn.reject { background-color: rgba(255, 255, 255, 0.1); color: var(--text-dark); }
.actionable-toast-btn.reject:hover { background-color: rgba(255, 255, 255, 0.2); }

/* --- Mobile-specific Toast Positioning --- */
@media (max-width: 639px) {
    #achievement-toast-container {
        bottom: 1rem;
        top: auto;
        left: 1rem;
        right: 1rem;
        width: auto;
        gap: 0.5rem;
        align-items: center;
    }
    body.in-duel #achievement-toast-container {
        bottom: 200px;
    }
    #friend-toast-container {
        top: 4rem;
        bottom: auto;
        left: 0.5rem;
    }
    .achievement-toast {
        width: 240px;
        padding: 0.75rem;
        gap: 0.75rem;
        border-radius: 0.375rem;
    }
    .achievement-toast > div:first-child {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .achievement-toast h4 {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .achievement-toast p {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

/* ===================================
   LEVEL UP NOTIFICATION
   =================================== */
.level-up-toast {
    background: 
        radial-gradient(ellipse at top, rgba(255, 215, 0, 0.2), transparent 70%),
        linear-gradient(to bottom, rgba(13, 17, 23, 0.95), rgba(1, 4, 9, 0.95));
    backdrop-filter: blur(10px);
    border: 1px solid var(--accent-gold);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 0 40px var(--accent-gold-glow);
    animation: level-up-entry-animation 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    pointer-events: auto;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.level-up-toast.fade-out {
    opacity: 0;
    transform: scale(0.9);
}

.level-up-title {
    font-size: 1.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent-gold);
    text-shadow: 0 0 15px var(--accent-gold);
}

.level-up-number {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    color: var(--text-light);
    text-shadow: 0 0 25px var(--accent-gold-glow);
    margin: 0.5rem 0;
}

.level-up-rewards-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dark);
    margin-top: 1rem;
}

.level-up-reward-item {
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-light);
}