/* ==========================================================================
   Premium UI — dark fantasy chrome (nakładka na style.css)
   ========================================================================== */

:root {
  --premium-bg:
    radial-gradient(ellipse at 50% 0%, rgba(120, 78, 32, 0.42), transparent 52%),
    radial-gradient(ellipse at 85% 100%, rgba(40, 24, 12, 0.5), transparent 45%),
    linear-gradient(180deg, #3d2a18 0%, #24160c 100%);
  --premium-card-bg:
    linear-gradient(180deg, rgba(55, 38, 22, 0.95) 0%, rgba(28, 18, 10, 0.98) 100%);
  --premium-frame:
    0 0 0 2px #2a1a0c,
    0 0 0 5px #8a6a28,
    0 12px 36px rgba(0, 0, 0, 0.62),
    inset 0 0 56px rgba(0, 0, 0, 0.28);
  --premium-frame-soft:
    0 0 0 1px #2a1a0c,
    0 0 0 3px #6e5424,
    0 6px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 28px rgba(0, 0, 0, 0.22);
  --premium-card-border: #5a4020;
  --premium-input-bg: #1a120c;
  --premium-input-border: #6b4a28;
  --tt-stat: #8fd48f;
  --tt-stat-fixed: #f2e6c8;
  --tt-stat-upgrade: #e8c060;
  --tt-desc: #a89070;
  --tt-meta: #8a7050;
}

/* --------------------------------------------------------------------------
   Okna — premium shell (2px + miękki cień; bez 5px ringa rozsadzającego layout)
   -------------------------------------------------------------------------- */
.pixel-panel,
#inventory-panel,
#character-panel,
#shop-panel,
#storage-panel,
#loot-bag-panel,
#world-map-panel,
.auction-panel,
.task-panel,
.ranking-panel,
.world-atlas-panel,
.item-encyclopedia-panel,
.monster-encyclopedia-panel,
.changelog-panel,
.hunt-analyzer-panel,
.battle-pass-panel,
.settings-panel,
.enhance-panel,
.keybinds-panel,
.change-password-panel,
.auth-box,
#party-panel,
.trade-panel,
.trade-invite,
.party-invite,
.party-nick-dialog,
.player-inspect-panel,
.game-notice,
.admin-window,
#passive-tree-window:not(.passive-tree-panel) {
  background: var(--premium-bg) !important;
  border: 2px solid #6e5424 !important;
  outline: 1px solid rgba(201, 162, 39, 0.55);
  outline-offset: -3px;
  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;
  color: var(--text);
  /* NIE ustawiaj position — okna gry mają position:absolute w style.css;
     relative tu psuje drag i spycha panele w flow (postać na dole ekranu). */
  box-sizing: border-box;
}

/* HUD / chat / hotbar — lżejszy chrome */
#chat-box,
#hotbar,
#hud,
#target-frame {
  background: var(--premium-bg) !important;
  border: 2px solid #6e5424 !important;
  outline: 1px solid rgba(201, 162, 39, 0.45);
  outline-offset: -4px;
  box-shadow: var(--premium-frame-soft) !important;
  color: var(--text);
}

/* Minimapa — osobna karta (nie cały wrap z quest trackerem) */
#minimap-card {
  background: var(--premium-bg) !important;
  border: 2px solid #6e5424 !important;
  outline: 1px solid rgba(201, 162, 39, 0.45);
  outline-offset: -3px;
  box-shadow: var(--premium-frame-soft) !important;
  color: var(--text);
}
#minimap-header {
  background:
    linear-gradient(180deg, rgba(200, 150, 60, 0.18), transparent 70%),
    linear-gradient(180deg, var(--wood-mid) 0%, var(--wood) 100%) !important;
  border-bottom: 2px solid var(--gold-dim) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright) !important;
}
#minimap-zone {
  color: var(--gold-bright) !important;
}
#minimap-keyhint {
  color: rgba(232, 196, 120, 0.75) !important;
  border-color: rgba(138, 104, 16, 0.65) !important;
  background: rgba(12, 8, 4, 0.45) !important;
}
#minimap-viewport {
  border-color: #5a4020 !important;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(80, 56, 24, 0.35), transparent 65%),
    #0a0806 !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.65),
    inset 0 0 22px rgba(0, 0, 0, 0.5) !important;
}
#minimap-coords {
  background: rgba(12, 8, 4, 0.45) !important;
  border-color: rgba(106, 80, 40, 0.75) !important;
  color: #cbb896 !important;
}
#minimap-legend .mm-leg {
  color: #8a7050 !important;
}

#quest-tracker {
  background: rgba(18, 12, 8, 0.92) !important;
  border: 2px solid #6e5424 !important;
  outline: 1px solid rgba(201, 162, 39, 0.35);
  outline-offset: -3px;
  box-shadow: var(--premium-frame-soft) !important;
}

