/* ================================================================ WOG SPA — 邊境據點戰棋盤（v5.1） ---------------------------------------------------------------- 由 spa-fort-board.js 的 ensureStyle() 行內字串抽出（keep-files-small）。 分區：版面 / 戰場底＋地形 / 格位標示 / 單位 token / 動畫 FX / 底部操作。 動畫分層（改動時務必守住）： .ftb-u 的 transform → 專屬「攻擊衝撞（lunge）」同 .ftb-shake，由 JS inline 控制 .ftb-av 的 animation → 待機微動 / 選中脈衝 / 陣亡倒下 / 增援落場 兩層分開先唔會互相蓋（同一元素 animation 同 inline transform 會打架）。 堆疊分層 z-index（2026-08-07 加，改之前睇清楚）： 0 ~ 2 .ftb-cell 同格位標示（mv / atk / sel / thr） 3 ~ 3+h .ftb-u 單位 —— **由 JS 動態寫入 `3 + y`**（unitCss）， h 係網格高（fort_grid_h，現時 12）→ 實際上限 15。 等距模式要靠佢做前後遮擋，唔可以改返固定值。 20 .ftb-dmg 攻擊格嘅預估傷害標籤 25 .ftb-proj 投射物 26 .ftb-hitfx 命中光暈 30 .ftb-flo 傷害飄字（最上：打咗幾多係最緊要嘅資訊） ⚠ 任何要蓋喺單位之上嘅元素，z-index 一定要大過 `3 + fort_grid_h`。 呢四個原本係 6 / 7 / 7 / 9，單位加咗動態 z-index 之後就會被 y 大嘅單位遮住 —— 實際踩過：飄字 9 被第 6 行之後嘅單位蓋走，玩家見到傷害數字缺一橛。 （.ftb-rng / .ftb-kind / .guarding::before 係 .ftb-u 嘅子元素， 而 .ftb-u 有 z-index 會開新 stacking context，所以佢哋唔受影響。） ⚠⚠ 上面成張 z-index 表**淨係喺平面模式有效**。 等距模式（.ftb.iso）嘅 .ftb-grid 有 transform-style: preserve-3d， 佢開一個 3D rendering context —— 入面嘅子元素改為按 3D 空間嘅實際 Z 深度 排序繪製，**z-index 直接被忽略**。單位 rotateX 企起身之後喺 3D 空間比貼地 嘅飄字更近鏡頭，所以就算 z-index 開到 30 都照樣被遮。 等距模式要靠 translateZ 分層（見下面 .ftb.iso 區塊）： 60px 預估標籤 · 70px 命中光暈 · 100px 傷害飄字 （單位企起身佔嘅 Z ＝ 單位高 × sin(--iso-x)：cell 36~64px 之下， 40deg 係 20~36px、46deg 係 23~41px、58deg 最壞去到 47px —— 所以最低嗰層 至少要 60 先有安全邊際。調大 --iso-x 之後記得重算呢條數。） 即係話呢兩套分層要一齊維護：加新浮動元素時，z-index 同 translateZ 都要俾。 ================================================================ */ /* ── 版面骨架 ── */ .ftb { display: flex; flex-direction: column; height: 100%; min-height: 0; } .ftb-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; font-size: 13px; color: #dfe3ea; flex: 0 0 auto; } .ftb-round { font-weight: 800; color: #ffce54; letter-spacing: .5px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); } /* 音效開關（音效全部係程序合成，冇音檔） */ .ftb-mute { border: none; background: rgba(255, 255, 255, .09); color: #dfe3ea; cursor: pointer; font-size: 13px; line-height: 1; padding: 4px 7px; border-radius: 7px; margin-right: 8px; } /* 固定核心 HP 條（城堡滾出畫面都睇到佢受傷） */ .ftb-core { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 4px 9px; margin: 0 2px 5px; border-radius: 9px; background: linear-gradient(135deg, rgba(202, 162, 74, .20), rgba(90, 72, 30, .24)); border: 1px solid rgba(217, 178, 74, .45); } .ftb-core-ico { font-size: 17px; line-height: 1; } .ftb-core-nm { font-size: 11px; color: #ffe2a0; font-weight: 800; flex: 0 0 auto; } .ftb-core-bar { flex: 1; height: 11px; background: rgba(0, 0, 0, .5); border-radius: 6px; overflow: hidden; } .ftb-core-hp { height: 100%; width: 100%; background: linear-gradient(90deg, #ffd870, #e0a020); border-radius: 6px; transition: width .3s ease; } .ftb-core-v { font-size: 10.5px; color: #ffe2a0; font-weight: 700; min-width: 78px; text-align: right; flex: 0 0 auto; } .ftb-wrap { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 10px 8px; text-align: center; -webkit-overflow-scrolling: touch; } /* ── 戰場底（做舊戰地：土褐徑向漸層 + 暗角 + 投影）── */ .ftb-grid { position: relative; display: inline-block; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 34px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 70px rgba(0, 0, 0, .55); background: radial-gradient(135% 105% at 50% 0%, #3c4a38, #2a3626 52%, #1b2316); } .ftb-cell { position: absolute; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .13); } .ftb-cell.c-a { background: rgba(255, 255, 255, .032); } .ftb-cell.c-b { background: rgba(0, 0, 0, .10); } .ftb-cell.zone-core { box-shadow: inset 0 0 16px rgba(217, 178, 74, .18); } /* 地形（立體化：林 / 丘 / 水 / 石 各有質感） */ .ftb-cell.ter1 { background: radial-gradient(circle at 50% 32%, #4d7e46, #2e5530); box-shadow: inset 0 2px 4px rgba(255, 255, 255, .13), inset 0 -3px 6px rgba(0, 0, 0, .38); } .ftb-cell.ter2 { background: linear-gradient(180deg, #bd9862, #795931); box-shadow: inset 0 3px 5px rgba(255, 255, 255, .20), inset 0 -4px 7px rgba(0, 0, 0, .42); } .ftb-cell.ter3 { background: linear-gradient(180deg, #3c7bca, #1f4d88); box-shadow: inset 0 0 10px rgba(130, 195, 255, .45); } .ftb-cell.ter4 { background: linear-gradient(180deg, #8d8d95, #52525a); box-shadow: inset 0 2px 4px rgba(255, 255, 255, .22), inset 0 -3px 5px rgba(0, 0, 0, .48); } .ftb-ter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; opacity: .72; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); } .ftb-cell.ter3 .ftb-ter { animation: ftb-wave 2.6s ease-in-out infinite; } @keyframes ftb-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } } .ftb-legend { flex: 0 0 auto; display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; font-size: 10.5px; color: #9aa3af; padding: 2px 4px; } /* ── 格位標示（移動 / 攻擊 / 選中 / 威脅）── */ .ftb-cell.mv { background: rgba(86, 170, 255, .30) !important; box-shadow: inset 0 0 0 1px rgba(120, 190, 255, .55); cursor: pointer; } .ftb-cell.atk { background: rgba(255, 86, 86, .32) !important; box-shadow: inset 0 0 0 1px rgba(255, 120, 120, .65); cursor: pointer; } .ftb-cell.sel { box-shadow: inset 0 0 0 2px #ffce54; } /* 威脅格＝敵人下回合可攻擊到嘅位置。斜紋疊喺底紋之上，唔搶走 mv/atk 嘅底色， 所以「藍底 + 紅斜紋」＝可以去但去到會捱打，正正係走位要睇嘅嘢。 */ .ftb-cell.thr::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(255, 66, 66, .30) 0 3px, transparent 3px 7px); } /* 攻擊格上嘅預估傷害標籤：唔使 tap 落去先知打幾多，一眼掃晒所有選項 */ .ftb-dmg { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); z-index: 20; font-size: 9.5px; font-weight: 900; line-height: 1; white-space: nowrap; pointer-events: none; padding: 1px 3px; border-radius: 5px; background: rgba(10, 10, 14, .82); color: #ffd24d; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); } .ftb-dmg.kill { background: rgba(20, 60, 32, .92); color: #7af09a; } /* ── 單位 token（圓形頭像 + 陣營光環 + 下方血條）── */ .ftb-u { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: left .26s cubic-bezier(.4, 1.1, .5, 1), top .26s cubic-bezier(.4, 1.1, .5, 1); z-index: 3; pointer-events: none; } .ftb-av { display: flex; align-items: center; justify-content: center; width: 66%; aspect-ratio: 1; border-radius: 50%; position: relative; overflow: hidden; background: radial-gradient(circle at 35% 28%, #3c4960, #222a38); box-shadow: 0 2px 7px rgba(0, 0, 0, .5); } /* 玩家頭像（英雄）：系統圖像係 38×64 直立立繪，cover 會裁走頭同腳（同 .sv-avatar 一樣嘅坑） → contain 保完整比例，padding 令四角縮入圓形 token 內。陣亡 ☠ ::after 同陣營光環照常疊於其上。 */ .ftb-av .ftb-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; border-radius: inherit; display: block; } .ftb-u.atkside .ftb-av { box-shadow: 0 0 0 2px #4fd17a, 0 2px 8px rgba(0, 0, 0, .5); } .ftb-u.defside .ftb-av { box-shadow: 0 0 0 2px #e2746a, 0 2px 8px rgba(0, 0, 0, .5); } .ftb-u.core .ftb-av { width: 80%; border-radius: 18%; background: radial-gradient(circle at 38% 28%, #6e561f, #3a2c10); box-shadow: 0 0 0 2px #d9b24a, 0 0 16px rgba(217, 178, 74, .55), 0 3px 10px rgba(0, 0, 0, .6); } .ftb-ic { line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); } .ftb-rng { position: absolute; top: -3px; right: -3px; font-size: 9px; font-weight: 800; line-height: 1; padding: 1px 3px; border-radius: 6px; z-index: 4; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); } .ftb-rng.r { background: #2a86c8; color: #fff; } .ftb-rng.m { background: #7a5a3a; color: #ffd9a8; } /* 單位來源角標（⚑ 陣營援軍 / 💰 傭兵）。擺左下：避開左上嘅防禦盾同右上嘅射程標記。 英雄有真實頭像、核心🏰、寵物🐾 本身已認得出，唔使角標。 */ .ftb-kind { position: absolute; bottom: 8px; left: -3px; font-size: 9.5px; line-height: 1; z-index: 4; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)); } /* 血條 */ .ftb-hpbar { width: 84%; height: 4px; background: rgba(0, 0, 0, .55); border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45); } .ftb-hp { height: 100%; width: 100%; border-radius: 3px; transition: width .3s ease; } .ftb-hp.a { background: linear-gradient(90deg, #7af09a, #2fb35a); } .ftb-hp.d { background: linear-gradient(90deg, #ff8a6a, #d23218); } .ftb-hp.core { background: linear-gradient(90deg, #ffd870, #e0a020); } /* 未上場（分波增援）：完全唔顯示，落場時先由 JS 除去此 class */ .ftb-u.hidden { display: none; } /* ══════════════════════════════════════════════════════════════════ 等距（2.5D）模式 — 2026-08-07 原型 ------------------------------------------------------------------ 只喺根元素 .ftb 有 .iso class 先生效；除咗 class 就係原本嘅平面版， 視覺完全一樣。切換掣喺標題列，選擇存 localStorage。 點解淨係改 CSS 就得： · 格仔同單位都係 position:absolute 用 left/top 定位喺 .ftb-grid 入面， transform 掛喺父層 .ftb-grid，子元素座標系唔變 → JS 定位碼零改動。 · 命中判定行 e.target.closest('.ftb-cell') + data-x/data-y（spa-fort-board.js:581-583）， 唔係靠像素座標反算 → 瀏覽器 hit-testing 自己跟住 3D transform 走， 斜視之後點落去仍然準。呢個係「真 3D transform」而唔係視覺 hack 先有嘅好處。 效能取態（user 2026-08-07 定調：WOG 係文字類 game，唔係畫面豐富嘅動態 game）： 每個單位淨係兩層合成 —— 本體 + 腳下光圈。刻意唔加投影層、唔加額外循環動畫 （選中脈衝已經有 .ftb-u.now .ftb-av 嘅 ftb-pulse，唔使再疊）。 等距本身係一次性 transform，唔會每幀重算。10 個單位 ≈ 20 層，同平面版差別極微。 ⚠ .ftb-u 嘅 transform 畀 spa-fort-fx.js 嘅衝撞位移用緊（inline style）。 為咗共存，fx 改成寫 --fx-shift 變數，transform 由 CSS 組合； 所以平面模式亦要讀 var(--fx-shift)。 ══════════════════════════════════════════════════════════════════ */ /* fx 衝撞位移（兩個模式共用；fx 未設變數時等於冇 transform） */ .ftb-u { transform: var(--fx-shift, none); } .ftb.iso { /* 俯視傾角：0deg = 完全平面，越大越貼地。手機直立 8×12 建議 40~52deg。 */ --iso-x: 40deg; /* 傾斜後視覺高度縮成 cos(--iso-x)，DOM 佔位卻不變 → 底部多出空白，呢個負 margin 收返。 改 --iso-x 記得一齊調（≈ (1 - cos θ) × 50%）： 35deg → -9% 40deg → -12% 46deg → -15% 52deg → -19% 58deg → -24% */ --iso-squash: -12%; } .ftb.iso .ftb-wrap { perspective: 1100px; perspective-origin: 50% 34%; } .ftb.iso .ftb-grid { transform: rotateX(var(--iso-x)); transform-origin: 50% 46%; transform-style: preserve-3d; margin-bottom: var(--iso-squash); /* 遠端（上方＝敵方核心區）壓暗做景深，近端保持光亮 */ box-shadow: 0 18px 44px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 60px 90px -30px rgba(0, 0, 0, .68); } /* 單位反向豎直（billboard）：抵消棋盤嘅 rotateX 令佢企返起身。 transform-origin 擺喺腳底，轉起身先唔會浮空。 */ .ftb.iso .ftb-u { transform: var(--fx-shift, translate(0, 0)) rotateX(calc(-1 * var(--iso-x))); transform-origin: 50% 92%; } /* 腳下光圈：再 rotateX 一次抵消上面嘅豎直，令佢躺返落地面 → 自然變橢圓。 用 currentColor 食返陣營色（JS 喺 unitCss 寫 color）。靜態，冇動畫。 ⚠ 一定要用 ::after 唔可以用 ::before —— .ftb-u.guarding::before 已經佔咗嚟出 🛡 圖示 （:217），而 .ftb.iso .ftb-u::before 特異性更高，會令防禦中嘅單位冇咗個盾。 一個元素得一個 ::before，呢種「偽元素撞車」唔會報錯，淨係靜靜咁少咗嘢。 */ .ftb.iso .ftb-u::after { content: ''; position: absolute; left: 50%; bottom: -10%; width: 104%; aspect-ratio: 1; z-index: -1; pointer-events: none; transform: translateX(-50%) rotateX(var(--iso-x)); transform-origin: 50% 100%; border-radius: 50%; background: radial-gradient(circle, transparent 46%, currentColor 54%, transparent 68%); opacity: .5; } .ftb.iso .ftb-u.core::after { opacity: .82; } .ftb.iso .ftb-u.now::after { opacity: .95; } /* 陣亡嘅 class 係 down 唔係 dead（spa-fort-board.js:294 / :479） */ .ftb.iso .ftb-u.down::after { opacity: 0; transition: opacity .4s ease; } /* 地形圖示、傷害預估標籤要企返起身，唔好貼地變扁 */ .ftb.iso .ftb-ter { transform: rotateX(calc(-1 * var(--iso-x))); transform-origin: 50% 80%; } .ftb.iso .ftb-cell.ter3 .ftb-ter { animation: none; } /* 水波 keyframes 用 transform，會覆蓋上面嗰行 */ .ftb.iso .ftb-dmg { transform: translateX(-50%) translateZ(60px) rotateX(calc(-1 * var(--iso-x))); transform-origin: 50% 100%; } /* 斜視之下越近鏡頭（y 越大）嘅單位要蓋住後面 → z-index 由 JS 按 y 寫入 unitCss */ /* ⚠ 震動類動畫喺等距模式要用專屬 keyframes（2026-08-07 修「攻擊時瞬間躺平」） ------------------------------------------------------------------ CSS 動畫嘅 transform 優先級高過一般宣告，所以任何掛喺 .ftb-u / .ftb-grid 而又用 transform 嘅 keyframes，都會成條蓋走等距嘅 rotateX： · .ftb-shake（受擊震動，board.js:243 加落 .ftb-u）→ 單位瞬間瞓返低 · .ftb-grid.quake（暴擊/核心受擊嘅鏡頭震）→ 成塊棋盤瞬間變返平面 解法係每一格 keyframe 都帶埋原本嘅旋轉。平面模式行原本嗰兩組，一個字都冇改。 ⚠ 日後再加任何掛喺呢兩個元素、又用 transform 嘅動畫，一律要補一組 -iso 版本， 否則同一個病會再犯。（.ftb-av 嗰批 idle/pulse/die/spawn 唔受影響 —— 佢哋喺子層。） */ .ftb.iso .ftb-shake { animation: ftb-shk-iso .3s; } @keyframes ftb-shk-iso { 0%, 100% { transform: translateX(0) rotateX(calc(-1 * var(--iso-x))); } 25% { transform: translateX(-3px) rotateX(calc(-1 * var(--iso-x))); } 75% { transform: translateX(3px) rotateX(calc(-1 * var(--iso-x))); } } .ftb.iso .ftb-grid.quake { animation: ftb-quake-iso .34s ease-out; } @keyframes ftb-quake-iso { 0%, 100% { transform: translate(0, 0) rotateX(var(--iso-x)); } 15% { transform: translate(-5px, 3px) rotateX(var(--iso-x)); } 35% { transform: translate(5px, -4px) rotateX(var(--iso-x)); } 55% { transform: translate(-4px, -2px) rotateX(var(--iso-x)); } 78% { transform: translate(3px, 3px) rotateX(var(--iso-x)); } } /* ⚠ 飄字／特效元素同樣要企返起身（2026-08-07 修「傷害值唔夠位顯示」） ------------------------------------------------------------------ fx 會 append 三種元素落 .ftb-grid，全部跟住棋盤傾斜： .ftb-flo（傷害飄字）· .ftb-hitfx（命中光暈）· .ftb-proj（投射物） 前兩者嘅 keyframes 用 transform，所以同震動嗰批一樣要出 -iso 版本， 否則字係躺喺地面（斜住），大數字更加睇唔清。 .ftb-proj 唔使補 —— 佢嘅 keyframes 冇 transform（位移行 inline）， 而且沿住地面飛正正就啱（箭矢／法術彈道）。 */ /* ⚠⚠ preserve-3d 令 z-index 完全失效 —— 呢個係等距模式最反直覺嘅一點。 .ftb.iso .ftb-grid 有 transform-style: preserve-3d，佢會開一個 3D rendering context， 入面嘅子元素改為**按 3D 空間嘅實際 Z 深度**排序繪製，z-index 直接被忽略。 所以平面版靠 z-index:30 抬高飄字係有效嘅（實測平面版顯示正常）， 一入等距版就完全冇作用 —— 單位 rotateX 企起身之後喺 3D 空間比貼地嘅飄字更近鏡頭， 於是照樣遮住傷害數字。 解法唔係再加 z-index，而係用 translateZ 將佢由棋盤表面「抬起嚟」。 Z 深度分配（單位企起身佔 0 ~ 約 40px，視乎 --iso-x 同格仔大細）： 50px 預估傷害標籤 70px 命中光暈 100px 傷害飄字 ⚠ translateZ 要排喺 rotateX **之前** —— 咁佢先係沿住棋盤法線（離開桌面）方向抬起， 排喺後面就會跟住旋轉後嘅座標系走，抬錯方向。 ⚠ perspective:1100px 之下 translateZ(100px) 會令元素視覺放大約 1.1 倍，屬可接受 （飄字本來就要顯眼）；如果日後覺得太大，調細 Z 值而唔好改 perspective。 */ .ftb.iso .ftb-flo { animation: ftb-flo-iso 1s forwards; } @keyframes ftb-flo-iso { 0% { opacity: 0; transform: translate(-50%, 4px) translateZ(100px) rotateX(calc(-1 * var(--iso-x))) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -4px) translateZ(100px) rotateX(calc(-1 * var(--iso-x))) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -30px) translateZ(100px) rotateX(calc(-1 * var(--iso-x))) scale(1); } } .ftb.iso .ftb-flo.crit { animation: ftb-flo-crit-iso 1.15s forwards; } @keyframes ftb-flo-crit-iso { 0% { opacity: 0; transform: translate(-50%, 6px) translateZ(100px) rotateX(calc(-1 * var(--iso-x))) scale(.6) rotate(-8deg); } 18% { opacity: 1; transform: translate(-50%, -8px) translateZ(100px) rotateX(calc(-1 * var(--iso-x))) scale(1.42) rotate(4deg); } 40% { transform: translate(-50%, -14px) translateZ(100px) rotateX(calc(-1 * var(--iso-x))) scale(1.12) rotate(-2deg); } 100% { opacity: 0; transform: translate(-50%, -42px) translateZ(100px) rotateX(calc(-1 * var(--iso-x))) scale(1) rotate(0); } } /* 命中光暈：企直＝正圓（打擊閃光）；唔補償就會變橢圓，似地面衝擊波多過似打中人 */ .ftb.iso .ftb-hitfx { animation: ftb-hitfx-iso .42s ease-out forwards; } @keyframes ftb-hitfx-iso { 0% { opacity: .95; transform: translateZ(70px) rotateX(calc(-1 * var(--iso-x))) scale(.3); } 100% { opacity: 0; transform: translateZ(70px) rotateX(calc(-1 * var(--iso-x))) scale(1.6); } } /* 飄字唔好畀棋盤邊界切走（user 回報「唔夠位顯示傷害值」）： .ftb-grid 本身有 overflow:hidden（配 border-radius 做圓角），最右／最左格嘅 傷害數字一長就會被裁。等距之下棋盤已經係斜嘅，圓角本來就睇唔出， 所以 iso 模式索性放開 —— 只有飄字會超出邊界，格仔同單位一律喺界內。 inset box-shadow（暗角）唔靠 overflow，照樣生效。 */ .ftb.iso .ftb-grid { overflow: visible; } /* 切換掣 */ .ftb-iso { background: none; border: 0; color: #9aa3af; font-size: 13px; cursor: pointer; padding: 0 4px; line-height: 1; } .ftb-iso.on { color: #d9b24a; } /* 待機微動（動畫掛喺 .ftb-av，令 .ftb-u 嘅 transform 留返畀衝撞／震動用） */ .ftb-u.atkside .ftb-av, .ftb-u.defside .ftb-av { animation: ftb-idle 2.9s ease-in-out infinite; } @keyframes ftb-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } /* 選中脈衝（蓋過 idle，屬有意設計：選中時改為呼吸光環） */ .ftb-u.now .ftb-av { animation: ftb-pulse 1s infinite; } @keyframes ftb-pulse { 0%, 100% { box-shadow: 0 0 0 2px #ffce54, 0 0 10px rgba(255, 206, 84, .55); } 50% { box-shadow: 0 0 0 3px #ffce54, 0 0 18px rgba(255, 206, 84, .9); } } /* 防禦姿態：藍光環 + 盾標記 */ .ftb-u.guarding .ftb-av { box-shadow: 0 0 0 2px #6ab8ff, 0 0 13px rgba(106, 184, 255, .75), 0 2px 8px rgba(0, 0, 0, .5) !important; } .ftb-u.guarding::before { content: '🛡'; position: absolute; top: -5px; left: -4px; font-size: 11px; z-index: 5; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); } /* 陣亡：倒下 → 灰化定格 */ .ftb-u.down { opacity: .34; filter: grayscale(1); transition: opacity .45s ease, filter .45s ease; } .ftb-u.down .ftb-av { animation: ftb-die .52s ease-in forwards; } .ftb-u.down .ftb-av::after { content: "☠"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .7em; color: #fff; } @keyframes ftb-die { 0% { transform: rotate(0) translateY(0); } 55% { transform: rotate(52deg) translateY(3px); } 100% { transform: rotate(74deg) translateY(9px); } } /* 增援落場 */ .ftb-u.spawning .ftb-av { animation: ftb-spawn .62s cubic-bezier(.3, 1.4, .5, 1); } @keyframes ftb-spawn { 0% { transform: scale(0) rotate(-170deg); opacity: 0; } 62% { transform: scale(1.22) rotate(9deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } /* ── FX：飛射物 / 飄字 / 命中爆光 / 震動 ── */ .ftb-proj { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; z-index: 25; pointer-events: none; transition: transform .19s linear; background: radial-gradient(circle, #fff, #ffce54); box-shadow: 0 0 7px #ffce54; } .ftb-proj.m { background: radial-gradient(circle, #fff, #b07fe8); box-shadow: 0 0 9px #b07fe8; } .ftb-flo { position: absolute; z-index: 30; font-weight: 900; pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .75); white-space: nowrap; animation: ftb-flo 1s forwards; } @keyframes ftb-flo { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -4px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -30px) scale(1); } } /* 暴擊飄字：更大位移 + 輕微旋轉，同普通傷害一眼分得出 */ .ftb-flo.crit { animation: ftb-flo-crit 1.15s forwards; } @keyframes ftb-flo-crit { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.6) rotate(-8deg); } 18% { opacity: 1; transform: translate(-50%, -8px) scale(1.42) rotate(4deg); } 40% { transform: translate(-50%, -14px) scale(1.12) rotate(-2deg); } 100% { opacity: 0; transform: translate(-50%, -42px) scale(1) rotate(0); } } .ftb-hitfx { position: absolute; z-index: 26; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 200, 80, .35) 48%, transparent 72%); animation: ftb-hitfx .42s ease-out forwards; } @keyframes ftb-hitfx { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } } .ftb-shake { animation: ftb-shk .3s; } @keyframes ftb-shk { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* 鏡頭震動：暴擊 / 核心受擊時成塊棋盤震（比單一 token 震有份量得多） */ .ftb-grid.quake { animation: ftb-quake .34s ease-out; } @keyframes ftb-quake { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-5px, 3px); } 35% { transform: translate(5px, -4px); } 55% { transform: translate(-4px, -2px); } 78% { transform: translate(3px, 3px); } } /* ── 傷害預覽條（手動 mode：唔好再令玩家盲打）── */ .ftb-prev { flex: 0 0 auto; margin: 0 4px 4px; padding: 6px 10px; border-radius: 9px; font-size: 11.5px; line-height: 1.65; background: linear-gradient(135deg, rgba(64, 32, 30, .58), rgba(30, 18, 18, .62)); border: 1px solid rgba(220, 110, 90, .45); color: #efdcd6; display: none; } .ftb-prev.on { display: block; } .ftb-prev b { color: #ffce54; font-size: 13.5px; } .ftb-prev .kill { color: #6fe08a; font-weight: 900; } .ftb-prev .risk { color: #ff8a6a; font-weight: 800; } .ftb-prev .dim { opacity: .68; } /* ── 底部操作 ── */ .ftb-hint { flex: 0 0 auto; text-align: center; font-size: 12px; color: #aeb4bd; padding: 3px; min-height: 18px; } /* 姿態指令列（選中我方單位時先出） */ .ftb-cmd { flex: 0 0 auto; display: none; gap: 6px; justify-content: center; padding: 0 4px 5px; } .ftb-cmd.on { display: flex; } .ftb-cmd button { padding: 7px 15px; border: none; border-radius: 8px; font-size: 12.5px; font-weight: 800; cursor: pointer; background: rgba(255, 255, 255, .1); color: #cfd4dd; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } .ftb-cmd button.gd { background: linear-gradient(135deg, #3f7fbf, #2a5a92); color: #fff; } .ftb-cmd button.wt { background: linear-gradient(135deg, #4a9a6a, #2f6d48); color: #fff; } .ftb-cmd button.on { background: linear-gradient(135deg, #c05050, #8a3030); color: #fff; } .ftb-cmd button[disabled] { opacity: .42; cursor: default; } .ftb-foot { flex: 0 0 auto; display: flex; gap: 8px; padding: 8px 4px; } .ftb-btn { flex: 1; border: none; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); } .ftb-btn.go { background: linear-gradient(135deg, #3aa6ff, #2563c9); color: #fff; } .ftb-btn.sec { background: rgba(255, 255, 255, .1); color: #cfd4dd; } /* ── 結算卡 ── */ .ftb-res { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: #e8eaed; padding: 20px; } .ftb-res-t { font-size: 30px; font-weight: 900; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); } .ftb-res-win { color: #ffce54; } .ftb-res-lose { color: #9aa3af; } .ftb-res-stat { font-size: 14px; color: #c3c8d0; } /* 減少動態偏好：關掉循環／裝飾動畫，保留位置變化（唔影響可玩性） */ @media (prefers-reduced-motion: reduce) { .ftb-u.atkside .ftb-av, .ftb-u.defside .ftb-av, .ftb-cell.ter3 .ftb-ter, .ftb-u.now .ftb-av { animation: none; } .ftb-grid.quake, .ftb-shake { animation: none; } /* 等距版嘅震動 keyframes 特異性較高（.ftb.iso .ftb-shake = 0,0,3,0）， 單靠上面嗰行 0,0,1,0 蓋唔住 → 要明確寫多次，否則開咗減少動態偏好嘅玩家 喺斜視角下照樣會震。停咗動畫之後 transform 自然退返去 .ftb.iso 嗰條規則， 單位仍然企得正。 */ .ftb.iso .ftb-grid.quake, .ftb.iso .ftb-shake { animation: none; } }