:root{
  --navy:#0E1E33; --bg:#0A1522; --orange:#E3550A; --orange-2:#FF7A33;
  --ink:#F2F5F9; --dim:rgba(255,255,255,.66); --dimmer:rgba(255,255,255,.42);
  --stroke:rgba(255,255,255,.11); --glass:rgba(255,255,255,.045);
  --gold:#E7C27A; --ok:#3FD68C;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:
    radial-gradient(1100px 700px at 50% 34%, rgba(255,122,51,.14), transparent 58%),
    radial-gradient(900px 520px at 82% -8%, rgba(227,85,10,.18), transparent 62%),
    radial-gradient(700px 480px at 8% 108%, rgba(56,132,255,.12), transparent 62%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    var(--bg);
  background-size:auto,auto,auto,44px 44px,44px 44px,auto;
  background-attachment:fixed;
  color:var(--ink);min-height:100vh;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",-apple-system,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.75;
  overflow-x:hidden;
}
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;}
/* VIS 装饰层：旋转虚线环 + 角光 */
.bg-deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg-deco .ring{position:absolute;border-radius:50%;border:1px dashed rgba(255,122,51,.20);}
.bg-deco .ring.r1{width:520px;height:520px;top:-160px;right:-140px;animation:spin 60s linear infinite;}
.bg-deco .ring.r2{width:340px;height:340px;top:-60px;right:-40px;
  border-style:solid;border-color:rgba(231,194,122,.10);animation:spin 90s linear infinite reverse;}
.bg-deco .ring.r3{width:640px;height:640px;bottom:-260px;left:-220px;
  border-style:solid;border-color:rgba(77,163,255,.09);animation:spin 110s linear infinite;}
.bg-deco .corner{position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,140,60,.12),transparent 66%);}
.bg-deco .corner.c1{top:-160px;right:-120px;}
.bg-deco .corner.c2{bottom:-180px;left:-140px;background:radial-gradient(circle,rgba(77,163,255,.12),transparent 66%);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ══ 舞台 ══ */
.stage{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  padding:28px 20px 40px;}
.card{width:100%;max-width:520px;}
.split{display:block;}

/* 状态切换 */
.state{display:none;animation:fadeUp .55s ease forwards;}
/* 减弱动效：直接呈现最终态（低端机 / 系统设置 / 截图环境均清晰） */

/* ══ 大会规格：顶栏 / Hero / 统计带 / 奖池带 ══ */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:12px 22px;background:rgba(10,21,34,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--stroke);position:relative;z-index:20;}
.topbar .tl{height:26px;width:auto;}
.topbar b{font-size:13px;letter-spacing:.08em;color:#fff;}
.topbar .en{font-size:10px;letter-spacing:.2em;color:var(--dimmer);}
.mute-btn{margin-left:auto;font-family:inherit;cursor:pointer;border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);border-radius:99px;width:36px;height:36px;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;transition:.2s;}
.mute-btn:hover{border-color:rgba(255,122,51,.5);transform:translateY(-1px);}
.big-ring{position:fixed;top:-180px;right:-190px;width:600px;height:600px;pointer-events:none;opacity:.9;}
.hero{max-width:880px;margin:0 auto;padding:54px 24px 4px;text-align:center;position:relative;z-index:1;}
.hero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.2em;color:var(--orange-2);border:1px solid rgba(255,122,51,.35);
  border-radius:99px;padding:5px 16px;background:rgba(227,85,10,.08);}
.hero h1{font-size:44px;font-weight:800;letter-spacing:.03em;margin-top:6px;line-height:1.35;}
.hero h1 em{font-style:normal;
  background:linear-gradient(100deg,#FFE7C4,#FFB067 45%,#FF7A33);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.hero h1{display:inline-block;}
.hero .en-sub{display:block;font-size:11px;letter-spacing:normal;color:var(--dimmer);
  margin:12px auto 0;text-align:justify;text-align-last:justify;}
.hero .desc{font-size:15px;color:var(--dim);margin:14px auto 0;max-width:680px;
  line-height:1.9;letter-spacing:.02em;}
.hero .desc .hi b{color:var(--ink);font-size:17px;}
.hero .desc #heroBlessText{color:var(--dim);}
.hero .kw{font-size:11px;letter-spacing:.34em;color:var(--orange-2);margin-top:12px;}
.stats{max-width:880px;margin:28px auto 0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:11px;position:relative;z-index:1;padding:0 24px;}
.stat{border:1px solid var(--stroke);border-radius:15px;background:var(--glass);
  padding:17px 8px;text-align:center;position:relative;overflow:hidden;}
.stat::after{content:"";position:absolute;top:0;left:14%;right:14%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--orange-2),transparent);opacity:.75;}
.stat .n{font-size:31px;font-weight:800;line-height:1.15;
  background:linear-gradient(160deg,#FFE7C4,#FF9A5C 70%);-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.stat .l{font-size:11.5px;color:var(--dim);margin-top:5px;}
.stage{padding-top:8px;min-height:calc(100vh - 152px);}
/* 进入页不需要撑满，收紧标题与人偶之间的空白 */
body[data-state="gate"] .stage{min-height:auto;padding-top:0;margin-top:6vh;}
body[data-state="gate"] .hero{padding-top:5vh;}
body[data-state="gate"] .hero .desc{margin-top:3.5vh;}
body[data-state="gate"] .card{padding:3vh 20px 2vh;}
body[data-state="gate"] .gate .dolphin-sm{margin-bottom:5vh;}
body[data-state="gate"] .foot-tip{margin-top:3vh;padding-bottom:2vh;}
/* 礼盒页与揭晓页：随机祝福已合并到 Hi 行，hero 描述隐藏 */
body[data-state="gift"] .hero .desc,
body[data-state="reveal"] .hero .desc{display:none;}
body[data-state="gift"] .card{max-width:820px;}
body[data-state="reveal"] .card{max-width:820px;}
body[data-state="gift"] .wish{font-size:14px;margin-top:2vh;margin-bottom:10px;}
body[data-state="gift"] .wish b{font-size:15px;}
body[data-state="gift"] .wish #wishBlessing{font-size:14px;}
.wish #wishBlessing{display:inline;color:var(--dim);font-size:14px;font-weight:400;
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,Arial,sans-serif;}
.card{max-width:560px;}
.pool{max-width:880px;margin:26px auto 0;padding:0 24px;position:relative;z-index:1;}
.pool-title{font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--dimmer);margin-bottom:11px;}
.pool-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;}
.pcard{border:1px solid var(--stroke);border-radius:12px;background:var(--glass);
  padding:13px 6px;text-align:center;transition:.2s;}
