/* assets/css/achievements.css
   Achievements (docs/41_Kampagnen_Achievements.md, „Achievements (Teil 1)"): das Bild eines
   Achievements, die Auswahl in der Bewertungsliste und der Ausschnitt beim Hochladen. Auf allen
   Seiten geladen (frontend/header.php), weil Achievements in Menü, Spiel und Editoren erscheinen. */

/* --- Bild, Icon oder Logo eines Achievements ------------------------------------------------- */
.achievement-visual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 4rem;
    height: 4rem;
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-border-light);
    color: var(--clr-primary-main);
    overflow: hidden;
    box-sizing: border-box;
}

.achievement-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Das Logo füllt das Feld nicht, es steht mit Rand darin */
.achievement-visual-logo img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.achievement-visual-icon i {
    font-size: 2rem;
}

.achievement-visual-sm {
    width: 3rem;
    height: 3rem;
}

.achievement-visual-sm.achievement-visual-icon i {
    font-size: 1.5rem;
}

.achievement-visual-xs {
    width: 1.75rem;
    height: 1.75rem;
}

.achievement-visual-xs.achievement-visual-icon i {
    font-size: 0.95rem;
}

/* --- Auswahl der Achievements eines Eintrags der Bewertungsliste ------------------------------ */
.achievement-pick-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-height: 11rem;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-input);
}

.achievement-pick-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.25rem 0.375rem;
    cursor: pointer;
}

.achievement-pick-item:hover {
    background: var(--clr-surface-hover);
}

/* --- Dialog eines Achievements im Map-Editor -------------------------------------------------- */
.achievement-icon-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.4rem;
    color: var(--clr-primary-main);
}

.achievement-image-note {
    margin: 0;
}

/* Ausschnitt: das verkleinerte Bild mit dem Rahmen des Quadrats, der sich verschieben lässt */
.achievement-crop {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.achievement-crop-stage {
    position: relative;
    align-self: center;
    overflow: hidden;
    background: var(--clr-surface-dark);
    user-select: none;
    touch-action: none;
}

.achievement-crop-image {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.achievement-crop-frame {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--clr-primary-main);
    /* Alles außerhalb des Ausschnitts wird abgedunkelt */
    box-shadow: 0 0 0 9999px var(--clr-shade-55);
    cursor: move;
}

.achievement-crop-hint {
    margin: 0;
}

/* --- Toast beim Erhalt eines Achievements (AchievementToast) ---------------------------------- */
/* Über den Dialogen, unter Kontextmenüs. Der Behälter selbst fängt keine Klicks ab. */
.achievement-toasts {
    position: fixed;
    z-index: 90000;
    display: flex;
    gap: 0.5rem;
    width: min(24rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    pointer-events: none;
}

/* Unten: neue Toasts stehen an der Kante und schieben ältere nach oben */
.achievement-toasts.is-bottom-right {
    right: 1rem;
    bottom: 1rem;
    flex-direction: column;
    justify-content: flex-end;
}

.achievement-toasts.is-bottom-left {
    left: 1rem;
    bottom: 1rem;
    flex-direction: column;
    justify-content: flex-end;
}

/* Oben: neue Toasts stehen an der Kante und schieben ältere nach unten */
.achievement-toasts.is-top-right {
    right: 1rem;
    top: 1rem;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.achievement-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 2.25rem 0.75rem 0.75rem;
    border: 1px solid var(--clr-border-light);
    border-left: 4px solid var(--clr-primary-main);
    background: var(--clr-surface-popup);
    box-shadow: var(--shadow-popup);
    color: var(--clr-text-primary);
    font-family: var(--font-regular);
    cursor: pointer;
    pointer-events: auto;
    animation: achievement-toast-in 0.25s ease-out;
}

/* Angeklickt: Der Timer ist ausgesetzt, der Toast bleibt bis zum Schließen */
.achievement-toast.is-pinned {
    border-color: var(--clr-primary-main);
    cursor: default;
}

.achievement-toast-body {
    flex: 1;
    min-width: 0;
}

.achievement-toast-label {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-primary-text);
}

.achievement-toast-title {
    font-weight: bold;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.achievement-toast-text {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    overflow-wrap: anywhere;
}

.achievement-toast-text > :first-child {
    margin-top: 0;
}

.achievement-toast-text > :last-child {
    margin-bottom: 0;
}

.achievement-toast-close {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--clr-text-muted);
    cursor: pointer;
}

.achievement-toast-close:hover,
.achievement-toast-close:focus-visible {
    background: var(--clr-surface-hover);
    color: var(--clr-text-primary);
}

@keyframes achievement-toast-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* --- Ansicht "Achievements" des Spieler-Menüs (AchievementsView) ------------------------------ */
.menu-achievements-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-inner);
}

.menu-achievement {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
}

.menu-achievement-body {
    flex: 1;
    min-width: 0;
}

.menu-achievement-title {
    margin: 0;
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

.menu-achievement-text {
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

.menu-achievement-text > :first-child {
    margin-top: 0;
}

.menu-achievement-text > :last-child {
    margin-bottom: 0;
}

.menu-achievement-meta {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
}