#menu_screen .version_tag {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--parchment);
    opacity: 0.35;
}
.title_mark {
    font-size: 24px;
    color: var(--uti);
    filter: drop-shadow(0 0 10px rgba(246, 200, 96, 0.55));
    margin-bottom: 4px;
    animation: bounce_in 0.45s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.menu_stack {
    width: 100%;
    max-width: 310px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.menu_action {
    width: 100%;
    min-height: 62px;
    padding: 11px 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
    color: var(--parchment);
    font: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
    transition:
        transform 0.12s cubic-bezier(0.3, 1.4, 0.4, 1),
        background 0.12s,
        border-color 0.12s;
    opacity: 0;
    animation: pop_in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.menu_action:nth-child(1) {
    animation-delay: 0.12s;
}
.menu_action:nth-child(2) {
    animation-delay: 0.18s;
}
.menu_action:nth-child(3) {
    animation-delay: 0.24s;
}
.menu_action:nth-child(4) {
    animation-delay: 0.3s;
}
.menu_action:nth-child(5) {
    animation-delay: 0.36s;
}
.menu_action:nth-child(6) {
    animation-delay: 0.42s;
}
.menu_action.debug {
    min-height: 52px;
    border-style: dashed;
    border-color: rgba(255, 122, 107, 0.42);
    background: rgba(255, 122, 107, 0.05);
}
.menu_action.debug .menu_icon {
    color: #ff9a8b;
    font-size: 18px;
}
.menu_action.debug .menu_label {
    font-size: 13px;
    letter-spacing: 0.2px;
    opacity: 0.85;
}
.menu_action.debug:hover,
.menu_action.debug:focus-visible {
    border-color: rgba(255, 122, 107, 0.7);
    background: rgba(255, 122, 107, 0.1);
}
.menu_action.debug.armed {
    border-style: solid;
    border-color: rgba(246, 200, 96, 0.72);
    background: rgba(246, 200, 96, 0.1);
}
.menu_action.debug.armed::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: menu_armed_pulse 0.95s ease-in-out infinite;
}
@keyframes menu_armed_pulse {
    50% {
        box-shadow: inset 0 0 20px rgba(246, 200, 96, 0.45);
    }
}
.menu_action.debug.armed .menu_icon,
.menu_action.debug.armed .menu_label {
    color: #ffe9b0;
    opacity: 1;
}
.menu_action:hover,
.menu_action:focus-visible {
    transform: translateY(-2px) scale(1.015);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(246, 200, 96, 0.55);
    outline: none;
}
.menu_action:active {
    transform: translateY(1px) scale(0.99);
}
.menu_action:disabled {
    cursor: default;
    opacity: 0.42;
    filter: saturate(0.4);
    transform: none;
    animation: none;
}
.menu_icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(246, 200, 96, 0.12);
    border: 1px solid rgba(246, 200, 96, 0.25);
    font-size: 20px;
}
.menu_copy {
    min-width: 0;
    flex: 1;
}
.menu_label {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.4px;
}
.menu_desc {
    font-size: 11px;
    line-height: 1.35;
    opacity: 0.58;
    margin-top: 2px;
}
.screen_title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffe9b0;
}
.screen_sub {
    font-size: 12px;
    opacity: 0.6;
    line-height: 1.45;
    margin: 5px 0 14px;
    max-width: 330px;
}
.secondary_btn {
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--parchment);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;
    padding: 9px 20px;
    cursor: pointer;
    transition:
        background 0.12s,
        transform 0.1s;
}
.secondary_btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
.secondary_btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.custom_scroll {
    width: 100%;
    max-width: 370px;
    max-height: 67vh;
    overflow-y: auto;
    text-align: left;
    padding: 1px 3px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.custom_section {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    padding: 11px;
}
.custom_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.custom_head h3 {
    font-size: 12px;
    letter-spacing: 1.6px;
    color: #ffe9b0;
}
.custom_tools {
    display: flex;
    gap: 5px;
}
.mini_btn {
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--parchment);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 5px 8px;
    cursor: pointer;
}
.mini_btn:hover {
    background: rgba(255, 255, 255, 0.13);
}
.selection_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.selection_toggle {
    min-height: 42px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(243, 233, 210, 0.55);
    font: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition:
        background 0.12s,
        border-color 0.12s,
        color 0.12s,
        transform 0.1s;
}
.selection_toggle:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.07);
}
.selection_toggle.on {
    color: var(--parchment);
    background: color-mix(in srgb, var(--c, #f6c860) 13%, transparent);
    border-color: color-mix(in srgb, var(--c, #f6c860) 48%, transparent);
}
.selection_toggle .sel_icon {
    font-size: 16px;
    flex: 0 0 20px;
    text-align: center;
}
.selection_toggle .sel_name {
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.15;
}
.selection_toggle .sel_state {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.7;
}
.selection_toggle.on .sel_state {
    color: #9fe8b0;
    opacity: 1;
}
.selection_toggle:disabled {
    cursor: not-allowed;
    transform: none;
    opacity: 0.48;
    filter: saturate(0.45);
}
.selection_toggle.unavailable {
    border-style: dashed;
    background: rgba(183, 156, 255, 0.045);
}
.selection_toggle.unavailable .sel_state {
    color: #c9b8ff;
    opacity: 1;
}
.selection_toggle.unwished {
    background: linear-gradient(180deg, rgba(183, 156, 255, 0.1), transparent);
    border-color: rgba(183, 156, 255, 0.34);
}
.selection_toggle.unwished:disabled {
    opacity: 0.66;
    filter: none;
}
.selection_toggle.unwished .sel_icon {
    filter: grayscale(1) brightness(1.35);
    opacity: 0.45;
}
.selection_toggle.unwished .sel_name {
    opacity: 0.72;
}
.selection_toggle.unwished .sel_state {
    color: #d8c9ff;
    filter: drop-shadow(0 0 6px rgba(183, 156, 255, 0.65));
    animation: unwished_pulse 2.6s ease-in-out infinite;
}
@keyframes unwished_pulse {
    50% {
        opacity: 0.5;
        transform: scale(0.86);
    }
}
.speed_row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.speed_row input {
    flex: 1;
    accent-color: var(--uti);
}
.speed_value {
    min-width: 48px;
    text-align: right;
    font-size: 14px;
    font-weight: 800;
    color: #ffe9b0;
}
.custom_reference_row {
    width: 100%;
    max-width: 370px;
    display: flex;
    gap: 7px;
    justify-content: center;
    margin: -3px 0 10px;
}
.custom_reference_row .secondary_btn {
    flex: 1;
    padding: 8px 10px;
    font-size: 11px;
    letter-spacing: 0.3px;
}
.custom_footer {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}
.custom_footer .btn {
    padding: 11px 25px;
    font-size: 15px;
    animation: none;
}
.custom_footer .secondary_btn {
    padding: 10px 18px;
}
#high_score_screen {
    --record_accent: #f6c860;
    --record_accent_soft: rgba(246, 200, 96, 0.075);
    --record_accent_border: rgba(246, 200, 96, 0.45);
    --sort_accent: var(--record_accent);
}
#high_score_screen.pipes_sort {
    --record_accent: #4fd1c5;
    --record_accent_soft: rgba(79, 209, 197, 0.085);
    --record_accent_border: rgba(79, 209, 197, 0.5);
}
#high_score_screen .screen_title {
    color: color-mix(in srgb, var(--record_accent) 72%, #fff);
}
.sort_tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 12px;
}
.sort_tabs button {
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    color: var(--parchment);
    opacity: 0.62;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 7px 13px;
    cursor: pointer;
    transition:
        background 0.14s,
        color 0.14s,
        opacity 0.14s;
}
.sort_tabs button.on {
    background: var(--sort_accent, var(--uti));
    color: var(--ink);
    opacity: 1;
}
.high_score_list {
    width: 100%;
    max-width: 360px;
    min-height: 260px;
    max-height: 58vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.score_row {
    width: 100%;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 64px 62px 14px;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--parchment);
    font: inherit;
    text-align: left;
    cursor: pointer;
    animation: pop_in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1) both;
    transition:
        transform 0.12s cubic-bezier(0.3, 1.4, 0.4, 1),
        background 0.12s,
        border-color 0.12s,
        box-shadow 0.12s;
}
.score_row:hover,
.score_row:focus-visible {
    transform: translateX(3px);
    background: var(--record_accent_soft);
    border-color: var(--record_accent_border);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25);
    outline: none;
}
.score_row:active {
    transform: translateX(1px) scale(0.995);
}
.score_row.top {
    border-color: var(--record_accent_border);
    background: var(--record_accent_soft);
}
.score_rank {
    font-size: 12px;
    font-weight: 800;
    color: var(--record_accent);
    text-align: center;
}
.score_name {
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.score_metric {
    text-align: right;
}
.score_metric strong {
    display: block;
    font-size: 13px;
    color: #ffe9b0;
}
.score_metric.primary strong {
    color: var(--record_accent);
}
.score_metric span {
    display: block;
    font-size: 8px;
    letter-spacing: 0.8px;
    opacity: 0.48;
    text-transform: uppercase;
}
.score_chevron {
    font-size: 18px;
    color: var(--record_accent);
    opacity: 0.48;
    text-align: right;
    transition:
        transform 0.12s,
        opacity 0.12s;
}
.score_row:hover .score_chevron,
.score_row:focus-visible .score_chevron {
    opacity: 1;
    transform: translateX(2px);
}
.empty_scores {
    margin: auto;
    text-align: center;
    opacity: 0.55;
    font-size: 13px;
    line-height: 1.6;
    padding: 40px 20px;
}
#high_score_back,
#game_modes_back {
    margin-top: 14px;
}
.record_summary {
    width: 100%;
    max-width: 340px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 4px 0 10px;
}
.record_metric {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
}
.record_metric strong {
    display: block;
    font-size: 22px;
    color: #ffe9b0;
}
.record_metric span {
    display: block;
    font-size: 9px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    opacity: 0.52;
    margin-top: 2px;
}
.record_cause {
    width: 100%;
    max-width: 340px;
    border: 1px solid rgba(255, 122, 107, 0.28);
    border-radius: 12px;
    background: rgba(255, 122, 107, 0.07);
    padding: 10px 12px;
    margin-bottom: 11px;
    text-align: left;
}
.record_cause span {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ff9a8b;
    margin-bottom: 3px;
}
.record_cause strong {
    font-size: 13px;
}
.record_glimmer_heading {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: #ffe9b0;
    margin-bottom: 7px;
}
.record_glimmer_list {
    width: 100%;
    max-width: 340px;
    max-height: 38vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    padding-right: 2px;
}
.record_glimmer {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-left: 4px solid var(--c);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    padding: 8px 9px;
}
.record_glimmer.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.02) 5px 10px);
}
.record_glimmer .rg_icon {
    font-size: 17px;
}
.record_glimmer .rg_name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
}
.record_glimmer .rg_level {
    font-size: 9px;
    font-weight: 800;
    color: var(--ink);
    background: var(--c);
    border-radius: 999px;
    padding: 3px 7px;
    white-space: nowrap;
}
.record_glimmer.disabled_by_effect .rg_level {
    background: #b79cff;
}
.record_empty {
    font-size: 12px;
    opacity: 0.55;
    line-height: 1.5;
    padding: 18px;
    text-align: center;
}
#high_score_detail_back {
    margin-top: 13px;
}
.name_entry {
    width: 100%;
    max-width: 300px;
    margin: 4px 0 14px;
    padding: 11px;
    border: 1px solid rgba(246, 200, 96, 0.35);
    border-radius: 12px;
    background: rgba(246, 200, 96, 0.07);
    animation: pop_in 0.35s 0.16s both;
}
.name_entry label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffe9b0;
    margin-bottom: 7px;
}
.name_entry input {
    width: 100%;
    font: inherit;
    font-size: calc(16px / var(--ui_zoom, 1));
    font-weight: 800;
    text-align: center;
    color: var(--parchment);
    background: rgba(15, 12, 32, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9px;
    padding: 10px 12px;
    outline: none;
}
.name_entry input:focus {
    border-color: var(--uti);
    box-shadow: 0 0 0 2px rgba(246, 200, 96, 0.16);
}
.mode_stamp {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    opacity: 0.55;
    margin-bottom: 6px;
}

#death_screen .score {
    font-family: var(--score_font);
    font-size: 58px;
    font-weight: 400;
    color: #ffe9b0;
    line-height: 1;
    animation: bounce_in 0.5s cubic-bezier(0.2, 1.3, 0.3, 1) both;
}
#new_best {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #f6c860, #fff3c8, #f6c860);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 8px rgba(246, 200, 96, 0.5));
    animation:
        best_in 0.5s cubic-bezier(0.2, 1.4, 0.3, 1) both,
        best_shine 2.4s linear 0.5s infinite;
}
@keyframes best_in {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(8px);
    }
    70% {
        transform: scale(1.12);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes best_shine {
    to {
        background-position: 200% center;
    }
}
#death_screen .stats {
    margin: 10px 0 4px;
    font-size: 15px;
    opacity: 0.85;
    letter-spacing: 0.5px;
    animation: pop_in 0.35s 0.1s both;
}
.boon_list {
    margin: 14px 0 20px;
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-width: 340px;
}
.chip {
    font-size: 12.5px;
    font-weight: 700;
    border: 1px solid var(--c);
    color: var(--c);
    border-radius: 999px;
    padding: 4px 11px;
    opacity: 0;
    animation: pop_in 0.3s cubic-bezier(0.2, 1.2, 0.3, 1) forwards;
}
.chip.disabled_by_effect {
    filter: saturate(0.25);
    border-style: dashed;
    color: #c9b8ff;
    opacity: 0.58 !important;
}
.chip.sealed {
    filter: saturate(0.35);
    border-style: dashed;
    color: #ded5ff;
    opacity: 0.6 !important;
}
#shop_screen {
    padding: 0;
}
#shop_screen .shop_pager {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
#shop_screen .shop_pager::-webkit-scrollbar {
    display: none;
}
.shop_page {
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 120px 34px 130px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--shop_accent) 16%, transparent),
        color-mix(in srgb, var(--shop_accent) 5%, transparent) 55%,
        rgba(0, 0, 0, 0.14)
    );
}
.shop_page.closet {
    --shop_accent: #ff9a6b;
}
.shop_page.nest {
    --shop_accent: #b79cff;
}
.shop_page.roost {
    --shop_accent: #4fd1c5;
}
.shop_page_icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    background: color-mix(in srgb, var(--shop_accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--shop_accent) 45%, transparent);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--shop_accent) 40%, transparent));
}
.shop_page_name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 1px;
    color: color-mix(in srgb, var(--shop_accent) 55%, #fff);
}
.shop_page_sub {
    font-size: 12px;
    opacity: 0.6;
    line-height: 1.45;
    max-width: 260px;
}
.shop_soon {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--shop_accent) 70%, #fff);
    border: 1px dashed color-mix(in srgb, var(--shop_accent) 45%, transparent);
    border-radius: 999px;
    padding: 6px 14px;
    opacity: 0.75;
}
#shop_screen .shop_header {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    pointer-events: none;
    animation: pop_in 0.35s 0.08s both;
}
.shop_balance {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border: 1px solid rgba(246, 200, 96, 0.35);
    border-radius: 999px;
    background: rgba(15, 12, 32, 0.55);
}
.shop_balance_mark {
    color: var(--uti);
    font-size: 15px;
    filter: drop-shadow(0 0 6px rgba(246, 200, 96, 0.55));
}
.shop_balance strong {
    font-size: 16px;
    color: #ffe9b0;
    font-variant-numeric: tabular-nums;
}
.shop_balance_label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    opacity: 0.6;
    text-transform: uppercase;
}
#shop_screen .shop_arrow {
    position: absolute;
    top: 50%;
    margin-top: -21px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(15, 12, 32, 0.55);
    color: var(--parchment);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.12s,
        opacity 0.18s,
        border-color 0.18s,
        transform 0.24s cubic-bezier(0.2, 1.7, 0.35, 1);
    animation: pop_in 0.35s 0.12s backwards;
}
#shop_screen .shop_arrow.left {
    left: 10px;
}
#shop_screen .shop_arrow.right {
    right: 10px;
}
.shop_arrow::before {
    content: "";
    width: 11px;
    height: 11px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 1px;
}
.shop_arrow.left::before {
    transform: translateX(3px) rotate(-135deg);
}
.shop_arrow.right::before {
    transform: translateX(-3px) rotate(45deg);
}
.shop_arrow::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--uti);
    opacity: 0;
    pointer-events: none;
}
.shop_arrow:hover,
.shop_arrow:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    outline: none;
}
.shop_arrow:active {
    transform: scale(0.84);
}
.shop_arrow.pressed {
    background: rgba(246, 200, 96, 0.16);
    border-color: rgba(246, 200, 96, 0.5);
}
.shop_arrow.pressed::after {
    animation: shop_arrow_ring 0.45s ease-out;
}
@keyframes shop_arrow_ring {
    from {
        opacity: 0.75;
        transform: scale(0.82);
    }
    to {
        opacity: 0;
        transform: scale(1.45);
    }
}
.shop_arrow.off {
    opacity: 0.26;
    pointer-events: none;
    color: rgba(243, 233, 210, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
}
#shop_screen .shop_footer {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    animation: pop_in 0.35s 0.16s both;
}
.shop_dots {
    display: flex;
    gap: 7px;
}
.shop_dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition:
        width 0.18s cubic-bezier(0.3, 1.2, 0.4, 1),
        background 0.18s,
        box-shadow 0.18s;
}
.shop_dots button.on {
    width: 22px;
    background: var(--uti);
    box-shadow: 0 0 8px rgba(246, 200, 96, 0.5);
}

