/* 牌桌字卡特效（dist/js/winfx.js）。移植自 win-fx-preview：類別名加上 wfx- 前綴，避免和遊戲裡的 .ring、.chip、.card 撞名。
   籌碼圖與 Cinzel 字型用 dist/assets 的原檔（fonts.css 已經載入 Cinzel），不內嵌 data URI。
   層級：在牌桌元素之上、在攤牌牌匾（.tv-showdown，z 14）與 HUD、行動列之下，牌匾上的名字與金額不會被擋住。 */
/* 飛行中的牌與籌碼（.tv-fx，原本 30）降到字卡之下：字卡 13、攤牌牌匾 14 在最上；HUD、操作列（20–26）仍在字卡之上、不被壓暗。 */
#table .tv-fx { z-index: 12; }
/* 全版字卡播放中：底池、下注籌碼與牌型標籤退暗，不壓在金額那行上（用 filter，不動它們自己的顯示 opacity）。 */
#table .tv-pot, #table .tv-bets, #table .tv-rank { transition: opacity .3s, filter .35s; }
#table.wfx-on .tv-pot, #table.wfx-on .tv-bets, #table.wfx-on .tv-rank { filter: brightness(.4) opacity(.3); }
.wfx { position: absolute; inset: 0; z-index: 13; pointer-events: none; overflow: hidden;
  --wfx-chip-red: url('../assets/chip-red.webp'); --wfx-chip-black: url('../assets/chip-black.webp'); --wfx-chip-green: url('../assets/chip-green.webp');
  --wfx-chip-blue: url('../assets/chip-blue.webp'); --wfx-chip-white: url('../assets/chip-white.webp'); }