.panel-header,
.chat-box-header,
.admin-header {
  padding: 8px 10px !important;
  background:
    linear-gradient(180deg, rgba(200, 150, 60, 0.18), transparent 70%),
    linear-gradient(180deg, var(--wood-mid) 0%, var(--wood) 100%) !important;
  border-bottom: 2px solid var(--gold-dim) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright) !important;
  box-sizing: border-box;
}
#inventory-panel .panel-header,
#character-panel .panel-header,
#shop-panel .panel-header,
#storage-panel .panel-header,
#loot-bag-panel .panel-header,
#world-map-panel .panel-header,
.enhance-panel .panel-header,
.auction-panel .panel-header,
.task-panel .panel-header,
.ranking-panel .panel-header,
.settings-panel .panel-header,
.world-atlas-panel .panel-header,
.item-encyclopedia-panel .panel-header,
.monster-encyclopedia-panel .panel-header,
.changelog-panel .panel-header,
.hunt-analyzer-panel .panel-header,
.battle-pass-panel .panel-header,
.keybinds-panel .panel-header,
.change-password-panel .panel-header,
.trade-panel .panel-header,
.player-inspect-panel .panel-header,
#party-panel .panel-header {
  margin-left: -12px !important;
  margin-right: -12px !important;
  margin-top: -0px !important;
}

.panel-close-btn,
#admin-close-btn {
  width: 24px !important;
  height: 24px !important;
  background: var(--wood-dark) !important;
  border: 1px solid var(--gold-dim) !important;
  color: var(--parchment) !important;
}
.panel-close-btn:hover,
#admin-close-btn:hover {
  background: var(--danger) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Przyciski
   -------------------------------------------------------------------------- */
.primary-btn,
.auth-form button,
.shop-action-btn,
.shop-sell-all-btn,
.enhance-action-btn {
  background: linear-gradient(180deg, #8a6230 0%, #5a3d24 55%, #3d2817 100%) !important;
  border: 1px solid var(--gold) !important;
  color: var(--parchment) !important;
  letter-spacing: 0.04em;
}
.primary-btn:hover,
.auth-form button:hover,
.shop-action-btn:hover,
.shop-sell-all-btn:hover,
.enhance-action-btn:hover {
  background: linear-gradient(180deg, #b08040 0%, #7a5535 55%, #5a3d24 100%) !important;
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 10px rgba(240, 192, 64, 0.28);
}
.secondary-btn {
  background: rgba(20, 14, 8, 0.65) !important;
  border: 1px solid var(--premium-card-border) !important;
  color: var(--text-dim) !important;
}
.secondary-btn:hover {
  border-color: var(--gold) !important;
  color: var(--text) !important;
  background: rgba(60, 42, 22, 0.85) !important;
}

/* --------------------------------------------------------------------------
   Formularze
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
input[type="search"],
select,
textarea,
.auth-form input,
#chat-input,
.whisper-input,
.trade-gold-input,
.party-nick-input,
.shop-sell-name-filter,
.shop-sell-slot-filter,
.shop-buy-qty-input,
.settings-select,
.auction-filters input,
.auction-filters select,
.auction-sell-form input,
.auction-sell-form select,
.admin-sidebar input,
.admin-sidebar select,
.admin-sidebar textarea,
.admin-main input,
.admin-main select,
.admin-main textarea,
#task-admin-desc,
#admin-players-filter,
#admin-map-select,
#admin-tp-from-map,
#admin-tp-to-map,
.menu-icon-fields input[type="text"],
.menu-color-row input[type="text"] {
  background: var(--premium-input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--premium-input-border) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
  border-radius: 0 !important;
}
input:focus,
select:focus,
textarea:focus,
.auth-form input:focus,
#chat-input:focus,
.whisper-input:focus {
  border-color: var(--gold) !important;
  background: #22180e !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(212, 160, 23, 0.25) !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Tooltips
   -------------------------------------------------------------------------- */
#buff-tooltip,
#char-stat-tooltip,
#item-tooltip,
#item-tooltip-compare,
.upgrade-result-tooltip,
#death-echo-tooltip,
#passive-node-tooltip,
#hotbar-skill-tooltip {
  background:
    linear-gradient(180deg, rgba(48, 32, 18, 0.98), rgba(18, 12, 8, 0.99)) !important;
  border: 2px solid #8a6a28 !important;
  outline: 1px solid rgba(201, 162, 39, 0.35);
  outline-offset: -4px;
  box-shadow:
    0 0 0 1px #2a1a0c,
    0 10px 28px rgba(0, 0, 0, 0.7) !important;
  color: var(--text) !important;
}
#char-stat-tooltip .cst-name,
.buff-tip-name,
#passive-node-tooltip .ptt-name {
  color: var(--gold-bright) !important;
}
#item-tooltip .tt-desc,
#item-tooltip-compare .tt-desc,
.upgrade-result-tooltip .tt-desc {
  color: var(--tt-desc) !important;
}
#item-tooltip .tt-stat,
#item-tooltip-compare .tt-stat,
.upgrade-result-tooltip .tt-stat,
#item-tooltip .tt-stat-rolled,
#item-tooltip-compare .tt-stat-rolled,
.upgrade-result-tooltip .tt-stat-rolled {
  color: var(--tt-stat) !important;
}
#item-tooltip .tt-stat-fixed,
#item-tooltip-compare .tt-stat-fixed,
.upgrade-result-tooltip .tt-stat-fixed {
  color: var(--tt-stat-fixed) !important;
}
#item-tooltip .tt-stat-upgrade,
#item-tooltip-compare .tt-stat-upgrade,
.upgrade-result-tooltip .tt-stat-upgrade {
  color: var(--tt-stat-upgrade) !important;
}
#item-tooltip .tt-meta,
#item-tooltip-compare .tt-meta,
.upgrade-result-tooltip .tt-meta {
  color: var(--tt-meta) !important;
}
#item-tooltip .tt-auction,
#item-tooltip-compare .tt-auction {
  border-top-color: rgba(138, 104, 16, 0.45) !important;
  color: var(--gold-bright) !important;
}
#death-echo-tooltip {
  border-color: #6a7888 !important;
  color: #c8d0d8 !important;
}

