/* ════════════════════════════════════════════════════════════════
   ETERNAL DUELS — BITMAP SKIN
   Načítava sa AŽ PO pôvodných štýloch v game.html, takže rovnaký
   selektor tu vyhrá. JS, id ani štruktúru nemení — len vzhľad.
   Obrázky: /static/ui/*.webp, pri každej zmene zvýš ?v=N.

   Krok 1: hlavný layout + ľavé menu + pravý stĺpec.
════════════════════════════════════════════════════════════════ */

:root {
  --sk-text:      #efe4cb;   /* hlavný text na koži            */
  --sk-text-2:    #dccfb2;   /* vedľajší text — stále čitateľný */
  --sk-gold:      #f3cf73;
  --sk-gold-hi:   #ffe3a0;
  --sk-hair:      rgba(214, 170, 96, 0.30);   /* jemná deliaca linka */
  --sk-hair-soft: rgba(214, 170, 96, 0.16);
  --sk-frame:     34px;      /* zobrazená veľkosť rohu rámu    */
}

/* ── PANELY: koža + bitmapový rám ─────────────────────────────────
   Pozadie panela je v ::before (odsadené pod lištu rámu), rám v ::after
   nad obsahom. Tak koža nepresvitá mimo lišty medzi hrotmi rohov. */
#nav, #right {
  /* Koža priamo ako pozadie panela (nie v ::before s isolation — to
     stmavovalo avatar). Priehľadný 10px okraj drží kožu pod lištou rámu. */
  border: 10px solid transparent !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--crimson-rgb), 0.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.52)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat,
    #0a0705;
  background-clip: padding-box;
  box-shadow: none;
  position: relative;
}
#nav::before { display: none; }
#nav::after, #right::after {
  content: '';
  position: absolute;
  inset: -10px;
  pointer-events: none;
  z-index: 5;
  border: var(--sk-frame) solid transparent;
  border-image: url('frame.webp?v=15') 100 / var(--sk-frame) round;
}
/* Obsah drží odstup od lišty rámu (lišta je 7–18 px od okraja). */
#nav   { padding: 0 2px 2px; }
#right { padding: 4px 0 2px; }

/* ── STRED: tmavšia koža, nech obsah vystúpi ── */
#center {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(var(--crimson-rgb), 0.06), transparent 55%),
    linear-gradient(180deg, rgba(5,3,2,0.74), rgba(5,3,2,0.84)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat,
    #0a0705;
}

/* ── NADPIS OBRAZOVKY: vyrytý do mosadznej plakety ── */
#screen-head {
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15));
  border-bottom: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
#screen-head::after { display: none; }
#topbar-title {
  display: inline-block;
  min-width: 300px;
  height: 58px;
  line-height: 58px;
  padding: 0 84px;
  border: 0;
  /* Plaketa sa naťahuje len do šírky — horná a dolná polovica sa
     nedeformujú, takže zlatý pás ostane vždy plne vysoký. */
  border-image: url('header_plate.webp?v=15') 65 150 fill / 29px 67px stretch;
  font-family: var(--font-logo);
  font-size: 22px;
  letter-spacing: 5px;
  color: #2a1606;
  text-shadow: 0 1px 0 rgba(255, 226, 160, 0.55), 0 -1px 0 rgba(0,0,0,0.25);
  white-space: nowrap;
}
#topbar-flavor {
  font-size: 15px;
  color: var(--sk-text-2);
  margin-top: 6px;
  opacity: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

/* ════════════════ ĽAVÉ MENU ════════════════ */

/* Karta postavy — bez vlastnej krabice, koža prejde až hore. */
#nav-hero {
  background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent);
  border-bottom: 0;
  padding-left: 12px; padding-right: 12px;
}
#nav-hero::after {
  background: linear-gradient(90deg, transparent, var(--sk-hair) 25%, var(--sk-hair) 75%, transparent);
  box-shadow: none;
}
#nav-hero #nav-char-sub { color: var(--sk-text-2); font-size: 14px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }

/* XP lišta v bitmapovom ráme (koncovky + koľajnice, stred priehľadný). */
#nav-hero #nav-xp-bar-wrap,
#nav-xp-bar-wrap {
  height: 20px;
  margin-top: 7px;
  border-radius: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 6px 15px;
  border-image: url('bar_frame.webp?v=15') 23 62 / 6px 15px stretch;
  background: #0b0705;
  background-clip: padding-box;
  overflow: hidden;
}
#nav-xp-bar { border-radius: 0; }
#nav-hero #nav-xp-text,
#nav-xp-text { font-size: 13px; color: var(--sk-text-2); text-shadow: 0 1px 2px rgba(0,0,0,0.9); }

/* Peňaženka — čísla bez krabíc, popis pod nimi normálnym písmom. */
#nav-purse {
  background: none;
  border-top: 0;
  border-radius: 0;
  margin: 0 8px 4px;
}
.purse-val { font-size: 19px; white-space: nowrap; }
.purse-label {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--sk-text-2);
}

/* Pošta a výmeny — ikona + text na koži, oddelené linkou, bez rámčekov. */
#nav-inbox {
  gap: 0;
  padding: 2px 8px 6px;
}
.inbox-cell {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 6px 8px;
  justify-content: center;
}
.inbox-cell + .inbox-cell { border-left: 1px solid var(--sk-hair-soft); }
.inbox-cell:hover {
  background: radial-gradient(ellipse at 50% 50%, rgba(214,160,70,0.18), transparent 70%);
}
.inbox-label {
  font-size: 14px;
  color: var(--sk-text);
  letter-spacing: 1px;
}
.inbox-cell:hover .inbox-label { color: var(--sk-gold-hi); }
.inbox-count { top: -2px; right: 4px; }

/* Serverový čas — riadok medzi linkami, nie krabica. */
#nav-clock {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 8px clamp(4px, 0.8vh, 10px);
  justify-content: center;
  position: relative;
}
#nav-clock::before, #nav-clock::after {
  content: '';
  position: absolute; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sk-hair) 25%, var(--sk-hair) 75%, transparent);
}
#nav-clock::before { top: 0; }
#nav-clock::after  { bottom: 0; }
#nav-clock-label {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.25;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--sk-text-2);
}

/* Bilancia — tri čísla oddelené zvislou linkou. */
#nav-record {
  margin: 0 8px 6px;
  border-bottom: 0;
  gap: 0;
}
#nav-record .record-cell {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 2px;
}
#nav-record .record-cell + .record-cell { border-left: 1px solid var(--sk-hair-soft); }
#nav-record .record-val { font-size: 21px; font-weight: 700; }
#nav-record .record-label {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--sk-text-2);
  margin-top: 1px;
}

/* Položky menu — text na koži, medzi nimi jemná linka.
   Aktívna leží na železnej plakete so zlatými hrotmi. */
#nav-items { padding: 6px 4px; }
.nav-item {
  clip-path: none;
  background: none;
  box-shadow: none;
  border: 0;
  padding-left: 30px;
  padding-right: 24px;
  color: var(--sk-text);
  font-size: 15px;
  letter-spacing: 1.6px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.nav-item::before {
  top: auto; bottom: -1px; left: 14%; right: 14%;
  width: auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sk-hair-soft) 20%, var(--sk-hair-soft) 80%, transparent);
  opacity: 1;
  box-shadow: none;
}
.nav-item:hover {
  color: var(--sk-gold-hi);
  background: linear-gradient(90deg, transparent, rgba(214,160,70,0.16) 30%, rgba(214,160,70,0.16) 70%, transparent);
  box-shadow: none;
}
.nav-item.active {
  color: var(--sk-gold-hi);
  background: none;
  box-shadow: none;
  border-image: url('plate_small.webp?v=15') 26 64 fill / 10px 26px stretch;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 12px rgba(var(--gold-rgb), 0.45);
}
.nav-item.active::before,
.nav-item.active::after { display: none; }
.nav-icon { opacity: 0.85; }
.nav-item.active .nav-icon { filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.55)); color: var(--sk-gold); }

/* ════════════════ PRAVÝ STĹPEC ════════════════ */
.right-section {
  padding: 14px 14px;
  border-bottom: 0;
}
/* Nadpis sekcie na železnej plakete — väčší a svetlý. */
.right-title {
  justify-content: center;
  margin: 0 0 12px;
  padding: 10px 30px 9px;
  border: 0;
  border-image: url('plate_small.webp?v=15') 26 64 fill / 10px 26px stretch;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--sk-gold-hi);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.right-title::after { display: none; }

/* Posledné zápasy — riadky oddelené linkou, nie krabice. */
.fight-row {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sk-hair-soft);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  padding: 8px 6px;
  font-size: 14px;
}
.fight-row:hover { background: linear-gradient(90deg, rgba(214,160,70,0.12), transparent); }
.fight-vs { color: var(--sk-text); font-size: 15.5px; }
.fight-result { color: var(--sk-text-2); font-size: 12.5px; }

.notif-row {
  font-size: 15px;
  color: var(--sk-text);
  border-bottom-color: var(--sk-hair-soft);
  padding: 8px 0;
}
.notif-icon { color: var(--sk-text-2); }
.notif-time { font-size: 12.5px; color: var(--sk-text-2); }

/* Prázdny stav — čitateľný, nie zhasnutý. */
#right .empty-state { color: var(--sk-text-2); font-size: 16px; }

/* Account / Wiki / Switch — železné tlačidlá, Logout červené. */
.right-links { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; padding-top: 10px; padding-bottom: 14px; }
.right-links .nav-link-btn {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 8px 18px stretch;
  padding: 12px 20px;
  white-space: nowrap;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  color: var(--sk-text);
}
.right-links .nav-link-btn:hover {
  background: none;
  color: #fff;
  filter: brightness(1.18);
}
#right .right-links .nav-link-btn.logout {
  background: none;
  border-image: url('btn_danger.webp?v=15') 14 60 fill / 8px 18px stretch;
  color: #ffe2d8;
}
.right-links .nav-link-btn.logout:hover {
  background: none;
  filter: brightness(1.18);
}
.right-links .nav-link-btn:active { filter: brightness(0.92); transform: translateY(1px); }

/* ── Užšie okná: ľavý stĺpec má len 220 px ── */
@media (max-width: 1400px) {
  :root { --sk-frame: 28px; }
  #nav   { padding-left: 0; padding-right: 0; }
  #right { padding-left: 0; padding-right: 0; }
  .nav-item { font-size: 13.5px; letter-spacing: 1px; padding-left: 26px; padding-right: 8px; gap: 9px; }
  .nav-item.active { border-image-width: 10px 22px; }
  .purse-val { font-size: 16.5px; }
  #nav-purse { gap: 4px; margin: 0 4px 4px; }
  .purse-label { font-size: 13px; }
  #nav-inbox { padding: 2px 4px 6px; }
  .inbox-cell { gap: 6px; padding: 6px 4px; }
  .inbox-icon { width: 24px; height: 24px; }
  .inbox-label { font-size: 12.5px; letter-spacing: 0.5px; }
  #nav-clock { gap: 7px; margin-left: 4px; margin-right: 4px; padding-left: 4px; padding-right: 4px; }
  #nav-clock-time { font-size: 16px; letter-spacing: 0.5px; min-width: 4.4em; }
  #nav-clock-label { font-size: 12px; }
  #nav-record .record-label { font-size: 13px; }
  #nav-hero #nav-xp-text, #nav-xp-text { font-size: 12px; }
  .right-section { padding: 12px 8px; }
  .right-title { font-size: 12.5px; letter-spacing: 0.7px; padding: 9px 20px 8px; white-space: nowrap;
                 border-image-width: 9px 20px; }
  .right-links { grid-template-columns: minmax(0,1fr); gap: 5px; }
  .right-links .nav-link-btn { font-size: 12px; letter-spacing: 0.8px; padding: 10px 14px; }
  #topbar-title { font-size: 20px; letter-spacing: 4px; }
}
/* Nízke okná — pôvodné výškové pravidlá zmenšujú menu; tu len
   udržíme písmo čitateľné. */
@media (max-height: 1000px) and (min-width: 1401px) {
  .nav-item { font-size: 14px; }
}
@media (max-height: 1000px) {
  .nav-item.active { border-image-width: 8px 24px; }
  #topbar-title { height: 50px; line-height: 50px; padding: 0 74px; font-size: 20px;
                  border-image-width: 25px 58px; }
}
@media (max-height: 800px) {
  .nav-item { font-size: 12.5px; letter-spacing: 1px; }
  #nav-items { padding: 3px 4px; }
  #nav { padding-top: 0; }
  #topbar-title { height: 42px; line-height: 42px; padding: 0 62px; font-size: 17px;
                  border-image-width: 21px 48px; min-width: 240px; }
}
@media (max-height: 660px) {
  .nav-item { font-size: 12px; }
  #nav-inbox { padding: 0 8px 2px; }
  .inbox-cell { padding: 3px 8px; }
}

/* ════════════════════════════════════════════════════════════════
   KROK 2: CHARACTER — výbava, inventár, štatistiky
════════════════════════════════════════════════════════════════ */

/* Stĺpce: výbava | inventár | štatistiky. Štatistiky dostali šírku,
   aby sa do nich zmestilo čitateľné písmo. */
#screen-equipment.active {
  grid-template-columns: 300px minmax(260px, 1fr) 280px;
  gap: 14px;
}
@media (max-width: 1400px) {
  #screen-equipment.active { grid-template-columns: 250px minmax(220px, 1fr) 232px; gap: 10px; }
  #screen-equipment .equip-panel { border-width: 10px; border-image-width: 23px; padding: 8px 8px 12px; }
  #screen-equipment #inv-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
  #screen-equipment .inv-item { width: 62px; height: 62px; border-width: 4px; border-image-width: 10px; }
  #screen-equipment .inv-item-img { width: 48px; height: 48px; }
  #screen-equipment .stat-alloc-label { width: 34px; font-size: 14px; }
  #screen-equipment .stat-alloc-val { font-size: 16px; }
  /* Popis atribútu ide pod skratku na celú šírku — v úzkom stĺpci sa
     inak lámal po jednom slove do štyroch riadkov. */
  #screen-equipment .stat-alloc-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "lab . val btn" "sub sub sub sub";
    row-gap: 1px;
  }
  #screen-equipment .stat-alloc-label { grid-area: lab; }
  #screen-equipment .stat-alloc-sub   { grid-area: sub; }
  #screen-equipment .stat-alloc-val   { grid-area: val; }
  #screen-equipment .stat-alloc-btn   { grid-area: btn; }
}
@media (max-width: 1240px) {
  #screen-equipment.active { grid-template-columns: 272px minmax(240px, 1fr); }
}
@media (max-width: 860px) {
  #screen-equipment.active { grid-template-columns: minmax(0, 1fr); }
}

/* Panel = koža + bitmapový rám. Rám je border-image, takže pri rolovaní
   obsahu stojí na mieste; pozadie začína až pod lištou rámu. */
#screen-equipment .equip-panel {
  border: 12px solid transparent;
  border-radius: 0;
  border-image: url('frame.webp?v=15') 100 / 26px round;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.26), rgba(0,0,0,0.46)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat;
  background-clip: padding-box;
  box-shadow: none;
  padding: 10px 12px 14px;
}
#screen-equipment .equip-panel::-webkit-scrollbar { width: 7px; }
#screen-equipment .equip-panel::-webkit-scrollbar-thumb { background: rgba(214,170,96,0.35); border-radius: 4px; }

/* Nadpisy EQUIPMENT / INVENTORY / STATISTICS / LOADOUTS na plakete. */
#screen-equipment .panel-title {
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 12px;
  padding: 10px 30px 9px;
  border: 0;
  border-image: url('plate_small.webp?v=15') 26 64 fill / 10px 26px stretch;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--sk-gold-hi);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}

/* ── POWER ── */
#screen-equipment .power-bar { margin: 0 2px 14px; }
#screen-equipment .power-label {
  font-family: var(--font-body); font-size: 15px; letter-spacing: 0.3px;
  text-transform: none; color: var(--sk-text-2);
}
#screen-equipment .power-nums { font-size: 16px; font-weight: 700; color: var(--sk-text); }
#screen-equipment .power-track {
  height: 20px;
  border-radius: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 6px 15px;
  border-image: url('bar_frame.webp?v=15') 23 62 / 6px 15px stretch;
  background: #0b0705;
  background-clip: padding-box;
  box-shadow: none;
}

/* ── BÁBKA: sloty z bitmapy, rarita ako vnútorný rám pod mosadzným lemom ──
   Skutočný (priehľadný) border posunie okraj obsahu presne pod lem
   bitmapy — vnútorný tieň vo farbe rarity tak sedí v slote, nie mimo neho. */
#screen-equipment #doll-wrap {
  max-width: 276px;
  grid-template-columns: 80px 1fr 80px;
  gap: 8px;
}
#screen-equipment .equip-slot {
  width: 80px; height: 80px;
  border: 6px solid transparent;
  border-radius: 0;
  border-image: url('item_slot.webp?v=15') 62 fill / 13px stretch;
  background: none;
  box-shadow: none;
  overflow: visible;
  gap: 2px;
}
/* Rarita: tenký rám vo farbe rarity položený presne na mosadzný lem
   bitmapy (::before nad výplňou slotu), plus jemný svit dovnútra. */
#screen-equipment .equip-slot.filled { border-color: transparent; background: none; box-shadow: none; }
#screen-equipment .equip-slot::before,
#screen-equipment .inv-item::before {
  content: '';
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border: 2px solid transparent;
  z-index: -1;
}
#screen-equipment .equip-slot,
#screen-equipment .inv-item { isolation: isolate; }
#screen-equipment .equip-slot.filled::before,
#screen-equipment .inv-item::before {
  border-color: var(--rar, #8d8378);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--rar, #6a5540) 45%, transparent);
}
#screen-equipment .equip-slot.filled.rar-legendary,
#screen-equipment .equip-slot.filled.rar-artifact,
#screen-equipment .inv-item.rarity-legendary,
#screen-equipment .inv-item.rarity-artifact {
  box-shadow: 0 0 12px -1px color-mix(in srgb, var(--rar) 60%, transparent);
}
#screen-equipment .equip-slot:hover {
  border-color: transparent;
  background: none;
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--rar, #c9a25c) 55%, transparent);
}
#screen-equipment .equip-slot:hover::before { border-color: var(--rar, rgba(214,170,96,0.8)); }
#screen-equipment .equip-slot.filtering { border-color: transparent; box-shadow: 0 0 14px rgba(var(--gold-rgb),0.45); }
#screen-equipment .equip-slot.filtering::before {
  border-color: var(--sk-gold);
  box-shadow: inset 0 0 16px rgba(var(--gold-rgb),0.4);
}
#screen-equipment .equip-slot.filled .slot-icon {
  inset: 2px; width: auto; height: auto;
}
#screen-equipment .equip-slot .slot-label {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2px;
  text-transform: none; color: var(--sk-text-2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
/* Zamknutý slot — tlmený, ale stále zreteľne viditeľný. */
#screen-equipment .equip-slot.locked { opacity: 0.62; filter: grayscale(0.6); }
#screen-equipment .equip-slot.blocked {
  border-color: transparent;
  background: rgba(var(--parch-dark-rgb),0.25);
  background-clip: padding-box;
}

