/* forest-slot.css — 新卜森老虎機（拉霸機）：三個直立轉軸＋右側拉桿（spec 2026-09-27-forest-slot-boost §C.2、§C.8）
 * 場景圖 zoo-slot-scene-v11.webp 只畫阿修與森林拉霸機；三個窗口與拉桿座是平塗錨點（已補成深木色／暗黃銅），
 * 由 forest-slot.js 的轉軸與拉桿蓋上。位置由 ForestSlot.sync() 依來源圖量測值給 host 的 --slot-*（px）：
 *   --slot-x／--slot-y／--slot-w／--slot-h＝三個窗口的聯集框；--slot-hub-x／-y／-r＝拉桿座；--slot-lever-len＝握把到座中心。
 * 拉桿姿勢由 ForestSlot.setPull() 給 --slot-s（1＝直立、−0.55＝拉到底朝鏡頭）與 --slot-ks（握把遠近縮放）；
 *   播放時改由 WAAPI 直接動 transform（.slot-pulling 關掉 transition：transition 的層級高於 WAAPI）。
 * 🔴 動畫只套在 HTML div 與最外層 <svg>／<img>（Safari 的 SVG transform-origin 問題）。
 * 🔴 字級規則要在 forest-font-lg.css 補 ×2 覆寫（tools/__tests__/forest-font-css.test.js 會掃描本檔）。 */

/* ── 場景圖：story／contrast 用 cover＋頂端；結尾卡用 cover＋ForestSlot.sync() 量出的位置 ──
 * 結尾卡：--slot-card-y＝背景 y（px），--slot-card-cy＝轉軸中心（heroFloat 以它為中心放大，轉軸不被裁、不壓到標籤）；
 * 括號裡的 62%／22% 只在 sync() 之前（首幀）用得到。 */
