/* =====================================================================
   หน้าต่างตีบวก: โต๊ะตีเหล็ก (หน้าร่างหัวข้อ P · จ๊อบผ่าน 1 ต.ค.)
   ฉาก forge_scene.png 260x120 ขยาย 2 เท่า (พิกเซลเท่าไอคอน มุมหน้าตรง) · ของลอยเหนือทั่ง · ทั้งบานโทนโรงตีเหล็กทุกโซน
   ปุ่ม Refine สีเหล็กร้อน (จ๊อบยกเว้นกฎปุ่มหลักเขียว) · พื้นแผงล่างเรียบ ไม่มีเส้นร่อง (จ๊อบ)
   ===================================================================== */
body[data-zone] .modal-box.temper-box.rf {
  --rc: #e0b24c; width: 532px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 0 8px 10px; background: none;
  border-style: solid; border-width: 6px; border-color: transparent; border-image: url(../assets/ui/v2/panel_desert.png) 3 fill / 6px stretch; image-rendering: pixelated;
  box-shadow: 0 6px 0 rgba(0,0,0,.5); clip-path: none; }
body[data-zone] .rf > .pf-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -8px; padding: 6px 10px 5px;
  background: #1e1208; border-bottom: 2px solid #120a04; box-shadow: 0 2px 0 #6e5030; font: 700 14px/1.2 var(--pix); color: #fdebc6; letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px 1px 0 #0a0502; }
body[data-zone] .rf > .pf-h .job.tiny { --img: url(../assets/ui/v2/small_d_n.png); --img-h: url(../assets/ui/v2/small_d_h.png); --img-p: url(../assets/ui/v2/small_d_p.png); color: #e8d6b8 !important; }
body[data-zone] .rf .rf-scene { position: relative; width: 520px; height: 240px; margin: 2px -8px 0 !important; overflow: hidden; border: 0 !important; background: #120a04 !important;
  border-bottom: 2px solid #120a04 !important; box-shadow: 0 2px 0 #3a2814 !important; animation: none !important; }
body[data-zone] .rf .rf-bg { position: absolute; left: 0; top: 0; width: 520px; height: 240px; image-rendering: pixelated; }
body[data-zone] .rf .rf-fire { position: absolute; left: 50px; top: 80px; width: 110px; height: 110px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,150,60,.45), transparent 65%); animation: rf-flick .18s steps(2) infinite alternate; }
@keyframes rf-flick { from { opacity: .6; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
body[data-zone] .rf .rf-ember { position: absolute; width: 2px; height: 2px; background: #ffb050; opacity: 0; animation: rf-ember 3.2s linear infinite; }
@keyframes rf-ember { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(12px, -110px); } }
body[data-zone] .rf .rf-glow { position: absolute; left: calc(50% + 7px); top: 58px; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 70%, transparent) 0, transparent 65%); animation: rf-pulse 2.4s ease-in-out infinite; }
@keyframes rf-pulse { 0%, 100% { opacity: .65; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
body[data-zone] .rf .rf-shadow { position: absolute; left: calc(50% + 7px); top: 152px; width: 52px; height: 8px; margin-left: -26px; background: rgba(0,0,0,.45); border-radius: 50%; animation: rf-shadow 2.4s ease-in-out infinite; }
@keyframes rf-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.8); opacity: .7; } }
body[data-zone] .rf .rf-item { position: absolute; left: calc(50% + 7px); top: 86px; width: 64px; height: 64px; margin-left: -32px; image-rendering: pixelated;
  animation: rf-bob 2.4s ease-in-out infinite; filter: drop-shadow(0 0 4px var(--rc)); }
