/*
 * 魔王戰的視覺。
 *
 * **這份樣式來自使用者的設計稿** `C:/wordpress/srg-boss-battle.html`
 * （2026-08-18 撰寫，當時還沒與外掛整合）。整合時沿用它的視覺語彙 ——
 * 舞台漸層、地板透視、頭頂血條、受擊震動、擊倒時的去飽和下沉 ——
 * 沒有另外發明一套。
 *
 * 只在 `.srg-root.srg-boss` 底下生效，不影響一般關卡。
 *
 * 與遊戲既有樣式的關係：血條的動畫與 HUD 的計時列是同一套感覺（都是
 * 「一條會動的量表」），但**刻意不共用 class** —— 計時列是資訊，血條是
 * 戰鬥回饋，兩者之後會各自演化。
 */

/* ---------- 基礎 ---------- */
/*
 * 設計稿在這裡有 `*{box-sizing:border-box}` 與 `html,body{...}` 兩條，
 * **整合時必須拿掉**：那份稿是獨立的一頁 HTML，這個檔卻是掛在別人的
 * WordPress 佈景上的。留著等於把整站的 body 背景改成 #e9e4d6、
 * 把佈景的 margin 歸零 —— 而且是在玩家還沒打開任何魔王關的時候就發生。
 *
 * 需要的部分已經在 `.boss-stage *` 與各元件自己的字型宣告裡了。
 *
 * **這裡原本還有第三條漏網的：一整塊裸 `:root{}`**（2026-08-22 刪除）。
 * 它把設計稿的 11 個 `--mh-*` token 又抄了一份，而這個檔是無條件 enqueue 的
 * （見 class-shortcode.php），於是**任何放了 `[sight_read_game]` 的頁面**，
 * 不管有沒有魔王關，整頁配色都被換成設計稿那一版：
 * `--mh-gold-ink` 從 mh-theme.css 的 `#735c00`（可讀的金色字）變回 `#c9a86a`
 * ——那正是 mh-theme.css:37 的註解在講「別拿 honey 當文字」的顏色，
 * HUD 分數與關卡標籤的對比因此掉到 1.9:1。而登入／註冊／選角頁沒載這個檔，
 * 兩步之內的頁面於是長成兩套配色。
 *
 * 配色的權威只有一份：`music-hub/public/mh-theme.css`。
 * `--srg-*` 的別名由 `game.css` 的 `.srg-root` 定義（全部帶 fallback），
 * 舞台與兩張遮罩都掛在 `.srg-root` 底下，繼承得到。
 * 唯一掛在 `document.body` 的是 `.float-dmg`／`.fx-spell`，
 * 前者自己帶 fallback（見該條規則），後者不吃變數。
 * 舞台日後真要另一套色調，請用 `.srg-root.srg-boss{--boss-*:…}` 這種
 * **自己的**變數，不要碰 `--mh-*`。
 */

.boss-stage{
  position:relative;background:var(--srg-paper);color:var(--srg-ink);
  border-radius:20px;overflow:hidden;
  margin:0;padding:10px 12px;
  box-shadow:0 10px 32px -14px rgba(43,58,74,.25);
  width:100%;max-width:100%;font-family:inherit;
}
.boss-stage *{box-sizing:border-box}

/* 暗色戰鬥背景層（用兩張背景圖漸層疊加，營造舞台光） */
.boss-stage::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,225,160,.55) 0%, rgba(255,225,160,0) 55%),
    radial-gradient(ellipse at 50% 95%, rgba(43,58,74,.45) 0%, rgba(43,58,74,0) 60%),
    linear-gradient(180deg, rgba(43,58,74,.10) 0%, rgba(247,241,227,0) 35%, rgba(247,241,227,0) 65%, rgba(43,58,74,.18) 100%);
  z-index:0;pointer-events:none;
}

/* ---------- 頁首列 ---------- */
.boss-topbar{display:flex;align-items:center;gap:12px;padding:6px 8px;
  margin-bottom:10px;position:relative;z-index:1}
.boss-topbar .boss-back{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:10px;border:1px solid var(--srg-border);
  background:rgba(244,234,210,.85);color:var(--srg-navy);font-weight:600;
  font-size:13px;cursor:pointer;text-decoration:none;font-family:inherit;
  transition:transform .15s,box-shadow .15s;
}
.boss-topbar .boss-back:hover{transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(43,58,74,.35)}
.boss-topbar .boss-title{flex:1;min-width:0;font-size:18px;font-weight:700;color:var(--srg-navy);
  font-family:"Fraunces","Noto Serif TC",Georgia,serif;letter-spacing:-.01em}
.boss-topbar .boss-title small{display:block;font-weight:400;font-size:12px;color:var(--srg-slate);
  font-family:inherit;letter-spacing:0;margin-top:2px}

/* ---------- HUD（玩家戰況：命中 / 連擊 / 計時）— 魔王血條已移至魔王頭頂 ---------- */
.boss-hud{display:flex;flex-wrap:wrap;gap:14px;padding:10px 14px;
  border-radius:14px;background:rgba(244,234,210,.78);
  border:1px solid var(--srg-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px -8px rgba(43,58,74,.25);
  margin-bottom:10px;position:relative;z-index:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* 玩家戰況（答對題數 / 連擊 / 計時） */
.boss-stat-block{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;
  min-width:200px}
.boss-stat-row{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;font-size:14px}
.boss-stat-row span{white-space:nowrap}
.boss-stat-row span b{color:var(--srg-ochre);font-size:16px;font-variant-numeric:tabular-nums}
.boss-stat-row .hit b{color:var(--srg-success)}
.boss-stat-row .combo b{color:#9a6cb0}

/* ---------- 主舞台：魔王立繪 + 玩家 ---------- */
/*
 * 舞台的高度是**一個變數**（`--boss-arena-h`），因為兩張立繪的高度是從它算出來的
 * （見下面的 .boss-portrait / .hero-portrait）。三個數字各自寫死的話，改舞台高度
 * 就會讓立繪的頭頂被 `overflow:hidden` 切掉 —— 而受擊震動與倒地下沉正是往那個
 * 方向動的，所以症狀是「平常好好的，被打到才破圖」。
 * 預設值 175px 與改成變數之前完全相同。
 */
.boss-arena{
  position:relative;height:var(--boss-arena-h,175px);
  border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#1d2030 0%,#2b3a4a 38%,#3a3548 65%,#2b3a4a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 28px -14px rgba(43,58,74,.45);
  margin-bottom:8px;display:flex;align-items:flex-end;justify-content:center;
}
.boss-arena::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255,210,120,.45) 0%, rgba(255,210,120,0) 50%),
    radial-gradient(ellipse at 50% 105%, rgba(43,58,74,.65) 0%, rgba(43,58,74,0) 65%);
}

