.crystal-tab,
body.in-peka-zone button.crystal-tab {
    position: fixed;
    right: 22px;
    bottom: 98px;
    display: none;
    align-items: center;
    gap: 7px;
    min-width: 184px;
    min-height: 42px;
    padding: 8px 10px 8px 9px;
    border: 3px solid rgba(236, 252, 255, 0.96);
    border-radius: 999px;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.98), transparent 32%),
        linear-gradient(135deg, #e9fbff 0%, #8be8ff 34%, #6f7cff 68%, #3c1b7a 100%);
    color: #171145;
    font-family: Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow:
        0 5px 0 #271b73,
        0 12px 22px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(125, 235, 255, 0.58),
        inset 0 2px 0 rgba(255, 255, 255, 0.78);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.96);
    transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease, box-shadow 180ms ease, bottom 180ms ease;
    user-select: none;
    z-index: 8;
    overflow: hidden;
    isolation: isolate;
}

.crystal-tab::after {
    content: "";
    position: absolute;
    inset: -60% -42%;
    z-index: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(235, 252, 255, 0.52) 46%, rgba(255, 255, 255, 0.86) 50%, rgba(192, 247, 255, 0.38) 54%, transparent 62%);
    opacity: 0;
    transform: translateX(-86%) rotate(8deg);
    pointer-events: none;
}

.crystal-tab.unlocked.show,
body.in-peka-zone button.crystal-tab.unlocked.show {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    animation: crystalTabPulse 2400ms ease-in-out infinite;
}

.crystal-tab.unlocked.show::after {
    animation: crystalShimmerWave 4000ms ease-in-out infinite;
}

.crystal-tab.unlocked.show + .peka-tab {
    bottom: 150px;
}

.crystal-tab > span {
    position: relative;
    z-index: 1;
}

.crystal-tab:hover {
    filter: brightness(1.08) saturate(1.08);
    transform: translateY(-2px) scale(1.01);
}

.crystal-tab:active {
    transform: translateY(3px) scale(0.98);
    box-shadow:
        0 2px 0 #271b73,
        0 7px 14px rgba(0, 0, 0, 0.28),
        0 0 14px rgba(125, 235, 255, 0.48),
        inset 0 2px 0 rgba(255, 255, 255, 0.72);
}

.crystal-tab.in-zone,
body.in-peka-zone button.crystal-tab.in-zone {
    background:
        linear-gradient(110deg, transparent 0 25%, rgba(255, 255, 255, 0.72) 33%, transparent 43% 100%),
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.98), transparent 32%),
        linear-gradient(135deg, #f3fdff 0%, #9cf4ff 34%, #8a9cff 64%, #542b99 100%);
    background-size: 220% 100%, auto, auto;
    color: #120b3d;
    box-shadow:
        0 5px 0 #2a236e,
        0 12px 22px rgba(0, 0, 0, 0.3),
        0 0 28px rgba(147, 244, 255, 0.84),
        inset 0 2px 0 rgba(255, 255, 255, 0.82);
    animation: crystalTabPulse 2400ms ease-in-out infinite, crystalTabPrism 1800ms linear infinite;
}

.crystal-tab.busy {
    cursor: wait;
    filter: saturate(0.75) brightness(0.95);
}

.crystal-tab:disabled {
    cursor: default;
}

.crystal-tab-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    font-size: 1.04rem;
    line-height: 1;
}

.crystal-tab-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    font-size: 0.8rem;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

.crystal-tab-tax-pill {
    flex: 0 0 auto;
    padding: 4px 6px;
    border: 2px solid rgba(236, 252, 255, 0.82);
    border-radius: 999px;
    background: rgba(18, 18, 88, 0.24);
    color: #f2fdff;
    font-size: 0.64rem;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(15, 10, 60, 0.72);
}

body.in-crystal-zone {
    background:
        radial-gradient(circle at 50% 18%, rgba(155, 245, 255, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(31, 47, 104, 0.18), rgba(10, 20, 52, 0.08));
}

body.in-crystal-zone #ui-layer {
}

.crystal-warp-overlay {
    position: fixed;
    inset: 0;
    z-index: 98;
    display: none;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(246, 254, 255, 0.94) 0 5%, rgba(133, 237, 255, 0.78) 18%, rgba(95, 112, 255, 0.58) 46%, rgba(12, 18, 54, 0.92) 100%);
    transition: opacity 150ms ease;
}

.crystal-warp-overlay.to-main {
    background:
        radial-gradient(circle at 50% 50%, rgba(240, 255, 225, 0.94) 0 5%, rgba(132, 224, 94, 0.72) 18%, rgba(50, 139, 68, 0.58) 46%, rgba(10, 42, 22, 0.92) 100%);
}

.crystal-warp-overlay.show {
    display: block;
}

.crystal-warp-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(34vmin, 300px);
    height: min(34vmin, 300px);
    border: 7px solid rgba(235, 252, 255, 0.88);
    border-radius: 34% 66% 38% 62% / 58% 42% 58% 42%;
    box-shadow:
        0 0 30px rgba(235, 252, 255, 0.82),
        0 0 86px rgba(128, 235, 255, 0.7),
        inset 0 0 34px rgba(255, 255, 255, 0.68);
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(0.62) rotate(0deg);
    animation: crystalWarpSpin 720ms linear infinite;
}

.crystal-zone-intro {
    position: fixed;
    left: 50%;
    top: 18px;
    z-index: 9;
    display: none;
    min-width: min(320px, calc(100vw - 32px));
    padding: 8px 14px 9px;
    border: 2px solid rgba(236, 252, 255, 0.86);
    border-radius: 999px;
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.9), transparent 30%),
        linear-gradient(135deg, rgba(232, 252, 255, 0.94), rgba(130, 229, 255, 0.88) 42%, rgba(88, 98, 210, 0.9));
    color: #111149;
    font-family: Arial, sans-serif;
    font-weight: 900;
    text-align: center;
    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(122, 238, 255, 0.46),
        inset 0 2px 0 rgba(255, 255, 255, 0.82);
    transform: translate(-50%, -10px);
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}

.crystal-zone-intro.show {
    display: block;
    opacity: 1;
    transform: translate(-50%, 0);
}

.crystal-zone-title {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crystal-zone-caption {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #23306e;
}

@keyframes crystalTabPulse {
    0%, 100% {
        box-shadow:
            0 5px 0 #271b73,
            0 12px 22px rgba(0, 0, 0, 0.28),
            0 0 16px rgba(125, 235, 255, 0.48),
            inset 0 2px 0 rgba(255, 255, 255, 0.78);
    }
    50% {
        box-shadow:
            0 5px 0 #271b73,
            0 12px 22px rgba(0, 0, 0, 0.28),
            0 0 28px rgba(125, 235, 255, 0.82),
            inset 0 2px 0 rgba(255, 255, 255, 0.82);
    }
}

@keyframes crystalShimmerWave {
    0%, 72% {
        opacity: 0;
        transform: translateX(-86%) rotate(8deg);
    }
    82% {
        opacity: 0.92;
    }
    100% {
        opacity: 0;
        transform: translateX(86%) rotate(8deg);
    }
}

@keyframes crystalTabPrism {
    from {
        background-position: -170% 0, 0 0, 0 0;
    }
    to {
        background-position: 170% 0, 0 0, 0 0;
    }
}

@keyframes crystalWarpSpin {
    from {
        transform: translate(-50%, -50%) scale(0.62) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) scale(1.08) rotate(360deg);
    }
}

