* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  background: radial-gradient(120% 80% at 50% 12%, #2a1a10 0%, #140d08 55%, #0a0705 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  color: #f7e6c4; user-select: none; -webkit-user-select: none;
  touch-action: none;
}
body::after {  /* 暗角 */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 45%, transparent 40%, rgba(0,0,0,.65) 100%);
}

/* ---------- 左上角剩余抽数 ---------- */
#hud {
  position: fixed; z-index: 40;
  top: calc(env(safe-area-inset-top) + 14px); left: 14px;
  display: flex; align-items: center; gap: 8px;
}
#counter {
  display: flex; align-items: baseline; gap: 6px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: linear-gradient(160deg, rgba(60,38,18,.92), rgba(28,18,10,.92));
  border: 1px solid rgba(226,178,86,.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,225,160,.25);
  backdrop-filter: blur(6px);
}
#counter .ico { width: 17px; height: 17px; opacity: .95; }
#count {
  font-size: 26px; font-weight: 800; letter-spacing: .5px; line-height: 1;
  color: #ffd98a; text-shadow: 0 0 12px rgba(255,190,80,.55);
  font-variant-numeric: tabular-nums; transition: transform .18s ease;
}
#count.bump { transform: scale(1.28); }
#counter .unit { font-size: 12px; color: #d9b478; letter-spacing: .12em; }
#gain {
  position: fixed; z-index: 41; font-size: 20px; font-weight: 800;
  color: #ffe6a8; text-shadow: 0 0 14px rgba(255,180,60,.9), 0 2px 6px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
}
#gain.go { animation: gainUp 1.5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes gainUp {
  0% { opacity: 0; transform: translate(0,0) scale(.7); }
  22% { opacity: 1; transform: translate(0,-6px) scale(1.25); }
  70% { opacity: 1; transform: translate(6px,-46px) scale(1); }
  100% { opacity: 0; transform: translate(10px,-78px) scale(.95); }
}
#reset {
  width: 40px; height: 40px; border-radius: 50%; font-size: 20px; line-height: 1;
  color: #ffd98a; background: rgba(40,26,14,.9); border: 1px solid rgba(226,178,86,.5);
  display: none; place-items: center; cursor: pointer;
}
#reset.on { display: grid; animation: pop .35s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- 彩票 ---------- */
#stage { position: fixed; inset: 0; display: grid; place-items: center; z-index: 10; }
#stage.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }
#stage.shakeHard { animation: shake .8s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px) rotate(-.3deg); }
  20%, 80% { transform: translate(4px, -2px) rotate(.4deg); }
  30%, 50%, 70% { transform: translate(-6px, 2px) rotate(-.5deg); }
  40%, 60% { transform: translate(6px, -1px) rotate(.5deg); }
}

#ticket {
  position: relative; width: min(76vw, 326px, 42vh);
  padding: 13px 13px 0; border-radius: 18px;
  background:
    linear-gradient(158deg, #e0333c 0%, #c01f27 38%, #a3151d 62%, #d92b34 100%);
  border: 1px solid rgba(255,214,140,.5);
  box-shadow: 0 26px 50px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,205,120,.16),
              inset 0 2px 0 rgba(255,255,255,.16);
  transform-origin: 50% 60%; opacity: 0; transform: translateY(26px) scale(.94);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.3,.35,1);
}
#ticket.in { opacity: 1; transform: none; }
#ticket.out { opacity: 0; transform: translateY(-34px) scale(.9) rotate(-1.5deg); }

/* 顶部烫金花纹（纯 CSS，无文字） */
.tk-head {
  position: relative; height: 42px; border-radius: 10px 10px 6px 6px; margin-bottom: 11px;
  background:
    repeating-linear-gradient(115deg, rgba(255,222,150,.22) 0 6px, transparent 6px 14px),
    repeating-radial-gradient(circle at 12px 50%, rgba(255,232,170,.35) 0 2.4px, transparent 2.6px 13px),
    linear-gradient(180deg, #f6cf7d, #c9973c 55%, #f0c977);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.35);
}
.tk-head::before, .tk-head::after {
  content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff3cf, #d8a642 60%, #a9761f);
  box-shadow: inset 0 0 0 2px rgba(150,100,20,.35);
}
.tk-head::before { left: 12px; } .tk-head::after { right: 12px; }

/* 奖品区 + 涂层 */
.prize-wrap {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #1b1208, #0d0906);
  box-shadow: inset 0 0 0 2px rgba(255,205,120,.35), 0 0 22px rgba(255,170,60,.12);
}
#prize { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
#prize img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s ease; }
#prize img.show { opacity: 1; }
#prize .rnd {
  font-size: 44px; font-weight: 900; letter-spacing: .16em; color: #6f6355;
  font-variant-numeric: tabular-nums;
}
#prize .rnd.dim { animation: dimIn .5s ease both; }
@keyframes dimIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
#scratch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; cursor: pointer; touch-action: none; }
#scratch.gone { display: none; }

