/*
  L2 Pixel - interfejs w stylu pixel art.

  Zasady (patrz ui.js i theme.js):
    - jedna jednostka: --u = jeden piksel interfejsu (U/DPR CSS px); kazdy wymiar
      to calc(var(--u) * N) z calkowitym N - krawedzie wypadaja na pelnych
      pikselach urzadzenia, font bitmapowy zostaje ostry,
    - zadnego koloru na sztywno: --ui0..6, --gold0..5, --p-* i reszte liczy
      theme.js z palette.js,
    - zadnych zaokraglen ani rozmyc: obrys 1 px, faza 1 px (box-shadow),
      sciete rogi (clip-path), polprzezroczystosc tylko ditheringiem.
*/

.pxui {
  --ol4: var(--u) 0 0 var(--ui0), calc(var(--u) * -1) 0 0 var(--ui0),
         0 var(--u) 0 var(--ui0), 0 calc(var(--u) * -1) 0 var(--ui0);
  --ol8: var(--ol4), var(--u) var(--u) 0 var(--ui0), calc(var(--u) * -1) var(--u) 0 var(--ui0),
         var(--u) calc(var(--u) * -1) 0 var(--ui0), calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--ui0);
  --bevel: inset var(--u) var(--u) 0 0 var(--ui4), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 0 var(--ui1);
  --bevel-hi: inset var(--u) var(--u) 0 0 var(--ui5), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 0 var(--ui1);
  --sunken: inset var(--u) var(--u) 0 0 var(--ui0), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 0 var(--ui3);
  /* Sciete rogi: brakuje dokladnie jednego piksela w kazdym rogu (schodek, nie skos). */
  --cut: polygon(
    var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u),
    100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%,
    var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)), 0 var(--u), var(--u) var(--u));

  font-family: "L2Pixel", monospace;
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 12);
  font-weight: normal;
  font-synthesis: none;
  font-kerning: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
  color: var(--p-text-light);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.pxui *, .pxui *::before, .pxui *::after { box-sizing: border-box; }
.pxui [hidden] { display: none !important; }

/* Do czasu wczytania fontu (max 2,5 s) nie pokazujemy tekstu monospace. */
.pxui.font-wait .layer { visibility: hidden; }
.pxui.nofont { font-size: calc(var(--u) * 9); }
.pxui.nosmall .sm { font-family: monospace; font-size: calc(var(--u) * 6); }

.pxui.dragging, .pxui.dragging * { cursor: grabbing !important; }

/* ------------------------------------------------------------ warstwy */

/* Kazda warstwa to osobny kontekst nakladania: z-index okna wyciagnietego na wierzch
   liczy sie tylko wsrod okien, a menu, podpowiedzi i przeciagana ikona (warstwy
   wyzej w DOM) zawsze leza nad nimi. */
.pxui .layer { position: absolute; inset: 0; pointer-events: none; isolation: isolate; }
.pxui.lobby .hud-layer { display: none; }

.pxui .hud, .pxui .win, .pxui .popup, .pxui .tip, .pxui .ghost {
  position: absolute;
  left: calc(var(--u) * var(--x, 0));
  top: calc(var(--u) * var(--y, 0));
}
.pxui .hud {
  width: calc(var(--u) * var(--w, 0));
  height: calc(var(--u) * var(--h, 0));
  pointer-events: auto;
}

/* ------------------------------------------------------- podstawy */

