/* ═══════════════════════════════════════════════════════════════════
   Blood & Stone — spoločný vzhľad modalov (rovnaký duch ako login)
   Použitie: .skills-panel / vnútorný box modalu dostane triedu .bs-panel,
   nadpis .bs-title, zatváranie .bs-x, tlačidlá .bs-btn (+ -primary/-danger).
   Načítava sa v play.html aj play_mobile.html PO ich vlastných štýloch.
   ═══════════════════════════════════════════════════════════════════ */
/* fonts (Cinzel 400–900, Crimson Pro) are linked in the <head> of play.html / play_mobile.html */

:root {
  --bs-gold:  #e2c47e;   /* nadpisy, názvy */
  --bs-text:  #f0e6cc;   /* bežný text */
  --bs-sub:   #b9ab8a;   /* vedľajší text */
  --bs-dim:   #a8935f;   /* tlmený text, popisky */
  --bs-hair:  rgba(201,168,76,.18);
  --bs-frame: 40px;      /* hrúbka rámu (border-image) */

  --bs-fs-title: 19px;
  --bs-fs-head:  14px;
  --bs-fs-body:  17px;
  --bs-fs-small: 14px;
  --bs-fs-num:   16px;
  --bs-fs-btn:   13px;
}

/* ── Panel: rám + kameň ─────────────────────────────────────────── */
.bs-panel,
.skills-panel.bs-panel {
  position: relative;
  isolation: isolate;
  background: none;
  border: none;
  box-shadow: none;
  padding: calc(var(--bs-frame) * .95) calc(var(--bs-frame) * .6) calc(var(--bs-frame) * .55);
  color: var(--bs-text);
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: var(--bs-fs-body);
}
/* kameň — siaha po stred kovového pásu rámu */
.bs-panel::before {
  content: '';
  position: absolute;
  inset: calc(var(--bs-frame) * .22);
  z-index: -2;
  background:
    linear-gradient(rgba(6,5,4,.40), rgba(6,5,4,.55)),
    url(/static/ui/stone.webp?v=1) 0 0 / 384px repeat;
  box-shadow: 0 24px 60px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.6);
}
/* rám */
.bs-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: var(--bs-frame) solid transparent;
  border-image: url(/static/ui/frame.webp?v=1) 110 round;
}

/* ── Nadpis: bronzová tabuľka cez horný okraj ───────────────────── */
.bs-title {
  position: absolute;
  left: 50%;
  top: calc(var(--bs-frame) * -.62);
  transform: translateX(-50%);
  z-index: 3;
  height: 56px;
  max-width: calc(100% - 110px);
  padding: 0 18px 3px;
  border-style: solid;
  border-color: transparent;
  border-width: 0 48px;
  border-image: url(/static/ui/header.webp?v=1) 0 115 fill / 0 48px stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: var(--bs-fs-title);
  letter-spacing: .12em;
  color: #2a1a06;
  text-shadow: 0 1px 0 rgba(255,226,150,.45);
  white-space: nowrap;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.7));
}
.bs-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Zatváracie X ───────────────────────────────────────────────── */
button.bs-x {
  position: absolute;
  top: calc(var(--bs-frame) * -.42);
  right: calc(var(--bs-frame) * -.42);
  z-index: 4;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: url(/static/ui/close.webp?v=1) center / contain no-repeat;
  box-shadow: none;
  font-size: 0;
  color: transparent;
  overflow: visible;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.8));
  transition: filter .15s, transform .1s;
}
button.bs-x::after { display: none; }
button.bs-x:hover:not(:disabled) {
  background: url(/static/ui/close.webp?v=1) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.8)) brightness(1.25);
}
button.bs-x:active:not(:disabled) { transform: scale(.94); box-shadow: none; }