/*
 * 節奏題（貝絲之國／遺忘的洞窟／奧托之地）的舞台矮一截。
 *
 * 那幾種玩法的譜是**一整段時間軸**，常常排到兩三行，而且游標要一路走過去 ——
 * 看不到的那一行等於那幾秒沒有譜可讀。實測 1280×800 的魔王節奏關：
 * 舞台 175＋8 吃掉內容高度的 24.7%，樂譜卡從 437 掉到 254。
 * 舞台本身幾乎是空的（兩張立繪各佔一角，中間一大片漸層），
 * 所以這 55px 是從空白裡拿的，不是從魔王身上拿的。
 *
 * `.srg-rhythm` 是 ui/shell.js（`fullWidth`）與 game.js renderGame 掛的，
 * 也就是「這一關有時間軸」的同一個判準 —— 不必另外問 play_mode。
 */
.srg-root.srg-rhythm .boss-arena{--boss-arena-h:120px;margin-bottom:6px}

/* 舞台地板（透視） */
.boss-arena-floor{position:absolute;left:0;right:0;bottom:0;height:38%;
  background:
    repeating-linear-gradient(90deg,rgba(255,225,170,.12) 0 6%,transparent 6% 12%),
    linear-gradient(180deg,rgba(43,58,74,.25),rgba(43,58,74,.65));
  transform:perspective(420px) rotateX(58deg);transform-origin:bottom center;
  box-shadow:0 -10px 20px -10px rgba(0,0,0,.5) inset;
}

/*
 * 魔王立繪容器（左側）。
 *
 * **這個盒子含血條，而且必須比舞台矮。** 兩件事一起才成立：
 *  - 高度留出頭頂空間（舞台 175 → 立繪 150 + 下緣 6，上面還有 19px）。
 *    舊版是 170 + bottom:4，等於把舞台整個填滿：立繪的頭頂貼著上緣，
 *    受擊震動與倒地下沉（translateY）一動就被 `overflow:hidden` 切掉。
 *  - 血條改成**排在立繪上面的一列**（見 .char-hp-wrap），不再是疊在圖上的
 *    絕對定位。疊著的時候「圖有多高」和「血條在哪」是兩件互不知情的事，
 *    遇到直長型的立繪就會從數字底下穿過去。現在血條吃掉的高度是真的高度，
 *    圖只能用剩下的，兩者加起來恆等於這個盒子。
 */
.boss-portrait{
  position:absolute;bottom:6px;left:6%;
  /* 175 − 25 = 150，與改成變數之前同一個數字；舞台變矮時頭頂空間跟著保留。 */
  width:130px;height:calc(var(--boss-arena-h,175px) - 25px);
  /*
   * gap 是 4px 不是 2px：待機浮動含 ±0.8° 的傾斜，而 `getBoundingClientRect()`
   * 回的是**外接矩形** —— 血條與圖各自往兩側翹起來，兩個矩形就會互相靠近約
   * 1.5px。留 2px 的話「血條排在立繪上方」那條不變式會壓在 0 上（實測最窄
   * 只剩 0.94px），換一張比較寬的立繪就翻負。
   */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
  pointer-events:none;
  /* 待機浮動掛在**整個盒子**上，不是圖上。理由見下方 bossIdle 的長註解。 */
  transform-origin:50% 100%;
  animation:bossIdle 4.6s ease-in-out infinite;
}
.boss-portrait.is-defeated{animation:none}
.boss-portrait img{
  max-width:100%;max-height:100%;min-height:0;object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(120,40,140,.35));
  transition:opacity .35s,transform .35s,filter .35s;
}
.boss-portrait.is-hit img{animation:bossShake .42s ease-out}

/* ---------- 舞台影片（實驗旗標 ?srg_boss_stage_video=1，預設不會出現） ----------
 *
 * 滿血時蓋掉第 1 階段立繪，一掉血就被 JS 收走（見 boss.js 的 syncStage）。
 *
 * **兩種素材的形狀不一樣，這一段幾乎全部是為了那件事。** 立繪是 352×448 的
 * **去背直式** PNG，影片是 736×416 的 **有場景、不透明**的橫式 mp4
 * （i2v 拿立繪當第一幀，把牠周圍那片空白羊皮紙重畫成了礦坑／夜空）。
 *
 * - `object-fit:cover` 不是 `contain`：contain 會把橫式影片縮成 130×73 的一小條
 *   躺在盒子中間，魔王比旁邊的勇者小一半。cover 讓高度填滿、左右裁掉，
 *   裁剩的正好是影片正中央那隻魔王 —— 實測 0.2885 倍下牠佔約 94×120，
 *   與立繪 contain 進同一個盒子時的 94×120 幾乎一樣，所以換回立繪的那一刻
 *   魔王不會忽然變大或變小。
 * - 遮罩不是裝飾：影片是不透明矩形，直接貼上去舞台就多出一塊亮色硬邊色塊
 *   （旁邊的勇者仍然是去背的）。這裡的徑向羽化是**退路**，真正在用的是
 *   `boss.js` 的 `silhouetteMask()` —— 拿立繪自己的 alpha 當遮罩，把影片裁成
 *   魔王的剪影。它是非同步的（要等立繪載完）也可能失敗（跨網域的 canvas），
 *   所以這裡先擋著：最差的情況是羽化過的矩形，不是硬邊矩形。
 */