@media (max-width: 540px) {
    .crystal-tab,
    body.in-peka-zone button.crystal-tab {
        right: 14px;
        bottom: 88px;
        min-width: 156px;
        min-height: 38px;
        padding: 7px 8px;
        gap: 5px;
        border-width: 3px;
    }

    .crystal-tab.unlocked.show + .peka-tab {
        bottom: 138px;
    }

    .crystal-tab-icon {
        width: 22px;
        height: 22px;
        font-size: 0.98rem;
    }

    .crystal-tab-label {
        font-size: 0.7rem;
    }

    .crystal-tab-tax-pill {
        padding: 3px 5px;
        font-size: 0.58rem;
    }

    .crystal-zone-intro {
        top: 10px;
        min-width: min(292px, calc(100vw - 28px));
    }
}

body.in-crystal-zone {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 50% 78%, rgba(0, 229, 255, 0.34) 0 12%, rgba(255, 128, 171, 0.2) 26%, transparent 48%),
        radial-gradient(ellipse at 16% 22%, rgba(179, 136, 255, 0.24) 0 16%, transparent 38%),
        radial-gradient(ellipse at 84% 32%, rgba(0, 229, 255, 0.2) 0 12%, transparent 34%),
        linear-gradient(180deg, #1a0033 0%, #2a075c 32%, #7c4dff 58%, #00e5ff 78%, #ff80ab 100%);
    background-size: 150% 150%, 120% 120%, 130% 130%, 100% 100%;
    animation: auroraShift 24s ease-in-out infinite;
}

body.in-crystal-zone::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.24;
    background:
        linear-gradient(115deg, transparent 0 18%, rgba(225, 190, 231, 0.18) 28%, transparent 42% 100%),
        radial-gradient(ellipse at 50% 52%, transparent 32%, rgba(0, 229, 255, 0.14) 62%, rgba(26, 0, 51, 0.54) 100%),
        radial-gradient(circle at 4% 12%, rgba(255, 128, 171, 0.2), transparent 28%),
        radial-gradient(circle at 96% 86%, rgba(179, 136, 255, 0.24), transparent 30%);
    background-size: 220% 100%, auto, auto, auto;
    animation: auroraVeilShift 24s ease-in-out infinite;
}

body.in-crystal-zone::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.18;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 0 52%, rgba(0, 229, 255, 0.2) 70%, rgba(255, 128, 171, 0.16) 82%, rgba(26, 0, 51, 0.68) 100%),
        linear-gradient(90deg, rgba(179, 136, 255, 0.24), transparent 10% 90%, rgba(0, 229, 255, 0.22)),
        linear-gradient(180deg, rgba(255, 128, 171, 0.18), transparent 12% 88%, rgba(124, 77, 255, 0.2));
    mix-blend-mode: screen;
}

body.in-crystal-zone #crystal-prism-overlay {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.18;
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.22), transparent 28%),
        linear-gradient(115deg, transparent 0 34%, rgba(0, 229, 255, 0.14) 44%, rgba(255, 128, 171, 0.12) 54%, transparent 66% 100%);
    animation: crystalPrismOpacity 9s ease-in-out infinite;
}

body.in-crystal-zone #ui-layer {
    z-index: 5;
}

body.in-crystal-zone #ui-layer::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 2px solid rgba(225, 190, 231, 0.44);
    clip-path: polygon(5% 0, 95% 0, 100% 12%, 100% 88%, 95% 100%, 5% 100%, 0 88%, 0 12%);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 18% 74%, rgba(0, 229, 255, 0.14)),
        linear-gradient(145deg, rgba(26, 0, 51, 0.22), rgba(124, 77, 255, 0.16));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.26),
        inset 0 0 28px rgba(0, 229, 255, 0.16),
        0 0 22px rgba(179, 136, 255, 0.28);
    pointer-events: none;
}

body.in-crystal-zone #shop-panel,
body.in-crystal-zone #water-panel,
body.in-crystal-zone #water-ui,
body.in-crystal-zone .shop-skip-option,
body.in-crystal-zone .upgrade-card,
body.in-crystal-zone .marketplace-card {
    border-color: rgba(225, 190, 231, 0.74);
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.2), transparent 16% 70%, rgba(0, 229, 255, 0.12)),
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.28), transparent 32%),
        linear-gradient(145deg, rgba(26, 0, 51, 0.78), rgba(124, 77, 255, 0.42) 48%, rgba(0, 229, 255, 0.24));
    color: #f8f7ff;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.48),
        inset 0 -18px 42px rgba(26, 0, 51, 0.34),
        0 0 0 1px rgba(0, 229, 255, 0.3),
        0 12px 30px rgba(26, 0, 51, 0.36),
        0 0 28px rgba(179, 136, 255, 0.28);
}

body.in-crystal-zone #shop-panel {
    position: relative;
    overflow: hidden;
}

body.in-crystal-zone #shop-panel::before {
    content: "";
    position: absolute;
    inset: -50% -35%;
    background:
        linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.34) 46%, rgba(0, 229, 255, 0.18) 51%, transparent 60%);
    opacity: 0.52;
    transform: translateX(-68%) rotate(10deg);
    animation: crystalPanelSweep 5.4s ease-in-out infinite;
    pointer-events: none;
}

body.in-crystal-zone #shop-panel .shop-title,
body.in-crystal-zone #shop-panel .catalog-title,
body.in-crystal-zone .shop-skip-title,
body.in-crystal-zone .upgrade-title {
    color: #ffffff;
    text-shadow: 0 0 9px rgba(0, 229, 255, 0.72), 0 2px 0 rgba(26, 0, 51, 0.58);
}

body.in-crystal-zone .seed-catalog-item,
body.in-crystal-zone .catalog-row,
body.in-crystal-zone .shop-card {
    border-color: rgba(0, 229, 255, 0.58);
    clip-path: polygon(5% 0, 95% 0, 100% 18%, 100% 82%, 95% 100%, 5% 100%, 0 82%, 0 18%);
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.18), transparent 22% 72%, rgba(255, 128, 171, 0.1)),
        linear-gradient(145deg, rgba(225, 190, 231, 0.18), rgba(0, 229, 255, 0.12) 45%, rgba(124, 77, 255, 0.28));
    color: #ffffff;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -10px 22px rgba(26, 0, 51, 0.28),
        0 0 0 1px rgba(255, 128, 171, 0.16),
        0 0 15px rgba(0, 229, 255, 0.18);
}

body.in-crystal-zone .catalog-row:hover,
body.in-crystal-zone .shop-card:hover {
    filter: brightness(1.12) saturate(1.16);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -10px 22px rgba(26, 0, 51, 0.28),
        0 0 18px rgba(0, 229, 255, 0.38),
        0 0 26px rgba(255, 128, 171, 0.18);
}

