/* 抽奖中心页面 + 开奖动画（2026-11-04 重做，2026-11-05 改成白色为主，和商店 / 会员 / 设置一致）。
   开奖舞台 .lotto-show 由 lottery-stage.js 生成。稀有度颜色只用在光芒、边框、徽标上；动效只用 transform / opacity。 */

/* ---------- 页面 ---------- */
#achievementsPage.rewards-window{width:min(880px,calc(100vw - 40px));background:#f5f7f9}
#achievementsPage .rewards-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 28px 18px}
#achievementsPage .rewards-heading h2{margin:4px 0 0;font-size:26px}
.lotto{display:grid;gap:16px;padding:22px 28px 30px}
.lotto.hidden{display:none}

.lotto-hero{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;gap:26px;padding:26px 30px;border:1px solid #e3e9ec;border-radius:18px;background:linear-gradient(135deg,#ffffff 45%,#f1fafc 75%,#f4f1ff);color:#1d2a33;overflow:hidden;box-shadow:0 18px 40px -30px rgba(20,48,60,.45)}
.lotto-hero-glow{position:absolute;left:-60px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(19,184,207,.2),transparent 62%);pointer-events:none;animation:lotto-drift 7s ease-in-out infinite alternate}
.lotto-hero-glow:after{content:"";position:absolute;left:520px;top:150px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(150,120,255,.16),transparent 65%)}
.lotto-fan{position:relative;height:190px;display:grid;place-items:center;animation:lotto-bob 4s ease-in-out infinite}
/* 卡背：白底细边框，和开奖舞台的卡背同一套 */
.lotto-fan-card{background:linear-gradient(160deg,#ffffff,#f0f5f7)}
.lotto-fan-card{position:absolute;width:104px;height:146px;border-radius:14px;border:1px solid #d6e2e7;box-shadow:0 16px 28px -18px rgba(20,48,60,.45);transition:transform .45s cubic-bezier(.2,.9,.25,1.2)}
.lotto-fan-card.is-l{transform:translateX(-40px) rotate(-14deg);opacity:.85}
.lotto-fan-card.is-r{transform:translateX(40px) rotate(14deg);opacity:.85}
.lotto-fan-card.is-c{display:grid;place-items:center;z-index:1}
.lotto-fan-card svg{width:48px;height:48px;fill:none;stroke:#9db2bb;stroke-width:2;stroke-linecap:round}
.lotto-hero:hover .lotto-fan-card.is-l{transform:translateX(-58px) rotate(-20deg) translateY(4px)}
.lotto-hero:hover .lotto-fan-card.is-r{transform:translateX(58px) rotate(20deg) translateY(4px)}
.lotto-hero:hover .lotto-fan-card.is-c{transform:translateY(-8px) scale(1.04)}
.lotto-hero-main{position:relative;display:grid;gap:16px;min-width:0}
.lotto-hero-copy .page-overline{color:#13a9bf;font-size:10px;font-weight:800;letter-spacing:.24em}
.lotto-hero-copy h3{margin:4px 0 0;color:#17212a;font-size:26px;letter-spacing:.02em}
.lotto-wallet{display:flex;flex-wrap:wrap;gap:10px}
.lotto .lottery-balance{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid #e3e9ec;border-radius:12px;background:#fff;color:#7a8892}
.lotto .lottery-balance svg{width:19px;height:19px;fill:none;stroke:#13a6bd;stroke-width:1.9}
.lotto .lottery-balance strong{color:#1d2a33;font-family:var(--font-num,inherit);font-size:21px;font-variant-numeric:tabular-nums}
.lotto .lottery-balance span{font-size:12px}
.lotto .lotto-points .points-symbol{color:#8c5ac3;font-size:15px}
/* strong 默认是行内元素，transform 不生效，余额跳动之前一直没动 */
.lotto .lottery-balance strong{display:inline-block}
.lotto .lottery-balance strong.is-bump{animation:lotto-bump .5s cubic-bezier(.2,.9,.25,1.4)}
.lotto .lottery-balance strong.is-spend{animation:lotto-spend .5s ease}
.lotto-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lotto-draw{position:relative;height:50px;padding:0 18px;border:0;border-radius:13px;background:#13b8cf;color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer;overflow:hidden;box-shadow:0 12px 24px -14px rgba(19,184,207,.9);transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.lotto-draw:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease}
.lotto-draw:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(19,184,207,.95)}
.lotto-draw:hover:not(:disabled):before{transform:translateX(120%)}
.lotto-draw:active:not(:disabled){transform:scale(.97)}
.lotto-draw.is-batch{background:linear-gradient(100deg,#ffd27a,#ffab6e 50%,#f78fb3);color:#3a2212;box-shadow:0 12px 24px -14px rgba(247,143,120,.9)}
.lotto-draw.is-batch:hover:not(:disabled){box-shadow:0 16px 28px -14px rgba(247,143,120,.95)}
.lotto-draw:disabled{opacity:.55;cursor:default}
.lotto-draw:focus-visible{outline:2px solid #13b8cf;outline-offset:3px}

.lotto-odds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.lotto-odd{position:relative;display:grid;gap:3px;padding:12px 14px 12px 16px;border:1px solid #e3e9ec;border-radius:12px;background:#fff;overflow:hidden}
.lotto-odd:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.lotto-odd b{color:var(--c);font-size:12.5px;font-weight:800}
.lotto-odd small{color:#1d2a33;font-family:var(--font-num,inherit);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.lotto-odd.rarity-legendary b{background:linear-gradient(90deg,#c26a04,#f2b13a,#c26a04);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lotto-gold 3s linear infinite}

.lotto-result{min-height:180px;display:grid}
.lotto-empty{display:grid;justify-items:center;align-content:center;gap:14px;min-height:180px;border:1px dashed #d4e2e7;border-radius:16px;background:#fff}
.lotto-empty-card{display:grid;place-items:center;width:56px;height:76px;border:1px solid #c9e6ec;border-radius:11px;background:linear-gradient(150deg,#ffffff,#e6f6f9);color:#13a6bd;font-size:28px;font-weight:900;box-shadow:0 14px 24px -16px rgba(20,80,96,.6);animation:lotto-bob 3.2s ease-in-out infinite}
.lotto-empty strong{color:#4c5b65;font-size:14px}

/* 单抽结果卡 */
.lotto-receipt{display:flex;align-items:center;gap:22px;padding:22px 26px;border:1px solid color-mix(in srgb,var(--receipt-color) 30%,#e3e9ec);border-radius:16px;background:radial-gradient(120% 140% at 0% 50%,color-mix(in srgb,var(--receipt-color) 10%,#fff),#fff 60%);box-shadow:0 18px 40px -28px color-mix(in srgb,var(--receipt-color) 70%,transparent);opacity:0;transform:translateY(10px)}
.lotto-receipt.show{opacity:1;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.25,1.15)}
.lotto-receipt-tile{position:relative;flex:none;display:grid;place-items:center;width:76px;height:104px;border-radius:13px;background:linear-gradient(150deg,color-mix(in srgb,var(--receipt-color) 75%,#fff),var(--receipt-color));color:#fff;overflow:hidden;box-shadow:0 14px 26px -14px var(--receipt-color);transform:perspective(600px) rotateY(80deg);opacity:0}
.lotto-receipt.show .lotto-receipt-tile{transform:none;opacity:1;transition:transform .6s cubic-bezier(.2,.9,.25,1.2) .08s,opacity .3s ease .08s}
.lotto-receipt-tile svg,.lotto-tile-art svg,.lotto-front-glyph svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lotto-receipt.rarity-legendary .lotto-receipt-tile:after,.lotto-receipt.rarity-mythic .lotto-receipt-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:lotto-sheen 2.6s ease-in-out 1s infinite}
.lotto-receipt-copy{display:grid;gap:5px;min-width:0}
.lottery-receipt-label{color:color-mix(in srgb,var(--receipt-color) 85%,#1d2a33);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.lottery-receipt-title{color:#1d2a33;font-size:22px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.lotto-receipt-copy .lottery-receipt-copy{color:#7a8892;font-size:12.5px}
.lotto-message{min-height:0}
.lotto-message.is-error{border-color:#f0c4c8;background:#fff8f8}

/* 五连结果 */
.lotto-batch{border:1px solid #e3e9ec;border-radius:16px;background:#fff;overflow:hidden;opacity:0;transform:translateY(10px)}
.lotto-batch.show{opacity:1;transform:none;transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.lotto-batch .lottery-batch-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid #edf1f3}
.lotto-batch .lottery-batch-head strong{color:#1d2a33;font-size:14px}
.lotto-batch .lottery-batch-head small{color:#7a8892;font-size:12px;font-variant-numeric:tabular-nums}
.lotto-batch .lottery-batch-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:16px 18px 18px;list-style:none}
.lotto-tile{display:grid;align-content:start;justify-items:center;gap:6px;min-width:0;text-align:center;opacity:0;transform:translateY(12px) scale(.94)}
.lotto-batch.show .lotto-tile{animation:lotto-tile-in .45s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
.lotto-tile-art{position:relative;display:grid;place-items:center;width:100%;max-width:110px;aspect-ratio:5/7;border-radius:12px;background:linear-gradient(150deg,color-mix(in srgb,var(--row-color) 75%,#fff),var(--row-color));color:#fff;overflow:hidden;box-shadow:0 12px 22px -14px var(--row-color)}
.lotto-tile.rarity-legendary .lotto-tile-art:after,.lotto-tile.rarity-mythic .lotto-tile-art:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:lotto-sheen 2.6s ease-in-out 1.2s infinite}
.lotto-tile .lottery-batch-rarity{color:color-mix(in srgb,var(--row-color) 85%,#1d2a33);font-size:10.5px;font-weight:800;letter-spacing:.14em}
.lotto-tile strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#1d2a33;font-size:12.5px;line-height:1.35}
.lotto-tile .lottery-batch-tag{padding:3px 8px;border-radius:7px;background:#f0f4f6;color:#5d6b75;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.lotto-tile .lottery-batch-tag.is-new{background:#e6f8fb;color:#0a9db2}

@media(max-width:760px){
  #achievementsPage .rewards-heading{padding:16px 16px 14px}
  .lotto{padding:14px 14px 20px;gap:12px}
  .lotto-hero{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px}
  .lotto-fan{height:118px}
  .lotto-fan-card{width:70px;height:98px}
  .lotto-fan-card svg{width:40px;height:40px}
  .lotto-hero-copy h3{font-size:22px}
  .lotto-wallet{flex-wrap:nowrap;gap:8px}
  .lotto .lottery-balance{flex:1 1 0;min-width:0;height:40px;padding:0 10px;gap:6px}
  .lotto .lottery-balance strong{font-size:17px}
  .lotto .lottery-balance span{white-space:nowrap}
  .lotto-actions{grid-template-columns:minmax(0,1fr)}
  .lotto-odds{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .lotto-odd{padding:8px 6px 8px 9px;border-radius:10px}
  .lotto-odd b{font-size:11px}
  .lotto-odd small{font-size:12.5px}
  .lotto-receipt{gap:16px;padding:16px}
  .lotto-receipt-tile{width:60px;height:84px}
  .lottery-receipt-title{font-size:18px}
  .lotto-batch .lottery-batch-head{flex-wrap:wrap;padding:12px 14px}
  .lotto-batch .lottery-batch-head strong{white-space:nowrap}
  .lotto-batch .lottery-batch-list{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px}
}

/* ---------- 开奖舞台：训练场上打靶（白色为主） ---------- */
.lotto-show{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;overflow:hidden;opacity:0;transition:opacity .3s ease;--lotto-color:#6f8b99;--lotto-ink:color-mix(in srgb,var(--lotto-color) 78%,#16232c);--shard-alt:var(--lotto-ink);font-family:"AimDigits",MiSans,system-ui,-apple-system,"Segoe UI",sans-serif}
.lotto-show.show{opacity:1}
.lotto-show.is-leaving{opacity:0;transition:opacity .26s ease}
.lotto-show-veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 35%,#fbfdfe,#e8eff3)}
/* 训练场地面：往远处延伸的网格，慢慢朝镜头滚动 */
.lotto-floor{position:absolute;left:-40%;right:-40%;bottom:-8%;height:58%;perspective:520px;pointer-events:none;-webkit-mask:linear-gradient(to top,#000 10%,transparent 80%);mask:linear-gradient(to top,#000 10%,transparent 80%)}
.lotto-floor i{position:absolute;left:0;right:0;top:-60px;bottom:0;background-image:linear-gradient(color-mix(in srgb,var(--lotto-color) 28%,#c9d6dc) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--lotto-color) 28%,#c9d6dc) 1px,transparent 1px);background-size:60px 60px;transform-origin:50% 100%;transform:rotateX(70deg);animation:lotto-floor 2.4s linear infinite}
.lotto-show.is-charging .lotto-floor i{animation-duration:.9s}
/* 头顶的聚光灯，史诗以上翻开后染成稀有度颜色 */
.lotto-spot{position:absolute;left:50%;top:-6%;width:620px;height:100%;margin-left:-310px;background:linear-gradient(to bottom,color-mix(in srgb,var(--lotto-color) 26%,transparent),transparent 78%);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);opacity:.3;transform-origin:50% 0;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.lotto-show.is-charging .lotto-spot{opacity:.6;transform:scaleX(.82)}
.lotto-show.fx-epic .lotto-spot,.lotto-show.fx-mythic .lotto-spot,.lotto-show.fx-legendary .lotto-spot{opacity:.85;transform:scaleX(1.05)}
.lotto-show.is-batch .lotto-spot{width:1100px;margin-left:-550px}
/* 枪口闪光：神话 / 传说命中时一闪 */
.lotto-flash{position:absolute;inset:0;z-index:6;background:radial-gradient(circle at 50% 46%,#fff 0%,color-mix(in srgb,var(--lotto-color) 35%,#fff) 26%,transparent 62%);opacity:0;pointer-events:none}
.lotto-flash.go{animation:lotto-flash .45s ease-out .02s both}
.lotto-skip{position:absolute;top:22px;right:24px;z-index:8;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px 0 12px;border:1px solid #dbe5e9;border-radius:999px;background:#fff;color:#3f525e;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:color .2s ease,border-color .2s ease,opacity .2s ease}
.lotto-skip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lotto-skip:hover{border-color:#13b8cf;color:#0b8698}
.lotto-skip.is-used{opacity:.45}
.lotto-show.is-done .lotto-skip{opacity:0;pointer-events:none}
.lotto-skip:focus-visible{outline:2px solid #13b8cf;outline-offset:3px}

.lotto-show-center{position:relative;z-index:2;display:grid;justify-items:center;align-content:center;gap:30px;width:min(980px,calc(100vw - 32px));min-height:min(640px,calc(100vh - 40px))}
/* 后坐：神话 / 传说命中时整个画面往上一顶再落回 */
.lotto-show-center.kick{animation:lotto-recoil .5s cubic-bezier(.2,.8,.2,1) .02s}
.lotto-show-center.kick-soft{animation:lotto-recoil-soft .42s cubic-bezier(.2,.8,.2,1) .02s}
.lotto-focus{position:relative;display:grid;place-items:center;perspective:1200px}
.lotto-aim,.lotto-ripples,.lotto-hits,.lotto-shards{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5}
/* 每一枪的特效层（lottery-stage.js 的 spawn），播完自动删除 */
.lotto-shot{position:absolute;inset:0;z-index:5;pointer-events:none}
/* 水波纹那层垫在卡牌下面（卡牌 z-index 3） */
.lotto-shot.is-under{z-index:1}

/* 四条准星线：蓄力时从画面外收拢到卡边，命中时打进卡中心并消失 */
.lotto-aim i{position:absolute;background:var(--lotto-ink);border-radius:2px;opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.lotto-aim .is-t,.lotto-aim .is-b{left:-1px;width:2px;height:64px}
.lotto-aim .is-l,.lotto-aim .is-r{top:-1px;width:64px;height:2px}
.lotto-aim .is-t{top:-64px;transform:translateY(-460px)}
.lotto-aim .is-b{top:0;transform:translateY(460px)}
.lotto-aim .is-l{left:-64px;transform:translateX(-560px)}
.lotto-aim .is-r{left:0;transform:translateX(560px)}
.lotto-show.is-charging .lotto-aim i{opacity:1}
.lotto-show.is-charging .lotto-aim .is-t{transform:translateY(-196px)}
.lotto-show.is-charging .lotto-aim .is-b{transform:translateY(196px)}
.lotto-show.is-charging .lotto-aim .is-l{transform:translateX(-150px)}
.lotto-show.is-charging .lotto-aim .is-r{transform:translateX(150px)}
.lotto-show.is-revealed .lotto-aim i{opacity:0;transition:transform .18s ease-in,opacity .2s ease .1s}
.lotto-show.is-revealed .lotto-aim .is-t{transform:translateY(-120px)}
.lotto-show.is-revealed .lotto-aim .is-b{transform:translateY(120px)}
.lotto-show.is-revealed .lotto-aim .is-l{transform:translateX(-80px)}
.lotto-show.is-revealed .lotto-aim .is-r{transform:translateX(80px)}

/* 水波纹 */
.lotto-ripples b{position:absolute;left:-130px;top:-130px;width:260px;height:260px;border-radius:50%;border:2px solid var(--lotto-color);opacity:0}
.lotto-ripples b.is-late{border-width:1.2px}
.lotto-show.is-batch .lotto-ripples b{left:-90px;top:-90px;width:180px;height:180px}
.lotto-ripples.go b{animation:lotto-ripple 1.1s cubic-bezier(.2,.7,.3,1) both}
.lotto-ripples.go b.is-late{animation-delay:.16s;animation-duration:1.3s}
/* 命中标记：四道斜线从中心弹开 */
.lotto-hits span{position:absolute;left:0;top:0;transform:translate(var(--ox),var(--oy))}
.lotto-hits i{position:absolute;left:-2px;top:-12px;width:4px;height:24px;border-radius:2px;background:var(--hit,var(--lotto-ink));opacity:0}
.lotto-hits i:nth-child(1){--r:45deg}.lotto-hits i:nth-child(2){--r:135deg}.lotto-hits i:nth-child(3){--r:225deg}.lotto-hits i:nth-child(4){--r:315deg}
.lotto-hits.go i{animation:lotto-hit .5s cubic-bezier(.2,.8,.2,1) both}
/* 碎片 */
.lotto-shards i{position:absolute;left:-2px;top:0;width:4px;height:var(--len);border-radius:1px;background:var(--shard,var(--lotto-color));opacity:0}
.lotto-shards.go i{animation:lotto-shard var(--dur) cubic-bezier(.15,.75,.3,1) var(--delay) both}

/* 卡片四层：外层入场 + 上下悬浮，tilt 跟指针，shake 负责抬起 / 托起 / 颤动，inner 翻面 */
.lotto-card3d{position:relative;z-index:3;width:236px;height:330px;transform-style:preserve-3d;animation:lotto-card-in .6s cubic-bezier(.2,.8,.2,1) both,lotto-hover 4s ease-in-out .6s infinite}
.lotto-shadow{position:absolute;left:12%;right:12%;bottom:-34px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,40,52,.24),rgba(20,40,52,0));animation:lotto-shadow 4s ease-in-out .6s infinite;pointer-events:none}
/* 锁定角框 */
.lotto-lock{position:absolute;inset:-24px;z-index:4;opacity:.6;pointer-events:none;animation:lotto-lock-idle 2.4s ease-in-out infinite;transition:opacity .4s ease}
.lotto-lock i{position:absolute;width:24px;height:24px;border:0 solid #9db2bb;transition:border-color .35s ease}
.lotto-lock i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px;border-top-left-radius:6px}
.lotto-lock i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0;border-top-right-radius:6px}
.lotto-lock i:nth-child(3){right:0;bottom:0;border-width:0 2px 2px 0;border-bottom-right-radius:6px}
.lotto-lock i:nth-child(4){left:0;bottom:0;border-width:0 0 2px 2px;border-bottom-left-radius:6px}
.lotto-show.is-charging .lotto-lock{opacity:1;animation:lotto-lock-in .45s cubic-bezier(.2,.8,.2,1) both}
.lotto-show.is-charging .lotto-lock i{border-color:var(--lotto-color)}
.lotto-show.is-revealed .lotto-card3d:not(.is-mini) .lotto-lock{animation:lotto-lock-out .45s ease-out both}
.lotto-card-tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.lotto-card-shake{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.lotto-show.is-charging .lotto-card-shake{transform:translateY(-10px) scale(1.03)}
.lotto-show.is-charging.rarity-mythic .lotto-card-shake,.lotto-show.is-charging.rarity-legendary .lotto-card-shake{animation:lotto-tremble .08s linear .3s infinite}
.lotto-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1.08)}
.lotto-card3d.is-flipped .lotto-card-inner{transform:rotateY(180deg)}
.lotto-face{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:10px;padding:22px;border-radius:18px;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;text-align:center}
.lotto-show .lotto-back{border:1px solid #d6e2e7;background:linear-gradient(160deg,#ffffff,#eef4f6);box-shadow:0 18px 36px -24px rgba(20,48,60,.5)}
.lotto-show .lotto-back:before{content:"";position:absolute;inset:10px;border:1px solid #e3ecef;border-radius:11px}
.lotto-show .lotto-back:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--lotto-color),inset 0 0 34px color-mix(in srgb,var(--lotto-color) 36%,transparent);opacity:0;transition:opacity .45s ease}
.lotto-show.is-charging .lotto-back:after{opacity:1}
.lotto-show .lotto-back-mark{width:64px;height:64px;fill:none;stroke:#9db2bb;stroke-width:2;stroke-linecap:round;transition:transform .5s cubic-bezier(.2,.8,.2,1),stroke .35s ease}
.lotto-show.is-charging .lotto-back-mark{stroke:var(--lotto-color);transform:scale(.86)}
.lotto-card3d.is-mini .lotto-back-mark{width:38px;height:38px}
/* 卡面：白底细纹卡纸，顶部一条稀有度颜色；史诗以上边框和图标都上色 */
.lotto-front{--cc:var(--card-color,var(--lotto-color));transform:rotateY(180deg);border:1px solid #e1e8eb;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--cc) 14%,#fff),#fff 70%),repeating-linear-gradient(135deg,color-mix(in srgb,var(--cc) 7%,transparent) 0 1px,transparent 1px 7px),#fff;box-shadow:inset 0 3px 0 var(--cc),0 22px 40px -24px rgba(20,48,60,.5)}
.lotto-card3d.rarity-epic .lotto-front,.lotto-card3d.rarity-mythic .lotto-front,.lotto-card3d.rarity-legendary .lotto-front{border-color:color-mix(in srgb,var(--cc) 55%,#e1e8eb)}
.lotto-front>*:not(.lotto-glare):not(.lotto-sheen){position:relative}
.lotto-front-glyph{display:grid;place-items:center;width:60px;height:60px;margin-bottom:4px;border-radius:50%;background:color-mix(in srgb,var(--cc) 12%,#fff);color:var(--cc)}
.lotto-card3d.rarity-epic .lotto-front-glyph,.lotto-card3d.rarity-mythic .lotto-front-glyph,.lotto-card3d.rarity-legendary .lotto-front-glyph{background:var(--cc);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--cc) 14%,transparent)}
.lotto-front-glyph svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lotto-rarity{color:color-mix(in srgb,var(--cc) 85%,#16232c);font-size:11px;font-weight:800;letter-spacing:.24em}
.lotto-name{color:#17212a;font-size:20px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.lotto-copy{color:#7a8892;font-size:12px}
.lotto-card3d.is-flipped .lotto-front-glyph{animation:lotto-glyph .5s cubic-bezier(.2,.9,.25,1.3) .3s both}
.lotto-card3d.is-flipped .lotto-rarity,.lotto-card3d.is-flipped .lotto-name,.lotto-card3d.is-flipped .lotto-copy{animation:lotto-rise .45s cubic-bezier(.2,.8,.2,1) both}
.lotto-card3d.is-flipped .lotto-rarity{animation-delay:.38s}
.lotto-card3d.is-flipped .lotto-name{animation-delay:.44s}
.lotto-card3d.is-flipped .lotto-copy{animation-delay:.5s}
/* 反光：神话 / 传说的卡面每隔一会儿扫过一道 */
.lotto-sheen{position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none;z-index:1}
.lotto-card3d.rarity-mythic.is-flipped .lotto-sheen,.lotto-card3d.rarity-legendary.is-flipped .lotto-sheen{animation:lotto-sheen 2.8s ease-in-out .55s infinite}
/* 高光：随指针移动，倾斜越大越亮 */
.lotto-glare{position:absolute;left:-50%;top:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.6),rgba(255,255,255,0) 32%);opacity:0;pointer-events:none;z-index:2}
.lotto-show-status{min-height:20px;color:var(--lotto-ink);font-size:14px;font-weight:700;letter-spacing:.04em;text-align:center}
.lotto-show-actions{display:flex;gap:10px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.lotto-show.is-done .lotto-show-actions{opacity:1;transform:none;pointer-events:auto}
.lotto-show-actions button{height:44px;min-width:120px;padding:0 20px;border-radius:12px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.lotto-again{border:1px solid #d7e2e6;background:#fff;color:#3f525e}
.lotto-again:hover{border-color:#13b8cf;color:#0b8698}
.lotto-collect{border:0;background:#1d2a33;color:#fff}
.lotto-show.fx-epic .lotto-collect,.lotto-show.fx-mythic .lotto-collect,.lotto-show.fx-legendary .lotto-collect{background:var(--lotto-color)}
.lotto-collect:hover{transform:translateY(-1px)}
.lotto-show-actions button:active{transform:scale(.97)}
.lotto-show-actions button:focus-visible{outline:2px solid #13b8cf;outline-offset:3px}

/* 五连：五张小卡 */
.lotto-hand{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 16px;perspective:1200px}
.lotto-card3d.is-mini{width:clamp(108px,14vw,150px);height:auto;aspect-ratio:5/7;animation:lotto-deal .5s cubic-bezier(.2,.8,.2,1) both,lotto-hover 4s ease-in-out infinite;animation-delay:calc(var(--i) * 80ms),calc(var(--i) * 80ms + .5s)}
.lotto-card3d.is-mini .lotto-shadow{bottom:-24px;height:16px;animation-delay:calc(var(--i) * 80ms + .5s)}
.lotto-card3d.is-mini .lotto-lock{inset:-14px;opacity:0;animation:none}
.lotto-card3d.is-mini .lotto-lock{transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.lotto-card3d.is-mini .lotto-lock i{width:16px;height:16px;border-color:#1d2a33}
.lotto-card3d.is-mini.is-lifted .lotto-lock i{border-color:var(--card-color,var(--lotto-color))}
/* 五连开枪：鼠标在没打开的卡上变成十字准星，卡被锁定框框住并微微抬起 */
.lotto-show.is-aiming .lotto-card3d:not(.is-shot){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='white' stroke-width='4'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M16 2v7M16 23v7M2 16h7M23 16h7'/%3E%3C/g%3E%3Cg stroke='%231d2a33' stroke-width='2'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M16 2v7M16 23v7M2 16h7M23 16h7'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2.2' fill='%23e2455a' stroke='white'/%3E%3C/svg%3E") 16 16,crosshair}
/* 键盘选中时用锁定框表示焦点，不要 motion.css 的通用描边 */
.lotto-show .lotto-card3d:focus,.lotto-show .lotto-card3d:focus-visible{outline:none}
.lotto-show.is-aiming .lotto-card3d:not(.is-shot):hover .lotto-lock,.lotto-show.is-aiming .lotto-card3d:not(.is-shot):focus-visible .lotto-lock{opacity:1;transform:scale(.94)}
.lotto-show.is-aiming .lotto-card3d:not(.is-shot):hover .lotto-card-shake,.lotto-show.is-aiming .lotto-card3d:not(.is-shot):focus-visible .lotto-card-shake{transform:translateY(-6px)}
/* 中弹：往后一顿再翻面 */
.lotto-card3d.is-hit .lotto-card-shake{animation:lotto-knock .34s cubic-bezier(.2,.8,.2,1)}
.lotto-show.is-aiming .lotto-show-status{color:#6f7f89;animation:lotto-hint 1.6s ease-in-out infinite}
.lotto-card3d.is-mini .lotto-face{gap:6px;padding:12px;border-radius:13px}
.lotto-card3d.is-mini .lotto-front-glyph{width:38px;height:38px;box-shadow:none}
.lotto-card3d.is-mini .lotto-front-glyph svg{width:20px;height:20px}
.lotto-card3d.is-mini .lotto-rarity{font-size:9.5px;letter-spacing:.16em}
.lotto-card3d.is-mini .lotto-name{font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.lotto-card3d.is-mini .lotto-copy{display:none}
/* 这一手里最高品质（至少史诗）的卡被托起来并被角框锁定 */
.lotto-card3d.is-mini.is-lifted{z-index:4}
.lotto-card3d.is-mini.is-lifted .lotto-card-shake{transform:translateY(-14px) scale(1.06)}
.lotto-card3d.is-mini.is-lifted .lotto-lock{opacity:1;animation:lotto-lock-on .5s cubic-bezier(.2,.8,.2,1) both}
.lotto-show.is-batch .lotto-show-center{gap:34px}

@keyframes lotto-floor{from{transform:rotateX(70deg) translateY(0)}to{transform:rotateX(70deg) translateY(60px)}}
@keyframes lotto-card-in{from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:none}}
@keyframes lotto-deal{from{opacity:0;transform:translateY(46px) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes lotto-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes lotto-shadow{0%,100%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(8px) scale(.86);opacity:.65}}
@keyframes lotto-lock-idle{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes lotto-lock-in{from{transform:scale(1.06)}to{transform:scale(.93)}}
@keyframes lotto-lock-out{from{opacity:1;transform:scale(.93)}to{opacity:0;transform:scale(1.18)}}
@keyframes lotto-lock-on{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:translateY(-14px) scale(1.06)}}
@keyframes lotto-tremble{0%,100%{transform:translate(0,-10px) scale(1.03)}25%{transform:translate(-1.5px,-10px) scale(1.03)}75%{transform:translate(1.5px,-11px) scale(1.03)}}
@keyframes lotto-flash{0%{opacity:0}12%{opacity:.7}100%{opacity:0}}
@keyframes lotto-knock{0%{transform:none}30%{transform:translateY(-4px) rotate(-2.5deg) scale(.95)}100%{transform:none}}
@keyframes lotto-hint{50%{opacity:.55}}
@keyframes lotto-recoil{0%{transform:none}18%{transform:translateY(-12px) rotate(-1deg)}100%{transform:none}}
@keyframes lotto-recoil-soft{0%{transform:none}20%{transform:translateY(-6px) rotate(-.5deg)}100%{transform:none}}
@keyframes lotto-ripple{0%{opacity:.75;transform:translate(var(--ox),var(--oy)) scale(.55)}100%{opacity:0;transform:translate(var(--ox),var(--oy)) scale(2.5)}}
@keyframes lotto-hit{0%{opacity:1;transform:rotate(var(--r)) translateY(-16px) scaleY(.4)}55%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) translateY(-46px) scaleY(1)}}
@keyframes lotto-shard{0%{opacity:1;transform:translate(var(--ox),var(--oy)) rotate(var(--a)) translateY(-20px) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--ox),var(--oy)) rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(var(--spin)) scale(.35)}}
@keyframes lotto-glyph{0%{opacity:0;transform:scale(.4) rotate(-25deg)}100%{opacity:1;transform:none}}
@keyframes lotto-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes lotto-sheen{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
@keyframes lotto-bob{50%{transform:translateY(-6px)}}
@keyframes lotto-drift{to{transform:translate(40px,30px) scale(1.1)}}
@keyframes lotto-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes lotto-spend{0%{transform:translateY(0);color:inherit}30%{transform:translateY(-4px);color:#d04c58}100%{transform:none}}
@keyframes lotto-gold{to{background-position:-200% 0}}
@keyframes lotto-tile-in{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}

@media(max-width:620px){
  .lotto-card3d:not(.is-mini){width:200px;height:280px}
  .lotto-show.is-charging .lotto-aim .is-t{transform:translateY(-172px)}
  .lotto-show.is-charging .lotto-aim .is-b{transform:translateY(172px)}
  .lotto-show.is-charging .lotto-aim .is-l{transform:translateX(-130px)}
  .lotto-show.is-charging .lotto-aim .is-r{transform:translateX(130px)}
  .lotto-spot{width:420px;margin-left:-210px}
  .lotto-hand{gap:14px 10px;max-width:380px}
  .lotto-card3d.is-mini{width:min(26vw,104px)}
  .lotto-show-actions button{min-width:0;flex:1}
  .lotto-show-actions{width:min(320px,100%)}
}
@media(prefers-reduced-motion:reduce){
  .lotto-hero-glow,.lotto-fan,.lotto-empty-card,.lotto-odd.rarity-legendary b,.lotto-floor i,.lotto-card3d,.lotto-card3d.is-mini,.lotto-shadow,.lotto-lock,.lotto-card-shake,.lotto-sheen,.lotto-show-center,.lotto-receipt-tile:after,.lotto-tile-art:after,.lotto .lottery-balance strong,.lotto-front-glyph,.lotto-rarity,.lotto-name,.lotto-copy{animation:none!important}
  .lotto-card-inner,.lotto-card-shake,.lotto-receipt-tile,.lotto-show-actions,.lotto-fan-card,.lotto-aim i,.lotto-spot{transition:none!important}
  .lotto-aim,.lotto-ripples,.lotto-hits,.lotto-shards,.lotto-flash{display:none}
  .lotto-batch.show .lotto-tile{animation:none;opacity:1;transform:none}
}
html[data-reduce-motion] .lotto-hero-glow,html[data-reduce-motion] .lotto-fan,html[data-reduce-motion] .lotto-empty-card,html[data-reduce-motion] .lotto-floor i,html[data-reduce-motion] .lotto-card3d,html[data-reduce-motion] .lotto-shadow,html[data-reduce-motion] .lotto-lock,html[data-reduce-motion] .lotto-card-shake,html[data-reduce-motion] .lotto-sheen,html[data-reduce-motion] .lotto-show-center,html[data-reduce-motion] .lotto-front-glyph,html[data-reduce-motion] .lotto-rarity,html[data-reduce-motion] .lotto-name,html[data-reduce-motion] .lotto-copy{animation:none!important}
html[data-reduce-motion] .lotto-card-inner{transition:none}
html[data-reduce-motion] .lotto-aim,html[data-reduce-motion] .lotto-ripples,html[data-reduce-motion] .lotto-hits,html[data-reduce-motion] .lotto-shards,html[data-reduce-motion] .lotto-flash{display:none}
html[data-reduce-motion] .lotto-batch.show .lotto-tile{animation:none;opacity:1;transform:none}