.pcard:hover{border-color:rgba(255,122,51,.4);transform:translateY(-2px);}
.pcard .pe{font-size:21px;}
.pcard .pn{font-size:11.5px;color:var(--dim);margin-top:4px;white-space:nowrap;}
.pcard .ps{font-size:10px;color:var(--dimmer);margin-top:2px;}
.pool-note{font-size:10.5px;color:var(--dimmer);margin-top:9px;}
@media (max-width:899px){
  .hero h1{font-size:30px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .pool-grid{grid-template-columns:repeat(3,1fr);}
  .big-ring{width:440px;height:440px;top:-140px;right:-150px;}
  .topbar{padding:11px 16px;}
}
@media (prefers-reduced-motion: reduce){

  .state{animation:none;}
  .dolphin{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
  .ticket{opacity:1 !important;transform:none !important;transition:none !important;}
  .halo{opacity:1 !important;transform:none !important;animation:none !important;}
  .giftbox .lid{transition:none !important;}
  .rays{animation:none !important;}
  .giftbox.opening .lid{transform:none !important;opacity:1 !important;}
  .gift-hint .pulse{animation:none !important;}
  .bg-deco .ring,.orbit{animation:none !important;opacity:1 !important;}
  .reveal-title{animation:none !important;}
}
.state.active{display:block;}
@keyframes fadeUp{from{transform:translateY(16px);}to{transform:none;}}

/* ══ 登录门 ══ */
.gate{text-align:center;}
.gate .logo{height:38px;margin:0 auto 22px;display:block;filter:drop-shadow(0 0 16px rgba(255,122,51,.35));}
.gate .dolphin-sm{width:340px;max-width:86%;margin:0 auto 10px;display:block;animation:float 4.5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.gate h1{font-size:24px;font-weight:700;letter-spacing:.02em;}
.gate h1 em{font-style:normal;color:var(--orange-2);}
.gate p{font-size:14px;color:var(--dim);margin:8px 0 24px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:50px;border:none;border-radius:99px;cursor:pointer;font-family:inherit;
  font-size:15.5px;font-weight:700;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--orange-2));
  box-shadow:0 10px 26px rgba(227,85,10,.34);transition:.22s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(227,85,10,.46);}
.btn:active{transform:translateY(0);}
.btn.ghost{background:transparent;border:1px solid var(--stroke);box-shadow:none;color:var(--dim);
  font-weight:600;font-size:14px;min-height:44px;}
.btn.ghost:hover{color:var(--ink);border-color:rgba(255,122,51,.5);transform:none;}
.btn svg{width:19px;height:19px;}
.devbox{margin-top:16px;border:1px dashed var(--stroke);border-radius:14px;padding:14px;
  font-size:12.5px;color:var(--dimmer);}
.devbox .row{display:flex;gap:8px;margin-top:9px;}
.devbox input{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--stroke);
  border-radius:9px;color:var(--ink);font-size:13.5px;padding:9px 12px;font-family:inherit;}
.devbox .go{flex-shrink:0;min-height:40px;padding:0 16px;border-radius:9px;font-size:13px;
  background:rgba(255,255,255,.08);border:1px solid var(--stroke);color:var(--ink);cursor:pointer;font-family:inherit;}
.err{color:#FF8A8A;font-size:13px;margin-top:12px;display:none;}
.offline-tip{display:none;margin-top:14px;font-size:11.5px;line-height:1.75;color:var(--dimmer);
  border:1px dashed var(--stroke);border-radius:12px;padding:10px 13px;}
.offline-note{display:none;margin:10px 18px 0;font-size:11.5px;color:#FFB184;
  border-top:1px dashed rgba(255,160,80,.3);padding-top:9px;}

/* ══ 礼盒 ══ */
.giftwrap{text-align:center;}
.wish{font-size:clamp(9px, 2vw, 15px);color:var(--dim);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wish b{color:var(--ink);font-size:clamp(10px, 2.2vw, 17px);}
.wish #wishBlessing{font-size:clamp(9px, 2vw, 14px);}
.gift-date{font-size:11.5px;letter-spacing:.14em;color:var(--dimmer);margin-bottom:18px;}
.gift-say{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px;}
.gift-say img{width:36px;height:36px;object-fit:contain;}
.gift-say span{font-size:13.5px;color:var(--dim);
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,Arial,sans-serif;font-weight:400;}
.gift-say span b{color:var(--gold);font-weight:600;text-shadow:0 0 14px rgba(231,194,122,.35);}
.giftbox{width:min(68vh,519px);height:min(68vh,519px);margin:0 auto 18px;position:relative;cursor:pointer;
  transition:transform .3s;}
.gift-logo{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);
  height:16%;width:auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));z-index:2;pointer-events:none;}
.giftbox:hover{transform:translateY(-6px) scale(1.02);}
.giftbox:active{transform:scale(.97);}
.giftbox svg{width:100%;height:100%;overflow:visible;}
.gift-hint{font-size:14px;color:var(--dim);letter-spacing:.06em;}
.music-hint{display:none;margin-top:10px;font-size:12.5px;color:#FFC49A;letter-spacing:.06em;
  animation:pulse 2.2s ease-in-out infinite;}