body.in-crystal-zone #money-counter,
body.in-crystal-zone #shop-timer {
    border-color: rgba(255, 255, 255, 0.9);
    background:
        linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.64) 38%, transparent 49% 100%),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9) 0 7%, transparent 8%),
        linear-gradient(145deg, #ffffff 0%, #00e5ff 34%, #b388ff 66%, #7c4dff 100%);
    background-size: 260% 100%, auto, auto;
    color: #120029;
    text-shadow: 0 1px 0 #ffffff, 0 0 9px rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.86),
        inset 0 -9px 0 rgba(26, 0, 51, 0.24),
        0 5px 0 #3b147a,
        0 12px 24px rgba(26, 0, 51, 0.32),
        0 0 24px rgba(0, 229, 255, 0.52),
        0 0 36px rgba(255, 128, 171, 0.22);
    animation: crystalPillPrism 3200ms linear infinite;
}

body.in-crystal-zone #money-counter {
    z-index: 6;
}

body.in-crystal-zone .water-button,
body.in-crystal-zone button:not(.crystal-tab):not(.peka-tab) {
    border: 3px solid rgba(225, 190, 231, 0.78);
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.46) 0 9%, transparent 10% 72%, rgba(255, 128, 171, 0.2) 84%, transparent 100%),
        linear-gradient(145deg, #b388ff 0%, #7c4dff 42%, #00e5ff 100%);
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(26, 0, 51, 0.72), 0 0 8px rgba(255, 255, 255, 0.56);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.52),
        0 4px 0 #2e1264,
        0 9px 18px rgba(26, 0, 51, 0.32),
        0 0 14px rgba(0, 229, 255, 0.3);
}

body.in-crystal-zone button:not(.crystal-tab):not(.peka-tab):disabled {
    filter: saturate(0.55) brightness(0.82);
    opacity: 0.74;
}

body.in-crystal-zone #water-bucket-hitbox {
    border: 0;
    background: rgba(255, 255, 255, 0.01);
    color: transparent;
    box-shadow: none;
    clip-path: none;
}

body.in-crystal-zone #water-fill {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(0, 229, 255, 0.92), rgba(179, 136, 255, 0.78), rgba(255, 128, 171, 0.76)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(0, 229, 255, 0.42));
    box-shadow:
        inset 0 5px 10px rgba(255, 255, 255, 0.5),
        0 0 16px rgba(0, 229, 255, 0.6);
}

body.in-crystal-zone .crystal-tax-badge {
    appearance: none;
    position: fixed;
    right: 14px;
    top: 58px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 166px;
    max-width: min(220px, calc(100vw - 28px));
    padding: 6px 13px 7px;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
    background:
        linear-gradient(110deg, transparent 0 25%, rgba(255, 255, 255, 0.82) 35%, rgba(0, 229, 255, 0.38) 42%, transparent 52% 100%),
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.96), transparent 26%),
        linear-gradient(145deg, #ffffff 0%, #00e5ff 30%, #b388ff 58%, #7c4dff 100%);
    background-size: 260% 100%, auto, auto;
    color: #120029;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.86),
        inset 0 -9px 0 rgba(26, 0, 51, 0.24),
        0 5px 0 #3b147a,
        0 12px 24px rgba(26, 0, 51, 0.32),
        0 0 24px rgba(0, 229, 255, 0.58),
        0 0 38px rgba(255, 128, 171, 0.28);
    transform: none;
    cursor: pointer;
    pointer-events: auto;
    overflow: hidden;
    isolation: isolate;
    animation: crystalBadgeFloat 2300ms ease-in-out infinite, crystalPillPrism 3000ms linear infinite;
}

body.in-crystal-zone .crystal-tax-badge::after {
    content: "";
    position: absolute;
    inset: -72% -44%;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.46) 45%, rgba(0, 229, 255, 0.58) 49%, rgba(255, 128, 171, 0.36) 53%, transparent 62%);
    opacity: 0;
    transform: translateX(-86%) rotate(8deg);
    pointer-events: none;
    animation: crystalFastShimmer 3000ms ease-in-out infinite;
}

body.in-crystal-zone .crystal-tax-main,
body.in-crystal-zone .crystal-tax-recipient {
    position: relative;
    z-index: 1;
}

body.in-crystal-zone .crystal-tax-main {
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

body.in-crystal-zone .crystal-tax-recipient {
    font-size: 0.5rem;
    color: #32145f;
    white-space: nowrap;
}

body.in-crystal-zone .crystal-zone-intro {
    top: 112px;
    border-color: rgba(255, 255, 255, 0.88);
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
    background:
        linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.68) 38%, transparent 49% 100%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(0, 229, 255, 0.8) 36%, rgba(124, 77, 255, 0.88));
    background-size: 260% 100%, auto;
    animation: crystalPillPrism 3600ms linear infinite;
}

body.in-crystal-zone .crystal-floater-field {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

body.in-crystal-zone .crystal-floater {
    position: absolute;
    left: var(--crystal-x, 50vw);
    bottom: -9vh;
    width: var(--crystal-size, 14px);
    height: calc(var(--crystal-size, 14px) * 1.36);
    clip-path: polygon(50% 0, 100% 28%, 78% 100%, 22% 100%, 0 28%);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(0, 229, 255, 0.72) 36%, rgba(179, 136, 255, 0.8) 68%, rgba(255, 128, 171, 0.72)),
        linear-gradient(45deg, transparent 0 42%, rgba(255, 255, 255, 0.72) 44% 52%, transparent 54% 100%);
    box-shadow:
        0 0 10px rgba(0, 229, 255, 0.6),
        0 0 18px rgba(255, 128, 171, 0.32);
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.62);
    animation: crystalFloaterRise var(--crystal-duration, 12s) linear var(--crystal-delay, 0s) infinite;
}

body.in-crystal-zone .crystal-ad-field {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

body.in-crystal-zone .crystal-ad {
    position: fixed;
    box-sizing: border-box;
    width: 132px;
    min-height: 42px;
    display: grid;
    place-items: center;
    padding: 8px 12px;
    border: 2px solid rgba(255, 255, 255, 0.78);
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
    background:
        linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.52) 38%, transparent 48% 100%),
        linear-gradient(145deg, rgba(26, 0, 51, 0.88), rgba(124, 77, 255, 0.72) 46%, rgba(0, 229, 255, 0.62));
    background-size: 260% 100%, auto;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
    text-shadow: 0 2px 0 rgba(26, 0, 51, 0.7), 0 0 10px rgba(0, 229, 255, 0.72);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.46),
        0 5px 0 rgba(26, 0, 51, 0.62),
        0 13px 24px rgba(26, 0, 51, 0.3),
        0 0 20px rgba(0, 229, 255, 0.26),
        0 0 28px rgba(255, 128, 171, 0.18);
    animation: crystalAdBob 4800ms ease-in-out var(--crystal-ad-delay, 0ms) infinite;
}

body.in-crystal-zone .crystal-ad::before {
    content: "";
    position: absolute;
    inset: 2px;
    clip-path: inherit;
    border: 1px solid rgba(255, 255, 255, 0.34);
    pointer-events: none;
}

