.glimmer_string {
    position: relative;
    width: 100%;
    max-width: min(400px, 94%);
    margin: 10px 0 0;
    pointer-events: none;
    transition: transform var(--string_descend, 620ms) cubic-bezier(0.22, 0.9, 0.28, 1);
    animation: pop_in 0.34s 0.06s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
.string_caption {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: 0.42;
    margin-bottom: 1px;
    transition:
        opacity 0.3s ease,
        color 0.3s ease;
}
.string_wire {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transition:
        opacity var(--string_restring, 520ms) ease,
        transform var(--string_restring, 520ms) ease;
}

.wire_cord {
    fill: none;
    stroke: rgba(243, 233, 210, 0.28);
    stroke-width: 1.4;
    stroke-linecap: round;
}
.wire_light {
    fill: none;
    stroke: #fff6d8;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 14 100;
    stroke-dashoffset: 14;
    opacity: 0;
    filter: drop-shadow(0 0 5px rgba(255, 233, 176, 0.9));
}
.glimmer_string.completing .wire_light {
    animation: string_light_run var(--string_travel, 620ms) cubic-bezier(0.4, 0, 0.5, 1) forwards;
}
@keyframes string_light_run {
    0% {
        opacity: 0;
        stroke-dashoffset: 14;
    }
    12% {
        opacity: 1;
    }
    86% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        stroke-dashoffset: -100;
    }
}

.hanger_tether {
    stroke: rgba(243, 233, 210, 0.24);
    stroke-width: 1.2;
}
.string_bead,
.string_charm {
    transform-box: view-box;
}

.bead_glass {
    fill: rgba(255, 255, 255, 0.045);
    stroke: color-mix(in srgb, var(--c) 38%, transparent);
    stroke-width: 1.4;
    transform-box: fill-box;
    transform-origin: center;
    transition:
        fill 0.28s ease,
        stroke 0.28s ease,
        filter 0.28s ease;
}
.bead_glyph {
    text-anchor: middle;
    dominant-baseline: central;
    font-size: 10px;
    font-weight: 800;
    fill: var(--c);
    opacity: 0.42;
    transition:
        opacity 0.28s ease,
        fill 0.28s ease;
}

.string_bead.lit .bead_glass {
    fill: color-mix(in srgb, var(--c) 32%, transparent);
    stroke: var(--c);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent));
}
.string_bead.lit .bead_glyph {
    fill: #fff;
    opacity: 1;
}

.string_bead.igniting .bead_glass {
    animation: bead_ignite 0.5s cubic-bezier(0.2, 1.5, 0.3, 1);
}
@keyframes bead_ignite {
    0% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

.string_bead.swinging {
    animation: bead_swing var(--string_settle, 620ms) cubic-bezier(0.25, 0.85, 0.35, 1) var(--swing_delay, 0ms);
}
@keyframes bead_swing {
    0% {
        transform: rotate(0deg);
    }
    22% {
        transform: rotate(4.2deg);
    }
    48% {
        transform: rotate(-2.6deg);
    }
    74% {
        transform: rotate(1.2deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.string_bead.phantom .bead_glass {
    fill: color-mix(in srgb, var(--c) 15%, transparent);
    stroke: color-mix(in srgb, var(--c) 78%, transparent);
    stroke-dasharray: 3 3;
    animation: bead_phantom 1.1s ease-in-out infinite;
}
.string_bead.phantom .bead_glyph {
    opacity: 0.82;
}
@keyframes bead_phantom {
    50% {
        stroke-opacity: 0.38;
    }
}

.string_bead.flaring .bead_glass {
    animation: bead_flare var(--string_travel, 620ms) ease-out;
}
@keyframes bead_flare {
    0% {
        filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent));
    }
    40% {
        filter: drop-shadow(0 0 16px color-mix(in srgb, var(--c) 95%, transparent));
    }
    100% {
        filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent));
    }
}

.charm_plate {
    fill: rgba(15, 12, 32, 0.74);
    stroke: color-mix(in srgb, var(--rc) 52%, transparent);
    stroke-width: 1.3;
    transform-box: fill-box;
    transform-origin: center;
    transition:
        stroke 0.28s ease,
        filter 0.3s ease;
}
.charm_text {
    text-anchor: middle;
    dominant-baseline: central;
    font-size: 11px;
    font-weight: 800;
    fill: var(--rc);
}

.string_charm.phantom .charm_plate {
    stroke: var(--rc);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rc) 62%, transparent));
    animation: charm_phantom 1.1s ease-in-out infinite;
}
@keyframes charm_phantom {
    50% {
        filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 85%, transparent));
    }
}

