/* ===== shared UI frame (slate panel, bronze trim + corner caps, engraved Elder Futhark runes on the sides) — applied to every window and HUD panel ===== */
.stage{--uf-fill1:#303a4b;--uf-fill2:#1b222e;--uf-bronze:#b8914a;--uf-bronze-d:#6b5128;--uf-text:#eef0f4;--uf-muted:#a3b2c7}
/* windows */
.stage .hero,.stage .bag{
  --fg:var(--uf-text);--muted:var(--uf-muted);--line:rgba(184,145,74,.4);--accent:#7fd3d1;--on-accent:#10232a;--panel:rgba(20,26,36,.85);
  color:var(--uf-text);border:3px solid var(--uf-bronze-d);border-radius:6px;
  background:
    linear-gradient(#e2c07a,#8f6c34) no-repeat left top/30px 5px,linear-gradient(#e2c07a,#8f6c34) no-repeat left top/5px 30px,linear-gradient(#e2c07a,#8f6c34) no-repeat right top/30px 5px,linear-gradient(#e2c07a,#8f6c34) no-repeat right top/5px 30px,linear-gradient(#e2c07a,#8f6c34) no-repeat left bottom/30px 5px,linear-gradient(#e2c07a,#8f6c34) no-repeat left bottom/5px 30px,linear-gradient(#e2c07a,#8f6c34) no-repeat right bottom/30px 5px,linear-gradient(#e2c07a,#8f6c34) no-repeat right bottom/5px 30px,
        linear-gradient(var(--uf-fill1),var(--uf-fill2));
  background-origin:border-box;background-clip:border-box;
  box-shadow:inset 0 0 0 1px #e0bd75,inset 0 0 0 3px #12161e,inset 0 0 22px rgba(0,0,0,.55),0 0 0 1px #0c0e13,0 12px 32px rgba(0,0,0,.6);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.stage .bag,.stage .hero{box-sizing:border-box}
.stage .bag{padding:16px 30px;background:
    linear-gradient(#e2c07a,#8f6c34) no-repeat left top/30px 5px,linear-gradient(#e2c07a,#8f6c34) no-repeat left top/5px 30px,
    linear-gradient(#e2c07a,#8f6c34) no-repeat right top/30px 5px,linear-gradient(#e2c07a,#8f6c34) no-repeat right top/5px 30px,
    linear-gradient(#e2c07a,#8f6c34) no-repeat left bottom/30px 5px,linear-gradient(#e2c07a,#8f6c34) no-repeat left bottom/5px 30px,
    linear-gradient(#e2c07a,#8f6c34) no-repeat right bottom/30px 5px,linear-gradient(#e2c07a,#8f6c34) no-repeat right bottom/5px 30px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='88' viewBox='0 0 18 88' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(4 4)'><path d='M3 13V1M3 4L8 1M3 8L8 5' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1M3 4L8 1M3 8L8 5' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 26)'><path d='M3 13V1L8 5V13' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1L8 5V13' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 48)'><path d='M3 13V1M3 3L8 7L3 11' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1M3 3L8 7L3 11' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 70)'><path d='M3 13V1M3 1L8 4M3 6L8 9' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1M3 1L8 4M3 6L8 9' stroke='%23d6b46a' stroke-opacity='.9'/></g></svg>") left 6px top 8px/18px 88px no-repeat space,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='88' viewBox='0 0 18 88' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(4 4)'><path d='M3 13V1H6L8 3V5L6 7H3M3 7L8 13' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1H6L8 3V5L6 7H3M3 7L8 13' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 26)'><path d='M7 2L3 7L7 12' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M7 2L3 7L7 12' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 48)'><path d='M2 2L8 12M8 2L2 12' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M2 2L8 12M8 2L2 12' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 70)'><path d='M3 13V1H6L8 3V5L6 7H3' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1H6L8 3V5L6 7H3' stroke='%23d6b46a' stroke-opacity='.9'/></g></svg>") right 6px top 8px/18px 88px no-repeat space,
    linear-gradient(var(--uf-fill1),var(--uf-fill2));background-origin:border-box;background-clip:border-box}
.stage .hero .sl-body{padding:12px 30px;background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='88' viewBox='0 0 18 88' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(4 4)'><path d='M3 13V1M3 4L8 1M3 8L8 5' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1M3 4L8 1M3 8L8 5' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 26)'><path d='M3 13V1L8 5V13' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1L8 5V13' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 48)'><path d='M3 13V1M3 3L8 7L3 11' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1M3 3L8 7L3 11' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 70)'><path d='M3 13V1M3 1L8 4M3 6L8 9' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1M3 1L8 4M3 6L8 9' stroke='%23d6b46a' stroke-opacity='.9'/></g></svg>") left 4px top 4px/18px 88px no-repeat space,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='88' viewBox='0 0 18 88' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(4 4)'><path d='M3 13V1H6L8 3V5L6 7H3M3 7L8 13' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1H6L8 3V5L6 7H3M3 7L8 13' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 26)'><path d='M7 2L3 7L7 12' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M7 2L3 7L7 12' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 48)'><path d='M2 2L8 12M8 2L2 12' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M2 2L8 12M8 2L2 12' stroke='%23d6b46a' stroke-opacity='.9'/></g><g transform='translate(4 70)'><path d='M3 13V1H6L8 3V5L6 7H3' transform='translate(.9 .9)' stroke='%23070b12' stroke-opacity='.75'/><path d='M3 13V1H6L8 3V5L6 7H3' stroke='%23d6b46a' stroke-opacity='.9'/></g></svg>") right 4px top 4px/18px 88px no-repeat space}
.stage .sl-title{justify-content:center;padding:9px 60px;background:linear-gradient(#3a465a,#232c3b);border-bottom:2px solid var(--uf-bronze-d);box-shadow:0 1px 0 #e0bd75}
.stage .sl-title h2,.stage .bag h2{margin:0;font:800 17px/1.2 var(--font-display);letter-spacing:.06em;text-align:center;color:#f3e7c6;text-shadow:0 1px 0 #000,0 0 8px rgba(224,189,117,.35)}
.stage .bag h2{margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--uf-bronze-d)}
.stage .hero .close,.stage .bag .close{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:700 12px var(--font-display);color:#f3e7c6;background:linear-gradient(#4a3a20,#2a2012);border:1px solid var(--uf-bronze);border-radius:3px;padding:4px 9px;cursor:pointer}
.stage .bag .close{top:12px;transform:none}
.stage .hero .close:hover,.stage .bag .close:hover{filter:brightness(1.25)}
.stage .bag h3,.stage .inv h4{color:#d9c28d}
/* status window contents */
.stage .sl-pts{background:rgba(0,0,0,.28);border:1px solid var(--uf-bronze-d);color:var(--uf-text)}
.stage .sl-pts b{color:#ffcf6b}
.stage .sl-sec{background:#3b4658;border:1px solid var(--uf-bronze-d);color:#f3e7c6}
.stage .st .srow{border-bottom:1px solid rgba(184,145,74,.25)}
.stage .st .nm{background:#2b3547;border:1px solid var(--uf-bronze);color:#f3e7c6}
.stage .st .val{color:#fff}
.stage .st .ef{color:var(--uf-muted)}
.stage .st .bar2{background:#121821;border:1px solid var(--uf-bronze-d)}
.stage .align{border-top:1px solid var(--uf-bronze-d)}
.stage .align h3{color:#f3e7c6}
.stage .align svg{color:#cdd6e4}
.stage .align small,.stage .sl-note,.stage .bag small{color:var(--uf-muted)}
/* equipment slots */
.stage .eq{border:1px solid #121821;background:rgba(0,0,0,.28)}
.stage .eq .eqs{border:1px solid #56647c;background:rgba(14,20,31,.72);color:#9db0c9}
.stage .eq .eqs small{color:#7f93b0}
.stage .eq .eqs.on{border-color:var(--uf-bronze);background:linear-gradient(rgba(36,50,82,.8),rgba(18,26,46,.88));color:#f0e2bd}
.stage .eq .eqs.on small{color:#cdb784}
.stage .eq .eqs.on:hover{border-color:#f0cf86}
/* item grid: Diablo II / SCUM style, cells touching, no gaps */
.stage .invgrid{outline:2px solid var(--uf-bronze);background-color:#0b1320;
  background-image:linear-gradient(rgba(70,160,255,.85) 1px,transparent 1px),linear-gradient(90deg,rgba(70,160,255,.85) 1px,transparent 1px);
  box-shadow:inset 0 0 14px rgba(40,120,230,.4),0 0 10px rgba(40,120,230,.25)}
.stage .skill{background:rgba(0,0,0,.2);border:1px solid var(--uf-bronze-d);color:var(--uf-text)}
.stage .cell{border-color:var(--uf-bronze-d)}
/* fashion window (its own stylesheet uses cream colours) */
.stage #fashion-window .fashion-lbl,.stage #fashion-window .fashion-picker h3{color:#f3e7c6}
.stage #fashion-window .fashion-hint,.stage #fashion-window .fashion-nm,.stage #fashion-window .fashion-grp{color:var(--uf-muted)}
.stage #fashion-window .fashion-btn{color:#f3e7c6;background:linear-gradient(#3b475b,#252e3e);border:1px solid var(--uf-bronze);border-radius:4px}
.stage #fashion-window .fashion-btn[aria-pressed="true"]{background:linear-gradient(#a37b34,#6e5224);color:#fff;text-shadow:0 1px 0 #000}
.stage #fashion-window .fashion-mid{border:1px solid var(--uf-bronze-d);background:radial-gradient(ellipse at 50% 35%,#3c4a63,#1e2634 75%);border-radius:4px}
.stage #fashion-window .fashion-slot{border:1px solid #56647c;border-radius:0;background:rgba(14,20,31,.72);color:#b9c6d9}
.stage #fashion-window .fashion-slot[data-filled="true"]{border-color:var(--uf-bronze);background:linear-gradient(rgba(36,50,82,.8),rgba(18,26,46,.88))}
.stage #fashion-window .fashion-slot.fashion-on{box-shadow:0 0 0 2px #e0bd75}
.stage #fashion-window .fashion-slot-ico{background:rgba(255,255,255,.06)}
.stage #fashion-window .fashion-picker{background:rgba(0,0,0,.25);border:1px solid var(--uf-bronze-d);border-radius:0}
.stage #fashion-window .fashion-ln line{stroke:#b8914a}
.stage #fashion-window .fashion-ln circle{fill:#b8914a}
/* HUD panels */
.stage .top,.stage .clock,.stage .bar,.stage .castbar,.stage .toast{
  --fg:var(--uf-text);--muted:var(--uf-muted);--line:rgba(184,145,74,.45);--accent:#7fd3d1;--on-accent:#10232a;
  color:var(--uf-text);border:2px solid var(--uf-bronze-d);border-radius:5px;
  background:linear-gradient(#e2c07a,#8f6c34) no-repeat left top/14px 3px,linear-gradient(#e2c07a,#8f6c34) no-repeat left top/3px 14px,linear-gradient(#e2c07a,#8f6c34) no-repeat right top/14px 3px,linear-gradient(#e2c07a,#8f6c34) no-repeat right top/3px 14px,linear-gradient(#e2c07a,#8f6c34) no-repeat left bottom/14px 3px,linear-gradient(#e2c07a,#8f6c34) no-repeat left bottom/3px 14px,linear-gradient(#e2c07a,#8f6c34) no-repeat right bottom/14px 3px,linear-gradient(#e2c07a,#8f6c34) no-repeat right bottom/3px 14px,linear-gradient(var(--uf-fill1),var(--uf-fill2));
  background-origin:border-box;
  box-shadow:inset 0 0 0 1px #e0bd75,inset 0 0 14px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.5);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.stage .castbar div{background:#121821}
.stage .slot{--fg:var(--uf-text);--muted:var(--uf-muted);--line:rgba(184,145,74,.5);color:var(--uf-text);background:linear-gradient(var(--uf-fill1),var(--uf-fill2));border:2px solid var(--uf-bronze-d);box-shadow:inset 0 0 0 1px #e0bd75;border-radius:4px}
/* windows can be dragged by their title bar */
.stage .sl-title,.stage .bag>h2{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}

/* ===== skill icons + tooltip ===== */
.stage .skill[data-sk]{align-items:center}
.skico{flex:none;width:42px;height:42px;border-radius:8px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.5);margin-right:10px}
.slot .ico.sico{left:3px;top:3px;right:3px;bottom:3px;width:auto;height:auto;margin:0;border-radius:7px;background-color:transparent;background-size:cover;background-position:center;box-shadow:none}
.hbrow .slot .ico.sico{width:auto;height:auto;margin:0}
.hbrow .slot .key{z-index:2;text-shadow:0 0 3px #000,0 0 3px #000}
.slot .cd,.slot .cdn{z-index:2}
#skTip{position:fixed;z-index:99999;width:280px;max-width:calc(100vw - 12px);padding:10px 12px;pointer-events:none;color:#e9e4d6;font:13px/1.45 var(--font-body,system-ui);background:linear-gradient(#222733,#161a23);border:2px solid #9a7a45;border-radius:6px;box-shadow:0 6px 22px rgba(0,0,0,.65),inset 0 0 0 1px rgba(0,0,0,.6)}
#skTip[hidden]{display:none}
#skTip .h{display:flex;gap:10px;align-items:center}
#skTip .h i{flex:none;width:44px;height:44px;border-radius:8px;background-size:cover}
#skTip .h b{display:block;font:700 15px var(--font-display,system-ui);color:#f0d9a0}
#skTip .h small{color:#b9b2a0;font-size:12px}
#skTip .bd{margin:7px 0 4px;display:flex;gap:5px;flex-wrap:wrap}
#skTip .bd em{font-style:normal;font-size:11px;padding:1px 7px;border:1px solid;border-radius:10px}
#skTip .bd em.fb{color:#ff8a8a;border-color:#ff8a8a}
#skTip .bd em.ul{color:#ffd36a;border-color:#ffd36a}
#skTip p{margin:4px 0 7px;color:#ddd7c6}
#skTip .r{display:flex;justify-content:space-between;border-top:1px solid rgba(154,122,69,.35);padding:2px 0;color:#b9b2a0}
#skTip .r b{color:#f2ecda}
#skTip .inf{margin-top:6px;padding-top:5px;border-top:1px solid rgba(154,122,69,.5);color:#9fdcff;font-size:12px}