body.in-crystal-zone .crystal-ad-left-one { left: 12px; top: 35%; }
body.in-crystal-zone .crystal-ad-right-one { right: 12px; top: 35%; }
body.in-crystal-zone .crystal-ad-left-two,
body.in-crystal-zone .crystal-ad-right-two { display: none; }

#crystal-tax-intro-modal {
    display: none;
}

body.in-crystal-zone #crystal-tax-intro-modal[aria-hidden="false"] {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 18px;
    background:
        radial-gradient(circle at 50% 40%, rgba(0, 229, 255, 0.28), transparent 34%),
        radial-gradient(circle at 24% 18%, rgba(255, 128, 171, 0.2), transparent 32%),
        rgba(10, 0, 26, 0.66);
}

body.in-crystal-zone .crystal-tax-intro-card {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: min(680px, calc(100vh - 34px));
    overflow: hidden auto;
    padding: 18px;
    border: 3px solid rgba(255, 255, 255, 0.88);
    clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.26), transparent 18% 72%, rgba(255, 128, 171, 0.14)),
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.34), transparent 30%),
        linear-gradient(145deg, rgba(26, 0, 51, 0.96), rgba(124, 77, 255, 0.76) 50%, rgba(0, 229, 255, 0.44));
    color: #ffffff;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.54),
        inset 0 -28px 70px rgba(26, 0, 51, 0.42),
        0 18px 40px rgba(0, 0, 0, 0.38),
        0 0 46px rgba(0, 229, 255, 0.38),
        0 0 70px rgba(255, 128, 171, 0.22);
    animation: crystalModalPop 240ms ease-out both;
}

body.in-crystal-zone .crystal-tax-intro-card::before {
    content: "";
    position: absolute;
    inset: -60% -30%;
    background:
        conic-gradient(from 0deg at 50% 50%, transparent 0 9%, rgba(255, 255, 255, 0.24) 12%, transparent 18%, rgba(0, 229, 255, 0.18) 28%, transparent 38%, rgba(255, 128, 171, 0.18) 48%, transparent 58%);
    opacity: 0.62;
    animation: crystalModalPrism 9s linear infinite;
    pointer-events: none;
}

body.in-crystal-zone .crystal-tax-intro-banner {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    padding: 14px 12px;
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
    background:
        linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.82) 38%, transparent 49% 100%),
        linear-gradient(135deg, #ffffff 0%, #00e5ff 27%, #b388ff 56%, #ff80ab 100%);
    background-size: 260% 100%, auto;
    color: #1a0033;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 5.5vw, 2.65rem);
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff, 0 0 14px rgba(255, 255, 255, 0.7);
    animation: crystalPillPrism 3000ms linear infinite;
}

body.in-crystal-zone .crystal-tax-intro-body {
    position: relative;
    z-index: 1;
    padding: 14px 15px;
    border: 1px solid rgba(225, 190, 231, 0.42);
    background: rgba(26, 0, 51, 0.4);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.45;
    text-shadow: 0 2px 0 rgba(26, 0, 51, 0.64);
}

body.in-crystal-zone .crystal-tax-intro-body strong {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.82), 0 0 18px rgba(255, 128, 171, 0.38);
}

body.in-crystal-zone .crystal-tax-intro-btn,
body.in-crystal-zone .crystal-tax-intro-accept {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 14px;
    min-height: 52px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
    background:
        linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.72) 38%, transparent 50% 100%),
        linear-gradient(145deg, #ff80ab 0%, #b388ff 34%, #7c4dff 58%, #00e5ff 100%);
    background-size: 260% 100%, auto;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 0 rgba(26, 0, 51, 0.7), 0 0 12px rgba(255, 255, 255, 0.45);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.52),
        0 5px 0 #31106a,
        0 12px 24px rgba(26, 0, 51, 0.36),
        0 0 22px rgba(0, 229, 255, 0.38);
    animation: crystalPillPrism 2600ms linear infinite;
}

.crystal-teleport-overlay {
    position: fixed;
    inset: 0;
    z-index: 98;
    display: none;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 4%, rgba(0, 229, 255, 0.78) 16%, rgba(124, 77, 255, 0.7) 42%, rgba(26, 0, 51, 0.96) 100%);
    transition: opacity 150ms ease;
}

.crystal-teleport-overlay.to-main {
    background:
        radial-gradient(circle at 50% 50%, rgba(240, 255, 225, 0.96) 0 4%, rgba(116, 222, 86, 0.78) 16%, rgba(46, 142, 62, 0.7) 42%, rgba(9, 40, 20, 0.96) 100%);
}

.crystal-teleport-overlay.show {
    display: block;
}

.crystal-teleport-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%) rotate(0deg);
    mix-blend-mode: screen;
    opacity: 0.72;
    background:
        conic-gradient(from 0deg, transparent 0 5%, rgba(255, 255, 255, 0.8) 8%, transparent 12%, rgba(0, 229, 255, 0.54) 20%, transparent 28%, rgba(255, 128, 171, 0.5) 36%, transparent 45%, rgba(179, 136, 255, 0.52) 55%, transparent 70%);
    clip-path: polygon(50% 50%, 56% 0, 62% 50%, 100% 43%, 64% 58%, 78% 100%, 54% 64%, 17% 100%, 42% 58%, 0 45%, 43% 49%, 30% 0);
    animation: crystalTeleportSpin 1400ms linear infinite;
}

.crystal-teleport-layer-2 {
    opacity: 0.55;
    transform: translate(-50%, -50%) rotate(22deg);
    animation-duration: 1100ms;
    animation-direction: reverse;
}

.crystal-teleport-layer-3 {
    opacity: 0.42;
    transform: translate(-50%, -50%) rotate(48deg);
    animation-duration: 1700ms;
}

.crystal-teleport-layer-4 {
    opacity: 0.34;
    transform: translate(-50%, -50%) rotate(82deg);
    animation-duration: 2200ms;
    animation-direction: reverse;
}

.crystal-teleport-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(38vmin, 340px);
    height: min(38vmin, 340px);
    border: 7px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    box-shadow:
        0 0 26px rgba(255, 255, 255, 0.76),
        0 0 70px rgba(0, 229, 255, 0.64),
        inset 0 0 26px rgba(179, 136, 255, 0.58);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22);
    animation: crystalTeleportRingExpand 1400ms cubic-bezier(0.18, 0.82, 0.22, 1) infinite;
}

.crystal-teleport-ring-2 { animation-delay: 160ms; border-color: rgba(0, 229, 255, 0.68); }
.crystal-teleport-ring-3 { animation-delay: 320ms; border-color: rgba(255, 128, 171, 0.62); }
.crystal-teleport-ring-4 { animation-delay: 480ms; border-color: rgba(179, 136, 255, 0.62); }

.crystal-teleport-core,
.crystal-warp-core {
    border-color: rgba(255, 255, 255, 0.92);
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.86) 0 16%, rgba(0, 229, 255, 0.54) 28%, rgba(255, 128, 171, 0.34) 48%, transparent 70%);
    box-shadow:
        0 0 34px rgba(255, 255, 255, 0.9),
        0 0 92px rgba(0, 229, 255, 0.78),
        0 0 128px rgba(255, 128, 171, 0.46),
        inset 0 0 36px rgba(255, 255, 255, 0.82);
}

