#hud .inventory-grid:is(.smithing-open,.production-open) { width:min(410px,calc(100vw - 24px));height:min(820px,calc(100dvh - 170px));max-height:calc(100dvh - 170px); }
#hud :is(.smithing-open,.production-open) #skills-panel { display:flex;flex-direction:column;padding:0;overflow:hidden; }
#hud :is(.smithing-open,.production-open) #skills-panel[hidden],#hud :is(#smithing-panel,#production-panel)[hidden],#hud :is(#smithing-panel,#production-panel) [hidden],#hud .smithing-status[hidden] { display:none; }
#hud :is(#smithing-panel,#production-panel) :where(p,small,span,strong,b,h2,h3,h4,label,summary,button,div,.icon) { color:inherit;text-shadow:none; }
#hud :is(#smithing-panel,#production-panel) { display:flex;flex:1;flex-direction:column;min-height:0;gap:9px;padding:13px;color:#eee0c6;background:radial-gradient(ellipse at 4% 0,#b87a4630,transparent 56%),linear-gradient(140deg,#41433a,#28372f);font:12px Georgia,serif;box-shadow:inset 0 0 0 1px #aa8b5670; }
#hud :is(#smithing-panel,#production-panel) button { border:1px solid #b39a6659;border-radius:3px;padding:7px;background:#17271f55;color:#eee0c6;font:11px Georgia,serif;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s; }
#hud :is(#smithing-panel,#production-panel) button:hover:not(:disabled),#hud :is(#smithing-panel,#production-panel) button[aria-pressed=true] { border-color:#dcb574;background:#ba854435;box-shadow:inset 0 0 0 1px #e9c37d15; }
#hud :is(#smithing-panel,#production-panel) button:disabled { opacity:.48;cursor:default; }
#hud :is(#smithing-panel,#production-panel) :is(button,input,summary,[tabindex]):focus-visible { outline:2px solid #edc17e;outline-offset:2px; }
#hud :is(#smithing-panel,#production-panel) .smithing-back { align-self:flex-start;padding:0;border:0;background:none;color:#c0b99e; }
#hud :is(#smithing-panel,#production-panel) .smithing-heading { display:flex;align-items:center;gap:9px; }
#hud :is(#smithing-panel,#production-panel) .smithing-heading>.icon { width:48px;height:48px;filter:drop-shadow(0 3px 3px #14191166); }
#hud :is(#smithing-panel,#production-panel) .smithing-heading>div { flex:1;min-width:0; }
#hud :is(#smithing-panel,#production-panel) .smithing-heading small { color:#beaa84;font-size:8px;letter-spacing:.12em; }
#hud :is(#smithing-panel,#production-panel) .smithing-heading h3 { margin:4px 0 0;color:#f2d29a;font:22px Georgia,serif; }
#hud :is(#smithing-panel,#production-panel) .smithing-heading h3 span { margin-left:5px;font-size:10px;white-space:nowrap;color:#c3b89e; }
#hud :is(#smithing-panel,#production-panel) .smithing-heading button .icon { width:22px;height:22px; }
#hud :is(#smithing-panel,#production-panel) .smithing-xp span { display:block;color:#c3b89e;font-size:10px;margin-top:5px; }
#hud :is(#smithing-panel,#production-panel) .smithing-methods { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
#hud :is(#smithing-panel,#production-panel) .smithing-methods button { display:flex;align-items:center;gap:9px;text-align:left;padding:5px 12px; }
#hud :is(#smithing-panel,#production-panel) .smithing-methods .icon { width:39px;height:39px; }
#hud :is(#smithing-panel,#production-panel) .smithing-methods span { font-size:15px;color:#f1d7ae; }
#hud :is(#smithing-panel,#production-panel) .smithing-methods small { display:block;font-size:8px;letter-spacing:.09em;color:#b9b69c;margin-top:4px; }
#hud :is(#smithing-panel,#production-panel) .smithing-content { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b79b6055 transparent;scrollbar-gutter:stable;padding-right:2px; }
#hud :is(#smithing-panel,#production-panel) .smithing-metal-heading,#hud :is(#smithing-panel,#production-panel) .smithing-supply-heading { display:flex;justify-content:space-between;align-items:center;margin:5px 0 7px;color:#c6b38f;font-size:8px;letter-spacing:.08em; }
#hud :is(#smithing-panel,#production-panel) .smithing-metal-heading small,#hud :is(#smithing-panel,#production-panel) .smithing-supply-heading small { font-size:10px;color:#c1c6a4;letter-spacing:0; }
#hud :is(#smithing-panel,#production-panel) .smithing-metals { display:grid;grid-template-columns:repeat(4,1fr);gap:4px; }
#hud :is(#smithing-panel,#production-panel) .smithing-metals button { display:grid;grid-template-columns:25px 1fr;align-items:center;text-align:left;column-gap:3px;padding:5px 3px;min-width:0; }
#hud :is(#smithing-panel,#production-panel) .smithing-metals .icon { width:25px;height:29px;grid-row:span 2; }
#hud :is(#smithing-panel,#production-panel) .smithing-metals span { font-size:9px; }
#hud :is(#smithing-panel,#production-panel) .smithing-metals small { display:block;font-size:8px;color:#bbb297;margin-top:2px; }
#hud :is(#smithing-panel,#production-panel) .smithing-metals .locked .icon,#hud :is(#smithing-panel,#production-panel) .smithing-recipes .locked .icon { filter:saturate(.5);opacity:.6; }
#hud :is(#smithing-panel,#production-panel) .smithing-categories { display:flex;gap:5px;margin:11px 0 6px; }
#hud :is(#smithing-panel,#production-panel) .smithing-categories button { flex:1; }
#hud :is(#smithing-panel,#production-panel) .smithing-recipes { display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:171px;overflow:auto;scrollbar-width:thin;scrollbar-color:#a4895755 transparent; }
#hud :is(#smithing-panel,#production-panel) .smithing-recipes button { display:flex;align-items:center;text-align:left;gap:5px;padding:4px;min-width:0; }
#hud :is(#smithing-panel,#production-panel) .smithing-recipes .icon { width:37px;height:39px;flex:none; }
#hud :is(#smithing-panel,#production-panel) .smithing-recipes span { font-size:10px;line-height:1.35; }
#hud :is(#smithing-panel,#production-panel) .smithing-recipes small { display:block;font-size:9px;margin-top:3px;color:#bdb69e; }
#hud :is(#smithing-panel,#production-panel) .smithing-hero { display:flex;align-items:center;gap:9px;margin:11px 0 0;padding:12px 5px;border-top:1px solid #bd985549;border-bottom:1px solid #bd98553d;background:radial-gradient(ellipse at 24% 72%,#b979342a,transparent 68%); }
#hud :is(#smithing-panel,#production-panel) .smithing-hero.forging { background:radial-gradient(ellipse at 24% 72%,#8ca39a20,transparent 68%); }
#hud :is(#smithing-panel,#production-panel) .smithing-output { position:relative;flex:none;border-radius:50%;background:radial-gradient(circle,#dcaf5d1f,transparent 70%); }
#hud :is(#smithing-panel,#production-panel) .smithing-output>.icon { display:block;width:100px;height:100px;filter:drop-shadow(0 5px 4px #131c1680); }
#hud :is(#smithing-panel,#production-panel) .smithing-output>b { position:absolute;bottom:4px;right:3px;padding:3px 5px;background:#29362bd9;border:1px solid #b2925b80;border-radius:3px;font:12px Georgia,serif;color:#f2d7a2; }
#hud :is(#smithing-panel,#production-panel) .smithing-hero>div:last-child { min-width:0; }
#hud :is(#smithing-panel,#production-panel) .smithing-hero small { font-size:8px;color:#c5ad81;letter-spacing:.06em; }
#hud :is(#smithing-panel,#production-panel) h4 { color:#f4d6a1;font:19px Georgia,serif;margin:6px 0; }
#hud :is(#smithing-panel,#production-panel) .smithing-hero p { font-size:10px;color:#c7baa0;line-height:1.45;margin:5px 0; }
#hud :is(#smithing-panel,#production-panel) .smithing-requirements { display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px; }
#hud :is(#smithing-panel,#production-panel) .smithing-requirements small { font-size:7px; }
#hud :is(#smithing-panel,#production-panel) .smithing-requirements span { color:#c3cea6;border:1px solid #a2ad7850;background:#15281d40;padding:3px 4px;font-size:9px; }
#hud :is(#smithing-panel,#production-panel) .smithing-requirements span.missing { color:#efb996;border-color:#c28d6355; }
#hud :is(#smithing-panel,#production-panel) .smithing-metrics { display:grid;grid-template-columns:repeat(3,1fr);padding:10px 0;margin-bottom:11px;background:#16271f55;border-bottom:1px solid #aa8a5240; }
#hud :is(#smithing-panel,#production-panel) .smithing-metrics>span { text-align:center; }
#hud :is(#smithing-panel,#production-panel) .smithing-metrics>span+span { border-left:1px solid #ad905840; }
#hud :is(#smithing-panel,#production-panel) .smithing-metrics strong { display:block;font:18px Georgia,serif;color:#efc27e; }
#hud :is(#smithing-panel,#production-panel) .smithing-metrics .missing strong { color:#e5a581; }
#hud :is(#smithing-panel,#production-panel) .smithing-metrics small { display:block;margin-top:4px;color:#bfb698;font-size:9px; }
#hud :is(#smithing-panel,#production-panel) label { display:block;color:#c6baa0;font-size:10px; }
#hud :is(#smithing-panel,#production-panel) input { width:100%;min-width:0;height:31px;padding:5px;border:1px solid #aa926077;border-radius:3px;background:#24372b;color:#eee0c6;font:11px Georgia,serif;color-scheme:dark; }
#hud :is(#smithing-panel,#production-panel) .smithing-supplies { display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:7px 0 11px; }
#hud :is(#smithing-panel,#production-panel) .smithing-supplies>div { display:flex;align-items:center;gap:6px;padding:6px;border:1px solid #a18b5e40;background:#17271e40; }
#hud :is(#smithing-panel,#production-panel) .smithing-supplies .icon { width:34px;height:34px;flex:none; }
#hud :is(#smithing-panel,#production-panel) .smithing-supplies span { font-size:10px;line-height:1.3; }
#hud :is(#smithing-panel,#production-panel) .smithing-supplies small { display:block;margin-top:4px;font-size:9px;color:#b5c49a; }
#hud :is(#smithing-panel,#production-panel) .smithing-supplies .missing small { color:#edac85; }
#hud :is(#smithing-panel,#production-panel) .smithing-supplies b { font-weight:normal;color:#f0d6a4; }
#hud :is(#smithing-panel,#production-panel) .smithing-equipment { padding:8px 0;margin:7px 0 11px;border-top:1px solid #b49a5c3d;border-bottom:1px solid #b49a5c3d; }
#hud :is(#smithing-panel,#production-panel) .smithing-equipment summary { color:#cbbc9b;font-size:10px;cursor:pointer; }
#hud :is(#smithing-panel,#production-panel) .smithing-equipment p { font-size:10px;line-height:1.65;color:#c9c0a7;margin:8px 0 2px; }
#hud :is(#smithing-panel,#production-panel) .smithing-actions { display:flex;align-items:flex-end;gap:5px; }
#hud :is(#smithing-panel,#production-panel) .smithing-actions>button { flex:1;white-space:nowrap;height:35px;padding:5px;background:linear-gradient(#a97e425e,#88663850); }
#hud :is(#smithing-panel,#production-panel) .smithing-quantity-label { width:51px; }
#hud :is(#smithing-panel,#production-panel) .smithing-quantity-label span { display:block;margin-bottom:4px;font-size:9px; }
#hud :is(#smithing-panel,#production-panel) .smithing-quantity-label input { height:35px; }
#hud :is(#smithing-panel,#production-panel) .smithing-note { font-size:10px;line-height:1.55;color:#b7b39d;margin:8px 0; }
#hud :is(#smithing-panel,#production-panel) .smithing-message,#hud :is(#smithing-panel,#production-panel) .smithing-blocked { font-size:11px;line-height:1.5;color:#e8c69a;background:#b87b2e1c;border-left:2px solid #bb8b52;padding:8px;margin:0; }
#hud :is(#smithing-panel,#production-panel) .smithing-blocked { margin:9px 0;font-size:10px; }
#hud :is(#smithing-panel,#production-panel) .smithing-footer { display:flex;align-items:center;gap:5px;font-size:9px;color:#b9b198;border-top:1px solid #aa92594d;padding-top:7px; }
#hud :is(#smithing-panel,#production-panel) .smithing-footer .icon { width:23px;height:23px; }
#hud :is(#smithing-panel,#production-panel) .smithing-footer>span { flex:1; }
#hud :is(#smithing-panel,#production-panel) .smithing-footer>small { color:#c3ab7f;font-size:8px; }
#hud .smithing-status { position:absolute;left:50%;bottom:145px;transform:translateX(-50%);width:min(335px,calc(100vw - 28px));padding:12px;color:#563f28;background:radial-gradient(ellipse at 0 0,#fff0cf80,transparent 70%),linear-gradient(135deg,#ecddb8,#d8c496);border:1px solid #977a50;box-shadow:0 3px 16px #17221960,inset 0 0 0 3px #fff3d526;font:11px Georgia,serif;pointer-events:auto;animation:smithing-enter .2s ease-out; }
#hud .smithing-status>div { display:flex;align-items:center;gap:7px; }
#hud .smithing-status .icon { width:34px;height:34px; }
#hud .smithing-status strong { flex:1;font:15px Georgia,serif; }
#hud .smithing-status button { border:1px solid #98794b66;padding:5px;background:#98794b20;color:#684b2c;font:10px Georgia,serif;cursor:pointer; }
#hud .smithing-status>small { display:block;margin:8px 0; }
#hud .smithing-status>span { display:block;text-align:right;margin-top:5px;font-size:10px; }
#hud .smithing-status progress,#hud :is(#smithing-panel,#production-panel) .smithing-xp progress { display:block;width:100%;height:5px;border:0;border-radius:3px;overflow:hidden;background:#92784d33;accent-color:#d59f57; }
#hud .smithing-status progress::-webkit-progress-bar,#hud :is(#smithing-panel,#production-panel) .smithing-xp progress::-webkit-progress-bar { background:#92784d33; }
#hud .smithing-status progress::-webkit-progress-value,#hud :is(#smithing-panel,#production-panel) .smithing-xp progress::-webkit-progress-value { background:linear-gradient(90deg,#a16637,#eec479); }
#hud :is(#smithing-panel,#production-panel).smithing-complete .smithing-output { animation:smithing-temper 1s ease-out; }
@keyframes smithing-enter { from { opacity:0;translate:0 5px; } to { opacity:1;translate:0 0; } }
@keyframes smithing-temper { 0% { filter:brightness(1.6) drop-shadow(0 0 9px #eeb16f); } 100% { filter:brightness(1); } }
@media(max-width:600px) { #hud:has(#inventory.smithing-open:not([hidden])) .map-cluster { visibility:hidden;pointer-events:none; } #hud .inventory-grid:is(.smithing-open,.production-open) { max-height:calc(100dvh - 135px);height:calc(100dvh - 135px); } #hud .smithing-status { bottom:120px;left:12px;transform:none;max-width:calc(100vw - 24px); } }
@media(max-width:390px) { #hud :is(#smithing-panel,#production-panel) { padding:9px; } #hud :is(#smithing-panel,#production-panel) .smithing-metals { grid-template-columns:repeat(3,1fr); } #hud :is(#smithing-panel,#production-panel) .smithing-output>.icon { width:78px;height:88px; } }
@media(prefers-reduced-motion:reduce) { #hud .smithing-status,#hud :is(#smithing-panel,#production-panel).smithing-complete .smithing-output { animation:none; } #hud :is(#smithing-panel,#production-panel) * { transition:none; } }