/* =========================================================
   逼翰大戰爭 v8.6 抽卡（js/summon.js）＋轉蛋頁的卡牌商店外觀
   =========================================================
   抽卡：卡包浮在光圈上 → 橫向滑過上緣撕開 → 透出光（顏色＝最高稀有度）→ 爆開發牌 →
         點卡片翻開（卡背的光是預兆）→ ㄉㄜˋ頂以上全螢幕登場（大卡跟著滑鼠傾斜）→ 結果
   轉蛋頁：左欄選卡包、右邊舞台是會傾斜的大卡包＋這一包的內容、下面是抽的按鈕
   載在 deluxe.css 之後（最後一層）。 */

/* =================== 抽卡覆蓋層 =================== */
#summon-overlay{position:absolute;inset:0;z-index:70;overflow:hidden;background:#04060f;user-select:none;touch-action:none;cursor:pointer}
.sm-world{position:absolute;inset:0;z-index:1;transform-origin:480px 240px}
/* v8.8 鏡頭：蓄力時慢慢推近（.charging），爆開那一下從推近的位置「砰」地彈回來（震動的第一格帶放大） */
.sm-world.charging{transform:scale(1.06);transition:transform 1.05s cubic-bezier(.6,0,.9,.45)}
.sm-world.shake{animation:sm-shake .45s ease-out}
.sm-world.shake-big{animation:sm-shake-big .75s ease-out}
@keyframes sm-shake{0%{transform:scale(1.06)}15%{transform:translate(-6px,4px) scale(1.02)}30%{transform:translate(5px,-4px)}45%{transform:translate(-4px,2px)}60%{transform:translate(3px,-2px)}80%{transform:translate(-1px,1px)}}
@keyframes sm-shake-big{0%{transform:scale(1.1)}8%{transform:translate(-12px,8px) rotate(-.4deg) scale(1.05)}18%{transform:translate(11px,-9px) rotate(.4deg) scale(.99)}30%{transform:translate(-9px,6px)}
  42%{transform:translate(7px,-5px)}55%{transform:translate(-5px,3px)}70%{transform:translate(3px,-2px)}85%{transform:translate(-1px,1px)}}