.boss-portrait video.boss-stage-vid{
  width:100%;flex:1 1 auto;min-height:0;
  object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 70% 76% at 50% 52%,#000 52%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 76% at 50% 52%,#000 52%,transparent 100%);
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(120,40,140,.35));
}
/*
 * 剪影遮罩接上之後就不必再靠羽化把亮度壓下去，但仍稍微收一點飽和與亮度：
 * 影片的打光比立繪亮（i2v 在牠周圍畫了發光的場景），不收的話同一隻魔王
 * 在換回立繪的那一刻會「暗一階」。遮罩本身由 JS 寫在 style 上（贏過這裡）。
 */
.boss-portrait video.boss-stage-vid.has-silhouette{
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(120,40,140,.35))
         brightness(.94) saturate(.96);
}
/* 影片其實在第一次扣血時就被換掉了；留著是為了「扣 0 血」那類不換階段的演出。 */
.boss-portrait.is-hit video.boss-stage-vid{animation:bossShake .42s ease-out}

.boss-portrait.is-defeated img{filter:drop-shadow(0 14px 30px rgba(0,0,0,.7)) saturate(.45);transform:translateY(36px) scale(.9)}

/* ---------- 頭頂血條（魔王 + 勇者共用） ----------
 *
 * **在流內，不是絕對定位。** 它是立繪盒子裡的第一列，立繪是第二列。
 * 這樣「立繪＋血條」的總高就是盒子的高度，量得到也控制得住；
 * 舊版把它 `position:absolute;top:6px` 疊在圖上，於是立繪只要夠高就會
 * 從名稱與數字底下穿過去，而那正是「血條要低於舞台高度」講的那個症狀。
 *
 * 寬度仍然可以比立繪寬（min-width 90px）：flex 的 align-items:center
 * 會讓超出的部分左右對稱溢出，看起來和以前的 translateX(-50%) 一樣。
 */
.char-hp-wrap{
  flex:none;
  width:72%;max-width:160px;min-width:90px;
  pointer-events:none;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  box-sizing:border-box;
}
/*
 * 名稱與血量數字排成同一列，共用一塊深色底。
 * 名稱過長時只縮名稱（min-width:0 + ellipsis），數字 flex:none 永遠完整顯示。
 */