@keyframes auroraShift {
    0%, 100% {
        background-position: 50% 50%, 0% 0%, 100% 0%, 0 0;
    }
    50% {
        background-position: 46% 58%, 8% 12%, 92% 18%, 0 0;
    }
}

@keyframes auroraVeilShift {
    0%, 100% { background-position: -60% 0, 0 0, 0 0, 0 0; }
    50% { background-position: 120% 0, 0 0, 0 0, 0 0; }
}

@keyframes crystalPrismOpacity {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.2; }
}

@keyframes crystalPanelSweep {
    0%, 62% { transform: translateX(-68%) rotate(10deg); opacity: 0; }
    74% { opacity: 0.62; }
    100% { transform: translateX(68%) rotate(10deg); opacity: 0; }
}

@keyframes crystalPillPrism {
    from { background-position: -180% 0, 0 0, 0 0; }
    to { background-position: 180% 0, 0 0, 0 0; }
}

@keyframes crystalFastShimmer {
    0%, 62% { opacity: 0; transform: translateX(-86%) rotate(8deg); }
    76% { opacity: 0.92; }
    100% { opacity: 0; transform: translateX(86%) rotate(8deg); }
}

@keyframes crystalBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes crystalFloaterRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5);
    }
    12% { opacity: 0.86; }
    48% {
        opacity: 0.52;
        transform: translate3d(calc(var(--crystal-drift, 30px) * 0.45), -52vh, 0) rotate(210deg) scale(1.18);
    }
    82% { opacity: 0.78; }
    100% {
        opacity: 0;
        transform: translate3d(var(--crystal-drift, 30px), -116vh, 0) rotate(520deg) scale(0.7);
    }
}

@keyframes crystalAdBob {
    0%, 100% { transform: translateY(0) rotate(-0.8deg); }
    50% { transform: translateY(-8px) rotate(0.8deg); }
}

@keyframes crystalBorderHue {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.94; }
}

@keyframes crystalModalPop {
    from { opacity: 0; transform: translateY(18px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes crystalModalPrism {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes crystalTeleportSpin {
    from { transform: translate(-50%, -50%) rotate(0deg) scale(0.74); }
    to { transform: translate(-50%, -50%) rotate(360deg) scale(1.08); }
}

@keyframes crystalTeleportRingExpand {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.22); }
    18% { opacity: 0.94; }
    76% { opacity: 0.62; transform: translate(-50%, -50%) scale(2.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.82); }
}

@media (max-width: 760px) {
    body.in-crystal-zone .crystal-ad {
        width: 126px;
        min-height: 36px;
        padding: 7px 10px;
        font-size: 0.62rem;
    }

    body.in-crystal-zone .crystal-ad-left-one,
    body.in-crystal-zone .crystal-ad-left-two {
        left: 8px;
    }

    body.in-crystal-zone .crystal-ad-right-one,
    body.in-crystal-zone .crystal-ad-right-two {
        right: 8px;
    }

    body.in-crystal-zone .crystal-ad-left-one,
    body.in-crystal-zone .crystal-ad-right-one {
        top: 34%;
    }

    body.in-crystal-zone .crystal-ad-left-two,
    body.in-crystal-zone .crystal-ad-right-two {
        top: 68%;
    }

    body.in-crystal-zone .crystal-tax-badge {
        top: 52px;
        min-width: 186px;
        padding: 8px 14px;
    }

    body.in-crystal-zone .crystal-tax-main {
        font-size: 0.74rem;
    }

    body.in-crystal-zone .crystal-tax-recipient {
        font-size: 0.58rem;
    }

    body.in-crystal-zone .crystal-zone-intro {
        top: 100px;
        min-width: min(280px, calc(100vw - 28px));
    }
}

@media (max-width: 540px) {
    body.in-crystal-zone #ui-layer::before {
        inset: -7px;
    }

    body.in-crystal-zone .crystal-ad {
        width: 104px;
        min-height: 32px;
        padding: 6px 8px;
        font-size: 0.56rem;
    }

    body.in-crystal-zone .crystal-ad-left-one,
    body.in-crystal-zone .crystal-ad-right-one {
        top: auto;
        bottom: 160px;
    }

    body.in-crystal-zone .crystal-ad-left-two,
    body.in-crystal-zone .crystal-ad-right-two {
        display: none;
    }

    body.in-crystal-zone .crystal-tax-intro-card {
        padding: 14px;
    }

    body.in-crystal-zone .crystal-tax-intro-body {
        font-size: 0.9rem;
    }
}

body.crystal-teleporting #canvas-container canvas {
    opacity: 0.96;
    animation: crystalChromaticJitter 180ms steps(2, end) infinite;
    transition: opacity 240ms ease;
}

.crystal-teleport-overlay {
    z-index: 99;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 4%, rgba(0, 229, 255, 0.8) 15%, rgba(179, 136, 255, 0.76) 34%, rgba(124, 77, 255, 0.72) 56%, rgba(26, 0, 51, 0.98) 100%);
    transition: opacity 110ms linear;
}

.crystal-teleport-overlay.to-crystal {
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.98) 0 4%, rgba(0, 229, 255, 0.84) 15%, rgba(255, 128, 171, 0.5) 29%, rgba(124, 77, 255, 0.82) 55%, rgba(26, 0, 51, 0.98) 100%),
        conic-gradient(from 0deg at 50% 50%, rgba(0, 229, 255, 0.32), rgba(255, 255, 255, 0.2), rgba(255, 128, 171, 0.26), rgba(179, 136, 255, 0.32), rgba(0, 229, 255, 0.32));
}

.crystal-teleport-overlay.to-main {
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.96) 0 4%, rgba(199, 255, 201, 0.84) 15%, rgba(97, 218, 108, 0.66) 32%, rgba(46, 142, 62, 0.72) 56%, rgba(9, 40, 20, 0.98) 100%),
        conic-gradient(from 30deg at 50% 50%, rgba(0, 229, 255, 0.2), rgba(226, 255, 220, 0.42), rgba(91, 221, 110, 0.26), rgba(179, 136, 255, 0.18), rgba(0, 229, 255, 0.2));
}

.crystal-teleport-overlay.phase-void {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0 9%, rgba(224, 251, 255, 0.98) 17%, rgba(0, 229, 255, 0.66) 31%, rgba(255, 128, 171, 0.32) 48%, rgba(124, 77, 255, 0.72) 72%, rgba(26, 0, 51, 0.98) 100%),
        radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.78) 0 2%, transparent 16%),
        radial-gradient(circle at 82% 62%, rgba(255, 128, 171, 0.56) 0 2%, transparent 18%);
}

