/* =========================================================
   天翼超高清 × 微付充 — 单页 4 状态
   idle / watching / ready / success
   ========================================================= */
:root{
  --red-900:#6F0809;
  --red-800:#8E0F10;
  --red-700:#A91214;
  --red-600:#C01918;
  --red-500:#D8291F;
  --gold-700:#A96E2D;
  --gold-600:#C08A42;
  --gold-500:#D9A85C;
  --gold-400:#EAC47F;
  --gold-300:#F6DCA4;
  --gold-200:#FBEBC9;
  --cream:#FBF3E3;
  --paper:#FFFCF6;
  --ink:#2A1812;
  --ink-2:#4E372B;
  --ink-3:#7E6756;
  --ink-4:#A38A73;
  --line:rgba(160,113,57,.24);
  --display:"Noto Serif SC","Songti SC","SimSun",serif;
  --sans:"Noto Sans SC","MiSans","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;width:100%;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:#0C0B0D;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  -webkit-text-size-adjust:100%;
}
img{display:block;}
button{font:inherit;border:0;background:none;padding:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
p,h1,h2,h3,h4,ol,ul{margin:0;padding:0;}
ol,ul{list-style:none;}

/* 手机端铺满屏幕；桌面预览时由下方媒体查询还原 375×812 的手机外框 */
.phone{
  position:relative;
  width:100%;
  max-width:100%;
  min-height:100vh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(380px 260px at 104% -4%,rgba(240,192,112,.23),transparent 66%),
    radial-gradient(340px 300px at -18% 28%,rgba(223,175,102,.13),transparent 70%),
    linear-gradient(180deg,#FDF7EB 0%,#FBF2E1 52%,#F8EEDC 100%);
}
.grain{
  position:absolute;
  inset:0;
  background:url("./assets/grain.png") repeat;
  opacity:.46;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:20;
}
.page-edge{
  position:absolute;
  inset:7px;
  border:1px solid rgba(177,127,66,.17);
  border-radius:2px;
  pointer-events:none;
  z-index:19;
}

/* ---------- status bar ---------- */
.statusbar{
  position:relative;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px 0 24px;
  color:var(--ink);
  z-index:12;
}
.statusbar .time{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.2px;
}
.status-icons{display:flex;align-items:center;gap:5px;height:12px;}
.signal{display:flex;align-items:flex-end;gap:1.6px;height:9px;}
.signal i{display:block;width:2.2px;background:currentColor;border-radius:1px;}
.signal i:nth-child(1){height:3px;opacity:.5;}
.signal i:nth-child(2){height:5px;opacity:.65;}
.signal i:nth-child(3){height:7px;opacity:.82;}
.signal i:nth-child(4){height:9px;}
.network{font-family:var(--sans);font-size:8.5px;font-weight:700;letter-spacing:.2px;margin-left:1px;}
.wifi{width:14px;height:10px;display:block;}
.battery{
  position:relative;
  width:21px;
  height:10px;
  border:1px solid currentColor;
  border-radius:2.6px;
  padding:1.4px;
  opacity:.92;
  margin-left:1px;
}
.battery::after{
  content:"";
  position:absolute;
  right:-2.6px;
  top:2.8px;
  width:1.8px;
  height:3.6px;
  background:currentColor;
  border-radius:0 1px 1px 0;
  opacity:.62;
}
.battery span{display:block;width:74%;height:100%;background:currentColor;border-radius:1px;}

/* ---------- main ---------- */
.main{
  position:relative;
  padding:0 16px;
  z-index:5;
  flex:1 0 auto;
}

/* ---------- intro ---------- */
.intro{
  position:relative;
  margin-top:10px;
  height:128px;
  border-radius:20px;
  overflow:hidden;
  padding:18px 15px 15px;
  color:#FFF8E9;
  background:
    radial-gradient(130px 120px at 84% 36%,rgba(255,210,126,.30),transparent 66%),
    radial-gradient(240px 180px at 112% -20%,rgba(255,224,168,.18),transparent 60%),
    linear-gradient(143deg,#CE241C 0%,#B31214 44%,#8A0A0D 100%);
  border:1px solid rgba(248,210,149,.48);
  box-shadow:
    0 16px 30px -20px rgba(103,12,12,.8),
    inset 0 1px 0 rgba(255,247,226,.20);
}
.intro::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,223,166,.18);
  border-radius:15px;
  pointer-events:none;
}
.intro-copy{position:relative;z-index:4;width:219px;}
.eyebrow{
  display:flex;
  align-items:center;
  gap:6px;
  color:#F7D79D;
  font-size:7.4px;
  font-weight:600;
  letter-spacing:1.7px;
  white-space:nowrap;
}
.eyebrow::before{
  content:"";
  width:13px;
  height:1px;
  background:linear-gradient(90deg,transparent,#F2CA83);
}
.intro h1{
  margin-top:10px;
  font-family:var(--display);
  font-weight:900;
  line-height:.98;
  letter-spacing:.3px;
  color:#FFF9EB;
  text-shadow:0 3px 14px rgba(74,4,4,.35);
}
.intro h1 .h1a{
  display:block;
  font-size:28px;
  letter-spacing:1.8px;
}
.intro h1 .h1b{
  display:block;
  margin-top:3px;
  font-size:20px;
  letter-spacing:.2px;
  white-space:nowrap;
}
.intro h1 em{
  font-style:normal;
  display:inline-block;
  margin:0 1px;
  font-size:30px;
  line-height:.8;
  transform:translateY(2px);
  letter-spacing:-1px;
  background:linear-gradient(180deg,#FFF6D9 4%,#FFD488 44%,#F1B859 72%,#FFE7B1 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 7px rgba(255,186,75,.3));
}
.intro p{
  margin-top:8px;
  font-size:8.7px;
  line-height:1.4;
  color:rgba(255,239,215,.72);
  letter-spacing:.1px;
  white-space:nowrap;
}
.intro-arc{
  position:absolute;
  right:-112px;
  top:-72px;
  width:270px;
  height:270px;
  border-radius:50%;
  border:1px solid rgba(255,218,154,.14);
  box-shadow:
    0 0 0 22px rgba(255,218,154,.035),
    0 0 0 48px rgba(255,218,154,.024),
    0 0 0 78px rgba(255,218,154,.016);
  pointer-events:none;
}

/* intro coupon ticket */
.intro-ticket{
  position:absolute;
  right:10px;
  top:38px;
  width:98px;
  height:60px;
  z-index:3;
  transform:rotate(-6deg);
  filter:drop-shadow(0 10px 16px rgba(54,3,2,.42));
}
.it-back{
  position:absolute;
  inset:2px -1px -3px 4px;
  border-radius:8px;
  background:linear-gradient(150deg,#7E090B,#5E0507);
  border:1px solid rgba(249,207,139,.3);
  transform:rotate(6deg);
}
.it-main{
  position:relative;
  display:flex;
  width:100%;
  height:100%;
  border-radius:8px;
  overflow:hidden;
  background:
    radial-gradient(60px 40px at 8% 0%,rgba(255,255,255,.96),transparent 72%),
    linear-gradient(158deg,#FFFDF6 0%,#FFF4DF 56%,#F3DFC0 100%);
  border:1px solid #F0D29A;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.62);
}
.it-stub{
  width:36px;
  flex:0 0 36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-right:1px dashed #D3A35C;
  position:relative;
}
.it-stub::before,
.it-stub::after{
  content:"";
  position:absolute;
  right:-4px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8C0B0D;
}
.it-stub::before{top:-4px;}
.it-stub::after{bottom:-4px;}
.it-cur{
  font-family:var(--display);
  font-size:8px;
  font-weight:700;
  color:#A65A22;
  line-height:1;
}
.it-stub b{
  font-family:var(--display);
  font-size:25px;
  font-weight:900;
  color:#B31316;
  line-height:.9;
  letter-spacing:-2px;
  margin-top:-1px;
}
.it-body{
  flex:1;
  padding:8px 5px 6px 6px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  min-width:0;
}
.it-body strong{
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  color:#A61014;
  letter-spacing:.6px;
  line-height:1.1;
  white-space:nowrap;
}
.it-body span{
  font-size:5.4px;
  font-weight:600;
  color:#8F5A2D;
  white-space:nowrap;
}
.it-body small{
  font-size:4.9px;
  color:#B28A5E;
  white-space:nowrap;
}
.it-spark{
  position:absolute;
  width:9px;
  height:9px;
  background:linear-gradient(180deg,#FFF6D8,#EAB45F);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 4px rgba(255,218,150,.7));
}
.it-spark.s1{right:-5px;top:-8px;width:11px;height:11px;}
.it-spark.s2{left:-4px;bottom:-7px;width:7px;height:7px;opacity:.62;}

/* ---------- player 16:9 ---------- */
/* 用 padding-top:56.25% 固定 16:9，视频随宽度自适应，不再写死 193px */
.player{
  position:relative;
  margin-top:13px;
  height:0;
  padding-top:56.25%;
  border-radius:16px;
  overflow:hidden;
  background:#08080A;
  border:1px solid rgba(233,194,131,.52);
  box-shadow:
    0 16px 30px -22px rgba(40,15,8,.78),
    inset 0 0 0 1px rgba(255,241,213,.08);
  cursor:pointer;
}
/* 真实播放器：替换设计稿里的静态海报 */
.player .video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#08080A;
  -webkit-touch-callout:none;
  z-index:1;
}
.player .video::-webkit-media-controls{display:none!important;}
.player .video::-webkit-media-controls-enclosure{display:none!important;}
/* 未加载/未播放时的「点击播放」提示 */
.player-tip{
  position:absolute;
  left:0;
  right:0;
  bottom:40px;
  z-index:9;
  text-align:center;
  font-size:10px;
  letter-spacing:1px;
  color:rgba(255,243,221,.88);
  text-shadow:0 1px 6px rgba(0,0,0,.72);
  pointer-events:none;
  display:none;
}
.state-idle .player-tip{display:block;}
.player .poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
}
.player-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(3,3,5,.16) 0%,rgba(3,3,5,0) 28%,rgba(3,3,5,.08) 56%,rgba(3,3,5,.74) 100%),
    radial-gradient(120% 100% at 50% 45%,transparent 52%,rgba(0,0,0,.26) 100%);
}
.player::after{
  content:"";
  position:absolute;
  inset:0;
  background:url("./assets/grain.png") repeat;
  opacity:.46;
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:2;
}

/* center play / pause */
.player-center{
  position:absolute;
  left:50%;
  top:50%;
  width:44px;
  height:44px;
  margin:-22px 0 0 -22px;
  border-radius:50%;
  display:none;
  align-items:center;
  justify-content:center;
  color:#9D1A10;
  background:linear-gradient(150deg,#FFF0C6,#F4C46E 55%,#CE8D36);
  border:1.5px solid #FFF5D8;
  box-shadow:
    0 8px 20px -7px rgba(0,0,0,.8),
    inset 0 1px 2px rgba(255,255,255,.8);
  z-index:7;
}
.player-center::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(255,228,171,.34);
  box-shadow:0 0 0 7px rgba(255,228,171,.05);
}
.player-center svg{width:13px;height:13px;}
.player-center .ic-play{margin-left:2px;}
.player-center .ic-replay{width:16px;height:16px;}
/* 中心按钮：未开始/暂停/播放结束时显示，播放中隐藏 */
.state-idle .player-center,
.is-paused .player-center,
.is-ended .player-center{display:flex;}
.is-playing .player-center{display:none;}
.is-ended .player-center .ic-play{display:none;}
.is-ended .player-center .ic-replay{display:block;}
.ic-replay{display:none;}

/* bottom controls：只保留时间与进度条 */
.player-controls{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:30px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.68));
  z-index:8;
  color:#FFF6E2;
}
.ctrl-time{
  font-size:6.7px;
  letter-spacing:.15px;
  color:rgba(255,243,221,.8);
  white-space:nowrap;
  flex:0 0 auto;
}
.ctrl-track{
  flex:1;
  height:2.5px;
  border-radius:999px;
  background:rgba(255,240,218,.22);
  overflow:visible;
  position:relative;
  touch-action:none;
}
/* 扩大进度条的可拖动命中区，视觉宽度仍为 2.5px */
.ctrl-track::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-11px;
  bottom:-11px;
}
.ctrl-track i{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#E2B46F,#F8DFAB);
  box-shadow:0 0 8px rgba(245,207,145,.5);
}
/* 播放中整体隐藏底部控件（设计稿要求：进度条与读秒一起隐藏） */
.is-playing .player-controls{display:none;}