.char-hp-head{
  display:flex;align-items:center;justify-content:center;gap:6px;
  max-width:100%;
  background:rgba(20,16,32,.72);
  padding:1px 8px;border-radius:8px;
  box-sizing:border-box;
}
.char-hp-wrap .char-name{
  font-family:"Fraunces","Noto Serif TC",Georgia,serif;
  font-size:10px;font-weight:700;color:#fff;
  letter-spacing:.05em;text-shadow:0 1px 2px rgba(0,0,0,.7);
  white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.char-hp-bar{
  position:relative;width:100%;height:10px;
  border-radius:6px;background:rgba(20,16,32,.55);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 1px 3px rgba(0,0,0,.4),inset 0 1px 1px rgba(0,0,0,.4);
  overflow:hidden;
}
.char-hp-fill{
  position:absolute;inset:0;width:100%;
  background:linear-gradient(90deg,#d96b6b 0%,#e57b6b 100%);
  transition:width .35s cubic-bezier(.4,.2,.2,1),background .35s;
  box-shadow:0 0 6px rgba(217,107,107,.5);
}
.char-hp-num{
  flex:none;
  font-size:9px;font-weight:800;color:#ffe9c9;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;white-space:nowrap;
}

/* 勇者頭頂血條微調（綠色系，區別魔王紅色） */
.hero-portrait .char-hp-fill{
  background:linear-gradient(90deg,#4fa46a 0%,#6cc683 100%);
  box-shadow:0 0 6px rgba(79,164,106,.6);
}

/* ---------- 待機浮動（讓立繪在沒事發生的時候也是活的） ----------
 *
 * 舞台上原本只有「發生事情的那 0.5 秒」會動，其餘時間是兩張完全靜止的圖，
 * 看起來像貼上去的紙板。這裡給兩邊各一組無限循環的漂浮＋晃動。
 *
 * **動的是整個立繪盒子（含頭頂血條），不是裡面那張 img。**
 * 第一版寫在 img 上，一跑測試就紅：`img.top - bar.bottom` 變成 -6 ——
 * 圖往上浮 8px 就鑽進自己的血條底下（兩者之間本來只有 `gap:2px`），
 * 而血條 `z-index:3` 會蓋在圖上，角色的頭會一下一下地被自己的血條吃掉。
 * 那正是 v2.16.0 把血條從「疊在圖上」改成「排在圖上面一列」要解掉的病。
 * 掛在盒子上有三個好處：
 *  - 血條與圖一起浮，兩者的相對位置恆定，那條不變式原封不動；
 *  - 圖不必為了讓出浮動的路而變矮（改 img 就得多留 8–10px 的邊）；
 *  - **transform 會疊加而不是互搶**：盒子在浮、img 同時可以跑受擊震動或
 *    施法姿勢，兩個動畫各據一個元素。寫在同一個元素上時後者會整個蓋掉前者，
 *    還得靠選擇器特異性去排順序（第一版就在這裡把致命一擊的震動弄不見過）。
 *
 * 其餘三條規則：
 *  - **只動 transform。** 位移／旋轉／縮放走合成執行緒，不會每幀重排重繪；
 *    改 filter（陰影模糊）雖然更像「離地變高」，但那是一張帶模糊的重繪，
 *    兩張立繪同時跑會在手機上吃掉可觀的畫格。
 *  - **關鍵影格落在不對稱的百分比上**（22/45/70 與 25/55/78），而且兩邊
 *    週期互質、勇者再給一段負延遲。整齊的 0/50/100 兩張圖會同步上下，
 *    看起來像同一個機構在推，反而更假。
 *  - **幅度要小於盒子頭頂的餘裕**：舞台 `overflow:hidden`，桌機 175-150-6=19px、
 *    手機 115-98-4=13px。抬 6px 之外還要算旋轉與縮放把外接矩形一起往上推的
 *    那一點（1° 對 130px 寬約 0.9px、1.008 倍對 150px 高約 1.2px），
 *    合計約 8px —— 手機仍留得住，而 `headroom>=8` 那條守門員也還過得去。
 */
@keyframes bossIdle{
  0%  {transform:translate3d(0,0,0) rotate(0) scale(1)}
  22% {transform:translate3d(-2px,-4px,0) rotate(-.6deg) scale(1.004)}
  45% {transform:translate3d(1px,-6px,0) rotate(.4deg) scale(1.008)}
  70% {transform:translate3d(2px,-3px,0) rotate(.8deg) scale(1.004)}
  100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
}
@keyframes heroIdle{
  0%  {transform:translate3d(0,0,0) rotate(0) scale(1)}
  25% {transform:translate3d(1px,-3px,0) rotate(.6deg) scale(1.006)}
  55% {transform:translate3d(-1px,-5px,0) rotate(-.4deg) scale(1.01)}
  78% {transform:translate3d(-2px,-2px,0) rotate(-.8deg) scale(1.004)}
  100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
}

@keyframes bossShake{
  0%{transform:translateX(0) rotate(0)}
  20%{transform:translateX(-10px) rotate(-1.5deg)}
  40%{transform:translateX(8px) rotate(1deg)}
  60%{transform:translateX(-6px) rotate(-.5deg)}
  80%{transform:translateX(4px) rotate(.4deg)}
  100%{transform:translateX(0) rotate(0)}
}

/* 玩家立繪（右下角）。與魔王同一套規則：血條在上、圖在下，整盒比舞台矮。 */
.hero-portrait{
  /* 175 − 43 = 132，同 .boss-portrait 的理由。 */
  position:absolute;right:14px;bottom:6px;width:95px;height:calc(var(--boss-arena-h,175px) - 43px);
  z-index:3;
  /*
   * gap 是 4px 不是 2px：待機浮動含 ±0.8° 的傾斜，而 `getBoundingClientRect()`
   * 回的是**外接矩形** —— 血條與圖各自往兩側翹起來，兩個矩形就會互相靠近約
   * 1.5px。留 2px 的話「血條排在立繪上方」那條不變式會壓在 0 上，
   * 換一張比較寬的立繪就翻負。
   */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
  pointer-events:none;
  transform-origin:50% 100%;
  /* 負延遲＝一載入就已經在週期中段，兩張立繪不會從同一個相位起跑。 */
  animation:heroIdle 3.4s ease-in-out infinite;
  animation-delay:-1.2s;
}
.hero-portrait.is-defeated{animation:none}
.hero-portrait img{
  max-width:100%;max-height:100%;min-height:0;object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
  transition:transform .25s;
  transform-origin:50% 100%;
}
.hero-portrait.is-hit img{animation:heroLunge .35s ease-out}
@keyframes heroLunge{
  0%,100%{transform:translateX(0)}
  40%{transform:translateX(-34px) scale(1.08)}
}
/*
 * 勇者被打中（答錯）。
 *
 * **設計稿在這裡沿用了 `is-hit`**（那是往魔王方向撲的 heroLunge），所以看起來
 * 像是「被打中之後主動衝上去」。魔王在左、勇者在右 → 被擊退的方向是往右，
 * 而且要短促、帶一點紅光，跟攻擊動作分得開。
 */
.hero-portrait.is-hurt img{animation:heroHurt .43s ease-out;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(190,70,90,.75))}
@keyframes heroHurt{
  0%{transform:translateX(0)}
  25%{transform:translateX(16px) rotate(3deg)}
  55%{transform:translateX(-8px) rotate(-1.5deg)}
  80%{transform:translateX(4px)}
  100%{transform:translateX(0)}
}
/* 勇者倒下（血量歸零）。與魔王的倒地一樣：去飽和 + 下沉。 */
.hero-portrait.is-defeated img{filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) saturate(.35);
  transform:translateY(24px) scale(.92)}
/* 玩家施法姿勢（答對後保持抬手） */
.hero-portrait.is-casting img{animation:heroCast .5s ease-out forwards}
@keyframes heroCast{
  0%{transform:translateX(0)}
  30%{transform:translateX(-30px) scale(1.05)}
  100%{transform:translateX(-14px) scale(1.02)}
}

/* 魔法光球（從玩家飛到魔王） */
.fx-spell{
  position:fixed;left:0;top:0;width:24px;height:24px;border-radius:50%;
  background:transparent;
  box-shadow:none;
  pointer-events:none;z-index:100;
  transform:translate(-50%,-50%);
  visibility:hidden;
}
.fx-spell.is-fire{
  visibility:visible;
  background:radial-gradient(circle at 35% 35%, #fff7cc 0%, #ffd34d 30%, #ff8a3d 60%, #c5408a 100%);
  box-shadow:0 0 18px 6px rgba(255,210,80,.6),0 0 36px 12px rgba(255,140,60,.4);
  animation:spellFly .55s cubic-bezier(.4,.2,.6,1) forwards;
}
@keyframes spellFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  85%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.6)}
}

