/* Spielereien aus spass.js. Bei reduzierter Bewegung greift die Regel am Ende von style.css. */

@layer components {
    /* ---- Meldung unten links ---- */
    .toast {
        position: fixed; left: var(--pad); bottom: 20px; z-index: 120;
        max-width: min(420px, calc(100vw - 2 * var(--pad) - 70px));
        padding: 14px 18px; background: var(--acid); color: var(--hard);
        border: 3px solid var(--hard); box-shadow: calc(var(--shadow) * .6) calc(var(--shadow) * .6) 0 var(--hard);
        font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em;
        rotate: calc(var(--tilt) * -1.5deg);
        opacity: 0; translate: 0 24px; pointer-events: none;
        transition: opacity .2s, translate .3s var(--ease-pop);
    }
    .toast.is-sichtbar { opacity: 1; translate: 0 0; }

    /* ---- 1. Stempel auf den Leistungskarten ---- */
    .card[data-stempel] { position: relative; cursor: pointer; }
    .stempel {
        position: absolute; right: 22px; bottom: 22px;
        padding: 6px 12px; border: 4px double currentColor;
        font-family: var(--mono); font-size: 15px; font-weight: 600;
        text-transform: uppercase; letter-spacing: .08em; line-height: 1.2;
        opacity: .82; rotate: -12deg; pointer-events: none;
    }

    /* ---- 2. Zahlenkacheln mit Rückseite ---- */
    .fact { position: relative; cursor: default; }
    .fact > :not(.fact-back) { transition: opacity .2s; }
    .fact-back {
        position: absolute; inset: 0; padding: inherit;
        display: flex; align-items: flex-end;
        background: inherit; color: inherit;
        font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
        opacity: 0; transform: perspective(600px) rotateX(-90deg); transform-origin: top;
        transition: opacity .2s, transform .4s var(--ease-pop);
    }
    .fact:is(:hover, .is-umgedreht) > :not(.fact-back) { opacity: 0; }
    .fact:is(:hover, .is-umgedreht) .fact-back { opacity: 1; transform: none; }

    /* ---- 3. Loses Porträt ---- */
    .shot { cursor: pointer; }
    .shot.is-lose .shot-in {
        rotate: calc(var(--tilt) * 3deg + 14deg); transform-origin: 92% 3%;
        transition: rotate .7s var(--ease-pop);
    }
    .shot.is-lose .tape { translate: -30px -40px; rotate: -38deg; opacity: 0; transition: translate .4s var(--ease-out), rotate .4s, opacity .4s; }

    /* ---- 4. Sticker als Glücksrad ---- */
    .sticker {
        pointer-events: auto; cursor: pointer;
        rotate: var(--dreh, 0deg); transition: rotate 1.8s cubic-bezier(.15, .85, .25, 1);
    }

    /* ---- 5. Ideen-Kachel ---- */
    button.tile {
        font: inherit; text-align: left; cursor: pointer;
        border: 0; width: 100%;
    }
    button.tile:hover { rotate: calc(var(--tilt) * -1deg); }

    /* ---- 6. Bart der Kletterfigur ---- */
    .climber .fig-beard { transform-box: fill-box; transform-origin: 50% 0; transition: scale 2s var(--ease-pop); }
    .climber.bart-1 .fig-beard { scale: 1.06 1.15; }
    .climber.bart-2 .fig-beard { scale: 1.12 1.32; }
    .climber.bart-3 .fig-beard { scale: 1.18 1.5; }

    @media (max-width: 768px) {
        .toast { bottom: 14px; font-size: 15px; }
        .stempel { right: 14px; bottom: 14px; font-size: 12px; }
    }
}

@layer motion {
    @media (prefers-reduced-motion: no-preference) {
        .stempel { animation: stempeln .28s cubic-bezier(.3, 1.6, .5, 1) both; }
        .tile--next.is-neu .tile-next { animation: rise .4s var(--ease-pop) both; }
    }
    @keyframes stempeln { from { opacity: 0; scale: 1.8; } }
}

@media print {
    .toast { display: none !important; }
}