/* ── Tlačidlá ───────────────────────────────────────────────────── */
button.bs-btn {
  position: relative;
  height: 34px;
  min-width: 84px;
  padding: 0 4px 2px;
  border-style: solid;
  border-color: transparent;
  border-width: 0 22px;
  border-image: url(/static/ui/btn_secondary.webp?v=1) 0 67 fill / 0 22px stretch;
  background: none;
  box-shadow: none;
  overflow: visible;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: var(--bs-fs-btn);
  letter-spacing: .12em;
  text-transform: none;
  color: #e6dcc0;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.6));
  transition: filter .15s, transform .1s;
}
button.bs-btn::after { display: none; }
button.bs-btn:hover:not(:disabled) {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: #fff4dc;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)) brightness(1.2);
}
button.bs-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
button.bs-btn:disabled {
  opacity: 1;
  filter: grayscale(.85) brightness(.55);
  cursor: default;
}
button.bs-btn-primary {
  border-image-source: url(/static/ui/btn_primary.webp?v=1);
  color: #fff1cf;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(40,20,0,.9);
}
button.bs-btn-primary:hover:not(:disabled) { color: #fffaf0; }
button.bs-btn-danger {
  border-image-source: url(/static/ui/btn_danger.webp?v=1);
  color: #ffe6d6;
}
button.bs-btn-lg {
  height: 42px;
  min-width: 150px;
  font-size: 14px;
  border-width: 0 28px;
  border-image-width: 0 28px;
}
button.bs-btn-sm {
  height: 30px;
  min-width: 72px;
  font-size: 12px;
  border-width: 0 19px;
  border-image-width: 0 19px;
}

/* ── Záložky ────────────────────────────────────────────────────── */
.bs-tabs { display: flex; gap: 2px; align-items: flex-end; }
button.bs-tab {
  height: 36px;
  min-width: 120px;
  padding: 5px 20px 0;
  border: none;
  background: url(/static/ui/tab.webp?v=1) center / 100% 100% no-repeat;
  box-shadow: none;
  overflow: visible;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: var(--bs-fs-head);
  letter-spacing: .12em;
  text-transform: none;
  color: #d8c79c;
  text-shadow: 0 1px 2px #000;
  filter: brightness(.68) saturate(.75);
  transition: filter .15s;
}
button.bs-tab::after { display: none; }
button.bs-tab:hover:not(:disabled) {
  background: url(/static/ui/tab.webp?v=1) center / 100% 100% no-repeat;
  box-shadow: none;
  color: #efe2bd;
  filter: brightness(.88) saturate(.9);
}
button.bs-tab:active:not(:disabled) { transform: none; box-shadow: none; }
button.bs-tab.on,
button.bs-tab.on:hover:not(:disabled) { filter: none; color: var(--bs-gold); }

/* ── Oddeľovač ──────────────────────────────────────────────────── */
.bs-rule {
  display: block;
  width: 100%;
  height: 16px;
  margin: -3px 0 6px;
  background: url(/static/ui/divider.webp?v=1) center / 100% 100% no-repeat;
  opacity: .9;
  flex-shrink: 0;
}

/* ── Nadpis sekcie ──────────────────────────────────────────────── */
.bs-panel .panel-title,
.bs-head {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: var(--bs-fs-head);
  letter-spacing: .1em;
  text-transform: none;
  color: var(--bs-gold);
  background: none;
  border: none;
  border-bottom: 1px solid var(--bs-hair);
  padding: 2px 2px 6px;
  margin: 0 0 4px;
  text-shadow: 0 1px 2px #000;
}

/* ── Slot na item ───────────────────────────────────────────────── */
.bs-slot {
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Vstupné polia (ako na logine) ──────────────────────────────── */
.bs-panel input[type=number],
.bs-panel input[type=text],
.bs-panel select,
.bs-input {
  background: rgba(4,3,2,.62);
  border: 1px solid #2c2416;
  border-top-color: #15110a;
  border-bottom-color: #4a3c22;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.85);
  color: #e6dcc0;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: var(--bs-fs-num);
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
  outline: none;
  border-radius: 0;
}
.bs-panel input:focus,
.bs-panel select:focus,
.bs-input:focus {
  border-color: #8a6a2a;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.85), 0 0 0 2px rgba(201,168,76,.16);
}

/* ── Hláška (nákup ok / chyba) ──────────────────────────────────── */
.bs-msg {
  min-height: 24px;
  padding: 2px 4px;
  font-size: 15px;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  transition: opacity .25s;
}
.bs-msg.ok  { color: #8fdc8a; }
.bs-msg.err { color: #ff9a86; }

/* ── NPC medailón (avatar) ──────────────────────────────────────── */
.bs-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  border: 2px solid #8a6a2a;
  box-shadow: 0 0 0 2px #1a120a, 0 4px 10px rgba(0,0,0,.8);
  background: #120e0a;
  flex-shrink: 0;
}

/* ── Scrollbar vnútri modalov ───────────────────────────────────── */
.bs-panel * { scrollbar-width: thin; scrollbar-color: #7a5d2a rgba(0,0,0,.35); }
.bs-panel ::-webkit-scrollbar { width: 8px; height: 8px; }
.bs-panel ::-webkit-scrollbar-track { background: rgba(0,0,0,.35); }
.bs-panel ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #5a4220, #8a6a2a, #5a4220); border-radius: 4px; }

/* ── Malý dialóg (množstvo, potvrdenie) ─────────────────────────── */
.bs-dialog { width: min(420px, 92vw); text-align: center; padding-top: calc(var(--bs-frame) * 1.05); }
.bs-dialog > .bs-title { font-size: calc(var(--bs-fs-title) - 2px); letter-spacing: .08em; max-width: calc(100% - 70px); padding: 0 10px 3px; }
.bs-dialog .bs-dlg-label { font-size: 16px; color: var(--bs-sub); font-style: italic; margin: 2px 0 12px; }
.bs-dialog .bs-dlg-btns { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }

/* ═══ VENDOR ═══════════════════════════════════════════════════════ */
.skills-panel.bs-vendor { width: min(880px, 94vw); height: min(84vh, 920px); display: flex; flex-direction: column; }
.bs-vendor .skills-body { flex: 1; padding: 0 4px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; color: var(--bs-text); }
.bs-vendor-top { display: flex; align-items: flex-end; gap: 14px; padding: 0 4px; flex-shrink: 0; }
.bs-vendor-top .bs-tabs { margin-bottom: -1px; }
.bs-wallet {
  margin-left: auto;
  align-self: center;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-text);
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}
.bs-vendor #vendorMsg { flex-shrink: 0; margin: -2px 0 2px; }
.bs-vendor #vendorBuyPanel { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.bs-vendor #vendorBuyPanel > .panel-title { display: none; }
.bs-vendor #vendorSellPanel { flex: 1; min-height: 0; }

.bs-vendor .vendor-row {
  gap: 14px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--bs-hair);
  align-items: center;
}
.bs-vendor .vendor-row:last-child { border-bottom: none; }
.bs-vendor .vendor-row:hover { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent 70%); }
.bs-vendor .vendor-icon {
  width: 62px; height: 62px;
  border: none;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  overflow: hidden;
}
.bs-vendor .vendor-icon img { width: 46px; height: 46px; object-fit: contain; }
.bs-vendor .vendor-info { gap: 1px; min-width: 0; }
.bs-vendor .vendor-name {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--bs-fs-body);
  color: var(--bs-gold);
  line-height: 1.2;
  text-shadow: 0 1px 2px #000;
}
.bs-vendor .vendor-bundle { color: var(--bs-dim); font-size: var(--bs-fs-small); font-weight: 400; margin-left: 6px; }
.bs-vendor .vendor-preview { font-size: var(--bs-fs-small); color: var(--bs-sub); line-height: 1.4; }
.bs-vendor .vendor-type { font-size: var(--bs-fs-small); color: #93a9bf; letter-spacing: .02em; margin: 0; }
.bs-vendor .vendor-stat-line { font-size: 15px; color: #d9cfb3; line-height: 1.4; }
.bs-vendor .vendor-stat-line + .vendor-stat-line::before { content: "·"; margin: 0 .45em; color: var(--bs-dim); }
.bs-vendor .vendor-stat-line.green { color: #8fd18a; }
.bs-vendor .vendor-preview .vendor-req { display: block; font-size: var(--bs-fs-small); color: var(--bs-dim); margin-top: 1px; }
.bs-vendor .vendor-preview > span:not([class]) {
  display: block;
  font-size: var(--bs-fs-small) !important;
  color: #9c8c6c !important;
  line-height: 1.35;
  margin-top: 2px;
}
.bs-vendor .vendor-info > .vendor-req { font-size: var(--bs-fs-small); margin-top: 2px; }
.bs-vendor .vendor-price {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--bs-text);
  width: auto;
  min-width: 76px;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}
.bs-vendor .vendor-cur-g, .bs-sell-total .vendor-cur-g { color: #d9b25a; margin-left: 2px; font-weight: 600; }
.bs-vendor .vendor-cur-ico { width: 22px; height: 22px; vertical-align: -5px; margin-left: 5px; }
.bs-vendor .vendor-buy { margin-left: 4px; }
.bs-vendor .vendor-qty { width: 60px; height: 30px; text-align: center; padding: 2px 4px; }
.bs-vendor .vendor-row.disabled { opacity: .5; }
.bs-vendor .vendor-row.disabled .vendor-name { color: #8a826f; }

/* predaj: vľavo tvoje veci, vpravo košík */
.bs-sell { display: flex; gap: 22px; height: 100%; min-height: 0; padding-top: 4px; }
.bs-sell-col { display: flex; flex-direction: column; min-height: 0; }
.bs-sell-inv { flex: 1.5; }
.bs-sell-cart { flex: 1; }
.bs-sell-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.bs-sell-cart .vendor-row { padding: 7px 6px; justify-content: space-between; }
.bs-sell-cart .vendor-row .vendor-name { font-size: 16px; }
.bs-sell-cart .vendor-row .vendor-price { min-width: 0; font-size: 16px; }
.bs-sell-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--bs-hair);
}
.bs-sell-total { font-size: 16px; color: var(--bs-dim); }
.bs-sell-total b { font-size: 20px; color: var(--bs-text); font-weight: 600; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* množstvo */
.bs-qty-big { width: 100%; font-size: 24px; text-align: center; padding: 8px 10px; }

/* ═══ FILTRE (textové, nie „pilulky") ══════════════════════════════ */
.bs-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
  padding: 2px 4px 8px;
  flex-shrink: 0;
}
.bs-filters button {
  background: none;
  border: none;
  box-shadow: none;
  padding: 2px 0 3px;
  overflow: visible;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: none;
  color: #a8987a;
  text-shadow: 0 1px 2px #000;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.bs-filters button::after { display: none; }
.bs-filters button:hover:not(:disabled) { background: none; box-shadow: none; color: #efe2bd; border-color: transparent; border-bottom: 2px solid rgba(201,168,76,.35); }
.bs-filters button:active:not(:disabled) { transform: none; box-shadow: none; }
.bs-filters button.active,
.bs-filters button.active:hover:not(:disabled) { color: var(--bs-gold); border-bottom: 2px solid #b8923e; }
.bs-filters-note { margin-left: auto; font-size: var(--bs-fs-small); font-style: italic; color: var(--bs-dim); }

/* rarita na slote: jemná žiara vo vnútri */
.slot-rarity.rarity-uncommon  { box-shadow: inset 0 0 12px rgba(76,175,125,.55); }
.slot-rarity.rarity-rare      { box-shadow: inset 0 0 12px rgba(74,144,217,.6); }
.slot-rarity.rarity-epic      { box-shadow: inset 0 0 13px rgba(155,109,214,.65); }
.slot-rarity.rarity-legendary { box-shadow: inset 0 0 14px rgba(232,160,48,.65); }

/* ═══ VAULT ════════════════════════════════════════════════════════ */
#vaultModal .skills-panel.bs-vault { width: min(780px, 94vw); height: min(84vh, 900px); display: flex; flex-direction: column; }
.bs-vault .skills-body { flex: 1; padding: 0 4px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; max-height: none; color: var(--bs-text); }
.bs-vault-top { display: flex; align-items: flex-end; gap: 14px; padding: 0 4px; flex-shrink: 0; }
.bs-vault-top .bs-tabs { margin-bottom: -1px; }
.bs-vault-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bs-vault .vault-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  justify-items: center;
  align-content: start;
  gap: 8px 6px;
  padding: 4px 4px 10px;
}
.bs-vault .vault-slot {
  width: 68px;
  height: 68px;
  padding: 9px;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  border: none;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s;
}
.bs-vault .vault-slot:hover { border: none; filter: brightness(1.25) drop-shadow(0 0 6px rgba(226,196,126,.35)); }
.bs-vault .vault-slot img { width: 100%; height: 100%; object-fit: contain; position: relative; }
.bs-vault .vault-slot .slot-rarity { position: absolute; inset: 6px; height: auto; pointer-events: none; }
.bs-vault .vault-slot .slot-qty {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff4dc;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
  pointer-events: none;
}
.bs-vault .slot-fallback { font-size: 11px !important; color: var(--bs-dim) !important; }
.bs-vault .vault-empty { color: var(--bs-dim); font-style: italic; text-align: center; padding: 40px 0; font-size: 16px; }

.bs-vault-gold {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 4px 2px;
  border-top: 1px solid var(--bs-hair);
}
.bs-vault-sums { display: flex; gap: 22px; font-size: 15px; color: var(--bs-dim); }
.bs-vault-sums b { margin-left: 5px; font-size: 18px; font-weight: 600; color: var(--bs-text); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.bs-vault-act { display: flex; align-items: center; gap: 8px; }
.bs-vault-act input { width: 110px; height: 34px; }

/* ═══ SPOLOČNÉ DROBNOSTI ═══════════════════════════════════════════ */
.bs-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bs-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 400;
  font-size: var(--bs-fs-small);
  letter-spacing: 0;
  color: var(--bs-dim);
  user-select: none;
}
.bs-check input { margin: 0; width: 14px; height: 14px; accent-color: #b8923e; cursor: pointer; }
.bs-check input:checked + span { color: var(--bs-gold); }
.bs-check:hover span { color: #efe2bd; }
.bs-dialog .bs-dlg-text { font-size: 17px; color: var(--bs-text); margin: 4px 0 6px; text-shadow: 0 1px 2px #000; }

/* slot v mriežke (trade a ďalšie) */
.trade-slot {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 7px;
  flex-shrink: 0;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--bs-dim);
  transition: filter .15s;
}
.trade-slot[style*="pointer"]:hover { filter: brightness(1.25) drop-shadow(0 0 6px rgba(226,196,126,.35)); }
.trade-slot img { width: 100%; height: 100%; object-fit: contain; position: relative; }
.trade-slot .slot-rarity { position: absolute; inset: 5px; pointer-events: none; }
.trade-slot .slot-qty {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 13px;
  color: #fff4dc;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
  pointer-events: none;
}

/* ═══ TRADE ════════════════════════════════════════════════════════ */
.bs-panel.bs-trade {
  width: min(860px, 96vw);
  height: min(80vh, 760px);
  display: flex;
  flex-direction: column;
}
.bs-trade-cols { flex: 1; min-height: 0; display: flex; gap: 20px; }
.bs-trade-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.bs-trade-offers { gap: 12px; }
.bs-trade-offer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bs-trade .trade-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  padding: 6px 2px;
}
.bs-trade-offer .trade-grid { background: rgba(0,0,0,.22); box-shadow: inset 0 2px 10px rgba(0,0,0,.6); padding: 8px; }
.bs-trade-gold {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bs-hair);
  font-size: 15px;
  color: var(--bs-dim);
}
.bs-trade-gold input { width: 100px; height: 30px; }
.bs-trade-have b { color: var(--bs-text); font-weight: 600; }
.bs-trade-goldline { flex-shrink: 0; padding: 5px 2px 0; font-size: 15px; color: var(--bs-dim); }
.bs-trade-goldline b { color: var(--bs-text); font-size: 17px; font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.bs-trade-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bs-hair);
}
.bs-trade-status { font-size: 15px; color: var(--bs-dim); font-style: italic; text-shadow: 0 1px 2px #000; }
.bs-trade-btns { display: flex; align-items: center; gap: 10px; }

/* ═══ BAZAAR ═══════════════════════════════════════════════════════ */
#bazaarModal .skills-panel.bs-bazaar { width: min(980px, 95vw); height: min(86vh, 940px); display: flex; flex-direction: column; }
.bs-bazaar .skills-body { flex: 1; padding: 0 4px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; max-height: none; color: var(--bs-text); }
.bs-bz-top { display: flex; align-items: flex-end; gap: 14px; padding: 0 4px; flex-shrink: 0; }
.bs-bz-top .bs-tabs { margin-bottom: -1px; }
.bs-bz-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bs-bazaar .bz-pending-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 6px 10px;
  background: linear-gradient(90deg, rgba(201,168,76,.12), rgba(201,168,76,.03));
  border: none;
  border-left: 3px solid #b8923e;
  font-size: 15px;
  color: var(--bs-dim);
}
.bs-bazaar .bz-pending-gold { color: var(--bs-text); font-family: 'Crimson Pro', Georgia, serif; font-weight: 600; font-size: 17px; }
.bs-bazaar .bz-pending-items { flex: 1; color: var(--bs-sub); font-size: 14px; }
.bs-bazaar .bz-topbar { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; padding: 0 4px; flex-shrink: 0; }
.bs-bazaar .bz-search { flex: 1; max-width: 360px; height: 34px; font-size: 16px; }
.bs-bazaar .bz-filters { padding-bottom: 6px; }
.bs-bazaar .bz-filter-sep { width: 1px; align-self: stretch; background: var(--bs-hair); margin: 2px 2px; }
.bs-filters .bz-rar-uncommon.active  { color: #7ec87e; border-bottom-color: #4a8a4a; }
.bs-filters .bz-rar-rare.active      { color: #6aa9e0; border-bottom-color: #2a5a9a; }
.bs-filters .bz-rar-epic.active      { color: #b98ae6; border-bottom-color: #6a3a9a; }
.bs-filters .bz-rar-legendary.active { color: #f0b860; border-bottom-color: #a07a1a; }
.bs-bazaar .bz-list { flex: 1; min-height: 0; overflow-y: auto; display: block; padding-right: 6px; }
.bs-bazaar .bz-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 8px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--bs-hair);
}
.bs-bazaar .bz-row:last-child { border-bottom: none; }
.bs-bazaar .bz-row:hover { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent 70%); border-color: var(--bs-hair); }
.bs-bazaar .bz-row.is-mine { background: linear-gradient(90deg, rgba(201,168,76,.07), transparent 60%); border-left: none; }
.bs-bazaar .bz-row.mine { background: none; }
.bs-bazaar .bz-icon {
  width: 52px; height: 52px; padding: 7px;
  border: none;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.bs-bazaar .bz-icon img { width: 100%; height: 100%; object-fit: contain !important; }
.bs-bazaar .bz-name { font-family: 'Crimson Pro', Georgia, serif; font-style: normal; font-weight: 600; font-size: var(--bs-fs-body); color: var(--bs-gold); text-shadow: 0 1px 2px #000; }
.bs-bazaar .bz-mine-tag { font-weight: 400; font-style: italic; font-size: var(--bs-fs-small); color: var(--bs-dim); margin-left: 6px; }
.bs-bazaar .bz-seller { font-size: var(--bs-fs-small); color: var(--bs-sub); }
.bs-bazaar .bz-qty { width: 56px; font-size: 16px; color: var(--bs-sub); font-variant-numeric: tabular-nums; }
.bs-bazaar .bz-price { width: 96px; font-family: 'Crimson Pro', Georgia, serif; font-weight: 600; font-size: 18px; color: var(--bs-text); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.bs-bazaar .bz-expires { width: 110px; font-size: var(--bs-fs-small); color: var(--bs-dim); }
.bs-bazaar .bz-empty { color: var(--bs-dim); font-style: italic; text-align: center; padding: 40px 0; font-size: 16px; }
.bs-bazaar .bz-sell-form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; padding: 10px 6px; background: none; border: none; }
.bs-bazaar .bz-sell-row { display: flex; align-items: center; gap: 14px; }
.bs-bazaar .bz-sell-label { width: 96px; flex-shrink: 0; font-family: 'Crimson Pro', Georgia, serif; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--bs-sub); }
.bs-bazaar .bz-sell-input { flex: 1; height: 36px; font-size: 16px; }
.bs-bazaar select.bz-sell-input option { background: #14110c; color: #e6dcc0; }
.bs-bazaar .bz-sell-hint { font-size: 15px; color: var(--bs-dim); font-style: italic; min-height: 20px; }
.bs-bazaar .bz-sell-submit { padding-top: 4px; }
.bs-bazaar .bz-msg { min-height: 22px; font-size: 15px; color: #8fdc8a; text-shadow: 0 1px 2px #000; }
.bs-bazaar .bz-msg.err { color: #ff9a86; }

/* ═══ CRAFTING ═════════════════════════════════════════════════════ */
#craftModal .skills-panel.bs-craft,
#crafterModal .skills-panel.bs-craft { width: min(760px, 94vw); height: min(84vh, 880px); max-width: none; max-height: none; display: flex; flex-direction: column; }
.bs-craft .skills-body { flex: 1; padding: 0 4px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; max-height: none; color: var(--bs-text); }
.bs-craft-top { display: flex; align-items: center; gap: 14px; padding: 0 4px 2px; flex-shrink: 0; min-height: 58px; }
.bs-craft-top .bs-msg { flex: 1; text-align: left; }
.bs-craft .craft-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; display: block; }
.bs-craft .craft-empty { color: var(--bs-dim); font-style: italic; text-align: center; padding: 40px 0; font-size: 16px; }
.bs-craft .craft-recipe {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--bs-hair);
  background: none;
}
.bs-craft .craft-recipe:last-child { border-bottom: none; }
.bs-craft .craft-recipe:hover { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent 70%); }
.bs-craft .craft-recipe.disabled { opacity: .55; }
.bs-craft .craft-result-icon {
  position: relative;
  width: 62px; height: 62px; padding: 8px;
  border: none;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--bs-dim);
}
.bs-craft .craft-result-icon img { width: 100%; height: 100%; object-fit: contain; }
.bs-craft .craft-result-qty {
  position: absolute; right: 8px; bottom: 5px;
  font-family: 'Crimson Pro', Georgia, serif; font-weight: 600; font-size: 14px;
  color: #fff4dc; text-shadow: 0 0 3px #000, 0 1px 2px #000;
}
.bs-craft .craft-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bs-craft .craft-result-name { font-family: 'Crimson Pro', Georgia, serif; font-style: normal; font-weight: 600; font-size: var(--bs-fs-body); color: var(--bs-gold); text-shadow: 0 1px 2px #000; }
.bs-craft .craft-gold { font-size: 15px; color: var(--bs-text); }
.bs-craft .craft-gold.missing { color: #ff9a86; }
.bs-craft .craft-ings { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.bs-craft .craft-ing {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; border-radius: 0; padding: 0;
  font-size: 15px; color: var(--bs-sub);
}
.bs-craft .craft-ing img { width: 24px; height: 24px; object-fit: contain; }
.bs-craft .craft-ing-qty { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 1px; }
.bs-craft .craft-ing.ok .craft-ing-qty { color: #8fdc8a; }
.bs-craft .craft-ing.missing .craft-ing-qty { color: #ff9a86; }
.bs-craft .craft-act { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bs-craft .craft-times { width: 56px; height: 30px; text-align: center; }

/* ═══ ENCHANT ══════════════════════════════════════════════════════ */
.skills-panel.bs-ench { width: min(1080px, 96vw); height: min(88vh, 960px); display: flex; flex-direction: column; }
.bs-ench-top { display: flex; align-items: flex-end; gap: 14px; padding: 0 8px; flex-shrink: 0; }
.bs-ench-top .bs-tabs { margin-bottom: -1px; }
.bs-ench .ench-gold { margin-left: auto; align-self: center; text-align: right; font-size: 15px; line-height: 1.3; color: var(--bs-text); text-shadow: 0 1px 2px #000; }
.bs-ench .ench-gold b { font-size: 18px !important; font-weight: 600; }
.bs-ench-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0 4px; }
.bs-ench .ench-rules { flex-shrink: 0; margin: 0 4px 8px; }
.bs-ench .ench-rules summary {
  cursor: pointer;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px; letter-spacing: .08em;
  color: #c09aff; text-shadow: 0 1px 2px #000; list-style-position: inside;
}
.bs-ench .ench-rules summary:hover { color: #d8c2ff; }
.bs-ench #enchantRulesText { white-space: pre-line; font-size: 15px; line-height: 1.55; color: var(--bs-sub); padding: 6px 2px 4px; max-height: 26vh; overflow-y: auto; }
.bs-ench .ench-cols { flex: 1; min-height: 0; display: flex; gap: 18px; }
.bs-ench .ench-col { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 4px 8px; }
.bs-ench .ench-col-doll { width: 220px; flex-shrink: 0; align-items: center; }
.bs-ench .ench-col-doll .bs-head { align-self: stretch; }
.bs-ench .ench-col-type { flex: 1; min-width: 0; }
.bs-ench .ench-col-result { width: 260px; flex-shrink: 0; }
.bs-ench .ench-col-wide { flex: 1; min-width: 0; }
.bs-ench .ench-col-side { width: 330px; flex-shrink: 0; }

.ench-cell {
  position: relative;
  width: 62px; height: 62px; padding: 7px;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: filter .15s, box-shadow .15s;
}
.ench-cell img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ench-cell:hover:not(.empty) { filter: brightness(1.2); }
.ench-cell.sel { box-shadow: 0 0 0 2px #b07aff, 0 0 14px rgba(176,122,255,.55); }
.ench-cell.empty { cursor: default; opacity: .45; }
.ench-cell-label { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .04em; color: var(--bs-dim); text-align: center; text-transform: capitalize; }
.ench-badge { position: absolute; bottom: 4px; right: 4px; background: rgba(10,8,12,.9); border: 1px solid; padding: 0 4px; font-size: 10px; font-family: 'Cinzel', serif; line-height: 14px; pointer-events: none; }

.ench-type { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; letter-spacing: .06em; text-shadow: 0 1px 2px #000; margin-bottom: 4px; }
.ench-rarity { font-family: 'Crimson Pro', Georgia, serif; font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--bs-dim); text-transform: capitalize; }
.ench-label { font-family: 'Cinzel', serif; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; margin-bottom: 3px; text-shadow: 0 1px 2px #000; }
.ench-text { font-size: 15px; color: var(--bs-text); line-height: 1.45; }
.ench-dim { color: var(--bs-dim); font-size: 14px; }
.ench-warn { font-size: 15px; color: #e0a08a; line-height: 1.5; padding: 4px 0; }
.ench-empty { font-size: 15px; color: var(--bs-dim); font-style: italic; }
.ench-mat { font-size: 15px; color: var(--bs-sub); margin: 2px 0 6px; }
.ench-block { padding: 8px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--bs-hair); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ench-note { padding: 6px 0 6px 12px; margin: 2px 0 8px; border-left: 2px solid var(--ec, #b07aff); background: linear-gradient(90deg, rgba(176,122,255,.07), transparent 80%); }
.ench-slots { display: flex; gap: 8px; margin: 2px 0 8px; }
.ench-slot-tab {
  flex: 1; text-align: center; padding: 5px 4px 4px; cursor: pointer;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px; color: #a8987a;
  border-bottom: 2px solid rgba(201,168,76,.18); transition: color .15s, border-color .15s;
}
.ench-slot-tab small { display: block; font-family: 'Crimson Pro', Georgia, serif; font-weight: 400; font-size: 13px; color: var(--bs-dim); }
.ench-slot-tab:hover { color: #efe2bd; }
.ench-slot-tab.on { color: var(--ec); border-bottom-color: var(--ec); }
.ench-slot-tab.locked { opacity: .45; cursor: not-allowed; }
.ench-stats { display: flex; flex-direction: column; margin-bottom: 8px; }
.ench-stat {
  position: relative; padding: 6px 8px 6px 26px; cursor: pointer;
  font-size: 16px; color: var(--bs-text); border-bottom: 1px solid var(--bs-hair);
  transition: background .15s;
}
.ench-stat:last-child { border-bottom: none; }
.ench-stat::before { content: ''; position: absolute; left: 8px; top: 50%; width: 9px; height: 9px; margin-top: -5px; transform: rotate(45deg); border: 1px solid var(--ec); }
.ench-stat:hover { background: linear-gradient(90deg, rgba(176,122,255,.08), transparent 80%); }
.ench-stat.on { color: var(--ec); }
.ench-stat.on::before { background: var(--ec); box-shadow: 0 0 6px var(--ec); }

.ench-result {
  flex: 1; min-height: 90px; padding: 12px;
  background: rgba(0,0,0,.28); box-shadow: inset 0 2px 10px rgba(0,0,0,.6);
  font-size: 15px; color: var(--bs-text); line-height: 1.5;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.bs-ench #enchantConfirmBtn { width: 100%; margin-top: 6px; }
.ench-current { font-size: 14px; color: var(--bs-sub); line-height: 1.6; padding-top: 4px; }
.ench-summary { flex-shrink: 0; padding: 8px 4px 2px; border-top: 1px solid var(--bs-hair); margin-top: 4px; }
.ench-summary .bs-head { border-bottom: none; padding-bottom: 2px; }
#enchantSummaryStats { display: flex; flex-wrap: wrap; gap: 2px 18px; min-height: 24px; align-items: baseline; }
.ench-sum { font-size: 15px; color: var(--bs-sub); white-space: nowrap; }
.ench-sum b { font-size: 16px; font-weight: 600; }
.ench-intro { flex-shrink: 0; font-size: 15px; line-height: 1.55; color: var(--bs-sub); padding: 0 4px 10px; }

/* procs */
.proc-row { padding: 10px 2px 12px; border-bottom: 1px solid var(--bs-hair); }
.proc-row:last-child { border-bottom: none; }
.proc-name { font-family: 'Crimson Pro', Georgia, serif; font-weight: 600; font-size: 17px; color: #9ad6ec; text-shadow: 0 1px 2px #000; }
.proc-rar { font-weight: 400; font-size: 13px; color: var(--bs-dim); text-transform: capitalize; margin-left: 4px; }
.proc-desc { font-size: 15px; color: var(--bs-sub); line-height: 1.45; margin: 2px 0 6px; }
.proc-facts { font-size: 14px; color: var(--bs-dim); line-height: 1.6; }
.proc-facts b { color: var(--bs-text); font-weight: 600; }
.proc-btn { margin-top: 8px; }
.proc-sub { font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; letter-spacing: .06em; color: #8fb8c8; margin: 8px 0 2px; }
.proc-item { padding: 8px 0 10px; border-bottom: 1px solid var(--bs-hair); }
.proc-item-name { font-size: 16px; color: var(--bs-text); margin-bottom: 5px; }
.proc-bar { height: 7px; background: rgba(0,0,0,.5); box-shadow: inset 0 1px 3px rgba(0,0,0,.8); overflow: hidden; margin-bottom: 3px; }
.proc-bar > div { height: 100%; background: linear-gradient(90deg, #3a8aa8, #7ad0f0); }
.proc-bar > div.full { background: linear-gradient(90deg, #3a9a4a, #7ade7a); }
.proc-count { font-size: 13px; color: var(--bs-dim); }
.proc-mount { display: flex; gap: 8px; align-items: center; }
.proc-mount select { flex: 1; height: 30px; font-size: 15px; }
.proc-mounted { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.proc-mounted .proc-item-name { margin: 0; color: #9ad6ec; }

/* potvrdzovací dialóg enchantu */
.bs-dialog-wide { width: min(500px, 94vw); }
.ench-confirm-text { font-size: 16px; line-height: 1.6; }

/* ═══ TALK / QUEST ═════════════════════════════════════════════════ */
.bs-panel.bs-talk { width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.bs-talk .talk-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 4px; }
.bs-talk .talk-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 10px; }
.bs-talk .talk-portrait {
  width: 210px; height: 236px; object-fit: cover; flex-shrink: 0;
  border: 2px solid #8a6a2a;
  box-shadow: 0 0 0 2px #1a120a, 0 0 0 3px rgba(201,168,76,.35), 0 8px 18px rgba(0,0,0,.85);
  background: #0d0b10;
}
.bs-talk .talk-dialog {
  flex: 1;
  font-size: 18px; line-height: 1.6; font-style: italic; color: var(--bs-text);
  padding: 4px 0 4px 16px;
  border-left: 2px solid #b8923e;
  text-shadow: 0 1px 2px #000;
}
.bs-talk .talk-sec { margin-top: 8px; }
.bs-talk .quest-opt {
  display: block; width: 100%; text-align: left;
  margin: 0; padding: 8px 6px 8px 22px; position: relative;
  background: none; border: none; border-bottom: 1px solid var(--bs-hair); box-shadow: none; overflow: visible;
  font-family: 'Crimson Pro', Georgia, serif; font-weight: 600; font-size: 17px; letter-spacing: 0; text-transform: none;
  color: var(--bs-gold); text-shadow: 0 1px 2px #000;
}
.bs-talk .quest-opt::after { display: none; }
.bs-talk .quest-opt::before { content: '❖'; position: absolute; left: 4px; top: 9px; font-size: 11px; color: #b8923e; }
.bs-talk .quest-opt:hover:not(:disabled) { background: linear-gradient(90deg, rgba(201,168,76,.10), transparent 75%); border-color: var(--bs-hair); box-shadow: none; color: #f3dc9c; }
.bs-talk .quest-opt:active:not(:disabled) { transform: none; box-shadow: none; }
.bs-talk .quest-opt.active { color: var(--bs-text); }
.bs-talk .quest-opt.locked { color: #8a826f; }
.bs-talk .quest-opt.locked::before { content: none; }
.bs-talk .quest-opt.locked { padding-left: 6px; }
.bs-talk .quest-st { font-weight: 400; font-size: 14px; font-style: italic; color: var(--bs-dim); margin-left: 6px; }
.bs-talk .quest-st.ready { color: #8fdc8a; font-style: normal; font-weight: 600; }
.bs-talk .talk-detail { margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--bs-hair); }
.bs-talk .talk-qname { font-family: 'Cinzel', serif; font-weight: 700; font-size: 17px; letter-spacing: .05em; color: var(--bs-gold); margin-bottom: 6px; text-shadow: 0 1px 2px #000; }
.bs-talk .talk-obj { font-size: 16px; line-height: 1.7; color: var(--bs-text); margin-bottom: 6px; }
.bs-talk .talk-reward { font-size: 15px; color: var(--bs-sub); margin-bottom: 10px; }
.bs-talk .talk-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.bs-talk .talk-btns .bs-btn[style*="display: block"], .bs-talk .talk-btns .bs-btn[style*="display:block"] { display: inline-block !important; }
.bs-talk .talk-tp { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--bs-hair); }
.bs-talk .talk-tp-text { font-size: 16px; color: var(--bs-text); margin: 2px 0 8px; }
.bs-talk .talk-tp-text b { color: var(--bs-gold); }
.bs-talk .talk-dim { color: var(--bs-dim); font-style: italic; }
.bs-talk .talk-services { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--bs-hair); }
.bs-talk .talk-services:not(:has(> div[style*="block"])) { display: none; }
.bs-talk .talk-services .bs-btn { min-width: 140px; }

/* ═══ MALÉ OKNÁ ════════════════════════════════════════════════════ */
#invite-modal .bs-dialog, #bind-confirm-modal .bs-dialog, #quest-pick-modal .bs-dialog, #teleportDestModal .bs-dialog { position: relative; }
.bs-dialog .bs-dlg-label:empty { display: none; }
#bind-confirm-modal .bs-dlg-label { font-style: normal; color: var(--bs-gold); font-size: 16px; }

/* výber odmeny z questu */
.qp-items { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 6px 0 4px; }
.qp-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; width: 92px; }
.qp-slot {
  position: relative; width: 64px; height: 64px; padding: 8px;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  transition: filter .15s;
}
.qp-wrap:hover .qp-slot { filter: brightness(1.25) drop-shadow(0 0 6px rgba(226,196,126,.4)); }
.qp-label { font-size: 14px; line-height: 1.25; color: var(--bs-gold); text-align: center; word-break: break-word; text-shadow: 0 1px 2px #000; }
.qp-wrap:hover .qp-label { color: #f3dc9c; }

/* teleport */
.tp-list { display: flex; flex-direction: column; margin: 4px 0 2px; text-align: left; }
button.tp-dest {
  display: block; width: 100%; text-align: left;
  padding: 9px 8px; margin: 0;
  background: none; border: none; border-bottom: 1px solid var(--bs-hair); box-shadow: none; overflow: visible;
  font-family: 'Crimson Pro', Georgia, serif; font-weight: 600; font-size: 17px; letter-spacing: 0; text-transform: none;
  color: var(--bs-text); text-shadow: 0 1px 2px #000;
}
button.tp-dest::after { display: none; }
button.tp-dest:hover:not(:disabled) { background: linear-gradient(90deg, rgba(128,128,224,.14), transparent 80%); border-color: var(--bs-hair); box-shadow: none; color: #fff; }
button.tp-dest:active:not(:disabled) { transform: none; box-shadow: none; }
.tp-mark { color: #9a9af0; margin-right: 6px; }

/* výber pohlavia */
.bs-gender { width: min(480px, 94vw); }
.bs-gender-picks { display: flex; gap: 18px; justify-content: center; margin-top: 4px; }
button._gpick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: clamp(120px, 32vw, 170px); padding: 0;
  background: none; border: none; box-shadow: none; overflow: visible; text-transform: none;
  transition: filter .15s;
}
button._gpick::after { display: none; }
button._gpick img {
  display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; background: #0a0810;
  border: 2px solid #8a6a2a; box-shadow: 0 0 0 2px #1a120a, 0 6px 14px rgba(0,0,0,.8);
}
button._gpick span { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--bs-gold); text-shadow: 0 1px 2px #000; }
button._gpick:hover:not(:disabled) { background: none; box-shadow: none; filter: brightness(1.15); }
button._gpick:hover:not(:disabled) img { border-color: #e2c47e; }
.bs-gender-err { color: #ff9a86; font-size: 15px; min-height: 20px; margin-top: 10px; }

/* custom log filter */
.bs-logf { text-align: left; max-height: 82vh; display: flex; flex-direction: column; }
.bs-logf .bs-dlg-label { text-align: left; font-size: 15px; }
.bs-logf-body { flex: 1; min-height: 0; overflow-y: auto; }
.logf-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 7px 4px; border-bottom: 1px solid var(--bs-hair); }
.logf-cb { margin-top: 3px; flex-shrink: 0; accent-color: #b8923e; width: 15px; height: 15px; }
.logf-name { font-size: 16px; font-weight: 600; color: var(--bs-text); }
.logf-desc { font-size: 14px; color: var(--bs-dim); margin-top: 1px; }

/* ═══ HOTBAR SETTINGS ══════════════════════════════════════════════ */
#hotbar-settings-panel.bs-panel {
  width: min(720px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column; overflow: visible;
  background: none; border: none; box-shadow: none;
  font-family: 'Crimson Pro', Georgia, serif;
}
#hotbar-settings-panel.bs-panel .sp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 4px; }
#hotbar-settings-panel.bs-panel .sp-section { padding: 6px 4px 14px; border-bottom: 1px solid var(--bs-hair); margin: 0; }
#hotbar-settings-panel.bs-panel .sp-section:last-child { border-bottom: none; }
#hotbar-settings-panel.bs-panel .sp-section-label {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: var(--bs-fs-head); letter-spacing: .1em; text-transform: none;
  color: var(--bs-gold); margin: 6px 0 10px; text-shadow: 0 1px 2px #000;
}
#hotbar-settings-panel.bs-panel .sp-section-label::after { background: linear-gradient(to right, rgba(201,168,76,.3), transparent); }
#hotbar-settings-panel.bs-panel .sp-slot-hint { font-family: 'Crimson Pro', Georgia, serif; font-size: 14px; color: var(--bs-dim); }
#hotbar-settings-panel.bs-panel .sp-divider { font-family: 'Cinzel', serif; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: none; color: var(--bs-sub); border-top: none; padding-top: 0; }
#hotbar-settings-panel.bs-panel .sp-divider::before, #hotbar-settings-panel.bs-panel .sp-divider::after { background: var(--bs-hair); }
#hotbar-settings-panel.bs-panel .sp-slot {
  width: 60px; height: 60px; border: none;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  box-shadow: none; color: var(--bs-dim); font-family: 'Cinzel', serif;
}
#hotbar-settings-panel.bs-panel .sp-slot img { width: 42px; height: 42px; }
#hotbar-settings-panel.bs-panel .sp-slot:hover { border: none; filter: brightness(1.25); box-shadow: none; color: var(--bs-gold); }
#hotbar-settings-panel.bs-panel .sp-slot.sp-slot-selecting { border: none; box-shadow: 0 0 0 2px #7aa0ff, 0 0 16px rgba(100,140,255,.55); }
#hotbar-settings-panel.bs-panel .sp-card {
  width: 82px; border: none; background: none; padding: 4px 2px 2px; gap: 4px;
}
#hotbar-settings-panel.bs-panel .sp-card::before { display: none; }
#hotbar-settings-panel.bs-panel .sp-card img,
#hotbar-settings-panel.bs-panel .sp-card .sp-card-no-icon {
  width: 54px; height: 54px; padding: 7px; box-sizing: border-box;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat; border: none;
}
#hotbar-settings-panel.bs-panel .sp-card:hover { border: none; background: none; box-shadow: none; filter: brightness(1.2); }
#hotbar-settings-panel.bs-panel .sp-card.sp-card-assigned { border: none; background: none; }
#hotbar-settings-panel.bs-panel .sp-card-name { font-family: 'Crimson Pro', Georgia, serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--bs-sub); }
#hotbar-settings-panel.bs-panel .sp-card:hover .sp-card-name { color: var(--bs-gold); }
#hotbar-settings-panel.bs-panel .sp-empty-msg { font-family: 'Crimson Pro', Georgia, serif; font-size: 14px; color: var(--bs-dim); }
#hotbar-settings-panel.bs-panel .sp-footer { background: none; border-top: 1px solid var(--bs-hair); padding: 10px 6px 2px; }
#hotbar-settings-panel.bs-panel .sp-autoattack-row,
#hotbar-settings-panel.bs-panel .sp-party-scale-row { font-family: 'Crimson Pro', Georgia, serif; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--bs-sub); }
#hotbar-settings-panel.bs-panel .sp-autoattack-row label,
#hotbar-settings-panel.bs-panel .sp-party-scale-row label { color: var(--bs-text); }
#hotbar-settings-panel.bs-panel .sp-party-scale-val { font-family: 'Crimson Pro', Georgia, serif; font-style: normal; color: var(--bs-text); }
#hotbar-settings-panel.bs-panel .bl-btn { font-family: 'Cinzel', serif; text-transform: none; font-size: 12px; letter-spacing: .06em; }

/* ═══ BAG (INVENTORY) ══════════════════════════════════════════════ */
#inventoryPanel.bs-panel { width: min(1080px, 96vw); max-height: 88vh; display: flex; flex-direction: column; background: none; border: none; box-shadow: none; padding: calc(var(--bs-frame) * .95) calc(var(--bs-frame) * .6) calc(var(--bs-frame) * .55); }
#inventoryPanel.bs-panel #inventoryBody { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; gap: 0; }
#inventoryPanel.bs-panel #inventoryEquip {
  width: 290px; padding: 0 16px 6px 4px;
  background: none; border-right: 1px solid var(--bs-hair);
}
#inventoryPanel.bs-panel #equipDollFrame { background: none; border: none; box-shadow: none; padding: 8px 4px; }
#inventoryPanel.bs-panel #equipDollFrame::before, #inventoryPanel.bs-panel #equipDollFrame::after { display: none; }
#inventoryPanel.bs-panel #invFilterBar { border-bottom: none; padding: 0 16px 6px; gap: 2px 16px; align-items: center; }
#inventoryPanel.bs-panel #invFilterBar .inv-filter-btn { border-right: none; }
#inventoryPanel.bs-panel #invSortWrap { margin-left: auto; font-family: 'Crimson Pro', Georgia, serif; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--bs-dim); padding: 0; border: none; }
#inventoryPanel.bs-panel #inventoryGrid { padding: 4px 16px 10px; gap: 6px; }

/* sloty v bagu, paperdolle a mobilnom equip okne */
#inventoryPanel.bs-panel .inv-slot,
#inventoryPanel.bs-panel .equip-slot,
.bs-equipm .equip-slot {
  border: none;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  box-shadow: none;
  padding: 12%;
  overflow: visible;
}
#inventoryPanel.bs-panel .equip-slot::before, .bs-equipm .equip-slot::before { display: none; }
#inventoryPanel.bs-panel .inv-slot img,
#inventoryPanel.bs-panel .equip-slot img,
.bs-equipm .equip-slot img { width: 100%; height: 100%; object-fit: contain; }
#inventoryPanel.bs-panel .inv-slot:hover,
#inventoryPanel.bs-panel .equip-slot:hover,
.bs-equipm .equip-slot:hover { border: none; background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat; filter: brightness(1.22) drop-shadow(0 0 6px rgba(226,196,126,.35)); }
#inventoryPanel.bs-panel .equip-slot.empty, .bs-equipm .equip-slot.empty { opacity: .45; }
#inventoryPanel.bs-panel .equip-slot.two-handed-ghost:hover { filter: grayscale(.4); }
#inventoryPanel.bs-panel .inv-slot.rarity-uncommon, #inventoryPanel.bs-panel .equip-slot.rarity-uncommon, .bs-equipm .equip-slot.rarity-uncommon { box-shadow: inset 0 0 14px rgba(76,175,125,.55); }
#inventoryPanel.bs-panel .inv-slot.rarity-rare, #inventoryPanel.bs-panel .equip-slot.rarity-rare, .bs-equipm .equip-slot.rarity-rare { box-shadow: inset 0 0 14px rgba(74,144,217,.6); }
#inventoryPanel.bs-panel .inv-slot.rarity-epic, #inventoryPanel.bs-panel .equip-slot.rarity-epic, .bs-equipm .equip-slot.rarity-epic { box-shadow: inset 0 0 15px rgba(155,109,214,.65); }
#inventoryPanel.bs-panel .inv-slot.rarity-legendary, #inventoryPanel.bs-panel .equip-slot.rarity-legendary, .bs-equipm .equip-slot.rarity-legendary { box-shadow: inset 0 0 16px rgba(232,160,48,.65); }
#inventoryPanel.bs-panel .inv-slot > :not(img) { font-family: 'Crimson Pro', Georgia, serif; }
#inventoryPanel.bs-panel .inv-slot > div[style*="bottom"],
#inventoryPanel.bs-panel .inv-slot > span[style*="bottom"] { font-size: 13px !important; font-weight: 600; right: 6px !important; bottom: 3px !important; color: #fff4dc !important; text-shadow: 0 0 3px #000, 0 1px 2px #000 !important; }

/* ═══ SKILLS ═══════════════════════════════════════════════════════ */
.skills-panel.bs-skills { width: min(1180px, 95vw); height: min(88vh, 980px); display: flex; flex-direction: column; }
.bs-skills .skills-body { flex: 1; padding: 0 4px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; max-height: none; color: var(--bs-text); }
.bs-skills-top { display: flex; align-items: flex-end; gap: 14px; padding: 0 4px; flex-shrink: 0; }
.bs-skills-top .bs-tabs { margin-bottom: -1px; }
.bs-skills .bs-wallet { font-size: 15px; color: var(--bs-dim); font-weight: 400; }
.bs-skills .bs-wallet b { font-size: 20px; color: var(--bs-gold); font-weight: 600; margin-left: 6px; }
.bs-skills-cols { grid-template-columns: 1fr 1fr; gap: 22px; flex: 1; min-height: 0; }
.bs-skills-col { display: flex; flex-direction: column; min-height: 0; }
.bs-skills-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.bs-skills #skillsAscView { padding: 0 6px 6px; }

.bs-skills .skill-row { gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--bs-hair); align-items: flex-start; }
.bs-skills .skill-row:hover, .bs-skills .skill-row.hover-active { background: linear-gradient(90deg, rgba(201,168,76,.07), transparent 75%); border-radius: 0; }
.bs-skills .skill-locked { opacity: .5; }
.bs-skills .skill-icon {
  width: 50px; height: 50px; padding: 6px;
  border: none; background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
}
.bs-skills .skill-icon img { object-fit: cover; }
.bs-skills .skill-name { font-family: 'Crimson Pro', Georgia, serif; font-style: normal; font-weight: 600; font-size: 17px; color: var(--bs-gold); text-shadow: 0 1px 2px #000; }
.bs-skills .skill-level { font-size: 14px; color: var(--bs-sub); }
.bs-skills .skill-desc { font-size: 15px; color: #a8987a; font-style: italic; line-height: 1.4; margin: 2px 0 3px; }
.bs-skills .skill-mechanics { font-size: 14px; color: var(--bs-text); line-height: 1.55; border-top: none; padding-top: 0; }
button.skill-btn {
  width: 30px; height: 30px; margin-top: 2px; padding: 4px;
  background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat;
  border: none; box-shadow: none; overflow: visible;
  color: var(--bs-gold); font-size: 18px;
}
.bs-skills button.skill-btn::after { display: none; }
.bs-skills button.skill-btn:hover:not(:disabled) { background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat; border: none; box-shadow: 0 0 10px rgba(226,196,126,.45); filter: brightness(1.25); }
.bs-skills button.skill-btn:disabled { opacity: .3; }
.asc-tree-head { margin-top: 12px; }

/* ═══ ASCENSION ════════════════════════════════════════════════════ */
#asc-modal-box.bs-panel { width: min(720px, 94vw); max-height: 86vh; display: flex; flex-direction: column; font-family: 'Crimson Pro', Georgia, serif; color: var(--bs-text); }
#asc-modal-box .bs-title { font-size: 16px; }
#asc-modal-box .asc-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px; }
#asc-modal-box .asc-sub { text-align: center; font-size: 16px; font-style: italic; color: var(--bs-sub); margin: 2px 0 14px; }
#asc-modal-box .asc-foot { flex-shrink: 0; display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bs-hair); }
#asc-modal-box .asc-foot .ascp-back-btn { margin-right: auto; }

/* ═══ EVENTS / RANKING (iframe) ════════════════════════════════════ */
.skills-panel.bs-framepanel { width: min(1100px, 94vw); height: min(86vh, 940px); display: flex; flex-direction: column; }
.bs-frame-iframe { flex: 1; min-height: 0; width: 100%; border: none; background: transparent; }

/* ═══ QUEST LOG ════════════════════════════════════════════════════ */
#questLogPanel.bs-qlog {
  --bs-frame: 28px;
  position: fixed; right: 20px; bottom: 80px; z-index: 7000;
  width: 330px;
  padding: 34px 16px 12px;
}
#questLogPanel.bs-qlog .bs-title { height: 44px; font-size: 14px; border-width: 0 38px; border-image-width: 0 38px; max-width: calc(100% - 50px); top: -20px; padding: 0 8px 2px; }
#questLogPanel.bs-qlog .bs-x { width: 34px; height: 34px; top: -14px; right: -14px; }
#questLogContent { max-height: 360px; overflow-y: auto; font-size: 15px; color: var(--bs-text); line-height: 1.6; padding-right: 4px; }
.qlog-empty { color: var(--bs-dim); font-style: italic; }

/* ═══ KONTEXTOVÉ MENU V BAGU ═══════════════════════════════════════ */
#inv-ctx-menu {
  background: linear-gradient(rgba(10,8,6,.92), rgba(10,8,6,.96)), url(/static/ui/stone.webp?v=1) 0 0 / 256px repeat !important;
  border: 1px solid #8a6a2a !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 1px #1a120a, 0 8px 20px rgba(0,0,0,.85) !important;
  padding: 3px 0 !important;
}
#inv-ctx-share, #inv-ctx-drop {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  padding: 7px 16px !important;
}
#inv-ctx-share { color: var(--bs-text) !important; }
#inv-ctx-drop { color: #e0a08a !important; border-top: 1px solid var(--bs-hair) !important; }
#inv-ctx-share:hover, #inv-ctx-drop:hover { background: linear-gradient(90deg, rgba(201,168,76,.14), transparent 85%) !important; }

/* ═══ ASCENSION — vnútro ═══════════════════════════════════════════ */
#asc-modal-box.bs-panel .asc-cost, #asc-modal-box.bs-panel .ascp-cost { text-align: center; font-family: 'Crimson Pro', Georgia, serif; font-size: 16px; color: var(--bs-sub); letter-spacing: 0; margin-bottom: 14px; }
#asc-modal-box.bs-panel .asc-cost b, #asc-modal-box.bs-panel .ascp-cost b { color: var(--bs-gold); }
#asc-modal-box.bs-panel .asc-empty, #asc-modal-box.bs-panel .ascp-empty { text-align: center; color: var(--bs-dim); font-style: italic; font-size: 16px; padding: 30px 10px; }

/* karty výberu (desktop) */
#asc-modal-box.bs-panel .ascp-grid { gap: 18px; }
#asc-modal-box.bs-panel .ascp-card { background: rgba(0,0,0,.25); border: none; box-shadow: inset 0 0 0 1px rgba(201,168,76,.16); }
#asc-modal-box.bs-panel .ascp-card:hover { border: none; box-shadow: inset 0 0 0 1px rgba(226,196,126,.5), 0 6px 22px rgba(0,0,0,.6); }
#asc-modal-box.bs-panel .ascp-card.sel { box-shadow: inset 0 0 0 2px #c9a84c, 0 6px 26px rgba(201,168,76,.25); }
#asc-modal-box.bs-panel .ascp-card.locked:hover { box-shadow: inset 0 0 0 1px rgba(201,168,76,.16); }
#asc-modal-box.bs-panel .ascp-img { background: radial-gradient(ellipse at 50% 40%, rgba(201,168,76,.08), transparent 70%); }
#asc-modal-box.bs-panel .ascp-name { font-weight: 700; color: var(--bs-gold); text-shadow: 0 1px 2px #000; }
#asc-modal-box.bs-panel .ascp-parent { font-family: 'Crimson Pro', Georgia, serif; font-size: 14px; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--bs-dim); opacity: 1; }
#asc-modal-box.bs-panel .ascp-desc { font-size: 15px; color: var(--bs-sub); }
#asc-modal-box.bs-panel .ascp-stats, #asc-modal-box.bs-panel .ascp-viewmore { border-top-color: var(--bs-hair); }
#asc-modal-box.bs-panel .ascp-hdr { font-size: 12px; letter-spacing: .06em; text-transform: none; font-weight: 700; }
#asc-modal-box.bs-panel .ascp-srow { font-size: 15px; color: var(--bs-sub); }
#asc-modal-box.bs-panel .ascp-viewmore { font-size: 12px; letter-spacing: .06em; text-transform: none; color: var(--bs-dim); }
#asc-modal-box.bs-panel .ascp-lock, #asc-modal-box.bs-panel .ascp-chk { font-family: 'Crimson Pro', Georgia, serif; font-size: 13px; letter-spacing: 0; }

/* detail triedy (desktop) */
#asc-modal-box.bs-panel .ascd-img { border: 2px solid #8a6a2a; box-shadow: 0 0 0 2px #1a120a, 0 8px 18px rgba(0,0,0,.8); background: radial-gradient(ellipse at 50% 40%, rgba(201,168,76,.08), transparent 70%); }
#asc-modal-box.bs-panel .ascd-desc { font-size: 16px; color: var(--bs-sub); border-bottom-color: var(--bs-hair); }
#asc-modal-box.bs-panel .ascd-skill-list { gap: 0; }
#asc-modal-box.bs-panel .ascd-skill-row { background: none; border: none; border-bottom: 1px solid var(--bs-hair); padding: 10px 2px; }
#asc-modal-box.bs-panel .ascd-skill-icon { width: 46px; height: 46px; padding: 6px; border: none; background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat; }
#asc-modal-box.bs-panel .ascd-skill-name { font-family: 'Crimson Pro', Georgia, serif; font-weight: 600; font-size: 17px; color: var(--bs-gold); letter-spacing: 0; }
#asc-modal-box.bs-panel .ascd-tag { border: none; background: none; padding: 0; font-family: 'Crimson Pro', Georgia, serif; font-size: 13px; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--bs-dim); }
#asc-modal-box.bs-panel .ascd-tag + .ascd-tag::before { content: '·'; margin-right: 6px; color: var(--bs-dim); font-style: normal; }
#asc-modal-box.bs-panel .ascd-tag-capstone { color: var(--bs-gold); }
#asc-modal-box.bs-panel .ascd-skill-desc { font-size: 14.5px; color: #a8987a; }
#asc-modal-box.bs-panel .ascd-skill-mech { font-size: 14px; color: var(--bs-text); border-top: none; padding-top: 0; }

/* výber cesty (mobil) */
#asc-modal-box.bs-panel .asc-pick { padding: 12px 6px 12px 14px; border-bottom: 1px solid var(--bs-hair); border-left: 2px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; }
#asc-modal-box.bs-panel .asc-pick:hover { background: linear-gradient(90deg, rgba(201,168,76,.08), transparent 80%); }
#asc-modal-box.bs-panel .asc-pick.sel { border-left-color: #c9a84c; background: linear-gradient(90deg, rgba(201,168,76,.14), transparent 80%); }
#asc-modal-box.bs-panel .asc-pick.locked { opacity: .55; cursor: default; }
#asc-modal-box.bs-panel .asc-pick-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; color: var(--bs-gold); margin-bottom: 3px; }
#asc-modal-box.bs-panel .asc-pick-lock { font-family: 'Crimson Pro', Georgia, serif; font-weight: 400; font-size: 13px; color: #e0a08a; }
#asc-modal-box.bs-panel .asc-req { font-size: 14px; color: #e0a08a; margin-top: 4px; }

/* hub (po ascende) */
#asc-modal-box.bs-panel .asc-energy-lbl { display: flex; justify-content: space-between; font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px; letter-spacing: .06em; color: #c09aff; margin-bottom: 5px; }
#asc-modal-box.bs-panel .asc-energy-lbl span { font-family: 'Crimson Pro', Georgia, serif; font-size: 15px; color: var(--bs-text); }
#asc-modal-box.bs-panel .asc-energy { height: 9px; background: rgba(0,0,0,.55); box-shadow: inset 0 1px 3px rgba(0,0,0,.85), 0 0 0 1px rgba(201,168,76,.18); overflow: hidden; margin-bottom: 14px; }
#asc-modal-box.bs-panel .asc-energy > div { height: 100%; background: linear-gradient(90deg, #5a2a90, #b080ff); box-shadow: 0 0 8px rgba(176,128,255,.6); }
#asc-modal-box.bs-panel .asc-points { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; margin-bottom: 8px; border-top: 1px solid var(--bs-hair); border-bottom: 1px solid var(--bs-hair); }
#asc-modal-box.bs-panel .asc-points-lbl { font-size: 16px; color: var(--bs-sub); }
#asc-modal-box.bs-panel .asc-points-lbl b { font-size: 20px; color: #c09aff; margin-left: 6px; }
#asc-modal-box.bs-panel .asc-max, #asc-modal-box.bs-panel .asc-maxed { font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; letter-spacing: .08em; color: #8fdc8a; align-self: center; }
#asc-modal-box.bs-panel .asc-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 2px; border-bottom: 1px solid var(--bs-hair); }
#asc-modal-box.bs-panel .asc-ic { width: 46px; height: 46px; padding: 6px; flex-shrink: 0; background: url(/static/ui/slot.webp?v=1) center / 100% 100% no-repeat; }
#asc-modal-box.bs-panel .asc-ic img { width: 100%; height: 100%; object-fit: cover; }
#asc-modal-box.bs-panel .asc-info { flex: 1; min-width: 0; }
#asc-modal-box.bs-panel .asc-name { font-weight: 600; font-size: 17px; color: var(--bs-gold); text-shadow: 0 1px 2px #000; }
#asc-modal-box.bs-panel .asc-lv { font-weight: 400; font-size: 14px; color: var(--bs-dim); margin-left: 4px; }
#asc-modal-box.bs-panel .asc-desc { font-size: 15px; color: #a8987a; line-height: 1.4; }
#asc-modal-box.bs-panel .asc-mech { font-size: 14px; line-height: 1.55; margin-top: 3px; color: var(--bs-text); }
#asc-modal-box.bs-panel .asc-learn { align-self: center; }

/* ═══ HLAVNÁ OBRAZOVKA: HOTBAR + EQUIPMENT ═════════════════════════ */
/* slot ako 9-slice (funguje aj pre obdĺžnikové sloty na mobile) */
#hotbar .hotbar-slot,
#mob-bot .hotbar-slot,
#equip-panel .equip-slot {
  border-style: solid;
  border-color: transparent;
  border-width: 7px;
  border-image: url(/static/ui/slot.webp?v=1) 28 fill / 7px stretch;
  background: none;
  box-shadow: none;
  overflow: visible;
  color: #8a7450;
  font-family: 'Cinzel', serif;
  transition: filter .15s, box-shadow .15s;
}
#hotbar .hotbar-slot::before { display: none; }
#hotbar .hotbar-slot img, #equip-panel .equip-slot img { border-radius: 2px; }
#hotbar .hotbar-slot:hover,
#mob-bot .hotbar-slot:active,
#equip-panel .equip-slot:hover { border-color: transparent; box-shadow: none; filter: brightness(1.22) drop-shadow(0 0 6px rgba(226,196,126,.35)); }
#hotbar .hotbar-slot.empty, #mob-bot .hotbar-slot.empty { opacity: .55; }
#hotbar .hotbar-slot.active, #mob-bot .hotbar-slot.active { border-color: transparent; box-shadow: 0 0 0 2px rgba(220,70,50,.75), 0 0 14px rgba(220,70,50,.45); }
#hotbar .hotbar-slot.selecting, #mob-bot .hotbar-slot.selecting { border-color: transparent; box-shadow: 0 0 0 2px #7aa0ff, 0 0 14px rgba(100,140,255,.5); }
#hotbar .hotbar-slot.food-slot { border-color: transparent; background: none; }

/* rarita na paperdolle */
#equip-panel .equip-slot.rarity-uncommon  { box-shadow: inset 0 0 12px rgba(76,175,125,.55); }
#equip-panel .equip-slot.rarity-rare      { box-shadow: inset 0 0 12px rgba(74,144,217,.6); }
#equip-panel .equip-slot.rarity-epic      { box-shadow: inset 0 0 13px rgba(155,109,214,.65); }
#equip-panel .equip-slot.rarity-legendary { box-shadow: inset 0 0 14px rgba(232,160,48,.65); }
#equip-panel .equip-slot::before { display: none; }
#equip-panel .equip-slot.empty { opacity: .5; }

/* zbaliť/rozbaliť equipment */
#equipCollapseBtn {
  width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 0;
  background: url(/static/ui/close.webp?v=1) center / contain no-repeat;
  color: transparent; font-size: 0; box-shadow: none; overflow: visible;
  filter: hue-rotate(0deg) drop-shadow(0 2px 3px rgba(0,0,0,.7));
  position: relative;
}
#equipCollapseBtn::after { display: block; content: '▾'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #f0d78e; background: radial-gradient(circle, #3a2a14 45%, transparent 47%); text-shadow: 0 1px 2px #000; }
#equipCollapseBtn:hover { background: url(/static/ui/close.webp?v=1) center / contain no-repeat; box-shadow: none; filter: brightness(1.2) drop-shadow(0 2px 3px rgba(0,0,0,.7)); }

/* pás hotbaru (desktop) */
#hotbar {
  background:
    linear-gradient(rgba(6,5,4,.55), rgba(6,5,4,.72)),
    url(/static/ui/stone.webp?v=1) 0 0 / 384px repeat;
  border-top: 1px solid #6a5028;
  box-shadow: inset 0 1px 0 rgba(226,196,126,.14), 0 -4px 12px rgba(0,0,0,.5);
}
#hotbar-action-wrap { border-right-color: rgba(201,168,76,.22); }
#hotbar-action-btn,
#mob-bot #hotbar-action-btn {
  border-style: solid; border-color: transparent; border-width: 7px;
  border-image: url(/static/ui/slot.webp?v=1) 28 fill / 7px stretch;
  background: none;
  box-shadow: inset 0 0 14px rgba(200,40,30,.55);
}
#hotbar-action-btn:hover { border-color: transparent; background: none; box-shadow: inset 0 0 16px rgba(230,60,40,.75), 0 0 10px rgba(200,40,30,.35); }
#hotbar-action-btn.casting { border-color: transparent; background: none; box-shadow: inset 0 0 16px rgba(80,120,230,.8); }
#hotbar-action-label { font-family: 'Cinzel', serif; font-weight: 700; color: #ffd8c8; }

#hotbar-settings-btn,
#mob-bot #hotbar-settings-btn {
  border: none; border-radius: 50%;
  background: url(/static/ui/close.webp?v=1) center / contain no-repeat;
  color: transparent; overflow: visible; position: relative;
  box-shadow: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.7));
}
#hotbar-settings-btn::after { content: '⚙'; display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; color: #f0d78e; font-size: 60%; background: radial-gradient(circle, #3a2a14 42%, transparent 44%); text-shadow: 0 1px 2px #000; }
#hotbar-settings-btn:hover { border: none; background: url(/static/ui/close.webp?v=1) center / contain no-repeat; box-shadow: none; filter: brightness(1.2) drop-shadow(0 3px 4px rgba(0,0,0,.7)); }

.skillbar-switch .sbs-btn { color: #b8923e; }
.skillbar-switch .sbs-btn:hover { color: #f0d78e; }
.skillbar-switch .sbs-num { color: #e2c47e; font-family: 'Cinzel', serif; }

#hotbar-slot-controls button, #hotbar-food-controls button {
  background: rgba(10,8,6,.85) !important; border: 1px solid #6a5028 !important; color: #e2c47e !important; border-radius: 2px !important;
}
#hotbar-slot-controls button:hover, #hotbar-food-controls button:hover { border-color: #c9a84c !important; color: #fff1cf !important; }
#chat-toggle-btn { border-color: #6a5028 !important; color: #b8923e !important; border-radius: 2px !important; background: rgba(10,8,6,.85) !important; }

/* ═══ DLHÝ TOOLTIP → STĹPCE ════════════════════════════════════════ */
.inv-tooltip.tt-wide {
  max-width: none;
  width: min(660px, 94vw);
  column-count: 2;
  column-gap: 26px;
  column-rule: 1px solid rgba(201,168,76,.18);
}
.inv-tooltip.tt-wide3 { width: min(960px, 94vw); column-count: 3; }
.inv-tooltip.tt-wide > b:first-child { display: block; column-span: all; }
.inv-tooltip.tt-wide > * { break-inside: avoid; }

/* =========================================================
   VITAL BARS (HP / MP / XP) – bronze trough, fill in channel
   bar.webp 472x95 (half of the 945x190 source, offsets below use source px), slice 28 80 25
   ========================================================= */
#player-panel .bar{--bh:18px;height:var(--bh);
  margin:calc(var(--bh)*.5) calc(var(--bh)*1.3 - 7px) calc(var(--bh)*.62);
  overflow:visible;border:none;background:#060405;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.04)}
#player-panel .bar::before{inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 38%,transparent 60%,rgba(0,0,0,.25) 100%),
    repeating-linear-gradient(65deg,rgba(0,0,0,.28) 0 1px,transparent 1px 7px)}
#player-panel .bar::after{z-index:6;background:none;
  top:calc(var(--bh)*-56/84);bottom:calc(var(--bh)*-50/84);
  left:calc(var(--bh)*-109/84);right:calc(var(--bh)*-108/84);
  border-style:solid;border-color:transparent;
  border-width:calc(var(--bh)*56/84) calc(var(--bh)*160/84) calc(var(--bh)*50/84);
  border-image:url(/static/ui/bar.webp?v=2) 28 80 25 fill stretch}
#player-panel .bar-text{font-size:12px;letter-spacing:.08em;color:#f6ecd6;
  text-shadow:0 1px 2px #000,0 0 5px #000,0 0 9px rgba(0,0,0,.8)}
#player-panel #mpBar{overflow:hidden}
#player-panel .bar-hp #hpBar{transition:width .12s ease-out}
.bar-lag,.mbar-lag{position:absolute;left:0;top:0;bottom:0;width:100%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#f0c68a 0%,#b9773a 100%);opacity:.85;
  transition:width .6s ease-in .4s}
.bar-lag.up,.mbar-lag.up{transition:none}
#xpNumeric{margin-top:-2px!important}
@media (max-height:900px){ #player-panel .bar{--bh:16px} #player-panel .bar-text{font-size:11px} }
@media (max-height:780px){ #player-panel .bar{--bh:14px} #player-panel .bar-text{font-size:10px} }

/* mobile */
.mbar-t{--bh:13px;height:var(--bh)!important;width:auto!important;
  margin:calc(var(--bh)*.42) calc(var(--bh)*1.3 - 3px) calc(var(--bh)*.5);
  overflow:visible!important;border:none!important;background:#060405!important;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.95)!important}
.mbar-t::before{inset:0!important;z-index:3!important;
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 55%,rgba(0,0,0,.25) 100%),
    repeating-linear-gradient(65deg,rgba(0,0,0,.28) 0 1px,transparent 1px 7px)!important}
.mbar-t::after{z-index:6!important;background:none!important;
  inset:auto!important;
  top:calc(var(--bh)*-56/84)!important;bottom:calc(var(--bh)*-50/84)!important;
  left:calc(var(--bh)*-109/84)!important;right:calc(var(--bh)*-108/84)!important;
  border-style:solid;border-color:transparent;
  border-width:calc(var(--bh)*56/84) calc(var(--bh)*160/84) calc(var(--bh)*50/84);
  border-image:url(/static/ui/bar.webp?v=2) 28 80 25 fill stretch}
.mbar{margin-bottom:0!important}
#m-hpf{transition:width .12s ease-out!important}
.mbar-v{font-size:9.5px!important;color:#f6ecd6!important;text-shadow:0 1px 2px #000,0 0 4px #000!important}

/* =========================================================
   MINIMAP – parchment is drawn in the canvas; zone name plaque
   ========================================================= */
#minimap #screenName{box-sizing:border-box;align-self:center;
  height:30px;line-height:30px!important;min-width:150px;max-width:calc(100% - 12px);
  margin:6px auto 5px;padding:0 6px 1px!important;
  border-style:solid;border-color:transparent;border-width:0 28px;
  border-image:url(/static/ui/plate_small.webp?v=1) 0 100 fill / 0 28px stretch;
  color:#f1e0b4!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.12em!important;
  text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.7)!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
#minimap #screenName:empty{visibility:hidden}
#mob-map #screenName{height:22px;line-height:22px!important;min-width:110px;max-width:calc(100% - 6px);
  margin:3px auto 2px;padding:0 3px!important;border-width:0 18px;border-image-width:0 18px;border-bottom-style:solid;
  font-size:9.5px!important;letter-spacing:.08em!important}
@media (max-height:780px){
  #minimap #screenName{height:24px;line-height:24px!important;margin:4px auto 3px;border-width:0 22px;border-image-width:0 22px;font-size:11px!important}
}

/* =========================================================
   MAIN SCREEN PANELS (desktop) – thin bronze frame + stone
   frame.webp at 16px, outset 4px; layout border 6px
   ========================================================= */
#layout #minimap, #layout #player-panel, #layout #entities, #layout #equip-panel,
#layout #room, #layout #combat-panel, #game-footer-meta{
  border:solid transparent!important;border-width:3px 6px!important;
  border-image:url(/static/ui/frame.webp?v=1) 110 / 16px / 4px round!important;
  background:linear-gradient(rgba(9,7,6,.68),rgba(7,5,4,.78)),url(/static/ui/stone.webp?v=1) 0 0/384px repeat!important;
  box-shadow:0 4px 14px rgba(0,0,0,.75)!important}
#layout #room{background:linear-gradient(rgba(8,6,5,.8),rgba(6,5,4,.86)),url(/static/ui/stone.webp?v=1) 0 0/384px repeat!important}
#layout #entities::before, #layout #entities::after, #layout #equip-panel::before, #layout #equip-panel::after,
#layout #combat-panel::before, #layout #combat-panel::after, #layout #stats-panel::before, #layout #stats-panel::after,
#layout #player-panel::before, #layout #player-panel::after, #layout #log-container::before, #layout #log-container::after{content:none}
#layout #stats-panel{border:none!important;background:none!important;box-shadow:none!important}
#layout #log-container{background:none!important}
#layout #statusBar{background:rgba(0,0,0,.3);border-bottom:1px solid rgba(201,168,76,.2)}

/* panel titles = small bronze plaque */
#layout .panel-title{width:fit-content;max-width:calc(100% - 70px);height:28px;box-sizing:border-box;
  margin:0 auto 8px!important;padding:0 8px 1px!important;
  display:flex;align-items:center;justify-content:center;
  border-style:solid;border-color:transparent;border-width:0 26px;
  border-image:url(/static/ui/plate_small.webp?v=1) 0 100 fill / 0 26px stretch;
  background:none!important;
  font-family:'Cinzel',serif;font-size:12.5px!important;font-weight:700;letter-spacing:.14em!important;text-transform:none;
  color:#f1e0b4;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.7);white-space:nowrap;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
#layout #stats-panel .panel-title{height:30px;font-size:13.5px!important}
#layout #equip-panel .panel-title{position:static}
#layout #equipCollapseBtn{position:absolute;top:7px;right:8px}
#layout #equip-panel .panel-title{filter:none;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.7)}
#layout #entities{min-height:96px}

/* mobile: stone bands top / bottom / right column */
#mob-top, #mob-bot{
  background:linear-gradient(rgba(8,6,5,.6),rgba(7,5,4,.72)),url(/static/ui/stone.webp?v=1) 0 0/320px repeat!important}
#mob-top{border-bottom:1px solid #6a5028!important;box-shadow:0 1px 0 rgba(226,196,126,.12),0 4px 10px rgba(0,0,0,.6)}
#mob-bot{border-top:1px solid #6a5028!important;box-shadow:inset 0 1px 0 rgba(226,196,126,.12),0 -4px 10px rgba(0,0,0,.6)}
#mob-right{background:linear-gradient(rgba(8,6,5,.74),rgba(7,5,4,.82)),url(/static/ui/stone.webp?v=1) 0 0/320px repeat}
#mob-log{border-right:1px solid #5a4422!important}

/* =========================================================
   LOG TABS + CHAT BAR (desktop + mobile)
   ========================================================= */
#log-filter{gap:2px;padding:6px 10px 0;align-items:flex-end;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.28))!important;
  border-bottom:1px solid rgba(201,168,76,.3)!important}
#log-filter .log-filter-btn,
#mob-rtabs .mob-rtab{
  height:30px;min-width:100px;margin:0;padding:4px 16px 0;
  border:none!important;border-radius:0;
  background:url(/static/ui/tab.webp?v=1) center / 100% 100% no-repeat!important;
  box-shadow:none!important;overflow:visible;position:relative;
  font-family:'Cinzel',serif;font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:none;
  color:#d8c79c;text-shadow:0 1px 2px #000;
  filter:brightness(.6) saturate(.75);transition:filter .15s}
#log-filter .log-filter-btn::after, #mob-rtabs .mob-rtab::after{display:none}
#log-filter .log-filter-btn:hover:not(.active), #mob-rtabs .mob-rtab:hover:not(.active){color:#efe2bd;filter:brightness(.85) saturate(.9)}
#log-filter .log-filter-btn:active, #mob-rtabs .mob-rtab:active{transform:none}
#log-filter .log-filter-btn.active, #mob-rtabs .mob-rtab.active{filter:none;color:#e2c47e}

/* gear = small medallion */
#log-filter-settings-btn,
#mob-log #log-filter > button:not(.log-filter-btn){
  width:26px;height:26px;flex:0 0 26px;align-self:center;margin:0 0 2px 8px!important;padding:0!important;
  border:none!important;border-radius:0;
  background:url(/static/ui/close.webp?v=1) center / contain no-repeat!important;
  color:transparent!important;font-size:0!important;box-shadow:none!important;overflow:visible;position:relative;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
#log-filter-settings-btn::after,
#mob-log #log-filter > button:not(.log-filter-btn)::after{content:'⚙';display:flex;position:absolute;inset:0;align-items:center;justify-content:center;
  color:#f0d78e;font-size:13px;background:radial-gradient(circle,#3a2a14 42%,transparent 44%);text-shadow:0 1px 2px #000}
#log-filter-settings-btn:hover,
#mob-log #log-filter > button:not(.log-filter-btn):hover{filter:brightness(1.2) drop-shadow(0 2px 3px rgba(0,0,0,.7))}

/* chat bar */
#chat-bar{gap:6px;padding:6px 8px!important;align-items:center;
  background:rgba(0,0,0,.32)!important;border-top:1px solid rgba(201,168,76,.28)!important}
#chat-input, #chat-channel{
  background:rgba(4,3,2,.62)!important;border:1px solid #2c2416!important;border-top-color:#15110a!important;border-bottom-color:#4a3c22!important;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.85);border-radius:0;color:#e6dcc0!important;outline:none}
#chat-input{height:30px;box-sizing:border-box}
#chat-channel{height:30px;box-sizing:border-box;color:#d8c79c!important}
#chat-input:focus, #chat-channel:focus{border-color:#8a6a2a!important;box-shadow:inset 0 2px 7px rgba(0,0,0,.85),0 0 0 2px rgba(201,168,76,.16)}
#chat-input::placeholder{color:#6f6250!important}
#chat-send, #dice-btn, #mob-log #chat-bar > button:last-child{
  height:30px;min-width:0;box-sizing:border-box;padding:0 2px 1px!important;
  border-style:solid!important;border-color:transparent!important;border-width:0 16px!important;
  border-image:url(/static/ui/btn_secondary.webp?v=1) 0 67 fill / 0 16px stretch!important;
  background:none!important;box-shadow:none!important;overflow:visible;
  font-family:'Cinzel',serif;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:none;
  color:#e6dcc0!important;text-shadow:0 1px 2px #000;white-space:nowrap;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));transition:filter .15s}
#chat-send::after, #dice-btn::after, #mob-log #chat-bar > button:last-child::after{display:none}
#chat-send:hover, #dice-btn:hover, #mob-log #chat-bar > button:last-child:hover{filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) brightness(1.2)}
#dice-btn{display:flex;gap:4px}
#dice-btn svg{width:18px;height:18px}
#dice-btn span{color:#e6dcc0!important;font-size:11px!important;font-weight:700}

/* mobile sizes */
#mob-log #log-filter{padding:4px 4px 0}
#mob-log #log-filter .log-filter-btn{flex:1;min-width:0;height:26px;padding:3px 2px 0;font-size:10.5px;letter-spacing:.04em}
#mob-log #log-filter > button:not(.log-filter-btn){width:24px;height:24px;flex:0 0 24px;margin:0 0 1px 4px!important}
#mob-rtabs{gap:2px;padding:4px 4px 0;align-items:flex-end;border-bottom:1px solid rgba(201,168,76,.3)!important}
#mob-rtabs .mob-rtab{flex:1;min-width:0;height:26px;padding:3px 2px 0;font-size:10.5px;letter-spacing:.04em}
#mob-log #chat-bar{gap:4px;padding:5px 5px!important}
#mob-log #chat-input, #mob-log #chat-channel{height:28px}
#mob-log #chat-send, #mob-log #chat-bar > button:last-child{height:28px;border-width:0 12px!important;border-image-width:0 12px!important;font-size:11px}

/* =========================================================
   SMALL ITEMS: portrait ring, menu buttons, d-pad
   ========================================================= */
/* player card portrait (desktop) – ring.webp 256x238, hole centre 128.5/113.5, r≈73 */
#player-card{min-height:86px!important;align-items:center!important;
  background:linear-gradient(rgba(8,6,5,.62),rgba(7,5,4,.74)),url(/static/ui/stone.webp?v=1) 0 0/320px repeat!important;
  border-bottom:1px solid rgba(201,168,76,.25)!important}
#player-card-portrait{position:relative;flex:0 0 88px;width:88px;height:82px;margin-left:2px;cursor:pointer}
#player-card-portrait #player-card-icon{position:absolute;left:19px;top:14px;width:50px!important;height:50px;
  border:none!important;border-radius:50%;object-fit:cover;object-position:top;background:#0a0806!important}
#player-card-portrait::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:url(/static/ui/ring.webp?v=2) 0 0 / 100% 100% no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}

/* menu buttons + d-pad = bronze tiles (slot 9-slice) */
#player-panel div[style*="gap:6px"] > button,
#mob-acts button,
.controls button, .vert button,
#mob-dpad button{
  border-style:solid!important;border-color:transparent!important;border-width:6px!important;
  border-image:url(/static/ui/slot.webp?v=1) 28 fill / 6px stretch!important;
  background:none!important;box-shadow:none!important;border-radius:0;overflow:visible;
  font-family:'Cinzel',serif!important;font-weight:700!important;text-transform:lowercase!important;
  color:#e0cf9e!important;text-shadow:0 1px 2px #000;
  transition:filter .15s}
#player-panel div[style*="gap:6px"] > button{padding:2px 0 3px!important;font-size:11.5px!important;letter-spacing:.04em!important;height:30px}
#player-panel div[style*="gap:6px"] > button::after, #mob-acts button::after, .controls button::after, .vert button::after, #mob-dpad button::after{display:none}
#player-panel div[style*="gap:6px"] > button:hover:not(:disabled),
.controls button:hover:not(:disabled), .vert button:hover:not(:disabled){
  color:#fff4dc!important;filter:brightness(1.25) drop-shadow(0 0 6px rgba(226,196,126,.35))}
#mob-acts button:active:not(:disabled), #mob-dpad button:active:not(:disabled){color:#fff4dc!important;filter:brightness(1.3)}
.controls button:disabled, .vert button:disabled, #mob-dpad button:disabled{opacity:.32!important;filter:grayscale(.7);cursor:default}
.controls button, .vert button{font-size:12px!important;letter-spacing:.06em}
#mob-dpad button{font-size:11px!important;letter-spacing:.06em!important}
#mob-dpad #bu, #mob-dpad #bd{font-size:9.5px!important}
#mob-acts button{padding:4px 1px!important;font-size:9.5px!important;letter-spacing:.02em}
#mob-acts button span{display:block;line-height:1.1}
#mob-acts #castBtn{box-shadow:inset 0 0 14px rgba(200,40,30,.7)!important;color:#ffc4b4!important}
.controls button, .vert button, #mob-dpad button{text-transform:none!important}
.vert button{font-size:10.5px!important}
#mob-map #minimap{display:flex;flex-direction:column;align-items:center}

/* =========================================================
   DAMAGE TYPE ICON before a mob's damage number (server sends <i class="dt dt-fire">)
   sprite dmg_types.webp = 7 × 64px: physical, spell, fire, ice, chaos, dark, holy
   size = same as the skill icon before a skill name (.log-skill-ic)
   ========================================================= */
i.dt{display:inline-block;width:1.1em;height:1.1em;vertical-align:-0.2em;margin-right:2px;font-style:normal;
  background:url(/static/ui/dmg_types.webp?v=1) 0 0 / 700% 100% no-repeat}
i.dt-physical{background-position:0 0}
i.dt-spell{background-position:16.6667% 0}
i.dt-fire{background-position:33.3333% 0}
i.dt-ice{background-position:50% 0}
i.dt-chaos{background-position:66.6667% 0}
i.dt-dark{background-position:83.3333% 0}
i.dt-holy{background-position:100% 0}

/* =========================================================
   FIXES 10.10: gear as SVG (font glyph sat off-centre), consumable qty, contrast
   ========================================================= */
#hotbar-settings-btn::after,
#log-filter-settings-btn::after,
#mob-log #log-filter > button:not(.log-filter-btn)::after{
  content:''!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f0d78e' fill-rule='evenodd' d='M19.45,10.49 L22.11,10.68 L22.11,13.32 L19.45,13.51 L18.33,16.20 L20.09,18.22 L18.22,20.09 L16.20,18.33 L13.51,19.45 L13.32,22.11 L10.68,22.11 L10.49,19.45 L7.80,18.33 L5.78,20.09 L3.91,18.22 L5.67,16.20 L4.55,13.51 L1.89,13.32 L1.89,10.68 L4.55,10.49 L5.67,7.80 L3.91,5.78 L5.78,3.91 L7.80,5.67 L10.49,4.55 L10.68,1.89 L13.32,1.89 L13.51,4.55 L16.20,5.67 L18.22,3.91 L20.09,5.78 L18.33,7.80Z M12,8.6a3.4,3.4 0 1,0 0.001,0Z'/%3E%3C/svg%3E") center / 52% 52% no-repeat, radial-gradient(circle, #3a2a14 42%, transparent 44%)!important}

/* hotbar settings: quantity sits on the icon corner, name gets the full width */
#hotbar-settings-panel.bs-panel .sp-card .sp-card-qty{top:42px;bottom:auto;right:14px;
  font-family:'Crimson Pro',Georgia,serif;font-size:13px;font-weight:700;color:#fff4dc;
  text-shadow:0 0 3px #000,0 1px 2px #000,0 0 6px #000}
#hotbar-settings-panel.bs-panel .sp-card-name{color:#e6dcc0;font-size:13.5px}
#hotbar-settings-panel.bs-panel .sp-card.sp-card-assigned .sp-card-name{color:#e2c47e}
#hotbar-settings-panel.bs-panel .sp-card.sp-card-assigned::after{color:#f0d78e}
#hotbar-settings-panel.bs-panel .sp-kb-row{border-bottom-color:var(--bs-hair)}
#hotbar-settings-panel.bs-panel .sp-kb-label{font-family:'Crimson Pro',Georgia,serif;font-size:15.5px;letter-spacing:0;text-transform:none;color:#e6dcc0}
#hotbar-settings-panel.bs-panel .sp-kb-badge{font-size:12px;color:#f0d78e;background:rgba(4,3,2,.6);border-color:#5a4628}
#hotbar-settings-panel.bs-panel .sp-footer-hint,
#hotbar-settings-panel.bs-panel .sp-empty-msg{color:#c9b98f}

/* brighter secondary text everywhere in the skin */
:root{--bs-sub:#d6c9a6;--bs-dim:#c4ad78}

/* vendor rows you can't buy: text stays readable, only icon and button fade */
.bs-vendor .vendor-row.disabled{opacity:1}
.bs-vendor .vendor-row.disabled .vendor-icon{opacity:.5;filter:grayscale(.6)}
.bs-vendor .vendor-row.disabled .vendor-name{color:#c9bc98}
.bs-vendor .vendor-row.disabled .vendor-price{color:#d98a74}
.bs-vendor .vendor-preview > span:not([class]){color:#c4b48e!important}
.bs-craft .craft-recipe.disabled{opacity:1}
.bs-craft .craft-recipe.disabled .craft-result-icon{opacity:.5;filter:grayscale(.6)}
#hotbar-settings-panel.bs-panel .sp-card-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15;overflow:hidden;text-overflow:clip}

/* =========================================================
   ICON SIZE (10.10 evening): the bronze slot frame ate too much of the icon.
   The ring in slot.webp is ~9 % of the slot, so icons now start right at it.
   ========================================================= */
#hotbar .hotbar-slot, #mob-bot .hotbar-slot, #equip-panel .equip-slot{
  border-width:4px!important;border-image-width:5px!important}
#hotbar .hotbar-slot img, #mob-bot .hotbar-slot img, #equip-panel .equip-slot img{
  width:100%;height:100%;object-fit:cover;border-radius:1px}
#inventoryPanel.bs-panel .inv-slot,
#inventoryPanel.bs-panel .equip-slot,
.bs-equipm .equip-slot{padding:6%}
.bs-vendor .vendor-icon img{width:54px;height:54px}
.bs-vault .vault-slot{padding:5px}
.bs-bazaar .bz-icon{padding:4px}
.bs-craft .craft-result-icon{padding:5px}
.ench-cell{padding:4px}
.qp-slot{padding:5px}
#hotbar-settings-panel.bs-panel .sp-slot img{width:52px;height:52px}
#hotbar-settings-panel.bs-panel .sp-card img,
#hotbar-settings-panel.bs-panel .sp-card .sp-card-no-icon{padding:4px}
.bs-skills .skill-icon{padding:4px}
#asc-modal-box.bs-panel .ascd-skill-icon, #asc-modal-box.bs-panel .asc-ic{padding:4px}
.trade-slot{padding:4px}
#hotbar .hotbar-slot, #mob-bot .hotbar-slot, #equip-panel .equip-slot{border-width:3px!important;border-image-width:4px!important}
/* icons pop off the dark slot like before (the old slots had this shadow too) */
#hotbar .hotbar-slot img, #mob-bot .hotbar-slot img, #equip-panel .equip-slot img,
#inventoryPanel.bs-panel .inv-slot img, #inventoryPanel.bs-panel .equip-slot img, .bs-equipm .equip-slot img,
.bs-vendor .vendor-icon img, .bs-vault .vault-slot img, .trade-slot img, .bs-bazaar .bz-icon img,
.bs-craft .craft-result-icon img, .ench-cell img{filter:brightness(1.06) contrast(1.05) drop-shadow(0 2px 3px rgba(0,0,0,.85))}
.hotbar-slot.cooldown img{filter:grayscale(1) brightness(.5)!important}