/* Forge window (public/forge_ui.js): ONE window, tabs Link / Enchant / Recreation, on the ORIGINAL window art (public/ui/forge/, docs/forge_original_research.md §4).
   Everything inside .fgStage is laid out in the art's own pixels (the 254 x 450 right-hand workbench + an 80 px tab row under it); forge_ui.js scales the
   stage to the screen (0.57 .. 0.76) and draws the art canvas 1:1 in device pixels. Every tap area is >= 78 art px = 44 css px at the smallest scale.
   #fg itself takes no touches: only the window does, so the joystick, the attack and the skill buttons keep working while it is open. */
#fg { --f:Arial,"Liberation Sans",Helvetica,sans-serif; --gold:#e0a64a; --gold2:#f4d68e; position:fixed; inset:0; z-index:338; display:none; pointer-events:none; font-family:var(--f); color:var(--gold); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#fg.on { display:block; }
#fg .fgStage { position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.8)); outline:none; }
#fg .fgArt { position:absolute; left:0; top:0; pointer-events:none; }
#fg button { font-family:var(--f); -webkit-tap-highlight-color:transparent; }
#fg button:focus-visible { outline:3px solid #ffe08a; outline-offset:-3px; }

/* title strip: the Link art has "Link Lapis" drawn in; Enchant / Recreation / Extract Lapis are written here in the same white */
#fg .fgTitle { position:absolute; left:60px; top:8px; width:134px; height:22px; text-align:center; font:700 15px/22px var(--f); color:#f2f0ea; text-shadow:0 1px 2px #000, 0 0 3px #000; white-space:nowrap; pointer-events:none; }
#fg .fgHelpBtn, #fg .fgX { position:absolute; top:0; width:78px; height:78px; padding:0; border:0; background:none; cursor:pointer; }
#fg .fgHelpBtn { left:0; } #fg .fgX { left:176px; }
#fg .fgHelpBtn i, #fg .fgX i { position:absolute; top:8px; width:24px; height:24px; border-radius:50%; border:2px solid #c89a4a; box-sizing:border-box; background:radial-gradient(circle at 45% 35%,#3b3222,#0d0a06); box-shadow:0 0 0 1px #000, 0 2px 4px #000; }
#fg .fgHelpBtn i { left:22px; font:700 15px/20px var(--f); font-style:normal; text-align:center; color:#f4d68e; }
#fg .fgX i { left:45px; } #fg .fgX svg { position:absolute; left:4px; top:4px; width:12px; height:12px; color:#f4d68e; }
#fg .fgHelpBtn:active i, #fg .fgX:active i, #fg .fgHelpBtn[aria-expanded="true"] i { border-color:#ffd27a; box-shadow:0 0 0 1px #000, 0 0 10px rgba(255,190,90,.7); }
#fg .fgHelp { display:none; position:absolute; left:14px; top:40px; width:226px; box-sizing:border-box; padding:8px 10px; z-index:2; border:1px solid #8d6c34; border-radius:3px; background:rgba(12,9,6,.94); box-shadow:0 0 0 1px #000, 0 6px 16px #000; font:400 14px/1.4 var(--f); color:#e8dcc0; cursor:pointer; }
#fg .fgHelp.on { display:block; }