/* ── LOADOUTS ── */
#screen-equipment .loadout-row { border-bottom-color: var(--sk-hair-soft); }
#screen-equipment .loadout-name {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sk-hair-soft);
  border-radius: 0;
  padding: 4px 2px 6px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--sk-text);
}
#screen-equipment .loadout-name[style*="italic"] { color: var(--sk-text-2) !important; }
#screen-equipment .loadout-name.active { background: none; color: var(--sk-gold-hi); border-bottom-color: var(--sk-hair); }
#screen-equipment .loadout-count {
  font-size: 12px; line-height: 18px; padding: 0 7px; border-radius: 9px;
  color: var(--sk-text); background: rgba(214,170,96,0.18);
}
#screen-equipment .loadout-btns { gap: 5px; }
#screen-equipment .loadout-btns .btn-sm {
  background: none;
  border: 0;
  border-radius: 0;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 6px 12px stretch;
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--sk-text);
}
#screen-equipment .loadout-btns .btn-sm:hover:not(:disabled) { color: #fff; filter: brightness(1.2); }
#screen-equipment .loadout-btns .loadout-del {
  border-image: url('btn_danger.webp?v=15') 14 60 fill / 6px 12px stretch;
  color: #ffe2d8;
  flex: 0 0 34px !important;
}
#screen-equipment .loadout-btns .btn-sm:disabled { opacity: 0.7; filter: grayscale(0.6); color: var(--sk-text-2); }

/* ── INVENTÁR: filtre ako textové prepínače ── */
#screen-equipment .filter-bar { gap: 4px 16px; align-items: center; margin: 2px 4px 12px; }
#screen-equipment .filter-btn {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 4px 0 3px;
  font-family: var(--font-title);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--sk-text);
  border-bottom: 2px solid transparent;
}
#screen-equipment .filter-btn:hover { color: var(--sk-gold-hi); }
#screen-equipment .filter-btn.active {
  background: none;
  color: var(--sk-gold);
  border-bottom-color: var(--sk-gold);
  text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.45);
}
#screen-equipment .filter-chk {
  border: 0;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--sk-text);
}
#screen-equipment .filter-chk:first-of-type { margin-left: auto; }
#screen-equipment .filter-chk input { width: 15px; height: 15px; }

/* Lišta slotov — ikony bez krabičiek, vybraný slot zlatý a podčiarknutý. */
#screen-equipment .slot-bar { gap: 2px 6px; margin: 0 2px 10px; }
#screen-equipment .slot-pick {
  width: 34px; height: 36px; padding: 3px 3px 5px;
  border: 0; border-radius: 0;
  border-bottom: 2px solid transparent;
  background: none;
}
#screen-equipment .slot-pick img { opacity: 0.72; }
#screen-equipment .slot-pick:hover img { opacity: 1; }
#screen-equipment .slot-pick.on { border-bottom-color: var(--sk-gold); box-shadow: none; }
#screen-equipment .slot-pick.on img { opacity: 1; filter: drop-shadow(0 0 5px rgba(var(--gold-rgb),0.6)); }
#screen-equipment .rarity-bar { gap: 9px; margin: 0 4px 12px; }
#screen-equipment .rar-dot { width: 17px; height: 17px; opacity: 0.5; }
#screen-equipment .rar-dot.on { opacity: 1; }
#screen-equipment .rar-clear { font-size: 14px; color: var(--sk-text-2); }
#screen-equipment .rar-clear:hover { color: var(--sk-gold-hi); }

/* Predmety — väčšie ikony v bitmapovom slote, rarita ako vnútorný rám. */
#screen-equipment #inv-grid {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  justify-items: center;
}
#screen-equipment .inv-item {
  width: 72px; height: 72px;
  border: 5px solid transparent;
  border-radius: 0;
  border-image: url('item_slot.webp?v=15') 62 fill / 12px stretch;
  background: none;
  box-shadow: none;
}
#screen-equipment .inv-item[class*="rarity-"] { border-color: transparent; }
#screen-equipment .inv-item:hover {
  border-color: transparent;
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--rar, #c9a25c) 60%, transparent);
}
#screen-equipment .inv-item.equipped { border-color: transparent; }
#screen-equipment .inv-item-img { width: 56px; height: 56px; }
#screen-equipment .inv-item-init { font-size: 24px; }
#screen-equipment .inv-item-pow {
  bottom: 1px; right: 3px;
  font-size: 11.5px; font-weight: 700;
  color: var(--sk-text);
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
}
#screen-equipment .equipped-dot { top: 4px; right: 4px; width: 7px; height: 7px; }
/* Zhasnuté filtrom — stále rozoznateľné, len zjavne mimo hry. */
#screen-equipment .inv-item.dimmed { opacity: 0.5; filter: grayscale(0.85); }

/* ── ŠTATISTIKY ── */
#screen-equipment .stat-points-head { margin: 0 2px 6px; }
#screen-equipment .stat-points-left {
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  text-transform: none; letter-spacing: 0.2px; color: var(--sk-gold);
}
#screen-equipment .btn-reset-stats {
  background: none;
  border: 0;
  border-radius: 0;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 6px 12px stretch;
  padding: 7px 16px;
  font-size: 12px;
  color: var(--sk-text);
}
#screen-equipment .btn-reset-stats:hover:not(:disabled) { color: #fff; filter: brightness(1.2); }
#screen-equipment .btn-reset-stats:disabled { opacity: 0.7; filter: grayscale(0.6); }
#screen-equipment .stat-legend {
  font-family: var(--font-body); font-size: 13.5px; font-style: italic;
  text-transform: none; letter-spacing: 0;
  color: var(--sk-text-2); margin: 0 2px 8px;
}
#screen-equipment .stat-alloc-row {
  padding: 6px 2px;
  gap: 8px;
  border-bottom: 1px solid var(--sk-hair-soft);
}
#screen-equipment .stat-alloc-label {
  width: 40px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--sk-gold-hi);
}
#screen-equipment .stat-alloc-sub {
  font-size: 13px; line-height: 1.2; color: var(--sk-text-2);
  text-transform: none; letter-spacing: 0;
}
#screen-equipment .stat-alloc-val { font-size: 17px; font-weight: 700; color: var(--sk-text); }
#screen-equipment .stat-alloc-val .stat-plus,
#screen-equipment .stat-alloc-val .stat-minus { font-size: 12.5px; font-weight: 600; }
#screen-equipment .stat-alloc-btn {
  width: 26px; height: 26px;
  border: 1px solid rgba(214,170,96,0.75);
  border-radius: 2px;
  background: linear-gradient(180deg, #4a3a22, #241a10);
  box-shadow: inset 0 1px 0 rgba(255,226,160,0.25), 0 1px 3px rgba(0,0,0,0.8);
  color: var(--sk-gold-hi);
  font-size: 18px; font-weight: 700;
}
#screen-equipment .stat-alloc-btn:hover:not(:disabled) { border-color: var(--sk-gold-hi); color: #fff; filter: brightness(1.2); }
#screen-equipment .stat-alloc-btn:disabled { opacity: 0.45; filter: grayscale(0.6); }

/* „Combat stats" — nadpis s ozdobným oddeľovačom, nie malé verzálky. */
#screen-equipment .stats-section-title {
  margin: 16px 0 6px;
  padding-bottom: 22px;
  text-align: center;
  font-family: var(--font-title);
  font-size: 15px; font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sk-gold-hi);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  background:
    url('divider_mid.webp?v=15') 50% 100% / auto 20px no-repeat,
    url('divider_l.webp?v=15') 0 100% / 50% 20px no-repeat,
    url('divider_r.webp?v=15') 100% 100% / 50% 20px no-repeat;
}
#screen-equipment .stat-row {
  padding: 6px 2px;
  font-size: 15px;
  border-bottom: 1px solid var(--sk-hair-soft);
}
#screen-equipment .stat-label {
  font-family: var(--font-body); font-size: 15px;
  text-transform: none; letter-spacing: 0.2px;
  color: var(--sk-text-2);
}
#screen-equipment .stat-value { font-size: 15px; font-weight: 700; color: var(--sk-text); }
#screen-equipment .stat-plus { font-size: 13px; }

/* Nízke okná — bábka sa zmenší, nech sa zmestí bez rolovania. */
@media (max-height: 1000px) {
  #screen-equipment .equip-slot { width: 68px; height: 68px; border-width: 5px; border-image-width: 11px; }
  #screen-equipment #doll-wrap { grid-template-columns: 68px 1fr 68px; gap: 6px; max-width: 250px; }
  #screen-equipment .stat-row,
  #screen-equipment .stat-alloc-row { padding-top: 4px; padding-bottom: 4px; }
}
@media (max-height: 800px) {
  #screen-equipment .equip-slot { width: 58px; height: 58px; border-width: 4px; border-image-width: 9px; }
  #screen-equipment #doll-wrap { grid-template-columns: 58px 1fr 58px; gap: 5px; max-width: 220px; }
  #screen-equipment .equip-slot .slot-label { font-size: 11px; }
  #screen-equipment .panel-title { font-size: 14px; padding: 8px 26px 7px; }
}
@media (max-width: 1400px) {
  #screen-equipment .stat-alloc-sub { font-size: 12px; }
  #screen-equipment .filter-bar { gap: 4px 12px; }
  #screen-equipment .filter-btn { font-size: 13.5px; }
  #screen-equipment .filter-chk { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   KROK 3: ARENA
   Celý zoznam leží v jednom paneli (koža + rám). Riadky nie sú karty —
   oddeľuje ich len linka, myš ich podsvieti.
════════════════════════════════════════════════════════════════ */
#screen-arena.active {
  display: flex;
  flex-direction: column;
  border: 12px solid transparent;
  border-image: url('frame.webp?v=15') 100 / 26px round;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.48)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat;
  background-clip: padding-box;
  padding: 14px 14px 10px;
}
/* Legenda a filtre hore, hlavička stĺpcov tesne nad zoznamom. */
#screen-arena .arena-meta    { order: 1; }
#screen-arena .arena-filters { order: 2; }
#screen-arena .arena-header  { order: 3; }
#screen-arena #arena-list    { order: 4; }

#screen-arena .arena-meta {
  gap: 8px 20px;
  padding: 0 8px 12px;
  font-size: 15px;
  color: var(--sk-text-2);
}
#screen-arena .arena-legend { color: var(--sk-text); }
#screen-arena .arena-hide-toggle {
  font-family: var(--font-body); font-size: 14.5px; letter-spacing: 0.2px;
  text-transform: none; color: var(--sk-gold);
  text-decoration: underline; text-underline-offset: 3px;
}
#screen-arena .arena-hide-toggle:hover { color: var(--sk-gold-hi); }

/* Vyhľadávanie a výbery — podčiarknuté polia, nie krabice. */
#screen-arena .arena-filters { gap: 10px 22px; padding: 0 8px 16px; align-items: flex-end; }
#screen-arena .arena-search,
#screen-arena .arena-select {
  background-color: rgba(0,0,0,0.28);
  border: 0;
  border-bottom: 1px solid rgba(214,170,96,0.55);
  border-radius: 0;
  font-size: 16px;
  color: var(--sk-text);
  padding: 7px 10px 6px;
}
#screen-arena .arena-select { padding-right: 30px; background-size: 12px 8px; }
#screen-arena .arena-search::placeholder { color: var(--sk-text-2); opacity: 0.85; }
#screen-arena .arena-search:focus,
#screen-arena .arena-select:focus { border-bottom-color: var(--sk-gold); background-color: rgba(0,0,0,0.42); }

/* Hlavička stĺpcov — normálne písmo, zlatá linka pod ňou. */
#screen-arena .arena-header {
  padding: 4px 18px 8px;
  margin: 0;
  font-size: 14.5px;
  text-transform: none;
  letter-spacing: 0.8px;
  color: var(--sk-text-2);
  border-bottom: 1px solid var(--sk-hair);
}

/* Oddeľovač levelov — vycentrovaný text medzi dvomi linkami. */
#screen-arena .arena-level-sep {
  margin: 14px 4px 2px;
  gap: 14px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: none;
  color: var(--sk-gold);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
#screen-arena .arena-level-sep::before,
#screen-arena .arena-level-sep::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sk-hair) 40%, var(--sk-hair));
}
#screen-arena .arena-level-sep::after {
  background: linear-gradient(90deg, var(--sk-hair), var(--sk-hair) 60%, transparent);
}

/* Riadky súperov. */
#screen-arena .arena-row {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sk-hair-soft);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 12px 18px;
}
#screen-arena .arena-row::before { background: none; }
#screen-arena .arena-row:hover {
  transform: none;
  box-shadow: none;
  background: linear-gradient(90deg, transparent, rgba(214,160,70,0.16) 20%, rgba(214,160,70,0.10) 80%, transparent);
}
#screen-arena .arena-quest {
  background: linear-gradient(90deg, rgba(var(--gold-rgb),0.12), transparent 70%);
}
#screen-arena .arena-self {
  background: linear-gradient(90deg, rgba(var(--crimson-rgb),0.26), rgba(var(--crimson-rgb),0.06) 70%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--crimson-light);
}
#screen-arena .arena-name { font-size: 19px; color: var(--sk-text); }
#screen-arena .arena-row:hover .arena-name { color: var(--sk-gold-hi); }
#screen-arena .arena-class { font-size: 15px; color: var(--sk-text-2); margin-top: 2px; }
#screen-arena .arena-self .arena-name::after { font-size: 14px; color: #ff9f8a; }
#screen-arena .arena-level { font-size: 19px; font-weight: 700; color: var(--sk-text); }
#screen-arena .arena-win { font-size: 17px; font-weight: 700; }
#screen-arena .arena-win.none { color: var(--sk-text-2); }
#screen-arena .arena-win .wl-sub { font-size: 13px; font-weight: 400; color: var(--sk-text-2); }

/* Stránkovanie. */
#screen-arena .arena-pager { gap: 16px; padding: 16px 0 6px; }
#screen-arena .arena-pager button {
  background: none;
  border: 0;
  border-radius: 0;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 8px 18px stretch;
  padding: 10px 26px;
  font-size: 13px;
  color: var(--sk-text);
}
#screen-arena .arena-pager button:hover:not(:disabled) { color: #fff; filter: brightness(1.2); }
#screen-arena .arena-pager button:disabled { opacity: 0.6; filter: grayscale(0.6); color: var(--sk-text-2); }
#screen-arena .arena-page-info { font-size: 15px; color: var(--sk-text-2); }

#screen-arena .empty-state { color: var(--sk-text-2); }

@media (max-width: 1400px) {
  #screen-arena.active { border-width: 10px; border-image-width: 23px; padding: 10px 8px 8px; }
  #screen-arena .arena-row { padding: 10px 12px; }
  #screen-arena .arena-header { padding-left: 12px; padding-right: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   KROK 4: VENDOR + MARKETPLACE
════════════════════════════════════════════════════════════════ */

/* Panel ako v Aréne: koža + rám. */
#screen-trade.active,
#screen-vendor .equip-panel {
  border: 12px solid transparent;
  border-radius: 0;
  border-image: url('frame.webp?v=15') 100 / 26px round;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.48)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat;
  background-clip: padding-box;
  box-shadow: none;
  padding: 14px 16px 14px;
}
#screen-vendor .equip-panel { overflow: visible; }
#screen-vendor .panel-title {
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 14px;
  padding: 10px 30px 9px;
  border: 0;
  border-image: url('plate_small.webp?v=15') 26 64 fill / 10px 26px stretch;
  font-family: var(--font-title);
  font-size: 15px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--sk-gold-hi);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}

/* Spoločné bitmapové tlačidlá pre túto obrazovku.
   Hlavná akcia (Sell, Buy) je mosadzná s vyrytým tmavým písmom,
   vedľajšia (Market, My listings, Show more) železná so svetlým. */
#screen-vendor .vd-btn,
#market-body .mk-btn {
  background: none;
  border: 0;
  border-radius: 0;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 8px 18px stretch;
  color: var(--sk-text);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
#screen-vendor .vd-btn.sell {
  border-image: url('btn_primary.webp?v=15') 14 60 fill / 8px 18px stretch;
  color: #2a1606;
  text-shadow: 0 1px 0 rgba(255,226,160,0.55);
  font-weight: 700;
}
#screen-vendor .vd-btn:hover,
#market-body .mk-btn:hover:not(:disabled) { background: none; filter: brightness(1.18); }
#screen-vendor .vd-btn:active,
#market-body .mk-btn:active:not(:disabled) { filter: brightness(0.92); transform: translateY(1px); }

/* ── VENDOR ── */
#screen-vendor .vd-intro {
  font-size: 16px; line-height: 1.55;
  color: var(--sk-text-2);
  margin: 0 4px 16px;
}
#screen-vendor .vd-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
#screen-vendor .vd-row {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sk-hair-soft);
  border-radius: 0;
  padding: 10px 6px;
  gap: 16px;
  grid-template-columns: 68px 1fr auto auto;
}
#screen-vendor .vd-row:hover {
  background: linear-gradient(90deg, transparent, rgba(214,160,70,0.14) 20%, rgba(214,160,70,0.08) 80%, transparent);
}
/* Ikona v bitmapovom slote, rarita ako vnútorný rám (ako v inventári). */
#screen-vendor .vd-icon {
  width: 68px; height: 68px;
  position: relative;
  isolation: isolate;
  border: 5px solid transparent;
  border-radius: 0;
  border-image: url('item_slot.webp?v=15') 62 fill / 12px stretch;
  background: none;
}
#screen-vendor .vd-icon::before {
  content: '';
  position: absolute; inset: 1px;
  border: 2px solid var(--rc, #8d8378);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--rc, #6a5540) 45%, transparent);
  pointer-events: none;
  z-index: -1;
}
#screen-vendor .vd-icon img { width: 52px; height: 52px; }
#screen-vendor .vd-name { font-size: 17px; color: inherit; }
#screen-vendor .vd-intro, #screen-vendor .vd-meta { font-family: var(--font-body); }
#screen-vendor .vd-meta { font-size: 14.5px; color: var(--sk-text-2); margin-top: 3px; }
#screen-vendor .vd-btn {
  min-width: 124px;
  padding: 9px 28px 8px;
  font-size: 13px;
  letter-spacing: 0.8px;
}
#screen-vendor .vd-sub { font-size: 13.5px; color: var(--sk-gold-hi); }
#screen-vendor .vd-btn.sell .vd-sub { color: #1e0f03; font-weight: 700; text-shadow: 0 1px 0 rgba(255,226,160,0.5); }
#screen-vendor .empty-state { color: var(--sk-text-2); }

/* ── MARKETPLACE ── */
#screen-trade.active { padding: 16px 18px 16px; }