.wfx-cam { position: absolute; inset: 0; }
/* 世界褪色：以 backdrop-filter 讓下面的牌桌去飽和（ALL IN）或褪成黑白（BUSTED），不動牌桌本身的元素 */
.wfx-grade { position: absolute; inset: 0; opacity: 0; -webkit-backdrop-filter: saturate(.35) brightness(.72); backdrop-filter: saturate(.35) brightness(.72); }
.wfx.bust .wfx-grade { -webkit-backdrop-filter: saturate(0) brightness(.55); backdrop-filter: saturate(0) brightness(.55); }
.wfx-dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 60% 45% at 50% 48%, rgba(0,0,0,.25), rgba(0,0,0,.78)); }
.wfx-pulse { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 40%, rgba(160,0,20,.6) 100%); }
.wfx-banner { position: absolute; inset: 0; }
.wfx-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.wfx-flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 40%), rgba(255,244,220,.95), color-mix(in srgb, var(--c2) 45%, transparent) 22%, transparent 60%); }
.wfx-bar { position: absolute; left: 0; right: 0; height: 96px; background: #000; transform: scaleY(0); }
.wfx-bar.top { top: 0; transform-origin: top; border-bottom: 1px solid rgba(200,160,90,.35); }
.wfx-bar.bot { bottom: 0; transform-origin: bottom; border-top: 1px solid rgba(200,160,90,.35); }

/* 配色：c1 亮部、c2 外光暈、s 星芒、g 字面漸層 */
.wfx-t-gold    { --c1: #ffe6ae; --c2: #d99a3c; --s: #ffe2a0; --stroke: rgba(255,236,190,.55); --g: linear-gradient(180deg, #fffdf5 0%, #fff0c8 40%, #f0c46e 70%, #c98a32 100%); }
.wfx-t-orange  { --c1: #ffc070; --c2: #ff5e10; --s: #ff5a26; --stroke: rgba(255,214,150,.6);  --g: linear-gradient(180deg, #ffffff 0%, #fff4dc 36%, #ffc05a 62%, #ff6d12 100%); }
.wfx-t-crimson { --c1: #ff9474; --c2: #e8102c; --s: #ff3040; --stroke: rgba(255,190,170,.6);  --g: linear-gradient(180deg, #ffffff 0%, #ffe2d6 34%, #ff7a58 64%, #d0102a 100%); }
.wfx-t-steel   { --c1: #ff7a5a; --c2: #c0001c; --s: #ff4a3a; --stroke: rgba(255,150,130,.65); --g: linear-gradient(180deg, #ffffff 0%, #eeeae6 28%, #9c948e 50%, #2e2624 52%, #6a5652 74%, #e0302a 100%); }
.wfx-t-ash     { --c1: #d8dde2; --c2: #56606a; --s: #cfd8e0; --stroke: rgba(230,236,240,.45); --g: linear-gradient(180deg, #ffffff 0%, #e4e8ec 40%, #9aa3ab 70%, #5c646c 100%); }
.wfx-t-ash .wfx-aura { opacity: .35; }
.wfx-t-ash .wfx-bloom { opacity: .5; }
.wfx-t-white   { --c1: #fff3cf; --c2: #ffb035; --s: #ffe7a0; --stroke: rgba(255,255,255,.7);  --g: linear-gradient(180deg, #ffffff 0%, #fffdf0 45%, #ffe6a0 70%, #ffb440 100%); }

/* 字卡：.wfx-w 的原點就是字的視覺中心；每個字母一格，格內疊著光暈、字面、掃光各層，方便逐字演出 */
.wfx-w { position: absolute; transform-origin: 0 0; }
.wfx-skew { display: flex; align-items: baseline; white-space: nowrap; transform: translate(-50%, -50%) skewX(-11deg); }
.wfx-ch { display: inline-grid; margin-right: .02em; }
.wfx-L { grid-area: 1 / 1; font-family: 'Cinzel', serif; font-weight: 800; line-height: 1; white-space: nowrap; }
.wfx-cap { font-size: 1.3em; }
.wfx-aura  { color: var(--c2); filter: blur(46px); opacity: .7; }
.wfx-bloom { color: var(--c2); filter: blur(20px); opacity: .95; }
.wfx-halo  { color: var(--c1); filter: blur(5px); opacity: .9; }
.wfx-hot   { color: #fff; filter: blur(1.5px); opacity: 0; }
.wfx-face  { background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.2px var(--stroke); filter: drop-shadow(0 2px 0 rgba(60,10,0,.55)); }
.wfx-sweep { background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%) 140% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.wfx-ghost { color: var(--c1); filter: url(#wfx-hb); letter-spacing: .02em; }
.wfx-split .wfx-L { letter-spacing: .02em; mix-blend-mode: screen; }
.wfx-split.r .wfx-L { color: #ff2448; }
.wfx-split.c .wfx-L { color: #28e6ff; }
/* 座位旁的小 NICE：光暈縮小，免得蓋到座位 */
.wfx-cam.small .wfx-aura { filter: blur(18px); opacity: .5; }
.wfx-cam.small .wfx-bloom { filter: blur(8px); }
.wfx-cam.small .wfx-halo { filter: blur(2.5px); }
/* ALL IN：推入的籌碼 */
.wfx-chip { position: absolute; left: 0; top: 0; width: 58px; height: 58px; background: center / contain no-repeat; filter: drop-shadow(0 5px 5px rgba(0,0,0,.65)); }
.wfx-col { position: absolute; }
.wfx-col .wfx-wake { position: absolute; height: 260px; border-radius: 30px; opacity: 0; filter: blur(6px);
  background: linear-gradient(to bottom, rgba(255,210,160,.45), rgba(255,150,90,.14) 45%, transparent); }
/* EXCELLENT：光暈被熱浪扭曲（低效能裝置或簡化動畫時不用） */
.wfx-heat .wfx-aura  { filter: blur(46px) url(#wfx-heat); }
.wfx-heat .wfx-bloom { filter: blur(20px) url(#wfx-heat); }
.wfx-heat .wfx-halo  { filter: blur(5px) url(#wfx-heat); }

.wfx-ring { position: absolute; width: 640px; height: 150px; border-radius: 50%; border: 1.5px solid var(--c1); opacity: 0; filter: blur(1.5px);
  box-shadow: 0 0 24px var(--c2), inset 0 0 24px var(--c2); }
.wfx-pool { position: absolute; width: 1300px; height: 620px; border-radius: 50%; opacity: 0; mix-blend-mode: screen; filter: blur(10px);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c2) 45%, transparent) 0%, color-mix(in srgb, var(--c2) 16%, transparent) 38%, transparent 70%); }
.wfx-streak { position: absolute; width: 1500px; height: 120px; opacity: 0; mix-blend-mode: screen; }
.wfx-streak::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c1) 60%, transparent) 25%, #fff 50%, color-mix(in srgb, var(--c1) 60%, transparent) 75%, transparent); }
.wfx-streak::after { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 26px; transform: translateY(-50%); filter: blur(6px);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c2) 50%, transparent), transparent 70%); }
.wfx-rule { position: absolute; height: 1.5px; opacity: 0; box-shadow: 0 0 8px var(--c2);
  background: linear-gradient(90deg, transparent, var(--c1) 25%, #fff 50%, var(--c1) 75%, transparent); }
.wfx-rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg);
  background: #fff8e6; box-shadow: 0 0 10px var(--c1); }
.wfx-pen { position: absolute; width: 4px; border-radius: 4px; opacity: 0;
  background: linear-gradient(180deg, transparent, #fff 20%, #fff 80%, transparent); box-shadow: 0 0 12px #fff, 0 0 30px var(--c1), 0 0 60px var(--c2); }
.wfx-pen::before { content: ''; position: absolute; left: 50%; top: 50%; width: 460px; height: 2px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); }
.wfx-pen::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.95), color-mix(in srgb, var(--c1) 40%, transparent) 35%, transparent 70%); }

/* 星芒：cross 大十字、glint 金屬反光小星、prism 稜鏡八芒 */
.wfx-star { position: absolute; width: 0; height: 0; }
.wfx-star i { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.wfx-star .glow { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--s) 55%, transparent), transparent 65%); }
.wfx-star .h { width: 340px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--s) 30%, #fff 50%, var(--s) 70%, transparent); box-shadow: 0 0 8px var(--s); }
.wfx-star .v { width: 3px; height: 190px; border-radius: 3px; background: linear-gradient(180deg, transparent, var(--s) 30%, #fff 50%, var(--s) 70%, transparent); box-shadow: 0 0 8px var(--s); }
.wfx-star .d1, .wfx-star .d2 { width: 90px; height: 2px; background: linear-gradient(90deg, transparent, #fff 50%, transparent); opacity: .8; }
.wfx-star .d1 { transform: translate(-50%, -50%) rotate(45deg); }
.wfx-star .d2 { transform: translate(-50%, -50%) rotate(-45deg); }
.wfx-star .core { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #fff 16%, var(--s) 42%, transparent 70%); }
.wfx-star.wfx-glint .glow { width: 50px; height: 50px; }
.wfx-star.wfx-glint .h { width: 90px; height: 2px; }
.wfx-star.wfx-glint .v { width: 2px; height: 64px; }
.wfx-star.wfx-glint .d1, .wfx-star.wfx-glint .d2 { display: none; }
.wfx-star.wfx-glint .core { width: 12px; height: 12px; }
.wfx-star.wfx-prism .h { background: linear-gradient(90deg, transparent, #8fd8ff 22%, #fff 50%, #ffb6e6 78%, transparent); box-shadow: 0 0 10px rgba(255,240,210,.8); }
.wfx-star.wfx-prism .v { background: linear-gradient(180deg, transparent, #b8f0c8 22%, #fff 50%, #ffd49a 78%, transparent); box-shadow: 0 0 10px rgba(255,240,210,.8); }
.wfx-star.wfx-prism .d1, .wfx-star.wfx-prism .d2 { width: 150px; opacity: .9; }

/* 金額：標籤是中英文（底池、全下獲勝、牌型名…），中文退回 Noto Serif TC */
.wfx-amount { position: absolute; display: flex; gap: 14px; align-items: baseline; font-family: 'Cinzel', 'Noto Serif TC', serif; white-space: nowrap; opacity: 0; }
.wfx-amount em { font-style: normal; font-size: 19px; letter-spacing: .3em; color: #cdb58a; text-shadow: 0 2px 4px #000; }
.wfx-amount b { font-size: 48px; font-weight: 700; background: linear-gradient(#fff6dc, #e8b760); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px var(--c2)); }
.wfx-cam.small .wfx-amount { gap: 8px; }
.wfx-cam.small .wfx-amount em { font-size: 13px; letter-spacing: .2em; }
.wfx-cam.small .wfx-amount b { font-size: 26px; }
body.portrait .wfx-amount em { font-size: 24px; }
body.portrait .wfx-amount b { font-size: 56px; }
body.portrait .wfx-cam.small .wfx-amount em { font-size: 18px; }
body.portrait .wfx-cam.small .wfx-amount b { font-size: 34px; }
body.portrait .wfx-bar { height: 150px; }

/* 低效能／簡化：模糊光暈縮小，減少合成負擔 */
.wfx.lite .wfx-aura { filter: blur(24px); }
.wfx.lite .wfx-bloom { filter: blur(12px); }

/* 試玩面板（?fxtest） */
.fx-test { position: absolute; left: 26px; top: 84px; z-index: 40; display: grid; grid-template-columns: repeat(2, auto); gap: 6px; padding: 10px; pointer-events: auto;
  background: #0d0b09e6; border: 1px solid #6e5634; border-radius: 6px; box-shadow: 0 8px 20px #000b; }
.fx-test b { grid-column: 1 / -1; font: 600 12px var(--caps); letter-spacing: .2em; color: #cdb58a; }
.fx-test button { padding: 6px 10px; font: 600 13px var(--caps); letter-spacing: .06em; color: #f0dcb2; background: linear-gradient(#1f1812, #0c0a08); border: 1px solid #6e5634; border-radius: 4px; }
.fx-test button:hover { border-color: #c79a55; }
body.portrait .fx-test { top: 90px; left: 20px; }
body.portrait .fx-test button { font-size: 18px; padding: 10px 14px; }