/* --------------------------------------------------------------------------
   Chat
   -------------------------------------------------------------------------- */
#chat-box { padding: 0 10px 10px !important; }
.chat-box-header { margin: 0 -10px 8px !important; }
.chat-tab {
  background: rgba(20, 14, 8, 0.7) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--premium-card-border) !important;
}
.chat-tab:hover {
  color: var(--text) !important;
  background: rgba(60, 42, 22, 0.85) !important;
}
.chat-tab.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;
}
#chat-messages,
.chat-messages-panel,
.whisper-messages {
  background: rgba(12, 8, 5, 0.72) !important;
  color: var(--text) !important;
  border: 1px solid var(--premium-card-border) !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35) !important;
}

/* --------------------------------------------------------------------------
   Postać
   -------------------------------------------------------------------------- */
#character-panel { padding: 0 12px 12px !important; }
#inventory-equip-col,
#character-hero-stage,
#character-stats {
  border: 1px solid var(--premium-card-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 196, 120, 0.1),
    0 2px 0 rgba(0, 0, 0, 0.35) !important;
}
#inventory-equip-col,
#character-stats {
  background: var(--premium-card-bg) !important;
}
#inventory-equip-col {
  padding: 6px 6px 8px;
}
#character-hero-stage {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(90, 64, 32, 0.5), transparent 62%),
    var(--premium-card-bg) !important;
}
#character-stats {
  color: var(--text) !important;
  padding: 10px !important;
  gap: 10px !important;
}
.character-col-title {
  color: var(--gold-bright) !important;
  border-bottom-color: rgba(138, 104, 16, 0.5) !important;
}
#character-hero-nameplate {
  background:
    linear-gradient(180deg, rgba(200, 150, 60, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(55, 38, 22, 0.98), rgba(28, 18, 10, 0.99)) !important;
  border-color: #6e5424 !important;
}
.character-hero-badge {
  background: rgba(12, 8, 5, 0.72) !important;
  border-color: rgba(110, 84, 36, 0.65) !important;
}
.character-hero-badge span:last-child,
#character-hero-nameplate #char-stat-name {
  color: var(--gold-bright) !important;
}
.char-progress-head span:last-child { color: var(--text) !important; }
#character-stat-grid .char-stat-row {
  color: var(--text) !important;
  background: rgba(12, 8, 5, 0.55) !important;
  border: 1px solid rgba(90, 64, 32, 0.55) !important;
  padding: 4px 6px !important;
}
#character-stat-grid .char-stat-row span:first-child { color: var(--text-muted) !important; }
#character-stat-grid .char-stat-row span:last-child {
  color: var(--gold-bright) !important;
  font-weight: 700;
}
.char-stat-row {
  color: var(--text) !important;
  padding: 2px 0;
  border-bottom: 1px solid rgba(90, 64, 32, 0.35);
}
.char-stat-row span:first-child { color: var(--text-muted) !important; }
.char-stat-row span:last-child {
  color: var(--gold-bright) !important;
  font-weight: 700;
}
#character-stat-grid .char-stat-row {
  border-bottom: none !important;
}
.equip-slot-box {
  background:
    radial-gradient(circle at 40% 35%, #2a1c12, #120c08 75%) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45) !important;
}
.equip-slot-box:hover {
  border-color: var(--gold) !important;
}

/* --------------------------------------------------------------------------
   Target info
   -------------------------------------------------------------------------- */
.target-info-panel {
  background: var(--premium-card-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--premium-card-border) !important;
  box-shadow: inset 0 1px 0 rgba(232, 196, 120, 0.08) !important;
}
.target-info-row span:first-child { color: var(--text-muted) !important; }
.target-info-row span:last-child { color: var(--text) !important; }
.target-info-loading,
.target-info-empty { color: var(--text-muted) !important; }
.target-info-loot-title {
  color: var(--gold-bright) !important;
  border-top-color: rgba(138, 104, 16, 0.4) !important;
}

/* --------------------------------------------------------------------------
   Ekwipunek / magazyn / sklep
   -------------------------------------------------------------------------- */
#inventory-panel {
  padding: 0 12px 12px !important;
}
html:not([data-ui-mode="phone"]) #character-panel {
  padding: 0 12px 12px !important;
  overflow: hidden !important;
}
#storage-panel { padding: 0 12px 12px !important; overflow: auto !important; }
/* Sklep: listy muszą się scrollować przy długiej ofercie (nie overflow:hidden jak ekwipunek). */
#shop-panel { padding: 0 12px 12px !important; overflow: hidden !important; }
#inventory-grid {
  max-width: 100%;
  box-sizing: border-box;
}
.inv-slot,
.storage-grid .inv-slot,
.enhance-slot {
  background:
    radial-gradient(circle at 40% 35%, #2a1c12, #120c08 75%) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45) !important;
}
.inv-slot:hover,
.storage-grid .inv-slot:hover {
  border-color: var(--gold) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(212, 160, 23, 0.25) !important;
}
.trash-slot { border-color: #8a4030 !important; }
#shop-gold,
#shop-currency-balances,
#auction-gold,
.storage-count {
  color: var(--gold-bright) !important;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}
#shop-panel .shop-footer #shop-gold,
#shop-panel .shop-footer #shop-currency-balances {
  color: #3b2a19 !important;
}
.shop-row,
.trash-row,
.auction-row,
.task-card,
.ranking-row {
  background: var(--premium-card-bg) !important;
  border: 1px solid var(--premium-card-border) !important;
  box-shadow: inset 0 1px 0 rgba(232, 196, 120, 0.08) !important;
}
.auction-row.auction-notif-row[data-kind="sold"],
.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;
}
.shop-row.selected {
  border-color: var(--gold-bright) !important;
  box-shadow:
    inset 0 0 14px rgba(240, 192, 64, 0.12),
    0 0 0 1px rgba(240, 192, 64, 0.3) !important;
}
.shop-icon {
  background:
    radial-gradient(circle at 40% 35%, #2a1c12, #120c08 75%) !important;
  /* border-color bez !important — JS ustawia rarity (shop / AH) */
}

/* --------------------------------------------------------------------------
   Enhance family
   -------------------------------------------------------------------------- */
.enhance-panel { padding: 0 12px 12px !important; }
.enhance-hint,
.enhance-status { color: var(--text-muted) !important; }
.upgrade-preview,
.reroll-stats-list,
.loot-filter-body,
.trash-list {
  background: var(--premium-card-bg) !important;
  border: 1px solid var(--premium-card-border) !important;
  color: var(--text-dim) !important;
}
.upgrade-preview strong { color: var(--gold-bright) !important; }

/* --------------------------------------------------------------------------
   Taby (aukcje, settings, encyclopedia…)
   -------------------------------------------------------------------------- */
.auction-tab,
.settings-nav-btn,
.encyclopedia-tabs button,
.atlas-filters button,
.admin-tab,
.bag-tab-btn {
  background: rgba(20, 14, 8, 0.7) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--premium-card-border) !important;
}
.auction-tab.active,
.settings-nav-btn.active,
.encyclopedia-tabs button.active,
.admin-tab.active,
.bag-tab-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;
}
.auction-filters,
.auction-sell-form,
.auction-bo-create,
.settings-section,
.changelog-entry,
.world-atlas-detail,
.item-encyclopedia-detail,
.monster-encyclopedia-detail,
.hunt-analyzer-section,
.party-settings-section {
  background: var(--premium-card-bg) !important;
  border: 1px solid var(--premium-card-border) !important;
}