#market-body .mk-bar { gap: 12px 18px; margin: 0 2px 6px; align-items: flex-end; }
#market-body .mk-gold { font-size: 22px; font-weight: 700; color: var(--sk-gold); }
#market-body .mk-gold small {
  font-family: var(--font-body); font-size: 15px; letter-spacing: 0.2px;
  text-transform: none; color: var(--sk-text-2); margin-left: 6px;
}
#market-body .mk-search,
#market-body .mk-pow input {
  background: rgba(0,0,0,0.28);
  border: 0;
  border-bottom: 1px solid rgba(214,170,96,0.55);
  border-radius: 0;
  color: var(--sk-text);
  font-size: 16px;
  padding: 7px 10px 6px;
}
#market-body .mk-search { width: 220px; }
#market-body .mk-search::placeholder,
#market-body .mk-pow input::placeholder { color: var(--sk-text-2); opacity: 0.85; }
#market-body .mk-search:focus,
#market-body .mk-pow input:focus { border-bottom-color: var(--sk-gold); background: rgba(0,0,0,0.42); }
#market-body .mk-btn { padding: 10px 22px; font-size: 13px; letter-spacing: 0.8px; }
#market-body .mk-btn.buy {
  border-image: url('btn_primary.webp?v=15') 14 60 fill / 8px 18px stretch;
  color: #2a1606;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,226,160,0.55);
}
#market-body .mk-btn:disabled { opacity: 0.6; filter: grayscale(0.6); }

/* Filtre: popis vľavo normálnym písmom, voľby ako textové prepínače
   (aktívna zlatá a podčiarknutá). Riadky sa zalamujú, nič nevyteká. */
#market-body .mk-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 14px 4px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--sk-hair);
}
#market-body .mk-group {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px;
}
#market-body .mk-group > span:first-child {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--sk-text-2);
  margin: 0;
}
#market-body .mk-group:not(.mk-pow) {
  grid-template-columns: 74px minmax(0, 1fr);
}
/* Prepínače v jednom zalamovanom riadku vedľa popisu. */
#market-body .mk-group:not(.mk-pow) {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding-left: 78px; position: relative;
}
#market-body .mk-group:not(.mk-pow) > span:first-child {
  position: absolute; left: 0; top: 4px;
}
#market-body .mk-pill {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 4px 0 3px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
#market-body .mk-pill:not([class*="r-"]) { color: var(--sk-text); }
#market-body .mk-pill:hover { background: none; color: var(--sk-gold-hi); }
#market-body .mk-pill.on {
  background: none;
  color: var(--sk-gold);
  border-bottom-color: var(--sk-gold);
  text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.45);
}
#market-body .mk-pill[class*="r-"].on { border-bottom-color: currentColor; }
#market-body .mk-pill.r-rare.on      { color: #8fc0f0; }
#market-body .mk-pill.r-epic.on      { color: #c79af0; }
#market-body .mk-pill.r-legendary.on { color: #f0c05a; }
#market-body .mk-pill.r-artifact.on  { color: #f05a5f; }
#market-body .mk-pow {
  display: flex; align-items: baseline; gap: 8px;
  padding-left: 78px; position: relative;
}
#market-body .mk-pow > span:first-child { position: absolute; left: 0; top: 8px; }
#market-body .mk-pow > span:not(:first-child) { color: var(--sk-text-2); }
#market-body .mk-pow input { width: 80px; }

/* Hlavička setu — zlatý text medzi linkami. */
#market-body .mk-set-head {
  margin: 18px 4px 4px;
  gap: 12px;
  font-size: 15px; font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: none;
  color: var(--sk-gold);
}
#market-body .mk-set-head::before {
  content: ''; width: 24px; height: 1px; background: var(--sk-hair);
}
#market-body .mk-set-head::after { background: linear-gradient(90deg, var(--sk-hair), transparent); }
#market-body .mk-set-count {
  order: 3;
  font-family: var(--font-body); font-size: 14px; font-weight: 400;
  color: var(--sk-text-2);
}

/* Predmety — riadky v dvoch stĺpcoch oddelené linkou, nie karty. */
#market-body .mk-grid { gap: 0 22px; }
#market-body .mk-card {
  --rar: #8d8378;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sk-hair-soft);
  border-radius: 0;
  padding: 10px 4px;
  gap: 14px;
  grid-template-columns: 66px 1fr;
}
#market-body .mk-card:has(.mk-name.r-uncommon)  { --rar: #4CAF50; }
#market-body .mk-card:has(.mk-name.r-rare)      { --rar: #2196F3; }
#market-body .mk-card:has(.mk-name.r-epic)      { --rar: #9C27B0; }
#market-body .mk-card:has(.mk-name.r-legendary) { --rar: #FFD700; }
#market-body .mk-card:has(.mk-name.r-artifact)  { --rar: #d8232c; }
#market-body .mk-card:hover {
  background: linear-gradient(90deg, rgba(214,160,70,0.14), rgba(214,160,70,0.04) 80%, transparent);
}
#market-body .mk-card.sale { background: linear-gradient(90deg, rgba(var(--gold-rgb),0.08), transparent 70%); }
#market-body .mk-card img {
  width: 66px; height: 66px;
  padding: 7px;
  border: 0;
  border-image: url('item_slot.webp?v=15') 62 fill / 12px stretch;
  outline: 2px solid var(--rar);
  outline-offset: -7px;
}
/* Názov predmetu je to hlavné v riadku — väčší, tučný, v jasnej farbe
   rarity a so žiarou v tej istej farbe. */
#market-body .mk-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95),
               0 0 8px color-mix(in srgb, currentColor 80%, transparent),
               0 0 20px color-mix(in srgb, currentColor 50%, transparent);
}
#market-body .mk-name.r-common    { color: #ece2cf; }
#market-body .mk-name.r-uncommon  { color: #8ff59c; }
#market-body .mk-name.r-rare      { color: #8fd0ff; }
#market-body .mk-name.r-epic      { color: #dcaaff; }
#market-body .mk-name.r-legendary { color: #ffd36a; }
#market-body .mk-name.r-artifact  { color: #ff6e6e; }
#market-body .mk-card:hover .mk-name { filter: brightness(1.15); }
#market-body .mk-meta { font-family: var(--font-body); font-size: 14.5px; color: var(--sk-text-2); }
#market-body .mk-price { font-size: 15px; font-weight: 700; color: var(--sk-gold); }
#market-body .mk-price span { color: var(--sk-text-2) !important; font-size: 13.5px !important; font-weight: 400; }
#market-body .mk-none { font-family: var(--font-body); font-size: 14.5px; color: var(--sk-text-2); }
#market-body .empty-state { color: var(--sk-text-2); }

@media (max-width: 1400px) {
  #screen-trade.active,
  #screen-vendor .equip-panel { border-width: 10px; border-image-width: 23px; padding: 10px 10px; }
  #market-body .mk-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  #screen-vendor .vd-row { grid-template-columns: 62px 1fr auto auto; gap: 10px; }
  #screen-vendor .vd-icon { width: 62px; height: 62px; }
  #screen-vendor .vd-icon img { width: 46px; height: 46px; }
  #screen-vendor .vd-btn { min-width: 104px; padding: 8px 22px 7px; }
}

/* ════════════════════════════════════════════════════════════════
   SPOLOČNÉ PRVKY (krok 5+): platí pre všetky ostatné obrazovky
════════════════════════════════════════════════════════════════ */

/* Bežný text čitateľným knižným písmom. Cinzel (samé veľké písmená)
   ostáva tam, kde je nastavený výslovne — nadpisy, menu, tlačidlá. */
body { font-family: var(--font-body); font-size: 15px; }

/* Panely obrazoviek: koža + rám. */
#screen-skills.active, #screen-actions.active, #screen-challenges.active,
#screen-ranking.active, #screen-badges.active, #screen-packs.active,
#screen-tavern.active, #screen-mail.active, #screen-trades.active {
  border: 12px solid transparent;
  border-image: url('frame.webp?v=15') 100 / 26px round;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.48)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat;
  background-clip: padding-box;
  padding: 16px 18px 18px;
}
@media (max-width: 1400px) {
  #screen-skills.active, #screen-actions.active, #screen-challenges.active,
  #screen-ranking.active, #screen-badges.active, #screen-packs.active,
  #screen-tavern.active, #screen-mail.active, #screen-trades.active {
    border-width: 10px; border-image-width: 23px; padding: 12px 10px 14px;
  }
}

/* Nadpis sekcie (.panel-title) všade na železnej plakete. */
.panel-title {
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 12px;
  padding: 10px 30px 9px;
  border: 0;
  border-image: url('plate_small.webp?v=15') 26 64 fill / 10px 26px stretch;
  font-family: var(--font-title);
  font-size: 15px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--sk-gold-hi);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}

/* Malé tlačidlá (.btn-sm) — železná bitmapa. */
.btn-sm {
  background: none;
  border: 0;
  border-radius: 0;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 6px 12px stretch;
  padding: 7px 14px;
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--sk-text);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.btn-sm:hover:not(:disabled) { color: #fff; filter: brightness(1.2); }
.btn-sm:disabled { opacity: 0.7; filter: grayscale(0.6); color: var(--sk-text-2); }

/* Filtre ako textové prepínače: aktívny zlatý a podčiarknutý. */
.filter-btn, .hist-btn, .mail-tab, .qtab {
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 3px !important;
  font-family: var(--font-title);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--sk-text);
}
.filter-btn:hover, .hist-btn:hover, .mail-tab:hover, .qtab:hover { color: var(--sk-gold-hi); }
.filter-btn.active, .hist-btn.active, .mail-tab.on, .qtab.on {
  color: var(--sk-gold) !important;
  border-bottom-color: var(--sk-gold) !important;
  text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.45);
}

/* Prázdne stavy a načítavanie — čitateľné. */
.empty-state, .loading-pulse { color: var(--sk-text-2); }

/* Bitmapové tlačidlá — zdieľané triedy pre ďalšie obrazovky. */
.sk-reset, .sk-switch-btn, .ac-buy, .btn-pack, .mail-btn, .tr-btn,
.chal-cancel, .btn-reset-stats, .ld-btn, .npc-buy, .chal-btns .btn-accept, .chal-btns .btn-decline,
.mail-tools .btn-mail-all, .btn-quest, .chal-withdraw {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 7px 16px stretch !important;
  padding: 10px 28px !important;
  font-family: var(--font-title);
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--sk-text) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.sk-reset-path, .chal-cancel, .tr-btn.danger, .mail-btn.danger, .chal-btns .btn-decline {
  border-image: url('btn_danger.webp?v=15') 14 60 fill / 7px 16px stretch !important;
  color: #ffe2d8 !important;
}
/* Hlavné akcie — mosadz s vyrytým tmavým písmom. */
.sk-learn-btn, .sk-opener-btn, .btn-quest:not(.muted), .tr-btn.go, .chal-actions .tr-btn, .ac-buy,
.btn-pack:not(.ghost-pack):not(.open-btn), .sk-switch-btn.on, .btn-challenge, .inspect-challenge,
.ld-btn:not(.ld-quiet), .npc-buy, .chal-btns .btn-accept, .mail-tools .btn-mail-all {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-image: url('btn_primary.webp?v=15') 14 60 fill / 7px 16px stretch !important;
  color: #1e0f03 !important;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,226,160,0.6) !important;
}
.sk-reset:hover:not(:disabled), .sk-switch-btn:hover, .ac-new:hover, .ac-buy:hover:not(:disabled),
.btn-pack:hover:not(:disabled), .mail-btn:hover:not(:disabled), .tr-btn:hover:not(:disabled),
.chal-cancel:hover, .sk-learn-btn:hover:not(:disabled), .sk-opener-btn:hover, .btn-quest:hover:not(:disabled),
.btn-challenge:hover:not(:disabled) { filter: brightness(1.18); }
.sk-learn-btn:disabled, .btn-pack:disabled, .ac-buy:disabled, .mail-btn:disabled, .tr-btn:disabled,
.btn-quest:disabled, .btn-challenge:disabled {
  opacity: 0.7 !important; filter: grayscale(0.7); cursor: default;
}

/* Zatváracie tlačidlá okien — bitmapové X. */
.inspect-close, .avatar-modal-close, .mk-close, .sk-detail-close, .fight-modal-close {
  width: 34px !important; height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url('close.webp?v=15') center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer;
  flex-shrink: 0;
}
.inspect-close:hover, .avatar-modal-close:hover, .mk-close:hover, .sk-detail-close:hover, .fight-modal-close:hover { filter: brightness(1.25); }

/* Vstupné polia — podčiarknuté. */
#content input[type="text"], #content input[type="number"], #content input:not([type]),
#content textarea, #content select,
.price-box input, .chal-box select, .chal-box input {
  background-color: rgba(0,0,0,0.30);
  border: 0;
  border-bottom: 1px solid rgba(214,170,96,0.55);
  border-radius: 0;
  color: var(--sk-text);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
}
#content textarea { border: 1px solid rgba(214,170,96,0.35); }
#content input:focus, #content textarea:focus, #content select:focus,
.price-box input:focus { border-color: var(--sk-gold); background-color: rgba(0,0,0,0.45); }
#content input::placeholder, #content textarea::placeholder { color: var(--sk-text-2); opacity: 0.85; }

/* ════════════════ SKILLS ════════════════ */
#screen-skills .sk-head {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair);
  border-radius: 0; box-shadow: none;
  padding: 4px 6px 14px; margin-bottom: 16px;
}
#screen-skills .sk-points { font-size: 26px; font-weight: 700; color: var(--sk-gold); }
#screen-skills .sk-points small {
  font-size: 14px; letter-spacing: 0.2px; text-transform: none; color: var(--sk-text-2);
}
#screen-skills .sk-switch { background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0; padding: 4px 4px 12px; }
#screen-skills .sk-switch-t { font-family: var(--font-body); font-size: 15px; letter-spacing: 0.2px; text-transform: none; color: var(--sk-text-2); }
#screen-skills .sk-tree-head { border-bottom: 1px solid var(--sk-hair); padding-bottom: 8px; }
#screen-skills .sk-tree-name { font-size: 21px; font-weight: 700; letter-spacing: 1.2px; color: var(--sk-gold-hi); text-shadow: 0 1px 2px #000; }
#screen-skills .sk-tree-blurb { font-size: 15.5px; color: var(--sk-text-2); }
#screen-skills .sk-tree-spent { font-size: 14px; }
#screen-skills .sk-lock-note { font-size: 15px; color: #f0b3a0; }
#screen-skills .sk-tier-label {
  display: flex; align-items: center; gap: 14px;
  border: 0; padding: 0; margin: 4px 4px 10px;
  font-size: 14.5px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--sk-gold);
}
#screen-skills .sk-tier-label::before, #screen-skills .sk-tier-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sk-hair));
}
#screen-skills .sk-tier-label::after { background: linear-gradient(90deg, var(--sk-hair), transparent); }
#screen-skills .sk-grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* Karta skillu: bez tenkého rámčeka — tmavá plocha na koži, ikona v slote. */
#screen-skills .sk-card {
  background: linear-gradient(160deg, rgba(0,0,0,0.38), rgba(0,0,0,0.22));
  border: 0; border-radius: 0;
  padding: 12px 12px 12px 10px;
  gap: 12px;
  box-shadow: inset 0 0 0 1px rgba(214,170,96,0.10);
}
#screen-skills .sk-card:hover { transform: none; background: linear-gradient(160deg, rgba(214,160,70,0.16), rgba(0,0,0,0.25)); }
#screen-skills .sk-card.learned { box-shadow: inset 3px 0 0 var(--sk-gold), inset 0 0 0 1px rgba(214,170,96,0.18); }
#screen-skills .sk-card.maxed { box-shadow: inset 3px 0 0 var(--sk-gold-hi), inset 0 0 18px rgba(var(--gold-rgb),0.18), inset 0 0 0 1px rgba(214,170,96,0.35); }
#screen-skills .sk-card.blocked { opacity: 0.72; }
#screen-skills .sk-card.blocked:hover { background: linear-gradient(160deg, rgba(0,0,0,0.38), rgba(0,0,0,0.22)); }
#screen-skills .sk-card.inactive { opacity: 0.6; }
#screen-skills .sk-icon {
  width: 58px; height: 58px;
  border: 4px solid transparent; border-radius: 0;
  border-image: url('item_slot.webp?v=15') 62 fill / 10px stretch;
  background: none;
  overflow: visible;
}
#screen-skills .sk-name { font-size: 16px; font-weight: 700; color: var(--sk-text); }
#screen-skills .sk-card.learned .sk-name { color: var(--sk-gold-hi); }
#screen-skills .sk-kind { font-size: 11px; opacity: 1; }
#screen-skills .sk-text { font-size: 15px; color: var(--sk-text); line-height: 1.4; }
#screen-skills .sk-effect li { font-family: var(--font-body); font-size: 14.5px; line-height: 1.4; color: var(--sk-text-2); }
#screen-skills .sk-weapons { font-size: 14px; color: var(--sk-text-2); }
#screen-skills .sk-block { font-family: var(--font-body); font-size: 14px; color: #ff9f8a; }
#screen-skills .sk-pips { gap: 4px; margin-top: 8px; }
#screen-skills .sk-pip { width: 18px; height: 6px; border-radius: 1px; background: rgba(0,0,0,0.6); border-color: rgba(214,170,96,0.35); }
#screen-skills .sk-pip.on { background: linear-gradient(90deg, #b8842e, var(--sk-gold-hi)); border-color: var(--sk-gold); box-shadow: 0 0 6px rgba(var(--gold-rgb),0.5); }

/* ════════════════════════════════════════════════════════════════
   KROK 5: MODÁLNE OKNÁ A TOOLTIPY
════════════════════════════════════════════════════════════════ */

/* Všetky okná: koža + bitmapový rám (rám stojí, obsah sa roluje). */
.inspect-box, .sk-box, .avatar-modal-box, .price-box, .pick-box, .mk-box,
.pack-reveal, .chal-box, #season-modal-inner, .tr-box, .ac-choose-box, .fight-modal-box {
  border: 14px solid transparent !important;
  border-radius: 0 !important;
  border-image: url('frame.webp?v=15') 100 / 30px round !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.42)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat,
    #120c08 !important;
  background-clip: padding-box !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.9) !important;
  color: var(--sk-text);
}

/* Nadpisy okien na plakete. */
.price-head, .pick-head, .avatar-modal-title {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 30px 9px;
  border-image: url('plate_small.webp?v=15') 26 64 fill / 10px 26px stretch;
  font-family: var(--font-title);
  font-size: 16px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--sk-gold-hi);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.avatar-modal-title { flex: 1; margin-right: 12px; }
.avatar-modal-header, .inspect-header, .inspect-footer, .inspect-record, .mk-head {
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.10)) !important;
  border-color: var(--sk-hair) !important;
}