.pxui .panel {
  background-color: var(--ui2);
  border: var(--u) solid var(--ui0);
  box-shadow: var(--bevel);
  clip-path: var(--cut);
}
.pxui .ornate::after {
  content: "";
  position: absolute;
  inset: calc(var(--u) * -1);
  pointer-events: none;
  background:
    var(--img-corner-tl) left top / calc(var(--u) * 5) calc(var(--u) * 5) no-repeat,
    var(--img-corner-tr) right top / calc(var(--u) * 5) calc(var(--u) * 5) no-repeat,
    var(--img-corner-bl) left bottom / calc(var(--u) * 5) calc(var(--u) * 5) no-repeat,
    var(--img-corner-br) right bottom / calc(var(--u) * 5) calc(var(--u) * 5) no-repeat;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.pxui .sm {
  font-family: "L2PixelSmall", "L2Pixel", monospace;
  font-size: calc(var(--u) * 6);
  line-height: calc(var(--u) * 5);
}
.pxui .ol { text-shadow: var(--ol4); }
.pxui .sm.ol { text-shadow: var(--ol8); }
.pxui .dim { color: var(--p-text-dim); }
.pxui .gold { color: var(--gold4); }
.pxui .good { color: var(--p-text-good); }
.pxui .bad { color: var(--p-text-bad); }
.pxui .warn { color: var(--p-text-warn); }

.pxui canvas.px {
  display: block;
  width: calc(var(--u) * var(--iw, 16));
  height: calc(var(--u) * var(--ih, 16));
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.pxui button {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  text-align: inherit;
}
.pxui button:focus-visible { outline: var(--u) solid var(--gold4); outline-offset: 0; }

.pxui .btn {
  position: relative;
  display: inline-block;
  height: calc(var(--u) * 14);
  padding: 0 calc(var(--u) * 5);
  line-height: calc(var(--u) * 12);
  background: var(--ui3);
  border: var(--u) solid var(--ui0);
  box-shadow: var(--bevel-hi);
  clip-path: var(--cut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.pxui .btn:hover { background: var(--ui4); }
.pxui .btn:active { background: var(--ui2); box-shadow: var(--sunken); }
.pxui .btn.on {
  background: var(--ui1);
  color: var(--gold5);
  box-shadow: inset 0 0 0 var(--u) var(--gold2);
}
.pxui .btn:disabled { color: var(--ui5); background: var(--ui2); cursor: default; }
.pxui .btn.gold {
  background: var(--gold3);
  color: var(--ui0);
  box-shadow: inset var(--u) var(--u) 0 0 var(--gold5), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 0 var(--gold1);
}
.pxui .btn.gold:hover { background: var(--gold4); }
.pxui .btn.gold:active { background: var(--gold2); box-shadow: inset var(--u) var(--u) 0 0 var(--gold1); }

.pxui .ibtn { position: relative; display: block; flex: none; }
.pxui .ibtn canvas.px {
  position: absolute;
  left: calc(var(--u) * var(--ox, 0));
  top: calc(var(--u) * var(--oy, 0));
}
.pxui .ibtn:hover canvas.px { filter: brightness(1.35); }

.pxui input[type="text"], .pxui input[type="password"], .pxui input[type="number"], .pxui select, .pxui textarea {
  font: inherit;
  color: var(--p-text-light);
  background: var(--ui0);
  border: var(--u) solid var(--ui0);
  box-shadow: inset var(--u) var(--u) 0 0 var(--ui1), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 0 var(--ui3);
  height: calc(var(--u) * 14);
  padding: 0 calc(var(--u) * 3);
  line-height: calc(var(--u) * 12);
  border-radius: 0;
  outline: none;
  margin: 0;
  caret-color: var(--gold4);
  pointer-events: auto;
  -webkit-user-select: text;
  user-select: text;
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
}
.pxui select {
  padding-right: calc(var(--u) * 11);
  background-image: var(--img-caret);
  background-repeat: no-repeat;
  background-position: right calc(var(--u) * 3) center;
  background-size: calc(var(--u) * 7) calc(var(--u) * 5);
  image-rendering: pixelated;
  cursor: pointer;
}
.pxui textarea { height: auto; padding: var(--u) calc(var(--u) * 3); resize: none; }
.pxui input[type="text"]:focus, .pxui input[type="password"]:focus, .pxui input[type="number"]:focus, .pxui select:focus, .pxui textarea:focus { border-color: var(--gold3); }
.pxui input:disabled { color: var(--ui5); }
.pxui ::placeholder { color: var(--ui5); opacity: 1; }

/* Przewijanie - kwadratowy suwak w kolorach paneli. */
.pxui ::-webkit-scrollbar { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.pxui ::-webkit-scrollbar-track { background: var(--ui1); }
.pxui ::-webkit-scrollbar-thumb { background: var(--ui4); border: var(--u) solid var(--ui1); }
.pxui ::-webkit-scrollbar-thumb:hover { background: var(--ui5); }
.pxui ::-webkit-scrollbar-button, .pxui ::-webkit-scrollbar-corner { display: none; background: none; }
@supports not selector(::-webkit-scrollbar) {
  .pxui * { scrollbar-width: thin; scrollbar-color: var(--ui4) var(--ui1); }
}

/* ------------------------------------------------------------ paski */

.pxui .bar {
  position: relative;
  flex: none;
  width: calc(var(--u) * (var(--inner) + 2));
  height: calc(var(--u) * 11);
  background: var(--bar-bg);
  border: var(--u) solid var(--ui0);
  overflow: hidden;
  white-space: nowrap;
}
.pxui .bar .fill, .pxui .bar .trail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.pxui .bar .fill {
  width: calc(var(--u) * var(--fill, 0));
  background: linear-gradient(to bottom,
    var(--bar-hi) 0 var(--u), var(--bar) var(--u) calc(100% - var(--u)), var(--bar-lo) calc(100% - var(--u)));
}
.pxui .bar .trail {
  width: calc(var(--u) * var(--trail, 0));
  background: var(--trail);
  transition: width 0.45s steps(5, end) 0.35s;
}
/* Wnetrze ma 9 px: przy line-height 9 cyfry (7 px nad linia bazowa) leza w wierszach 1-7. */
.pxui .bar .lbl, .pxui .bar .val {
  position: absolute;
  top: 0;
  line-height: calc(var(--u) * 9);
}
.pxui .bar .lbl { left: calc(var(--u) * 2); color: var(--p-text-light); }
.pxui .bar .val { right: calc(var(--u) * 2); }
.pxui .bar.thin { height: calc(var(--u) * 5); }
.pxui .bar-hp { --bar-bg: var(--hp-bg); --bar: var(--hp); --bar-hi: var(--hp-hi); --bar-lo: var(--hp-lo); }
.pxui .bar-mp { --bar-bg: var(--mp-bg); --bar: var(--mp); --bar-hi: var(--mp-hi); --bar-lo: var(--mp-lo); }
.pxui .bar-cp { --bar-bg: var(--cp-bg); --bar: var(--cp); --bar-hi: var(--cp-hi); --bar-lo: var(--cp-lo); }
.pxui .bar-exp { --bar-bg: var(--exp-bg); --bar: var(--exp); --bar-hi: var(--exp-hi); --bar-lo: var(--exp-lo); }
.pxui .bar-cast { --bar-bg: var(--cast-bg); --bar: var(--cast); --bar-hi: var(--cast-hi); --bar-lo: var(--cast-lo); }
.pxui .bar-weight { --bar-bg: var(--weight-bg); --bar: var(--weight); --bar-hi: var(--weight-hi); --bar-lo: var(--weight-lo); }
.pxui .bar-weight.heavy { --bar-bg: var(--heavy-bg); --bar: var(--heavy); --bar-hi: var(--heavy-hi); --bar-lo: var(--heavy-lo); }

/* --------------------------------------------- ramki postaci i celu */

.pxui .frame .row {
  position: absolute;
  left: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  height: calc(var(--u) * 12);
  display: flex;
  gap: calc(var(--u) * 3);
  white-space: nowrap;
}
.pxui .frame .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pxui .frame .vitals {
  position: absolute;
  left: calc(var(--u) * 3);
  display: flex;
  flex-direction: column;
  gap: var(--u);
}
.pxui .self .r1 { top: calc(var(--u) * 3); }
.pxui .self .r2 { top: calc(var(--u) * 15); }
.pxui .self .vitals { top: calc(var(--u) * 28); }
.pxui .self .lvl {
  flex: none;
  padding: 0 calc(var(--u) * 2);
  color: var(--gold5);
  background: var(--ui1);
  box-shadow: inset 0 0 0 var(--u) var(--gold1);
}
.pxui .self .cls { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pxui .self .exp-row {
  position: absolute;
  left: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  top: calc(var(--u) * 65);
  height: calc(var(--u) * 6);
  display: flex;
  gap: calc(var(--u) * 3);
}
.pxui .self .exp-val { flex: 1; text-align: right; color: var(--p-text-dim); }
.pxui .self .flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--u) var(--hp-hi), inset 0 0 0 calc(var(--u) * 2) var(--hp);
}
.pxui .self .flash[data-kind="levelup"] {
  box-shadow: inset 0 0 0 var(--u) var(--gold5), inset 0 0 0 calc(var(--u) * 2) var(--gold3);
}

.pxui .target .r1 { top: calc(var(--u) * 3); }
.pxui .target .vitals { top: calc(var(--u) * 16); }
.pxui .target .r3 { top: calc(var(--u) * 28); justify-content: space-between; }
.pxui .target .mark {
  flex: none;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  margin: calc(var(--u) * 3) 0 0 var(--u);
  background: var(--tone, var(--p-npc));
  box-shadow: 0 0 0 var(--u) var(--ui0);
}
.pxui .target .name { color: var(--tone, var(--p-npc)); }
.pxui .target[data-tone="hostile"] { --tone: var(--p-hostile); }
.pxui .target[data-tone="npc"] { --tone: var(--p-npc); }
.pxui .target[data-tone="player"] { --tone: var(--p-player); }
.pxui .target[data-tone="self"] { --tone: var(--p-white); }
.pxui .target.dead .name { color: var(--p-text-dim); }
.pxui .target.dead .mark { background: var(--ui5); }
.pxui .target .lvl-t, .pxui .target .tstate { flex: none; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

/* ---------------------------------------------------------- efekty */

.pxui .effects {
  display: grid;
  grid-template-columns: repeat(var(--per-row, 8), calc(var(--u) * 16));
  grid-auto-rows: calc(var(--u) * 20);
  gap: var(--u);
  align-content: start;
  pointer-events: none;
}
.pxui .fx { position: relative; pointer-events: auto; }
.pxui .fx::before {
  content: "";
  position: absolute;
  left: var(--u);
  top: 0;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  background: var(--ui1);
  box-shadow: inset 0 0 0 var(--u) var(--ui0);
}
.pxui .fx.debuff::before { box-shadow: inset 0 0 0 var(--u) var(--hp-lo); }
.pxui .fx.toggle::before { box-shadow: inset 0 0 0 var(--u) var(--gold2); }
.pxui .fx canvas.px { position: absolute; left: calc(var(--u) * 2); top: var(--u); }
.pxui .fx .fx-time {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 15);
  text-align: center;
  color: var(--p-text-light);
}
.pxui .fx.ending canvas.px { animation: pxblink 0.8s steps(1, end) infinite; }
@keyframes pxblink { 50% { opacity: 0.25; } }

/* ------------------------------------------------- pasek skrotow */

.pxui .hotbar {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
}
.pxui .pager {
  position: relative;
  flex: none;
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 18);
}
.pxui .pg-btn { width: calc(var(--u) * 10); height: calc(var(--u) * 6); }
.pxui .pg-btn canvas.px { position: absolute; left: var(--u); top: 0; }
.pxui .pg-no {
  display: block;
  height: calc(var(--u) * 6);
  padding-top: var(--u);
  text-align: center;
  color: var(--gold4);
}
.pxui .slots, .pxui .tools {
  display: grid;
  grid-auto-rows: calc(var(--u) * 18);
  gap: var(--u);
}
.pxui .slots { grid-template-columns: repeat(var(--per-row, 12), calc(var(--u) * 18)); }
.pxui .tools { grid-template-columns: repeat(3, calc(var(--u) * 18)); }
.pxui .hotbar.rows-2 .tools { grid-template-columns: repeat(2, calc(var(--u) * 18)); }

.pxui .slot {
  position: relative;
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  background: var(--ui1);
  border: var(--u) solid var(--ui0);
  box-shadow: var(--sunken);
  cursor: pointer;
  touch-action: none;
}
.pxui .slot:hover { border-color: var(--gold2); }
.pxui .slot.drop-over { border-color: var(--gold4); background: var(--ui3); }
.pxui .slot .ico, .pxui .slot .cd { position: absolute; left: 0; top: 0; }
.pxui .slot .key { position: absolute; left: 0; top: 0; color: var(--p-text-dim); }
.pxui .slot .cnt { position: absolute; right: 0; bottom: 0; color: var(--p-text-light); }
.pxui .slot .enc { position: absolute; right: 0; top: 0; color: var(--gold5); }
.pxui .slot .cdt {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 5);
  text-align: center;
  color: var(--gold5);
}
.pxui .slot.empty .key { color: var(--ui5); }
.pxui .slot.active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--u) var(--gold4);
}
.pxui .slot.off .ico, .pxui .slot.dead .ico { filter: grayscale(1) brightness(0.55); }
.pxui .slot.dead .key { color: var(--ui5); }
.pxui .slot.lifted .ico { opacity: 0.3; }
.pxui .slot.tool { background: var(--ui3); box-shadow: var(--bevel-hi); }
.pxui .slot.tool:hover { background: var(--ui4); border-color: var(--ui0); }
.pxui .slot.tool:active { box-shadow: var(--sunken); background: var(--ui2); }
.pxui .slot.tool canvas.px {
  position: absolute;
  left: calc(var(--u) * var(--ox, 0));
  top: calc(var(--u) * var(--oy, 0));
}