/* --------------------------------------------------------------------------
   Hotbar
   -------------------------------------------------------------------------- */
#hotbar { padding: 8px !important; }

/* --------------------------------------------------------------------------
   Party / trade / inspect
   -------------------------------------------------------------------------- */
#party-panel {
  padding: 0 8px 8px !important;
  overflow: hidden !important;
  width: 200px !important;
}
/* Telefon: nie tnij treści — style.css ustawia overflow-y:auto !important + szerszy panel */
html[data-ui-mode="phone"] #party-panel:not(.hidden) {
  width: min(92vw, 360px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html[data-ui-mode="phone"] .trade-panel:not(.hidden),
html[data-ui-mode="phone"] .player-inspect-panel:not(.hidden) {
  min-width: 0 !important;
  overflow: hidden !important;
}
#party-panel .panel-header,
#party-panel .party-panel-header {
  margin-left: -8px !important;
  margin-right: -8px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background:
    linear-gradient(180deg, rgba(200, 150, 60, 0.18), transparent 70%),
    linear-gradient(180deg, var(--wood-mid) 0%, var(--wood) 100%) !important;
  border-bottom: 2px solid var(--gold-dim) !important;
}
.trade-panel,
.player-inspect-panel { padding: 0 10px 10px !important; overflow: hidden !important; }
.party-member,
.trade-pane,
.player-inspect-stats,
.player-inspect-equip {
  background: var(--premium-card-bg) !important;
  border: 1px solid var(--premium-card-border) !important;
}

