:root {
    --rank_locked: rgba(243, 233, 210, 0.38);
    --rank_open: #ffb28a;
    --rank_participated: rgba(243, 233, 210, 0.85);
    --rank_bronze: #d59a5a;
    --rank_silver: #e8ecff;
    --rank_gold: #ffd86a;
    --rank_diamond: #c8f3ff;
    --dusk_top: #22103f;
    --dusk_mid: #6a2358;
    --dusk_low: #c93a4a;
    --dusk_glow: #ff8a3c;
    --duskbit: #d9a3ff;
}
.rank_locked {
    --c: var(--rank_locked);
    --glow: 120, 120, 150;
}
.rank_open {
    --c: var(--rank_open);
    --glow: 255, 138, 60;
}
.rank_participated {
    --c: var(--rank_participated);
    --glow: 243, 233, 210;
}
.rank_bronze {
    --c: var(--rank_bronze);
    --glow: 213, 154, 90;
}
.rank_silver {
    --c: var(--rank_silver);
    --glow: 220, 228, 255;
}
.rank_gold {
    --c: var(--rank_gold);
    --glow: 255, 214, 110;
}
.rank_diamond {
    --c: var(--rank_diamond);
    --glow: 190, 235, 255;
}

.ember_canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.btn.dusk_btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff4ea;
    background: linear-gradient(180deg, #ff9a5c, #c9384f 70%, #8f2a5e);
    box-shadow:
        0 4px 0 #4a1230,
        0 0 22px rgba(255, 120, 80, 0.35);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    animation: dusk_btn_glow 2.4s ease-in-out infinite;
}
.btn.dusk_btn > span {
    position: relative;
    z-index: 1;
}
.btn.dusk_btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #4a1230;
}
.btn.dusk_btn:disabled {
    filter: grayscale(0.8) brightness(0.6);
    animation: none;
    cursor: default;
    box-shadow: none;
    transform: none;
}
@keyframes dusk_btn_glow {
    50% {
        box-shadow:
            0 4px 0 #4a1230,
            0 0 34px rgba(255, 120, 80, 0.6);
    }
}