.pxui .castbar { pointer-events: none; }
.pxui .castbar .lbl { color: var(--p-text-light); }
.pxui .castbar .val { color: var(--gold5); }
.pxui .bar-hint {
  padding: 0 calc(var(--u) * 4);
  color: var(--p-text-dim);
  pointer-events: none;
}

/* ------------------------------------------------------------ czat */

.pxui .chat {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3);
  background-color: transparent;
  background-image: var(--img-dither);
  background-size: calc(var(--u) * 2) calc(var(--u) * 2);
  image-rendering: pixelated;
  box-shadow: none;
}
.pxui .chat.typing { background-color: var(--ui1); }
.pxui .chat-grip {
  position: absolute;
  right: var(--u);
  top: var(--u);
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  cursor: ns-resize;
  touch-action: none;
  opacity: 0.6;
}
.pxui .chat-grip:hover { opacity: 1; }
.pxui .chat-log {
  height: calc(var(--u) * var(--log, 72));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--u);
  overflow-wrap: anywhere;
  text-shadow: var(--ol4);
  -webkit-user-select: text;
  user-select: text;
}
.pxui .ln { min-height: calc(var(--u) * 12); }
.pxui .ln .tag { color: inherit; }
.pxui .ln.ch-all { color: var(--ch-all); }
.pxui .ln.ch-shout, .pxui .ch-shout { color: var(--ch-shout); }
.pxui .ln.ch-tell, .pxui .ch-tell { color: var(--ch-tell); }
.pxui .ln.ch-party, .pxui .ch-party { color: var(--ch-party); }
.pxui .ln.ch-clan, .pxui .ch-clan { color: var(--ch-clan); }
.pxui .ln.ch-ally, .pxui .ch-ally { color: var(--ch-ally); }
.pxui .ln.ch-trade, .pxui .ch-trade { color: var(--ch-trade); }
.pxui .ln.ch-hero, .pxui .ch-hero { color: var(--ch-hero); }
.pxui .ln.ch-announce, .pxui .ch-announce { color: var(--ch-announce); }
.pxui .ln.ch-other { color: var(--ch-other); }
.pxui .ln.k-sys { color: var(--ch-sys); }
.pxui .ln.k-err { color: var(--ch-err); }
.pxui .ln.k-loot { color: var(--ch-loot); }
.pxui .chat-unread {
  position: absolute;
  right: calc(var(--u) * 8);
  bottom: calc(var(--u) * 21);
  padding: var(--u) calc(var(--u) * 2);
  background: var(--gold2);
  color: var(--gold5);
  box-shadow: 0 0 0 var(--u) var(--ui0);
}
.pxui .chat-form { display: flex; gap: calc(var(--u) * 2); height: calc(var(--u) * 14); }
.pxui .chat-chan { flex: none; min-width: calc(var(--u) * 40); padding: 0 calc(var(--u) * 3); }
.pxui .chat-chan[data-tone="all"] { color: var(--ch-all); }
.pxui .chat-chan[data-tone="shout"] { color: var(--ch-shout); }
.pxui .chat-chan[data-tone="trade"] { color: var(--ch-trade); }
.pxui .chat-chan[data-tone="party"] { color: var(--ch-party); }
.pxui .chat-chan[data-tone="clan"] { color: var(--ch-clan); }
.pxui .chat-chan[data-tone="ally"] { color: var(--ch-ally); }
.pxui .chat-chan[data-tone="hero"] { color: var(--ch-hero); }
.pxui .chat-input { flex: 1; min-width: 0; }

