/* Peg drop: a bubble bounces through chrome pegs into a row of cups. */

.dgs-drop-wrap {
    display: grid;
    justify-items: center;
    width: 100%;
    padding: clamp(6px, 2vw, 18px) 0;
}

.dgs-drop-svg {
    display: block;
    width: min(100%, 620px);
    height: auto;
    overflow: visible;
}

.dgs-drop-glass {
    fill: color-mix(in srgb, var(--tone, #8b5cf6) 22%, transparent);
    stroke: rgba(255, 244, 230, .16);
    stroke-width: 2;
    stroke-linejoin: round;
}

.dgs-drop-peg {
    fill: #f1f3f8;
    stroke: rgba(30, 11, 51, .45);
    stroke-width: 1.2;
}

.dgs-drop-cup rect {
    stroke: rgba(255, 255, 255, .5);
    stroke-width: 1.5;
}

.dgs-drop-cup text {
    fill: #fff4e6;
    font: 800 16px/1 var(--dgs-display, system-ui, sans-serif);
    letter-spacing: -.04em;
    text-anchor: middle;
    dominant-baseline: central;
}

.dgs-drop-x {
    font-size: 11px;
}

.dgs-drop-cup--top rect { fill: var(--dgs-acc, #d0103a); }
.dgs-drop-cup--high rect { fill: var(--dgs-sun, #ff8a00); }
.dgs-drop-cup--mid rect { fill: #e2367a; }
.dgs-drop-cup--even rect { fill: #4f8f12; }
.dgs-drop-cup--low rect { fill: var(--dgs-night-2, #2d1450); }

.dgs-drop-cup {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: transform 240ms ease-out, opacity 240ms ease-out;
}

.dgs-drop-svg:has(.is-hit) .dgs-drop-cup:not(.is-hit) {
    opacity: .72;
}

.dgs-drop-cup.is-hit {
    transform: translateY(3px) scale(1.06);
}

.dgs-drop-cup.is-hit rect {
    stroke: #fff4e6;
    stroke-width: 2.5;
}

.dgs-drop-ball {
    will-change: transform;
}

.dgs-drop-ring {
    fill: none;
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 1.5;
}

.dgs-drop-wrap.is-up .dgs-drop-cup.is-hit {
    animation: dgs-drop-nod 420ms ease-out;
}

@keyframes dgs-drop-nod {
    40% { transform: translateY(3px) scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
    .dgs-drop-cup { transition: none; }
    .dgs-drop-wrap.is-up .dgs-drop-cup.is-hit { animation: none; }
}