/* ── Profil hráča (inspect) ── */
.inspect-name { font-size: 22px; font-weight: 700; color: var(--sk-gold-hi); text-shadow: 0 1px 2px #000; }
.inspect-sub { font-size: 15px; color: var(--sk-text-2); }
.inspect-doll { border-right-color: var(--sk-hair-soft) !important; }
.inspect-slot {
  border: 4px solid transparent !important;
  border-radius: 0 !important;
  border-image: url('item_slot.webp?v=15') 62 fill / 10px stretch !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.inspect-slot.has-item { outline: 2px solid var(--rc, #8d8378); outline-offset: -6px; }
.inspect-slot.has-item:hover { box-shadow: 0 0 14px 1px color-mix(in srgb, var(--rc, #c9a25c) 55%, transparent) !important; }
.inspect-slot .is-label { font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0.2px; text-transform: none; color: var(--sk-text-2); }
.inspect-stat-section {
  font-family: var(--font-title); font-size: 15px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: none; color: var(--sk-gold); margin: 14px 0 6px;
  border-bottom: 1px solid var(--sk-hair); padding-bottom: 4px;
}
.inspect-stats .is-row { border-bottom: 1px solid var(--sk-hair-soft); padding: 5px 0; font-size: 15px; }
.inspect-stats .is-key { color: var(--sk-text-2); font-family: var(--font-body); font-size: 15px; text-transform: none; letter-spacing: 0.2px; }
.inspect-stats .is-val { color: var(--sk-text); font-weight: 700; font-size: 15px; }
.inv-public { border-top-color: var(--sk-hair) !important; }
.inv-public-head {
  font-family: var(--font-title); font-size: 15px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: none; color: var(--sk-gold);
}
.inv-public-count { color: var(--sk-text-2); font-family: var(--font-body); font-weight: 400; }
.ip-row { border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0; padding: 6px 4px; }
.ip-row:hover { background: rgba(214,160,70,0.12); }
.ip-thumb {
  width: 44px; height: 44px;
  border: 3px solid transparent !important; border-radius: 0;
  border-image: url('item_slot.webp?v=15') 62 fill / 8px stretch !important;
  background: none; outline: 2px solid var(--rc); outline-offset: -5px;
}
.ip-thumb img { width: 34px; height: 34px; }
.ip-name { font-size: 16px; font-weight: 700; text-shadow: 0 0 8px color-mix(in srgb, var(--rc) 55%, transparent), 0 1px 2px #000; }
.ip-slot { font-size: 14px; color: var(--sk-text-2); }
.ip-worn { font-size: 11px; color: var(--sk-gold-hi); border-color: rgba(214,170,96,0.7); }
.scirmish-info { font-size: 15px; color: var(--sk-text-2); }
.scirmish-count { font-size: 15px; color: var(--sk-text); }
.btn-scirmish {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 8px 18px stretch !important;
  padding: 11px 24px !important;
  font-family: var(--font-title); font-size: 13px; letter-spacing: 0.8px;
  color: var(--sk-text) !important;
}
.btn-scirmish.btn-ico { width: 64px !important; padding: 8px 0 !important; }
.btn-scirmish:hover:not(:disabled) { filter: brightness(1.2); }
.btn-scirmish:disabled { opacity: 0.65 !important; filter: grayscale(0.6); }
.btn-challenge { padding: 11px 26px !important; font-family: var(--font-title); font-size: 13px; letter-spacing: 0.8px; }
.btn-challenge.btn-pending:disabled { opacity: 0.8 !important; }

/* ── Detail skillu ── */
.sk-box { padding: 18px 20px !important; }
.sk-detail-close { position: absolute; top: 8px; right: 8px; }
.sk-d-name { font-size: 22px; font-weight: 700; color: var(--sk-gold-hi); text-shadow: 0 1px 2px #000; }
.sk-d-meta { font-family: var(--font-body); font-size: 15px; letter-spacing: 0.2px; text-transform: none; color: var(--sk-text-2); }
.sk-d-desc { font-size: 16px; color: var(--sk-text-2); }
.sk-d-warn { font-family: var(--font-body); font-size: 15px; color: #f0c870; }
.sk-d-rank { font-family: var(--font-body); font-size: 15px; color: var(--sk-text-2); border-bottom-color: var(--sk-hair-soft); }
.sk-d-rank .n { font-size: 15px; color: var(--sk-text-2); }
.sk-d-rank.have { color: var(--sk-text); }
.sk-d-rank.next, .sk-d-rank.next .n, .sk-d-rank.have .n { color: var(--sk-gold-hi); }
.sk-d-eff { font-size: 14px; color: var(--sk-text-2); }
.sk-learn-btn { padding: 12px !important; font-size: 13px; }
.sk-origin { font-size: 13.5px; color: var(--sk-text-2); border-top-color: var(--sk-hair-soft); }

/* ── Výber vzhľadu ── */
.avatar-modal-cell { background: rgba(0,0,0,0.28) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px rgba(214,170,96,0.12) !important; }
.avatar-modal-cell:hover:not(.locked) { background: rgba(214,160,70,0.14) !important; transform: none !important; }
.avatar-modal-cell.active { box-shadow: inset 0 0 0 2px var(--sk-gold), 0 0 16px rgba(var(--gold-rgb),0.3) !important; }
.avatar-modal-cell.locked { opacity: 0.6 !important; }
.avatar-modal-name { font-size: 13.5px; color: var(--sk-text); }
.avatar-modal-cell.active .avatar-modal-name { color: var(--sk-gold-hi); }
.avatar-modal-reason { font-size: 12.5px; color: var(--sk-text-2); }

/* ── Cena / text / výber odmeny ── */
.price-box, .pick-box { padding: 18px 20px !important; }
.price-item { font-size: 17px; font-weight: 700; }
.price-item img {
  width: 54px; height: 54px; padding: 5px;
  border-image: url('item_slot.webp?v=15') 62 fill / 10px stretch;
}
.price-cur { font-size: 15px; color: var(--sk-text-2); }
.price-note { font-size: 14px; color: var(--sk-text-2); }
.price-payout { font-size: 15.5px; color: var(--sk-text); }
.price-payout .num { color: var(--sk-gold-hi); font-weight: 700; }
.price-ok, .pick-ok {
  border-image: url('btn_primary.webp?v=15') 14 60 fill / 6px 12px stretch !important;
  color: #2a1606 !important; font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,226,160,0.55) !important;
}
.price-ok:disabled, .pick-ok:disabled { opacity: 0.7 !important; filter: grayscale(0.7); }
.price-box .btn-sm, .pick-box .btn-sm { padding: 10px 22px; font-size: 13px; }
.price-box input { padding: 8px 10px; }
.pick-row { background: none !important; border: 0 !important; border-bottom: 1px solid var(--sk-hair-soft) !important; border-radius: 0 !important; margin: 0 !important; }
.pick-row:hover { background: rgba(214,160,70,0.12) !important; }
.pick-row.on { background: linear-gradient(90deg, rgba(var(--gold-rgb),0.18), transparent) !important; box-shadow: inset 3px 0 0 var(--sk-gold); }
.pick-check { border-color: rgba(214,170,96,0.7) !important; }
.pick-name { font-size: 16px !important; font-weight: 700; }
.pick-name.r-uncommon { color: #8ff59c; } .pick-name.r-rare { color: #8fd0ff; } .pick-name.r-epic { color: #dcaaff; }
.pick-slot { font-size: 14px; color: var(--sk-text-2); }
.pick-icon { width: 44px; height: 44px; padding: 4px; border-image: url('item_slot.webp?v=15') 62 fill / 8px stretch; }

/* ── Sezónne okno ── */
.season-name { font-size: 28px; font-weight: 700; color: var(--sk-gold-hi); }
.season-tagline { font-size: 17px; color: var(--sk-text); }
.season-giver, .season-when { font-size: 14px; letter-spacing: 1px; text-transform: none; color: var(--sk-gold); }
.season-intro { font-size: 16px; color: var(--sk-text); }
.season-portrait, .pick-opt img { border: 0 !important; border-radius: 0 !important; outline: 2px solid rgba(214,170,96,0.6); outline-offset: -2px; }
.pick-opt { background: rgba(0,0,0,0.3) !important; border: 0 !important; border-radius: 0 !important; }
.pick-stats { font-size: 14px; color: var(--sk-text-2); }

/* ── Detail predmetu na trhu ── */
.mk-head { padding: 14px 16px !important; }
.mk-head img { padding: 7px; border-image: url('item_slot.webp?v=15') 62 fill / 12px stretch; }
.mk-head h3 {
  font-size: 22px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 8px color-mix(in srgb, currentColor 80%, transparent), 0 0 20px color-mix(in srgb, currentColor 50%, transparent);
}
.mk-head h3.r-common { color: #ece2cf; } .mk-head h3.r-uncommon { color: #8ff59c; }
.mk-head h3.r-rare { color: #8fd0ff; } .mk-head h3.r-epic { color: #dcaaff; }
.mk-head h3.r-legendary { color: #ffd36a; } .mk-head h3.r-artifact { color: #ff6e6e; }
.mk-box .mk-meta { font-family: var(--font-body); font-size: 15px; color: var(--sk-text-2); }
.mk-sec { border-bottom-color: var(--sk-hair-soft) !important; }
.mk-sec-t {
  font-size: 15px !important; font-weight: 700; letter-spacing: 1.2px !important;
  text-transform: none !important; color: var(--sk-gold) !important;
}
.mk-stats div { font-family: var(--font-body); font-size: 15.5px; color: var(--sk-text-2); }
.mk-stats b { color: var(--sk-text); font-weight: 700; }
.mk-offer { background: none !important; border: 0 !important; border-bottom: 1px solid var(--sk-hair-soft) !important; border-radius: 0 !important; }
.mk-offer.mine { background: linear-gradient(90deg, rgba(var(--gold-rgb),0.10), transparent) !important; }
.mk-seller { font-size: 16px; color: var(--sk-text); }
.mk-offer-price { font-size: 16px; font-weight: 700; color: var(--sk-gold); }
.mk-empty { font-family: var(--font-body); font-size: 15px; color: var(--sk-text-2); }
.mk-owner { background: rgba(0,0,0,0.3) !important; border: 0 !important; border-radius: 0 !important; font-size: 15px; color: var(--sk-text-2); }
.mk-owner b { color: var(--sk-text); }
.mk-from { font-size: 15px; color: var(--sk-text-2); background: rgba(0,0,0,0.25) !important; border: 0 !important; }
.mk-box .mk-btn {
  background: none; border: 0; border-radius: 0;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 8px 18px stretch;
  padding: 10px 22px; font-size: 13px; color: var(--sk-text);
}
.mk-box .mk-btn.buy {
  border-image: url('btn_primary.webp?v=15') 14 60 fill / 8px 18px stretch;
  color: #2a1606; font-weight: 700; text-shadow: 0 1px 0 rgba(255,226,160,0.55);
}
.mk-box .mk-btn:disabled { opacity: 0.7; filter: grayscale(0.7); }

/* ── Otvorený pack ── */
.pack-reveal-title {
  font-family: var(--font-title); font-size: 18px; letter-spacing: 2px;
  color: var(--sk-gold-hi); text-align: center;
}
.pack-reveal-item {
  border-left-width: 3px !important; border-radius: 0 !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 14%, transparent), transparent) !important;
}
.pack-reveal-name {
  font-size: 16px; font-weight: 700;
  text-shadow: 0 0 8px color-mix(in srgb, var(--rc) 60%, transparent), 0 1px 2px #000;
}
.pack-reveal-item.r-common    { --rc: #ece2cf; } .pack-reveal-item.r-uncommon { --rc: #8ff59c; }
.pack-reveal-item.r-rare      { --rc: #8fd0ff; } .pack-reveal-item.r-epic     { --rc: #dcaaff; }
.pack-reveal-item.r-legendary { --rc: #ffd36a; } .pack-reveal-item.r-artifact { --rc: #ff6e6e; }
.pack-reveal-rar { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.3px; text-transform: none; }

/* ── Výzva (chal-modal) ── */
.chal-box { padding: 0 !important; }

/* ── TOOLTIPY ──
   Tmavá koža s tenkým rámom; poradie riadkov rieši JS (zbraň → obrana
   → atribúty → bojové staty → požiadavky). */
#tooltip, .inspect-item-tooltip {
  border: 10px solid transparent !important;
  border-radius: 0 !important;
  border-image: url('frame.webp?v=15') 100 / 22px round !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.62)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat,
    #0d0806 !important;
  background-clip: padding-box !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.9) !important;
  padding: 10px 14px !important;
}
.inspect-item-tooltip { max-width: 360px !important; }
.iit-name {
  font-size: 18px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 8px color-mix(in srgb, currentColor 70%, transparent);
}
.iit-slot { font-family: var(--font-body); font-size: 14.5px; letter-spacing: 0.2px; color: var(--sk-text-2); }
.iit-packs { font-family: var(--font-body); font-size: 14px; color: var(--sk-gold); }
.iit-packs.none { color: var(--sk-text-2); }
.iit-desc { font-size: 14.5px; color: var(--sk-text-2); border-bottom-color: var(--sk-hair-soft); }
.iit-stat { font-size: 15.5px; color: var(--sk-text); line-height: 1.6; }
.iit-stat span.iit-hi, .iit-hi { font-size: 15.5px; color: #9ff2a2; }
.iit-req { font-family: var(--font-body); font-size: 14.5px; color: var(--sk-text-2); margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--sk-hair-soft); }
.iit-req.bad { color: #ff8a70; }
.iit-cmp { font-family: var(--font-body); font-size: 14.5px; border-top-color: var(--sk-hair-soft); }
.iit-cmp.none { color: var(--sk-text-2); }
.iit-cmp-head { font-size: 15px; font-weight: 700; }
.iit-cmp-diff { color: var(--sk-text); }
.iit-old { border-top-color: var(--sk-hair-soft); opacity: 0.92; }
.iit-old-label { font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0.2px; text-transform: none; color: var(--sk-text-2); }
#tooltip .tt-name { font-size: 16px; font-weight: 700; color: var(--sk-gold-hi); }
#tooltip .tt-type { font-family: var(--font-body); font-size: 14px; color: var(--sk-text-2); }
#tooltip .tt-stat { font-size: 15px; color: var(--sk-text); }
/* Názov v tooltipe — jasná farba rarity (inline farba z JS je tmavá). */
.iit-name.r-common    { color: #ece2cf !important; }
.iit-name.r-uncommon  { color: #8ff59c !important; }
.iit-name.r-rare      { color: #8fd0ff !important; }
.iit-name.r-epic      { color: #dcaaff !important; }
.iit-name.r-legendary { color: #ffd36a !important; }
.iit-name.r-artifact  { color: #ff6e6e !important; }

/* ── Žiara názvov predmetov aj vo Vendori (rovnako ako na trhu) ── */
#screen-vendor .vd-name {
  font-size: 18px; font-weight: 700; letter-spacing: 0.4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95),
               0 0 8px color-mix(in srgb, currentColor 80%, transparent),
               0 0 20px color-mix(in srgb, currentColor 50%, transparent);
}
#screen-vendor .vd-row.r-common    .vd-name { color: #ece2cf; }
#screen-vendor .vd-row.r-uncommon  .vd-name { color: #8ff59c; }
#screen-vendor .vd-row.r-rare      .vd-name { color: #8fd0ff; }
#screen-vendor .vd-row.r-epic      .vd-name { color: #dcaaff; }
#screen-vendor .vd-row.r-legendary .vd-name { color: #ffd36a; }
#screen-vendor .vd-row.r-artifact  .vd-name { color: #ff6e6e; }
#screen-vendor .vd-row:hover .vd-name { filter: brightness(1.15); }

/* ════════════════ ACTIONS ════════════════ */
#screen-actions .ac-builder {
  background: linear-gradient(180deg, rgba(14,9,6,0.97), rgba(14,9,6,0.92));
  border-bottom: 1px solid var(--sk-hair);
  box-shadow: 0 10px 14px -10px rgba(0,0,0,0.9);
  padding-top: 4px;
}
#screen-actions .ac-gold { font-size: 22px; font-weight: 700; color: var(--sk-gold); }
#screen-actions .ac-gold small { font-family: var(--font-body); font-size: 15px; letter-spacing: 0.2px; text-transform: none; color: var(--sk-text-2); }
#screen-actions .ac-owned-tag { font-family: var(--font-body); font-size: 15px; letter-spacing: 0.2px; text-transform: none; color: var(--sk-text-2); }
#screen-actions .ac-set-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 4px 0 3px; margin-right: 10px;
  font-size: 15px; color: var(--sk-text);
}
#screen-actions .ac-set-tab:hover { color: var(--sk-gold-hi); background: none; }
#screen-actions .ac-set-tab.active { color: var(--sk-gold); border-bottom-color: var(--sk-gold); background: none; }
#screen-actions .ac-set-tab.ac-new { border-style: solid; color: var(--sk-gold); }
#screen-actions .ac-turn {
  border: 4px solid transparent; border-radius: 0;
  border-image: url('item_slot.webp?v=15') 62 fill / 10px stretch;
  background: none;
}
#screen-actions .ac-turn:hover { filter: brightness(1.2); background: none; }
#screen-actions .ac-turn.filled { border-color: transparent; }
#screen-actions .ac-turn.clash { outline: 2px solid var(--crimson-light); outline-offset: -6px; }
#screen-actions .ac-turn.picking { outline: 2px solid var(--sk-gold); outline-offset: -6px; box-shadow: 0 0 14px rgba(var(--gold-rgb),0.4); }
#screen-actions .ac-turn-no { font-size: 13px; font-weight: 700; color: var(--sk-text-2); top: 3px; left: 7px; }
#screen-actions .ac-turn.filled .ac-turn-no { color: var(--sk-gold-hi); text-shadow: 0 0 3px #000; }
#screen-actions .ac-turn-empty { color: rgba(214,170,96,0.55); font-size: 22px; }
#screen-actions .ac-problems { font-size: 15px; color: #ff9f8a; }
#screen-actions .ac-saved { color: #8fe09a; }
#screen-actions .ac-shop-head {
  display: flex; align-items: center; justify-content: center;
  margin: 24px 0 10px; padding: 10px 30px 9px;
  border: 0; border-image: url('plate_small.webp?v=15') 26 64 fill / 10px 26px stretch;
  font-size: 15px; font-weight: 700; letter-spacing: 1.4px; text-transform: none;
  color: var(--sk-gold-hi);
}
#screen-actions .ac-shop-sub { font-size: 15px; color: var(--sk-text-2); text-align: center; margin: -4px 0 12px; }
#screen-actions .ac-grid { gap: 0 22px; }
#screen-actions .ac-card {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0;
  padding: 12px 4px; grid-template-columns: 64px 1fr auto; gap: 12px;
}
#screen-actions .ac-card.owned { background: linear-gradient(90deg, rgba(var(--gold-rgb),0.08), transparent 70%); }
#screen-actions .ac-card.pickable:hover { background: linear-gradient(90deg, rgba(214,160,70,0.16), transparent); }
#screen-actions .ac-card img {
  width: 64px; height: 64px; padding: 6px;
  border-image: url('item_slot.webp?v=15') 62 fill / 11px stretch;
}
#screen-actions .ac-card-name { font-size: 17px; font-weight: 700; color: var(--sk-text); }
#screen-actions .ac-card.owned .ac-card-name { color: var(--sk-gold-hi); }
#screen-actions .ac-card-desc { font-size: 14.5px; color: var(--sk-text-2); }
#screen-actions .ac-card-effect li { font-size: 14.5px; color: var(--sk-text); }
#screen-actions .ac-card-meta { font-size: 14px; color: var(--sk-text-2); }
#screen-actions .ac-card-meta b { color: var(--sk-text); }
#screen-actions .ac-req { font-size: 14px; color: #ff9f8a; }
#screen-actions .ac-buy { padding: 10px 26px !important; }
#screen-actions .ac-lock { color: var(--sk-text-2); font-size: 16px; }
#screen-actions input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); }
#screen-actions label { font-size: 15px; color: var(--sk-text); }

/* ════════════════ CHALLENGES ════════════════ */
#screen-challenges .chal-filters { gap: 18px; margin: 0 4px 14px; }
#screen-challenges .hist-bar { gap: 10px 26px; margin: 0 4px 12px; }
#screen-challenges .hist-group { gap: 14px; }
#screen-challenges .hist-btn { font-size: 13.5px; }
#screen-challenges .hist-sum { font-size: 15px; color: var(--sk-text-2); margin: 0 4px 10px; }
#screen-challenges .chal-row, #screen-challenges .hist-row {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0;
  box-shadow: none; margin: 0; padding: 12px 10px;
}
#screen-challenges .chal-row.incoming {
  background: linear-gradient(90deg, rgba(var(--gold-rgb),0.14), transparent 75%);
  box-shadow: inset 3px 0 0 var(--sk-gold);
}
#screen-challenges .hist-row.w { box-shadow: inset 3px 0 0 #5fb36a; }
#screen-challenges .hist-row.l { box-shadow: inset 3px 0 0 var(--crimson-light); }
#screen-challenges .chal-name { font-size: 17px; font-weight: 700; color: var(--sk-text); }
#screen-challenges .chal-dir { font-size: 15px; color: var(--sk-text-2); }
#screen-challenges .hist-opp { font-size: 16px; color: var(--sk-text); }
#screen-challenges .hist-res { font-size: 15px; color: var(--sk-text-2); }
#screen-challenges .hist-when { font-size: 14px; color: var(--sk-text-2); }
#screen-challenges .hist-kind { font-size: 11.5px; }
#screen-challenges .chal-btns { gap: 8px; }
#screen-challenges .chal-btns .btn-accept, #screen-challenges .chal-btns .btn-decline { font-size: 13px; letter-spacing: 0.8px; }

/* Okno prípravy výzvy */
.chal-label { font-family: var(--font-title); font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: none; color: var(--sk-gold); }
.chal-tile, .chal-scroll {
  background: rgba(0,0,0,0.30) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(214,170,96,0.15) !important;
}
.chal-tile:hover, .chal-scroll:hover { background: rgba(214,160,70,0.14) !important; transform: none !important; }
.chal-tile.on, .chal-scroll.on {
  background: linear-gradient(180deg, rgba(var(--gold-rgb),0.22), rgba(var(--gold-rgb),0.06)) !important;
  box-shadow: inset 0 0 0 2px var(--sk-gold), 0 0 12px rgba(var(--gold-rgb),0.25) !important;
}
.chal-tile-n { font-size: 15px; color: var(--sk-text); }
.chal-tile-d { font-size: 13.5px; color: var(--sk-text-2); }
.chal-scroll-n { font-size: 12px; color: var(--sk-text-2); }
.chal-note { font-size: 14px; color: var(--sk-text-2); }
.chal-actions { border-top-color: var(--sk-hair) !important; background: rgba(0,0,0,0.3) !important; }
.chal-tip { background: #120c08 !important; border: 1px solid rgba(214,170,96,0.5) !important; font-size: 14px; }
.chal-tip b { font-size: 15px; }

/* ════════════════ RANKING ════════════════ */
#screen-ranking .ld-box {
  background: linear-gradient(160deg, rgba(var(--gold-rgb),0.08), transparent 70%);
  border: 0; border-bottom: 1px solid var(--sk-hair); border-radius: 0;
  padding: 10px 8px 16px; margin-bottom: 12px;
}
#screen-ranking .ld-title { font-size: 21px; font-weight: 700; color: var(--sk-gold-hi); }
#screen-ranking .ld-sub, #screen-ranking .ld-when, #screen-ranking .ld-opp-meta,
#screen-ranking .ld-opp-gear { font-size: 15px; color: var(--sk-text-2); }
#screen-ranking .ld-note { font-size: 15px; color: var(--sk-text); border-left-color: var(--sk-gold); }
#screen-ranking .ld-opp { background: rgba(0,0,0,0.28); border: 0; border-radius: 0; }
#screen-ranking .ld-opp-name { font-size: 18px; color: var(--sk-text); }
#screen-ranking .ld-bar { height: 8px; background: rgba(0,0,0,0.55); border-radius: 0; }
#screen-ranking .ld-bar span { background: linear-gradient(90deg, #b8842e, var(--sk-gold-hi)); }
#screen-ranking .ld-tag { font-size: 12px; }
#screen-ranking .ld-sw { font-size: 13px; color: var(--sk-text); border-color: rgba(214,170,96,0.4); }
#screen-ranking .ranking-header {
  font-size: 14.5px; letter-spacing: 0.8px; text-transform: none;
  color: var(--sk-text-2); border-bottom: 1px solid var(--sk-hair) !important;
}
#screen-ranking .ranking-row {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0;
  box-shadow: none; margin: 0; padding: 12px 16px;
}
#screen-ranking .ranking-row:hover { transform: none; box-shadow: none; background: linear-gradient(90deg, transparent, rgba(214,160,70,0.14) 20%, rgba(214,160,70,0.08) 80%, transparent); }
#screen-ranking .ranking-row.is-me { background: linear-gradient(90deg, rgba(var(--crimson-rgb),0.24), transparent 70%); box-shadow: inset 3px 0 0 var(--crimson-light); }
#screen-ranking .rank-num { color: var(--sk-text-2); font-weight: 700; }
#screen-ranking .rank-wl { color: var(--sk-text-2); }
#screen-ranking .rank-elo small { font-size: 12px; color: var(--sk-text-2); }

/* ════════════════ BADGES ════════════════ */
#screen-badges .bdg-head h2, #screen-badges .bdg-head > div:first-child { color: var(--sk-gold-hi); }
#screen-badges .bdg-sub { font-size: 15px; color: var(--sk-text-2); }
#screen-badges .bdg-section {
  font-size: 15px; font-weight: 700; letter-spacing: 1.2px; text-transform: none;
  color: var(--sk-gold); justify-content: center;
}
#screen-badges .bdg-section::before { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--sk-hair)); }
#screen-badges .bdg-section::after { background: linear-gradient(90deg, var(--sk-hair), transparent); }
#screen-badges .bdg-grid { gap: 0 22px; }
#screen-badges .bdg-card {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0;
  padding: 14px 4px;
}
#screen-badges .bdg-card.locked { opacity: 0.78; }
#screen-badges .bdg-card.locked .bdg-ico { filter: grayscale(1) brightness(0.85); }
#screen-badges .bdg-ico { width: 64px; height: 64px; }
#screen-badges .bdg-name { font-size: 17px; font-weight: 700; color: var(--sk-text); }
#screen-badges .bdg-card:not(.locked) .bdg-name { color: var(--sk-gold-hi); text-shadow: 0 0 10px rgba(var(--gold-rgb),0.45); }
#screen-badges .bdg-tier { font-family: var(--font-body); font-size: 14px; letter-spacing: 0.3px; text-transform: none; color: var(--sk-text-2); }
#screen-badges .bdg-tier.on { color: var(--sk-gold); }
#screen-badges .bdg-desc { font-size: 15px; color: var(--sk-text); }
#screen-badges .bdg-bar { height: 7px; background: rgba(0,0,0,0.55); border-radius: 0; box-shadow: inset 0 0 0 1px rgba(214,170,96,0.25); }
#screen-badges .bdg-bar span { background: linear-gradient(90deg, #b8842e, var(--sk-gold-hi)); }
#screen-badges .bdg-need { font-size: 14px; color: var(--sk-text-2); }
#screen-badges .bdg-reward { font-size: 14px; color: var(--sk-gold); }

/* ════════════════ PACKS ════════════════ */
#screen-packs .soon-text { font-size: 16px; color: var(--sk-text-2); max-width: none; margin: 0 4px; }
#screen-packs .pack-grid { gap: 0; }
#screen-packs .pack-card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--sk-hair-soft);
  padding: 14px 12px 16px;
}
#screen-packs .pack-grid { gap: 0 22px; }
#screen-packs .pack-card.sold-out { opacity: 0.6; }
#screen-packs .pack-card.locked { opacity: 0.72; }
#screen-packs .pack-icon {
  width: 72px; height: 72px;
  border: 5px solid transparent; border-radius: 0;
  border-image: url('item_slot.webp?v=15') 62 fill / 12px stretch;
  background: none; overflow: hidden;
}
#screen-packs .pack-name { font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--sk-gold-hi); text-shadow: 0 0 10px rgba(var(--gold-rgb),0.35); }
#screen-packs .pack-desc { font-size: 15px; color: var(--sk-text-2); }
#screen-packs .pack-rar-dot { width: 11px; height: 11px; }
#screen-packs .pack-meta {
  font-family: var(--font-body); font-size: 14px; letter-spacing: 0.2px;
  color: var(--sk-text-2); border-top-color: var(--sk-hair-soft) !important;
}
#screen-packs .pack-price { font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--sk-gold); }
#screen-packs .pack-stock.low { color: #ff9f8a; }
#screen-packs .pack-actions { grid-template-columns: 56px 1fr 1fr; gap: 8px; }
#screen-packs .pack-actions > .pack-qty, #screen-packs .pack-actions > .btn-pack { height: 40px; }
#screen-packs .pack-qty { font-size: 16px; text-align: center; }
#screen-packs .btn-pack { padding: 0 10px !important; font-size: 13px; }
#screen-packs .pack-owned, #screen-packs .pack-lock-note { font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0.2px; text-transform: none; }
#screen-packs .pack-lock-note { color: #ff9f8a; }

/* ════════════════ QUESTS (Tavern) ════════════════ */
#screen-tavern .qtabs { gap: 26px; border-bottom: 1px solid var(--sk-hair); padding: 0 4px; }
#screen-tavern .qtab { font-size: 15.5px; padding: 6px 0 6px !important; }
#screen-tavern .qtab.on::after { display: none; }
#screen-tavern .giver-cols { gap: 0 22px; }
#screen-tavern .npc-card {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0;
  padding: 14px 6px; margin: 0;
}
#screen-tavern .npc-card:hover { background: linear-gradient(90deg, rgba(214,160,70,0.12), transparent); }
#screen-tavern .npc-card.active { background: linear-gradient(90deg, rgba(var(--gold-rgb),0.14), transparent 80%); box-shadow: inset 3px 0 0 var(--sk-gold); }
#screen-tavern .npc-card.locked { opacity: 0.72; filter: grayscale(0.6); }
#screen-tavern .giver-season .npc-card { background: linear-gradient(140deg, rgba(90,40,14,0.35), transparent) !important; }
#screen-tavern .npc-portrait {
  width: 100px; height: 100px;
  border: 6px solid transparent; border-radius: 0;
  border-image: url('item_slot.webp?v=15') 62 fill / 14px stretch;
  background: none;
}
#screen-tavern .npc-name { font-size: 18px; font-weight: 700; color: var(--sk-gold-hi); }
#screen-tavern .npc-title { font-size: 15px; color: var(--sk-text-2); }
#screen-tavern .npc-intro { font-size: 15.5px; color: var(--sk-text); }
#screen-tavern .npc-lock-note, #screen-tavern .npc-when { font-family: var(--font-body); font-size: 14px; letter-spacing: 0.2px; text-transform: none; }
#screen-tavern .npc-lock-note { color: #ff9f8a; }
#screen-tavern .npc-wait-note { font-size: 14px; color: var(--sk-text-2); }
#screen-tavern .npc-badge { font-size: 12px; top: 12px; right: 4px; }
#screen-tavern .npc-info { padding-right: 24px; }
#screen-tavern .npc-dialogue { border-left: 3px solid var(--sk-gold); background: linear-gradient(90deg, rgba(var(--gold-rgb),0.10), transparent); }
#screen-tavern .npc-dialogue p { font-size: 17px; color: var(--sk-text); }
#screen-tavern .quest-card, #screen-tavern .quest-tracker {
  background: rgba(0,0,0,0.26); border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(214,170,96,0.14);
}
#screen-tavern .quest-card.available { box-shadow: inset 3px 0 0 var(--sk-gold), inset 0 0 0 1px rgba(214,170,96,0.18); }
#screen-tavern .quest-card.completed { box-shadow: inset 3px 0 0 #5fb36a, inset 0 0 0 1px rgba(95,179,106,0.25); background: linear-gradient(90deg, rgba(46,122,64,0.14), rgba(0,0,0,0.2)); }
#screen-tavern .quest-title { font-size: 17px; font-weight: 700; letter-spacing: 1px; color: var(--sk-gold-hi); }
#screen-tavern .quest-tag { font-size: 11px; }
#screen-tavern .quest-desc { font-size: 15.5px; color: var(--sk-text); }
#screen-tavern .quest-obj { font-size: 15px; }
#screen-tavern .quest-obj-text { color: var(--sk-text); }
#screen-tavern .quest-obj.done .quest-obj-text { color: var(--sk-text-2); }
#screen-tavern .quest-obj-mark { width: 17px; height: 17px; border-color: rgba(214,170,96,0.7); }
#screen-tavern .quest-obj-count { font-size: 13px; color: var(--sk-text-2); }
#screen-tavern .quest-obj-bar { height: 5px; }
#screen-tavern .quest-obj-bar > i { background: linear-gradient(90deg, #b8842e, var(--sk-gold-hi)); }
#screen-tavern .quest-reward { font-size: 13px; color: var(--sk-gold-hi); border-color: rgba(214,170,96,0.5); background: rgba(0,0,0,0.3); }
#screen-tavern .quest-note { font-size: 14.5px; }
#screen-tavern .btn-quest { padding: 9px 20px !important; font-family: var(--font-title); font-size: 12.5px; }