.pxui .respawn-options { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.pxui .respawn-options .btn { white-space: normal; }
.pxui .revive-actions { display: flex; gap: calc(6 * var(--u)); }

/* -------------------------------------------- minimapa i status */

.pxui .minimap { background: var(--ui0); box-shadow: none; }
.pxui .minimap canvas.map { position: absolute; left: 0; top: 0; }
.pxui .minimap .coords {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 2);
  text-align: center;
  color: var(--p-text-light);
  pointer-events: none;
}
.pxui .map-zoom {
  position: absolute;
  left: var(--u);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  background: var(--ui2);
  box-shadow: 0 0 0 var(--u) var(--ui0), var(--bevel-hi);
}
.pxui .map-zoom.in { top: var(--u); }
.pxui .map-zoom.out { top: calc(var(--u) * 11); }
.pxui .map-zoom canvas.px {
  position: absolute;
  left: var(--u);
  top: calc(var(--u) * (9 - var(--ih)) / 2);
}
.pxui .status {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  padding: 0 calc(var(--u) * 3);
  white-space: nowrap;
  overflow: hidden;
}
.pxui .status .dot {
  flex: none;
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  background: var(--tone);
  box-shadow: 0 0 0 var(--u) var(--ui0);
}
.pxui .status[data-tone="good"] { --tone: var(--p-text-good); }
.pxui .status[data-tone="warn"] { --tone: var(--p-text-warn); }
.pxui .status[data-tone="bad"] { --tone: var(--p-text-bad); }
.pxui .status .conn-text { color: var(--p-text-dim); }

