/* gz_layout.css - Gladiatorz layout overrides
   Version: V0.107v_smforge_propstage1
   Goal: Mobile HUD + compact right menu (no collisions), stable across reflows.
   Notes: Keep selectors specific and avoid touching textContent via JS.
*/
:root{
  --gzRootPad: 18px;
  --gzDockScale: 1;
  --gzHudScaleGlobal: 1;
  --gzTopScale: 1;
  --gzModalScale: 1;
  --gzModalInset: 12px;
  --gzModalMaxW: 1024px;
  --gzModalMaxH: calc(100dvh - 24px);
}

/* Hard safety: never allow the right menu to vanish due to stray rules */
#gzMenuRight, .gzMenuRight{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Desktop baseline (>=901px) */
.gzTopLayout{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap: calc(18px * var(--gzTopScale)) !important;
  position:relative !important;
}

.gzCenterTop{
  --gzCenterTopInset: var(--gzRootPad);
  display:flex !important;
  align-items:center !important;
  gap: calc(12px * var(--gzTopScale)) !important;
  position: fixed !important;
  left: 50% !important;
  top: calc(var(--gzCenterTopInset) + env(safe-area-inset-top)) !important;
  transform: translateX(-50%) scale(var(--gzTopScale)) !important;
  transform-origin: top center !important;
  width: auto !important;
  justify-content: center !important;
  z-index: 6000 !important;
  pointer-events: none !important;
}

/* Right menu as panel */
#gzMenuRight, .gzMenuRight{
  flex-direction:column !important;
  align-items:stretch !important;
  gap: 6px !important;
  width:260px !important;
  max-width:260px !important;
  padding: 6px !important;
  border-radius:16px !important;
  background: rgba(0,0,0,.40) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: sticky !important;
  top: var(--gzRootPad) !important;
  z-index: 5000 !important;
}

/* Ensure tabs/buttons are comfortably clickable */
#gzMenuRight .gzMenuBtns a,
#gzMenuRight .gzMenuBtns button,
#gzMenuRight .tab,
.gzMenuRight .gzMenuBtns a,
.gzMenuRight .gzMenuBtns button,
.gzMenuRight .tab{
  min-height:44px !important;
  padding:10px 12px !important;
  line-height:1.15 !important;
}

/* Mobile layout: HUD left, compact menu right, scrollable, no collisions */
@media (max-width: 900px){
  /* Shrink right menu significantly on mobile while keeping touch targets (>=44px). */
  :root{ --gz-mobile-menu-w: clamp(90px, 24vw, 120px); }

  /* Deterministic columns: left content + right menu */
  .gzTopLayout{
    display:grid !important;
    grid-template-columns: minmax(0, 1fr) var(--gz-mobile-menu-w) !important;
    grid-auto-rows:auto !important;
    column-gap:12px !important;
    row-gap:12px !important;
    align-items:start !important;
  }

  /* Left column content */
  .gzHudLeft{
    grid-column:1 !important;
    width:auto !important;
    max-width:none !important;
  }

  .gzCenterTop{
    grid-column:1 !important;
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:auto !important;
    justify-content:flex-start !important;
  }

  /* Keep bars fluid */
  #hpTop, #pmTop, #xpTop{
    min-width:0 !important;
    width:100% !important;
  }

  /* Right menu panel */
  #gzMenuRight, .gzMenuRight{
    grid-column:2 !important;
    grid-row:1 / span 3 !important;
    width: var(--gz-mobile-menu-w) !important;
    max-width: var(--gz-mobile-menu-w) !important;
    margin-left:0 !important;
    justify-self:end !important;

    top: calc(10px + env(safe-area-inset-top)) !important;
    max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling: touch !important;

    background: rgba(0,0,0,.55) !important;
    padding: 8px !important;
    gap: calc(8px * var(--gzHudScaleGlobal)) !important;
  }

  /* Slightly smaller text to fit, but keep targets large */
  /* Right menu buttons smaller (mobile) */
#gzMenuRight .gzMenuBtns a,
#gzMenuRight .gzMenuBtns button,
#gzMenuRight .gzTabs .tab,
.gzMenuRight .gzMenuBtns a,
.gzMenuRight .gzMenuBtns button,
.gzMenuRight .gzTabs .tab{
  min-height: 34px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  border-radius: 10px !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Tighter groups inside the right menu */
#gzMenuRight .gzMenuBtns,
#gzMenuRight .gzTabs,
.gzMenuRight .gzMenuBtns,
.gzMenuRight .gzTabs{
  gap: 6px !important;
}

  /* Gold/Level: allow wrap, avoid collisions */
  .gzGoldLevel{
    font-size:12px !important;
    padding:6px 10px !important;
    border-radius:12px !important;
    white-space:normal !important;
    flex-wrap:wrap !important;
    gap:6px 10px !important;
    max-width: 70vw !important;
  }
  .gzGoldLevel .sep{ display:none !important; }
}


/* Profile presence (Online/Offline + glow) */
.gzPresenceInline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.gzPresenceDot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  background: #e74c3c;
  box-shadow: 0 0 8px rgba(231,76,60,.9), 0 0 18px rgba(231,76,60,.55);
}
.gzPresenceDot.online{
  background:#2ecc71;
  box-shadow: 0 0 8px rgba(46,204,113,.9), 0 0 18px rgba(46,204,113,.55);
}
.gzPresenceDot.offline{
  background:#e74c3c;
  box-shadow: 0 0 8px rgba(231,76,60,.9), 0 0 18px rgba(231,76,60,.55);
}
.gzPresenceLabel{
  font-weight:800;
}
.gzPresenceLast{
  margin-top:6px;
  opacity:.9;
  font-size:12px;
}

/* ===== Theme V0.102b: Right-side links -> image buttons (dock) + responsive scale ===== */
@media (min-width: 901px){
  /* Turn the right menu into a fixed dock (icons) */
  #gzMenuRight.gzRightDock{
    /* Responsive sizing variables tuned by gz_layout.js */
    --gzDockGapMin: 6px;
    --gzDockCenterStep: 11.3vh;
    --gzDockBtnSizeNominal: clamp(
      calc(88px * var(--gzDockScale)),
      calc(min(7.7vw, 11.5vh) * var(--gzDockScale)),
      calc(132px * var(--gzDockScale))
    );
    --gzDockBtnSize: min(var(--gzDockBtnSizeNominal), calc(var(--gzDockCenterStep) - var(--gzDockGapMin)));
    --gzDockRight: clamp(10px, calc(18px * var(--gzDockScale)), 18px);
    --gzDockWidth: calc(var(--gzDockBtnSize) + clamp(8px, calc(12px * var(--gzDockScale)), 14px));

    position: fixed !important;
    right: var(--gzDockRight) !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--gzDockWidth) !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    z-index: 7000 !important;
    pointer-events: none !important; /* enable per-button */
  }

  #gzMenuRight.gzRightDock .gzVersion{
    position: fixed !important;
    right: var(--gzDockRight) !important;
    bottom: clamp(12px, calc(16px * var(--gzDockScale)), 18px) !important;
    background: rgba(0,0,0,.35) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: clamp(10px, calc(12px * var(--gzDockScale)), 14px) !important;
    padding: clamp(5px, calc(6px * var(--gzDockScale)), 7px) clamp(8px, calc(10px * var(--gzDockScale)), 11px) !important;
    font-size: clamp(11px, calc(12px * var(--gzDockScale)), 12px) !important;
    opacity: .65 !important;
    pointer-events: none !important;
  }

  #gzMenuRight.gzRightDock #tabs{
    position: relative !important;
    height: 100% !important;
    width: var(--gzDockWidth) !important;
    pointer-events: none !important;
  }

  #gzMenuRight.gzRightDock .gzIconTab,
  #gzMenuRight.gzRightDock #logoutBtn.gzIconBtn{
    position: absolute !important;
    left: 0 !important;
    width: var(--gzDockBtnSize) !important;
    height: var(--gzDockBtnSize) !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transform: translateY(-50%) !important;
  }

  /* Approx. positions (from map reference) */
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="messages"]{ top: 8.6% !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="shop"]{ top: 8.6% !important; left: calc((var(--gzDockBtnSize) + clamp(6px, calc(10px * var(--gzDockScale)), 14px)) * -1) !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="dash"]{ top: 19.9% !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="inv"]{ top: 31.2% !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="trainer"]{ top: 42.5% !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="chat"]{ top: 53.8% !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="highscore"]{ top: 65.1% !important; }
  #gzMenuRight.gzRightDock #logoutBtn.gzIconBtn{ top: 76.4% !important; }

  #gzMenuRight.gzRightDock .gzIconTab img,
  #gzMenuRight.gzRightDock #logoutBtn.gzIconBtn img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
  }

  #gzMenuRight.gzRightDock .gzIconTab:hover img,
  #gzMenuRight.gzRightDock #logoutBtn.gzIconBtn:hover img{
    transform: scale(1.03);
    filter: brightness(1.04) drop-shadow(0 10px 22px rgba(0,0,0,.38));
  }

  #gzMenuRight.gzRightDock .gzIconTab.gzActive img{
    transform: scale(1.02);
    filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
    opacity: 1;
  }

  #gzMenuRight.gzRightDock .gzDockBadge{
    position:absolute !important;
    right:-4px !important;
    top:6px !important;
    min-width:24px !important;
    height:24px !important;
    padding:0 6px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px !important;
    background:linear-gradient(180deg,#a20f0f,#d5362a) !important;
    color:#fff3d9 !important;
    border:1px solid rgba(255,222,170,.55) !important;
    box-shadow:0 6px 16px rgba(0,0,0,.35) !important;
    font:900 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
    letter-spacing:.1px !important;
    pointer-events:none !important;
    z-index:3 !important;
  }

  /* Place admin/debug (if visible) at the bottom as compact pills */
  #gzMenuRight.gzRightDock .gzExtraTab{
    position: fixed !important;
    right: calc(var(--gzDockRight) + 4px) !important;
    width: var(--gzDockBtnSize) !important;
    height: auto !important;
    transform: none !important;
    pointer-events: auto !important;
    font-size: clamp(10px, calc(12px * var(--gzDockScale)), 12px) !important;
    padding: clamp(6px, calc(8px * var(--gzDockScale)), 9px) clamp(8px, calc(10px * var(--gzDockScale)), 11px) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.45) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
  }
  #gzMenuRight.gzRightDock #tab_debug.gzExtraTab{ bottom: calc(var(--gzDockBtnSize) * 1.08) !important; }
  #gzMenuRight.gzRightDock #tab_admin.gzExtraTab{ bottom: calc(var(--gzDockBtnSize) * .64) !important; }
}