/* --------------------------------------------------------------------------
   Auth / character / server select
   -------------------------------------------------------------------------- */
#auth-screen,
#character-select-screen,
#character-create-screen,
#server-select-screen {
  background:
    radial-gradient(ellipse at 50% 18%, #4a3218 0%, #1a120a 48%, #0a0704 100%) !important;
}
.auth-box {
  padding: 20px 24px 24px !important;
  min-width: min(400px, 92vw);
}
.auth-box h1 {
  font-family: var(--font-display);
  color: var(--gold-bright) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #000, 0 0 22px rgba(240, 192, 64, 0.28);
}
.auth-box .tab,
.tabs .tab {
  background: rgba(20, 14, 8, 0.7) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--premium-card-border) !important;
}
.auth-box .tab.active,
.tabs .tab.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;
}
.character-list-item,
.server-list-item,
.class-option {
  background: var(--premium-card-bg) !important;
  border: 1px solid var(--premium-card-border) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(232, 196, 120, 0.08) !important;
}
.character-list-item:hover,
.server-list-item:hover,
.character-list-item.selected,
.server-list-item.selected,
.class-option:hover,
.class-option:has(input:checked) {
  border-color: var(--gold-bright) !important;
  box-shadow:
    inset 0 0 16px rgba(240, 192, 64, 0.1),
    0 0 0 1px rgba(240, 192, 64, 0.25) !important;
}

/* --------------------------------------------------------------------------
   Admin
   -------------------------------------------------------------------------- */
.admin-window { padding: 0 !important; overflow: hidden; }
.admin-header {
  margin: 0 !important;
  flex-shrink: 0;
}
.admin-sidebar {
  background: rgba(12, 8, 5, 0.65) !important;
  border-right: 1px solid var(--premium-card-border) !important;
}
.admin-map-palette {
  background: rgba(12, 8, 5, 0.65) !important;
  border-left: 1px solid var(--premium-card-border) !important;
}
.admin-main {
  background: rgba(18, 12, 8, 0.4) !important;
}
.admin-list-item,
.admin-card,
.tileset-item {
  background: var(--premium-card-bg) !important;
  border: 1px solid var(--premium-card-border) !important;
}

/* --------------------------------------------------------------------------
   World map
   -------------------------------------------------------------------------- */
#world-map-panel { padding: 0 12px 12px !important; }
.world-map-legend,
#world-map-coords {
  color: var(--text-muted) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(138, 104, 16, 0.3) !important;
  padding: 5px 8px !important;
  margin: 8px 0 !important;
}
#world-map-canvas {
  border: 1px solid var(--premium-card-border);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Settings (poza #ui-root — musi być nad pełnoekranowym ui-root)
   -------------------------------------------------------------------------- */
.settings-panel,
.keybinds-panel,
.change-password-panel {
  z-index: 60 !important;
  padding: 0 12px 12px !important;
  overflow: hidden !important;
}
.settings-panel {
  max-height: min(90vh, calc(100vh - 24px)) !important;
}
.settings-panel-body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: calc(90vh - 56px);
}

/* --------------------------------------------------------------------------
   Side menu
   -------------------------------------------------------------------------- */
#game-side-menu .side-menu-btn {
  background:
    radial-gradient(circle at 40% 30%, #3a2818, #1a120a 70%) !important;
  border: 1px solid #6e5424 !important;
  box-shadow:
    0 0 0 1px #2a1a0c,
    inset 0 1px 0 rgba(232, 196, 120, 0.12) !important;
}
#game-side-menu .side-menu-btn:hover {
  border-color: var(--gold-bright) !important;
  box-shadow:
    0 0 0 1px rgba(240, 192, 64, 0.35),
    0 0 10px rgba(240, 192, 64, 0.2) !important;
}