/* ---------- claim card (outside player) ---------- */
.claim-card{
  position:relative;
  margin-top:13px;
  padding:10px 12px;
  border-radius:16px;
  background:
    radial-gradient(200px 90px at 100% 0%,rgba(255,247,226,.9),transparent 70%),
    linear-gradient(170deg,#FFFDF8,#FFF9EF);
  border:1px solid rgba(176,127,65,.27);
  box-shadow:
    0 14px 26px -24px rgba(92,45,17,.55),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.claim-btn{
  --progress:0%;
  position:relative;
  width:100%;
  height:50px;
  border-radius:10px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:0;
  font-size:11.2px;
  font-weight:600;
  letter-spacing:.2px;
  color:#961810;
  background:linear-gradient(180deg,#FFF8E8 0%,#F8E4BE 100%);
  border:1px solid #E4C084;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 4px 10px -8px rgba(124,64,18,.55);
  cursor:default;
  overflow:hidden;
}
.claim-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--progress);
  background:linear-gradient(90deg,rgba(223,169,86,.32),rgba(223,169,86,.14));
  transition:width .25s linear;
  pointer-events:none;
}
.claim-btn .countdown-copy{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:3px;
  white-space:nowrap;
}
.claim-btn .cd-time{
  font-family:var(--display);
  font-size:14px;
  font-weight:900;
  color:#B01317;
  letter-spacing:.2px;
}
.claim-btn .ready-copy{display:none;}
.state-ready .claim-btn{
  background:linear-gradient(180deg,#E13B29 0%,#C01918 52%,#9B0E10 100%);
  border-color:#E9C187;
  color:#FFF4DB;
  font-size:15px;
  font-weight:700;
  letter-spacing:1.2px;
  cursor:pointer;
  box-shadow:
    0 10px 18px -9px rgba(128,12,12,.7),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.state-ready .claim-btn::before{
  width:100%;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
}
.state-ready .claim-btn .countdown-copy{display:none;}
.state-ready .claim-btn .ready-copy{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:5px;
}
.state-ready .claim-btn .ready-copy span{
  font-family:var(--sans);
  font-size:11px;
  opacity:.9;
}

/* ---------- 领取按钮：提交中 / 已申请 ---------- */
.claim-btn .claiming-copy,
.claim-btn .done-copy{
  position:relative;
  z-index:2;
  display:none;
  align-items:center;
  justify-content:center;
  gap:5px;
  white-space:nowrap;
}
/* 提交中：保持红色底但不可点，文案切到「正在提交申请…」 */
.is-claiming .claim-btn{
  background:linear-gradient(180deg,#D8402F 0%,#BE1B19 52%,#9B0E10 100%);
  border-color:#E9C187;
  color:#FFF4DB;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  cursor:default;
  opacity:.92;
}
.is-claiming .claim-btn .countdown-copy,
.is-claiming .claim-btn .ready-copy{display:none;}
.is-claiming .claim-btn .claiming-copy{display:flex;}
/* 已发起申请：禁用态，禁止重复发起 */
.is-claimed .claim-btn{
  background:linear-gradient(180deg,#F6EFE2,#EADCC6);
  border-color:#DCC6A3;
  color:#8C6A45;
  font-size:13px;
  font-weight:700;
  letter-spacing:.8px;
  cursor:default;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.is-claimed .claim-btn::before{
  width:100%;
  background:linear-gradient(90deg,rgba(203,170,125,.22),rgba(203,170,125,.10));
}
.is-claimed .claim-btn .countdown-copy,
.is-claimed .claim-btn .ready-copy{display:none;}
.is-claimed .claim-btn .done-copy{display:flex;}

/* ---------- rules ---------- */
.rules{
  position:relative;
  margin-top:13px;
  padding:17px 15px 16px;
  border-radius:16px;
  background:
    radial-gradient(220px 140px at 100% 0%,rgba(242,205,144,.18),transparent 70%),
    linear-gradient(180deg,#FFFDF8,#FFF9EF);
  border:1px solid rgba(175,126,62,.28);
  box-shadow:0 16px 30px -30px rgba(90,44,18,.6),inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
.rules::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:7px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,151,93,.4),transparent);
}
.rules-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.rules-title{display:flex;align-items:baseline;gap:6px;}
.rules-title h2{
  font-family:var(--display);
  font-size:18px;
  font-weight:900;
  color:#332017;
  letter-spacing:.8px;
  line-height:1;
}
.rules-title span{
  font-size:5.6px;
  font-weight:700;
  letter-spacing:2px;
  color:#C19761;
}
.rule-group{margin-top:9px;}
.rule-group + .rule-group{
  margin-top:9px;
  padding-top:9px;
  border-top:1px dashed rgba(181,138,83,.3);
}
.rule-head{display:flex;align-items:center;gap:5px;}
.rule-no{
  width:15px;
  height:15px;
  flex:0 0 15px;
  border:1px solid rgba(176,121,53,.42);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--sans);
  font-size:5.6px;
  font-weight:700;
  color:#A7753A;
  background:#FFF9EC;
}
.rule-head h3{
  font-family:var(--sans);
  font-size:10.2px;
  font-weight:700;
  color:#3D2719;
  letter-spacing:.3px;
}
.rule-list{
  margin-top:4px;
  padding-left:12px;
  counter-reset:rule;
}
.rule-list li{
  position:relative;
  font-size:9.9px;
  line-height:1.75;
  color:#66503F;
  letter-spacing:.02px;
  text-wrap:pretty;
}
.rule-list li + li{margin-top:2px;}
.rule-list li::before{
  counter-increment:rule;
  content:counter(rule) "、";
  position:absolute;
  left:-11px;
  top:0;
  color:#B78446;
  font-weight:600;
}
.rule-list b{color:#A91214;font-weight:600;}
.rule-list .rule-long{text-wrap:balance;}

/* ---------- footer ---------- */
.foot{
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  z-index:5;
  text-align:center;
  font-size:6.4px;
  color:#B39B84;
  letter-spacing:.25px;
}

/* =========================================================
   STATE SUCCESS — overlay on the same page
   ========================================================= */
.success-overlay{
  position:absolute;
  inset:0;
  z-index:40;
  display:none;
  align-items:center;
  justify-content:center;
  padding-top:0;
  background:rgba(30,0,2,.55);
  backdrop-filter:blur(2px);
}
.state-success .success-overlay{display:flex;}
.success-card{
  position:relative;
  width:330px;
  border-radius:24px;
  padding:17px 18px 14px;
  text-align:center;
  background:
    radial-gradient(180px 120px at 50% 0%,rgba(255,255,255,.9),transparent 70%),
    linear-gradient(180deg,#FFFDF8 0%,#FFF6E6 58%,#F8E9D1 100%);
  border:1px solid #E9CA91;
  box-shadow:
    0 34px 58px -22px rgba(24,0,1,.82),
    inset 0 0 0 2px rgba(255,255,255,.7);
  overflow:hidden;
}
.success-card::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(198,146,74,.22);
  border-radius:18px;
  pointer-events:none;
}
.modal-close{
  position:absolute;
  right:11px;
  top:11px;
  width:23px;
  height:23px;
  border-radius:50%;
  border:1px solid rgba(168,128,81,.26);
  display:grid;
  place-items:center;
  color:#A98562;
  z-index:3;
}
.modal-close svg{width:8px;height:8px;}
.success-check{
  width:48px;
  height:48px;
  margin:1px auto 0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 45%,#FFF5D6,#F4CC86 54%,#D49A45);
  border:1px solid #FFF6DC;
  box-shadow:0 8px 18px -8px rgba(80,30,8,.5),inset 0 1px 2px rgba(255,255,255,.85);
  position:relative;
}
.success-check::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px dashed rgba(186,137,73,.35);
}
.success-check span{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#9C1B11;
}
.success-check svg{width:22px;height:22px;}
.success-kicker{
  margin-top:5px;
  font-size:5.8px;
  font-weight:700;
  letter-spacing:3px;
  color:#BC9259;
}
.success-card h2{
  margin-top:2px;
  font-family:var(--display);
  font-size:29px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:3px;
  color:#2C1811;
}
.success-sub{
  margin-top:8px;
  font-size:12px;
  color:#7A6250;
  letter-spacing:.5px;
}
.modal-btn{
  width:100%;
  height:42px;
  margin-top:16px;
  border-radius:999px;
  background:linear-gradient(180deg,#D92D21 0%,#B71615 55%,#970E10 100%);
  color:#FFEFD2;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  box-shadow:
    0 12px 22px -10px rgba(90,10,8,.65),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* =========================================================
   领取弹层：按业务结果切换图标（勾选 / 时钟 / 警示）
   ========================================================= */
.success-check .check-icon{display:none;width:100%;height:100%;}
.success-check .check-icon svg{width:22px;height:22px;}
.success-card[data-icon="check"] .check-icon.icon-check,
.success-card[data-icon="clock"] .check-icon.icon-clock,
.success-card[data-icon="alert"] .check-icon.icon-alert{display:grid;place-items:center;}

/* =========================================================
   错误兜底覆盖层：登录失效 / 视频加载失败
   ========================================================= */
.error-overlay{
  position:absolute;
  inset:0;
  z-index:45;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  background:rgba(30,0,2,.62);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.is-error-open .error-overlay{display:flex;}
.error-card{
  position:relative;
  width:100%;
  max-width:300px;
  border-radius:22px;
  padding:22px 18px 18px;
  text-align:center;
  background:
    radial-gradient(180px 120px at 50% 0%,rgba(255,255,255,.9),transparent 70%),
    linear-gradient(180deg,#FFFDF8 0%,#FFF6E6 58%,#F8E9D1 100%);
  border:1px solid #E9CA91;
  box-shadow:
    0 34px 58px -22px rgba(24,0,1,.82),
    inset 0 0 0 2px rgba(255,255,255,.7);
}
.error-card::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(198,146,74,.22);
  border-radius:16px;
  pointer-events:none;
}
.error-icon{
  width:46px;
  height:46px;
  margin:0 auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-size:24px;
  font-weight:900;
  line-height:1;
  color:#9C1B11;
  background:radial-gradient(circle at 50% 45%,#FFF5D6,#F4CC86 54%,#D49A45);
  border:1px solid #FFF6DC;
  box-shadow:0 8px 18px -8px rgba(80,30,8,.5),inset 0 1px 2px rgba(255,255,255,.85);
}
.error-card h2{
  margin-top:12px;
  font-family:var(--display);
  font-size:22px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:2px;
  color:#2C1811;
}
.error-sub{
  margin-top:7px;
  font-size:12px;
  line-height:1.6;
  color:#7A6250;
  letter-spacing:.4px;
}
.error-btn{
  width:100%;
  height:40px;
  margin-top:16px;
  border-radius:999px;
  background:linear-gradient(180deg,#D92D21 0%,#B71615 55%,#970E10 100%);
  color:#FFEFD2;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  box-shadow:
    0 12px 22px -10px rgba(90,10,8,.65),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.error-btn[hidden]{display:none;}

/* =========================================================
   桌面预览：还原 375×812 的居中手机外框
   ========================================================= */
@media (min-width:520px){
  body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:28px 0;
    background:radial-gradient(700px 500px at 50% 0%,#221512,#0C0B0D 70%);
  }
  .phone{
    width:375px;
    min-height:812px;
    height:812px;
    border-radius:20px;
    overflow-y:auto;
    overflow-x:hidden;
    box-shadow:
      0 40px 90px -30px rgba(0,0,0,.9),
      0 0 0 1px rgba(255,228,171,.12);
    scrollbar-width:none;
  }
  .phone::-webkit-scrollbar{display:none;}
}