@media (max-width: 900px){
  /* Mobile: keep the dock, but make buttons ~40% smaller and flush to the right edge */
  #gzMenuRight.gzRightDock{
    --gzDockBtnScale: .62;
    --gzSafeRight: env(safe-area-inset-right, 0px);

    /* scale the same formula as desktop, but smaller */
    --gzDockGapMin: 6px;
    --gzDockCenterStep: 11.3vh;
    --gzDockBtnSizeNominal: clamp(
      calc(76px * var(--gzDockBtnScale)),
      calc(min(7.5vw, 12vh) * var(--gzDockBtnScale)),
      calc(128px * var(--gzDockBtnScale))
    );
    --gzDockBtnSize: min(var(--gzDockBtnSizeNominal), calc(var(--gzDockCenterStep) - var(--gzDockGapMin)));

    --gzDockRight: var(--gzSafeRight);
    --gzDockWidth: calc(var(--gzDockBtnSize) + 6px);

    position: fixed !important;
    right: var(--gzDockRight) !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--gzDockWidth) !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    z-index: 7000 !important;
    pointer-events: none !important; /* enable per-button */
  }

  #gzMenuRight.gzRightDock #tabs{
    position: relative !important;
    height: 100% !important;
    width: var(--gzDockWidth) !important;
    pointer-events: none !important;
  }

  #gzMenuRight.gzRightDock .gzIconTab,
  #gzMenuRight.gzRightDock #logoutBtn.gzIconBtn{
    position: absolute !important;
    left: 0 !important;
    width: var(--gzDockBtnSize) !important;
    height: var(--gzDockBtnSize) !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transform: translateY(-50%) !important;
    touch-action: manipulation !important;
  }

  /* Keep the same relative positions as desktop */
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="messages"]{ top: 8.6% !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="shop"]{ top: 8.6% !important; left: calc((var(--gzDockBtnSize) + 4px) * -1) !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="dash"]{ top: 19.9% !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="inv"]{ top: 31.2% !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="trainer"]{ top: 42.5% !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="chat"]{ top: 53.8% !important; }
  #gzMenuRight.gzRightDock .gzIconTab[data-tab="highscore"]{ top: 65.1% !important; }
  #gzMenuRight.gzRightDock #logoutBtn.gzIconBtn{ top: 76.4% !important; }

  #gzMenuRight.gzRightDock .gzIconTab img,
  #gzMenuRight.gzRightDock #logoutBtn.gzIconBtn img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Version badge: scale border/radius/padding with button size */
  #gzMenuRight.gzRightDock .gzVersion{
    position: fixed !important;
    right: var(--gzDockRight) !important;
    bottom: calc(var(--gzDockBtnSize) * .20) !important;

    background: rgba(0,0,0,.35) !important;
    border-width: clamp(1px, calc(var(--gzDockBtnSize) * .012), 2px) !important;
    border-style: solid !important;
    border-color: rgba(255,255,255,.14) !important;
    border-radius: clamp(8px, calc(var(--gzDockBtnSize) * .12), 14px) !important;
    padding: clamp(4px, calc(var(--gzDockBtnSize) * .06), 10px) clamp(6px, calc(var(--gzDockBtnSize) * .09), 14px) !important;

    font-size: clamp(10px, calc(var(--gzDockBtnSize) * .18), 14px) !important;
    opacity: .65 !important;
    pointer-events: none !important;
  }

  /* Extra/admin tabs (if present): keep them tiny and out of the way */
  #gzMenuRight.gzRightDock #tab_admin.gzExtraTab,
  #gzMenuRight.gzRightDock #tab_debug.gzExtraTab{
    right: var(--gzDockRight) !important;
    border-width: clamp(1px, calc(var(--gzDockBtnSize) * .012), 2px) !important;
    border-radius: clamp(8px, calc(var(--gzDockBtnSize) * .12), 14px) !important;
    padding: clamp(3px, calc(var(--gzDockBtnSize) * .04), 8px) !important;
    font-size: clamp(10px, calc(var(--gzDockBtnSize) * .16), 13px) !important;
  }
  #gzMenuRight.gzRightDock #tab_debug.gzExtraTab{ bottom: calc(var(--gzDockBtnSize) * 1.10) !important; }
  #gzMenuRight.gzRightDock #tab_admin.gzExtraTab{ bottom: calc(var(--gzDockBtnSize) * 1.55) !important; }
}

/* ==========================================================
   Item Rarity Styling (V0.102af)
   - Used by Inventory, Equipment, Tiergrube drops, tooltips.
   - Pure CSS (no JS). Keeps the old “colored rarity” feel.
   ========================================================== */

.gzRarityName{ font-weight:900; }
.gzRarityBadge{
  display:inline-block;
  vertical-align:middle;
  font-weight:900;
  font-size:11px;
  line-height:1;
  padding:3px 8px;
  border-radius:999px;
  margin-left:8px;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25);
  text-transform:uppercase;
}

/* Default (common) stays neutral */
.gzRarity-common{ color: inherit; }

/* Rare */
.gzRarity-rare{ color:#55a9ff; text-shadow: 0 0 10px rgba(85,169,255,.18); }
.gzRarityBadge.gzRarity-rare{ border-color: rgba(85,169,255,.55); background: rgba(85,169,255,.10); }

/* Epic */
.gzRarity-epic{ color:#c07bff; text-shadow: 0 0 10px rgba(192,123,255,.18); }
.gzRarityBadge.gzRarity-epic{ border-color: rgba(192,123,255,.55); background: rgba(192,123,255,.10); }

/* Legendary */
.gzRarity-legendary{ color:#ffcf5a; text-shadow: 0 0 12px rgba(255,207,90,.20); }
.gzRarityBadge.gzRarity-legendary{ border-color: rgba(255,207,90,.55); background: rgba(255,207,90,.10); }

/* Mythic */
.gzRarity-mythic{ color:#ff6666; text-shadow: 0 0 12px rgba(255,102,102,.18); }
.gzRarityBadge.gzRarity-mythic{ border-color: rgba(255,102,102,.55); background: rgba(255,102,102,.10); }

/* Inventory list: no rarity marker (keeps the list cleaner) */
.gzInvEntry.gzRarity-rare,
.gzInvEntry.gzRarity-epic,
.gzInvEntry.gzRarity-legendary,
.gzInvEntry.gzRarity-mythic{
  border-left: none;
  padding-left: 0;
}

/* Inventory icon: always reserve the same box; image may be missing -> empty box */
.gzInvIcon img.gzInvItemImg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* Admin panel: make the window ~30% narrower so the right-side buttons don't cover it */
.gzAdminWrap{
  width:70%;
  max-width: 840px;
  margin: 0 auto;
}
@media (max-width: 900px){
  .gzAdminWrap{ width:100%; max-width:none; }
}


/* ===== HUD (Grafisch) – V0.108 hudpos4 =====
   Left overlay: Portrait frame + HP/PM/XP image bars (clipped fill).
   Notes:
   - Uses fixed positioning so it stays on map.
   - Pointer-events: none so map interactions keep working.
   - Toggle text overlay for debugging via: document.body.classList.add('gzHudDebugText')
*/
#gzStats.gzHudGfx{
  position: fixed !important;
  left: calc(var(--gzHudOuterX, 8px) + env(safe-area-inset-left)) !important;
  top:  calc(var(--gzHudOuterY, 8px) + env(safe-area-inset-top)) !important;
  z-index: 6500 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  /* Space between portrait frame and the bars block (scales with the HUD). */
  gap: 8px !important;
  align-items: flex-start !important;
  pointer-events: none !important;

  /* Default HUD scale (desktop). Can be overridden at runtime via:
     const hud = document.querySelector('#gzStats.gzHudGfx');
     hud?.style.setProperty('--gzHudScale', '.65');
     hud?.style.setProperty('--gzHudBarsTop', '64.6px'); // HUD-space (scales with HUD)
     hud?.style.setProperty('--gzHudBarsLeft', '-135.4px'); // HUD-space (scales with HUD)
  */
  --gzHudScale: .65;
  /* HUD-Anchor: visible frame edge, not transparent PNG canvas edge.
     These trim values are auto-updated by gz_ui.js from the frame alpha box. */
  --gzHudOuterX: 8px;
  --gzHudOuterY: 8px;
  --gzHudFrameTrimX: 38px;
  --gzHudFrameTrimY: 23px;
  --gzHudPortraitW: 300px;
  --gzHudPortraitH: 300px;
  --gzHudLevelX: 183px;
  --gzHudLevelY: 204px;
  --gzHudLevelW: 54px;
  --gzHudLevelH: 36px;
  --gzHudBarsTop: 64.6px;
  --gzHudBarsLeft: -135.4px;
  --gzHudBarsNudgeX: 70.5px;
  --gzHudBarsNudgeY: -7.4px;
  --gzHudFillNudgeX: -1.5px;
  --gzHudFillNudgeY: -1.5px;
  /* Chat preview is positioned below the visible portrait frame. */
  --gzHudChatOffsetX: 0px;
  --gzHudChatOffsetY: calc(var(--gzHudFrameVisibleH, 256px) + 10px);
  transform: scale(calc(var(--gzHudScale) * var(--gzHudScaleGlobal)));
  transform-origin: top left;
}

#gzStats.gzHudGfx .gzHudPortrait{
  position: relative;
  z-index: 20; /* portrait/frame layer; status bars can overlap above it */
  width: var(--gzHudPortraitW, 300px);
  height: var(--gzHudPortraitH, 300px);
  flex: 0 0 auto;
  margin-left: calc(var(--gzHudFrameTrimX, 0px) * -1);
  margin-top: calc(var(--gzHudFrameTrimY, 0px) * -1);
  pointer-events: auto !important; /* HUD container is pointer-events:none; portrait remains clickable */
  cursor: pointer;
  touch-action: manipulation;
}
#gzStats.gzHudGfx .gzHudPortrait:focus-visible{
  outline: 2px solid rgba(243,228,181,.9);
  outline-offset: -18px;
}
#gzStats.gzHudGfx .gzHudPortraitBg,
#gzStats.gzHudGfx .gzHudPortraitFrame{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--gzHudPortraitW, 300px);
  height: var(--gzHudPortraitH, 300px);
  display: block;
  user-select: none;
  pointer-events: none;
}
#gzStats.gzHudGfx .gzHudPortraitBg{
  z-index: 0;
  object-fit: fill;
  -webkit-mask-image: url("/img/hud/hud_maske.png?v=V0.109_frames1");
  mask-image: url("/img/hud/hud_maske.png?v=V0.109_frames1");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
#gzStats.gzHudGfx .gzHudPortraitFrame{ z-index: 2; }
#gzStats.gzHudGfx .gzHudLevelBadge{
  position: absolute;
  left: var(--gzHudLevelX, 180px);
  top: var(--gzHudLevelY, 202px);
  width: var(--gzHudLevelW, 54px);
  height: var(--gzHudLevelH, 36px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 3;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#gzStats.gzHudGfx .gzHudLevelBadge::before{
  display: none;
}
#gzStats.gzHudGfx .gzHudLevelBadge > span{
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  padding: 0;
  width: 100%;
  text-align: right;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  color: #f3e4b5;
  text-shadow:
    0 2px 8px rgba(0,0,0,.96),
    0 0 3px rgba(0,0,0,.80);
}

#gzStats.gzHudGfx .gzHudBars{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  position: relative;
  z-index: 40;
  /* Keep visible offsets stable even though the whole HUD is scaled. */
  margin-left: var(--gzHudBarsLeft);
  margin-top: calc(var(--gzHudBarsTop) - var(--gzHudFrameTrimY, 0px));
  transform: translate(var(--gzHudBarsNudgeX), var(--gzHudBarsNudgeY));

}

/* Chat preview below the portrait frame; it no longer participates in the bar stack layout. */
#gzBrand{ display:none !important; }

#gzStats.gzHudGfx #gzChatPeek{
  /* Do NOT force display here (JS toggles it). Just style it when visible. */
  width: 400px;
  max-width: 400px;
  box-sizing: border-box;

  /* Absolute to the HUD root: under the visible portrait frame with 10px Abstand. */
  position: absolute;
  left: var(--gzHudChatOffsetX);
  top:  var(--gzHudChatOffsetY);
  margin: 0;

  /* Match Gold/Level pill style, but sized to the bar block */
  padding: 8px 12px;
  min-height: 33px;
  border: 1px solid var(--gz-border2);
  border-radius: 14px;
  background: rgba(0,0,0,.20);

  display: flex;
  align-items: center;
  gap: 10px;

  z-index: 20; /* below portrait frame, above the map */
  pointer-events: auto !important; /* allow click even though HUD container is pointer-events:none */

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#gzStats.gzHudGfx #gzChatPeek.gzChatPeekTop{
  font-size: 23px;
  padding: 8px 12px;
  border-radius: 14px;
  line-height: 1.1;
}

/* Keep bar sizing stable (also overrides mobile fluid bars) */
#gzStats.gzHudGfx #hpTop,
#gzStats.gzHudGfx #pmTop,
#gzStats.gzHudGfx #xpTop{
  min-width: 0 !important;
  width: 411px !important;
}

#gzStats.gzHudGfx .gzHudBar{
  position: relative;
  width: 411px;
  height: 58px;
  flex: 0 0 auto;
}