/* 魔王反擊（黑紫光球，從魔王飛向勇者） */
.fx-spell.is-dark{
  visibility:visible;
  background:radial-gradient(circle at 35% 35%, #ddd2ff 0%, #a070d0 28%, #5b2890 60%, #1d0a36 100%);
  box-shadow:0 0 20px 8px rgba(150,60,200,.7),0 0 40px 16px rgba(80,20,120,.5);
  animation:spellFly .6s cubic-bezier(.4,.2,.6,1) forwards;
}

/* 魔王施法姿態（答錯時手臂往前伸） */
.boss-portrait.is-attacking img{animation:bossAttack .45s ease-out forwards}
@keyframes bossAttack{
  0%{transform:translateX(0) rotate(0)}
  35%{transform:translateX(20px) rotate(2deg) scale(1.03)}
  100%{transform:translateX(0) rotate(0)}
}

/* 受擊時的浮字 +HP / -HP
 *
 * **`fixed` 不是設計稿的 `absolute`。** 座標來自 `getBoundingClientRect()`（視窗
 * 座標）而節點掛在 `document.body` 上 —— 設計稿是一頁不會捲動的展示頁所以兩者
 * 剛好相等，這裡的遊戲卻長在會捲動的 WordPress 頁面上，用 absolute 會整段
 * 偏掉一個捲動距離。掛進舞台也不行：舞台是 overflow:hidden 的，而浮字刻意
 * 往立繪上方飄 80px（頭頂就是血條，字要飄到血條之上才看得見）。
 * z-index 要蓋過光球（100），兩者都在同一個位置附近。
 */
/* 這一條掛在 body 上（見上方註解），拿不到 .srg-root 的 --srg-honey，所以自帶退路。 */
.float-dmg{position:fixed;z-index:101;font-weight:800;font-size:22px;
  color:var(--srg-honey,var(--mh-honey,#fed65b));
  text-shadow:0 0 8px rgba(255,180,40,.8),0 2px 4px rgba(0,0,0,.6);
  pointer-events:none;font-family:"Fraunces","Noto Serif TC",Georgia,serif;
  animation:floatDmg 1.1s ease-out forwards}
/* 勇者攻擊文字（金黃、加強光暈） */
.float-dmg.is-attack{color:#ffd34d;
  text-shadow:0 0 12px rgba(255,180,40,.95),0 0 24px rgba(255,120,40,.55),
    0 2px 4px rgba(60,20,0,.8);
  font-size:24px}
/* 魔王反擊文字（黑紫、詭異冷光） */
.float-dmg.is-counter{color:#c89bff;
  text-shadow:0 0 12px rgba(180,80,220,.95),0 0 24px rgba(80,40,160,.55),
    0 2px 4px rgba(20,0,40,.8);
  font-size:24px}
@keyframes floatDmg{
  0%{opacity:0;transform:translate(-50%,10px) scale(.7)}
  20%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-80px) scale(1)}
}

/* 魔王受擊白閃 */
.boss-flash{position:absolute;inset:0;background:rgba(255,255,255,0);
  pointer-events:none;z-index:2;transition:background .12s}
.boss-flash.on{background:rgba(255,230,170,.55)}

/* 戰鬥舞台內的飄浮音符裝飾 */
.fx-note{position:absolute;font-family:"Fraunces","Noto Serif TC",Georgia,serif;
  color:rgba(255,225,140,.6);font-size:24px;pointer-events:none;
  text-shadow:0 0 12px rgba(255,200,80,.6);
  animation:floatNote 8s linear infinite}
@keyframes floatNote{
  0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-260px) rotate(20deg);opacity:0}
}

/* ---------- 戰鬥訊息列 ---------- */
.boss-msg{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-radius:12px;background:rgba(244,234,210,.78);border:1px dashed var(--srg-border);
  margin-bottom:12px;font-size:14px;color:var(--srg-navy);position:relative;z-index:1;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);min-height:46px}
.boss-msg .speech{font-weight:600}
.boss-msg .speech small{font-weight:400;color:var(--srg-slate);margin-left:6px;font-size:12px}

/* ---------- 答題面板：樂譜 + 音符鈕 ---------- */
.boss-card{background:rgba(244,234,210,.88);border:1px solid var(--srg-border);
  border-radius:20px;padding:16px 20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 24px -12px rgba(43,58,74,.35),0 2px 4px -2px rgba(43,58,74,.15);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:relative;z-index:1}

.boss-question-head{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:8px;gap:10px;flex-wrap:wrap}
.boss-question-head .q-title{font-family:"Fraunces","Noto Serif TC",Georgia,serif;
  font-size:20px;color:var(--srg-navy);margin:0}
.boss-question-head .q-prog{font-size:13px;color:var(--srg-slate);font-variant-numeric:tabular-nums}
.boss-question-head .q-prog b{color:var(--srg-ochre);font-size:15px}

.boss-staff-wrap{background:#fffdf5;border-radius:12px;padding:10px;
  text-align:center;border:1px solid rgba(201,168,106,.25)}
.boss-staff-wrap svg{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}

/* 答題鈕：7 個音名，與插件 .srg-letters 同形 */
.boss-letters{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:12px}
.boss-key{padding:14px 0;font-size:18px;font-weight:800;color:var(--srg-navy);
  border:1px solid var(--srg-border);
  background:rgba(255,251,240,.92);border-radius:14px;cursor:pointer;
  font-family:"Fraunces","Noto Serif TC",Georgia,serif;
  transition:transform .12s,box-shadow .12s,background .12s,color .12s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 8px -4px rgba(43,58,74,.25);
  display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1}
