:root {
  --gothic-edge:#956342;
  --gothic-text:#f2d4b6;
  --gothic-metal:linear-gradient(165deg,#252630,#101014 48%,#08090d);
}
body #stats, body #mmapWrap, body #warHud, body #questHud, body #kNotice,
body #guide, body #chatWrap, body #chatOpen, body #bagBox, body .diablo-box,
body.touch.touch #stats, body.touch.touch #mmapWrap, body.touch.touch #mobileInfoBtn,
body.touch.touch #mobileInfoPanel, body.touch.touch #bagBox.mu-win {
  background:var(--gothic-metal);
  border-color:var(--gothic-edge);
  color:var(--gothic-text);
  box-shadow:inset 0 1px #e3ac7230,0 3px 10px #000b;
}
body #stats::after, body.touch.touch #tabBar::before {
  content:"";
  display:block;
  position:absolute;
  inset:-2px;
  z-index:1;
  pointer-events:none;
  border:12px solid transparent;
  border-image:url('gothic-frame.svg') 32 stretch;
}
body #stats #heroTitle, body.touch.touch #stats #heroTitle,
body.touch.touch #mobileInfoBtn {
  font-family:Georgia,serif;
  font-weight:700;
  color:#ffe3c7;
}
body #avatarRing, body.touch.touch #stats #avatarRing {
  background:radial-gradient(ellipse at 50% 65%,#471611,#120d0c 72%);
  border-color:#cb8c55;
  box-shadow:inset 0 0 0 2px #110806,0 2px 5px #000;
}
body #hpFill { background:linear-gradient(#fc371d,#aa1109); }
body #xpFill { background:linear-gradient(#9fde53,#307522); }
body.touch.touch #tabBar {
  background:linear-gradient(180deg,#262731,#101116 25%,#09090c 83%,#351415);
  border-top-color:#af7852;
  gap:0;
  padding-inline:calc(10px + var(--sa-l,0px)) calc(10px + var(--sa-r,0px));
}
body.touch.touch #tabBar .tab-b {
  border-radius:0;
  border-inline-end:1px solid #a06b494d;
}
body.touch.touch #tabBar .tab-b .tb-tx {
  font:700 clamp(10px,calc(var(--lw,740px)*.017),16px)/1.1 Georgia,serif;
  color:#f2cfaa;
}
body.touch.touch #tabBar .tab-b .tb-ic {
  width:29px;height:29px;
  filter:sepia(.45) saturate(1.5) drop-shadow(0 2px 2px #000);
}
body.touch.touch #stick {
  border-color:#b08568;
  background:radial-gradient(circle,#311e1a70,#0b0a0beb 82%);
  box-shadow:inset 0 0 0 2px #000b,0 3px 9px #000a;
}
body.touch.touch #stickNub {
  border-color:#d99867;
  background:radial-gradient(circle at 36% 24%,#a6a4a6,#514d53 33%,#19161b 71%,#ba5526);
  box-shadow:0 2px 7px #000, inset 0 -2px 3px #f89254;
}
body.touch.touch #autoBtns .auto-btn, body.touch.touch .spell-btn,
body.touch.touch #potBtn, body.touch.touch #atkBtn, body.touch.touch #skillBtn {
  background:radial-gradient(circle at 48% 40%,#352623,#120d0d 75%);
  border-color:#ad714b;
  box-shadow:inset 0 0 0 2px #09080c,0 2px 6px #000a;
}
body.touch.touch #atkBtn {
  border-color:#ffac58;
  box-shadow:inset 0 0 9px #ff671fa0,0 0 10px #e8552380;
}
body.touch.touch .spell-btn.ready { border-color:#e4aa72; }
body.touch.touch #bagBox .mu-titlebar { background:#191419;color:#f6ddc4;border-color:#684932; }
body.touch.touch #bagViews { border-color:#684932; }
body.touch.touch #bagViews button[aria-selected='true'] { background:#392921;color:#ffe1bf;border-color:#c88d62; }
body.touch.touch #bagBox .character-preview { background:radial-gradient(ellipse at 50% 55%,#393541,#101014 72%); }
body.touch.touch #bagBox .mu-inv .inv-cell { background:#18171d;border-color:#5f4940; }
body.touch.touch #bagBox .mu-inv .inv-cell.equipped { background:#2c2122;border-color:#b7875d;box-shadow:inset 0 0 0 1px #b7875d; }
body.touch.touch #bagItemDetail { border-color:#684932; }
body.touch.touch #bagItemDetail button { background:#542e22;border-color:#d49766;color:#fff1d9; }

/* Forged icon artwork for permanent actions. Class spell symbols remain dynamic. */
body.touch.touch :is(#atkBtn,#potBtn,#mobileInfoBtn,#tabBar [data-tab='inv'],
  #tabBar [data-tab='skills'],#tabBar [data-tab='missoes'],#mobileMoreBtn) {
  --forge-icon:url('forge-icons.svg?v=56');
}
body.touch.touch #atkBtn, body.touch.touch #potBtn {
  font-size:0;
  position:absolute;
  background:radial-gradient(circle at 42% 35%,#2d2527,#0a090d 70%);
}
body.touch.touch #atkBtn {
  border:2px solid #ffc074;
  box-shadow:inset 0 0 0 2px #6c2b15,inset 0 0 13px #ff802eae,0 0 13px #ef621c90,0 3px 8px #000c;
}
body.touch.touch #atkBtn::before, body.touch.touch #potBtn::before,
body.touch.touch #mobileInfoBtn::before,
body.touch.touch #tabBar :is([data-tab='inv'],[data-tab='skills'],[data-tab='missoes'],#mobileMoreBtn) .tb-ic::before {
  content:'';
  display:block;
  width:var(--forge-size,25px);
  height:var(--forge-size,25px);
  background:var(--forge-icon) var(--forge-pos,0%) center / 600% 100% no-repeat;
  filter:drop-shadow(0 2px 2px #000b);
  pointer-events:none;
}
body.touch.touch #atkBtn::before { --forge-size:65%; }
body.touch.touch #potBtn::before { --forge-size:72%; --forge-pos:60%; }
body.touch.touch #mobileInfoBtn::before { --forge-pos:80%; flex:none; }
body.touch.touch #tabBar [data-tab='inv'] { --forge-pos:20%; }
body.touch.touch #tabBar [data-tab='skills'] { --forge-pos:0%; }
body.touch.touch #tabBar [data-tab='missoes'] { --forge-pos:40%; }
body.touch.touch #tabBar #mobileMoreBtn { --forge-pos:100%; }
body.touch.touch #tabBar :is([data-tab='inv'],[data-tab='skills'],[data-tab='missoes'],#mobileMoreBtn) .tb-ic {
  width:32px;height:32px; flex:0 0 32px;
  display:grid;place-items:center;
  font-size:0; background:none; filter:none;
  --forge-size:31px;
}
body.touch.touch #tabBar .tab-b {
  background-image:linear-gradient(180deg,#f2c79614,transparent 25%,#0007);
  box-shadow:inset 0 1px #ffe1b123,inset 0 -2px #8b422d56;
}
body.touch.touch .spell-btn {
  box-shadow:inset 0 0 0 2px #1a0e0d,inset 0 1px 4px #f6ae7a69,0 2px 5px #000b;
}