#gzStats.gzHudGfx .gzHudBarFrameImg{
  position: absolute;
  left: 0;
  top: 0;
  width: 411px;
  height: 58px;
  z-index: 2;
  user-select: none;
}

#gzStats.gzHudGfx .gzHudBarFillTrack{
  position: absolute;
  left: 63px;
  top: 16px;
  width: 327px;
  height: 25px;
  overflow: hidden;
  /* Energy fill sits one layer above the bar image (like the reference). */
  z-index: 3;
  transform: translate(var(--gzHudFillNudgeX), var(--gzHudFillNudgeY));

}

#gzStats.gzHudGfx .gzHudBarFillClip{
  height: 25px;
  width: 0%;
  overflow: hidden;
  transition: width 160ms linear;
}

#gzStats.gzHudGfx .gzHudBarFillImg{
  width: 327px;
  height: 25px;
  display: block;
  user-select: none;
}

/* Text overlay for HP/PM/XP (visible by default, above the energy fill) */
#gzStats.gzHudGfx .gzHudBarText{
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  /* Option B: right edge stays fixed, text grows to the left, stays within the bar */
  max-width: calc(100% - 98px);
  white-space: nowrap;
  overflow: hidden;
  text-align: right;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.92);
  opacity: 1;
  pointer-events: none;
  text-shadow:
    0 2px 10px rgba(0,0,0,.80),
    0 0 2px rgba(0,0,0,.80);
  z-index: 6;
}

#gzCenterTop #gzGoldLevel{
  transform: none;
  transform-origin: top center;
}

#gzCenterTop #gzGoldLevel.gzCurrencyHud{
  --gzCurrencyW: clamp(150px, min(10.6vw, 17vh), 210px);
  --gzCurrencyH: calc(var(--gzCurrencyW) * 39 / 200);
  --gzCurrencyGap: clamp(6px, 0.55vw, 10px);
  --gzCurrencyFont: clamp(14px, calc(var(--gzCurrencyW) * 0.09), 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gzCurrencyGap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}
#gzCenterTop #gzGoldLevel.gzCurrencyHud .gzCurrencyBox{
  position: relative;
  flex: 0 0 auto;
  width: var(--gzCurrencyW);
  height: var(--gzCurrencyH);
  pointer-events: auto;
}
#gzCenterTop #gzGoldLevel.gzCurrencyHud .gzCurrencyBg{
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
#gzCenterTop #gzGoldLevel.gzCurrencyHud .gzCurrencyText{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 calc(var(--gzCurrencyW) * 0.18) 0 calc(var(--gzCurrencyW) * 0.375);
  font-weight: 900;
  font-size: var(--gzCurrencyFont);
  line-height: 1;
  letter-spacing: .2px;
  color: #f8ead0;
  text-shadow:
    0 2px 5px rgba(0,0,0,.95),
    0 0 6px rgba(0,0,0,.45);
}
#gzCenterTop #gzGoldLevel.gzCurrencyHud .gzCurrencyPremium .gzCurrencyText{
  padding-left: calc(var(--gzCurrencyW) * 0.345);
}

/* Chat peek beside currencies (top center). */
#gzCenterTop #gzChatPeek{
  pointer-events: auto !important;
  margin: 0 !important;
  max-width: clamp(220px, 28vw, 520px);
}

/* Responsive scaling (stronger shrink on lower resolutions) */
@media (max-width: 1600px){ #gzStats.gzHudGfx{ --gzHudScale: .58; } }
@media (max-width: 1400px){ #gzStats.gzHudGfx{ --gzHudScale: .52; } }
@media (max-width: 1200px){ #gzStats.gzHudGfx{ --gzHudScale: .46; } }
@media (max-width: 1024px){ #gzStats.gzHudGfx{ --gzHudScale: .42; } }
@media (max-width: 1050px) and (min-width: 901px){
  .gzCenterTop{ --gzCenterTopInset: 10px; }
  #gzCenterTop #gzGoldLevel.gzCurrencyHud{
    --gzCurrencyW: clamp(138px, min(9.4vw, 14.2vh), 172px);
    --gzCurrencyH: calc(var(--gzCurrencyW) * 39 / 200);
    --gzCurrencyGap: 8px;
    --gzCurrencyFont: clamp(13px, calc(var(--gzCurrencyW) * 0.095), 15px);
  }
}

@media (max-width: 900px){
  #gzStats.gzHudGfx{
    left: calc(4px + env(safe-area-inset-left)) !important;
    top:  calc(4px + env(safe-area-inset-top)) !important;
    --gzHudScale: .38;
    --gzHudOuterX: 4px;
    --gzHudOuterY: 4px;
  }
  #gzStats.gzHudGfx .gzHudLevelBadge{
    left: var(--gzHudLevelX, 180px);
    top: var(--gzHudLevelY, 202px);
    width: var(--gzHudLevelW, 54px);
    height: var(--gzHudLevelH, 36px);
  }
  #gzStats.gzHudGfx .gzHudLevelBadge > span{
    font-size: 28px;
  }
  .gzCenterTop{
    --gzCenterTopInset: 8px;
    position: fixed !important;
    left: 50% !important;
    top: calc(var(--gzCenterTopInset) + env(safe-area-inset-top)) !important;
    transform: translateX(-50%) scale(var(--gzTopScale)) !important;
    transform-origin: top center !important;
    width: auto !important;
    justify-content: center !important;
    grid-column: auto !important;
    z-index: 6000 !important;
    pointer-events: none !important;
  }
  #gzCenterTop #gzGoldLevel.gzCurrencyHud{
    --gzCurrencyW: clamp(132px, min(18vw, 13.8vh), 160px);
    --gzCurrencyH: calc(var(--gzCurrencyW) * 39 / 200);
    --gzCurrencyGap: 8px;
    --gzCurrencyFont: clamp(13px, calc(var(--gzCurrencyW) * 0.095), 15px);
    gap: var(--gzCurrencyGap);
    flex-wrap: nowrap;
    justify-content: center;
  }
}
@media (max-width: 520px){ #gzStats.gzHudGfx{ --gzHudScale: .34; } .gzCenterTop{ --gzCenterTopInset: 6px; } }
@media (max-width: 420px){ #gzStats.gzHudGfx{ --gzHudScale: .30; } .gzCenterTop{ --gzCenterTopInset: 4px; } }

@media (max-width: 1500px) and (min-width: 901px){
  .gzCenterTop{ --gzCenterTopInset: 14px; }
  #gzCenterTop #gzGoldLevel.gzCurrencyHud{
    --gzCurrencyW: clamp(142px, min(10vw, 15.5vh), 190px);
  }
}
@media (max-height: 900px) and (min-width: 901px){
  .gzCenterTop{ --gzCenterTopInset: 12px; }
  #gzCenterTop #gzGoldLevel.gzCurrencyHud{
    --gzCurrencyW: clamp(140px, min(9.6vw, 14.5vh), 184px);
  }
}
@media (max-height: 760px) and (min-width: 901px){
  .gzCenterTop{ --gzCenterTopInset: 8px; }
  #gzCenterTop #gzGoldLevel.gzCurrencyHud{
    --gzCurrencyW: clamp(132px, min(9vw, 13.5vh), 172px);
  }
}

