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

html, body {
    height: 100%;
    /* 禁用浏览器对双击缩放 / 双指缩放的默认手势 */
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    /* 防止 iOS Safari 双击放大文本 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* 禁止用户长按选中文本（间接避免一些缩放手势） */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* 禁止滚动反弹（部分浏览器） */
    overscroll-behavior: none;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; background: #f7ece6; overflow: hidden;
}

/* 屏幕：占满整个视口，不再有左右黑边 */
.screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    background: #f7ece6;
    display: flex; flex-direction: column;
}

/* ====== 第一阶段：黑场加载（0–1.6s） ====== */
.loader {
    position: absolute; inset: 0; z-index: 80; background: #0e0a0b;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #f7ece6;
    animation: loaderOut .8s cubic-bezier(.7,0,.2,1) 1.6s forwards;
}
.loader .id {
    font-size: 11px; letter-spacing: 8px; color: #8a6f6f; margin-bottom: 24px;
    opacity: 0; animation: fade .5s ease .1s forwards;
}
.loader .wordrow {
    display: flex; align-items: center; gap: 4px;
}
.loader .word {
    font-size: 34px; font-weight: 900; letter-spacing: 8px;
    display: flex; gap: 4px; color: #f7ece6;
}
.loader .word span {
    display: inline-block; opacity: 0; transform: translateY(20px);
    animation: charIn .55s cubic-bezier(.2,1,.3,1) forwards;
}
.loader .word span:nth-child(1) { animation-delay: .15s; }
.loader .word span:nth-child(2) { animation-delay: .27s; }
.loader .word span:nth-child(3) { animation-delay: .39s; }
.loader .word span:nth-child(4) { animation-delay: .51s; color: #e0506e; }
.loader .word-gif {
    width: 72px; height: 72px; display: block; object-fit: contain;
    opacity: 0; transform: translateY(20px) scale(.7);
    animation: gifIn .55s cubic-bezier(.2,1.3,.3,1) .58s forwards,
               gifWiggle 2.4s ease-in-out 1.2s infinite;
}
.loader .bar {
    margin-top: 28px; width: 230px; height: 3px; border-radius: 3px;
    background: rgba(247,236,230,.18); overflow: hidden;
    opacity: 0; animation: fade .4s ease .65s forwards;
}
.loader .bar::after {
    content: ""; display: block; height: 100%; width: 0%; background: #e0506e;
    animation: progress .9s cubic-bezier(.7,0,.2,1) .7s forwards;
}

/* ====== 第二阶段：横向幕布（1.6s–2.2s） ====== */
.curtain {
    position: absolute; inset: 0; z-index: 70; pointer-events: none;
    display: flex; flex-direction: column;
}
.curtain .top, .curtain .bot { flex: 1; background: #0e0a0b; }
.curtain .top { animation: cTop .9s cubic-bezier(.85,0,.15,1) 1.6s forwards; }
.curtain .bot { animation: cBot .9s cubic-bezier(.85,0,.15,1) 1.6s forwards; }
.curtain .line {
    position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #e0506e;
    transform: scaleX(0); transform-origin: left;
    animation: lineIn .7s cubic-bezier(.7,0,.2,1) 1.5s forwards, lineOut .4s ease 2.1s forwards;
}

/* ====== 顶部杂志刊头 ====== */
.masthead {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px; border-bottom: 2px solid #2a1d20;
    font-size: 11px; letter-spacing: 2px; color: #2a1d20; font-weight: 700;
    opacity: 0; animation: fade .7s ease 2.3s forwards;
}
.masthead .dot { width: 7px; height: 7px; background: #e0506e; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: middle; }

/* ====== 标题 ====== */
.hero { padding: 22px 22px 0; }
.kicker {
    display: inline-block; font-size: 12px; letter-spacing: 3px; color: #f7ece6; font-weight: 800;
    background: #e0506e; padding: 5px 12px;
    opacity: 0; animation: rise .7s cubic-bezier(.2,1,.3,1) 2.4s forwards;
}
.big {
    font-size: clamp(56px, 18vw, 78px); line-height: .9; font-weight: 900; color: #2a1d20;
    letter-spacing: -2px; margin-top: 12px;
}
.big span { display: block; overflow: hidden; }
.big span i {
    display: block; font-style: normal; transform: translateY(110%);
    animation: titleUp .8s cubic-bezier(.16,1.1,.3,1) forwards;
}
.big span:nth-child(1) i { animation-delay: 2.55s; }
.big span:nth-child(2) i { animation-delay: 2.7s; }
.big .accent { color: #e0506e; }
.subline {
    margin-top: 12px; display: flex; align-items: center; gap: 10px;
    font-size: 13px; letter-spacing: 3px; color: #8a6f6f;
    opacity: 0; animation: rise .6s ease 2.95s forwards;
}
.subline .bar { flex: 0 0 30px; height: 2px; background: #2a1d20; }

/* ====== 主视觉 ====== */
.stage {
    flex: 1; position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 6px 18px 0; min-height: 0;
}
.rays {
    position: absolute; width: 120%; aspect-ratio: 1; left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(.4); z-index: 0; opacity: 0;
    background: repeating-conic-gradient(from 0deg, rgba(224,80,110,.10) 0deg 8deg, transparent 8deg 16deg);
    border-radius: 50%;
    animation: raysIn .8s ease 2.8s forwards, spin 40s linear 3.6s infinite;
    -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 66%);
    mask-image: radial-gradient(circle, #000 28%, transparent 66%);
}
.cup-wrap {
    position: relative; width: min(86%, 340px); z-index: 3;
    opacity: 0; transform: translateY(30px) scale(.92);
    animation: cupIn .9s cubic-bezier(.2,1,.3,1) 2.8s forwards;
}
.cup-wrap .floatwrap { animation: floaty 4s ease-in-out 3.8s infinite; }
.cup-wrap img.cup { width: 100%; display: block; filter: drop-shadow(0 26px 30px rgba(42,29,32,.32)); }
.bubble {
    position: absolute; top: -10%; right: -12%; width: 66%; z-index: 4;
    opacity: 0; transform: scale(.5) rotate(10deg);
    animation: bubblePop .7s cubic-bezier(.34,1.6,.5,1) 3.1s forwards;
}
.bubble img { width: 100%; display: block; filter: drop-shadow(0 8px 12px rgba(42,29,32,.22)); }
.price {
    position: absolute; bottom: 2%; left: -12%; z-index: 4; text-align: center; color: #2a1d20;
    background: #f7ece6; padding: 6px 10px 8px; border: 2px solid #2a1d20;
    box-shadow: 4px 4px 0 #e0506e;
    opacity: 0; transform: translateY(16px) rotate(-4deg);
    animation: priceIn .6s cubic-bezier(.34,1.56,.64,1) 3.25s forwards;
}
.price .amt { font-size: clamp(40px, 13vw, 52px); font-weight: 900; line-height: .85; }
.price .amt span { font-size: .42em; vertical-align: text-top; }
.price .tag { font-size: 11px; letter-spacing: 1px; color: #e0506e; font-weight: 700; margin-top: 2px; }
.price .tag s { color: #ad8f93; }

.footer {
    border-top: 2px solid #2a1d20; padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: #2a1d20;
    opacity: 0; transform: translateY(100%);
    animation: footIn .7s cubic-bezier(.2,1,.3,1) 3s forwards;
}
.footer .meta { color: #c79ba0; font-size: 11px; letter-spacing: 2px; }
.footer .meta b { color: #f7ece6; display: block; font-size: 15px; margin-top: 3px; letter-spacing: 4px; }
.footer button {
    background: #e0506e; color: #fff; border: none; cursor: pointer;
    padding: 15px 32px; font-size: 17px; font-weight: 800; letter-spacing: 3px;
    border-radius: 2px; transition: background .2s ease, transform .15s ease;
}
.footer button:active { transform: scale(.96); }

/* ====== 领取成功 / 摇一摇 浮层 ====== */
.result {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(14, 10, 11, 0.94);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #f7ece6;
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
    cursor: pointer;
}
.result.show { opacity: 1; pointer-events: auto; }
.result::before {
    content: ""; position: absolute; width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(224,80,110,.22) 0%, transparent 60%);
    border-radius: 50%; pointer-events: none;
}
.result .gif {
    width: 240px; height: 240px; object-fit: contain;
    transform: scale(.5); opacity: 0;
    transition: transform .6s cubic-bezier(.2,1.4,.3,1) .1s, opacity .4s ease .1s;
    filter: drop-shadow(0 16px 30px rgba(0,0,0,.4));
    position: relative;
}
.result.show .gif { transform: scale(1); opacity: 1; animation: shake 1.4s ease-in-out 0.8s infinite; }

.result .text {
    margin-top: 26px; font-size: 32px; font-weight: 900; letter-spacing: 8px;
    color: #f7ece6; text-align: center;
    opacity: 0; transform: translateY(20px);
    transition: opacity .45s ease .35s, transform .45s ease .35s;
}
.result.show .text { opacity: 1; transform: translateY(0); }
.result .text b { color: #e0506e; }

.result .hint {
    margin-top: 14px; font-size: 11px; letter-spacing: 6px; color: #8a6f6f;
    opacity: 0; transition: opacity .5s ease .55s;
}
.result.show .hint { opacity: 1; }

@keyframes shake {
    0%, 100% { transform: scale(1) rotate(0); }
    20% { transform: scale(1) rotate(-12deg); }
    40% { transform: scale(1.05) rotate(10deg); }
    60% { transform: scale(1) rotate(-8deg); }
    80% { transform: scale(1.03) rotate(6deg); }
}

/* 关键帧 */
@keyframes fade { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes charIn { to { opacity: 1; transform: translateY(0); } }
@keyframes gifIn  { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes gifWiggle {
    0%, 100% { transform: translateY(0) rotate(0); }
    25%      { transform: translateY(-3px) rotate(-6deg); }
    75%      { transform: translateY(-3px) rotate(6deg); }
}
@keyframes progress { to { width: 100%; } }
@keyframes loaderOut { to { opacity: 0; transform: translateY(-20px); pointer-events: none; } }
@keyframes cTop { to { transform: translateY(-100%); } }
@keyframes cBot { to { transform: translateY(100%); } }
@keyframes lineIn { to { transform: scaleX(1); } }
@keyframes lineOut { to { transform: scaleX(0); transform-origin: right; opacity: 0; } }
@keyframes titleUp { to { transform: translateY(0); } }
@keyframes cupIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bubblePop { to { opacity: 1; transform: scale(1) rotate(5deg); } }
@keyframes priceIn { to { opacity: 1; transform: translateY(0) rotate(-4deg); } }
@keyframes footIn { to { opacity: 1; transform: translateY(0); } }
@keyframes raysIn { to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

/* 桌面端：在大屏上仍把内容收敛到舒适宽度并居中，但 body 背景一致，不会显示黑边 */
@media (min-width: 520px) {
    .screen {
        max-width: 430px;
        box-shadow: 0 0 0 1px rgba(0,0,0,.05);
    }
}

@media (max-height: 740px) {
    .big { font-size: clamp(48px, 15vw, 66px); }
    .cup-wrap { width: min(72%, 290px); }
}