#fanfare {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
#fanfare .flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 240, 190, 0.9), rgba(255, 220, 150, 0) 60%);
    animation: fan_flash 0.5s ease-out forwards;
}
@keyframes fan_flash {
    0% {
        opacity: 0;
    }
    12% {
        opacity: 0.85;
    }
    100% {
        opacity: 0;
    }
}
#fanfare .rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 900px;
    margin: -450px 0 0 -450px;
    opacity: 0;
    transform: scale(0.4);
    animation: rays_in 0.6s 0.12s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
#fanfare .rays::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, 0.14) 0deg 8deg, transparent 8deg 20deg);
    animation: rays_spin 18s 0.5s linear infinite;
}
@keyframes rays_in {
    to {
        opacity: 0.5;
        transform: scale(1);
    }
}
@keyframes rays_spin {
    to {
        transform: rotate(360deg);
    }
}
.panel {
    position: absolute;
    left: -5%;
    width: 110%;
    height: 56%;
    background: linear-gradient(180deg, #2a2150, #15102c);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
}
.panel.top {
    top: -4%;
    transform: translateY(-105%) rotate(-3deg);
    border-bottom: 3px solid var(--uti);
    box-shadow:
        0 6px 24px rgba(246, 200, 96, 0.25),
        0 0 50px rgba(0, 0, 0, 0.7);
    animation: slam_down 0.42s cubic-bezier(0.18, 1.1, 0.3, 1) forwards;
}
.panel.bot {
    bottom: -4%;
    transform: translateY(105%) rotate(-3deg);
    border-top: 3px solid var(--uti);
    box-shadow:
        0 -6px 24px rgba(246, 200, 96, 0.25),
        0 0 50px rgba(0, 0, 0, 0.7);
    animation: slam_up 0.42s 0.05s cubic-bezier(0.18, 1.1, 0.3, 1) forwards;
}
@keyframes slam_down {
    0% {
        transform: translateY(-105%) rotate(-3deg);
    }
    70% {
        transform: translateY(-42%) rotate(-3deg);
    }
    100% {
        transform: translateY(-46%) rotate(-3deg);
    }
}
@keyframes slam_up {
    0% {
        transform: translateY(105%) rotate(-3deg);
    }
    70% {
        transform: translateY(42%) rotate(-3deg);
    }
    100% {
        transform: translateY(46%) rotate(-3deg);
    }
}
#fan_text {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
#fan_text .big {
    display: inline-block;
    position: relative;
    font-family: var(--score_font);
    font-size: 46px;
    font-weight: 400;
    letter-spacing: 3px;
    background: linear-gradient(180deg, #fff6d2, #f0a35e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 12px rgba(246, 200, 96, 0.45));
    animation: bam 0.5s 0.18s cubic-bezier(0.2, 1.5, 0.3, 1) both;
}
@keyframes bam {
    0% {
        opacity: 0;
        transform: scale(2.4) rotate(-4deg);
    }
    65% {
        transform: scale(0.94) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}
.fan_star {
    position: absolute;
    font-size: 20px;
    color: var(--uti);
    filter: drop-shadow(0 0 6px rgba(246, 200, 96, 0.6));
    animation: star_pop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes star_pop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-120deg);
    }
    70% {
        opacity: 1;
        transform: scale(1.25) rotate(6deg);
    }
    100% {
        opacity: 0.85;
        transform: scale(1) rotate(0);
    }
}

#boon_screen h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    animation:
        pop_in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both,
        glimmer_heading_pulse 4.8s 0.6s ease-in-out infinite;
}
#boon_screen::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 122, 107, 0.13), transparent 29%),
        radial-gradient(circle at 82% 28%, rgba(79, 209, 197, 0.12), transparent 30%),
        radial-gradient(circle at 50% 82%, rgba(246, 200, 96, 0.1), transparent 34%);
    animation: glimmer_selection_veil 9s ease-in-out infinite alternate;
}
#boon_screen::after {
    opacity: 0.18;
    background-image: repeating-linear-gradient(
        118deg,
        transparent 0 22px,
        rgba(201, 184, 255, 0.1) 22px 23px,
        transparent 23px 46px
    );
    background-size: 92px 100%;
    animation: glimmer_selection_drift 18s linear infinite;
}
@keyframes glimmer_heading_pulse {
    0%,
    100% {
        text-shadow: 0 0 0 rgba(246, 200, 96, 0);
    }
    50% {
        letter-spacing: 1.5px;
        text-shadow: 0 0 14px rgba(246, 200, 96, 0.24);
    }
}
@keyframes glimmer_selection_veil {
    to {
        transform: translate3d(5%, -3%, 0) scale(1.1);
        filter: hue-rotate(7deg);
    }
}
@keyframes glimmer_selection_drift {
    to {
        background-position: 92px 0;
    }
}

#boon_speed_readout {
    position: absolute;
    right: 3.4%;
    bottom: 10.6%;
    font-size: 13px;
    font-weight: 800;
    color: var(--boon_speed_color, rgba(243, 233, 210, 0.75));
    pointer-events: none;
    transition:
        color 0.18s,
        text-shadow 0.18s,
        transform 0.18s;
}
#boon_speed_readout.hl {
    color: #eaf8ff;
    transform: scale(1.08);
    text-shadow: 0 0 10px rgba(191, 230, 255, 0.65);
    animation: speed_readout_pulse 1.4s ease-in-out infinite;
}
@keyframes speed_readout_pulse {
    50% {
        text-shadow: 0 0 16px rgba(191, 230, 255, 0.9);
    }
}
#boon_coin_pill {
    position: absolute;
    right: 3.4%;
    top: 4.2%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
    border: 1px solid rgba(246, 200, 96, 0.35);
    border-radius: 999px;
    background: rgba(15, 12, 32, 0.55);
    animation: pop_in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