/* ════════════════ MAIL ════════════════ */
#screen-mail .mail-tabs { gap: 20px; border-bottom-color: var(--sk-hair); }
#screen-mail .mail-tab { font-size: 14px; }
#screen-mail .mail-tab-n { font-family: var(--font-body); font-size: 12px; }
#screen-mail .mail-list, #screen-mail .mail-pane {
  background: rgba(0,0,0,0.26); border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(214,170,96,0.14);
}
#screen-mail .mail-row { border-bottom-color: var(--sk-hair-soft); }
#screen-mail .mail-row:hover { background: rgba(214,160,70,0.12); }
#screen-mail .mail-row.active { background: linear-gradient(90deg, rgba(var(--gold-rgb),0.16), transparent); border-left: 3px solid var(--sk-gold); }
#screen-mail .mail-from { font-size: 16px; color: var(--sk-text); }
#screen-mail .mail-row.unread .mail-from { color: var(--sk-gold-hi); }
#screen-mail .mail-prev { font-size: 15px; color: var(--sk-text-2); }
#screen-mail .mail-when { font-size: 13.5px; color: var(--sk-text-2); }
#screen-mail .mail-gone, #screen-mail .mail-sys { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.2px; text-transform: none; }
#screen-mail .mail-head { border-bottom-color: var(--sk-hair); }
#screen-mail .mail-head b { font-size: 19px; color: var(--sk-gold-hi); }
#screen-mail .mail-body { font-size: 16.5px; color: var(--sk-text); }
#screen-mail .mail-note { font-size: 14px; color: var(--sk-text-2); }
#screen-mail .mail-err { font-size: 15px; color: #ff9f8a; }
#screen-mail .mail-compose input, #screen-mail .mail-compose textarea { padding: 10px 12px; }
#screen-mail .mail-blocked { border-top-color: var(--sk-hair-soft); }
#screen-mail .mail-blocked-t { font-size: 15px; letter-spacing: 1px; text-transform: none; color: var(--sk-gold); }
#screen-mail .mail-chip { background: rgba(0,0,0,0.3); border: 0; border-radius: 0; font-size: 15px; color: var(--sk-text); }
#screen-mail .mail-block-row { border-top-color: var(--sk-hair-soft); }
#screen-mail .mail-block-row span { font-size: 15px; color: var(--sk-text-2); }
#screen-mail .mail-btn { font-size: 13px; }

/* ════════════════ TRADES ════════════════ */
#screen-trades .tr-row {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0;
  margin: 0; padding: 14px 10px;
}
#screen-trades .tr-row:hover { background: linear-gradient(90deg, rgba(214,160,70,0.14), transparent); }
#screen-trades .tr-row.mine { box-shadow: inset 3px 0 0 var(--sk-gold); }
#screen-trades .tr-who { font-size: 18px; font-weight: 700; color: var(--sk-text); }
#screen-trades .tr-sum { font-size: 15px; color: var(--sk-text-2); }
.tr-tag, .tr-ok { font-size: 11.5px !important; }
/* Okno výmeny */
.tr-head { border-bottom-color: var(--sk-hair) !important; background: rgba(0,0,0,0.3); }
.tr-head h3 { font-size: 21px; color: var(--sk-gold-hi); }
.tr-left { font-size: 15px; color: var(--sk-text-2); }
.tr-sides { background: var(--sk-hair-soft) !important; }
.tr-side { background: rgba(0,0,0,0.25) !important; }
.tr-side-t b { font-size: 17px; color: var(--sk-text); }
.tr-slot { background: none !important; border: 0 !important; border-bottom: 1px solid var(--sk-hair-soft) !important; border-radius: 0 !important; }
.tr-slot img { width: 46px; height: 46px; padding: 4px; border-image: url('item_slot.webp?v=15') 62 fill / 8px stretch; }
.tr-slot-n { font-size: 16px; font-weight: 700; }
.tr-gold-line { font-size: 17px; }
.tr-gold-note, .tr-empty, .tr-count, .tr-pow { font-size: 14.5px; color: var(--sk-text-2); }
.tr-fee { font-size: 15px; color: var(--sk-text); border-left-color: var(--sk-gold); }
.tr-warn { font-size: 15px; color: #ff9f8a; }
.tr-foot { border-top-color: var(--sk-hair) !important; }
.tr-pick-row { background: rgba(0,0,0,0.28) !important; border: 0 !important; border-radius: 0 !important; }
.tr-pick-row:hover { background: rgba(214,160,70,0.16) !important; }
.tr-pick-row div { font-size: 15px; }
.tr-filters { border-bottom-color: var(--sk-hair-soft) !important; }
.tr-gold-in input { background: rgba(0,0,0,0.35) !important; border: 0 !important; border-bottom: 1px solid rgba(214,170,96,0.55) !important; border-radius: 0 !important; }
/* Bilancia v profile — čísla väčšie, popis normálnym písmom pod nimi. */
.inspect-record { gap: 28px !important; }
.ir-key { font-family: var(--font-body) !important; font-size: 14px !important; letter-spacing: 0.2px !important; text-transform: none !important; color: var(--sk-text-2) !important; }
.ir-val { font-size: 19px !important; font-weight: 700; }
/* Predmety v profile — jasné farby rarity so žiarou. */
.ip-row.r-common    { --rc: #ece2cf; } .ip-row.r-uncommon  { --rc: #8ff59c; }
.ip-row.r-rare      { --rc: #8fd0ff; } .ip-row.r-epic      { --rc: #dcaaff; }
.ip-row.r-legendary { --rc: #ffd36a; } .ip-row.r-artifact  { --rc: #ff6e6e; }
.ir-cell { display: flex; flex-direction: column-reverse; align-items: center; gap: 1px; }

/* ════════════════════════════════════════════════════════════════
   KROK 6: PRIHLÁSENIE, REGISTRÁCIA, VÝBER A TVORBA POSTAVY, ÚČET
   (login.html, register.html, reset.html, character_select.html,
    create_character.html, account.html)
════════════════════════════════════════════════════════════════ */
body.auth-page, .select-page, body:has(> .box) {
  background:
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0,0,0,0.75) 100%),
    linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40)),
    url('/static/img/scene-bg.jpg') center / cover no-repeat fixed,
    #070506 !important;
}
/* Rám okna: koža + bitmapový rám, bez zrezaných rohov. */
.auth-box, .char-create-box, .box, .account-box {
  clip-path: none !important;
  border: 14px solid transparent !important;
  border-radius: 0 !important;
  border-image: url('frame.webp?v=15') 100 / 30px round !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat,
    #120c08 !important;
  background-clip: padding-box !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.9) !important;
}
.auth-box { width: 420px !important; padding: 26px 30px 24px !important; }
.char-create-box { width: 520px !important; padding: 26px 30px !important; }
.box { max-width: 420px !important; padding: 26px 30px !important; }
.account-box { padding: 24px 28px !important; }
.auth-box::before, .auth-box::after, .char-create-box::before, .char-create-box::after { display: none !important; }
@media (max-width: 480px) {
  .auth-box, .char-create-box, .box { width: calc(100vw - 24px) !important; padding: 18px 16px !important; }
}