/* ------------------------------------------------------------ okna */

.pxui .win {
  display: flex;
  flex-direction: column;
  width: calc(var(--u) * var(--w));
  max-height: calc(var(--u) * var(--maxh, 200));
  padding: var(--u);
  pointer-events: auto;
}
.pxui .win-head {
  position: relative;
  flex: none;
  height: calc(var(--u) * 14);
  padding: var(--u) calc(var(--u) * 16) var(--u) calc(var(--u) * 4);
  background: var(--ui3);
  border-bottom: var(--u) solid var(--ui0);
  cursor: grab;
  touch-action: none;
}
.pxui .win-title {
  display: block;
  color: var(--gold4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pxui .win-close {
  position: absolute;
  right: calc(var(--u) * 2);
  top: var(--u);
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
}
.pxui .win-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(var(--u) * 3);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pxui .win-hint { margin-bottom: calc(var(--u) * 2); }
.pxui .group {
  margin: calc(var(--u) * 3) 0 var(--u);
  padding-bottom: var(--u);
  border-bottom: var(--u) solid var(--ui1);
}
.pxui .group:first-child { margin-top: 0; }
.pxui .pad { padding: calc(var(--u) * 3) 0; }

/* Rozmowa z NPC - podzbior HTML z L2 przepisany na wlasne elementy. */
.pxui .l2 { overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.pxui .l2-link { color: var(--gold4); text-decoration: none; cursor: pointer; pointer-events: auto; }
.pxui .l2-link:hover {
  color: var(--gold5);
  text-decoration: underline;
  text-decoration-thickness: var(--u);
  text-underline-offset: var(--u);
}
.pxui .l2-dead {
  color: var(--ui5);
  text-decoration: line-through;
  text-decoration-thickness: var(--u);
}
.pxui .l2-btn { margin: var(--u) 0; max-width: 100%; text-align: center; }
.pxui .l2-level { color: var(--gold4); }
.pxui .l2-center { text-align: center; }
.pxui .l2-table { border-collapse: collapse; border-spacing: 0; max-width: 100%; }
.pxui .l2-table td, .pxui .l2-table th { padding: 0 var(--u); vertical-align: middle; font-weight: normal; }
.pxui .l2-center .l2-table { margin: 0 auto; }
.pxui .l2-sep { height: var(--u); margin: calc(var(--u) * 2) 0; max-width: 100%; }
.pxui .l2-center .l2-sep { margin-left: auto; margin-right: auto; }
.pxui .l2-sep.white { background: var(--ui6); }
.pxui .l2-sep.gray { background: var(--ui4); }
.pxui .l2-b { color: var(--p-white); }
.pxui .l2-i { color: var(--p-text-dim); }
.pxui .l2-u { text-decoration: underline; text-decoration-thickness: var(--u); }
.pxui .l2-p { margin: calc(var(--u) * 3) 0; }
.pxui .l2-edit { width: calc(var(--u) * 80); }
.pxui .l2-combo { width: calc(var(--u) * 80); }

/* Ekwipunek */
.pxui .inv-top { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 3); }
.pxui .inv-refresh {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  background: var(--ui3);
  border: var(--u) solid var(--ui0);
  box-shadow: var(--bevel-hi);
}
.pxui .inv-refresh:active { box-shadow: var(--sunken); }
.pxui .inv-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), calc(var(--u) * 18));
  grid-auto-rows: calc(var(--u) * 18);
  gap: var(--u);
  max-height: calc(var(--u) * 113);
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
}
.pxui .slot.item { touch-action: pan-y; }
.pxui .slot.item.equipped::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--u) var(--gold3);
}
.pxui .slot.item.selected { border-color: var(--gold5); }
.pxui .inv-empty { grid-column: 1 / -1; padding: calc(var(--u) * 6) 0; }
.pxui .inv-foot { margin-top: calc(var(--u) * 3); }
.pxui .inv-info { min-height: calc(var(--u) * 24); overflow-wrap: anywhere; }