#boon_coin_pill .boon_coin_mark {
    font-size: 13px;
    filter: drop-shadow(0 0 6px rgba(246, 200, 96, 0.45));
}
#boon_coin_pill strong {
    font-size: 14px;
    color: #ffe9b0;
    font-variant-numeric: tabular-nums;
}
#boon_coin_pill.spent {
    animation: boon_coin_spent 0.26s cubic-bezier(0.2, 1.4, 0.3, 1);
}
@keyframes boon_coin_spent {
    35% {
        transform: scale(1.1);
    }
}
#boon_coin_pill.spent strong {
    animation: boon_coin_spent_text 0.5s ease-out;
}
@keyframes boon_coin_spent_text {
    0%,
    70% {
        color: #ffb59f;
    }
}
.cards {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    max-width: min(400px, 94%);
    margin-top: 14px;
}
.cards::before {
    content: "";
    position: absolute;
    inset: -12px -18px;
    z-index: -1;
    pointer-events: none;
    border-radius: 26px;
    background: radial-gradient(ellipse at center, rgba(183, 156, 255, 0.1), transparent 68%);
    filter: blur(7px);
    animation: glimmer_card_field 4.6s ease-in-out infinite;
}
@keyframes glimmer_card_field {
    50% {
        opacity: 0.55;
        transform: scale(1.025);
    }
}
.cards.locked .card,
.cards.resolving .card {
    pointer-events: none;
}
.cards.locked .reroll_btn {
    pointer-events: none;
}
.cards.resolving .reroll_btn {
    pointer-events: none;
    animation: reroll_btn_fade_out 0.25s ease forwards;
}
@keyframes reroll_btn_fade_out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.card_slot {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 7px;
    perspective: 640px;
}
.card {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    font: inherit;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "head head" "blurb blurb" "stats stats" "gauge gauge";
    align-items: stretch;
    text-align: left;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--c, #888);
    border-radius: 13px;
    padding: 0;
    color: var(--parchment);
    overflow: hidden;
    transition:
        transform 0.12s cubic-bezier(0.3, 1.4, 0.4, 1),
        border-color 0.12s,
        box-shadow 0.12s;
    opacity: 0;
    animation: pop_in 0.32s cubic-bezier(0.2, 1.1, 0.3, 1) forwards;
    animation-delay: var(--card_stagger, 0s);
}
.card_slot:nth-child(1) {
    --card_stagger: 0.03s;
}
.card_slot:nth-child(2) {
    --card_stagger: 0.1s;
}
.card_slot:nth-child(3) {
    --card_stagger: 0.17s;
}
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background: linear-gradient(
        105deg,
        transparent 20%,
        color-mix(in srgb, var(--c) 13%, transparent) 48%,
        transparent 76%
    );
    background-size: 220% 100%;
    background-position: 145% 0;
    animation: glimmer_card_shimmer 6.8s ease-in-out infinite;
}
.card_slot:nth-child(2) .card::after {
    animation-delay: 1.1s;
}
.card_slot:nth-child(3) .card::after {
    animation-delay: 2.2s;
}
.card:not(.chosen) .icon {
    animation: glimmer_icon_breathe 3.8s ease-in-out infinite;
}
.card_slot:nth-child(2) .icon {
    animation-delay: 0.55s;
}
.card_slot:nth-child(3) .icon {
    animation-delay: 1.1s;
}
@keyframes glimmer_card_shimmer {
    0%,
    62%,
    100% {
        background-position: 145% 0;
        opacity: 0.1;
    }
    78% {
        background-position: -45% 0;
        opacity: 0.32;
    }
}
@keyframes glimmer_icon_breathe {
    50% {
        transform: translateY(-1px) scale(1.035);
        box-shadow: 0 0 13px color-mix(in srgb, var(--c) 23%, transparent);
    }
}
.card:hover,
.card:focus-visible {
    transform: translateX(4px) translateY(-1px) scale(1.012);
    border-left-color: var(--c);
    outline: none;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.42),
        0 0 19px color-mix(in srgb, var(--c) 45%, transparent);
}
.card:hover::after,
.card:focus-visible::after {
    animation-duration: 1.5s;
    opacity: 0.48;
}
.card:not(.chosen):hover .icon,
.card:not(.chosen):focus-visible .icon {
    animation: none;
    transform: translateY(-1px) scale(1.08) rotate(3deg);
    box-shadow: 0 0 17px color-mix(in srgb, var(--c) 42%, transparent);
}
.card:active {
    transform: scale(0.99);
}
.card.chosen {
    opacity: 1;
    z-index: 2;
    animation: chosen_pop 0.5s cubic-bezier(0.2, 1.5, 0.3, 1) forwards;
    box-shadow:
        0 0 0 2px var(--c),
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 34px color-mix(in srgb, var(--c) 65%, transparent);
}
@keyframes chosen_pop {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.035);
    }
    100% {
        transform: scale(1.02);
    }
}
.card.chosen .icon {
    animation: icon_spin 0.5s cubic-bezier(0.2, 1.3, 0.3, 1);
}
@keyframes icon_spin {
    0% {
        transform: scale(1) rotate(0);
    }
    50% {
        transform: scale(1.3) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}
.card.dimmed {
    animation: dim_out 0.32s ease forwards;
}
@keyframes dim_out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.22;
        transform: scale(0.96);
        filter: saturate(0.45);
    }
}