.auth-sub, .char-create-sub, .sub, .select-sub {
  font-family: var(--font-body) !important; font-size: 16px !important; letter-spacing: 1px !important;
  text-transform: none !important; color: var(--sk-text-2) !important;
}
.char-create-title, .logo, .select-logo { color: var(--sk-gold-hi) !important; }
.char-create-title { font-size: 20px !important; }

/* Polia: popis normálnym písmom, podčiarknutý vstup. */
.auth-field label, .field label, .avatar-picker-label, .acc-card label {
  font-family: var(--font-body) !important; font-size: 15px !important; letter-spacing: 0.2px !important;
  text-transform: none !important; color: var(--sk-text-2) !important; margin-bottom: 3px !important;
}
.auth-field input, .field input, .acc-card input {
  background: rgba(0,0,0,0.35) !important;
  border: 0 !important; border-bottom: 1px solid rgba(214,170,96,0.6) !important; border-radius: 0 !important;
  color: var(--sk-text) !important;
  font-family: var(--font-body) !important; font-size: 17px !important;
  padding: 10px 12px !important;
}
.auth-field input:focus, .field input:focus, .acc-card input:focus { border-bottom-color: var(--sk-gold) !important; background: rgba(0,0,0,0.5) !important; }
.auth-field input::placeholder, .field input::placeholder, .acc-card input::placeholder { color: var(--sk-text-2) !important; opacity: 0.8; }
.auth-field { margin-bottom: 16px !important; }

/* Hlavné tlačidlo — mosadz s vyrytým písmom. */
.btn-auth, .box .btn, .char-play-btn {
  clip-path: none !important;
  background: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-image: url('btn_primary.webp?v=15') 14 60 fill / 10px 24px stretch !important;
  padding: 14px 30px !important;
  font-family: var(--font-title) !important; font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  color: #1e0f03 !important;
  text-shadow: 0 1px 0 rgba(255,226,160,0.6) !important;
}
.btn-auth:hover:not(:disabled), .box .btn:hover:not(:disabled), .char-play-btn:hover { filter: brightness(1.15); }
.btn-auth:disabled, .box .btn:disabled { opacity: 0.7 !important; filter: grayscale(0.6); }
.char-play-btn { padding: 12px 30px !important; font-size: 14px !important; border-image-width: 9px 20px !important; }
.btn-secondary, .new-char-btn {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 10px 24px stretch !important;
  padding: 14px 30px !important;
  font-family: var(--font-title) !important; font-size: 14px !important; font-weight: 700;
  letter-spacing: 1.2px !important;
  color: var(--sk-text) !important;
}
.btn-danger {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-image: url('btn_danger.webp?v=15') 14 60 fill / 10px 24px stretch !important;
  padding: 14px 30px !important;
  font-family: var(--font-title) !important; font-size: 14px !important; font-weight: 700;
  letter-spacing: 1.2px !important;
  color: #ffe2d8 !important;
}
.btn-secondary:hover, .new-char-btn:hover:not(.is-full), .btn-danger:hover { filter: brightness(1.18); }
.new-char-btn.is-full { opacity: 0.7 !important; filter: grayscale(0.6); }

.auth-error, .msg { font-size: 15px !important; }
.auth-divider { background: linear-gradient(90deg, transparent, var(--sk-hair) 25%, var(--sk-hair) 75%, transparent) !important; }
.auth-footer, .links { font-size: 16px !important; color: var(--sk-text-2) !important; }
.auth-footer a, .links a { color: var(--sk-gold) !important; text-decoration: underline; text-underline-offset: 3px; }
.auth-footer a:hover, .links a:hover { color: var(--sk-gold-hi) !important; }
.note, .acc-note { font-size: 14.5px !important; color: var(--sk-text-2) !important; }
.success-msg { font-size: 15px !important; }

/* ── Výber postavy ── */
.char-list { max-width: 560px !important; gap: 0 !important; }
.char-card {
  background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.30)) !important;
  border: 0 !important; border-bottom: 1px solid var(--sk-hair-soft) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 14px 16px !important;
}
.char-card:hover { background: linear-gradient(90deg, rgba(214,160,70,0.20), rgba(0,0,0,0.3)) !important; }
.char-card.selected { box-shadow: inset 3px 0 0 var(--sk-gold) !important; }
.char-avatar-img { width: 62px !important; height: 62px !important; border-color: rgba(214,170,96,0.7) !important; }
.char-name { font-size: 20px !important; font-weight: 700 !important; color: var(--sk-gold-hi) !important; }
.char-meta { font-size: 15px !important; color: var(--sk-text-2) !important; }
.char-meta .wl, .char-meta .lvl { color: var(--sk-text-2) !important; }
.char-xp-bar-wrap { height: 5px !important; }
.new-char-btn { max-width: 560px !important; margin-top: 18px; }
.logout-link { font-size: 16px !important; color: var(--sk-text-2) !important; text-decoration: underline; text-underline-offset: 3px; }
.logout-link:hover { color: #ff9f8a !important; }

/* ── Tvorba postavy ── */
.class-card, .sex-card {
  clip-path: none !important;
  background: rgba(0,0,0,0.32) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(214,170,96,0.18) !important;
}
.class-card:hover, .sex-card:hover { background: rgba(214,160,70,0.14) !important; }
.class-card.selected, .sex-card.selected {
  background: linear-gradient(180deg, rgba(214,160,70,0.22), rgba(0,0,0,0.25)) !important;
  box-shadow: inset 0 0 0 2px var(--sk-gold), 0 0 14px rgba(214,160,70,0.3) !important;
}
.class-card-name { font-size: 16px !important; font-weight: 700; color: var(--sk-gold-hi) !important; }
.class-card-desc { font-size: 14.5px !important; color: var(--sk-text) !important; }
.class-paths, .class-stat-tag { font-size: 13px !important; color: var(--sk-text-2) !important; }
.sex-card { font-family: var(--font-title); font-size: 15px !important; color: var(--sk-text) !important; }
.sex-card.selected { color: var(--sk-gold-hi) !important; }
.avatar-option-img { width: 88px !important; height: 88px !important; }
.avatar-option.selected .avatar-option-img { border-color: var(--sk-gold) !important; }

/* ── Účet ── */
.acc-head { border-bottom-color: var(--sk-hair) !important; }
.account-title { font-size: 15px !important; color: var(--sk-gold) !important; letter-spacing: 3px !important; }
.account-char-name { font-size: 24px !important; font-weight: 700 !important; color: var(--sk-gold-hi) !important; }
.account-char-sub { font-size: 15px !important; color: var(--sk-text-2) !important; }
.acc-card {
  background: rgba(0,0,0,0.28) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(214,170,96,0.14) !important;
}
.acc-card.danger { box-shadow: inset 0 0 0 1px rgba(200,80,60,0.35) !important; }
.acc-card-t {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 30px 9px !important; margin-bottom: 16px !important;
  border: 0 !important;
  border-image: url('plate_small.webp?v=15') 26 64 fill / 10px 26px stretch !important;
  font-size: 15px !important; font-weight: 700; color: var(--sk-gold-hi) !important;
  text-transform: none !important;
}
.acc-card.danger .acc-card-t { color: #ffb6a0 !important; }
.acc-foot { border-top-color: var(--sk-hair) !important; }

/* ════════════════════════════════════════════════════════════════
   KROK 7: MOBIL (game_mobile.html) — jeden stĺpec, záložky v dvoch
   riadkoch ostávajú, nič nesmie pretekať do strany.
   Všetko je viazané na #screens / #tabs, ktoré existujú len na mobile.
════════════════════════════════════════════════════════════════ */
body:has(#screens) { overflow-x: hidden; }
body:has(#screens) #content-wrap {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.58)),
    url('panel_leather.webp?v=15') 0 0 / 300px 300px repeat,
    #0a0705;
}
#screens .screen { padding: 14px 14px 22px; max-width: 100vw; }
#screens img { max-width: 100%; }

/* Horná lišta */
body:has(#screens) #topbar {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.65)),
    url('panel_leather.webp?v=15') 0 0 / 300px 300px repeat, #0d0907;
  border-bottom: 1px solid rgba(214,170,96,0.45);
  box-shadow: 0 2px 14px rgba(0,0,0,0.85);
}
body:has(#screens) #top-char { line-height: 1.15; }
body:has(#screens) #top-char-name { font-size: 16px; font-weight: 700; color: var(--sk-gold-hi); }
body:has(#screens) #top-char-sub { font-size: 12px; color: var(--sk-text-2); }
body:has(#screens) #top-xp {
  height: 10px; width: 84px; margin-top: 3px;
  border-radius: 0; border-style: solid; border-color: transparent; border-width: 3px 8px;
  border-image: url('bar_frame.webp?v=15') 23 62 / 3px 8px stretch;
  background: #0b0705; background-clip: padding-box; overflow: hidden;
}
body:has(#screens) #top-xp-fill { border-radius: 0; }
body:has(#screens) #top-gold, body:has(#screens) #top-tokens, body:has(#screens) #top-packs { font-size: 15px; font-weight: 700; }
body:has(#screens) #top-avatar { border: 0; border-radius: 0; outline: 2px solid rgba(214,170,96,0.7); outline-offset: -1px; }
body:has(#screens) .notif-btn {
  border: 3px solid transparent !important; border-radius: 0 !important;
  border-image: url('item_slot.webp?v=15') 62 fill / 8px stretch !important;
  background: none !important;
}

/* Spodné záložky */
#tabs {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.7)),
    url('panel_leather.webp?v=15') 0 0 / 300px 300px repeat, #0d0907 !important;
  border-top: 1px solid rgba(214,170,96,0.45) !important;
}
#tabs .tab-item { color: var(--sk-text); }
#tabs .tab-label { font-size: 11px; letter-spacing: 0.8px; font-weight: 600; }
#tabs .tab-item.active { color: var(--sk-gold-hi); text-shadow: 0 0 10px rgba(242,194,69,0.5); }
#tabs .tab-item.active::before {
  left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sk-gold), transparent);
}
#tabs .tab-item.active .tab-icon { filter: drop-shadow(0 0 5px rgba(242,194,69,0.6)); }

/* Nadpisy sekcií na plakete */
#screens .section-title {
  justify-content: center;
  margin: 2px 0 12px; padding: 9px 26px 8px;
  border: 0; border-image: url('plate_small.webp?v=15') 26 64 fill / 9px 22px stretch;
  font-family: var(--font-title); font-size: 14px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--sk-gold-hi); text-shadow: 0 1px 2px #000;
}
#screens .section-title::after { display: none; }
#screens .stat-section-title, #screens .menu-section, #screens .lo-head {
  font-family: var(--font-title); font-size: 15px; font-weight: 700; letter-spacing: 1px;
  text-transform: none; color: var(--sk-gold);
  border-bottom: 1px solid var(--sk-hair); padding-bottom: 5px; margin: 16px 0 8px;
}

/* Prepínače ako text (aktívny zlatý a podčiarknutý) */
#screens .mkm-pill, #screens .ch-tab, #screens .inv-filter-m, #screens .qtab-m {
  background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 7px 4px 5px !important;
  font-family: var(--font-title); font-size: 14px !important; font-weight: 600; letter-spacing: 0.6px;
  text-transform: none; color: var(--sk-text) !important;
}
#screens .mkm-pill.on, #screens .ch-tab.active, #screens .inv-filter-m.active, #screens .qtab-m.on {
  color: var(--sk-gold) !important; border-bottom-color: var(--sk-gold) !important;
  text-shadow: 0 0 10px rgba(242,194,69,0.45);
}
#screens .qtab-m.on::after { display: none; }

/* Polia */
#screens .m-input, #screens input[type="text"], #screens input[type="number"], #screens textarea, #screens select {
  background-color: rgba(0,0,0,0.35) !important;
  border: 0 !important; border-bottom: 1px solid rgba(214,170,96,0.6) !important; border-radius: 0 !important;
  color: var(--sk-text) !important; font-family: var(--font-body); font-size: 16px !important;
}

/* Aréna */
#screens .arena-meta-m { font-size: 14.5px; color: var(--sk-text-2); }
#screens .arena-row {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0;
  box-shadow: none; margin: 0; padding: 12px 6px;
}
#screens .arena-row::before { display: none; }
#screens .arena-row.is-me { background: linear-gradient(90deg, rgba(168,34,34,0.25), transparent 75%); box-shadow: inset 3px 0 0 #e05a3c; }
#screens .arena-name { font-size: 18px; font-weight: 700; color: var(--sk-text); }
#screens .arena-meta { font-size: 14.5px; color: var(--sk-text-2); }

/* Postava — sloty z bitmapy, rarita ako vnútorný rám */
#screens .eslot {
  border: 4px solid transparent !important; border-radius: 0 !important;
  border-image: url('item_slot.webp?v=15') 62 fill / 9px stretch !important;
  background: none !important; box-shadow: none !important; overflow: visible;
}
#screens .eslot.filled { outline: 2px solid var(--rar, #8d8378); outline-offset: -5px; }
#screens .eslot.filled.rar-common    { --rar: #ece2cf; } #screens .eslot.filled.rar-uncommon { --rar: #8ff59c; }
#screens .eslot.filled.rar-rare      { --rar: #8fd0ff; } #screens .eslot.filled.rar-epic     { --rar: #dcaaff; }
#screens .eslot.filled.rar-legendary { --rar: #ffd36a; } #screens .eslot.filled.rar-artifact { --rar: #ff6e6e; }
#screens .eslot.filtering { outline: 2px solid var(--sk-gold); outline-offset: -5px; }
#screens .eslot-label { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--sk-text-2); }
#screens .eslot.locked { opacity: 0.6; filter: grayscale(0.6); }
#screens .power-head-m { font-size: 14px; color: var(--sk-text); }
#screens .power-track-m {
  height: 18px; border-radius: 0; border-style: solid; border-color: transparent; border-width: 5px 14px;
  border-image: url('bar_frame.webp?v=15') 23 62 / 5px 14px stretch;
  background: #0b0705; background-clip: padding-box;
}
#screens .lo-name { font-family: var(--font-body); font-size: 15px; color: var(--sk-text); }
#screens .lo-name.empty { color: var(--sk-text-2); }
#screens .lo-btn {
  background: none; border: 0; border-radius: 0;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 6px 10px stretch;
  padding: 7px 8px; font-size: 11.5px; color: var(--sk-text);
}
#screens .lo-btn.del { border-image: url('btn_danger.webp?v=15') 14 60 fill / 6px 10px stretch; color: #ffe2d8; }
#screens .lo-btn:disabled { opacity: 0.65; filter: grayscale(0.6); }
#screens .inv-chks-m, #screens .inv-chks-m label { font-family: var(--font-body); font-size: 15px; color: var(--sk-text); }
#screens .inv-row-m {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0;
  box-shadow: none; margin: 0; padding: 10px 4px;
}
#screens .inv-row-m.dim { opacity: 0.55; }
#screens .inv-row-m.r-common    { --rc: #ece2cf; } #screens .inv-row-m.r-uncommon { --rc: #8ff59c; }
#screens .inv-row-m.r-rare      { --rc: #8fd0ff; } #screens .inv-row-m.r-epic     { --rc: #dcaaff; }
#screens .inv-row-m.r-legendary { --rc: #ffd36a; } #screens .inv-row-m.r-artifact { --rc: #ff6e6e; }
#screens .inv-icon-m {
  width: 54px; height: 54px;
  border: 4px solid transparent !important; border-radius: 0 !important;
  border-image: url('item_slot.webp?v=15') 62 fill / 9px stretch !important;
  background: none !important; outline: 2px solid var(--rc); outline-offset: -5px;
}
#screens .inv-name-m {
  font-size: 16.5px; font-weight: 700; font-family: var(--font-title);
  text-shadow: 0 1px 2px #000, 0 0 8px color-mix(in srgb, var(--rc) 70%, transparent);
}
#screens .inv-sub-m, #screens .inv-req-m, #screens .inv-packs-m { font-family: var(--font-body); font-size: 13.5px; color: var(--sk-text-2); }
#screens .inv-req-m.bad { color: #ff9f8a; }
#screens .inv-sell-m {
  background: none; border: 0; border-radius: 0;
  border-image: url('btn_primary.webp?v=15') 14 60 fill / 6px 12px stretch;
  color: #1e0f03; font-weight: 700; font-family: var(--font-title); font-size: 12px;
  padding: 8px 14px; text-shadow: 0 1px 0 rgba(255,226,160,0.55);
}

/* Štatistiky */
#screens .stat-points-bar { background: none; border: 0; border-bottom: 1px solid var(--sk-hair); border-radius: 0; padding: 4px 2px 10px; }
#screens .stat-points-label { font-size: 15px; color: var(--sk-text); }
#screens .stat-points-count { font-size: 22px; }
#screens .reset-stats-m {
  background: none; border: 0; border-radius: 0;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 6px 12px stretch;
  padding: 8px 18px; font-size: 12px; color: var(--sk-text);
}
#screens .reset-stats-m:disabled { opacity: 0.65; filter: grayscale(0.6); }
#screens .stat-alloc-row {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0;
  box-shadow: none; margin: 0; padding: 8px 2px; gap: 8px;
}
#screens .sal-key { width: 40px; font-size: 15px; font-weight: 700; color: var(--sk-gold-hi); }
#screens .sal-sub { font-family: var(--font-body); font-size: 13.5px; color: var(--sk-text-2); }
#screens .sal-val { font-size: 18px; font-weight: 700; color: var(--sk-text); }
#screens .sal-btn {
  width: 38px; height: 38px;
  border: 1px solid rgba(214,170,96,0.75) !important; border-radius: 2px;
  background: linear-gradient(180deg, #4a3a22, #241a10);
  color: var(--sk-gold-hi); font-size: 20px; font-weight: 700;
}
#screens .sal-btn:disabled { opacity: 0.5; filter: grayscale(0.6); }
#screens .derived-row { font-size: 15px; padding: 7px 2px; border-bottom-color: var(--sk-hair-soft); }
#screens .derived-key { color: var(--sk-text-2); font-size: 15px; }
#screens .derived-val { color: var(--sk-text); font-weight: 700; }