/* Height-based shrink (e.g. low vertical resolution) */
@media (max-height: 850px) and (min-width: 901px){ #gzStats.gzHudGfx{ --gzHudScale: .58; } }
@media (max-height: 760px) and (min-width: 901px){ #gzStats.gzHudGfx{ --gzHudScale: .52; } }
@media (max-height: 680px) and (min-width: 901px){ #gzStats.gzHudGfx{ --gzHudScale: .46; } }


/* ==========================================================
   Item Icon Rarity Background + Forge Level Overlay (rbg1)
   - Apply by adding class "gzItemIcon" plus rarity class
     (gzRarity-rare/epic/legendary/mythic) on the icon wrapper.
   ========================================================== */

.gzItemIcon{ position:relative; overflow:hidden; }
.gzItemIcon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:.82;
  filter:saturate(1.08);
  pointer-events:none;
  z-index:0;
}
.gzItemIcon.gzRarity-rare::before{ background-image:url('/img/items/rarity/selten.png'); }
.gzItemIcon.gzRarity-epic::before{ background-image:url('/img/items/rarity/epic.png'); }
.gzItemIcon.gzRarity-legendary::before{ background-image:url('/img/items/rarity/legendaer.png'); }
.gzItemIcon.gzRarity-mythic::before{ background-image:url('/img/items/rarity/mystisch.png'); }

.gzItemIcon > img{ position:relative; z-index:1; }

.gzForgeLvl{
  position:absolute;
  right:2px;
  bottom:2px;
  font-weight:900;
  font-size:11px;
  line-height:1;
  padding:2px 5px;
  border-radius:8px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  pointer-events:none;
  z-index:2;
  color:inherit;
}
.gzForgeLvl.gzRarity-rare{ border-color: rgba(85,169,255,.35); }
.gzForgeLvl.gzRarity-epic{ border-color: rgba(192,123,255,.35); }
.gzForgeLvl.gzRarity-legendary{ border-color: rgba(255,207,90,.35); }
.gzForgeLvl.gzRarity-mythic{ border-color: rgba(255,102,102,.35); }

/* Phase 3 – modal responsiveness */
#modal.gzFrameModal.gzFrameModalDesktop,
#modal.gzFrameModal.gzFrameModalMobile{
  top: max(50%, calc(50% + (env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .5)) !important;
}

#modal.gzFrameModal.gzFrameModalDesktop{
  /* Restore the smaller original desktop chrome; keep content width responsive. */
  --gzFrameScale: .50;
  width: min(var(--gzModalMaxW, 1024px), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-width: calc(100vw - (var(--gzModalInset, 12px) * 2)) !important;
  max-height: min(var(--gzModalMaxH, calc(100dvh - 24px)), calc(100dvh - (var(--gzModalInset, 12px) * 2))) !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-prof-scene="1"]{
  --gzFrameScale: calc(.50 * var(--gzProfChromeScale, 1));
  width: min(var(--gzProfModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-width: min(var(--gzProfModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzProfModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-prof-scene="1"] .gzModalHeaderActions{
  top: calc(10px * var(--gzProfChromeScale, 1));
  right: calc(10px * var(--gzProfChromeScale, 1));
  gap: calc(8px * var(--gzProfChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-prof-scene="1"] .gzModalNavBtn{
  min-height: calc(34px * var(--gzProfChromeScale, 1));
  padding: calc(8px * var(--gzProfChromeScale, 1)) calc(14px * var(--gzProfChromeScale, 1)) !important;
  border-radius: calc(14px * var(--gzProfChromeScale, 1)) !important;
  font-size: calc(14px * var(--gzProfChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-prof-scene="1"] #modalTitle{
  line-height: 1;
}


#modal.gzFrameModal[data-gz-prof-settings="1"] .gzModalScroll{
  max-height: none !important;
}

#modal.gzFrameModal[data-gz-prof-settings="1"] .gzFrameFill{
  background: linear-gradient(180deg, rgba(18,12,7,.96), rgba(10,8,6,.98)) !important;
}

#modal.gzFrameModal[data-gz-prof-settings="1"] .gzProfSettingsRoot{
  min-height: calc(720px * var(--gzProfUiScale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
}

#modal.gzFrameModal[data-gz-prof-settings="1"] .gzProfSettingsCard{
  border-color: rgba(212,175,55,.20) !important;
}

#modal.gzFrameModal.gzFrameModalDesktop .gzModalHeaderActions,
#modal.gzFrameModal.gzFrameModalMobile .gzModalHeaderActions{
  max-width: calc(100% - (var(--gzFramePadX, 16px) * 2));
  flex-wrap: wrap;
}

#modal.gzFrameModal.gzFrameModalDesktop .gzModalScroll,
#modal.gzFrameModal.gzFrameModalMobile .gzModalScroll{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#modal.gzFrameModal.gzFrameModalDesktop .gzModalScroll{
  max-height: calc(min(var(--gzModalMaxH, calc(100dvh - 24px)), calc(100dvh - (var(--gzModalInset, 12px) * 2))) - calc(16px * var(--gzFrameScale)));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-prof-scene="1"] .gzModalScroll{
  max-height: none !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="trainerHub"]{
  --gzFrameScale: calc(.50 * var(--gzTrainerHubChromeScale, 1));
  width: min(var(--gzTrainerModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-width: min(var(--gzTrainerModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzTrainerModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="trainerHub"] .gzModalHeaderActions{
  top: calc(10px * var(--gzTrainerHubChromeScale, 1));
  right: calc(10px * var(--gzTrainerHubChromeScale, 1));
  gap: calc(8px * var(--gzTrainerHubChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="trainerHub"] .gzModalNavBtn{
  min-height: calc(34px * var(--gzTrainerHubChromeScale, 1));
  padding: calc(8px * var(--gzTrainerHubChromeScale, 1)) calc(14px * var(--gzTrainerHubChromeScale, 1)) !important;
  border-radius: calc(14px * var(--gzTrainerHubChromeScale, 1)) !important;
  font-size: calc(14px * var(--gzTrainerHubChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="trainerHub"] #modalTitle{
  line-height: 1;
  transform: translateY(calc(14px * var(--gzTrainerHubChromeScale, 1) + var(--gzTrainerTitleShiftY, 0px)));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="trainerHub"] .gzModalScroll{
  max-height: none !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="trainerHub"] #gzTrainerHubViewport{
  position: relative;
  width: var(--gzTrainerViewportW, 1024px) !important;
  height: var(--gzTrainerViewportH, 683px) !important;
  max-width: none;
  overflow: hidden;
  display: block;
  flex: none;
  margin: 0 auto;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="trainerHub"] #gzTrainerHubScene{
  position: absolute;
  left: 0;
  top: 0;
  width: 1024px !important;
  height: 682.67px !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: none !important;
  transform-origin: top left;
  transform: scale(var(--gzTrainerHubUiScale, 1));
  will-change: transform;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="trainerHub"] #gzTrainerHubLeft{
  height: 100%;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="trainerHub"] #gzTrainerHubMount{
  padding-right: 0 !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="arenaHub"]{
  --gzFrameScale: calc(.50 * var(--gzArenaChromeScale, 1));
  width: min(var(--gzArenaModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-width: min(var(--gzArenaModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzArenaModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="arenaHub"] .gzModalHeaderActions{
  top: calc(10px * var(--gzArenaChromeScale, 1));
  right: calc(10px * var(--gzArenaChromeScale, 1));
  gap: calc(8px * var(--gzArenaChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="arenaHub"] .gzModalNavBtn{
  min-height: calc(34px * var(--gzArenaChromeScale, 1));
  padding: calc(8px * var(--gzArenaChromeScale, 1)) calc(14px * var(--gzArenaChromeScale, 1)) !important;
  border-radius: calc(14px * var(--gzArenaChromeScale, 1)) !important;
  font-size: calc(14px * var(--gzArenaChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="arenaHub"] #modalTitle{
  line-height: 1;
  transform: translateY(calc(14px * var(--gzArenaChromeScale, 1)));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="arenaHub"] .gzModalScroll{
  max-height: none !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="arenaHub"] #gzArenaViewport{
  position: relative;
  width: var(--gzArenaViewportW, 1024px) !important;
  height: var(--gzArenaViewportH, 682.67px) !important;
  max-width: none;
  overflow: hidden;
  display: block;
  flex: none;
  margin: 0 auto;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="arenaHub"] #gzArenaSceneFit{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--gzArenaSceneBaseW, 1024px) !important;
  height: var(--gzArenaSceneBaseH, 682.67px) !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: none !important;
  transform-origin: top left;
  transform: scale(var(--gzArenaUiScale, 1));
  will-change: transform;
}



#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="pitHub"]{
  width: var(--gzPitModalW, var(--gzModalMaxW, 1024px)) !important;
  max-width: var(--gzPitModalW, var(--gzModalMaxW, 1024px)) !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzPitModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) scale(var(--gzPitModalScale, 1)) !important;
  transform-origin: center center !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"]{
  --gzFrameScale: calc(.50 * var(--gzTavChromeScale, 1));
  width: min(var(--gzTavModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-width: min(var(--gzTavModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzTavModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"] .gzModalHeaderActions{
  top: calc(10px * var(--gzTavChromeScale, 1));
  right: calc(10px * var(--gzTavChromeScale, 1));
  gap: calc(8px * var(--gzTavChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"] .gzModalNavBtn{
  min-height: calc(34px * var(--gzTavChromeScale, 1));
  padding: calc(8px * var(--gzTavChromeScale, 1)) calc(14px * var(--gzTavChromeScale, 1)) !important;
  border-radius: calc(14px * var(--gzTavChromeScale, 1)) !important;
  font-size: calc(14px * var(--gzTavChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"] #modalTitle{
  line-height: 1;
  transform: translateY(calc(14px * var(--gzTavChromeScale, 1)));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"] .gzModalScroll{
  max-height: none !important;
  background: transparent !important;
  border-radius: calc(26px * var(--gzFrameScale)) !important;
  scrollbar-color: rgba(255,225,170,.24) transparent;
  scrollbar-width: thin;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"] .gzModalScroll::-webkit-scrollbar-track{
  background: transparent !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"] .gzModalScroll::-webkit-scrollbar-thumb{
  background: rgba(255,225,170,.18) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"] .gzModalSub{
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"] .gzModalBodyV2{
  padding: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"] #gzTavViewport{
  position: relative;
  width: var(--gzTavViewportW, 1024px) !important;
  height: var(--gzTavViewportH, 682.67px) !important;
  max-width: none;
  overflow: hidden;
  display: block;
  flex: none;
  margin: 0 auto;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="tavernHub"] #gzTavScene{
  position: absolute;
  left: 0;
  top: 0;
  width: 1024px !important;
  height: 682.67px !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: none !important;
  transform-origin: top left;
  transform: scale(var(--gzTavUiScale, 1));
  will-change: transform;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="marketHub"]{
  --gzFrameScale: calc(.50 * var(--gzMktChromeScale, 1));
  width: min(var(--gzMktModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-width: min(var(--gzMktModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzMktModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="marketHub"] .gzModalHeaderActions{
  top: calc(10px * var(--gzMktChromeScale, 1));
  right: calc(10px * var(--gzMktChromeScale, 1));
  gap: calc(8px * var(--gzMktChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="marketHub"] .gzModalNavBtn{
  min-height: calc(34px * var(--gzMktChromeScale, 1));
  padding: calc(8px * var(--gzMktChromeScale, 1)) calc(14px * var(--gzMktChromeScale, 1)) !important;
  border-radius: calc(14px * var(--gzMktChromeScale, 1)) !important;
  font-size: calc(14px * var(--gzMktChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="marketHub"] #modalTitle{
  line-height: 1;
  transform: translateY(calc(14px * var(--gzMktChromeScale, 1)));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="marketHub"] .gzModalScroll{
  max-height: none !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="marketHub"] #gzMktViewport{
  position: relative;
  width: var(--gzMktViewportW, 1024px) !important;
  height: var(--gzMktViewportH, 682.67px) !important;
  max-width: none;
  overflow: hidden;
  display: block;
  flex: none;
  margin: 0 auto;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="marketHub"] #gzMktScene{
  position: absolute;
  left: 0;
  top: 0;
  width: 1024px !important;
  height: 682.67px !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: none !important;
  transform-origin: top left;
  transform: scale(var(--gzMktSceneScale, 1));
  will-change: transform;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="highscore"]{
  width: 1120px !important;
  max-width: 1120px !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzHsModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) scale(var(--gzHsModalScale, 1)) !important;
  transform-origin: center center !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="highscore"] .gzModalHeaderActions{
  top: 10px;
  right: 10px;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="highscore"] #modalTitle{
  line-height: 1;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="highscore"] .gzModalScroll{
  max-height: 760px !important;
  overflow-y: auto !important;
}


#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="landQuestHub"]{
  width: 1024px !important;
  max-width: 1024px !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzLandModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) scale(var(--gzLandModalScale, 1)) !important;
  transform-origin: center center !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="landQuestHub"] .gzModalHeaderActions{
  top: 10px;
  right: 10px;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="landQuestHub"] #modalTitle{
  line-height: 1;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="landQuestHub"] .gzModalScroll{
  max-height: none !important;
  overflow: hidden !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="schoolHub"]{
  width: 1024px !important;
  max-width: 1024px !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzSchoolModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) scale(var(--gzSchoolModalScale, 1)) !important;
  transform-origin: center center !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="schoolHub"] .gzModalHeaderActions{
  top: 10px;
  right: 10px;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="schoolHub"] #modalTitle{
  line-height: 1;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="schoolHub"] .gzModalScroll{
  max-height: 760px !important;
  overflow-y: auto !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="messagesHub"]{
  width: 1024px !important;
  max-width: 1024px !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzMessagesModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) scale(var(--gzMessagesModalScale, 1)) !important;
  transform-origin: center center !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="messagesHub"] .gzModalHeaderActions{
  top: 10px;
  right: 10px;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="messagesHub"] #modalTitle{
  line-height: 1;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="messagesHub"] .gzModalScroll{
  height: 760px !important;
  min-height: 760px !important;
  max-height: 760px !important;
  overflow-y: auto !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="chatHub"]{
  width: 1024px !important;
  max-width: 1024px !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzChatModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) scale(var(--gzChatModalScale, 1)) !important;
  transform-origin: center center !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="chatHub"] .gzModalHeaderActions{
  top: 10px;
  right: 10px;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="chatHub"] #modalTitle{
  line-height: 1;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="chatHub"] .gzModalScroll{
  height: 760px !important;
  min-height: 760px !important;
  max-height: 760px !important;
  overflow: hidden !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="chatHub"] .gzModalSub{
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="chatHub"] .gzModalBodyV2{
  padding: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"]{
  width: 1024px !important;
  max-width: 1024px !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzInvModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) scale(var(--gzInvModalScale, 1)) !important;
  transform-origin: center center !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzModalHeaderActions{
  top: 10px;
  right: 10px;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] #modalTitle{
  line-height: 1;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzModalScroll{
  max-height: 760px !important;
  overflow-y: auto !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"]{
  --gzFrameScale: calc(.50 * var(--gzForgeChromeScale, 1));
  width: min(var(--gzForgeModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-width: min(var(--gzForgeModalW, var(--gzModalMaxW, 1024px)), calc(100vw - (var(--gzModalInset, 12px) * 2))) !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzForgeModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] .gzModalHeaderActions{
  top: calc(10px * var(--gzForgeChromeScale, 1));
  right: calc(10px * var(--gzForgeChromeScale, 1));
  gap: calc(8px * var(--gzForgeChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] .gzModalNavBtn{
  min-height: calc(34px * var(--gzForgeChromeScale, 1));
  padding: calc(8px * var(--gzForgeChromeScale, 1)) calc(14px * var(--gzForgeChromeScale, 1)) !important;
  border-radius: calc(14px * var(--gzForgeChromeScale, 1)) !important;
  font-size: calc(14px * var(--gzForgeChromeScale, 1));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] #modalTitle{
  line-height: 1;
  transform: translateY(calc(14px * var(--gzForgeChromeScale, 1)));
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] .gzFrameFill{
  background-color: rgba(12,7,5,.96) !important;
  background-image: url("/img/schmied.png?v=V0.107u_smforgebg1") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] .gzModalScroll{
  max-height: none !important;
  background: transparent !important;
  border-radius: calc(26px * var(--gzFrameScale)) !important;
  scrollbar-color: rgba(255,225,170,.24) transparent;
  scrollbar-width: thin;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] .gzModalScroll::-webkit-scrollbar-track{
  background: transparent !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] .gzModalScroll::-webkit-scrollbar-thumb{
  background: rgba(255,225,170,.18) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] .gzModalSub{
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] .gzModalBodyV2{
  padding: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] #gzForgeViewport{
  position: relative;
  width: var(--gzForgeViewportW, 1024px) !important;
  height: var(--gzForgeViewportH, 683px) !important;
  max-width: none;
  overflow: hidden;
  display: block;
  flex: none;
  margin: 0 auto;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="forgeHub"] #gzForgeScene{
  position: absolute;
  left: 0;
  top: 0;
  width: 1536px !important;
  height: 1024px !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: none !important;
  transform-origin: top left;
  transform: scale(var(--gzForgeSceneScale, 0.66667));
  will-change: transform;
}


#modal.gzFrameModal #modalSub,
#modal.gzFrameModal #modalBody,
#modal.gzFrameModal .panel,
#modal.gzFrameModal .panel2,
#modal.gzFrameModal .card,
#modal.gzFrameModal table,
#modal.gzFrameModal img,
#modal.gzFrameModal canvas{
  max-width: 100%;
}

#modal.gzFrameModal #modalBody{
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-gz-viewport="desktop-compact"] #modal.gzFrameModal.gzFrameModalDesktop .gzModalNavBtn,
html[data-gz-viewport="desktop-medium"] #modal.gzFrameModal.gzFrameModalDesktop .gzModalNavBtn{
  padding: 8px 10px;
}

@media (max-width: 1400px), (max-height: 820px){
  #modal.gzFrameModal.gzFrameModalDesktop .gzModalHeaderActions,
  #modal.gzFrameModal.gzFrameModalMobile .gzModalHeaderActions{
    top: 8px;
    right: 10px;
    gap: 6px;
  }
  #modal.gzFrameModal.gzFrameModalDesktop .gzModalBodyV2,
  #modal.gzFrameModal.gzFrameModalMobile .gzModalBodyV2{
    padding-left: max(14px, calc(18px * var(--gzFrameScale, 1)));
    padding-right: max(14px, calc(18px * var(--gzFrameScale, 1)));
  }
}

/* Real mobile split: no image-frame chrome, own CSS shell */
#modal.gzFrameModal.gzFrameModalMobile{
  --gzModalTop: 52px;
  --gzModalBottomGap: 10px;
  --gzMobileInset: 4px;
  --gzFramePadX: 10px;
  --gzFramePadTop: 10px;
  --gzFramePadBottom: 10px;
  --gzMobileHeaderH: 50px;
  width: clamp(380px, 98vw, 480px) !important;
  max-width: calc(100vw - (var(--gzMobileInset) * 2)) !important;
  min-height: 0 !important;
  height: calc(100dvh - var(--gzModalTop, 52px) - var(--gzModalBottomGap, 10px)) !important;
  max-height: calc(100dvh - var(--gzModalTop, 52px) - var(--gzModalBottomGap, 10px)) !important;
  border: 2px solid rgba(214,173,74,.72) !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(54,17,12,.96), rgba(23,14,10,.96)) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,236,181,.12) !important;
  overflow: hidden !important;
}

#modal.gzFrameModal.gzFrameModalMobile .gzFrameLayer,
#modal.gzFrameModal.gzFrameModalMobile .gzFrameFill{
  display: none !important;
}

#modal.gzFrameModal.gzFrameModalMobile .gzFrameHeader{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--gzMobileHeaderH);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(131,21,18,.98), rgba(94,8,8,.98));
  border-bottom: 1px solid rgba(214,173,74,.45);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.28);
  z-index: 20;
  pointer-events: none;
  border-radius: 28px 28px 0 0;
}

#modal.gzFrameModal.gzFrameModalMobile #modalTitle{
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .2px;
  color: #ffe7ae;
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
  padding: 0 92px 0 16px;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: none;
}

#modal.gzFrameModal.gzFrameModalMobile .gzModalHeaderActions{
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 30;
  gap: 6px;
}

