@font-face {
    font-family: 'Fami Source Han Sans SC';
    src: url('./assets/fonts/source-han-sans-sc-regular-latin.woff2')
        format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Fami Source Han Sans SC';
    src: url('./assets/fonts/source-han-sans-sc-medium-latin.woff2')
        format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --fami-design-width: 1080;
    --fami-stage-scale: 0.3472222222;
    --fami-stage-height: 3273px;
    --fami-background-bottom-top: 2695px;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    background: #080116;
    color: #f6e0b2;
    font-family: 'Fami Source Han Sans SC', Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
}

img {
    display: block;
}

.fami-recharge-app {
    width: min(100vw, 430px);
    min-height: calc(3273px * var(--fami-stage-scale));
    overflow: hidden;
    background: #080116;
}

.stage-wrap {
    position: relative;
    width: 100%;
    height: calc(3273px * var(--fami-stage-scale));
    overflow: hidden;
}

.stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: var(--fami-stage-height);
    overflow: hidden;
    transform: scale(var(--fami-stage-scale));
    transform-origin: top left;
    background: #080116;
}

.activity-background,
.reward-sections {
    position: absolute;
    inset: 0;
}

.activity-background {
    z-index: 0;
    pointer-events: none;
}

.background-segment {
    position: absolute;
    left: 0;
    width: 1080px;
    overflow: hidden;
}

.background-segment img {
    position: absolute;
    left: 0;
    width: 1080px;
    height: 1887px;
    max-width: none;
    pointer-events: none;
}

/* Figma 用同一背景节点的三段蒙版拼接长页；这里保留原始裁切坐标，而不是把根 Frame 当整页图片。 */
.background-segment-mid {
    top: 1311px;
    height: 405px;
    z-index: 0;
}

.background-segment-mid img {
    top: -1168px;
}

.background-segment-top {
    top: 0;
    height: 1588px;
    z-index: 1;
}

.background-segment-top img {
    top: 0;
}

.background-segment-bottom {
    top: var(--fami-background-bottom-top);
    height: 578px;
    z-index: 2;
}

.background-segment-bottom img {
    top: -1333px;
}

.countdown,
.profile-card,
.reward-sections,
.page-status {
    position: absolute;
    z-index: 3;
}

.countdown {
    left: 90px;
    top: 696px;
    width: 900px;
    height: 393px;
}

.countdown-frame {
    position: absolute;
    inset: 0;
    width: 900px;
    height: 393px;
    pointer-events: none;
}

.count-label,
.count-value {
    position: absolute;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.count-label {
    top: 280px;
    width: 180px;
    height: 24px;
    color: #050300;
    font-family: 'Fami Source Han Sans SC', Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    text-transform: capitalize;
}

.count-value {
    display: none;
    top: 142px;
    width: 150px;
    height: 92px;
    color: #f6e0b2;
    font-size: 68px;
    font-weight: 500;
    line-height: 92px;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.72);
}

.countdown.has-values .count-value {
    display: block;
}

.count-label-days,
.count-value-days {
    left: 145px;
}

.count-label-hours,
.count-value-hours {
    left: 349px;
}

.count-label-minutes,
.count-value-minutes {
    left: 553.5px;
}

.count-label-seconds,
.count-value-seconds {
    left: 753.5px;
}

.profile-card {
    left: 90px;
    top: 1089px;
    width: 900px;
    height: 679px;
}

.profile-frame {
    position: absolute;
    inset: 0;
    width: 900px;
    height: 679px;
    pointer-events: none;
}

.profile-avatar {
    position: absolute;
    left: 309px;
    top: 134px;
    width: 282px;
    height: 270px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-name,
.profile-id,
.profile-recharge {
    position: absolute;
    left: 100px;
    width: 700px;
    margin: 0;
    overflow: hidden;
    color: #f6e0b2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-name {
    top: 425px;
    height: 36px;
    font-family: 'Fami Source Han Sans SC', Arial, sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 36px;
}

.profile-id {
    top: 476px;
    height: 36px;
    font-family: 'Fami Source Han Sans SC', Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
}

.profile-recharge {
    top: 520px;
    height: 40px;
    font-size: 36px;
    font-weight: 500;
    line-height: 36px;
}

.reward-sections {
    width: 1080px;
    height: var(--fami-stage-height);
}

.reward-section {
    position: absolute;
    left: 0;
    top: var(--section-top);
    width: 1080px;
    height: 720px;
}

.reward-panel {
    position: absolute;
    left: 90px;
    top: 0;
    width: 900px;
    height: 689px;
    pointer-events: none;
}

.reward-title {
    position: absolute;
    left: 529.5px;
    top: 95px;
    margin: 0;
    transform: translateX(-50%);
    color: #f6e0b2;
    font-size: 40px;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
}

.reward-section.is-following .reward-title {
    left: 559.5px;
    top: 99px;
}

.reward-card {
    position: absolute;
    width: 229px;
    height: 258px;
    color: #f6e0b2;
    text-align: center;
}

.reward-card-frame {
    position: absolute;
    inset: 0;
    width: 229px;
    height: 258px;
    pointer-events: none;
}

.reward-media {
    position: absolute;
    left: 18px;
    top: 19px;
    width: 193px;
    height: 193px;
    object-fit: contain;
}

.reward-section.is-following .reward-media {
    left: 18.5px;
    top: 21px;
}

.reward-price {
    position: absolute;
    left: 0;
    top: 202px;
    width: 229px;
    height: 32px;
    overflow: hidden;
    color: #f6e0b2;
    font-size: 32px;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reward-action {
    position: absolute;
    left: 341px;
    top: 591px;
    width: 399px;
    height: 129px;
}

.reward-section.is-following .reward-action {
    top: 604px;
}

.reward-action-skin {
    position: absolute;
    inset: 0;
    width: 399px;
    height: 129px;
    pointer-events: none;
}

.reward-action-label {
    position: absolute;
    left: 0;
    top: 45px;
    width: 399px;
    height: 40px;
    overflow: hidden;
    color: #f6e0b2;
    font-family:
        'SF Pro Display',
        'SF Pro Text',
        -apple-system,
        BlinkMacSystemFont,
        Arial,
        sans-serif;
    font-size: 40px;
    font-weight: 510;
    font-variation-settings:
        'wght' 510,
        'wdth' 100;
    line-height: 40px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-status {
    left: 190px;
    top: 1730px;
    width: 700px;
    margin: 0;
    color: #f6e0b2;
    font-size: 28px;
    line-height: 40px;
    text-align: center;
}

@media (min-width: 431px) {
    html,
    body {
        background: #05000e;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}