/* forest-bingo.css — 新卜森賓果：5×5 號碼卡＋搖獎機出球口（spec 2026-09-30-forest-art-bingo-fish-bacc §B.1、§B.5.2）
 * 場景圖 zoo-bingo-scene-v1.webp 只畫露露、卡板與搖獎機；卡板與出球口是平塗錨點（已補成深紫／暗黃銅），由 forest-bingo.js 蓋上。
 * 位置由 ForestBingo.sync() 依來源圖量測值給 host（px）：--bingo-x/-y/-w/-h＝號碼卡（含 PAD）；--bingo-cup-x/-y/-r＝出球口。
 *   括號裡的百分比只在 sync() 之前（首幀）用得到（附錄 C 暫定值在 390×844 換算）。
 * 注意：動畫只套在 HTML div 與最外層 <svg>。卡上的字是 SVG <text>（插畫，大字模式不放大）。
 * 注意：字級規則要在 forest-font-lg.css 補 ×2 覆寫（tools/__tests__/forest-font-css.test.js 會掃描本檔）。 */

/* ── 場景：story／contrast 用新場景 cover＋頂端；結尾卡沿用 forest.css 的角色總圖格 ── */
.story-game[data-game=bingo]{background:#2a1740}
.story-game[data-game=bingo] .game-color{background:linear-gradient(#1a0d2a59,transparent 26%,#2a174018 55%,#1f0f33dc 80%,#170a26f5)}
.story-game .bingo-picture,.contrast-scene .bingo-picture{background-image:url("assets/zoo-bingo-scene-v1.webp")!important;background-size:cover!important;background-position:center top!important;background-color:#2a1740}
.bingo-picture:before{display:none}

/* ── 號碼卡、蓋章、連線 ── */
.bingo-rig{position:absolute;inset:0;z-index:2;pointer-events:none}
.bingo-card{position:absolute;left:var(--bingo-x,33.2%);top:var(--bingo-y,29.8%);width:var(--bingo-w,58%);height:var(--bingo-h,30.4%)}
.bingo-sheet,.bingo-mark{position:absolute;inset:0;display:block;width:100%;height:100%}
.bingo-sheet{filter:drop-shadow(0 3px 5px #14082488)}
.bingo-mark{opacity:0}
.bingo-mark.is-on{opacity:1}
.bingo-daub{position:absolute;border-radius:50%;background:radial-gradient(circle,#FF5FA2cc 0 55%,#E0409Acc 70%,#E0409A00 72%);opacity:0}
.bingo-daub.is-on{opacity:.85}

/* ── 出球口與號碼球：球直徑＝2.3r，中心比出球口高 0.25r（看起來坐在杯口）；結尾卡的球壓在卡的右上角外側 ── */
.bingo-cup{position:absolute;left:calc(var(--bingo-cup-x,86.6%) - var(--bingo-cup-r,19px) * 1.15);top:calc(var(--bingo-cup-y,27%) - var(--bingo-cup-r,19px) * 1.4);width:calc(var(--bingo-cup-r,19px) * 2.3);height:calc(var(--bingo-cup-r,19px) * 2.3)}
.bingo-ball{position:absolute;inset:0;opacity:0;filter:drop-shadow(0 2px 3px #14082499)}
.bingo-ball svg{display:block;width:100%;height:100%}
.bingo-ball.is-badge{inset:auto;left:80%;top:-13%;width:30%;height:auto;aspect-ratio:1/1;opacity:1}

/* ── 觸控區（透明按鈕：卡＋出球口的聯集，≥ 44px）＋提示晶片（卡下緣＋12px，以卡中心置中；--bingo-hint-y 由 sync 量 prelude 決定，見 forest-bingo.js hintY）── */
.bingo-touch{position:absolute;z-index:6;left:var(--bingo-x,33.2%);top:min(var(--bingo-y,29.8%),calc(var(--bingo-cup-y,27%) - var(--bingo-cup-r,19px) * 1.4));width:calc(max(var(--bingo-x,33.2%) + var(--bingo-w,58%),var(--bingo-cup-x,86.6%) + var(--bingo-cup-r,19px) * 1.15) - var(--bingo-x,33.2%));bottom:calc(100% - var(--bingo-y,29.8%) - var(--bingo-h,30.4%));min-width:44px;min-height:44px;padding:0;border:0;border-radius:18px;background:transparent;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bingo-touch:focus-visible{outline:3px solid #fff0ab;outline-offset:6px}
.bingo-touch-hint{position:absolute;left:calc(var(--bingo-w,58%) / 2);top:calc(var(--bingo-hint-y,calc(var(--bingo-y,29.8%) + var(--bingo-h,30.4%) + 12px)) - min(var(--bingo-y,29.8%),calc(var(--bingo-cup-y,27%) - var(--bingo-cup-r,19px) * 1.4)));width:max-content;max-width:calc(100vw - 32px);padding:8px 15px;border:1px solid #ffd9f0;border-radius:18px;background:#3a1d5cec;box-shadow:0 5px 13px #14072299;color:#fff4f9;font-size:13px;font-weight:900;letter-spacing:.5px;line-height:1.35;text-align:center;transform:translateX(-50%);pointer-events:none}
.story-game .bingo-touch-hint{animation:bingoInvite 2.4s ease-in-out infinite}
@keyframes bingoInvite{50%{box-shadow:0 5px 13px #14072299,0 0 0 4px #ffd9f055,0 0 16px 4px #ff9fd0aa}}

/* ── 落定標籤（比照 .sicbo-result；卡下緣 14px、以卡中心置中）── */
.bingo-result{position:absolute;z-index:5;left:calc(var(--bingo-x,33.2%) + var(--bingo-w,58%) / 2);top:calc(var(--bingo-y,29.8%) + var(--bingo-h,30.4%) + 14px);display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:min(calc(100% - 32px),calc(var(--bingo-w,58%) + 40px));margin:0;padding:8px 15px;border:1px solid #ffd9f0;border-radius:18px;background:#3a1d5cec;box-shadow:0 5px 13px #14072299;color:#fff4f9;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 .bingo-result{opacity:1;transform:translate(-50%,0)}

/* ── 流程：卡對齊場景，舞台不做鏡頭運動；落定標籤先停，再由 .shifting 開始轉場（forest-app.js launchShow）── */
.story-game[data-game=bingo].playing .bingo-touch{opacity:0;pointer-events:none}
.story-game[data-game=bingo].playing .game-stage{animation:none!important}
.story-game[data-game=bingo].playing .path-shift{animation:none}
.story-game[data-game=bingo].shifting .path-shift{animation:pathShiftToShade 1.1s cubic-bezier(.22,.55,.2,1) both}
.contrast-scene .bingo-rig{opacity:.85}
html.forest-rm .story-game[data-game=bingo].playing .game-color{animation-duration:.01ms!important}