#modal.gzFrameModal.gzFrameModalMobile .gzModalNavBtn{
  border: 1px solid rgba(214,173,74,.28) !important;
  background: linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.06)), rgba(0,0,0,.28) !important;
  color: var(--gz-text) !important;
  padding: 7px 10px;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

#modal.gzFrameModal.gzFrameModalMobile .gzModalScroll{
  position: absolute;
  left: 0;
  right: 0;
  top: var(--gzMobileHeaderH);
  bottom: 0;
  margin: 0 !important;
  padding: 10px var(--gzFramePadX) 16px var(--gzFramePadX);
  background: transparent;
  border-radius: 0 0 28px 28px;
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box;
}

#modal.gzFrameModal.gzFrameModalMobile .gzModalSub{
  text-align: center;
  opacity: .82;
  margin: 0;
  padding: 2px 6px 10px 6px;
}

#modal.gzFrameModal.gzFrameModalMobile .gzModalBodyV2{
  padding: 0 0 14px 0;
}

#modal.gzFrameModal.gzFrameModalMobile #modalBody{
  zoom: 1 !important;
  transform: none !important;
  width: auto !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

@media (max-width: 520px){
  :root{ --gzModalInset: 8px; }
  #modal.gzFrameModal.gzFrameModalMobile{
    width: clamp(380px, 98vw, 480px) !important;
    max-width: calc(100vw - 8px) !important;
  }
}

/* Unified modal button skin (source of truth) */
#modal.gzFrameModal{
  --gzModalBtnBg:
    linear-gradient(180deg, rgba(255,224,145,.10), rgba(255,224,145,.03)),
    rgba(14,10,7,.72);
  --gzModalBtnBgHover:
    linear-gradient(180deg, rgba(255,224,145,.14), rgba(255,224,145,.05)),
    rgba(18,13,9,.82);
  --gzModalBtnBgActive:
    linear-gradient(180deg, rgba(255,224,145,.08), rgba(255,224,145,.02)),
    rgba(10,7,5,.88);
  --gzModalBtnBorder: rgba(214,173,74,.34);
  --gzModalBtnBorderHover: rgba(255,225,145,.50);
  --gzModalBtnText: #ffe7ae;
  --gzModalBtnShadow: inset 0 1px 0 rgba(255,244,210,.06), 0 8px 18px rgba(0,0,0,.26);
  --gzModalBtnShadowHover: inset 0 1px 0 rgba(255,244,210,.08), 0 10px 22px rgba(0,0,0,.34);
}

#modal.gzFrameModal :is(
  .tab,
  button:not([data-gz-prof-charbtn]):not(#gzProfSchoolBtn),
  input[type="button"],
  input[type="submit"],
  .btn,
  .gzBtn,
  .gzBtnGhost,
  .gzBtnDanger,
  .gzModalNavBtn
){
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--gzModalBtnBorder) !important;
  background: var(--gzModalBtnBg) !important;
  color: var(--gzModalBtnText) !important;
  border-radius: 14px !important;
  box-shadow: var(--gzModalBtnShadow) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#modal.gzFrameModal :is(
  .tab,
  .gzModalNavBtn,
  .btn,
  .gzBtn,
  .gzBtnGhost,
  .gzBtnDanger,
  button:not([data-gz-prof-charbtn]):not(#gzProfSchoolBtn)
){
  min-height: 34px;
  font-weight: 800;
}

#modal.gzFrameModal .gzModalNavBtn{
  padding: 8px 14px !important;
}

#modal.gzFrameModal :is(
  .tab,
  button:not([data-gz-prof-charbtn]):not(#gzProfSchoolBtn),
  input[type="button"],
  input[type="submit"],
  .btn,
  .gzBtn,
  .gzBtnGhost,
  .gzBtnDanger,
  .gzModalNavBtn
):hover:not(:disabled){
  border-color: var(--gzModalBtnBorderHover) !important;
  background: var(--gzModalBtnBgHover) !important;
  box-shadow: var(--gzModalBtnShadowHover) !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#modal.gzFrameModal :is(
  .tab,
  button:not([data-gz-prof-charbtn]):not(#gzProfSchoolBtn),
  input[type="button"],
  input[type="submit"],
  .btn,
  .gzBtn,
  .gzBtnGhost,
  .gzBtnDanger,
  .gzModalNavBtn
):active:not(:disabled){
  background: var(--gzModalBtnBgActive) !important;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.22) !important;
  transform: translateY(0);
}

#modal.gzFrameModal :is(
  .tab,
  button:not([data-gz-prof-charbtn]):not(#gzProfSchoolBtn),
  input[type="button"],
  input[type="submit"],
  .btn,
  .gzBtn,
  .gzBtnGhost,
  .gzBtnDanger,
  .gzModalNavBtn
):disabled{
  opacity: .58 !important;
  filter: none !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: var(--gzModalBtnShadow) !important;
}

#modal.gzFrameModal :is(
  .tab.isActive,
  .btn.isActive,
  button.isActive,
  .tab[aria-pressed="true"],
  .btn[aria-pressed="true"],
  button[aria-pressed="true"],
  .gzMktBtn.isActive,
  .gzHSTab.isActive
){
  border-color: rgba(255,231,174,.48) !important;
  background: rgba(40,29,17,.86) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
  filter: brightness(1.03);
}

html[data-gz-viewport="desktop-compact"] #modal.gzFrameModal.gzFrameModalDesktop .gzModalNavBtn,
html[data-gz-viewport="desktop-medium"] #modal.gzFrameModal.gzFrameModalDesktop .gzModalNavBtn{
  padding: 8px 12px !important;
}

#modal.gzFrameModal.gzFrameModalMobile .gzModalNavBtn{
  padding: 7px 10px !important;
  min-height: 32px;
}


/* Arena desktop header buttons live outside #modal, so they need their own skin */
#gzArenaHdrBar .gzModalNavBtn,
#gzArenaHdrBar .gzArenaHdrBtn{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(214,173,74,.34) !important;
  background:
    linear-gradient(180deg, rgba(255,224,145,.10), rgba(255,224,145,.03)),
    rgba(14,10,7,.72) !important;
  color: #ffe7ae !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,244,210,.06), 0 8px 18px rgba(0,0,0,.26) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  min-height: 34px;
  padding: 8px 14px !important;
  font-weight: 800;
}

#gzArenaHdrBar .gzModalNavBtn:hover:not(:disabled),
#gzArenaHdrBar .gzArenaHdrBtn:hover:not(:disabled){
  border-color: rgba(255,225,145,.50) !important;
  background:
    linear-gradient(180deg, rgba(255,224,145,.14), rgba(255,224,145,.05)),
    rgba(18,13,9,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,210,.08), 0 10px 22px rgba(0,0,0,.34) !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#gzArenaHdrBar .gzModalNavBtn:active:not(:disabled),
#gzArenaHdrBar .gzArenaHdrBtn:active:not(:disabled){
  background:
    linear-gradient(180deg, rgba(255,224,145,.08), rgba(255,224,145,.02)),
    rgba(10,7,5,.88) !important;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.22) !important;
  transform: translateY(0);
}

#gzArenaHdrBar .gzModalNavBtn:disabled,
#gzArenaHdrBar .gzArenaHdrBtn:disabled{
  opacity: .58 !important;
  filter: none !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,244,210,.06), 0 8px 18px rgba(0,0,0,.26) !important;
}