/* --------------------------------------------------------------------------
   Context menus
   -------------------------------------------------------------------------- */
.item-context-menu,
.player-context-menu {
  background: var(--premium-bg) !important;
  border: 2px solid #6e5424 !important;
  outline: 1px solid rgba(201, 162, 39, 0.4);
  outline-offset: -3px;
  box-shadow: var(--premium-frame-soft) !important;
}
.item-context-menu button:hover,
.player-context-menu button:hover {
  background: rgba(80, 55, 20, 0.85) !important;
  color: var(--gold-bright) !important;
}

/* Center HUD: tylko układ poziomy ma tło; pionowy ma height:0 i full-width — border robił linię przez ekran */
#center-hud-bars.layout-horizontal:not(.hidden) {
  background: rgba(18, 12, 8, 0.55);
  border: 1px solid rgba(110, 84, 36, 0.55);
  box-shadow: var(--premium-frame-soft);
}
#center-hud-bars.layout-vertical:not(.hidden) {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Telefon: okno postaci — scroll w #character-body (premium overflow:hidden nie blokuje) */
html[data-ui-mode="phone"] #character-panel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: calc(min(78dvh, 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-panel #character-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"] #character-panel #character-stats {
  overflow: visible !important;
}
html[data-ui-mode="phone"] #character-panel #character-hero {
  flex: 0 0 auto;
  min-height: 0 !important;
}

/* --------------------------------------------------------------------------
   Centralne okno MENU (src/mainMenu.js) — te same drewno / złoto / Cinzel co pozostałe okna
   -------------------------------------------------------------------------- */
#game-side-menu .side-menu-toggle.has-pending::after,
.mobile-action-btn.has-pending::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  background: #c62828;
  border: 1px solid #2a1a0c;
}
.mobile-action-btn { position: relative; }
.mobile-action-btn .mobile-auction-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font: 700 10px/16px var(--font-ui);
  text-align: center;
  color: #fff;
  background: #c62828;
  border: 1px solid #2a1a0c;
  pointer-events: none;
}
.mobile-action-btn .mobile-auction-badge.hidden { display: none; }
.mobile-action-btn svg { display: block; margin: 0 auto; }
/* 5 przycisków (EQ, C, Aukcje, czat, MENU): zawijaj do kolejnego rzędu zamiast ściskać cele dotyku. */
.mobile-actions .mobile-action-btn { flex: 0 0 auto; }

.main-menu {
  position: fixed;
  inset: 0;
  z-index: 79; /* nad HUD i oknami, pod samouczkiem (80) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(10, 6, 2, 0.55);
  pointer-events: auto;
  font-family: var(--font-ui);
}
.main-menu.hidden { display: none; }
/* Lista samouczka (z-index 80) przykrywałaby kafelki — na czas otwartego menu jest ukryta; okna info samouczka zostają. */
html.main-menu-visible #starter-tutorial-window { display: none !important; }
.main-menu button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.main-menu-window {
  width: min(960px, 100%);
  height: min(620px, 100%);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 78, 32, 0.42), transparent 52%),
    linear-gradient(180deg, #3d2a18 0%, #24160c 100%);
  border: 2px solid #6e5424;
  outline: 1px solid rgba(201, 162, 39, 0.55);
  outline-offset: -3px;
  box-shadow: 0 0 0 1px #1a1008, 0 8px 28px rgba(0, 0, 0, 0.6);
}

.main-menu-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  cursor: default;
  border-bottom: 1px solid #6e5424;
  flex: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  min-width: 0;
}
.main-menu-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-bright);
  text-shadow: 0 1px 0 #1a1008;
  white-space: nowrap;
}
.main-menu-search { display: block; justify-self: end; width: min(320px, 100%); }
.main-menu-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  padding: 0 10px;
  font: 600 13px var(--font-ui);
  color: var(--text);
  background: var(--slot-bg);
  border: 1px solid var(--slot-border);
  border-radius: 0;
  box-shadow: var(--pixel-inset, inset 0 1px 3px rgba(0, 0, 0, 0.6));
  -webkit-appearance: none;
  appearance: none;
}
.main-menu-search-input::placeholder { color: var(--text-muted); }
.main-menu-search-input:focus { outline: none; border-color: var(--gold-bright); }
.main-menu-search-input::-webkit-search-cancel-button { filter: sepia(1) saturate(3); }
#ui-root .main-menu .main-menu-close { position: static; width: 34px !important; height: 34px !important; flex: none; }