.boss-key:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 14px -6px rgba(43,58,74,.35)}
.boss-key:active{transform:translateY(0)}
.boss-key small{font-weight:500;font-size:11px;color:var(--srg-slate);font-family:"Nunito","PingFang TC","Noto Sans TC",sans-serif}
.boss-key.is-correct{background:var(--srg-success);color:#fff;border-color:var(--srg-success);box-shadow:0 0 0 4px rgba(79,164,106,.25)}
.boss-key.is-correct small{color:rgba(255,255,255,.85)}
.boss-key.is-wrong{background:var(--mh-danger,#ba1a1a);color:#fff;border-color:var(--mh-danger,#ba1a1a);animation:keyShake .35s}
.boss-key.is-wrong small{color:rgba(255,255,255,.85)}
.boss-key:disabled{cursor:default;opacity:.85}
@keyframes keyShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

/* 操作列 */
.boss-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.boss-btn{padding:10px 18px;font-size:14px;font-weight:700;
  border:1px solid var(--srg-border);
  background:rgba(255,251,240,.92);color:var(--srg-navy);
  border-radius:12px;cursor:pointer;font-family:inherit;
  transition:transform .12s,box-shadow .12s,background .12s,color .12s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 8px -4px rgba(43,58,74,.25)}
.boss-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px -6px rgba(43,58,74,.35)}
.boss-btn.primary{background:var(--srg-navy);color:var(--srg-cream);border-color:var(--srg-navy)}
.boss-btn.primary:hover{background:#36475a}
.boss-btn.danger{background:var(--mh-danger,#ba1a1a);color:#fff;border-color:var(--mh-danger,#ba1a1a)}
.boss-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- 結算畫面（覆蓋在舞台上） ---------- */
.boss-overlay{position:fixed;inset:0;z-index:50;
  background:rgba(15,18,28,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:24px;
  animation:overlayIn .4s ease-out}
.boss-overlay.show{display:flex}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}

.boss-result{
  position:relative;max-width:560px;width:100%;
  background:var(--srg-paper);border-radius:24px;overflow:hidden;
  box-shadow:0 24px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(201,168,106,.4);
  animation:resultIn .55s cubic-bezier(.2,.8,.2,1)
}
@keyframes resultIn{from{transform:scale(.85) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}

.boss-result-bg{height:200px;background-size:cover;background-position:center;
  position:relative;display:flex;align-items:center;justify-content:center}
.boss-result-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(247,241,227,1) 100%)}
.boss-result-bg .result-badge{position:relative;z-index:1;display:flex;align-items:center;gap:14px;
  background:rgba(247,241,227,.92);border-radius:16px;padding:12px 22px;
  border:1px solid var(--srg-border);box-shadow:0 8px 22px -10px rgba(0,0,0,.5)}
.boss-result-bg .result-badge .star{width:54px;height:54px;color:var(--mh-honey,#fed65b);
  filter:drop-shadow(0 0 12px rgba(255,210,80,.7))}
.boss-result-bg .result-badge .result-title{font-family:"Fraunces","Noto Serif TC",Georgia,serif;
  font-size:22px;color:var(--srg-navy);font-weight:700;line-height:1.1}
.boss-result-bg .result-badge .result-title small{display:block;font-size:13px;font-weight:500;
  color:var(--srg-slate);margin-top:4px;font-family:"Nunito","PingFang TC","Noto Sans TC",sans-serif}

.boss-result-body{padding:22px 28px 28px;text-align:center}
.boss-result-body h2{font-family:"Fraunces","Noto Serif TC",Georgia,serif;
  font-size:28px;color:var(--srg-navy);margin:0 0 6px;letter-spacing:-.01em}
.boss-result-body .sub{color:var(--srg-slate);margin:0 0 18px;font-size:14px}

.boss-result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:14px 0 22px}
.boss-result-stats .stat{background:rgba(244,234,210,.85);border:1px solid var(--srg-border);
  border-radius:14px;padding:12px 8px}
.boss-result-stats .stat .v{font-family:"Fraunces","Noto Serif TC",Georgia,serif;
  font-size:26px;color:var(--srg-ochre);font-weight:700;line-height:1}
.boss-result-stats .stat .l{font-size:11px;color:var(--srg-slate);margin-top:4px;letter-spacing:.05em}

.boss-result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- 介紹面板（魔王現身） ---------- */
.boss-intro-overlay{position:fixed;inset:0;z-index:60;background:rgba(8,10,18,.85);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;
  padding:24px;animation:overlayIn .5s ease-out}
.boss-intro-overlay.show{display:flex}
.boss-intro-card{max-width:560px;width:100%;background:var(--srg-paper);
  border-radius:24px;overflow:hidden;box-shadow:0 30px 100px -20px rgba(0,0,0,.8);
  border:1px solid var(--srg-border);animation:resultIn .6s cubic-bezier(.2,.8,.2,1)}
.boss-intro-img{height:260px;background-size:cover;background-position:center;
  position:relative;display:flex;align-items:flex-end;justify-content:center}
.boss-intro-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.1) 50%,rgba(247,241,227,1) 100%)}
.boss-intro-img .vs{display:flex;align-items:center;gap:8px;margin-bottom:-32px;position:relative;z-index:1}
.boss-intro-img .vs img{width:96px;height:96px;object-fit:contain;border-radius:50%;
  background:rgba(247,241,227,.95);border:3px solid var(--srg-border);
  box-shadow:0 8px 22px -6px rgba(0,0,0,.5);filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.boss-intro-img .vs .vs-mark{font-family:"Fraunces","Noto Serif TC",Georgia,serif;
  font-size:34px;color:var(--mh-honey,#fed65b);font-weight:800;
  text-shadow:0 0 12px rgba(255,180,40,.7),0 2px 4px rgba(0,0,0,.5)}
/* 魔王現身卡的影片片段（v2.15.0 放在 VS 旁的圓框裡，v2.21.0 改成整條橫幅）。
   圓框只有 96px 又是圓的，`object-fit:cover` 會把一支橫幅影片裁掉一半以上；
   而這條橫幅本來就是氣氛底圖，讓它動起來才划算，圓框則回到立繪，與旁邊的
   勇者頭像維持一對對稱的圖。

   **疊在背景圖上面、漸層與圓形頭像下面。** 只給影片 z-index:0：::after 的
   漸層是最後才畫的子項，DOM 順序上自然壓在影片之上；.vs 已經是 z-index:1。
   給 ::after 也加 z-index 反而會把它拉進同一個堆疊層而蓋掉頭像。 */
.boss-intro-img .boss-intro-bg{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover}
.boss-intro-body{padding:42px 28px 28px;text-align:center}
.boss-intro-body h2{font-family:"Fraunces","Noto Serif TC",Georgia,serif;
  font-size:30px;color:var(--srg-navy);margin:0 0 6px;letter-spacing:-.01em}
.boss-intro-body .role{display:inline-block;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--srg-ochre);font-weight:700;
  padding:2px 10px;border-radius:999px;background:rgba(43,58,74,.06);margin-bottom:14px}
.boss-intro-body .lore{color:var(--srg-slate);font-size:14px;line-height:1.6;margin:0 0 18px;
  padding:0 12px}
.boss-intro-body .hp-info{display:inline-flex;align-items:center;gap:8px;
  background:rgba(244,234,210,.85);border:1px solid var(--srg-border);
  border-radius:12px;padding:8px 14px;margin-bottom:18px;font-size:13px;color:var(--srg-navy)}
.boss-intro-body .hp-info b{color:var(--srg-ochre);font-size:18px;
  font-family:"Fraunces","Noto Serif TC",Georgia,serif;font-weight:700}

/* ---------- 響應式（手機單頁版） ---------- */
@media (max-width:640px){
  /* 頁首列緊湊 */
  .boss-topbar{padding:4px 6px;margin-bottom:6px;gap:8px}
  .boss-topbar .boss-title{font-size:15px}
  .boss-topbar .boss-title small{font-size:10px;margin-top:1px}
  .boss-topbar .boss-back{padding:4px 8px;font-size:11px}
  .boss-topbar .boss-btn, .boss-topbar button.boss-btn{font-size:11px;padding:4px 8px}

  /* HUD 單列緊湊 */
  .boss-hud{padding:6px 10px;gap:8px;margin-bottom:6px}
  .boss-stat-block{min-width:0;width:100%;flex-direction:row;gap:8px}
  .boss-stat-row{font-size:11px;gap:8px;width:100%;justify-content:space-between}
  .boss-stat-row span b{font-size:13px}

  /* 主舞台（縮小魔王畫面）。立繪＋血條仍要比舞台矮：115 → 98 + 下緣 4。 */
  .boss-arena{height:115px;border-radius:10px;margin-bottom:6px}
  /*
   * 節奏題的那條規則特異度比上面高（`.srg-root.srg-rhythm .boss-arena`），
   * 不在這裡明講的話手機上會變成 120px —— 比這一段刻意收到的 115 還高，
   * 而且是靜靜發生的。兩邊在手機上本來就該一樣。
   */
  .srg-root.srg-rhythm .boss-arena{--boss-arena-h:115px;height:115px}
  .boss-portrait{width:80px;height:98px;left:6%;bottom:4px}
  .boss-portrait.is-defeated img{transform:translateY(14px) scale(.85)}

  /* 玩家立繪縮小但顯示（位於右側） */
  .hero-portrait{width:80px;height:98px;right:8px;bottom:4px}
  /* 頭頂血條（手機更小） */
  .char-hp-wrap{width:100%;max-width:100px;min-width:0;box-sizing:border-box}
  /* 一列要塞下名稱＋數字，間距與內距都收到最小；名稱不夠寬就 ellipsis */
  .char-hp-head{gap:4px;padding:0 5px}
  .char-hp-wrap .char-name{font-size:9px;letter-spacing:0}
  .char-hp-bar{height:8px;box-sizing:border-box}
  .char-hp-num{font-size:8px}
  /* 隱藏飄浮音符（手機只保留少量） */
  .fx-note{font-size:18px}
  .fx-note:nth-child(n+3){display:none} /* 只留兩個 */
  /* 魔法光球縮小 */
  .fx-spell{width:18px;height:18px}

  /* 戰鬥訊息 */
  .boss-msg{padding:6px 10px;margin-bottom:8px;font-size:12px;min-height:32px}
  .boss-msg .speech small{font-size:10px}

  /* 答題卡片（樂譜為主體） */
  .boss-card{padding:10px 12px 12px;border-radius:14px}
  .boss-question-head{margin-bottom:6px}
  .boss-question-head .q-title{font-size:14px}
  .boss-question-head .q-prog{font-size:11px}
  .boss-question-head .q-prog b{font-size:12px}
  .boss-staff-wrap{padding:6px 6px 8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .boss-staff-wrap svg{width:100%;max-width:340px;height:auto;display:block}
  .boss-letters{gap:5px;margin-top:8px}
  .boss-key{padding:10px 0;font-size:16px;border-radius:10px}
  .boss-key small{font-size:9px}
  .boss-actions{margin-top:8px;gap:6px}
  .boss-btn{padding:8px 12px;font-size:12px;border-radius:10px}

  /* 浮字大小 */
  .float-dmg{font-size:18px}

  /* 結算 / 介紹 面板手機版 */
  .boss-result-body{padding:14px 16px 18px}
  .boss-result-body h2{font-size:20px}
  .boss-result-stats .stat .v{font-size:20px}
  .boss-intro-img{height:140px}
  .boss-intro-img .vs img,
  .boss-intro-img .vs .boss-intro-video{width:64px;height:64px}
  .boss-intro-img .vs .vs-mark{font-size:24px}
  .boss-intro-body{padding:30px 16px 18px}
  .boss-intro-body h2{font-size:20px}
  .boss-intro-body .lore{font-size:12px;line-height:1.5}
}

/* ============================================================
 * 平板（641–1024px）— 介於手機與桌機之間的中介 layout
 * 重點：魔王舞台放大、樂譜放大、按鈕排兩列、字體放大
 * ============================================================ */
@media (min-width:641px) and (max-width:1024px){
  /* 頁首列中等 */
  .boss-topbar{padding:8px 14px;margin-bottom:10px;gap:14px}
  .boss-topbar .boss-title{font-size:19px}
  .boss-topbar .boss-title small{font-size:12px;margin-top:1px}
  .boss-topbar .boss-back{padding:6px 12px;font-size:13px}

  /* HUD */
  .boss-hud{padding:10px 14px;gap:14px;margin-bottom:8px;border-radius:14px}
  .boss-stat-block{min-width:0;width:100%;flex-direction:row;gap:14px}
  .boss-stat-row{font-size:13px;gap:16px;width:100%;justify-content:space-between}
  .boss-stat-row span b{font-size:15px}

  /* 主舞台（中等）。立繪＋血條比舞台矮：180 → 152 + 下緣 6。 */
  .boss-arena{height:180px;border-radius:14px;margin-bottom:8px}
  .boss-portrait{width:130px;height:152px;left:4%;bottom:6px}
  .boss-portrait.is-defeated img{transform:translateY(24px) scale(.85)}

  /* 玩家立繪（中等） */
  .hero-portrait{width:95px;height:134px;right:10px;bottom:6px}
  /* 頭頂血條（平板中等） */
  .char-hp-wrap{width:90%;max-width:140px;min-width:0;box-sizing:border-box}
  .char-hp-wrap .char-name{font-size:11px}
  .char-hp-bar{height:10px}
  .char-hp-num{font-size:10px}
  .fx-note{font-size:26px}
  .fx-spell{width:28px;height:28px}

  /* 戰鬥訊息 */
  .boss-msg{padding:8px 14px;margin-bottom:10px;font-size:14px;min-height:38px}
  .boss-msg .speech small{font-size:11px}

  /* 答題卡片 */
  .boss-card{padding:14px 18px 16px;border-radius:16px}
  .boss-question-head{margin-bottom:8px}
  .boss-question-head .q-title{font-size:17px}
  .boss-question-head .q-prog{font-size:13px}
  .boss-question-head .q-prog b{font-size:14px}
  .boss-staff-wrap{padding:8px 8px 10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .boss-staff-wrap svg{width:100%;max-width:480px;height:auto;display:block}
  .boss-letters{
    gap:8px;margin-top:10px;
    display:grid;grid-template-columns:repeat(4,1fr);
  }
  .boss-key{padding:14px 0;font-size:19px;border-radius:12px}
  .boss-key small{font-size:11px}
  .boss-actions{margin-top:10px;gap:8px}
  .boss-btn{padding:10px 16px;font-size:13px;border-radius:12px}

  /* 浮字 */
  .float-dmg{font-size:22px}

  /* 結算 / 介紹 面板平板 */
  .boss-result-body{padding:18px 20px 22px}
  .boss-result-body h2{font-size:22px}
  .boss-result-stats .stat .v{font-size:22px}
  .boss-intro-img{height:160px}
  .boss-intro-img .vs img,
  .boss-intro-img .vs .boss-intro-video{width:72px;height:72px}
  .boss-intro-img .vs .vs-mark{font-size:26px}
  .boss-intro-body{padding:34px 22px 22px}
  .boss-intro-body h2{font-size:22px}
  .boss-intro-body .lore{font-size:13px;line-height:1.55}
  .boss-intro-body .hp-info{font-size:14px;padding:10px 16px}
  .boss-intro-body .hp-info b{font-size:20px}

  /* 平板移除魔王舞台背景的飄浮音符（避免干擾樂譜與角色） */
  .fx-note{display:none}
}

/* 手機版預設就套用單頁模式（不只是 max-width:640 才套） */

/*
 * 設計稿在這裡有一條 `body.battle-running .boss-intro-overlay{display:none}`，
 * **整合時拿掉**：battle-running 是那份稿自己的狀態 class，外掛裡沒有人加它。
 * 這裡的進關說明卡是按下按鈕才收掉的（見 boss.js 的 close()），不靠樣式藏。
 */


/*
 * 設計稿的「預覽模式」（body.preview-mobile 等四條固定 body 寬度）也拿掉了：
 * 那是它自己三裝置並排用的 ?force=W，外掛沒有這個參數。
 * 留著的風險是有一天別的地方加了同名 class，整站的 body 就被釘成 375px。
 */


/*
 * `.boss-desc`（貼在舞台下緣的魔王台詞）已經整個移除 —— 舞台在遊戲進行中
 * 只放會變動的戰況（血條、浮字、立繪階段），台詞留在開戰前的現身卡上。
 * 理由寫在 boss.js 的 mount()。樣式一併刪掉，不留沒有人用的規則。
 */

/* ---------- 減少動態（prefers-reduced-motion） ----------
 *
 * 光球是**純裝飾**：它說的事情（誰打了誰、扣了多少）血條與浮字都各講了一次，
 * 所以這裡整顆拿掉是安全的。boss.js 偵測到同一個設定時也不會再等飛行時間，
 * 扣血與音效照樣即時發生 —— 關掉的只有那段橫越畫面的位移。
 *
 * 受擊震動與施法姿勢一起收掉（那是最容易讓人不舒服的兩個），
 * 立繪切換、白閃與血條長度變化保留：那些是戰況本身。
 */
@media (prefers-reduced-motion:reduce){
  .fx-spell,.fx-spell.is-fire,.fx-spell.is-dark{display:none}
  /*
   * 待機浮動是**純裝飾**（它不說明任何戰況），而且是唯一一個「從頭跑到尾
   * 都不會停」的動畫 —— 對前庭敏感的人來說，持續的循環比一次性的震動更難受。
   * 這裡整組拿掉，立繪回到靜止，其餘（血條、浮字、換階段）不受影響。
   * 掛在盒子上，所以這裡也要對著盒子關（對 img 下 animation:none 沒有用）。
   */
  .boss-portrait,
  .hero-portrait{animation:none}
  .boss-portrait.is-hit img,
  .boss-portrait.is-attacking img,
  .hero-portrait.is-hit img,
  .hero-portrait.is-hurt img,
  .hero-portrait.is-casting img{animation:none}
  .float-dmg{animation:floatDmgStill 1.1s ease-out forwards}
  @keyframes floatDmgStill{
    0%{opacity:0}
    15%,70%{opacity:1}
    100%{opacity:0}
  }
}