/* =========================================================
   v8.0 質感升級層（戰鬥演出／HUD／劇情／轉蛋／介面）
   =========================================================
   跟 theme.css、screens.css 一樣是**覆蓋層**：載在最後面，只加外觀與動畫。
   拿掉 index.html 裡那一行 <link> 就回到 v7.40 的樣子（遊戲邏輯完全不依賴這份檔案）。

   ⚠ 動畫一律只動 transform / opacity（交給合成器），不動 width/height/top/left ——
     戰鬥中 HUD 每幀都在更新，動版面屬性會逼瀏覽器每幀重排。
   ⚠ 描邊字沿用 theme.css 的做法：多層 drop-shadow 疊出厚外框（比 -webkit-text-stroke 更像手繪）。 */

:root{
  --ol:#1a0f05;                /* 大字的描邊色 */
  --glow-gold:#ffd75e;
}

/* ---------------------------------------------------------
   戰鬥大橫幅：開場／勝利／敗北
   --------------------------------------------------------- */
#battle-banner{position:absolute;inset:0;z-index:25;pointer-events:none;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;padding-bottom:150px}
#battle-banner.on{display:flex}
.bb-plate{position:relative;min-width:360px;padding:9px 26px 11px;text-align:center;
  background:linear-gradient(#2b1a0c,#140b04);border:3px solid var(--glow-gold);
  box-shadow:0 0 0 3px var(--ol),0 8px 22px #000a,inset 0 2px 0 #ffffff26;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%)}
.bb-sub{font-size:12px;font-weight:900;letter-spacing:4px;color:#ffd75e;opacity:.9}
.bb-stage{display:flex;align-items:baseline;justify-content:center;gap:12px;margin-top:2px}
.bb-stage b{font-size:30px;font-weight:900;color:#fff6dd;letter-spacing:2px;
  text-shadow:0 3px 0 #000,0 0 14px #ffae2a66}
.bb-stage span{font-size:15px;font-weight:800;color:#f0dcb0;max-width:380px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-big{font-size:64px;font-weight:900;letter-spacing:6px;line-height:1.05;color:#fff;
  background:linear-gradient(#fffbe8 0%,#ffe27a 45%,#ffab1f 72%,#f07a12 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(4px 0 0 var(--ol)) drop-shadow(-4px 0 0 var(--ol)) drop-shadow(0 4px 0 var(--ol))
         drop-shadow(0 -4px 0 var(--ol)) drop-shadow(0 8px 0 #00000066)}
.bb-combos{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font-size:12px;font-weight:900;color:#fff;
  padding:4px 12px;background:#0b1a10cc;border:2px solid #7ee88a;border-radius:20px}
.bb-combos i{font-style:normal;color:#b8ffc0}
.bb-note{font-size:12px;font-weight:800;color:#fff;opacity:0;letter-spacing:2px;
  text-shadow:0 2px 0 #000,0 0 6px #000;margin-top:4px}

/* 開場：名牌從左滑進 → 「戰鬥開始!!」蓋章 → 2.6 秒後全部淡出 */
#battle-banner.bb-start.on .bb-plate{animation:bb-plate 2.6s ease both}
@keyframes bb-plate{0%{opacity:0;transform:translateX(-90px)}12%{opacity:1;transform:none}
  80%{opacity:1;transform:none}100%{opacity:0;transform:translateX(50px)}}
#battle-banner.bb-start.on .bb-big{animation:bb-stamp 2.6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes bb-stamp{0%,14%{opacity:0;transform:scale(2.6)}24%{opacity:1;transform:scale(.94)}
  30%{transform:scale(1)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
#battle-banner.bb-start.on .bb-combos{animation:bb-plate 2.6s ease .15s both}

/* 勝利：金色大字蓋章 + 身後旋轉的光芒 */
.bb-big.win{font-size:92px;letter-spacing:10px}
#battle-banner.bb-win.on .bb-big{animation:bb-win-in .7s cubic-bezier(.2,1.5,.35,1) both}
@keyframes bb-win-in{0%{opacity:0;transform:scale(3) rotate(-8deg)}60%{opacity:1;transform:scale(.92) rotate(2deg)}100%{opacity:1;transform:none}}
.bb-rays{position:absolute;left:50%;top:calc(50% - 75px);width:900px;height:900px;margin:-450px 0 0 -450px;
  background:repeating-conic-gradient(from 0deg,#fff4c055 0deg 9deg,#fff4c000 9deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 18%,#0000 62%);mask:radial-gradient(circle,#000 18%,#0000 62%);
  opacity:0}
#battle-banner.bb-win.on .bb-rays{animation:bb-rays-in .8s ease-out .1s forwards,bb-spin 16s linear infinite}
@keyframes bb-rays-in{to{opacity:1}}
@keyframes bb-spin{to{transform:rotate(360deg)}}
#battle-banner.on .bb-note{animation:bb-note-in .5s ease 1.2s forwards}
@keyframes bb-note-in{to{opacity:.85}}

/* 敗北：灰藍色的字從上面掉下來，四周壓暗 */
#battle-banner.bb-lose::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 80% at 50% 45%,#0000 30%,#05060cb0 100%);opacity:0;animation:bb-rays-in 1s ease forwards}
.bb-big.lose{font-size:84px;letter-spacing:12px;
  background:linear-gradient(#f4f7ff 0%,#b8c4de 50%,#6d7d9e 100%);-webkit-background-clip:text;background-clip:text}
#battle-banner.bb-lose.on .bb-big{animation:bb-lose-in .9s cubic-bezier(.3,1.4,.5,1) both}
@keyframes bb-lose-in{0%{opacity:0;transform:translateY(-120px)}70%{opacity:1;transform:translateY(8px)}100%{opacity:1;transform:none}}

/* ---------------------------------------------------------
   戰鬥 HUD
   --------------------------------------------------------- */
/* 城堡血條左右各一顆頭像（直接取主堡圖的局部，不另外做素材）。
   ⚠ background-size / position 是從 1600×900 的原圖**量出來的**：
     人面獅身的臉中心 (1080,280) 半徑 130、敵塔晶石中心 (755,195) 半徑 110，換算成 30px 的圓。
     換主堡圖要重量（量法同 HANDOFF §v8.0 的眼睛位置）。 */
.castle-hp{position:relative}
.castle-hp.mine{padding-left:34px}
.castle-hp.foe{padding-right:34px}
.ch-ico{position:absolute;top:5px;width:36px;height:36px;border-radius:50%;z-index:2;
  border:3px solid var(--ink,#3d2308);background-color:#241a10;background-repeat:no-repeat;
  box-shadow:0 3px 0 #00000059,inset 0 0 0 2px #ffffff33}
.castle-hp.mine .ch-ico{left:0;background-image:url("../images/ui/home.webp");
  background-size:184.6px 103.8px;background-position:-109.6px -17.3px}
.castle-hp.foe .ch-ico{right:0;background-image:url("../images/ui/tower.webp");
  background-size:218px 122.7px;background-position:-88px -11.6px;background-color:#2a1414}
.castle-hp.mine.danger .ch-ico{animation:ico-danger .5s infinite alternate}
@keyframes ico-danger{to{box-shadow:0 3px 0 #00000059,0 0 0 3px #ff4a3a,0 0 12px #ff2a2a}}
/* 受傷殘影：真正的血條底下那一截亮紅白，慢慢縮回去（格鬥遊戲常見的那種） */
.castle-hp .bar .trail{position:absolute;top:0;bottom:0;left:0;display:block;
  background:linear-gradient(#fff6ea,#ffb49a);opacity:.9}
.castle-hp.foe .bar .trail{left:auto;right:0}
.castle-hp .bar i{z-index:1}
.castle-hp .bar span{z-index:2}
/* 血條填色補一條上緣高光，比較像玻璃管 */
.castle-hp .bar i{box-shadow:inset 0 3px 0 #ffffff5c,inset 0 -3px 4px #00000033}

/* 出擊卡：冷卻中變暗 + 底部進度條（同原作），數字縮小移到上半部 */
.ubtn .u-cd{background:linear-gradient(#000000a0,#00000070);font-size:15px;align-items:start;
  padding-top:6px;letter-spacing:.5px}
.ubtn .u-cdbar{position:absolute;left:6px;right:6px;bottom:24px;height:6px;z-index:3;
  background:#000a;border:1px solid #ffffff3d;border-radius:4px;overflow:hidden}
.ubtn .u-cdbar i{display:block;height:100%;width:0;
  background:linear-gradient(#bff4ff,#46b6ea 55%,#1f7fb5);box-shadow:0 0 6px #7fd8ff}
/* 冷卻好了而且出得起：亮一下 */
.ubtn.ready{animation:ubtn-ready .45s ease-out}
@keyframes ubtn-ready{
  0%{filter:brightness(1.9);box-shadow:0 4px 0 var(--ink,#3d2308),0 0 0 3px #fff6c4,0 0 18px #ffe07a}
  100%{filter:none}}

/* 錢包升級：整顆鈕閃金光，等級膠囊彈一下 */
.wallet.lvup{animation:wallet-up .55s ease-out}
@keyframes wallet-up{0%{filter:brightness(2.2) saturate(1.4)}100%{filter:none}}
.wallet.lvup .w-title{animation:chip-pop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes chip-pop{0%{transform:scale(1.9);background:linear-gradient(#fff3c4,#ffd75c)}100%{transform:none}}

/* ---------------------------------------------------------
   劇情演出
   --------------------------------------------------------- */
#story-overlay{background:#07060d;overflow:hidden}
/* 場景：該關的戰場背景，模糊壓暗後慢慢推移（像鏡頭在呼吸） */
#story-bg{position:absolute;inset:0;width:960px;height:540px;z-index:0;
  filter:blur(2.5px) brightness(.5) saturate(.85);transform:scale(1.08);
  animation:story-pan 26s ease-in-out infinite alternate}
@keyframes story-pan{from{transform:scale(1.08) translateX(-16px)}to{transform:scale(1.12) translateX(16px)}}
.story-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%,#0000 40%,#000000a8 100%),
             linear-gradient(#0000 55%,#000000a0 100%)}
#story-overlay>.story-stage{z-index:2}
#story-overlay>.story-box{z-index:5}
.story-skip-row{z-index:12;top:7px;right:12px;display:flex;gap:8px}
/* 電影黑邊：開場時從上下滑進來 */
.story-bars{position:absolute;inset:0;z-index:9;pointer-events:none}
.story-bars i{position:absolute;left:0;right:0;height:38px;background:#000;display:block}
.story-bars .t{top:0;transform:translateY(-100%)}
.story-bars .b{bottom:0;transform:translateY(100%)}
#story-overlay.opening .story-bars .t,#story-overlay.opening .story-bars .b{animation:bars-in .5s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes bars-in{to{transform:none}}

/* LOG／AUTO：跟「跳過劇情」同一種像素方鈕 */
.story-tool{
  --f1:#d4d4d4; --f2:#b8b8b8; --hi:#efefef; --lo:#8a8a8a;
  border:3px solid #000;border-radius:0;padding:5px 11px;cursor:pointer;
  background:linear-gradient(var(--f1),var(--f2));color:#1c1c1c;font-size:12px;font-weight:900;letter-spacing:1px;
  box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 3px 0 #00000055;text-shadow:0 1px 0 #ffffff88}
.story-tool:hover{filter:brightness(1.07)}
.story-tool:active{transform:translateY(2px);box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo)}
.story-tool.on{--f1:#ffd98a; --f2:#f0b429; --hi:#fff3c4; --lo:#a9761a;animation:auto-pulse 1.2s ease-in-out infinite}
@keyframes auto-pulse{50%{filter:brightness(1.18)}}

/* 立繪：外層 .story-slot 負責「滑進場／講話跳一下」，canvas 本身負責亮暗（原本 style.css 的規則） */
.story-slot{position:absolute;bottom:0;width:240px;height:280px}
.story-slot.pl{left:24px}
.story-slot.pr{right:24px}
.story-slot .story-portrait{left:0;right:auto;bottom:0}
.story-slot::after{content:"";position:absolute;left:50%;bottom:-6px;width:190px;height:26px;margin-left:-95px;
  border-radius:50%;background:radial-gradient(#000a,#0000 70%);z-index:-1}
.story-slot.pl.enter{animation:slot-in-l .45s cubic-bezier(.2,1.2,.4,1)}
.story-slot.pr.enter{animation:slot-in-r .45s cubic-bezier(.2,1.2,.4,1)}
@keyframes slot-in-l{from{opacity:0;transform:translateX(-140px)}to{opacity:1;transform:none}}
@keyframes slot-in-r{from{opacity:0;transform:translateX(140px)}to{opacity:1;transform:none}}
.story-slot.talk{animation:slot-talk .32s ease-out}
@keyframes slot-talk{0%{transform:none}35%{transform:translateY(-12px)}70%{transform:translateY(2px)}100%{transform:none}}
/* 正在講話的人：身後一圈代表色的光 */
.story-portrait.speaking{filter:drop-shadow(0 14px 20px #000a) drop-shadow(0 0 3px var(--sc,#8ef07a)) drop-shadow(0 0 16px var(--sc,#8ef07a))}

/* 對話框：深色半透明面板 + 說話者代表色的上緣 + 掛在框上的名牌 */
.story-box{max-width:880px;margin:0 22px 54px;padding:24px 28px 18px;border-radius:6px;
  background:linear-gradient(#161c33ee,#0b0e1bf5);border:3px solid #000;border-top:4px solid var(--sc,#8ef07a);
  box-shadow:inset 0 0 0 2px #ffffff14,0 12px 32px #000c;transition:opacity .2s,transform .2s}
.story-box.beat,.story-box.hold{opacity:0;transform:translateY(16px);pointer-events:none}
.story-name{position:absolute;top:-19px;left:22px;margin:0;padding:3px 16px 4px;border-radius:4px;
  background:var(--sc,#8ef07a);color:#120b02;font-size:15px;font-weight:900;letter-spacing:2px;
  border:3px solid #000;box-shadow:0 3px 0 #00000080}
.story-name:empty{display:none}
.story-box.from-right .story-name{left:auto;right:22px}
.story-box.chorus .story-name{left:50%;transform:translateX(-50%)}
.story-text{font-size:17.5px;line-height:1.75;color:#f4f6ff;min-height:3.5em;text-shadow:0 2px 0 #000a}
.story-box.narration{background:linear-gradient(#000000d8,#000000e6);border-top-color:#8ea0c8}
.story-text.narration-text{color:#d6deef;font-size:16.5px}
.story-next{right:22px;bottom:10px;font-size:15px;color:var(--sc,#8ef07a)}

/* 章節標題卡 */
.story-title{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;pointer-events:none;background:radial-gradient(80% 60% at 50% 50%,#000000b0,#0000 75%);
  animation:stt-fade 1.9s ease forwards}
@keyframes stt-fade{0%,84%{opacity:1}100%{opacity:0}}
.stt-ch{font-size:16px;font-weight:900;letter-spacing:6px;color:#ffd75e;animation:stt-in .6s .1s both}
.stt-ch em{font-style:normal;color:#fff;margin-left:12px;letter-spacing:4px}
.stt-line{width:460px;height:3px;background:linear-gradient(90deg,#ffd75e00,#ffd75e,#ffd75e00);
  transform:scaleX(0);animation:stt-line .7s .2s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes stt-line{to{transform:scaleX(1)}}
.stt-no{font-size:66px;font-weight:900;letter-spacing:10px;color:#fff;line-height:1.1;
  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 16px #ffae2a88);
  animation:stt-pop .55s .3s cubic-bezier(.2,1.4,.4,1) both}
.stt-name{font-size:21px;font-weight:900;color:#f3e8cc;letter-spacing:4px;text-shadow:0 2px 0 #000;animation:stt-in .5s .55s both}
@keyframes stt-in{from{opacity:0;transform:translateY(10px);letter-spacing:14px}to{opacity:1;transform:none}}
@keyframes stt-pop{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:none}}

/* 漫畫速度線：吼出來的台詞（劇本寫「字體放大」）才出現 */
.story-speedlines{position:absolute;inset:-25%;z-index:1;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg at 50% 55%,#fff0 0deg 5deg,#ffffff30 5deg 6.2deg);
  -webkit-mask:radial-gradient(circle at 50% 55%,#0000 16%,#000 52%);mask:radial-gradient(circle at 50% 55%,#0000 16%,#000 52%)}
#story-overlay.fx-lines .story-speedlines{animation:lines-in .25s ease-out forwards,lines-jit .12s steps(2) infinite}
@keyframes lines-in{to{opacity:1}}
@keyframes lines-jit{50%{transform:rotate(1.5deg)}}

/* 對話紀錄 */
.story-logview{position:absolute;inset:0;z-index:14;background:#000a;display:flex;align-items:center;justify-content:center;cursor:default}
.slv-card{width:640px;max-height:420px;display:flex;flex-direction:column;background:linear-gradient(#161c33,#0b0e1b);
  border:3px solid #000;border-top:4px solid #ffd75e;box-shadow:0 18px 40px #000c}
.slv-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:2px solid #ffffff1a}
.slv-head b{font-size:15px;letter-spacing:3px;color:#ffd75e}
.slv-body{overflow-y:auto;padding:10px 16px 14px;display:flex;flex-direction:column;gap:9px}
.slv-row{font-size:14px;line-height:1.6;color:#e8ecfa}
.slv-row b{display:block;font-size:12px;letter-spacing:1px}
.slv-row.narr span{color:#aeb9d6;font-style:italic}
.slv-empty{color:#8f9ac2;text-align:center;padding:20px}


/* 稀有度標題（蓋章）＋星星 */
/* 名牌 */

/* 11 連：卡片上的星星、ㄉㄜˋ頂以上的聚光 */
/* 卡片本體：稀有度越高底色越華麗 */

/* ---------------------------------------------------------
   像素圖示（.pxi，圖是 ui.js 開機時畫出來塞進 <style id="pixel-icons"> 的）
   --------------------------------------------------------- */
.pxi{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em;font-style:normal;
  background:no-repeat center/contain;image-rendering:pixelated;image-rendering:crisp-edges;flex:0 0 auto}
.base-icon .pxi{width:30px;height:30px;filter:drop-shadow(0 2px 0 #00000040)}
.bp-store .pxi{width:26px;height:26px}
.bp-egg{display:flex;align-items:center;justify-content:center;gap:6px}
.bp-egg .pxi{width:26px;height:26px;filter:drop-shadow(0 2px 0 #00000059)}
.base-shop .pxi,.base-food .pxi{width:22px;height:22px;vertical-align:-5px}

/* ---------------------------------------------------------
   換畫面：淡入 + 微微上浮
   --------------------------------------------------------- */
.screen.scr-enter{animation:scr-in .24s ease-out}
@keyframes scr-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
/* 登入覆蓋層與結算有自己的進場方式，不要跟著上浮 */
#scr-login.scr-enter{animation:none}

/* ---------------------------------------------------------
   基地：夥伴會呼吸、戰鬥開始鈕有一道反光掃過去
   --------------------------------------------------------- */
.base-cat{animation:mascot-breathe 3.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes mascot-breathe{0%,100%{transform:none}50%{transform:translateY(-3px) scaleY(1.012)}}
#base-battle{position:relative;overflow:hidden}
#base-battle::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;pointer-events:none;
  background:linear-gradient(100deg,#fff0,#ffffffa8,#fff0);transform:skewX(-18deg);animation:btn-shine 3.2s ease-in-out infinite}
@keyframes btn-shine{0%,62%{left:-40%}100%{left:130%}}

/* ---------------------------------------------------------
   結算
   --------------------------------------------------------- */
#scr-result{background:radial-gradient(90% 80% at 50% 40%,#140c04b0,#050308e0)}
#scr-result.lose{background:radial-gradient(90% 80% at 50% 40%,#0c1018c0,#030406ea)}
.res-rays{position:absolute;left:50%;top:44%;width:1000px;height:1000px;margin:-500px 0 0 -500px;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,#ffd75e2e 0deg 9deg,#ffd75e00 9deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 14%,#0000 60%);mask:radial-gradient(circle,#000 14%,#0000 60%)}
#scr-result.win .res-rays{opacity:1;animation:bb-spin 22s linear infinite}
.result-card{position:relative;width:520px;padding:34px 26px 18px;margin-top:22px;border-radius:14px;text-align:center;
  background:linear-gradient(#fff8e6,#f3e0b4);border:4px solid var(--ink,#3d2308);color:#3d2308;
  box-shadow:0 7px 0 #00000055,0 22px 50px #000c,inset 0 3px 0 #fff}
#scr-result.scr-enter .result-card{animation:res-card-in .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes res-card-in{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
#scr-result.lose .result-card{background:linear-gradient(#eef1f7,#cfd6e3)}
/* 標題緞帶（兩端剪成燕尾） */
.res-ribbon{position:absolute;left:50%;top:-30px;transform:translateX(-50%);min-width:330px;padding:8px 44px 10px;
  background:linear-gradient(#ff7a5a,#d8352a 55%,#a11d17);border:4px solid var(--ink,#3d2308);
  clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%);box-shadow:0 6px 0 #00000040}
#scr-result.win .res-ribbon{background:linear-gradient(#ffe89a,#ffb52a 55%,#e07c12)}
#scr-result.lose .res-ribbon{background:linear-gradient(#a9b6cc,#6d7d9e 55%,#4a5876)}
.result-card h2,#res-title{font-size:30px;font-weight:900;letter-spacing:8px;margin:0;color:#fff;
  filter:drop-shadow(2px 0 0 #3d2308) drop-shadow(-2px 0 0 #3d2308) drop-shadow(0 2px 0 #3d2308) drop-shadow(0 -2px 0 #3d2308)}
#scr-result.scr-enter .res-ribbon{animation:ribbon-drop .5s cubic-bezier(.2,1.5,.4,1) .12s both}
@keyframes ribbon-drop{from{opacity:0;transform:translate(-50%,-30px) scale(1.4)}to{opacity:1;transform:translateX(-50%)}}
.res-stage{position:relative;display:flex;align-items:baseline;justify-content:center;gap:10px;margin:2px 0 10px}
.res-stage .rs-ch{font-size:12px;font-weight:900;letter-spacing:2px;color:#8a5a12}
.res-stage b{font-size:24px;font-weight:900;color:#3d2308}
.res-stage .rs-desc{font-size:13px;font-weight:800;color:#6b4a1e;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-first{position:absolute;right:-8px;top:-8px;font-style:normal;font-size:13px;font-weight:900;color:#c2372f;
  border:3px solid #c2372f;border-radius:6px;padding:1px 8px;transform:rotate(12deg);background:#fff8e6cc;
  animation:first-stamp .5s cubic-bezier(.2,1.6,.4,1) .55s both}
@keyframes first-stamp{from{opacity:0;transform:rotate(12deg) scale(2.4)}to{opacity:1;transform:rotate(12deg)}}
.res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.res-stats div{background:#1c1206;border:2.5px solid #f0a11e;border-radius:9px;padding:4px 0 5px;box-shadow:inset 0 2px 4px #000a}
.res-stats span{display:block;font-size:10.5px;font-weight:800;color:#e8cf98;letter-spacing:2px}
.res-stats b{font-size:18px;font-weight:900;color:#ffd75c}
.res-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.rw{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px 7px;border-radius:10px;
  background:linear-gradient(#fffdf5,#f6e6bf);border:3px solid var(--ink,#3d2308);box-shadow:0 3px 0 #00000030}
.rw .pxi{width:34px;height:34px}
.rw span{font-size:11px;font-weight:900;color:#6b4a1e;letter-spacing:1px}
.rw b{font-size:21px;font-weight:900;color:#b4530a;font-variant-numeric:tabular-nums}
.rw em{position:absolute;top:-9px;right:-6px;font-style:normal;font-size:10px;font-weight:900;color:#fff;
  background:#c2372f;border:2px solid var(--ink,#3d2308);border-radius:8px;padding:0 5px}
.rw.none{grid-column:1/-1;font-size:13px;font-weight:800;color:#4a5876;background:linear-gradient(#f4f6fb,#dde3ee);border-color:#4a5876}
.res-unlock{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;padding:8px 10px;border-radius:10px;
  background:linear-gradient(#e6ffd9,#bfefa8);border:3px solid #2c6a3a;animation:unlock-in .5s ease .8s both}
@keyframes unlock-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ru-tag{font-size:13px;font-weight:900;color:#1f5a2c;letter-spacing:1px}
.res-rows:empty{display:none}
.res-btns{margin-top:4px}


/* ---------------------------------------------------------
   強化：升級／進化的回饋
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   進化演出
   --------------------------------------------------------- */
#evo-overlay{position:absolute;inset:0;z-index:66;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(70% 70% at 50% 45%,#3a2a0c 0%,#120c04 60%,#050302 100%);cursor:pointer;overflow:hidden}
#evo-overlay.hidden{display:none}
.evo-rays{position:absolute;left:50%;top:44%;width:1100px;height:1100px;margin:-550px 0 0 -550px;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,#ffd75e44 0deg 8deg,#ffd75e00 8deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 10%,#0000 58%);mask:radial-gradient(circle,#000 10%,#0000 58%)}
#evo-overlay.burst .evo-rays{opacity:1;animation:bb-spin 14s linear infinite}
.evo-ring{position:absolute;left:50%;top:44%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;pointer-events:none;
  border:3px dashed #ffe27a88;opacity:0}
#evo-overlay.charge .evo-ring{opacity:1;animation:evo-ring 1.4s ease-in forwards}
@keyframes evo-ring{0%{transform:scale(1.6) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(.35) rotate(300deg);opacity:1}}
.evo-stage{position:relative;width:280px;height:300px;margin-top:-30px}
.evo-stage canvas{position:absolute;inset:0;width:280px;height:300px}
#evo-new{opacity:0}
#evo-overlay.charge #evo-old{animation:evo-charge 1.4s ease-in forwards}
@keyframes evo-charge{0%{filter:drop-shadow(0 0 0 #ffd75e)}60%{filter:brightness(1.6) drop-shadow(0 0 16px #ffd75e)}
  100%{filter:brightness(4) saturate(0) drop-shadow(0 0 30px #fff);transform:scale(1.04)}}
#evo-overlay.burst #evo-old{opacity:0}
#evo-overlay.burst #evo-new{opacity:1;animation:evo-new .7s cubic-bezier(.2,1.4,.4,1);
  filter:drop-shadow(0 12px 16px #000a) drop-shadow(0 0 20px #ffd75eaa)}
@keyframes evo-new{0%{transform:scale(.6);filter:brightness(3.5) saturate(0)}100%{transform:none}}
.evo-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#evo-overlay.burst .evo-flash{animation:evo-flash .7s ease-out}
@keyframes evo-flash{0%{opacity:.95}100%{opacity:0}}
.evo-title{font-size:52px;font-weight:900;letter-spacing:8px;opacity:0;margin-top:-6px;
  background:linear-gradient(#fffbe8,#ffe27a 45%,#ffab1f 75%,#f07a12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(3px 0 0 #2b1600) drop-shadow(-3px 0 0 #2b1600) drop-shadow(0 3px 0 #2b1600) drop-shadow(0 -3px 0 #2b1600) drop-shadow(0 6px 0 #00000066)}
#evo-overlay.burst .evo-title{animation:bb-win-in .6s cubic-bezier(.2,1.5,.35,1) .1s forwards}
.evo-name{font-size:20px;font-weight:900;color:#fff6dd;letter-spacing:3px;opacity:0;text-shadow:0 2px 0 #000}
.evo-desc{max-width:560px;text-align:center;font-size:13px;line-height:1.6;color:#e8d8b0;opacity:0;margin:4px 0 10px}
#evo-overlay.burst .evo-name,#evo-overlay.burst .evo-desc{animation:bb-note-in .5s ease .45s forwards}
#evo-ok{width:220px;opacity:0;pointer-events:none}
#evo-overlay.burst #evo-ok{opacity:1;pointer-events:auto;transition:opacity .3s .7s}

/* 錢包買得起升級時輕輕發光（同原作：工作貓可以升級時會一直閃） */
.wallet:not(:disabled){animation:wallet-ready 1s ease-in-out infinite alternate}
@keyframes wallet-ready{from{box-shadow:0 4px 0 var(--ink,#3d2308),0 0 0 0 #ffe27a00}
  to{box-shadow:0 4px 0 var(--ink,#3d2308),0 0 10px 3px #ffe27acc}}
.wallet.lvup{animation:wallet-up .55s ease-out}

/* （v8.5／v8.6：舊的轉蛋開獎（膠囊搖晃、單抽扭蛋舞台）與扭蛋機整個換掉了 —— 抽卡演出與轉蛋頁都在 summon.js／summon.css） */
/* =========================================================
   v9.0 幹超瑟的主動技能：技能就在他自己的出擊鈕上（他在場上的時候，ui.js 的 unitBtnPress）＋全螢幕切入
   出擊中：費用條換成紫色的技能量表（寫技能名稱）；充滿了整顆鈕發紫光、量表流動、寫「▶ 發動技能」
   ========================================================= */
#unit-row .ubtn .u-sk{position:absolute;left:3px;right:3px;bottom:3px;height:17px;z-index:4;display:none;align-items:center;justify-content:center;overflow:hidden;
  background:#140a24;border:1.5px solid #000}
#unit-row .ubtn .u-sk i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--sp,0) * 100%);background:linear-gradient(90deg,#5a2ab0,#b86bff)}
#unit-row .ubtn .u-sk b{position:relative;font-size:10.5px;font-weight:900;line-height:1;letter-spacing:.5px;color:#fff;white-space:nowrap;text-shadow:0 1px 0 #000,0 0 3px #000}
#unit-row .ubtn.onfield .u-sk{display:flex}
#unit-row .ubtn.onfield .u-cost{visibility:hidden}
#unit-row .ubtn.onfield::before{content:"出擊中";position:absolute;left:3px;top:27px;z-index:3;padding:0 3px;font-size:9px;font-weight:900;line-height:12px;
  color:#fff;background:#000000b0;border:1px solid #000}
#unit-row .ubtn.skready{box-shadow:inset 1px 1px 0 #ffffffa0,inset -1px -1px 0 #0006,0 4px 0 #000b,0 0 0 3px #d9a8ff,0 0 18px #b86bff;
  animation:tc-rainbow 3s linear infinite,ub-skready .7s ease-in-out infinite alternate}
#unit-row .ubtn.skready .u-sk i{width:100%;background:linear-gradient(90deg,#8a4ad6,#ff7be0,#b86bff,#8a4ad6);background-size:300% 100%;animation:ub-skbar 1.2s linear infinite}
#unit-row .ubtn.skready .u-sk b{font-size:0}
#unit-row .ubtn.skready .u-sk b::after{content:"▶ 發動技能";font-size:10.5px;color:#fff}
@keyframes ub-skready{to{transform:translateY(-3px);filter:brightness(1.12)}}
@keyframes ub-skbar{to{background-position:300% 0}}
#unit-row .ubtn.skfire{animation:ub-skfire .45s ease-out}
@keyframes ub-skfire{30%{transform:scale(1.12);filter:brightness(1.8)}}
#unit-tip .tip-sk{display:block;color:#c07bff;font-weight:800;line-height:1.5}
#unit-tip .tip-sk .pxi{width:13px;height:13px;vertical-align:-2px;margin-right:2px}
#skill-cutin{position:absolute;inset:0;z-index:26;pointer-events:none;display:none;overflow:hidden}
#skill-cutin.on{display:block}
.sci-band{position:absolute;left:-40px;right:-40px;top:160px;height:150px;display:flex;align-items:center;gap:20px;padding:0 110px;
  background:linear-gradient(90deg,#000e 0%,#000a 26%,#0006 50%,#000a 74%,#000e 100%),var(--c);border-top:5px solid #000;border-bottom:5px solid #000;
  box-shadow:inset 0 4px 0 #ffffff55,inset 0 -4px 0 #0006;transform:skewY(-4deg);animation:sci-band 1.45s cubic-bezier(.2,.9,.3,1) both}
@keyframes sci-band{0%{transform:skewY(-4deg) translateX(-110%)}16%{transform:skewY(-4deg) translateX(0)}80%{transform:skewY(-4deg) translateX(0);opacity:1}
  100%{transform:skewY(-4deg) translateX(40%);opacity:0}}
.sci-band canvas{width:150px;height:120px;filter:drop-shadow(0 0 14px var(--c)) drop-shadow(0 4px 0 #000)}
.sci-txt{display:flex;flex-direction:column;gap:2px}
.sci-txt small{font-size:15px;font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 2px 0 #000}
.sci-txt b{font-size:48px;font-weight:900;letter-spacing:6px;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) drop-shadow(0 0 16px var(--c))}
.sci-txt em{font-style:normal;font-size:13px;font-weight:800;color:#e8e0ff;text-shadow:0 1px 0 #000}
body.fx-lite .sci-band{animation-duration:1s}