.gift-hint .pulse{color:var(--orange-2);animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* 开盒动画 */
.giftbox.opening{pointer-events:none;}
.giftbox .lid{transform-origin:center bottom;transition:transform .75s cubic-bezier(.3,1.5,.5,1),opacity .75s;}
.giftbox.opening .lid{transform:translateY(-120px) rotate(-22deg);opacity:0;}
.giftbox .glow{opacity:0;transition:opacity .5s .25s;}
.giftbox.opening .glow{opacity:1;}
.rays{position:absolute;inset:-40%;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,rgba(255,160,80,.42) 0deg 12deg,transparent 12deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 22%,#000 45%,transparent 72%);
  mask:radial-gradient(circle,transparent 22%,#000 45%,transparent 72%);
  animation:spin 9s linear infinite;transition:opacity .5s;}
@keyframes spin{to{transform:rotate(360deg);}}
.giftbox.opening .rays{opacity:1;}

/* 彩带 */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden;}
.confetti i{position:absolute;width:9px;height:15px;border-radius:2px;opacity:0;
  animation:fall linear forwards;}
@keyframes fall{0%{opacity:1;transform:translateY(-10vh) rotate(0deg);}
  100%{opacity:0;transform:translateY(105vh) rotate(720deg);}}

/* ══ 揭晓 ══ */
.revealwrap{text-align:center;position:relative;padding-top:8px;}
.halo{position:absolute;left:50%;top:44%;width:300px;height:300px;margin:-150px 0 0 -150px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,140,60,.36),rgba(255,140,60,.07) 55%,transparent 72%);
  opacity:0;transform:scale(.6);transition:opacity 1s,transform 1.3s cubic-bezier(.16,.84,.44,1);}
.revealwrap.show .halo{opacity:1;transform:scale(1);animation:breathe 3.4s ease-in-out 1.2s infinite;}
.orbit{position:absolute;left:50%;top:42%;width:320px;height:320px;margin:-160px 0 0 -160px;
  border-radius:50%;pointer-events:none;opacity:0;transition:opacity 1.2s .4s;}
.revealwrap.show .orbit{opacity:1;animation:spin 14s linear infinite;}
.orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--orange-2);
  box-shadow:0 0 12px rgba(255,122,51,.9);}
.orbit i:nth-child(1){top:-4px;left:50%;}
.orbit i:nth-child(2){bottom:8%;left:6%;background:var(--gold);box-shadow:0 0 10px rgba(231,194,122,.8);}
.orbit i:nth-child(3){top:38%;right:-4px;width:5px;height:5px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8);}
.orbit i:nth-child(4){bottom:-2px;right:24%;width:4px;height:4px;background:var(--orange-2);}
@keyframes breathe{0%,100%{filter:brightness(1);}50%{filter:brightness(1.28);}}
.dolphin{width:270px;max-width:80vw;margin:0 auto;display:block;position:relative;
  opacity:0;transform:translateY(46px) scale(.9);filter:blur(14px);
  transition:opacity .9s ease,transform 1.35s cubic-bezier(.16,.84,.44,1),filter 1.15s ease;}
.revealwrap.show .dolphin{opacity:1;transform:none;filter:none;}
.blessing{font-size:14px;line-height:1.9;color:#F0F4F9;font-family:"PingFang SC","Microsoft YaHei",-apple-system,Arial,sans-serif;
  font-weight:400;margin:28px auto 24px;max-width:96vw;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  padding:0 10px;opacity:0;transform:translateY(10px);
  transition:opacity .8s ease,transform .8s ease;
  text-shadow:0 0 22px rgba(255,140,60,.32),0 2px 10px rgba(0,0,0,.5);}