@keyframes rf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
body[data-zone] .rf.phase-striking .rf-item { animation: none; }
body[data-zone] .rf .rf-hammer { position: absolute; left: calc(50% + 7px); top: 28px; width: 64px; height: 64px; margin-left: 20px; image-rendering: pixelated; transform-origin: 80% 80%; opacity: 0; }
body[data-zone] .rf .rf-plus { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font: 700 22px/1 var(--pix); color: #fff; text-shadow: 2px 2px 0 #000; letter-spacing: 2px; }
body[data-zone] .rf .rf-plus .to { color: #ffd76a; }
body[data-zone] .rf .rf-name { position: absolute; left: 0; right: 0; top: 46px; text-align: center; font: 13px var(--pix); text-shadow: 1px 1px 0 #000, 0 0 4px #000; }
body[data-zone] .rf .rf-spark { position: absolute; width: 4px; height: 4px; background: #ffd76a; box-shadow: 0 0 4px #ff9a30; pointer-events: none; }
body[data-zone] .rf .rf-burst { position: absolute; left: calc(50% + 7px); top: 112px; width: 10px; height: 10px; margin: -5px; border-radius: 50%; pointer-events: none; }
body[data-zone] .rf .rf-banner { position: absolute; left: 0; right: 0; top: 206px; text-align: center; font: 700 16px var(--pix); text-shadow: 2px 2px 0 #000; }
body[data-zone] .rf .rf-banner.up { color: #ffd76a; } body[data-zone] .rf .rf-banner.stay { color: #c3ccd8; }
body[data-zone] .rf .rf-banner.down { color: #ff8a70; } body[data-zone] .rf .rf-banner.max { color: #ffd76a; }
body[data-zone] .rf .rf-low { margin: 0 -8px -10px; padding: 10px 8px 10px; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,140,60,.16), transparent 70%), #1a1612; }
body[data-zone] .rf .rf-info { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: start; }
body[data-zone] .rf .rf-stats { width: 100%; border-collapse: collapse; font: 12px var(--pix); background: rgba(10,7,4,.55); box-shadow: inset 0 0 0 2px #120a04; }
body[data-zone] .rf .rf-stats td { padding: 4px 8px; border-top: 1px solid #3a2c1e; color: #f3e6d0; }
body[data-zone] .rf .rf-stats tr:first-child td { border-top: 0; }
body[data-zone] .rf .rf-stats td.k { color: #a8906c; font-size: 11px; }
body[data-zone] .rf .rf-stats td.a { color: #c8b08a; text-align: right; }
body[data-zone] .rf .rf-stats td.ar { color: #6e5a40; text-align: center; width: 18px; }
body[data-zone] .rf .rf-stats td.nv { color: #ffc35a; text-align: right; }
body[data-zone] .rf .rf-gauge { --pct: 65; position: relative; width: 104px; height: 104px; margin: 0 auto; border-radius: 50%;
  background: conic-gradient(#ff9a30 0, #ffd76a calc(var(--pct) * 1%), #2a1f16 0); box-shadow: 0 0 0 2px #120a04, 0 0 14px rgba(255,140,50,.35); }
body[data-zone] .rf .rf-gauge::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: #15100b; box-shadow: inset 0 0 0 2px #120a04; }
body[data-zone] .rf .rf-gauge b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 22px var(--pix); color: #fff2d8; text-shadow: 0 0 6px rgba(255,160,60,.6); }
body[data-zone] .rf .rf-gauge small { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font: 10px var(--pix); color: #a8906c; }
body[data-zone] .rf .rf-slip { text-align: center; font: 11px var(--pix); color: #ff8a70; margin-top: 4px; min-height: 14px; }
body[data-zone] .rf .rf-maxnote { font: 12px var(--pix); color: #ffd76a; align-self: center; text-align: center; }
body[data-zone] .rf .rf-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
body[data-zone] .rf .rf-cost { display: flex; align-items: center; gap: 4px; font: 13px var(--pix); color: #f3e6d0; padding: 4px 8px; background: #15100b; border: 2px solid #120a04; box-shadow: inset 0 1px 0 #3a2814; }
body[data-zone] .rf .rf-cost .ico { width: 16px; height: 16px; margin: 0; }
body[data-zone] .rf .rf-cost .no { color: #ff8a70; }
body[data-zone] .rf .rf-ch { all: unset; position: relative; width: 52px; height: 40px; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 2px;
  border-style: solid; border-width: 6px 4px; border-image: url(../assets/ui/v2/small_d_n.png) 3 2 3 2 fill / 6px 4px stretch; image-rendering: pixelated; font: 11px var(--pix); color: #d8c4a0; }
body[data-zone] .rf .rf-ch .ico { width: 18px; height: 18px; margin: 0; }
body[data-zone] .rf .rf-ch.on { border-image-source: url(../assets/ui/v2/toggle_on_n.png); color: #fff; }
body[data-zone] .rf .rf-ch.zero { opacity: .45; cursor: default; }
body[data-zone] .rf .job.rf-go { --img: url(../assets/ui/v2/hot_n.png); --img-h: url(../assets/ui/v2/hot_h.png); --img-p: url(../assets/ui/v2/hot_p.png);
  margin-left: auto; min-width: 150px; height: 40px; font-size: 16px !important; color: #2a0e02 !important; text-shadow: 1px 1px 0 #ffe0a0; }
body[data-zone] .rf .job.rf-go:disabled { --img: url(../assets/ui/v2/off_n.png) !important; color: #8794ab !important; text-shadow: 1px 1px 0 #14181e; }