.crystal-teleport-overlay .ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(26vmin, 260px);
    height: min(26vmin, 260px);
    border: 6px solid transparent;
    border-radius: 50%;
    opacity: 0;
    background:
        linear-gradient(#05001b, #05001b) padding-box,
        conic-gradient(from 0deg, #ffffff, #00e5ff, #b388ff, #ff80ab, #ffffff, #7c4dff, #00e5ff, #ffffff) border-box;
    box-shadow:
        0 0 22px rgba(255, 255, 255, 0.82),
        0 0 58px rgba(0, 229, 255, 0.62),
        0 0 88px rgba(255, 128, 171, 0.34),
        inset 0 0 26px rgba(179, 136, 255, 0.5);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) scale(0.12) rotate(0deg);
    animation: none;
}

.crystal-teleport-overlay.phase-shatter .ring {
    animation: crystalTeleportRingShatterIn 440ms cubic-bezier(0.08, 0.8, 0.12, 1) both;
}

.crystal-teleport-overlay.phase-void .ring {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(2.7) rotate(110deg);
    animation: crystalVoidRingPulse 340ms ease-in-out infinite alternate;
}

.crystal-teleport-overlay.phase-out .ring {
    animation: crystalTeleportRingContract 800ms cubic-bezier(0.2, 0.8, 0.28, 1) both;
}

.crystal-teleport-overlay .crystal-teleport-ring-2 { animation-delay: 55ms; }
.crystal-teleport-overlay .crystal-teleport-ring-3 { animation-delay: 110ms; }
.crystal-teleport-overlay .crystal-teleport-ring-4 { animation-delay: 165ms; }
.crystal-teleport-overlay .crystal-teleport-ring-5 { animation-delay: 220ms; }
.crystal-teleport-overlay .crystal-teleport-ring-6 { animation-delay: 275ms; }

.crystal-teleport-overlay.phase-shatter .crystal-teleport-core,
.crystal-teleport-overlay.phase-void .crystal-teleport-core {
    animation: crystalTeleportCorePulse 360ms ease-in-out infinite alternate;
}

.crystal-teleport-overlay.phase-out .crystal-teleport-core {
    animation: crystalTeleportCoreCollapse 760ms ease-in both;
}

.crystal-teleport-overlay.phase-out .crystal-teleport-layer {
    animation: crystalTeleportLayerOut 800ms ease-out both;
}

.crystal-teleport-shard {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 16px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(0, 229, 255, 0.82) 34%, rgba(179, 136, 255, 0.82) 66%, rgba(255, 128, 171, 0.82)),
        linear-gradient(45deg, transparent 0 42%, rgba(255, 255, 255, 0.92) 44% 54%, transparent 56% 100%);
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.74),
        0 0 18px rgba(0, 229, 255, 0.68),
        0 0 26px rgba(255, 128, 171, 0.38);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.2) rotate(var(--crystal-shard-rot, 0deg));
    mix-blend-mode: screen;
}

.crystal-teleport-overlay.phase-out .crystal-teleport-shard {
    animation: crystalTeleportShardBurst 760ms cubic-bezier(0.12, 0.74, 0.2, 1) var(--crystal-shard-delay, 0ms) both;
}

.crystal-teleport-overlay.phase-abort .crystal-teleport-layer,
.crystal-teleport-overlay.phase-abort .ring,
.crystal-teleport-overlay.phase-abort .crystal-teleport-core {
    animation-play-state: paused;
}

@keyframes crystalChromaticJitter {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(1px, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes crystalTeleportRingShatterIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.05) rotate(-24deg);
    }
    28% {
        opacity: 1;
    }
    76% {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(2.55) rotate(96deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3.2) rotate(140deg);
    }
}

@keyframes crystalVoidRingPulse {
    from {
        box-shadow:
            0 0 24px rgba(255, 255, 255, 0.84),
            0 0 58px rgba(0, 229, 255, 0.66),
            0 0 88px rgba(255, 128, 171, 0.34),
            inset 0 0 26px rgba(179, 136, 255, 0.5);
    }
    to {
        box-shadow:
            0 0 34px rgba(255, 255, 255, 0.96),
            0 0 82px rgba(0, 229, 255, 0.82),
            0 0 116px rgba(255, 128, 171, 0.48),
            inset 0 0 36px rgba(255, 255, 255, 0.62);
    }
}

@keyframes crystalTeleportRingContract {
    0% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(2.85) rotate(120deg);
    }
    62% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.46) rotate(290deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.12) rotate(420deg);
    }
}

@keyframes crystalTeleportCorePulse {
    from {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(0.72) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.14) rotate(24deg);
    }
}

@keyframes crystalTeleportCoreCollapse {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.08) rotate(-180deg);
    }
}

@keyframes crystalTeleportLayerOut {
    0% {
        opacity: 0.72;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(160deg) scale(1.45);
    }
}

@keyframes crystalTeleportShardBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18) rotate(var(--crystal-shard-rot, 0deg));
    }
    12% {
        opacity: 1;
    }
    68% {
        opacity: 0.86;
        transform:
            translate(calc(-50% + var(--crystal-shard-x, 40vmin)), calc(-50% + var(--crystal-shard-y, 20vmin)))
            scale(1.05)
            rotate(calc(var(--crystal-shard-rot, 0deg) + 220deg));
    }
    100% {
        opacity: 0;
        transform:
            translate(calc(-50% + var(--crystal-shard-x, 40vmin)), calc(-50% + var(--crystal-shard-y, 20vmin)))
            scale(0.42)
            rotate(calc(var(--crystal-shard-rot, 0deg) + 420deg));
    }
}

@media (max-width: 540px) {
    .crystal-teleport-shard {
        width: 10px;
        height: 13px;
    }

    .crystal-teleport-overlay .ring {
        width: min(34vmin, 230px);
        height: min(34vmin, 230px);
        border-width: 5px;
    }
}

body.in-crystal-zone .crystal-champion-banner {
    position: fixed;
    left: 50%;
    top: 124px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: min(360px, calc(100vw - 32px));
    padding: 9px 18px 10px;
    border: 2px solid rgba(255, 255, 255, 0.86);
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
    background:
        linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.72) 38%, rgba(0, 229, 255, 0.3) 44%, transparent 54% 100%),
        radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.9), transparent 28%),
        linear-gradient(145deg, rgba(26, 0, 51, 0.88), rgba(124, 77, 255, 0.84) 44%, rgba(0, 229, 255, 0.66));
    background-size: 280% 100%, auto, auto;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    text-shadow: 0 2px 0 rgba(26, 0, 51, 0.72), 0 0 10px rgba(0, 229, 255, 0.7);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.52),
        inset 0 -10px 24px rgba(26, 0, 51, 0.32),
        0 5px 0 rgba(46, 18, 100, 0.78),
        0 13px 26px rgba(26, 0, 51, 0.34),
        0 0 24px rgba(0, 229, 255, 0.44),
        0 0 40px rgba(255, 128, 171, 0.22);
    transform: translateX(-50%);
    cursor: pointer;
    overflow: hidden;
    animation: crystalPillPrism 3600ms linear infinite, crystalBadgeFloat 2600ms ease-in-out infinite;
}

body.in-crystal-zone .crystal-champion-banner::after {
    content: "";
    position: absolute;
    inset: -70% -38%;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.58) 46%, rgba(255, 128, 171, 0.32) 51%, transparent 62%);
    opacity: 0;
    transform: translateX(-84%) rotate(9deg);
    animation: crystalFastShimmer 3100ms ease-in-out infinite;
    pointer-events: none;
}