#twinkle_tally {
    width: 100%;
    max-width: 300px;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    animation: pop_in 0.35s 0.14s both;
}
.tally_row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto 16px auto;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 12.5px;
    opacity: 0.5;
    transition:
        opacity 0.2s,
        border-color 0.2s,
        background 0.2s;
}
.tally_row.counting {
    opacity: 1;
    border-color: rgba(246, 200, 96, 0.45);
    background: rgba(246, 200, 96, 0.06);
}
.tally_row.done {
    opacity: 1;
}
.tally_row .tally_icon {
    font-size: 13px;
    text-align: center;
}
.tally_row .tally_name {
    text-align: left;
    font-weight: 800;
    letter-spacing: 0.4px;
    font-size: 11px;
    opacity: 0.75;
}
.tally_row .tally_source {
    font-weight: 800;
    color: var(--parchment);
    opacity: 0.85;
    text-align: right;
    font-variant-numeric: tabular-nums;
    transition: opacity 0.25s;
}
.tally_row.done .tally_source {
    opacity: 0.35;
}
.tally_row .tally_arrow {
    opacity: 0.4;
    font-size: 11px;
    text-align: center;
}
.tally_row .tally_earn {
    font-weight: 800;
    color: #ffe9b0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tally_row .tally_mark {
    color: var(--uti);
    margin-left: 3px;
}
.tally_row.trove {
    border-color: rgba(246, 200, 96, 0.28);
    background: rgba(246, 200, 96, 0.05);
}
.tally_row.trove .tally_source,
.tally_row.trove.done .tally_source {
    color: #ffe9b0;
    opacity: 0.9;
}
.tally_row.done .tally_earn {
    display: inline-block;
    animation: tally_pop 0.3s cubic-bezier(0.2, 1.4, 0.3, 1);
}
@keyframes tally_pop {
    40% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}
