/* ===========================================================
   开袋有惊喜 · 扫码抽奖
   软糖插画风 UI  +  真实产品照片（奖品）
   =========================================================== */

:root{
  --cream:#FFF9F2;
  --cream-2:#FFF3E2;
  --white:#FFFFFF;
  --coral:#FF7A5C;
  --coral-deep:#F26B4E;
  --coral-dark:#E0503A;
  --yellow:#FFC64B;
  --yellow-soft:#FFD66B;
  --pistachio:#A8C686;
  --brown:#4A3028;
  --brown-soft:#8B6B5D;
  --line:#F1E1D3;
  --shadow:0 10px 26px rgba(122,72,52,.10);
  --shadow-lg:0 18px 44px rgba(122,72,52,.16);
  --r-lg:26px;
  --r-md:18px;
  --r-sm:14px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{color-scheme:only light}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  color:var(--brown);
  background:
    radial-gradient(900px 600px at 15% -10%, #FFE3D3 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, #FFF0C9 0%, transparent 62%),
    #FBF1E7;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 手机壳容器 ---------- */
.app{
  position:relative;
  width:100%;
  max-width:430px;
  min-height:100dvh;
  background:var(--cream);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}
@media (min-width:520px){
  .app{
    min-height:0;
    height:860px;
    border-radius:34px;
    box-shadow:var(--shadow-lg);
  }
}

/* 背景装饰 */
.app::before,.app::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.app::before{
  width:280px;height:280px;left:-120px;top:-90px;
  background:radial-gradient(circle at 35% 35%,#FFD9CB,#FFE9DE 70%,transparent 72%);
  opacity:.85;
}
.app::after{
  width:240px;height:240px;right:-110px;top:330px;
  background:radial-gradient(circle at 40% 40%,#FFF0C2,#FFF7E6 70%,transparent 72%);
  opacity:.9;
}

.view{
  position:relative;
  z-index:1;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.view[hidden]{display:none}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + var(--safe-t)) 20px 0;
  flex:none;
}
.brand{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:800;letter-spacing:.4px}
.brand-logo{width:22px;height:22px;flex:none}
.chip{
  font-size:12.5px;font-weight:700;color:var(--brown);
  background:var(--white);
  padding:7px 14px;border-radius:999px;
  box-shadow:var(--shadow);
}
.chip b{color:var(--coral-dark);font-size:15px;margin:0 1px}

/* ---------- 标题 ---------- */
.hero{text-align:center;padding:18px 24px 6px;flex:none}
.hero h1{
  margin:0;
  font-size:38px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:2px;
  color:var(--coral-deep);
  text-shadow:0 3px 0 #FFD9CB;
}
.hero p{
  margin:10px 0 0;
  font-size:13.5px;
  color:var(--brown-soft);
  letter-spacing:.4px;
}

/* ---------- 转盘 ---------- */
.wheel-stage{
  position:relative;
  width:min(90vw,358px);
  aspect-ratio:1/1;
  margin:10px auto 0;
  flex:none;
}
.wheel-ring{
  position:absolute;inset:0;
  border-radius:50%;
  background:linear-gradient(160deg,#FFB49B,#FF7A5C 55%,#F2603F);
  padding:12px;
  box-shadow:
    0 14px 30px rgba(224,80,58,.26),
    inset 0 -6px 12px rgba(180,60,40,.20),
    inset 0 6px 10px rgba(255,255,255,.42);
}
#wheelCanvas{
  display:block;width:100%;height:100%;
  border-radius:50%;
  will-change:transform;
  transform:rotate(0deg);
}
.pool{
  display:flex;align-items:center;gap:7px;
  margin:14px 20px 0;
  flex-wrap:wrap;justify-content:center;
  flex:none;
}
.pool-label{font-size:11.5px;color:#BFA294;font-weight:700;letter-spacing:1px}
.pool-chip{
  font-size:11.5px;font-weight:700;color:var(--brown);
  background:var(--white);
  border:1.5px solid var(--line);
  padding:5px 11px;border-radius:999px;
}

.hub{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:31%;aspect-ratio:1/1;
  border:0;border-radius:50%;
  background:linear-gradient(180deg,#FF8F72,#F2603F);
  color:#fff;
  font-family:inherit;font-size:16px;font-weight:900;letter-spacing:1px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;line-height:1.1;
  cursor:pointer;
  box-shadow:
    0 0 0 7px rgba(255,255,255,.92),
    0 10px 22px rgba(190,70,48,.35);
  transition:transform .16s ease, box-shadow .16s ease;
  z-index:2;
  animation:hubPulse 2.6s ease-in-out infinite;
}
.hub:active{transform:translate(-50%,-50%) scale(.94)}
.hub[disabled]{opacity:.75;cursor:default;animation:none}
@keyframes hubPulse{
  0%,100%{box-shadow:0 0 0 7px rgba(255,255,255,.92), 0 10px 22px rgba(190,70,48,.35)}
  50%{box-shadow:0 0 0 12px rgba(255,255,255,.55), 0 12px 26px rgba(190,70,48,.42)}
}

/* ---------- 跑马灯 / 提示 ---------- */
.ticker{
  margin:16px auto 0;
  display:flex;align-items:center;gap:8px;
  max-width:calc(100% - 48px);
  padding:9px 16px;
  background:var(--white);
  border-radius:999px;
  box-shadow:var(--shadow);
  font-size:12.5px;color:var(--brown-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:none;
}
.ticker .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--pistachio);
  box-shadow:0 0 0 4px rgba(168,198,134,.22);
  flex:none;
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{50%{opacity:.35}}
.ticker b{color:var(--coral-dark)}

.hint{
  margin:12px auto 0;
  padding:0 30px;
  font-size:12px;line-height:1.6;color:var(--brown-soft);
  text-align:center;flex:none;
}

.bottom{
  margin-top:12px;
  display:flex;gap:12px;
  padding:16px 20px calc(18px + var(--safe-b));
  flex:none;
}
.deco-bears{
  display:block;
  width:150px;height:150px;object-fit:contain;
  margin:auto auto 0;
  border-radius:50%;
  mix-blend-mode:multiply;
  opacity:.95;
  flex:none;
}
.ghost{
  flex:1;height:46px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--brown);
  font-family:inherit;font-size:14px;font-weight:700;
  cursor:pointer;position:relative;
  transition:transform .14s ease, background .14s ease;
}
.ghost:active{transform:scale(.97);background:var(--cream-2)}
.ghost.wide{width:100%;flex:none;margin-top:10px}
.badge{
  position:absolute;top:-6px;right:6px;
  min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--coral);color:#fff;
  font-size:11px;font-style:normal;line-height:20px;font-weight:800;
}

/* ---------- 主按钮 ---------- */
.primary{
  width:100%;height:54px;
  border:0;border-radius:999px;
  background:linear-gradient(180deg,#FF8F72,#F2603F);
  color:#fff;font-family:inherit;font-size:17px;font-weight:900;letter-spacing:2px;
  cursor:pointer;
  box-shadow:0 6px 0 #D9502F, 0 14px 26px rgba(217,80,47,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #D9502F,0 8px 16px rgba(217,80,47,.24)}

/* ---------- 登录页 ---------- */
.view-login{
  padding:calc(10px + var(--safe-t)) 26px calc(20px + var(--safe-b));
  overflow-y:auto;
}
.back{
  width:40px;height:40px;flex:none;
  border:0;border-radius:50%;
  background:var(--white);
  box-shadow:var(--shadow);
  color:var(--brown);
  display:grid;place-items:center;
  cursor:pointer;
}
.back svg{width:20px;height:20px}
.login-title{
  margin:16px 0 0;
  font-size:28px;font-weight:900;letter-spacing:1px;
  color:var(--coral-deep);
}
.login-sub{
  margin:10px 0 0;
  font-size:13px;line-height:1.7;color:var(--brown-soft);
}
.login-mascot{
  width:132px;height:132px;object-fit:contain;
  margin:6px auto -6px;
  display:block;
  border-radius:50%;
  mix-blend-mode:multiply;
}
.login-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.field{
  display:flex;align-items:center;gap:10px;
  height:56px;padding:0 18px;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field:focus-within{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,122,92,.12)}
.fi{width:20px;height:20px;color:var(--brown-soft);flex:none}
.field input{
  flex:1;min-width:0;height:100%;
  border:0;outline:0;background:transparent;
  font-family:inherit;font-size:15px;color:var(--brown);
}
.field input::placeholder{color:#C4AA9C}
.send-code{
  flex:none;
  border:0;background:transparent;
  color:var(--coral-dark);
  font-family:inherit;font-size:13px;font-weight:800;
  padding-left:12px;border-left:1.5px solid var(--line);
  cursor:pointer;
}
.send-code[disabled]{color:#C4AA9C;cursor:default}

.divider{
  display:flex;align-items:center;gap:12px;
  margin:22px 0 0;
  color:#C4AA9C;font-size:12px;
}
.divider::before,.divider::after{
  content:"";flex:1;height:1.5px;background:var(--line);
}
.social{display:flex;gap:12px;margin-top:16px}
.social-btn{
  flex:1;height:52px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  color:var(--brown);
  font-family:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;
}
.social-btn:active{background:var(--cream-2)}
.ic-google{font-size:16px;font-weight:900;color:var(--coral-deep)}
.ic-tg{width:18px;height:18px;color:#4FA3D8}
.agree{
  margin:20px 0 0;
  text-align:center;font-size:11.5px;line-height:1.6;color:#BFA294;
}

/* ---------- 中奖页 ---------- */
.view-result{
  padding:calc(16px + var(--safe-t)) 22px calc(22px + var(--safe-b));
  overflow-y:auto;
  background:var(--cream);
}
.result-top{text-align:center;flex:none}
.result-kicker{
  margin:6px 0 0;font-size:13px;font-weight:800;letter-spacing:4px;
  color:var(--coral-dark);
}
.result-name{
  margin:6px 0 0;font-size:26px;line-height:1.25;font-weight:900;
  color:var(--brown);
}
.result-img{
  width:150px;height:150px;object-fit:contain;
  margin:8px auto 0;display:block;
  border-radius:28px;
  mix-blend-mode:multiply;
}
.result-code{
  margin:2px 0 0;font-size:11.5px;color:#BFA294;letter-spacing:1px;
}
.claim-form{
  margin-top:14px;
  display:flex;flex-direction:column;gap:12px;
}
.row{display:flex;flex-direction:column;gap:6px}
.row span{font-size:12px;font-weight:800;color:var(--brown-soft);letter-spacing:.5px}
.row input{
  height:48px;padding:0 16px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--white);
  font-family:inherit;font-size:14.5px;color:var(--brown);
  outline:0;
}
.row input:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,122,92,.12)}
.row input::placeholder{color:#C9B1A4}
.form-tip{margin:0;min-height:18px;font-size:12px;color:var(--coral-dark);text-align:center}

.result-done{
  margin-top:26px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.done-mark{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(180deg,#B8D69A,#8FB86A);
  color:#fff;font-size:38px;line-height:72px;font-weight:900;
  box-shadow:0 12px 24px rgba(120,160,90,.32);
}
.result-done h3{margin:8px 0 0;font-size:22px;font-weight:900}
.result-done p{margin:0 0 16px;font-size:13px;line-height:1.7;color:var(--brown-soft)}

/* ---------- 谢谢惠顾 ---------- */
.view-thanks{
  padding:calc(28px + var(--safe-t)) 30px calc(24px + var(--safe-b));
  align-items:center;justify-content:center;text-align:center;
  background:var(--cream);
}
.thanks-img{
  width:190px;height:190px;object-fit:contain;
  border-radius:50%;
  mix-blend-mode:multiply;
}
.view-thanks h2{
  margin:10px 0 0;font-size:30px;font-weight:900;letter-spacing:2px;color:var(--brown);
}
.view-thanks p{
  margin:10px 0 26px;font-size:14px;line-height:1.8;color:var(--brown-soft);
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:96px;
  transform:translate(-50%,14px);
  max-width:80vw;
  padding:11px 20px;
  background:rgba(74,48,40,.94);
  color:#fff;font-size:13px;border-radius:999px;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:60;
  white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 底部抽屉 ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-mask{position:absolute;inset:0;background:rgba(60,34,26,.45);animation:fade .2s ease}
.sheet-body{
  position:relative;
  width:100%;max-width:430px;
  max-height:76dvh;overflow-y:auto;
  background:var(--cream);
  border-radius:28px 28px 0 0;
  padding:22px 24px calc(24px + var(--safe-b));
  animation:slideUp .26s cubic-bezier(.22,1,.36,1);
}
.sheet-body h3{
  margin:0 0 14px;font-size:19px;font-weight:900;color:var(--brown);
  display:flex;align-items:center;justify-content:space-between;
}
.sheet-body h3 button{
  border:0;background:transparent;font-size:22px;color:#C4AA9C;cursor:pointer;line-height:1;
}
.sheet-body ol{margin:0;padding-left:20px;font-size:13.5px;line-height:2;color:var(--brown-soft)}
.sheet-body li{margin-bottom:2px}
.empty{
  padding:34px 0;text-align:center;color:#BFA294;font-size:13.5px;line-height:1.8;
}
.plist{display:flex;flex-direction:column;gap:10px}
.pitem{
  display:flex;align-items:center;gap:12px;
  background:var(--white);border-radius:16px;padding:10px 14px;
  box-shadow:var(--shadow);
}
.pitem img{width:46px;height:46px;object-fit:contain;border-radius:12px;mix-blend-mode:multiply}
.pitem .pi-main{flex:1;min-width:0}
.pitem .pi-name{font-size:14px;font-weight:800;color:var(--brown)}
.pitem .pi-time{font-size:11.5px;color:#BFA294;margin-top:2px}
.pitem .pi-state{font-size:11.5px;font-weight:800;color:var(--pistachio)}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}

/* 减少动效 */
@media (prefers-reduced-motion:reduce){
  .hub{animation:none}
  .ticker .dot{animation:none}
  *{scroll-behavior:auto}
}

.result-close{
  position:absolute;right:16px;top:calc(14px + var(--safe-t));
  width:34px;height:34px;border:0;border-radius:50%;
  background:var(--white);box-shadow:var(--shadow);
  color:#BFA294;display:grid;place-items:center;cursor:pointer;
  z-index:5;
}
.result-close svg{width:16px;height:16px}
.result-name{font-size:24px}

/* ===== 立体盘面 v2：层次 / 厚度 / 按钮不遮字 ===== */
.wheel-ring{
  background:linear-gradient(155deg,#FFCFBB 0%,#FF9A7E 34%,#F2633F 70%,#D9502F 100%);
  padding:10px;
  border:1px solid rgba(190,60,40,.28);
  box-shadow:
    0 10px 22px rgba(224,80,58,.20),
    0 -2px 0 rgba(255,255,255,.50) inset,
    inset 0 8px 14px rgba(255,255,255,.42),
    inset 0 -10px 18px rgba(150,40,25,.34),
    inset 0 0 0 2px rgba(255,255,255,.38);
}
.hub{
  width:26%;
  border:2.5px solid rgba(255,255,255,.92);
  background:radial-gradient(circle at 36% 28%,#FFB29C,#FF7A5C 55%,#E95536 100%);
  font-size:15px;letter-spacing:2px;
  box-shadow:
    0 8px 16px rgba(190,70,48,.32),
    inset 0 3px 6px rgba(255,255,255,.55),
    inset 0 -6px 12px rgba(160,50,30,.35);
  animation:hubGlow 3.2s ease-in-out infinite;
}
.hub:active{transform:translate(-50%,-50%) scale(.95)}
@keyframes hubGlow{
  0%,100%{box-shadow:0 8px 16px rgba(190,70,48,.32),inset 0 3px 6px rgba(255,255,255,.55),inset 0 -6px 12px rgba(160,50,30,.35)}
  50%{box-shadow:0 11px 24px rgba(190,70,48,.48),inset 0 3px 6px rgba(255,255,255,.62),inset 0 -6px 12px rgba(160,50,30,.35)}
}

/* 指针：奶油描边 + 珊瑚渐变三角 */
.pointer{
  position:absolute;left:50%;top:3px;
  width:32px;height:34px;
  transform:translateX(-50%);
  z-index:3;border:0;background:none;
  filter:drop-shadow(0 6px 8px rgba(160,60,40,.38));
}
.pointer::before{
  content:"";position:absolute;left:0;top:0;width:32px;height:34px;
  background:#FFF9F2;
  clip-path:polygon(50% 100%,0 0,100% 0);
}
.pointer::after{
  content:"";position:absolute;left:3px;top:3px;width:26px;height:28px;
  background:linear-gradient(180deg,#FF9A7E,#E14E33);
  clip-path:polygon(50% 100%,0 0,100% 0);
}