/* Skille */
.pxui .skill-list { display: flex; flex-direction: column; }
.pxui .skill-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  height: calc(var(--u) * 18);
  padding: var(--u);
  cursor: pointer;
  white-space: nowrap;
  touch-action: pan-y;
}
.pxui .skill-row:hover { background: var(--ui3); }
.pxui .skill-row .ico { flex: none; }
.pxui .skill-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pxui .skill-row .meta { flex: none; }
.pxui .skill-row.passive { cursor: default; }
.pxui .skill-row.passive:hover { background: none; }
.pxui .skill-row.passive .ico { filter: grayscale(0.7) brightness(0.75); }
.pxui .skill-row.passive .nm { color: var(--p-text-dim); }
.pxui .skill-row.disabled .ico { filter: grayscale(1) brightness(0.55); }
.pxui .skill-row.on .meta { color: var(--p-text-good); }
.pxui .skill-row.lifted { opacity: 0.4; }

/* Ustawienia */
.pxui .set-label { margin-bottom: var(--u); }
.pxui .seg-row { display: flex; flex-wrap: wrap; gap: var(--u); }
.pxui .btn.seg { min-width: calc(var(--u) * 16); padding: 0 calc(var(--u) * 4); }
.pxui .btn.seg canvas.px { margin-top: calc(var(--u) * (12 - var(--ih)) / 2); }
.pxui .set-note { margin-top: calc(var(--u) * 2); }
.pxui .set-sep { height: var(--u); margin: calc(var(--u) * 4) 0; background: var(--ui1); }
.pxui .set-row { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.pxui .set-row .set-label { flex: 1; margin: 0; }
.pxui .set-val { min-width: calc(var(--u) * 40); }
.pxui .check {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  width: 100%;
  height: calc(var(--u) * 14);
}
.pxui .check .box {
  position: relative;
  flex: none;
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  background: var(--ui0);
  box-shadow: inset 0 0 0 var(--u) var(--ui4);
}
.pxui .check .box canvas.px { position: absolute; left: var(--u); top: var(--u); visibility: hidden; }
.pxui .check.on .box canvas.px { visibility: visible; }
.pxui .check:hover .box { box-shadow: inset 0 0 0 var(--u) var(--gold3); }

/* Pomoc */
.pxui .help-row { display: flex; gap: calc(var(--u) * 4); padding: var(--u) 0; }
.pxui .help-row .keys { flex: none; width: calc(var(--u) * 72); display: flex; flex-wrap: wrap; gap: var(--u); }
.pxui .help-row .help-text { flex: 1; min-width: 0; color: var(--p-text-light); }
.pxui kbd {
  font: inherit;
  display: inline-block;
  height: calc(var(--u) * 14);
  padding: 0 calc(var(--u) * 3);
  line-height: calc(var(--u) * 12);
  color: var(--gold5);
  background: var(--ui3);
  border: var(--u) solid var(--ui0);
  box-shadow: var(--bevel-hi);
  white-space: nowrap;
}

/* --------------------------------------------- menu i podpowiedzi */

.pxui .popup { pointer-events: auto; padding: calc(var(--u) * 2); z-index: 5; }
.pxui .menu { width: calc(var(--u) * var(--w, 112)); }
.pxui .menu-item {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  width: 100%;
  height: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 3);
  white-space: nowrap;
}
.pxui .menu-item:hover { background: var(--ui3); }
.pxui .menu-item.on { color: var(--gold5); }
.pxui .menu-item.danger { color: var(--p-text-bad); }
.pxui .menu-item.armed { background: var(--hp-bg); color: var(--p-white); }
.pxui .menu-sep { height: var(--u); margin: var(--u) 0; background: var(--ui4); }
.pxui .chan-menu { width: calc(var(--u) * 64); }