.tally_total {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 9px 12px;
    border: 1px solid rgba(246, 200, 96, 0.3);
    border-radius: 12px;
    background: rgba(246, 200, 96, 0.06);
}
.tally_total_name {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: 0.65;
}
.tally_total_value {
    font-size: 21px;
    color: #ffe9b0;
    font-variant-numeric: tabular-nums;
}
.tally_total_mark {
    color: var(--uti);
    font-size: 15px;
    filter: drop-shadow(0 0 6px rgba(246, 200, 96, 0.55));
}
.tally_total.settled {
    animation: tally_settle 0.45s cubic-bezier(0.2, 1.3, 0.3, 1);
}
.tally_total.settled .tally_total_value {
    color: #fff3c8;
    text-shadow: 0 0 14px rgba(246, 200, 96, 0.55);
}
.tally_total.settled .tally_total_mark {
    animation: rest_pulse 2.4s ease-in-out infinite;
}
@keyframes tally_settle {
    0% {
        transform: scale(0.96);
    }
    45% {
        transform: scale(1.07);
    }
    100% {
        transform: scale(1);
    }
}
.tally_spark {
    position: absolute;
    font-size: 14px;
    color: var(--uti);
    pointer-events: none;
    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;
}
.tally_spark_core {
    display: inline-block;
    animation: tally_twinkle 2.2s ease-in-out infinite;
}
@keyframes tally_twinkle {
    0%,
    100% {
        opacity: 0.85;
        transform: translateY(0) scale(1) rotate(0);
    }
    50% {
        opacity: 0.3;
        transform: translateY(-3px) scale(0.75) rotate(14deg);
    }
}
#twinkle_rest {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 11.5px;
    opacity: 0.55;
    animation: pop_in 0.35s 0.14s both;
}
#twinkle_rest .rest_mark {
    color: var(--uti);
    animation: rest_pulse 2.6s ease-in-out infinite;
}
@keyframes rest_pulse {
    50% {
        opacity: 0.45;
        transform: scale(0.9);
    }
}
.btn.tally_reveal {
    animation: tally_retry_in 0.4s cubic-bezier(0.2, 1.5, 0.3, 1) both;
}
@keyframes tally_retry_in {
    0% {
        opacity: 0;
        transform: scale(0.4) translateY(10px);
    }
    70% {
        transform: scale(1.1) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.shop_page.closet {
    justify-content: flex-start;
    gap: 11px;
    padding: 98px 22px 114px;
}
.closet_stage {
    position: relative;
    width: 100%;
    max-width: 336px;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--shop_accent) 42%, transparent);
    border-radius: 16px;
    overflow: hidden;
    background: #0d0b1a;
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.32);
    animation: pop_in 0.32s 0.05s both;
}
.closet_stage canvas {
    display: block;
    width: 100%;
    height: auto;
}
.closet_stage.bounce {
    animation: closet_stage_bounce 0.42s cubic-bezier(0.2, 1.5, 0.3, 1);
}
@keyframes closet_stage_bounce {
    0% {
        transform: scale(0.965);
    }
    55% {
        transform: scale(1.018);
    }
    100% {
        transform: scale(1);
    }
}
.closet_stage_plate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 11px 6px;
    background: linear-gradient(0deg, rgba(10, 8, 18, 0.8), transparent);
    pointer-events: none;
}
#closet_stage_name {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffe9b0;
}
#closet_stage_sky {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.55;
}
.closet_scroll {
    width: 100%;
    max-width: 336px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    padding: 2px 2px 8px;
    scrollbar-width: none;
    animation: pop_in 0.32s 0.12s both;
}
.closet_scroll::-webkit-scrollbar {
    display: none;
}
.closet_head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}
.closet_head h3 {
    font-size: 11px;
    letter-spacing: 1.9px;
    color: color-mix(in srgb, var(--shop_accent) 58%, #fff);
}
.closet_head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--shop_accent) 38%, transparent), transparent);
}
.closet_grid {
    display: grid;
    gap: 7px;
}
.closet_grid.birds {
    grid-template-columns: repeat(3, 1fr);
}
.closet_grid.skies {
    grid-template-columns: 1fr 1fr;
}
.closet_card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: rgba(15, 12, 32, 0.44);
    color: var(--parchment);
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.12s cubic-bezier(0.3, 1.4, 0.4, 1),
        background 0.12s,
        border-color 0.12s,
        box-shadow 0.16s;
}
.closet_card:hover,
.closet_card:focus-visible {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.07);
    border-color: color-mix(in srgb, var(--shop_accent) 45%, transparent);
    outline: none;
}
.closet_card:active {
    transform: translateY(0) scale(0.985);
}
.closet_card .card_art {
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.14));
}
.closet_card .card_name {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1.1;
    text-align: center;
}
.closet_card .card_state {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.06);
    transition:
        background 0.14s,
        color 0.14s,
        border-color 0.14s;
}
.closet_card.owned .card_state {
    color: #9fe8b0;
    border-color: rgba(159, 232, 176, 0.4);
}
.closet_card.worn {
    border-color: color-mix(in srgb, var(--shop_accent) 68%, transparent);
    background: color-mix(in srgb, var(--shop_accent) 11%, rgba(15, 12, 32, 0.44));
    box-shadow: 0 0 14px color-mix(in srgb, var(--shop_accent) 22%, transparent);
}
.closet_card.worn .card_state {
    background: var(--shop_accent);
    border-color: transparent;
    color: var(--ink);
}
.closet_card.priced .card_state {
    color: #ffe9b0;
}
.closet_card.broke .card_state {
    color: #ff9a8b;
    border-color: rgba(255, 122, 107, 0.35);
}
.closet_card.broke .card_art {
    filter: saturate(0.75) brightness(0.9);
}
.closet_card.confirm {
    border-color: rgba(246, 200, 96, 0.75);
    animation: closet_confirm_pulse 0.95s ease-in-out infinite;
}
.closet_card.confirm .card_state {
    background: var(--uti);
    border-color: transparent;
    color: var(--ink);
}
@keyframes closet_confirm_pulse {
    50% {
        box-shadow: 0 0 18px rgba(246, 200, 96, 0.4);
    }
}
.closet_card.denied {
    animation: closet_deny 0.32s cubic-bezier(0.3, 0.6, 0.4, 1);
}
@keyframes closet_deny {
    20% {
        transform: translateX(-4px);
    }
    45% {
        transform: translateX(4px);
    }
    70% {
        transform: translateX(-3px);
    }
    100% {
        transform: translateX(0);
    }
}
.closet_spark {
    position: absolute;
    z-index: 1;
    font-size: 13px;
    color: var(--uti);
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(246, 200, 96, 0.6));
    animation: closet_spark_pop 0.65s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes closet_spark_pop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-120deg);
    }
    45% {
        opacity: 1;
        transform: scale(1.25) rotate(6deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.7) rotate(24deg) translateY(-8px);
    }
}
.shop_balance {
    position: relative;
}
.shop_balance.spending strong {
    color: #ffb59f;
}
.balance_delta {
    position: absolute;
    right: 10px;
    top: calc(100% + 4px);
    font-size: 12px;
    font-weight: 800;
    color: #ff9a8b;
    white-space: nowrap;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    animation: balance_delta_float 0.95s ease-out both;
}
@keyframes balance_delta_float {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    }
    16% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(13px);
    }
}

