/* ═══════════════════════════════════════════════════════════
   v2 投柴 cutscene —「火仔食柴」（feed-cutscene.js）
   舞台固定 390×844 設計尺寸，用 transform scale 貼合畫面，所以衝擊幀座標準確
   ═══════════════════════════════════════════════════════════ */
.feed-cutscene.fc-root {
  position: fixed; inset: 0; z-index: 220; display: block; padding: 0; overflow: hidden;
  background: #ff6b35; color: #16131d; font-family: "Noto Sans HK", system-ui, sans-serif; pointer-events: all;
}
.feed-cutscene.fc-root[hidden] { display: none !important; }
.fc-stage { position: absolute; left: 50%; top: 50%; width: 390px; height: 844px; transform-origin: 50% 50%; overflow: hidden; }
.fc-stage *, .fc-toast * { box-sizing: border-box; }
.fc-hold { position: absolute; inset: 0; }

/* 條紋轉場 */
.fc-wipe {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: repeating-linear-gradient(90deg, #ffd23f 0 22px, #ff6b35 22px 44px, #b8a6ff 44px 66px, #16131d 66px 70px);
  animation: fcWipe .45s steps(7) both;
}
@keyframes fcWipe { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.fc-skip {
  position: absolute; right: 16px; top: max(22px, env(safe-area-inset-top)); z-index: 40; height: 34px; padding: 0 14px;
  background: #fffdf7; color: #16131d; border: 2.5px solid #16131d; border-radius: 999px; box-shadow: 3px 3px 0 #16131d; font-weight: 700; cursor: pointer;
}

/* 標題：逐字彈出 */
.fc-head { position: absolute; left: 20px; right: 96px; top: 30px; display: flex; flex-direction: column; font-weight: 700; }
.fc-head__big { font-size: 44px; font-weight: 900; line-height: 1.05; margin-top: 4px; }
.fc-kw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; }
.fc-kw > span { display: inline-block; animation: fcKin .55s cubic-bezier(.2, 1, .3, 1) both; }
.fc-k1 { animation-delay: .05s !important; } .fc-k2 { animation-delay: .18s !important; }
.fc-head__hl { background: #fffdf7; padding: 0 6px; }
@keyframes fcKin { from { transform: translateY(110%); } to { transform: none; } }

/* 收據 */
.fc-receipt { position: absolute; left: 32px; right: 32px; top: 190px; transform-origin: 50% 60%; }
.fc-zig { position: relative; background: #fffdf7; padding: 16px 18px 20px; filter: drop-shadow(5px 5px 0 #16131d); }
.fc-zig::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px;
  background: linear-gradient(135deg, #fffdf7 50%, transparent 50%) 0 0 / 16px 16px, linear-gradient(-135deg, #fffdf7 50%, transparent 50%) 0 0 / 16px 16px;
}
.fc-print { animation: fcPrint .9s steps(9) both; }
@keyframes fcPrint { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.fc-receipt__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #16131d; padding-bottom: 8px; font-size: 18px; }
.fc-rl { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12px; animation: fcUp .25s steps(3) both; }
.fc-rl--dash { border-top: 2px dashed #16131d; margin-top: 4px; padding-top: 8px; }
.fc-rl--total { border-top: 2px solid #16131d; margin-top: 8px; padding-top: 8px; font-size: 15px; }
.fc-rl--total span { font-size: 18px; font-weight: 700; }
.fc-stamp {
  position: absolute; right: 14px; top: 64px; padding: 6px 12px; border: 3px solid #e0341a; border-radius: 8px; color: #e0341a;
  font-size: 22px; font-weight: 900; letter-spacing: .06em; background: rgba(255, 253, 247, .75); animation: fcStamp .5s cubic-bezier(.2, 1.2, .4, 1) both;
}
@keyframes fcStamp { 0% { transform: scale(3) rotate(-20deg); opacity: 0; } 40% { transform: scale(.9) rotate(-9deg); opacity: 1; } 60% { transform: scale(1.05) rotate(-11deg); } 100% { transform: scale(1) rotate(-10deg); opacity: 1; } }
.fc-roll { animation: fcRoll .45s cubic-bezier(.6, 0, .8, .4) both; }
@keyframes fcRoll { 0% { transform: rotate(2deg) scale(1); } 45% { transform: rotate(-8deg) scale(.7, .35); } 100% { transform: rotate(-30deg) scale(.08, .05); opacity: 0; } }
@keyframes fcUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 柴 */
.fc-log { display: block; width: 72px; height: 32px; background: url(./images/v2/log.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.fc-rolllog { position: absolute; left: 141px; top: 330px; width: 108px; height: 48px; animation: fcLogPop .4s cubic-bezier(.3, 1.5, .5, 1) .25s both; }
@keyframes fcLogPop { 0% { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.2) rotate(6deg); } 100% { transform: scale(1) rotate(-6deg); } }

/* 營地場景 */
.fc-scene { position: absolute; left: 0; right: 0; top: 176px; height: 264px; border-top: 2.5px solid #16131d; border-bottom: 2.5px solid #16131d; overflow: hidden; }
.fc-scene--in { animation: fcSceneIn .4s cubic-bezier(.2, 1.3, .4, 1) both; }
.fc-scene--punch { animation: fcPunch .3s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: 50% 60%; }
@keyframes fcSceneIn { from { transform: translateY(40px) rotate(-2deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fcPunch { from { transform: scale(1.14); } to { transform: scale(1); } }
.fc-scene__box { position: absolute; left: -18px; top: 0; width: 427px; height: 260px; }
.fc-spr { position: absolute; inset: 0; display: block; background-repeat: no-repeat; image-rendering: pixelated; background-position-x: 0; }
.fc-spr--camp { background-image: url(./images/v2/camp.png); background-size: 400% 400%; animation: fcB4 .5s steps(4) infinite; }
.fc-spr--me { background-image: url(./images/v2/camp-fire.png); background-size: 400% 400%; animation: fcB4 .5s steps(4) infinite; }
.fc-spr--face { background-image: url(./images/v2/faces.png); background-size: 200% 600%; animation: fcB2 .5s steps(2) infinite; }
.fc-spr--face.fc-spr--chew { animation-duration: .26s; }
.fc-spr[hidden] { display: none; }
@keyframes fcB4 { to { background-position-x: 133.333%; } }
@keyframes fcB2 { to { background-position-x: 200%; } }

.fc-me { position: absolute; left: 158px; top: 53px; width: 125px; height: 182px; display: block; transform-origin: 50% 88%; }
.fc-me--idle { animation: fcBob 1.6s steps(4) infinite; }
.fc-me--inhale { animation: fcInh .6s cubic-bezier(.3, 1.2, .5, 1) both; }
.fc-me--full { transform: scale(1.16, .92); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.fc-me--chew { animation: fcChew .26s steps(2) infinite; }
.fc-me--gulp { animation: fcGulp .4s cubic-bezier(.3, 1.4, .5, 1) both; }
.fc-me--burst { animation: fcBurst .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes fcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fcInh { 0% { transform: scale(1); } 30% { transform: scale(1.08, .9) translateY(4px); } 100% { transform: scale(1.04, .96) translateY(2px); } }
@keyframes fcChew { 0% { transform: scale(1.16, .92); } 50% { transform: scale(1.1, .97) translateY(-3px); } }
@keyframes fcGulp { 0% { transform: scale(1.16, .92); } 40% { transform: scale(.9, 1.12) translateY(-10px); } 100% { transform: scale(1); } }
@keyframes fcBurst { 0% { transform: scale(1); } 30% { transform: scale(1.2, .84); } 60% { transform: scale(.92, 1.14) translateY(-16px); } 100% { transform: scale(1); } }
.fc-zz i { position: absolute; font: 700 14px/1 "Space Mono", monospace; font-style: normal; animation: fcZz 2s steps(8) infinite; left: 250px; top: 92px; }
.fc-zz i + i { left: 260px; top: 76px; font-size: 18px; animation-delay: .7s; }
@keyframes fcZz { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(14px, -30px); opacity: 0; } }

.fc-logfly { position: absolute; left: 184px; top: 142px; width: 72px; height: 32px; }
.fc-log--float { animation: fcLf .5s steps(2) infinite alternate; transform: translate(104px, -112px) rotate(-8deg); }
.fc-log--suck { animation: fcSuck .62s cubic-bezier(.55, 0, .9, .5) both; }
@keyframes fcLf { from { transform: translate(104px, -112px) rotate(-8deg); } to { transform: translate(104px, -118px) rotate(-3deg); } }
@keyframes fcSuck { 0% { transform: translate(104px, -112px) rotate(-8deg) scale(1); } 35% { transform: translate(84px, -86px) rotate(-18deg) scale(1.15, .8); } 70% { transform: translate(34px, -26px) rotate(-30deg) scale(.8, .45); } 100% { transform: translate(0, 0) rotate(-40deg) scale(.05, .05); opacity: .4; } }

/* 集中線（吸緊） */
.fc-focus {
  position: absolute; inset: -60px; pointer-events: none; z-index: 4;
  background: repeating-conic-gradient(from 0deg at 280px 218px, rgba(22, 19, 29, .55) 0 1deg, transparent 1deg 6deg);
  -webkit-mask-image: radial-gradient(circle at 280px 218px, transparent 90px, #000 200px); mask-image: radial-gradient(circle at 280px 218px, transparent 90px, #000 200px);
  animation: fcFboil .16s steps(2) infinite;
}
@keyframes fcFboil { to { transform: rotate(1.5deg); } }
.fc-wind { position: absolute; left: 220px; top: 158px; width: 0; height: 0; }
.fc-wind i { position: absolute; display: block; height: 3px; background: #16131d; border-radius: 2px; opacity: 0; animation: .34s steps(5) 2; }
.fc-w1 { width: 34px; animation-name: fcW1 !important; } .fc-w2 { width: 24px; animation-name: fcW2 !important; animation-delay: .08s !important; }
.fc-w3 { width: 30px; animation-name: fcW3 !important; animation-delay: .04s !important; } .fc-w4 { width: 22px; animation-name: fcW4 !important; animation-delay: .12s !important; }
.fc-w5 { width: 28px; animation-name: fcW5 !important; animation-delay: .06s !important; } .fc-w6 { width: 20px; animation-name: fcW6 !important; animation-delay: .1s !important; }
@keyframes fcW1 { 0% { transform: translate(120px, -90px) rotate(37deg); opacity: 1; } 100% { transform: translate(30px, -20px) rotate(37deg); opacity: 0; } }
@keyframes fcW2 { 0% { transform: translate(140px, -30px) rotate(12deg); opacity: 1; } 100% { transform: translate(40px, -6px) rotate(12deg); opacity: 0; } }
@keyframes fcW3 { 0% { transform: translate(70px, -120px) rotate(60deg); opacity: 1; } 100% { transform: translate(12px, -30px) rotate(60deg); opacity: 0; } }
@keyframes fcW4 { 0% { transform: translate(-150px, -60px) rotate(-22deg); opacity: 1; } 100% { transform: translate(-56px, -20px) rotate(-22deg); opacity: 0; } }
@keyframes fcW5 { 0% { transform: translate(-120px, -110px) rotate(-42deg); opacity: 1; } 100% { transform: translate(-44px, -40px) rotate(-42deg); opacity: 0; } }
@keyframes fcW6 { 0% { transform: translate(150px, 24px) rotate(-8deg); opacity: 1; } 100% { transform: translate(50px, 6px) rotate(-8deg); opacity: 0; } }

/* 火堆噴金幣 */
.fc-fount { position: absolute; left: 210px; top: 170px; width: 0; height: 0; }
.fc-fx { position: absolute; left: 0; top: 0; animation: .9s cubic-bezier(.3, .6, .6, 1) both; }
.fc-fy { display: block; animation: fcFy .9s cubic-bezier(.2, .8, .5, 1.2) both; }
.fc-coin { display: block; width: 30px; height: 30px; background: url(./images/v2/coin.png) 0 0 / 800% 100% no-repeat; image-rendering: pixelated; animation: fcC8 .7s steps(8) infinite; }
@keyframes fcC8 { to { background-position: 114.2857% 0; } }
@keyframes fcFy { 0% { transform: translateY(0) scale(.4); } 45% { transform: translateY(-150px) scale(1.1); } 100% { transform: translateY(-40px) scale(.7); opacity: 0; } }
.fc-x1 { animation-name: fcX1; } .fc-x2, .fc-x2 .fc-fy { animation-delay: .05s; } .fc-x2 { animation-name: fcX2; }
.fc-x3, .fc-x3 .fc-fy { animation-delay: .1s; } .fc-x3 { animation-name: fcX3; } .fc-x4, .fc-x4 .fc-fy { animation-delay: .03s; } .fc-x4 { animation-name: fcX4; }
.fc-x5, .fc-x5 .fc-fy { animation-delay: .12s; } .fc-x5 { animation-name: fcX5; } .fc-x6, .fc-x6 .fc-fy { animation-delay: .08s; } .fc-x6 { animation-name: fcX6; }
@keyframes fcX1 { to { transform: translateX(-120px); } } @keyframes fcX2 { to { transform: translateX(-60px); } } @keyframes fcX3 { to { transform: translateX(-14px); } }
@keyframes fcX4 { to { transform: translateX(40px); } } @keyframes fcX5 { to { transform: translateX(96px); } } @keyframes fcX6 { to { transform: translateX(140px); } }

/* 像素對白 */
.fc-say {
  position: absolute; left: 262px; top: 36px; z-index: 6; pointer-events: none;
  filter: drop-shadow(0 -2px 0 #16131d) drop-shadow(0 2px 0 #16131d) drop-shadow(-2px 0 0 #16131d) drop-shadow(2px 0 0 #16131d) drop-shadow(3px 3px 0 #16131d);
}
.fc-say .v2-pxbub { max-width: none; white-space: nowrap; }
.fc-sayin { transform-origin: 0 100%; animation: v2pxpopA .3s steps(4) both; }

/* 燃料 */
.fc-fuel { position: absolute; left: 20px; right: 20px; top: 462px; display: flex; flex-direction: column; gap: 10px; animation: fcUp .45s cubic-bezier(.2, 1.3, .4, 1) .2s both; }
.fc-fuel__head { display: flex; align-items: flex-end; justify-content: space-between; }
.fc-fuel__lead { display: flex; flex-direction: column; font-weight: 700; }
.fc-fuel__num {
  font: 700 96px/.9 "Space Grotesk", sans-serif; color: #ffd23f; letter-spacing: -0.04em; margin-top: 4px;
  -webkit-text-stroke: 3px #16131d; paint-order: stroke fill; text-shadow: 6px 6px 0 #16131d;
}
.fc-fuel__tier { margin-bottom: 14px; padding: 8px 14px; font-size: 18px; font-weight: 900; border: 2.5px solid #16131d; border-radius: 999px; box-shadow: 3px 3px 0 #16131d; transform: rotate(-4deg); white-space: nowrap; }
.fc-flip { animation: fcFlip .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes fcFlip { 0% { transform: rotate(-4deg) scale(1); } 40% { transform: rotate(-12deg) scale(1.35); } 100% { transform: rotate(-4deg) scale(1); } }
.fc-fuel__bar { position: relative; height: 30px; background: #fffdf7; border: 2.5px solid #16131d; border-radius: 8px; box-shadow: 4px 4px 0 #16131d; overflow: hidden; }
.fc-fuel__fill { height: 100%; border-right: 2.5px solid #16131d; transition: width .2s steps(2); }
.fc-fuel__bar i { position: absolute; top: -2px; bottom: -2px; width: 2.5px; background: #16131d; }
.fc-fuel__labels { display: flex; justify-content: space-between; padding: 0 2px; font-size: 10px; }

/* 完 */
.fc-end { position: absolute; left: 20px; right: 20px; bottom: 28px; display: flex; gap: 12px; z-index: 35; }
.fc-btn {
  flex: 1; height: 56px; border: 2.5px solid #16131d; border-radius: 12px; box-shadow: 4px 4px 0 #16131d;
  font: 900 16px/1 "Noto Sans HK", sans-serif; cursor: pointer; animation: fcUp .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.fc-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #16131d; }
.fc-btn--w { background: #fffdf7; color: #16131d; }
.fc-btn--k { flex: 1.4; background: #16131d; color: #fffdf7; animation-delay: .1s; }

/* 震 */
.fc-shake { animation: fcShake .3s steps(4) both; }
.fc-shakeB { animation: fcShakeB .42s steps(6) both; }
@keyframes fcShake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-5px, 3px); } 50% { transform: translate(5px, -3px); } 75% { transform: translate(-3px, -2px); } }
@keyframes fcShakeB { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-9px, 6px); } 30% { transform: translate(8px, -7px); } 45% { transform: translate(-7px, -4px); } 60% { transform: translate(6px, 5px); } 80% { transform: translate(-3px, 2px); } }

/* ── 衝擊幀 ── */
.fc-freeze, .fc-freeze * { animation-play-state: paused !important; transition: none !important; }
.fc-bw { filter: grayscale(1) contrast(7) brightness(1.08); }
.fc-imp { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.fc-imp__neg { position: absolute; inset: 0; background: #fff; mix-blend-mode: difference; }
.fc-imp__flash { position: absolute; inset: 0; background: #ffd23f; opacity: .9; }
.fc-imp__lines { position: absolute; inset: -40px; }
.fc-il--stamp {
  background: repeating-conic-gradient(from 3deg at 318px 318px, #16131d 0 1.6deg, transparent 1.6deg 7deg), repeating-conic-gradient(from 0deg at 318px 318px, #16131d 0 .8deg, transparent .8deg 4.3deg);
  -webkit-mask-image: radial-gradient(circle at 318px 318px, transparent 70px, #000 150px); mask-image: radial-gradient(circle at 318px 318px, transparent 70px, #000 150px);
}
.fc-il--burst {
  background: repeating-conic-gradient(from 2deg at 242px 376px, #16131d 0 2deg, transparent 2deg 8deg), repeating-conic-gradient(from 0deg at 242px 376px, #16131d 0 .9deg, transparent .9deg 5.1deg);
  -webkit-mask-image: radial-gradient(circle at 242px 376px, transparent 96px, #000 190px); mask-image: radial-gradient(circle at 242px 376px, transparent 96px, #000 190px);
}
.fc-il--gulp {
  background: repeating-conic-gradient(from 4deg at 242px 376px, #16131d 0 1.2deg, transparent 1.2deg 9deg); opacity: .8;
  -webkit-mask-image: radial-gradient(circle at 242px 376px, transparent 110px, #000 200px); mask-image: radial-gradient(circle at 242px 376px, transparent 110px, #000 200px);
}
.fc-imp__text { position: absolute; font-weight: 900; color: #16131d; -webkit-text-stroke: 5px #fffdf7; paint-order: stroke fill; line-height: 1; transform: rotate(-8deg); }
.fc-it--stamp { left: 176px; top: 120px; font-size: 96px; }
.fc-it--burst { left: 18px; top: 128px; font-size: 120px; }

/* ── 微任務 toast + 導航火仔食柴 ── */
.fc-toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(112px + env(safe-area-inset-bottom)); z-index: 60; max-width: 480px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: #16131d; font-family: "Noto Sans HK", sans-serif;
  background: #ffd23f; border: 2.5px solid #16131d; border-radius: 12px; box-shadow: 5px 5px 0 #16131d;
  animation: fcToastIn .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.fc-toast--out { animation: fcToastOut .35s cubic-bezier(.6, 0, .8, .4) both; }
@keyframes fcToastIn { from { transform: translateY(140%); } to { transform: none; } }
@keyframes fcToastOut { to { transform: translateY(160%); opacity: 0; } }
.fc-toast__log { width: 54px; height: 24px; flex-shrink: 0; }
.fc-toast__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 15px; }
.fc-toast__gain { font-size: 20px; font-weight: 700; }
.fc-navfly { position: fixed; z-index: 61; width: 48px; height: 22px; pointer-events: none; }
.v2-nav-fire.fc-eating .v2-nav-fire__me { visibility: hidden; }
.fc-navme { position: absolute; left: 50%; top: -18px; width: 58px; height: 85px; margin-left: -29px; display: block; transform-origin: 50% 88%; }
.fc-navme .fc-spr--me { animation: fcB4 .5s steps(4) infinite; }
.v2-nav-fire.fc-bump { animation: fcNavBump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fcNavBump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.fc-plus { position: fixed; z-index: 62; transform: translateX(-50%); font-size: 18px; font-weight: 700; color: #16131d; pointer-events: none; animation: fcPlus 1.1s steps(8) both; }
@keyframes fcPlus { 0% { transform: translate(-50%, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%, -46px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fc-stage *, .fc-toast, .fc-toast *, .fc-navme, .fc-plus { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .fc-imp { display: none; }
}
body.feed-cutscene-open.fc-toasting { overflow: visible; }
body.feed-cutscene-open.fc-toasting .bottom-nav { opacity: 1; pointer-events: none; }