.reroll_btn {
    position: relative;
    flex: 0 0 34px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font: inherit;
    cursor: pointer;
    color: var(--parchment);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    padding: 0;
    opacity: 0;
    animation: pop_in 0.32s cubic-bezier(0.2, 1.1, 0.3, 1) forwards;
    animation-delay: var(--card_stagger, 0s);
    transition:
        transform 0.12s cubic-bezier(0.3, 1.4, 0.4, 1),
        border-color 0.12s,
        box-shadow 0.12s,
        background 0.12s;
}
.reroll_btn:hover:not(:disabled),
.reroll_btn:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    outline: none;
    border-color: rgba(246, 200, 96, 0.55);
    background: linear-gradient(180deg, rgba(246, 200, 96, 0.1), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(246, 200, 96, 0.22);
}
.reroll_btn:hover:not(:disabled) .reroll_icon {
    transform: rotate(80deg);
}
.reroll_btn:active:not(:disabled) {
    transform: scale(0.95);
}
.reroll_icon {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.18s cubic-bezier(0.3, 1.3, 0.4, 1);
}
.reroll_btn.spun .reroll_icon {
    animation: reroll_icon_spin 0.34s cubic-bezier(0.3, 0.9, 0.3, 1);
}
@keyframes reroll_icon_spin {
    to {
        transform: rotate(360deg);
    }
}
.reroll_cost {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #ffe9b0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.reroll_btn:disabled {
    cursor: default;
    opacity: 0.55;
}
.reroll_btn.unaffordable .reroll_cost {
    color: #ff9a8b;
}
.reroll_btn.exhausted {
    opacity: 0.35;
}
.reroll_btn.exhausted::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    transform: rotate(-28deg);
}

.card .card_head {
    grid-area: head;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 9px;
    background: color-mix(in srgb, var(--c) 9%, transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.card .icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    background: color-mix(in srgb, var(--c) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 48%, transparent);
}
.card .htext {
    flex: 1;
    min-width: 0;
}
.card .name {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.2px;
}
.card .ccat {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1px;
    opacity: 0.7;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.card .lvl {
    flex: 0 0 auto;
    align-self: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--ink);
    background: var(--uti);
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
}
.card .lvl.new {
    background: #9fe8b0;
}
.risktag {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ff9a6b;
    border: 1px solid rgba(255, 154, 107, 0.6);
    border-radius: 4px;
    padding: 0 4px;
}

.card[data-category="T"] {
    position: relative;
    overflow: visible;
    border-color: rgba(199, 125, 255, 0.45);
    background-image:
        radial-gradient(2px 2px at 18% 30%, rgba(255, 233, 247, 0.95), transparent 62%),
        radial-gradient(1.6px 1.6px at 62% 68%, rgba(199, 125, 255, 0.9), transparent 62%),
        radial-gradient(1.4px 1.4px at 84% 22%, rgba(255, 233, 247, 0.75), transparent 62%),
        radial-gradient(1.8px 1.8px at 38% 82%, rgba(199, 125, 255, 0.75), transparent 62%),
        radial-gradient(1.5px 1.5px at 8% 62%, rgba(255, 233, 247, 0.6), transparent 62%),
        linear-gradient(180deg, #150a2e, #07040f);
    background-size:
        130% 130%,
        130% 130%,
        130% 130%,
        130% 130%,
        130% 130%,
        100% 100%;
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(199, 125, 255, 0.24);
    animation:
        pop_in 0.32s cubic-bezier(0.2, 1.1, 0.3, 1) forwards,
        ultimate_motes 11s linear infinite;
}
@keyframes ultimate_motes {
    to {
        background-position:
            -46% 64%,
            54% -72%,
            -64% 44%,
            72% -54%,
            60% 70%,
            0 0;
    }
}
.card[data-category="T"] > * {
    position: relative;
    z-index: 1;
}
.card[data-category="T"] .ultimate_shine {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
.card[data-category="T"] .ultimate_shine::after {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: 0;
    width: 30%;
    filter: blur(3px);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(199, 125, 255, 0.26) 26%,
        rgba(255, 233, 247, 0.62) 50%,
        rgba(199, 125, 255, 0.26) 74%,
        transparent
    );
    transform: translateX(-160%) skewX(-18deg);
    animation: ultimate_shine 3.8s cubic-bezier(0.35, 0, 0.2, 1) infinite;
}
@keyframes ultimate_shine {
    0% {
        transform: translateX(-160%) skewX(-18deg);
    }
    58%,
    100% {
        transform: translateX(460%) skewX(-18deg);
    }
}
.card[data-category="T"] .ultimate_motes {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3.4px;
    height: 3.4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: rgba(255, 233, 247, 0.9);
    transform: translate(-50%, -50%) scale(0.82);
    box-shadow:
        118px -30px 0 -0.3px rgba(199, 125, 255, 0.9),
        -126px 26px 0 -0.3px rgba(255, 233, 247, 0.85),
        168px 20px 0 -0.7px rgba(199, 125, 255, 0.8),
        -176px -16px 0 -0.7px rgba(255, 233, 247, 0.72),
        62px -52px 0 -0.5px rgba(199, 125, 255, 0.82),
        -70px 56px 0 -0.5px rgba(255, 233, 247, 0.75),
        196px -6px 0 -1px rgba(199, 125, 255, 0.68),
        -204px 8px 0 -1px rgba(199, 125, 255, 0.64),
        24px 62px 0 -0.6px rgba(255, 233, 247, 0.78),
        -30px -66px 0 -0.6px rgba(199, 125, 255, 0.74);
}
.card[data-category="T"]:hover .ultimate_motes,
.card[data-category="T"]:focus-visible .ultimate_motes,
.card[data-category="T"].chosen .ultimate_motes {
    animation: ultimate_emit 1.8s ease-out infinite;
}
.card[data-category="T"]:hover .ultimate_motes.delayed,
.card[data-category="T"]:focus-visible .ultimate_motes.delayed,
.card[data-category="T"].chosen .ultimate_motes.delayed {
    animation-delay: 0.9s;
}
@keyframes ultimate_emit {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.82);
    }
    26% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.62);
    }
}
.card[data-category="T"] .card_head {
    background: linear-gradient(180deg, rgba(199, 125, 255, 0.16), rgba(75, 47, 214, 0.1));
    border-bottom-color: rgba(199, 125, 255, 0.3);
}
.card[data-category="T"] .icon {
    border-color: rgba(255, 233, 247, 0.62);
    background: radial-gradient(circle, rgba(199, 125, 255, 0.42), rgba(7, 4, 15, 0.92));
    box-shadow:
        0 0 16px rgba(199, 125, 255, 0.5),
        inset 0 0 12px rgba(75, 47, 214, 0.65);
}
.card[data-category="T"]:not(.chosen) .icon {
    animation: ultimate_icon_pulse 2.6s ease-in-out infinite;
}
.card[data-category="T"]:not(.chosen):hover .icon,
.card[data-category="T"]:not(.chosen):focus-visible .icon {
    animation: none;
}
@keyframes ultimate_icon_pulse {
    50% {
        transform: scale(1.07);
        box-shadow:
            0 0 26px rgba(199, 125, 255, 0.85),
            inset 0 0 16px rgba(75, 47, 214, 0.9);
    }
}
.card[data-category="T"] .ccat {
    opacity: 0.95;
    color: #e9c9ff;
}
.card[data-category="T"]:hover,
.card[data-category="T"]:focus-visible {
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.6),
        0 0 34px rgba(199, 125, 255, 0.5);
}
.card[data-category="T"].chosen {
    opacity: 1;
    z-index: 3;
    animation:
        chosen_pop 0.5s cubic-bezier(0.2, 1.5, 0.3, 1) forwards,
        ultimate_motes 11s linear infinite;
    box-shadow:
        0 0 0 2px var(--c),
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 44px color-mix(in srgb, var(--c) 72%, transparent);
}
.card[data-category="T"]::after {
    opacity: 0.34;
}
.pitem[data-category="T"] {
    background: linear-gradient(180deg, rgba(21, 10, 46, 0.8), rgba(7, 4, 15, 0.5));
    box-shadow: inset 0 0 18px rgba(75, 47, 214, 0.22);
}
.pitem[data-category="T"]:hover {
    background: linear-gradient(180deg, rgba(28, 14, 60, 0.9), rgba(10, 6, 20, 0.6));
}

.card[data-category="D"] {
    position: relative;
    overflow: visible;
    border-color: rgba(157, 255, 61, 0.45);
    background-image:
        radial-gradient(2px 2px at 22% 78%, rgba(234, 255, 206, 0.95), transparent 62%),
        radial-gradient(1.6px 1.6px at 64% 34%, rgba(157, 255, 61, 0.9), transparent 62%),
        radial-gradient(1.4px 1.4px at 82% 70%, rgba(234, 255, 206, 0.75), transparent 62%),
        radial-gradient(1.8px 1.8px at 36% 24%, rgba(157, 255, 61, 0.75), transparent 62%),
        radial-gradient(1.5px 1.5px at 10% 46%, rgba(234, 255, 206, 0.6), transparent 62%),
        linear-gradient(180deg, #0d2408, #040f04);
    background-size:
        130% 130%,
        130% 130%,
        130% 130%,
        130% 130%,
        130% 130%,
        100% 100%;
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(157, 255, 61, 0.22),
        inset 0 -10px 22px rgba(157, 255, 61, 0.08);
    animation:
        pop_in 0.32s cubic-bezier(0.2, 1.1, 0.3, 1) forwards,
        danger_bubbles 9s linear infinite;
}
@keyframes danger_bubbles {
    to {
        background-position:
            8% -66%,
            -14% -74%,
            20% -58%,
            -26% -70%,
            12% -62%,
            0 0;
    }
}
.card[data-category="D"] > * {
    position: relative;
    z-index: 1;
}
.card[data-category="D"] .danger_aura {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    border: 1.5px solid rgba(157, 255, 61, 0.55);
    box-shadow: 0 0 12px rgba(157, 255, 61, 0.28);
    filter: blur(0.4px);
    opacity: 0;
    animation: danger_aura 4.2s cubic-bezier(0.25, 0.6, 0.35, 1) infinite;
}
.card[data-category="D"] .danger_aura.delayed {
    animation-delay: 2.1s;
}
@keyframes danger_aura {
    0% {
        opacity: 0;
        transform: scale(1);
        border-width: 1.5px;
    }
    14% {
        opacity: 0.5;
    }
    62% {
        opacity: 0.26;
        border-width: 0.8px;
    }
    100% {
        opacity: 0;
        transform: scale(1.125);
        border-width: 0.3px;
    }
}
.card[data-category="D"] .danger_fizz {
    position: absolute;
    width: 3.2px;
    height: 3.2px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: rgba(234, 255, 206, 0.88);
}
.card[data-category="D"] .danger_fizz.drift_a {
    left: 19%;
    top: 78%;
    box-shadow:
        31px 13px 0 -0.4px rgba(157, 255, 61, 0.85),
        -13px 26px 0 -0.7px rgba(234, 255, 206, 0.78),
        68px -16px 0 -1px rgba(157, 255, 61, 0.68),
        44px 34px 0 -1.1px rgba(234, 255, 206, 0.6);
}
.card[data-category="D"] .danger_fizz.drift_b {
    left: 54%;
    top: 87%;
    box-shadow:
        -42px -11px 0 -0.5px rgba(234, 255, 206, 0.82),
        37px 15px 0 -0.8px rgba(157, 255, 61, 0.72),
        -79px 9px 0 -1px rgba(157, 255, 61, 0.62),
        22px -29px 0 -1.1px rgba(234, 255, 206, 0.58);
}
.card[data-category="D"] .danger_fizz.drift_c {
    left: 83%;
    top: 71%;
    box-shadow:
        -27px 29px 0 -0.4px rgba(157, 255, 61, 0.8),
        16px -21px 0 -0.9px rgba(234, 255, 206, 0.7),
        -61px -7px 0 -1px rgba(234, 255, 206, 0.6),
        -38px 41px 0 -1.1px rgba(157, 255, 61, 0.56);
}
.card[data-category="D"]:hover .danger_fizz.drift_a,
.card[data-category="D"]:focus-visible .danger_fizz.drift_a,
.card[data-category="D"].chosen .danger_fizz.drift_a {
    animation: danger_fizz_rise 2.1s ease-in-out infinite;
}
.card[data-category="D"]:hover .danger_fizz.drift_b,
.card[data-category="D"]:focus-visible .danger_fizz.drift_b,
.card[data-category="D"].chosen .danger_fizz.drift_b {
    animation: danger_fizz_rise 2.7s ease-in-out 0.65s infinite;
}
.card[data-category="D"]:hover .danger_fizz.drift_c,
.card[data-category="D"]:focus-visible .danger_fizz.drift_c,
.card[data-category="D"].chosen .danger_fizz.drift_c {
    animation: danger_fizz_rise 1.9s ease-in-out 1.25s infinite;
}
@keyframes danger_fizz_rise {
    0% {
        opacity: 0;
        transform: translate(0, 7px) scale(0.5);
    }
    20% {
        opacity: 0.72;
    }
    64% {
        opacity: 0.5;
        transform: translate(-3px, -56px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(2px, -96px) scale(1.18);
    }
}
.card[data-category="D"] .card_head {
    background: linear-gradient(180deg, rgba(157, 255, 61, 0.15), rgba(38, 96, 22, 0.1));
    border-bottom-color: rgba(157, 255, 61, 0.3);
}
.card[data-category="D"] .icon {
    border-color: rgba(234, 255, 206, 0.62);
    background: radial-gradient(circle, rgba(157, 255, 61, 0.42), rgba(4, 15, 4, 0.92));
    box-shadow:
        0 0 16px rgba(157, 255, 61, 0.5),
        inset 0 0 12px rgba(38, 96, 22, 0.7);
}
.card[data-category="D"]:not(.chosen) .icon {
    animation: danger_icon_pulse 2.2s ease-in-out infinite;
}
.card[data-category="D"]:not(.chosen):hover .icon,
.card[data-category="D"]:not(.chosen):focus-visible .icon {
    animation: none;
}
@keyframes danger_icon_pulse {
    50% {
        transform: scale(1.07);
        box-shadow:
            0 0 26px rgba(157, 255, 61, 0.85),
            inset 0 0 16px rgba(38, 96, 22, 0.95);
    }
}
.card[data-category="D"] .ccat {
    opacity: 0.95;
    color: #d9ffb5;
}
.card[data-category="D"]:hover,
.card[data-category="D"]:focus-visible {
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.6),
        0 0 34px rgba(157, 255, 61, 0.5);
}
.card[data-category="D"].chosen {
    opacity: 1;
    z-index: 3;
    animation:
        chosen_pop 0.5s cubic-bezier(0.2, 1.5, 0.3, 1) forwards,
        danger_bubbles 9s linear infinite;
    box-shadow:
        0 0 0 2px var(--c),
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 44px color-mix(in srgb, var(--c) 72%, transparent);
}
.card[data-category="D"]::after {
    opacity: 0.34;
}
.pitem[data-category="D"] {
    background: linear-gradient(180deg, rgba(20, 44, 10, 0.8), rgba(4, 15, 4, 0.5));
    box-shadow: inset 0 0 18px rgba(60, 140, 32, 0.22);
}
.pitem[data-category="D"]:hover {
    background: linear-gradient(180deg, rgba(26, 56, 14, 0.9), rgba(6, 20, 6, 0.6));
}

.card.flipping {
    pointer-events: none;
    overflow: hidden;
    transition: height 0.18s ease;
}
.card.flip_out {
    opacity: 1;
    animation: card_flip_out var(--flip_half, 120ms) ease-in forwards;
}
@keyframes card_flip_out {
    from {
        transform: rotateY(0);
    }
    to {
        transform: rotateY(-90deg);
    }
}
.card.flip_in {
    opacity: 1;
    animation: card_flip_in var(--flip_half, 120ms) ease-out forwards;
}
@keyframes card_flip_in {
    from {
        transform: rotateY(90deg);
    }
    to {
        transform: rotateY(0);
    }
}
.card.flip_reveal:not(.chosen):not(.dimmed) {
    opacity: 1;
    animation: card_flip_reveal var(--flip_reveal, 190ms) cubic-bezier(0.2, 1.3, 0.3, 1) forwards;
}
@keyframes card_flip_reveal {
    from {
        transform: rotateY(90deg);
    }
    70% {
        transform: rotateY(-5deg) scale(1.012);
    }
    to {
        transform: rotateY(0) scale(1);
    }
}
.card.flip_settled:not(.chosen):not(.dimmed) {
    opacity: 1;
    animation: none;
}
.card[data-category="T"].flip_settled:not(.chosen):not(.dimmed) {
    opacity: 1;
    animation: ultimate_motes 11s linear infinite;
}
.card[data-category="D"].flip_settled:not(.chosen):not(.dimmed) {
    opacity: 1;
    animation: danger_bubbles 9s linear infinite;
}
.card.back_showing {
    background: linear-gradient(180deg, #221a46, #120d28);
    border-color: rgba(201, 184, 255, 0.35);
    border-left-color: var(--c);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.card .card_back_face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1.6px 1.6px at 22% 28%, rgba(255, 233, 247, 0.8), transparent 62%),
        radial-gradient(1.4px 1.4px at 74% 62%, rgba(201, 184, 255, 0.75), transparent 62%),
        radial-gradient(1.3px 1.3px at 56% 18%, rgba(255, 233, 247, 0.6), transparent 62%),
        radial-gradient(1.5px 1.5px at 38% 78%, rgba(201, 184, 255, 0.6), transparent 62%),
        radial-gradient(1.2px 1.2px at 86% 24%, rgba(255, 233, 247, 0.5), transparent 62%);
}
.card_back_mark {
    font-size: 30px;
    color: var(--uti);
    filter: drop-shadow(0 0 10px rgba(246, 200, 96, 0.5));
    animation: card_back_twinkle 1.1s ease-in-out infinite;
}
@keyframes card_back_twinkle {
    50% {
        transform: scale(1.12) rotate(8deg);
        filter: drop-shadow(0 0 16px rgba(246, 200, 96, 0.75));
    }
}
.card .card_shine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}
.card_shine::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 34%;
    filter: blur(2px);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--c) 45%, rgba(255, 255, 255, 0.55)) 50%,
        transparent
    );
    transform: translateX(-140%) skewX(-16deg);
    animation: card_shine_sweep 0.5s cubic-bezier(0.3, 0.6, 0.3, 1) forwards;
}
@keyframes card_shine_sweep {
    to {
        transform: translateX(420%) skewX(-16deg);
    }
}

.card .blurb {
    grid-area: blurb;
    font-size: 11.5px;
    opacity: 0.72;
    line-height: 1.4;
    text-align: left;
    padding: 9px 12px 5px;
}

.card .stats {
    grid-area: stats;
    padding: 2px 12px 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.srow {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11.5px;
    padding: 3px 0;
}
.srow:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.srow .sl {
    opacity: 0.62;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}
.srow .lead {
    flex: 1 1 auto;
    min-width: 14px;
    align-self: stretch;
    border-bottom: 1.5px dotted rgba(255, 255, 255, 0.22);
    transform: translateY(-3px);
}
.srow .svwrap {
    flex: 0 0 auto;
    text-align: right;
    font-weight: 800;
    color: #dff0e6;
    display: flex;
    align-items: baseline;
    gap: 5px;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-width: 62%;
}
.srow .sv {
    background: color-mix(in srgb, var(--c) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    border-radius: 6px;
    padding: 1px 6px;
}
.srow .sarrow {
    opacity: 0.45;
    font-weight: 700;
}
.srow .sv.up {
    color: #0f1420;
    background: #9fe8b0;
    border-color: #9fe8b0;
}
.chance_meter {
    flex: 0 1 64px;
    min-width: 38px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    align-self: center;
}
.chance_meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--c);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c) 70%, transparent);
}
.effect_gauge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--eff);
    opacity: 0.88;
}
.effect_gauge .effect_track {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.effect_gauge .effect_track span {
    display: block;
    height: 100%;
    background: var(--eff);
    box-shadow: 0 0 7px color-mix(in srgb, var(--eff) 75%, transparent);
}

.card .gauge {
    grid-area: gauge;
    padding: 8px 12px 11px;
}
.ugauge {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ugauge .usegs {
    flex: 1;
    display: flex;
    gap: 3px;
}
.useg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.2s;
}
.useg.on {
    background: var(--c);
    box-shadow: 0 0 5px color-mix(in srgb, var(--c) 70%, transparent);
}
.ulabel {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    opacity: 0.55;
    white-space: nowrap;
}
.ulabel.max {
    color: #9fe8b0;
    opacity: 0.9;
}
.ugauge.inf {
    justify-content: center;
}
.uinf {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    opacity: 0.45;
    text-transform: uppercase;
}

.boon_scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}
.boon_toggle {
    margin-top: 14px;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--parchment);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 8px 18px;
    transition:
        background 0.12s,
        transform 0.1s;
    animation: pop_in 0.34s 0.26s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.boon_toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