/* Skills */
#screens .sk-card-m {
  background: linear-gradient(160deg, rgba(0,0,0,0.38), rgba(0,0,0,0.22));
  border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(214,170,96,0.10);
  padding: 12px; margin-bottom: 8px;
}
#screens .sk-card-m.learned { box-shadow: inset 3px 0 0 var(--sk-gold), inset 0 0 0 1px rgba(214,170,96,0.18); }
#screens .sk-card-m.blocked { opacity: 0.72; }
#screens .sk-card-name-m { font-size: 16.5px; font-weight: 700; color: var(--sk-text); }
#screens .sk-card-m.learned .sk-card-name-m { color: var(--sk-gold-hi); }
#screens .sk-card-rank-m { font-size: 13px; color: var(--sk-gold); }
#screens .sk-card-fx-m { font-family: var(--font-body); font-size: 15px; color: var(--sk-text); }
#screens .sk-card-desc-m, #screens .sk-card-weap-m { font-family: var(--font-body); font-size: 14px; color: var(--sk-text-2); }
#screens .sk-head-m { border-bottom: 1px solid var(--sk-hair); }
#screens .skh-val { font-size: 24px; font-weight: 700; color: var(--sk-gold); }
#screens .skh-key { font-family: var(--font-body); font-size: 14px; letter-spacing: 0.2px; text-transform: none; color: var(--sk-text-2); }
#screens .sk-tree-name-m { font-size: 18px; font-weight: 700; color: var(--sk-gold-hi); }
#screens .sk-tier-m { font-size: 14px; font-weight: 700; color: var(--sk-gold); letter-spacing: 1px; }

/* Questy, packy, rebríček */
#screens .npc-card-m, #screens .q-card-m, #screens .pk-card-m {
  background: rgba(0,0,0,0.28); border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(214,170,96,0.14);
}
#screens .npc-card-m.active, #screens .q-card-m.available { box-shadow: inset 3px 0 0 var(--sk-gold), inset 0 0 0 1px rgba(214,170,96,0.18); }
#screens .q-card-m.completed { box-shadow: inset 3px 0 0 #5fb36a, inset 0 0 0 1px rgba(95,179,106,0.25); }
#screens .npc-card-m.locked { opacity: 0.72; }
#screens .npc-portrait-m, #screens .pk-icon-m {
  border: 4px solid transparent !important; border-radius: 0 !important;
  border-image: url('item_slot.webp?v=15') 62 fill / 10px stretch !important;
  background: none !important;
}
#screens .npc-name-m, #screens .pk-name-m, #screens .q-title-m { font-size: 16.5px; font-weight: 700; color: var(--sk-gold-hi); }
#screens .npc-title-m, #screens .npc-say-m, #screens .q-desc-m, #screens .pk-desc-m, #screens .q-obj-m {
  font-family: var(--font-body); font-size: 15px; color: var(--sk-text);
}
#screens .npc-title-m { color: var(--sk-text-2); font-size: 14px; }
#screens .pk-meta-m, #screens .pk-stock-m, #screens .npc-lock-m, #screens .q-rew-m { font-family: var(--font-body); font-size: 14px; letter-spacing: 0.2px; text-transform: none; color: var(--sk-text-2); }
#screens .q-btn-m, #screens .pk-btn-m:not(.open) {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  border-image: url('btn_primary.webp?v=15') 14 60 fill / 8px 16px stretch !important;
  color: #1e0f03 !important; font-weight: 700; font-size: 13px; padding: 11px !important;
  text-shadow: 0 1px 0 rgba(255,226,160,0.55);
}
#screens .pk-btn-m.open {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 8px 16px stretch !important;
  color: var(--sk-text) !important; font-size: 13px; padding: 11px !important;
}
#screens .pk-btn-m:disabled, #screens .q-btn-m:disabled { opacity: 0.65 !important; filter: grayscale(0.6); }
#screens .ldm { background: none; border: 0; border-bottom: 1px solid var(--sk-hair); }
#screens .ldm-t { font-size: 19px; font-weight: 700; color: var(--sk-gold-hi); }
#screens .ldm-s { font-size: 15px; color: var(--sk-text-2); }

/* Profil a menu */
#screens .profile-card {
  border: 12px solid transparent !important; border-radius: 0 !important;
  border-image: url('frame.webp?v=15') 100 / 24px round !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45)),
    url('panel_leather.webp?v=15') 0 0 / 300px 300px repeat, #120c08 !important;
  background-clip: padding-box !important;
}
#screens .profile-name { color: var(--sk-gold-hi); }
#screens .profile-sub { font-size: 15px; color: var(--sk-text-2); }
#screens .pstat { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#screens .pstat + .pstat { border-left: 1px solid var(--sk-hair-soft) !important; }
#screens .pstat-val { font-size: 22px; font-weight: 700; color: var(--sk-gold-hi); }
#screens .pstat-key { font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0.2px; text-transform: none; color: var(--sk-text-2); }
#screens .menu-item {
  background: none; border: 0; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0;
  box-shadow: none; margin: 0; padding: 14px 6px;
}
#screens .menu-item:active { background: rgba(214,160,70,0.14); }
#screens .menu-label { font-size: 17px; color: var(--sk-text); }
#screens .menu-sub { font-size: 14.5px; color: var(--sk-text-2); }
#screens .menu-item.danger .menu-label { color: #ff9f8a; }
#screens .empty-state { color: var(--sk-text-2); font-size: 16px; }

/* Postava na mobile: jeden stĺpec — sloty v mriežke 5 × 3 (väčšie ikony),
   pod nimi zostavy, filtre a batoh na celú šírku. */
#screens .eq-split { flex-direction: column; align-items: stretch; gap: 14px; }
#screens .equip-doll-wrap {
  position: static; width: 100%; height: auto;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
}
#screens .equip-doll-wrap .doll-center { display: none; }
#screens .equip-doll-wrap .eslot {
  position: relative; top: auto; left: auto; right: auto;
  width: 100%; height: auto; aspect-ratio: 1;
}
#screens .eq-right { width: 100%; }
#screens .eq-bag { max-height: none; overflow: visible; }
#screens .npc-toggle-m { color: var(--sk-gold); font-size: 13px; }