#twinkle_trials_btn .menu_desc {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: 0.4px;
    opacity: 0.72;
}
.menu_action.trials_motif {
    border-color: rgba(255, 128, 100, 0.5);
    background: linear-gradient(135deg, rgba(214, 60, 90, 0.3), rgba(120, 45, 150, 0.22) 60%, rgba(255, 255, 255, 0.04));
    animation:
        pop_in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) forwards,
        trials_ember_glow 2.8s 0.6s ease-in-out infinite;
}
.menu_action.trials_motif:hover,
.menu_action.trials_motif:focus-visible {
    border-color: rgba(255, 150, 120, 0.85);
    background: linear-gradient(135deg, rgba(214, 60, 90, 0.38), rgba(120, 45, 150, 0.28) 60%, rgba(255, 255, 255, 0.06));
}
.menu_action.trials_motif::after {
    background: linear-gradient(90deg, transparent, rgba(255, 190, 150, 0.22), transparent);
    animation-duration: 5.2s;
}
.trials_motif .menu_icon,
#menu_screen .trials_motif .menu_icon {
    color: #3a0d22;
    background: linear-gradient(180deg, #ffc48a, #ff7d5c 55%, #d33c62);
    border-color: rgba(255, 200, 150, 0.75);
    box-shadow: 0 3px 0 #6b1f3a;
    animation: trials_ember_icon_float 2.8s ease-in-out infinite;
}
.trials_motif .menu_label {
    background: linear-gradient(180deg, #ffd8ae 0%, #ff8a8c 55%, #cf93ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.trials_motif .menu_desc {
    color: #ffc4b0;
    opacity: 0.85;
}
@keyframes trials_ember_glow {
    0%,
    100% {
        box-shadow:
            0 7px 18px rgba(0, 0, 0, 0.22),
            0 0 14px rgba(255, 100, 90, 0.18);
    }
    50% {
        box-shadow:
            0 9px 22px rgba(0, 0, 0, 0.26),
            0 0 32px rgba(255, 100, 90, 0.42);
    }
}
@keyframes trials_ember_icon_float {
    50% {
        transform: translateY(-3px) scale(1.06) rotate(-5deg);
        box-shadow:
            0 5px 0 #6b1f3a,
            0 0 18px rgba(255, 130, 90, 0.5);
    }
}
.trials_screen {
    padding: 0;
    justify-content: flex-start;
}
.ambient_screen.trials_screen::before {
    background:
        radial-gradient(circle at 50% 108%, rgba(255, 138, 60, 0.28), transparent 42%),
        radial-gradient(circle at 18% 22%, rgba(120, 60, 180, 0.22), transparent 36%),
        radial-gradient(circle at 84% 40%, rgba(201, 58, 74, 0.16), transparent 32%);
}
.trials_head {
    flex: 0 0 auto;
    width: 100%;
    padding: 16px 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 5;
}
.trials_head .screen_sub {
    margin: 0;
}
.trials_info {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255, 170, 120, 0.55);
    border-radius: 50%;
    background: rgba(26, 12, 32, 0.85);
    color: #ffd6b8;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 138, 60, 0.25);
    transition:
        transform 0.12s cubic-bezier(0.3, 1.4, 0.4, 1),
        background 0.12s,
        border-color 0.12s;
}
.trials_info:hover,
.trials_info:focus-visible {
    border-color: rgba(255, 200, 160, 0.9);
    background: rgba(94, 30, 50, 0.9);
    outline: none;
    transform: scale(1.08);
}
.trials_info:active {
    transform: scale(0.94);
}
.trials_guide {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
    background: rgba(12, 4, 14, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: fade_in 0.18s ease-out both;
}
.trials_guide_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    padding: 16px 16px 14px;
    border: 1px solid rgba(255, 138, 60, 0.45);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 120%, rgba(255, 138, 60, 0.28), transparent 55%),
        linear-gradient(180deg, rgba(34, 16, 63, 0.98), rgba(48, 18, 52, 0.98));
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(255, 120, 80, 0.15);
    text-align: center;
    animation: pop_in 0.24s cubic-bezier(0.2, 1.1, 0.3, 1) both;
}
.trials_guide_card > h3 {
    margin: 0;
    font-size: 14px;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #fff1e4 0%, #ffd6b8 55%, #ff9a5c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.trials_guide_lead {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff1e4;
}
.trials_guide_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.trials_guide_list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.3;
    padding: 8px 12px;
    border: 1px solid rgba(255, 138, 60, 0.28);
    border-radius: 10px;
    background: rgba(255, 138, 60, 0.08);
    font-size: 12.5px;
    font-weight: 800;
    color: #ffd6b8;
    text-align: left;
}
.trials_guide_list li::before {
    content: "✵";
    color: var(--dusk_glow);
    text-shadow: 0 0 8px rgba(255, 138, 60, 0.7);
}
.trials_guide_card .btn.dusk_btn {
    margin-top: 2px;
    padding: 11px 30px;
    font-size: 15px;
}
.trials_title {
    color: #ffd6b8;
    text-shadow: 0 0 14px rgba(255, 130, 90, 0.4);
}
.trials_foot {
    flex: 0 0 auto;
    width: 100%;
    padding: 10px 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 5;
}
#trials_map_screen .trials_head {
    background: linear-gradient(180deg, rgba(26, 21, 48, 0.98), rgba(26, 21, 48, 0.85) 70%, transparent);
}
#trials_map_screen .trials_foot {
    background: linear-gradient(0deg, rgba(26, 21, 48, 0.98), rgba(26, 21, 48, 0.85) 70%, transparent);
}
.trials_balances {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.trials_pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition:
        transform 0.18s cubic-bezier(0.3, 1.8, 0.4, 1),
        border-color 0.2s,
        box-shadow 0.2s;
}
.trials_pill_mark {
    font-size: 13px;
}
.trials_pill.twinkles .trials_pill_mark {
    color: #ffe9b0;
}
.trials_pill.duskbits .trials_pill_mark {
    color: var(--duskbit);
    text-shadow: 0 0 6px rgba(217, 163, 255, 0.7);
}
.trials_pill.pop {
    transform: scale(1.16);
    border-color: rgba(255, 220, 160, 0.8);
    box-shadow: 0 0 16px rgba(255, 214, 110, 0.5);
}
.trials_pill.duskbits.pop {
    border-color: rgba(217, 163, 255, 0.8);
    box-shadow: 0 0 16px rgba(217, 163, 255, 0.5);
}

