/* Pages of the "pick one of two" games. Builds on common/site.css; --c1 is the colour
   of the first option, --c2 of the second. */

.duel {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 14px;
    margin-top: 28px;
}

.duel__option {
    padding: 30px 18px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    color: #fff;
    font: inherit;
    font-size: clamp(1.15rem, 3.2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.3s ease, filter 0.3s ease;
    animation: pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
    animation-delay: calc(260ms + var(--i, 0) * 110ms);
}

.duel__option--first {
    background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 55%, #000));
    box-shadow: 0 16px 40px -18px var(--c1);
}

.duel__option--second {
    background: linear-gradient(135deg, var(--c2), color-mix(in srgb, var(--c2) 55%, #000));
    box-shadow: 0 16px 40px -18px var(--c2);
}

.duel__option:hover,
.duel__option:focus-visible {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.7);
    outline: none;
}

.duel__or {
    align-self: center;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--glass-line);
    border-radius: 50%;
    background: var(--glass);
    backdrop-filter: blur(10px);
    color: var(--ink-soft);
    font-weight: 700;
    text-transform: uppercase;
}

.is-voted .duel__option {
    cursor: default;
    pointer-events: none;
    transform: none;
}

.is-voted .duel__option:not(.is-chosen) {
    opacity: 0.35;
    filter: saturate(0.4);
}

.is-voted .duel__option.is-chosen {
    border-color: #fff;
    animation: celebrate 0.6s ease;
}

@keyframes pop {
    from { opacity: 0; transform: scale(0.85); }
}

@keyframes celebrate {
    40% { transform: scale(1.06); }
}

/* The options can be long, so each bar has its label above it. */
.bars--stacked .bar {
    grid-template-columns: 1fr 3.4em;
    gap: 6px 12px;
}

.bars--stacked .bar > span:first-child {
    grid-column: 1 / -1;
    font-weight: 600;
}

.bar--first .bar__fill {
    background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 60%, #000), var(--c1));
}

.bar--second .bar__fill {
    background: linear-gradient(90deg, color-mix(in srgb, var(--c2) 60%, #000), var(--c2));
}

@media (max-width: 720px) {
    .duel {
        grid-template-columns: 1fr;
    }

    .duel__or {
        justify-self: center;
        width: 44px;
        height: 44px;
    }

    .duel__option {
        padding: 22px 14px;
    }
}