/* 涂层上的循环扫光：提示"点一下刮开" */
#shine {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.62) 50%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: sweep 2.6s cubic-bezier(.4,0,.5,1) infinite;
}
#shine.gone { display: none; }
@keyframes sweep {
  0% { background-position: 165% 0; opacity: 0; }
  12% { opacity: 1; }
  55% { background-position: -65% 0; opacity: 1; }
  62%, 100% { background-position: -65% 0; opacity: 0; }
}
.peel { position: absolute; inset: 0; z-index: 4; background-size: 100% 100%; opacity: 0; pointer-events: none; }
.peel.go { opacity: 1; animation: peelFly .75s cubic-bezier(.3,.05,.3,1) both; }
#peelA.go { --tx: -14%; --ty: -128%; --rot: -11deg; }
#peelB.go { --tx: 16%; --ty: 132%; --rot: 9deg; }
@keyframes peelFly {
  0% { transform: none; opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; }
}

/* 齿孔虚线 + 存根 */
.perf {
  position: relative; height: 16px; margin: 11px -13px 0;
  background: repeating-linear-gradient(90deg, rgba(255,232,180,.85) 0 7px, transparent 7px 15px);
  height: 2px; opacity: .75;
}
.tk-stub { height: 54px; margin: 0 -13px; padding: 8px 16px 10px; display: flex; align-items: center; gap: 14px; }
.bars {
  flex: 1; height: 26px;
  background: repeating-linear-gradient(90deg, #f4e3bd 0 2px, transparent 2px 4px, #f4e3bd 4px 5px, transparent 5px 9px);
  opacity: .82;
}
.serial { font-size: 13px; letter-spacing: .18em; color: #ffe1a6; font-variant-numeric: tabular-nums; opacity: .9; }

/* 提示手（首次） */
#hint { position: absolute; z-index: 6; left: 50%; top: 58%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; border: 2px solid rgba(255,225,165,.85); opacity: 0; }
#hint.go { animation: hintSwipe 1.8s ease-in-out infinite; }
@keyframes hintSwipe {
  0% { opacity: 0; transform: translate(-30px, 24px) scale(.8); }
  30% { opacity: .9; }
  60% { transform: translate(30px, -24px) scale(1); opacity: .9; }
  100% { opacity: 0; transform: translate(34px, -30px) scale(.85); }
}

/* ---------- 特效层 ---------- */
#fx { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#flash { position: fixed; inset: 0; z-index: 31; pointer-events: none; opacity: 0; }
#flash.gold { background: radial-gradient(circle at 50% 45%, rgba(255,238,190,.95), rgba(255,190,70,.5) 45%, transparent 72%); }
#flash.soft { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.6), transparent 65%); }
#flash.go { animation: flashOut .7s ease-out both; }
@keyframes flashOut { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

#rays {
  position: fixed; z-index: 29; left: 50%; top: 46%; width: 190vmax; height: 190vmax;
  margin: -95vmax 0 0 -95vmax; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg,
    rgba(255,214,120,.55) 0 1.4deg, transparent 1.4deg 11deg,
    rgba(255,236,180,.4) 11deg 12.2deg, transparent 12.2deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 6%, rgba(0,0,0,.75) 26%, transparent 62%);
  mask-image: radial-gradient(circle, #000 6%, rgba(0,0,0,.75) 26%, transparent 62%);
}
#rays.go { animation: raysIn 2.2s ease-out both; }
#rays.spin { animation: raysIn 2.2s ease-out both, spin 9s linear infinite; }
@keyframes raysIn { 0% { opacity: 0; transform: scale(.55) rotate(-25deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15) rotate(20deg); } }
@keyframes spin { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(25deg); } }

/* 图片中奖光晕 */
#prize.glow::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,226,150,.55), transparent 58%);
  animation: glowPulse 1.8s ease-in-out infinite;
}
@keyframes glowPulse { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }