/* The banner that pops up at the top of every page when an achievement is earned
   (achievements.js). It never takes clicks or taps, so it can't get in the way of a game. */

.achievement-banner {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(400px, calc(100vw - 24px));
    margin: 0;
    padding: 10px 16px 10px 12px;
    overflow: visible;
    color: white;
    background: linear-gradient(90deg, #3d2a14, #2b2038 45%);
    border: 2px solid #fde68a;
    border-radius: 12px;
    box-shadow: 0 8px 24px #000a;
    font-family: Arial, sans-serif;
    pointer-events: none;
    transform: translateX(-50%);
    animation: achievement-arrive 0.35s ease-out;
}

/* As a popover the browser would center it on the screen, so put it back at the top. */
.achievement-banner:popover-open {
    inset: calc(env(safe-area-inset-top, 0px) + 10px) auto auto 50%;
}

.achievement-banner.is-leaving {
    opacity: 0;
    transform: translate(-50%, -16px);
    transition:
        opacity 0.3s ease-in,
        transform 0.3s ease-in;
}

@keyframes achievement-arrive {
    from {
        opacity: 0;
        transform: translate(-50%, -24px) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* The milestone's medal (medal.css colors it from data-tier) or the challenge's picture. */
.achievement-banner-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    background: #1d1528;
    border: 1px solid #653986;
    border-radius: 8px;
}

.achievement-banner-icon img,
.achievement-banner-icon svg {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.achievement-banner-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.achievement-banner-text small {
    color: #fde68a;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.achievement-banner-text strong {
    overflow: hidden;
    font:
        700 1rem 'Orbitron',
        Arial,
        sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-banner-text span {
    color: #d8b4fe;
    font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
    .achievement-banner {
        animation: none;
    }

    .achievement-banner.is-leaving {
        transform: translateX(-50%);
        transition: opacity 0.3s ease-in;
    }
}