.main-menu-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}
.main-menu-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  overflow-y: auto;
  background: rgba(20, 12, 6, 0.45);
  border-right: 1px solid #6e5424;
}
.main-menu-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 10px;
  font: 700 12px var(--font-ui);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
}
.main-menu-cat-icon,
.main-menu-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.main-menu-cat-icon { width: 24px; height: 24px; }
.main-menu-cat-icon svg { width: 22px; height: 22px; image-rendering: pixelated; }
.main-menu-cat-name { min-width: 0; overflow-wrap: break-word; line-height: 1.2; }
.main-menu-cat:hover { color: var(--text); background: rgba(90, 61, 36, 0.55); border-color: #6e5424; }
.main-menu-cat.is-active {
  color: var(--gold-bright);
  background: linear-gradient(90deg, rgba(212, 160, 23, 0.22), rgba(90, 61, 36, 0.45));
  border-color: #6e5424;
  border-left-color: var(--gold-bright);
}
.main-menu-cat:focus-visible,
.main-menu-open:focus-visible,
.main-menu-close:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }

.main-menu-main {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 16px 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.main-menu-section-title {
  margin: 0 0 10px;
  padding-bottom: 6px;
  font: 700 13px var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--parchment-mid);
  border-bottom: 1px solid rgba(110, 84, 36, 0.7);
}
.main-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.main-menu-tile {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: 'icon text' 'btn btn';
  gap: 8px 10px;
  align-content: start;
  padding: 10px;
  min-width: 0;
  background: linear-gradient(180deg, #33200f, #261709);
  border: 1px solid var(--slot-border);
  box-shadow: var(--pixel-frame, 0 0 0 1px #1a1008);
}
.main-menu-tile { position: relative; }
.main-menu-tile:hover { border-color: #8a6810; }
.main-menu-tile-name { padding-right: 22px; }
.main-menu-star {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 26px;
  height: 26px;
  padding: 0;
  font: 400 17px/1 var(--font-ui);
  color: #8a7448;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  z-index: 1;
}
.main-menu-star:hover { color: var(--gold-bright); border-color: #6e5424; background: rgba(0, 0, 0, 0.28); }
.main-menu-star.is-on { color: var(--gold-bright); text-shadow: 0 0 6px rgba(240, 192, 64, 0.45); }
.main-menu-star:focus-visible, .main-menu-move:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
.main-menu-tile.is-pinned { border-color: #6e5424; }
.main-menu-tile.has-reorder { grid-template-areas: 'icon text' 'btn btn'; }
.main-menu-reorder { grid-area: btn; justify-self: end; display: flex; gap: 4px; }
.main-menu-tile.has-reorder .main-menu-open { margin-right: 66px; }
.main-menu-move {
  width: 30px;
  min-height: 32px;
  padding: 0;
  font: 700 11px var(--font-ui);
  color: var(--gold-bright);
  background: linear-gradient(180deg, #4a3220, #33200f);
  border: 1px solid #6e5424;
  border-radius: 0;
  cursor: pointer;
}
.main-menu-move:hover:not([disabled]) { color: #fff; border-color: var(--gold-bright); }
.main-menu-move[disabled] { opacity: 0.35; cursor: default; }
.main-menu-fav-empty {
  grid-column: 1 / -1;
  margin: 26px auto;
  max-width: 360px;
  padding: 22px 18px;
  text-align: center;
  background: linear-gradient(180deg, #2c1a0c, #21140a);
  border: 1px dashed #6e5424;
}
.main-menu-fav-empty-star { display: block; font-size: 34px; line-height: 1; color: #8a7448; }
.main-menu-fav-empty-title { margin: 10px 0 6px; font: 700 14px var(--font-display); letter-spacing: 0.06em; color: var(--parchment); }
.main-menu-fav-empty-text { margin: 0; font: 500 12px/1.5 var(--font-ui); color: var(--text-dim); }
@media (pointer: coarse) {
  .main-menu-star { width: 36px; height: 36px; font-size: 20px; }
  .main-menu-tile-name { padding-right: 32px; }
  .main-menu-move { width: 38px; min-height: 38px; }
  .main-menu-tile.has-reorder .main-menu-open { margin-right: 84px; }
}
.main-menu-tile-icon {
  grid-area: icon;
  width: 44px;
  height: 44px;
  background: radial-gradient(circle at 40% 30%, #3a2818, #1a120a 70%);
  border: 1px solid #6e5424;
}
.main-menu-tile-icon svg { width: 28px; height: 28px; image-rendering: pixelated; }
.main-menu-glyph { font-size: 22px; line-height: 1; color: var(--parchment-mid); }
.main-menu-cat-icon .main-menu-glyph { font-size: 18px; }
.main-menu-tile-text { grid-area: text; min-width: 0; }
.main-menu-tile-name {
  margin: 0 0 3px;
  font: 700 13px var(--font-display);
  letter-spacing: 0.04em;
  color: var(--parchment);
  overflow-wrap: anywhere;
}
.main-menu-tile-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 14px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: #fff;
  background: #c62828;
}
.main-menu-tile-desc {
  margin: 0;
  font: 500 11.5px/1.4 var(--font-ui);
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.main-menu-open {
  grid-area: btn;
  min-height: 32px;
  padding: 0 12px;
  font: 700 11px var(--font-ui);
  letter-spacing: 0.14em;
  color: var(--gold-bright);
  background: linear-gradient(180deg, #5a3d24, #3a2718);
  border: 1px solid #8a6810;
  border-radius: 0;
  box-shadow: var(--btn-bevel, none);
  cursor: pointer;
}
.main-menu-open:hover { color: #fff; border-color: var(--gold-bright); background: linear-gradient(180deg, #6a4a2c, #46301c); }
.main-menu-open:active { background: #2a1a0c; }
.main-menu-empty { grid-column: 1 / -1; margin: 18px 0; color: var(--text-muted); text-align: center; font-size: 13px; }

/* Telefon (pion/poziom): pełny ekran, kategorie jako przewijane zakładki, kafelki w jednej kolumnie */
html[data-ui-mode="phone"] .main-menu { padding: 0; align-items: stretch; }
@media (max-width: 720px) {
  .main-menu { padding: 0; align-items: stretch; zoom: calc(1 / var(--ui-zoom, 1)); } /* telefon: pełny ekran, cele dotyku bez wpływu skali UI */
  .main-menu-window {
    width: 100%;
    height: 100%;
    border-width: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .main-menu-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 8px 10px; }
  .main-menu-title { font-size: 13px; letter-spacing: 0.08em; overflow: hidden; text-overflow: ellipsis; }
  .main-menu-search { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: 100%; }
  .main-menu-search-input { height: 40px; font-size: 16px; } /* 16px: bez auto-zoomu iOS */
  #ui-root .main-menu .main-menu-close { grid-column: 2; grid-row: 1; width: 44px !important; height: 44px !important; }
  .main-menu-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .main-menu-cats {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 8px;
    border-right: 0;
    border-bottom: 1px solid #6e5424;
    -webkit-overflow-scrolling: touch;
  }
  .main-menu-cat { flex: none; min-height: 44px; border-left-width: 1px; border-bottom: 3px solid transparent; padding: 4px 10px; }
  .main-menu-cat.is-active { border-left-color: #6e5424; border-bottom-color: var(--gold-bright); }
  .main-menu-main { padding: 10px; }
  .main-menu-grid { grid-template-columns: minmax(0, 1fr); }
  .main-menu-open { min-height: 44px; font-size: 12px; }
}
/* Telefon poziomo: mało wysokości — kompaktowy nagłówek, kafelki w dwóch kolumnach */
@media (orientation: landscape) and (max-width: 960px) and (max-height: 480px) {
  .main-menu { padding: 0; align-items: stretch; zoom: calc(1 / var(--ui-zoom, 1)); }
  .main-menu-window { width: 100%; height: 100%; border-width: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .main-menu-header { grid-template-columns: auto minmax(0, 1fr) auto; padding: 4px 10px; gap: 10px; }
  .main-menu-search { grid-column: auto; grid-row: auto; width: min(260px, 100%); justify-self: end; }
  .main-menu-search-input { height: 36px; }
  #ui-root .main-menu .main-menu-close { grid-column: auto; grid-row: auto; width: 44px !important; height: 40px !important; }
  .main-menu-body { grid-template-columns: 205px minmax(0, 1fr); grid-template-rows: none; }
  .main-menu-cats { flex-direction: column; overflow-x: hidden; overflow-y: auto; border-right: 1px solid #6e5424; border-bottom: 0; }
  .main-menu-cat { border-bottom: 1px solid transparent; border-left-width: 3px; min-height: 40px; }
  .main-menu-cat.is-active { border-left-color: var(--gold-bright); border-bottom-color: #6e5424; }
  .main-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Modale i nakładki NAD oknami z MENU (stos okien: z-index do 78; menu 79; samouczek 80).
   Dawne wartości 60–71 wypadały poniżej wyniesionych okien i okna zasłaniały aktywne modale.
   Tylko elementy blokujące/ważne; selektory po id, by nie ruszać okien wsadowych (#cooking-batch-*: 111/112).
   -------------------------------------------------------------------------- */
#shop-buy-backdrop { z-index: 90 !important; }
#shop-buy-dialog { z-index: 91 !important; }
.instance-finish-overlay { z-index: 90 !important; }
#momentum-tooltip { z-index: 90 !important; }