.coin-box {
    border-radius: 32px;

    width: 1200px;
    height: auto;

    background-color: #ffffff;

    margin-top: 32px;
    margin-bottom: 32px;

    padding-top: 80px;
    padding-bottom: 80px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.coin-scope-box {
    border-radius: 24px;

    width: 1040px;
    height: auto;

    background: radial-gradient(circle, #f8f8f8 88%, transparent 100%);

    padding-bottom: 20px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.coin-flip-box {
    border-radius: 24px;

    width: 1000px;
    height: 480px;

    background-color: #ffffff;

    margin-top: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
}

.coin-flip-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(127, 159, 110, 0.42);
    box-shadow: 0 0 18px rgba(127, 159, 110, 0.08);
    pointer-events: none;
    z-index: 2;
}

.coin-flip-orbit-one {
    width: min(86%, 760px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(-12deg) scaleY(0.58);
    animation: coinScopeOrbitOne 18s linear infinite;
}

.coin-flip-orbit-two {
    width: min(62%, 560px);
    aspect-ratio: 1;
    border-color: rgba(209, 165, 103, 0.42);
    box-shadow: 0 0 18px rgba(209, 165, 103, 0.08);
    transform: translate(-50%, -50%) rotate(18deg) scaleY(0.68);
    animation: coinScopeOrbitTwo 24s linear infinite reverse;
}

.coin-flip-marker {
    position: absolute;
    border-radius: 999px;
    background: rgba(127, 159, 110, 0.26);
    box-shadow: 0 10px 20px rgba(78, 95, 88, 0.12);
    pointer-events: none;
    z-index: 3;
}

.coin-flip-marker-one {
    top: 19%;
    right: 20%;
    width: 48px;
    height: 16px;
    transform: rotate(-16deg);
    animation: coinScopeMarkerDrift 7s ease-in-out infinite;
}

.coin-flip-marker-two {
    left: 20%;
    bottom: 22%;
    width: 36px;
    height: 13px;
    background: rgba(230, 184, 191, 0.58);
    transform: rotate(20deg);
    animation: coinScopeMarkerDrift 8s ease-in-out 500ms infinite reverse;
}

@keyframes coinScopeOrbitOne {
    from {
        transform: translate(-50%, -50%) rotate(-12deg) scaleY(0.58);
    }

    to {
        transform: translate(-50%, -50%) rotate(348deg) scaleY(0.58);
    }
}

@keyframes coinScopeOrbitTwo {
    from {
        transform: translate(-50%, -50%) rotate(18deg) scaleY(0.68);
    }

    to {
        transform: translate(-50%, -50%) rotate(378deg) scaleY(0.68);
    }
}

@keyframes coinScopeMarkerDrift {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 8px -6px;
    }
}

.coin-flip-scope-box {
    border-radius: 50%;

    width: 480px;
    height: 480px;

    display: flex;
    justify-content: center;
    align-items: center;

    perspective: 1000px;

    transition: z-index 0s; /* 避免层级切换延迟 */
}

/* 旋转时自动置顶 */
.coin-flip-scope-box.is-flipping {
    z-index: 10240;
}

.coin {
    border-radius: 50%;

    width: 440px;
    height: 440px;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    transform-style: preserve-3d;
}

.coin.flip-active {
    animation: flip 1.6s forwards;
}

@keyframes flip {
    0% {
        transform: translateY(0) rotateX(0deg);
        animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    }

    40% {
        transform: translateY(-260px) rotateX(1800deg);
        animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
    }

    82% {
        transform: translateY(0) rotateX(var(--final-rotation, 3600deg));
    }

    90% {
        transform: translateY(-25px) rotateX(var(--final-rotation, 3600deg)); /* 第一次弹起 */
        animation-timing-function: ease-out;
    }

    95% {
        transform: translateY(0) rotateX(var(--final-rotation, 3600deg));
    }

    98% {
        transform: translateY(-8px) rotateX(var(--final-rotation, 3600deg)); /* 第二次小弹 */
    }

    100% {
        transform: translateY(0) rotateX(var(--final-rotation, 3600deg));
    }
}

.coin-face {
    width: 440px;
    height: 440px;

    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;

    backface-visibility: hidden;
    overflow: hidden;
    isolation: isolate;
}

.coin-face::before {
    content: "";
    position: absolute;
    inset: 64px;
    border-radius: 50%;
    pointer-events: none;
}

.heads {
    border-radius: 50%;
    border: 10px solid #fffdf8;

    background: radial-gradient(circle at 50% 106%, rgba(240, 180, 132, 0.2) 0 24%, transparent 52%),
    linear-gradient(155deg, #fffefa 0%, #faf4ec 58%, #f3eadf 100%);

    color: #9a6b5d;

    font-size: 44px;
    font-weight: 700;

    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.64);
    box-shadow: inset 0 0 0 1px rgba(154, 107, 93, 0.08),
    inset 0 -28px 48px rgba(154, 107, 93, 0.045),
    0 18px 42px rgba(126, 104, 86, 0.08);
}

.heads::before {
    border: 2px solid rgba(230, 171, 128, 0.26);
    border-right-color: transparent;
    border-bottom-color: rgba(230, 171, 128, 0.08);
    transform: rotate(-22deg);
}

.tails {
    border-radius: 50%;
    border: 10px solid #f8fcfb;

    background: radial-gradient(circle at 50% 106%, rgba(126, 188, 187, 0.18) 0 24%, transparent 52%),
    linear-gradient(155deg, #fdffff 0%, #eef7f5 58%, #e3eef0 100%);

    color: #607f88;

    font-size: 44px;
    font-weight: 700;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.66);
    box-shadow: inset 0 0 0 1px rgba(96, 127, 136, 0.08),
    inset 0 -28px 48px rgba(96, 127, 136, 0.045),
    0 18px 42px rgba(88, 112, 118, 0.08);

    transform: rotateX(180deg);
}

.tails::before {
    border: 2px solid rgba(126, 188, 187, 0.24);
    border-left-color: transparent;
    border-top-color: rgba(126, 188, 187, 0.08);
    transform: rotate(24deg);
}

.coin-info-box {
    border-radius: 24px;

    width: 1000px;
    height: 188px;

    background-color: #ffffff;

    margin-top: 20px;

    padding: 20px;

    position: relative;

    display: none;
}

.coin-reset-box {
    border-radius: 22px;

    width: 98px;
    height: 44px;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;

    cursor: pointer;

    position: absolute;
    top: -20px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 999;

    transition: opacity 0.2s ease;
}

.coin-info-box:hover .coin-reset-box,
.coin-info-box:focus-within .coin-reset-box {
    opacity: 1;
    pointer-events: auto;
}

.coin-reset-scope-box {
    border-radius: 18px;
    border: 0;

    width: 90px;
    height: 36px;

    background-color: #ffffff;

    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    color: inherit;
    font: inherit;
    cursor: pointer;
}

.coin-reset-scope-box:focus-visible {
    outline: 3px solid rgba(242, 153, 74, 0.45);
    outline-offset: 2px;
}

@media (hover: none) {
    .coin-reset-box {
        opacity: 1;
        pointer-events: auto;
    }
}

.coin-reset-scope-box span {
    /* 创建彩虹渐变背景色：从红、橙、黄、绿、蓝、紫、粉、红的顺序 */
    background: linear-gradient(
            270deg,
            #ff0000, /* 红色 */ #ff9900, /* 橙色 */ #ffff00, /* 黄色 */ #33cc33, /* 绿色 */ #3399ff, /* 蓝色 */ #9900ff, /* 紫色 */ #ff0099, /* 粉色 */ #ff0000 /* 回到红色，形成循环 */
    );

    /* 设置背景大小，让渐变效果更明显 */
    background-size: 400% 400%;
    /* 让背景渐变只应用到文字上 */
    -webkit-background-clip: text;
    background-clip: text;
    /* 让文字本身变得透明，只显示背景渐变 */
    -webkit-text-fill-color: transparent;
    /* 应用彩虹动画，持续8秒，平滑过渡，无限循环 */
    animation: rainbow 8s ease infinite;
}

@keyframes rainbow {
    /* 彩虹动画的开始状态：背景位置在最左边 */
    0% {
        background-position: 0% 50%; /* 背景渐变从左边开始显示 */
    }

    /* 彩虹动画的中间状态：背景位置在最右边 */
    50% {
        background-position: 100% 50%; /* 背景渐变移动到最右边 */
    }

    /* 彩虹动画的结束状态：回到最左边，形成循环 */
    100% {
        background-position: 0% 50%; /* 背景渐变回到最左边，重新开始 */
    }
}

.coin-info-stats-box {
    border-radius: 24px;

    width: 960px;
    height: 84px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.coin-info-stats-scope-box {
    border-radius: 24px;

    width: 286px;
    height: 84px;
}

.coin-info-stats-scope-box div {
    border-radius: 18px;

    width: 90px;
    height: 36px;

    float: left;

    margin-top: 4px;
    margin-left: 4px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.coin-info-recent-box {
    border-radius: 22px;

    width: 960px;
    height: 44px;

    margin-top: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.coin-info-recent-scope-box {
    border-radius: 22px;

    width: 480px;
    height: 44px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.coin-info-recent-overflow-box {
    border-radius: 22px;

    width: 304px;
    height: 44px;

    padding-left: 2px;
    padding-right: 2px;

    overflow-x: auto;
    overflow-y: hidden;

    display: block;

    text-align: center;
}

.coin-info-inner {
    display: inline-flex;
    justify-content: center;

    flex-wrap: nowrap;

    gap: 20px;

    flex-direction: row-reverse;
}

@keyframes bump {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    30% {
        transform: scale(1.5);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.number-bump {
    display: inline-block;

    animation: bump 0.8s ease;
}

.coin-recent-item {
    border-radius: 22px;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

.coin-info-inner .coin-recent-item:first-child {
    animation: spin 2.5s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 640px) and (max-width: 1263.98px) {
    .coin-box {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .coin-scope-box {
        width: 100%;
    }

    .coin-flip-box {
        width: 100%;

        margin-left: 20px;
        margin-right: 20px;
    }

    .coin-info-box {
        width: 100%;

        margin-top: 10px;

        margin-left: 20px;
        margin-right: 20px;
    }

    .coin-info-stats-box {
        width: 100%;
    }

    .coin-info-recent-box {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1263.98px) {
    .coin-box {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .coin-scope-box {
        margin-left: 40px;
        margin-right: 40px;
    }

    .coin-info-box {
        margin-top: 20px;
    }
}

@media (min-width: 1024px) and (max-width: 1263.98px) {
    .coin-box {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .coin-scope-box {
        margin-left: 60px;
        margin-right: 60px;
    }
}

@media (min-width: 0px) and (max-width: 767.98px) {
    .coin-box {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .coin-scope-box {
        width: 100%;
        height: auto;

        padding-bottom: 10px;

        margin-left: 10px;
        margin-right: 10px;
    }

    .coin-flip-box {
        width: 100%;
        height: auto;

        margin-top: 10px;

        margin-left: 10px;
        margin-right: 10px;
    }

    .coin-flip-scope-box {
        border-radius: 50%;

        width: 306px;
        height: 306px;
    }

    .coin {
        width: 286px;
        height: 286px;
    }

    .coin-face {
        width: 286px;
        height: 286px;
    }

    .coin-info-box {
        width: 100%;
        height: 158px;

        margin-top: 10px;

        margin-left: 10px;
        margin-right: 10px;

        padding: 10px;
    }

    .coin-reset-scope-box span {
        display: inline-block; /* 必须，加上才能旋转 */

        transform: rotate(-15deg);
    }

    .coin-info-stats-box {
        width: 100%;
    }

    .coin-info-recent-box {
        width: 100%;

        margin-top: 10px;
    }

    .coin-info-recent-scope-box {
        border-radius: 22px;

        width: 176px;
        height: 44px;
    }
}

@media (min-width: 390px) and (max-width: 767.98px) {
    .coin-info-recent-scope-box {
        width: 304px;
        height: 44px;
    }
}