#sm-sky{position:absolute;left:0;top:0;display:block}
#sm-fx{position:absolute;left:0;top:0;width:960px;height:540px;z-index:4;pointer-events:none}
.sm-flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:#fff}
.sm-flash.on{animation:sm-flash .5s ease-out forwards}
.sm-flash.on.t2{animation-duration:.8s;background:radial-gradient(circle at 50% 44%,#fff 0,#fff6d0 40%,#ffd75e 100%)}
.sm-flash.on.t3{animation-duration:1s;background:radial-gradient(circle at 50% 44%,#fff 0,#f0dcff 32%,#b86bff 68%,#5a2ab0 100%)}
.sm-flash.on.promote{animation:sm-flash .45s ease-out forwards;background:radial-gradient(circle at 50% 30%,#ffffffd0,#ffe27a80 30%,#fff0 70%)}
/* v9.0 幹超瑟：金光升成紫光的那一下 */
.sm-flash.on.promote.ur{animation:sm-flash .6s ease-out forwards;background:radial-gradient(circle at 50% 36%,#ffffffe0,#d9a8ffb0 30%,#8a4ad633 60%,#fff0 78%)}
@keyframes sm-flash{0%{opacity:.95}100%{opacity:0}}

/* ---- 上方：標題與跳過 ---- */
.sm-top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;pointer-events:none}
.sm-top>*{pointer-events:auto}
.sm-title{display:flex;align-items:center;gap:8px;padding:4px 14px 4px 8px;color:#fff6dd;background:#0a0816b8;border:3px solid #000;
  box-shadow:inset 0 0 0 2px #ffd75e55,0 3px 0 #0008}
.sm-title .pxi{width:24px;height:24px}
.sm-title b{font-size:15px;font-weight:900;letter-spacing:2px}
.sm-title span{font-size:12px;font-weight:900;color:#ffd75c;padding:0 6px;border:2px solid #ffd75e88}
.sm-skip{padding:6px 14px;font-size:13px;border-width:3px}

/* ---- 1. 卡包 ---- */
.sm-pack{position:absolute;left:382px;top:96px;width:196px;height:280px;z-index:2;--lc:#bfe8ff;--cutY:30px}
.sm-pack.in{animation:smp-in .8s cubic-bezier(.2,1.1,.35,1) both}
@keyframes smp-in{0%{transform:perspective(900px) translateY(430px) rotateY(-540deg) scale(.55)}
  70%{transform:perspective(900px) translateY(-14px) rotateY(0) scale(1.03)}100%{transform:none}}
.smp-float{position:absolute;inset:0;animation:smp-bob 2.8s ease-in-out infinite;filter:drop-shadow(0 0 14px var(--lc)) drop-shadow(0 12px 0 #0007)}
@keyframes smp-bob{50%{transform:translateY(-8px)}}
.smp-tilt{position:absolute;inset:0;transition:transform .12s ease-out}
.smp-body,.smp-top{position:absolute;left:0;top:0}
.smp-foil,.smp-sheen{position:absolute;left:7px;right:7px;top:calc(var(--cutY) + 4px);bottom:27px;pointer-events:none}
.smp-foil{mix-blend-mode:color-dodge;opacity:.7;background:linear-gradient(115deg,#0000 30%,#ff7be055 40%,#8fe6ff55 50%,#ffe27a55 60%,#0000 70%);
  background-size:300% 100%;animation:smp-foil 3.4s linear infinite}
@keyframes smp-foil{from{background-position:120% 0}to{background-position:-120% 0}}
.smp-sheen{overflow:hidden}
.smp-sheen::before{content:"";position:absolute;inset:-20% -80%;background:linear-gradient(105deg,#fff0 44%,#ffffff5c 50%,#fff0 56%);animation:smp-sheen 2.8s ease-in-out infinite}
@keyframes smp-sheen{0%,35%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
/* 撕開線：手指滑到哪、亮到哪 */
.smp-cut{position:absolute;left:0;top:calc(var(--cutY) - 2px);width:0;height:4px;background:#fff;pointer-events:none;
  box-shadow:0 0 8px #fff,0 0 18px var(--lc),0 0 30px var(--lc)}
.smp-cut.auto{transition:width .24s ease-in}
/* 撕開：封口飛掉，開口透出光 */
.smp-leak{position:absolute;left:8px;right:8px;top:calc(var(--cutY) - 72px);height:76px;opacity:0;pointer-events:none;transform-origin:50% 100%;
  background:radial-gradient(60% 100% at 50% 100%,#fff 0%,var(--lc) 32%,#0000 76%);mix-blend-mode:screen}
.sm-pack.torn .smp-top{animation:smp-top-off .7s cubic-bezier(.3,.6,.35,1) forwards}
@keyframes smp-top-off{0%{transform:none;opacity:1}100%{transform:translate(90px,-170px) rotate(38deg);opacity:0}}
.sm-pack.torn .smp-cut{opacity:0;transition:opacity .2s}
.sm-pack.torn .smp-leak{animation:smp-leak .5s ease-out forwards,smp-leak-p .35s ease-in-out .5s infinite alternate}
@keyframes smp-leak{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
@keyframes smp-leak-p{from{opacity:1}to{opacity:.7;transform:scaleY(1.18)}}
.sm-pack.ur .smp-leak{animation:smp-leak .5s ease-out forwards,smp-urpulse .7s ease-in-out .5s infinite alternate}
@keyframes smp-urpulse{from{opacity:1;filter:none}to{opacity:.85;transform:scaleY(1.2);filter:hue-rotate(35deg)}}
.sm-pack.charge .smp-tilt{animation:smp-shake .09s linear infinite}
@keyframes smp-shake{25%{transform:translate(-2px,1px) rotate(-.8deg)}50%{transform:translate(2px,-1px) rotate(.8deg)}75%{transform:translate(-1px,-1px) rotate(-.4deg)}}
.sm-pack.charge .smp-float{animation:none;filter:drop-shadow(0 0 22px var(--lc)) drop-shadow(0 0 44px var(--lc)) drop-shadow(0 12px 0 #0007)}
.sm-pack.up .smp-tilt{animation:smp-up .5s ease-out}
@keyframes smp-up{30%{filter:brightness(2.2)}}
.sm-pack.boom{animation:smp-boom .42s ease-in forwards}
@keyframes smp-boom{40%{transform:scale(1.12);filter:brightness(2.5)}100%{transform:scale(1.5);filter:brightness(4);opacity:0}}

/* ---- 1b. 抽 11 張：一次 11 包（v8.9，smMultiSetup）----
   撕開前每包的光都是一樣的淡白色（--pc），撕開後才換成那張卡的顏色（--lc）；ㄉㄜˋ頂以上的包（.hi）光會一直脈動 */
.sm-mpacks{position:absolute;inset:0;z-index:2;pointer-events:none}
.sm-mp{position:absolute;width:90px;height:128px;margin:-64px 0 0 -45px;--pc:#d8ecff}
.sm-mp.torn{--pc:var(--lc)}
.sm-mp.in{animation:smmp-in .7s cubic-bezier(.2,1.1,.35,1) var(--d,0s) both}
@keyframes smmp-in{0%{transform:translate(var(--fx),var(--fy)) rotate(-50deg) scale(.3);opacity:0}20%{opacity:1}70%{transform:translateY(-10px) scale(1.06)}100%{transform:none}}
.smmp-glow{position:absolute;left:50%;top:50%;width:176px;height:210px;margin:-105px 0 0 -88px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--pc),#fff0);opacity:.3;transition:opacity .3s}
.sm-mp.torn .smmp-glow{opacity:.7}
.sm-mp.hi.torn .smmp-glow{opacity:1;animation:smmp-glow .45s ease-in-out infinite alternate}
@keyframes smmp-glow{to{transform:scale(1.2)}}
.smmp-float{position:absolute;inset:0;animation:smp-bob 2.6s ease-in-out var(--d,0s) infinite}
.smmp-body,.smmp-top{position:absolute;left:0;top:0;display:block}
.smmp-leak{position:absolute;left:4px;right:4px;top:calc(var(--cy) - 46px);height:50px;opacity:0;pointer-events:none;transform-origin:50% 100%;
  background:radial-gradient(60% 100% at 50% 100%,#fff 0%,var(--lc) 34%,#fff0 78%)}   /* v9.0：拿掉 mix-blend-mode（11 包一起發光時每一包都要另外合成一層，顯示卡最忙的就是這一刻） */
.sm-mp.torn .smmp-sheen{display:none}   /* v9.0：撕開之後不用再掃光 */
.smmp-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.smmp-sheen::before{content:"";position:absolute;inset:-20% -80%;background:linear-gradient(105deg,#fff0 44%,#ffffff55 50%,#fff0 56%);animation:smp-sheen 3s ease-in-out var(--d,0s) infinite}
.sm-mp.torn .smmp-top{animation:smmp-top .65s cubic-bezier(.3,.6,.35,1) forwards}
@keyframes smmp-top{to{transform:translate(var(--tx),-96px) rotate(var(--tr));opacity:0}}
.sm-mp.torn .smmp-leak{animation:smp-leak .4s ease-out forwards,smp-leak-p .3s ease-in-out .4s infinite alternate}
.sm-mp.ur.torn .smmp-leak{animation:smp-leak .4s ease-out forwards,smp-urpulse .6s ease-in-out .4s infinite alternate}
.sm-mp.charge .smmp-float{animation:smp-shake .09s linear infinite}
.sm-mp.charge .smmp-glow{opacity:1}
.sm-mp.boom{animation:smmp-boom .36s ease-in forwards}
@keyframes smmp-boom{40%{transform:scale(1.2);filter:brightness(2.6)}100%{transform:scale(1.7);filter:brightness(4);opacity:0}}
.sm-hint.mp .smh-line,.sm-hint.mp .smh-dot{display:none}
/* 卡片從爆開的包裡原地冒出來 */
.sm-card.pop{animation:smc-popin .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes smc-popin{0%{scale:.2;opacity:0}55%{scale:1.14;opacity:1}100%{scale:1}}
/* 小閃光（每一包高稀有度爆開時） */
.sm-flash.on.pop{animation:sm-flash .35s ease-out forwards;background:radial-gradient(circle at 50% 50%,#ffffffa0,var(--pf,#ffe27a55) 35%,#fff0 70%)}
.sm-flash.on.pop.t3{--pf:#b86bff66}
/* （v9.0：v8.9 的光柱 .smc-pillar 拿掉 —— 使用者：「這個特效很醜，改掉」） */

/* 撕卡包的提示：一顆發亮的「指尖」沿著撕開線滑過去 */
.sm-hint{position:absolute;inset:0;z-index:3;pointer-events:none;--ty:126px}
.smh-line{position:absolute;left:372px;top:calc(var(--ty) - 1px);width:216px;height:2px;opacity:.8;
  background:repeating-linear-gradient(90deg,#fff 0 6px,#0000 6px 10px);animation:smh-blink 1s steps(2) infinite}
.smh-dot{position:absolute;left:372px;top:calc(var(--ty) - 12px);width:24px;height:24px;border-radius:50%;
  background:radial-gradient(#fff 0 35%,#bfe8ffcc 36% 55%,#0000 56%);box-shadow:0 0 16px #8fdcff;animation:smh-slide 1.8s ease-in-out infinite}
@keyframes smh-slide{0%{transform:translateX(-10px);opacity:0}15%{opacity:1}75%{transform:translateX(200px);opacity:1}100%{transform:translateX(210px);opacity:0}}
@keyframes smh-blink{50%{opacity:.35}}
.smh-txt{position:absolute;left:0;right:0;bottom:14px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;
  text-shadow:0 2px 0 #000,0 0 10px #4aa8ff;animation:sm-btn-in .4s ease-out both}
.smh-txt b{font-size:19px;font-weight:900;letter-spacing:3px}
.smh-txt small{font-size:12px;font-weight:800;color:#bfd8ff}

/* =================== 卡片 =================== */
.sm-cards{position:absolute;inset:0;z-index:2;pointer-events:none}
.sm-card{position:absolute;width:104px;height:152px;margin:-76px 0 0 -52px;perspective:800px;pointer-events:auto;cursor:pointer;
  transform:translate(var(--ox),var(--oy)) rotate(var(--rot)) scale(.25);opacity:0;
  transition:transform .6s cubic-bezier(.2,1.2,.4,1),opacity .15s}
.sm-card.dealt{transform:none;opacity:1}
.sm-card.solo.dealt{transform:scale(1.5)}
.sm-card.dealt:not(.flipped):hover{transform:translateY(-8px) scale(1.05);transition-duration:.18s}
.sm-card.solo.dealt:not(.flipped):hover{transform:translateY(-8px) scale(1.56)}
.sm-card.charge{z-index:3}
.sm-card.charge .smc-in{animation:smc-charge .9s ease-in both}
@keyframes smc-charge{0%{transform:none}30%{transform:scale(1.14) translateY(-8px)}
  45%,55%,65%,75%,85%{transform:scale(1.2) translateY(-10px) rotate(-2.5deg)}50%,60%,70%,80%,90%{transform:scale(1.2) translateY(-10px) rotate(2.5deg)}
  100%{transform:scale(1.26) translateY(-12px)}}
.sm-card.charge .smc-back{animation:smc-chargeglow .3s ease-in-out infinite alternate}
@keyframes smc-chargeglow{to{box-shadow:0 0 34px var(--bc),0 0 60px var(--bgl);filter:brightness(1.3)}}
.smc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .46s cubic-bezier(.3,1.35,.5,1)}
.sm-card.flipped .smc-in{transform:rotateY(180deg)}
.sm-card.noanim .smc-in{transition:none}
.smc-back,.smc-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.smc-front{transform:rotateY(180deg)}

/* ---- 卡背：v8.9 起是 cards.js 的 cardBackHTML（樣式在 css/cards.css）；這裡只剩召喚專用的：基礎卡包的銅／銀／金、
        高稀有度的卡背一閃一閃、滑鼠移上去發亮 ---- */
.sm-basic .omen0{--bc:#e8945a;--bgl:#e8945a88;--bl:#ffe0c2;--pxb:var(--pxb-bz)}
.sm-basic .omen1{--bc:#dfe9f7;--bgl:#dfe9f799;--bl:#ffffff;--pxb:var(--pxb-sv)}
.sm-basic .omen2{--bc:#ffcf4a;--bgl:#ffcf4aaa;--bl:#fff6c2;--pxb:var(--pxb-gd)}
.sm-card.omen2 .smc-back,.sm-card.omen3 .smc-back{animation:smc-hiback 1.1s ease-in-out infinite}
@keyframes smc-hiback{50%{box-shadow:0 0 30px var(--bc),0 5px 0 #0009}}
.sm-card.dealt:not(.flipped):hover .smc-back{box-shadow:0 0 0 2px #fff,0 0 28px var(--bc),0 5px 0 #0009;filter:brightness(1.12)}
.sm-card.dealt:not(.flipped):hover .smc-glint{opacity:1;animation-duration:.8s}

/* （卡面 .tc 在 v8.7 移到 css/cards.css —— 全遊戲共用） */
/* 徽章：NEW／+N／道具／PICK UP */
.smc-badge{position:absolute;right:-6px;top:20px;z-index:2;font-style:normal;padding:0 5px;font-size:10.5px;font-weight:900;border:2px solid #000;transform:rotate(8deg) scale(0)}
.sm-card.flipped .smc-badge{animation:smc-badge .35s cubic-bezier(.2,1.8,.4,1) .3s forwards}
.sm-card.noanim .smc-badge,.smsc-front .smc-badge{animation:none;transform:rotate(8deg)}
@keyframes smc-badge{to{transform:rotate(8deg) scale(1)}}
.smc-badge.new{color:#3d2308;background:linear-gradient(#fff3c4,#ffca4a)}
.smc-badge.plus{color:#fff;background:#b4530a}
.smc-badge.item{color:#fff;background:#3f6fa8}
.smc-pu{position:absolute;left:-6px;top:20px;z-index:2;font-style:normal;padding:0 4px;font-size:9px;font-weight:900;color:#fff;background:#e0392b;border:2px solid #000;transform:rotate(-8deg)}
/* 翻開後的光：金卡一閃一閃、紫卡外圈發光 */
.sm-card.flipped.t2 .tc{animation:smc-glow 1.4s ease-in-out infinite}
@keyframes smc-glow{50%{box-shadow:var(--bev),0 0 26px #ffc53d,0 5px 0 #0009}}
.sm-card.flipped.t3 .tc{box-shadow:var(--bev),0 0 26px #b86bff,0 5px 0 #0009}
.sm-basic .sm-card.flipped.t2 .tc{animation:smc-glow 1.4s ease-in-out infinite}

/* ---- v8.8：發牌落地的光、翻牌的彈跳＋外圈光環＋一道斜光、全部翻完的「人浪」 ---- */
.sm-card{--rc:#58b4ff}
.sm-card.t1{--rc:#48e07a}.sm-card.t2{--rc:#ffc53d}.sm-card.t3{--rc:#b86bff}
.sm-basic .sm-card.t0{--rc:#e8945a}.sm-basic .sm-card.t1{--rc:#dfe9f7}.sm-basic .sm-card.t2{--rc:#ffcf4a}
.sm-card::before{content:"";position:absolute;left:-16px;right:-16px;bottom:-18px;height:30px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,var(--bc,#8fdcff),#0000)}
.sm-card.dealt::before{animation:smc-land .7s ease-out calc(var(--i,0) * 70ms + .36s) both}
@keyframes smc-land{0%{opacity:0;transform:scale(.3,.5)}25%{opacity:.9}100%{opacity:0;transform:scale(1.5,1)}}
.sm-card::after{content:"";position:absolute;inset:-4px;pointer-events:none;opacity:0;border:3px solid var(--rc);box-shadow:0 0 14px var(--rc),inset 0 0 14px var(--rc)}
.sm-card.flipped:not(.noanim)::after{animation:smc-ring .6s ease-out .2s both}
@keyframes smc-ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.42)}}
.sm-card.flipped:not(.noanim){animation:smc-pop .5s cubic-bezier(.3,1.6,.5,1) .15s both}
@keyframes smc-pop{0%{scale:1}40%{scale:1.1}100%{scale:1}}
.smc-front::after,.smsc-front::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,#fff0 38%,#ffffffd0 50%,#fff0 62%);background-size:320% 100%;background-position:130% 0}
.sm-card.flipped:not(.noanim) .smc-front::after{animation:smc-glint .65s ease-out .3s both}
.sm-splash.play:not(.replay) .smsc-front::after{animation:smc-glint .9s ease-out 1.15s both}
@keyframes smc-glint{0%{opacity:1;background-position:130% 0}85%{opacity:1}100%{opacity:0;background-position:-30% 0}}
.sm-card.flipped.wave{animation:smc-wave .55s ease-out var(--wd,0s) both}
@keyframes smc-wave{0%,100%{translate:0 0}40%{translate:0 -12px}}

/* ---- 翻牌時的提示與「全部翻開」 ---- */
.sm-flipbar{position:absolute;left:0;right:0;bottom:16px;z-index:6;display:flex;justify-content:center;align-items:center;gap:14px;pointer-events:none}
/* v8.8：全螢幕登場的時候，下面的「全部翻開」列先藏起來（原本會疊在登場畫面上，跟「點畫面繼續」擠在一起） */
#sm-splash:not(.hidden) ~ .sm-flipbar,#sm-splash:not(.hidden) ~ .sm-solohint{visibility:hidden}
.sm-flipbar .px-btn{pointer-events:auto;min-width:160px;padding:8px 18px;font-size:17px;letter-spacing:2px;animation:sm-btn-in .35s cubic-bezier(.2,1.5,.4,1) both}
.sm-flipbar span{font-size:12.5px;font-weight:800;color:#dfe8ff;text-shadow:0 2px 0 #000;animation:sm-btn-in .35s ease-out .1s both}
.sm-solohint{position:absolute;left:0;right:0;top:392px;z-index:6;text-align:center;font-size:18px;font-weight:900;letter-spacing:4px;color:#fff;
  text-shadow:0 2px 0 #000,0 0 10px #4aa8ff;pointer-events:none;animation:sms-tap 1.2s ease-in-out infinite}

/* ---- 結果：上方統計、下方按鈕 ---- */
.sm-summary{position:absolute;left:0;right:0;top:62px;z-index:6;display:flex;justify-content:center;align-items:center;gap:8px;pointer-events:none}
.sm-summary:empty{display:none}
.sms-chip{display:flex;align-items:center;gap:5px;padding:2px 10px 2px 6px;font-size:13px;font-weight:900;color:#fff;background:#0a0816cc;border:2px solid #000;
  box-shadow:inset 0 0 0 2px var(--cc,#fff3);animation:sm-btn-in .3s ease-out both}
.sms-chip i{width:10px;height:14px;background:var(--cc,#fff);border:1.5px solid #000}
.sms-chip.t0{--cc:#58b4ff}.sms-chip.t1{--cc:#48e07a}.sms-chip.t2{--cc:#ffc53d}.sms-chip.t3{--cc:#b86bff}
.sm-basic .sms-chip.t0{--cc:#e8945a}.sm-basic .sms-chip.t1{--cc:#dfe9f7}.sm-basic .sms-chip.t2{--cc:#ffcf4a}
.sms-chip.new{color:#3d2308;background:linear-gradient(#fff3c4,#ffca4a)}
.sm-summary em{font-style:normal;font-size:11.5px;font-weight:800;color:#bfd0ee;margin-left:6px}
.sm-btns{position:absolute;left:0;right:0;bottom:20px;z-index:6;display:flex;justify-content:center;gap:16px}
.sm-btns .px-btn{min-width:170px;padding:10px 18px;font-size:18px;letter-spacing:2px;animation:sm-btn-in .35s cubic-bezier(.2,1.5,.4,1) both}
.sm-btns .px-btn small{font-size:13px}
@keyframes sm-btn-in{from{transform:translateY(20px);opacity:0}}
.sm-card.flipped:hover .tc{filter:brightness(1.08)}
/* 狂抽的小卡總表 */
.sm-mega{position:absolute;left:36px;right:36px;top:96px;bottom:84px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,64px);gap:6px;
  justify-content:center;align-content:start;pointer-events:auto;scrollbar-width:thin}
.sm-mini{--fc:#58b4ff;--fd:#0e2f6a;position:relative;width:64px;height:52px;display:grid;place-items:center;cursor:pointer;border:2px solid #000;
  background:radial-gradient(circle at 50% 70%,#ffffff55,var(--fd) 90%);box-shadow:inset 0 0 0 2px var(--fc)}
.sm-mini.t1{--fc:#48e07a;--fd:#0b4f25}
.sm-mini.t2{--fc:#ffc53d;--fd:#6a3f04;box-shadow:inset 0 0 0 2px var(--fc),0 0 10px #ffc53d}
.sm-mini.t3{--fc:#b86bff;--fd:#3a1266;box-shadow:inset 0 0 0 2px var(--fc),0 0 12px #b86bff}
.sm-mini em{position:absolute;right:1px;top:1px;font-style:normal;font-size:9px;font-weight:900;padding:0 3px;color:#3d2308;background:#ffca4a;border:1px solid #000}

/* =================== 卡片登場（全螢幕）=================== */
.sm-splash{position:absolute;inset:0;z-index:3;overflow:hidden;--c:#58b4ff;--cl:#cfeaff;--cd:#0e2f6a}
.sms-bg{position:absolute;inset:0;background:radial-gradient(85% 110% at 72% 50%,var(--c) 0%,var(--cd) 48%,#04030b 100%)}
.sm-rare .sm-splash.t3 .sms-bg{background:radial-gradient(85% 110% at 72% 50%,#d9a8ff 0%,#7a2ab0 38%,#1c0a40 72%,#04030b 100%)}
.sms-rays{position:absolute;left:690px;top:270px;width:1500px;height:1500px;margin:-750px 0 0 -750px;opacity:.75;
  background:repeating-conic-gradient(from 0deg,#ffffff2e 0 5deg,#fff0 5deg 14deg);animation:sms-spin 26s linear infinite}
.sm-rare .sm-splash.t3 .sms-rays{background:repeating-conic-gradient(from 0deg,#d9a8ff55 0 5deg,#fff0 5deg 9deg,#ff7be044 9deg 14deg,#fff0 14deg 18deg,#8f8bff44 18deg 23deg,#fff0 23deg 28deg)}
@keyframes sms-spin{to{transform:rotate(360deg)}}
.sms-lines{position:absolute;inset:0;opacity:.35;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,#fff0 0 22px,#ffffff66 22px 23px,#fff0 23px 61px,#ffffff33 61px 62px,#fff0 62px 97px);
  -webkit-mask:linear-gradient(90deg,#000 0,#0000 45%);mask:linear-gradient(90deg,#000 0,#0000 45%);animation:sms-lines .5s linear infinite}
@keyframes sms-lines{from{background-position:0 0}to{background-position:0 97px}}
.sm-splash.t0 .sms-lines,.sm-splash.t1 .sms-lines{opacity:.18}
/* v8.8：大卡後面的光環（兩層反方向慢慢轉的光芒；幹超瑟是紫色）＋翻面瞬間橫過畫面的鏡頭光暈 */
.sm-splash{--ao:.3}
.sm-splash.big{--ao:.6}
.sms-aura{position:absolute;left:690px;top:270px;z-index:1;width:0;height:0;pointer-events:none}
.sms-aura i{position:absolute;left:-270px;top:-270px;width:540px;height:540px;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(var(--c) 0 5deg,#0000 5deg 16deg);
  -webkit-mask:radial-gradient(closest-side,#000 16%,#0000);mask:radial-gradient(closest-side,#000 16%,#0000)}
.sms-aura i:nth-child(2){background:repeating-conic-gradient(#ffffff 0 2deg,#0000 2deg 23deg)}
.sm-rare .sm-splash.t3 .sms-aura i:first-child{background:repeating-conic-gradient(#b86bff 0 5deg,#0000 5deg 11deg,#ff9ae4 11deg 16deg,#0000 16deg 22deg,#d9a8ff 22deg 27deg,#0000 27deg 33deg)}
.sm-splash.play .sms-aura i{animation:sms-aura 1s ease-out .55s both,sms-spin 18s linear 1.55s infinite}
.sm-splash.play .sms-aura i:nth-child(2){animation:sms-aura 1s ease-out .6s both,sms-spin 26s linear 1.6s infinite reverse}
.sm-splash.replay .sms-aura i{animation:sms-spin 18s linear infinite;opacity:var(--ao)}
@keyframes sms-aura{from{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:var(--ao);transform:none}}
.sms-flare{position:absolute;left:0;right:0;top:268px;z-index:3;height:4px;pointer-events:none;opacity:0;transform-origin:690px 50%;
  background:linear-gradient(90deg,#fff0,var(--cl) 30%,#fff 72%,var(--cl) 86%,#fff0);box-shadow:0 0 18px var(--c),0 0 42px var(--c)}
.sm-splash.big.play:not(.replay) .sms-flare{animation:sms-flare .75s ease-out .55s both}
@keyframes sms-flare{0%{opacity:0;transform:scaleX(.05)}18%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.25) scaleY(.2)}}
.sms-rar{position:relative}
.sms-rar::after{content:"";position:absolute;inset:-10px -14px;border:3px solid var(--cl);opacity:0;pointer-events:none}
.sm-splash.play:not(.replay) .sms-rar::after{animation:smsc-ring .6s ease-out 1.05s both}
/* 大卡：從格子上的那張卡飛過來（--sx/--sy/--ss）→ 翻面 → 輕輕浮著，跟著滑鼠傾斜 */
.sms-cardwrap{position:absolute;left:560px;top:80px;width:260px;height:380px;z-index:2}
.sms-cardwrap::before{content:"";position:absolute;inset:-60px;background:radial-gradient(closest-side,var(--c),#0000);opacity:.7;pointer-events:none}
.sm-splash.play .sms-cardwrap{animation:sms-fly .6s cubic-bezier(.25,.9,.3,1) both}
@keyframes sms-fly{from{transform:translate(var(--sx,0px),var(--sy,0px)) scale(var(--ss,.4))}}
.smsc-float{position:absolute;inset:0;perspective:1100px}
.sm-splash.play .smsc-float{animation:smsc-bob 3.2s ease-in-out 1.3s infinite}
@keyframes smsc-bob{50%{transform:translateY(-8px)}}
.smsc-tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .12s ease-out}
.smsc-in{position:absolute;inset:0;transform-style:preserve-3d}
.sm-splash.play .smsc-in{animation:sms-flip 1.15s cubic-bezier(.3,1.2,.5,1) both}
@keyframes sms-flip{0%,48%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.smsc-back,.smsc-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.smsc-back{transform:rotateY(180deg)}
/* （大卡的卡背：cardBackHTML(true) 的 .smc-back.big，樣式在 css/cards.css） */
.smsc-front .smc-badge{right:-12px;top:36px;padding:1px 12px;font-size:17px;border-width:3px}
.smsc-front .smc-pu{left:-12px;top:36px;padding:1px 8px;font-size:14px;border-width:3px}
.smsc-flash{position:absolute;inset:-12px;opacity:0;pointer-events:none;background:#fff}
.sm-splash.play .smsc-flash{animation:smsc-flash .7s ease-out .52s both}
.sm-rare .sm-splash.t3 .smsc-flash{background:linear-gradient(135deg,#ffffff,#d9a8ff,#b86bff,#ff9ae4)}
@keyframes smsc-flash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
.sm-splash.big .sms-cardwrap::after{content:"";position:absolute;inset:-6px;border:3px solid var(--cl);opacity:0;pointer-events:none}
.sm-splash.big.play .sms-cardwrap::after{animation:smsc-ring .9s ease-out .6s both}
@keyframes smsc-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
/* 左邊：稀有度印章、星星、名字、介紹、NEW */
.sms-info{position:absolute;left:58px;top:104px;z-index:2;width:440px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.sms-rar{display:flex;align-items:baseline;gap:10px;line-height:1}
.sms-rar b{font-size:58px;font-weight:900;letter-spacing:4px;color:#fff;
  filter:drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000) drop-shadow(0 0 18px var(--c))}
.sm-splash.play .sms-rar{animation:sms-stamp .45s cubic-bezier(.2,1.8,.4,1) .75s both}
@keyframes sms-stamp{from{opacity:0;transform:scale(2.4) rotate(-6deg)}}
.sms-stars{display:flex;gap:4px;min-height:34px}
.sms-stars i{font-style:normal;font-size:32px;line-height:1;color:#ffd75e;filter:drop-shadow(0 2px 0 #7a4a06) drop-shadow(0 0 8px #ffb52a);animation:sms-star .45s cubic-bezier(.2,1.8,.4,1) both;animation-delay:var(--d)}
.sm-rare .sm-splash.t3 .sms-stars i{color:#f3e6ff;filter:drop-shadow(0 2px 0 #3a1266) drop-shadow(0 0 8px #b86bff)}
@keyframes sms-star{from{opacity:0;transform:scale(2.2) rotate(-90deg)}}
.sms-name{max-width:440px;font-size:44px;font-weight:900;letter-spacing:3px;line-height:1.1;color:#fff;
  filter:drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000)}
.sm-splash.play .sms-name{animation:sms-slide .5s cubic-bezier(.2,1.2,.4,1) .9s both}
@keyframes sms-slide{from{opacity:0;transform:translateX(-60px)}}
.sms-sub{max-width:420px;padding:8px 12px;font-size:14px;font-weight:800;line-height:1.6;color:#fff6dd;background:#00000073;border-left:4px solid var(--c)}
.sms-sub:empty{display:none}
.sm-splash.play .sms-sub{animation:sms-slide .5s ease-out 1.05s both}
.sms-badge{padding:2px 14px;font-size:20px;font-weight:900;letter-spacing:2px;border:3px solid #000;box-shadow:0 3px 0 #0008}
.sms-badge.none{display:none}
.sms-badge.new{color:#3d2308;background:linear-gradient(#fff3c4,#ffca4a);animation:sms-new 1s ease-in-out 1.2s infinite}
.sms-badge.plus{color:#fff;background:#b4530a}
.sms-badge.item{color:#fff;background:#3f6fa8}
.sm-splash.play .sms-badge{animation:sms-stamp .4s cubic-bezier(.2,1.8,.4,1) 1.3s both}
.sm-splash.play .sms-badge.new{animation:sms-stamp .4s cubic-bezier(.2,1.8,.4,1) 1.3s both,sms-new 1s ease-in-out 1.8s infinite}
@keyframes sms-new{50%{transform:scale(1.08);box-shadow:0 3px 0 #0008,0 0 16px #ffd75e}}
.sms-pu{position:absolute;left:772px;top:56px;z-index:3;padding:4px 14px;font-size:18px;font-weight:900;letter-spacing:2px;color:#fff;background:#e0392b;border:3px solid #000;transform:rotate(6deg)}
/* v9.6 使用者：「抽到幹超瑟等級的介面我希望能把左下方那個 legendary 拿掉」→ index.html 拿掉了這個元素，下面的樣式留著不影響 */
.sms-legend{display:none;position:absolute;left:-60px;width:600px;top:412px;z-index:2;padding:6px 0;text-align:center;font-size:32px;font-weight:900;letter-spacing:18px;color:#fff;
  background:linear-gradient(90deg,#5a2ab0,#b86bff,#ff9ae4,#d9a8ff,#8a4ad6,#5a2ab0);background-size:200% 100%;transform:rotate(-4deg);
  border-top:4px solid #000;border-bottom:4px solid #000;text-shadow:0 3px 0 #0008;animation:sms-legend 2.2s linear infinite}
.sm-rare .sm-splash.t3 .sms-legend{display:block}
.sm-rare .sm-splash.t3.play .sms-legend{animation:sms-legend-in .5s cubic-bezier(.2,1.2,.4,1) .7s both,sms-legend 2.2s linear infinite}
@keyframes sms-legend{to{background-position:200% 0}}
@keyframes sms-legend-in{from{transform:rotate(-4deg) translateX(-100%)}}
.sms-tap{position:absolute;left:0;right:0;bottom:8px;z-index:3;text-align:center;font-size:14px;font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 2px 0 #000;
  animation:sms-tap 1.2s ease-in-out infinite}
@keyframes sms-tap{50%{opacity:.35}}
.single .sms-tap{display:none}
/* 再看一次（結果畫面點卡片）：不重播進場動畫 */
.sm-splash.replay .sms-cardwrap,.sm-splash.replay .smsc-in,.sm-splash.replay .smsc-flash,.sm-splash.replay .sms-rar,.sm-splash.replay .sms-name,
.sm-splash.replay .sms-sub,.sm-splash.replay .sms-badge,.sm-splash.replay .sms-stars i,.sm-splash.replay .sms-legend{animation:none}
.sm-splash.replay .sms-badge.new{animation:sms-new 1s ease-in-out infinite}

/* =================== 轉蛋頁：卡牌商店 =================== */
#scr-gacha{background:
  radial-gradient(55% 70% at 28% 45%,#4a2a9a55 0,#0000 70%),
  radial-gradient(45% 60% at 82% 35%,#1d4a8a55 0,#0000 70%),
  linear-gradient(#0c0a20,#1b0f36 60%,#120a26)}
.cs-body{position:relative;flex:1;min-height:0;display:flex;gap:12px;padding:10px 12px 12px;overflow:hidden}
/* 背景：會閃的星星＋慢慢往上飄的卡片（純 CSS） */
.cs-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cs-sky::before{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 20%,#fff 50%,#0000 51%),
    radial-gradient(1.2px 1.2px at 32% 70%,#ffffffcc 50%,#0000 51%),
    radial-gradient(1.8px 1.8px at 58% 12%,#fff 50%,#0000 51%),
    radial-gradient(1.2px 1.2px at 76% 58%,#ffffffaa 50%,#0000 51%),
    radial-gradient(1.5px 1.5px at 90% 28%,#fff 50%,#0000 51%),
    radial-gradient(1.1px 1.1px at 46% 44%,#ffffff99 50%,#0000 51%);
  background-size:230px 170px;animation:cs-twinkle 3.5s ease-in-out infinite alternate}
@keyframes cs-twinkle{to{opacity:.5}}
.cs-fl{position:absolute;bottom:-90px;width:44px;height:62px;opacity:0;border:2px solid #b89cff55;
  background:repeating-linear-gradient(45deg,#0000 0 6px,#b89cff1c 6px 7px),linear-gradient(#2a1a5acc,#140c2ecc);
  box-shadow:0 0 12px #8a5ad633;animation:cs-drift 16s linear infinite}
.cs-fl.f1{left:4%;animation-delay:-2s}
.cs-fl.f2{left:23%;width:36px;height:50px;animation-duration:19s;animation-delay:-9s}
.cs-fl.f3{left:45%;animation-duration:22s;animation-delay:-5s}
.cs-fl.f4{left:64%;width:34px;height:48px;animation-duration:18s;animation-delay:-13s}
.cs-fl.f5{left:81%;animation-duration:21s;animation-delay:-1s}
.cs-fl.f6{left:94%;width:30px;height:42px;animation-duration:17s;animation-delay:-7s}
@keyframes cs-drift{0%{transform:translateY(0) rotate(-12deg);opacity:0}12%{opacity:.5}85%{opacity:.3}100%{transform:translateY(-620px) rotate(24deg);opacity:0}}
#scr-gacha[data-mode=basic] .cs-fl{border-color:#5fd08e55;background:repeating-linear-gradient(45deg,#0000 0 6px,#5fd08e1c 6px 7px),linear-gradient(#0f3a2ccc,#06201acc)}

/* ---- 左欄：卡包分頁、機率／紀錄／收集、開發者工具 ---- */
.cs-rail{position:relative;z-index:1;flex:0 0 196px;display:flex;flex-direction:column;gap:9px}
.cs-tab{--tc:#ff7be0;position:relative;display:flex;align-items:center;gap:10px;height:94px;padding:6px 8px;cursor:pointer;font-family:inherit;text-align:left;
  color:#e8e2ff;background:linear-gradient(#2b2150,#1a1236);border:4px solid #000;
  box-shadow:inset 2px 2px 0 #ffffff26,inset -2px -2px 0 #00000066,0 4px 0 #0008;transition:transform .15s}
.cs-tab[data-mode=basic]{--tc:#5fd08e}
.cs-tab:hover{filter:brightness(1.15)}
.cs-tab canvas{flex:0 0 auto;transition:transform .25s cubic-bezier(.2,1.5,.4,1);filter:drop-shadow(0 3px 0 #0008)}
.cs-tab span{display:flex;flex-direction:column;gap:4px;line-height:1.2}
.cs-tab b{font-size:17px;font-weight:900;letter-spacing:2px;color:#fff;text-shadow:0 2px 0 #000}
.cs-tab small{display:flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;color:#c9c0ea}
.cs-tab small .pxi{width:14px;height:14px}
.cs-tab.on{transform:translateX(6px);box-shadow:inset 2px 2px 0 #ffffff40,inset -2px -2px 0 #00000066,0 4px 0 #0008,0 0 0 3px var(--tc),0 0 18px var(--tc)}
.cs-tab[data-mode=rare].on{background:linear-gradient(#5a2a9a,#2b1450)}
.cs-tab[data-mode=basic].on{background:linear-gradient(#1f7a52,#0b3a2c)}
.cs-tab.on canvas{transform:rotate(-8deg) scale(1.1)}
.cs-tab.on::after{content:"";position:absolute;right:-17px;top:50%;margin-top:-9px;border:9px solid #0000;border-left-color:var(--tc)}
.cs-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cs-tools .px-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0 4px;font-size:11.5px;line-height:1.1;border-width:3px}
.cs-tools .px-btn .pxi{width:20px;height:20px}
.cs-tools b{font-size:9.5px;color:#a05a00}
#scr-gacha .dev-bar{flex-direction:column;gap:4px;padding:5px;margin-top:auto;border-radius:0}
#scr-gacha .dev-btn{padding:4px 6px;border-radius:0}

/* ---- 舞台：大卡包＋這一包的內容 ---- */
.cs-main{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.cs-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;gap:16px;padding:10px 22px 10px 12px;overflow:hidden;border:4px solid #000;
  background:radial-gradient(60% 90% at 107px 55%,#c24ac066 0,#0000 70%),linear-gradient(135deg,#2a0f5a,#16092e 60%,#241046);
  box-shadow:inset 0 0 0 2px #ffffff1f,inset 0 0 60px #0008,0 4px 0 #0008}
#scr-gacha[data-mode=basic] .cs-stage{background:radial-gradient(60% 90% at 107px 55%,#5fd08e55 0,#0000 70%),linear-gradient(135deg,#0b3a2c,#06201a 60%,#0f3a2e)}
.cs-stage::before{content:"";position:absolute;left:107px;top:50%;width:1300px;height:1300px;margin:-650px 0 0 -650px;pointer-events:none;
  background:repeating-conic-gradient(#ffffff0c 0 6deg,#0000 6deg 14deg);animation:sms-spin 60s linear infinite}
/* 大卡包：跟著滑鼠傾斜（--rx/--ry）、全像閃光跟著跑（--mx），點一下晃一下 */
.cs-packbox{--pg:#ff7be088;position:relative;z-index:1;flex:0 0 190px;height:100%;display:grid;place-items:center;cursor:pointer}
.cs-packbox.basic{--pg:#5fd08e88}
.csp-glow{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--pg),#0000);animation:csp-glow 3s ease-in-out infinite alternate}
@keyframes csp-glow{from{opacity:.7}to{transform:scale(1.12);opacity:1}}
.csp-float{position:relative;animation:csp-bob 3s ease-in-out infinite;filter:drop-shadow(0 0 10px var(--pg)) drop-shadow(0 10px 0 #0008)}
@keyframes csp-bob{50%{transform:translateY(-8px)}}
.csp-tilt{position:relative;width:164px;height:235px;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,-8deg));transition:transform .14s ease-out}
.csp-tilt canvas{display:block}
.csp-foil,.csp-sheen{position:absolute;left:6px;right:6px;top:26px;bottom:22px;pointer-events:none}
.csp-foil{mix-blend-mode:color-dodge;opacity:.75;background:linear-gradient(115deg,#0000 25%,#ff7be066 38%,#8fe6ff66 50%,#ffe27a66 62%,#0000 75%);
  background-size:260% 100%;background-position:var(--mx,50%) 0;transition:background-position .15s}
.csp-sheen{overflow:hidden}
.csp-sheen::before{content:"";position:absolute;inset:-20% -80%;background:linear-gradient(105deg,#fff0 44%,#ffffff5c 50%,#fff0 56%);animation:smp-sheen 3.2s ease-in-out infinite}
.csp-pu{position:absolute;right:-4px;top:34px;z-index:2;padding:3px 10px;font-size:13px;font-weight:900;letter-spacing:1px;color:#fff;background:#e0392b;border:3px solid #000;
  box-shadow:0 3px 0 #0008;transform:rotate(8deg);animation:csp-pu 1.6s ease-in-out infinite;pointer-events:none}
@keyframes csp-pu{50%{transform:rotate(8deg) scale(1.08)}}
.csp-shadow{position:absolute;left:50%;bottom:10px;width:120px;height:14px;margin-left:-60px;border-radius:50%;background:#0009;filter:blur(3px);pointer-events:none;
  animation:csp-shadow 3s ease-in-out infinite}
@keyframes csp-shadow{50%{transform:scale(.85);opacity:.6}}
.cs-packbox.swap .csp-float{animation:csp-swap .6s cubic-bezier(.2,1.1,.35,1),csp-bob 3s ease-in-out .6s infinite}
@keyframes csp-swap{0%{transform:perspective(700px) rotateY(-180deg) translateY(30px) scale(.8);opacity:0}100%{transform:none;opacity:1}}
.cs-packbox.poke .csp-float{animation:csp-poke .5s ease-out,csp-bob 3s ease-in-out .5s infinite}
@keyframes csp-poke{20%{transform:translateY(-14px) rotate(-5deg) scale(1.04)}45%{transform:translateY(-6px) rotate(4deg)}70%{transform:rotate(-2deg)}}
/* 這一包的內容 */
.cs-info{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.cs-info.swap{animation:csi-in .45s ease-out both}
@keyframes csi-in{from{opacity:0;transform:translateX(24px)}}
.csi-tag{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.csi-tag b{padding:2px 10px;font-size:13px;font-weight:900;letter-spacing:2px;color:#fff;background:#e0392b;border:3px solid #000;box-shadow:0 3px 0 #0008}
.csi-tag.basic b{background:#1f9a5a}
.csi-tag span{font-size:12px;font-weight:800;color:#e8e2ff;text-shadow:0 1px 0 #000}
.csi-name{font-size:34px;font-weight:900;letter-spacing:4px;line-height:1.1;color:#ffe27a;
  filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) drop-shadow(0 0 12px #ff7be088)}
.csi-rar{display:flex;align-items:center;gap:8px}
.csi-stars{font-size:18px;letter-spacing:2px;color:#ffd75e;text-shadow:0 2px 0 #7a4a06}
.csi-rar em{font-style:normal;padding:1px 8px;font-size:12.5px;font-weight:900;color:#3d2308;background:#ffca4a;border:2px solid #000}
.csi-rar em.r-legend{color:#fff;background:linear-gradient(90deg,#7a3ad0,#b86bff,#ff9ae4)}
.csi-own{font-style:normal;padding:1px 8px;font-size:11.5px;font-weight:900;color:#bfffd0;background:#0f3a24;border:2px solid #000}
.csi-own.new{color:#fff;background:#b4530a}
.csi-desc{max-height:62px;overflow:hidden;padding:5px 10px;font-size:12px;font-weight:700;line-height:1.6;color:#efeaff;background:#0000004d;border-left:4px solid #ff7be0}
.csi-desc b{color:#ffe27a}
.csi-line{display:flex;flex-direction:column;gap:5px}
.csi-line>span{font-size:11px;font-weight:900;letter-spacing:2px;color:#c9c0ea}
.csi-minis{display:flex;gap:6px;flex-wrap:wrap}
.csi-mini{--mc:#ffc53d;--mc2:#6a4608;position:relative;width:46px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 1px;font-style:normal;
  border:3px solid #000;background:radial-gradient(circle at 50% 70%,var(--mc2) 0%,#140c2e 85%);box-shadow:inset 0 0 0 2px var(--mc),0 3px 0 #0008}
.csi-mini.t1{--mc:#5fd08e;--mc2:#0b4f25}
.csi-mini.t3{--mc:#b86bff;--mc2:#3a1266}
.csi-mini:not(.got){--mc2:#1d1030}
.csi-mini:not(.got) canvas{opacity:.9}
.csi-mini:not(.got):not(.locked)::before{content:"？";position:absolute;left:0;right:0;top:12px;text-align:center;font-size:16px;font-weight:900;color:#ffffffb0;text-shadow:0 2px 0 #000}
.csi-mini.pu::after{content:"UP";position:absolute;right:-7px;top:-9px;padding:0 3px;font-size:9px;font-weight:900;line-height:13px;color:#fff;background:#e0392b;border:2px solid #000}
.csi-minis.basic .csi-mini{width:50px;height:66px}
.csi-mini b{font-size:11px;font-weight:900;line-height:13px;color:#bfffd0;text-shadow:0 1px 0 #000}
.csi-mini.max b{color:#ffd75e}
.csi-mini.locked{--mc:#3a5a4a;--mc2:#0c2a22}
.csi-mini.locked b{color:#8fb8a0}
.csi-timer{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#e8e2ff}
.csi-timer .pxi{width:16px;height:16px}
.csi-timer b{color:#ffe27a;font-variant-numeric:tabular-nums;letter-spacing:1px}
.csi-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.csi-tiers span{--tcl:#e8945a;--tcd:#7a3c14;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:6px 8px;
  background:#00000059;border:2px solid #000;box-shadow:inset 0 0 0 2px var(--tcl)}
.csi-tiers .t1{--tcl:#dfe9f7;--tcd:#6a768c}
.csi-tiers .t2{--tcl:#ffcf4a;--tcd:#8a5a08}
.csi-tiers i{grid-row:span 2;width:20px;height:28px;border:2px solid #000;background:linear-gradient(135deg,var(--tcl),var(--tcd));box-shadow:inset 1px 1px 0 #fff8}
.csi-tiers b{font-size:13px;font-weight:900;color:#fff}
.csi-tiers small{font-size:10.5px;font-weight:800;color:#d8f5e4}
.csi-note{font-size:10.5px;font-weight:700;color:#bfe4cf}

/* ---- 抽的按鈕 ---- */
.cs-actions{display:grid;gap:10px;flex:0 0 68px}
.cs-actions.rare{grid-template-columns:1fr 1.3fr 1fr}
.cs-actions.basic{grid-template-columns:1fr 1.3fr}
.cs-roll{--f1:#bcd8f5;--f2:#5f8cc4;--hi:#e2f0ff;--lo:#365f8f;position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px;overflow:hidden;cursor:pointer;
  font-family:inherit;text-align:left;color:#1c1c1c;background:linear-gradient(var(--f1),var(--f2));border:4px solid #000;
  box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 4px 0 #00000066}
.cs-roll.basic{--f1:#c3f293;--f2:#77c72e;--hi:#e3ffcb;--lo:#4c8a15}
.cs-roll.multi{--f1:#ffe39a;--f2:#f0b429;--hi:#fff6d0;--lo:#a9761a}
.cs-roll.multi::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:26%;pointer-events:none;background:linear-gradient(105deg,#fff0,#ffffff88,#fff0);
  animation:cs-roll-shine 2.6s ease-in-out infinite}
@keyframes cs-roll-shine{0%,50%{left:-40%}100%{left:130%}}
.cs-roll.guar{--f1:#d2a9f5;--f2:#8b47cf;--hi:#efdcff;--lo:#5a2a91;color:#fff}
.cs-roll.guar .csr-txt b{text-shadow:0 2px 0 #0006}
.cs-roll.guar .csr-txt small{color:#f3e6ff}
.cs-roll:hover{filter:brightness(1.07)}
.cs-roll:active{transform:translateY(3px);box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo)}
.cs-roll.off{filter:grayscale(.75) brightness(.8)}
.csr-txt{display:flex;flex-direction:column;line-height:1.2}
.csr-txt b{font-size:20px;font-weight:900;letter-spacing:2px;text-shadow:0 1px 0 #fff8}
.csr-txt small{font-size:11.5px;font-weight:900;color:#1c2a3a;white-space:nowrap}
.csr-txt small .pxi{width:15px;height:15px;vertical-align:-3px}
.csr-txt em{margin-left:6px;padding:0 5px;font-style:normal;font-size:10px;font-weight:900;line-height:14px;color:#fff;background:#e0392b;border:2px solid #000;vertical-align:1px}
/* 按鈕上的小卡：抽 1 張＝一張、抽 11 張＝扇形三張、確定卡包＝一張金卡 */
.csr-ico{position:relative;flex:0 0 40px;height:44px}
.csr-ico i{position:absolute;left:9px;top:5px;width:22px;height:32px;border:2px solid #000;
  background:repeating-linear-gradient(45deg,#0000 0 4px,#ffffff22 4px 5px),linear-gradient(#8a5ad6,#3a1f7a);box-shadow:inset 0 0 0 2px #b89cff,0 2px 0 #0006}
.csr-ico.one i:nth-child(n+2),.csr-ico.gold i:nth-child(n+2){display:none}
.csr-ico.fan i:nth-child(1){transform:rotate(-16deg) translate(-7px,2px)}
.csr-ico.fan i:nth-child(3){transform:rotate(16deg) translate(7px,2px)}
.csr-ico.gold i{background:linear-gradient(135deg,#fff6c2,#ffc53d 45%,#b8760a);box-shadow:inset 0 0 0 2px #fff3c4,0 0 10px #ffd75e}
.cs-actions.basic .csr-ico i{background:repeating-linear-gradient(45deg,#0000 0 4px,#ffffff22 4px 5px),linear-gradient(#2fae6a,#0b4a2c);box-shadow:inset 0 0 0 2px #8ff0b4,0 2px 0 #0006}
.cs-roll:hover .csr-ico.fan i:nth-child(1){transform:rotate(-24deg) translate(-10px,2px)}
.cs-roll:hover .csr-ico.fan i:nth-child(3){transform:rotate(24deg) translate(10px,2px)}
.csr-ico i{transition:transform .2s}

/* ---- 機率／紀錄／收集面板：換成深色的卡冊外框 ---- */
#scr-gacha .gxp-card{background:linear-gradient(#fbf3de,#efdcb4);box-shadow:0 0 0 3px #b89cff,0 0 30px #8a5ad6aa,0 6px 0 #0008}
#scr-gacha .gxp-head{background:linear-gradient(#3a2470,#241450)}
/* v9.0：開發者工具打開時，左下角的召喚音訊狀態（smAudioDiag） */
#sm-diag{position:absolute;left:10px;bottom:6px;z-index:7;font-size:10.5px;font-weight:800;color:#9fb0d8;text-shadow:0 1px 0 #000;pointer-events:none}
/* =================== v9.0「減少特效」「畫面震動」「閃光效果」（設定畫面；engine.js 的 applyFxSettings 掛 body class）=================== */
body.no-flash .sm-flash{display:none}
body.no-shake .sm-world.shake,body.no-shake .sm-world.shake-big{animation:none}
body.fx-lite .smp-foil,body.fx-lite .sms-lines,body.fx-lite .sms-flare{display:none}
body.fx-lite .smp-sheen::before,body.fx-lite .smmp-sheen::before,body.fx-lite .smc-sheen{animation:none;opacity:0}
body.fx-lite .sms-rays{animation:none;opacity:.35}
body.fx-lite .sms-aura i{animation:none!important;opacity:var(--ao)}
body.fx-lite .sm-card.omen2 .smc-back,body.fx-lite .sm-card.omen3 .smc-back{animation:none}
body.fx-lite .smmp-glow{animation:none!important}
/* =================== v9.0 正卡：登場畫面的簽名動畫、雷射標籤亮起來、徽章（銀色全像，跟卡片右下角的雷射標籤同一套）=================== */
.smc-badge.sig,.sms-badge.sig,.sms-chip.sig,.sms-sig{color:#1c1c2a;text-shadow:0 1px 0 #ffffffa0;
  background:linear-gradient(115deg,#ff9ad8,#ffe27a,#9affc8,#8fd8ff,#c8a0ff,#ff9ad8) 0 0/300% 100%,#e6eaf2;background-blend-mode:soft-light,normal;animation:tc-holoseal 2.6s linear infinite}
.sms-sig{align-self:center;font-style:normal;font-size:26px;font-weight:900;letter-spacing:3px;line-height:1;padding:4px 12px;
  border:3px solid #000;box-shadow:inset 0 0 0 2px #ffffffb0,0 3px 0 #0008;transform:rotate(-6deg)}
.sm-splash.sig.play:not(.replay) .sms-sig{animation:sms-stamp .4s cubic-bezier(.2,1.8,.4,1) 2.4s both,tc-holoseal 2.6s linear 2.8s infinite}
.sm-splash.sig.play:not(.replay) .smsc-front .tc-sign path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:tc-write 1.15s ease-in-out 1.25s forwards}
@keyframes tc-write{to{stroke-dashoffset:0}}
.sm-splash.sig.play:not(.replay) .smsc-front .tc-sign.img{animation:tc-write-img 1.15s ease-in-out 1.25s both}   /* 上傳的簽名圖：從左到右「寫」出來 */
@keyframes tc-write-img{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.sm-splash.sig.play:not(.replay) .smsc-front .tc-holoseal{animation:tc-holo-in .5s cubic-bezier(.2,1.8,.4,1) 2.45s both,tc-holoseal 2.6s linear 2.95s infinite}
@keyframes tc-holo-in{from{opacity:0;transform:scale(3) rotate(-25deg);filter:brightness(3)}}

/* =========================================================
   v9.14 第一次抽到正卡：強制看完的說明演出（summon.js 的 sigIntroShow）
   時間軸：0 白閃 → .3 標題 → .6 卡片轉進來 → 1.7 簽名寫上去 → 3.0 圈出簽名 → 3.5 雷射標籤亮起來 → 3.9／4.5／5.1 三句說明 → 5.9 才出現「我知道了！」
   ⚠ or-flash／or-spin／or-in／or-card／or-foil 這幾個動畫沿用 css/oneofone.css（1 of 1 揭曉演出）的 @keyframes
   ========================================================= */
#sig-intro{position:absolute;inset:0;z-index:9001;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(circle at 34% 50%,#5a3a08ee 0%,#1a1004f5 55%,#000 100%);opacity:0;transition:opacity .35s}
#sig-intro.on{opacity:1}
#sig-intro.out{opacity:0;transition:opacity .4s}
.si-flash{position:absolute;inset:0;background:#fff6d0;opacity:0;pointer-events:none}
#sig-intro.on .si-flash{animation:or-flash .7s ease-out}
.si-rays{position:absolute;left:34%;top:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;pointer-events:none;opacity:.45;
  background:repeating-conic-gradient(from 0deg,#ffd75e26 0 6deg,#fff0 6deg 15deg);animation:or-spin 30s linear infinite}
.si-title{position:relative;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(-12px)}
.si-title small{font:900 14px/1 sans-serif;letter-spacing:6px;color:#fff3c4;text-shadow:0 0 10px #ffb52a}
.si-title b{font:900 40px/1.1 sans-serif;letter-spacing:8px;color:#fff0;
  background:linear-gradient(100deg,#fff6d0,#ffca4a 35%,#fff 50%,#ffca4a 65%,#fff6d0) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 #3d2308) drop-shadow(0 0 14px #ffd75e);animation:or-foil 2.4s linear infinite}
#sig-intro.on .si-title{animation:or-in .6s .3s ease-out forwards}
.si-main{position:relative;display:flex;align-items:center;gap:34px;margin-bottom:24px}
.si-card{position:relative;zoom:.72;perspective:900px}
.si-card .tcard{opacity:0;transform-style:preserve-3d}
#sig-intro.on .si-card .tcard{animation:or-card 1s .6s cubic-bezier(.2,.8,.25,1) forwards}
/* 簽名一筆一筆寫上去（程式畫的筆跡／上傳的簽名圖都有） */
#sig-intro .tc-sign path{stroke-dasharray:1 1;stroke-dashoffset:1}
#sig-intro.on .tc-sign path{animation:tc-write 1.2s ease-in-out 1.7s forwards}
#sig-intro.on .tc-sign.img{animation:tc-write-img 1.2s ease-in-out 1.7s both}
#sig-intro .tc-holoseal{opacity:0}
#sig-intro.on .tc-holoseal{animation:tc-holo-in .5s cubic-bezier(.2,1.8,.4,1) 3.45s both,tc-holoseal 2.6s linear 3.95s infinite}
/* 圈出簽名與雷射標籤（卡片座標：簽名在右下 right 30／bottom 9、標籤 right 9／bottom 9，再加 3px 黑框） */
.si-ring{position:absolute;z-index:8;border:3px solid #ffe27a;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 12px #ffd75e,inset 0 0 10px #ffd75e88}
.si-ring.r1{right:20px;bottom:2px;width:132px;height:66px}
.si-ring.r2{right:3px;bottom:3px;width:36px;height:36px;border-color:#bfe9ff;box-shadow:0 0 12px #8fd8ff,inset 0 0 8px #8fd8ff88}
#sig-intro.on .si-ring.r1{animation:si-ring 1.6s 3s ease-out infinite}
#sig-intro.on .si-ring.r2{animation:si-ring 1.6s 3.5s ease-out infinite}
@keyframes si-ring{0%{opacity:0;transform:scale(1.5)}25%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1.04)}100%{opacity:.85;transform:scale(1)}}
.si-tag{position:absolute;z-index:9;bottom:-38px;padding:4px 10px;white-space:nowrap;font:900 16px/1 sans-serif;color:#2a1400;
  background:linear-gradient(#fff6d0,#ffca4a);border:2.5px solid #000;box-shadow:0 3px 0 #000a;opacity:0}
.si-tag::before{content:"";position:absolute;top:-11px;width:0;height:0;border:6px solid transparent;border-bottom:7px solid #000}
.si-tag.t1{right:54px}
.si-tag.t1::before{right:30px}
.si-tag.t2{right:-122px;color:#062436;background:linear-gradient(#e8f8ff,#8fd8ff)}
.si-tag.t2::before{left:12px}
#sig-intro.on .si-tag.t1{animation:or-in .4s 3s ease-out forwards}
#sig-intro.on .si-tag.t2{animation:or-in .4s 3.5s ease-out forwards}
.si-tag{transform:translateY(6px)}
/* 三句說明 */
.si-pts{display:flex;flex-direction:column;gap:10px;width:330px;margin:0;padding:0;list-style:none;counter-reset:si}
.si-pts li{position:relative;padding:8px 10px 8px 36px;font:700 13.5px/1.5 sans-serif;color:#fff6e6;text-shadow:0 1px 0 #000;
  background:#00000080;border:2px solid #000;box-shadow:inset 0 0 0 1px #ffd75e44;opacity:0;transform:translateX(14px)}
.si-pts li::before{counter-increment:si;content:counter(si);position:absolute;left:8px;top:8px;width:20px;height:20px;display:grid;place-items:center;
  font:900 12px/1 sans-serif;color:#2a1400;background:linear-gradient(#fff6d0,#ffca4a);border:2px solid #000;border-radius:50%}
.si-pts b{color:#ffd75e}
#sig-intro.on .si-pts li:nth-child(1){animation:or-in .45s 3.9s ease-out forwards}
#sig-intro.on .si-pts li:nth-child(2){animation:or-in .45s 4.5s ease-out forwards}
#sig-intro.on .si-pts li:nth-child(3){animation:or-in .45s 5.1s ease-out forwards}
/* 「我知道了！」：播完才出現、才按得下去（強制看完） */
.si-ok{position:relative;margin-top:14px;padding:8px 34px;font:900 17px/1 sans-serif;color:#2a1400;background:linear-gradient(#fff6d0,#ffca4a);border:3px solid #000;
  box-shadow:inset 2px 2px 0 #fffa,inset -2px -2px 0 #0004,0 4px 0 #000;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .35s,transform .35s}
#sig-intro.ready .si-ok{opacity:1;visibility:visible;transform:none;animation:si-okpulse 1.4s ease-in-out .4s infinite}
@keyframes si-okpulse{50%{filter:brightness(1.12);box-shadow:inset 2px 2px 0 #fffa,inset -2px -2px 0 #0004,0 4px 0 #000,0 0 16px #ffd75e}}
body.fx-lite #sig-intro .si-rays{animation:none}