.boon_toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.owned_view {
    width: 100%;
    max-width: 340px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    animation: pop_in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.owned_view h4 {
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 800;
    color: #ffe9b0;
    margin-bottom: 4px;
}
.owned_view .osub {
    font-size: 11px;
    opacity: 0.55;
    margin-bottom: 10px;
}
.plist {
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-right: 2px;
    text-align: left;
}
.plist .empty {
    font-size: 12.5px;
    opacity: 0.55;
    line-height: 1.5;
    margin-top: 8px;
    text-align: center;
}
.pitem {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--c, #888);
    border-radius: 10px;
    padding: 8px 9px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    transition:
        background 0.12s,
        border-color 0.12s;
}
.pitem:hover,
.pitem.open {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--c);
}
.pitem .phead {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
}
.pitem .phead .pico {
    font-size: 16px;
    flex: 0 0 auto;
}
.pitem .phead .pname {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}
.pitem .phead .plv {
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
    color: var(--ink);
    background: var(--uti);
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1.3;
}
.pitem .phead .plv.max {
    background: #9fe8b0;
}
.pitem .phead .plv.gone {
    background: rgba(255, 255, 255, 0.18);
    color: var(--parchment);
}
.pitem.spent {
    opacity: 0.62;
    filter: saturate(0.5);
}
.pitem.spent .pico {
    filter: grayscale(1);
}
.pitem.disabled_by_effect {
    opacity: 0.58;
    filter: saturate(0.35);
    background: repeating-linear-gradient(
        135deg,
        rgba(183, 156, 255, 0.055) 0 5px,
        rgba(255, 255, 255, 0.025) 5px 10px
    );
}
.pitem.disabled_by_effect .plv {
    background: #b79cff;
    color: var(--ink);
}
.pitem .spentrow {
    opacity: 0.7;
    font-style: italic;
}
.pitem .pdetail {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.24s ease,
        margin 0.24s ease;
    font-size: 11.5px;
    line-height: 1.5;
    opacity: 0.9;
}
.pitem.open .pdetail {
    max-height: 320px;
    margin-top: 7px;
}
.pitem .pdetail .drow {
    margin-top: 2px;
}
.pitem .pdetail .dlbl {
    opacity: 0.55;
    font-weight: 700;
}
.pitem .pdetail .maxtag {
    color: #9fe8b0;
    font-weight: 800;
}
.pitem .pblurb {
    opacity: 0.72;
    line-height: 1.4;
    text-align: left;
}
.pitem .pstats {
    margin-top: 7px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pitem .pstats .srow {
    font-size: 11px;
}
.pitem .pgauge {
    margin-top: 9px;
}
.pitem .pgauge .useg {
    height: 4px;
}
.back_btn {
    margin-top: 12px;
    align-self: center;
}

#pause_btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(15, 12, 32, 0.55);
    color: var(--parchment);
    font-size: 15px;
    cursor: pointer;
    transition:
        transform 0.1s,
        background 0.1s;
}
#pause_btn:hover {
    transform: scale(1.08);
    background: rgba(15, 12, 32, 0.8);
}
#debug_invincibility_button {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 5;
    height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(15, 12, 32, 0.64);
    color: rgba(243, 233, 210, 0.72);
    font:
        800 10px/1 "Avenir Next",
        "Segoe UI",
        system-ui,
        sans-serif;
    letter-spacing: 0.7px;
    cursor: pointer;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.22);
    transition:
        transform 0.1s,
        background 0.14s,
        border-color 0.14s,
        color 0.14s,
        box-shadow 0.14s;
}
#debug_invincibility_button:hover {
    transform: translateY(-1px);
    background: rgba(15, 12, 32, 0.84);
    color: var(--parchment);
}
#debug_invincibility_button.active {
    color: #bdf3c6;
    border-color: rgba(159, 232, 176, 0.68);
    background: rgba(32, 82, 61, 0.78);
    box-shadow:
        0 0 12px rgba(159, 232, 176, 0.22),
        0 2px 9px rgba(0, 0, 0, 0.24);
}
#debug_invincibility_button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
#pause_panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 210px;
    background: rgba(15, 12, 32, 0.92);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
    animation: slide_in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes slide_in {
    from {
        transform: translateX(102%);
    }
    to {
        transform: none;
    }
}
#pause_panel h3 {
    font-size: 15px;
    letter-spacing: 2px;
    font-weight: 800;
    color: #ffe9b0;
}
#pause_panel .psub {
    font-size: 11px;
    opacity: 0.6;
    margin: 2px 0 10px;
}
#pause_panel .plist {
    flex: 1;
    max-height: none;
}
#pause_panel .pitem .pstats .srow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-items: center;
}
#pause_panel .pitem .pstats .srow .sl {
    white-space: normal;
    line-height: 1.25;
}
#pause_panel .pitem .pstats .srow .lead {
    display: none;
}
#pause_panel .pitem .pstats .srow .svwrap {
    width: 100%;
    max-width: none;
    justify-content: space-between;
    gap: 6px;
}
#pause_panel .pitem .pstats .srow .sv {
    max-width: 100%;
    white-space: normal;
    text-align: right;
}
#pause_panel .pitem .pstats .chance_meter {
    flex: 1 1 auto;
    min-width: 52px;
}
#resume_btn {
    margin-top: 10px;
    padding: 10px 0;
    font-size: 14px;
    animation: none;
}
#all_boons_btn {
    margin-top: 8px;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--parchment);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s;
}
#all_boons_btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
#pipedex_btn {
    margin-top: 12px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--parchment);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
    transition:
        background 0.12s,
        transform 0.1s;
    animation: pop_in 0.35s 0.24s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