body.in-crystal-zone .crystal-champion-title,
body.in-crystal-zone .crystal-champion-rotation {
    position: relative;
    z-index: 1;
}

body.in-crystal-zone .crystal-champion-title {
    font-size: 0.86rem;
}

body.in-crystal-zone .crystal-champion-rotation {
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
    color: #eaffff;
}

body.in-crystal-zone .crystal-zone-intro {
    top: 184px;
}

#crystal-throne-overlay,
.crystal-champion-intro-modal {
    display: none;
}

#crystal-throne-overlay[aria-hidden="false"],
.crystal-champion-intro-modal[aria-hidden="false"] {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    place-items: center;
    padding: 18px;
    background:
        radial-gradient(circle at 50% 40%, rgba(0, 229, 255, 0.3), transparent 34%),
        radial-gradient(circle at 22% 18%, rgba(255, 128, 171, 0.24), transparent 32%),
        rgba(10, 0, 26, 0.74);
}

.crystal-throne-card,
.crystal-champion-intro-card {
    position: relative;
    width: min(610px, calc(100vw - 32px));
    max-height: min(720px, calc(100vh - 34px));
    overflow: hidden auto;
    padding: 20px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px), 0 26px);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.28), transparent 18% 72%, rgba(255, 128, 171, 0.16)),
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.34), transparent 30%),
        linear-gradient(145deg, rgba(26, 0, 51, 0.98), rgba(124, 77, 255, 0.82) 48%, rgba(0, 229, 255, 0.48));
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.56),
        inset 0 -30px 78px rgba(26, 0, 51, 0.46),
        0 18px 42px rgba(0, 0, 0, 0.4),
        0 0 52px rgba(0, 229, 255, 0.42),
        0 0 80px rgba(255, 128, 171, 0.24);
    animation: crystalModalPop 240ms ease-out both;
}

.crystal-throne-card::before,
.crystal-champion-intro-card::before {
    content: "";
    position: absolute;
    inset: -60% -30%;
    background:
        conic-gradient(from 0deg at 50% 50%, transparent 0 9%, rgba(255, 255, 255, 0.24) 12%, transparent 18%, rgba(0, 229, 255, 0.18) 28%, transparent 38%, rgba(255, 128, 171, 0.18) 48%, transparent 58%);
    opacity: 0.64;
    animation: crystalModalPrism 9s linear infinite;
    pointer-events: none;
}

.crystal-throne-close {
    position: absolute;
    right: 14px;
    top: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    background: linear-gradient(145deg, #ff80ab, #7c4dff 54%, #00e5ff);
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.44);
}

.crystal-throne-kicker {
    position: relative;
    z-index: 1;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #eaffff;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.82);
}

.crystal-throne-title,
.crystal-champion-intro-banner {
    position: relative;
    z-index: 1;
    margin: 8px 42px 16px 0;
    padding: 14px 12px;
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
    background:
        linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.82) 38%, transparent 49% 100%),
        linear-gradient(135deg, #ffffff 0%, #00e5ff 27%, #b388ff 56%, #ff80ab 100%);
    background-size: 260% 100%, auto;
    color: #1a0033;
    font-size: clamp(1.45rem, 5vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff, 0 0 14px rgba(255, 255, 255, 0.72);
    animation: crystalPillPrism 3000ms linear infinite;
}

.crystal-throne-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.crystal-throne-stat,
.crystal-throne-loading,
.crystal-throne-empty,
.crystal-throne-history-row {
    border: 1px solid rgba(225, 190, 231, 0.46);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 34%),
        rgba(26, 0, 51, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 0 14px rgba(0, 229, 255, 0.16);
}

.crystal-throne-stat {
    padding: 12px 10px;
    text-align: center;
}

.crystal-throne-stat span {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #eaffff;
}

.crystal-throne-stat strong {
    display: block;
    margin-top: 5px;
    font-size: 1.45rem;
    color: #ffffff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.82), 0 0 18px rgba(255, 128, 171, 0.38);
}

.crystal-throne-loading,
.crystal-throne-empty {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    padding: 18px;
    text-align: center;
    font-weight: 900;
}

.crystal-throne-history-title {
    position: relative;
    z-index: 1;
    margin: 18px 0 8px;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #eaffff;
}

.crystal-throne-history {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 7px;
}

.crystal-throne-history-row {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    font-family: Arial, sans-serif;
    color: #ffffff;
}

.crystal-throne-history-row span {
    color: #eaffff;
    font-weight: 800;
}

.crystal-throne-history-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crystal-throne-history-row em {
    font-style: normal;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.76);
}

.crystal-champion-intro-card {
    width: min(520px, calc(100vw - 32px));
    text-align: center;
    overflow: visible;
}

.crystal-champion-intro-banner {
    margin-right: 0;
}

.crystal-champion-intro-name {
    position: relative;
    z-index: 1;
    font-size: clamp(1.4rem, 5vw, 2.4rem);
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 0 16px rgba(0, 229, 255, 0.88), 0 0 26px rgba(255, 128, 171, 0.5);
}

.crystal-champion-intro-card p {
    position: relative;
    z-index: 1;
    margin: 14px 0;
    font-size: 1.04rem;
    line-height: 1.35;
    text-shadow: 0 2px 0 rgba(26, 0, 51, 0.72);
}

.crystal-champion-intro-accept {
    position: relative;
    z-index: 1;
    min-height: 48px;
    padding: 0 22px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
    background:
        linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.76) 38%, transparent 50% 100%),
        linear-gradient(145deg, #ff80ab 0%, #b388ff 34%, #7c4dff 58%, #00e5ff 100%);
    background-size: 260% 100%, auto;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 900;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.52),
        0 5px 0 #31106a,
        0 12px 24px rgba(26, 0, 51, 0.36),
        0 0 22px rgba(0, 229, 255, 0.38);
    animation: crystalPillPrism 2600ms linear infinite;
}

.crystal-crown-particle {
    position: absolute;
    left: var(--crown-x, 50%);
    bottom: 12px;
    z-index: 0;
    font-size: 1rem;
    opacity: 0;
    pointer-events: none;
    animation: crystalCrownBurst 1900ms ease-out var(--crown-delay, 0ms) both;
}

@keyframes crystalCrownBurst {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0) scale(0.3) rotate(0deg);
    }
    14% {
        opacity: 1;
    }
    76% {
        opacity: 0.85;
        transform: translate3d(calc(-50% + var(--crown-drift, 0px)), -170px, 0) scale(1.22) rotate(240deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--crown-drift, 0px)), -230px, 0) scale(0.58) rotate(420deg);
    }
}