.shop_page.nest {
    justify-content: flex-start;
    gap: 11px;
    padding: 98px 22px 114px;
}
.nest_stage {
    position: relative;
    width: 100%;
    max-width: 336px;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--shop_accent) 42%, transparent);
    border-radius: 16px;
    overflow: hidden;
    background: #0b0819;
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.32);
    animation: pop_in 0.32s 0.05s both;
}
.nest_stage canvas {
    display: block;
    width: 100%;
    height: auto;
}
.nest_stage.bounce {
    animation: closet_stage_bounce 0.42s cubic-bezier(0.2, 1.5, 0.3, 1);
}
.nest_stage_plate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 11px 6px;
    background: linear-gradient(0deg, rgba(10, 8, 18, 0.8), transparent);
    pointer-events: none;
}
#nest_stage_name {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #e6dcff;
}
#nest_stage_progress {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.55;
}
.nest_scroll {
    width: 100%;
    max-width: 336px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    text-align: left;
    padding: 2px 2px 8px;
    scrollbar-width: none;
    animation: pop_in 0.32s 0.12s both;
}
.nest_scroll::-webkit-scrollbar {
    display: none;
}
.wish_grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wish_card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 11px 11px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 13px;
    background: rgba(15, 12, 32, 0.46);
    color: var(--parchment);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.12s cubic-bezier(0.3, 1.4, 0.4, 1),
        background 0.12s,
        border-color 0.12s,
        box-shadow 0.16s;
}
.wish_card:hover,
.wish_card:focus-visible {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.06);
    border-color: color-mix(in srgb, var(--c) 52%, transparent);
    outline: none;
}
.wish_card:active {
    transform: translateY(0) scale(0.99);
}
.wish_head {
    display: flex;
    align-items: center;
    gap: 9px;
}
.wish_icon {
    font-size: 19px;
    flex: 0 0 24px;
    text-align: center;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--c) 55%, transparent));
}
.wish_text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.wish_name {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.wish_cat {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--c);
    opacity: 0.85;
}
.wish_ceiling {
    flex: 0 0 auto;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    opacity: 0.5;
    white-space: nowrap;
}
.wish_blurb {
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.72;
}
.wish_stats {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 2px;
}
.wish_state {
    align-self: flex-start;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffe9b0;
    transition:
        background 0.14s,
        color 0.14s,
        border-color 0.14s;
}
.wish_card.broke .wish_state {
    color: #ff9a8b;
    border-color: rgba(255, 122, 107, 0.35);
}
.wish_card.broke .wish_icon {
    filter: grayscale(0.7);
    opacity: 0.6;
}
.wish_card.wished {
    cursor: default;
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    background: color-mix(in srgb, var(--c) 9%, rgba(15, 12, 32, 0.46));
    box-shadow: 0 0 15px color-mix(in srgb, var(--c) 18%, transparent);
}
.wish_card.wished:hover {
    transform: none;
}
.wish_card.wished .wish_state {
    background: var(--c);
    border-color: transparent;
    color: var(--ink);
}
.wish_card.confirm {
    border-color: rgba(246, 200, 96, 0.75);
    animation: closet_confirm_pulse 0.95s ease-in-out infinite;
}
.wish_card.confirm .wish_state {
    background: var(--uti);
    border-color: transparent;
    color: var(--ink);
}
.wish_card.denied {
    animation: closet_deny 0.32s cubic-bezier(0.3, 0.6, 0.4, 1);
}
.wish_card.granted::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(255, 243, 200, 0.55), transparent 68%);
    animation: wish_granted 0.7s ease-out forwards;
}
@keyframes wish_granted {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.15);
    }
}
.wish_card[data-category="T"] .wish_shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}
.wish_card[data-category="T"] .wish_shine::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 26%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    animation: wish_shine 4.6s cubic-bezier(0.35, 0, 0.2, 1) infinite;
}
@keyframes wish_shine {
    0% {
        transform: translateX(-170%) skewX(-18deg);
    }
    62%,
    100% {
        transform: translateX(500%) skewX(-18deg);
    }
}
.wish_travel_star {
    position: absolute;
    z-index: 4;
    font-size: 20px;
    line-height: 1;
    color: #ffe9b0;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(246, 200, 96, 0.8));
    animation-name: wish_travel;
    animation-timing-function: cubic-bezier(0.42, 0, 0.24, 1);
    animation-fill-mode: forwards;
}
@keyframes wish_travel {
    0% {
        transform: translate(-50%, -50%) scale(0.35) rotate(0);
        opacity: 0;
    }
    22% {
        transform: translate(calc(-50% + var(--wish_dx) * 0.18), calc(-50% + var(--wish_dy) * 0.28)) scale(1.3)
            rotate(70deg);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--wish_dx)), calc(-50% + var(--wish_dy))) scale(0.5) rotate(320deg);
        opacity: 0.25;
    }
}
.shop_page.roost {
    justify-content: flex-start;
    gap: 11px;
    padding: 98px 22px 114px;
}
.roost_stage {
    position: relative;
    width: 100%;
    max-width: 336px;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--shop_accent) 42%, transparent);
    border-radius: 16px;
    overflow: hidden;
    background: #171029;
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.32);
    animation: pop_in 0.32s 0.05s both;
}
.roost_stage canvas {
    display: block;
    width: 100%;
    height: auto;
}
.roost_stage.bounce {
    animation: closet_stage_bounce 0.42s cubic-bezier(0.2, 1.5, 0.3, 1);
}
.roost_stage_plate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 11px 6px;
    background: linear-gradient(0deg, rgba(10, 8, 18, 0.8), transparent);
    pointer-events: none;
}
#roost_stage_name {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #d8f5ef;
}
#roost_stage_progress {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.55;
}
.roost_scroll {
    width: 100%;
    max-width: 336px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    text-align: left;
    padding: 2px 2px 8px;
    scrollbar-width: none;
    animation: pop_in 0.32s 0.12s both;
}
.roost_scroll::-webkit-scrollbar {
    display: none;
}
.roost_list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.roost_section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.roost_head {
    display: flex;
    align-items: center;
    gap: 9px;
}
.roost_head h3 {
    font-size: 10px;
    letter-spacing: 1.9px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--shop_accent) 58%, #fff);
}
.roost_head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--shop_accent) 38%, transparent), transparent);
}
.roost_row {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 13px;
    background: rgba(15, 12, 32, 0.46);
    overflow: hidden;
    transition:
        border-color 0.14s,
        background 0.14s,
        box-shadow 0.16s;
}
.roost_row.raised {
    border-color: color-mix(in srgb, var(--c) 48%, transparent);
    background: color-mix(in srgb, var(--c) 8%, rgba(15, 12, 32, 0.46));
}
.roost_row.open {
    border-color: color-mix(in srgb, var(--c) 58%, transparent);
    box-shadow: 0 0 15px color-mix(in srgb, var(--c) 16%, transparent);
}
.roost_summary {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    background: none;
    color: var(--parchment);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.roost_summary:hover,
.roost_summary:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    outline: none;
}
.roost_icon {
    font-size: 18px;
    flex: 0 0 22px;
    text-align: center;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--c) 55%, transparent));
}
.roost_text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.roost_name {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.roost_cat {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--c);
    opacity: 0.85;
}
.roost_level {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition:
        background 0.16s,
        color 0.16s,
        border-color 0.16s;
}
.roost_row.raised .roost_level {
    background: var(--c);
    border-color: transparent;
    color: var(--ink);
}
.roost_endless {
    font-size: 11px;
    opacity: 0.72;
}
.roost_detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.24s cubic-bezier(0.3, 1, 0.4, 1);
}
.roost_row.open .roost_detail {
    grid-template-rows: 1fr;
}
.roost_detail_inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
    padding: 0 11px;
}
.roost_row.open .roost_detail_inner {
    padding-bottom: 11px;
}
.roost_blurb {
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.72;
}
.roost_stats {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 2px;
}
.roost_buy {
    align-self: flex-start;
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffe9b0;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.14s,
        color 0.14s,
        border-color 0.14s,
        transform 0.12s cubic-bezier(0.3, 1.4, 0.4, 1);
}
.roost_buy:hover:not(:disabled),
.roost_buy:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}
.roost_buy:active:not(:disabled) {
    transform: scale(0.95);
}
.roost_buy:disabled {
    cursor: default;
    color: color-mix(in srgb, var(--c) 42%, #fff);
    border-color: color-mix(in srgb, var(--c) 34%, transparent);
    background: color-mix(in srgb, var(--c) 12%, transparent);
}
.roost_row.broke .roost_buy {
    color: #ff9a8b;
    border-color: rgba(255, 122, 107, 0.35);
}
.roost_row.broke .roost_icon {
    filter: grayscale(0.7);
    opacity: 0.6;
}
.roost_row.confirm {
    border-color: rgba(246, 200, 96, 0.75);
    animation: closet_confirm_pulse 0.95s ease-in-out infinite;
}
.roost_row.confirm .roost_buy {
    background: var(--uti);
    border-color: transparent;
    color: var(--ink);
}
.roost_row.denied {
    animation: closet_deny 0.32s cubic-bezier(0.3, 0.6, 0.4, 1);
}
.roost_row.grown::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 60%, transparent), transparent 68%);
    animation: wish_granted 0.7s ease-out forwards;
}
.roost_seed {
    position: absolute;
    z-index: 4;
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 9px rgba(79, 209, 197, 0.8));
    animation-name: roost_seed_travel;
    animation-timing-function: cubic-bezier(0.42, 0, 0.24, 1);
    animation-fill-mode: forwards;
}
@keyframes roost_seed_travel {
    0% {
        transform: translate(-50%, -50%) scale(0.35) rotate(0);
        opacity: 0;
    }
    24% {
        transform: translate(calc(-50% + var(--seed_dx) * 0.2), calc(-50% + var(--seed_dy) * 0.3)) scale(1.25)
            rotate(-40deg);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--seed_dx)), calc(-50% + var(--seed_dy))) scale(0.45) rotate(-200deg);
        opacity: 0.25;
    }
}