#pipedex_btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
#pause_pipedex_btn {
    margin-top: 8px;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--parchment);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s;
}
#pause_pipedex_btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
#pause_coin_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0 2px;
    padding: 7px 10px;
    border: 1px solid rgba(246, 200, 96, 0.28);
    border-radius: 10px;
    background: rgba(246, 200, 96, 0.06);
    font-size: 11px;
    font-weight: 800;
}
#pause_coin_row strong {
    color: #ffe9b0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.cd_row {
    margin: 6px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cd_label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.55;
}
.cd_seg {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 3px;
}
.cd_seg button {
    flex: 1;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    color: var(--parchment);
    opacity: 0.7;
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 6px 0;
    cursor: pointer;
    transition:
        background 0.14s,
        opacity 0.14s,
        color 0.14s;
}
.cd_seg button:hover {
    opacity: 1;
}
.cd_seg button.on {
    background: var(--uti);
    color: var(--ink);
    opacity: 1;
}
#pipedex {
    z-index: 6;
}
#pipedex h3 {
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 800;
    color: #ffe9b0;
}
#pipe_list {
    width: 100%;
    max-width: 360px;
    max-height: 66vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
    padding-right: 2px;
}
#pipedex_close {
    margin-top: 14px;
}
.pitem .pico.swatch {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    flex: 0 0 26px;
}
.pitem .pdetail .prole {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.pitem .pdetail .ptip {
    color: #9fe8b0;
    font-weight: 600;
}

#compendium {
    z-index: 6;
}
#compendium h3 {
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 800;
    color: #ffe9b0;
}
#compendium .csub {
    font-size: 11px;
    opacity: 0.55;
    margin: 3px 0 12px;
}
#comp_list {
    width: 100%;
    max-width: 360px;
    max-height: 66vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
    padding-right: 2px;
}
.pitem.un {
    opacity: 0.66;
}
.pitem.sealed {
    opacity: 0.6;
    filter: saturate(0.45);
    background: repeating-linear-gradient(135deg, rgba(201, 184, 255, 0.05) 0 6px, rgba(255, 255, 255, 0.02) 6px 12px);
}
.pitem.sealed .pico {
    filter: grayscale(0.75);
}
.pitem .phead .plv.sealed {
    background: rgba(201, 184, 255, 0.24);
    color: #ded5ff;
    box-shadow: inset 0 0 0 1px rgba(201, 184, 255, 0.5);
}
.pitem .plv.off {
    background: rgba(255, 255, 255, 0.16);
    color: var(--parchment);
}
.pitem .pcat {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 3px;
}
#comp_close {
    margin-top: 14px;
}