.blessing.show{opacity:1;transform:none;}
@keyframes prizePop{0%{transform:scale(.25);opacity:0}55%{transform:scale(1.32);opacity:1}78%{transform:scale(.94)}100%{transform:scale(1)}}
.reveal-title.pop{animation:prizePop 1s cubic-bezier(.34,1.56,.64,1) both;}
.reveal-title{font-size:32px;font-weight:800;margin-top:10px;min-height:42px;letter-spacing:.03em;
  background:linear-gradient(100deg,#FFE7C4 8%,#FFB067 34%,#FF7A33 55%,#FFD9AE 82%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,122,51,.35));animation:sweep 3.6s ease-in-out 1.6s infinite;}
@keyframes sweep{0%,100%{background-position:0% 0;}50%{background-position:100% 0;}}
.reveal-title .caret{display:inline-block;width:3px;height:24px;background:var(--orange-2);
  vertical-align:-3px;margin-left:3px;animation:blink .7s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.reveal-desc{font-size:14.5px;color:var(--dim);margin-top:2px;min-height:26px;}
.reveal-tag{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  color:#FFC49A;border:1px solid rgba(255,122,51,.5);border-radius:99px;padding:4px 14px;
  background:linear-gradient(90deg,rgba(227,85,10,.16),rgba(255,122,51,.06));
  box-shadow:0 0 18px rgba(255,122,51,.22) inset,0 0 14px rgba(255,122,51,.18);}

/* 中奖券 */
.ticket{position:relative;margin:20px auto 0;max-width:min(330px,100%);text-align:left;
  border:1px solid rgba(255,180,110,.55);border-radius:16px;overflow:hidden;
  background:linear-gradient(140deg,rgba(227,85,10,.20),rgba(255,255,255,.05) 46%,rgba(56,132,255,.06));
  box-shadow:0 0 0 1px rgba(231,194,122,.16) inset,0 14px 40px rgba(0,0,0,.45),0 0 26px rgba(255,122,51,.14);
  opacity:0;transform:perspective(900px) rotateY(70deg) translateZ(-20px);
  transition:opacity .7s .45s,transform .85s .45s cubic-bezier(.2,.9,.3,1);}
.ticket::before,.ticket::after{content:"";position:absolute;top:64px;width:22px;height:22px;
  border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px rgba(255,180,110,.4) inset;z-index:2;}
.ticket::before{left:-11px;}
.ticket::after{right:-11px;}
.revealwrap.show .ticket{opacity:1;transform:none;}
.ticket .th{display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px dashed rgba(255,180,110,.35);
  background:linear-gradient(90deg,rgba(227,85,10,.16),transparent 72%);}
.ticket .th .em{font-size:22px;}
.ticket .th .tt{font-size:15.5px;font-weight:700;color:#fff;}
.ticket .tb{padding:13px 18px;}
.ticket .kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0;
  align-items:flex-start;}
.ticket .kv .k{color:var(--dimmer);letter-spacing:.06em;}
.ticket .kv .v{color:var(--ink);font-weight:600;text-align:right;min-width:0;
  overflow-wrap:anywhere;}
.ticket .code{margin-top:9px;word-break:break-all;padding:10px 12px;border-radius:9px;
  background:linear-gradient(120deg,rgba(0,0,0,.38),rgba(227,85,10,.14));
  border:1px solid rgba(231,194,122,.35);font-family:Consolas,monospace;font-size:15.5px;font-weight:700;
  color:var(--gold);letter-spacing:.14em;text-align:center;
  text-shadow:0 0 12px rgba(231,194,122,.35);}
.ticket .note{padding:0 18px 14px;font-size:12px;color:var(--dimmer);line-height:1.7;}

/* 兜底提示 */
.foot-tip{margin-top:18px;font-size:12px;color:var(--dimmer);text-align:center;line-height:1.9;}
.foot-tip b{color:var(--dim);}
.pagefoot{margin-top:26px;text-align:center;font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.3);}

/* ══ 响应式 ══ */
@media (min-width:900px){
  .stage{padding:40px 24px;}
  .card{max-width:560px;}
  .giftbox{width:min(72vh,595px);height:min(72vh,595px);}
  .dolphin{width:280px;}
  .reveal-title{font-size:30px;}
}
@media (max-width:899px){
  .giftbox{width:min(62vh,419px);height:min(62vh,419px);}
}
@media (max-width:420px){
  .stage{padding:20px 16px 30px;}
  .gate h1{font-size:21px;}
  .gate .dolphin-sm{width:270px;}
  .dolphin{width:240px;}
  .reveal-title{font-size:22px;}
  .ticket{max-width:100%;}
  .reveal-title{line-height:1.45;}
}