/* The Blacksmith (blacksmith.js). Builds on decks.css and shop.css. */
.dcell .blv { position: absolute; left: 6px; top: 6px; z-index: 6; font: 700 12px var(--hud, system-ui); letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; background: rgba(3,7,11,.85); color: #9fe6ff; border: 1px solid rgba(114,220,255,.4); }
.dcell .blv.ready { color: #ffb35a; border-color: rgba(255,179,90,.7); box-shadow: 0 0 10px -2px #ffb35a; }
.dcell .bxp { position: absolute; left: 8%; right: 8%; bottom: 4px; height: 3px; z-index: 6; background: rgba(255,255,255,.12); }
.dcell .bxp::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, #18BFFF, #ffb35a); }

.blevel { display: grid; gap: 4px; }
.blevel div { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.blevel b { font: 700 15px var(--hud, system-ui); text-transform: uppercase; letter-spacing: .06em; color: #e8f2f8; }
.blevel span, .blevel small { color: #8fa3b0; font-size: 12.5px; }
.blevel i { position: relative; height: 6px; background: rgba(255,255,255,.1); }
.blevel i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, #18BFFF, #ffb35a); box-shadow: 0 0 10px #ffb35a88; }

.bslots { display: grid; gap: 10px; }
.bslot { display: grid; gap: 6px; padding: 10px; background: rgba(3,7,11,.6); border: 1px solid rgba(114,220,255,.14); }
.bslot.open { border-color: rgba(255,179,90,.45); }
.bslot.forged.on { border-color: rgba(143,208,184,.5); }
.bslot.locked { opacity: .6; }
.bsh { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bsh b { font: 700 13px var(--hud, system-ui); letter-spacing: .14em; text-transform: uppercase; color: #E0BE72; }
.bsh span { font-size: 12px; color: #8fa3b0; }
.bab { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 10px; min-height: 48px; color: #e8f2f8; font: inherit; cursor: pointer;
  background: rgba(14,24,34,.85); border: 1px solid rgba(114,220,255,.18); }
.bab:not(:disabled):hover, .bab[data-armed] { border-color: #ffb35a; box-shadow: inset 0 0 22px -12px #ffb35a; }
.bab:disabled { cursor: default; }
.bab b { display: block; font: 700 14px var(--hud, system-ui); text-transform: uppercase; letter-spacing: .06em; }
.bab small { display: block; font-size: 12.5px; color: #a9bbc6; }
.bab em { font: 700 12px var(--hud, system-ui); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #ffb35a; white-space: nowrap; }
.bab.chosen { cursor: pointer; }
.bsw { position: relative; width: 46px; height: 26px; flex: none; }
.bsw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.bsw i { position: absolute; inset: 0; border-radius: 13px; background: #26323c; border: 1px solid rgba(255,255,255,.15); transition: background .2s; }
.bsw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8fa3b0; transition: transform .2s, background .2s; }
.bsw input:checked + i { background: #1d4a3d; }
.bsw input:checked + i::after { transform: translateX(20px); background: #8FD0B8; }
.bsw input:focus-visible + i { outline: 2px solid #18BFFF; outline-offset: 2px; }
@media (max-width: 520px) { .bab { grid-template-columns: 1fr; } .bab em { justify-self: start; } .bslot.forged .bab { grid-template-columns: 1fr auto; } }
.bab .bmeans { display: block; margin-top: 3px; font-size: 12px; font-style: italic; color: #b9c9d3; }
.sbal .brefund { display: block; margin-top: 6px; font: 500 12.5px/1.4 var(--sans, system-ui); letter-spacing: 0; text-transform: none; color: #ffb35a; }
/* how it works and when to use it, under every ability (forge-tips.js) */
.bab small.bhow, .bab small.btip { margin-top: 4px; line-height: 1.4; }
.bab small u { text-decoration: none; display: inline-block; margin-right: 4px; font: 700 10.5px var(--hud, system-ui); letter-spacing: .1em; text-transform: uppercase; color: #72dcff; }
.bab small.btip { color: #cfe3c8; }
.bab small.btip u { color: #8FD0B8; }