#pause_ultimate_badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 2px;
    border-radius: 9px;
    background: radial-gradient(circle at 35% 30%, #a06be0, #5d3a9e);
    border: 1px solid rgba(222, 213, 255, 0.7);
    font-size: 9px;
    line-height: 15px;
    color: #ffeaff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 9px rgba(199, 125, 255, 0.7);
}
#pause_ultimate_badge.stored {
    animation:
        umbral_badge_land 0.4s cubic-bezier(0.3, 1.6, 0.4, 1),
        umbral_pulse 1.8s 0.4s ease-in-out infinite;
}
@keyframes umbral_badge_land {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes umbral_pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}
#boon_coin_pill.umbral_dodge {
    opacity: 0;
    transform: translate(-6px, 10px) scale(0.92);
    pointer-events: none;
}
#pause_btn.umbral_revealing {
    z-index: 7;
    animation: umbral_btn_in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes umbral_btn_in {
    from {
        opacity: 0;
        transform: scale(0.55);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
#pause_btn.umbral_impact {
    animation: umbral_btn_pop 0.35s cubic-bezier(0.3, 1.5, 0.4, 1);
}
@keyframes umbral_btn_pop {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.28);
    }
    100% {
        transform: scale(1);
    }
}
.umbral_impact_ring {
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(205, 178, 255, 0.9);
    border-radius: 13px;
    pointer-events: none;
    animation: umbral_ring_out 0.45s ease-out forwards;
}
@keyframes umbral_ring_out {
    from {
        transform: scale(1);
        opacity: 0.9;
    }
    to {
        transform: scale(1.9);
        opacity: 0;
    }
}
.umbral_trail_spark {
    position: fixed;
    z-index: 59;
    margin: -6px 0 0 -6px;
    width: 12px;
    height: 12px;
    font-size: 11px;
    line-height: 12px;
    text-align: center;
    color: #cdb2ff;
    text-shadow: 0 0 8px rgba(199, 125, 255, 0.9);
    pointer-events: none;
    animation: umbral_spark_fade 0.5s ease-out forwards;
}
@keyframes umbral_spark_fade {
    from {
        opacity: 0.95;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.3) translateY(8px);
    }
}
#pause_ultimate_row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 8px 9px;
    border-radius: 12px;
    border: 1px solid rgba(199, 125, 255, 0.5);
    background: linear-gradient(160deg, rgba(74, 44, 120, 0.5), rgba(26, 17, 48, 0.8));
    box-shadow: inset 0 0 14px rgba(199, 125, 255, 0.14);
}
#pause_ultimate_row .pause_ultimate_icon {
    font-size: 17px;
    color: #e3ccff;
    filter: drop-shadow(0 0 6px rgba(199, 125, 255, 0.8));
    animation: umbral_pulse 2.4s ease-in-out infinite;
}
#pause_ultimate_row .pause_ultimate_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
#pause_ultimate_row .pause_ultimate_name {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #e6d6ff;
}
#pause_ultimate_row .pause_ultimate_target {
    font-size: 9.5px;
    line-height: 1.3;
    color: rgba(230, 214, 255, 0.75);
}
#pause_ultimate_use_btn {
    flex: 0 0 auto;
    height: 26px;
    padding: 0 11px;
    border-radius: 9px;
    border: 1px solid rgba(222, 213, 255, 0.55);
    background: linear-gradient(180deg, #8f5fd4, #5d3a9e);
    color: #fff;
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition:
        transform 0.1s,
        filter 0.12s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
#pause_ultimate_use_btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.12);
}
#pause_ultimate_use_btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.umbral_choice_panel {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 7px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(199, 125, 255, 0.65);
    background: rgba(16, 10, 32, 0.96);
    box-shadow:
        0 0 22px rgba(199, 125, 255, 0.25),
        inset 0 0 18px rgba(199, 125, 255, 0.08);
    animation: umbral_panel_in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes umbral_panel_in {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.umbral_choice_head {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #e3ccff;
    text-shadow: 0 0 8px rgba(199, 125, 255, 0.7);
    margin-bottom: 3px;
}
.umbral_choice_btn {
    height: 34px;
    border-radius: 11px;
    border: 1px solid rgba(222, 213, 255, 0.55);
    background: linear-gradient(180deg, #8f5fd4, #5d3a9e);
    color: #fff;
    font-weight: 800;
    font-size: 11.5px;
    cursor: pointer;
    transition:
        transform 0.1s,
        filter 0.12s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.umbral_choice_btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.12);
}
.umbral_choice_btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.umbral_choice_btn.store {
    background: rgba(30, 22, 56, 0.9);
    border-color: rgba(199, 125, 255, 0.45);
    color: #e3ccff;
}
.umbral_choice_note {
    text-align: center;
    font-size: 9.5px;
    color: rgba(230, 214, 255, 0.55);
}
.umbral_choice_hint {
    text-align: center;
    font-size: 9.5px;
    color: rgba(230, 214, 255, 0.65);
}
.umbral_flight_star {
    position: fixed;
    z-index: 60;
    margin: -11px 0 0 -11px;
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 22px;
    text-align: center;
    color: #e3ccff;
    text-shadow:
        0 0 12px rgba(199, 125, 255, 0.95),
        0 0 26px rgba(199, 125, 255, 0.6);
    pointer-events: none;
    will-change: transform;
}