/* 畫面特效的樣式（body.fx-on 時才生效；WebGL 不可用或特效關閉時完全不影響原本畫面） */
#fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 35; display: block; }
#fx-canvas[hidden] { display: none; }

/* 景深：對話框開啟時，同一個畫面裡的其他內容模糊＋稍微變暗 */
.fx-on .fx-dof > :not(.overlay):not(.pops) { filter: blur(var(--fx-dof, 3px)) saturate(.85) brightness(.96); transition: filter .25s ease-out; }
.fx-q-low .fx-dof > :not(.overlay):not(.pops) { transition: none; }
.fx-on .overlay .dialog { box-shadow: 0 18px 60px rgba(70, 35, 10, .35), 0 0 0 1px rgba(255, 220, 160, .5); }

/* 按鈕按下回饋（用 scale 屬性，和原本的 transform 疊加，不覆蓋） */
@keyframes fxPress { 0% { scale: 1; filter: brightness(1); } 35% { scale: .94; filter: brightness(1.12); } 100% { scale: 1; filter: brightness(1); } }
.fx-on .fx-press { animation: fxPress .26s ease-out; }

/* 翻牌光暈、配對成功光暈 */
@keyframes fxFlipGlow { 0% { filter: drop-shadow(0 0 0 rgba(255, 200, 90, 0)); } 40% { filter: drop-shadow(0 0 10px rgba(255, 200, 90, .85)); } 100% { filter: drop-shadow(0 0 0 rgba(255, 200, 90, 0)); } }
@keyframes fxMatchGlow { 0% { filter: drop-shadow(0 0 0 rgba(255, 190, 60, 0)) brightness(1); } 30% { filter: drop-shadow(0 0 16px rgba(255, 190, 60, 1)) brightness(1.15); } 100% { filter: drop-shadow(0 0 4px rgba(255, 190, 60, .35)) brightness(1); } }
.fx-on .fx-flipglow { animation: fxFlipGlow .45s ease-out; }
.fx-on .fx-matchglow { animation: fxMatchGlow .9s ease-out; }
.fx-q-high .fcard.matched .fc-front { box-shadow: inset 0 0 18px rgba(255, 196, 80, .45); }