.pxui .tip {
  z-index: 20;
  max-width: calc(var(--u) * 168);
  padding: var(--u) calc(var(--u) * 4) calc(var(--u) * 2);
  pointer-events: none;
}
.pxui .tip-title { color: var(--gold5); }
.pxui .tip-line { color: var(--p-text-light); }
.pxui .tip-note { margin-top: var(--u); }
.pxui .tip-note.warn { color: var(--p-text-warn); }
.pxui .tip-note.bad { color: var(--p-text-bad); }

.pxui .ghost {
  z-index: 30;
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  background: var(--ui1);
  border: var(--u) solid var(--gold4);
  pointer-events: none;
}

/* ------------------------------------------- ekran wyboru postaci */

.pxui .charscreen {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  overflow-y: auto;
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 24);
  background:
    var(--img-backdrop) left bottom / calc(var(--u) * 320) calc(var(--u) * 120) repeat-x,
    var(--ui0);
  image-rendering: pixelated;
}
.pxui .cs-panel {
  position: relative;
  width: calc(var(--u) * min(260, var(--vw) - 8));
  /* Srodek liczony w calych pikselach interfejsu (round), z zapasem dla starszych przegladarek. */
  margin-left: calc(var(--u) * max(4, (var(--vw) - 260) / 2));
  margin-left: calc(var(--u) * max(4, round(down, (var(--vw) - 260) / 2, 1)));
  padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 5);
}
.pxui .cs-title {
  font-size: calc(var(--u) * 24);
  line-height: calc(var(--u) * 24);
  color: var(--gold4);
  text-shadow: 0 calc(var(--u) * 2) 0 var(--gold1);
  margin-bottom: calc(var(--u) * 4);
}
.pxui .cs-head { margin: calc(var(--u) * 2) 0 calc(var(--u) * 3); }
.pxui .cs-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 2);
  background: var(--ui1);
  box-shadow: var(--sunken);
}
.pxui .cs-who { flex: 1; min-width: 0; }
.pxui .cs-who > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxui .cs-empty { padding: calc(var(--u) * 4) 0; }
.pxui .cs-form { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.pxui .cs-name { width: 100%; }
.pxui .cs-classes {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(var(--u) * 80));
  gap: var(--u);
}
.pxui .cs-classes .btn { width: calc(var(--u) * 80); padding: 0 calc(var(--u) * 3); }
.pxui .cs-create { align-self: flex-start; }
.pxui .cs-msg { margin-top: calc(var(--u) * 3); min-height: calc(var(--u) * 12); }
.pxui .cs-conn { margin-top: calc(var(--u) * 2); }
.pxui .cs-logout { margin-top: calc(var(--u) * 5); }
.pxui .login-screen { display: flex; align-items: center; }
.pxui .login-panel { margin-top: auto; margin-bottom: auto; }
.pxui .login-intro { margin: calc(var(--u) * 5) 0 calc(var(--u) * 7); line-height: 1.6; }
.pxui .login-form input { width: 100%; }
.pxui .login-form button { margin-top: calc(var(--u) * 5); }