/* ── Mobilné stránky prihlásenia, výberu, tvorby postavy a účtu ── */
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) {
  background:
    radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(0,0,0,0.75) 100%),
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url('/static/img/scene-bg.jpg') center / cover no-repeat fixed,
    #070506 !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) > .card {
  border: 12px solid transparent !important; border-radius: 0 !important;
  border-image: url('frame.webp?v=15') 100 / 26px round !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45)),
    url('panel_leather.webp?v=15') 0 0 / 300px 300px repeat, #120c08 !important;
  background-clip: padding-box !important; box-shadow: 0 24px 70px rgba(0,0,0,0.9) !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .logo, body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .title, body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .topbar-title { color: var(--sk-gold-hi) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .logo-sub, body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .sub { font-family: var(--font-body) !important; font-size: 16px !important; letter-spacing: 1px !important; text-transform: none !important; color: var(--sk-text-2) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .tabs { background: none !important; border: 0 !important; border-bottom: 1px solid var(--sk-hair) !important; gap: 24px; justify-content: center; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .tab {
  flex: 0 0 auto !important; background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; padding: 8px 2px 6px !important;
  font-family: var(--font-title); font-size: 15px !important; font-weight: 600; letter-spacing: 1px; color: var(--sk-text) !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .tab.active { color: var(--sk-gold) !important; border-bottom-color: var(--sk-gold) !important; text-shadow: 0 0 10px rgba(242,194,69,0.45); }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .field label, body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .section-label {
  font-family: var(--font-body) !important; font-size: 15px !important; letter-spacing: 0.2px !important;
  text-transform: none !important; color: var(--sk-text-2) !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .section-label { font-family: var(--font-title) !important; font-weight: 700; color: var(--sk-gold) !important; border-bottom: 1px solid var(--sk-hair); padding-bottom: 5px; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .field input {
  background: rgba(0,0,0,0.38) !important; border: 0 !important; border-bottom: 1px solid rgba(214,170,96,0.6) !important;
  border-radius: 0 !important; color: var(--sk-text) !important; font-family: var(--font-body) !important; font-size: 17px !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .field input:focus { border-bottom-color: var(--sk-gold) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .btn-main {
  clip-path: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-image: url('btn_primary.webp?v=15') 14 60 fill / 10px 24px stretch !important;
  padding: 15px 28px !important; font-family: var(--font-title) !important; font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: 1.4px !important; color: #1e0f03 !important; text-shadow: 0 1px 0 rgba(255,226,160,0.6) !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .btn-new {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 10px 24px stretch !important;
  padding: 15px 28px !important; font-family: var(--font-title) !important; font-size: 14px !important; font-weight: 700;
  letter-spacing: 1px !important; color: var(--sk-text) !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .btn-danger {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  border-image: url('btn_danger.webp?v=15') 14 60 fill / 10px 24px stretch !important;
  padding: 15px 28px !important; font-family: var(--font-title) !important; font-size: 14px !important; font-weight: 700;
  color: #ffe2d8 !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .btn-logout { font-size: 16px !important; color: var(--sk-text-2) !important; text-decoration: underline; text-underline-offset: 3px; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .err, body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .ok { font-size: 15px !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .char-list > div {
  background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3)) !important;
  border: 0 !important; border-bottom: 1px solid var(--sk-hair-soft) !important; border-radius: 0 !important; box-shadow: none !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .char-name { font-size: 20px !important; font-weight: 700; color: var(--sk-gold-hi) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .char-meta { font-size: 15px !important; color: var(--sk-text-2) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .class-grid > div, body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .sex-card {
  clip-path: none !important; background: rgba(0,0,0,0.38) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(214,170,96,0.2) !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .class-grid > div.selected, body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .sex-card.selected {
  background: linear-gradient(180deg, rgba(214,160,70,0.22), rgba(0,0,0,0.3)) !important;
  box-shadow: inset 0 0 0 2px var(--sk-gold), 0 0 14px rgba(214,160,70,0.3) !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .class-name { font-size: 16px !important; font-weight: 700; color: var(--sk-gold-hi) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .class-desc { font-family: var(--font-body); font-size: 15px !important; color: var(--sk-text) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .class-tag { font-size: 13px !important; color: var(--sk-text-2) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .sex-card { font-size: 16px !important; color: var(--sk-text) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .sex-card.selected { color: var(--sk-gold-hi) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) > .topbar {
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.65)), url('panel_leather.webp?v=15') 0 0 / 300px 300px repeat, #0d0907 !important;
  border-bottom: 1px solid rgba(214,170,96,0.45) !important;
}
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .topbar-title { font-size: 17px !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .back-btn { color: var(--sk-gold) !important; font-size: 26px !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .danger-zone { background: rgba(0,0,0,0.3) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px rgba(200,80,60,0.4) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .danger-title { color: #ffb6a0 !important; font-size: 16px !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .danger-desc { font-size: 15px !important; color: var(--sk-text-2) !important; }
body:is(:has(> .logo-wrap), :has(> .char-list), :has(> .class-grid), :has(> .topbar > .back-btn)) .divider { background: var(--sk-hair) !important; }

/* ── Záznam zápasu (fight log) ── */
.fight-modal-header, .fight-modal-result {
  background: linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0.12)) !important;
  border-color: var(--sk-hair) !important;
}
.fight-modal-close { top: 6px !important; right: 6px !important; }
.btn-skip-fight {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-image: url('btn_secondary.webp?v=15') 14 60 fill / 7px 16px stretch !important;
  padding: 10px 24px !important; font-family: var(--font-title); font-size: 13px !important; font-weight: 700;
  letter-spacing: 0.8px !important; color: var(--sk-text) !important;
}
.btn-skip-fight:not(.btn-share) {
  border-image: url('btn_primary.webp?v=15') 14 60 fill / 7px 16px stretch !important;
  color: #1e0f03 !important; text-shadow: 0 1px 0 rgba(255,226,160,0.6) !important;
}
.btn-skip-fight:hover { filter: brightness(1.18); }
.fight-turn-label {
  justify-content: center; font-size: 14.5px !important; font-weight: 700; letter-spacing: 1.6px !important;
  color: var(--sk-gold) !important;
}
.fight-turn-label::before { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--sk-hair)); }
.fight-turn-label::after { background: linear-gradient(90deg, var(--sk-hair), transparent) !important; }
.fight-event { font-size: 16px !important; color: var(--sk-text) !important; border-bottom: 1px solid var(--sk-hair-soft); border-radius: 0 !important; }
.ev-skill-effect { font-size: 15px !important; color: var(--sk-text-2) !important; }
.ev-hp-num { font-size: 15px; font-weight: 700; color: var(--sk-text); }

/* ════════════════════════════════════════════════════════════════
   DOLADENIE 1 (spätná väzba): efekty skillov, aréna, fight log
════════════════════════════════════════════════════════════════ */

/* ── Detail skillu: VŠETKY ranky svietia, nielen aktuálny ── */
.sk-d-rank { padding: 9px 4px !important; }
.sk-d-rank > span:not(.n) {
  color: #fbe9bf !important;
  font-family: var(--font-body);
  font-size: 16.5px; font-weight: 700; line-height: 1.35;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(242,194,69,0.45);
}
.sk-d-rank .n {
  font-family: var(--font-title); font-size: 17px !important; font-weight: 700;
  color: var(--sk-gold) !important; text-shadow: 0 0 8px rgba(242,194,69,0.5);
}
.sk-d-rank .sk-d-eff {
  display: block; margin-top: 3px;
  font-size: 15px !important; font-weight: 400;
  color: #eadbb8 !important;
  text-shadow: 0 1px 2px #000;
}
.sk-d-rank.have { background: linear-gradient(90deg, rgba(242,194,69,0.16), transparent 85%); box-shadow: inset 3px 0 0 var(--sk-gold); }
.sk-d-rank.have > span:not(.n) { color: #ffe39a !important; text-shadow: 0 1px 2px #000, 0 0 14px rgba(242,194,69,0.7); }
.sk-d-rank.next { background: linear-gradient(90deg, rgba(242,194,69,0.08), transparent 85%); }

/* ── Karty skillov v zozname: efekt jasný a so svitom ── */
#screen-skills .sk-text {
  color: #fbe9bf; font-weight: 700; font-size: 15.5px;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(242,194,69,0.4);
}
#screen-skills .sk-effect li { color: #eadbb8; font-size: 15px; text-shadow: 0 1px 2px #000; }
#screen-skills .sk-effect li::before { color: var(--sk-gold-hi); }
#screens .sk-card-fx-m {
  color: #fbe9bf; font-weight: 700; font-size: 15.5px;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(242,194,69,0.4);
}

/* ── Aréna: každý bojovník na vlastnom tmavom páse (tmavý podklad pod
      textom), mená svetlé a väčšie ── */
#screen-arena .arena-row {
  margin: 0 0 6px;
  padding: 12px 18px;
  border: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.62), rgba(0,0,0,0.42) 70%, rgba(0,0,0,0.30));
  box-shadow: inset 0 1px 0 rgba(255,226,160,0.07), inset 0 -1px 0 rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45);
}
#screen-arena .arena-row:hover {
  background: linear-gradient(90deg, rgba(120,80,30,0.45), rgba(0,0,0,0.42) 70%, rgba(0,0,0,0.30));
  box-shadow: inset 3px 0 0 var(--sk-gold), 0 2px 10px rgba(0,0,0,0.5);
}
#screen-arena .arena-quest { background: linear-gradient(90deg, rgba(120,90,20,0.45), rgba(0,0,0,0.40) 70%); }
#screen-arena .arena-self {
  background: linear-gradient(90deg, rgba(150,30,30,0.55), rgba(0,0,0,0.42) 75%) !important;
  box-shadow: inset 3px 0 0 #ff7a5c, 0 2px 6px rgba(0,0,0,0.45);
}
#screen-arena .arena-name {
  font-size: 20px; font-weight: 700; color: #fff1d6;
  text-shadow: 0 1px 2px #000, 0 0 12px rgba(255,226,160,0.25);
}
#screen-arena .arena-class { font-size: 15.5px; color: #e6d6b4; }
#screen-arena .arena-level { font-size: 20px; color: #fff1d6; text-shadow: 0 1px 2px #000; }
#screen-arena .arena-win { font-size: 18px; text-shadow: 0 1px 2px #000; }
#screen-arena .arena-win .wl-sub { color: #e6d6b4; font-size: 13.5px; }
#screen-arena .arena-avatar-img { width: 52px; height: 52px; border: 2px solid rgba(214,170,96,0.75); }
#screen-arena .arena-icon .crest-img, #screen-arena .arena-icon .crest-svg { width: 32px !important; height: 32px !important; }
#screen-arena .arena-level-sep { margin: 16px 4px 8px; }
#screens .arena-row {
  margin: 0 0 6px; padding: 12px 10px;
  background: linear-gradient(90deg, rgba(0,0,0,0.62), rgba(0,0,0,0.38));
  border-bottom: 0;
}
#screens .arena-name { color: #fff1d6; font-size: 19px; text-shadow: 0 1px 2px #000; }
#screens .arena-meta { color: #e6d6b4; }

/* ── Fight log: tmavšie pozadie, výrazný text ── */
.fight-modal-box {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.70), rgba(0,0,0,0.80)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat,
    #0a0705 !important;
  background-clip: padding-box !important;
}
.fight-modal-log { padding: 14px 18px !important; }
.fight-vs-name { font-size: 18px !important; font-weight: 700; color: #fff1d6 !important; text-shadow: 0 1px 2px #000; }
.fight-vs-hptext { font-size: 14px !important; color: #e6d6b4 !important; }
.fight-turn-label { font-size: 16px !important; color: var(--sk-gold-hi) !important; text-shadow: 0 0 10px rgba(242,194,69,0.45); }
.fight-event {
  background: rgba(0,0,0,0.45) !important;
  border-bottom: 0 !important;
  border-left-width: 3px !important;
  margin-bottom: 5px !important;
  padding: 9px 12px !important;
  font-size: 17px !important;
  color: #f1e4c8 !important;
}
.fight-event.ev-fail { opacity: 1 !important; color: #d9caa8 !important; }
.fight-event .ev-attacker, .fight-event .ev-target {
  font-size: 17px; color: #fff1d6;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(255,226,160,0.3);
}
.fight-event .ev-verb, .ev-dmg-label { color: #e6d6b4 !important; font-size: 16.5px !important; }
.fight-event .ev-dmg { font-size: 21px; color: #ffa53a; text-shadow: 0 0 12px rgba(255,157,46,0.7), 0 1px 2px #000; }
.fight-event.ev-big .ev-dmg { font-size: 24px; }
.fight-event .ev-outcome { color: #ffc970 !important; font-size: 16.5px !important; }
.ev-skill-name { font-size: 17px !important; text-shadow: 0 0 10px currentColor; }
.ev-skill-effect { font-size: 16px !important; color: #e6d6b4 !important; }
.ev-flag { font-size: 11px !important; }
.ev-hp-num { font-size: 16px !important; color: #fff1d6 !important; }
.ev-hp-bar { height: 8px !important; }
.fight-modal-result { font-size: 16px; color: #fff1d6; }
/* Detail skillu — tmavší podklad, nech efekty vyniknú; silnejší svit. */
.sk-box {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.74)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat, #0a0705 !important;
  background-clip: padding-box !important;
}
.sk-d-rank > span:not(.n) { color: #ffeec4 !important; text-shadow: 0 1px 2px #000, 0 0 14px rgba(242,194,69,0.65) !important; }

/* ── DOLADENIE 2: fight log ── */
/* Akcie — jedna spoločná farba (jantárová). */
.fight-event.ev-skill.sk-act {
  border-left-color: #e08a2c !important;
  background: linear-gradient(90deg, rgba(224,138,44,0.16), rgba(0,0,0,0.45) 60%) !important;
}
.sk-act .ev-skill-name { color: #ffb45a !important; }
.ev-skill.sk-act .ev-skill-icon { border-color: #b8742a; }
/* Ikona schopnosti väčšia, tooltip nad ňou. */
.fight-event .ev-skill-icon { width: 30px !important; height: 30px !important; cursor: help; vertical-align: middle; }
.ev-skill-rank {
  display: inline-block; margin-left: 4px; padding: 1px 8px;
  font-family: var(--font-title); font-size: 12.5px; font-weight: 700; letter-spacing: 0.6px;
  color: #1e0f03; background: linear-gradient(180deg, #f3cf73, #b88a2e);
  border-radius: 2px; vertical-align: 2px;
}
/* Čísla v riadkoch schopností — rovnako výrazné ako bežné poškodenie. */
.ev-skill-effect .num {
  font-family: var(--font-title); font-size: 19px; font-weight: 700;
  text-shadow: 0 0 10px currentColor, 0 1px 2px #000;
}
.ev-skill-effect .num:not(.dmg) { color: #ff9d2e; }
.sk-good .ev-skill-effect .num:not(.dmg) { color: #8ff59c; }
.ev-skill-effect .num.dmg { color: #ffa53a; font-size: 21px; text-shadow: 0 0 12px rgba(255,157,46,0.75), 0 1px 2px #000; }
/* Infernal Protection — koľko pohltila, výrazne. */
.ev-ip { font-size: 15px !important; font-style: normal !important; color: #ffd36a !important; margin-left: 10px !important; }
.ev-ip img { width: 22px !important; height: 22px !important; opacity: 1 !important; }
.ev-ip-num {
  font-family: var(--font-title); font-size: 19px; font-weight: 700; color: #ffe08a;
  text-shadow: 0 0 10px rgba(242,194,69,0.75), 0 1px 2px #000;
}
/* Tooltip schopnosti — nad fight logom, čitateľný. */
#tooltip.tt-skill {
  z-index: 10500 !important; max-width: 340px; padding: 10px 14px !important;
}
#tooltip.tt-skill .tt-name { font-size: 17px; }
#tooltip .tt-rank { font-size: 13px; color: var(--sk-gold); margin-left: 6px; }
#tooltip.tt-skill .tt-stat { font-size: 15px; line-height: 1.45; color: #f1e4c8; }
/* Mobil — rovnaké pravidlá fight logu. */
.ev-skill-m.sk-act-m { border-left-color: #e08a2c !important; }
.sk-act-m .ev-sk-m { color: #ffb45a !important; }
.num-m { font-family: var(--font-title); font-size: 17px; font-weight: 700; color: #ffa53a; text-shadow: 0 0 10px rgba(255,157,46,0.7); }
.ev-ip-m { font-size: 14px !important; color: #ffd36a !important; }
.ev-ip-m img { width: 18px !important; height: 18px !important; opacity: 1 !important; }
.ev-ip-m .num-m { color: #ffe08a; text-shadow: 0 0 10px rgba(242,194,69,0.75); }
.ev-rank-m { font-family: var(--font-title); font-size: 11.5px; font-weight: 700; color: #1e0f03;
  background: linear-gradient(180deg, #f3cf73, #b88a2e); padding: 0 6px; border-radius: 2px; }

/* ── DOLADENIE 3: riadky hráčov v Aréne a Rankingu ako vystúpené tlačidlá ──
   Svetlá horná hrana, tmavá spodná, tieň pod doskou — ako v pôvodnom
   dizajne. Pod myšou sa doska nadvihne a rozžiari, pri kliknutí zatlačí. */
#screen-arena .arena-row,
#screen-ranking .ranking-row {
  margin: 0 0 8px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(0,0,0,0.85) !important;
  border-top-color: rgba(214,170,96,0.38) !important;
  border-left-color: rgba(214,170,96,0.18) !important;
  border-right-color: rgba(0,0,0,0.7) !important;
  background:
    linear-gradient(180deg, rgba(255,226,160,0.07) 0%, transparent 38%),
    linear-gradient(180deg, #2b2116 0%, #1b150e 48%, #110c08 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,226,160,0.16),
    inset 0 -2px 0 rgba(0,0,0,0.55),
    0 4px 10px rgba(0,0,0,0.65),
    0 1px 2px rgba(0,0,0,0.8) !important;
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
  cursor: pointer;
}
#screen-arena .arena-row:hover,
#screen-ranking .ranking-row:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(242,194,69,0.75) !important;
  background:
    linear-gradient(180deg, rgba(255,226,160,0.12) 0%, transparent 40%),
    linear-gradient(180deg, #3a2c1a 0%, #241b11 48%, #150f09 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,226,160,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.55),
    0 8px 18px rgba(0,0,0,0.75),
    0 0 14px rgba(242,194,69,0.22) !important;
}
#screen-arena .arena-row:active,
#screen-ranking .ranking-row:active {
  transform: translateY(1px) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.8) !important;
}
/* Tvoj riadok — rovnaká doska do červena; cieľ questu do zlata. */
#screen-arena .arena-self,
#screen-ranking .ranking-row.is-me {
  border-top-color: rgba(255,122,92,0.6) !important;
  border-left-color: rgba(255,122,92,0.4) !important;
  background:
    linear-gradient(180deg, rgba(255,180,160,0.08) 0%, transparent 40%),
    linear-gradient(180deg, #4a1b14 0%, #2c110c 50%, #170807 100%) !important;
}
#screen-arena .arena-self { cursor: default; }
#screen-arena .arena-self:hover { transform: none !important; }
#screen-arena .arena-quest {
  border-top-color: rgba(242,194,69,0.6) !important;
  background:
    linear-gradient(180deg, rgba(255,226,160,0.10) 0%, transparent 40%),
    linear-gradient(180deg, #3d2e12 0%, #261c0b 50%, #140e06 100%) !important;
}
#screen-ranking .rank-num { color: #e6d6b4 !important; }
#screen-ranking .ranking-row .arena-name,
#screen-ranking .ranking-row [class*="name"] { color: #fff1d6; text-shadow: 0 1px 2px #000; }
/* Mobil — rovnaké vystúpené dosky v aréne. */
#screens .arena-row {
  border-radius: 3px !important;
  border: 1px solid rgba(0,0,0,0.85) !important;
  border-top-color: rgba(214,170,96,0.38) !important;
  background:
    linear-gradient(180deg, rgba(255,226,160,0.07) 0%, transparent 38%),
    linear-gradient(180deg, #2b2116 0%, #1b150e 48%, #110c08 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,226,160,0.16), inset 0 -2px 0 rgba(0,0,0,0.55), 0 4px 10px rgba(0,0,0,0.65) !important;
  margin-bottom: 8px !important;
}
#screens .arena-row:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,0.7) !important; }
#screens .arena-row.is-me {
  border-top-color: rgba(255,122,92,0.6) !important;
  background: linear-gradient(180deg, #4a1b14 0%, #2c110c 50%, #170807 100%) !important;
}

/* ── DOLADENIE 4: okno výzvy (Challenging …) ──
   Voľby sú vystúpené dosky ako riadky v Aréne, vybraná doska svieti
   zlatom. Tmavší podklad okna, väčšie a jasnejšie písmo. */
.chal-box {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.58), rgba(0,0,0,0.72)),
    url('panel_leather.webp?v=15') 0 0 / 364px 364px repeat, #0a0705 !important;
  background-clip: padding-box !important;
}
.chal-rows { gap: 18px !important; padding: 14px 16px 6px !important; }
.chal-label {
  display: flex; align-items: center; gap: 12px;
  font-size: 15.5px !important; letter-spacing: 1.6px !important; text-transform: uppercase !important;
  color: var(--sk-gold-hi) !important; text-shadow: 0 0 10px rgba(242,194,69,0.35), 0 1px 2px #000;
  margin-bottom: 9px !important;
}
.chal-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--sk-hair), transparent); }
.chal-tiles, .chal-scrolls { gap: 9px !important; }

.chal-tile, .chal-scroll {
  border-radius: 3px !important;
  border: 1px solid rgba(0,0,0,0.85) !important;
  border-top-color: rgba(214,170,96,0.38) !important;
  border-left-color: rgba(214,170,96,0.18) !important;
  background:
    linear-gradient(180deg, rgba(255,226,160,0.07) 0%, transparent 38%),
    linear-gradient(180deg, #2b2116 0%, #1b150e 48%, #110c08 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,226,160,0.16),
    inset 0 -2px 0 rgba(0,0,0,0.55),
    0 4px 10px rgba(0,0,0,0.6) !important;
  transition: transform .12s, box-shadow .12s, border-color .12s !important;
}
.chal-tile:hover, .chal-scroll:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(242,194,69,0.6) !important;
  background:
    linear-gradient(180deg, rgba(255,226,160,0.12) 0%, transparent 40%),
    linear-gradient(180deg, #3a2c1a 0%, #241b11 48%, #150f09 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,226,160,0.25), 0 8px 16px rgba(0,0,0,0.7), 0 0 12px rgba(242,194,69,0.2) !important;
}
.chal-tile.on, .chal-scroll.on {
  border: 1px solid #f2c245 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,214,120,0.30), transparent 70%),
    linear-gradient(180deg, #5a4318 0%, #3a2a0e 50%, #1e1507 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,236,180,0.45),
    inset 0 0 18px rgba(242,194,69,0.25),
    0 0 16px rgba(242,194,69,0.45),
    0 4px 10px rgba(0,0,0,0.6) !important;
}
.chal-tile.on::after, .chal-scroll.on::after { border-top-color: #ffe08a !important; border-right-color: #ffe08a !important; }
.chal-tile { padding: 11px 13px !important; }
.chal-tile-n {
  font-family: var(--font-title) !important; font-size: 16px !important; font-weight: 700 !important;
  color: #fff1d6 !important; text-shadow: 0 1px 2px #000;
}
.chal-tile.on .chal-tile-n { color: #ffe39a !important; text-shadow: 0 0 10px rgba(242,194,69,0.6), 0 1px 2px #000; }
.chal-tile-d { font-size: 14.5px !important; color: #e6d6b4 !important; white-space: normal !important; }
.chal-tile.on .chal-tile-d { color: #f6e6c0 !important; }
.chal-tile-i {
  width: 46px !important; height: 46px !important; padding: 4px;
  border: 0; border-image: url('item_slot.webp?v=15') 62 fill / 8px stretch;
  margin-bottom: 7px !important;
}
.chal-mini { border-top-color: rgba(214,170,96,0.2) !important; gap: 5px !important; margin-top: 9px !important; }
.chal-mini-i {
  width: 30px !important; height: 30px !important;
  border: 2px solid var(--rc, rgba(214,170,96,0.55)) !important; border-radius: 2px !important;
  background: rgba(0,0,0,0.55) !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--rc, #c9a25c) 45%, transparent);
}
.chal-mini-i.r-common    { --rc: #ece2cf; } .chal-mini-i.r-uncommon  { --rc: #8ff59c; }
.chal-mini-i.r-rare      { --rc: #8fd0ff; } .chal-mini-i.r-epic      { --rc: #dcaaff; }
.chal-mini-i.r-legendary { --rc: #ffd36a; } .chal-mini-i.r-artifact  { --rc: #ff6e6e; }
.chal-mini-t { font-size: 10px !important; color: #ffe39a !important; }
.chal-scroll { width: 66px !important; padding: 7px 3px 6px !important; }
.chal-scroll img { width: 40px !important; height: 40px !important; }
.chal-scroll-n { font-size: 11px !important; color: #f1e4c8 !important; }
.chal-scroll-c { font-size: 12px !important; color: #ffe08a !important; text-shadow: 0 0 6px rgba(242,194,69,0.7), 0 1px 2px #000; }
.chal-note { font-size: 14px !important; color: #e6d6b4 !important; }
.chal-actions { background: rgba(0,0,0,0.5) !important; }
.chal-actions .tr-btn, .chal-actions .chal-cancel { min-width: 150px !important; font-size: 14px !important; padding: 12px 26px !important; }
.chal-tile-n { white-space: normal !important; overflow: visible !important; line-height: 1.2; }
.chal-tile.has-ico .chal-tile-n { font-size: 15px !important; }

/* ── DOLADENIE 5: predmety v inventári a na bábke jasnejšie ──
   Stred slotu dostane teplý svit vo farbe rarity namiesto tmavého
   vnútorného tieňa a samotné ikony sa mierne presvetlia. */
#screen-equipment .equip-slot.filled::before,
#screen-equipment .inv-item::before {
  box-shadow: none !important;
  background: radial-gradient(ellipse at 50% 45%,
              color-mix(in srgb, var(--rar, #c9a25c) 30%, rgba(255,226,160,0.10)) 0%,
              rgba(255,226,160,0.06) 55%, transparent 80%);
}
#screen-equipment .equip-slot.filled img,
#screen-equipment .inv-item img,
.inspect-slot img, .ip-thumb img, #screen-vendor .vd-icon img, #market-body .mk-card img,
#screens .eslot-img, #screens .inv-img-m {
  filter: brightness(1.18) contrast(1.06) saturate(1.08) drop-shadow(0 2px 3px rgba(0,0,0,0.7));
}
/* Kus, na ktorý nie je Power, už nie je stlmený — označuje ho šrafovanie
   a červené číslo Power. */
#screen-equipment .inv-item.unaffordable { opacity: 1; }
#screen-equipment .inv-item.unaffordable::after { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,0.12) 6px 12px); }

/* ── Ľavé menu: položky ako kovové tlačidlá ──
   Každá položka má vlastnú tmavú dosku s jemnou hranou; pod myšou sa
   rozsvieti zlatom, aktívna ostáva na železnej plakete so svitom. */
#nav-items { gap: 5px !important; padding: 6px 8px !important; }
.nav-item {
  border-radius: 2px !important;
  background:
    linear-gradient(180deg, rgba(255,226,160,0.07) 0%, transparent 40%),
    linear-gradient(180deg, #2a2016 0%, #1a140d 50%, #100b07 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,226,160,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.75),
    0 3px 7px rgba(0,0,0,0.55) !important;
  transition: transform .12s, box-shadow .12s, background .12s, color .12s !important;
}
.nav-item::before { display: none !important; }
.nav-item .nav-icon { opacity: 1; color: #d9b46a; filter: drop-shadow(0 1px 2px #000); }
.nav-item:hover {
  transform: translateX(3px);
  color: var(--sk-gold-hi) !important;
  background:
    linear-gradient(180deg, rgba(255,226,160,0.12) 0%, transparent 45%),
    linear-gradient(180deg, #3d2d19 0%, #261c10 50%, #150f08 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,226,160,0.25),
    inset 3px 0 0 var(--sk-gold),
    0 0 0 1px rgba(242,194,69,0.45),
    0 0 14px rgba(242,194,69,0.25),
    0 3px 8px rgba(0,0,0,0.6) !important;
}
.nav-item:hover .nav-icon { color: var(--sk-gold-hi); filter: drop-shadow(0 0 6px rgba(242,194,69,0.7)); }
.nav-item.active {
  background: none !important;
  box-shadow: 0 0 16px rgba(242,194,69,0.30) !important;
}
.nav-item.active:hover { transform: none; }
.nav-item:active { transform: translateY(1px); }
#nav-items { gap: 3px !important; }
@media (min-height: 1001px) { .nav-item { padding-top: clamp(8px, 1.15vh, 13px) !important; padding-bottom: clamp(8px, 1.15vh, 13px) !important; } }

/* ── DOLADENIE 6: ľavé menu — každá položka na železnej plakete ──
   Neaktívna: biele písmo. Aktívna: zlaté písmo so svitom (podľa
   screenshotu). Kovové dosky z doladenia 5 sa rušia. */
.nav-item, .nav-item:hover, .nav-item.active {
  transform: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-image: url('plate_small.webp?v=15') 26 64 fill / 10px 26px stretch !important;
}
.nav-item { color: #ffffff !important; text-shadow: 0 1px 2px #000 !important; }
.nav-item .nav-icon { color: #ffffff !important; filter: drop-shadow(0 1px 2px #000) !important; }
.nav-item:hover { filter: brightness(1.18); }
.nav-item.active { color: var(--sk-gold-hi) !important; text-shadow: 0 1px 2px #000, 0 0 12px rgba(242,194,69,0.5) !important; }
.nav-item.active .nav-icon { color: var(--sk-gold) !important; filter: drop-shadow(0 0 4px rgba(242,194,69,0.6)) !important; }
.nav-item:active { filter: brightness(0.92); }
/* Plakety vyššie a nalepené na seba (bez medzier). */
#nav-items { gap: 0 !important; }
.nav-item { padding-top: clamp(10px, 1.45vh, 15px) !important; padding-bottom: clamp(10px, 1.45vh, 15px) !important; }
@media (max-height: 1000px) { .nav-item { padding-top: 12px !important; padding-bottom: 12px !important; } }
@media (max-height: 800px) { .nav-item { padding-top: 8px !important; padding-bottom: 8px !important; } }
@media (max-height: 660px) { .nav-item { padding-top: 6px !important; padding-bottom: 6px !important; } }
/* Plaketa má nad a pod lištou priehľadný okraj — položky sa prekryjú,
   aby lišty sedeli tesne na sebe. */
.nav-item + .nav-item { margin-top: -9px !important; }
.nav-item:hover, .nav-item.active { z-index: 1; }
.nav-item { padding-top: clamp(13px, 1.55vh, 16px) !important; padding-bottom: clamp(13px, 1.55vh, 16px) !important; }
@media (max-height: 1000px) { .nav-item { padding-top: 15px !important; padding-bottom: 15px !important; } }
@media (max-height: 800px)  { .nav-item { padding-top: 11px !important; padding-bottom: 11px !important; } }
@media (max-height: 660px)  { .nav-item { padding-top: 8px !important; padding-bottom: 8px !important; } }