@media (max-width: 760px) {
    body.in-crystal-zone .crystal-champion-banner {
        top: 112px;
        min-width: min(316px, calc(100vw - 28px));
        padding: 8px 14px;
    }

    body.in-crystal-zone .crystal-zone-intro {
        top: 168px;
    }

    .crystal-throne-stats {
        grid-template-columns: 1fr;
    }

    .crystal-throne-history-row {
        grid-template-columns: 82px 1fr;
    }

    .crystal-throne-history-row em {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 540px) {
    body.in-crystal-zone .crystal-champion-banner {
        top: 104px;
        min-width: min(292px, calc(100vw - 24px));
    }

    body.in-crystal-zone .crystal-champion-title {
        font-size: 0.76rem;
    }

    body.in-crystal-zone .crystal-champion-rotation {
        font-size: 0.6rem;
    }

    body.in-crystal-zone .crystal-zone-intro {
        top: 156px;
    }

    .crystal-throne-card,
    .crystal-champion-intro-card {
        padding: 16px;
    }
}

.crystal-tab-tooltip {
    position: fixed;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 188px;
    padding: 9px 12px 10px;
    border: 2px solid rgba(255, 255, 255, 0.86);
    border-radius: 12px;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.24), rgba(0, 229, 255, 0.16) 32%, rgba(124, 77, 255, 0.78)),
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.74), transparent 32%),
        rgba(26, 0, 51, 0.88);
    color: #f8feff;
    font-family: Arial, sans-serif;
    text-align: center;
    text-shadow: 0 1px 0 rgba(26, 0, 51, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 10px 24px rgba(26, 0, 51, 0.36),
        0 0 20px rgba(0, 229, 255, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%) translateY(8px) scale(0.96);
    transition: opacity 140ms ease, transform 140ms ease;
}

.crystal-tab-tooltip.show {
    opacity: 1;
    transform: translate(-50%, -100%) translateY(0) scale(1);
}

.crystal-tab-tooltip strong {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ef7ff;
}

.crystal-tab-tooltip span {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 900;
}

.crystal-tab-tooltip em {
    font-size: 0.68rem;
    font-style: normal;
    color: #ffd7ec;
}

body.in-crystal-zone .claim-pop.crystal-tax-pop {
    z-index: 76;
    color: #9ef7ff;
    font-size: 1rem;
    letter-spacing: 0;
    text-shadow:
        -2px 0 0 rgba(255, 128, 171, 0.72),
        2px 0 0 rgba(0, 229, 255, 0.82),
        2px 2px 0 #1a0033,
        0 0 12px rgba(0, 229, 255, 0.9),
        0 0 24px rgba(179, 136, 255, 0.58);
    filter: saturate(1.45);
    animation: crystalTaxPopFly 1180ms cubic-bezier(0.14, 0.86, 0.24, 1) forwards;
}

.crystal-money-prism-flash {
    position: fixed;
    z-index: 72;
    width: 46px;
    height: 46px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
    clip-path: polygon(50% 0, 62% 32%, 100% 38%, 70% 58%, 82% 100%, 50% 72%, 18% 100%, 30% 58%, 0 38%, 38% 32%);
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 18%, rgba(0, 229, 255, 0.78) 32%, rgba(255, 128, 171, 0.52) 54%, transparent 72%),
        conic-gradient(from 0deg, #ffffff, #00e5ff, #b388ff, #ff80ab, #ffffff);
    mix-blend-mode: screen;
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.72),
        0 0 18px rgba(0, 229, 255, 0.52),
        0 0 28px rgba(255, 128, 171, 0.3);
    animation: crystalMoneyPrismFlash 360ms ease-out forwards;
}

.crystal-prism-burst-flash {
    position: fixed;
    inset: 0;
    z-index: 118;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.94) 0 10%, rgba(0, 229, 255, 0.52) 18%, rgba(255, 128, 171, 0.32) 32%, transparent 58%),
        conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.5), rgba(0, 229, 255, 0.32), rgba(179, 136, 255, 0.34), rgba(255, 128, 171, 0.3), rgba(255, 255, 255, 0.5));
    mix-blend-mode: screen;
    opacity: 0;
    animation: crystalPrismBurstFlash 250ms ease-out forwards;
}

@keyframes crystalTaxPopFly {
    0% {
        opacity: 0;
        transform: translate(-50%, -35%) scale(0.68) skewX(-4deg);
        filter: hue-rotate(0deg) saturate(1.4);
    }
    12% {
        opacity: 1;
        transform: translate(-50%, -72%) scale(1.12) skewX(5deg);
    }
    46% {
        text-shadow:
            2px 0 0 rgba(255, 128, 171, 0.72),
            -2px 0 0 rgba(0, 229, 255, 0.82),
            2px 2px 0 #1a0033,
            0 0 14px rgba(0, 229, 255, 0.92),
            0 0 26px rgba(179, 136, 255, 0.58);
    }
    72% {
        opacity: 1;
        transform:
            translate(
                calc(-50% + var(--crystal-tax-pop-mid-dx, 0px)),
                calc(-50% + var(--crystal-tax-pop-mid-dy, -90px))
            )
            scale(0.9)
            skewX(-3deg);
        filter: hue-rotate(80deg) saturate(1.7);
    }
    100% {
        opacity: 0;
        transform:
            translate(
                calc(-50% + var(--crystal-tax-pop-dx, 0px)),
                calc(-50% + var(--crystal-tax-pop-dy, -140px))
            )
            scale(0.56)
            skewX(6deg);
        filter: hue-rotate(150deg) saturate(1.2);
    }
}

@keyframes crystalMoneyPrismFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18) rotate(0deg);
    }
    32% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(68deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.42) rotate(210deg);
    }
}

@keyframes crystalPrismBurstFlash {
    0% {
        opacity: 0;
        filter: hue-rotate(0deg) saturate(1.2);
    }
    28% {
        opacity: 0.86;
    }
    100% {
        opacity: 0;
        filter: hue-rotate(160deg) saturate(2);
    }
}

@media (max-width: 760px), (pointer: coarse) {
    body.in-crystal-zone #crystal-prism-overlay {
        display: none;
    }

    body.in-crystal-zone::before {
        opacity: 0.16;
    }

    body.in-crystal-zone::after {
        opacity: 0.12;
    }

    .crystal-tab-tooltip {
        display: none;
    }

    body.in-crystal-zone .crystal-floater {
        animation-duration: calc(var(--crystal-duration, 12s) * 1.25);
        opacity: 0.68;
    }

    .crystal-teleport-overlay {
        filter: saturate(0.85);
    }

    .crystal-teleport-overlay .ring {
        width: min(32vmin, 210px);
        height: min(32vmin, 210px);
        border-width: 4px;
    }

    .crystal-teleport-shard {
        width: 9px;
        height: 12px;
    }

    .crystal-prism-burst-flash {
        opacity: 0;
        animation-duration: 180ms;
    }
}

body.in-crystal-zone .crystal-champion-banner {
    display: none;
}

@media (max-width: 720px) {
    body.in-crystal-zone .crystal-ad {
        display: none;
    }

    body.in-crystal-zone .crystal-tax-badge {
        right: 8px;
        top: 52px;
        min-width: 138px;
        max-width: calc(100vw - 16px);
        padding: 5px 9px 6px;
    }

    body.in-crystal-zone .crystal-tax-main {
        font-size: 0.64rem;
    }

    body.in-crystal-zone .crystal-tax-recipient {
        font-size: 0.46rem;
    }
}