/* ===== HUD currency lock: same positioning logic on all breakpoints ===== */
.gzCenterTop,
#gzCenterTop{
  position: fixed !important;
  left: 50% !important;
  top: calc(var(--gzCenterTopInset, var(--gzRootPad)) + env(safe-area-inset-top)) !important;
  transform: translateX(-50%) scale(var(--gzTopScale)) !important;
  transform-origin: top center !important;
  width: auto !important;
  justify-content: center !important;
  grid-column: auto !important;
  z-index: 6000 !important;
  pointer-events: none !important;
}
#gzCenterTop #gzGoldLevel.gzCurrencyHud{
  flex-wrap: nowrap !important;
  justify-content: center !important;
}
@media (max-width: 1500px) and (min-width: 901px){
  .gzCenterTop,
  #gzCenterTop{ --gzCenterTopInset: 14px; }
}
@media (max-width: 1050px) and (min-width: 901px){
  .gzCenterTop,
  #gzCenterTop{ --gzCenterTopInset: 10px; }
}
@media (max-width: 900px){
  .gzCenterTop,
  #gzCenterTop{ --gzCenterTopInset: 8px; }
}
@media (max-width: 520px){
  .gzCenterTop,
  #gzCenterTop{ --gzCenterTopInset: 6px; }
}
@media (max-width: 420px){
  .gzCenterTop,
  #gzCenterTop{ --gzCenterTopInset: 4px; }
}
@media (max-height: 900px) and (min-width: 901px){
  .gzCenterTop,
  #gzCenterTop{ --gzCenterTopInset: 12px; }
}
@media (max-height: 760px) and (min-width: 901px){
  .gzCenterTop,
  #gzCenterTop{ --gzCenterTopInset: 8px; }
}




/* ===== Shop icon CSS pulse + sparkles (no rectangular shine overlay) ===== */
#gzMenuRight.gzRightDock .gzShopDockBtn{
  isolation: isolate !important;
  overflow: visible !important;
  border-radius: 16% !important;
}

#gzMenuRight.gzRightDock .gzShopDockBtn img{
  position: relative !important;
  z-index: 1 !important;
  will-change: filter, transform !important;
  animation: gzShopIconGoldPulse 3.2s ease-in-out infinite !important;
}

#gzMenuRight.gzRightDock .gzShopDockBtn::before{
  content: none !important;
  display: none !important;
}

#gzMenuRight.gzRightDock .gzShopDockBtn::after{
  content: "" !important;
  position: absolute !important;
  inset: -2% !important;
  border-radius: 16% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background:
    radial-gradient(circle at 20% 24%, rgba(255,255,230,.95) 0 1.4px, rgba(255,206,78,.65) 1.5px 2.8px, transparent 3.4px),
    radial-gradient(circle at 73% 19%, rgba(255,255,230,.90) 0 1.2px, rgba(255,206,78,.55) 1.3px 2.5px, transparent 3.2px),
    radial-gradient(circle at 82% 56%, rgba(255,255,230,.85) 0 1.1px, rgba(255,206,78,.50) 1.2px 2.4px, transparent 3.1px),
    radial-gradient(circle at 34% 70%, rgba(255,255,230,.85) 0 1.1px, rgba(255,206,78,.50) 1.2px 2.3px, transparent 3px),
    radial-gradient(circle at 55% 38%, rgba(120,210,255,.95) 0 1.2px, rgba(80,170,255,.55) 1.3px 2.5px, transparent 3.2px);
  filter: drop-shadow(0 0 5px rgba(255,202,72,.85));
  opacity: .34;
  transform: scale(.985);
  animation: gzShopIconSparkle 2.7s ease-in-out infinite;
}

#gzMenuRight.gzRightDock .gzShopDockBtn:hover img{
  transform: scale(1.045) !important;
  filter: brightness(1.16) saturate(1.10) drop-shadow(0 10px 24px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(255,196,64,.42)) !important;
}

#gzMenuRight.gzRightDock .gzShopDockBtn:hover::after{
  opacity: .82;
  animation-duration: 1.7s;
}

#gzMenuRight.gzRightDock .gzShopDockBtn.gzActive img{
  filter: brightness(1.12) saturate(1.08) drop-shadow(0 12px 26px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,196,64,.36)) !important;
}

@keyframes gzShopIconGoldPulse{
  0%, 100%{
    filter: brightness(1) saturate(1) drop-shadow(0 8px 18px rgba(0,0,0,.30));
  }
  48%{
    filter: brightness(1.13) saturate(1.09) drop-shadow(0 10px 22px rgba(0,0,0,.38)) drop-shadow(0 0 16px rgba(255,190,64,.34));
  }
}

@keyframes gzShopIconSparkle{
  0%, 100%{ opacity: .22; transform: scale(.985) rotate(0deg); }
  28%{ opacity: .76; transform: scale(1.01) rotate(.001deg); }
  54%{ opacity: .34; transform: scale(.995) rotate(0deg); }
  74%{ opacity: .66; transform: scale(1.006) rotate(.001deg); }
}

@media (prefers-reduced-motion: reduce){
  #gzMenuRight.gzRightDock .gzShopDockBtn img,
  #gzMenuRight.gzRightDock .gzShopDockBtn::after{
    animation: none !important;
  }
}

