.word-collect {
    position: fixed;
    z-index: 20;
    inset: 0;
    overflow: hidden;
    animation: word-collect-fade-in var(--duration-overlay-in) var(--ease) both;
}

.word-collect--closing {
    pointer-events: none;
    animation: word-collect-fade-out var(--duration-overlay-out) var(--ease) both;
}

.word-collect__backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-overlay);
}

.word-collect__stage {
    position: relative;
    width: 100%;
    height: 100%;
}

.word-collect__card {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: min(var(--content-width-label), 60vw);
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    color: var(--color-text-muted);
    box-shadow: var(--shadow-sm);
    font-weight: var(--weight-regular);
    text-overflow: ellipsis;
    white-space: nowrap;
    animation: word-collect-flight var(--duration-word-flight) ease-in both;
}

.word-collect__card--large {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-base);
}

.word-collect__card--from-1 {
    --word-start-x: -58vw;
    --word-start-y: -48vh;
    --word-start-turn: -18deg;
    --word-cloud-x: calc(var(--space-16) * -2);
    --word-cloud-y: calc(var(--space-10) * -2);
}

.word-collect__card--from-2 {
    --word-start-x: -20vw;
    --word-start-y: -58vh;
    --word-start-turn: 12deg;
    --word-cloud-x: calc(var(--space-12) * -1);
    --word-cloud-y: calc(var(--space-12) * -2);
}

.word-collect__card--from-3 {
    --word-start-x: 24vw;
    --word-start-y: -56vh;
    --word-start-turn: -10deg;
    --word-cloud-x: var(--space-12);
    --word-cloud-y: calc(var(--space-12) * -2);
}

.word-collect__card--from-4 {
    --word-start-x: 58vw;
    --word-start-y: -42vh;
    --word-start-turn: 20deg;
    --word-cloud-x: calc(var(--space-16) * 2);
    --word-cloud-y: calc(var(--space-10) * -2);
}

.word-collect__card--from-5 {
    --word-start-x: 58vw;
    --word-start-y: -8vh;
    --word-start-turn: -14deg;
    --word-cloud-x: calc(var(--space-16) * 2);
    --word-cloud-y: calc(var(--space-4) * -1);
}

.word-collect__card--from-6 {
    --word-start-x: 58vw;
    --word-start-y: 34vh;
    --word-start-turn: 16deg;
    --word-cloud-x: calc(var(--space-16) * 2);
    --word-cloud-y: var(--space-16);
}

.word-collect__card--from-7 {
    --word-start-x: 28vw;
    --word-start-y: 56vh;
    --word-start-turn: -20deg;
    --word-cloud-x: var(--space-16);
    --word-cloud-y: calc(var(--space-12) * 2);
}

.word-collect__card--from-8 {
    --word-start-x: -18vw;
    --word-start-y: 58vh;
    --word-start-turn: 10deg;
    --word-cloud-x: calc(var(--space-12) * -1);
    --word-cloud-y: calc(var(--space-12) * 2);
}

.word-collect__card--from-9 {
    --word-start-x: -58vw;
    --word-start-y: 42vh;
    --word-start-turn: -12deg;
    --word-cloud-x: calc(var(--space-16) * -2);
    --word-cloud-y: calc(var(--space-10) * 2);
}

.word-collect__card--from-10 {
    --word-start-x: -58vw;
    --word-start-y: 8vh;
    --word-start-turn: 18deg;
    --word-cloud-x: calc(var(--space-16) * -2);
    --word-cloud-y: var(--space-4);
}

.word-collect__card--from-11 {
    --word-start-x: -58vw;
    --word-start-y: -24vh;
    --word-start-turn: -16deg;
    --word-cloud-x: calc(var(--space-16) * -2);
    --word-cloud-y: calc(var(--space-12) * -1);
}

.word-collect__card--from-12 {
    --word-start-x: 58vw;
    --word-start-y: 12vh;
    --word-start-turn: 14deg;
    --word-cloud-x: calc(var(--space-16) * 2);
    --word-cloud-y: var(--space-8);
}

.word-collect__center {
    position: absolute;
    top: 58%;
    left: 50%;
    display: grid;
    width: min(calc(100% - var(--space-8)), var(--content-width-narrow));
    padding: var(--space-4);
    border-radius: var(--radius-panel);
    justify-items: center;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    box-shadow: var(--shadow-md);
    gap: var(--space-2);
    text-align: center;
    transform: translate(-50%, -50%);
}

.word-collect__glow {
    position: absolute;
    top: calc(var(--space-8) * -1);
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-round);
    background: var(--color-action-soft);
    box-shadow: 0 0 var(--space-8) var(--color-action-soft);
    animation: word-collect-pulse var(--duration-preview-medium) var(--ease) infinite;
}

.word-collect__text {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.word-collect__subline {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.word-collect__actions {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
}

.word-collect__home-link {
    display: inline-flex;
    min-height: var(--tap-target);
    padding: var(--space-1) var(--space-2);
    align-items: center;
    color: var(--color-action);
    font-size: var(--text-sm);
}

.word-collect__home-link:focus-visible {
    border-radius: var(--radius-sm);
    outline: none;
    box-shadow: var(--focus-ring);
}

.word-collect__glow--stopped {
    animation: none;
}

@keyframes word-collect-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes word-collect-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes word-collect-flight {
    from {
        opacity: 0;
        transform: translate(var(--word-start-x), var(--word-start-y)) rotate(var(--word-start-turn)) scale(1);
    }

    12% { opacity: 1; }

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

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

@keyframes word-collect-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50% { opacity: 0.7; transform: scale(1.15); }
}

@media (min-width: 48rem) {
    .word-collect__card--large {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .word-collect__card {
        opacity: 0.78;
        transform: translate(var(--word-cloud-x), var(--word-cloud-y));
        animation: word-collect-cloud var(--duration-preview-long) var(--ease) both;
    }

    .word-collect__glow {
        animation: none;
    }
}

@keyframes word-collect-cloud {
    from { opacity: 0; }
    to { opacity: 0.78; }
}