/* slots (positions from forge_ui.js, in art px) */
#fg .fgSlot { position:absolute; padding:0; border:0; background:none; cursor:pointer; }
#fg .fgIc, #fg .fgCell { position:absolute; width:38px; height:38px; pointer-events:none; }
#fg .fgIc img { position:absolute; left:2px; top:2px; width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 1px 1px #000); }
#fg .fgIc.on { box-shadow:inset 0 0 0 1px rgba(232,190,100,.65), 0 0 7px rgba(255,200,110,.35); }
#fg .fgIc.ghost img { opacity:.32; filter:grayscale(1); }
#fg .fgIc .n { position:absolute; right:1px; bottom:0; font:700 13px var(--f); color:#fff; text-shadow:0 1px 2px #000, 0 0 2px #000; }
#fg .fgIc.ghost .n { color:#ff6a58; }
#fg .fgIc.sel { box-shadow:inset 0 0 0 2px #ffe08a, 0 0 10px rgba(255,214,120,.8); }
#fg .fgIc.pend img { opacity:.8; animation:fgPend 1.1s ease-in-out infinite alternate; }
#fg .fgIc.cont img { opacity:.4; }
#fg .fgSlot:active .fgIc { filter:brightness(1.25); }
@keyframes fgPend { from { filter:drop-shadow(0 0 1px #7fd8ff); } to { filter:drop-shadow(0 0 6px #7fd8ff); } }
/* Extract mode: the plate under the hammer box says "Linking Hammer" in the art; this plate says what the box takes now */
#fg .fgHmLab { display:none; position:absolute; left:73px; top:316px; width:90px; height:17px; box-sizing:border-box; border:1px solid #6b6b66; background:#16161a; font:700 11px/15px var(--f); text-align:center; color:#ececec; white-space:nowrap; overflow:hidden; pointer-events:none; }
#fg.fgXm .fgHmLab { display:block; }

/* the result line: chance and fee, the reason it cannot start, or the last result */
#fg .fgRes { position:absolute; left:10px; top:333px; width:234px; height:28px; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; pointer-events:none; font:700 13px/14px var(--f); color:var(--gold2); text-shadow:0 1px 2px #000, 0 0 2px #000; }
#fg .fgRes .dim { color:#b8a888; font-weight:400; } #fg .fgRes .bad { color:#ff8a76; } #fg .fgRes .warn { color:#ffb060; } #fg .fgRes .good { color:#9df08c; }

/* buttons drawn from the original button sprite (link_buttons.webp = interface/rapis_button2.tga, 4 states of 32 px: 0 normal, 1 lit, 2 pressed,
   3 disabled) at the ORIGINAL size (owner 2026-10-28: in proportion with the window, not enlarged); the button element around it is a bigger,
   invisible 78 px touch area (44 css px on the smallest phone) */
#fg .fgBtns { position:absolute; left:0; top:322px; width:254px; height:78px; display:flex; justify-content:center; --ft:42px; } /* frame drawn at y 364..396; the touch area 322..400 also covers the result line above it */
#fg .fgBtn { --row:0; position:relative; height:78px; padding:0; border:0; background:none; cursor:pointer; flex:none; }
#fg .fgBtn:focus-visible { --row:1; } #fg .fgBtn:active { --row:2; }
#fg .fgBtn:disabled { --row:3; cursor:default; }
#fg .fgBf { position:absolute; left:var(--bx,0px); right:var(--bx,0px); top:var(--ft,23px); height:32px; pointer-events:none; }
#fg .fgBf b { position:absolute; top:0; height:32px; background:url(/ui/forge/link_buttons.webp) no-repeat; background-size:198px 128px; }
#fg .fgBf .l { left:0; width:8px; background-position:0 calc(var(--row) * -32px); }
#fg .fgBf .r { right:0; width:8px; background-position:-117px calc(var(--row) * -32px); }
#fg .fgBf .m { left:8px; right:8px; background-size:var(--msz) 128px; background-position:var(--mx) calc(var(--row) * -32px); }
#fg .fgBt { position:absolute; left:50%; top:var(--ft,23px); width:max-content; height:32px; transform:translateX(-50%); font:700 15px/32px var(--f); white-space:nowrap; text-align:center; color:#f0a04a; text-shadow:0 1px 1px #000, 0 0 3px #000; pointer-events:none; }
#fg .fgBtn:active .fgBt { color:#b0661a; text-shadow:none; }
#fg .fgBtn:disabled .fgBt { color:#a6a6a6; text-shadow:0 1px 1px #000; }
#fg .fgBtn.sel .fgBt { color:#ffb14a; text-shadow:0 0 6px rgba(255,120,20,.85), 0 1px 1px #000; }
#fg .fgBtn.sel { --row:1; }

/* tab row: always at the bottom, hanging under the frame */
#fg .fgTabs { position:absolute; left:0; top:398px; width:254px; height:78px; display:flex; --ft:12px; } /* tabs drawn on the window's bottom edge (y 410..442), touch area 398..476 */
#fg .fgTabs .fgBt { font-size:14px; }
#fg .fgTabs .fgBtn:disabled { --row:0; }
#fg .fgTabs .fgBtn:disabled .fgBt { color:#7d7d7d; }

/* success / fail burst over the window */
#fg .fgFlash { position:absolute; left:0; top:0; width:254px; height:450px; display:none; align-items:center; justify-content:center; pointer-events:none; overflow:hidden; }
#fg .fgFlash.on { display:flex; animation:fgFade 1.7s ease-out forwards; }
#fg .fgFlash::before { content:''; position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px; border-radius:50%; background:radial-gradient(circle,var(--fc,#7fd8ff) 0%,rgba(0,0,0,0) 70%); animation:fgBurst 1.1s ease-out forwards; }
#fg .fgFlash span { position:relative; font:800 34px var(--f); letter-spacing:.1em; color:var(--fc,#7fd8ff); text-shadow:0 0 12px var(--fc,#7fd8ff), 0 2px 4px #000; animation:fgPop .5s ease-out; }
@keyframes fgBurst { from { transform:scale(.2); opacity:1; } to { transform:scale(12); opacity:0; } }
@keyframes fgPop { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes fgFade { 0%,60% { opacity:1; } 100% { opacity:0; } }

/* Extract chooser and the breakable-lapis popup: real screen px, not scaled with the art */
#fg .fgWarn { position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:auto; }
#fg .fgWarn { z-index:3; background:rgba(0,0,0,.62); }
#fg.warnOn { z-index:341; } /* the Accept / Cancel popup above the docked Inventory (#inv.dock 340), only while it shows */
#fg .fgWarn.on { display:flex; }
#fg .fgWarnP { box-sizing:border-box; width:min(420px,92vw); padding:14px 16px 12px; background:linear-gradient(#1d1912,#0b0907); border:1px solid #c0583a; border-radius:3px; box-shadow:0 0 0 1px #000, 0 10px 34px #000, 0 0 18px rgba(200,70,40,.35); }
#fg .fgWarnP p { margin:0 0 12px; font:700 15px/1.4 var(--f); text-align:center; color:#ffcf9a; }
#fg .fgWarnB { display:flex; gap:10px; justify-content:center; }
#fg .fgWarnB button { min-width:120px; height:44px; border:1px solid #b79553; border-radius:3px; background:linear-gradient(#3a3022,#17120b); color:#ffe9a8; font:700 15px var(--f); cursor:pointer; }
#fg .fgWarnB .fgWarnY { background:linear-gradient(#6b2c14,#2e1007); border-color:#e08a5a; color:#fff3cf; }
@media (prefers-reduced-motion:reduce) { #fg .fgFlash.on, #fg .fgFlash::before, #fg .fgFlash span, #fg .fgIc.pend img { animation:none; } }