.story-game .slot-picture,.contrast-scene .slot-picture,.card-hero .slot-picture{background-image:url("assets/zoo-slot-scene-v11.webp")!important;background-size:cover!important;background-position:center top!important;background-color:#0f3d3d}
.card-hero .slot-picture{background-position:center var(--slot-card-y,62%)!important;transform-origin:50% var(--slot-card-cy,22%)}
.slot-picture:before{display:none}

/* ── 轉軸 ── */
.slot-rig{position:absolute;inset:0;z-index:2;pointer-events:none}
.slot-reels{position:absolute;left:var(--slot-x,30.9%);top:var(--slot-y,37.2%);width:var(--slot-w,46.9%);height:var(--slot-h,11.2%)}
.slot-reel{position:absolute;overflow:hidden;border-radius:7px;background:#FFF6E0;box-shadow:0 0 0 1.5px #b8862f,0 2px 4px #2a150a66}
.slot-strip{position:absolute;left:0;top:0;width:100%;height:calc(100% * 56 / 1.7);display:flex;flex-direction:column;backface-visibility:hidden;will-change:transform}
.slot-cell{position:relative;flex:1 1 0;min-height:0;display:grid;place-items:center}
.slot-sym{display:block;width:auto;height:86%;max-width:92%;aspect-ratio:1/1;object-fit:contain;-webkit-user-drag:none;user-select:none}
.slot-gloss{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(#2a150a99 0%,#2a150a1a 22%,transparent 34%,#ffffff33 46%,transparent 58%,transparent 68%,#2a150a1a 80%,#2a150a99 100%);box-shadow:inset 0 0 0 2px #8a6322,inset 4px 0 7px #2a150a40,inset -4px 0 7px #2a150a40}
.slot-payline{position:absolute;left:-1.5%;right:-1.5%;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#d6282870;pointer-events:none}

/* 連線：落定後中線閃 3 次（每次 300ms）＋中線三格金色光暈；結尾卡直接亮著。
 * 中線的光暈只留 4px、結尾卡的中線只有 2px：光暈一寬就蓋過整排符號，深色的 BAR／7 會被洗成淡黃（結尾卡的 BAR 牌只有約 11px 高）。 */
.story-game.landed .slot-rig.is-win .slot-payline{animation:slotPayline .3s ease-in-out 3 both}
.card-hero .slot-payline{height:2px;margin-top:-1px}
.card-hero .slot-rig.is-win .slot-payline{background:#ffe066;box-shadow:0 0 3px #ffd84dcc}
/* 點陣符號是不透明奶油底：光暈畫在符號上方（::after 金框＋框外光暈），不是格子底色。
 * 內光只留一圈淡的：v11 實圖上內光太強會把深色的 BAR／7 洗成一片淡黃（結尾卡縮小後幾乎看不出字）。 */
.story-game.landed .slot-rig.is-win .slot-cell.is-hit:after,.card-hero .slot-rig.is-win .slot-cell.is-hit:after{content:"";position:absolute;inset:3% 5%;border-radius:10px;box-shadow:inset 0 0 0 2px #ffd84d,inset 0 0 6px 1px #ffe06699,0 0 10px 2px #ffd84dcc;pointer-events:none}
.story-game.landed .slot-rig.is-win .slot-cell.is-hit .slot-sym{animation:slotHitPop .45s ease-out both}
/* 前兩軸一樣（差一點）：第 3 軸 1.8s 起閃金框，約 0.95s 後停下 */
.story-game.playing .slot-reel.is-tease .slot-gloss{animation:slotTease .19s linear 1.8s 5 alternate backwards}
@keyframes slotPayline{0%,100%{background:#ffe066;box-shadow:0 0 4px 1px #ffd84dcc}50%{background:#d6282870;box-shadow:none}}
@keyframes slotHitPop{45%{transform:scale(1.14)}}
@keyframes slotTease{from{box-shadow:inset 0 0 0 2px #8a6322,inset 4px 0 7px #2a150a40,inset -4px 0 7px #2a150a40}to{box-shadow:inset 0 0 0 3px #ffe066,inset 0 0 16px 5px #ffd84dcc}}

/* ── 拉桿：座（黃銅圓，r＝量測 r×1.1）＋桿（transform-origin 在座中心，scaleY(s)）＋握把（紅球，translateY 到 (1−s)×桿長）── */
.slot-lever{position:absolute;left:var(--slot-hub-x,84.2%);top:var(--slot-hub-y,43.7%);width:0;height:0;--slot-knob-r:calc(var(--slot-hub-r,16px) * 1.05)}
.slot-lever-arm{position:absolute;left:calc(var(--slot-hub-r,16px) * -.27);bottom:0;width:calc(var(--slot-hub-r,16px) * .54);height:var(--slot-lever-len,98px);border-radius:999px;background:linear-gradient(90deg,#6f4a17,#f2d27a 42%,#c99a3c 64%,#6f4a17);box-shadow:0 2px 3px #1c0e0680;transform-origin:50% 100%;transform:scaleY(var(--slot-s,1))}
.slot-lever-hub{position:absolute;left:calc(var(--slot-hub-r,16px) * -1.1);top:calc(var(--slot-hub-r,16px) * -1.1);width:calc(var(--slot-hub-r,16px) * 2.2);height:calc(var(--slot-hub-r,16px) * 2.2);border-radius:50%;background:radial-gradient(circle at 38% 34%,#fff1bf,#d9a441 45%,#8a6322 82%);box-shadow:0 0 0 2px #5c3d16,0 3px 5px #1c0e0699}
.slot-lever-knob{position:absolute;left:calc(var(--slot-knob-r) * -1);top:calc(var(--slot-knob-r) * -1 - var(--slot-lever-len,98px));width:calc(var(--slot-knob-r) * 2);height:calc(var(--slot-knob-r) * 2);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 10%,#ff7a6b 22%,#d62828 56%,#7a1010 100%);box-shadow:0 3px 6px #1c0e0699;transform:translateY(calc((1 - var(--slot-s,1)) * var(--slot-lever-len,98px))) scale(var(--slot-ks,1))}
.slot-lever-arm,.slot-lever-knob{transition:transform .34s cubic-bezier(.34,1.56,.64,1)}
.slot-pulling .slot-lever-arm,.slot-pulling .slot-lever-knob{transition:none}
.story-game .slot-lever-knob{animation:leverInvite 2.4s ease-in-out infinite}
.story-game.playing .slot-lever-knob{animation:none}
@keyframes leverInvite{50%{box-shadow:0 3px 6px #1c0e0699,0 0 0 6px #ffe69755,0 0 22px 8px #ffe488cc}}

/* ── 拉桿熱區（透明按鈕，蓋住握把整段行程；拖曳＋點擊＋鍵盤）── */
.slot-lever-hotspot{--slot-hot-w:max(48px,calc(var(--slot-hub-r,16px) * 3.4));position:absolute;z-index:6;left:calc(var(--slot-hub-x,84.2%) - var(--slot-hot-w) / 2);top:calc(var(--slot-hub-y,43.7%) - var(--slot-lever-len,98px) - var(--slot-hub-r,16px) * 1.8);width:var(--slot-hot-w);height:calc(var(--slot-lever-len,98px) * 1.55 + var(--slot-hub-r,16px) * 3.6);padding:0;border:0;border-radius:24px;background:none;touch-action:none;cursor:grab;color:#fff9d7!important;-webkit-tap-highlight-color:transparent}
.slot-lever-hotspot:focus-visible{outline:3px solid #fff0ab;outline-offset:4px}
.slot-lever-hotspot .lever-hint{position:absolute;right:0;top:calc(100% + 4px);padding:7px 10px;border:1px solid #ffe6a6;border-radius:18px;background:#0b4a54df;box-shadow:0 5px 12px #092b35aa;font-size:12px;font-weight:900;letter-spacing:.6px;line-height:1.3;text-shadow:0 2px 4px #072e37;white-space:nowrap;pointer-events:none}
.story-game[data-game=slot].playing .slot-lever-hotspot,.story-game[data-game=slot].revealed .slot-lever-hotspot{opacity:0;pointer-events:none}

/* ── 落定標籤（比照 .sicbo-result；在聯集框下方 14px）──
 * 寬度不超過轉軸聯集框＋8px：阿修站在轉軸左下方，標籤若照 .sicbo-result 放寬到 100%−72px，會蓋住他的臉（v11 實圖 390／360 寬實測）。
 * 窄了會換行 → keep-all：中文只在空格與「・」「，」後斷行，符號名稱（幸運草、肉球金幣）不拆開。 */
.slot-result{position:absolute;z-index:5;left:calc(var(--slot-x,30.9%) + var(--slot-w,46.9%) / 2);top:calc(var(--slot-y,37.2%) + var(--slot-h,11.2%) + 14px);display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:min(calc(100% - 72px),calc(var(--slot-w,46.9%) + 8px));text-align:center;text-wrap:balance;word-break:keep-all;margin:0;padding:8px 15px;border:1px solid #ffe1a1;border-radius:18px;background:#0b4a54ec;box-shadow:0 5px 13px #052d3999;color:#fff4c9;font-size:15px;font-weight:900;letter-spacing:.5px;opacity:0;transform:translate(-50%,8px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.story-game.landed .slot-result{opacity:1;transform:translate(-50%,0)}

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