/* ==========================================================================
   MMORPG UI — dark fantasy / drewno (premium chrome w premium-ui.css)
   ========================================================================== */

:root {
  --wood-dark: #2a1a0e;
  --wood: #3d2817;
  --wood-mid: #5a3d24;
  --wood-light: #7a5535;
  --wood-highlight: #a07848;
  --parchment: #e8d4a8;
  --parchment-mid: #d4bc8a;
  --parchment-dark: #c4a66e;
  --ink: #2c1c10;
  --ink-muted: #5c4632;
  --ink-faint: #7a6248;
  --gold: #d4a017;
  --gold-bright: #f0c040;
  --gold-dim: #8a6810;
  --panel-bg: #3a2718;
  --panel-inner: #2e1e12;
  --slot-bg: #1e140c;
  --slot-border: #6b4a28;
  --slot-hover: #f0c040;
  --hp: #3d8b3d;
  --hp-dark: #1a3a1a;
  --mana: #3a5a9a;
  --mana-dark: #1a2848;
  --xp: #c9a227;
  --xp-dark: #4a3a10;
  --danger: #b33a2a;
  --danger-soft: #e07060;
  --success: #4a9a4a;
  --success-soft: #7ec87e;
  --combat: #c45a30;
  --ui-border: #1a1008;
  --text: #f2e6c8;
  --text-dim: #c4a882;
  --text-muted: #8a7050;
  --accent-link: #e8c060;
  --font-display: 'Cinzel', serif;
  --font-ui: 'Cinzel', serif;
  /* Czat / whisper: ta sama rodzina co UI (nadpisywana z ustawień). */
  --font-chat: 'Cinzel', serif;
  --pixel-frame:
    inset 0 0 0 1px var(--wood-highlight),
    inset 0 0 0 2px var(--wood-dark),
    0 0 0 1px var(--gold-dim),
    0 0 0 2px var(--ui-border),
    4px 4px 0 #00000088;
  --pixel-inset:
    inset 1px 1px 0 var(--ui-border),
    inset -1px -1px 0 var(--wood-highlight),
    inset 0 0 0 1px var(--wood-mid);
  --btn-bevel:
    inset 1px 1px 0 var(--wood-highlight),
    inset -1px -1px 0 var(--wood-dark);
  --btn-bevel-pressed:
    inset 1px 1px 0 var(--wood-dark),
    inset -1px -1px 0 var(--wood-highlight);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #1a120a;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  border-radius: 0;
}

.screen { width: 100%; height: 100%; }
.hidden { display: none !important; }

/* --- Wspólny chrome paneli --- */
.pixel-panel,
#inventory-panel,
#character-panel,
#shop-panel,
#storage-panel,
#loot-bag-panel,
#blessing-panel,
:is(#identifier-panel, #identifier-stat-panel),
#teleporter-panel,
#skill-window,
#skill-tree-panel,
#world-map-panel,
.auction-panel,
.task-panel,
.ranking-panel,
.pvp-panel,
.friends-panel,
.world-atlas-panel,
.item-encyclopedia-panel,
.wiki-panel,
.battle-pass-panel,
.changelog-panel,
.calendar-panel,
.hunt-analyzer-panel,
.settings-panel,
.enhance-panel,
.auth-box {
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  border-radius: 0;
  box-shadow: var(--pixel-frame);
  color: var(--text);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -2px -2px 8px;
  padding: 6px 8px;
  background: linear-gradient(180deg, var(--wood-mid) 0%, var(--wood) 100%);
  border-bottom: 2px solid var(--gold-dim);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 var(--ui-border);
}
.panel-close-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wood-dark);
  border: 1px solid var(--gold-dim);
  box-shadow: var(--btn-bevel);
  color: var(--parchment);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.panel-close-btn:hover {
  color: #fff;
  background: var(--danger);
  border-color: var(--parchment-dark);
}
.panel-close-btn:active { box-shadow: var(--btn-bevel-pressed); }
.panel-lock-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wood-dark);
  border: 1px solid var(--gold-dim);
  box-shadow: var(--btn-bevel);
  color: var(--parchment);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.panel-lock-btn:hover {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.panel-lock-btn.is-locked {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
  background: #2a1c10;
}
.panel-lock-btn:active { box-shadow: var(--btn-bevel-pressed); }
.panel-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.draggable-panel-header { cursor: grab; user-select: none; }
.draggable-panel-header:active { cursor: grabbing; }
.window-drag-locked > .draggable-panel-header,
.window-drag-locked .panel-header.draggable-panel-header,
.window-drag-locked > .quest-tracker-header,
.window-drag-locked .quest-tracker-header,
.window-drag-locked > .hotbar-drag-handle,
.window-drag-locked .hotbar-drag-handle {
  cursor: default;
}
.window-drag-locked > .draggable-panel-header:active,
.window-drag-locked .panel-header.draggable-panel-header:active,
.window-drag-locked > .quest-tracker-header:active,
.window-drag-locked .quest-tracker-header:active,
.window-drag-locked > .hotbar-drag-handle:active,
.window-drag-locked .hotbar-drag-handle:active {
  cursor: default;
}
.window-drag-locked > .window-resize-handle {
  pointer-events: none;
  opacity: 0.35;
}

.primary-btn,
.auth-form button,
.shop-action-btn,
.shop-sell-all-btn,
.enhance-action-btn {
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 100%);
  color: var(--parchment);
  border: 1px solid var(--gold-dim);
  box-shadow: var(--btn-bevel);
  padding: 8px 12px;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-shadow: 1px 1px 0 var(--ui-border);
}
.primary-btn:hover,
.auth-form button:hover,
.shop-action-btn:hover,
.shop-sell-all-btn:hover,
.enhance-action-btn:hover {
  background: linear-gradient(180deg, var(--wood-highlight) 0%, var(--wood-mid) 100%);
  color: #fff;
  border-color: var(--gold-bright);
}
.primary-btn:active,
.auth-form button:active {
  box-shadow: var(--btn-bevel-pressed);
  transform: translate(1px, 1px);
}
.secondary-btn {
  background: var(--panel-inner);
  color: var(--text-dim);
  border: 1px solid var(--slot-border);
  box-shadow: var(--btn-bevel);
  padding: 6px 10px;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
}
.secondary-btn:hover {
  background: var(--wood-mid);
  color: var(--text);
  border-color: var(--gold);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
select,
textarea,
.auth-form input,
#chat-input,
.auction-filters input,
.auction-filters select,
.auction-sell-form input,
.auction-sell-form select {
  background: #1a120c;
  color: var(--text);
  border: 1px solid #6b4a28;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  border-radius: 0;
  padding: 6px 8px;
  outline: none;
}
input:focus,
select:focus,
textarea:focus,
.auth-form input:focus,
#chat-input:focus {
  border-color: var(--gold);
  background: #22180e;
}

/* Scrollbary — flat wood */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--wood-light) var(--panel-inner);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--panel-inner); }
*::-webkit-scrollbar-thumb {
  background: var(--wood-light);
  border: 1px solid var(--wood-dark);
}
*::-webkit-scrollbar-thumb:hover { background: var(--wood-highlight); }

/* --- Ekran auth --- */
#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 20%, #4a3420 0%, transparent 55%),
    repeating-linear-gradient(
      0deg,
      #1a120a 0px,
      #1a120a 3px,
      #15100a 3px,
      #15100a 6px
    ),
    #1a120a;
}

.auth-box {
  padding: 28px 24px;
  width: 340px;
}

.auth-box h1 {
  text-align: center;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold-bright);
  text-shadow: 2px 2px 0 var(--ui-border), -1px 0 0 var(--gold-dim);
  letter-spacing: 0.06em;
}

.tabs { display: flex; margin-bottom: 14px; gap: 0; }
.tab {
  flex: 1;
  padding: 8px;
  background: var(--panel-inner);
  color: var(--text-muted);
  border: 1px solid var(--slot-border);
  border-bottom: 2px solid var(--gold-dim);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  border-radius: 0;
  box-shadow: none;
}
.tab.active {
  background: var(--wood-mid);
  color: var(--gold-bright);
  border-color: var(--gold);
  border-bottom-color: var(--gold-bright);
}
.tab:first-child { border-radius: 0; }
.tab:last-child { border-radius: 0; }

.lang-picker {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: -6px 0 14px;
}
.lang-picker-btn {
  min-width: 44px;
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-muted);
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  cursor: pointer;
}
.lang-picker-btn.active,
.lang-picker-btn:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
}

.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form input {
  padding: 10px;
  font-size: 18px;
}
.auth-form button {
  padding: 10px;
  margin-top: 4px;
}
.auth-link-btn {
  background: transparent;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  padding: 4px;
  margin-top: 0;
  text-decoration: underline;
  box-shadow: none;
}
.auth-link-btn:hover {
  color: var(--gold-bright);
  background: transparent;
}
.auth-tos-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, #888);
  line-height: 1.5;
  cursor: pointer;
  margin-top: 2px;
}
.auth-tos-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--gold, #c8963a);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.auth-tos-label a {
  color: var(--gold, #c8963a);
  text-decoration: none;
}
.auth-tos-label a:hover {
  text-decoration: underline;
}
.auth-hint {
  text-align: center;
  margin: 0;
  font-size: 13px;
}
#forgot-reset-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#forgot-reset-fields.hidden { display: none; }

.settings-panel .settings-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  margin: 0 0 8px;
  font-size: 14px;
  background: var(--panel-inner);
  color: var(--text);
  border: 1px solid var(--slot-border);
}

.error {
  color: var(--danger-soft);
  min-height: 18px;
  text-align: center;
  font-size: 15px;
  margin: 10px 0 0;
}

/* --- Ekran gry --- */
#game-screen {
  position: relative;
  width: 100%;
  height: 100%;
}
#game-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  --side-bar-left-width: 0px;
  --side-bar-right-width: 0px;
}
#game-layout[data-side-bars="on"] {
  /* szerokości z JS */
}
#game-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.ui-side-bar {
  flex: 0 0 auto;
  width: var(--side-bar-width, 250px);
  height: 100%;
  background:
    linear-gradient(180deg, var(--wood-mid) 0%, var(--wood) 26px, var(--panel-bg) 26px),
    var(--panel-inner);
  background-color: var(--panel-inner);
  border-color: var(--gold-dim);
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
  pointer-events: auto;
  z-index: 5;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.28);
}
#ui-side-bar-left {
  --side-bar-width: var(--side-bar-left-width, 250px);
  width: var(--side-bar-left-width, 250px);
  border-right: 2px solid var(--gold-dim);
  box-shadow:
    inset -1px 0 0 var(--wood-highlight),
    inset 0 0 28px rgba(0, 0, 0, 0.22);
}
#ui-side-bar-right {
  --side-bar-width: var(--side-bar-right-width, 250px);
  width: var(--side-bar-right-width, 250px);
  border-left: 2px solid var(--gold-dim);
  box-shadow:
    inset 1px 0 0 var(--wood-highlight),
    inset 0 0 28px rgba(0, 0, 0, 0.22);
}
.ui-side-bar[hidden],
.ui-side-bar[data-disabled="true"] {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  border: none;
  overflow: hidden;
  pointer-events: none;
}
.ui-side-bar.ui-dock-drop-hint {
  background:
    linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 26px, var(--panel-bg) 26px),
    var(--panel-inner);
  box-shadow:
    inset 0 0 0 2px var(--gold-bright),
    inset 0 0 32px rgba(240, 192, 64, 0.14);
}
.ui-dock-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(58, 39, 24, 0.35) 0%, transparent 48px);
}
.ui-docked {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  overflow: visible;
  flex-shrink: 0;
  box-sizing: border-box;
}
/* X / close: .ui-docked { display:block !important } nie może przebijać .hidden */
.ui-docked.hidden {
  display: none !important;
}
.ui-docked > .ui-dock-scale-inner,
.ui-dock-measuring#chat-box,
.ui-dock-measuring#inventory-panel,
.ui-dock-measuring.hunt-analyzer-panel,
.ui-dock-measuring.enhance-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.ui-docked > .ui-dock-scale-inner > *,
.ui-dock-measuring#chat-box > *,
.ui-dock-measuring#inventory-panel > *,
.ui-dock-measuring.hunt-analyzer-panel > *,
.ui-dock-measuring.enhance-panel > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.ui-docked > .ui-dock-scale-inner > #chat-messages,
.ui-dock-measuring#chat-box > #chat-messages,
.ui-docked > .ui-dock-scale-inner > .chat-messages-panel {
  flex: 0 0 auto;
  min-height: 48px;
  max-height: 160px;
  overflow-y: auto;
}
.ui-docked > .ui-dock-scale-inner > #chat-tabs,
.ui-dock-measuring#chat-box > #chat-tabs,
.ui-docked > .ui-dock-scale-inner > .chat-box-header,
.ui-dock-measuring#chat-box > .chat-box-header {
  flex-shrink: 0;
}
.ui-docked .hunt-analyzer-body,
.ui-dock-measuring .hunt-analyzer-body {
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: visible;
}
.ui-docked.hunt-analyzer-panel,
.ui-dock-measuring.hunt-analyzer-panel,
.ui-docked#chat-box,
.ui-dock-measuring#chat-box,
.ui-docked#inventory-panel,
.ui-dock-measuring#inventory-panel {
  max-height: none;
  min-width: 0 !important;
  min-height: 0 !important;
}
/* Ekwipunek na pasku: układ pionowy + elastyczna siatka (min. ~360px nie mieści się w 250px) */
.ui-docked#inventory-panel,
.ui-dock-measuring#inventory-panel {
  overflow-x: hidden;
  overflow-y: visible;
  max-width: 100% !important;
}
.ui-docked#inventory-panel > .ui-dock-scale-inner > #inventory-body,
.ui-dock-measuring#inventory-panel > #inventory-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.ui-docked#inventory-panel #inventory-equip-col,
.ui-dock-measuring#inventory-panel #inventory-equip-col {
  width: 100%;
  flex: 0 0 auto;
  align-items: center;
}
.ui-docked#inventory-panel #inventory-equip-slots,
.ui-dock-measuring#inventory-panel #inventory-equip-slots {
  width: 100%;
  max-width: 132px;
  margin: 0 auto;
}
.ui-docked#inventory-panel #inventory-bag-col,
.ui-dock-measuring#inventory-panel #inventory-bag-col {
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
}
.ui-docked#inventory-panel #inventory-grid,
.ui-dock-measuring#inventory-panel #inventory-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: auto;
}
.ui-docked#inventory-panel #inventory-grid .inv-slot,
.ui-dock-measuring#inventory-panel #inventory-grid .inv-slot {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
}
.ui-docked#inventory-panel .equip-slot-box,
.ui-dock-measuring#inventory-panel .equip-slot-box {
  width: 100%;
  max-width: 40px;
  height: auto;
  aspect-ratio: 1;
}
.ui-dock-scale-inner {
  height: auto;
  min-height: 0;
}
.ui-docked .window-resize-handle {
  display: none;
}
#game-viewport #game-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#game-viewport #low-hp-warning {
  position: absolute;
  inset: 0;
}
.hud-drag-handle,
.buff-bar-drag-handle,
.momentum-drag-handle,
.target-frame-drag-handle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: auto;
  min-height: 14px;
  padding: 0;
  margin: 0 0 4px;
  cursor: grab;
  background: rgba(212, 160, 23, 0.15);
  border-radius: 2px;
  gap: 2px;
}
.hud-drag-handle .panel-header-actions,
.buff-bar-drag-handle .panel-header-actions,
.momentum-drag-handle .panel-header-actions,
.target-frame-drag-handle .panel-header-actions {
  margin-left: 0;
}
.hud-drag-handle .panel-lock-btn,
.buff-bar-drag-handle .panel-lock-btn,
.momentum-drag-handle .panel-lock-btn,
.target-frame-drag-handle .panel-lock-btn {
  width: 16px;
  height: 16px;
  margin-right: 2px;
  font-size: 10px;
}
.hud-drag-handle:active,
.buff-bar-drag-handle:active,
.momentum-drag-handle:active,
.target-frame-drag-handle:active {
  cursor: grabbing;
}
#buff-bar .buff-bar-drag-handle {
  width: 100%;
}
.settings-side-bars-controls.hidden {
  display: none;
}
.settings-side-bars-controls {
  margin-top: 6px;
}
/* Warstwa UI — zoom ustawiany w uiScale.js przez style.zoom (bez CSS var) */
#ui-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#ui-root > * {
  pointer-events: auto;
}
#game-canvas {
  display: block;
  background: #2b3a1f;
  image-rendering: pixelated;
}

/* Krytycznie niskie HP (<20%): czerwona winieta + puls */
#low-hp-warning {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(160, 0, 0, 0.35) 70%,
    rgba(120, 0, 0, 0.65) 100%
  );
  opacity: 0.85;
  animation: low-hp-pulse 1.1s ease-in-out infinite;
}
@keyframes low-hp-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}
#game-canvas.drop-to-ground {
  outline: 2px dashed rgba(212, 160, 23, 0.85);
  outline-offset: -4px;
}

#hud {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 200px;
  background: var(--panel-bg);
  padding: 8px 10px;
  border: 2px solid var(--gold-dim);
  border-radius: 0;
  box-shadow: var(--pixel-frame);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
#hp-bar-wrap {
  width: 100%;
  height: 16px;
  background: var(--hp-dark);
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  box-shadow: var(--pixel-inset);
}

/* Dodatkowe HP/mana na środku — tylko z ustawień, bez drag */
#center-hud-bars {
  position: absolute;
  z-index: 14;
  pointer-events: none;
  user-select: none;
  --center-bars-spread: 18%;
}
#center-hud-bars.layout-horizontal {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 56vw);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(12, 10, 8, 0.55);
  border: 1px solid var(--ui-border);
  box-shadow: var(--pixel-frame);
}
#center-hud-bars.layout-horizontal #center-hp-bar-wrap {
  width: 100%;
  height: 22px;
  background: var(--hp-dark);
}
#center-hud-bars.layout-horizontal #center-carapace-bar-wrap {
  width: 100%;
  height: 14px;
  background: #1a2430;
}
#center-hud-bars.layout-horizontal #center-carapace-bar-wrap.hidden {
  display: none;
}
#center-hud-bars.layout-horizontal #center-mana-bar-wrap {
  width: 100%;
  height: 18px;
}
/* Pionowe: HP lewo, osłona przy HP, mana prawo — rozstaw suwakiem */
#center-hud-bars.layout-vertical {
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
#center-hud-bars.layout-vertical #center-hp-bar-wrap,
#center-hud-bars.layout-vertical #center-carapace-bar-wrap,
#center-hud-bars.layout-vertical #center-mana-bar-wrap {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: min(280px, 44vh);
  border: 1px solid var(--ui-border);
  box-shadow: var(--pixel-frame);
  overflow: hidden;
}
#center-hud-bars.layout-vertical #center-hp-bar-wrap {
  left: calc(50% - var(--center-bars-spread, 18%));
  background: var(--hp-dark);
}
#center-hud-bars.layout-vertical #center-carapace-bar-wrap {
  left: calc(50% - var(--center-bars-spread, 18%) + 32px);
  width: 18px;
  height: min(240px, 38vh);
  background: #1a2430;
}
#center-hud-bars.layout-vertical #center-carapace-bar-wrap.hidden {
  display: none;
}
#center-hud-bars.layout-vertical #center-mana-bar-wrap {
  left: calc(50% + var(--center-bars-spread, 18%));
  width: 22px;
  height: min(240px, 38vh);
  background: var(--mana-dark);
}
#center-hud-bars.layout-vertical .bar-fill {
  width: 100%;
  height: 0%;
  top: auto;
  bottom: 0;
  left: 0;
}
#center-hud-bars.layout-vertical .bar-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.04em;
}
#hp-bar {
  height: 100%;
  width: 100%;
  background: var(--hp);
  transition: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#player-name-label {
  font-size: 16px;
  color: var(--text);
  font-family: var(--font-display);
}

#minimap-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 188px;
}
#minimap-card {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  overflow: hidden;
}
/* Minimapa schowana (Ustawienia / menu telefonu) — znika tylko karta mapy,
   tracker questów zostaje (mieszka w tym samym #minimap-wrap). */
html.minimap-hidden #minimap-card {
  display: none;
}
#minimap-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 5px 8px;
  background: linear-gradient(180deg, var(--wood-mid) 0%, var(--wood) 100%);
  border-bottom: 2px solid var(--gold-dim);
  min-height: 26px;
  box-sizing: border-box;
}
#minimap-header .panel-header-actions {
  margin-left: auto;
}
#minimap-header .panel-lock-btn {
  width: 18px;
  height: 18px;
  margin-right: 0;
  font-size: 10px;
}
#minimap-zone {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 1px 1px 0 var(--ui-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
#minimap-keyhint {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-dim);
  border: 1px solid var(--gold-dim);
  background: rgba(0, 0, 0, 0.28);
  padding: 1px 5px;
  line-height: 1.3;
  user-select: none;
}
#minimap-viewport {
  position: relative;
  margin: 6px 6px 0;
  border: 1px solid var(--gold-dim);
  background: #0a0806;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  line-height: 0;
}
#minimap-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(212, 160, 23, 0.12);
}
#minimap-canvas {
  width: 168px;
  height: 168px;
  background: #0a0806;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  image-rendering: pixelated;
  display: block;
}
/* Hover bez filter: filtr na canvasie odświeżanym 20×/s wymusza rasteryzację warstwy
   przy każdej klatce. Outline zmienia się tylko przy wjechaniu/zjechaniu myszą. */
#minimap-canvas:hover { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
#minimap-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 6px 6px;
}
#minimap-coords {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(106, 80, 40, 0.7);
  border-radius: 0;
  padding: 3px 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.channel-select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.channel-select-label {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
#channel-select {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(106, 80, 40, 0.7);
  border-radius: 0;
  padding: 3px 4px;
}
#channel-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
#minimap-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  padding: 0 2px 1px;
}
.mm-leg {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.mm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.mm-dot.mm-you { background: #ffd54f; }
.mm-dot.mm-party { background: #7CFC00; }
.mm-dot.mm-player { background: #64b5f6; }
.mm-dot.mm-mob { background: #ef5350; }

#quest-tracker {
  /* Floating / po undocku w #ui-root — stała szerokość (nie 100% viewportu) */
  width: 188px;
  max-width: 100%;
  max-height: min(220px, 30vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  border-radius: 0;
  box-shadow: var(--pixel-frame);
  padding: 6px 7px 7px;
  box-sizing: border-box;
}
/* W kolumnie minimapy — wypełnij szerokość wrapa (188px) */
#minimap-wrap > #quest-tracker {
  width: 100%;
}
#quest-tracker.hidden { display: none; }
.quest-tracker-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold-dim);
  cursor: grab;
  user-select: none;
}
.quest-tracker-header:active { cursor: grabbing; }
.quest-tracker-header .panel-header-actions {
  margin-left: auto;
}
.quest-tracker-header .panel-lock-btn {
  width: 16px;
  height: 16px;
  margin-right: 0;
  font-size: 10px;
}
.quest-tracker-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  min-width: 0;
  flex: 1;
}
#quest-tracker-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  max-height: 180px;
  scrollbar-width: thin;
}
.quest-tracker-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.quest-tracker-item.ready .quest-tracker-name { color: var(--success-soft); }
.quest-tracker-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.quest-tracker-name:hover {
  color: var(--gold-bright);
  text-decoration: underline;
}
.quest-tracker-goal {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quest-tracker-progress {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.quest-tracker-item.ready .quest-tracker-progress {
  color: var(--success-soft);
}

#world-map-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px 10px;
  z-index: 18;
  max-width: calc(100% / var(--ui-zoom, 1) - 16px);
  max-height: calc(100% / var(--ui-zoom, 1) - 16px);
}
#world-map-panel.hidden { display: none; }
#world-map-panel .panel-header { margin: 0 -10px 0; }
.world-map-legend {
  margin: 6px 0 8px;
  font-size: 14px;
  color: var(--text-muted);
}
#world-map-canvas {
  display: block;
  image-rendering: pixelated;
  background: #1a140c;
  border: 2px solid var(--wood-dark);
  border-radius: 0;
  max-width: 100%;
  cursor: crosshair;
  box-shadow: var(--pixel-inset);
}
#world-map-coords {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#chat-box {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 320px;
  height: 220px;
  min-width: 220px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  border-radius: 0;
  box-shadow: var(--pixel-frame);
  padding: 8px;
  box-sizing: border-box;
  z-index: 12;
}
.chat-box-header {
  margin: -8px -8px 6px;
  padding: 6px 10px;
  flex-shrink: 0;
  font-size: 13px;
}
#chat-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.chat-tab {
  flex: 1;
  padding: 4px 8px;
  font-family: var(--font-display);
  font-size: 13px;
  border: 1px solid var(--slot-border);
  border-radius: 0;
  background: var(--panel-inner);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: var(--btn-bevel);
}
.chat-tab:hover { color: var(--text); background: var(--wood-mid); }
.chat-tab.active {
  background: linear-gradient(180deg, rgba(120, 80, 28, 0.9), rgba(70, 46, 18, 0.95));
  color: var(--gold-bright);
  border-color: var(--gold);
}
.chat-tab.has-new::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 0;
  background: var(--gold-bright);
  vertical-align: middle;
  box-shadow: 1px 1px 0 var(--ui-border);
}
#chat-messages,
.chat-messages-panel {
  flex: 1 1 auto;
  min-height: 48px;
  height: auto;
  overflow-y: auto;
  font-family: var(--font-chat);
  font-size: 15px;
  text-transform: none;
  font-variant-caps: normal;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(12, 8, 5, 0.72);
  color: var(--text);
  padding: 4px 6px;
  border: 1px solid #5a4020;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35);
}
#chat-messages.hidden,
.chat-messages-panel.hidden { display: none; }
#chat-messages span.author { color: var(--gold-dim); font-weight: bold; }
/* Nick gracza na czacie — klik otwiera menu (party / znajomi / szept / ignoruj) */
.chat-nick {
  cursor: pointer;
}
.chat-nick:hover {
  text-decoration: underline;
}
.chat-line-loot,
.chat-line-server-log {
  font-weight: 600;
  word-break: break-word;
}
.chat-line-server-log-sold {
  background: linear-gradient(180deg, rgba(39, 110, 44, 0.92), rgba(18, 64, 24, 0.96));
  border: 1px solid #43a047;
  color: #c8e6c9;
  padding: 3px 6px;
  margin: 2px 0;
}
.server-log-item-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin: 0 4px;
  border: 2px solid #888;
  background: var(--slot-bg, #1a1a1a);
  box-sizing: border-box;
  cursor: help;
  position: relative;
  flex-shrink: 0;
}
.server-log-item-icon .item-sprite-wrap {
  width: 100%;
  height: 100%;
}
.server-log-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.server-log-item-icon .item-qty,
.server-log-item-icon .item-upgrade {
  font-size: 9px;
  line-height: 1;
}
#chat-input {
  width: 100%;
  padding: 6px;
  font-family: var(--font-chat);
  font-size: 15px;
  text-transform: none;
  font-variant-caps: normal;
  flex-shrink: 0;
}
#chat-box.channel-serverLog #chat-input { display: none; }
.chat-tab-party.hidden { display: none !important; }
.chat-line-party {
  word-break: break-word;
}
.chat-line-party .author {
  color: #1565c0;
  font-weight: bold;
}
#chat-box.channel-party #chat-input {
  border-color: #42a5f5;
}

/* Wskaźnik nowego dropu do EQ — prawo od czatu (pozycja dokładana w ui.js) */
#inventory-drop-indicator {
  position: absolute;
  left: 338px;
  bottom: 100px;
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border: 2px solid var(--gold-bright);
  border-radius: 0;
  box-shadow: var(--pixel-frame);
  color: var(--ink);
  cursor: pointer;
  z-index: 15;
  pointer-events: auto;
  animation: inv-drop-indicator-blink 0.85s ease-in-out infinite;
}
#inventory-drop-indicator.hidden {
  display: none !important;
}
#inventory-drop-indicator:hover {
  background: var(--wood-mid);
  border-color: var(--gold);
}
.inv-drop-indicator-icon {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45));
}
@keyframes inv-drop-indicator-blink {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: var(--pixel-frame), 0 0 0 0 rgba(212, 175, 55, 0.55); }
  50% { opacity: 0.55; transform: scale(1.06); box-shadow: var(--pixel-frame), 0 0 10px 2px rgba(212, 175, 55, 0.45); }
}

/* Wskaźnik awansu umiejętności (zamiast auto-otwarcia okna G) */
#skill-level-up-notice {
  position: absolute;
  left: 12px;
  top: 230px;
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-bright);
  border-radius: 0;
  box-shadow: var(--pixel-frame);
  color: var(--ink);
  cursor: pointer;
  z-index: 16;
  pointer-events: auto;
  animation: skill-level-up-blink 0.9s ease-in-out infinite;
}
#skill-level-up-notice.hidden {
  display: none !important;
}
#skill-level-up-notice:hover {
  background: var(--wood-mid);
  border-color: var(--gold);
}
.skill-level-up-notice-plus {
  width: 20px;
  height: 20px;
  display: block;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45));
}
.skill-level-up-notice-level {
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold-bright);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
.skill-level-up-notice-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-bright);
  color: #1b1408;
  font-weight: 700;
  border: 2px solid var(--panel-bg);
  box-sizing: border-box;
}
.skill-level-up-notice-count.hidden {
  display: none !important;
}
@keyframes skill-level-up-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.07); }
}
html[data-ui-mode="phone"] #skill-level-up-notice {
  right: auto;
  bottom: auto;
  left: calc(12px + env(safe-area-inset-left, 0px));
  top: calc(134px + env(safe-area-inset-top, 0px));
  width: 48px;
  height: 48px;
  z-index: 43;
}
html[data-ui-mode="phone"] #skill-level-up-notice .skill-level-up-notice-plus {
  width: 22px;
  height: 22px;
}

/* --- Whisper (prywatny czat) --- */
#whisper-windows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 14;
}
.whisper-window {
  position: absolute;
  width: 280px;
  height: 180px;
  min-width: 220px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  padding: 8px;
  box-sizing: border-box;
  pointer-events: auto;
  z-index: 14;
}
.whisper-window.hidden { display: none !important; }
.whisper-window.whisper-has-new {
  border-color: var(--gold-bright);
}
.whisper-header {
  margin: -8px -8px 6px;
  padding: 6px 10px;
  flex-shrink: 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.whisper-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whisper-messages {
  flex: 1 1 auto;
  min-height: 40px;
  overflow-y: auto;
  font-family: var(--font-chat);
  font-size: 14px;
  text-transform: none;
  font-variant-caps: normal;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(12, 8, 5, 0.72);
  color: var(--text);
  padding: 4px 6px;
  border: 1px solid #5a4020;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35);
}
.whisper-line { word-break: break-word; }
.whisper-line .author { color: var(--gold-dim); font-weight: bold; }
.whisper-system {
  color: var(--text-muted);
  font-style: italic;
}
.whisper-input {
  width: 100%;
  padding: 6px;
  font-family: var(--font-chat);
  font-size: 14px;
  text-transform: none;
  font-variant-caps: normal;
  flex-shrink: 0;
  box-sizing: border-box;
}

.player-context-menu {
  position: absolute;
  min-width: 140px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  padding: 4px;
  z-index: 40;
  pointer-events: auto;
}
.player-context-menu.hidden { display: none !important; }
.player-context-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-family: var(--font-display);
  font-size: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.player-context-item:hover {
  background: var(--wood-mid);
  border-color: var(--slot-border);
  color: #fff;
}

.item-context-menu {
  position: absolute;
  min-width: 140px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  padding: 4px;
  z-index: 24000;
  pointer-events: auto;
}
.item-context-menu.hidden { display: none !important; }
.item-context-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-family: var(--font-display);
  font-size: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.item-context-item:hover {
  background: var(--wood-mid);
  border-color: var(--slot-border);
  color: #fff;
}

.item-context-menu-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.item-context-menu-btn:hover {
  background: var(--wood-mid);
  border-color: var(--slot-border);
  color: #fff;
}

/* --- Podgląd gracza (ekwipunek + staty) --- */
.player-inspect-panel {
  position: absolute;
  left: 200px;
  top: 18%;
  transform: none;
  width: 440px;
  min-width: 380px;
  min-height: 280px;
  padding: 0 10px 10px;
  z-index: 28;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  box-sizing: border-box;
  color: var(--text);
}
.player-inspect-panel.hidden { display: none !important; }
.player-inspect-panel .panel-header { margin: 0 -10px 0; }
.player-inspect-body {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.player-inspect-equip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  align-content: start;
  flex-shrink: 0;
}
.player-inspect-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 15px;
  min-width: 0;
}
.player-inspect-stats .char-stat-row {
  color: #ffffff;
}
.player-inspect-stats .char-stat-row span:first-child {
  color: var(--text-dim);
}
.player-inspect-stats .char-stat-row span:last-child {
  color: #ffffff;
  font-weight: 600;
}
.player-inspect-item-fallback {
  font-size: 10px;
  text-align: center;
  padding: 4px;
  word-break: break-word;
}

/* --- Trade 1:1 --- */
.trade-panel {
  position: absolute;
  left: 280px;
  top: 100px;
  width: 520px;
  min-width: 420px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  padding: 8px;
  box-sizing: border-box;
  z-index: 22;
  color: var(--text);
}
.trade-panel.hidden { display: none !important; }
#trade-panel {
  min-width: 0 !important;
  min-height: min(440px, calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1) - 16px)) !important;
  max-width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1) - 16px) !important;
  max-height: calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1) - 16px) !important;
}
.trade-panel .panel-header {
  margin: -8px -8px 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gold-bright);
}
.trade-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.trade-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel-inner);
  border: 1px solid var(--wood-dark);
  padding: 8px;
  color: var(--text);
  min-width: 0;
}
.trade-col-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold-bright);
}
.trade-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  min-height: 96px;
}
.trade-slots.drag-over {
  outline: 2px solid var(--gold);
}
.trade-slot {
  aspect-ratio: 1;
  border: 2px solid var(--slot-border);
  background: var(--slot-bg);
  box-shadow: var(--pixel-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.trade-slot.empty {
  border-color: var(--wood-dark);
  opacity: 0.7;
}
.trade-gold-label {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.trade-gold-label #trade-their-gold {
  color: var(--gold-bright);
  font-weight: 700;
}
.trade-gold-input {
  width: 100px;
  padding: 4px 6px;
  font-size: 14px;
  background: #1a120c;
  color: var(--text);
  border: 1px solid #6b4a28;
}
.trade-gold-input:focus {
  outline: none;
  border-color: var(--gold-bright);
}
.trade-accepted-flag {
  font-size: 12px;
  color: var(--success-soft);
  font-weight: 700;
}
.trade-accepted-flag.hidden { display: none !important; }
.trade-status {
  margin: 8px 0 4px;
  font-size: 13px;
  color: var(--text-dim);
  min-height: 1.2em;
}
.trade-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
#trade-accept-btn.trade-accept-ready {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-bright);
}

.trade-invite {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  width: 320px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  padding: 14px;
  z-index: 30;
  box-sizing: border-box;
  color: var(--text);
}
.trade-invite.hidden { display: none !important; }
.trade-invite-text {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
}
.trade-invite-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.game-notice {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  width: 340px;
  max-width: calc(100% / var(--ui-zoom, 1) - 24px);
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  z-index: 40;
  box-sizing: border-box;
  color: var(--text);
}
.game-notice.hidden { display: none !important; }
.game-notice-body {
  padding: 12px 14px 14px;
}
.game-notice-text {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.35;
}
.game-notice-actions {
  display: flex;
  justify-content: flex-end;
}

/* Wynik ulepszania (sukces / porażka) — środek ekranu */
.upgrade-result {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  max-width: calc(100% / var(--ui-zoom, 1) - 24px);
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  z-index: 45;
  box-sizing: border-box;
  color: var(--text);
}
.upgrade-result.hidden { display: none !important; }
.upgrade-result--success {
  border-color: #5a9e4a;
}
.upgrade-result--fail {
  border-color: #a84a4a;
}
.upgrade-result-body {
  padding: 18px 16px 16px;
  text-align: center;
}
.upgrade-result-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.upgrade-result--success .upgrade-result-text {
  color: #7dce6a;
}
.upgrade-result--fail .upgrade-result-text {
  color: #e07070;
}
.upgrade-result-actions {
  display: flex;
  justify-content: center;
}

/* --- Party panel (nad czatem, lewy dolny) --- */
#party-panel {
  position: absolute;
  left: 10px;
  /* chat: bottom 10 + height 220 + gap 8 → party tuż nad czatem */
  bottom: 238px;
  width: 200px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  padding: 0 8px 8px;
  z-index: 11;
  box-sizing: border-box;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
#party-panel.hidden { display: none !important; }
.party-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold-bright);
  margin: 0 -8px 0;
  padding: 6px 8px;
  background: linear-gradient(180deg, var(--wood-mid) 0%, var(--wood) 100%);
  border-bottom: 2px solid var(--gold-dim);
}
.party-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.party-plus-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  font-weight: bold;
  background: var(--panel-inner);
  color: var(--gold-bright);
  border: 1px solid var(--slot-border);
  cursor: pointer;
}
.party-plus-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.party-settings-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  font-size: 14px;
  background: var(--panel-inner);
  color: var(--text-dim);
  border: 1px solid var(--slot-border);
  cursor: pointer;
}
.party-settings-btn.hidden { display: none !important; }
.party-settings-btn:hover { border-color: var(--gold-dim); color: var(--gold-bright); }
.party-leave-btn {
  font-size: 12px;
  padding: 2px 6px;
  background: var(--panel-inner);
  color: var(--text-dim);
  border: 1px solid var(--slot-border);
  cursor: pointer;
}
.party-leave-btn.hidden { display: none !important; }
.party-leave-btn:hover { color: var(--text); border-color: var(--gold-dim); }
.party-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.party-member-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 2px;
}
.party-member-name {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.party-kick-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  cursor: pointer;
}
.party-kick-btn:hover {
  color: var(--danger-soft);
  border-color: var(--danger);
}
.party-member-offline .party-member-name {
  color: var(--text-muted);
  font-style: italic;
}
.party-member-offline .party-bar {
  opacity: 0.35;
}
.party-bar {
  width: 100%;
  height: 8px;
  background: var(--hp-dark);
  border: 1px solid var(--ui-border);
  box-shadow: var(--pixel-inset);
  overflow: hidden;
  margin-bottom: 2px;
}
.party-bar-mana {
  background: var(--mana-dark);
  height: 6px;
}

.party-invite {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translateX(-50%);
  width: 320px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  padding: 14px;
  z-index: 30;
  box-sizing: border-box;
  color: var(--text);
}
.party-invite.hidden { display: none !important; }
.party-invite-text {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
}
.party-invite-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.party-nick-dialog {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  width: 280px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  padding: 10px 12px 12px;
  z-index: 31;
  box-sizing: border-box;
  color: var(--text);
}
.party-nick-dialog.hidden { display: none !important; }
.party-nick-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-dim);
  margin: 10px 0;
}
.party-nick-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  color: var(--text);
}
.party-nick-actions {
  display: flex;
  justify-content: flex-end;
}

.party-settings-dialog {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  width: 320px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  padding: 10px 12px 12px;
  z-index: 31;
  box-sizing: border-box;
  color: var(--text);
}
.party-settings-dialog.hidden { display: none !important; }
.party-settings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.party-settings-title {
  font-family: var(--font-display);
  color: var(--gold-bright);
  font-size: 14px;
}
.party-settings-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  background: var(--panel-inner);
  border: 1px solid var(--wood-mid);
  cursor: pointer;
}
.party-settings-option input {
  margin-top: 3px;
}
.party-settings-option strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}
.party-settings-option small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}
.party-settings-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.party-settings-hint.hidden { display: none !important; }
.party-settings-actions {
  display: flex;
  justify-content: flex-end;
}

/* --- HUD: hp/xp/level --- */
.hud-row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
#level-label { color: var(--gold-bright); font-weight: bold; font-family: var(--font-display); }
#gold-label { color: var(--gold-bright); font-weight: bold; margin-left: auto; padding-left: 12px; }
#combat-status {
  font-size: 14px;
  font-weight: bold;
  color: #ffccaa;
  background: #4a2010;
  border: 1px solid var(--combat);
  border-radius: 0;
  padding: 3px 8px;
  text-align: center;
  font-family: var(--font-display);
}
#combat-status.hidden { display: none; }
#safe-zone-exit-timer {
  font-size: 14px;
  font-weight: bold;
  color: #c8e6ff;
  background: #102848;
  border: 1px solid #4a90c8;
  border-radius: 0;
  padding: 3px 8px;
  text-align: center;
  font-family: var(--font-display);
}
#safe-zone-exit-timer.hidden { display: none; }
#logout-btn {
  margin-top: 4px;
  background: var(--panel-inner);
  color: var(--text-dim);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  box-shadow: var(--btn-bevel);
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-display);
}
#logout-btn:hover { background: var(--wood-mid); color: var(--text); border-color: var(--gold); }
#logout-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.chase-mode-btn {
  margin-top: 2px;
  background: var(--panel-inner);
  color: var(--text-dim);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  box-shadow: var(--btn-bevel);
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}
.chase-mode-btn:hover {
  background: var(--wood-mid);
  color: var(--text);
  border-color: var(--gold);
}
.chase-mode-btn.active {
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 100%);
  color: var(--ink);
  border-color: var(--gold-bright);
}

#shop-panel {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  max-width: calc(100% / var(--ui-zoom, 1) - 16px);
  max-height: calc(100% / var(--ui-zoom, 1) - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 10px 10px;
  z-index: 16;
  box-sizing: border-box;
}
#shop-panel.hidden { display: none; }
#shop-panel .panel-header { margin: 0 -10px 0; flex-shrink: 0; }
#shop-panel #shop-panel-header { justify-content: center; position: relative; }
#shop-panel #shop-panel-header .panel-header-actions { position: absolute; right: 5px; margin-left: 0; }
#shop-panel #shop-close-btn { position: static; }
#shop-awning {
  height: 44px;
  margin: 0 -10px 8px;
  flex: 0 0 auto;
  position: relative;
  background: repeating-linear-gradient(90deg, #5d347d 0 14px, #e6d8eb 14px 28px);
  border-top: 3px solid #2b201d;
  box-shadow: inset 0 6px 4px #0005;
  -webkit-mask-image: linear-gradient(#000 0 30px, transparent 30px), radial-gradient(circle at 14px 29px, #000 14px, transparent 15px);
  -webkit-mask-size: 100% 44px, 28px 44px;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-image: linear-gradient(#000 0 30px, transparent 30px), radial-gradient(circle at 14px 29px, #000 14px, transparent 15px);
  mask-size: 100% 44px, 28px 44px;
  mask-repeat: no-repeat, repeat-x;
}
.shop-tabs { display: flex; gap: 2px; margin-bottom: 6px; padding: 2px; background: #211913; border: 1px solid #81633a; }
.shop-tab {
  flex: 1;
  border: 1px solid #4b3826;
  background: linear-gradient(#4d3826, #302116);
  color: #c1ad8a;
  padding: 3px;
  font-size: 12px;
  cursor: pointer;
}
.shop-tab.active { background: linear-gradient(#806038, #4f351e); color: #ffe6a8; border-color: #b38c4d; }
.shop-columns[data-shop-view="buy"] .shop-col--sell,
.shop-columns[data-shop-view="sell"] .shop-col--buy { display: none; }
.shop-buy-slot {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 2px;
  border: 1px solid #474342;
  border-radius: 0;
  background: linear-gradient(145deg, #262329, #171518);
  box-shadow: inset 1px 1px #423c3d, inset -1px -1px #0c0b0d;
  cursor: pointer;
}
.shop-buy-slot:not(.shop-buy-slot--empty) { border-color: var(--shop-rarity); }
.shop-buy-slot.selected { outline: 2px solid var(--gold-bright); outline-offset: -3px; }
.shop-buy-slot:hover:not(.shop-buy-slot--empty) { background: #463c43; }
.shop-buy-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.shop-buy-slot--empty { cursor: default; }
.shop-footer {
  margin: 7px -8px -8px;
  padding: 7px 9px 5px;
  border: 3px ridge #987247;
  background:
    radial-gradient(#78572f22 0.6px, transparent 1px) 0 0 / 5px 5px,
    linear-gradient(#f5e5bd, #dec28d);
  color: #3b2a19;
  box-shadow: inset 0 0 0 1px #f8e7bf, inset 0 0 10px #6d481f33;
  flex: 0 0 auto;
}
.shop-selection { display: flex; align-items: center; gap: 5px; min-height: 25px; }
#shop-selection-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: bold; }
#shop-selection-price { white-space: nowrap; font-size: 11px; }
#shop-selection-buy { padding: 3px 7px; font-size: 12px; }
.shop-columns[data-shop-view="sell"] + .shop-footer .shop-selection { display: none; }

.shop-buy-backdrop {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: #0008;
}
.shop-buy-backdrop.hidden { display: none; }
.shop-buy-dialog {
  position: absolute;
  z-index: 71;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% / var(--ui-zoom, 1) - 24px));
  padding: 0 12px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--gold);
  box-shadow: 0 12px 36px #000a;
  box-sizing: border-box;
}
.shop-buy-dialog.hidden { display: none; }
/* Batch crafting modals must cover both station panels (z-index: 110). */
#alchemy-batch-backdrop,
#cooking-batch-backdrop { z-index: 111; }
#alchemy-batch-dialog,
#cooking-batch-dialog { z-index: 112; }

#item-split-layer {
  position: fixed; top: 0; left: 0; z-index: 25000;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; box-sizing: border-box; background: rgba(0, 0, 0, .7);
  pointer-events: auto; touch-action: manipulation;
}
.item-split-dialog {
  width: 340px; max-width: 100%; max-height: 100%; overflow: auto;
  box-sizing: border-box; padding: 16px; color: var(--text);
  background: var(--panel-bg); border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
}
.item-split-dialog h3 { margin: 0 0 12px; color: var(--gold, #b99552); }
.item-split-info { display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.item-split-info > :first-child:not(strong) { flex: 0 0 40px; width: 40px; height: 40px; }
.item-split-controls, .item-split-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.item-split-dialog button { min-width: max(40px, calc(44px / var(--ui-zoom, 1))); min-height: max(44px, calc(44px / var(--ui-zoom, 1))); flex-shrink: 0; }
.item-split-controls input { width: 64px; min-width: 0; min-height: max(44px, calc(44px / var(--ui-zoom, 1))); box-sizing: border-box; text-align: center; }
.item-split-actions button { flex: 1; }
.item-split-error { color: #ef7777; overflow-wrap: anywhere; }
.shop-buy-dialog .panel-header { margin: 0 -12px 12px; }
.shop-buy-item-name { margin-bottom: 10px; color: var(--gold-bright); font-size: 15px; }
.shop-buy-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

#storage-panel {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  max-width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1) - 16px) !important;
  max-height: calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1) - 24px) !important;
  overflow: auto;
  padding: 0 10px 10px;
  z-index: 16;
}
#storage-panel.hidden { display: none; }
#storage-panel .panel-header { margin: 0 -10px 0; }
#blessing-panel {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  max-width: calc(100% / var(--ui-zoom, 1) - 16px);
  padding: 0 10px 12px;
  z-index: 16;
}
#blessing-panel.hidden { display: none; }
#blessing-panel .panel-header { margin: 0 -10px 0; }
/* Identyfikator (NPC kind=identifier): lista przedmiotów z zamkniętymi statami */
:is(#identifier-panel, #identifier-stat-panel) {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: min(560px, 80vh);
  max-width: calc(100% / var(--ui-zoom, 1) - 16px);
  max-height: min(calc((86 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1)), calc(100% / var(--ui-zoom, 1) - 20px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 10px 12px;
  box-sizing: border-box;
  z-index: 16;
}
:is(#identifier-panel, #identifier-stat-panel).hidden { display: none; }
:is(#identifier-panel, #identifier-stat-panel) .panel-header { margin: 0 -10px 0; flex: 0 0 auto; }
:is(#identifier-panel, #identifier-stat-panel) .hint-text { flex: 0 0 auto; margin: 6px 0 4px; }
.identifier-scroll {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--gold-dim);
}
.identifier-scroll-icon { width: 22px; height: 22px; image-rendering: pixelated; }
.identifier-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.identifier-list > .hint-text { margin: 8px 0; }
.identifier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--slot-border);
  background: rgba(0, 0, 0, 0.25);
}
.identifier-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 2px solid var(--slot-border);
  image-rendering: pixelated;
  object-fit: contain;
}
.identifier-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.identifier-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.identifier-tag { font-size: 11px; color: var(--text-dim); }
.identifier-qty { color: var(--text-dim); }
.identifier-identify-btn { flex: 0 0 auto; }
#identifier-status { flex: 0 0 auto; }
#teleporter-panel {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 1280px;
  max-width: calc(100% / var(--ui-zoom, 1) - 24px);
  max-height: min(calc((92 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1)), 900px, calc(100% / var(--ui-zoom, 1) - 20px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 12px 12px;
  z-index: 16;
}
#teleporter-panel.hidden { display: none; }
#teleporter-panel .panel-header { margin: 0 -12px 0; flex: 0 0 auto; }
#teleporter-panel .hint-text {
  flex: 0 0 auto;
  margin: 6px 0 4px;
}
#teleporter-panel .blessing-cost {
  flex: 0 0 auto;
  margin: 0 0 6px;
}
.teleporter-map-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 520px;
  height: min(68vh, 640px);
  overflow: auto;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #1a3a58 0%, #0c2438 45%, #081820 100%);
  border: 2px solid var(--gold-dim);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
}
.teleporter-map-wrap.has-painted-bg {
  background: #0a1c2c;
}
.teleporter-map-graph {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}
.teleporter-map-empty {
  position: relative;
  z-index: 3;
  color: var(--text-muted);
  font-size: 12px;
  padding: 16px;
}
.teleporter-flag.is-poor {
  opacity: 0.45;
  filter: grayscale(0.35);
}
.teleporter-flag.is-here {
  cursor: default;
}
.teleporter-flag.is-here .world-atlas-flag-banner {
  border-left-color: #5ee0d0;
}
.teleporter-selected {
  white-space: pre-line;
  max-height: 100px;
  overflow-y: auto;
  flex: 0 0 auto;
  margin: 8px 0 6px;
  font-size: 12px;
  color: var(--text);
}
.teleporter-selected.is-empty {
  color: var(--text-muted);
}
.teleporter-selected.is-poor {
  color: #e08070;
}
#teleporter-travel-btn {
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: 4px;
}
.teleporter-map-tooltip {
  position: absolute;
  z-index: 40;
  min-width: 150px;
  max-width: 240px;
  padding: 8px 10px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background:
    linear-gradient(180deg, rgba(58, 42, 24, 0.96) 0%, rgba(28, 20, 12, 0.96) 100%);
  border: 1px solid #c9a45a;
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
  color: #f0e8d0;
}
.teleporter-map-tooltip.hidden { display: none; }
.teleporter-tip-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: #f5efd8;
}
.teleporter-tip-lvl {
  font-size: 11px;
  font-weight: 600;
  color: #c8e6a0;
}
.teleporter-tip-meta {
  font-size: 11px;
  color: #d8d0b8;
}
.teleporter-tip-meta.is-poor,
.teleporter-tip-warn {
  color: #e08070;
  font-size: 11px;
}
.teleporter-dest-list { display: none; }
.blessing-state {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--text-muted);
}
.blessing-state.is-active {
  color: #81c784;
}
.blessing-cost {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--gold-bright);
}
#storage-status {
  min-height: 16px;
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
#storage-status.error { color: var(--danger-soft); }
.storage-gold-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #1a120c;
  border: 1px solid #5a3d22;
}
.storage-gold-info {
  font-size: 13px;
  color: var(--text);
}
.storage-gold-info strong {
  color: var(--gold-bright);
  font-weight: 700;
}
.storage-gold-sep {
  margin: 0 6px;
  color: var(--text-dim);
}
.storage-gold-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.storage-gold-input {
  width: 90px;
  padding: 4px 6px;
  font-size: 13px;
  background: #120c08;
  color: var(--text);
  border: 1px solid #6b4a28;
}
.storage-gold-input:focus {
  outline: none;
  border-color: var(--gold-bright);
}
.storage-gold-btn {
  padding: 4px 10px;
  font-size: 13px;
  background: #2a1c10;
  color: var(--text);
  border: 1px solid #6b4a28;
  cursor: pointer;
}
.storage-gold-btn:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}
.storage-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.storage-col-head h4 {
  margin: 0;
}
.storage-bank-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.storage-bank-sort-select {
  max-width: 150px;
  padding: 3px 4px;
  font-size: 12px;
  background: #120c08;
  color: var(--text);
  border: 1px solid #6b4a28;
  font-family: inherit;
}
.storage-bank-sort-btn {
  padding: 3px 9px;
  font-size: 12px;
  background: #2a1c10;
  color: var(--text);
  border: 1px solid #6b4a28;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.storage-bank-sort-btn:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}
.storage-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.storage-col { min-width: 0; }
.storage-col h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-family: var(--font-display);
  color: var(--gold-bright);
}
.storage-count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: normal;
}
.storage-grid {
  display: grid;
  grid-template-columns: repeat(5, 34px);
  grid-auto-rows: 34px;
  gap: 4px;
  width: max-content;
  padding: 6px;
  background: var(--panel-inner);
  border: 1px solid var(--wood-dark);
  box-shadow: var(--pixel-inset);
}
.storage-slot {
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border: 2px solid var(--wood-mid);
  background: #1a1410;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.storage-slot.empty { cursor: default; }
.storage-slot:hover { border-color: var(--slot-hover); }
.storage-slot.drag-over { border-color: var(--gold-bright); background: #3a2a14; }
.storage-slot.dragging { opacity: 0.4; }
.storage-slot-inner {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
}
.storage-slot-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.storage-qty {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000;
}

#shop-gold {
  font-size: 15px;
  color: var(--gold-bright);
  font-weight: bold;
  margin: 4px 0 8px;
  flex-shrink: 0;
}
#shop-balances {
  margin: 4px 0 0;
  flex-shrink: 0;
}
#shop-balances #shop-gold {
  margin: 0;
}
#shop-currency-balances {
  font-size: 13px;
  color: var(--gold-bright);
  font-weight: bold;
  margin-top: 2px;
}
#shop-status {
  min-height: 16px;
  font-size: 14px;
  color: var(--text-muted);
  margin: 2px 0 0;
  flex-shrink: 0;
}
#shop-status.error { color: var(--danger-soft); }
#shop-status:empty { display: none; }
.shop-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 3px;
  background: #151316;
  border: 3px ridge #786b61;
  box-shadow: inset 0 0 0 1px #09080a, 0 0 0 1px #2b2019;
}
.shop-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
}
.shop-sell-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
.shop-sell-right { min-width: 0; }
.shop-col h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-family: var(--font-display);
  color: var(--gold-bright);
  flex-shrink: 0;
}
.shop-buy-qty {
  margin: 0 0 8px;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  flex-shrink: 0;
}
.shop-buy-qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-buy-qty-label {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.shop-buy-qty-input {
  width: 8ch;
  min-width: 8ch;
  box-sizing: border-box;
  padding: 2px 4px;
  font-size: 13px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.shop-buy-qty-slider {
  flex: 1;
  min-width: 0;
}
.shop-buy-qty-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
#shop-buy-qty-cost {
  color: var(--gold-bright);
}
.shop-row.selected {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.shop-empty { font-size: 14px; color: var(--text-muted); margin: 0; }
#shop-buy-list,
#shop-sell-list {
  flex: 0 0 auto;
  min-height: 0;
}
.shop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  margin-bottom: 6px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
}
.shop-icon {
  width: 36px;
  height: 36px;
  background: var(--slot-bg);
  border: 2px solid var(--slot-border);
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  box-shadow: var(--pixel-inset);
}
.shop-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.shop-info { flex: 1; min-width: 0; }
.shop-name { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-price { font-size: 13px; color: var(--gold-bright); }
.shop-price.sell { color: var(--success-soft); }
.shop-action-btn { padding: 4px 10px; font-size: 13px; flex-shrink: 0; }
.shop-sell-all-btn {
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 10px;
  font-size: 14px;
  flex-shrink: 0;
}
.shop-sell-hint {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-muted);
  flex-shrink: 0;
}
.shop-sell-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.shop-sell-name-filter,
.shop-sell-slot-filter {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
}
.shop-buyback {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  flex-shrink: 0;
}
.shop-buyback-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shop-buyback-title {
  font-size: 13px;
  font-family: var(--font-display);
  color: var(--gold-bright);
}
.shop-buyback-hint {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-muted);
}
.shop-buyback-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(20vh, 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.shop-buyback-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 4px;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  cursor: pointer;
}
.shop-buyback-row:hover:not(:disabled) { border-color: var(--gold-bright); }
.shop-buyback-row:disabled { opacity: 0.5; cursor: not-allowed; }
.shop-buyback-icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
}
.shop-buyback-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.shop-buyback-qty {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 2px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--parchment);
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.shop-buyback-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.shop-buyback-name {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-buyback-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.shop-row.locked .shop-action-btn { opacity: 0.45; }
.shop-row.locked .shop-name { opacity: 0.75; }
.item-sell-lock {
  position: absolute;
  left: 1px;
  bottom: 0;
  top: auto;
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 1px #000);
}
.inv-slot.sell-locked {
  outline: 1px dashed var(--gold);
  outline-offset: -3px;
}

.bar-wrap {
  position: relative;
  width: 100%;
  height: 12px;
  background: var(--slot-bg);
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  box-shadow: var(--pixel-inset);
}
#xp-bar-wrap { height: 14px; }
#mana-bar-wrap { height: 14px; }
.bar-fill {
  height: 100%;
  width: 0%;
  transition: width 0.15s linear;
  position: absolute;
  left: 0;
  top: 0;
}
.bar-fill.hp {
  background: var(--hp);
  transition: none;
  z-index: 1;
}
.bar-fill.hp-ghost {
  background: #ffe082;
  transition: none;
  z-index: 0;
  opacity: 0.95;
}
.bar-fill.mana { background: var(--mana); }
.bar-fill.xp { background: var(--xp); }
.bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px #000, 0 1px 1px #000;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

/* --- Ramka celu --- */
#target-frame {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--panel-bg);
  border: 2px solid var(--gold);
  border-radius: 0;
  box-shadow: var(--pixel-frame);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 16;
}
#target-frame.hidden { display: none; }
#target-name {
  font-size: 15px;
  color: var(--gold-bright);
  font-weight: bold;
  font-family: var(--font-display);
  padding-right: 22px;
  text-align: center;
}
.target-hp-text {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin-top: -2px;
}
#target-clear-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: var(--wood-dark);
  border: 1px solid var(--gold-dim);
  color: var(--parchment);
  cursor: pointer;
  font-size: 12px;
  box-shadow: var(--btn-bevel);
  padding: 0;
  line-height: 1;
  z-index: 2;
}
#target-clear-btn:hover { color: #fff; background: var(--danger); }
.target-info-btn {
  width: 100%;
  margin-top: 2px;
  padding: 5px 8px;
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 100%);
  color: var(--parchment);
  border: 1px solid var(--gold-dim);
  border-radius: 0;
  box-shadow: var(--btn-bevel);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 var(--ui-border);
}
.target-info-btn:hover,
.target-info-btn.active {
  background: linear-gradient(180deg, var(--gold) 0%, var(--wood-mid) 100%);
  color: #fff;
  border-color: var(--gold-bright);
}
.target-info-panel {
  margin-top: 4px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(55, 38, 22, 0.95), rgba(28, 18, 10, 0.98));
  color: var(--text);
  border: 1px solid #5a4020;
  box-shadow: inset 0 1px 0 rgba(232, 196, 120, 0.08);
  max-height: min(42vh, 360px);
  overflow-y: auto;
}
.target-info-panel.hidden { display: none; }
.target-info-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.target-info-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  line-height: 1.25;
}
.target-info-row span:first-child { color: var(--text-muted); }
.target-info-row span:last-child { color: var(--text); font-weight: 600; text-align: right; }
.target-info-loading,
.target-info-empty {
  font-size: 13px;
  color: var(--text-muted);
}
.target-info-loot-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold-dim);
  border-top: 1px solid var(--wood-mid);
  padding-top: 6px;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.target-info-loot {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.target-info-loot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: rgba(42, 26, 14, 0.12);
  border: 1px solid var(--wood-mid);
}
.target-info-loot-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--slot-bg);
  border: 1px solid var(--wood-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.target-info-loot-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.target-info-loot-meta { flex: 1; min-width: 0; }
.target-info-loot-name {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.target-info-loot-chance {
  font-size: 12px;
  color: var(--gold-dim);
  font-weight: 700;
}

/* --- Buffy (góra, na lewo od Panelu Admina) --- */
#buff-bar {
  position: absolute;
  top: 10px;
  right: 340px;
  z-index: 14;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: min(360px, calc(100vw - 360px));
  pointer-events: auto;
}
#buff-bar.hidden { display: none; }
.buff-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border: 2px solid var(--gold-dim);
  background: var(--slot-bg);
  box-shadow: var(--pixel-frame);
  cursor: default;
  overflow: hidden;
}
.buff-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  display: block;
}
.buff-icon-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  font-size: 16px;
}
.buff-stacks {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000;
  line-height: 1;
}
.buff-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #f5e6c8;
  background: rgba(0, 0, 0, 0.55);
  line-height: 1.2;
  padding: 1px 0;
  text-shadow: 1px 1px 0 #000;
}
#buff-tooltip {
  position: fixed;
  z-index: 120;
  max-width: 220px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(48, 32, 18, 0.98), rgba(18, 12, 8, 0.99));
  border: 2px solid #8a6a28;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
  color: var(--text);
  pointer-events: none;
}
#buff-tooltip.hidden { display: none; }
.buff-tip-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold-bright);
  margin-bottom: 2px;
}
.buff-tip-body {
  font-size: 12px;
  line-height: 1.35;
}

/* --- Przycisk panelu admina --- */
#admin-panel-btn {
  position: absolute;
  top: 10px;
  right: 188px;
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 100%);
  color: var(--parchment);
  border: 1px solid var(--gold);
  padding: 8px 14px;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-display);
  z-index: 13;
  box-shadow: var(--btn-bevel);
  text-shadow: 1px 1px 0 var(--ui-border);
}
#admin-panel-btn:hover {
  background: linear-gradient(180deg, var(--gold) 0%, var(--wood-mid) 100%);
  color: #fff;
  border-color: var(--gold-bright);
}

/* --- Baner awansu poziomu --- */
#level-up-banner {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: bold;
  color: var(--gold-bright);
  text-shadow:
    2px 2px 0 var(--ui-border),
    -2px 0 0 var(--gold-dim),
    0 -2px 0 var(--gold-dim);
  opacity: 0;
  transition: opacity 0.2s steps(4);
  pointer-events: none;
  z-index: 20;
  letter-spacing: 0.08em;
}
#level-up-banner.show { opacity: 1; }

#center-banner {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: bold;
  color: #e8c4ff;
  text-shadow:
    2px 2px 0 #1a0a24,
    -1px 0 0 #6a3a8a,
    0 -1px 0 #6a3a8a;
  opacity: 0;
  transition: opacity 0.2s steps(4);
  pointer-events: none;
  z-index: 20;
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 90vw;
}
#center-banner.show { opacity: 1; }

#server-shutdown-banner {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92vw, 520px);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: bold;
  color: #ff8a80;
  text-align: center;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.95),
    0 0 12px rgba(255, 40, 40, 0.45);
  background: rgba(40, 8, 8, 0.82);
  border: 2px solid rgba(255, 82, 82, 0.75);
  border-radius: 6px;
  pointer-events: none;
  z-index: 25;
  letter-spacing: 0.03em;
}
#server-shutdown-banner.hidden { display: none; }

#abyss-rift-timer {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  padding: 4px 12px;
  background: rgba(40, 10, 50, 0.82);
  border: 1px solid #9b59b6;
  color: #e8c4ff;
  font-family: var(--font-ui, sans-serif);
  font-size: 14px;
  pointer-events: none;
  letter-spacing: 0.03em;
}
#abyss-rift-timer.hidden { display: none; }

#instance-timer {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  padding: 4px 14px;
  background: rgba(28, 18, 8, 0.88);
  border: 1px solid #c9852a;
  color: #ffd591;
  font-family: var(--font-ui, sans-serif);
  font-size: 14px;
  pointer-events: none;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  max-width: min(720px, 94vw);
  text-align: center;
  white-space: normal;
}
#instance-timer.urgent {
  border-color: #e74c3c;
  color: #ffb4a8;
  background: rgba(50, 12, 10, 0.9);
}
#instance-timer.grace {
  border-color: #5dade2;
  color: #d6ecff;
  background: rgba(12, 28, 48, 0.9);
}
#instance-timer.grace.urgent {
  border-color: #e74c3c;
  color: #ffb4a8;
  background: rgba(50, 12, 10, 0.9);
}
#instance-timer.cooldown {
  border-color: #c0392b;
  color: #ffc9c0;
  background: rgba(42, 10, 8, 0.92);
}
#instance-timer.cooldown.urgent {
  border-color: #ff6b5a;
  color: #ffe0db;
}
#instance-timer.hidden { display: none; }

/* Przycisk „Zakończ instancję” — ostrzegawczy, stonowana czerwień */
#instance-timer .instance-finish-btn { margin-left: 10px; }
.instance-finish-btn {
  pointer-events: auto;
  padding: 3px 10px;
  background: rgba(70, 14, 12, 0.92);
  border: 1px solid #b03a2e;
  color: #ffc9c0;
  font-family: var(--font-ui, sans-serif);
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 28px;
}
.instance-finish-btn:hover:not(:disabled) { background: rgba(110, 22, 18, 0.95); border-color: #e74c3c; }
.instance-finish-btn:disabled { opacity: 0.55; cursor: default; }
.instance-finish-btn.hidden { display: none; }

.instance-finish-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.62);
  pointer-events: auto;
}
.instance-finish-overlay.hidden { display: none; }
.instance-finish-dialog {
  width: min(440px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: rgba(24, 14, 12, 0.98);
  border: 1px solid #b03a2e;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7);
  color: #e8d8c8;
  font-family: var(--font-ui, sans-serif);
}
.instance-finish-head {
  padding: 10px 14px;
  background: rgba(90, 20, 16, 0.9);
  border-bottom: 1px solid #b03a2e;
  color: #ffd0c8;
  font-size: 16px;
  font-weight: 700;
}
.instance-finish-body { padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.instance-finish-body p { margin: 0 0 10px; }
.instance-finish-name { color: #ffd591; font-weight: 700; }
.instance-finish-key-warning { color: #ff8a7a; font-weight: 700; font-size: 15px; }
.instance-finish-party { color: #ffd591; border-left: 3px solid #c9852a; padding-left: 8px; }
.instance-finish-note { color: #b9a898; font-size: 13px; }
.instance-finish-error { color: #ff8a7a; }
.instance-finish-body .hidden { display: none; }
.instance-finish-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 10px 14px 14px;
}
.instance-finish-actions button { min-height: 40px; padding: 6px 16px; touch-action: manipulation; }
.instance-finish-confirm {
  background: #8e2a20;
  border: 1px solid #e74c3c;
  color: #fff0ec;
  font-weight: 700;
  cursor: pointer;
}
.instance-finish-confirm:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 600px) {
  .instance-finish-actions { flex-direction: column-reverse; }
  .instance-finish-actions button { width: 100%; }
}

/* Telefon: licznik + „Zakończ instancję” w wolnym pasie obok #hud (nad czatem), zwarty układ pionowy —
   nie zasłania HUD, minimapy, sterowania ani hotbaru. Pod #hud/czatem był niewidoczny. */
html[data-ui-mode="phone"] #instance-timer {
  top: 6px;
  left: auto;
  right: 58px;
  width: max-content;
  min-width: min(100px, 40%);
  max-width: calc(100% - min(46vw, 200px) - 84px);
  transform: none;
  z-index: 35;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  box-sizing: border-box;
}
html[data-ui-mode="phone"] #instance-timer.hidden { display: none; }
html[data-ui-mode="phone"] #instance-timer .instance-finish-btn {
  margin: 0;
  width: 100%;
  /* --ui-zoom (skala UI) kompensuje zoom #ui-root: cel dotyku ≥ 40 px widocznych także przy skali 0,7 */
  min-height: calc(40px / var(--ui-zoom, 1));
  padding: calc(4px / var(--ui-zoom, 1)) 4px;
  font-size: calc(13px / var(--ui-zoom, 1));
  line-height: 1.2;
  white-space: normal;
}
html[data-ui-mode="phone"] #instance-timer .instance-finish-btn.hidden { display: none; }
@media (orientation: landscape) {
  /* Niski, szeroki ekran: tekst i przycisk w jednym rzędzie — timer nie wchodzi na kolumnę przycisków akcji. */
  html[data-ui-mode="phone"] #instance-timer { flex-direction: row; align-items: center; gap: 8px; right: 68px; }
  html[data-ui-mode="phone"] #instance-timer #instance-timer-text { flex: 1 1 0; min-width: 0; white-space: normal; text-align: left; }
  html[data-ui-mode="phone"] #instance-timer .instance-finish-btn { width: auto; flex: 0 0 auto; max-width: 100%; min-height: calc(36px / var(--ui-zoom, 1)); white-space: nowrap; }
}

.instance-portal-panel {
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
  width: 360px;
  max-width: 94vw;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  z-index: 31;
  box-sizing: border-box;
  color: var(--text);
}
.instance-portal-panel.hidden { display: none !important; }
.instance-portal-panel.boss-preview { width: 520px; }
.instance-portal-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.instance-portal-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.instance-portal-label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.instance-portal-value {
  font-size: 14px;
  color: var(--text);
}
.instance-portal-hint {
  font-size: 12px;
  color: var(--text-dim);
}
.instance-portal-hint.ok { color: #8fd18f; }
.instance-portal-hint.bad { color: #f0a0a0; }
.instance-portal-key-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.instance-portal-key-slot {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  box-sizing: border-box;
  border: 2px solid var(--slot-border);
  background: var(--slot-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}
.instance-portal-key-slot img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  object-fit: contain;
  pointer-events: none;
}
.instance-portal-key-fallback {
  font-size: 14px;
  color: var(--text-dim);
}
.instance-portal-key-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.instance-portal-key-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.instance-portal-key-status {
  font-size: 12px;
  color: var(--text-dim);
}
.instance-portal-key-status.ok { color: #8fd18f; }
.instance-portal-key-status.bad { color: #f0a0a0; }
.instance-portal-status {
  min-height: 16px;
  font-size: 12px;
  color: #f0c080;
}
.instance-portal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

#server-lag-alert {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(520px, 92%);
  padding: 10px 12px;
  border: 1px solid #ffc107;
  background: rgba(40, 28, 8, 0.94);
  color: #ffe082;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
#server-lag-alert.hidden { display: none; }
html[data-ui-mode="phone"] #server-lag-alert { z-index: 46; } /* nad przyciskami akcji telefonu (41), żeby ✕ było dotykalne */
#server-lag-alert.status-critical {
  border-color: #f44336;
  color: #ef9a9a;
  background: rgba(48, 16, 16, 0.94);
}
#server-lag-alert-title {
  flex-shrink: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#server-lag-alert-msg {
  flex: 1;
  min-width: 0;
}
#server-lag-alert-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
#admin-panel-btn.lag-pulse {
  animation: admin-lag-pulse 1.1s steps(2) infinite;
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}
#admin-panel-btn.lag-pulse-critical {
  outline-color: #f44336;
}
@keyframes admin-lag-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* --- Ekwipunek --- */
#inventory-panel {
  position: absolute;
  top: 80px;
  right: 20px;
  left: auto;
  transform: none;
  width: auto;
  min-width: 360px;
  max-width: min(96vw, 520px);
  padding: 0 12px 12px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
#inventory-panel.hidden { display: none; }
#inventory-panel .panel-header { margin: 0 -12px 0; display: flex; align-items: center; gap: 6px; }
#inventory-body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  margin-top: 6px;
  min-width: 0;
}
#inventory-equip-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 6px 8px;
  background: linear-gradient(180deg, rgba(55, 38, 22, 0.95), rgba(28, 18, 10, 0.98));
  border: 1px solid #5a4020;
  box-shadow: inset 0 1px 0 rgba(232, 196, 120, 0.1);
}
#inventory-equip-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
  align-content: start;
  justify-items: center;
}
#inventory-bag-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#inventory-panel .equip-slot-label {
  max-width: 52px;
  font-size: 10px;
}
#inventory-panel .equip-slot-box {
  width: 34px;
  height: 34px;
}
#inventory-title { font-size: 15px; color: var(--gold-bright); font-weight: bold; flex: 1; min-width: 0; }
.inventory-sort-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.inventory-sort-btn,
.inventory-sort-caret {
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 7px;
  font-family: inherit;
  line-height: 1.2;
}
.inventory-sort-btn {
  border-right: none;
}
.inventory-sort-caret {
  padding: 3px 5px;
  min-width: 22px;
}
.inventory-sort-btn:hover,
.inventory-sort-caret:hover,
.inventory-sort-btn.active,
.inventory-sort-caret.open {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: var(--wood-mid);
}
.inventory-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 140px;
  background: var(--panel-bg);
  border: 1px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  display: flex;
  flex-direction: column;
  padding: 2px;
}
.inventory-sort-menu.hidden { display: none; }
.inventory-sort-option {
  background: transparent;
  border: none;
  color: var(--text-dim);
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.inventory-sort-option:hover {
  background: var(--wood-mid);
  color: var(--text);
}
.inventory-sort-option.active {
  color: var(--gold-bright);
  background: var(--panel-inner);
}
#inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, 34px);
  grid-template-rows: repeat(10, 34px);
  gap: 4px;
  margin-top: 0;
  width: max-content;
  flex: 0 0 auto;
  padding: 6px;
  background: var(--panel-inner);
  border: 1px solid var(--wood-dark);
  box-shadow: var(--pixel-inset);
}
#inventory-bag-col .bag-tabs {
  margin-top: 0;
  margin-bottom: 4px;
}
.bag-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.bag-tabs[hidden] { display: none !important; }
.bag-tab-btn {
  min-width: 28px;
  padding: 3px 8px;
  border: 1px solid var(--wood-dark);
  background: var(--panel-inner);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
.bag-tab-btn:hover { border-color: var(--slot-hover); }
.bag-tab-btn.drag-over { border-color: var(--gold-bright); background: #3a2a14; color: var(--gold-bright); }
.bag-tab-btn.active {
  background: var(--wood-mid);
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.premium-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: bold;
  background: #5d4037;
  color: #ffd54f;
  vertical-align: middle;
}
#loot-filter-panel {
  width: min(440px, 94vw);
  max-width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1) - 16px) !important;
  max-height: min(78vh, 680px);
}
#loot-filter-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}
#loot-filter-panel > .panel-header,
#loot-filter-panel > .enhance-panel-tabs {
  flex-shrink: 0;
}
#loot-filter-panel > .loot-filter-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
#loot-manager-individual-wrap .loot-filter-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
#loot-manager-item-search {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
}
#loot-manager-item-action {
  min-width: 0;
  width: 100%;
}
.loot-filter-body {
  padding: 8px 10px 12px;
  overflow-y: auto;
  max-height: calc(min(78vh, 680px) - 80px);
}
.loot-manager-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.loot-manager-rarity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.loot-manager-rarity-badge {
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.loot-manager-select {
  flex: 0 0 190px;
  max-width: 190px;
  font-size: 11px;
}
.loot-manager-section-wrap.locked-section,
.loot-manager-advanced-grid.locked-section {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}
.loot-manager-advanced-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.loot-manager-adv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.loot-manager-adv-row .settings-row-label {
  font-size: 12px;
  margin: 0;
  flex: 1;
}
.loot-manager-adv-row input,
.loot-manager-adv-row select {
  width: 140px;
  flex: 0 0 140px;
}
.loot-manager-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  justify-content: space-between;
}
.loot-manager-actions-row button {
  flex: 1;
}
.hint-text.lock-hint {
  color: #ffb74d;
  font-style: italic;
}
.loot-filter-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  margin-bottom: 8px;
}
.loot-filter-stats label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.loot-filter-item-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.loot-filter-item-row input {
  flex: 1;
}
.loot-filter-suggest {
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid var(--wood-dark);
  background: var(--panel-inner);
  margin-bottom: 6px;
}
.loot-filter-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 4px 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
.loot-filter-suggest button:hover {
  background: var(--wood-mid);
}
.loot-filter-item-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.loot-filter-item-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  font-size: 12px;
}
.loot-filter-item-list li button {
  flex: 0 0 auto;
}
#inventory-trash-slot.trash-slot {
  width: 100%;
  max-width: none;
  height: 40px;
  margin-top: 6px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  border-color: #6d4c41;
  background: #2a1c18;
  justify-content: center;
  gap: 6px;
}
#inventory-trash-slot.trash-slot:hover {
  border-color: #ef5350;
  background: #3a2220;
}
#inventory-trash-slot.trash-slot.drag-over {
  border-color: #ef5350;
  background: #4a2a28;
}
.trash-slot-icon {
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}
.trash-slot-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 0;
  background: #ef5350;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
  pointer-events: none;
}
.trash-slot-count.hidden { display: none; }
.trash-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  min-height: 80px;
}
.trash-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
}
.trash-row .auction-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.trash-row-info { flex: 1; min-width: 0; }
.trash-row-name { font-size: 12px; color: #eee; }
.trash-row-meta { font-size: 11px; color: var(--text-muted); }
.trash-row-timer { font-size: 11px; color: #ffb74d; white-space: nowrap; }
.inv-slot {
  width: 34px;
  height: 34px;
  background: var(--slot-bg);
  border: 2px solid var(--slot-border);
  border-radius: 0;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  position: relative;
  user-select: none;
  box-sizing: border-box;
  box-shadow: inset 1px 1px 0 #0008;
}
.inv-slot.empty { cursor: default; }
.inv-slot:hover { border-color: var(--slot-hover); }
.inv-slot.drag-over { border-color: var(--gold-bright); background: #3a2a14; }
.inv-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.inv-slot.dragging { opacity: 0.4; }
.inv-slot.item-highlight {
  overflow: visible;
  z-index: 2;
  animation: inv-item-highlight-glow 1.15s ease-in-out infinite;
}
@keyframes inv-item-highlight-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px var(--gold-bright),
      0 0 6px 2px rgba(240, 192, 64, 0.55),
      inset 1px 1px 0 #0008;
  }
  50% {
    box-shadow:
      0 0 0 2px #ffe082,
      0 0 12px 4px rgba(255, 224, 130, 0.85),
      inset 1px 1px 0 #0008;
  }
}
.item-sprite-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-sprite-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.item-qty {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
  line-height: 1;
  pointer-events: none;
}
.item-upgrade {
  position: absolute;
  left: 1px;
  top: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-bright);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
  line-height: 1;
  pointer-events: none;
}

/* Rozciąganie okien — chat/whisper: powiększanie bez skali treści */
.window-resizable {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 160px;
  min-height: 120px;
  resize: none;
}
.window-resizable.window-resize-grow {
  overflow: hidden;
}
.window-scale-inner {
  box-sizing: border-box;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.window-resize-handle {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 100;
  touch-action: none;
  border-radius: 0;
  background:
    linear-gradient(135deg, transparent 45%, var(--gold-dim) 45%, var(--gold-dim) 55%, transparent 55%),
    linear-gradient(135deg, transparent 60%, var(--gold) 60%, var(--gold) 70%, transparent 70%),
    linear-gradient(135deg, transparent 75%, var(--gold-bright) 75%);
  opacity: 0.85;
  pointer-events: auto;
}
.window-resizable:hover .window-resize-handle,
.window-resize-handle:hover {
  opacity: 1;
  background-color: transparent;
}
body.window-resizing {
  cursor: nwse-resize !important;
  user-select: none !important;
}
body.window-resizing iframe {
  pointer-events: none !important;
}

/* --- Okno postaci --- */
#character-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  padding: 0 10px 10px;
  z-index: 16;
}
#character-panel.hidden { display: none; }
#character-panel .panel-header { margin: 0 -10px 0; }
#character-body {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  align-items: stretch;
  min-height: 0;
}
.character-col-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-align: center;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(138, 104, 16, 0.45);
}
.equip-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.equip-slot-label { font-size: 11px; color: var(--text-muted); text-align: center; max-width: 68px; line-height: 1.15; }
.equip-slot-box {
  width: 48px;
  height: 48px;
  background: var(--slot-bg);
  border: 2px dashed var(--slot-border);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--pixel-inset);
  position: relative;
}
.equip-slot-box.filled { border-style: solid; cursor: grab; border-color: var(--gold-dim); }
.equip-slot-box.dragging { opacity: 0.4; }
.equip-slot-box img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.equip-slot-box.drag-over { border-color: var(--gold-bright); background: #3a2a14; }

/* --- Przeciąganie przedmiotu na slot EQ (PC drag&drop + palec na telefonie) --- */
.equip-slot.drag-over .equip-slot-box { border-color: var(--gold-bright); background: #3a2a14; }
.equip-slot.equip-drop-match .equip-slot-box {
  border-color: var(--gold);
  box-shadow: var(--pixel-inset), 0 0 6px 1px rgba(240, 192, 64, 0.5);
}
#shop-buy-list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; }
#shop-panel .shop-footer #shop-gold,
#shop-panel .shop-footer #shop-currency-balances { color: #3b2a19; font-size: 12px; font-weight: normal; }
#shop-panel .shop-footer #shop-status { color: #513c27; }
#shop-panel .shop-footer #shop-status.error { color: #a32121; }
.equip-slot.equip-drop-match.drag-over .equip-slot-box {
  border-color: var(--gold-bright);
  background: #4a3414;
}
.equip-slot.drop-reject .equip-slot-box {
  border-color: #ff5252 !important;
  background: #3a1414;
  animation: equip-slot-drop-reject 0.32s ease-in-out;
}
@keyframes equip-slot-drop-reject {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Duch przedmiotu pod palcem (#ui-root → left/top w layout px, jak tooltipy). */
.item-drag-ghost {
  position: fixed;
  z-index: 9999;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slot-bg);
  border: 2px solid var(--gold);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
  opacity: 0.95;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
/* #ui-root > * ustawia pointer-events: auto — duch musi zostać "przezroczysty" dla palca. */
#ui-root > .item-drag-ghost { pointer-events: none; }
.item-drag-ghost.hidden { display: none; }
.item-drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
html.inv-item-dragging { user-select: none; }

#character-hero {
  flex: 0 0 160px;
  display: flex;
  min-width: 0;
}
#character-hero-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 10px 12px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(90, 64, 32, 0.45), transparent 62%),
    linear-gradient(180deg, rgba(42, 30, 18, 0.55), rgba(18, 12, 8, 0.92));
  border: 1px solid #5a4020;
  box-shadow: inset 0 1px 0 rgba(232, 196, 120, 0.1);
}
#character-hero-preview {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 112px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex: 0 0 auto;
  pointer-events: none;
}
.character-hero-crest {
  position: absolute;
  inset: 10px 12px 108px;
  border: 1px solid rgba(212, 160, 23, 0.22);
  box-shadow:
    inset 0 0 0 8px rgba(20, 12, 8, 0.25),
    inset 0 0 40px rgba(0, 0, 0, 0.35);
  opacity: 0.55;
  pointer-events: none;
}
.character-hero-crest::before,
.character-hero-crest::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(212, 160, 23, 0.18);
  pointer-events: none;
}
.character-hero-crest::before {
  width: 72%;
  height: 72%;
}
.character-hero-crest::after {
  width: 42%;
  height: 42%;
  border-color: rgba(240, 192, 64, 0.2);
}
#character-hero-nameplate {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(55, 38, 22, 0.95), rgba(28, 18, 10, 0.98));
  border: 1px solid #6e5424;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  cursor: help;
}
#character-hero-nameplate #char-stat-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.03em;
  word-break: break-word;
}
#character-hero-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.character-hero-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(18, 12, 8, 0.72);
  border: 1px solid rgba(90, 64, 32, 0.7);
  cursor: help;
}
.character-hero-badge-label {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.character-hero-badge span:last-child {
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 13px;
}

#character-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  background: linear-gradient(180deg, rgba(55, 38, 22, 0.95), rgba(28, 18, 10, 0.98));
  color: var(--text);
  padding: 8px;
  border: 1px solid #5a4020;
  box-shadow: inset 0 1px 0 rgba(232, 196, 120, 0.1);
  min-width: 0;
  min-height: 0;
  overflow: auto;
}
#character-progress {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(90, 64, 32, 0.45);
}
.char-progress-row { cursor: help; }
.char-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 12px;
}
.char-progress-head span:first-child {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.char-progress-head span:last-child {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#char-xp-bar-wrap,
#char-hp-bar-wrap,
#char-mana-bar-wrap {
  height: 10px;
  margin: 0;
}
#character-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 6px;
  align-content: start;
}
#character-stat-grid .char-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  color: var(--text);
  padding: 4px 6px;
  background: rgba(18, 12, 8, 0.55);
  border: 1px solid rgba(90, 64, 32, 0.55);
  min-width: 0;
}
.char-stat-row[data-stat-key] { cursor: help; }
#character-stat-grid .char-stat-row span:first-child {
  color: var(--text-muted);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#character-stat-grid .char-stat-row span:last-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.char-stat-row { display: flex; justify-content: space-between; color: var(--text); }
.char-stat-row span:first-child { color: var(--text-muted); }

/* --- Tooltip statystyki postaci --- */
#char-stat-tooltip {
  position: fixed;
  z-index: 120;
  max-width: 260px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(48, 32, 18, 0.98), rgba(18, 12, 8, 0.99));
  border: 2px solid #8a6a28;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
  color: var(--text);
  pointer-events: none;
  line-height: 1.35;
  font-size: 12px;
}
#char-stat-tooltip.hidden { display: none; }
#char-stat-tooltip .cst-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold-bright);
  margin-bottom: 2px;
}
#char-stat-tooltip .cst-body {
  font-size: 12px;
  line-height: 1.35;
}

/* --- Tooltip przedmiotu --- */
#item-tooltip,
#item-tooltip-compare,
.upgrade-result-tooltip,
#death-echo-tooltip {
  position: fixed;
  z-index: 100;
  background: linear-gradient(180deg, rgba(48, 32, 18, 0.98), rgba(18, 12, 8, 0.99));
  border: 2px solid #8a6a28;
  border-radius: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
  padding: 8px 10px;
  font-size: 15px;
  color: var(--text);
  max-width: 240px;
  pointer-events: none;
  line-height: 1.45;
}
/* Tooltip dotykowy (pierwsze stuknięcie w przedmiot): przewijany, nigdy poza ekranem; wymiary ustawia TooltipPosition. */
#item-tooltip.tt-touch {
  pointer-events: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  z-index: 1100;
}
/* Wybrany (stuknięty) przedmiot — wyraźna ramka, spójna ze złotą stylistyką slotów. */
.inv-slot.item-tap-selected,
.equip-slot-box.item-tap-selected,
.storage-slot.item-tap-selected {
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 0 2px var(--gold-bright), 0 0 10px 2px rgba(240, 192, 64, 0.6), inset 1px 1px 0 #0008;
  position: relative;
  z-index: 2;
}
#item-tooltip.hidden,
#item-tooltip-compare.hidden,
#death-echo-tooltip.hidden { display: none; }
#death-echo-tooltip {
  border-color: #6a7888;
  color: #c8d0d8;
  font-style: italic;
  max-width: 280px;
}
#item-tooltip .tt-name,
#item-tooltip-compare .tt-name,
.upgrade-result-tooltip .tt-name { font-weight: bold; margin-bottom: 2px; font-family: var(--font-display); font-size: 16px; }
#item-tooltip .tt-rarity,
#item-tooltip-compare .tt-rarity,
.upgrade-result-tooltip .tt-rarity { font-size: 13px; margin-bottom: 4px; }
#item-tooltip .tt-desc,
#item-tooltip-compare .tt-desc,
.upgrade-result-tooltip .tt-desc {
  color: #a89070;
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 6px;
  max-width: 260px;
}
#item-tooltip .tt-stat,
#item-tooltip-compare .tt-stat,
.upgrade-result-tooltip .tt-stat { color: #8fd48f; }
#item-tooltip .tt-stat-fixed,
#item-tooltip-compare .tt-stat-fixed,
.upgrade-result-tooltip .tt-stat-fixed { color: #f2e6c8; }
#item-tooltip .tt-stat-rolled,
#item-tooltip-compare .tt-stat-rolled,
.upgrade-result-tooltip .tt-stat-rolled { color: #8fd48f; }
#item-tooltip .tt-stat-upgrade,
#item-tooltip-compare .tt-stat-upgrade,
.upgrade-result-tooltip .tt-stat-upgrade { color: #e8c060; font-weight: 600; }
#item-tooltip .tt-meta,
#item-tooltip-compare .tt-meta,
.upgrade-result-tooltip .tt-meta { color: #8a7050; font-size: 13px; margin-top: 4px; }
#item-tooltip .tt-auction,
#item-tooltip-compare .tt-auction {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(138, 104, 16, 0.45);
  color: var(--gold-bright);
  font-size: 13px;
}
#item-tooltip .tt-req,
#item-tooltip-compare .tt-req,
.upgrade-result-tooltip .tt-req { font-size: 14px; margin: 2px 0 4px; }
#item-tooltip .tt-req.ok,
#item-tooltip-compare .tt-req.ok,
.upgrade-result-tooltip .tt-req.ok { color: #2a7a2a; }
#item-tooltip .tt-req.fail,
#item-tooltip-compare .tt-req.fail,
.upgrade-result-tooltip .tt-req.fail { color: var(--danger); }
#item-tooltip-compare {
  border-color: var(--gold-dim);
}
#item-tooltip.tt-frame-mythic,
#item-tooltip-compare.tt-frame-mythic {
  border-color: #ff2d6a;
  background: linear-gradient(180deg, rgba(62, 16, 36, 0.98), rgba(16, 6, 14, 0.99));
  box-shadow:
    0 0 0 1px rgba(255, 45, 106, 0.4),
    0 0 22px rgba(255, 45, 106, 0.28),
    0 10px 28px rgba(0, 0, 0, 0.75);
  max-width: 280px;
}
#item-tooltip .tt-mythic-banner,
#item-tooltip-compare .tt-mythic-banner,
.upgrade-result-tooltip .tt-mythic-banner {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff2d6a;
  margin: 0 0 6px;
  text-shadow: 0 0 10px rgba(255, 45, 106, 0.65);
}
#item-tooltip .tt-name-mythic,
#item-tooltip-compare .tt-name-mythic,
.upgrade-result-tooltip .tt-name-mythic {
  font-size: 18px;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(255, 45, 106, 0.55);
  margin-bottom: 2px;
}
#item-tooltip .tt-rarity-mythic,
#item-tooltip-compare .tt-rarity-mythic,
.upgrade-result-tooltip .tt-rarity-mythic {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(255, 45, 106, 0.4);
}
#item-tooltip .tt-desc-mythic,
#item-tooltip-compare .tt-desc-mythic,
.upgrade-result-tooltip .tt-desc-mythic {
  color: #ff9ec0;
  border-left: 2px solid #ff2d6a;
  padding: 2px 0 2px 8px;
  font-style: italic;
  margin-bottom: 8px;
}
#item-tooltip .tt-mythic-hint,
#item-tooltip-compare .tt-mythic-hint {
  color: #c87898;
  font-size: 12px;
  margin-top: 4px;
}
#item-tooltip .tt-badge,
#item-tooltip-compare .tt-badge,
.upgrade-result-tooltip .tt-badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

/* --- Hotbar skill tooltip --- */
#hotbar-skill-tooltip {
  position: fixed;
  z-index: 2100;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  border-radius: 4px;
  padding: 8px 12px;
  min-width: 140px;
  max-width: 260px;
  pointer-events: none;
  box-shadow: 4px 4px 0 #00000088, var(--pixel-frame);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
}
#hotbar-skill-tooltip.hidden { display: none; }
#hotbar-skill-tooltip .ht-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: bold;
  color: var(--gold-bright);
  margin-bottom: 3px;
}
#hotbar-skill-tooltip .ht-level {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 3px;
}
#hotbar-skill-tooltip .ht-desc {
  font-size: 13px;
  color: var(--parchment-mid);
}
#hotbar-skill-tooltip .ht-dmg {
  font-size: 13px;
  color: #e07840;
  margin-top: 5px;
  border-top: 1px solid var(--wood-mid);
  padding-top: 4px;
}

/* --- Okno umiejętności --- */
#skill-window.skill-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 372px;
  max-height: min(640px, calc(100vh - 120px));
  padding: 0 12px 12px;
  z-index: 17;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 78, 32, 0.42), transparent 52%),
    radial-gradient(ellipse at 80% 100%, rgba(40, 24, 12, 0.5), transparent 45%),
    linear-gradient(180deg, #3d2a18 0%, #24160c 100%);
  border: 3px solid #6e5424;
  outline: 1px solid #c9a227;
  outline-offset: -5px;
  box-shadow:
    0 0 0 2px #2a1a0c,
    0 0 0 5px #8a6a28,
    0 14px 36px rgba(0, 0, 0, 0.65),
    inset 0 0 60px rgba(0, 0, 0, 0.28);
}
#skill-window.skill-panel::before,
#skill-window.skill-panel::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 4;
  border: 2px solid #c9a227;
  opacity: 0.75;
}
#skill-window.skill-panel::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}
#skill-window.skill-panel::after {
  top: 6px;
  right: 6px;
  border-left: none;
  border-bottom: none;
}
#skill-window.hidden { display: none; }
#skill-window .panel-header {
  margin: 0 -12px 0;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(200, 150, 60, 0.18), transparent 70%),
    linear-gradient(180deg, var(--wood-mid) 0%, var(--wood) 100%);
  flex-shrink: 0;
}
#skill-window .skill-window-title {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 15px;
}

/* --- Graf Główny pasywek (styl PoE / mockup) --- */
#passive-tree-window.passive-tree-panel {
  container: passive-tree-panel / inline-size;
  position: absolute;
  top: 8px;
  left: 8px;
  /* Sztywny fallback; inline z WindowDrag/admin wygrywa. Fit = scale wrap. */
  width: 1100px;
  height: 720px;
  max-width: min(1100px, calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1) - 16px));
  max-height: min(720px, calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1) - 16px));
  padding: 0 14px 12px;
  z-index: 18;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 28%, #3d2c1c 0%, #22160e 48%, #0e0a08 100%);
  border: 4px solid #6e5424;
  outline: 1px solid #c9a227;
  outline-offset: -6px;
  box-shadow:
    0 0 0 2px #2a1a0c,
    0 0 0 5px #8a6a28,
    0 14px 48px rgba(0, 0, 0, 0.72),
    inset 0 0 90px rgba(0, 0, 0, 0.4);
}
#passive-tree-window.passive-tree-panel::before,
#passive-tree-window.passive-tree-panel::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 4;
  border: 2px solid #c9a227;
  opacity: 0.85;
}
#passive-tree-window.passive-tree-panel::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
  box-shadow: inset 2px 2px 0 rgba(201, 162, 39, 0.25);
}
#passive-tree-window.passive-tree-panel::after {
  bottom: 6px;
  right: 6px;
  border-left: none;
  border-top: none;
  box-shadow: inset -2px -2px 0 rgba(201, 162, 39, 0.25);
}
#passive-tree-window.hidden { display: none !important; }
#passive-tree-window .panel-header {
  margin: 0 -14px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content 76px;
  column-gap: 8px;
  justify-content: initial;
  position: relative;
  background: linear-gradient(180deg, #5c4228 0%, #352414 100%);
  border-bottom: 2px solid #c9a227;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  cursor: move;
  user-select: none;
}
#passive-tree-window .panel-header-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}
#passive-tree-window .panel-close-btn {
  position: static;
  right: auto;
  top: auto;
  transform: none;
}
#passive-tree-window .panel-lock-btn {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  margin-right: 0;
}
.passive-tree-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: Cinzel, Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: #f0d080;
  text-shadow: 0 0 14px rgba(240, 192, 64, 0.4), 0 1px 0 #1a1008;
}
#passive-tree-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
  min-width: 0;
}
.passive-tree-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.passive-tree-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.passive-tree-points-pill {
  font-family: Cinzel, Georgia, 'Times New Roman', serif;
  font-size: 13px;
  color: #d8c090;
  background: rgba(12, 8, 6, 0.82);
  border: 1px solid #8a6a28;
  border-radius: 2px;
  padding: 6px 14px;
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(201, 162, 39, 0.15);
}
.pt-glow-num {
  color: #ffb020;
  text-shadow: 0 0 8px rgba(255, 160, 30, 0.75);
  font-weight: 700;
}
.passive-tree-save-btn {
  font-family: Cinzel, Georgia, 'Times New Roman', serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #d0e0c0;
  background: linear-gradient(180deg, #2a4a28 0%, #142414 100%);
  border: 1px solid #6a9050;
  padding: 7px 16px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(200, 255, 180, 0.12);
}
.passive-tree-save-btn.has-changes {
  color: #e8ffe0;
  border-color: #90d060;
  box-shadow: 0 0 10px rgba(80, 180, 60, 0.35);
}
.passive-tree-save-btn:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}
.passive-tree-reset-btn {
  font-family: Cinzel, Georgia, 'Times New Roman', serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #f0c8a0;
  background: linear-gradient(180deg, #7a3024 0%, #3a1410 100%);
  border: 1px solid #c97840;
  padding: 7px 16px;
  cursor: pointer;
  box-shadow:
    0 0 10px rgba(180, 60, 30, 0.3),
    inset 0 1px 0 rgba(255, 200, 150, 0.15);
}
.passive-tree-reset-btn:hover {
  border-color: #f0a060;
  color: #fff0e0;
  background: linear-gradient(180deg, #8a3828 0%, #4a1810 100%);
}
.passive-tree-import-btn {
  font-family: Cinzel, Georgia, 'Times New Roman', serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #d8e8ff;
  background: linear-gradient(180deg, #284878 0%, #142438 100%);
  border: 1px solid #5090c8;
  padding: 7px 12px;
  cursor: pointer;
}
.passive-tree-import-btn:hover {
  border-color: #90c8f0;
  color: #f0f8ff;
  background: linear-gradient(180deg, #305888 0%, #183048 100%);
}
.build-import-panel {
  width: 440px;
  max-width: 440px;
}
.build-import-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  width: 100%;
}
.build-import-select,
.build-import-code {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  color: #e8dcc0;
  background: #1a120c;
  border: 1px solid #6a5030;
  padding: 6px 8px;
  resize: vertical;
}
.build-import-status {
  min-height: 16px;
  margin: 4px 0 0;
  font-size: 11px;
  color: #a8d8a0;
}
.build-import-status.is-error {
  color: #f0a090;
}
#passive-tree-status {
  min-height: 14px;
  margin: 0 0 2px;
  font-size: 11px;
  color: #9a8060;
}
#passive-tree-status.error { color: #e07840; }
.passive-tree-hint {
  margin: 0 0 4px;
  font-size: 11px;
  color: #7a6a50;
}
#passive-tree-body {
  flex: 1;
  min-height: 320px;
  display: flex;
  gap: 8px;
  overflow: hidden;
}
#passive-tree-viewport {
  flex: 1;
  min-width: 0;
  min-height: 280px;
  border: 2px solid #6a5028;
  background:
    radial-gradient(circle at 50% 48%, #2e2418 0%, #18120c 50%, #080604 100%);
  overflow: hidden;
  cursor: grab;
  position: relative;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.75);
  -webkit-user-select: none;
  user-select: none;
}
.passive-tree-bonuses {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(10, 6, 4, 0.88);
  border: 1px solid #8a6a28;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.pt-bonuses-title {
  font-family: Cinzel, Georgia, 'Times New Roman', serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #f0d080;
  text-align: center;
  padding: 8px 6px;
  border-bottom: 1px solid #6a5028;
  background: linear-gradient(180deg, #3a2818 0%, #1a100a 100%);
}
.pt-bonuses-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 8px;
  font-size: 11px;
  color: #d8c8a8;
}
.pt-bonuses-empty {
  color: #8a7860;
  font-style: italic;
  padding: 6px 2px;
  line-height: 1.35;
}
.pt-bonuses-section {
  margin-top: 8px;
}
.pt-bonuses-section:first-child {
  margin-top: 2px;
}
.pt-bonuses-section-title {
  font-family: Cinzel, Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #c9a860;
  text-transform: uppercase;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(138, 106, 40, 0.45);
  padding-bottom: 2px;
}
.pt-bonus-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  line-height: 1.3;
}
.pt-bonus-label {
  color: #c8b898;
  min-width: 0;
}
.pt-bonus-value {
  color: #7ec87a;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(80, 160, 60, 0.35);
}
.pt-bonus-ks {
  margin: 4px 0 6px;
  padding: 4px 6px;
  background: rgba(40, 24, 12, 0.65);
  border: 1px solid #6a5028;
}
.pt-bonus-ks-name {
  color: #ffc040;
  font-family: Cinzel, Georgia, serif;
  font-size: 11px;
  margin-bottom: 2px;
}
.pt-bonus-ks-desc {
  color: #a89878;
  font-size: 10px;
  line-height: 1.3;
}
.passive-tree-vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.62) 100%);
}
#passive-tree-svg,
.passive-tree-svg-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
#passive-tree-svg *,
#passive-admin-svg *,
.passive-tree-svg-surface * {
  -webkit-user-select: none;
  user-select: none;
}
#passive-tree-svg.pt-panning,
#passive-tree-svg.pt-panning *,
#passive-admin-svg.pt-panning,
#passive-admin-svg.pt-panning *,
.passive-tree-svg-surface.pt-panning,
.passive-tree-svg-surface.pt-panning * {
  cursor: grabbing !important;
}
.pt-guide-ring {
  fill: none;
  stroke: rgba(140, 105, 55, 0.16);
  stroke-width: 1.5;
}
.pt-start-ray {
  stroke: rgba(255, 180, 40, 0.35);
  stroke-width: 2;
  fill: none;
}
.pt-edge {
  stroke: #3a3228;
  stroke-width: 2.2;
  fill: none;
  opacity: 0.8;
}
.pt-edge.lit {
  stroke: #ff9a18;
  stroke-width: 6;
  opacity: 1;
  filter: url(#pt-glow);
}
.pt-edge.lit-core {
  stroke: #ffe9a8;
  stroke-width: 2.2;
  opacity: 0.95;
  fill: none;
}
.pt-node { cursor: pointer; }
.pt-node:hover .pt-outer {
  stroke: var(--pt-fam-hover, #e8c060);
}
.pt-node.selected .pt-outer {
  stroke: #ffe080;
  stroke-width: 3;
  filter: url(#pt-glow);
}
.pt-node.selected .pt-inner {
  fill: #c07018;
  stroke: #ffe8a0;
}
/* Paleta węzła: zmienne --pt-fam-* ustawia PassiveTreeStyle (rodzina statystyki),
   wartości po przecinku to domyślny brązowy węzeł (start / nieznany efekt). */
.pt-node .pt-outer {
  fill: var(--pt-fam-fill, #2a241c);
  stroke: var(--pt-fam-stroke, #6a5a48);
  stroke-width: 2;
}
.pt-node .pt-inner {
  fill: var(--pt-fam-inner, #4a3c30);
  stroke: var(--pt-fam-inner-stroke, #8a7860);
  stroke-width: 1.5;
}
.pt-node .pt-jewel {
  fill: #c8b090;
  stroke: none;
  pointer-events: none;
}
.pt-node .pt-icon {
  pointer-events: none;
}
.pt-node .pt-icon-fill {
  fill: var(--pt-fam-icon, #9a8a70);
  stroke: none;
}
.pt-node .pt-icon-stroke {
  stroke: var(--pt-fam-icon, #9a8a70);
  fill: none;
}
.pt-node.taken .pt-jewel {
  fill: var(--pt-fam-taken-icon, #fff2c0);
}
.pt-node.taken .pt-icon-fill {
  fill: var(--pt-fam-taken-icon, #fff0c0);
}
.pt-node.taken .pt-icon-stroke {
  stroke: var(--pt-fam-taken-icon, #fff0c0);
}
.pt-node.pt-start .pt-icon-fill {
  fill: #ffe9a0;
}
.pt-node.pt-start .pt-icon-stroke {
  stroke: #ffe9a0;
}
.pt-node.pt-keystone .pt-icon-fill {
  fill: var(--pt-fam-icon, #c4b090);
}
.pt-node.pt-keystone .pt-icon-stroke {
  stroke: var(--pt-fam-icon, #c4b090);
}
.pt-node.pt-keystone.taken .pt-icon-fill {
  fill: var(--pt-fam-taken-icon, #ffe8a0);
}
.pt-node.pt-keystone.taken .pt-icon-stroke {
  stroke: var(--pt-fam-taken-icon, #ffe8a0);
}
.pt-node.taken .pt-outer {
  fill: var(--pt-fam-taken-fill, #5a2810);
  stroke: var(--pt-fam-taken-stroke, #ffb020);
  stroke-width: 2.5;
  filter: url(#pt-glow);
}
.pt-node.taken .pt-inner {
  fill: var(--pt-fam-taken-inner, #f08818);
  stroke: var(--pt-fam-taken-inner-stroke, #ffe080);
}
.pt-node.taken .pt-jewel {
  fill: var(--pt-fam-taken-icon, #fff2c0);
}
.pt-node.pt-start .pt-outer {
  fill: #5a3010;
  stroke: #ffd060;
  stroke-width: 3.5;
  filter: url(#pt-glow-strong);
}
.pt-node.pt-start .pt-inner {
  fill: #f0a020;
  stroke: #fff0c0;
}
.pt-node.pt-notable .pt-outer {
  fill: var(--pt-fam-fill, #2a2830);
  stroke: var(--pt-fam-stroke, #8a7a60);
}
.pt-node.pt-keystone .pt-outer {
  fill: var(--pt-fam-fill, #1a1824);
  stroke: var(--pt-fam-stroke, #a89050);
  stroke-width: 3.5;
}
.pt-node.pt-keystone .pt-inner {
  fill: var(--pt-fam-inner, #2a2430);
  stroke: var(--pt-fam-inner-stroke, #c4a86a);
}
.pt-node.pt-keystone.taken .pt-outer {
  fill: var(--pt-fam-taken-fill, #4a2010);
  stroke: var(--pt-fam-taken-stroke, #ffd070);
  filter: url(#pt-glow-strong);
}
.pt-node.pt-keystone.taken .pt-inner {
  fill: var(--pt-fam-taken-inner, #d07020);
  stroke: var(--pt-fam-taken-inner-stroke, #ffe8a0);
}
.pt-node.conflict {
  opacity: 0.75;
}
.pt-node.conflict .pt-outer {
  stroke: #e03030 !important;
  stroke-width: 4 !important;
  filter: none;
}
.pt-node.conflict .pt-inner {
  stroke: #a01818 !important;
  fill: #2a1010 !important;
}
.pt-node.conflict .pt-icon-fill {
  fill: #c06060;
}
.pt-node.conflict .pt-icon-stroke {
  stroke: #c06060;
}
.pt-node.conflict text {
  fill: #e09090;
}
.pt-node text {
  fill: #e8dcc0;
  font-family: Cinzel, Georgia, 'Times New Roman', serif;
  font-size: 13px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  paint-order: stroke;
  stroke: #0a0806;
  stroke-width: 3.5px;
}
.pt-node.taken text {
  fill: #ffe9b0;
}
.pt-node.pt-keystone text {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.passive-tree-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.passive-tree-search-label {
  font-size: 11px;
  color: #c0a060;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.passive-tree-search {
  width: 160px;
  max-width: 28vw;
  padding: 5px 8px;
  font-size: 12px;
  color: #e8dcc0;
  background: rgba(12, 8, 6, 0.9);
  border: 1px solid #8a6a28;
  border-radius: 2px;
  outline: none;
}
.passive-tree-search:focus {
  border-color: #c9a227;
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.35);
}
.passive-tree-search-count {
  font-size: 11px;
  color: #7ec8ff;
  white-space: nowrap;
}
.passive-tree-search-count.hidden { display: none; }

#passive-tree-svg.pt-search-active .pt-edge,
#passive-admin-svg.pt-search-active .pt-edge {
  opacity: 0.22;
}
#passive-tree-svg.pt-search-active .pt-guide-ring,
#passive-admin-svg.pt-search-active .pt-guide-ring {
  opacity: 0.15;
}
.pt-node.pt-search-dim {
  opacity: 0.18;
}
.pt-node.pt-search-hit .pt-outer {
  stroke: #7ec8ff !important;
  filter: drop-shadow(0 0 6px rgba(120, 200, 255, 0.85));
}
.pt-node.pt-search-hit .pt-inner {
  stroke: #b8e0ff !important;
}
.pt-node.pt-search-hit text {
  fill: #c8e8ff;
}

.passive-tree-legend-box {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: auto;
  z-index: 3;
  background: rgba(10, 6, 4, 0.88);
  border: 1px solid #8a6a28;
  padding: 8px 12px;
  font-family: Cinzel, Georgia, serif;
  font-size: 11px;
  color: #d0c0a0;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.55);
  max-width: 160px;
  pointer-events: none;
}
.pt-leg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
}
.pt-leg-ico {
  display: inline-block;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.pt-leg-minor {
  border-radius: 50%;
  background: #4a3c30;
  border: 2px solid #8a7860;
}
.pt-leg-notable {
  width: 12px;
  height: 12px;
  background: #4a3c30;
  border: 2px solid #c4a86a;
  transform: rotate(45deg);
}
.pt-leg-keystone {
  width: 14px;
  height: 12px;
  background: #1a1824;
  border: 2px solid #c9a227;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.pt-leg-fam {
  gap: 6px;
}
.pt-leg-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  overflow: visible;
}
.pt-leg-svg .pt-icon-fill {
  fill: var(--pt-fam-icon, #d0c0a0);
}
.pt-leg-svg .pt-icon-stroke {
  stroke: var(--pt-fam-icon, #d0c0a0);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pt-leg-note {
  margin-top: 5px;
  font-size: 10px;
  color: #8a7860;
  font-style: italic;
}
#passive-tree-footer {
  margin-top: 8px;
  text-align: center;
  font-family: Cinzel, Georgia, 'Times New Roman', serif;
  font-size: 13px;
  color: #d4b060;
  background: rgba(10, 6, 4, 0.75);
  border: 1px solid #8a6a28;
  padding: 8px 12px;
  letter-spacing: 0.06em;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.45);
}

.passive-tree-progress-pill {
  font-family: Cinzel, Georgia, 'Times New Roman', serif;
  font-size: 12px;
  color: #a8d4ff;
  background: rgba(8, 16, 32, 0.82);
  border: 1px solid #3a6a88;
  border-radius: 2px;
  padding: 6px 12px;
}
.passive-tree-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(200, 220, 255, 0.5), transparent),
    radial-gradient(1px 1px at 78% 42%, rgba(180, 220, 255, 0.4), transparent),
    radial-gradient(1px 1px at 44% 72%, rgba(160, 200, 255, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 88% 12%, rgba(220, 240, 255, 0.45), transparent),
    radial-gradient(1px 1px at 32% 55%, rgba(180, 210, 255, 0.3), transparent);
  animation: pt-star-twinkle 8s ease-in-out infinite alternate;
}
.passive-tree-nav {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.passive-tree-nav * {
  pointer-events: auto;
}
.passive-tree-minimap-wrap {
  border: 1px solid #6a5030;
  background: rgba(6, 4, 8, 0.88);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.passive-tree-minimap {
  display: block;
  width: 160px;
  height: 120px;
  cursor: crosshair;
}
.pt-mini-node { fill: rgba(140, 120, 90, 0.45); }
.pt-mini-taken { fill: #ffb020; }
.pt-mini-viewport {
  fill: none;
  stroke: #ffb020;
  stroke-width: 8;
  opacity: 0.55;
  pointer-events: none;
}
.passive-tree-zoom-controls {
  display: flex;
  gap: 4px;
}
.passive-tree-zoom-btn {
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  color: #d8c090;
  background: rgba(12, 8, 6, 0.9);
  border: 1px solid #8a6a28;
  cursor: pointer;
}
.passive-tree-zoom-btn:hover {
  color: #ffe8a0;
  border-color: #c9a227;
}

#passive-tree-window.profile-paragon {
  background:
    radial-gradient(ellipse at 50% 35%, #1a2848 0%, #0e1428 45%, #060810 100%);
  border-color: #3a5a78;
  outline-color: #4ec8e8;
  box-shadow:
    0 0 0 2px #0a1420,
    0 0 0 5px #2a4a68,
    0 14px 48px rgba(0, 0, 0, 0.72),
    inset 0 0 90px rgba(20, 40, 80, 0.35);
}
#passive-tree-window.profile-paragon::before,
#passive-tree-window.profile-paragon::after {
  border-color: #4ec8e8;
}
#passive-tree-window.profile-paragon .panel-header {
  background: linear-gradient(180deg, #1a3050 0%, #0e1a30 100%);
  border-bottom-color: #4ec8e8;
}
#passive-tree-window.profile-paragon .passive-tree-title {
  color: #a8d4ff;
  text-shadow: 0 0 14px rgba(78, 200, 232, 0.45), 0 1px 0 #0a1020;
}
#passive-tree-window.profile-paragon .passive-tree-tab.active {
  color: #d8f0ff;
  border-color: #4ec8e8;
  background: linear-gradient(180deg, #1a3a58 0%, #0e2038 100%);
  box-shadow: inset 0 0 14px rgba(78, 200, 232, 0.25);
}
#passive-tree-window.profile-paragon .passive-tree-stars {
  opacity: 1;
}
#passive-tree-window.profile-paragon .pt-glow-num {
  color: #6ec8f0;
  text-shadow: 0 0 8px rgba(78, 200, 232, 0.75);
}
#passive-tree-window.profile-paragon .passive-tree-legend-box {
  border-color: #3a6a88;
  color: #a8d4ff;
}
#passive-tree-window.profile-paragon .pt-leg-note {
  color: #6a90a8;
}
#passive-tree-window.profile-paragon #passive-tree-footer {
  color: #8ec8e8;
  border-color: #3a6a88;
  background: rgba(6, 12, 24, 0.85);
}
#passive-tree-window.profile-paragon .passive-tree-minimap-wrap {
  border-color: #3a6a88;
}
#passive-tree-window.profile-paragon .pt-mini-viewport {
  stroke: #4ec8e8;
}
#passive-tree-window.profile-paragon .pt-mini-taken {
  fill: #4ec8e8;
}
#passive-tree-window.profile-paragon .passive-tree-zoom-btn {
  border-color: #3a6a88;
  color: #a8d4ff;
}
.pt-paragon-ring {
  stroke: rgba(78, 200, 232, 0.12);
}
.pt-edge-paragon {
  stroke: rgba(100, 160, 200, 0.1);
}
.pt-edge-paragon.lit {
  stroke: #4ec8e8;
  filter: url(#pt-glow);
}
.pt-paragon-dot {
  fill: rgba(120, 180, 220, 0.35);
  pointer-events: none;
}
.pt-paragon-start-halo {
  fill: none;
  stroke: rgba(78, 200, 232, 0.28);
  stroke-width: 2;
  animation: pt-paragon-pulse 2.5s ease-in-out infinite;
}
.pt-paragon-choice-halo {
  fill: none;
  stroke: rgba(110, 220, 255, 0.55);
  stroke-width: 1.8;
  stroke-dasharray: 4 3;
  animation: pt-paragon-halo-spin 8s linear infinite;
}
.pt-node.pt-paragon-node.taken .pt-paragon-start-outer {
  fill: #1a3050;
  stroke: #7ae4ff;
  stroke-width: 2.4;
  filter: url(#pt-glow-strong);
}
.pt-node.pt-paragon-node.taken .pt-paragon-start-inner {
  fill: #3a88c0;
  stroke: #e8fbff;
}
.pt-paragon-start-inner {
  fill: #2a6090;
  stroke: #a8d4ff;
  stroke-width: 1.4;
}
.pt-paragon-ray {
  stroke: rgba(78, 200, 232, 0.45);
  stroke-width: 1.8;
}
.pt-paragon-start-label {
  font-family: Cinzel, Georgia, serif;
  font-size: 10px;
  fill: #d0f0ff;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.pt-paragon-jewel-outer {
  fill: #121a28;
  stroke: #4a6a88;
  stroke-width: 2;
}
.pt-paragon-jewel-inner {
  fill: #1c2c44;
  stroke: #6a90b0;
  stroke-width: 1.2;
}
.pt-node.pt-paragon-node .pt-icon-fill {
  fill: #9eb8d0;
}
.pt-node.pt-paragon-node .pt-icon-stroke {
  stroke: #9eb8d0;
}
.pt-node.pt-paragon-node.taken .pt-paragon-jewel-outer {
  fill: #163848;
  stroke: #6ee0ff;
  stroke-width: 2.6;
  filter: url(#pt-glow);
}
.pt-node.pt-paragon-node.taken .pt-paragon-jewel-inner {
  fill: #2a88b8;
  stroke: #e8fbff;
}
.pt-node.pt-paragon-node.taken .pt-icon-fill {
  fill: #f4fffe;
}
.pt-node.pt-paragon-node.taken .pt-icon-stroke {
  stroke: #f4fffe;
}
/* Klejnot paragonu: kolor rodziny statystyki, a bez rodziny — stary kolor kategorii. */
.pt-node.pt-paragon-node.pt-cat-attack .pt-paragon-jewel-inner { fill: var(--pt-fam-inner, #4a2820); stroke: var(--pt-fam-inner-stroke, #e08060); }
.pt-node.pt-paragon-node.pt-cat-defense .pt-paragon-jewel-inner { fill: var(--pt-fam-inner, #1a3828); stroke: var(--pt-fam-inner-stroke, #70c890); }
.pt-node.pt-paragon-node.pt-cat-crit .pt-paragon-jewel-inner { fill: var(--pt-fam-inner, #3a3010); stroke: var(--pt-fam-inner-stroke, #e8c060); }
.pt-node.pt-paragon-node.pt-cat-utility .pt-paragon-jewel-inner { fill: var(--pt-fam-inner, #1a3048); stroke: var(--pt-fam-inner-stroke, #70b8e8); }
.pt-node.pt-paragon-node.taken.pt-cat-attack .pt-paragon-jewel-inner { fill: var(--pt-fam-taken-inner, #c06040); stroke: var(--pt-fam-taken-inner-stroke, #ffd0b0); }
.pt-node.pt-paragon-node.taken.pt-cat-defense .pt-paragon-jewel-inner { fill: var(--pt-fam-taken-inner, #308060); stroke: var(--pt-fam-taken-inner-stroke, #c8ffe0); }
.pt-node.pt-paragon-node.taken.pt-cat-crit .pt-paragon-jewel-inner { fill: var(--pt-fam-taken-inner, #b89020); stroke: var(--pt-fam-taken-inner-stroke, #fff0b0); }
.pt-node.pt-paragon-node.taken.pt-cat-utility .pt-paragon-jewel-inner { fill: var(--pt-fam-taken-inner, #2a88b8); stroke: var(--pt-fam-taken-inner-stroke, #e8fbff); }
.pt-node.pt-tier-active .pt-paragon-jewel-outer {
  stroke: #8ee8ff;
  stroke-width: 2.8;
  filter: url(#pt-glow);
}
.pt-node.pt-tier-locked {
  opacity: 0.32;
  pointer-events: auto;
}
.pt-node.pt-tier-taken-alt {
  opacity: 0.38;
}
.pt-edge.pt-tier-preview {
  stroke: rgba(120, 210, 240, 0.35);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}
.pt-tier-lane {
  fill: rgba(20, 36, 56, 0.22);
  stroke: rgba(80, 130, 170, 0.12);
  stroke-width: 1;
}
.pt-tier-lane.active {
  fill: rgba(40, 90, 130, 0.28);
  stroke: rgba(110, 210, 240, 0.4);
}
.pt-tier-lane-label {
  font-family: Cinzel, Georgia, serif;
  font-size: 9px;
  fill: rgba(160, 200, 220, 0.45);
}
.pt-tier-lane-label.active {
  fill: #a8e8ff;
}
@keyframes pt-paragon-halo-spin {
  to { stroke-dashoffset: -56; }
}
.pt-bonuses-cat-attack .pt-bonuses-section-title { color: #e08060; }
.pt-bonuses-cat-defense .pt-bonuses-section-title { color: #70c890; }
.pt-bonuses-cat-crit .pt-bonuses-section-title { color: #e8c060; }
.pt-bonuses-cat-utility .pt-bonuses-section-title { color: #70b8e8; }

@keyframes pt-paragon-pulse {
  0%, 100% { filter: url(#pt-glow-strong); opacity: 1; }
  50% { opacity: 0.88; }
}
@keyframes pt-star-twinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}
@keyframes pt-paragon-tab-glow {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 10px rgba(78, 200, 232, 0.35); }
}

.passive-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: auto;
}
.passive-modal-overlay.hidden {
  display: none !important;
}
.passive-reset-confirm-panel {
  position: relative;
  width: min(380px, 92vw);
  padding: 0 12px 12px;
  background:
    radial-gradient(ellipse at 50% 20%, #3a2a1c 0%, #22160e 55%, #120c08 100%);
  border: 3px solid #8a6a28;
  box-shadow:
    0 0 0 1px #c9a227,
    0 16px 48px rgba(0, 0, 0, 0.85);
}
.passive-reset-confirm-panel .panel-header {
  margin: 0 -12px 10px;
  background: linear-gradient(180deg, #5c4228 0%, #352414 100%);
  border-bottom: 2px solid #c9a227;
}
.passive-reset-confirm-text {
  margin: 0 0 6px;
  color: #e8dcc0;
  font-size: calc((13px) * var(--ui-text-scale, 1));
  line-height: 1.4;
  text-align: center;
}
.passive-reset-confirm-cost {
  margin: 0 0 12px;
  text-align: center;
  font-family: Cinzel, Georgia, serif;
  font-size: calc((14px) * var(--ui-text-scale, 1));
  color: #ffc040;
  text-shadow: 0 0 8px rgba(255, 160, 30, 0.35);
}
.passive-unsaved-hint {
  color: #c8b898 !important;
  font-size: calc((12px) * var(--ui-text-scale, 1)) !important;
  text-shadow: none !important;
}
.passive-reset-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#carapace-bar-wrap {
  height: 10px;
  margin-top: 2px;
}
#carapace-bar-wrap.hidden { display: none; }
.bar-fill.carapace {
  background: linear-gradient(90deg, #6a8aaa, #b8d4f0);
}

#passive-node-tooltip {
  position: fixed;
  z-index: 130;
  max-width: 320px;
  min-width: 200px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(48, 32, 18, 0.98), rgba(18, 12, 8, 0.99));
  border: 2px solid #8a6a28;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
  color: var(--text);
  pointer-events: none;
  line-height: 1.35;
  font-size: 12px;
}
#passive-node-tooltip.hidden { display: none; }
#passive-node-tooltip .ptt-kind {
  font-size: 11px;
  color: #c0a060;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
#passive-node-tooltip .ptt-name {
  font-family: var(--font-display), Cinzel, Georgia, serif;
  font-size: 14px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
#passive-node-tooltip .ptt-concept {
  font-style: italic;
  color: var(--tt-desc, #a89070);
  margin-bottom: 6px;
  font-size: 11px;
}
#passive-node-tooltip .ptt-section {
  margin-top: 5px;
}
#passive-node-tooltip .ptt-label {
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 2px;
}
#passive-node-tooltip .ptt-effect {
  color: var(--parchment, #e8d4a8);
}
#passive-node-tooltip .ptt-cost {
  color: #e89080;
}
#passive-node-tooltip .ptt-excl {
  color: #d0a878;
  margin-top: 6px;
  font-size: 11px;
}
#passive-node-tooltip .ptt-status {
  margin-top: 6px;
  font-size: 11px;
  color: #a8d078;
}
#passive-node-tooltip .ptt-status.blocked {
  color: #e87860;
}
#passive-node-tooltip .ptt-blocked-box {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(160, 30, 30, 0.22);
  border: 1px solid #c04040;
  color: #f0b0a0;
  font-size: 12px;
  line-height: 1.35;
}
#passive-node-tooltip .ptt-blocked-box strong {
  color: #ffd0c0;
}

.skill-window-hint {
  margin: 8px 0 10px;
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(138, 104, 16, 0.35);
  border-left: 3px solid var(--gold-dim);
  flex-shrink: 0;
}
#skill-list.skill-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  overflow-y: auto;
  padding-right: 4px;
  flex: 1 1 auto;
  min-height: 0;
}
.skill-entry {
  display: grid;
  grid-template-columns: 22px 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(55, 38, 22, 0.95) 0%, rgba(28, 18, 10, 0.98) 100%);
  border: 1px solid #5a4020;
  box-shadow:
    inset 0 1px 0 rgba(232, 196, 120, 0.1),
    0 2px 0 rgba(0, 0, 0, 0.35);
  border-radius: 0;
  padding: 8px 10px;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.skill-entry:hover {
  border-color: var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(240, 192, 64, 0.18),
    0 0 0 1px rgba(212, 160, 23, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.4);
}
.skill-entry.training {
  border-color: var(--gold-bright);
  background:
    linear-gradient(180deg, rgba(74, 52, 22, 0.98) 0%, rgba(42, 28, 12, 0.98) 100%);
  box-shadow:
    inset 0 0 18px rgba(240, 192, 64, 0.12),
    0 0 0 1px rgba(240, 192, 64, 0.35);
}
.skill-entry.dragging { opacity: 0.4; cursor: grabbing; }
.skill-entry.locked {
  opacity: 0.58;
  filter: grayscale(0.45) brightness(0.85);
  cursor: not-allowed;
}
.skill-entry.locked:hover {
  border-color: #666;
  box-shadow: inset 0 1px 0 rgba(232, 196, 120, 0.06);
}
.skill-entry.talent-pending {
  z-index: 2;
  animation: skill-talent-pending-glow 1.15s ease-in-out infinite;
}
@keyframes skill-talent-pending-glow {
  0%, 100% {
    border-color: var(--gold-bright);
    box-shadow:
      0 0 0 1px var(--gold-bright),
      0 0 8px 2px rgba(240, 192, 64, 0.55);
    background: #3a2a14;
  }
  50% {
    border-color: #ffe082;
    box-shadow:
      0 0 0 2px #ffe082,
      0 0 14px 4px rgba(255, 224, 130, 0.9);
    background: #4a3518;
  }
}
.skill-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.skill-icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: radial-gradient(circle at 40% 35%, #2a1c10, #0e0a08 70%);
  border-radius: 0;
  flex-shrink: 0;
  overflow: hidden;
  border: none;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.skill-icon.is-glyph {
  border: 1px solid var(--wood-dark);
  background: var(--slot-bg);
}
.skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  pointer-events: none;
  display: block;
}
.skill-lock-badge {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(8, 6, 4, 0.45);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.skill-lock-badge::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 12px;
  background:
    linear-gradient(180deg, #d4b060, #8a6810);
  border-radius: 2px 2px 1px 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.skill-lock-badge::before {
  content: '';
  position: absolute;
  right: 7px;
  bottom: 13px;
  width: 8px;
  height: 7px;
  border: 2px solid #d4b060;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
}
.skill-train-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid #6b4a28;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #4a3820, #16100a 70%);
  color: transparent;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 140, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.5);
  justify-self: center;
}
.skill-train-btn:hover:not(:disabled) {
  border-color: var(--gold);
  box-shadow:
    0 0 6px rgba(212, 160, 23, 0.45),
    inset 0 1px 0 rgba(255, 220, 140, 0.2);
}
.skill-train-btn.active {
  border-color: var(--gold-bright);
  background:
    radial-gradient(circle at 35% 28%, #fff3c0 0%, #f0c040 35%, #a07818 70%, #4a3008 100%);
  box-shadow:
    0 0 10px rgba(240, 192, 64, 0.75),
    inset 0 1px 0 rgba(255, 255, 230, 0.55);
}
.skill-train-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.skill-train-btn.skill-train-btn--spacer {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.skill-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-right: 4px;
}
.skill-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.skill-info .skill-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.skill-level-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-family: var(--font-display);
  color: var(--gold-bright);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 #000;
}
.skill-info .skill-meta {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.25;
}
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 1px;
}
.skill-tag {
  font-size: 10px;
  line-height: 1.2;
  padding: 1px 5px;
  border: 1px solid rgba(107, 74, 40, 0.7);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.skill-tag-training {
  border-color: rgba(240, 192, 64, 0.55);
  color: var(--gold-bright);
  background: rgba(80, 55, 16, 0.45);
}
.skill-tag-max {
  border-color: rgba(125, 185, 100, 0.5);
  color: #9ed87a;
}
.skill-xp-track {
  margin-top: 3px;
  height: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(107, 74, 40, 0.55);
  overflow: hidden;
}
.skill-xp-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8a6810, #f0c040 70%, #ffe9a0);
  box-shadow: 0 0 6px rgba(240, 192, 64, 0.35);
}

/* --- Drzewko talentów --- */
#skill-tree-panel.skill-tree-panel {
  position: absolute;
  top: 48px;
  left: 260px;
  width: 760px;
  max-width: calc(100% / var(--ui-zoom, 1) - 16px);
  max-height: calc(100% / var(--ui-zoom, 1) - 24px);
  padding: 0 14px 14px;
  z-index: 22;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 78, 32, 0.42), transparent 52%),
    radial-gradient(ellipse at 90% 100%, rgba(40, 24, 12, 0.55), transparent 45%),
    linear-gradient(180deg, #3d2a18 0%, #24160c 100%);
  border: 3px solid #6e5424;
  outline: 1px solid #c9a227;
  outline-offset: -5px;
  box-shadow:
    0 0 0 2px #2a1a0c,
    0 0 0 5px #8a6a28,
    0 14px 40px rgba(0, 0, 0, 0.68),
    inset 0 0 70px rgba(0, 0, 0, 0.3);
}
#skill-tree-panel.skill-tree-panel::before,
#skill-tree-panel.skill-tree-panel::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 4;
  border: 2px solid #c9a227;
  opacity: 0.75;
}
#skill-tree-panel.skill-tree-panel::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}
#skill-tree-panel.skill-tree-panel::after {
  top: 6px;
  right: 6px;
  border-left: none;
  border-bottom: none;
}
#skill-tree-panel.hidden { display: none; }
#skill-tree-panel .panel-header {
  margin: 0 -14px 0;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(200, 150, 60, 0.18), transparent 70%),
    linear-gradient(180deg, var(--wood-mid) 0%, var(--wood) 100%);
  flex-shrink: 0;
}
#skill-tree-panel .skill-tree-window-title {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 15px;
  max-width: calc(100% - 36px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#skill-tree-body {
  overflow-y: auto;
  padding: 12px 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
}
.skill-tree-summary {
  background:
    linear-gradient(180deg, rgba(55, 38, 22, 0.95) 0%, rgba(28, 18, 10, 0.98) 100%);
  border: 1px solid #5a4020;
  box-shadow:
    inset 0 1px 0 rgba(232, 196, 120, 0.1),
    0 2px 0 rgba(0, 0, 0, 0.35);
  padding: 12px;
}
.skill-tree-hero {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.skill-tree-hero-icon-frame {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: radial-gradient(circle at 40% 35%, #2a1c10, #0e0a08 70%);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.skill-tree-hero-icon {
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  image-rendering: auto;
  background: transparent;
  display: block;
}
.skill-tree-hero-icon-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  width: 80px;
  height: 80px;
}
.skill-tree-hero-text { min-width: 0; }
.skill-tree-hero-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold-bright);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 3px;
  text-shadow: 0 1px 0 #000;
}
.skill-tree-type {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.skill-tree-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.skill-tree-chip {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(107, 74, 40, 0.7);
  padding: 2px 7px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.skill-tree-chip strong { color: var(--text); }
.skill-tree-chip-mana strong { color: #7eb6e8; }
.skill-tree-hero-dmg {
  text-align: right;
  min-width: 108px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(138, 104, 16, 0.35);
  border-left: 3px solid rgba(196, 90, 18, 0.7);
}
.skill-tree-hero-dmg-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.skill-tree-hero-dmg-value {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  color: #e07840;
  font-weight: 700;
  text-shadow: 0 1px 0 #000;
}
.skill-tree-hero-dmg-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.skill-tree-desc {
  margin: 10px 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-dim);
}
.skill-tree-dmg-est {
  font-size: 11px;
  color: var(--gold-bright);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.skill-tree-level-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.skill-tree-xp-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(107, 74, 40, 0.55);
  overflow: hidden;
}
.skill-tree-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #8a6810, #f0c040 70%, #ffe9a0);
  box-shadow: 0 0 8px rgba(240, 192, 64, 0.35);
}
.skill-tree-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 0;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(138, 104, 16, 0.35);
}
.skill-tree-section-title {
  margin: 0;
  font-family: var(--font-display);
  color: var(--gold-bright);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.skill-tree-section-hint {
  font-size: 11px;
  color: var(--text-muted);
}
.skill-tree-tier {
  border: 1px solid #5a4020;
  background:
    linear-gradient(180deg, rgba(48, 32, 18, 0.92) 0%, rgba(24, 16, 10, 0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(232, 196, 120, 0.08),
    0 2px 0 rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.skill-tree-tier.locked {
  opacity: 0.55;
  filter: grayscale(0.25);
}
.skill-tree-constellation {
  position: relative;
  padding: 18px 10px 26px;
  border-bottom: 1px solid rgba(120, 180, 220, 0.16);
  background: radial-gradient(ellipse at 50% 50%, rgba(76, 201, 240, 0.07), transparent 70%);
}
.skill-tree-constellation-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 24px;
  padding: 0 12px 30px;
}
.skill-tree-constellation-path > .skill-tree-tier {
  position: relative;
  min-width: 0;
  width: 92%;
  align-self: start;
}
.skill-tree-constellation-path > .skill-tree-tier:nth-child(even) { margin-left: auto; }
.skill-tree-constellation > .skill-tree-tier-talent {
  position: relative;
  width: 88%;
  margin-right: auto;
  border-radius: 8px;
  border-color: rgba(201, 162, 39, 0.65);
  box-shadow: 0 0 24px rgba(201, 162, 39, 0.12);
}
.skill-tree-constellation:nth-of-type(even) > .skill-tree-tier-talent {
  margin-left: auto;
  margin-right: 0;
}
.skill-tree-constellation > .skill-tree-tier-talent::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  height: 24px;
  width: 1px;
  background: linear-gradient(transparent, rgba(201, 162, 39, 0.7));
  pointer-events: none;
}
@media (max-width: 800px) {
  .skill-tree-constellation-path { grid-template-columns: minmax(0, 1fr); padding: 0 0 24px; }
  .skill-tree-constellation-path > .skill-tree-tier { width: 100%; }
  .skill-tree-constellation > .skill-tree-tier-talent { width: 100%; }
}
.skill-tree-tier.chosen {
  border-color: rgba(201, 162, 39, 0.65);
  box-shadow:
    inset 0 0 20px rgba(240, 192, 64, 0.08),
    0 0 0 1px rgba(201, 162, 39, 0.2);
}
.skill-tree-tier.is-open {
  border-color: rgba(240, 192, 64, 0.55);
  box-shadow:
    inset 0 0 16px rgba(240, 192, 64, 0.1),
    0 0 0 1px rgba(240, 192, 64, 0.18);
}
.skill-tree-tier-bonus {
  padding: 4px 8px;
  border-color: #3a4a55;
  background:
    linear-gradient(180deg, rgba(28, 36, 44, 0.88) 0%, rgba(16, 20, 26, 0.94) 100%);
}
.skill-tree-tier-bonus.is-open {
  border-color: rgba(120, 180, 220, 0.45);
}
.skill-tree-tier-bonus.chosen {
  border-color: rgba(120, 180, 220, 0.55);
}
.skill-tree-bonus-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
#passive-constellation-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 50% 40%, #151b2c 0%, #090c16 58%, #05070e 100%);
}
#passive-constellation-preview.hidden { display: none; }
.passive-tree-view-switch { display: flex; grid-column: 2; gap: 4px; margin-left: 0; white-space: nowrap; }
.passive-tree-view-switch button {
  padding: 5px 3px;
  border: 1px solid #756047;
  background: #211b1c;
  color: #d7c5a6;
  font-size: 12px;
  cursor: pointer;
}
.passive-tree-view-switch button[aria-pressed="true"] {
  border-color: #f1d08d;
  background: #604526;
  color: #fff2ce;
}
@container passive-tree-panel (max-width: 340px) {
  #passive-tree-window .panel-header {
    grid-template-columns: minmax(0, 1fr) 54px;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  #passive-tree-window .panel-header-actions {
    top: 6px;
    transform: none;
  }
  .passive-tree-view-switch {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}
#passive-tree-window.paragon-view #passive-tree-import-btn { display: none; }
#passive-tree-window.constellation-mode #passive-node-tooltip { display: none !important; }
.passive-tree-mode-toggle {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid #9b7642;
  background: #241c18;
  color: #f0d9a5;
  cursor: pointer;
  font-size: 12px;
}
#passive-tree-window:not(.constellation-mode) #passive-constellation-preview,
#passive-tree-window:not(.constellation-mode) #passive-constellation-controls,
#passive-tree-window:not(.constellation-mode) #passive-constellation-portraits,
#passive-tree-window:not(.constellation-mode) #passive-constellation-legend,
#passive-tree-window:not(.constellation-mode) #passive-constellation-tooltip,
#passive-tree-window:not(.constellation-mode) #passive-constellation-minimap { display: none !important; }
#passive-constellation-minimap {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 12px;
  width: 180px;
  height: 140px;
  border: 1px solid #9b7642;
  background: rgba(15, 13, 16, 0.92);
  cursor: crosshair;
}
#passive-tree-window.constellation-mode #passive-tree-svg,
#passive-tree-window.constellation-mode #passive-tree-toolbar,
#passive-tree-window.constellation-mode #passive-tree-status,
#passive-tree-window.constellation-mode #passive-tree-hint,
#passive-tree-window.constellation-mode #passive-tree-footer,
#passive-tree-window.constellation-mode #passive-tree-bonuses,
#passive-tree-window.constellation-mode #passive-tree-nav,
#passive-tree-window.constellation-mode #passive-tree-legend { display: none !important; }
#passive-constellation-controls {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(15, 13, 16, 0.9);
  border: 1px solid #9b7642;
  color: #f0d9a5;
  font-size: 13px;
}
#passive-constellation-controls label { display: flex; align-items: center; gap: 8px; }
#passive-constellation-reset,
#passive-constellation-fit {
  padding: 5px 9px;
  border: 1px solid #9b7642;
  background: #2a1d1d;
  color: #f0d9a5;
  cursor: pointer;
}
#passive-constellation-reset:hover,
#passive-constellation-fit:hover { border-color: #f1d08d; color: #fff2ce; }
.constellation-controls-hint { color: #c7b695; }
.constellation-tooltip-hint { margin-top: 8px; color: #e9c46a; }
#passive-constellation-pages { display: flex; gap: 4px; }
#passive-constellation-pages button {
  padding: 5px 9px;
  border: 1px solid #756047;
  background: #211b1c;
  color: #d7c5a6;
  font-size: 12px;
  cursor: pointer;
}
#passive-constellation-pages button.active {
  border-color: #f1d08d;
  background: #604526;
  color: #fff2ce;
  box-shadow: 0 0 10px #e9c46a66;
}
#passive-constellation-search {
  width: 180px;
  padding: 5px 8px;
  border: 1px solid #8a6a42;
  background: #211b1c;
  color: #fff1d2;
  font-size: 13px;
}
#passive-constellation-status { color: #f1a37b; }
#passive-constellation-portraits,
#passive-constellation-legend {
  position: absolute;
  z-index: 3;
  top: 90px;
  pointer-events: none;
  color: #e8decc;
  background: linear-gradient(145deg, rgba(20, 23, 34, 0.94), rgba(9, 11, 20, 0.9));
  border: 1px solid #695b55;
  box-shadow: 0 12px 30px #0009, inset 0 0 18px #cc9b5320;
  font-size: 12px;
}
#passive-constellation-portraits {
  left: 12px;
  display: grid;
  gap: 8px;
  padding: 10px;
}
.constellation-portrait {
  width: 62px;
  min-height: 62px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 1px solid var(--portrait-color);
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--portrait-color), transparent 78%), #10121b 72%);
  color: #e9e1d2;
  text-align: center;
  font-size: 10px;
}
.constellation-portrait-warrior { --portrait-color: #e63946; }
.constellation-portrait-archer { --portrait-color: #2a9d8f; }
.constellation-portrait-mage { --portrait-color: #4cc9f0; }
.constellation-portrait-utility { --portrait-color: #e9c46a; }
.constellation-portrait-silhouette {
  position: relative;
  display: block;
  width: 30px;
  height: 20px;
  margin-top: 8px;
  border-radius: 16px 16px 4px 4px;
  background: var(--portrait-color);
  filter: drop-shadow(0 0 6px var(--portrait-color));
}
.constellation-portrait-silhouette::before {
  content: '';
  position: absolute;
  left: 9px;
  top: -13px;
  width: 12px;
  height: 14px;
  border-radius: 50% 50% 35% 35%;
  background: var(--portrait-color);
}
#passive-constellation-legend {
  right: 12px;
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  min-width: 154px;
}
#passive-constellation-legend strong {
  color: #f4d69c;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
#passive-constellation-legend > div { display: flex; align-items: center; gap: 9px; }
.constellation-legend-shape,
.constellation-legend-swatch { display: inline-block; width: 14px; height: 14px; flex: none; }
.constellation-legend-travel { width: 9px; height: 9px; margin: 2px; border-radius: 50%; background: #e7d9bf; box-shadow: 0 0 8px #e7d9bf; }
.constellation-legend-notable { border: 2px solid #d4a968; border-radius: 50%; background: #171923; }
.constellation-legend-keystone { background: #c98f4d; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.constellation-legend-swatch { border-radius: 50%; background: var(--swatch); box-shadow: 0 0 10px var(--swatch); }
.constellation-legend-strength { --swatch: #e63946; }
.constellation-legend-agility { --swatch: #2a9d8f; }
.constellation-legend-arcane { --swatch: #4cc9f0; }
.constellation-legend-utility { --swatch: #e9c46a; }
#passive-constellation-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 150px;
  max-width: 290px;
  padding: 12px 14px;
  background: linear-gradient(145deg, #242936, #10131d 70%);
  border: 2px solid var(--constellation-zone, #c49a59);
  box-shadow: 0 12px 30px #000d, 0 0 18px color-mix(in srgb, var(--constellation-zone, #c49a59), transparent 72%);
  color: #f1dfbd;
  font-size: 13px;
  pointer-events: none;
}
/* Zoom dotykowy: +, −, reset widoku (cele ≥ 44 px). */
#passive-constellation-zoom {
  position: absolute;
  z-index: 4;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#passive-constellation-zoom button {
  /* Cel dotykowy >= 44 px po Skali UI (#ui-root ma CSS zoom). */
  width: calc(44px / var(--ui-zoom, 1));
  height: calc(44px / var(--ui-zoom, 1));
  padding: 0;
  border: 1px solid #9b7642;
  background: rgba(33, 27, 28, 0.94);
  color: #f0d9a5;
  font-size: calc(24px / var(--ui-zoom, 1));
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#passive-constellation-zoom button:hover { border-color: #f1d08d; color: #fff2ce; }
#passive-constellation-zoom button:active { background: #604526; }
#passive-tree-window:not(.constellation-mode) #passive-constellation-zoom { display: none !important; }
.constellation-touch-hint { display: none; color: #c7b695; }
@media (pointer: coarse) {
  .constellation-controls-hint { display: none; }
  .constellation-touch-hint { display: inline; }
}
#passive-constellation-tooltip {
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
#passive-constellation-tooltip[hidden] { display: none; }
#passive-constellation-tooltip .constellation-tooltip-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#passive-constellation-tooltip strong { color: #fff5e4; font-size: 17px; line-height: 1.2; }
.constellation-tooltip-emblem { color: var(--constellation-zone, #e9c46a); font-size: 20px; text-shadow: 0 0 9px currentColor; }
.constellation-tooltip-emblem svg { width: 1em; height: 1em; vertical-align: middle; }
/* Mini-bonusy: kółko wyboru + nazwa i opis pod nim (opisy muszą być czytelne bez hovera). */
.skill-tree-bonus-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.skill-tree-bonus-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(30, 40, 50, 0.92) 0%, rgba(14, 18, 24, 0.96) 100%);
  border: 1px solid #3a4a55;
  color: #c8d8e8;
  padding: 8px;
  cursor: default;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 0 rgba(0, 0, 0, 0.35);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.skill-tree-bonus-option.choosable {
  cursor: pointer;
  border-color: rgba(120, 180, 220, 0.5);
}
.skill-tree-bonus-option.choosable:hover {
  border-color: #8ec5e8;
  background:
    linear-gradient(180deg, rgba(40, 56, 70, 0.96) 0%, rgba(20, 26, 34, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(142, 197, 232, 0.14),
    0 0 0 1px rgba(142, 197, 232, 0.22);
}
.skill-tree-bonus-option.selected {
  border-color: rgba(120, 180, 220, 0.75);
  background:
    linear-gradient(180deg, rgba(38, 56, 70, 0.98) 0%, rgba(18, 24, 32, 0.98) 100%);
  box-shadow:
    inset 0 0 14px rgba(120, 180, 220, 0.12),
    0 0 0 1px rgba(120, 180, 220, 0.35);
}
.skill-tree-bonus-option.locked,
.skill-tree-bonus-option:disabled:not(.selected) {
  opacity: 0.6;
  cursor: default;
}
.skill-tree-bonus-dot {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  border: 1px solid #5a7080;
  background: radial-gradient(circle at 35% 30%, #3a4a58 0%, #1a222a 70%);
  color: #c8d8e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.skill-tree-bonus-dot .skill-tree-bonus-dot-label {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.skill-tree-bonus-option.choosable:hover .skill-tree-bonus-dot {
  border-color: #8ec5e8;
  transform: scale(1.06);
  box-shadow: 0 0 0 1px rgba(142, 197, 232, 0.35);
}
.skill-tree-bonus-option.selected .skill-tree-bonus-dot {
  border-color: #c9a227;
  background: radial-gradient(circle at 35% 30%, #5a4a28 0%, #2a2010 70%);
  color: #f0d080;
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.45);
}
.skill-tree-bonus-option.locked .skill-tree-bonus-dot,
.skill-tree-bonus-option:disabled:not(.selected) .skill-tree-bonus-dot {
  opacity: 0.45;
}
.skill-tree-bonus-option-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.skill-tree-bonus-option-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #cfe4f2;
  word-break: break-word;
}
.skill-tree-bonus-option.selected .skill-tree-bonus-option-name {
  color: #e6f3fb;
}
.skill-tree-bonus-option-mark {
  font-size: 9px;
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border: 1px solid rgba(142, 197, 232, 0.55);
  color: #9ed8f0;
  background: rgba(30, 60, 80, 0.45);
  text-transform: uppercase;
}
.skill-tree-bonus-option-desc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-dim);
}
.skill-tree-respec-btn-compact {
  margin-left: auto;
  flex: 0 0 auto;
}
.skill-tree-tier-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  opacity: 0.85;
}
.skill-tree-tier-kind.is-bonus {
  color: #8ec5e8;
}
.skill-tree-tier-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.skill-tree-tier-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.skill-tree-tier-badge {
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  text-shadow: 0 1px 0 #000;
}
.skill-tree-tier-status {
  font-size: 10px;
  padding: 1px 7px;
  border: 1px solid rgba(107, 74, 40, 0.7);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.skill-tree-tier-status.is-chosen {
  border-color: rgba(240, 192, 64, 0.55);
  color: var(--gold-bright);
  background: rgba(80, 55, 16, 0.45);
}
.skill-tree-tier-status.is-open {
  border-color: rgba(158, 216, 122, 0.45);
  color: #9ed87a;
  background: rgba(40, 70, 30, 0.35);
}
.skill-tree-tier-status.is-locked {
  color: var(--text-muted);
}
.skill-tree-respec-btn {
  font-size: 11px;
  padding: 3px 9px;
  background:
    linear-gradient(180deg, rgba(120, 70, 20, 0.85), rgba(70, 40, 10, 0.9));
  border: 1px solid var(--gold-dim);
  border-radius: 0;
  color: var(--gold-bright);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
  box-shadow: var(--btn-bevel);
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}
.skill-tree-respec-btn:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 0 8px rgba(240, 192, 64, 0.35);
}
.skill-tree-respec-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.skill-tree-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.warrior-tree .skill-tree-constellation-path > .skill-tree-tier,
.warrior-tree .skill-tree-constellation > .skill-tree-tier-talent {
  width: 100%;
  margin-left: 0;
}
.warrior-tree .skill-tree-constellation-path { padding-left: 0; }
.warrior-tree .skill-tree-constellation > .skill-tree-tier-talent::before { display: none; }
.warrior-tree .role-dmg { --warrior-role: #c98c65; }
.warrior-tree .role-def { --warrior-role: #84afa6; }
.warrior-tree .role-utility { --warrior-role: #b4a878; }
.warrior-tree .skill-tree-perk,
.warrior-tree .skill-tree-bonus-option { border-top: 3px solid var(--warrior-role); }
.warrior-tree .skill-tree-perk.selected,
.warrior-tree .skill-tree-bonus-option.selected { box-shadow: inset 0 0 0 1px var(--warrior-role); }
.skill-tree-role-headings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.skill-tree-role-headings span { color: var(--warrior-role); padding: 8px; border-bottom: 2px solid currentColor; }
.skill-tree-role-label { color: var(--warrior-role); margin-bottom: 6px; font-weight: bold; }
.warrior-tree .is-capstone { border: 2px solid var(--gold, #c5a05a); }
.warrior-tree .skill-tree-perk-desc { overflow-wrap: anywhere; }
#skill-tree-panel:has(.warrior-tree) {
  max-width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1) - 24px) !important;
  max-height: calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1) - 24px) !important;
}
@media (max-width: 720px) {
  .warrior-tree .skill-tree-role-headings { display: none; }
  .warrior-tree .skill-tree-hero { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 720px) {
  .skill-tree-hero {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .skill-tree-hero-dmg {
    grid-column: 1 / -1;
    text-align: left;
    border-left: none;
    border-top: 3px solid rgba(196, 90, 18, 0.7);
  }
  .skill-tree-perks { grid-template-columns: 1fr; }
  .skill-tree-bonus-options { grid-template-columns: 1fr; }
}
.skill-tree-perk {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(40, 28, 16, 0.95), rgba(18, 12, 8, 0.98));
  border: 1px solid #4a3420;
  color: var(--text);
  padding: 9px;
  cursor: default;
  box-shadow:
    inset 0 1px 0 rgba(232, 196, 120, 0.07),
    0 1px 0 rgba(0, 0, 0, 0.35);
  min-height: 112px;
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.skill-tree-perk.choosable {
  cursor: pointer;
  border-color: rgba(201, 162, 39, 0.55);
}
.skill-tree-perk.choosable:hover {
  border-color: var(--gold-bright);
  background:
    linear-gradient(180deg, rgba(60, 42, 20, 0.98), rgba(28, 18, 10, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(240, 192, 64, 0.16),
    0 0 0 1px rgba(240, 192, 64, 0.22),
    0 2px 10px rgba(0, 0, 0, 0.4);
}
.skill-tree-perk.selected {
  border-color: var(--gold-bright);
  background:
    linear-gradient(180deg, rgba(74, 52, 22, 0.98), rgba(36, 24, 12, 0.98));
  box-shadow:
    inset 0 0 18px rgba(240, 192, 64, 0.12),
    0 0 0 1px rgba(240, 192, 64, 0.35);
}
.skill-tree-perk.locked,
.skill-tree-perk:disabled:not(.selected) {
  opacity: 0.72;
}
.skill-tree-perk-icon-wrap {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 0;
  border: none;
  background: radial-gradient(circle at 40% 35%, #2a1c10, #0e0a08 70%);
  overflow: hidden;
  align-self: flex-start;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.skill-tree-perk-icon-wrap.is-empty {
  border: 1px solid var(--wood-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.skill-tree-perk-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  border: none;
  border-radius: 0;
}
.skill-tree-perk-icon-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--gold);
  font-size: 16px;
}
.skill-tree-perk-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skill-tree-perk-name {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--gold-bright);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
  word-break: break-word;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.skill-tree-perk-selected-mark {
  font-size: 9px;
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border: 1px solid rgba(240, 192, 64, 0.55);
  color: var(--gold-bright);
  background: rgba(80, 55, 16, 0.45);
  text-transform: uppercase;
}
.skill-tree-perk.selected .skill-tree-perk-name {
  color: #ffe9a0;
}
.skill-tree-perk-desc {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
  flex: 1;
}
.skill-tree-perk-line + .skill-tree-perk-line { margin-top: 2px; }
.st-hl-orange { color: #f0a050; font-weight: 700; }
.st-hl-blue { color: #7eb6e8; font-weight: 700; }
.st-hl-muted { color: #b09878; font-weight: 600; }
.skill-tree-footnote {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
  padding: 0 2px;
}
.skill-tree-empty {
  margin: 0;
  padding: 12px;
  color: var(--text-muted);
  border: 1px dashed rgba(107, 74, 40, 0.55);
  background: rgba(0, 0, 0, 0.2);
}
.skill-xp-curve-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 10px;
  margin: 8px 0;
  max-height: 360px;
  overflow-y: auto;
}
.skill-xp-curve-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.2fr) 90px minmax(80px, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.skill-xp-curve-row input {
  width: 90px;
}
.skill-xp-curve-preview {
  color: var(--text-muted, #8b93a8);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.char-exp-curve-preview {
  margin: 8px 0 12px;
  line-height: 1.45;
  word-break: break-word;
}

.exp-sim-mob-list {
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--wood-dark, #3a2f24);
  background: rgba(0, 0, 0, 0.18);
  padding: 6px 8px;
  margin: 6px 0 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 10px;
}

.exp-sim-mob-list label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #8b93a8);
  line-height: 1.35;
  cursor: pointer;
}

.exp-sim-mob-list label strong {
  color: var(--text, #e8e6e0);
  font-weight: 600;
}

.exp-sim-results {
  margin: 8px 0 14px;
  line-height: 1.45;
}

.exp-sim-results .exp-sim-summary {
  margin-bottom: 8px;
}

.exp-sim-results table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.exp-sim-results th,
.exp-sim-results td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 6px;
  text-align: right;
  font-size: 12px;
}

.exp-sim-results th:first-child,
.exp-sim-results td:first-child {
  text-align: left;
}

.skill-cooldown-label {
  position: absolute;
  right: 10px;
  top: 8px;
  font-size: 12px;
  color: #ffb088;
  font-weight: bold;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.skill-cooldown-label.hidden { display: none; }

.hotbar-cooldown {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(20, 12, 6, 0.75);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  pointer-events: none;
}

#admin-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 6, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
#admin-modal.hidden { display: none; }

.admin-window {
  width: 94vw;
  height: 90vh;
  background: var(--panel-bg);
  border: 2px solid var(--gold);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--pixel-frame);
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, var(--wood-mid) 0%, var(--wood) 100%);
  padding: 6px 10px;
  border-bottom: 2px solid var(--gold-dim);
  gap: 8px;
}
.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.admin-tab {
  background: var(--panel-inner);
  color: var(--text-muted);
  border: 1px solid var(--slot-border);
  padding: 8px 12px;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
}
.admin-tab.active {
  background: linear-gradient(180deg, rgba(120, 80, 28, 0.9), rgba(70, 46, 18, 0.95));
  color: var(--gold-bright);
  border-color: var(--gold);
}
.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.admin-reload-btn {
  background: var(--panel-inner);
  color: var(--text-dim);
  border: 1px solid var(--gold-dim);
  border-radius: 0;
  box-shadow: var(--btn-bevel);
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-display);
}
.admin-reload-btn:hover {
  background: var(--wood-mid);
  color: var(--text);
  border-color: var(--gold-bright);
}
a.admin-reload-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
#admin-close-btn {
  width: 28px;
  height: 28px;
  background: var(--wood-dark);
  border: 1px solid var(--gold-dim);
  box-shadow: var(--btn-bevel);
  color: var(--parchment);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
}
#admin-close-btn:hover { color: #fff; background: var(--danger); }

.admin-panel { flex: 1; display: flex; overflow: hidden; }
/* Leniwy katalog admina: pasek stanu pod zakładkami; panele nieaktywne do czasu kompletnych danych. */
.admin-catalog-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--panel-inner);
  border-bottom: 1px solid var(--gold-dim);
  color: var(--text-muted);
  font-size: 13px;
}
.admin-catalog-status.hidden { display: none; }
.admin-catalog-status.is-error { color: #e2726a; }
.admin-window.admin-catalog-pending > .admin-panel { opacity: 0.45; pointer-events: none; }
.admin-panel.hidden { display: none; }

.admin-sidebar {
  width: 320px;
  flex-shrink: 0;
  background: var(--panel-inner);
  padding: 12px;
  overflow-y: auto;
  border-right: 2px solid var(--gold-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Sidebar children keep natural height; whole sidebar scrolls. */
.admin-sidebar > * { flex-shrink: 0; }
.npc-shop-edit-backdrop {
  position: fixed;
  z-index: 10010;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}
.npc-shop-edit-window {
  position: fixed;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 18px;
  border: 2px solid var(--gold-dim);
  border-radius: 10px;
  background: var(--panel-inner);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
}
.npc-shop-edit-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px 0 14px;
  color: var(--gold-bright);
  cursor: move;
  touch-action: none;
  user-select: none;
}
.npc-shop-edit-window label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
}
.npc-shop-edit-window input[type="number"],
.npc-shop-edit-window select {
  width: 100%;
}
.npc-shop-edit-window .npc-shop-edit-template-price {
  flex-direction: row;
  align-items: center;
}
.npc-shop-edit-close {
  flex: 0 0 auto;
  border: 1px solid var(--gold-dim);
  border-radius: 5px;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  line-height: 1;
  padding: 2px 8px;
}
.admin-sidebar h3 {
  font-size: 15px;
  font-family: var(--font-display);
  color: var(--gold-bright);
  margin: 12px 0 6px;
}
.admin-sidebar h3:first-child { margin-top: 0; }
.admin-sidebar h4 { font-size: 14px; color: var(--text-muted); margin: 10px 0 4px; }
.admin-sidebar label { font-size: 14px; display: flex; align-items: center; gap: 6px; margin: 4px 0; color: var(--text-dim); }
.admin-sidebar input[type="text"],
.admin-sidebar input[type="number"],
.admin-sidebar input[type="password"],
.admin-sidebar input[type="file"],
.admin-sidebar select,
.admin-sidebar textarea {
  width: 100%;
  padding: 6px;
  margin: 3px 0;
  border-radius: 0;
  border: 1px solid #6b4a28;
  background: #1a120c;
  color: var(--text);
  font-size: 14px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}
.admin-sidebar-sep {
  border: none;
  border-top: 1px solid #6b4a28;
  margin: 14px 0;
}
.admin-sidebar .admin-server-reset-label {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.admin-sidebar textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.skill-emoji-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--slot-bg);
  border-radius: 0;
  border: 1px solid var(--wood-dark);
}

.admin-main { flex: 1; min-width: 0; overflow: auto; padding: 16px; background: #241810; }
#admin-panel-map > .admin-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Prawa kolumna palety kafelków — pełna wysokość edytora mapy */
.admin-map-palette {
  width: 320px;
  flex-shrink: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--panel-inner);
  border-left: 2px solid var(--gold-dim);
  overflow: hidden;
}
.admin-map-palette h3 {
  font-size: 15px;
  font-family: var(--font-display);
  color: var(--gold-bright);
  margin: 0 0 4px;
  flex-shrink: 0;
}
.admin-main h3 {
  color: var(--gold-bright);
  font-size: 17px;
  margin-top: 0;
  font-family: var(--font-display);
}
.admin-main h4 { color: var(--text-muted); font-size: 14px; margin: 14px 0 6px; }
.admin-main input[type="number"],
.admin-main select {
  padding: 6px;
  margin: 3px 0;
  border-radius: 0;
  border: 1px solid #6b4a28;
  background: #1a120c;
  color: var(--text);
  font-size: 14px;
}
.instance-boss-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
  border-top: 1px solid var(--gold-dim);
  padding-top: 10px;
}
.instance-boss-preview.hidden { display: none !important; }
.instance-boss-identity { display: flex; align-items: center; gap: 12px; }
.instance-boss-sprite {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gold-dim);
  background: var(--slot-bg);
  color: var(--text-dim);
  font-size: 11px;
}
.instance-boss-sprite img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.instance-boss-name { color: var(--gold); font-size: 18px; font-weight: 700; }
.instance-boss-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; }
.instance-boss-stats > div,
.instance-boss-loot-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.instance-boss-stats span { color: var(--text-dim); }
.instance-boss-loot { display: flex; flex-direction: column; gap: 4px; color: var(--text-dim); font-size: 12px; }
.instance-boss-loot-row { padding: 3px 5px; background: rgba(0, 0, 0, 0.2); color: var(--text); }
.instance-boss-loot-row img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.instance-boss-loot-row span { flex: 1; min-width: 0; }
.instance-boss-loot-row strong { color: #ffd166; }

/* Klasy: lista po lewej, szeroki formularz edycji w głównym obszarze. */
#admin-panel-classes > .admin-sidebar {
  order: 2;
  width: auto;
  flex: 1 1 auto;
  border-right: 0;
  border-left: 2px solid var(--gold-dim);
}
#admin-panel-classes > .admin-main {
  order: 1;
  flex: 0 0 280px;
  background: var(--panel-inner);
}
#class-sprite-form {
  width: min(100%, 1100px);
  margin-inline: auto;
}

#admin-panel-items > .admin-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#admin-panel-items #item-loot-hint {
  flex-shrink: 0;
  margin: 0 0 10px;
}
#admin-panel-items .admin-item-list-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
#item-loot-section {
  flex: 0 1 auto;
  max-height: min(46vh, 440px);
  overflow: auto;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--gold-dim);
}
#item-loot-section .stat-row-inline { margin-bottom: 6px; }
#item-loot-section select { flex: 1; }
#item-loot-list { margin: 8px 0; }
.loot-entry-row .loot-chance-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: #999;
  font-size: 11px;
}
.loot-entry-row .loot-chance-input {
  width: 64px;
  margin: 0;
  padding: 4px 6px;
  font-size: 12px;
}
.loot-entry-row .loot-save-chance-btn {
  margin-top: 0;
  flex-shrink: 0;
}
.item-slot-group-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 14px 0 6px;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-bright);
  border-bottom: 1px solid var(--gold-dim);
  cursor: pointer;
  border-radius: 2px;
}
.item-slot-group-title:hover {
  background: rgba(255, 255, 255, 0.06);
}
.item-slot-group-title.collapsed {
  opacity: 0.85;
}
.item-slot-group-title:first-child { margin-top: 0; }
.item-slot-group-label {
  flex: 1 1 auto;
  min-width: 120px;
}
.item-slot-group-title .tpl-vis-toggle-group {
  font-weight: 600;
  color: var(--text-muted);
}

.primary-btn { margin-top: 6px; }
.secondary-btn { margin-top: 4px; }

/* tilesety */
#tileset-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.tileset-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: var(--wood);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.tileset-item.selected { outline: 2px solid var(--gold-bright); }
.tileset-item img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.tileset-item-label { flex: 1; min-width: 0; }
.tileset-item-size {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  flex-shrink: 0;
  cursor: default;
}
.tileset-item-size input {
  width: 48px;
  padding: 2px 4px;
  font-size: 12px;
  margin: 0;
}
.tileset-item-size-btn {
  background: var(--slot-bg, #3a2a1a) !important;
  border: 1px solid var(--slot-border) !important;
  color: var(--gold-bright, #ffd700) !important;
  cursor: pointer;
  padding: 2px 6px !important;
  font-size: 11px;
  border-radius: 0;
}
.tileset-item-del { background: none; border: none; color: var(--danger-soft); cursor: pointer; }
.tileset-item button.tileset-item-del { background: none; border: none; color: var(--danger-soft); cursor: pointer; }

#tile-palette-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--slot-bg);
  border-radius: 0;
  border: 1px solid var(--wood-dark);
}
#tile-palette { image-rendering: pixelated; cursor: crosshair; display: block; }

/* edytor mapy */
#map-editor-coords {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-dim, #c8b89a);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  flex-shrink: 0;
}
#map-editor-scroll {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}
#map-editor-canvas { image-rendering: pixelated; cursor: crosshair; display: block; }
#admin-mapgen-preview-scroll {
  flex: 1;
  min-width: 0;
  min-height: 280px;
  max-height: min(72vh, 720px);
  overflow: auto;
  border: 1px solid var(--slot-border);
  background: #121812;
}
#admin-mapgen-canvas {
  image-rendering: pixelated;
  display: block;
}
.admin-mapgen-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
#admin-mapgen-preview-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 8px;
}
.admin-mapgen-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.admin-mapgen-preview-toolbar span {
  flex: 1 1 200px;
  font-size: 13px;
  color: var(--text-muted, #b8c4b0);
}
.admin-mapgen-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.admin-mapgen-stats-card {
  flex-shrink: 0;
}
.admin-mapgen-stats-card h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--gold-bright);
}
#spawn-editor-scroll { max-width: 100%; max-height: 100%; overflow: auto; }
#herbalism-editor-scroll { max-width: 100%; max-height: 100%; overflow: auto; }
#herbalism-editor-canvas { image-rendering: pixelated; cursor: crosshair; }
.herbalism-admin-fields { display: grid; gap: 4px; }
.herbalism-admin-fields label { display: flex; justify-content: space-between; gap: 8px; }
.herbalism-admin-fields input { width: 88px; }
#admin-plant-spawn-list { display: grid; gap: 4px; max-height: 250px; overflow: auto; }

.character-panel-tabs,
.life-skills-tabs { display: flex; gap: 4px; border-bottom: 1px solid #8a6a28; padding: 7px 0; }
.character-panel-tabs button,
.life-skills-tabs button { background: #392718; border: 1px solid #79602c; color: #d8c899; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.character-panel-tabs button.active,
.life-skills-tabs button.active { background: #64451e; border-color: #c9a227; color: #fff0be; }
#character-body.hidden,
#character-life-skills-content.hidden,
.life-skill-content.hidden { display: none; }
#character-life-skills-content { max-height: min(65vh, 520px); min-height: 0; flex: 1 1 auto; overflow-y: auto; color: #e7d9b0; padding: 8px 4px 4px; }
.life-skill-content { padding: 4px 6px; }
.herbalism-xp-track { height: 10px; background: #101810; border: 1px solid #879768; }
#herbalism-xp-fill { height: 100%; background: linear-gradient(90deg, #4f8a49, #a9d16b); width: 0; }
#character-life-skills-content h4 { color: #e4cf8b; margin: 16px 0 6px; font-size: 14px; }
.herbalism-plant-row { display: flex; align-items: center; gap: 8px; min-height: 35px; border-bottom: 1px solid #ffffff19; font-size: 12px; }
.herbalism-plant-row img { width: 32px; height: 32px; image-rendering: pixelated; }
  #alchemy-xp-fill { height: 100%; background: linear-gradient(90deg, #695096, #b887d5); width: 0; }
  #cooking-xp-fill { height: 100%; background: linear-gradient(90deg, #9a4821, #e0a947); width: 0; }
  #cooking-status { color: #e9d497; min-height: 1em; }
#alchemy-station-hint { color: #c4b89b; line-height: 1.4; }
.alchemy-station-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 110; width: min(900px, 94vw); max-height: 82vh; overflow-y: auto; padding: 0 14px 12px; color: #e7d9b0; background: linear-gradient(145deg, #252721, #111713 70%); border: 3px solid #69562d; outline: 1px solid #b89448; outline-offset: -5px; box-shadow: 0 12px 34px #000a, inset 0 0 0 2px #382713; }
.alchemy-station-panel.hidden { display: none; }
.alchemy-station-panel .panel-header { display: flex; align-items: center; justify-content: space-between; margin: 0 -14px 10px; padding: 8px 12px; background: #443019; border-bottom: 2px solid #8a6a28; }
.alchemy-station-panel > p { margin: 8px 0; font-size: 13px; }
.alchemy-station-grid { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.3fr) minmax(190px, 1fr); gap: 8px; min-height: 330px; }
.alchemy-station-column { min-width: 0; padding: 10px; background: #101715; border: 1px solid #4b5143; box-shadow: inset 0 0 0 2px #202821; }
.alchemy-station-column h3 { margin: 0 0 10px; padding-bottom: 8px; color: #d9c38b; border-bottom: 1px solid #52604b; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
#alchemy-station-recipes, #cooking-station-recipes { display: grid; align-content: start; gap: 3px; max-height: 51vh; overflow-y: auto; }
.alchemy-station-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; color: #d7d6c1; text-align: left; background: #1b2521; border: 1px solid #3a473d; cursor: pointer; font-size: 12px; }
.alchemy-station-option:hover, .alchemy-station-option[aria-selected="true"] { color: #fff0bb; background: #343523; border-color: #c39a46; }
.alchemy-station-option img, .alchemy-material img { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.alchemy-material { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #405043; font-size: 12px; }
.alchemy-material-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alchemy-material-owned { color: #9fd29b; font-size: 0.9em; }
.alchemy-material-owned.missing { color: #e08a7a; }
.alchemy-station-summary { display: flex; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #405043; font-size: 12px; }
.alchemy-station-summary strong { color: #eee1b1; }
#alchemy-station-result-preview, #cooking-station-result-preview { display: grid; justify-items: center; gap: 12px; padding: 24px 4px; text-align: center; color: #f3dc9c; font-size: 14px; }
#alchemy-station-result-preview img, #cooking-station-result-preview img { width: 76px; height: 76px; image-rendering: pixelated; }
#alchemy-station-requirement, #cooking-station-requirement { color: #c4c5ad; text-align: center; font-size: 12px; }
.alchemy-station-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; }
.alchemy-station-footer #alchemy-status, .alchemy-station-footer #cooking-station-status { margin: 0; }
.alchemy-station-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.alchemy-station-footer button { min-width: 110px; }
.alchemy-station-unclaimed { margin-top: 10px; padding: 8px; background: #141c18; border: 1px solid #7c6d32; border-radius: 4px; font-size: 12px; color: #fce8a2; width: 100%; box-sizing: border-box; }
.alchemy-station-unclaimed.hidden { display: none; }
.alchemy-station-unclaimed-title { font-weight: bold; margin-bottom: 4px; color: #ffd700; text-align: left; }
.alchemy-station-unclaimed-list { display: flex; flex-direction: column; gap: 4px; }
.alchemy-station-unclaimed-item { display: flex; align-items: center; gap: 6px; }
.alchemy-station-unclaimed-item img { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.crafting-deposit { border-color: #4f7c8a; color: #bfe6f2; }
.crafting-deposit .alchemy-station-unclaimed-title { color: #8fd3ea; }
.crafting-deposit-note { margin: 6px 0 0; text-align: left; }
.crafting-deposit-note:empty { display: none; }
.crafting-cancel-confirm { margin-top: 8px; padding: 8px; border: 1px solid #8a4040; border-radius: 4px; background: #241414; color: #ffd6d6; text-align: left; }
.crafting-cancel-confirm.hidden { display: none; }
.crafting-cancel-confirm p { margin: 0 0 6px; }
.crafting-cancel-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.crafting-cancel-actions button { min-height: 32px; flex: 1 1 auto; }
#alchemy-station-cancel.hidden, #cooking-station-cancel.hidden { display: none; }
#cooking-station-claim:not(:disabled), #alchemy-station-claim:not(:disabled) { border-color: #ffd700; color: #fff8d6; box-shadow: 0 0 8px #ffd70066; }
@media (max-width: 650px) { .alchemy-station-grid { grid-template-columns: minmax(125px, 1fr) minmax(170px, 1.3fr); } .alchemy-station-output { grid-column: 1 / -1; } }
.alchemy-recipe { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px solid #ffffff26; }
.alchemy-recipe img { width: 38px; height: 38px; image-rendering: pixelated; flex: 0 0 auto; }
.alchemy-recipe > div { display: grid; gap: 3px; flex: 1; min-width: 0; }
.alchemy-recipe strong { color: #f0d999; font-size: 13px; }
.alchemy-recipe small { color: #d5c9ad; font-size: 11px; line-height: 1.3; }
.alchemy-recipe button { flex: 0 0 auto; }
#alchemy-status { color: #e9d497; min-height: 1em; }
.alchemy-admin-sidebar { display: grid; align-content: start; gap: 4px; }
.alchemy-admin-sidebar label { margin-top: 4px; }
.alchemy-admin-sidebar input, .alchemy-admin-sidebar select { max-width: 100%; box-sizing: border-box; }
#admin-alchemy-ingredients { display: grid; gap: 4px; }
.alchemy-admin-ingredient { display: grid; grid-template-columns: minmax(0, 1fr) 62px 30px; gap: 6px; padding: 6px; background: #1a120c; border: 1px solid var(--slot-border); }
.alchemy-admin-ingredient select { min-width: 0; }
.alchemy-admin-ingredient input { width: 100%; box-sizing: border-box; }
.alchemy-admin-ingredient button { padding: 2px; }
.alchemy-admin-ingredient input[type="search"] { grid-column: 1 / -1; }
.alchemy-admin-section { display: grid; gap: 4px; min-width: 0; margin: 8px 0; padding: 10px; border: 1px solid var(--slot-border); }
.alchemy-admin-section legend { color: var(--gold); font-size: 14px; }
.alchemy-admin-sidebar input[type="search"] { min-width: 0; width: 100%; box-sizing: border-box; padding: 6px; font-size: 14px; border: 1px solid #6b4a28; background: #1a120c; color: var(--text); }
#admin-alchemy-summary { padding: 10px; border: 1px solid var(--slot-border); overflow-wrap: anywhere; }
#admin-panel-alchemy { flex-direction: column; overflow: auto; }
.alchemy-admin-workbench { display: grid; grid-template-columns: minmax(160px, 0.8fr) minmax(260px, 1.4fr) minmax(200px, 1fr); align-items: start; }
.alchemy-admin-workbench .admin-sidebar { width: auto; min-width: 0; overflow: visible; box-sizing: border-box; }
.alchemy-admin-workbench input[type="search"] { width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #6b4a28; background: #1a120c; color: var(--text); font-size: 14px; }
#admin-alchemy-catalog { display: grid; gap: 6px; max-height: 520px; overflow: auto; }
.alchemy-admin-item, .alchemy-admin-drop { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; color: var(--text); background: #1a120c; border: 1px solid var(--slot-border); font-size: 14px; text-align: left; overflow-wrap: anywhere; }
.alchemy-admin-item { width: 100%; cursor: grab; }
.alchemy-admin-item:active { cursor: grabbing; }
.alchemy-admin-item img, .alchemy-admin-drop img { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; }
.alchemy-admin-drop { min-height: 64px; border-style: dashed; cursor: pointer; }
.alchemy-admin-drop.filled { border-style: solid; }
.alchemy-admin-drop.active, .alchemy-admin-drop.drag-over, .alchemy-admin-drop:focus-visible, .alchemy-admin-item:hover { border-color: var(--gold); outline: 2px solid var(--gold-dim); }
#admin-alchemy-output-slot { min-height: 90px; background: #202315; border-color: #69844b; }
.alchemy-admin-picker { grid-column: 1 / -1; min-width: 0; }
.alchemy-admin-picker summary, .alchemy-admin-map > summary { cursor: pointer; color: var(--gold); font-size: 14px; padding: 6px 0; }
.alchemy-admin-ingredient label { display: grid; align-content: center; margin: 0; }
.alchemy-admin-map { padding: 12px; border-top: 1px solid var(--slot-border); }
.alchemy-admin-arrow { text-align: center; color: var(--gold); font-size: 24px; }
@media (max-width: 850px) {
  .alchemy-admin-workbench { grid-template-columns: minmax(140px, 1fr) minmax(240px, 2fr); }
  .alchemy-admin-parameters { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .alchemy-admin-workbench { grid-template-columns: minmax(0, 1fr); }
  #admin-alchemy-catalog { max-height: 180px; }
}
#admin-alchemy-stations { display: grid; gap: 4px; max-height: 170px; overflow: auto; }
#alchemy-editor-scroll { max-width: 100%; max-height: 100%; overflow: auto; }
#alchemy-editor-canvas { image-rendering: pixelated; cursor: crosshair; }
#spawn-editor-canvas { image-rendering: pixelated; cursor: crosshair; display: block; }
#spawn-list {
  max-height: 280px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.spawn-tool-modes {
  display: flex;
  gap: 6px;
  margin: 8px 0 4px;
}
.spawn-tool-btn {
  flex: 1;
  margin-top: 0;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--wood-mid);
  color: var(--text);
  border: 1px solid var(--slot-border);
  cursor: pointer;
}
.spawn-tool-btn:hover { border-color: var(--gold); }
.spawn-tool-btn.active {
  background: var(--wood-light);
  border-color: var(--gold-bright);
  color: var(--ink);
  font-weight: 700;
}
.spawn-list-group {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 4px 6px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
}
.spawn-list-group:hover {
  background: rgba(255, 255, 255, 0.06);
}
.spawn-list-group:first-child { margin-top: 0; }
.spawn-list-group.collapsed {
  opacity: 0.85;
}
.spawn-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  cursor: pointer;
  font-size: 12px;
}
.spawn-list-row.selected {
  outline: 2px solid var(--gold-bright);
}
.spawn-list-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spawn-list-row .delete-btn {
  background: none;
  border: none;
  color: #e57373;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
}

/* edytor przedmiot??w */
.sprite-preview {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  background: var(--slot-bg);
  border-radius: 0;
  border: 1px solid #333;
  margin: 4px 0;
}
.sprite-preview.hidden { display: none; }

.sheet-grid-preview {
  display: block;
  max-width: 100%;
  margin: 8px 0;
  image-rendering: pixelated;
  background: var(--slot-bg);
  border: 1px solid #333;
  border-radius: 0;
  cursor: pointer;
}
.sheet-grid-preview.hidden { display: none; }

.dir-assign {
  margin: 6px 0 10px;
  padding: 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
}
.dir-assign.hidden { display: none; }

/* --- Import z osobnych klatek (panel admina) ----------------------------- */
.frame-import {
  margin: 10px 0 14px;
  padding: 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
}

/* Grupy klatek tego samego wyglądu: chód / stanie / atak */
.frame-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.frame-group {
  margin: 10px 0 0;
  padding: 8px;
  border: 1px solid var(--slot-border);
  border-radius: 0;
  background: var(--panel-inner);
}

.frame-group-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e8e8e8);
}

.frame-group .frame-import-actions { margin-top: 0; }
.frame-group .stat-row-inline { margin: 4px 0 6px; }

.frame-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}

/* Siatka klatek jako wiersze z etykietą kierunku (żeby było widać, gdzie „lewo”) */
.frame-rows {
  display: block;
  margin: 6px 0;
  --frame-slot-size: 40px;
}

.frame-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  margin-bottom: 4px;
}

.frame-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 4px 6px;
  background: var(--slot-bg);
  border: 1px dashed #444;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.frame-row-label:hover { border-color: #64b5f6; }
.frame-row-label.is-assigned {
  border-style: solid;
  border-color: var(--slot-border);
}
.frame-row-index {
  color: var(--text-dim, #8a8fa3);
  font-size: 10px;
  line-height: 1.2;
}
.frame-row-dirs {
  font-size: 12px;
  line-height: 1.2;
}

.frame-row-slots {
  display: grid;
  gap: 4px;
}

.frame-dir-toolbar {
  margin: 6px 0 10px;
  padding: 6px;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
}
.frame-dir-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}
.frame-dir-btn {
  padding: 4px 8px;
  background: #2a2e3d;
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: inherit;
  cursor: pointer;
}
.frame-dir-btn:hover { background: #353a4d; }
.frame-dir-btn.active {
  background: #1e3a5f;
  border-color: #64b5f6;
}
#class-frame-dir-status.is-error,
#skin-frame-dir-status.is-error {
  color: #e57373;
}

.frame-grid {
  display: grid;
  gap: 4px;
  margin: 6px 0;
  --frame-slot-size: 40px;
}

.frame-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: var(--frame-slot-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slot-bg);
  border: 1px dashed #444;
  border-radius: 0;
  overflow: hidden;
}
.frame-slot.is-filled {
  border-style: solid;
  border-color: var(--slot-border);
}
.frame-slot.is-drop-target {
  border-color: #64b5f6;
  box-shadow: inset 0 0 0 1px #64b5f6;
}
.frame-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  cursor: grab;
}
.frame-slot-index {
  position: absolute;
  left: 2px;
  bottom: 0;
  line-height: 1.1;
  color: var(--text-dim, #8a8fa3);
  font-size: 10px;
  pointer-events: none;
}

.frame-pool {
  margin: 6px 0;
  padding: 6px;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
}
.frame-pool .frame-grid { margin-bottom: 0; }

#class-frame-status.is-error,
#skin-frame-status.is-error {
  color: #e57373;
}

/* --- Szablony wyglądów klas (panel admina) ------------------------------- */
.look-templates {
  margin: 10px 0 14px;
  padding: 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
}

.look-tpl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--slot-border);
}
.look-tpl-row:last-child { border-bottom: 0; }

.look-tpl-thumb {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
  image-rendering: pixelated;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
}
.look-tpl-thumb-empty { display: inline-block; }

.look-tpl-row .tpl-info { flex: 1 1 auto; min-width: 0; }
.look-tpl-row .tpl-name { display: block; }
.look-tpl-row .tpl-rarity { display: block; }
.look-tpl-row .secondary-btn { flex: 0 0 auto; }
.dir-assign-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.dir-assign-btn {
  background: var(--slot-border);
  color: var(--text-dim);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.dir-assign-btn:hover { background: #353a4d; }
.dir-assign-btn.active {
  background: #3d4a6b;
  border-color: var(--gold);
  color: #fff;
}
.dir-assign-btn[data-dir="up"].active { border-color: #64b5f6; }
.dir-assign-btn[data-dir="down"].active { border-color: #81c784; }
.dir-assign-btn[data-dir="left"].active { border-color: #ffb74d; }
.dir-assign-btn[data-dir="right"].active { border-color: #e57373; }
.dir-assign-status {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.monster-anim-layout,
.class-anim-layout {
  margin: 10px 0 8px;
  padding: 8px;
  border: 1px solid #2a2f3d;
  background: #151820;
}
.monster-anim-layout.hidden,
.class-anim-layout.hidden { display: none; }
.monster-anim-layout h4,
.class-anim-layout h4 {
  margin: 0 0 8px;
  font-size: 13px;
}
.monster-walk-anim-toggle {
  margin: 8px 0 2px;
  font-size: 13px;
  color: var(--text);
}
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.checkbox-inline input {
  width: auto;
  margin: 0;
}
.admin-upgrade-sidebar {
  width: 300px;
}
.admin-upgrade-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.upgrade-enabled-stats-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 14px;
  max-height: min(70vh, 640px);
  overflow: auto;
  padding: 4px 2px;
}
.upgrade-stat-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(160px, 1fr) minmax(190px, 1.2fr);
  gap: 8px 10px;
  align-items: center;
  padding: 6px 8px;
  background: #1a120c;
  border: 1px solid #3a2818;
}
.upgrade-enabled-stats-rows .upgrade-stat-check {
  display: flex;
  width: 100%;
  margin: 0;
}
.upgrade-stat-row select {
  width: 100%;
  margin: 0;
}
.upgrade-stat-params {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.upgrade-stat-params.hidden {
  display: none;
}
.upgrade-stat-params input[type="number"] {
  width: 64px;
  margin: 0;
}
.monster-anim-custom-fields {
  margin-top: 6px;
}
.monster-anim-custom-fields.hidden,
#monster-anim-attack-fields.hidden,
#class-anim-attack-fields.hidden {
  display: none;
}

.stat-row { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; }
.stat-row select { flex: 1.4; }
.stat-row input { flex: 1; width: auto; }
.stat-row .remove-row-btn {
  background: none;
  border: none;
  color: #e57373;
  cursor: pointer;
  font-size: 12px;
  flex: 0 0 auto;
}

.rarity-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
}
.rarity-row .rarity-key-label { width: 70px; color: #999; }
.rarity-row .rc-label { flex: 1; width: auto; }
.rarity-row .rc-color { width: 32px; padding: 0; height: 26px; }
.rarity-row .rc-count { width: 48px; }
.rarity-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 0;
  flex-shrink: 0;
  border: 1px solid var(--wood-dark);
}

/* lista przedmiot??w admina */
.item-template-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--panel-inner);
  border-radius: 0;
  margin-bottom: 6px;
  font-size: 12px;
}
.item-template-row.selected {
  outline: 2px solid var(--gold-bright);
}
.tpl-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  background: var(--slot-bg);
  border-radius: 0;
}
.tpl-icon-placeholder { display: inline-block; background: var(--slot-bg); border-radius: 0; }
.tpl-name { flex: 0 1 auto; min-width: 80px; font-weight: 600; }
.tpl-walk-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}
.tpl-rarity { color: #999; font-size: 11px; flex: 0 0 auto; line-height: 1.35; }
.tpl-req-level {
  color: var(--gold-bright);
  font-size: 11px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.tpl-fixed-stats {
  color: #b8c0d0;
  font-size: 11px;
  flex: 1 1 120px;
  min-width: 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-vis-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.tpl-vis-toggle input {
  margin: 0;
  cursor: pointer;
}
.item-template-row button {
  background: var(--wood-mid);
  color: #eee;
  border: none;
  padding: 5px 8px;
  border-radius: 0;
  cursor: pointer;
  font-size: 11px;
}
.item-template-row button:hover { background: #454c6e; }
.item-template-row .delete-btn { color: #e57373; }
.npc-shop-drag-handle {
  flex: 0 0 auto;
  padding: 5px 3px;
  color: var(--gold-bright);
  cursor: grab;
  user-select: none;
  font-size: 16px;
  line-height: 1;
}
.npc-shop-drag-handle:active { cursor: grabbing; }
.npc-shop-order-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  max-width: 440px;
  margin: 0 0 12px;
}
.npc-shop-grid-slot {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 2px;
  border: 2px solid var(--slot-border);
  background: var(--slot-bg);
  cursor: grab;
}
.npc-shop-grid-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.npc-shop-grid-slot:active { cursor: grabbing; }
.npc-shop-grid-index { position: absolute; right: 2px; bottom: 1px; color: #fff; font-size: 10px; text-shadow: 1px 1px #000; }
.npc-shop-drop-target.dragging { opacity: 0.45; }
.npc-shop-drop-target.drop-before { box-shadow: inset 0 3px var(--gold-bright); }
.npc-shop-drop-target.drop-after { box-shadow: inset 0 -3px var(--gold-bright); }

.keys-admin-row {
  align-items: center;
  gap: 12px;
}
.keys-admin-meta {
  flex: 1;
  min-width: 0;
}
.keys-admin-chance {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.keys-admin-chance label {
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  color: #9aa3bd;
}
.keys-admin-chance .keys-chance-input {
  width: 88px;
  margin: 0;
}
.keys-admin-chance .primary-btn {
  margin: 0;
}

#skill-tree-editor {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--slot-border);
}
.skill-tree-tier-block {
  margin: 12px 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.skill-tree-perk-card {
  margin: 8px 0;
  padding: 8px;
  border: 1px solid var(--slot-border);
}
.st-fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.st-fx-grid label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  gap: 2px;
}
.pt-admin-fx-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.pt-admin-fx-row {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) 32px;
  grid-template-areas:
    "label label"
    "input remove";
  gap: 4px 6px;
  align-items: center;
}
.admin-sidebar .pt-admin-fx-row label {
  grid-area: label;
  display: block;
  min-width: 0;
  max-width: none;
  margin: 0;
  font-size: 11px;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}
.pt-admin-fx-row .pt-admin-fx-key {
  display: block;
  color: var(--text-dim);
  font-size: 11px;
}
.admin-sidebar .pt-admin-fx-row input[type="number"] {
  grid-area: input;
  width: 100%;
  min-width: 96px;
  margin: 0;
}
.pt-admin-fx-row .pt-admin-fx-remove {
  grid-area: remove;
  width: 32px;
  min-width: 32px;
  padding: 4px 0;
  margin: 0;
  line-height: 1;
}
.admin-main-passive {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 16px;
}
.passive-admin-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.passive-admin-toolbar h3 {
  margin: 0;
}
.passive-admin-nav-hint {
  margin: 0 0 8px;
}
.passive-admin-viewport {
  flex: 1;
  min-height: 360px;
  border: 2px solid #6a5028;
  background: radial-gradient(circle at 50% 48%, #192036 0%, #0b1020 55%, #080b16 100%);
  overflow: hidden;
  cursor: grab;
  position: relative;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.75);
  -webkit-user-select: none;
  user-select: none;
}
#passive-admin-svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.pt-node.pt-admin-selected .pt-outer {
  stroke: #ffe08a !important;
  filter: url(#pt-admin-glow);
}
.passive-admin-selection {
  margin: 8px 0 12px;
  padding: 8px;
  border: 1px solid var(--slot-border);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.passive-admin-bulk {
  margin: 8px 0 12px;
  padding: 8px;
  border: 1px solid var(--slot-border);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.passive-admin-bulk .admin-section-title {
  margin: 0 0 4px;
}
#passive-admin-node-tooltip {
  position: fixed;
  z-index: 6000;
  max-width: 280px;
  padding: 10px 12px;
  pointer-events: none;
  background: linear-gradient(180deg, #2a1e14 0%, #14100a 100%);
  border: 1px solid #8a6a28;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65);
  color: #e8dcc0;
  font-size: 12px;
  line-height: 1.35;
}
#passive-admin-node-tooltip.hidden { display: none; }
#passive-admin-node-tooltip .ptt-kind {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c0a060;
  margin-bottom: 2px;
}
#passive-admin-node-tooltip .ptt-name {
  font-family: Cinzel, Georgia, 'Times New Roman', serif;
  font-size: 14px;
  color: #f0d080;
  margin-bottom: 4px;
}
#passive-admin-node-tooltip .ptt-concept {
  font-size: 11px;
  color: #9a8a70;
  margin-bottom: 6px;
}
#passive-admin-node-tooltip .ptt-section { margin-top: 6px; }
#passive-admin-node-tooltip .ptt-label {
  font-size: 10px;
  color: #a09070;
  margin-bottom: 2px;
}
#passive-admin-node-tooltip .ptt-effect { color: #d8c8a8; }
#passive-admin-node-tooltip .ptt-cost { color: #e89080; }
#passive-admin-node-tooltip .ptt-excl {
  color: #d0a878;
  margin-top: 6px;
  font-size: 11px;
}
#passive-admin-node-tooltip .ptt-status {
  margin-top: 8px;
  color: #c8b070;
  font-size: 11px;
}

/* --- Paleta kafelk??w: info o zaznaczeniu --- */
#palette-selection-info {
  font-size: 11px;
  color: #ffd700;
  margin: 4px 0 0;
  flex-shrink: 0;
}

.map-brush-size-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 13px;
}
.map-brush-size-row .map-brush-size-title {
  min-width: 7.5em;
}
.map-brush-size-row #map-brush-size {
  flex: 1;
  min-width: 80px;
  max-width: 140px;
}
.map-brush-size-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  cursor: pointer;
}
#map-brush-size-value {
  min-width: 1.5em;
  font-weight: 600;
  color: #ffd700;
  font-size: 13px;
}

/* --- Edytor potwor??w (szablony + spawny) --- */
#monster-editor-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--slot-border);
}
.stat-row-inline {
  display: flex;
  gap: 4px;
}
.stat-row-inline > div { flex: 1; min-width: 0; }
.stat-row-inline input { flex: 1; min-width: 0; }

/* Filtrowany wybór przedmiotów w panelu admina */
.admin-item-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 2;
  min-width: 0;
  width: 100%;
}
.admin-item-select-wrap > select {
  width: 100%;
  min-width: 0;
}
.admin-item-select-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.admin-item-select-filters input[type="search"],
.admin-item-select-filters input[type="number"],
.admin-item-select-filters select {
  margin: 0;
  min-width: 0;
}
.admin-item-select-filters input[type="search"] {
  flex: 2 1 120px;
}
.admin-item-select-filters select[data-item-filter="slot"] {
  flex: 1 1 110px;
}
.admin-item-select-filters input[data-item-filter="minLevel"],
.admin-item-select-filters input[data-item-filter="maxLevel"] {
  flex: 0 1 72px;
  width: 72px;
}
#task-admin-reward-items-wrap {
  margin-bottom: 6px;
}
#task-admin-reward-items-wrap .task-reward-item-row {
  margin-top: 4px;
}
.item-copy-random-row {
  align-items: end;
  margin-bottom: 6px;
}
.item-copy-random-row .item-copy-random-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: end;
}
.item-copy-random-row #item-copy-random-from {
  width: 100%;
}
.admin-section-title {
  margin: 14px 0 6px;
  font-size: 13px;
  color: var(--gold-bright);
}
.class-sprite-source {
  margin: 8px 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--slot-border);
  background: var(--slot-bg);
}
.class-sprite-source legend {
  padding: 0 4px;
  font-size: 12px;
  color: var(--gold-bright);
}
.class-sprite-source-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
}
.class-sprite-source-opt input[type="radio"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
  pointer-events: auto;
  cursor: pointer;
}
.class-sprite-source-opt.is-needs-upload {
  color: var(--text-muted);
}

.admin-players-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.admin-players-view-btn {
  background: var(--slot-border);
  color: #ccc;
  border: 1px solid var(--slot-border);
  border-radius: 0;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.admin-players-view-btn.active {
  background: var(--slot-border);
  color: #fff;
  border-color: #5a6a90;
}
#admin-players-filter {
  flex: 1;
  min-width: 160px;
  padding: 5px 8px;
  border-radius: 0;
  border: 1px solid #333;
  background: var(--slot-bg);
  color: #eee;
  font-size: 12px;
}

.admin-server-autopolllabel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.admin-server-banner {
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--slot-border);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.admin-server-banner.status-ok {
  background: rgba(76, 175, 80, 0.15);
  border-color: #4caf50;
  color: #a5d6a7;
}
.admin-server-banner.status-degraded {
  background: rgba(255, 193, 7, 0.12);
  border-color: #ffc107;
  color: #ffe082;
}
.admin-server-banner.status-critical {
  background: rgba(244, 67, 54, 0.15);
  border-color: #f44336;
  color: #ef9a9a;
}
.admin-server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.admin-server-card {
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  padding: 12px 14px;
}
.admin-server-card h3 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--gold-bright);
}
.admin-server-card-full {
  margin-top: 14px;
}
.admin-chat-ann-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.admin-mapgen-result {
  margin: 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--slot-border);
  border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow: auto;
}
.admin-server-stats {
  margin: 0;
  display: grid;
  gap: 6px 12px;
}
.admin-server-stats > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.admin-server-stats dt {
  margin: 0;
  color: var(--text-muted);
}
.admin-server-stats dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: #eee;
}

.admin-server-lag-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  max-height: 420px;
  overflow: auto;
}
.admin-server-lag-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}
.admin-server-lag-row {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--slot-border);
  font-size: 12px;
}
.admin-server-lag-row.reason-critical,
.admin-server-lag-row.status-critical {
  border-color: #ef9a9a;
}
.admin-server-lag-row.reason-degraded,
.admin-server-lag-row.status-degraded {
  border-color: #ffe082;
}
.admin-server-lag-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 6px;
  align-items: baseline;
}
.admin-server-lag-time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.admin-server-lag-tick {
  font-weight: 700;
  color: #eee;
  font-variant-numeric: tabular-nums;
}
.admin-server-lag-reason {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #ffe082;
}
.admin-server-lag-row.reason-critical .admin-server-lag-reason,
.admin-server-lag-row.status-critical .admin-server-lag-reason {
  color: #ef9a9a;
}
.admin-server-lag-dom {
  color: #90caf9;
}
.admin-server-lag-meta,
.admin-server-lag-sec,
.admin-server-lag-use {
  color: #ccc;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.admin-ac-badge {
  display: inline-block;
  min-width: 1.15em;
  margin-left: 6px;
  padding: 1px 5px;
  background: #c62828;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: middle;
}
.admin-ac-badge.hidden { display: none; }
.admin-ac-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-ac-row {
  display: grid;
  grid-template-columns: 88px 1fr auto auto;
  gap: 6px 12px;
  padding: 10px 12px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  font-size: 12px;
}
.admin-ac-row.unacked {
  border-color: #ffc107;
}
.admin-ac-row.critical.unacked {
  border-color: #f44336;
  background: rgba(244, 67, 54, 0.08);
}
.admin-ac-row.acked {
  opacity: 0.55;
}
.admin-ac-row .ac-time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.admin-ac-row .ac-name {
  font-weight: 700;
  color: #eee;
}
.admin-ac-row .ac-msg {
  grid-column: 1 / -1;
  color: #ddd;
}
.admin-ac-row .ac-id {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 11px;
  font-family: ui-monospace, Consolas, monospace;
  word-break: break-all;
}
.admin-ac-row .ac-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-ac-row .ac-type {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: #333;
  color: #ffe082;
  white-space: nowrap;
}
.admin-ac-row.critical .ac-type {
  background: #5d1a1a;
  color: #ef9a9a;
}
.admin-ac-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 16px 4px;
}

.admin-balance-section {
  margin-top: 16px;
}
.admin-balance-section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #ddd;
}
.admin-balance-table-wrap {
  overflow: auto;
  max-height: 280px;
  border: 1px solid var(--slot-border);
  background: var(--panel-inner);
}
.admin-balance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.admin-balance-table th,
.admin-balance-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--slot-border);
  white-space: nowrap;
}
.admin-balance-table th {
  position: sticky;
  top: 0;
  background: var(--panel-inner);
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
}
.admin-balance-table td.num,
.admin-balance-table th.num {
  text-align: right;
}
.admin-balance-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 12px 8px;
}
.admin-balance-kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  margin: 0;
}
.admin-balance-kv dt {
  color: var(--text-muted);
  font-size: 12px;
}
.admin-balance-kv dd {
  margin: 0;
  text-align: right;
  font-size: 12px;
  color: #eee;
}
.admin-chart-wrap {
  padding: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--slot-border);
  margin-top: 6px;
}
.admin-chart-canvas { display: block; width: 100%; }
.admin-server-online-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-server-online-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.admin-server-online-controls select {
  min-width: 130px;
}
.admin-online-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.admin-economy-flows-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.admin-economy-flows-grid h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--gold-bright);
}
.admin-economy-hours-wrap { max-height: 420px; overflow: auto; }
.eco-delta-pos { color: #81c784; }
.eco-delta-neg { color: #e57373; }
.eco-delta-zero { color: #cfd8dc; }
.eco-emph { font-weight: 700; color: var(--gold-bright); }
.eco-flow-in { color: #a5d6a7; }
.eco-flow-out { color: #ef9a9a; }

.admin-player-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--panel-inner);
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
}
.admin-player-row:hover { border-color: var(--slot-border); }
.admin-player-row.selected { border-color: var(--gold-bright); background: #242838; }
.admin-player-row .ap-name { font-weight: bold; color: #eee; min-width: 100px; }
.admin-player-row .ap-meta { color: var(--text-muted); flex: 1; }
.admin-player-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 0;
  font-weight: bold;
}
.admin-player-badge.online { background: #1b5e20; color: #a5d6a7; }
.admin-player-badge.offline { background: #333; color: #999; }
.admin-player-badge.banned { background: #5d1a1a; color: #ef9a9a; }
.admin-player-badge.admin { background: var(--wood-dark); color: var(--parchment); }
.admin-player-badge.premium { background: #5d4037; color: #ffd54f; }
.admin-player-badge.whitelist { background: #1a3a5d; color: #90caf9; }
#admin-player-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#admin-player-actions.hidden { display: none; }
#admin-player-actions .stat-row-inline { align-items: end; }
#admin-player-actions button { width: 100%; }
#admin-player-actions .stat-row-inline > button {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
#admin-player-actions #admin-set-level {
  width: 100%;
  box-sizing: border-box;
}
.item-visibility-flags {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 4px 0;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #ccc;
  user-select: none;
}
.checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #e07020;
}
.hint-text {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  margin: 6px 0;
}
#spawn-selection-info {
  background: var(--wood);
  border-radius: 0;
  padding: 8px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
#spawn-selection-info.hidden { display: none; }
#spawn-selection-info button { width: 100%; }
#spawn-delete-btn { color: #ff8a80; }

/* --- Ekran wyboru / tworzenia postaci --- */
#server-select-screen,
#character-select-screen,
#character-create-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: radial-gradient(ellipse at 50% 20%, #4a3420 0%, transparent 55%), #1a120a;
}
#server-select-screen .auth-box,
#character-select-screen .auth-box,
#character-create-screen .auth-box { width: 440px; }

#server-queue-screen .auth-box { width: 440px; }
.server-queue-message {
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 8px;
}
.server-queue-position {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 18px;
  text-align: center;
  margin: 12px 0 16px;
  min-height: 24px;
}
#server-queue-screen .secondary-btn { width: 100%; }

/* --- Nakładka „łączenie z serwerem” (nad ekranem wyboru postaci) --- */
#connecting-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 12, 6, 0.82);
}
#connecting-screen .auth-box { width: 440px; }
.connecting-box { text-align: center; }
.connecting-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
  border: 3px solid var(--gold-dim);
  border-top-color: var(--gold-bright);
  animation: connecting-spin 900ms linear infinite;
}
@keyframes connecting-spin {
  to { transform: rotate(360deg); }
}
.connecting-box h1 {
  margin: 0 0 10px;
}
.connecting-hint {
  margin: 0;
  text-align: center;
}

#server-list,
#character-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  max-height: 300px;
  overflow-y: auto;
}
.server-list-item,
.character-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  background: var(--wood);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: #eee;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.server-list-item:hover:not(:disabled),
.character-list-item:hover { border-color: var(--gold); background: var(--wood-mid); }
.character-appearance-select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--gold);
  background: var(--wood-mid);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font: inherit;
}
.server-list-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.server-item-name,
.char-item-name { font-weight: bold; }
.server-item-meta,
.char-item-meta { font-size: 12px; color: #999; }

#server-select-logout-btn,
#character-select-new-btn,
#character-select-back-servers-btn,
#character-create-back-btn { width: 100%; margin-top: 4px; }

#class-select-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 10px;
}
.class-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--wood);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  cursor: pointer;
}
.class-option:has(input:checked) { border-color: var(--gold); background: var(--wood-mid); }
.class-option input { margin-top: 3px; }
.class-option-body { display: flex; flex-direction: column; gap: 2px; }
.class-option-label { font-weight: bold; color: #fff; }
.class-option-desc { font-size: 11px; color: #999; }
.class-option-stats { font-size: 11px; color: var(--gold-bright); }

.appearance-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 8px;
}
.appearance-select-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.appearance-select-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--gold-bright);
}
.appearance-select-count { font-size: 11px; color: #999; }

/* Podgląd wybranego skina (duży, bez przewijania listy). */
.appearance-selected-preview {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--gold-dim);
  background: rgba(0, 0, 0, 0.25);
}
.appearance-selected-preview:empty { display: none; }
.appearance-selected-preview .appearance-option-preview {
  width: 72px;
  height: 72px;
}
.appearance-selected-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.appearance-selected-name { font-weight: bold; color: #fff; font-size: 14px; overflow-wrap: anywhere; }
.appearance-selected-desc { font-size: 11px; color: #999; line-height: 1.3; overflow-wrap: anywhere; }

/* Własny przewijany kontener skinów: responsywna siatka, ograniczona wysokość (dowolna liczba skinów). */
#appearance-select-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
  max-height: clamp(132px, 34dvh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
  scrollbar-gutter: stable;
}
#appearance-select-list > .hint-text { grid-column: 1 / -1; }
.appearance-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 6px 4px;
  border: 1px solid var(--wood-light, #5a4634);
  border-radius: 6px;
  background: var(--wood-dark, #2a2118);
  cursor: pointer;
  text-align: center;
}
.appearance-option:has(input:checked) {
  border-color: var(--gold);
  background: var(--wood-mid, #3a2e22);
  box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(240, 192, 64, 0.45);
}
.appearance-option:has(input:checked)::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  font-weight: bold;
  color: #1a120a;
  background: var(--gold-bright);
}
.appearance-option:has(input:focus-visible) { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
/* Radio zostaje dostępny z klawiatury, ale nie zajmuje miejsca na kafelku. */
.appearance-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.appearance-option-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  min-width: 0;
  width: 100%;
  pointer-events: none;
}
.appearance-option-preview {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  background: #111;
  border-radius: 4px;
  flex-shrink: 0;
}
.appearance-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}
.appearance-option-label {
  font-weight: bold;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Opis i link do autorów są w podglądzie wybranego skina — kafelek zostaje kompaktowy. */
.appearance-option-desc,
.appearance-option-text a { display: none; }

/* --- Ekran tworzenia postaci: nagłówek → pola → przewijana lista → stała stopka --- */
#character-create-screen {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--create-top, 0px);
  height: var(--create-vh, 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  overflow: hidden;
}
#character-create-screen.hidden { display: none !important; }
#character-create-screen .auth-box.create-box {
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  max-height: 100%;
  min-height: 0;
  padding: 0 !important;
  min-width: 0;
  overflow: hidden;
}
.create-header { flex: none; padding: 12px 16px 0; }
.create-header h1 { margin: 6px 0 10px; }
#character-create-screen .create-form {
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  padding: 0;
}
#new-character-name { flex: none; margin: 0 16px; width: calc(100% - 32px); }
.create-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px;
}
.create-footer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gold-dim);
  background: var(--panel-bg);
}
.create-footer .error { margin: 0; }
.create-footer .error:empty { display: none; }
.create-footer button { width: 100%; min-height: 44px; margin: 0; }
@media (max-width: 480px), (max-height: 560px) {
  .create-header { padding: 8px 12px 0; }
  .create-header h1 { margin: 4px 0 6px; }
  #new-character-name { margin: 0 12px; width: calc(100% - 24px); }
  .create-scroll { padding: 0 12px; }
  .create-footer { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  #appearance-select-list { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); max-height: clamp(110px, 30dvh, 260px); }
  .appearance-option-preview { width: 44px; height: 44px; }
  .appearance-selected-preview .appearance-option-preview { width: 56px; height: 56px; }
  .class-option { padding: 8px; }
}
@media (max-height: 560px) {
  /* Niski ekran (telefon poziomo): przyciski stopki obok siebie, żeby zostawić miejsce na skiny. */
  .create-footer { flex-direction: row; flex-wrap: wrap; }
  .create-footer .error { flex: 1 1 100%; }
  .create-footer button { flex: 1 1 0; min-width: 0; }
}
@media (max-height: 420px) {
  .create-header h1 { display: none; }
  #appearance-select-list { max-height: 96px; }
}

/* --- Pasek castu --- */
#cast-bar-wrap {
  position: absolute;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  z-index: 13;
  pointer-events: none;
  text-align: center;
}
#cast-bar-wrap.hidden { display: none; }
#cast-bar-label {
  font-size: 12px;
  color: var(--gold-bright, #e8c96a);
  margin-bottom: 3px;
  text-shadow: 1px 1px 0 #000;
}
#cast-bar-track {
  height: 10px;
  background: #1a1410;
  border: 2px solid var(--gold-dim, #8a7040);
  box-shadow: var(--pixel-frame);
  overflow: hidden;
}
#cast-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3d6bb3, #6a9de8);
}

/* --- Pasek hotkeyów (12 slotów, przeciągalny) --- */
#hotbar {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 4px;
  background: var(--panel-bg);
  padding: 6px;
  border: 2px solid var(--gold-dim);
  border-radius: 0;
  box-shadow: var(--pixel-frame);
  z-index: 12;
}
.hotbar-drag-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 18px;
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: -2px;
  border-right: 1px solid var(--slot-border);
  margin-right: 2px;
  padding-right: 2px;
}
.hotbar-drag-handle .panel-header-actions {
  margin-left: 0;
}
.hotbar-drag-handle .panel-lock-btn {
  width: 16px;
  height: 16px;
  margin-right: 0;
  font-size: 9px;
  letter-spacing: 0;
}
.hotbar-drag-handle:active { cursor: grabbing; color: var(--gold-bright); }
#hotbar-slots {
  display: flex;
  gap: 6px;
}
.hotbar-slot {
  position: relative;
  width: 48px;
  height: 48px;
  background:
    radial-gradient(circle at 40% 35%, #2a1c12, #120c08 75%);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.hotbar-slot.filled { border-style: solid; }
.hotbar-slot.skill-slot {
  border-color: #8a6a28;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(201, 162, 39, 0.18);
}
.hotbar-slot.skill-slot.filled {
  border-color: #a88830;
}
#passive-admin-svg .pt-edge { stroke: #697386; stroke-width: 3; opacity: 0.85; }
#passive-admin-svg .pt-node .pt-outer { fill: #242b36; stroke: #8c94a3; stroke-width: 2.5; }
#passive-admin-svg .pt-node.pt-notable .pt-outer { stroke-width: 3.5; }
#passive-admin-svg .pt-node.pt-keystone .pt-outer { stroke-width: 4; }
#passive-admin-svg .pt-zone-red .pt-outer { stroke: #e63946; }
#passive-admin-svg .pt-zone-green .pt-outer { stroke: #2a9d8f; }
#passive-admin-svg .pt-zone-blue .pt-outer { stroke: #4cc9f0; }
#passive-admin-svg .pt-zone-utility .pt-outer { stroke: #e9c46a; }
#passive-admin-svg .pt-zone-neutral .pt-outer { stroke: #fff5c3; }
#passive-admin-svg .pt-node.pt-admin-selected .pt-outer { stroke: #fff0a4 !important; }
.pt-admin-fx-type { max-width: 95px; }
.pt-admin-fx-row:has(.pt-admin-fx-type) {
  grid-template-columns: minmax(80px, 1fr) 94px 32px;
  grid-template-areas: "label label label" "input type remove";
}
.pt-admin-fx-row .pt-admin-fx-type { grid-area: type; width: 100%; }
.hotbar-slot.mana-shield-active,
.mobile-hotbar-slot.mana-shield-active,
.mobile-skill-pad-slot.mana-shield-active {
  border-color: #7ce9ff !important;
  box-shadow: inset 0 0 0 1px rgba(22, 84, 105, 0.8), 0 0 9px rgba(70, 218, 255, 0.85);
}
.hotbar-slot.mana-shield-active::after,
.mobile-hotbar-slot.mana-shield-active::after,
.mobile-skill-pad-slot.mana-shield-active::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(146, 239, 255, 0.75);
  pointer-events: none;
  z-index: 2;
}
.hotbar-slot.dragging { opacity: 0.45; }
.hotbar-slot.drag-over { border-color: var(--gold-bright); background: #22304a; }
.hotbar-slot.activated { border-color: #ffd54f; box-shadow: 0 0 0 2px var(--gold-bright); }
.hotbar-slot.press-pulse {
  transform: scale(0.9);
  filter: brightness(1.4);
}
.hotbar-slot.cd-ready-flash {
  filter: brightness(2.2);
  box-shadow: 0 0 0 2px #fffde7;
}
.hotbar-key {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 10px;
  color: rgba(240, 230, 200, 0.75);
  text-shadow: 0 1px 2px #000;
  z-index: 3;
  pointer-events: none;
}
.hotbar-item {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 26px;
  line-height: 1;
  color: #eee;
  position: relative;
  z-index: 1;
}
.hotbar-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  pointer-events: none;
  display: block;
}
.hotbar-skill-icon.is-glyph {
  font-size: 22px;
}
.hotbar-item .item-qty {
  font-size: 9px;
}
.hotbar-item .item-upgrade {
  font-size: 9px;
}

/* --- Licznik strzał łucznika (obok hotbara) --- */
#ammo-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 42px;
  height: 48px;
  padding: 0 8px;
  background: var(--panel-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  user-select: none;
  pointer-events: auto;
  cursor: pointer;
}
#ammo-counter:hover {
  border-color: var(--gold-dim);
  background: #1f1810;
}
#ammo-counter.hidden { display: none; }
.ammo-counter-icon {
  font-size: 18px;
  line-height: 1;
  opacity: 0.9;
}
.ammo-counter-count {
  font-weight: bold;
  min-width: 1.5em;
  text-align: right;
}
#ammo-counter.empty .ammo-counter-count { color: #c04040; }
/* Telefon: licznik w #mobile-ui, nad drążkiem ruchu (bez kolizji z hotbarem, padem skilli i akcjami). */
html[data-ui-mode="phone"] #ammo-counter {
  position: absolute;
  /* Pas tuż nad mobilnym hotbarem, między drążkiem ruchu (12 + 120 px) a padem skilli: poza oknem party (przeciągalne,
     zajmuje lewy dół ponad drążkiem) i poza rozwiniętym czatem (góra ekranu). */
  left: calc(136px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + 48px + 4px + env(safe-area-inset-bottom, 0px));
  transform: none;
  height: 34px;
  min-width: 44px;
  max-width: 150px;
  padding: 0 6px;
  gap: 3px;
  font-size: 12px;
  z-index: 43;
}
html[data-ui-mode="phone"] #ammo-counter .ammo-counter-type { display: none; }
.ammo-counter-type {
  font-size: 10px;
  color: var(--gold-dim);
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ammo-counter-type:empty { display: none; }
.ammo-counter-inv {
  font-size: 11px;
  color: var(--gold-bright);
  white-space: nowrap;
}
.ammo-counter-inv:empty { display: none; }
.ammo-picker-btns { display: flex; gap: 2px; flex-shrink: 0; }
.ammo-picker-btns button {
  min-width: 32px;
  min-height: 28px;
  padding: 0 4px;
  font-size: 11px;
  background: #1f1810;
  color: var(--text);
  border: 1px solid var(--slot-border);
  cursor: pointer;
}
.ammo-picker-btns button:hover { border-color: var(--gold-dim); }
.ammo-picker-transfer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 2px;
  font-size: 11px;
  flex-wrap: wrap;
}
.ammo-picker-transfer.hidden { display: none; }
.ammo-picker-transfer input { width: 72px; min-height: 28px; }
.ammo-picker-status { flex-basis: 100%; color: var(--gold-bright); min-height: 1em; }
.ammo-picker-section { padding: 4px 6px 0; font-size: 10px; color: var(--gold-dim); text-transform: uppercase; }
.shop-buy-qty-quick { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.shop-buy-qty-quick button { flex: 1 1 0; min-width: 52px; min-height: 36px; padding: 0 4px; }
.shop-buy-qty-quiver { font-size: 11px; color: var(--gold-dim); margin-top: 2px; }
.shop-buy-qty-quiver[hidden] { display: none; }

/* --- Wybór priorytetowej amunicji łucznika --- */
#ammo-picker {
  position: absolute;
  left: 50%;
  bottom: calc(14px + 72px);
  transform: translateX(-50%);
  min-width: 180px;
  max-width: min(300px, calc(100vw - 16px));
  background: #100d08;
  border: 1px solid var(--gold-dim);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  z-index: 13;
  padding: 4px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  pointer-events: auto;
}
#ammo-picker.hidden { display: none; }
/* Telefon: pad umiejętności (z-index 41) zasłaniał ✕ wyboru amunicji — picker musi być nad padem. */
html[data-ui-mode="phone"] #ammo-picker { z-index: 61; } /* nad oknami telefonu (60: party, ekwipunek…) i czatem (45) */
.ammo-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 4px 4px 6px;
  margin-bottom: 4px;
  color: var(--gold-bright);
  min-height: 24px;
}
.ammo-picker-title {
  flex: 1;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ammo-picker-header .panel-close-btn {
  position: static;
  transform: none;
  width: 24px;
  height: 24px;
  line-height: 1;
  font-size: 13px;
  padding: 0;
  flex-shrink: 0;
}
#ammo-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}
.ammo-picker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  line-height: 1.2;
}
.ammo-picker-row:hover { background: rgba(255, 255, 255, 0.06); }
.ammo-picker-row.active {
  border-color: var(--gold-bright);
  background: rgba(201, 162, 57, 0.12);
}
.ammo-picker-row .ammo-picker-check {
  width: 12px;
  text-align: center;
  font-size: 10px;
  color: var(--gold-bright);
  flex-shrink: 0;
}
.ammo-picker-row .item-sprite-wrap,
.ammo-picker-row .ammo-picker-fallback {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ammo-picker-row .ammo-picker-fallback {
  font-size: 14px;
  line-height: 1;
}
.ammo-picker-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
}
.ammo-picker-name {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ammo-picker-row.active .ammo-picker-name { color: var(--gold-bright); }
.ammo-picker-meta {
  font-size: 9px;
  color: var(--text-muted);
}
.ammo-picker-row .item-qty {
  position: static;
  font-size: 11px;
  color: var(--text-dim);
  min-width: 1.8em;
  text-align: right;
}
.ammo-picker-none-row .ammo-picker-name {
  font-size: 11px;
  color: var(--text-muted);
}
.ammo-picker-none-row.active .ammo-picker-name { color: var(--text); }
.ammo-picker-empty {
  padding: 8px 0;
  text-align: center;
}

/* --- Menu skrótów (prawy dolny róg, zwijane w lewo, 2 rzędy) --- */
#game-side-menu {
  position: absolute;
  right: 12px;
  bottom: 70px;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: calc(4px * var(--menu-scale, 1));
  z-index: 14;
  --menu-scale: 1;
  --menu-label-color: var(--text-muted);
  /* Ile ikon w jednym rzędzie (druga połowa zawija się poniżej) */
  --menu-row-cols: 8;
}
#game-side-menu .side-menu-drag-handle {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 6px;
  z-index: 2;
  cursor: default;
  background: rgba(212, 160, 23, 0.15);
  border-radius: 2px;
  flex: none;
  pointer-events: none;
}
#game-side-menu .side-menu-drag-handle:active {
  cursor: default;
}
#game-side-menu .side-menu-items {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: calc(4px * var(--menu-scale, 1));
}
/* Drugorzędne skróty są w centralnym oknie MENU (main-menu); przyciski zostają w DOM jako punkt wejścia. */
#game-side-menu .side-menu-items > .side-menu-btn:not(.menu-primary) {
  display: none !important;
}
#game-side-menu .side-menu-toggle {
  border-color: var(--gold-dim);
  flex-shrink: 0;
}
#game-side-menu.is-expanded .side-menu-toggle {
  border-color: var(--gold-bright);
  color: #fff;
  background: var(--wood-mid);
}
.side-menu-btn {
  width: calc(40px * var(--menu-scale, 1));
  height: auto;
  min-height: calc(36px * var(--menu-scale, 1));
  flex: 0 0 calc(40px * var(--menu-scale, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1px * var(--menu-scale, 1));
  padding: calc(3px * var(--menu-scale, 1)) calc(2px * var(--menu-scale, 1));
  background: var(--panel-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: #d0d6e8;
  cursor: pointer;
  box-shadow: var(--pixel-frame);
  position: relative;
}
.side-menu-toggle {
  width: calc(32px * var(--menu-scale, 1));
  min-height: calc(32px * var(--menu-scale, 1));
  height: calc(32px * var(--menu-scale, 1));
}
.side-menu-badge {
  position: absolute;
  top: calc(-3px * var(--menu-scale, 1));
  right: calc(-3px * var(--menu-scale, 1));
  min-width: calc(12px * var(--menu-scale, 1));
  height: calc(12px * var(--menu-scale, 1));
  padding: 0 calc(3px * var(--menu-scale, 1));
  border-radius: 0;
  background: #c62828;
  color: #fff;
  font-size: calc(8px * var(--menu-scale, 1));
  font-weight: 700;
  line-height: calc(12px * var(--menu-scale, 1));
  text-align: center;
}
.side-menu-btn:hover {
  border-color: var(--gold-bright);
  color: #fff;
  background: var(--wood-mid);
}
.side-menu-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.side-menu-btn.no-bg {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.side-menu-btn.no-bg:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  filter: brightness(1.12);
}
.side-menu-icon {
  font-size: calc(11px * var(--menu-scale, 1));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-menu-icon.has-image,
.side-menu-icon.has-svg {
  font-size: 0;
}
.side-menu-icon img,
.side-menu-icon .side-menu-svg {
  width: calc(20px * var(--menu-scale, 1));
  height: calc(20px * var(--menu-scale, 1));
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}
.side-menu-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(7px * var(--menu-scale, 1));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--menu-label-color, #8b93a8);
  pointer-events: none;
}
.side-menu-btn:hover .side-menu-label {
  color: #f0c040;
}

/* --- Wprowadzenie nowego gracza --- */
#starter-tutorial {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
#starter-tutorial.hidden { display: none; }
.starter-tutorial-window,
.starter-tutorial-info {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  max-width: min(420px, 86vw);
  padding: 16px 18px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-bright);
  box-shadow: var(--pixel-frame);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  letter-spacing: 0.02em;
  pointer-events: auto;
}
.starter-tutorial-window.hidden,
.starter-tutorial-info.hidden { display: none; }
/* Otwarte okno Wiki ma pierwszeństwo: okno samouczka nie zasłania jego nagłówka (przeciąganie, zamknięcie). Stan samouczka się nie zmienia. */
body:has(#wiki-panel:not(.hidden)) .starter-tutorial-window,
body:has(#wiki-panel:not(.hidden)) .starter-tutorial-info {
  visibility: hidden;
  pointer-events: none;
}
.starter-tutorial-window h2 { margin: 0 0 8px; color: var(--gold-bright); font-size: 22px; }
.starter-tutorial-window p { margin: 0 0 12px; font-size: 14px; }
.starter-tutorial-quests { display: grid; gap: 8px; }
.starter-tutorial-quest {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid #846c35;
  background: rgba(20, 24, 33, 0.96);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.starter-tutorial-quest:disabled { cursor: default; opacity: 0.55; }
.starter-tutorial-quest.completed { background: rgba(31, 112, 60, 0.88); border-color: #68d391; opacity: 1; }
.starter-tutorial-check { flex: 0 0 28px; font-size: 18px; text-align: center; }
.starter-tutorial-quest strong { display: block; font-size: 15px; }
.starter-tutorial-quest small { display: block; margin-top: 2px; font-size: 12px; color: #c7cbd6; }
.starter-tutorial-quest em { margin-left: auto; color: var(--gold-bright); font-size: 12px; white-space: nowrap; }
.starter-tutorial-skip {
  width: 100%;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid #846c35;
  background: transparent;
  color: #c7cbd6;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: inherit;
  cursor: pointer;
}
.starter-tutorial-skip:hover { border-color: var(--gold-bright); color: var(--text); }
.starter-tutorial-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.starter-tutorial-info { top: 28%; max-width: min(520px, 88vw); }
.starter-tutorial-info p { margin: 0 0 14px; }
#starter-tutorial-training-ok,
#starter-tutorial-talent-ok { min-width: 84px; }
.starter-tutorial-discord {
  display: block;
  margin: 0 0 14px;
  color: #79a7ff;
  text-decoration: underline;
}
.starter-tutorial-arrow-label {
  position: fixed;
  z-index: 82;
  padding: 4px 7px;
  background: #17130b;
  border: 1px solid var(--gold-bright);
  color: var(--gold-bright);
  font-size: 13px;
  pointer-events: none;
}
.starter-tutorial-arrow-label.hidden { display: none; }
.starter-tutorial-target {
  outline: 3px solid var(--gold-bright) !important;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(240, 192, 64, 0.9) !important;
}
.starter-tutorial-arrow {
  position: fixed;
  left: var(--stx, 0px);
  top: var(--sty, 0px);
  width: 52px;
  height: 22px;
  /* Kotwica = czubek strzałki (prawa krawędź) przy przycisku */
  --st-arrow-base-x: -100%;
  --st-arrow-scale-x: 1;
  --st-arrow-nudge: 5px;
  transform: translate(var(--st-arrow-base-x), -50%) scaleX(var(--st-arrow-scale-x));
  transform-origin: right center;
  pointer-events: none;
  z-index: 81;
  background: linear-gradient(90deg, transparent 0%, var(--gold-bright) 30%, var(--gold-bright) 100%);
  clip-path: polygon(0 35%, 58% 35%, 58% 0, 100% 50%, 58% 100%, 58% 65%, 0 65%);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.65));
  animation: starter-tutorial-nudge 1s ease-in-out infinite;
}
.starter-tutorial-arrow.from-right {
  --st-arrow-base-x: 0%;
  --st-arrow-scale-x: -1;
  --st-arrow-nudge: -5px;
}
.starter-tutorial-arrow.hidden { display: none; }
.starter-tutorial-ring {
  position: fixed;
  transform: translate(-50%, -50%);
  border: 2px solid var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 5px rgba(212, 175, 55, 0.4);
  pointer-events: none;
  z-index: 81;
  animation: starter-tutorial-pulse 1.1s ease-out infinite;
}
.starter-tutorial-ring.hidden { display: none; }
@keyframes starter-tutorial-nudge {
  0%, 100% { transform: translate(var(--st-arrow-base-x), -50%) translateX(0) scaleX(var(--st-arrow-scale-x)); opacity: 1; }
  50% { transform: translate(var(--st-arrow-base-x), -50%) translateX(var(--st-arrow-nudge)) scaleX(var(--st-arrow-scale-x)); opacity: 0.8; }
}
@keyframes starter-tutorial-pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.45; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

/* --- Admin: mapy / teleporty --- */
.admin-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
}
.admin-map-actions .secondary-btn {
  font-size: 11px;
  padding: 4px 8px;
}
.admin-inline-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
}
.admin-inline-fields label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  min-width: 72px;
}
.admin-inline-fields input[type="number"] {
  width: 88px;
}
#admin-player-spawn-map,
#admin-player-spawn-use-map-btn,
#admin-player-spawn-save-btn {
  width: 100%;
  margin-top: 4px;
}
.admin-tp-form {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--slot-border);
}
.admin-tp-form label,
#admin-panel-teleports .admin-sidebar label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.admin-tp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #ccc;
  margin: 4px 0;
}
.admin-tp-row.selected {
  outline: 1px solid var(--gold-bright, #d4af37);
  background: rgba(212, 175, 55, 0.12);
}
.admin-tp-select {
  flex: 1;
  text-align: left;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 2px 0;
}
.admin-tp-select:hover {
  color: var(--gold-bright, #d4af37);
}
#admin-map-select,
#admin-tp-from-map,
#admin-tp-to-map {
  width: 100%;
  box-sizing: border-box;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: #ddd;
  padding: 5px 7px;
  font-size: 12px;
  margin-bottom: 4px;
}
#admin-tp-list {
  max-height: 280px;
  overflow: auto;
  margin-top: 4px;
}
#admin-panel-teleports > .admin-tp-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.admin-tp-split {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 0;
}
.admin-tp-pane {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--gold-dim, #5a4a2a);
}
.admin-tp-pane:first-child {
  border-left: none;
}
.admin-tp-pane-toolbar {
  flex-shrink: 0;
  padding: 8px 12px;
  background: var(--panel-inner, #1a140f);
  border-bottom: 1px solid var(--slot-border);
  font-size: 12px;
  color: var(--text-muted);
}
.admin-tp-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #1a2014;
}
#admin-tp-from-canvas,
#admin-tp-dest-canvas {
  image-rendering: pixelated;
  display: block;
  cursor: crosshair;
}

.auction-panel {
  width: 1000px;
  height: 640px;
  max-width: 1000px;
  max-height: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}
/* Nadpisanie .enhance-panel { width: 420px } — bez !important, żeby admin mógł ustawić inline */
#auction-panel.auction-panel {
  width: 1000px;
  max-width: 1000px;
  height: 640px;
  max-height: 640px;
}
.auction-panel.hidden { display: none; }
#auction-gold {
  font-size: 12px;
  color: #ffc107;
  margin: 4px 0 2px;
}
.auction-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
.auction-tab {
  flex: 1 1 auto;
  position: relative;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.auction-tab.active {
  border-color: #ffc107;
  color: #eee;
  background: var(--wood-mid);
}
.auction-tab-pane.hidden { display: none; }
.auction-tab-pane {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.auction-panel > .panel-header,
#auction-gold,
.auction-tabs,
#auction-status {
  flex-shrink: 0;
}
.auction-tab-pane[data-pane="browse"]:not(.hidden),
.auction-tab-pane[data-pane="mine"]:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.auction-tab-pane[data-pane="notifications"]:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.auction-tab-pane[data-pane="browse"] .auction-browse-layout {
  flex: 1 1 auto;
  min-height: 0;
  flex-shrink: 1;
}
.auction-tab-pane[data-pane="mine"] > .hint-text {
  flex-shrink: 0;
}
.auction-tab-pane[data-pane="notifications"] > .hint-text {
  flex-shrink: 0;
}
.auction-tab-pane[data-pane="browse"] .auction-list,
.auction-tab-pane[data-pane="mine"] .auction-list,
.auction-tab-pane[data-pane="notifications"] .auction-list {
  max-height: none;
  min-height: 0;
  flex: 1 1 auto;
}
.auction-browse-layout {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.auction-sidebar {
  flex: 0 0 210px;
  flex-shrink: 0;
  width: 210px;
  max-width: 34%;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  box-sizing: border-box;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
}
.auction-sidebar-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.auction-sidebar-subtitle {
  margin-top: 4px;
}
.auction-slot-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 1 auto;
  max-height: 220px;
  min-height: 0;
  overflow-y: auto;
}
.auction-slot-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #ccc;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.auction-slot-nav-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #eee;
}
.auction-slot-nav-btn.active {
  background: rgba(255, 193, 7, 0.12);
  border-color: #ffc107;
  color: #fff;
}
.auction-browse-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.auction-browse-toolbar {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.auction-browse-toolbar input,
.auction-browse-toolbar select {
  box-sizing: border-box;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: #ddd;
  padding: 6px 8px;
  font-size: 12px;
}
.auction-browse-toolbar input {
  flex: 1 1 auto;
  min-width: 0;
}
.auction-browse-toolbar select {
  flex: 0 0 auto;
  width: auto;
  min-width: 140px;
}
.auction-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.auction-filters-sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
  grid-template-columns: none;
  flex-shrink: 0;
}
.auction-filter-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.auction-filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}
.auction-filters input,
.auction-filters select {
  width: 100%;
  box-sizing: border-box;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: #ddd;
  padding: 5px 7px;
  font-size: 12px;
}
.auction-filters .primary-btn,
.auction-filters .secondary-btn {
  padding: 5px 8px;
  font-size: 12px;
}
.auction-list {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 120px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
  min-width: 0;
  max-width: 100%;
}
.auction-empty { color: var(--text-muted); font-size: 12px; margin: 8px 0; }
.auction-tab-badge {
  display: inline-block;
  min-width: 1.1em;
  margin-left: 4px;
  padding: 0 4px;
  background: #c62828;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: middle;
}
.auction-tab-badge.hidden { display: none; }
.auction-notif-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.auction-notif-kind {
  flex: 0 0 88px;
  font-size: 11px;
  font-weight: 700;
  color: #ffd54f;
  padding-top: 1px;
}
.auction-row.auction-notif-row[data-kind="sold"] {
  background: linear-gradient(180deg, rgba(39, 110, 44, 0.92), rgba(18, 64, 24, 0.96)) !important;
  border-color: #43a047 !important;
}
.auction-row.auction-notif-row[data-kind="buy_order_sold"] {
  background: linear-gradient(180deg, rgba(39, 110, 44, 0.92), rgba(18, 64, 24, 0.96)) !important;
  border-color: #43a047 !important;
}
.auction-notif-row[data-kind="sold"] .auction-notif-kind,
.auction-notif-row[data-kind="buy_order_sold"] .auction-notif-kind {
  color: #c8e6c9;
}
.auction-notif-row[data-kind="bought"] .auction-notif-kind,
.auction-notif-row[data-kind="buy_order_filled"] .auction-notif-kind {
  color: #81c784;
}
.auction-notif-row[data-kind="expired"] .auction-notif-kind,
.auction-notif-row[data-kind="buy_order_expired"] .auction-notif-kind {
  color: #ef9a9a;
}
.auction-notif-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #eee;
  line-height: 1.35;
}
.auction-notif-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.auction-notif-row.auction-notif-unread {
  border-color: #c9a227;
}
.auction-notif-row.auction-notif-unread .auction-notif-text {
  color: #fff;
}
.auction-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 0;
  overflow: hidden;
}
.auction-row-clickable .auction-icon,
.auction-row-clickable .auction-info {
  cursor: pointer;
}
.auction-row-clickable .auction-info:hover .auction-name {
  color: #ffd54f;
  text-decoration: underline;
}
.auction-history-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  max-height: min(62vh, 560px);
}
.auction-history-body.hidden { display: none; }
.auction-history-header {
  display: flex;
  gap: 10px;
  align-items: center;
}
.auction-history-title-wrap { flex: 1; min-width: 0; }
.auction-history-rarity-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.auction-history-rarity-filter select {
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  color: #ddd;
  padding: 4px 6px;
  font-size: 12px;
}
.auction-history-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.auction-history-stat {
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  padding: 8px 6px;
  text-align: center;
}
.auction-history-stat .ah-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.auction-history-stat .ah-value {
  font-size: 14px;
  color: #ffc107;
  font-weight: 600;
}
.auction-history-trend {
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--slot-border);
  background: var(--panel-inner);
}
.auction-history-trend.up { color: #81c784; border-color: #81c784; }
.auction-history-trend.down { color: #ef5350; border-color: #ef5350; }
.auction-history-trend.flat { color: var(--text-muted); }
.auction-history-chart-wrap {
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  padding: 8px;
}
#auction-history-chart {
  width: 100%;
  height: 160px;
  display: block;
  image-rendering: auto;
}
.auction-history-recent {
  max-height: 180px;
}
.auction-history-sale-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  font-size: 11px;
}
.auction-history-sale-row .ah-sale-price {
  color: #ffc107;
  white-space: nowrap;
  font-weight: 600;
}
.auction-history-sale-row .ah-sale-date {
  color: var(--text-muted);
  white-space: nowrap;
}
.auction-icon {
  width: 40px;
  height: 40px;
  border: 2px solid #888;
  border-radius: 0;
  background: var(--slot-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.auction-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.auction-info { flex: 1; min-width: 0; }
.auction-name {
  font-size: 13px;
  color: #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auction-meta,
.auction-stats,
.auction-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.auction-npc-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  background: #c9a227;
  padding: 1px 4px;
  border-radius: 2px;
  vertical-align: 1px;
  margin-right: 2px;
}
.auction-stats { color: var(--accent-link); }
.auction-price { font-size: 12px; color: #ffc107; margin-top: 3px; }
.auction-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; max-width: 42%; }
.auction-sell-inv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 10px;
  padding: 4px;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
}
.auction-bo-template-picker {
  margin-bottom: 10px;
}
.auction-bo-search-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.auction-bo-search-row input,
.auction-bo-search-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  background: var(--input-bg, #3a2a1a);
  border: 1px solid var(--slot-border);
  color: var(--text, #f5e6c8);
}
.auction-bo-template-list {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--slot-border);
  background: var(--slot-bg);
  margin-bottom: 6px;
}
.auction-bo-template-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-bottom: 1px solid var(--slot-border);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.auction-bo-template-row:hover,
.auction-bo-template-row.selected {
  background: rgba(255, 193, 7, 0.12);
}
.auction-bo-template-row.selected {
  outline: 1px solid #ffc107;
}
.auction-bo-template-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slot-bg);
}
.auction-bo-template-icon img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}
.auction-bo-template-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auction-bo-template-meta {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-muted);
}
.auction-bo-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1;
}
.auction-bo-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
  align-items: end;
}
.auction-bo-form .auction-sell-selected-row,
.auction-bo-form .auction-bo-stat-row,
.auction-bo-form #auction-bo-escrow,
.auction-bo-form #auction-bo-create-btn {
  grid-column: 1 / -1;
}
.auction-bo-stat-pair {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 6px;
  width: 100%;
}
.auction-bo-lists {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.auction-inv-cell {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid #555;
  border-radius: 0;
  background: var(--slot-bg);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auction-inv-cell.selected {
  outline: 2px solid #ffc107;
  outline-offset: 1px;
}
.auction-inv-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.auction-inv-qty {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 0 2px #000;
}
.auction-sell-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}
.auction-sell-selected-row {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #ccc;
}
.auction-sell-form label.hidden {
  display: none;
}
.auction-sell-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.auction-sell-tax {
  font-size: 11px;
  color: #ffb74d;
}
.auction-sell-tax.insufficient {
  color: #ef5350;
}
.auction-sell-comps {
  margin-top: 12px;
  padding: 8px;
  background: var(--panel-inner);
  border: 1px solid var(--gold-dim);
  box-shadow: var(--pixel-inset);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.auction-sell-comps.hidden { display: none; }
.auction-comps-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.auction-comps-hint {
  margin: 0 0 8px;
  font-size: 12px;
}
.auction-comps-filters-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.auction-comps-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.auction-sell-history-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 12px;
  align-self: flex-start;
}
.auction-comps-stat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  padding: 3px 6px;
  background: var(--wood);
  border: 1px solid var(--slot-border);
  user-select: none;
}
.auction-comps-stat-toggle:has(input:checked) {
  border-color: var(--gold);
  background: var(--wood-mid);
}
.auction-comps-stat-toggle input {
  accent-color: var(--gold);
  margin: 0;
}
.auction-comps-no-stats {
  font-size: 12px;
  color: var(--text-muted);
}
.auction-comps-summary {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.auction-comps-summary strong {
  color: var(--gold-bright);
}
.auction-comps-use-price {
  padding: 3px 8px !important;
  font-size: 12px !important;
  margin: 0 !important;
}
.auction-comps-list {
  max-height: 220px;
  min-height: 60px;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.auction-row-exact {
  border-color: var(--gold-bright) !important;
  box-shadow: inset 0 0 0 1px var(--gold-dim);
}
.auction-comps-price-tag {
  font-size: 13px;
  color: var(--gold-bright);
  font-weight: 700;
  white-space: nowrap;
}

.auction-sell-form input,
.auction-sell-form select {
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: #ddd;
  padding: 5px 7px;
  font-size: 12px;
}

/* --- Panel tasków --- */
.task-panel {
  width: min(420px, 92vw);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
}
.task-panel.hidden { display: none; }
.task-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 10px;
}
.task-tab {
  flex: 1;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.task-tab.active {
  border-color: var(--gold-bright);
  color: #eee;
  background: var(--wood-mid);
}
.task-list {
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}
.task-empty { color: var(--text-muted); font-size: 12px; margin: 8px 0; }

.ranking-panel {
  width: 480px;
  max-width: 480px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
}
.ranking-panel.hidden { display: none; }

.friends-panel {
  width: 420px;
  max-width: 420px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
}
.friends-panel.hidden { display: none; }
.friends-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 10px;
}
.friends-tab {
  flex: 1;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
}
.friends-tab.active {
  color: var(--text);
  border-color: var(--accent, #c49a50);
  background: rgba(196, 154, 80, 0.12);
}
.friends-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.friends-add-form {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.friends-add-form input {
  flex: 1;
  min-width: 0;
}
.friends-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: min(48vh, 360px);
  padding-right: 2px;
}
.friends-empty {
  color: var(--text-muted);
  font-size: 12px;
  margin: 8px 0;
}
.friends-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
}
.friends-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #666;
}
.friends-row.is-online .friends-status-dot {
  background: #3ddc3d;
}
.friends-row.is-offline .friends-status-dot {
  background: #777;
}
.friends-meta {
  flex: 1;
  min-width: 0;
}
.friends-name {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friends-location {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friends-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.friends-action-btn {
  padding: 3px 6px;
  font-size: 11px;
}
.friends-online-toast-host {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  width: min(360px, 90vw);
}
.friends-online-toast {
  padding: 8px 12px;
  background: rgba(20, 28, 40, 0.92);
  border: 1px solid #3ddc3d;
  color: #e8eef8;
  font-size: 13px;
  text-align: center;
  animation: friends-toast-in 0.2s ease-out;
}
.friends-online-toast.is-leaving {
  opacity: 0;
  transition: opacity 0.25s ease;
}
@keyframes friends-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ranking-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
.ranking-tab {
  flex: 1 1 auto;
  min-width: 72px;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
}
.ranking-tab.active {
  border-color: var(--gold-bright);
  color: #eee;
  background: var(--wood-mid);
}
.ranking-list {
  overflow-y: auto;
  flex: 1;
  min-height: 140px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 2px;
}
.ranking-empty {
  color: var(--text-muted);
  font-size: 12px;
  margin: 8px 0;
}
.ranking-row,
.ranking-you {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  font-size: 12px;
}
.ranking-row.is-you {
  border-color: var(--gold-bright);
}
.ranking-rank {
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 600;
}
.ranking-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranking-value {
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}
.ranking-you {
  margin-top: 8px;
  grid-template-columns: auto 48px 1fr auto;
  border-color: var(--gold-dim);
}
.ranking-you.hidden { display: none; }
.ranking-you-label {
  color: var(--gold-bright);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hunt-analyzer-panel {
  width: 360px;
  max-width: 360px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
}
.hunt-analyzer-panel.hidden { display: none; }
.hunt-analyzer-body {
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 2px;
  margin-top: 4px;
}
.hunt-analyzer-section-title {
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hunt-analyzer-section-title:first-child {
  margin-top: 2px;
}
.hunt-analyzer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  font-size: 12px;
}
.hunt-analyzer-price-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  font-size: 12px;
  color: #b0bec5;
  cursor: pointer;
  user-select: none;
}
.hunt-analyzer-price-mode-checkbox {
  margin: 0;
  cursor: pointer;
}
.hunt-analyzer-balance-profit .hunt-analyzer-value {
  color: #81c784;
}
.hunt-analyzer-balance-waste .hunt-analyzer-value {
  color: #e57373;
}
.hunt-analyzer-row-session {
  border-color: var(--gold-dim);
  margin-bottom: 2px;
}
.hunt-analyzer-label {
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}
.hunt-analyzer-value {
  color: #eee;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.hunt-analyzer-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.hunt-analyzer-reset-btn {
  padding: 6px 12px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-display);
}
.hunt-analyzer-reset-btn:hover {
  border-color: var(--gold-bright);
  color: #eee;
}

/* --- FEATURE: MOMENTUM — pasek HUD + tooltip + okno rankingu --- */
#momentum-bar {
  position: absolute;
  top: 56px;
  right: 340px;
  z-index: 14;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 7px;
  max-width: min(430px, calc(100vw - 16px));
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  user-select: none;
  cursor: pointer;
}
#momentum-bar.hidden { display: none; }
#momentum-bar { opacity: var(--momentum-hud-opacity, 1); }
#momentum-bar .momentum-drag-handle { margin: 0 0 2px; touch-action: none; }
.momentum-hide-btn {
  width: 16px;
  height: 16px;
  margin-right: 2px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  color: var(--text-dim, #bbb);
  background: transparent;
  border: 1px solid var(--gold-dim);
  cursor: pointer;
}
.momentum-hide-btn:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
#momentum-bar:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 1px;
}
.momentum-bar-main,
.momentum-bar-sub {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.momentum-bar-sub {
  flex-wrap: wrap;
  row-gap: 3px;
}
.momentum-stacks-badge {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 var(--ui-border);
}
.momentum-stacks-max {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.momentum-pips {
  display: flex;
  flex-direction: row;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.momentum-pip {
  width: 9px;
  min-width: 2px;
  height: 15px;
  flex: 0 1 auto;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  box-shadow: var(--pixel-inset);
}
.momentum-pip.is-active {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-dim) 100%);
  border-color: var(--gold-bright);
}
.momentum-pips.fever-1 .momentum-pip.is-active {
  background: linear-gradient(180deg, #ffd88a 0%, #e8a13a 60%, #a86a12 100%);
  border-color: #ffd88a;
}
.momentum-pips.fever-2 .momentum-pip.is-active {
  background: linear-gradient(180deg, #fff3a0 0%, #ffd24a 55%, #b8860b 100%);
  border-color: #fff3a0;
  box-shadow: 0 0 4px rgba(255, 226, 130, 0.55);
}
.momentum-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  flex: 0 0 auto;
  line-height: 1.15;
}
.momentum-timer-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.momentum-timer {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
#momentum-bar.is-grace .momentum-timer { color: var(--success-soft); }
.momentum-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 5px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  flex: 0 0 auto;
}
.momentum-chip-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.momentum-chip-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.momentum-chip-fever.is-fever {
  border-color: #e8a13a;
  background: rgba(232, 161, 58, 0.16);
}
.momentum-chip-fever.is-legendary {
  border-color: var(--gold-bright);
  background: rgba(255, 210, 74, 0.2);
}
.momentum-chip-fever.is-fever .momentum-chip-value { color: #ffd88a; }
.momentum-chip-fever.is-legendary .momentum-chip-value { color: #fff3a0; }
.momentum-thresholds {
  display: inline-flex;
  flex-direction: row;
  gap: 3px;
  flex: 0 0 auto;
}
.momentum-threshold {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 0 4px;
  border: 1px solid var(--slot-border);
  color: var(--text-muted);
  background: transparent;
}
.momentum-threshold-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.momentum-threshold-value {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.momentum-threshold.is-unlocked {
  color: var(--gold);
  border-color: var(--gold-dim);
}
.momentum-threshold.is-active {
  color: #fff3a0;
  border-color: var(--gold-bright);
  background: rgba(240, 192, 64, 0.18);
}
#momentum-tooltip {
  position: fixed;
  z-index: 62;
  min-width: 190px;
  max-width: 270px;
  padding: 8px 10px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  pointer-events: none;
}
#momentum-tooltip.hidden { display: none; }
.momentum-tip-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.momentum-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-dim);
}
.momentum-tip-row > span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.momentum-tip-sub {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 4px 0 2px;
}
.momentum-tip-sep {
  height: 1px;
  margin: 5px 0;
  background: var(--slot-border);
}
.momentum-panel {
  width: 520px;
  max-width: min(520px, calc(100vw / var(--ui-zoom, 1) - 24px));
  height: 480px;
  max-height: min(480px, calc(100vh / var(--ui-zoom, 1) - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.momentum-panel.hidden { display: none; }
.momentum-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 6px;
}
.momentum-tab {
  flex: 1 1 auto;
  min-width: 96px;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-ui);
}
.momentum-tab.active {
  border-color: var(--gold-bright);
  color: #eee;
  background: var(--wood-mid);
}
.momentum-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.momentum-filter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.momentum-filter-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.momentum-select {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: var(--text);
  font-size: 11px;
  font-family: var(--font-ui);
  cursor: pointer;
}
.momentum-server-best {
  margin-top: 6px;
  font-size: 11px;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.momentum-list {
  overflow-y: auto;
  flex: 1;
  min-height: 150px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-right: 2px;
}
.momentum-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  font-size: 12px;
}
.momentum-row.is-you { border-color: var(--gold-bright); }
.momentum-rank {
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.momentum-row-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.momentum-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.momentum-meta {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.momentum-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  font-size: 12px;
}
.momentum-empty {
  margin: 8px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.momentum-you {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  padding: 5px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--gold-dim);
  font-size: 11px;
}
.momentum-you.hidden { display: none; }
.momentum-you.is-empty {
  color: var(--text-muted);
  border-color: var(--slot-border);
}
.momentum-you-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}
.momentum-you.is-empty .momentum-you-label {
  color: var(--text-muted);
}
.momentum-you-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.momentum-status {
  margin: 6px 0 0;
  min-height: 14px;
  font-size: 11px;
  color: var(--text-muted);
}
.momentum-status.is-error { color: var(--danger-soft); }
.admin-momentum-flag.is-on { color: var(--success-soft); }
.admin-momentum-flag.is-off { color: var(--danger-soft); }
#admin-momentum-form h4 {
  margin: 10px 0 4px;
  font-size: 14px;
  color: var(--text-muted);
}
#admin-momentum-status.is-error { color: var(--danger-soft); }
html[data-ui-mode="phone"] #momentum-bar {
  top: auto;
  bottom: calc(150px / var(--ui-zoom, 1));
  right: 50%;
  transform: translateX(50%);
  max-width: calc(100vw / var(--ui-zoom, 1) - 16px);
}
html[data-ui-mode="phone"] .momentum-pip {
  width: 7px;
  height: 12px;
}
@media (max-width: 720px) {
  #momentum-bar {
    right: 8px;
    left: 8px;
    max-width: none;
  }
  .momentum-filters {
    grid-template-columns: 1fr;
  }
  .momentum-panel {
    width: calc(100vw / var(--ui-zoom, 1) - 20px);
    max-width: calc(100vw / var(--ui-zoom, 1) - 20px);
  }
}

.changelog-panel {
  width: 480px;
  max-width: 480px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
}
.boss-timers-panel {
  width: min(460px, calc(100vw - 24px));
  max-width: 460px;
  max-height: 540px;
  display: flex;
  flex-direction: column;
}
.boss-timers-panel.hidden { display: none; }
.boss-timers-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.boss-timer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; background: var(--panel-inner); border: 1px solid var(--slot-border); }
.boss-timer-details { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.boss-timer-details strong { color: var(--gold-bright); font-size: 14px; }
.boss-timer-ready { color: var(--success); font-weight: 700; }
.boss-timer-cooldown { color: var(--danger); font-weight: 700; }
.boss-timers-empty { color: var(--text-muted); font-size: 12px; }
.boss-reward-panel { position: absolute; z-index: 170; width: min(420px, calc(100vw - 32px)); left: 50%; top: 18%; transform: translateX(-50%); }
.boss-reward-content { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.boss-reward-name { color: var(--gold-bright); font-size: 20px; text-align: center; }
.boss-reward-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.boss-reward-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px; background: var(--panel-inner); border: 1px solid var(--slot-border); }
.boss-reward-item img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.boss-reward-item-name { font-size: 14px; }
.boss-reward-destination { color: var(--text-muted); font-size: 11px; }
.boss-reward-quantity { color: var(--gold-bright); font-size: 14px; }
.boss-reward-empty { color: var(--text-muted); font-size: 13px; text-align: center; }
.boss-reward-gold { color: #ffd166; font-size: 16px; font-weight: 700; text-align: center; }
.boss-timer-guide { flex: 0 0 auto; }
.admin-daily-boss-form { margin-bottom: 14px; }
.admin-daily-boss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; margin-bottom: 10px; }
.admin-daily-boss-grid label { display: flex; flex-direction: column; gap: 3px; }
.admin-daily-boss-form textarea { width: 100%; box-sizing: border-box; margin: 6px 0 10px; font-family: monospace; }
.changelog-panel.hidden { display: none; }

/* Nadpisanie .enhance-panel { width: 420px } — jak auction / calendar */
#wiki-panel.wiki-panel {
  width: 980px;
  max-width: 980px;
  height: 640px;
  max-height: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wiki-panel.hidden { display: none; }
.wiki-tabs {
  display: flex;
  gap: 4px;
  padding: 0 8px 8px;
  flex-shrink: 0;
}
.wiki-tab {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--gold-dim);
  background: rgba(20, 14, 8, 0.7);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.wiki-tab.active {
  background: linear-gradient(180deg, rgba(120, 80, 28, 0.9), rgba(70, 46, 18, 0.95));
  color: var(--gold-bright);
  font-weight: 700;
  border-color: var(--gold);
}
.wiki-passive-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.wiki-passive-filter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-muted);
}
.wiki-passive-filter select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12px;
}
.wiki-passive-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.wiki-passive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wiki-passive-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: none;
  border-bottom: 1px solid rgba(90, 64, 32, 0.35);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}
.wiki-passive-link:hover {
  background: rgba(90, 60, 20, 0.25);
}
.wiki-passive-link-kind {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-right: 6px;
}
.wiki-passive-link-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
}
.wiki-passive-link-summary {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.wiki-passive-detail-kind {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 4px;
}
.wiki-passive-detail-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold-bright);
}
.wiki-passive-body,
.wiki-passive-concept,
.wiki-passive-effects,
.wiki-passive-cost,
.wiki-passive-exclusive,
.wiki-passive-meta,
.wiki-passive-points,
.wiki-passive-id {
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 8px;
}
.wiki-passive-id.muted {
  color: var(--text-muted);
  font-size: 10px;
}
.wiki-passive-tree-link {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid var(--gold-dim);
  background: rgba(20, 14, 8, 0.85);
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.wiki-passive-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  padding: 0 0 8px;
  flex-shrink: 0;
}
.wiki-passive-toolbar .wiki-passive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  margin-bottom: 0;
}
.wiki-passive-toolbar .wiki-passive-filter {
  min-width: 120px;
}
.wiki-passive-main {
  display: flex;
  gap: 10px;
  min-height: 0;
  flex: 1;
}
.wiki-passive-viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 280px;
  border: 1px solid var(--gold-dim);
  background: radial-gradient(ellipse at center, rgba(28, 22, 14, 0.95) 0%, rgba(8, 6, 4, 0.98) 100%);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.wiki-passive-viewport.profile-paragon {
  background: radial-gradient(ellipse at center, rgba(12, 16, 32, 0.95) 0%, rgba(4, 4, 12, 0.98) 100%);
}
.wiki-passive-detail-panel {
  width: 240px;
  flex-shrink: 0;
  overflow: auto;
  min-height: 0;
  border: 1px solid var(--gold-dim);
  background: rgba(0, 0, 0, 0.25);
  padding: 10px;
}
.wiki-passive-zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wiki-passive-zoom-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold-dim);
  background: rgba(12, 10, 8, 0.85);
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.wiki-passive-zoom-btn:hover {
  background: rgba(90, 60, 20, 0.45);
}
.wiki-passive-hover-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  max-width: 220px;
  padding: 6px 8px;
  border: 1px solid var(--gold-dim);
  background: rgba(12, 10, 8, 0.92);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.wiki-passive-tip-kind {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.wiki-passive-tip-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
}
.wiki-passive-hint {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 4;
  margin: 0;
  font-size: 10px;
  color: var(--text-muted);
  pointer-events: none;
}
#wiki-passive-pane.wiki-body {
  flex-direction: column;
}
.wiki-toolbar {
  display: flex;
  gap: 8px;
  padding: 0 8px 8px;
  flex-shrink: 0;
  align-items: center;
}
.wiki-search {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
}
.wiki-open-browser-btn,
.wiki-back-btn,
.wiki-tool-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid var(--gold-dim);
  background: rgba(20, 14, 8, 0.85);
  color: var(--gold-bright);
}
.wiki-open-browser-btn:hover,
.wiki-back-btn:hover,
.wiki-tool-btn:hover {
  border-color: var(--gold);
}
.wiki-back-btn { display: none; }
.wiki-body {
  display: flex;
  gap: 10px;
  min-height: 0;
  flex: 1;
  padding: 0 8px 8px;
  overflow: hidden;
}
.wiki-sidebar {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
}
.wiki-category-nav-wrap .wiki-category-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wiki-category-link {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  text-align: left;
  padding: 5px 8px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.15);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.wiki-category-link:hover { color: var(--gold-bright); }
.wiki-category-link.active {
  border-color: var(--gold-dim);
  color: var(--gold-bright);
  background: rgba(90, 60, 20, 0.35);
}
.wiki-category-count {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.8;
}
.wiki-article-list-wrap {
  flex: 1 0 auto;
  border: 1px solid var(--gold-dim);
  background: rgba(0, 0, 0, 0.2);
}
.wiki-article-list-wrap:empty { display: none; }
.wiki-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wiki-article-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 7px 8px;
  border: none;
  border-bottom: 1px solid rgba(90, 64, 32, 0.35);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.wiki-article-link:hover { background: rgba(90, 60, 20, 0.25); }
.wiki-article-link.active { background: rgba(120, 80, 28, 0.35); box-shadow: inset 3px 0 var(--gold); }
.wiki-article-link-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
}
.wiki-article-link-cat {
  display: block;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-top: 1px;
}
.wiki-article-link-summary {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.wiki-article-list-compact .wiki-article-link-summary { display: none; }
.wiki-detail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--gold-dim);
  background: rgba(0, 0, 0, 0.15);
  padding: 12px 14px;
  outline: none;
}
.wiki-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 0;
  font-size: 11px;
  color: var(--text-muted);
}
.wiki-breadcrumbs li + li::before { content: '›'; margin: 0 6px; }
.wiki-breadcrumbs a { color: var(--gold); text-decoration: underline; cursor: pointer; }
.wiki-article-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.wiki-article-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.wiki-article-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gold-bright);
  outline: none;
}
.wiki-article-summary {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.wiki-toc {
  margin: 0 0 12px;
  border: 1px solid var(--gold-dim);
  background: rgba(0, 0, 0, 0.2);
}
.wiki-toc summary { cursor: pointer; padding: 6px 8px; font-size: 12px; color: var(--gold); }
.wiki-toc ol { margin: 0; padding: 0 8px 8px 26px; font-size: 12px; line-height: 1.55; }
.wiki-toc a { color: var(--gold-bright); cursor: pointer; }
.wiki-section-heading {
  margin: 14px 0 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gold-dim);
  font-size: 14px;
  color: var(--gold);
}
.wiki-anchor { margin-left: 6px; color: var(--gold-dim); text-decoration: none; opacity: 0.6; }
.wiki-section-body,
.wiki-callout-body {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.55;
}
.wiki-xref { color: var(--gold-bright); text-decoration: underline dotted; cursor: pointer; }
.wiki-list { margin: 0 0 10px; padding-left: 20px; font-size: 12px; line-height: 1.55; }
.wiki-values {
  margin: 6px 0 12px;
  border: 1px solid var(--gold);
  background: rgba(90, 60, 20, 0.2);
}
.wiki-values-title {
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1b1209;
  background: var(--gold);
  font-weight: 700;
}
.wiki-values dl { margin: 0; }
.wiki-values-row {
  display: grid;
  grid-template-columns: minmax(110px, 40%) minmax(0, 1fr);
  gap: 2px 10px;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(90, 64, 32, 0.4);
  font-size: 12px;
}
.wiki-values-row:last-child { border-bottom: 0; }
.wiki-values dt { color: var(--text-muted); }
.wiki-values dd { margin: 0; }
.wiki-values-value { font-weight: 700; color: var(--gold-bright); overflow-wrap: anywhere; }
.wiki-values-unit { font-weight: 400; color: var(--text-muted); }
.wiki-values-note { display: block; font-size: 11px; color: var(--text-muted); }
.wiki-table-wrap { overflow-x: auto; margin: 6px 0 12px; border: 1px solid var(--gold-dim); }
.wiki-table { border-collapse: collapse; width: 100%; font-size: 11px; line-height: 1.4; }
.wiki-table caption { text-align: left; padding: 5px 8px; color: var(--gold); font-weight: 700; }
.wiki-table th, .wiki-table td { padding: 4px 8px; border-bottom: 1px solid rgba(90, 64, 32, 0.4); text-align: left; vertical-align: top; }
.wiki-table thead th { background: rgba(90, 60, 20, 0.5); color: var(--gold-bright); white-space: nowrap; }
.wiki-table tbody th { color: var(--text); }
.wiki-example,
.wiki-callout {
  margin: 6px 0 12px;
  padding: 7px 10px;
  border-left: 3px solid var(--gold);
  background: rgba(90, 60, 20, 0.2);
}
.wiki-example { border-left-color: #6ea66e; background: rgba(60, 100, 60, 0.18); }
.wiki-callout-warning { border-left-color: #c0553a; background: rgba(140, 50, 30, 0.2); }
.wiki-callout-title { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.wiki-related-title {
  margin: 14px 0 6px;
  font-size: 12px;
  color: var(--gold-dim);
}
.wiki-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wiki-related-link {
  display: block;
  padding: 4px 9px;
  border: 1px solid var(--gold-dim);
  background: rgba(20, 14, 8, 0.7);
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
}
.wiki-related-link:hover { border-color: var(--gold); }
.wiki-related-sum { display: none; }
.wiki-article-meta { margin-top: 12px; font-size: 10px; color: var(--text-muted); }
.wiki-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 10px; }
.wiki-category-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--gold-dim);
  background: rgba(20, 14, 8, 0.6);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.wiki-category-card:hover { border-color: var(--gold); }
.wiki-category-card-title { font-size: 13px; font-weight: 700; color: var(--gold-bright); }
.wiki-category-card-count { font-size: 10px; color: var(--gold-dim); text-transform: uppercase; }
.wiki-category-card-desc { font-size: 11px; color: var(--text-muted); }
.wiki-category-card-preview { display: none; }
.wiki-empty {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.wiki-toast {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(20, 14, 8, 0.95);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-size: 12px;
  pointer-events: none;
}
.wiki-toast.hidden { display: none; }
.wiki-panel a:focus-visible,
.wiki-panel button:focus-visible,
.wiki-panel input:focus-visible,
.wiki-detail:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
.cst-wiki-link {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
}
.ht-wiki-link,
.item-enc-wiki-link {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  text-decoration: underline;
  text-align: left;
}

.calendar-panel {
  width: 860px;
  max-width: 860px;
  height: 560px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* Nadpisanie .enhance-panel { width: 420px } — jak auction */
#calendar-panel.calendar-panel {
  width: 860px;
  max-width: 860px;
  height: 560px;
  max-height: 560px;
}
.calendar-panel.hidden { display: none; }
.calendar-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  padding: 8px 4px 4px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  align-items: stretch;
  box-sizing: border-box;
}
.calendar-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.calendar-side {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  background: rgba(12, 10, 8, 0.45);
  border: 1px solid #5a4020;
  padding: 8px;
  box-sizing: border-box;
}
.calendar-side-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 50%;
  overflow: hidden;
  background: rgba(26, 18, 10, 0.72);
  border: 1px solid #3d2a18;
  padding: 8px;
  box-sizing: border-box;
}
.calendar-side-section-details {
  flex: 1 1 50%;
}
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 2px 0 4px;
  border-bottom: 1px solid rgba(110, 84, 36, 0.55);
}
.calendar-nav-btn,
.calendar-today-btn {
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  background: linear-gradient(180deg, #3a2a18, #24160c);
  color: #e8dcc8;
  border: 1px solid #6e5424;
  border-radius: 0;
  font-family: inherit;
  line-height: 1.2;
}
.calendar-nav-btn:hover,
.calendar-today-btn:hover {
  border-color: #c9a227;
  color: #f0c040;
}
.calendar-today-btn {
  margin-left: auto;
  color: #f0c040;
}
.calendar-month-label {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #f0c040;
  font-family: var(--font-display, inherit);
  letter-spacing: 0.02em;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 3px;
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
}
.calendar-weekday {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #a89060;
  padding: 4px 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  grid-row: 1;
}
.calendar-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-height: 0;
  min-width: 0;
  padding: 4px;
  background: rgba(18, 14, 10, 0.78);
  border: 1px solid #3d2a18;
  border-radius: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  overflow: hidden;
  font: inherit;
}
.calendar-cell:hover {
  border-color: #8a6a30;
  background: rgba(40, 28, 16, 0.88);
}
.calendar-cell.is-today {
  box-shadow: inset 0 0 0 1px #c9a227;
}
.calendar-cell.is-selected {
  background: rgba(55, 40, 20, 0.95);
  border-color: #f0c040;
}
.calendar-cell-empty {
  background: transparent;
  border-color: transparent;
  min-height: 0;
  pointer-events: none;
  visibility: hidden;
}
.calendar-cell-day {
  font-size: 11px;
  font-weight: 700;
  color: #d8c8a8;
  line-height: 1;
  flex-shrink: 0;
}
.calendar-cell-events {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
}
.calendar-event-label {
  display: block;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  max-width: 100%;
  padding: 1px 3px;
  background: rgba(0, 0, 0, 0.35);
  border-left: 2px solid currentColor;
}
.calendar-event-more {
  font-size: 9px;
  color: #8a7a60;
  flex-shrink: 0;
}
.calendar-side-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: #f0c040;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  font-family: var(--font-display, inherit);
}
.calendar-upcoming-list,
.calendar-day-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
.calendar-upcoming-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 8px;
  background: rgba(18, 14, 10, 0.85);
  border: 1px solid #4a3420;
  border-left: 3px solid #c9a227;
  border-radius: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}
.calendar-upcoming-item:hover {
  border-color: #c9a227;
  background: rgba(40, 28, 16, 0.95);
}
.calendar-upcoming-title {
  font-size: 12px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-upcoming-meta {
  font-size: 10px;
  color: #9a8a70;
}
.calendar-empty {
  margin: 0;
  font-size: 12px;
  color: #8a7a60;
  line-height: 1.35;
}
.calendar-details-date {
  margin: 0 0 6px;
  font-size: 13px;
  color: #e8dcc8;
  font-weight: 600;
}
.calendar-detail-card {
  padding: 8px;
  background: rgba(18, 14, 10, 0.85);
  border: 1px solid #4a3420;
  border-left: 3px solid #c9a227;
  border-radius: 0;
}
.calendar-detail-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
}
.calendar-detail-meta,
.calendar-detail-mult {
  font-size: 11px;
  color: #9a8a70;
  margin-bottom: 4px;
}
.calendar-detail-desc {
  margin: 0;
  font-size: 12px;
  color: #c8b898;
  line-height: 1.4;
}
.double-xp-banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  padding: 6px 14px;
  background: rgba(30, 80, 40, 0.92);
  border: 1px solid #43a047;
  border-radius: 0;
  color: #c8f0c8;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
}
.double-xp-banner.hidden { display: none !important; }
#menu-calendar-btn.has-calendar-badge .side-menu-icon::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e53935;
  box-shadow: 0 0 0 1px #1a2230;
}
#menu-calendar-btn .side-menu-icon {
  position: relative;
}

@media (max-width: 720px) {
  .calendar-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 1fr) minmax(160px, 40%);
    overflow: auto;
  }
  .calendar-side {
    max-height: none;
  }
}

/* ─── Bug Report panel ─── */
.bug-report-panel {
  width: 420px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
}
.bug-report-panel.hidden { display: none; }
.bug-report-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bug-report-hint {
  font-size: 12px;
  color: var(--text-muted, #888);
  line-height: 1.5;
  margin: 0;
}
.bug-report-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bug-report-label {
  font-size: 12px;
  color: var(--text-dim2, #aaa);
  font-weight: 600;
}
.bug-report-select {
  background: var(--bg-input, #1a1e28);
  border: 1px solid var(--border-panel, rgba(255,255,255,0.1));
  color: var(--text, #ccc);
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 13px;
}
.bug-report-textarea {
  background: var(--bg-input, #1a1e28);
  border: 1px solid var(--border-panel, rgba(255,255,255,0.1));
  color: var(--text, #ccc);
  padding: 7px 9px;
  border-radius: 3px;
  font-size: 13px;
  resize: vertical;
  min-height: 100px;
  max-height: 260px;
  font-family: inherit;
  line-height: 1.5;
}
.bug-report-textarea:focus {
  outline: none;
  border-color: var(--gold, #c8963a);
}
.bug-report-chars {
  font-size: 11px;
  color: var(--text-muted, #666);
  align-self: flex-end;
}
.bug-report-feedback {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 3px;
}
.bug-report-feedback--ok {
  background: rgba(80,200,80,0.1);
  border: 1px solid rgba(80,200,80,0.3);
  color: #70d070;
}
.bug-report-feedback--error {
  background: rgba(200,60,60,0.1);
  border: 1px solid rgba(200,60,60,0.3);
  color: #e07070;
}
.bug-report-feedback.hidden { display: none; }
.bug-report-submit {
  align-self: flex-end;
}
/* Admin br filters */
.admin-br-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.admin-diag-subtabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.admin-diag-subtab {
  text-align: left;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  color: #ddd;
  cursor: pointer;
}
.admin-diag-subtab.active {
  border-color: var(--gold, #c9a227);
  color: #fff;
}
.admin-diag-stack {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  font-family: ui-monospace, Consolas, monospace;
  background: rgba(0,0,0,0.35);
  color: #cfd8dc;
}
.changelog-version-badge {
  margin-left: 6px;
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 500;
}
.changelog-list {
  overflow-y: auto;
  flex: 1;
  min-height: 140px;
  max-height: 460px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
  margin-top: 4px;
}
.changelog-empty {
  color: var(--text-muted);
  font-size: 12px;
  margin: 8px 0;
}
.changelog-entry {
  padding: 8px 10px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
}
.changelog-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.changelog-entry-version {
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
}
.changelog-entry-date {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.changelog-entry-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: #eee;
}
.changelog-entry-changes {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.changelog-entry-changes li {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
}
.changelog-entry-change-time {
  display: inline-block;
  min-width: 2.6em;
  margin-right: 4px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
}
.changelog-entry-empty-change {
  color: var(--text-muted);
  font-style: italic;
}

.world-atlas-panel {
  width: 1000px;
  max-width: 1000px;
  max-height: 720px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.world-atlas-panel.hidden { display: none; }
.world-atlas-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  flex: 1;
}
.world-atlas-graph-wrap {
  position: relative;
  overflow: auto;
  min-height: 380px;
  height: min(62vh, 540px);
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
    radial-gradient(ellipse at 82% 10%, rgba(255, 255, 255, 0.08), transparent 26%),
    radial-gradient(ellipse at 50% 55%, rgba(40, 110, 150, 0.3), transparent 55%),
    linear-gradient(180deg, #1a3a58 0%, #0c2438 45%, #081820 100%);
  border: 2px solid var(--gold-dim);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 220, 140, 0.12);
}
.world-atlas-graph-wrap.has-painted-bg {
  background: #0a1c2c;
}
.world-atlas-graph {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}
.world-atlas-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.world-atlas-roads {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 2;
}
.world-atlas-empty {
  position: relative;
  z-index: 3;
  color: var(--text-muted);
  font-size: 12px;
  padding: 16px;
}
.world-atlas-flag {
  position: absolute;
  z-index: 5;
  width: 36px;
  height: 52px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -100%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.world-atlas-flag-pole {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: linear-gradient(180deg, #e8eef4 0%, #9aa8b4 40%, #6a7884 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.55);
}
.world-atlas-flag-banner {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 0;
  height: 0;
  margin-left: 1px;
  border-style: solid;
  border-width: 7px 0 7px 16px;
  border-color: transparent transparent transparent #e03028;
  filter: drop-shadow(1px 1px 0 rgba(80, 10, 10, 0.45));
}
.world-atlas-flag:hover .world-atlas-flag-banner,
.world-atlas-flag.is-selected .world-atlas-flag-banner {
  border-left-color: #ff4a3a;
  filter: drop-shadow(0 0 4px rgba(255, 80, 60, 0.75));
}
.world-atlas-flag.is-current .world-atlas-flag-pole {
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    0 0 8px rgba(94, 224, 208, 0.95);
}
.world-atlas-flag-you {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6a0, #f0c020 55%, #a07010);
  border: 2px solid #fff8c8;
  box-shadow: 0 0 8px rgba(255, 220, 80, 0.95);
  z-index: 2;
}
.world-atlas-flag-you.hidden { display: none; }
.world-atlas-flag-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  min-width: 72px;
  max-width: 110px;
  padding: 3px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(18, 14, 10, 0.82);
  border: 1px solid rgba(201, 164, 90, 0.55);
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}
.world-atlas-flag.is-selected .world-atlas-flag-label {
  border-color: #f0d878;
  box-shadow: 0 0 8px rgba(240, 216, 120, 0.35);
}
.world-atlas-flag-name {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  color: #f5efd8;
  text-shadow: 0 1px 2px #000;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.world-atlas-flag-lvl {
  font-size: 9px;
  font-weight: 600;
  color: #c8e6a0;
  text-shadow: 0 1px 2px #000;
}
.world-atlas-hover-hint {
  margin: 0;
  padding: 0 2px;
  font-size: 11px;
  color: var(--text-muted);
}
.world-atlas-tooltip {
  position: absolute;
  z-index: 40;
  min-width: 180px;
  max-width: 260px;
  padding: 8px 10px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(58, 42, 24, 0.96) 0%, rgba(28, 20, 12, 0.96) 100%);
  border: 1px solid #c9a45a;
  border-radius: 4px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 220, 140, 0.2);
  color: #f0e8d0;
}
.world-atlas-tooltip.hidden { display: none; }
.world-atlas-tooltip-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 164, 90, 0.35);
}
.world-atlas-tooltip-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #f5efd8;
}
.world-atlas-tooltip-lvl {
  font-size: 11px;
  font-weight: 600;
  color: #c8e6a0;
}
.world-atlas-tooltip-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  margin-bottom: 4px;
  font-family: var(--font-display);
}
.world-atlas-tooltip-mobs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 160px;
  overflow: hidden;
}
.world-atlas-tooltip-mobs li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.world-atlas-tooltip-mob-name { color: #f0e8d0; }
.world-atlas-tooltip-mob-meta { color: #a8a090; white-space: nowrap; }
.world-atlas-tooltip-empty {
  margin: 0;
  font-size: 11px;
  color: #a8a090;
}

/* legacy selectors (wyspy / bramki) — ukryte */
.world-atlas-transitions,
.world-atlas-gate,
.world-atlas-zone,
.world-atlas-tile { display: none; }

.world-atlas-detail {
  overflow-y: auto;
  max-height: min(26vh, 200px);
  min-height: 110px;
  padding: 6px 8px;
  border: 1px solid var(--slot-border);
  background: rgba(0, 0, 0, 0.22);
}
.world-atlas-detail-empty {
  color: var(--text-muted);
  font-size: 12px;
  margin: 8px 4px;
}
.world-atlas-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.world-atlas-detail-title {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gold-bright);
}
.world-atlas-detail-sub {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}
.world-atlas-detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 55%;
}
.world-atlas-guide-btn {
  padding: 5px 12px;
  background: linear-gradient(180deg, #4a6a28 0%, #2e4518 100%);
  border: 1px solid #9bc45a;
  color: #e8f5c8;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
}
.world-atlas-guide-btn:hover:not(:disabled) {
  border-color: #c8e890;
  color: #fff;
  background: linear-gradient(180deg, #5a8030 0%, #3a5520 100%);
}
.world-atlas-guide-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.world-atlas-exits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  max-width: 100%;
}
.world-atlas-exit-btn {
  padding: 3px 7px;
  background: var(--panel-inner);
  border: 1px solid var(--gold-dim);
  color: var(--text);
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
}
.world-atlas-exit-btn:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}
.world-atlas-detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.world-atlas-section { margin: 0; min-width: 0; }
.world-atlas-section-title {
  margin: 0 0 4px;
  font-size: 11px;
  color: var(--gold-bright);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.world-atlas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 140px;
  overflow-y: auto;
}
.world-atlas-mob-row,
.world-atlas-loot-row,
.world-atlas-empty-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  font-size: 11px;
}
.world-atlas-mob-name,
.world-atlas-loot-name { color: var(--text); }
.world-atlas-mob-meta,
.world-atlas-loot-meta,
.world-atlas-empty-row,
.world-atlas-muted {
  color: var(--text-muted);
  font-size: 10px;
}

@media (max-width: 700px) {
  .world-atlas-detail-cols { grid-template-columns: 1fr; }
  .world-atlas-detail-head { flex-direction: column; }
  .world-atlas-detail-actions { max-width: 100%; align-items: flex-start; }
  .world-atlas-exits { max-width: 100%; justify-content: flex-start; }
}


.task-card {
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  padding: 10px;
}
.task-card.status-ready { border-color: #81c784; }
.task-card.status-active { border-color: var(--gold-bright); }
.task-card.status-locked {
  opacity: 0.72;
  border-color: #555;
  filter: grayscale(0.35);
}
.task-card.status-locked .task-card-title { color: #bbb; }
.task-card.status-locked .task-card-progress { color: #9e9e9e; }
.task-card-locked-hint {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 8px;
}
.task-card.task-card-focus {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 1px var(--gold-bright), inset 0 0 0 1px rgba(255, 213, 79, 0.25);
}
.task-card-title { font-weight: 700; color: #eee; font-size: 13px; }
.task-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.task-card-desc { font-size: 12px; color: var(--text-dim); margin: 6px 0; }
.task-card-goal, .task-card-reward, .task-card-progress {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.task-card-progress { color: #ffd54f; font-weight: 600; }
.task-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.task-card-actions button {
  flex: 1;
  padding: 6px 8px;
  font-size: 12px;
}
#task-admin-desc {
  width: 100%;
  box-sizing: border-box;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: #eee;
  padding: 6px 8px;
  resize: vertical;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 12px;
  color: #ccc;
}

/* --- Panel ustawień gracza --- */
.settings-panel {
  width: min(360px, 92vw);
  max-height: min(90vh, calc(100vh - 24px));
  position: fixed;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.settings-panel.hidden { display: none !important; }
.settings-panel > .panel-header {
  flex-shrink: 0;
}
.settings-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
}
.keybinds-panel {
  width: min(400px, 92vw);
  position: absolute;
  z-index: 41;
  pointer-events: auto;
}
.keybinds-panel.hidden { display: none; }
.change-password-panel {
  width: min(360px, 92vw);
  position: absolute;
  z-index: 41;
  pointer-events: auto;
}
.change-password-panel.hidden { display: none; }
#settings-open-keybinds-btn,
#settings-open-change-password-btn {
  width: 100%;
  margin-top: 2px;
}
.change-password-panel .settings-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  margin: 0 0 8px;
  font-size: 14px;
  background: var(--panel-inner);
  color: var(--text);
  border: 1px solid var(--slot-border);
}
.change-password-panel .secondary-btn {
  width: 100%;
  margin-top: 4px;
}
.settings-section {
  margin-top: 8px;
}
.settings-section-title {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--gold-bright);
  font-weight: 600;
}
.settings-row-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.settings-scale-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.settings-scale-row input[type="range"] {
  flex: 1;
  min-width: 0;
}
#settings-ui-scale-value,
#settings-game-text-scale-value,
#settings-center-bars-offset-value,
#settings-center-bars-opacity-value,
#settings-center-bars-spread-value {
  min-width: 3.2em;
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
#settings-ui-scale-reset,
#settings-game-text-reset,
#settings-center-bars-offset-reset {
  margin-top: 4px;
  width: 100%;
}
.settings-select {
  width: 100%;
  margin-bottom: 8px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: #1a120c;
  border: 1px solid #6b4a28;
  border-radius: 0;
}
.settings-font-preview {
  margin: 0 0 12px;
  padding: 8px 10px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--gold-bright, #e8c76a);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(107, 79, 42, 0.5);
  border-radius: 4px;
  text-align: center;
}

.settings-keybinds-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  max-height: min(420px, 55vh);
  overflow-y: auto;
  padding-right: 2px;
}
.settings-keybind-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-dim, #b8943f);
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(107, 79, 42, 0.45);
}
.settings-keybind-section:first-child {
  margin-top: 0;
}
.settings-keybind-row {
  display: grid;
  grid-template-columns: 1fr minmax(72px, 0.9fr) 28px;
  align-items: center;
  gap: 6px;
}
.settings-keybind-row.is-capturing .settings-keybind-btn {
  border-color: var(--gold-bright, #e8c76a);
  color: var(--gold-bright, #e8c76a);
}
.settings-keybind-label {
  font-size: 12px;
  color: var(--text, #e8e0d0);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-keybind-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 5px 8px;
  color: var(--text-dim, #cfc3a8);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--wood-mid, #6b4f2a);
  border-radius: 4px;
  cursor: pointer;
  min-width: 0;
}
.settings-keybind-btn:hover {
  border-color: var(--gold-dim, #b8943f);
  color: var(--gold-bright, #e8c76a);
}
.settings-keybind-btn.capturing {
  font-style: italic;
}
.settings-keybind-clear {
  font-family: inherit;
  font-size: 11px;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--text-muted, #9a8f7a);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.settings-keybind-clear:hover:not(:disabled) {
  color: #e8a0a0;
  border-color: rgba(180, 80, 80, 0.45);
}
.settings-keybind-clear:disabled {
  opacity: 0.35;
  cursor: default;
}
#settings-keybinds-reset {
  margin-top: 4px;
  width: 100%;
}
.settings-keybinds-live-hint.hidden {
  display: none;
}

#menu-icons-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-windows-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-window-size-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) 1fr 1fr;
  gap: 10px;
  align-items: end;
  padding: 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
}
.admin-window-size-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-window-size-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.admin-window-size-row input {
  width: 100%;
  box-sizing: border-box;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  color: #ddd;
  padding: 5px 7px;
}
.menu-icon-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  padding: 12px;
}
.menu-icon-preview {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  color: #d0d6e8;
  font-size: 14px;
  font-weight: 700;
}
.menu-icon-preview.has-image { font-size: calc(0); }
.menu-icon-preview.no-bg {
  background: transparent;
  border-color: transparent;
}
.menu-icon-preview img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
}
.menu-icon-fields { flex: 1; min-width: 0; }
.menu-icon-title {
  font-size: 14px;
  font-weight: 600;
  color: #eee;
  margin-bottom: 8px;
}
.menu-icon-id { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.menu-icon-fields label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.menu-icon-fields input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
}
.menu-icon-file-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.menu-icon-upload-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
}
.menu-scale-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
}
.menu-scale-row input[type="range"] {
  flex: 1;
  min-width: 0;
}
#menu-scale-value {
  min-width: 3.2em;
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.menu-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.menu-color-row input[type="color"] {
  width: 42px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--slot-border);
  border-radius: 0;
  background: var(--slot-bg);
  cursor: pointer;
}
.menu-color-row input[type="text"] {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, Consolas, monospace;
  text-transform: lowercase;
}
.menu-color-row .secondary-btn {
  flex-shrink: 0;
  padding: 6px 10px;
}

/* --- Panele fuzji / ulepszania --- */
.enhance-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: 420px;
  max-height: min(90vh, 720px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  padding: 10px;
  z-index: 22;
  box-shadow: var(--pixel-frame);
}
.enhance-panel.hidden { display: none; }
#fuse-panel,
#upgrade-panel,
#reroll-panel {
  /* Saved/admin dimensions must also stay inside the scaled viewport. */
  max-width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1) - 16px) !important;
  max-height: calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1) - 16px) !important;
}
.enhance-panel .hint-text {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}
.reroll-stats-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.reroll-stat-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.reroll-stat-btn:hover { border-color: #3d8bfd; }
.reroll-stat-btn.selected {
  border-color: #3d8bfd;
  background: rgba(61, 139, 253, 0.15);
}
.reroll-stat-val { color: #81c784; font-weight: 600; }
.global-drop-row,
.starter-set-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--slot-border);
  margin-bottom: 6px;
  cursor: pointer;
  background: var(--slot-bg);
}
.global-drop-row.selected { border-color: #3d8bfd; }
.global-drop-row img,
.starter-set-row img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  object-fit: contain;
}
.global-drop-row .gd-meta,
.starter-set-row .ss-meta { flex: 1; min-width: 0; }
.global-drop-row .gd-chance { color: #ffc107; white-space: nowrap; }
.global-drop-row.disabled { opacity: 0.55; }
.starter-set-class-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.starter-set-class-btn.active {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(120, 80, 28, 0.9), rgba(70, 46, 18, 0.95));
}
.starter-set-row { cursor: default; }
.starter-set-row .ss-qty {
  width: 72px;
}
.starter-set-row.missing { opacity: 0.65; }
.enhance-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.fuse-slots { justify-content: center; }
.fuse-ready-wrap {
  margin: 0 0 12px;
}
.fuse-auto-wrap {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--slot-border);
  background: var(--slot-bg);
}
.fuse-auto-wrap .checkbox-row {
  margin: 4px 0;
}
.fuse-auto-hint {
  margin: 0 0 6px !important;
}
.fuse-auto-rarities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-left: 4px;
}
.fuse-ready-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  min-height: 44px;
}
.fuse-ready-empty {
  margin: 4px 0 0 !important;
}
.fuse-ready-btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--slot-bg);
  border: 2px solid var(--slot-border);
  border-radius: 0;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text);
  font: inherit;
}
.fuse-ready-btn:hover {
  border-color: var(--gold-bright);
  background: #1a2438;
}
.fuse-ready-btn.selected {
  border-color: #3d8bfd;
  background: rgba(61, 139, 253, 0.15);
}
.fuse-ready-btn img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  object-fit: contain;
  pointer-events: none;
}
.fuse-ready-btn .fuse-ready-abbr {
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
.fuse-ready-btn .fuse-ready-count {
  position: absolute;
  right: 1px;
  bottom: 0;
  padding: 0 3px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffc107;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
}
.enhance-slot {
  width: 52px;
  height: 52px;
  background: var(--slot-bg);
  border: 2px dashed var(--slot-border);
  border-radius: 0;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.enhance-slot.filled {
  border-style: solid;
  cursor: pointer;
}
.enhance-slot.enhance-slot-hint {
  border-style: dashed;
}
.enhance-slot.enhance-slot-hint img,
.enhance-slot.enhance-slot-hint .enhance-slot-ghost-label {
  opacity: 0.38;
  filter: grayscale(0.4);
  pointer-events: none;
}
.enhance-slot.enhance-slot-hint .enhance-ghost-qty {
  position: absolute;
  right: 2px;
  bottom: 1px;
  padding: 0 3px;
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 193, 7, 0.85);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
  opacity: 0.85;
}
.enhance-slot.drag-over {
  border-color: var(--gold-bright);
  background: #1a2438;
}
.enhance-slot-lg {
  width: 72px;
  height: 72px;
}
.enhance-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.enhance-slot .enhance-plus {
  font-size: 11px;
  font-weight: 700;
  color: #ffd54f;
  position: absolute;
  right: 2px;
  bottom: 1px;
  text-shadow: 0 0 2px #000;
  pointer-events: none;
}
.enhance-slot .item-upgrade {
  left: 2px;
  top: 1px;
  right: auto;
  bottom: auto;
  font-size: 11px;
}
.enhance-slot-label {
  font-size: 11px;
  color: var(--gold-bright);
  margin-bottom: 6px;
}
.enhance-action-btn {
  width: 100%;
  margin-top: 4px;
}
.enhance-action-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.enhance-action-row .enhance-action-btn {
  margin-top: 0;
  flex: 1;
}
.enhance-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.enhance-status {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.enhance-status.error { color: #ef5350; }
.enhance-status.ok { color: #81c784; }

.upgrade-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.upgrade-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-bottom: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  font-size: 12px;
}
.upgrade-preview span { color: var(--text-muted); margin-right: 6px; }
.upgrade-preview strong { color: #eee; }

.upgrade-result-preview {
  margin-bottom: 10px;
}
.upgrade-result-preview.hidden { display: none; }
.upgrade-result-tooltip {
  position: static;
  z-index: auto;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

/* Theme pass remaining game panels */

#server-select-screen,
#character-select-screen,
#character-create-screen {
  background:
    radial-gradient(ellipse at 50% 20%, #4a3420 0%, transparent 55%),
    repeating-linear-gradient(0deg, #1a120a 0px, #1a120a 3px, #15100a 3px, #15100a 6px),
    #1a120a !important;
}

.server-list-item,
.character-list-item,
.class-option,
.appearance-option {
  background: var(--panel-inner) !important;
  border: 1px solid var(--slot-border) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
}
.server-list-item:hover:not(:disabled),
.character-list-item:hover,
.class-option:has(input:checked),
.appearance-option:has(input:checked) {
  border-color: var(--gold) !important;
  background: var(--wood-mid) !important;
}
.class-option-label,
.appearance-option-label { color: var(--text) !important; }
.class-option-stats { color: var(--gold-bright) !important; }
.appearance-select-title { color: var(--gold-bright) !important; }

#hotbar {
  background: var(--panel-bg) !important;
  border: 2px solid var(--gold-dim);
  border-radius: 0 !important;
  box-shadow: var(--pixel-frame) !important;
  padding: 6px !important;
}
.hotbar-slot {
  background: var(--slot-bg) !important;
  border: 2px solid var(--slot-border) !important;
  border-radius: 0 !important;
}
.hotbar-slot.drag-over,
.hotbar-slot.activated {
  border-color: var(--gold-bright) !important;
  background: #3a2a14 !important;
  box-shadow: 0 0 0 1px var(--gold) !important;
}
.hotbar-key { color: var(--text-muted) !important; }

.side-menu-btn {
  background: var(--panel-bg) !important;
  border: 2px solid var(--gold-dim) !important;
  border-radius: 0 !important;
  box-shadow: var(--pixel-frame) !important;
  color: var(--text) !important;
}
.side-menu-btn:hover {
  border-color: var(--gold-bright) !important;
  background: var(--wood-mid) !important;
}
.side-menu-badge {
  border-radius: 0 !important;
  background: var(--danger) !important;
}

.admin-windows-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-window-size-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) 1fr 1fr;
  gap: 10px;
  align-items: end;
  padding: 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
}
.admin-window-size-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-window-size-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.admin-window-size-row input {
  width: 100%;
  box-sizing: border-box;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  color: #ddd;
  padding: 5px 7px;
}
.auction-panel .panel-header,
.task-panel .panel-header,
.ranking-panel .panel-header,
.hunt-analyzer-panel .panel-header,
.changelog-panel .panel-header,
.wiki-panel .panel-header,
.calendar-panel .panel-header,
.world-atlas-panel .panel-header,
.settings-panel .panel-header,
.keybinds-panel .panel-header,
.change-password-panel .panel-header {
  margin: 0 -10px 0;
}

.auction-tab,
.task-tab,
.ranking-tab {
  background: rgba(20, 14, 8, 0.7) !important;
  border: 1px solid #5a4020 !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
  font-family: var(--font-display);
}
.auction-tab.active,
.task-tab.active,
.ranking-tab.active {
  border-color: var(--gold) !important;
  color: var(--gold-bright) !important;
  background: linear-gradient(180deg, rgba(120, 80, 28, 0.9), rgba(70, 46, 18, 0.95)) !important;
}
.auction-row,
.task-card,
.ranking-row,
.ranking-you,
.menu-icon-row {
  background: linear-gradient(180deg, rgba(55, 38, 22, 0.95), rgba(28, 18, 10, 0.98)) !important;
  border: 1px solid #5a4020 !important;
  border-radius: 0 !important;
}
.task-card.status-ready { border-color: var(--success) !important; }
.task-card.status-active { border-color: var(--gold) !important; }
.task-card.status-locked {
  opacity: 0.72 !important;
  border-color: #4a4030 !important;
  filter: grayscale(0.35) !important;
}
.task-card.status-locked .task-card-title { color: #b0a890 !important; }
.task-card.status-locked .task-card-progress { color: #8a8070 !important; }
.task-card-locked-hint {
  color: var(--text-muted) !important;
}
.task-card.task-card-focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold), inset 0 0 0 1px rgba(255, 213, 79, 0.25) !important;
}
.auction-icon,
.auction-inv-cell,
.enhance-slot {
  border-radius: 0 !important;
  background: var(--slot-bg) !important;
}
.enhance-slot.drag-over {
  border-color: var(--gold-bright) !important;
  background: #3a2a14 !important;
}
.enhance-panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 78, 32, 0.42), transparent 52%),
    linear-gradient(180deg, #3d2a18 0%, #24160c 100%) !important;
  border: 2px solid #6e5424 !important;
  outline: 1px solid rgba(201, 162, 39, 0.55);
  outline-offset: -3px;
  border-radius: 0 !important;
  box-shadow:
    0 0 0 1px #2a1a0c,
    0 10px 28px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(0, 0, 0, 0.22) !important;
  padding: 0 12px 12px !important;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.enhance-panel .panel-header { margin: 0 -12px 0; }
.enhance-slot-label,
.settings-section-title,
.admin-section-title {
  color: var(--gold-bright) !important;
  font-family: var(--font-display);
}
.enhance-panel-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #6e5424;
  margin: 0 0 10px;
  padding: 6px 0 8px;
}
.enhance-tab-btn {
  background: #2b1d12;
  border: 1px solid #5a4020;
  color: #d8c899;
  padding: 5px 14px;
  font-size: 12px;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all 0.15s ease;
}
.enhance-tab-btn:hover {
  background: #3d2a18;
  border-color: #8a6a28;
  color: #fff0be;
}
.enhance-tab-btn.active {
  background: linear-gradient(180deg, rgba(120, 80, 28, 0.9), rgba(70, 46, 18, 0.95));
  border-color: var(--gold);
  color: var(--gold-bright);
}
.enhance-tab-section.hidden {
  display: none !important;
}
.salvage-info-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.salvage-item-name {
  font-size: 13px;
  font-weight: bold;
  color: #fff0be;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #5a4020;
  min-height: 20px;
}
.salvage-materials-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(40, 28, 16, 0.9), rgba(20, 14, 8, 0.95));
  border: 1px solid #5a4020;
  min-height: 72px;
}
.salvage-preview-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin: auto 0;
}
.salvage-mat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #e7d9b0;
}
.salvage-mat-icon {
  width: 24px;
  height: 24px;
  border: 1px solid #5a4020;
  background: var(--slot-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.salvage-mat-icon img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.salvage-mat-qty {
  font-weight: bold;
  color: #ffd54f;
  margin-left: auto;
}
.ember-convert-recipe,
.ember-convert-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 6px 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #e7d9b0;
  background: linear-gradient(180deg, rgba(40, 28, 16, 0.9), rgba(20, 14, 8, 0.95));
  border: 1px solid #5a4020;
}
.ember-convert-recipe { justify-content: center; font-weight: bold; color: #fff0be; }
.ember-recipes { display: flex; flex-direction: column; gap: 10px; }
.ember-card { display: flex; flex-direction: column; min-width: 0; }
.ember-card-error { min-height: 0; margin: 0 0 6px; font-size: 12px; color: #ef9a9a; }
.ember-card-error:empty { display: none; }
.ember-convert-balance > div { display: flex; flex-direction: column; flex: 1 1 80px; min-width: 0; }
.ember-convert-balance strong { color: #ffd54f; }
.ember-convert-amount {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.ember-amount-btn { flex: 1 1 44px; min-height: 36px; }
.ember-amount-btn.active { border-color: var(--gold); color: var(--gold-bright); }
.ember-amount-input {
  flex: 1 1 72px;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
  background: #2b1d12;
  border: 1px solid #5a4020;
  color: #fff0be;
  padding: 0 8px;
  font-size: 14px;
}
.upgrade-preview {
  background: linear-gradient(180deg, rgba(55, 38, 22, 0.95), rgba(28, 18, 10, 0.98)) !important;
  border: 1px solid #5a4020 !important;
  border-radius: 0 !important;
}
.admin-player-row {
  background: var(--panel-inner) !important;
  border-radius: 0 !important;
}
.admin-player-row.selected {
  border-color: var(--gold) !important;
  background: var(--wood-mid) !important;
}
.admin-player-badge.admin {
  background: var(--wood-dark) !important;
  color: var(--gold-bright) !important;
}
.admin-players-view-btn {
  background: var(--panel-inner) !important;
  border: 1px solid var(--slot-border) !important;
  border-radius: 0 !important;
  color: var(--text-dim) !important;
}
.admin-players-view-btn.active {
  background: linear-gradient(180deg, rgba(120, 80, 28, 0.9), rgba(70, 46, 18, 0.95)) !important;
  color: var(--gold-bright) !important;
  border-color: var(--gold) !important;
}
.item-template-row {
  background: var(--panel-inner) !important;
  border-radius: 0 !important;
  border: 1px solid var(--slot-border);
}
.item-template-row button {
  background: var(--wood-mid) !important;
  border-radius: 0 !important;
}
.dir-assign-btn {
  background: var(--wood) !important;
  border-radius: 0 !important;
}
.dir-assign-btn.active {
  background: linear-gradient(180deg, rgba(120, 80, 28, 0.9), rgba(70, 46, 18, 0.95)) !important;
  border-color: var(--gold) !important;
  color: var(--gold-bright) !important;
}
#spawn-selection-info {
  background: var(--panel-inner) !important;
  border-radius: 0 !important;
  border: 1px solid var(--slot-border);
}
.sprite-preview,
.sheet-grid-preview,
.tpl-icon {
  border-radius: 0 !important;
  background: var(--slot-bg) !important;
}
.rarity-swatch { border-radius: 0 !important; }
.hint-text { color: var(--text-muted) !important; }
#auction-gold { color: var(--gold-bright) !important; }
.auction-price { color: var(--gold-bright) !important; }
.auction-stats { color: var(--ink-muted) !important; }
.auction-name,
.task-card-title { color: var(--text) !important; }

/* Item encyclopedia */
.item-encyclopedia-panel {
  width: 720px;
  max-width: 720px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
}
.item-encyclopedia-panel.hidden { display: none; }
.item-enc-tabs {
  display: flex;
  gap: 4px;
  padding: 0 8px 6px;
  flex-shrink: 0;
}
.item-enc-tab {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid #5a4020;
  background: rgba(20, 14, 8, 0.7);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.item-enc-tab.active {
  background: linear-gradient(180deg, rgba(120, 80, 28, 0.9), rgba(70, 46, 18, 0.95));
  color: var(--gold-bright);
  font-weight: 700;
  border-color: var(--gold);
}
.item-enc-tab-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.item-enc-tab-pane.hidden { display: none; }
.item-enc-body {
  display: flex;
  gap: 10px;
  min-height: 0;
  flex: 1;
  padding: 0 8px;
}
.item-enc-browse {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.item-enc-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.item-enc-search,
.item-enc-slot-filter {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
}
.item-enc-list {
  flex: 1;
  overflow: auto;
  min-height: 200px;
  max-height: min(58vh, 420px);
  border: 1px solid var(--gold-dim);
  background: rgba(0, 0, 0, 0.2);
}
.item-enc-list-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  margin: 0;
  border: none;
  border-left: 3px solid #888;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
}
.item-enc-list-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.item-enc-list-row.is-selected {
  background: rgba(240, 216, 120, 0.12);
}
.item-enc-list-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
}
.item-enc-list-icon img {
  max-width: 24px;
  max-height: 24px;
  image-rendering: pixelated;
}
.item-enc-list-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.item-enc-list-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-enc-list-meta,
.item-enc-empty-row,
.item-enc-empty,
.item-enc-muted {
  color: var(--text-muted);
  font-size: 10px;
}
.item-enc-empty,
.item-enc-empty-row {
  padding: 10px;
  font-size: 12px;
}
.item-enc-detail {
  flex: 1;
  min-width: 0;
  overflow: auto;
  max-height: min(62vh, 460px);
  padding: 4px 6px;
  border: 1px solid var(--gold-dim);
  background: rgba(0, 0, 0, 0.15);
}
.item-enc-detail-head {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.item-enc-detail-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slot-bg);
  border: 2px solid var(--gold-dim);
}
.item-enc-detail-icon img {
  max-width: 40px;
  max-height: 40px;
  image-rendering: pixelated;
}
.item-enc-detail-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}
.item-enc-detail-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.item-enc-class-req {
  color: var(--gold-bright);
}
.item-enc-section {
  margin-bottom: 10px;
}
.item-enc-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-bright);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.item-enc-stat {
  font-size: 12px;
  margin: 2px 0;
}
.item-enc-effect {
  font-size: 12px;
  margin: 2px 0;
  color: var(--gold-bright);
  font-style: italic;
}
.item-enc-source-row {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}
.item-enc-source-type {
  font-size: 10px;
  color: var(--gold-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.item-enc-source-title {
  font-size: 12px;
}
.item-enc-source-meta {
  color: var(--text-muted);
  font-size: 11px;
}
.item-enc-source-maps {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
  padding-left: 2px;
}
.monster-enc-loc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.monster-enc-loc-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  margin: 0;
  border: 1px solid var(--gold-dim);
  background: rgba(240, 216, 120, 0.08);
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.monster-enc-loc-btn:hover {
  background: rgba(240, 216, 120, 0.18);
}
.monster-enc-loc-hint {
  margin-top: 6px;
}
.monster-enc-loot-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.monster-enc-loot-icon {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}

/* Bestiariusz — encyklopedia potworów */
.bestiary-list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.bestiary-filter-chip {
  padding: 3px 8px;
  border: 1px solid #5a4020;
  background: rgba(20, 14, 8, 0.75);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.bestiary-filter-chip.is-active {
  background: linear-gradient(180deg, rgba(120, 80, 28, 0.85), rgba(70, 46, 18, 0.95));
  color: var(--gold-bright);
  border-color: var(--gold);
  font-weight: 700;
}
.bestiary-list-progress-wrap {
  display: block;
  margin-top: 3px;
}
.bestiary-list-progress {
  display: block;
  height: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(90, 64, 32, 0.55);
  overflow: hidden;
}
.bestiary-list-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8a6a28, #f0c040);
  transition: width 0.35s ease;
}
.item-enc-list-row.bestiary-row-complete {
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.35);
}
.bestiary-section { margin-top: 4px; }
.bestiary-hero {
  border: 1px solid rgba(201, 162, 39, 0.45);
  background: linear-gradient(180deg, rgba(48, 32, 18, 0.92) 0%, rgba(24, 16, 10, 0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(232, 196, 120, 0.1), 0 2px 0 rgba(0, 0, 0, 0.25);
  padding: 10px;
  margin-bottom: 8px;
}
.bestiary-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.bestiary-kills {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bestiary-kills strong {
  color: var(--gold-bright);
  font-size: 16px;
}
.bestiary-tier-pill {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid rgba(201, 162, 39, 0.5);
  background: rgba(0, 0, 0, 0.3);
  color: var(--gold-bright);
  font-weight: 700;
}
.bestiary-progress-wrap { margin: 6px 0 4px; }
.bestiary-progress-track {
  height: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(90, 64, 32, 0.55);
  overflow: hidden;
}
.bestiary-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #8a6a28, #f0c040);
  transition: width 0.35s ease;
}
.bestiary-progress-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.bestiary-bonus-chips-title {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 8px 0 4px;
}
.bestiary-bonus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.bestiary-bonus-chip,
.bestiary-tier-bonus {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 0;
  border: 1px solid rgba(90, 64, 32, 0.65);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
}
.bestiary-bonus-chip--dmg { border-color: rgba(200, 80, 80, 0.6); color: #ffb4b4; }
.bestiary-bonus-chip--exp { border-color: rgba(80, 180, 100, 0.6); color: #a8e6a0; }
.bestiary-bonus-chip--drop { border-color: rgba(160, 100, 220, 0.6); color: #d4b4ff; }
.bestiary-bonus-chip--gold { border-color: rgba(220, 180, 60, 0.7); color: #ffe082; }
.bestiary-bonus-chip--elite { border-color: rgba(220, 120, 60, 0.6); color: #ffcc80; }
.bestiary-bonus-chip--rift { border-color: rgba(80, 140, 220, 0.6); color: #90caf9; }
.bestiary-bonus-chip--def { border-color: rgba(100, 160, 200, 0.6); color: #b3e5fc; }
.bestiary-bonus-chip--respawn { border-color: rgba(120, 180, 120, 0.6); color: #c5e1a5; }
.bestiary-tier-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bestiary-tier-card {
  border: 1px solid #5a4020;
  background: rgba(18, 12, 8, 0.65);
  padding: 8px;
}
.bestiary-tier-card.is-unlocked {
  border-color: rgba(201, 162, 39, 0.55);
  box-shadow: inset 0 0 12px rgba(240, 192, 64, 0.06);
}
.bestiary-tier-card.is-locked {
  opacity: 0.55;
  filter: grayscale(0.2);
}
.bestiary-tier-card.is-next {
  border-color: rgba(240, 192, 64, 0.45);
}
.bestiary-tier-card.is-just-unlocked {
  animation: bestiary-tier-unlock 1.5s ease;
}
@keyframes bestiary-tier-unlock {
  0%, 100% { box-shadow: inset 0 0 12px rgba(240, 192, 64, 0.06); }
  50% { box-shadow: inset 0 0 24px rgba(240, 192, 64, 0.35), 0 0 8px rgba(240, 192, 64, 0.25); }
}
.bestiary-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.bestiary-tier-status { font-size: 14px; }
.bestiary-tier-bonuses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.bestiary-tier-bonus { font-size: 10px; }
.admin-tier-box {
  border: 1px solid rgba(90, 64, 32, 0.55);
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.25);
}
.bestiary-admin-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
/* Kopiowanie progów bestiariusza między potworami (panel admina). */
.bestiary-admin-copy {
  border: 1px solid rgba(90, 64, 32, 0.55);
  background: rgba(0, 0, 0, 0.25);
  padding: 8px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bestiary-admin-copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bestiary-admin-copy-actions .secondary-btn {
  flex: 1 1 auto;
}
.bestiary-admin-copy-actions .secondary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#bestiary-admin-copy-hint {
  margin: 0;
}
.bestiary-admin-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-content: start;
  width: 100%;
}
.bestiary-admin-preview-card {
  display: block;
  width: 100%;
  border: 1px solid rgba(90, 64, 32, 0.55);
  background: rgba(0, 0, 0, 0.25);
  padding: 10px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.bestiary-admin-preview-card:hover {
  border-color: rgba(140, 100, 50, 0.75);
}
.bestiary-admin-preview-card.is-selected {
  border-color: rgba(212, 175, 55, 0.85);
  box-shadow: inset 0 0 12px rgba(212, 175, 55, 0.12);
}
.bestiary-admin-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bestiary-admin-preview-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  image-rendering: pixelated;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(90, 64, 32, 0.45);
}
.bestiary-admin-preview-icon.is-empty {
  opacity: 0.35;
}
.bestiary-admin-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bestiary-admin-preview-meta strong {
  font-size: 13px;
}
.bestiary-admin-preview-draft {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: #ffb74d;
  font-weight: 700;
}
.bestiary-admin-preview-tier {
  border-top: 1px solid rgba(90, 64, 32, 0.35);
  padding: 6px 0;
}
.bestiary-admin-preview-tier-kills {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--gold-bright, #d4af37);
}
.bestiary-admin-preview-tier-label {
  font-size: 10px;
  opacity: 0.75;
  margin: 4px 0 2px;
}
.bestiary-admin-preview-tier-bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bestiary-admin-preview-tier-bonuses--cumulative {
  opacity: 0.92;
}
.bestiary-admin-preview-cumulative {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(212, 175, 55, 0.35);
}

.location-guide-root {
  pointer-events: none;
  z-index: 70;
}
.location-guide-root.hidden { display: none; }
.location-guide-arrow {
  position: fixed;
  left: var(--lgx, 0px);
  top: var(--lgy, 0px);
  width: 44px;
  height: 20px;
  transform: translate(-50%, -50%) rotate(var(--lga, 0rad));
  transform-origin: center center;
  pointer-events: none;
  z-index: 71;
  background: linear-gradient(90deg, transparent 0%, var(--gold-bright) 28%, var(--gold-bright) 100%);
  clip-path: polygon(0 35%, 58% 35%, 58% 0, 100% 50%, 58% 100%, 58% 65%, 0 65%);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.65));
  animation: location-guide-pulse 1.1s ease-in-out infinite;
}
.location-guide-arrow.hidden { display: none; }
.location-guide-ring {
  position: fixed;
  left: var(--lgx, 0px);
  top: var(--lgy, 0px);
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 6px rgba(212, 175, 55, 0.45);
  pointer-events: none;
  z-index: 71;
  animation: location-guide-ring 1.2s ease-out infinite;
}
.location-guide-ring.hidden { display: none; }
.location-guide-hud {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(20, 16, 10, 0.82);
  border: 2px solid var(--gold-dim);
  color: var(--text);
  font-size: 12px;
  pointer-events: auto;
  z-index: 72;
  max-width: min(90vw, 420px);
}
.location-guide-hud.hidden { display: none; }
.location-guide-status {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location-guide-clear-btn {
  flex-shrink: 0;
  border: 1px solid var(--gold-dim);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  padding: 2px 6px;
}
@keyframes location-guide-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
@keyframes location-guide-ring {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}

/* Auction / task / admin inputs — dark (nadpisane w premium-ui.css) */

/* ==========================================================================
   Phone UI shell (html[data-ui-mode="phone"])
   ========================================================================== */
#mobile-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}
#mobile-ui.hidden { display: none; }
html:not([data-ui-mode="phone"]) #mobile-ui {
  display: none !important;
}
html[data-ui-mode="phone"] #mobile-ui:not(.hidden) {
  display: block;
}
#mobile-ui .mobile-stick,
#mobile-ui .mobile-skill-pad,
#mobile-ui .mobile-actions,
#mobile-ui .mobile-sheet {
  pointer-events: auto;
}

html[data-ui-mode="phone"] #game-canvas {
  touch-action: none;
}

html[data-ui-mode="phone"] #game-side-menu {
  display: none !important;
}
html[data-ui-mode="phone"] .draggable-panel-header {
  cursor: grab;
  touch-action: none;
}
html[data-ui-mode="phone"] .window-drag-locked > .draggable-panel-header,
html[data-ui-mode="phone"] .window-drag-locked .panel-header.draggable-panel-header {
  cursor: default;
}
html[data-ui-mode="phone"] .hotbar-drag-handle {
  display: flex !important;
  touch-action: none;
}
html[data-ui-mode="phone"] .window-resize-handle {
  touch-action: none;
}

html[data-ui-mode="phone"] #hud {
  top: 6px;
  left: 6px;
  right: auto;
  min-width: 0;
  width: min(46vw, 200px);
  padding: 6px 8px;
  gap: 4px;
  z-index: 30;
}
html[data-ui-mode="phone"] #hud #logout-btn,
html[data-ui-mode="phone"] #hud #chase-mode-btn {
  display: none;
}
html[data-ui-mode="phone"] #minimap-wrap {
  top: 6px;
  right: 6px;
  left: auto;
  transform: scale(0.85);
  transform-origin: top right;
}
html[data-ui-mode="phone"] #target-frame {
  top: 6px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: min(52vw, 220px);
  z-index: 31;
}

/* Hotbar desktop ukryty — używamy #mobile-hotbar */
html[data-ui-mode="phone"] #hotbar {
  display: none !important;
}

/* Chat: bez party — ukryty (przycisk Czat i tak rozwija przez .mobile-chat-expanded) */
html[data-ui-mode="phone"]:not(.mobile-in-party):not(.mobile-chat-expanded) #chat-box {
  display: none !important;
}
/* Chat: kompaktowy; rozwinięty przez .mobile-chat-expanded */
html[data-ui-mode="phone"] #chat-box {
  width: min(52vw, 220px);
  height: 72px;
  z-index: 34;
  opacity: 0.92;
}
/* W party — kompaktowy podgląd czatu (jak wcześniej) */
html[data-ui-mode="phone"].mobile-in-party #chat-box {
  display: block;
}
/* Nagłówek widoczny — przeciąganie czatu na telefonie */
html[data-ui-mode="phone"] #chat-box .chat-box-header {
  display: flex;
}
html[data-ui-mode="phone"] #chat-box #chat-tabs {
  display: none;
}
html[data-ui-mode="phone"] #chat-box #chat-input {
  display: none;
}
html.mobile-chat-expanded[data-ui-mode="phone"] #chat-box {
  width: min(94vw, 420px);
  height: min(42vh, 280px);
  opacity: 1;
  z-index: 45;
}
html.mobile-chat-expanded[data-ui-mode="phone"] #chat-box #chat-tabs {
  display: flex;
}
html.mobile-chat-expanded[data-ui-mode="phone"] #chat-box #chat-input {
  display: block;
}

/* Tutorial: nie zasłania sterowania, mieści się w bezpiecznym obszarze i przewija na niskim ekranie. */
html[data-ui-mode="phone"] .starter-tutorial-window,
html[data-ui-mode="phone"] .starter-tutorial-info {
  top: 50%;
  width: min(92vw, 420px);
  max-width: 92vw;
  max-height: calc(100dvh - 24px);
  padding: 12px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html[data-ui-mode="phone"] .starter-tutorial-quest {
  min-height: 48px;
  padding: 9px;
  touch-action: manipulation;
}
html[data-ui-mode="phone"] .starter-tutorial-skip {
  min-height: 44px;
  touch-action: manipulation;
}
html[data-ui-mode="phone"] .starter-tutorial-arrow-label {
  max-width: min(50vw, 180px);
  white-space: normal;
  text-align: center;
}

/* Panele mobilne: rozmiar pod telefon, pozycja z WindowDrag (przeciągalne).
   max-height w dvh (pasek adresu) + overflow auto !important (premium często ma hidden !important). */
html[data-ui-mode="phone"] #shop-panel:not(.hidden) {
  width: calc(min((92 * var(--ui-vw, 1vw)), 360px) / var(--ui-zoom, 1)) !important;
  max-width: calc((96 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1)) !important;
  max-height: calc(min((90 * var(--ui-vh, 1vh)), (90 * var(--ui-vh, 1vh))) / var(--ui-zoom, 1)) !important;
  height: calc(min((90 * var(--ui-vh, 1vh)), 720px) / var(--ui-zoom, 1)) !important;
  min-height: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 60 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
}
html[data-ui-mode="phone"] #shop-panel .shop-columns {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: 1fr;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
html[data-ui-mode="phone"] #shop-panel .shop-col {
  min-width: 0;
}
html[data-ui-mode="phone"] #shop-panel .shop-sell-layout { display: block; }
html[data-ui-mode="phone"] #shop-panel .shop-col + .shop-col {
  margin-top: 12px;
}
html[data-ui-mode="phone"] #storage-panel .storage-columns {
  grid-template-columns: minmax(0, 1fr);
}
html[data-ui-mode="phone"] #storage-panel .storage-col {
  min-width: 0;
}
html[data-ui-mode="phone"] #storage-panel .storage-grid {
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}
html[data-ui-mode="phone"] #storage-panel .storage-col-head {
  align-items: flex-start;
  flex-wrap: wrap;
}
html[data-ui-mode="phone"] #storage-panel .storage-bank-sort {
  max-width: 100%;
  flex-wrap: wrap;
}
html[data-ui-mode="phone"] #item-encyclopedia-panel .item-enc-body {
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
html[data-ui-mode="phone"] #item-encyclopedia-panel .item-enc-browse {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}
html[data-ui-mode="phone"] #item-encyclopedia-panel .item-enc-list {
  min-height: 112px;
  max-height: min(25dvh, 180px);
  flex: 0 0 auto;
}
html[data-ui-mode="phone"] #item-encyclopedia-panel .item-enc-detail {
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  flex: 1 0 auto;
}
html[data-ui-mode="phone"] #inventory-panel:not(.hidden),
html[data-ui-mode="phone"] #character-panel:not(.hidden),
html[data-ui-mode="phone"] #skill-window:not(.hidden),
html[data-ui-mode="phone"] #skill-tree-panel:not(.hidden),
html[data-ui-mode="phone"] #world-map-panel:not(.hidden),
html[data-ui-mode="phone"] .enhance-panel:not(.hidden):not(#calendar-panel),
html[data-ui-mode="phone"] #settings-panel:not(.hidden),
html[data-ui-mode="phone"] #keybinds-panel:not(.hidden),
html[data-ui-mode="phone"] #change-password-panel:not(.hidden),
html[data-ui-mode="phone"] #auction-panel:not(.hidden),
html[data-ui-mode="phone"] #task-panel:not(.hidden),
html[data-ui-mode="phone"] #ranking-panel:not(.hidden),
html[data-ui-mode="phone"] #friends-panel:not(.hidden),
html[data-ui-mode="phone"] #hunt-analyzer-panel:not(.hidden),
html[data-ui-mode="phone"] #changelog-panel:not(.hidden),
html[data-ui-mode="phone"] #wiki-panel:not(.hidden),
html[data-ui-mode="phone"] #world-atlas-panel:not(.hidden),
html[data-ui-mode="phone"] #item-encyclopedia-panel:not(.hidden),
html[data-ui-mode="phone"] #storage-panel:not(.hidden),
html[data-ui-mode="phone"] #loot-bag-panel:not(.hidden),
html[data-ui-mode="phone"] #blessing-panel:not(.hidden),
html[data-ui-mode="phone"] :is(#identifier-panel, #identifier-stat-panel):not(.hidden),
html[data-ui-mode="phone"] #teleporter-panel:not(.hidden) {
  /* --ui-vw/--ui-vh = 1% okna w px (uiScale.js): vw/dvh nie podlegają zoomowi #ui-root, więc dzielimy je przez --ui-zoom. */
  width: calc(min((92 * var(--ui-vw, 1vw)), 360px) / var(--ui-zoom, 1)) !important;
  max-width: calc((96 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1)) !important;
  max-height: calc(min((78 * var(--ui-vh, 1vh)), (78 * var(--ui-vh, 1vh))) / var(--ui-zoom, 1)) !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 60 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  box-sizing: border-box;
}
html[data-ui-mode="phone"] #inventory-panel:not(.hidden),
html[data-ui-mode="phone"] #storage-panel:not(.hidden),
html[data-ui-mode="phone"] #item-encyclopedia-panel:not(.hidden) {
  width: calc(min((92 * var(--ui-vw, 1vw)), 360px) / var(--ui-zoom, 1)) !important;
  max-width: calc((96 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1)) !important;
  max-height: calc(min((78 * var(--ui-vh, 1vh)), (78 * var(--ui-vh, 1vh))) / var(--ui-zoom, 1)) !important;
}
html[data-ui-mode="phone"] #item-encyclopedia-panel:not(.hidden) {
  height: calc(min((78 * var(--ui-vh, 1vh)), 620px) / var(--ui-zoom, 1)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html[data-ui-mode="phone"] #teleporter-panel:not(.hidden) {
  width: min(96vw, 560px) !important;
  max-width: 98vw !important;
}
html[data-ui-mode="phone"] #teleporter-panel .teleporter-map-wrap {
  min-height: 220px !important;
  height: min(42dvh, 280px) !important;
}
/* Flex-panele z własnym body scroll: zewnętrzne overflow:hidden, scroll w body */
html[data-ui-mode="phone"] #skill-tree-panel:not(.hidden),
html[data-ui-mode="phone"] #auction-panel:not(.hidden),
html[data-ui-mode="phone"] :is(#identifier-panel, #identifier-stat-panel):not(.hidden),
html[data-ui-mode="phone"] #wiki-panel:not(.hidden),
html[data-ui-mode="phone"] #battle-pass-panel:not(.hidden),
html[data-ui-mode="phone"] #skill-window:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html[data-ui-mode="phone"] #skill-tree-panel #skill-tree-body,
html[data-ui-mode="phone"] #battle-pass-panel .battle-pass-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
/* Mini-bonusy na telefonie: kółko + opis jeden pod drugim (bez hovera i bez ściskania kolumn). */
html[data-ui-mode="phone"] #skill-tree-panel .skill-tree-bonus-options {
  grid-template-columns: 1fr;
}
html[data-ui-mode="phone"] #wiki-panel .wiki-body,
html[data-ui-mode="phone"] :is(#identifier-panel, #identifier-stat-panel) .identifier-list,
html[data-ui-mode="phone"] #skill-window #skill-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
/* Telefon: jeden widok naraz — lista (kategorie + artykuły) albo artykuł (przycisk ← Lista). */
html[data-ui-mode="phone"] #wiki-panel .wiki-body {
  flex-direction: column;
  gap: 0;
}
html[data-ui-mode="phone"] #wiki-panel .wiki-body[data-view="list"] .wiki-detail { display: none; }
html[data-ui-mode="phone"] #wiki-panel .wiki-body[data-view="article"] .wiki-sidebar { display: none; }
html[data-ui-mode="phone"] #wiki-panel .wiki-sidebar {
  width: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html[data-ui-mode="phone"] #wiki-panel .wiki-detail { flex: 1 1 auto; padding: 10px; }
html[data-ui-mode="phone"] #wiki-panel .wiki-toolbar { flex-wrap: wrap; }
html[data-ui-mode="phone"] #wiki-panel .wiki-search { flex: 1 1 100%; min-height: 36px; font-size: 16px; }
html[data-ui-mode="phone"] #wiki-panel .wiki-category-link,
html[data-ui-mode="phone"] #wiki-panel .wiki-article-link { min-height: 40px; }
html[data-ui-mode="phone"] #wiki-panel .wiki-open-browser-btn { display: none; }
html[data-ui-mode="phone"] #wiki-panel[data-wiki-view="article"] .wiki-back-btn { display: inline-block; }
html[data-ui-mode="phone"] #wiki-panel[data-wiki-view="article"] .wiki-search { flex: 1 1 0; }
html[data-ui-mode="phone"] #calendar-panel:not(.hidden) {
  width: min(96vw, 420px) !important;
  max-width: 96vw !important;
  max-height: min(78dvh, 78vh) !important;
  height: min(78dvh, 78vh, 640px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 60 !important;
  overflow: hidden;
  box-sizing: border-box;
}
html[data-ui-mode="phone"] #calendar-panel .calendar-body {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(200px, 1.2fr) minmax(140px, 0.9fr);
  gap: 8px;
  overflow: hidden;
}
html[data-ui-mode="phone"] #character-body {
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
html[data-ui-mode="phone"] #character-panel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: calc(min((78 * var(--ui-vh, 1vh)), 520px) / var(--ui-zoom, 1)) !important;
  height: auto !important;
  min-height: 0 !important;
}
html[data-ui-mode="phone"] #character-panel .panel-header {
  flex: 0 0 auto;
}
html[data-ui-mode="phone"] #character-stats {
  overflow: visible;
  flex: 0 0 auto;
}
html[data-ui-mode="phone"] #character-hero {
  flex: 0 0 auto;
  min-height: 0;
}
html[data-ui-mode="phone"] #character-hero-stage {
  min-height: 168px;
}
html[data-ui-mode="phone"] #inventory-body {
  flex-wrap: wrap;
  justify-content: center;
}
html[data-ui-mode="phone"] #inventory-equip-slots {
  justify-items: center;
}
html[data-ui-mode="phone"] #character-stat-grid {
  grid-template-columns: 1fr;
}
html[data-ui-mode="phone"] #settings-panel:not(.hidden),
html[data-ui-mode="phone"] #keybinds-panel:not(.hidden),
html[data-ui-mode="phone"] #change-password-panel:not(.hidden) {
  position: fixed !important;
}
html[data-ui-mode="phone"] #settings-panel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* #settings-panel leży POZA #ui-root (bez zoomu UI), więc jego wymiary NIE są dzielone przez --ui-zoom —
   dzielenie przez 0,7 (domyślna skala telefonu) rozciągało okno poza ekran, a ✕ było nieosiągalne. */
html[data-ui-mode="phone"] #settings-panel:not(.hidden):not(#calendar-panel) { /* :not(#calendar-panel) — ta sama swoistość co grupowa reguła .enhance-panel */
  width: min((92 * var(--ui-vw, 1vw)), 360px) !important;
  max-width: calc(96 * var(--ui-vw, 1vw)) !important;
  max-height: calc(90 * var(--ui-vh, 1vh)) !important;
}
/* Okno nagród bossa centrowało się przez left:50% + translateX(-50%), a grupowa reguła paneli zdejmuje transform
   (!important) — na telefonie okno startowało od środka ekranu i ✕ lądowało poza nim. Środkujemy liczbą. */
html[data-ui-mode="phone"] #boss-reward-panel:not(.hidden):not(#calendar-panel) {
  left: calc((100 * var(--ui-vw, 1vw) - min(92 * var(--ui-vw, 1vw), 360px)) / 2 / var(--ui-zoom, 1)) !important;
}
/* Panel admina: setki kart w nagłówku wypychały ✕ poza ekran — przyciski na górę, karty przewijane. */
html[data-ui-mode="phone"] .admin-header {
  flex-direction: column-reverse;
  align-items: stretch;
}
html[data-ui-mode="phone"] .admin-header-actions { justify-content: flex-end; }
html[data-ui-mode="phone"] .admin-tabs {
  flex: 0 1 auto;
  max-height: calc(28 * var(--ui-vh, 1vh));
  overflow-y: auto;
}
/* Siatka bezpieczeństwa: żadne okno w zoomowanym #ui-root nie może być szersze/wyższe niż ekran (skala UI > 100%:
   reguły z surowym vw bez dzielenia przez --ui-zoom wypychały ✕ kalendarza, teleportera, alchemii, gotowania i handlu). */
html[data-ui-mode="phone"] #ui-root :is(.enhance-panel, .alchemy-station-panel, .cooking-station-panel, #teleporter-panel, #trade-panel, .pixel-panel, [role="dialog"]):not(.hidden):not(#calendar-panel),
html[data-ui-mode="phone"] #ui-root #calendar-panel:not(.hidden) {
  max-width: calc(96 * var(--ui-vw, 1vw) / var(--ui-zoom, 1)) !important;
  max-height: calc(94 * var(--ui-vh, 1vh) / var(--ui-zoom, 1)) !important;
}
/* Osiągnięcia: ✕ było pod przyciskami akcji telefonu (z-index 41). */
html[data-ui-mode="phone"] #achievements-panel:not(.hidden) { z-index: 60; }
html[data-ui-mode="phone"] #settings-panel .settings-panel-body {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

/* Auth / select — wygodniej na wąskim */
html[data-ui-mode="phone"] .auth-box {
  width: min(94vw, 420px);
  max-width: 94vw;
  padding: 16px 14px;
}

.mobile-stick {
  position: absolute;
  left: 12px;
  bottom: 16px;
  width: 120px;
  height: 120px;
  touch-action: none;
  z-index: 41;
  -webkit-user-select: none;
  user-select: none;
}
.mobile-stick-base {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(20, 16, 10, 0.45);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
}
.mobile-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.55);
  border: 2px solid var(--gold-bright);
  transform: translate(0px, 0px);
  will-change: transform;
  pointer-events: none;
}

.mobile-actions {
  position: absolute;
  right: 10px;
  bottom: 226px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: min(228px, 52vw);
  z-index: 41;
}
.mobile-action-btn {
  width: 48px;
  height: 48px;
  border: 2px solid var(--gold-dim);
  background: rgba(20, 16, 10, 0.78);
  color: var(--text);
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--pixel-frame);
}
.mobile-action-btn.is-active,
.mobile-action-btn:active {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

.mobile-skill-pad {
  position: absolute;
  right: 10px;
  bottom: 16px;
  width: 200px;
  height: 200px;
  touch-action: manipulation;
  z-index: 41;
  -webkit-user-select: none;
  user-select: none;
}
.mobile-skill-pad.hidden { display: none !important; }

.mobile-skill-pad-base {
  position: relative;
  width: 100%;
  height: 100%;
}

.mobile-skill-pad-slots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mobile-skill-pad-slots .mobile-skill-pad-slot {
  pointer-events: auto;
}

.mobile-skill-pad-attack {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #a33;
  background: rgba(120, 28, 28, 0.88);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--pixel-frame);
  z-index: 2;
}
.mobile-skill-pad-attack:active {
  border-color: #f55;
  color: #fff;
  background: rgba(160, 40, 40, 0.95);
}

.mobile-skill-pad-slot {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--gold-dim);
  background: rgba(20, 16, 10, 0.78);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--pixel-frame);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mobile-skill-pad-slot.filled {
  border-color: var(--gold-bright);
}
.mobile-skill-pad-slot:active {
  border-color: var(--gold-bright);
}
.mobile-skill-pad-key {
  position: absolute;
  left: 2px;
  top: 0;
  font-size: 9px;
  font-weight: 700;
  color: var(--gold-bright);
  pointer-events: none;
  line-height: 1;
  z-index: 1;
}
.mobile-skill-pad-slot .hotbar-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-skill-pad-slot .hotbar-skill-icon img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}

.mobile-skill-pick-sheet {
  /* Bottom sheet — zawsze w widocznym obszarze (nie centrum % wewnątrz zoom ui-root) */
  max-height: min(50dvh, 360px);
  border-top: 2px solid var(--gold-dim);
  border-radius: 0;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
html[data-ui-mode="phone"] .mobile-skill-pick-sheet {
  position: fixed;
  left: max(0px, env(safe-area-inset-left, 0px));
  right: max(0px, env(safe-area-inset-right, 0px));
  bottom: max(0px, env(safe-area-inset-bottom, 0px));
  top: auto;
  transform: none;
  width: auto;
  z-index: 1000;
}
.mobile-skill-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(38dvh, 260px);
  overflow-y: auto;
  padding: 4px 0 8px;
}
.mobile-skill-pick-section {
  margin: 6px 2px 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mobile-skill-pick-section:first-child {
  margin-top: 0;
}
.mobile-skill-pick-item-consumable .mobile-skill-pick-icon .item-sprite-wrap {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mobile-skill-pick-item-consumable .mobile-skill-pick-icon .item-sprite-wrap img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}
.mobile-skill-pick-item-consumable .mobile-skill-pick-icon .item-qty {
  position: absolute;
  right: -2px;
  bottom: -2px;
  font-size: 8px;
  line-height: 1;
  color: var(--gold-bright);
  text-shadow: 0 0 2px #000;
}
.mobile-skill-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gold-dim);
  background: rgba(20, 16, 10, 0.85);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
}
.mobile-skill-pick-item:active {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}
.mobile-skill-pick-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-skill-pick-icon img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.mobile-skill-pick-name {
  flex: 1;
  font-size: 13px;
}
.mobile-skill-pick-clear {
  width: 100%;
  margin-top: 6px;
}
.mobile-skill-pick-empty {
  margin: 8px 4px;
  text-align: center;
}

.mobile-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(70vh, 480px);
  background: var(--panel-bg);
  border-top: 2px solid var(--gold-dim);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 0 10px 14px;
  overflow: auto;
}
.mobile-sheet.hidden { display: none; }
.mobile-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  font-size: 15px;
  color: var(--gold-bright);
  font-weight: bold;
}
.mobile-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mobile-menu-item {
  border: 2px solid var(--gold-dim);
  background: var(--panel-inner, rgba(40, 32, 22, 0.9));
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 12px 8px;
  cursor: pointer;
  touch-action: manipulation;
}
.mobile-menu-item:active {
  border-color: var(--gold-bright);
}

html[data-ui-mode="phone"] #mobile-hotbar:not(.hidden) {
  display: flex;
}

html.mobile-hotbar-assign-mode[data-ui-mode="phone"] #mobile-ui {
  z-index: 80;
}
html.mobile-hotbar-assign-mode[data-ui-mode="phone"] #mobile-hotbar {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}
html.mobile-hotbar-assign-mode[data-ui-mode="phone"] .mobile-skill-pad {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 8px;
}

.mobile-hotbar {
  position: absolute;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 6px;
  z-index: 42;
  pointer-events: auto;
  padding: 0 4px;
  max-width: min(72vw, 420px);
}
.mobile-hotbar-slots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.mobile-hotbar-slot {
  position: relative;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 2px solid var(--gold-dim);
  background: rgba(20, 16, 10, 0.82);
  touch-action: manipulation;
  cursor: pointer;
}
.mobile-hotbar-slot.filled {
  background: rgba(30, 24, 16, 0.92);
}
.mobile-hotbar-key {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 9px;
  opacity: 0.75;
  pointer-events: none;
}
.mobile-hotbar-nav {
  width: 32px;
  height: 48px;
  border: 2px solid var(--gold-dim);
  background: rgba(20, 16, 10, 0.78);
  color: var(--text);
  font-size: 14px;
  touch-action: manipulation;
  cursor: pointer;
}
.mobile-hotbar-nav:disabled {
  opacity: 0.35;
}

/* Hotbar jako cel przeciągania przedmiotu z ekwipunku (palec, telefon).
   W trakcie dragu podnosimy #mobile-ui ponad okna (panele mają z-index 60),
   żeby pasek dało się złapać palcem — tak samo robi tryb przypisywania. */
html.inv-item-dragging[data-ui-mode="phone"] #mobile-ui {
  z-index: 80;
}
.hotbar-slot.hotbar-drop-match {
  border-color: var(--gold);
  box-shadow: 0 0 6px 1px rgba(240, 192, 64, 0.55);
}
.mobile-hotbar-slot.hotbar-drop-match {
  background: rgba(58, 42, 20, 0.92);
}
.hotbar-slot.hotbar-drop-match.drag-over {
  border-color: var(--gold-bright);
  background: rgba(74, 52, 20, 0.96);
}
.hotbar-slot.drop-reject {
  border-color: #ff5252 !important;
  background: rgba(58, 20, 20, 0.92);
  animation: equip-slot-drop-reject 0.32s ease-in-out;
}

.mobile-rotate-hint {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(92vw, 360px);
  background: rgba(20, 16, 10, 0.9);
  border: 2px solid var(--gold-dim);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: mobile-rotate-hint-in 0.25s ease-out;
}
.mobile-rotate-hint.hidden { display: none !important; }
/* #ui-root > * ustawia pointer-events: auto — hint ma być nieblokujący (inaczej zasłania dotyk przez 5 s po wejściu w portrait). */
#ui-root > .mobile-rotate-hint { pointer-events: none; }
.mobile-rotate-hint-inner {
  text-align: center;
  color: var(--gold-bright);
  padding: 12px 16px;
  max-width: 100%;
}
.mobile-rotate-icon {
  font-size: 28px;
  margin-bottom: 8px;
}
@keyframes mobile-rotate-hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.mobile-touch-indicator {
  position: fixed;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.55);
  pointer-events: none;
  z-index: 39;
  transform: scale(0.6);
  opacity: 0;
}
.mobile-touch-indicator.is-active {
  animation: mobile-touch-pulse 450ms linear forwards;
}
.mobile-touch-indicator.is-complete {
  border-color: var(--gold-bright);
  background: rgba(212, 175, 55, 0.25);
  transform: scale(1);
  opacity: 1;
}
@keyframes mobile-touch-pulse {
  from { transform: scale(0.6); opacity: 0.35; }
  to { transform: scale(1); opacity: 0.85; }
}

html[data-ui-mode="phone"][data-orientation="landscape"] .mobile-stick:not(.mobile-stick-custom) {
  left: calc(12px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.mobile-stick.mobile-stick-custom {
  /* left/bottom ustawiane inline z MobileStickPosition */
  right: auto;
  top: auto;
}
.mobile-stick.is-editing {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  z-index: 120;
  cursor: grab;
  opacity: 0.95;
}
.mobile-stick.is-editing:active {
  cursor: grabbing;
}

html.mobile-stick-editing #mobile-ui .mobile-actions,
html.mobile-stick-editing #mobile-ui .mobile-skill-pad,
html.mobile-stick-editing #mobile-ui .mobile-hotbar,
html.mobile-stick-editing #mobile-ui .mobile-sheet {
  pointer-events: none;
  opacity: 0.35;
}

.mobile-stick-edit-bar {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(16, 12, 8, 0.92);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  max-width: min(92vw, 360px);
  pointer-events: auto;
}
.mobile-stick-edit-bar.hidden { display: none !important; }
.mobile-stick-edit-hint {
  margin: 0;
  color: var(--gold-bright);
  font-size: 13px;
  text-align: center;
}
.mobile-stick-edit-actions {
  display: flex;
  gap: 8px;
}
.mobile-stick-edit-actions .primary-btn,
.mobile-stick-edit-actions .secondary-btn {
  min-width: 88px;
  padding: 8px 12px;
  touch-action: manipulation;
}

.settings-stick-pos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}

html[data-ui-mode="phone"][data-orientation="landscape"] .mobile-actions {
  right: calc(10px + env(safe-area-inset-right, 0px));
  bottom: calc(226px + env(safe-area-inset-bottom, 0px));
}
html[data-ui-mode="phone"][data-orientation="landscape"] .mobile-skill-pad {
  right: calc(10px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
html[data-ui-mode="phone"][data-orientation="landscape"] .mobile-hotbar {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
html[data-ui-mode="phone"][data-orientation="landscape"] #hud {
  top: calc(6px + env(safe-area-inset-top, 0px));
  left: calc(6px + env(safe-area-inset-left, 0px));
}
html[data-ui-mode="phone"][data-orientation="landscape"] #minimap-wrap {
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: calc(6px + env(safe-area-inset-right, 0px));
}

html[data-ui-mode="phone"] #trade-panel:not(.hidden),
html[data-ui-mode="phone"] #party-panel:not(.hidden),
html[data-ui-mode="phone"] #loot-filter-panel:not(.hidden),
html[data-ui-mode="phone"] #player-inspect-panel:not(.hidden),
html[data-ui-mode="phone"] #bug-report-panel:not(.hidden),
html[data-ui-mode="phone"] #pvp-panel:not(.hidden),
html[data-ui-mode="phone"] #instance-portal-panel:not(.hidden) {
  width: min(92vw, 360px) !important;
  max-width: 96vw !important;
  max-height: min(78dvh, 78vh) !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 60 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  box-sizing: border-box;
}
html[data-ui-mode="phone"] #instance-portal-panel:not(.hidden) {
  left: calc((4 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1)) !important;
  top: calc((18 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1)) !important;
  width: min(360px, calc((92 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1))) !important;
  max-width: calc((96 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1)) !important;
  max-height: calc((76 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1)) !important;
}
html[data-ui-mode="phone"] #loot-filter-panel:not(.hidden) {
  width: min(360px, calc((92 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1))) !important;
  max-width: calc((96 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1)) !important;
  overflow-y: hidden !important;
}
html[data-ui-mode="phone"] #loot-manager-individual-wrap .loot-filter-item-row {
  grid-template-columns: minmax(0, 1fr);
}
html[data-ui-mode="phone"] #loot-filter-panel .loot-manager-actions-row {
  flex-direction: column;
}
/* Trade / inspect: flex + scroll w body (premium ma overflow:hidden !important) */
html[data-ui-mode="phone"] #trade-panel:not(.hidden),
html[data-ui-mode="phone"] #player-inspect-panel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html[data-ui-mode="phone"] #trade-panel .trade-columns,
html[data-ui-mode="phone"] #player-inspect-panel .player-inspect-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
html[data-ui-mode="phone"] #trade-panel .trade-columns {
  grid-template-columns: 1fr;
}
html[data-ui-mode="phone"] #player-inspect-panel .player-inspect-body {
  flex-direction: column;
}
html[data-ui-mode="phone"] #party-panel:not(.hidden) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html[data-ui-mode="phone"] #passive-tree-window:not(.hidden),
html[data-ui-mode="phone"] #passive-tree-window.passive-tree-phone-open:not(.hidden),
#passive-tree-window.passive-tree-phone-open:not(.hidden) {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  /* #ui-root ma CSS zoom (Skala UI): wymiary viewportu dzielimy przez zoom, inaczej okno zajmuje tylko część ekranu. */
  width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1)) !important;
  max-width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1)) !important;
  height: calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1)) !important;
  max-height: calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1)) !important;
  margin: 0 !important;
  padding:
    calc(6px + env(safe-area-inset-top, 0px))
    calc(8px + env(safe-area-inset-right, 0px))
    calc(6px + env(safe-area-inset-bottom, 0px))
    calc(8px + env(safe-area-inset-left, 0px)) !important;
  z-index: 1000 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  border-width: 2px !important;
  outline-offset: -4px !important;
  box-shadow:
    0 0 0 1px #2a1a0c,
    0 0 0 3px #8a6a28,
    inset 0 0 60px rgba(0, 0, 0, 0.45) !important;
  transform: none !important;
}
/* Konstelacja na telefonie: kompaktowe sterowanie, bez dekoracji zasłaniających drzewko, mała minimapa. */
html[data-ui-mode="phone"] #passive-constellation-controls {
  top: 6px;
  left: 6px;
  right: 6px;
  gap: 4px 8px;
  padding: 6px 8px;
}
html[data-ui-mode="phone"] #passive-constellation-pages button,
html[data-ui-mode="phone"] #passive-constellation-reset {
  min-height: calc(44px / var(--ui-zoom, 1));
}
html[data-ui-mode="phone"] #passive-constellation-controls label span { display: none; }
html[data-ui-mode="phone"] #passive-constellation-search { width: calc(min((46 * var(--ui-vw, 1vw)), 170px) / var(--ui-zoom, 1)); min-height: calc(44px / var(--ui-zoom, 1)); }
html[data-ui-mode="phone"] #passive-constellation-fit,
html[data-ui-mode="phone"] .constellation-controls-hint,
html[data-ui-mode="phone"] .constellation-touch-hint,
html[data-ui-mode="phone"] #passive-constellation-portraits,
html[data-ui-mode="phone"] #passive-constellation-legend { display: none; }
html[data-ui-mode="phone"] #passive-constellation-minimap {
  right: 6px;
  bottom: 6px;
  width: 104px;
  height: 80px;
}
html[data-ui-mode="phone"] #passive-constellation-zoom { left: 6px; bottom: 6px; }
html[data-ui-mode="phone"] #passive-tree-window.passive-tree-phone-open .panel-header,
#passive-tree-window.passive-tree-phone-open .panel-header {
  flex: 0 0 auto;
  margin: 0 -8px 0 !important;
  cursor: default;
}
html[data-ui-mode="phone"] #passive-tree-toolbar {
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 6px;
  margin: 4px 0 2px;
}
html[data-ui-mode="phone"] #passive-tree-toolbar .passive-tree-stats {
  flex: 1 1 auto;
  gap: 4px;
}
html[data-ui-mode="phone"] #passive-tree-toolbar .passive-tree-points-pill {
  padding: 4px 8px;
  font-size: 11px;
}
html[data-ui-mode="phone"] #passive-tree-toolbar .passive-tree-toolbar-actions {
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
html[data-ui-mode="phone"] #passive-tree-toolbar .passive-tree-search-label {
  display: none;
}
html[data-ui-mode="phone"] #passive-tree-toolbar .passive-tree-search {
  width: min(42vw, 140px);
  min-width: 0;
}
html[data-ui-mode="phone"] #passive-tree-toolbar .passive-tree-save-btn,
html[data-ui-mode="phone"] #passive-tree-toolbar .passive-tree-reset-btn {
  padding: 5px 10px;
  font-size: 11px;
}
html[data-ui-mode="phone"] #passive-tree-status {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
}
html[data-ui-mode="phone"] #passive-tree-hint,
html[data-ui-mode="phone"] #passive-tree-footer {
  display: none !important;
}
/* Na telefonie legenda ma teraz więcej wierszy (typy bonusów) — nie zabieraj miejsca na stopkę opisu. */
html[data-ui-mode="phone"] .passive-tree-legend-box {
  padding: 6px 9px;
  max-width: 150px;
}
html[data-ui-mode="phone"] .passive-tree-legend-box .pt-leg-note {
  display: none;
}
html[data-ui-mode="phone"] #passive-tree-body {
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
html[data-ui-mode="phone"] #passive-tree-viewport {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  order: 1;
}
html[data-ui-mode="phone"] #passive-tree-bonuses {
  width: 100%;
  flex: 0 0 auto;
  order: 2;
  max-height: none;
}
html[data-ui-mode="phone"] #passive-tree-bonuses.pt-bonuses-collapsed .pt-bonuses-list {
  display: none;
}
html[data-ui-mode="phone"] #passive-tree-bonuses:not(.pt-bonuses-collapsed) .pt-bonuses-list {
  max-height: min(22dvh, 148px);
}
html[data-ui-mode="phone"] .pt-bonuses-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
html[data-ui-mode="phone"] .pt-bonuses-chevron {
  flex-shrink: 0;
  font-size: 12px;
  color: #c9a860;
  transition: transform 0.15s ease;
}
html[data-ui-mode="phone"] #passive-tree-bonuses:not(.pt-bonuses-collapsed) .pt-bonuses-chevron {
  transform: rotate(180deg);
}
html:not([data-ui-mode="phone"]) .pt-bonuses-toggle-btn {
  display: block;
  width: 100%;
  text-align: center;
  cursor: default;
  pointer-events: none;
}
html:not([data-ui-mode="phone"]) .pt-bonuses-chevron {
  display: none;
}
.pt-bonuses-toggle-btn {
  border: none;
  margin: 0;
  font: inherit;
  color: inherit;
  background: linear-gradient(180deg, #3a2818 0%, #1a100a 100%);
  border-bottom: 1px solid #6a5028;
}

html[data-ui-mode="phone"] #pvp-match-hud:not(.hidden) {
  transform: scale(0.9);
  transform-origin: top center;
  top: calc(4px + env(safe-area-inset-top, 0px));
}

html[data-ui-mode="phone"] .mobile-menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ══════════════════════════════════════════════════════════════════════
   PVP ARENA UI
   ══════════════════════════════════════════════════════════════════════ */

.pvp-panel {
  width: 480px;
  max-width: 480px;
  max-height: 580px;
  display: flex;
  flex-direction: column;
}
.pvp-panel.hidden { display: none; }

.pvp-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 10px;
}
.pvp-tab {
  flex: 1;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  text-align: center;
}
.pvp-tab.active {
  color: var(--text);
  border-color: var(--accent, #c49a50);
  background: rgba(196, 154, 80, 0.12);
}

/* My stats bar */
.pvp-my-stats {
  display: flex;
  gap: 16px;
  padding: 8px 10px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  margin-bottom: 10px;
  font-size: 12px;
}
.pvp-my-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pvp-my-stat-label {
  color: var(--text-muted);
  font-size: 10px;
}
.pvp-my-stat-value {
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-display);
}

/* Queue section */
.pvp-queue-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pvp-queue-status {
  color: var(--text-muted);
  font-size: 12px;
  min-height: 18px;
}
.pvp-queue-btns {
  display: flex;
  gap: 8px;
}

/* Ranking */
.pvp-ranking-section {
  overflow-y: auto;
  max-height: min(52vh, 400px);
}
.pvp-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pvp-rank-row {
  display: grid;
  grid-template-columns: 36px 1fr auto 100px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  font-size: 12px;
}
.pvp-rank-row.pvp-rank-1 { border-color: #ffd700; }
.pvp-rank-row.pvp-rank-2 { border-color: #c0c0c0; }
.pvp-rank-row.pvp-rank-3 { border-color: #cd7f32; }
.pvp-rank-pos  { font-size: 16px; text-align: center; }
.pvp-rank-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvp-rank-elo  { color: #69f0ae; font-family: var(--font-display); font-size: 13px; }
.pvp-rank-record { color: var(--text-muted); font-size: 11px; text-align: right; }

/* Match history */
.pvp-history-section {
  overflow-y: auto;
  max-height: min(52vh, 400px);
}
.pvp-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pvp-history-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  background: var(--panel-inner);
  border: 1px solid var(--slot-border);
  font-size: 12px;
}
.pvp-history-row.pvp-history-win { border-left: 3px solid #69f0ae; }
.pvp-history-row.pvp-history-loss { border-left: 3px solid #ef9a9a; }
.pvp-history-row.pvp-history-draw { border-left: 3px solid #aaa; }
.pvp-history-result { font-size: 16px; text-align: center; }
.pvp-history-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pvp-history-opponent {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvp-history-score {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  text-align: center;
}
.pvp-history-elo {
  font-family: var(--font-display);
  font-size: 12px;
  text-align: right;
  min-width: 72px;
}
.pvp-history-elo.positive { color: #69f0ae; }
.pvp-history-elo.negative { color: #ef9a9a; }
.pvp-history-elo.neutral { color: var(--text-muted); }
.pvp-history-meta {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.2;
}

.pvp-loading, .pvp-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 16px 8px;
  text-align: center;
}

/* ── PvP Overlay (match found / result) ─────────────────────────────── */
#pvp-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}
#pvp-overlay.hidden { display: none; }

.pvp-overlay-panel {
  min-width: min(360px, 92vw);
  max-width: 420px;
  padding: 20px 24px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

.pvp-overlay-panel-title,
#pvp-overlay-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(196, 154, 80, 0.7);
  letter-spacing: 0.06em;
  margin: 0;
}

.pvp-overlay-panel-body,
#pvp-overlay-body {
  color: var(--text);
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
  width: 100%;
}

.pvp-overlay-msg {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 16px;
}

.pvp-overlay-accept-status {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  min-height: 1.2em;
}

.pvp-overlay-wait {
  color: #ffcc80;
  font-size: 13px;
}

.pvp-overlay-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.pvp-overlay-actions.hidden {
  display: none;
}

.pvp-overlay-actions .primary-btn,
.pvp-overlay-actions .secondary-btn {
  min-width: 130px;
}

.pvp-overlay-panel-counter,
#pvp-overlay-counter {
  font-family: var(--font-display);
  font-size: 56px;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  min-width: 80px;
  text-align: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

#pvp-overlay-counter.pvp-overlay-teleport {
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  text-shadow: 0 0 16px rgba(196, 154, 80, 0.75);
  animation: pvp-overlay-teleport-pulse 0.55s ease-in-out infinite;
}

@keyframes pvp-overlay-teleport-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.04); }
}
.pvp-opp {
  font-size: 18px;
  color: #ef9a9a;
  margin-bottom: 6px;
}
.pvp-sublabel {
  color: var(--text-muted);
  font-size: 13px;
}
.pvp-result-delta {
  font-family: var(--font-display);
  font-size: 36px;
  margin-bottom: 4px;
}
.pvp-result-elo {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 4px;
}
.pvp-result-opp {
  font-size: 13px;
  color: var(--text-muted);
}
.pvp-result-score {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 8px;
}
.pvp-result-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ── PvP Match HUD (góra ekranu w trakcie meczu) ───────────────────── */
.pvp-match-hud {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 10px;
  z-index: 8500;
  pointer-events: none;
}
.pvp-match-hud.hidden { display: none; }

.pvp-hud-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 6px 14px;
  background: rgba(12, 10, 8, 0.82);
  border: 1px solid rgba(196, 154, 80, 0.45);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.pvp-hud-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.pvp-hud-time {
  font-family: var(--font-display);
  font-size: 22px;
  color: #fff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pvp-hud-scoreline {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.pvp-hud-score-me {
  font-family: var(--font-display);
  font-size: 26px;
  color: #69f0ae;
  font-variant-numeric: tabular-nums;
}

.pvp-hud-score-sep {
  font-size: 20px;
  color: var(--text-muted);
}

.pvp-hud-score-opp {
  font-family: var(--font-display);
  font-size: 26px;
  color: #ef9a9a;
  font-variant-numeric: tabular-nums;
}

.pvp-hud-score-target {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.pvp-hud-timer-block.pvp-hud-low-time .pvp-hud-time {
  color: #ffab40;
  animation: pvp-hud-pulse 0.8s ease-in-out infinite;
}

@keyframes pvp-hud-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ---------- Battle Pass ---------- */
.battle-pass-panel {
  width: 600px;
  max-width: 600px;
  max-height: 660px;
  display: flex;
  flex-direction: column;
}
.battle-pass-panel.hidden { display: none; }

.battle-pass-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.battle-pass-title-icon {
  display: inline-flex;
  filter: drop-shadow(0 0 3px rgba(240, 192, 64, 0.45));
}

.battle-pass-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0 4px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #6b4a28 #1a120c;
}

/* Kafelki nie mogą się kurczyć w scrollowanym flex-kontenerze (inaczej baner się zapada). */
.battle-pass-hero,
.battle-pass-section,
.battle-pass-veteran,
.battle-pass-status,
.battle-pass-empty {
  flex: none;
}

.battle-pass-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 9px;
  background: #161129;
  border: 1px solid #6e5424;
  box-shadow:
    inset 0 0 0 1px rgba(240, 192, 64, 0.14),
    0 6px 18px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.battle-pass-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
  image-rendering: pixelated;
}

.battle-pass-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 9, 22, 0.35) 0%, rgba(12, 9, 22, 0) 24%),
    linear-gradient(180deg, rgba(12, 9, 22, 0) 34%, rgba(12, 9, 22, 0.88) 100%);
}

.battle-pass-hero-overlay,
.battle-pass-level-row,
.battle-pass-meta,
.battle-pass-phase {
  position: relative;
  z-index: 1;
}

.battle-pass-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.battle-pass-season {
  font-family: var(--font-display);
  color: var(--gold-bright);
  letter-spacing: 0.08em;
  text-shadow: 1px 1px 0 #0b0814;
}

.battle-pass-timer {
  padding: 2px 6px;
  background: rgba(12, 9, 22, 0.7);
  border: 1px solid rgba(110, 84, 36, 0.7);
  color: #d8cba8;
  font-variant-numeric: tabular-nums;
}

.battle-pass-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.battle-pass-medal {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.battle-pass-medal-art {
  width: 52px;
  height: 52px;
  image-rendering: pixelated;
}

.battle-pass-level-badge {
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff3a0;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 #2a1a0c, 0 0 6px rgba(240, 192, 64, 0.55);
  pointer-events: none;
}

.battle-pass-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.battle-pass-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.battle-pass-progress-bar {
  position: relative;
  height: 14px;
  background: #120d1f;
  border: 1px solid #6e5424;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}

.battle-pass-progress-fill {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, #ffe07a 0%, #f0c040 45%, #b8860b 100%);
  box-shadow: 0 0 8px rgba(240, 192, 64, 0.55);
  transition: width 0.28s ease-out;
}

.battle-pass-progress-ticks {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) calc(10% - 1px),
    rgba(12, 9, 22, 0.75) calc(10% - 1px),
    rgba(12, 9, 22, 0.75) 10%
  );
  pointer-events: none;
}

.battle-pass-progress-text {
  color: #e8dcc0;
  font-variant-numeric: tabular-nums;
}

.battle-pass-next-level {
  color: #a99b7a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.battle-pass-points {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 74px;
}

.battle-pass-points-total {
  font-family: var(--font-display);
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 #0b0814;
}

.battle-pass-points-label { color: #a99b7a; }

.battle-pass-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.battle-pass-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: linear-gradient(180deg, rgba(42, 32, 56, 0.92), rgba(22, 17, 34, 0.95));
  border: 1px solid #4a3a5a;
  color: #bdb2a0;
}

.battle-pass-chip-icon {
  display: inline-flex;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}

.battle-pass-chip.is-active {
  border-color: var(--gold-dim);
  color: var(--gold-bright);
  box-shadow: 0 0 8px rgba(240, 192, 64, 0.25);
}

.battle-pass-phase {
  display: grid;
  gap: 4px;
}

.battle-pass-phase-bar {
  position: relative;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 6px, rgba(0, 0, 0, 0.18) 6px 12px),
    #171128;
  border: 1px solid #4a3a5a;
  overflow: hidden;
}

.battle-pass-phase-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7ee08a 0%, #f0c040 55%, #c05a4a 100%);
  transition: width 0.3s ease-out;
}

.battle-pass-phase-cut {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--bp-phase-cut, 50%);
  width: 1px;
  background: rgba(12, 9, 22, 0.85);
}

.battle-pass-phase-labels {
  display: flex;
  justify-content: space-between;
  color: #8f846c;
  font-variant-numeric: tabular-nums;
}

.battle-pass-phase-labels .is-current {
  color: var(--gold-bright);
  text-shadow: 0 0 6px rgba(240, 192, 64, 0.4);
}

.battle-pass-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.battle-pass-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: linear-gradient(90deg, rgba(110, 84, 36, 0.35) 0%, rgba(26, 18, 12, 0) 78%);
  border-left: 3px solid var(--gold-dim);
}

.battle-pass-section-head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-display);
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}

.battle-pass-section-icon {
  display: inline-flex;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
}

.battle-pass-hint,
.battle-pass-quests-cap {
  margin: 0;
  color: #a99b7a;
}

.battle-pass-claim-btn {
  padding: 6px 12px;
  background: linear-gradient(180deg, #e0b84a 0%, #b8860b 55%, #7a5a14 100%);
  border: 1px solid var(--gold-dim);
  color: #22160a;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.battle-pass-claim-btn:not(:disabled):hover {
  background: linear-gradient(180deg, #f5cf6a 0%, #c9971c 55%, #8a6618 100%);
}

.battle-pass-claim-btn.is-ready {
  animation: bp-pulse 1.8s ease-in-out infinite;
}

.battle-pass-claim-btn:disabled {
  background: linear-gradient(180deg, #6b5a3a 0%, #4a3c26 100%);
  color: #b8a988;
  opacity: 0.75;
  cursor: default;
  animation: none;
}

.battle-pass-quests,
.battle-pass-rewards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.battle-pass-quest {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(46, 34, 24, 0.92) 0%, rgba(24, 17, 12, 0.96) 100%);
  border: 1px solid #5a4020;
  border-left: 3px solid #6b4a28;
}

.battle-pass-quest.is-ready {
  border-color: var(--gold-dim);
  border-left-color: var(--gold-bright);
  box-shadow: 0 0 10px rgba(240, 192, 64, 0.22), inset 0 0 18px rgba(240, 192, 64, 0.08);
}

.battle-pass-quest-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #1a120c;
  border: 1px solid #5a4020;
}

.battle-pass-quest-icon svg {
  image-rendering: pixelated;
}

.battle-pass-quest-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.battle-pass-quest-title {
  color: #f0e4c8;
}

.battle-pass-quest-bar {
  height: 8px;
  background: #120d1f;
  border: 1px solid #4a3a5a;
  overflow: hidden;
}

.battle-pass-quest-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #4f9e5c 0%, #9ede8a 100%);
  transition: width 0.25s ease-out;
}

.battle-pass-quest.is-ready .battle-pass-quest-bar-fill {
  background: linear-gradient(90deg, #c9971c 0%, #ffe07a 100%);
}

.battle-pass-quest-progress {
  color: #a99b7a;
  font-variant-numeric: tabular-nums;
}

.battle-pass-quest-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.battle-pass-quest-reward {
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.battle-pass-quest-btn {
  padding: 4px 10px;
  background: linear-gradient(180deg, #e0b84a 0%, #b8860b 60%, #7a5a14 100%);
  border: 1px solid var(--gold-dim);
  color: #22160a;
  cursor: pointer;
}

.battle-pass-quest-btn:not(:disabled) {
  animation: bp-pulse 1.8s ease-in-out infinite;
}

.battle-pass-quest-btn:not(:disabled):hover {
  background: linear-gradient(180deg, #f5cf6a 0%, #c9971c 60%, #8a6618 100%);
}

.battle-pass-quest-btn:disabled {
  background: linear-gradient(180deg, #4a3c26 0%, #33291a 100%);
  color: #8f846c;
  opacity: 0.8;
  cursor: default;
  animation: none;
}

.battle-pass-reward-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 12px;
  background: linear-gradient(180deg, rgba(40, 30, 22, 0.9) 0%, rgba(22, 16, 12, 0.96) 100%);
  border: 1px solid #4a3a2a;
}

.battle-pass-reward-row::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: 60%;
  transform: translateY(-50%);
  background: #6b4a28;
}

.battle-pass-reward-row.is-pending {
  border-color: var(--gold-dim);
  background: linear-gradient(180deg, rgba(78, 54, 22, 0.92) 0%, rgba(32, 22, 12, 0.96) 100%);
  box-shadow: 0 0 10px rgba(240, 192, 64, 0.2), inset 0 0 16px rgba(240, 192, 64, 0.08);
}

.battle-pass-reward-row.is-pending::before { background: var(--gold-bright); }
.battle-pass-reward-row.is-locked { opacity: 0.72; }

.battle-pass-reward-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 30px;
  background: linear-gradient(180deg, #2a1a0c 0%, #1a120c 100%);
  border: 1px solid #8a6a28;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 #0b0814;
  white-space: nowrap;
}

.battle-pass-reward-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.battle-pass-reward-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 2px;
  background: rgba(12, 9, 22, 0.55);
  border: 1px solid #4a3a5a;
  color: #e0d6bd;
}

.battle-pass-reward-item img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  background: #14101f;
  border-right: 1px solid #4a3a5a;
  padding: 1px;
  box-sizing: border-box;
}

.battle-pass-reward-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #14101f;
  border-right: 1px solid #4a3a5a;
  image-rendering: pixelated;
}

.battle-pass-reward-item.is-random {
  border-color: #6b5ac0;
  background: rgba(28, 22, 48, 0.75);
}

.battle-pass-reward-item-filter {
  color: #a99b7a;
}

.battle-pass-reward-gold {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  background: rgba(12, 9, 22, 0.55);
  border: 1px solid #6e5424;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.battle-pass-reward-state {
  padding: 2px 6px;
  border: 1px solid #4a3a5a;
  color: #a99b7a;
  white-space: nowrap;
}

.battle-pass-reward-row.is-pending .battle-pass-reward-state {
  border-color: var(--gold-dim);
  color: var(--gold-bright);
}

.battle-pass-veteran {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  padding: 10px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(107, 90, 192, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(34, 26, 66, 0.95) 0%, rgba(18, 14, 34, 0.98) 100%);
  border: 1px solid #6b5ac0;
  box-shadow: inset 0 0 18px rgba(107, 90, 192, 0.18);
}

.battle-pass-veteran-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: #14101f;
  border: 1px solid #6b5ac0;
}

.battle-pass-veteran-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.battle-pass-veteran-title {
  color: #cfc4ff;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.battle-pass-veteran-hint {
  margin: 0;
  color: #a99b7a;
}

.battle-pass-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed #4a3a5a;
  color: #a99b7a;
  text-align: center;
}

.battle-pass-status {
  margin: 0;
  padding: 6px 8px;
  border-left: 3px solid #4a3a5a;
  background: rgba(12, 9, 22, 0.5);
  color: #a99b7a;
}

.battle-pass-status:empty { display: none; }
.battle-pass-status.is-error { border-left-color: #c05a4a; color: #ef9a9a; }
.battle-pass-status.is-success { border-left-color: #4f9e5c; color: #9ede8a; }

.pt-bonus-num {
  color: var(--gold-bright);
}

@keyframes bp-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(240, 192, 64, 0); }
  50% { box-shadow: 0 0 10px rgba(240, 192, 64, 0.55); }
}

.admin-bp-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-bp-reward-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-bp-reward-row select { flex: 1; }

.admin-bp-reward-row .bp-item-type { flex: 0 0 150px; }
.admin-bp-reward-row .bp-item-template { flex: 1 1 160px; }
.admin-bp-reward-row .bp-item-qty { flex: 0 0 62px; }
.admin-bp-reward-row .bp-item-range {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.admin-bp-reward-row .bp-item-range input { width: 62px; }
.admin-bp-reward-row .bp-item-range-sep { color: var(--text-muted); }
.admin-bp-reward-row .bp-item-class,
.admin-bp-reward-row .bp-item-tier,
.admin-bp-reward-row .bp-item-slot,
.admin-bp-reward-row .bp-item-tree { flex: 0 0 150px; }

/* Widoczność pól zależy od wybranego typu nagrody (panel pokazuje tylko to, co potrzebne). */
.admin-bp-reward-row .bp-item-qty,
.admin-bp-reward-row .bp-item-range,
.admin-bp-reward-row .bp-item-class,
.admin-bp-reward-row .bp-item-tier,
.admin-bp-reward-row .bp-item-slot,
.admin-bp-reward-row .bp-item-tree { display: none; }

.admin-bp-reward-row.bp-type-item .bp-item-qty { display: inline-block; }
.admin-bp-reward-row.bp-type-randomItem .bp-item-range,
.admin-bp-reward-row.bp-type-randomMythic .bp-item-range,
.admin-bp-reward-row.bp-type-randomCard .bp-item-range { display: inline-flex; }
.admin-bp-reward-row.bp-type-passivePoint .bp-item-range { display: inline-flex; }
.admin-bp-reward-row.bp-type-randomMythic .bp-item-class,
.admin-bp-reward-row.bp-type-randomCard .bp-item-tier,
.admin-bp-reward-row.bp-type-randomCard .bp-item-slot,
.admin-bp-reward-row.bp-type-passivePoint .bp-item-tree { display: inline-block; }
.admin-bp-reward-row.bp-type-randomMythic .bp-item-template,
.admin-bp-reward-row.bp-type-randomCard .bp-item-template,
.admin-bp-reward-row.bp-type-passivePoint .bp-item-template { display: none; }

#identifier-stat-panel { z-index: 18; background: var(--bg-panel, #17191f); border: 1px solid var(--border-color, #66543b); }
.tt-stat-sealed { opacity: 0.65; }

/* Achievement milestones share the game's fantasy window and item chrome. */
.achievements-panel {
  position: absolute; box-sizing: border-box; z-index: 22;
  font-family: var(--font-ui, sans-serif); padding: 0;
  width: 660px; max-width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1) - 24px);
  height: auto; max-height: calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1) - 32px);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel-bg); border: 2px solid var(--gold-dim);
  border-radius: 0; box-shadow: var(--pixel-frame); color: var(--text);
}
.achievements-panel.hidden { display: none; }
.achievements-header { flex-shrink: 0; margin: 0; font-size: 15px; }
.achievements-body { padding: 18px; overflow-y: auto; min-height: 0; }
.achievements-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--slot-border); }
.achievements-trophy { display: grid; place-items: center; width: 76px; height: 76px; flex-shrink: 0; background: radial-gradient(ellipse, #c9a22718, transparent 70%); }
.achievements-trophy svg, .achievement-icon svg { display: block; width: 100%; height: 100%; }
.achievements-hero h2 { margin: 0 0 7px; font-family: var(--font-display); font-size: 20px; color: var(--parchment); }
.achievements-hero p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.achievements-summary { font-size: 12px; padding: 10px 14px; background: var(--panel-inner); border: 1px solid var(--slot-border); color: var(--gold-bright); margin-bottom: 14px; box-shadow: inset 0 1px 4px #0004; }
.achievements-list { display: grid; gap: 10px; }
.achievement-card { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--premium-card-border, var(--slot-border)); background: var(--premium-card-bg, var(--panel-inner)); box-shadow: inset 0 1px 0 #ffffff08, 0 2px 4px #0003; }
.achievement-card.is-ready { border-color: var(--gold-dim); box-shadow: inset 0 0 18px #c9a2270c, 0 0 0 1px #c9a22712; }
.achievement-card.is-claimed { border-color: #4a6334; }
.achievement-icon { display: grid; place-items: center; width: 68px; height: 68px; background: radial-gradient(ellipse, #a0784818, transparent 75%), var(--slot-bg); border: 1px solid var(--slot-border); box-shadow: inset 0 0 12px #0008, 0 1px 0 #ffffff08; }
.reward-mythic .achievement-icon { border-color: #89466c; background: radial-gradient(ellipse, #88255520, transparent 75%), var(--slot-bg); }
.reward-reroll .achievement-icon { border-color: #6d4a85; }
.reward-passive .achievement-icon { border-color: #497063; }
.achievement-name { margin: 0 0 6px; color: var(--parchment); font-size: 14px; }
.achievement-reward { margin: 0 0 10px; color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.achievement-progress { height: 5px; overflow: hidden; background: var(--wood-dark); border: 1px solid #0006; }
.achievement-progress-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }
.is-claimed .achievement-progress-fill { background: linear-gradient(90deg, var(--success), var(--success-soft)); }
.achievement-progress-label { display: block; margin-top: 5px; font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.achievement-action { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.achievement-state { font-size: 10px; color: var(--text-muted); }
.is-ready .achievement-state { color: var(--gold-bright); }
.is-claimed .achievement-state { color: var(--success-soft); }
.achievement-claim { padding: 8px 12px; font-family: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, var(--wood-light), var(--wood)); box-shadow: var(--btn-bevel); color: var(--parchment); cursor: pointer; }
.achievement-claim:hover:not(:disabled) { background: linear-gradient(180deg, var(--wood-highlight), var(--wood-mid)); border-color: var(--gold-bright); }
.achievement-claim:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.achievement-claim:disabled { background: var(--wood-dark); border-color: var(--slot-border); box-shadow: none; color: var(--text-muted); cursor: default; }
.achievements-status { min-height: 18px; margin: 14px 0 0; font-size: 12px; color: var(--success-soft); line-height: 1.5; }
.achievements-status.is-error { color: var(--danger-soft); }
@media (max-width: 600px) {
  .achievements-body { padding: 12px; }
  .achievement-card { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .achievement-icon { width: 58px; height: 58px; }
  .achievement-action { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}
/* Centralny edytor przedmiotów admina; formularz zachowuje istniejące kontrolki. */
.admin-item-edit-dialog {
  width: min(1000px, 90vw);
  max-height: 85vh;
  padding: 18px;
  border: 1px solid #716044;
  border-radius: 8px;
  background: #171b22;
  color: #eee;
  overflow: auto;
}
.admin-item-edit-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.admin-item-edit-columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 20px;
  margin-top: 12px;
}
.admin-item-edit-columns > .admin-sidebar { width: auto; max-height: none; overflow: visible; }
.admin-item-comparison { min-width: 0; overflow-wrap: anywhere; }
.admin-item-comparison select { width: 100%; margin: 8px 0 16px; }
#item-compare-preview > div { margin-bottom: 8px; }
@media (max-width: 700px) {
  .admin-item-edit-columns { grid-template-columns: minmax(0, 1fr); }
}
/* Map item window and event-driven progress HUD. */
#map-adventure-panel { position: absolute; left: calc((50 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1)); transform: translateX(-50%); top: calc((6 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1)); width: min(1040px, calc(((100 * var(--ui-vw, 1vw)) - 24px) / var(--ui-zoom, 1))); max-height: calc((88 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1)); overflow: auto; box-sizing: border-box; padding: 16px; background: linear-gradient(130deg, #211c15, #12110f); color: #e6d3a6; border: 1px solid #8a6b38; box-shadow: 0 18px 70px #000b, inset 0 0 0 3px #33291b; z-index: 140; }
#map-adventure-panel .window-header { display: flex; justify-content: space-between; cursor: move; }
.map-adventure-body { display: grid; grid-template-columns: 190px minmax(0, 1fr) 230px; gap: 16px; padding: 16px 0 4px; }
.map-workshop-options, .map-workshop-result { position: sticky; top: 0; min-width: 0; padding: 12px; background: #0d0c0a80; border: 1px solid #57442a; align-self: start; }
.map-workshop-map { min-width: 0; }
.map-workshop-options h3, .map-workshop-result h3, .map-workshop-map h3 { margin: 0 0 12px; color: #f4dfab; font-size: 15px; }
.map-workshop-option { display: flex; flex-direction: column; text-align: left; gap: 6px; width: 100%; margin: 8px 0; }
.map-workshop-option span { color: #b5a584; font-size: 11px; }
#map-adventure-panel .map-workshop-option.selected { background: #594225; border-color: #d9b56d; box-shadow: inset 3px 0 #d9b56d; }
.map-workshop-hero { display: flex; align-items: flex-start; gap: 14px; padding: 14px; background: #292217; border: 1px solid #685031; }
.map-workshop-hero > img { width: 65px; height: 65px; object-fit: contain; image-rendering: pixelated; }
.map-workshop-hero .tt-name { color: #f1d698; font-size: 18px; margin-bottom: 8px; }
.map-workshop-layout, .map-workshop-inhabitants, .map-workshop-loot { margin-top: 16px; }
#map-workshop-layout { display: block; width: 100%; height: auto; background: #100f0c; border: 1px solid #57442a; box-sizing: border-box; image-rendering: pixelated; }
.map-workshop-muted { color: #b4a68e; line-height: 1.5; }
.map-workshop-monster { display: flex; justify-content: space-between; gap: 8px; padding: 8px; border-bottom: 1px solid #423827; }
.map-workshop-monster h3 { font-size: 13px; margin: 0; }
.map-workshop-loot-row { margin: 6px 0; line-height: 1.4; }
.map-workshop-loot summary { cursor: pointer; color: #e1c486; margin-top: 12px; }
.map-workshop-cost { padding: 10px; border: 1px solid #6c5330; background: #332818; line-height: 1.6; }
.map-workshop-possibilities { max-height: 250px; overflow: auto; line-height: 1.4; }
#map-workshop-confirm, .map-workshop-open { width: 100%; margin-top: 12px; }
@media (max-width: 800px) { .map-adventure-body { grid-template-columns: 150px minmax(0, 1fr); } .map-workshop-result { grid-column: 1 / -1; } }
@media (max-width: 520px) { #map-adventure-panel { top: calc((3 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1)); max-height: calc((94 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1)); padding: 10px; } .map-adventure-body { display: flex; flex-direction: column; } .map-workshop-options, .map-workshop-result { position: static; box-sizing: border-box; width: 100%; } .map-workshop-options { order: 1; } .map-workshop-result { order: 2; } .map-workshop-map { order: 3; } .map-workshop-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .map-workshop-options h3 { grid-column: 1 / -1; } .map-workshop-option { margin: 0; } }
.map-adventure-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#map-adventure-panel button, #map-adventure-hud button { background: #35291b; color: #efdca7; border: 1px solid #80643d; padding: 6px 10px; cursor: pointer; }
#map-adventure-panel button:disabled { opacity: .4; cursor: default; }
#map-adventure-hud { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); padding: 8px; background: #171410e8; color: #e6d3a6; border: 1px solid #8a6b38; z-index: 80; }
#map-adventure-hud progress { width: 100%; accent-color: #c6a24f; }
.map-mod-positive { color: #9dcc9e; }
.map-mod-negative { color: #e19689; }
.map-admin-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.map-admin-tabs .active { border-color: #c6a24f; color: #f6dda0; }
.map-admin-body { overflow: auto; max-height: 65vh; padding: 8px; }
.map-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.map-admin-field { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; min-width: 0; }
.map-admin-field input, .map-admin-field select { max-width: 100%; min-width: 0; }
.map-admin-body fieldset { min-width: 0; margin: 10px 0; border: 1px solid #67583c; }
.map-admin-body button { margin: 4px; }
.map-admin-body canvas { display: block; width: 100%; max-width: 512px; image-rendering: pixelated; }
.map-admin-body table { width: 100%; border-collapse: collapse; }
.map-admin-body th, .map-admin-body td { padding: 6px; border-bottom: 1px solid #67583c; vertical-align: top; }
.map-admin-warning { display: block; color: #ffb85d; padding: 8px; border: 1px solid #be7d35; }
.map-admin-message { color: #e6d3a6; min-height: 1.4em; }
.map-admin-previews { display: flex; flex-wrap: wrap; gap: 12px; }
.map-admin-previews img { display: block; width: 65px; height: 65px; object-fit: contain; image-rendering: pixelated; }
.map-admin-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Maps admin: catalogue + grouped configuration editor. */
#admin-panel-map-adventures { color: #e7dcc6; }
.map-admin-header { padding: 18px; border: 1px solid #655132; background: linear-gradient(120deg, #30281d, #191812); border-radius: 8px; margin-bottom: 14px; }
.map-admin-title { font-size: 22px; color: #f3d69b; font-weight: bold; }
.map-admin-header p { color: #bfb29b; margin: 8px 0 14px; }
.map-admin-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.map-admin-summary span { background: #14130f; border: 1px solid #51442e; border-radius: 20px; padding: 6px 11px; font-size: 12px; }
#admin-panel-map-adventures button { border: 1px solid #665335; border-radius: 5px; padding: 8px 12px; color: #e6d3ac; background: #29251c; cursor: pointer; }
#admin-panel-map-adventures button:hover:not(:disabled) { background: #403322; border-color: #bd9859; }
#admin-panel-map-adventures button:disabled { opacity: .45; cursor: default; }
#admin-panel-map-adventures :is(button, input, select):focus-visible { outline: 2px solid #dfbd75; outline-offset: 2px; }
.map-admin-tabs { gap: 6px; padding-bottom: 10px; border-bottom: 1px solid #4d422e; }
#admin-panel-map-adventures .map-admin-tabs .active { background: #594329; color: #ffe3a6; border-color: #b88e4a; }
.map-admin-page-hint { background: #25291f; color: #c4ceb1; padding: 12px 16px; border-left: 3px solid #879866; border-radius: 4px; line-height: 1.5; margin: 0 0 16px; }
.map-admin-editor { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 18px; margin-bottom: 20px; }
.map-admin-entry-sidebar { position: sticky; top: 0; align-self: start; padding: 12px; background: #15140f; border: 1px solid #4c402c; border-radius: 6px; min-width: 0; }
.map-admin-entry-list { display: grid; gap: 6px; margin-top: 12px; max-height: 380px; overflow: auto; }
#admin-panel-map-adventures .map-admin-entry { text-align: left; margin: 0; display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.map-admin-entry small { color: #b2a48c; font-size: 11px; }
#admin-panel-map-adventures .map-admin-entry.active { background: #493824; border-color: #c49c5c; box-shadow: inset 3px 0 #d6b579; }
.map-admin-grid { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.map-admin-editor-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 4px 0 10px; border-bottom: 1px solid #51432b; }
.map-admin-editor-heading h3 { font-size: 18px; color: #efd29c; margin: 0; }
.map-admin-editor-heading span { color: #ad9f85; overflow-wrap: anywhere; }
.map-admin-editor-heading button { margin-left: auto; }
.map-admin-section { background: #1d1b16; border: 1px solid #50422c; border-radius: 6px; overflow: hidden; }
.map-admin-section > summary { padding: 13px 16px; background: #2b261c; color: #e6cc9c; font-weight: bold; font-size: 14px; cursor: pointer; }
.map-admin-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px 16px; padding: 16px; }
.map-admin-fields > fieldset { grid-column: 1 / -1; }
.map-admin-body fieldset { padding: 12px; border-radius: 5px; background: #15140f60; }
.map-admin-body legend { color: #d9bd88; padding: 0 6px; }
.map-admin-field { gap: 6px; margin: 3px 0; }
#admin-panel-map-adventures input, #admin-panel-map-adventures select { box-sizing: border-box; width: 100%; border: 1px solid #675237; border-radius: 4px; background: #0f100d; color: #e6dcc6; padding: 8px; }
#admin-panel-map-adventures textarea { box-sizing: border-box; width: 100%; min-height: 70px; resize: vertical; border: 1px solid #675237; border-radius: 4px; background: #0f100d; color: #e6dcc6; padding: 8px; font-family: inherit; }
.map-admin-reference-list > input { grid-column: 1 / -1; }
.map-admin-reference-list .map-admin-toggle[hidden] { display: none; }
.map-admin-toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; background: #2b281e; border-radius: 4px; }
#admin-panel-map-adventures input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: #c49c5c; }
.map-admin-hint { font-size: 11px; color: #aa9e88; line-height: 1.5; margin: 4px 0; }
.map-admin-reference-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 6px; max-height: 300px; overflow: auto; }
.map-admin-reference-list .map-admin-hint { grid-column: 1 / -1; }
.map-admin-editor-actions { position: sticky; bottom: 0; z-index: 2; background: #1c1a14f5; border: 1px solid #58452b; border-radius: 6px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; box-shadow: 0 -4px 12px #0005; }
#admin-panel-map-adventures .map-admin-save-entry { background: #5c4727; border-color: #b58c47; color: #ffdf9e; }
.map-admin-management { padding: 12px; border: 1px dashed #654832; border-radius: 5px; }
.map-admin-management summary { color: #bdab90; cursor: pointer; }
#admin-panel-map-adventures .map-admin-danger { border-color: #985446; color: #edb4a4; background: #42251e; }
.map-admin-message[data-state="dirty"] { color: #f1c67f; }
.map-admin-previews { padding: 16px; background: #161510; border: 1px solid #54452d; border-radius: 6px; }
@media (max-width: 760px) { .map-admin-editor { grid-template-columns: 1fr; } .map-admin-entry-sidebar { position: static; } .map-admin-entry-list { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); max-height: 180px; } .map-admin-header { padding: 12px; } }

/* Encounter HUD shares ui-root zoom; world effects remain Canvas-only. */
#boss-encounter-hud { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); width: min(340px, 70vw); padding: 8px 12px; background: rgba(18, 16, 22, .92); border: 1px solid var(--border-color, #786342); color: var(--text-color, #e6d9bc); display: grid; gap: 4px; text-align: center; pointer-events: none; z-index: 30; }
#boss-encounter-hud progress { width: 100%; height: 12px; accent-color: #b44632; }
#boss-encounter-hud strong { font-size: 14px; }
#boss-encounter-hud span { font-size: 12px; }
.boss-timer-icon { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.boss-timer-details { min-width: 0; overflow-wrap: anywhere; }

html[data-ui-mode="phone"] #ui-root #boss-timers-panel:not(.hidden) {
  width: min(360px, calc(92% / var(--ui-zoom, 1))) !important;
  max-width: calc(96% / var(--ui-zoom, 1)) !important;
  max-height: calc(78% / var(--ui-zoom, 1)) !important;
  z-index: 80 !important;
}

@media (max-width: 600px) {
  .boss-timer-row { flex-wrap: wrap; gap: 8px; }
  .boss-timer-details { flex: 1; min-width: 130px; }
}

/* Okna desktopowe nie mogą wychodzić poza viewport (np. 1024x640, skala UI > 100%): limit /--ui-zoom + przewijanie wewnątrz. Phone ma własne reguły. */
html:not([data-ui-mode="phone"]) :is(#auction-panel, #world-atlas-panel, #wiki-panel, #calendar-panel, #battle-pass-panel, #task-panel, #character-panel):not(.hidden) {
  max-width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1) - 16px) !important;
  max-height: calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1) - 16px) !important;
  overflow-y: auto;
}
/* Persistent restart warning; DOM overlay independent of Canvas rendering. */
#client-refresh-warning {
  position: fixed;
  zoom: var(--ui-zoom, 1);
  margin: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(85vw / var(--ui-zoom, 1));
  box-sizing: border-box;
  padding: 16px 22px;
  z-index: 2147483647;
  color: #ff6464;
  background: var(--wood-dark, #17100d);
  border: 2px solid #b53d3d;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-shadow: 1px 2px 2px #000;
  pointer-events: none;
}

/* ==========================================================================
   Questy wieloetapowe + „Pokaż drogę" + Auto Potion
   Style w tej samej palecie co task-card / hunt-analyzer (bez nowych motywów).
   ========================================================================== */

/* --- cele questa w oknie tasków --- */
.task-card-npc { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.task-objectives { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.task-obj {
  border: 1px solid var(--slot-border);
  background: rgba(0, 0, 0, 0.18);
  padding: 6px 8px;
}
.task-obj.state-done { border-color: var(--success, #81c784); opacity: 0.88; }
.task-obj.state-locked { opacity: 0.6; filter: grayscale(0.4); }
.task-obj-head { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.task-obj-title { font-size: 12px; font-weight: 700; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.task-obj-chip {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--slot-border);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.task-obj-chip.chip-done { color: var(--success-soft, #a5d6a7); border-color: var(--success, #81c784); }
.task-obj-chip.chip-active { color: var(--gold-bright); border-color: var(--gold-dim); }
.task-obj-chip.chip-preview { display: none; }
.task-obj-slot { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.task-obj-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  background-repeat: no-repeat;
  background-position: top left;
  image-rendering: pixelated;
  font-size: 14px;
  color: var(--text-muted);
}
.task-obj-icon.has-img { color: transparent; }
.task-obj-icon.is-item { background-position: center; }
.task-obj-slot-mid { flex: 1; min-width: 0; }
.task-obj-slot-name { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-obj-bar { height: 6px; background: var(--slot-bg); border: 1px solid var(--slot-border); margin-top: 3px; }
.task-obj-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }
.task-obj.state-done .task-obj-bar > i { background: var(--success, #81c784); }
.task-obj-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.task-obj-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.task-obj-actions button { flex: 1 1 110px; min-height: 30px; padding: 5px 8px; font-size: 12px; }
.task-obj-locked-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.task-obj-guide { margin-top: 6px; font-size: 11px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; }
.task-obj-guide.error, .task-obj-guide-warn { color: #ef9a9a; }
.task-obj-source-select { width: 100%; box-sizing: border-box; background: var(--slot-bg); color: var(--text); border: 1px solid var(--slot-border); padding: 4px 6px; font-size: 11px; min-height: 28px; }
.task-card-actions { flex-wrap: wrap; }
.task-pin-btn.active { border-color: var(--gold-bright); }

/* --- tracker pod minimapą --- */
.quest-tracker-head { display: flex; align-items: center; gap: 3px; }
.quest-tracker-head .quest-tracker-name { flex: 1; min-width: 0; }
.quest-tracker-icon-btn {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 1;
  font-size: 12px;
  color: var(--gold-bright);
  background: transparent;
  border: 1px solid var(--gold-dim);
  cursor: pointer;
}
.quest-tracker-icon-btn:hover { background: rgba(255, 213, 79, 0.12); }
.quest-tracker-item .task-obj-bar { margin-top: 2px; }
.quest-tracker-actions { margin-top: 3px; }
.quest-tracker-btn { width: 100%; min-height: 26px; padding: 3px 6px; font-size: 12px; }
.quest-tracker-objectives { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.quest-tracker-obj {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  padding: 2px 3px;
  cursor: pointer;
  border-left: 2px solid transparent;
  color: var(--text-dim);
}
.quest-tracker-obj.selected { border-left-color: var(--gold-bright); color: var(--text); }
.quest-tracker-obj.state-done { color: var(--success-soft, #a5d6a7); }
.quest-tracker-obj.state-locked { opacity: 0.55; }
.quest-tracker-obj-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest-tracker-obj-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.quest-tracker-showall { font-size: 11px; background: transparent; color: var(--text-muted); border: 1px dashed var(--gold-dim); padding: 3px 6px; cursor: pointer; }
html[data-ui-mode="phone"] #quest-tracker { max-height: min(170px, 26vh); }
html[data-ui-mode="phone"] .quest-tracker-icon-btn { width: 26px; height: 26px; }
html[data-ui-mode="phone"] .task-obj-actions button,
html[data-ui-mode="phone"] .quest-tracker-btn { min-height: 38px; }

/* --- okno Auto Potion --- */
.auto-potion-panel { width: 400px; max-width: min(96vw, 400px); max-height: min(80dvh, 620px); display: flex; flex-direction: column; }
.auto-potion-panel.hidden { display: none; }
.auto-potion-body { overflow-y: auto; flex: 1; min-height: 120px; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.auto-potion-master { display: flex; }
.auto-potion-switch {
  flex: 1;
  min-height: 34px;
  padding: 6px 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--slot-bg);
  border: 2px solid var(--slot-border);
  cursor: pointer;
}
.auto-potion-switch.on { color: #0b1a0b; background: var(--success, #81c784); border-color: var(--success, #81c784); }
.auto-potion-master .auto-potion-switch {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; font-size: 15px;
  color: #ffd7d7; background: rgba(183, 28, 28, 0.35); border: 2px solid #e53935;
  animation: auto-potion-master-pulse 1.6s ease-in-out infinite;
}
.auto-potion-master .auto-potion-switch::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  background: #e53935; box-shadow: 0 0 6px #e53935;
}
.auto-potion-master .auto-potion-switch.on {
  color: #0b1a0b; background: var(--success, #81c784); border-color: #c8e6c9; animation: none;
  box-shadow: 0 0 10px rgba(129, 199, 132, 0.55);
}
.auto-potion-master .auto-potion-switch.on::before { background: #0b1a0b; box-shadow: none; }
@keyframes auto-potion-master-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.55); }
  50% { box-shadow: 0 0 10px 3px rgba(229, 57, 53, 0.55); }
}
@media (prefers-reduced-motion: reduce) { .auto-potion-master .auto-potion-switch { animation: none; } }
.auto-potion-block { border: 1px solid var(--slot-border); background: rgba(0, 0, 0, 0.18); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.auto-potion-block h3 { margin: 0; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-bright); }
.auto-potion-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.auto-potion-block-head .auto-potion-switch { flex: 0 0 auto; min-height: 28px; padding: 3px 8px; font-size: 11px; }
.auto-potion-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.auto-potion-row > span:first-child { flex: 0 0 90px; }
.auto-potion-range { flex: 1; min-width: 0; min-height: 28px; accent-color: var(--gold-bright); }
.auto-potion-range-value { flex: 0 0 42px; text-align: right; font-weight: 700; color: var(--gold-bright); }
.auto-potion-select, .auto-potion-amount {
  width: 100%;
  box-sizing: border-box;
  min-height: 32px;
  background: var(--slot-bg);
  color: var(--text);
  border: 1px solid var(--slot-border);
  padding: 4px 6px;
  font-size: 12px;
}
.auto-potion-info { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-muted); }
.auto-potion-balance { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--text-dim); }
.auto-potion-balance-value { font-size: 18px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.auto-potion-presets { display: flex; gap: 6px; }
.auto-potion-presets button { flex: 1; min-height: 32px; font-size: 12px; }
.auto-potion-custom { display: flex; gap: 6px; }
.auto-potion-custom .auto-potion-amount { flex: 1; }
.auto-potion-custom button { flex: 0 0 auto; min-height: 32px; }
.auto-potion-note { margin: 0; font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.auto-potion-note.manual { color: var(--success-soft, #a5d6a7); }
.auto-potion-locked { text-align: center; padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-dim); font-size: 13px; }
.auto-potion-lock-icon { font-size: 28px; }
.auto-potion-status { min-height: 16px; font-size: 11px; padding: 4px 2px 0; color: var(--text-muted); }
.auto-potion-status.error { color: #ef9a9a; }
.auto-potion-status.ok { color: var(--success-soft, #a5d6a7); }
html[data-ui-mode="phone"] .auto-potion-panel:not(.hidden) {
  width: min(94vw, 400px) !important;
  max-height: min(84dvh, 84vh) !important;
}
html[data-ui-mode="phone"] .auto-potion-switch,
html[data-ui-mode="phone"] .auto-potion-presets button,
html[data-ui-mode="phone"] .auto-potion-custom button,
html[data-ui-mode="phone"] .auto-potion-select,
html[data-ui-mode="phone"] .auto-potion-amount { min-height: 42px; }

/* --- admin: edytor questów wieloetapowych --- */
.aq-editor { display: flex; flex-direction: column; gap: 8px; }
.aq-top, .aq-add, .aq-tools { display: flex; flex-direction: column; gap: 6px; }
.aq-add { flex-direction: row; }
.aq-tools { flex-direction: row; flex-wrap: wrap; }
.aq-card { border: 1px solid var(--slot-border); background: rgba(0, 0, 0, 0.2); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.aq-card-head { display: flex; align-items: center; gap: 6px; }
.aq-card-head strong { flex: 1; font-size: 12px; color: var(--gold-bright); }
.aq-id { font-size: 10px; color: var(--text-muted); font-family: monospace; }
.aq-select, .aq-text, .aq-pick, .aq-number { width: 100%; box-sizing: border-box; background: var(--slot-bg); color: var(--text); border: 1px solid var(--slot-border); padding: 4px 6px; font-size: 12px; }
.aq-number { width: 90px; flex: 0 0 90px; }
.aq-pick.aq-invalid { border-color: #ef5350; }
.aq-target { display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--gold-dim); padding-left: 6px; }
.aq-target-row { display: flex; align-items: center; gap: 6px; }
.aq-label { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); }
.aq-btn { background: var(--panel-inner); color: var(--text); border: 1px solid var(--slot-border); padding: 4px 8px; font-size: 12px; cursor: pointer; }
.aq-btn:hover { border-color: var(--gold-bright); }
.aq-btn.primary { border-color: var(--gold-dim); color: var(--gold-bright); }
.aq-btn.aq-del { color: #ef9a9a; }
.aq-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--text-dim); }
.aq-check { font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; }
.aq-source { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: rgba(0, 0, 0, 0.18); }
.aq-hint, .aq-loot-info { font-size: 11px; color: var(--text-muted); }
.aq-warn { color: #ffcc80; font-size: 12px; }
.aq-error { color: #ef9a9a; font-size: 12px; }
.aq-ok { color: #a5d6a7; font-size: 12px; }
.aq-messages { display: flex; flex-direction: column; gap: 3px; }
.aq-analysis { font-size: 11px; color: var(--text-dim); border-top: 1px dashed var(--slot-border); padding-top: 4px; }
.aq-preview { border: 1px dashed var(--gold-dim); padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.aq-preview-row { font-size: 12px; color: var(--text); }

html[data-ui-mode="phone"] .ember-amount-btn,
html[data-ui-mode="phone"] .ember-amount-input,
html[data-ui-mode="phone"] .ember-convert-btn {
  min-height: 44px;
}

/* ==========================================================================
   Mobilny HUD 2.0: własne przyciski (custom hotkeye), edytor układu, minimapa/czat zwijane
   ========================================================================== */
.mobile-hud-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 41;
}
html:not([data-ui-mode="phone"]) .mobile-hud-layer,
html:not([data-ui-mode="phone"]) .mobile-hud-edit {
  display: none !important;
}
.mobile-hud-probe {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.mobile-hud-btn {
  position: absolute;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--gold-bright);
  background: rgba(30, 24, 16, 0.88);
  color: var(--text);
  box-shadow: var(--pixel-frame);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  cursor: pointer;
}
.mobile-hud-btn.is-pressed {
  transform: scale(0.92);
  filter: brightness(1.35);
}
.mobile-hud-btn.is-empty {
  border-style: dashed;
  border-color: var(--gold-dim);
}
.mobile-hud-btn.is-unavailable {
  border-color: #6b3b3b;
}
.mobile-hud-btn.is-unavailable .mobile-hud-btn-icon {
  filter: grayscale(1) brightness(0.55);
}
.mobile-hud-btn-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mobile-hud-btn-icon .hotbar-item,
.mobile-hud-btn-icon .item-sprite-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mobile-hud-btn-icon img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  image-rendering: pixelated;
}
.mobile-hud-btn-icon .item-qty,
.mobile-hud-btn-icon .item-upgrade {
  display: none;
}
.mobile-hud-btn-plus,
.mobile-hud-btn-atk {
  font-weight: 700;
  font-size: 1.6em;
  color: var(--gold-bright);
}
.mobile-hud-btn-atk { font-size: 1em; color: #ff8a8a; }
.mobile-hud-btn-qty {
  position: absolute;
  right: 12%;
  bottom: 6%;
  min-width: 1.2em;
  padding: 0 3px;
  font-size: 0.85em;
  font-weight: 700;
  text-align: right;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  pointer-events: none;
}
.mobile-hud-btn-qty.hidden { display: none; }
.mobile-hud-btn-cd {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.58);
  font-weight: 700;
  font-size: 1.05em;
  color: #fff;
  pointer-events: none;
}
.mobile-hud-btn.is-cooling .mobile-hud-btn-cd { display: flex; }

/* Elementy wbudowane przesunięte w edytorze: pozycja inline (left/top) + skala. */
#mobile-ui .mobile-hud-placed {
  right: auto;
  bottom: auto;
}
.mobile-hud-hidden { display: none !important; }
#mobile-ui .mobile-minimap-btn { pointer-events: auto; }

/* Przycisk minimapy: minimapa jest nakładką, nie zmienia obszaru gry. */
.mobile-minimap-btn {
  position: absolute;
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: calc(6px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--gold-dim);
  background: rgba(20, 16, 10, 0.78);
  box-shadow: var(--pixel-frame);
  touch-action: manipulation;
  z-index: 43;
  cursor: pointer;
}
.mobile-minimap-btn.is-active { border-color: var(--gold-bright); }
html.minimap-hidden .mobile-minimap-btn { display: none; }
html[data-ui-mode="phone"] #minimap-wrap,
html[data-ui-mode="phone"][data-orientation="landscape"] #minimap-wrap {
  top: calc(56px + env(safe-area-inset-top, 0px));
  transform: scale(0.72);
}
html[data-ui-mode="phone"].mobile-minimap-collapsed #minimap-card { display: none; }

/* Czat: przycisk zwijania w nagłówku (telefon). */
.chat-collapse-btn { display: none; }
html[data-ui-mode="phone"] .chat-collapse-btn {
  display: inline-flex;
  margin-left: auto;
}
html[data-ui-mode="phone"].mobile-chat-hidden:not(.mobile-chat-expanded) #chat-box {
  display: none !important;
}

/* Tryb edycji: nakładka blokuje gameplay, cele dotyku obejmują edytowane elementy. */
.mobile-hud-edit {
  position: absolute;
  inset: 0;
  z-index: 70;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.mobile-hud-edit.hidden { display: none !important; }
.mobile-hud-edit-blocker {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 3, 0.35);
}
.mobile-hud-edit.is-placing .mobile-hud-edit-blocker {
  background: rgba(60, 48, 10, 0.4);
  cursor: crosshair;
}
html.mobile-hud-editing #mobile-ui *,
html.mobile-hud-editing .mobile-hud-btn { pointer-events: none !important; }
html.mobile-hud-editing #mobile-stick.mobile-hud-hidden,
html.mobile-hud-editing #mobile-skill-pad.mobile-hud-hidden { display: block !important; opacity: 0.3 !important; }
html.mobile-hud-editing #mobile-hotbar.mobile-hud-hidden { display: flex !important; opacity: 0.3 !important; }
.mobile-hud-target {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--gold-bright);
  background: rgba(212, 175, 55, 0.08);
  touch-action: none;
  cursor: grab;
  min-width: 28px;
  min-height: 28px;
}
.mobile-hud-target.kind-custom { border-radius: 50%; }
.mobile-hud-target.is-selected {
  border-style: solid;
  background: rgba(212, 175, 55, 0.2);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}
.mobile-hud-target-label {
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  max-width: 100%;
  padding: 1px 4px;
  font-size: 10px;
  white-space: nowrap;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
.mobile-hud-toolbar,
.mobile-hud-inspector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(96%, 560px);
  box-sizing: border-box;
  padding: 6px 8px;
  background: rgba(20, 16, 10, 0.94);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
  z-index: 2;
}
.mobile-hud-toolbar { top: calc(4px + env(safe-area-inset-top, 0px)); }
.mobile-hud-inspector {
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.mobile-hud-edit.toolbar-bottom .mobile-hud-toolbar {
  top: auto;
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}
.mobile-hud-edit.toolbar-bottom .mobile-hud-inspector {
  bottom: auto;
  top: calc(4px + env(safe-area-inset-top, 0px));
}
.mobile-hud-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mobile-hud-toolbar-row button,
.mobile-hud-inspector button {
  min-height: 36px;
  padding: 4px 10px;
  font-size: 12px;
}
.mobile-hud-toolbar-row button.is-active { border-color: var(--gold-bright); color: var(--gold-bright); }
.mobile-hud-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-dim, #c9b98a);
}
.mobile-hud-inspector.hidden { display: none; }
.mobile-hud-inspector-title {
  width: 100%;
  font-weight: 700;
  font-size: 12px;
  color: var(--gold-bright);
}
.mobile-hud-slider {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 0;
  font-size: 12px;
}
.mobile-hud-slider input[type="range"] {
  flex: 1;
  min-width: 80px;
  height: 28px;
}
.mobile-hud-slider-value { min-width: 3.2em; text-align: right; }
.mobile-hud-action-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-hud-confirm {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.mobile-hud-confirm-card {
  width: min(88vw, 340px);
  padding: 14px;
  background: var(--panel-bg);
  border: 2px solid var(--gold-dim);
  box-shadow: var(--pixel-frame);
}
.mobile-hud-confirm-text { margin: 0 0 12px; font-size: 13px; }
.mobile-hud-confirm-row { display: flex; gap: 8px; justify-content: flex-end; }

/* ===== Twitch LIVE: przycisk, menu i okno odtwarzacza ===== */
.twitch-live-btn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 13;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 10px;
  background: linear-gradient(180deg, #7b4fd6 0%, #4d2b94 100%);
  border: 2px solid #b79cff;
  box-shadow: var(--pixel-frame);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-shadow: 1px 1px 0 #2a1658;
  cursor: pointer;
}
.twitch-live-btn:hover,
.twitch-live-btn:focus-visible { filter: brightness(1.15); }
.twitch-live-btn.hidden,
.twitch-live-menu.hidden,
.twitch-live-window.hidden { display: none; }
.twitch-live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 6px #ff3b3b;
  animation: twitch-live-pulse 1.8s ease-in-out infinite;
}
@keyframes twitch-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .twitch-live-dot { animation: none; }
}
.twitch-live-menu {
  position: absolute;
  left: 10px;
  top: calc(50% + 26px);
  z-index: 14;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  padding: 8px 28px 8px 8px;
  background: var(--panel-bg);
  border: 2px solid #b79cff;
  box-shadow: var(--pixel-frame);
}
.twitch-live-menu-item {
  padding: 7px 10px;
  background: linear-gradient(180deg, #6a41bd 0%, #45288a 100%);
  border: 1px solid #b79cff;
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.twitch-live-menu-item:hover,
.twitch-live-menu-item:focus-visible { filter: brightness(1.2); }
.twitch-live-menu-close {
  position: absolute;
  top: 2px;
  right: 4px;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}
.twitch-live-window.enhance-panel {
  position: absolute;
  z-index: 40;
  width: min(572px, calc(100vw - 4px));
  max-width: none;
  padding: 0 !important; /* premium-ui.css ustawia .enhance-panel { padding: 0 12px 12px !important } */
  display: flex;
  flex-direction: column;
}
.twitch-live-window .panel-header { margin: 0 !important; }
.twitch-live-window .twitch-live-title { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; }
.twitch-live-window.is-dragging iframe { pointer-events: none; }
.twitch-live-body {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 300px;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.twitch-live-frame {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  display: block;
}
.twitch-live-fallback-text { margin: 0; padding: 0 12px; text-align: center; color: var(--text); }
.twitch-live-fallback-link { color: #b79cff; font-family: var(--font-display); }
html[data-ui-mode="phone"] .twitch-live-btn {
  left: 6px;
  min-height: 36px;
  font-size: 13px;
}
html[data-ui-mode="phone"] .twitch-live-menu { left: 6px; z-index: 46; } /* nad przyciskami akcji telefonu (41), żeby ✕ menu było dotykalne (jak #server-lag-alert) */
/* Telefon: reguły ogólne okien ograniczają szerokość do 360 px, a Twitch wymaga min. 400×300 — okno rośnie do prawie pełnej szerokości.
   Granice = pole clampu WindowDrag (viewport / --ui-zoom minus 8 px marginesu z każdej strony), tak jak inne okna (np. max-width … - 16px):
   szerokość 99 vw nie mieściła się w tym polu (przy skali 0,7 na 390 px prawy brzeg i ✕ wychodziły ok. 2 px poza ekran). */
html[data-ui-mode="phone"] #ui-root #twitch-live-window#twitch-live-window:not(.hidden):not(#calendar-panel) {
  width: calc(min((100 * var(--ui-vw, 1vw)) - 16px * var(--ui-zoom, 1), 572px) / var(--ui-zoom, 1)) !important;
  max-width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1) - 16px) !important;
  max-height: calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1) - 16px) !important;
  overflow: hidden;
}

/* Ograniczenia poziomowe nagród (panel admina) */
.admin-lrl { display: flex; flex-direction: column; gap: 10px; }
.admin-lrl-card { border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.admin-lrl-card.is-off { opacity: 0.6; }
.admin-lrl-card h4 { margin: 0; font-size: 14px; }
.admin-lrl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.admin-lrl-row input[type="number"], .admin-lrl-row select { width: 110px; max-width: 100%; }
.admin-lrl-state { font-weight: bold; }
.admin-lrl-preview { font-size: 12px; opacity: 0.9; }
.admin-lrl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) {
  .admin-lrl-row { flex-direction: column; align-items: stretch; }
  .admin-lrl-row input[type="number"], .admin-lrl-row select { width: 100%; }
}

/* --------------------------------------------------------------------------
   Loot Bag (5000 slotów) — okno przyklejane do ekwipunku, siatka 5x10 jak EQ
   -------------------------------------------------------------------------- */
#loot-bag-panel {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  max-width: calc((100 * var(--ui-vw, 1vw)) / var(--ui-zoom, 1) - 16px) !important;
  max-height: calc((100 * var(--ui-vh, 1vh)) / var(--ui-zoom, 1) - 24px) !important;
  overflow: auto;
  padding: 0 10px 10px;
  z-index: 15;
}
#loot-bag-panel.hidden { display: none; }
#loot-bag-panel .panel-header { margin: 0 -10px 0; gap: 8px; }
#loot-bag-panel.drag-over { outline: 2px dashed var(--gold-bright); outline-offset: -4px; }
.loot-bag-counter {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}
.loot-bag-counter.full { color: #ef7777; }
.loot-bag-bar { height: 4px; margin: 6px 0; background: #120d09; border: 1px solid var(--wood-dark); }
.loot-bag-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--wood-mid), var(--gold-bright)); transition: width 0.25s; }
.loot-bag-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.loot-bag-search { flex: 1 1 140px; min-width: 0; }
.loot-bag-rarity, .loot-bag-sort-mode { flex: 0 0 auto; font-size: 12px; max-width: 120px; }
.loot-bag-sort-btn, .loot-bag-lock-btn { padding: 3px 8px; font-size: 12px; }
.loot-bag-lock-btn.active { background: var(--gold-bright); color: #1a1410; }
.loot-bag-value { margin-left: auto; font-size: 12px; color: var(--gold-bright); white-space: nowrap; }
.loot-bag-grid { margin-inline: auto; }
.loot-bag-slot.sell-locked::after {
  content: '🔒';
  position: absolute;
  top: -3px;
  right: -2px;
  font-size: 10px;
  pointer-events: none;
}
.loot-bag-pager-row { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.loot-bag-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px; }
.loot-bag-page-btn {
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  color: var(--text);
  background: #1a1410;
  border: 1px solid var(--wood-mid);
  cursor: pointer;
}
.loot-bag-page-btn:hover:not(:disabled) { border-color: var(--gold-bright); }
.loot-bag-page-btn.active { background: var(--wood-mid); color: var(--gold-bright); border-color: var(--gold-bright); }
.loot-bag-page-btn:disabled { opacity: 0.4; cursor: default; }
.loot-bag-page-gap { color: var(--text-muted); padding: 0 2px; }
.loot-bag-page-jump { width: 56px; height: 24px; font-size: 12px; box-sizing: border-box; }
.loot-bag-page-info { font-size: 12px; color: var(--text-muted); }
.loot-bag-hint { font-size: 11px; margin: 6px 0 0; }
.loot-bag-phone-tabs { display: none; gap: 4px; margin: 6px 0; }
.loot-bag-phone-tab {
  flex: 1;
  padding: 8px 6px;
  font-family: var(--font-display);
  color: var(--text-muted);
  background: #1a1410;
  border: 2px solid var(--wood-mid);
  cursor: pointer;
}
.loot-bag-phone-tab.active { color: var(--gold-bright); border-color: var(--gold-bright); }
.inventory-lootbag-btn {
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-family: var(--font-display);
  color: var(--gold-bright);
  background: #1a1410;
  border: 1px solid var(--wood-mid);
  cursor: pointer;
}
.inventory-lootbag-btn:hover, .inventory-lootbag-btn.active { border-color: var(--gold-bright); }
.loot-manager-dest-select { flex: 0 0 110px; max-width: 110px; }
.loot-manager-rarity-row { flex-wrap: wrap; }

/* Telefon: jedno okno na raz (zakładki EQ / Loot Bag), większe kratki pod palec, bez zasłaniania całej gry */
html[data-ui-mode="phone"] .loot-bag-phone-tabs { display: flex; }
html[data-ui-mode="phone"] .loot-bag-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  box-sizing: border-box;
}
html[data-ui-mode="phone"] .loot-bag-grid { grid-auto-rows: 42px; }
html[data-ui-mode="phone"] .loot-bag-grid .storage-slot { width: 100%; height: 42px; }
html[data-ui-mode="phone"] .loot-bag-page-btn { min-width: 34px; height: 34px; font-size: 14px; }
html[data-ui-mode="phone"] .loot-bag-page-jump { height: 34px; width: 64px; font-size: 14px; }
html[data-ui-mode="phone"] .loot-bag-hint { display: none; }