.pxui .shop-row { display: flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 3) 0; border-bottom: var(--u) solid var(--ui1); }
.pxui .shop-description { flex: 1; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.pxui .shop-quantity { width: calc(var(--u) * 40); min-width: 0; }
.pxui .shop-row .ico { flex: none; }
.pxui .shop-total, .pxui .shop-money, .pxui .shop-hint { margin: calc(var(--u) * 4) 0; }
.pxui .shop-submit { width: 100%; }
.pxui .multisell-list { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.pxui .multisell-entry { text-align: left; white-space: normal; }
.pxui .multisell-entry.selected { color: var(--gold3); }
.pxui .multisell-details p { margin: calc(var(--u) * 4) 0; }
.pxui .party-form, .pxui .party-row { display: flex; flex-direction: column; gap: calc(var(--u) * 2); margin: calc(var(--u) * 4) 0; }
.pxui .party-member { text-align: left; }
.pxui .party-member.selected { color: var(--gold3); }
.pxui .party-actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 4); }
.pxui .trade-offers { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); margin: calc(var(--u) * 5) 0; }
.pxui .trade-offers > div { min-width: 0; overflow-wrap: anywhere; }
.pxui .trade-line { padding: calc(var(--u) * 3) 0; border-bottom: var(--u) solid var(--ui1); }
.pxui .trade-form { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); }
.pxui .trade-items { width: 100%; min-width: 0; }
.pxui .trade-quantity { width: calc(var(--u) * 60); }
.pxui .trade-actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); }
.pxui .trade-intro, .pxui .trade-hint, .pxui .trade-own-status, .pxui .trade-other-status { margin: calc(var(--u) * 4) 0; }
.pxui .character-stats, .pxui .character-gear { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
.pxui .character-stats { padding: calc(var(--u) * 4) 0; }
.pxui .equipment-slot { display: flex; align-items: center; height: auto; min-height: calc(var(--u) * 24); text-align: left; white-space: normal; gap: calc(var(--u) * 3); overflow-wrap: anywhere; padding: calc(var(--u) * 3); }
.pxui .equipment-slot .ico, .pxui .shot-row .ico { flex: none; }
.pxui .shot-row { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4) 0; }
.pxui .shot-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pxui .auto-shot::after { content: "AUTO"; position: absolute; top: 0; left: 0; font-size: calc(var(--u) * 6); line-height: calc(var(--u) * 7); color: var(--gold4); background: var(--ui0); pointer-events: none; }
.pxui .enchant-items, .pxui .pet-inventory select { width: 100%; min-width: 0; }
.pxui .member-effects { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); }
.pxui .member-effect { display: flex; flex-direction: column; align-items: center; }
.pxui .pet-actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); margin: calc(var(--u) * 4) 0; }
.pxui .pet-inventory { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.pxui .pet-quantity { width: calc(var(--u) * 60); }
.pxui .character-window p, .pxui .pet-window p { margin: calc(var(--u) * 4) 0; }
.pxui .bot-config { display: grid; gap: calc(var(--u) * 4); }
.pxui .bot-field { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 6); }
.pxui .bot-field input, .pxui .bot-field select { width: calc(var(--u) * 72); }
.pxui .bot-actions { display: flex; gap: calc(var(--u) * 6); margin: calc(var(--u) * 6) 0; }
.pxui .bot-history { padding-left: calc(var(--u) * 12); }
.pxui .bot-history li { margin-bottom: calc(var(--u) * 6); overflow-wrap: anywhere; }
.pxui .bot-reason, .pxui .bot-loadout { overflow-wrap: anywhere; }
.pxui .bot-window p { margin: calc(var(--u) * 4) 0; }
.pxui .bot-badge { position: absolute; pointer-events: auto; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--w)); padding: calc(var(--u) * 2); background: var(--ui1); color: var(--gold4); border: calc(var(--u) * 1) solid var(--gold2); }
.pxui .bot-badge > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxui .bot-compact-state { color: var(--ui6); }
.pxui .trial-badge { position: absolute; pointer-events: auto; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--w)); padding: calc(var(--u) * 3); background: var(--ui0); color: var(--gold4); border: var(--u) solid var(--gold2); text-align: left; }
.pxui .trial-badge > span { display: block; overflow-wrap: anywhere; }
.pxui .trial-badge > span + span { color: var(--ui6); margin-top: calc(var(--u) * 3); }
.pxui .trial-description { margin: calc(var(--u) * 6) 0; overflow-wrap: anywhere; }