.trials_pager {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    z-index: 1;
}
.trials_pager::-webkit-scrollbar {
    display: none;
}
.trials_chapter_page {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 18px;
}
.trials_sphere_wrap {
    position: relative;
    width: 300px;
    height: 300px;
    display: grid;
    place-items: center;
}
.trials_sphere {
    position: relative;
    width: 224px;
    height: 224px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(180deg, var(--dusk_top) 0%, var(--dusk_mid) 46%, var(--dusk_low) 76%, var(--dusk_glow) 100%);
    box-shadow:
        inset -26px -30px 48px rgba(0, 0, 0, 0.6),
        inset 10px 12px 34px rgba(255, 255, 255, 0.12),
        0 0 70px rgba(255, 120, 80, 0.4),
        0 20px 50px rgba(0, 0, 0, 0.5);
    animation: trials_sphere_float 5.4s ease-in-out infinite;
}
.trials_sphere::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.42), transparent 34%);
    z-index: 6;
}
.trials_sphere_stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle, rgba(255, 245, 225, 0.9) 0 1px, transparent 1.6px) 0 0 / 34px 28px,
        radial-gradient(circle, rgba(255, 245, 225, 0.5) 0 0.8px, transparent 1.3px) 12px 9px / 51px 39px;
    -webkit-mask: linear-gradient(#000 30%, transparent 70%);
    mask: linear-gradient(#000 30%, transparent 70%);
}
.trials_sphere_sun {
    position: absolute;
    left: 50%;
    bottom: 20%;
    width: 56px;
    height: 56px;
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 2;
    background: radial-gradient(circle at 50% 40%, #fff1c2, #ffb35c 55%, #ff7a3d);
    box-shadow: 0 0 40px 10px rgba(255, 170, 90, 0.75);
    animation: trials_sun_sink 5.4s ease-in-out infinite;
}
.trials_sphere_hills {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -8%;
    height: 42%;
    z-index: 3;
    background:
        radial-gradient(48% 100% at 20% 100%, #2a0c24 58%, transparent 59%),
        radial-gradient(44% 100% at 66% 100%, #3a1238 60%, transparent 61%),
        radial-gradient(56% 100% at 104% 100%, #2a0c24 55%, transparent 56%);
}
.trials_sphere_haze {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 5;
    background: linear-gradient(180deg, transparent 40%, rgba(255, 120, 60, 0.28));
}
.trials_sphere .ember_canvas {
    z-index: 5;
}
.trials_chapter_page.coming_soon .trials_sphere {
    background: radial-gradient(circle at 42% 30%, #2c2842, #16132a 62%, #0b0a16 100%);
    box-shadow:
        inset -26px -30px 48px rgba(0, 0, 0, 0.7),
        0 20px 50px rgba(0, 0, 0, 0.5);
    animation: none;
}
.trials_chapter_page.coming_soon .trials_sphere::before {
    opacity: 0.35;
}
.trials_sphere_fog {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.08), transparent 40%),
        radial-gradient(circle at 70% 65%, rgba(183, 156, 255, 0.1), transparent 45%);
    animation: trials_fog_drift 9s ease-in-out infinite alternate;
}
.trials_sphere_numeral {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    font-family: var(--score_font);
    font-size: 64px;
    color: rgba(243, 233, 210, 0.16);
}
@keyframes trials_sphere_float {
    50% {
        transform: translateY(-8px);
    }
}
@keyframes trials_sun_sink {
    50% {
        transform: translate(-50%, 6%) scale(1.05);
    }
}
@keyframes trials_fog_drift {
    to {
        transform: translate(6%, -4%) scale(1.1);
    }
}
.trials_orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.trials_orbit i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px;
    border-radius: 50%;
    border: 3px solid var(--c);
}
.trials_orbit i.rank_gold {
    box-shadow: 0 0 6px rgba(255, 216, 106, 0.8);
}
.trials_orbit i.rank_silver {
    border-color: #d6dbea;
    box-shadow: 0 0 3px rgba(232, 236, 255, 0.35);
}
.trials_orbit i.rank_participated {
    border-color: rgba(243, 233, 210, 0.5);
}
.trials_orbit i.rank_open,
.trials_orbit i.rank_locked {
    border-color: rgba(255, 255, 255, 0.18);
    border-style: dashed;
}
.trials_orbit i.rank_diamond {
    width: 22px;
    height: 22px;
    margin: -11px;
    border: none;
    background: conic-gradient(#ffd6ff, #b5f3ff, #fff6c8, #d3c4ff, #a8ffe0, #ffd6ff);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    filter: drop-shadow(0 0 7px rgba(190, 235, 255, 0.95));
}
.trials_orbit i.rank_diamond::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(transparent 0 72%, rgba(255, 255, 255, 0.95) 84%, transparent 94%);
    animation: trials_ring_spin 2.4s linear infinite;
}
.trials_orbit i.rank_diamond::after {
    content: "◆";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 8px;
    color: #eafcff;
    text-shadow: 0 0 6px #b5f3ff;
    animation: trials_twinkle 1.6s ease-in-out infinite;
}
.trials_chapter_kicker {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffb28a;
}
.trials_chapter_name {
    font-family: var(--score_font);
    font-weight: 400;
    font-size: 34px;
    line-height: 1;
    margin-top: -8px;
    background: linear-gradient(180deg, #ffd8ae, #ff8a8c 60%, #cf93ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.trials_enter_btn {
    margin-top: 10px;
    animation: dusk_btn_glow 2.4s ease-in-out infinite;
}
.trials_chapter_page.coming_soon .trials_chapter_name {
    background: none;
    color: rgba(243, 233, 210, 0.42);
}
.trials_chapter_page.coming_soon .trials_chapter_kicker {
    color: rgba(255, 178, 138, 0.5);
}
.trials_soon_tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px dashed rgba(243, 233, 210, 0.35);
    color: rgba(243, 233, 210, 0.7);
}
#trials_chapters_screen .shop_arrow {
    z-index: 6;
}

.trials_map_scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    z-index: 1;
}
.trials_map_scroll::-webkit-scrollbar {
    display: none;
}
.trials_map_tree {
    position: relative;
    width: 420px;
    margin: 0 auto;
}
.trials_map_tree svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 420px;
    pointer-events: none;
}
.trial_edge {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 2.5;
    stroke-dasharray: 4 7;
}
.trial_edge.flow {
    stroke: url(#trial_edge_lit);
    stroke-dasharray: 6 10;
    animation: trial_edge_flow 1.6s linear infinite;
}
@keyframes trial_edge_flow {
    to {
        stroke-dashoffset: -32;
    }
}
.trial_node_wrap {
    position: absolute;
    transform: translate(-50%, calc(-1 * var(--node_radius, 34px)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 104px;
    cursor: pointer;
}
.trial_node_name {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1.2;
    margin-top: 4px;
}
.trial_plaque {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--c, rgba(255, 255, 255, 0.2));
    color: var(--c, var(--parchment));
    background: color-mix(in srgb, var(--c, #ffffff) 9%, transparent);
    white-space: nowrap;
}
.trial_plaque.rank_open {
    animation: trial_plaque_pulse 1.8s ease-in-out infinite;
}
.trial_plaque.rank_gold {
    box-shadow: 0 0 8px rgba(255, 214, 110, 0.25);
}
.trial_plaque.rank_diamond {
    box-shadow: 0 0 10px rgba(190, 235, 255, 0.35);
    text-shadow: 0 0 6px rgba(190, 235, 255, 0.6);
}
@keyframes trial_plaque_pulse {
    50% {
        box-shadow: 0 0 12px rgba(255, 120, 80, 0.5);
    }
}

.trial_node {
    position: relative;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    --spin: 7s;
}
.trial_node > span {
    position: absolute;
    pointer-events: none;
}
.trial_node_glyph {
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    font-size: 27px;
    line-height: 1;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
.trial_node_orb {
    inset: 0;
    z-index: 4;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 42% 30%, #4a3576, #221641 62%, #130c26 100%);
    box-shadow:
        inset 0 -6px 12px rgba(0, 0, 0, 0.55),
        inset 0 3px 6px rgba(255, 255, 255, 0.1);
}
.trial_node_orb::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 8%;
    height: 34%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
}
.trial_node_orb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 78%, rgba(var(--glow), 0.38), transparent 55%);
}
.trial_node_ring_base {
    inset: -7px;
    z-index: 1;
    border-radius: 50%;
    background: #0d0918;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.trial_node_ring,
.trial_node_spec {
    inset: -6px;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.trial_node_ring {
    z-index: 2;
    animation: trials_ring_spin var(--spin) linear infinite;
}
.trial_node_spec {
    z-index: 3;
    opacity: 0;
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, 0.85) 82%, transparent 92%);
    animation: trials_ring_spin 2.6s linear infinite;
}
.trial_node_rays {
    inset: -30px;
    z-index: 0;
    border-radius: 50%;
    opacity: 0;
    -webkit-mask: radial-gradient(circle, #000 32%, transparent 68%);
    mask: radial-gradient(circle, #000 32%, transparent 68%);
    animation: trials_ring_spin 14s linear infinite;
}
.trial_node_halo {
    inset: -18px;
    z-index: 0;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle, rgba(var(--glow), 0.55), transparent 62%);
}
.trial_node_lock {
    z-index: 7;
    right: -6px;
    bottom: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    line-height: 1;
    background: #2a2340;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.trial_node_flare {
    z-index: 7;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 3px;
    margin: -1.5px;
    opacity: 0;
}
.trial_node_flare::before,
.trial_node_flare::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, #fff, transparent);
}
.trial_node_flare::before {
    width: 90px;
    height: 2px;
}
.trial_node_flare::after {
    width: 2px;
    height: 90px;
}
.trial_node.wave::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: 8;
    border-radius: 50%;
    border: 2px solid rgba(var(--glow), 0.9);
    pointer-events: none;
    animation: trial_shockwave 0.55s ease-out both;
}
.trial_node.tapped {
    animation: trial_node_spring 0.5s cubic-bezier(0.3, 1.6, 0.4, 1) both;
}
@keyframes trial_node_spring {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(0.86);
    }
    65% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes trial_shockwave {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.9);
        opacity: 0;
    }
}
@keyframes trials_ring_spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes trials_halo_breathe {
    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}