.string_charm.flaring .charm_plate {
    animation: charm_flare var(--string_flare, 520ms) cubic-bezier(0.2, 1.5, 0.3, 1);
}
@keyframes charm_flare {
    0% {
        transform: scale(1);
        filter: none;
    }
    38% {
        transform: scale(1.22);
        filter: drop-shadow(0 0 20px color-mix(in srgb, var(--rc) 95%, transparent));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rc) 55%, transparent));
    }
}
.string_charm.flaring .charm_text {
    animation: charm_text_flare var(--string_flare, 520ms) ease-out;
}
@keyframes charm_text_flare {
    0%,
    100% {
        fill: var(--rc);
    }
    38% {
        fill: #fff;
    }
}

.glimmer_string.restringing .string_wire {
    opacity: 0;
    transform: translateY(-7px) scale(0.97);
}
.glimmer_string.strung_in .string_wire {
    animation: string_in var(--string_restring, 520ms) cubic-bezier(0.2, 1.15, 0.3, 1);
}
@keyframes string_in {
    0% {
        opacity: 0;
        transform: translateY(-9px) scale(0.96);
    }
    60% {
        opacity: 1;
        transform: translateY(2px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

.string_charm {
    pointer-events: auto;
    cursor: help;
}
.string_charm:hover .charm_plate {
    stroke: var(--rc);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rc) 55%, transparent));
}

.string_tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 9px));
    z-index: 5;
    max-width: 200px;
    padding: 6px 11px;
    pointer-events: none;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    color: var(--parchment);
    text-align: center;
    background: rgba(15, 12, 32, 0.92);
    border: 1px solid color-mix(in srgb, var(--rc, #ffe9b0) 52%, transparent);
    border-radius: 9px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    animation: tooltip_rise 0.22s cubic-bezier(0.2, 1.3, 0.3, 1) both;
}
.string_tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: color-mix(in srgb, var(--rc, #ffe9b0) 52%, rgba(15, 12, 32, 0.92));
}
@keyframes tooltip_rise {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-100% - 3px));
    }
    to {
        opacity: 1;
    }
}

.string_coin_mote {
    position: absolute;
    z-index: 4;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 34% 30%, #fff3c8, #f6c860 58%, #c98d2e);
    box-shadow: 0 0 8px rgba(246, 200, 96, 0.75);
    animation: string_mote_fly var(--string_coin_travel, 500ms) cubic-bezier(0.32, 0.1, 0.44, 1) both;
}
.string_star_mote {
    position: absolute;
    z-index: 4;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 40% 35%, #fff, var(--rc, #ffe9b0) 62%);
    box-shadow: 0 0 9px color-mix(in srgb, var(--rc, #ffe9b0) 80%, transparent);
    animation: string_mote_fly var(--string_coin_travel, 500ms) cubic-bezier(0.32, 0.1, 0.44, 1) both;
}
@keyframes string_mote_fly {
    0% {
        translate: 0 0;
        scale: 0.5;
        opacity: 0;
    }
    16% {
        opacity: 1;
        scale: 1;
    }
    48% {
        translate: calc(var(--dx) * 0.5) calc(var(--dy) * 0.5 - 30px);
    }
    88% {
        opacity: 1;
    }
    100% {
        translate: var(--dx) var(--dy);
        scale: 0.55;
        opacity: 0;
    }
}

#boon_coin_pill.gained {
    animation: boon_coin_gained 0.24s cubic-bezier(0.2, 1.6, 0.3, 1);
}
@keyframes boon_coin_gained {
    40% {
        transform: scale(1.14, 0.92);
    }
    70% {
        transform: scale(0.97, 1.05);
    }
}

.string_ghost_score {
    position: absolute;
    left: 50%;
    top: 6.5%;
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
    font-family: var(--score_font);
    font-size: 38px;
    color: rgba(255, 233, 176, 0.85);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.3),
        0 0 16px rgba(255, 233, 176, 0.35);
    animation: ghost_score_in 0.3s cubic-bezier(0.2, 1.2, 0.3, 1) both;
    transition:
        opacity var(--string_point_fade, 300ms) ease,
        transform var(--string_point_fade, 300ms) ease;
}
.string_ghost_score.ticking {
    animation: ghost_score_tick 0.16s cubic-bezier(0.2, 1.4, 0.3, 1);
}
.string_ghost_score.fading {
    opacity: 0;
    transform: translateX(-50%) translateY(-9px);
}
@keyframes ghost_score_in {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}
@keyframes ghost_score_tick {
    45% {
        transform: translateX(-50%) scale(1.09);
    }
}