/* ---- 第 2 輪：加強版 ---- */
/* 畫面輕震（只有「高」；用 translate 屬性，不覆蓋原本的 transform）與過關鏡頭推進（scale 屬性） */
/* 畫面輕震改在 fx-main.js 用 Web Animations（不換掉 .screen 的 screenIn 動畫）；下面兩個 keyframes 保留給參考 */
@keyframes fxShake1 { 0%, 100% { translate: 0 0; } 20% { translate: -3px 1px; } 40% { translate: 3px -2px; } 60% { translate: -2px 2px; } 80% { translate: 2px -1px; } }
@keyframes fxShake2 { 0%, 100% { translate: 0 0; } 15% { translate: -6px 2px; } 30% { translate: 5px -3px; } 45% { translate: -4px 3px; } 60% { translate: 3px -2px; } 80% { translate: -1px 1px; } }
@keyframes fxPunch { 0% { scale: 1; } 30% { scale: 1.035; } 100% { scale: 1; } }
.fx-q-high #app.fx-punch { animation: fxPunch .6s cubic-bezier(.2, .9, .3, 1); transform-origin: 50% 35%; }
/* 星星蓋章 / 金幣列的光暈 */
@keyframes fxStamp { 0% { filter: drop-shadow(0 0 0 rgba(255, 190, 60, 0)) brightness(1); } 25% { filter: drop-shadow(0 0 14px rgba(255, 196, 70, 1)) brightness(1.25); } 100% { filter: drop-shadow(0 0 5px rgba(255, 190, 60, .5)) brightness(1); } }
.fx-on .fx-stamp { animation: fxStamp .7s ease-out; }
.fx-q-high #r2-stars svg.icon.on { filter: drop-shadow(0 0 5px rgba(255, 190, 60, .5)); }
/* 分數 / 連擊跳字（有光暈；aria-hidden，只是裝飾，遊戲本身的分數顯示不變） */
.fx-pops { position: fixed; inset: 0; pointer-events: none; z-index: 36; overflow: hidden; }
.fx-pop { position: absolute; transform: translate(-50%, -50%); font-family: var(--font); font-weight: 900; font-size: 1.35rem; color: #fff7e0; white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 170, 40, .95), 0 0 16px rgba(255, 140, 30, .7), 0 2px 0 #b35a12, 0 3px 6px rgba(90, 40, 0, .5); animation: fxPopUp 1s ease-out forwards; }
.fx-pop-combo { font-size: 1.5rem; color: #fff1c9; }
.fx-pop-big { font-size: 1.9rem; color: #fff; text-shadow: 0 0 8px rgba(255, 200, 60, 1), 0 0 24px rgba(255, 120, 30, .85), 0 2px 0 #a8430c, 0 4px 10px rgba(90, 40, 0, .5); }
@keyframes fxPopUp { 0% { opacity: 0; scale: .5; translate: 0 6px; } 18% { opacity: 1; scale: 1.18; } 35% { scale: 1; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 -38px; } }
/* 遊戲本身的「+N」分數跳字：加上金色光暈（文字內容與位置不變） */
.fx-q-high #play-pops .pop.good, .fx-q-high .pops .pop.good { text-shadow: 0 3px 0 #fff, 0 0 10px #fff, 0 0 16px rgba(255, 190, 60, .95), 0 0 30px rgba(255, 140, 30, .6); }
.fx-q-low #play-pops .pop.good { text-shadow: 0 3px 0 #fff, 0 0 12px #fff, 0 0 14px rgba(255, 190, 60, .7); }
.fx-q-low .fx-pop { animation-duration: .8s; text-shadow: 0 2px 0 #b35a12, 0 0 8px rgba(255, 160, 40, .7); }

/* 廚房熱氣扭曲（只在「高」，只扭曲盤子裡的食材插圖） */
.fx-q-high .k-plate.fx-haze .ing-art { filter: url(#fx-haze-f); }
.fx-on .k-plate { transition: box-shadow .4s; }
.fx-on .k-plate.fx-haze { box-shadow: 0 0 0 2px rgba(255, 180, 90, .35), 0 -14px 34px rgba(255, 160, 70, .35) inset, 0 0 22px rgba(255, 170, 80, .35); }

/* 設定頁「畫面特效」選項與自動降級提示 */
.fx-radios { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-radio { position: relative; display: inline-flex; }
.fx-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fx-radio span { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-weight: 700; }
.fx-radio input:checked + span { background: var(--primary); border-color: var(--primary-d); color: #fff; }
.fx-radio input:focus-visible + span { outline: 4px solid #2a6df4; outline-offset: 2px; }
.fx-radio input:disabled + span { opacity: .5; }
.fx-status { margin: 8px 0 4px; font-size: .88rem; color: var(--ink-soft); }
.fx-settings .fx-radios { margin: 6px 0; }
.fx-note { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 960; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 12px; font-size: .9rem; max-width: calc(100vw - 24px); pointer-events: none; }
.fx-note[hidden] { display: none; }

/* WebGL 不可用：設定頁選項顯示「原本畫面」並停用，其餘都是原本的樣式 */
@media (prefers-reduced-motion: reduce) { .fx-on .fx-press, .fx-on .fx-flipglow, .fx-on .fx-matchglow, .fx-on .fx-stamp, .fx-shake-1, .fx-shake-2, #app.fx-punch, .fx-pop { animation: none !important; } .fx-pops { display: none; } .fx-on .fx-dof > :not(.overlay):not(.pops) { transition: none; } }

/* ---- 第 3 輪 ---- */
/* 出餐完成：盤子與那位客人的「上菜」按鈕發亮兩下（只有光暈，按鈕文字與位置不變） */
@keyframes fxReady { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 190, 60, 0); } 25%, 75% { box-shadow: 0 0 0 3px rgba(255, 196, 70, .9), 0 0 18px 4px rgba(255, 170, 40, .55); } 50% { box-shadow: 0 0 0 2px rgba(255, 196, 70, .5), 0 0 8px 2px rgba(255, 170, 40, .3); } }
.fx-on .fx-ready { animation: fxReady 1.3s ease-in-out; }
/* 三星完美：星星列一起發金光 */
@keyframes fxPerfect { 0% { filter: drop-shadow(0 0 0 rgba(255, 196, 70, 0)); scale: 1; } 20% { filter: drop-shadow(0 0 16px rgba(255, 196, 70, 1)) brightness(1.2); scale: 1.08; } 60% { filter: drop-shadow(0 0 10px rgba(255, 196, 70, .8)); scale: 1; } 100% { filter: drop-shadow(0 0 6px rgba(255, 190, 60, .55)); scale: 1; } }
.fx-on #r2-stars.fx-perfect { animation: fxPerfect 1.8s ease-out; }
/* 「完美破案！」橫幅（aria-hidden 裝飾；放在 .fx-pops 裡，pointer-events: none） */
.fx-banner { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 26px 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 214, 110, .96), rgba(255, 160, 50, .94)); border: 3px solid #fff3cf; box-shadow: 0 0 0 2px #c46a14, 0 8px 26px rgba(150, 70, 10, .45), 0 0 40px rgba(255, 190, 70, .7);
  color: #fff; font-family: var(--font); white-space: nowrap; pointer-events: none; animation: fxBanner 2.2s cubic-bezier(.2, .9, .3, 1) forwards; }
.fx-banner-t { font-size: 1.7rem; font-weight: 900; letter-spacing: .12em; text-shadow: 0 2px 0 #b5520c, 0 0 12px rgba(255, 240, 200, .9); }
.fx-banner-s { font-size: .9rem; font-weight: 800; letter-spacing: .3em; color: #fff8e6; text-shadow: 0 1px 0 #b5520c; }
@keyframes fxBanner { 0% { opacity: 0; scale: 1.8; } 12% { opacity: 1; scale: .94; } 20% { scale: 1.04; } 28% { scale: 1; } 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -24px; } }
.fx-q-low .fx-banner { animation-duration: 1.8s; box-shadow: 0 0 0 2px #c46a14, 0 6px 16px rgba(150, 70, 10, .35); }
/* 特效層一律不攔截點擊 */
#fx-canvas, .fx-pops, .fx-pops * { pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) { .fx-on .fx-ready, .fx-on #r2-stars.fx-perfect, .fx-banner { animation: none !important; } .fx-banner { display: none; } }