/* forest-fishing.css — 新卜森打魚機：俯視機台的海底螢幕＋四座砲台＋卡通魚（spec 2026-09-30-forest-art-bingo-fish-bacc §B.2、§B.5.2）
 * 場景圖 zoo-fishing-scene-v1.webp 只畫波波與機台；整片螢幕是平塗錨點（已補成深海藍），由 forest-fishing.js 的螢幕蓋上。
 * 位置由 ForestFishing.sync() 依來源圖量測值給 host 的 --fishing-x/-y/-w/-h（螢幕，含 PAD，px）；
 *   螢幕裡的魚、網、砲台都用螢幕的百分比（模組依長寬比算好），括號裡的百分比只在 sync() 之前（首幀）用得到。
 * 注意：動畫只套在 HTML div 與最外層 <svg>；待機動畫只在 .story-game／.contrast-scene，html.forest-rm 由全域規則停掉。
 * 注意：字級規則要在 forest-font-lg.css 補 ×2 覆寫（tools/__tests__/forest-font-css.test.js 會掃描本檔）。 */

/* ── 場景 ── */
.story-game[data-game=fishing]{background:#0a2f40}
.story-game[data-game=fishing] .game-color{background:linear-gradient(#06202d59,transparent 26%,#0a2f4018 55%,#07263adc 80%,#051c2af5)}
.story-game .fishing-picture,.contrast-scene .fishing-picture{background-image:url("assets/zoo-fishing-scene-v1.webp")!important;background-size:cover!important;background-position:center top!important;background-color:#0a2f40}
.fishing-picture:before{display:none}

/* ── 螢幕（外框深海藍、內側金線畫在最上層；圓角＝min(寬, 高)×6%）── */
.fishing-rig{position:absolute;inset:0;z-index:2;pointer-events:none}
.fishing-screen{position:absolute;left:var(--fishing-x,9.4%);top:var(--fishing-y,24.3%);width:var(--fishing-w,81.2%);height:var(--fishing-h,27.3%);overflow:hidden;border-radius:calc(min(var(--fishing-w,316px),var(--fishing-h,230px)) * .06);background:#083A5C;box-shadow:0 0 0 3px #0A2A44,0 4px 10px #041a2a99}
.fishing-screen:after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 2px #E8C46A;pointer-events:none}
.fishing-sea{position:absolute;inset:0;display:block;width:100%;height:100%}

/* ── 魚：外層位置＋WAAPI；.fishing-body 待機擺動；最外層 svg 依 --dir 左右翻 ── */
.fishing-fish{position:absolute;z-index:1}
.fishing-body{width:100%;height:100%}
.fishing-kind{display:block;width:100%;height:100%;transform:scaleX(var(--dir,1))}
.fishing-fish.is-gold{--swim:15%}
.story-game .fishing-body,.contrast-scene .fishing-body{animation:fishSway var(--sway,3.6s) ease-in-out infinite alternate}
.story-game.playing .fishing-fish.is-caught .fishing-body{animation-play-state:paused}
.story-game .fishing-fish.is-gold .fishing-kind,.contrast-scene .fishing-fish.is-gold .fishing-kind{animation:goldShimmer 1.6s ease-in-out infinite alternate}
.story-game.landed .fishing-fish.is-caught,.card-hero .fishing-fish.is-caught{filter:drop-shadow(0 0 3px #ffe066) drop-shadow(0 0 7px #ffd84daa)}
@keyframes fishSway{from{transform:translateX(calc(var(--swim,25%) * -1)) rotate(-3deg)}to{transform:translateX(var(--swim,25%)) rotate(3deg)}}
@keyframes goldShimmer{to{filter:brightness(1.25) drop-shadow(0 0 4px #ffe066)}}

/* ── 網、泡泡彈、金色光點 ── */
.fishing-net,.fishing-sparkle{position:absolute;z-index:2;aspect-ratio:1/1;opacity:0}
.fishing-net.is-on,.fishing-sparkle.is-on{opacity:1}
.fishing-shot{position:absolute;z-index:3;width:5%;aspect-ratio:1/1;opacity:0;transform:translate(-50%,-50%)}
.fishing-mesh,.fishing-bubble,.fishing-glint{display:block;width:100%;height:100%}

/* ── 砲台：底座半圓（中心在螢幕邊緣）＋砲管（transform-origin 在底座中心）；上緣兩座轉 180° ── */
.fishing-cannon{position:absolute;z-index:4;width:12%;aspect-ratio:1/1}
.fishing-cannon.is-far{transform:rotate(180deg)}
.fishing-base,.fishing-gun{display:block;width:100%;height:100%}
.fishing-base{position:absolute;inset:0}
.fishing-barrel{position:absolute;left:31.25%;bottom:50%;width:37.5%;height:83.33%;transform-origin:50% 100%}
.story-game .fishing-cannon.is-active .fishing-base{animation:cannonInvite 2.4s ease-in-out infinite}
.story-game.playing .fishing-cannon.is-active .fishing-base{animation:none}
@keyframes cannonInvite{50%{filter:drop-shadow(0 0 5px #fff7b0) drop-shadow(0 0 11px #ffe488)}}

/* ── 觸控區（透明按鈕：整面螢幕，≥ 44px）＋提示晶片（螢幕下緣＋12px 置中；--fishing-hint-y 由 sync 量 prelude 決定）── */
.fishing-touch{position:absolute;z-index:6;left:var(--fishing-x,9.4%);top:var(--fishing-y,24.3%);width:var(--fishing-w,81.2%);height:var(--fishing-h,27.3%);min-width:44px;min-height:44px;padding:0;border:0;border-radius:14px;background:transparent;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fishing-touch:focus-visible{outline:3px solid #fff0ab;outline-offset:6px}
.fishing-touch-hint{position:absolute;left:50%;top:calc(var(--fishing-hint-y,calc(var(--fishing-y,24.3%) + var(--fishing-h,27.3%) + 12px)) - var(--fishing-y,24.3%));width:max-content;max-width:calc(100vw - 32px);padding:8px 15px;border:1px solid #bff6ff;border-radius:18px;background:#0b4a57ec;box-shadow:0 5px 13px #052d3999;color:#f0fdff;font-size:13px;font-weight:900;letter-spacing:.5px;line-height:1.35;text-align:center;transform:translateX(-50%);pointer-events:none}

/* ── 落定標籤（螢幕下緣 14px、以螢幕中心置中）── */
.fishing-result{position:absolute;z-index:5;left:calc(var(--fishing-x,9.4%) + var(--fishing-w,81.2%) / 2);top:calc(var(--fishing-y,24.3%) + var(--fishing-h,27.3%) + 14px);display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:min(calc(100% - 32px),calc(var(--fishing-w,81.2%) + 40px));margin:0;padding:8px 15px;border:1px solid #bff6ff;border-radius:18px;background:#0b4a57ec;box-shadow:0 5px 13px #052d3999;color:#f0fdff;font-size:15px;font-weight:900;letter-spacing:.5px;text-align:center;text-wrap:balance;word-break:keep-all;opacity:0;transform:translate(-50%,8px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.story-game.landed .fishing-result{opacity:1;transform:translate(-50%,0)}

/* ── 流程 ── */
.story-game[data-game=fishing].playing .fishing-touch{opacity:0;pointer-events:none}
.story-game[data-game=fishing].playing .game-stage{animation:none!important}
.story-game[data-game=fishing].playing .path-shift{animation:none}
.story-game[data-game=fishing].shifting .path-shift{animation:pathShiftToShade 1.1s cubic-bezier(.22,.55,.2,1) both}
.contrast-scene .fishing-rig{opacity:.85}
html.forest-rm .story-game[data-game=fishing].playing .game-color{animation-duration:.01ms!important}