/* ---------- item level badge ----------
   itemLevelBadge() (js/03-art-base.js) puts an item's level ("Lv.57", or an
   old piece's rarity name) on its picture. White text with a dark outline on
   a dark tab, edged in the level's colour, so it reads on every era's tile —
   from the pale Crude grey to the animated late-era backgrounds. */
.homeGearCard,.itemframe,.potentialItem,.potentialIcon,.playerGear .slot,.gearShelf .slot{position:relative}
.ilv{position:absolute;left:50%;bottom:2px;z-index:3;transform:translateX(-50%);
  padding:0 4px;border:1px solid var(--ilv,#9a9186);border-radius:4px;
  background:rgba(6,8,18,.8);color:#fff;
  font:800 10px/13px 'Work Sans',system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;
  text-shadow:-1px -1px 0 #05060c,1px -1px 0 #05060c,-1px 1px 0 #05060c,1px 1px 0 #05060c;
  pointer-events:none}

/* home equipment: the picture fills the whole card, level on top of it */
.homeGearCard{height:clamp(58px,15.5vw,70px)}
.homeGearCard.filled{padding:0;align-items:stretch;background:#141a3a;
  border-color:color-mix(in srgb,var(--quality) 80%,#fff)}
.homeGearCard.filled .aicon{width:100%;height:100%;padding:2px;border-radius:7px;object-fit:contain}
.homeGearCard .ilv{bottom:3px;font-size:11px;line-height:14px}

/* the forge stack's small tiles */
.forgerow .foundrow .fitem{position:relative}
.forgerow .foundrow .fitem .ilv{bottom:1px;padding:0 2px;border-radius:3px;font-size:8px;line-height:10px}

/* equipment list: the badge sits on the picture, above the name and odds */
.potentialItem .ilv{top:3px;bottom:auto;left:3px;transform:none;font-size:8.5px;line-height:11px;padding:0 3px}
.potentialIcon{display:inline-flex;flex:none}
.potentialIcon .ilv{font-size:11px;line-height:14px}

/* ---------- era rows ----------
   The forge odds sheet, its equipment list header and the auto-forge era
   filter show each era in its own tile colours and animation (the
   `ebg eraN` classes from css/era-bg.css), so text goes white with an
   outline to stay readable on all of them. */
.sheet .eraOdds{background:transparent!important;overflow:hidden}
.sheet .eraOdds summary.ebg,.sheet .erarow.ebg{
  color:#fff;border:1px solid rgba(255,255,255,.18);
  text-shadow:-1px -1px 0 #05060c,1px -1px 0 #05060c,-1px 1px 0 #05060c,1px 1px 0 #05060c}
.sheet .eraOdds summary.ebg{border-radius:6px}
.sheet .eraOdds[open] summary.ebg{border-radius:6px 6px 0 0}
.sheet .erarow.ebg span,.sheet .erarow.ebg b{color:#fff}
.sheet .eraOdds summary.ebg .eraValues b+b{background:rgba(0,0,0,.3)}

/* ---------- the home forge's level box ---------- */
/* relative only to hold .fbEra; clear the offsets older sheets set for their absolute layouts */
.forgelvl{position:relative;inset:auto;isolation:isolate}
.fbEra{position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:.6;pointer-events:none}
.forgelvl b{text-shadow:0 1px 2px #05060c!important}
/* gear-slot tiles keep their power value along the bottom edge, so the
   level goes across the top of the picture there */
.slot .ilv{top:4px;bottom:auto}

/* corner badges (socketMark): gem socket top-left, refine level top-right */
.sockb,.refb{position:absolute;top:3px;z-index:3;pointer-events:none}
.sockb{left:3px;width:15px;height:15px;border-radius:50%;box-sizing:border-box;
  background:rgba(6,8,18,.8);border:1.5px solid #9a9186;display:flex;align-items:center;justify-content:center}
.sockb i{width:9px;height:9px;border-radius:50%;box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),inset 1px 1px 0 rgba(255,255,255,.35)}
.sockb.empty i{background:#2a221a;box-shadow:inset 0 1px 2px rgba(0,0,0,.7)}
.refb{right:3px;padding:0 4px;border-radius:4px;background:rgba(6,8,18,.8);border:1px solid #ffc023;color:#fff;
  font:800 10px/13px 'Work Sans',system-ui,sans-serif;
  text-shadow:-1px -1px 0 #05060c,1px -1px 0 #05060c,-1px 1px 0 #05060c,1px 1px 0 #05060c}
.itemframe .sockb{top:4px;left:4px;width:18px;height:18px}
.itemframe .sockb i{width:11px;height:11px}
.itemframe .refb{top:4px;right:4px;font-size:11px;line-height:14px}
.slot .ilv{top:auto;bottom:16px}
.slot .role{top:22px}

/* a piece forged with stars: the stars sit in the same bottom-center pill, in gold, before the level */
.ilv.starred{box-shadow:0 0 5px rgba(255,207,106,.55)}
.ilv .ilvStar{color:#ffd36a;font-weight:900;letter-spacing:0}
.homeGearCard .ilv.starred,.forgerow .foundrow .fitem .ilv.starred{white-space:nowrap}