@keyframes trials_twinkle {
    50% {
        opacity: 0.1;
        transform: scale(0.5);
    }
}
.trial_node.locked .trial_node_orb {
    background: radial-gradient(circle at 42% 30%, #33304a, #1c1a2c 62%, #0f0e18 100%);
}
.trial_node.locked .trial_node_orb::after {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 3px, transparent 3px 9px);
}
.trial_node.locked .trial_node_glyph {
    filter: grayscale(1) brightness(0.5);
    opacity: 0.6;
}
.trial_node.locked .trial_node_ring {
    background: repeating-conic-gradient(rgba(255, 255, 255, 0.22) 0 7deg, transparent 7deg 15deg);
    animation: none;
}
.trial_node.open .trial_node_orb {
    background: radial-gradient(circle at 42% 30%, #6a2f7a, #3a1650 62%, #1a0c2a 100%);
}
.trial_node.open .trial_node_ring {
    --spin: 5s;
    background: conic-gradient(from 0deg, rgba(255, 170, 110, 0.9), rgba(201, 58, 74, 0.4), rgba(255, 170, 110, 0.9), rgba(201, 58, 74, 0.4), rgba(255, 170, 110, 0.9));
}
.trial_node.open .trial_node_halo {
    opacity: 0.7;
    animation: trials_halo_breathe 1.8s ease-in-out infinite;
}
.trial_node.open .trial_node_rays {
    opacity: 0.5;
    background: repeating-conic-gradient(from 0deg, rgba(255, 150, 90, 0.5) 0 4deg, transparent 4deg 30deg);
    animation-duration: 22s;
}
.trial_node.participated .trial_node_ring {
    background: conic-gradient(from 0deg, rgba(243, 233, 210, 0.75), rgba(243, 233, 210, 0.25), rgba(243, 233, 210, 0.75), rgba(243, 233, 210, 0.25), rgba(243, 233, 210, 0.75));
    animation: none;
}
.trial_node.bronze .trial_node_ring {
    background: conic-gradient(from 20deg, #f5c08a, #8a4a22 25%, #d59a5a 50%, #6b3a18 75%, #f5c08a);
    animation: none;
}
.trial_node.bronze .trial_node_spec {
    opacity: 0.35;
    animation-duration: 5s;
}
.trial_node.bronze .trial_node_halo {
    opacity: 0.45;
}
.trial_node.silver {
    --spin: 9s;
}
.trial_node.silver .trial_node_ring {
    background: conic-gradient(from 0deg, #ffffff, #8f98b0 20%, #f4f6ff 40%, #7f8aa3 60%, #ffffff 80%, #a9b1c6);
}
.trial_node.silver .trial_node_spec {
    opacity: 0.8;
}
.trial_node.silver .trial_node_halo {
    opacity: 0.55;
}
.trial_node.silver .trial_node_orb {
    background: radial-gradient(circle at 42% 30%, #4a4a7a, #22213f 62%, #10101f 100%);
}
.trial_node.gold {
    --spin: 6s;
}
.trial_node.gold .trial_node_ring {
    inset: -7px;
    background: conic-gradient(from 0deg, #fff3c4, #d9931f 22%, #ffe9a8 45%, #b8720f 66%, #fff3c4 88%, #e0a028);
}
.trial_node.gold .trial_node_spec {
    opacity: 0.9;
    animation-duration: 2.2s;
}
.trial_node.gold .trial_node_halo {
    opacity: 0.8;
    animation: trials_halo_breathe 2.4s ease-in-out infinite;
}
.trial_node.gold .trial_node_rays {
    opacity: 0.9;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 110, 0.55) 0 5deg, transparent 5deg 20deg);
}
.trial_node.gold .trial_node_orb {
    background: radial-gradient(circle at 42% 30%, #6a4a2a, #2e1d3f 62%, #150c26 100%);
}
.trial_node.diamond {
    --spin: 3.6s;
}
.trial_node.diamond .trial_node_ring {
    inset: -8px;
    background: conic-gradient(from 0deg, #ffd6ff, #b5f3ff, #fff6c8, #d3c4ff, #a8ffe0, #ffd6ff);
}
.trial_node.diamond .trial_node_spec {
    inset: -8px;
    opacity: 1;
    animation-duration: 1.8s;
}
.trial_node.diamond .trial_node_halo {
    inset: -24px;
    opacity: 1;
    background: radial-gradient(circle, rgba(200, 240, 255, 0.6), rgba(255, 190, 255, 0.25) 40%, transparent 65%);
    animation: trials_halo_breathe 2s ease-in-out infinite;
}
.trial_node.diamond .trial_node_rays {
    inset: -36px;
    opacity: 1;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 255, 0.55) 0 3deg, transparent 3deg 12deg, rgba(180, 240, 255, 0.55) 12deg 15deg, transparent 15deg 24deg);
    animation-duration: 9s;
}
.trial_node.diamond .trial_node_orb {
    background: radial-gradient(circle at 42% 30%, #5a5ab0, #2a2a68 62%, #12123a 100%);
}
.trial_node.diamond .trial_node_orb::after {
    background: conic-gradient(from 0deg, rgba(255, 214, 255, 0.35), rgba(180, 240, 255, 0.35), rgba(255, 246, 200, 0.35), rgba(211, 196, 255, 0.35), rgba(255, 214, 255, 0.35));
    mix-blend-mode: screen;
    animation: trials_ring_spin 6s linear infinite reverse;
}
.trial_node.diamond .trial_node_flare {
    animation: trial_flare 4.5s ease-in-out infinite;
}
@keyframes trial_flare {
    0%,
    62%,
    100% {
        opacity: 0;
        transform: rotate(0deg) scale(0.4);
    }
    70% {
        opacity: 1;
        transform: rotate(20deg) scale(1);
    }
    78% {
        opacity: 0;
        transform: rotate(40deg) scale(0.4);
    }
}

.trial_sheet_layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.trial_sheet_backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 18, 0.62);
    animation: fade_in 0.25s ease both;
}
.trial_sheet {
    position: relative;
    width: 100%;
    max-height: 92%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    background: linear-gradient(180deg, #241b42, #17122b);
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(255, 180, 140, 0.45);
    box-shadow:
        0 -12px 40px rgba(0, 0, 0, 0.5),
        0 -2px 24px rgba(255, 120, 80, 0.15);
    padding: 10px 16px 18px;
    text-align: left;
    animation: trial_sheet_up 0.38s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.trial_sheet::-webkit-scrollbar {
    display: none;
}
.trial_sheet_layer.closing .trial_sheet {
    animation: trial_sheet_down 0.22s ease-in both;
}
.trial_sheet_layer.closing .trial_sheet_backdrop {
    animation: trial_fade_out 0.22s ease both;
}
@keyframes trial_sheet_up {
    from {
        transform: translateY(60px);
        opacity: 0;
    }
}
@keyframes trial_sheet_down {
    to {
        transform: translateY(60px);
        opacity: 0;
    }
}
@keyframes trial_fade_out {
    to {
        opacity: 0;
    }
}
.trial_sheet_handle {
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
    margin: 0 auto 8px;
}
.trial_sheet .trials_balances {
    justify-content: center;
    margin: 0 0 6px;
}
.trial_sheet_top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 4px 0 10px;
}
.trial_sheet_top .trial_node {
    transform: scale(1.1);
    margin: 4px 6px;
}
.trial_sheet_top .trial_node_rays,
.trial_sheet_top .trial_node_flare {
    display: none;
}
.trial_sheet_title {
    flex: 1;
    min-width: 0;
}
.trial_sheet_title h3 {
    font-family: var(--score_font);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 0.5px;
    line-height: 1;
    background: linear-gradient(180deg, #ffd8ae, #ff8a8c 60%, #cf93ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.trial_sheet_line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.8;
}
.trial_sheet_description {
    font-size: 14px;
    line-height: 1.45;
    padding: 0 2px;
    margin-top: 16px;
}
.trial_sheet_unlock {
    font-size: 12px;
    opacity: 0.6;
    margin-top: 4px;
    padding: 0 2px;
}
.trial_rewards_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 16px 2px 8px;
}
.trial_rewards_head b {
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #ffb28a;
}
.trial_rewards_head span {
    font-size: 11px;
    opacity: 0.55;
}
.trial_rewards {
    position: relative;
    height: 128px;
    margin: 4px 0 2px;
    --edge: 38px;
}
.trial_reward_track {
    position: absolute;
    left: var(--edge);
    right: var(--edge);
    top: 22px;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.trial_reward_fill {
    --pole_period: 21.2px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(100% * var(--fill, 0));
    border-radius: 7px;
    background-image: repeating-linear-gradient(-45deg, #ffb37a 0 5px, #ff7a6b 5px 10px, #d9486a 10px 15px);
    background-size: var(--pole_period) var(--pole_period);
    animation: trial_barber_pole 0.9s linear infinite;
}
.trial_reward_fill.diamond {
    --pole_period: 42.4px;
    background-image: repeating-linear-gradient(-45deg, #ffb3b3 0 5px, #fff0b3 5px 10px, #c2ffc2 10px 15px, #b3f7ff 15px 20px, #c2c2ff 20px 25px, #ffb3f0 25px 30px);
}
@keyframes trial_barber_pole {
    to {
        background-position: var(--pole_period) 0;
    }
}
.trial_milestone {
    position: absolute;
    top: 0;
    left: calc(var(--edge) + (100% - 2 * var(--edge)) * var(--position, 0));
    width: 76px;
    margin-left: -38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--parchment);
    cursor: default;
    transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.4, 1);
}
.trial_milestone_pin {
    position: relative;
    z-index: 2;
    width: 26px;
    height: 26px;
    margin-top: 16px;
    border-radius: 50%;
    border: 2px solid var(--c);
    background: #1e1737;
    display: grid;
    place-items: center;
    font-size: 11px;
    line-height: 1;
    color: var(--c);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
.trial_milestone b {
    font-size: 8.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--c);
}
.trial_milestone small {
    font-size: 9px;
    opacity: 0.6;
}
.trial_milestone_amount {
    display: flex;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.trial_milestone_amount .twinkles {
    color: #ffe9b0;
}
.trial_milestone_amount .duskbits {
    color: var(--duskbit);
}
.trial_claim_pill {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--ink);
    background: linear-gradient(180deg, #ffe9b0, #f0b35e);
    border-radius: 999px;
    padding: 3px 9px;
    box-shadow: 0 2px 0 #9c6b2e;
    animation: trial_claim_bob 1.4s ease-in-out infinite;
}
.trial_claimed_mark {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #9fe8b0;
}
@keyframes trial_claim_bob {
    50% {
        transform: translateY(-1px);
        box-shadow:
            0 4px 0 #9c6b2e,
            0 0 10px rgba(246, 200, 96, 0.5);
    }
}
.trial_milestone.claimed .trial_milestone_pin {
    background: color-mix(in srgb, var(--c) 28%, #1e1737);
}
.trial_milestone.claimed .trial_milestone_amount {
    opacity: 0.45;
}
.trial_milestone.ready {
    cursor: pointer;
}
.trial_milestone.ready:active {
    transform: scale(0.95);
}
.trial_milestone.ready .trial_milestone_pin {
    background: color-mix(in srgb, #ffe9b0 22%, #1e1737);
    border-color: #ffe9b0;
    color: #ffe9b0;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.5),
        0 0 16px rgba(255, 214, 110, 0.6);
    animation: trial_pin_pulse 1.4s ease-in-out infinite;
}
@keyframes trial_pin_pulse {
    50% {
        transform: scale(1.15);
    }
}
.trial_milestone.unreached {
    opacity: 0.42;
}
.trial_milestone.unreached .trial_milestone_pin {
    border-style: dashed;
}
.trial_milestone.burst {
    animation: trial_milestone_burst 0.5s cubic-bezier(0.3, 1.6, 0.4, 1) both;
}
@keyframes trial_milestone_burst {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(0.9);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
.trial_sheet_actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.trial_sheet_actions .btn {
    flex: 1;
    padding: 13px 18px;
    font-size: 16px;
    animation: dusk_btn_glow 2.4s ease-in-out infinite;
}
.trial_sheet_actions .btn:disabled {
    animation: none;
}
.trial_flash {
    position: absolute;
    inset: 0;
    z-index: 29;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 240, 200, 0.55), transparent 55%);
}
.trial_flash.on {
    animation: trial_flash 0.5s ease-out both;
}
@keyframes trial_flash {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.trial_burst_ring {
    position: absolute;
    z-index: 29;
    pointer-events: none;
    width: 20px;
    height: 20px;
    margin: -10px;
    border-radius: 50%;
    border: 3px solid rgba(255, 233, 176, 0.9);
    animation: trial_shockwave 0.6s ease-out both;
}
.trial_burst_ring.second {
    border-color: rgba(255, 178, 138, 0.8);
    animation-delay: 0.1s;
}
#trial_dusk_fade {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, var(--dusk_top), var(--dusk_low) 70%, var(--dusk_glow));
}
#trial_dusk_fade.on {
    animation: trial_dusk_fade 1.4s ease-in-out both;
}
@keyframes trial_dusk_fade {
    0% {
        opacity: 0;
    }
    35%,
    65% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.trial_finale_notice {
    position: absolute;
    top: 16%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px 9px 13px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #ffe9b0;
    pointer-events: none;
    border: 1px solid rgba(255, 178, 138, 0.6);
    border-radius: 999px;
    background: rgba(26, 16, 36, 0.94);
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(255, 138, 60, 0.25);
    transform: translateX(-50%);
    z-index: 8;
}
.trial_finale_notice.black_hole {
    color: #d9ccff;
    border-color: rgba(185, 155, 255, 0.7);
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.45),
        0 0 22px rgba(150, 90, 255, 0.4);
}
.trial_finale_notice.banker {
    color: #ffe3a0;
    border-color: rgba(224, 189, 102, 0.75);
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(224, 189, 102, 0.35);
}
.trial_finale_notice .notice_icon {
    font-size: 15px;
    animation: trial_notice_icon_pulse 0.9s ease-in-out 3;
}
.trial_finale_notice.showing {
    animation:
        merchant_notice_in 0.5s cubic-bezier(0.2, 1.2, 0.3, 1) both,
        trial_notice_tremble 0.28s 0.5s ease-in-out 6;
}
.trial_finale_notice.leaving {
    animation: merchant_notice_out 0.4s ease both;
}
@keyframes trial_notice_tremble {
    25% {
        transform: translate(calc(-50% - 2px), 1px);
    }
    75% {
        transform: translate(calc(-50% + 2px), -1px);
    }
}
@keyframes trial_notice_icon_pulse {
    50% {
        transform: scale(1.25);
    }
}
.trial_briefing {
    z-index: 40;
    background: rgba(10, 8, 18, 0.58);
    backdrop-filter: blur(2px);
}
.trial_briefing_card {
    position: relative;
    width: min(100%, 350px);
    padding: 18px 18px 16px;
    text-align: left;
    background: linear-gradient(180deg, #241b42, #17122b);
    border-radius: 22px;
    border: 1px solid rgba(255, 180, 140, 0.45);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(255, 120, 80, 0.16);
    animation: trial_briefing_in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes trial_briefing_in {
    from {
        transform: translateY(24px) scale(0.96);
        opacity: 0;
    }
}
.trial_briefing_kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffb28a;
    text-align: center;
}
.trial_briefing_top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 4px 0 10px;
}
.trial_briefing_top .trial_node {
    transform: scale(1.1);
    margin: 4px 6px;
}
.trial_briefing_top .trial_node_rays,
.trial_briefing_top .trial_node_flare {
    display: none;
}
.trial_briefing_top h3 {
    font-family: var(--score_font);
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    background: linear-gradient(180deg, #ffd8ae, #ff8a8c 60%, #cf93ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.trial_briefing_description {
    font-size: 14px;
    line-height: 1.45;
    margin-top: 16px;
    padding: 0 2px;
}
.trial_briefing_metric {
    margin: 14px 2px 8px;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #ffb28a;
}
.trial_briefing_ladder {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}
.trial_ladder_pill {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 7px 6px;
    border-radius: 12px;
    border: 1px solid var(--c);
    background: color-mix(in srgb, var(--c) 9%, transparent);
    opacity: 0.45;
    animation: pop_in 0.3s var(--delay, 0ms) cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.trial_ladder_pill.reached {
    opacity: 1;
    box-shadow: 0 0 10px rgba(var(--glow), 0.28);
}
.trial_ladder_pill b {
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c);
}
.trial_ladder_pill small {
    font-size: 9.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
.trial_ladder_pill.rank_diamond.reached {
    background: conic-gradient(from 0deg, rgba(255, 214, 255, 0.35), rgba(180, 240, 255, 0.35), rgba(255, 246, 200, 0.35), rgba(211, 196, 255, 0.35), rgba(255, 214, 255, 0.35));
}
.trial_briefing_actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.trial_briefing_actions .btn {
    flex: 1;
    padding: 13px 18px;
    font-size: 16px;
}
.trial_ending {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 10px;
    color: var(--c, #ffe9b0);
    text-shadow: 0 0 10px rgba(var(--glow), 0.55);
    animation: best_in 0.5s cubic-bezier(0.2, 1.4, 0.3, 1) both;
}
.trial_ending.consumed {
    --c: #d9ccff;
    --glow: 150, 90, 255;
}
.trial_ending.settled {
    --c: #9fe8b0;
    --glow: 159, 232, 176;
}
.trial_ending.smitten {
    --c: #ffd34a;
    --glow: 255, 200, 60;
}
#trial_rank {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    opacity: 0.85;
    animation: pop_in 0.35s 0.08s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .trials_guide,
    .trials_guide_card,
    .btn.dusk_btn,
    .trials_enter_btn,
    .trial_sheet_actions .btn,
    .trials_sphere,
    .trials_sphere_sun,
    .trials_sphere_fog,
    .trials_orbit i::before,
    .trials_orbit i::after,
    .trial_edge.flow,
    .trial_plaque,
    .trial_node_ring,
    .trial_node_spec,
    .trial_node_rays,
    .trial_node_halo,
    .trial_node_orb::after,
    .trial_node_flare,
    .trial_reward_fill,
    .trial_claim_pill,
    .trial_milestone_pin,
    .trial_briefing_card,
    .trial_ladder_pill,
    .trial_finale_notice .notice_icon {
        animation: none;
    }
}