.string_reward_toast {
    position: absolute;
    right: 5%;
    top: 100%;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--rc);
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 0 10px color-mix(in srgb, var(--rc) 60%, transparent);
    animation: string_toast 1.15s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes string_toast {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }
    22% {
        opacity: 1;
        transform: translateY(-2px);
    }
    100% {
        opacity: 0;
        transform: translateY(-22px);
    }
}

.card.string_match::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, #fff6d8, transparent);
    animation: string_filament 2.6s ease-in-out infinite;
}
@keyframes string_filament {
    0%,
    100% {
        opacity: 0.16;
        transform: translateY(-38%);
    }
    50% {
        opacity: 0.58;
        transform: translateY(38%);
    }
}

.string_halo {
    position: absolute;
    inset: -2px;
    border-radius: 15px;
    pointer-events: none;
    z-index: 0;
    box-shadow:
        0 0 0 1.5px var(--rc, #ffe9b0),
        0 0 22px color-mix(in srgb, var(--rc, #ffe9b0) 42%, transparent);
    animation: string_halo_pulse 1.5s ease-in-out infinite;
}
@keyframes string_halo_pulse {
    50% {
        box-shadow:
            0 0 0 2px var(--rc, #ffe9b0),
            0 0 34px color-mix(in srgb, var(--rc, #ffe9b0) 72%, transparent);
    }
}
.card.string_completes .icon {
    animation-duration: 1.6s;
}

.string_ribbon {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--rc, #ffe9b0);
    border: 1px solid color-mix(in srgb, var(--rc, #ffe9b0) 58%, transparent);
    border-radius: 4px;
    padding: 0 4px;
    animation: ribbon_breathe 1.5s ease-in-out infinite;
}
@keyframes ribbon_breathe {
    50% {
        border-color: var(--rc, #ffe9b0);
        text-shadow: 0 0 8px color-mix(in srgb, var(--rc, #ffe9b0) 70%, transparent);
    }
}

#boon_screen.gift_draw #boon_head,
#boon_screen.point_payout #boon_head {
    animation: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#boon_screen.point_payout .string_caption {
    opacity: 0;
}
#boon_screen.gift_draw #boon_toggle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#boon_screen.gift_draw .string_caption {
    opacity: 0.9;
    color: #ded5ff;
}
.glimmer_string.descending {
    transform: translateY(var(--gift_descent, 46px));
}
.cards.fading_out .card_slot {
    opacity: 0;
    transition: opacity var(--string_gift_fade, 250ms) ease;
}
.cards.gift_row {
    transform: translateY(var(--gift_descent, 46px));
}

.card_slot.gift_slot {
    transform-origin: top center;
    animation: gift_settle var(--string_gift_settle, 380ms) cubic-bezier(0.3, 1.35, 0.4, 1) both;
    animation-delay: var(--card_stagger, 0s);
}
@keyframes gift_settle {
    0% {
        opacity: 0;
        transform: translateY(-15px) rotate(-2.4deg);
    }
    55% {
        opacity: 1;
        transform: translateY(2px) rotate(1.1deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
.card_slot.gift_slot .card {
    opacity: 1;
    animation: none;
}
.card_slot.gift_slot::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1.2px;
    height: 12px;
    background: rgba(243, 233, 210, 0.4);
    pointer-events: none;
}
.card.gift_card {
    border-color: rgba(255, 246, 216, 0.34);
}

#pause_string_row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 7px 10px;
    border: 1px solid rgba(183, 156, 255, 0.28);
    border-radius: 10px;
    background: rgba(183, 156, 255, 0.06);
}
.pause_string_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.pause_string_label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
    opacity: 0.55;
}
.pause_string_reward {
    font-size: 10px;
    font-weight: 800;
    color: var(--rc, #ffe9b0);
    white-space: nowrap;
}
.pause_string_beads {
    display: flex;
    gap: 4px;
}
.pause_string_bead {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
    color: color-mix(in srgb, var(--c) 72%, transparent);
}
.pause_string_bead.lit {
    background: color-mix(in srgb, var(--c) 30%, transparent);
    border-color: var(--c);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .glimmer_string,
    .string_wire {
        animation: none;
        transition: none;
    }
    .string_bead.phantom .bead_glass,
    .string_charm.phantom .charm_plate,
    .card.string_match::before,
    .string_halo,
    .string_ribbon,
    .card_slot.gift_slot,
    .string_coin_mote,
    .string_star_mote,
    .string_ghost_score,
    #boon_coin_pill.gained {
        animation: none;
    }
    .card.string_match::before {
        opacity: 0.4;
    }
}