/* ===== Shop Hub modal + dock placement ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"]{
  width: 1024px !important;
  max-width: 1024px !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzShopModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) scale(var(--gzShopModalScale, 1)) !important;
  transform-origin: center center !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzModalHeaderActions{
  top: 10px;
  right: 10px;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] #modalTitle{
  line-height: 1;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzModalScroll{
  height: 760px !important;
  min-height: 760px !important;
  max-height: 760px !important;
  overflow-y: auto !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzModalBodyV2,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] #shop.panel{
  height: 100% !important;
  min-height: 100% !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzShopWrap{
  height: 100% !important;
  min-height: 100% !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzModalSub{
  display: none !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzModalBodyV2{
  padding: 0 !important;
}

/* ===== Shop background full-frame overlay (V0.108_shopbg6) ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzFrameFill{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,226,148,.26) 0%, rgba(255,201,102,.12) 34%, transparent 62%),
    linear-gradient(180deg, rgba(255,220,140,.10) 0%, rgba(22,13,7,.22) 42%, rgba(7,4,3,.66) 78%, rgba(2,1,1,.90) 100%),
    url("/img/shop_bg.png") center center / cover no-repeat !important;
  background-color:#090604 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzModalScroll{
  background:transparent !important;
  background-color:transparent !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzShopWrap{
  background:transparent !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] #gzHubMount,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzModalBodyV2,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] #shop.panel,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="shopHub"] .gzShopWrap{
  height:100% !important;
  min-height:100% !important;
}

/* ===== Inventar 2.0 – breite Charakter-/Itembox-Szene ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"]{
  --gzFrameScale: .50;
  width: 1900px !important;
  max-width: 1900px !important;
  max-height: none !important;
  overflow: visible !important;
  left: 50% !important;
  top: calc(50% + var(--gzInvModalShiftDown, 0px)) !important;
  transform: translate(-50%, -50%) scale(var(--gzInvModalScale, 1)) !important;
  transform-origin: center center !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzModalHeaderActions{
  top: 10px;
  right: 10px;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] #modalTitle{
  line-height: 1;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzModalSub{
  display:none !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzModalScroll{
  width: 1900px !important;
  max-width: 1900px !important;
  height: 1200px !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 0 0 26px 26px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzModalBodyV2,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] #modalBody,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] #inv{
  width: 1900px !important;
  height: 1200px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzFrameFill{
  background: rgba(0,0,0,.92) !important;
}
.gzInvScene{
  position:relative;
  width:1900px;
  height:1200px;
  overflow:hidden;
  color:#f1e2bf;
  background:#050403 url('/img/inventar/inventar_bg.png') center center / cover no-repeat;
  font-family:inherit;
  user-select:none;
}
.gzInvScene *{ box-sizing:border-box; }
.gzInvDollLayer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  -webkit-mask-image:url('/img/inventar/inventar_charakter_maske.png');
  mask-image:url('/img/inventar/inventar_charakter_maske.png');
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.gzInvDollImg{
  position:absolute;
  left:25px;
  top:0;
  width:941px;
  height:1200px;
  object-fit:contain;
  object-position:center bottom;
  display:block;
}
.gzInvDollEquip{ z-index:2; }
.gzInvEquipSlots{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:auto;
}
.gzInvEquipSlot{
  position:absolute;
  border:0;
  border-radius:7px;
  background:rgba(0,0,0,.02);
  color:rgba(255,233,181,.62);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px;
  transition:box-shadow .14s ease, background .14s ease, transform .14s ease;
}
.gzInvEquipSlot:hover,
.gzInvEquipSlot.isDragOver{
  background:rgba(255,218,118,.10);
  box-shadow:0 0 20px rgba(255,205,93,.44), inset 0 0 18px rgba(255,205,93,.12);
}
.gzInvEquipSlot.isDragOver{ transform:scale(1.035); }
.gzInvEquipSlot img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.65));
}
.gzInvEquipSlot span{
  font-size:13px;
  line-height:1.05;
  font-weight:900;
  text-align:center;
  text-shadow:0 2px 5px rgba(0,0,0,.95);
  opacity:.75;
}
.gzInvEquipSlot i,
.gzInvItemIcon i{
  position:absolute;
  right:5px;
  bottom:5px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:20px;
  padding:0 5px;
  border-radius:8px;
  background:rgba(0,0,0,.68);
  border:1px solid rgba(255,231,174,.28);
  color:#ffe7ae;
  white-space:nowrap;
  line-height:1;
  font-style:normal;
  font-weight:900;
  font-size:12px;
  line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.gzInvRightPanel{
  position:absolute;
  left:1000px;
  top:78px;
  width:835px;
  height:1050px;
  z-index:9;
  display:grid;
  grid-template-rows:auto auto 1fr 278px;
  gap:14px;
  pointer-events:auto;
}
.gzInvControls,
.gzInvGrid,
.gzInvDetail,
.gzInvWarnBox{
  border:1px solid rgba(214,173,74,.22);
  background:linear-gradient(180deg, rgba(17,12,8,.62), rgba(7,5,3,.72));
  box-shadow:0 16px 38px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,241,194,.06);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.gzInvControls{
  border-radius:22px;
  padding:16px 18px;
}
.gzInvTitle{
  font-size:30px;
  line-height:1;
  font-weight:900;
  color:#ffe7ae;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
  margin-bottom:12px;
}
.gzInvFilterRow,
.gzInvSearchRow{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.gzInvSearchRow{ margin-top:10px; }
.gzInvFilterBtn,
.gzInvSearchRow input,
.gzInvSearchRow select,
.gzInvSearchRow button,
.gzInvActionRow button{
  border:1px solid rgba(214,173,74,.30);
  background:linear-gradient(180deg, rgba(255,224,145,.10), rgba(255,224,145,.03)), rgba(12,8,5,.68);
  color:#ffe7ae;
  border-radius:12px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 7px 16px rgba(0,0,0,.22);
}
.gzInvFilterBtn,
.gzInvSearchRow button,
.gzInvActionRow button{
  cursor:pointer;
  padding:8px 12px;
}
.gzInvFilterBtn:hover,
.gzInvFilterBtn.isActive,
.gzInvSearchRow button:hover,
.gzInvActionRow button:hover{
  border-color:rgba(255,225,145,.55);
  background:linear-gradient(180deg, rgba(255,224,145,.18), rgba(255,224,145,.05)), rgba(18,13,9,.84);
}
.gzInvSearchRow input,
.gzInvSearchRow select{
  height:38px;
  padding:8px 12px;
  outline:none;
}
.gzInvSearchRow input{ flex:1 1 220px; min-width:180px; color:#f7ead2; }
.gzInvSearchRow select{ flex:0 0 auto; max-width:170px; color:#f7ead2; }
.gzInvSearchRow option{ background:#15100b; color:#f7ead2; }
.gzInvWarnBox{
  border-radius:18px;
  padding:12px 16px;
  color:#ffc8b8;
  display:flex;
  gap:14px;
  align-items:center;
}
.gzInvGrid{
  min-height:0;
  border-radius:22px;
  padding:14px;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  align-content:start;
  gap:10px;
  scrollbar-width:thin;
}
.gzInvGrid::-webkit-scrollbar{ width:10px; }
.gzInvGrid::-webkit-scrollbar-track{ background:rgba(0,0,0,.20); border-radius:999px; }
.gzInvGrid::-webkit-scrollbar-thumb{ background:rgba(214,173,74,.35); border-radius:999px; }
.gzInvItemCard{
  position:relative;
  min-width:0;
  min-height:134px;
  border:1px solid rgba(214,173,74,.22);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.54));
  color:#f4e6c8;
  cursor:pointer;
  padding:9px 7px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  text-align:center;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.gzInvItemCard:hover,
.gzInvItemCard.isSelected{
  transform:translateY(-1px);
  border-color:rgba(255,225,145,.56);
  box-shadow:0 0 22px rgba(214,173,74,.18), inset 0 1px 0 rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(53,36,15,.42), rgba(0,0,0,.56));
}
.gzInvItemCard.isEquipped::after{
  content:'angelegt';
  position:absolute;
  top:7px;
  left:7px;
  font-size:10px;
  font-weight:900;
  color:#d9ffc9;
  background:rgba(14,60,22,.50);
  border:1px solid rgba(130,255,153,.22);
  border-radius:999px;
  padding:2px 6px;
}
.gzInvItemIcon{
  position:relative;
  width:62px;
  height:62px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
}
.gzInvItemIcon img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.60));
}
.gzInvItemIcon u{
  position:absolute;
  top:-4px;
  right:-4px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff3030;
  box-shadow:0 0 10px 3px rgba(255,48,48,.80), 0 0 0 2px rgba(0,0,0,.35);
  text-decoration:none;
}
.gzInvItemName{
  width:100%;
  min-height:32px;
  font-size:13px;
  line-height:1.15;
  font-weight:900;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gzInvItemMeta{
  width:100%;
  font-size:11px;
  line-height:1.15;
  color:rgba(241,226,191,.70);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gzInvDetail{
  border-radius:22px;
  padding:16px;
  overflow:auto;
  min-height:0;
}
.gzInvDetailTop{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:12px;
  align-items:center;
}
.gzInvDetailIcon{
  width:70px;
  height:70px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(214,173,74,.24);
  background:rgba(255,255,255,.045);
}
.gzInvDetailIcon img{ width:100%; height:100%; object-fit:contain; }
.gzInvDetail h3{
  margin:0;
  color:#ffe7ae;
  font-size:22px;
  line-height:1.12;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gzInvDetail p{
  margin:6px 0 0;
  color:rgba(241,226,191,.72);
  font-weight:800;
}
.gzInvStatLine{
  margin-top:12px;
  color:rgba(241,226,191,.92);
  font-weight:800;
}
.gzInvCompare{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px 10px;
  align-items:center;
}
.gzInvCompareHead,
.gzInvCompareCurrent{
  grid-column:1/-1;
  color:rgba(241,226,191,.78);
  font-weight:800;
}
.gzInvCompareHead strong{ margin-left:8px; }
.gzInvDeltaRow{
  min-width:0;
  display:grid;
  grid-template-columns:auto auto auto;
  gap:6px;
  align-items:center;
  padding:6px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.045);
}
.gzInvDeltaRow span{ opacity:.75; }
.gzInvDeltaRow b{ color:#fff1c9; }
.gzInvDeltaRow em{ font-style:normal; font-weight:900; }
.gzInvDetail .isGood{ color:#8ff0a2; }
.gzInvDetail .isBad{ color:#ff9a86; }
.gzInvDetail .isZero{ color:#ffe7ae; opacity:.78; }
.gzInvActionRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.gzInvActionRow button:disabled{
  cursor:not-allowed;
  opacity:.55;
}
.gzInvEmpty{
  color:rgba(241,226,191,.72);
  font-weight:800;
  padding:18px;
}
@media (max-width: 900px){
  #modal.gzFrameModal.gzFrameModalMobile[data-gz-ctx="inventoryHub"] .gzInvScene{
    transform-origin:top left;
  }
}

/* ===== Inventar 2.0 Korrektur: kompaktere Höhe + echte Itemboxen ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvGrid{
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows:126px !important;
  gap:10px !important;
  padding:12px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvItemCard{
  min-height:126px !important;
  height:126px !important;
  width:100% !important;
  padding:8px 6px 7px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  text-align:center !important;
  border:1px solid rgba(214,173,74,.34) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(26,18,10,.74), rgba(5,4,3,.82)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,236,180,.035), 0 7px 14px rgba(0,0,0,.20) !important;
  overflow:hidden !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvItemCard:hover,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvItemCard.isSelected{
  border-color:rgba(255,225,145,.64) !important;
  background:linear-gradient(180deg, rgba(58,39,17,.82), rgba(7,5,3,.86)) !important;
  box-shadow:0 0 22px rgba(214,173,74,.18), inset 0 0 0 1px rgba(255,236,180,.08) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon{
  width:58px !important;
  height:56px !important;
  flex:0 0 56px !important;
  border-radius:11px !important;
  background:rgba(255,238,176,.055) !important;
  border:1px solid rgba(214,173,74,.20) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon img{
  max-width:100% !important;
  max-height:100% !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemName{
  min-height:30px !important;
  max-height:30px !important;
  font-size:12px !important;
  line-height:1.14 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemMeta{
  font-size:10px !important;
  line-height:1.1 !important;
}


/* ===== Inventar 2.0 Korrektur 2: Profilhöhe + klickbare rechte Itembox ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlots{
  pointer-events:none !important;
  z-index:12 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot{
  pointer-events:auto !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvRightPanel{
  z-index:24 !important;
  pointer-events:auto !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvGrid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows:142px !important;
  gap:12px !important;
  padding:14px !important;
  overflow-y:auto !important;
  pointer-events:auto !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvItemCard{
  min-height:142px !important;
  height:142px !important;
  padding:10px 8px 8px !important;
  gap:6px !important;
  border-radius:16px !important;
  pointer-events:auto !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon{
  width:70px !important;
  height:68px !important;
  flex-basis:68px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemName{
  min-height:38px !important;
  max-height:38px !important;
  font-size:16px !important;
  line-height:1.18 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemMeta{
  font-size:13px !important;
  line-height:1.15 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvControls,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetail,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvWarnBox,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvSearchRow input,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvSearchRow select,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvSearchRow button,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFilterBtn,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvActionRow button{
  pointer-events:auto !important;
}

/* ===== Inventar 2.0 Korrektur 3: Hände, größere Item-Icons, größere Bedienung ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvTitle{
  display:none !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvControls{
  padding:20px 22px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFilterRow{
  gap:12px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvSearchRow{
  margin-top:16px !important;
  gap:12px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFilterBtn,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvSearchRow button,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvActionRow button{
  font-size:17px !important;
  line-height:1.1 !important;
  padding:11px 17px !important;
  border-radius:14px !important;
  min-height:44px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvSearchRow input,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvSearchRow select{
  height:46px !important;
  font-size:16px !important;
  padding:10px 14px !important;
  border-radius:14px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzModalNavBtn{
  font-size:17px !important;
  padding:10px 16px !important;
  min-height:42px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvGrid{
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows:126px !important;
  gap:10px !important;
  padding:14px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvItemCard{
  min-height:126px !important;
  height:126px !important;
  padding:10px !important;
  justify-content:center !important;
  gap:0 !important;
  border-radius:16px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon{
  width:98px !important;
  height:98px !important;
  flex:0 0 98px !important;
  border-radius:15px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemName,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemMeta{
  display:none !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i{
  right:5px !important;
  bottom:5px !important;
  min-width:auto !important;
  height:22px !important;
  padding:0 6px !important;
  font-size:13px !important;
  white-space:nowrap !important;
  line-height:1 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i.gzRarity-rare,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i.gzRarity-rare{ color:#58b5ff !important; }
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i.gzRarity-epic,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i.gzRarity-epic{ color:#cf79ff !important; }
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i.gzRarity-legendary,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i.gzRarity-legendary{ color:#ffd35c !important; }
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i.gzRarity-mythic,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i.gzRarity-mythic{ color:#ff6b6b !important; }
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemCard.isEquipped::after{
  font-size:11px !important;
  padding:3px 7px !important;
}


/* ===== Inventar 2.0 Korrektur 4: Profilhöhe, sauberer Hintergrund, Seltenheits-Hintergründe ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"]{
  width:1900px !important;
  max-width:1900px !important;
  max-height:none !important;
  overflow:visible !important;
  left:50% !important;
  top:calc(50% + var(--gzInvModalShiftDown, 0px)) !important;
  transform:translate(-50%, -50%) scale(var(--gzInvModalScale, 1)) !important;
  transform-origin:center center !important;
  --gzFrameScale:.50;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzFrameFill{
  background:rgba(3,2,1,.96) !important;
  border-radius:calc(26px * var(--gzFrameScale)) !important;
  overflow:hidden !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzModalScroll{
  width:1900px !important;
  max-width:1900px !important;
  height:1200px !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  border-radius:calc(26px * var(--gzFrameScale)) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzModalBodyV2,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] #modalBody,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] #inv{
  width:1900px !important;
  height:1200px !important;
  max-width:1900px !important;
  max-height:1200px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvScene{
  width:1900px !important;
  height:1200px !important;
  max-width:none !important;
  max-height:none !important;
  overflow:hidden !important;
  background-color:#050403 !important;
  background-image:url('/img/inventar/inventar_bg.png?v=inv_bg_fit2') !important;
  background-size:100% 100% !important;
  background-position:0 0 !important;
  background-repeat:no-repeat !important;
  border-radius:calc(26px * var(--gzFrameScale)) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvRightPanel{
  left:1000px !important;
  top:86px !important;
  width:835px !important;
  height:1020px !important;
  grid-template-rows:auto auto minmax(0, 1fr) minmax(0, 260px) !important;
  gap:14px !important;
  overflow:hidden !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvGrid{
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows:122px !important;
  gap:10px !important;
  padding:12px !important;
  overflow-y:auto !important;
  pointer-events:auto !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvItemCard{
  min-height:122px !important;
  height:122px !important;
  padding:8px !important;
  justify-content:center !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg, rgba(31,22,12,.72), rgba(5,4,3,.82)) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon{
  position:relative !important;
  width:96px !important;
  height:96px !important;
  flex:0 0 96px !important;
  border-radius:15px !important;
  overflow:hidden !important;
  background:rgba(255,238,176,.055) !important;
  border:1px solid rgba(214,173,74,.20) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon::before,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetailIcon::before,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background-image:url('/img/item_bg.png');
  background-size:100% 100%;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:1;
  pointer-events:none;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemCard.gzRarity-rare .gzInvItemIcon::before,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot.gzRarity-rare::before,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetailIcon.gzRarity-rare::before{
  background-image:url('/img/items/rarity/selten.png'), url('/img/item_bg.png');
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemCard.gzRarity-epic .gzInvItemIcon::before,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot.gzRarity-epic::before,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetailIcon.gzRarity-epic::before{
  background-image:url('/img/items/rarity/epic.png'), url('/img/item_bg.png');
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemCard.gzRarity-legendary .gzInvItemIcon::before,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot.gzRarity-legendary::before,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetailIcon.gzRarity-legendary::before{
  background-image:url('/img/items/rarity/legendaer.png'), url('/img/item_bg.png');
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemCard.gzRarity-mythic .gzInvItemIcon::before,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot.gzRarity-mythic::before,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetailIcon.gzRarity-mythic::before{
  background-image:url('/img/items/rarity/mystisch.png'), url('/img/item_bg.png');
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon img,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon u{
  position:relative !important;
  z-index:2 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetailIcon{
  position:relative !important;
  overflow:hidden !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetailIcon img{
  position:relative !important;
  z-index:2 !important;
}

#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot{
  overflow:hidden !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot img,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot span,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i{
  position:relative !important;
  z-index:2 !important;
}

/* ===== Inventar 2.0 Korrektur 5: Overlays wirklich über dem Bild + Detailbereich nicht abschneiden ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvRightPanel{
  grid-template-rows:auto auto minmax(0, 1fr) minmax(292px, 292px) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetail{
  min-height:0 !important;
  height:292px !important;
  max-height:292px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:14px 16px 26px 16px !important;
  box-sizing:border-box !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvGrid{
  min-height:0 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot{
  isolation:isolate !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon img,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot img{
  position:relative !important;
  z-index:2 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i{
  position:absolute !important;
  right:5px !important;
  bottom:5px !important;
  z-index:30 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:auto !important;
  width:auto !important;
  height:22px !important;
  padding:0 6px !important;
  border-radius:8px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  transform:none !important;
  background:rgba(0,0,0,.72) !important;
  border:1px solid rgba(255,231,174,.26) !important;
  text-shadow:0 1px 4px rgba(0,0,0,.95) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i.gzRarity-rare,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i.gzRarity-rare{ color:#58b5ff !important; }
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i.gzRarity-epic,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i.gzRarity-epic{ color:#cf79ff !important; }
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i.gzRarity-legendary,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i.gzRarity-legendary{ color:#ffd35c !important; }
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i.gzRarity-mythic,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i.gzRarity-mythic{ color:#ff6b6b !important; }
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemCard.isEquipped::after{
  z-index:40 !important;
  top:5px !important;
  left:5px !important;
  pointer-events:none !important;
}


/* ===== Inventar 2.0 Korrektur 6: schärfere Itembilder + rechte Itembox berechnet erweitert ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvRightPanel{
  /* 1900px Modalbreite - 1000px linker Start - 42px Sicherheitsabstand zum Rahmen = 858px */
  width:858px !important;
  height:1080px !important;
  grid-template-rows:auto auto minmax(0, 1fr) minmax(320px, 320px) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetail{
  height:320px !important;
  max-height:320px !important;
  overflow:visible !important;
  padding-bottom:20px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvGrid{
  grid-auto-rows:128px !important;
  gap:11px !important;
  padding:13px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvItemCard{
  height:128px !important;
  min-height:128px !important;
  padding:9px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon{
  width:104px !important;
  height:104px !important;
  flex-basis:104px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:none !important;
  image-rendering:auto !important;
  backface-visibility:hidden !important;
  transform:translateZ(0) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot img,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetailIcon img{
  filter:none !important;
  image-rendering:auto !important;
  backface-visibility:hidden !important;
  transform:translateZ(0) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon i,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvEquipSlot i{
  z-index:60 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemCard.isEquipped::after{
  z-index:70 !important;
}

/* ===== Inventar 2.0 Korrektur 7: Neu-Punkt oben rechts + freie Inventar-Belegung + Schrift lesbarer ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvItemIcon u{
  position:absolute !important;
  top:6px !important;
  right:6px !important;
  left:auto !important;
  bottom:auto !important;
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  display:block !important;
  border-radius:50% !important;
  background:#ff3030 !important;
  box-shadow:0 0 10px 3px rgba(255,48,48,.82), 0 0 0 2px rgba(0,0,0,.45) !important;
  text-decoration:none !important;
  transform:none !important;
  z-index:90 !important;
  pointer-events:none !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFreeBox{
  color:#d9ffd0 !important;
  border-color:rgba(111,255,135,.34) !important;
  background:linear-gradient(180deg, rgba(13,48,18,.52), rgba(6,20,8,.58)) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFreeBox b{
  color:#8fff9a !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFreeBox span{
  color:#f4ffe9 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFullBox{
  color:#ffd5c9 !important;
  border-color:rgba(255,120,90,.38) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFullBox b{
  color:#ff9a82 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvWarnBox{
  font-size:15px !important;
  line-height:1.2 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvWarnBox b,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvWarnBox span{
  font-size:15px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetail{
  font-size:15px !important;
  line-height:1.22 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetail h3{
  font-size:24px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDetail p,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvStatLine,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvCompareHead,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvCompareCurrent,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvDeltaRow{
  font-size:15px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvActionRow button{
  font-size:17px !important;
}

/* ===== Inventar 2.0 Korrektur 9: Inventar-Erweiterung + Statusanzeige ===== */
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvWarnBox{
  font-size:16px !important;
  font-weight:900 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFreeBox{
  color:#d9ffd0 !important;
  border-color:rgba(111,255,135,.42) !important;
  background:linear-gradient(180deg, rgba(13,58,18,.58), rgba(5,25,8,.64)) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFreeBox b{
  color:#82ff93 !important;
  text-shadow:0 0 9px rgba(90,255,110,.30) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvFullBox{
  background:linear-gradient(180deg, rgba(80,22,12,.60), rgba(25,6,4,.66)) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvExpandCard{
  border:1px dashed rgba(145,255,155,.48) !important;
  background:linear-gradient(180deg, rgba(16,54,22,.42), rgba(5,16,7,.70)) !important;
  box-shadow:inset 0 0 18px rgba(105,255,120,.10) !important;
  color:#dfffca !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:6px !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvExpandCard:hover{
  border-color:rgba(166,255,176,.75) !important;
  box-shadow:0 0 18px rgba(98,255,114,.18), inset 0 0 24px rgba(105,255,120,.15) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvExpandIcon{
  width:72px !important;
  height:72px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  font-size:62px !important;
  line-height:.9 !important;
  font-weight:900 !important;
  color:#8fff9a !important;
  text-shadow:0 0 14px rgba(105,255,120,.44), 0 2px 0 rgba(0,0,0,.55) !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvExpandCard small,
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvExpandCard em{
  font-style:normal !important;
  font-size:13px !important;
  font-weight:900 !important;
  color:#f2ffe8 !important;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] button.gzInvExpandCard em{
  color:#9effab !important;
}


.gzInvExpandConfirmShade{
  position:fixed;
  inset:0;
  z-index:10075;
  display:grid;
  place-items:center;
  padding:20px;
  box-sizing:border-box;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(2px);
}
.gzInvExpandConfirmBox{
  width:min(560px, calc(100vw - 32px));
  border:1px solid rgba(255,218,126,.42);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,218,126,.20), transparent 46%),
    linear-gradient(180deg, rgba(48,30,15,.96), rgba(10,7,5,.97));
  box-shadow:inset 0 1px 0 rgba(255,244,210,.12), 0 28px 80px rgba(0,0,0,.62), 0 0 36px rgba(255,186,74,.12);
  padding:22px;
  color:#f8e8bd;
  position:relative;
  overflow:hidden;
  animation:gzInvExpandConfirmIn .18s ease-out both;
  font-family:inherit;
}
.gzInvExpandConfirmBox::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,229,157,.72), transparent);
}
.gzInvExpandConfirmTitle{
  margin:0 0 9px;
  color:#ffe7a8;
  font-size:25px;
  line-height:1.15;
  font-weight:950;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}
.gzInvExpandConfirmText{
  margin:0;
  color:rgba(255,239,205,.80);
  font-size:16px;
  line-height:1.45;
}
.gzInvExpandConfirmDeal{
  margin:18px 0 0;
  border:1px solid rgba(226,181,86,.24);
  border-radius:17px;
  padding:14px 16px;
  background:rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.gzInvExpandConfirmIcon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#73e38a;
  font-size:38px;
  font-weight:950;
  line-height:1;
  background:radial-gradient(circle at 50% 35%, rgba(95,231,123,.30), rgba(12,46,20,.36) 68%, rgba(0,0,0,.28));
  border:1px solid rgba(115,227,138,.38);
  box-shadow:0 0 20px rgba(115,227,138,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
.gzInvExpandConfirmInfo{
  flex:1 1 auto;
  min-width:0;
}
.gzInvExpandConfirmGold{
  color:#ffd66e;
  font-size:21px;
  font-weight:950;
  text-shadow:0 0 14px rgba(255,185,64,.22);
}
.gzInvExpandConfirmHint{
  margin-top:3px;
  color:rgba(255,239,205,.58);
  font-size:13px;
  font-weight:800;
}
.gzInvExpandConfirmPrice{
  color:#d6f4ff;
  font-size:19px;
  font-weight:950;
  text-shadow:0 0 13px rgba(65,185,255,.34);
  white-space:nowrap;
}
.gzInvExpandConfirmActions{
  margin-top:20px;
  display:flex;
  justify-content:flex-end;
  gap:11px;
}
.gzInvExpandConfirmBtn{
  appearance:none;
  border:1px solid rgba(255,218,126,.30);
  border-radius:999px;
  padding:10px 18px;
  background:linear-gradient(180deg, rgba(55,35,18,.88), rgba(16,10,6,.90));
  color:#ffe6a8;
  font-size:16px;
  font-weight:950;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,244,210,.08), 0 10px 22px rgba(0,0,0,.22);
}
.gzInvExpandConfirmBtn:hover{ filter:brightness(1.08); border-color:rgba(255,229,157,.54); }
.gzInvExpandConfirmBtn:focus-visible{ outline:2px solid rgba(255,229,157,.70); outline-offset:2px; }
.gzInvExpandConfirmBtn.isCancel{
  color:rgba(255,239,205,.78);
  border-color:rgba(255,239,205,.18);
  background:rgba(0,0,0,.22);
}
@keyframes gzInvExpandConfirmIn{
  from{ opacity:0; transform:translateY(6px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}


/* ===== Inventar: benutzbare Items / PowMod-Tränke ===== */
.gzInvUseBtn{
  border-color:rgba(88,202,255,.58) !important;
  background:linear-gradient(180deg, rgba(42,143,213,.30), rgba(14,59,102,.42)) !important;
  color:#e8f6ff !important;
  font-weight:900 !important;
}
.gzInvUseBtn:hover{
  filter:brightness(1.10);
}
.gzInvStackBadge{
  position:absolute;
  right:4px;
  bottom:4px;
  min-width:24px;
  height:22px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff4c8;
  background:rgba(18,12,4,.78);
  border:1px solid rgba(255,210,115,.42);
  box-shadow:0 4px 10px rgba(0,0,0,.55);
  font-size:12px;
  line-height:1;
  font-weight:950;
  font-style:normal;
  text-decoration:none;
  z-index:95;
  pointer-events:none;
}
#modal.gzFrameModal.gzFrameModalDesktop[data-gz-ctx="inventoryHub"] .gzInvStackBadge{
  right:7px !important;
  bottom:7px !important;
  min-width:28px !important;
  height:24px !important;
  font-size:13px !important;
}


/* ===== Admin overlay polish – V0.107zzs =====
   Keep the Admin layer above HUD currencies and Top-3 overlays. */
#admin.panel{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9600 !important;
  width: 100vw !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  padding: clamp(24px, 4vh, 46px) clamp(18px, 4vw, 56px) !important;
  background: rgba(0,0,0,.50) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto !important;
}
#admin.panel .gzAdminWrap{
  position: relative !important;
  z-index: 1 !important;
  width: min(100%, 1060px) !important;
  max-width: 1060px !important;
  margin: 0 auto !important;
}
#admin.panel .gzAdminWrap > div{
  background: rgba(12,10,6,.76) !important;
  border-color: rgba(235,201,126,.22) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,239,197,.07) !important;
}
.gzAdminHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}
.gzAdminHead h2{
  margin:0;
}
.gzAdminCloseBtn{
  width:42px;
  height:42px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(235,201,126,.42);
  background:linear-gradient(180deg, rgba(88,61,22,.88), rgba(39,25,10,.92));
  color:#f5e3b3;
  font-size:28px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,244,210,.16), 0 10px 24px rgba(0,0,0,.36);
  text-shadow:0 1px 2px rgba(0,0,0,.80);
}
.gzAdminCloseBtn:hover{
  border-color:rgba(255,223,151,.70);
  filter:brightness(1.08);
}
.gzAdminCloseBtn:active{
  transform:translateY(1px);
}
@media (max-width: 900px){
  #admin.panel{
    padding: 16px 12px !important;
  }
  .gzAdminCloseBtn{
    width:38px;
    height:38px;
    font-size:25px;
  }
}

/* ===== Admin overlay visibility fix – V0.107zzt =====
   Hide floating Top-3 widgets while the Admin overlay is active. */
body.gzAdminOverlayActive #gzArenaTop3Layer,
body.gzAdminOverlayActive #gzPitTop3Layer{
  display:none !important;
  pointer-events:none !important;
}