/* 🚨 AI NOTE: Read "AI Directions" file FIRST before making any changes!
 * This file contains essential system documentation and requirements that MUST be followed.
 */

/* BLOCKY THEME - NO CURVED BORDERS */
/* Future AI: DO NOT add border-radius properties. This project uses a blocky/pixel-art aesthetic. */
/* All UI elements should have sharp, square corners. Use border-radius: 0; for all elements. */
/* If you see any border-radius values being added, remove them immediately. */

/* Universal Tibia bitmap font - Applied globally at 16px scale */
* {
  font-family: 'TibiaUniversal', monospace !important;
  image-rendering: pixelated !important;
}

/* Tibia bitmap font at different scales */
.tibia-scale-16 {
  font-size: 16px !important;
  transform: scale(1) !important;
}

.tibia-scale-32 {
  font-size: 32px !important;
  transform: scale(2) !important;
  transform-origin: top left !important;
}

.tibia-scale-48 {
  font-size: 48px !important;
  transform: scale(3) !important;
  transform-origin: top left !important;
}

:root {
  /* Color Variables */
  --bg-dark: #05090c;
  --bg-panel: rgba(8, 14, 20, 0.92);
  --border-gold: #c8a350;
  --border-shadow: #1c0e06;
  --text-primary: #f7f0d8;
  --text-muted: rgba(247, 240, 216, 0.78);
  --accent-red: #c83333;
  --accent-blue: #1c7bd9;
  --accent-green: #4caf50;
  font-family: Verdana, sans-serif;

  /* Fluid Layout Variables */
  --app-shell-padding: clamp(0.4rem, 1vw, 0.75rem);
  --app-shell-gap: clamp(0.4rem, 1vw, 0.75rem);

  /* Grid Layout - Three Column System */
  --left-column-width: clamp(180px, 12vw, 260px);
  --right-column-width: clamp(240px, 16vw, 320px);
  --grid-gap: clamp(0.4rem, 0.5vw, 0.75rem);

  /* Panel Heights - Using vh for vertical constraints */
  --map-panel-max-height: clamp(700px, 80vh, 1100px);
  --center-column-max-height: clamp(800px, 90vh, 1100px);

  /* Hotkey Bar - Independent sizing (doesn't affect viewport panels) */
  --hotkey-slot-size: clamp(44px);
  --hotkey-bar-height: clamp(48px);
  --hotkey-padding: clamp(0.4rem);

  /* Battle Log - Fluid height scaling */
  --battle-log-height: clamp(70px, 8vh, 100px);

  /* Fixed UI heights for viewport calculations (independent of responsive hotkey bar) */
  --fixed-hotkey-bar-height: 48px;
  --battle-log-font-size: clamp(0.75rem, 2vw, 0.85rem);

  /* Viewport Frame - Constrained to fit available space */
  --viewport-max-height: clamp(700px, 75vh, 1100px);

  /* UI Elements Reserved Space - header + hotkey bar + battle log + gaps */
  --ui-elements-reserved-height: calc(43px + var(--fixed-hotkey-bar-height) + var(--battle-log-height) + 2px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent layout shift when scrollbars appear/disappear (e.g. minimizing panels changes page height).
   Keeps the center viewport width stable. */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  /* Always reserve scrollbar space to prevent layout shifts when content height changes
     (e.g. minimizing deposit/Lootbag). This is the most universal fix across browsers. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background: radial-gradient(circle at top, rgba(20, 32, 46, 0.9), rgba(5, 8, 12, 0.95)),
    var(--bg-dark);
  color: var(--text-primary);
}

img {
  max-width: 100%;
  display: block;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--app-shell-gap);
  padding: var(--app-shell-padding);
  background: url("assets/tibia74/UI/MoreUI/textura_light.png");
  /* Match body behavior to avoid scrollbar appearing/disappearing on the inner scroller. */
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

/* Container for Tibia-style text */
.tibia-text {
  display: inline-block;
  line-height: 8px;        /* 1 glyph high */
}

/* Tibia bitmap font glyphs (tibiaFont/tibia.fnt) */
.tibia-char {
  display: inline-block;
  background-image: url("assets/tibia74/UI/Fonts/tibiaFont/tibia.png");
  background-repeat: no-repeat;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* Double-Layer Text Rendering System */
.char-wrapper {
  position: relative;
  display: inline-block;
}

.char-sprite {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("assets/tibia74/UI/Fonts/tibiaFont/tibia.png");
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Fill layers - turn white into specific colors */
.fill-red {
  filter: brightness(0) saturate(100%)
          invert(16%) sepia(96%) saturate(7483%)
          hue-rotate(2deg) brightness(108%) contrast(118%);
}

.fill-green {
  filter: brightness(0) saturate(100%)
          invert(16%) sepia(96%) saturate(7483%)
          hue-rotate(122deg) brightness(103%) contrast(118%);
}

.fill-blue {
  filter: brightness(0) saturate(100%)
          invert(16%) sepia(96%) saturate(7483%)
          hue-rotate(242deg) brightness(140%) contrast(118%);
}

/* Light blue/cyan fill (used for healing numbers) */
.fill-lightblue {
  filter: brightness(0) saturate(100%)
          invert(78%) sepia(52%) saturate(1598%)
          hue-rotate(162deg) brightness(106%) contrast(103%);
}

.fill-gold {
  filter: brightness(0) saturate(100%)
          invert(75%) sepia(85%) saturate(650%)
          hue-rotate(10deg) brightness(105%) contrast(95%);
}

/* Orange fill (used for speech-style overhead text like "Aaaah...") */
.fill-orange {
  filter: brightness(0) saturate(100%)
          invert(71%) sepia(86%) saturate(1650%)
          hue-rotate(2deg) brightness(104%) contrast(103%);
}

/* Outline layer - keeps black, makes white transparent */
.outline-only {
  mix-blend-mode: multiply;
}



.brand {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.brand-icon {
  width: 56px;
  height: 56px;
  border: 2px solid var(--border-gold);
  border-radius: 0;
  background: radial-gradient(circle at 30% 30%, #f7f0d8, #c08a28 35%, #4a2b0e 85%);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.6);
  position: relative;
}

.brand-icon::after {
  content: "";
  position: absolute;
  inset: 12px 10px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
  opacity: 0.65;
}

.brand-title {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

.brand-subtitle {
  color: var(--text-muted, var(--text-primary));
  font-size: 0.9rem;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-gold);
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.header-meta {
  display: flex;
  gap: 1.25rem;
  color: var(--text-muted, var(--text-primary));
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.primary-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
  align-items: center;
}

.character-controls {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.debug-toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.debug-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.debug-toggle-btn:active {
  background: rgba(255, 255, 255, 0.2);
}

.primary-tabs .tab {
  flex: 0 0 auto;
  padding: 0.4rem 1.25rem;
  border: 1px solid #3b3b3b;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  color: var(--text-primary, #f7f0d8);
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}

.primary-tabs .tab:hover {
  background-image: url("assets/tibia74/UI/MoreUI/textura_lighter.png");
}

.primary-tabs .tab.active {
  color: var(--text-primary);
  border-color: var(--border-gold);
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
}

.character-status {
  font-size: 0.9rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.25);
}

.character-logout-btn,
.character-change-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 0;
  border: 1px solid var(--border-gold, #c9a45a);
  background: #1a1107;
  color: var(--text-primary, #eee);
  cursor: pointer;
}

.character-change-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.character-logout-btn:hover,
.character-change-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.game-grid {
  flex: 1;
  display: grid;
  grid-template-columns: var(--left-column-width) minmax(0, 1fr) var(--right-column-width);
  gap: var(--grid-gap);
  width: 100%;
  min-height: 0;
  /* IMPORTANT:
     Don't let the grid's height be driven by right-column content (deposit/loot minimize).
     The grid should be sized by flex layout (via .game-page) and columns scroll internally. */
  overflow: hidden;
}


.column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* Scrollable container for equipment/inventory/deposit/Lootbag panels in right column */
/* This allows the equipment/inventory/deposit/Lootbag to scroll independently without visible scrollbar */
.right-column {
  overflow: hidden; /* Prevent right-column itself from scrolling */
}

.equipment-inventory-scroll-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide scrollbar but allow scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.equipment-inventory-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.panel {
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.panel,
.panel header,
.panel .panel-body,
.viewport-frame,
.skill-row,
.encounter-controls,
.inventory-grid,
.deposit-grid,
.loot-bag-grid,
.equipment-grid,
.debug-panel .panel-body {
  border: 4px solid transparent;
  border-image: var(--ui-border-image) 4 repeat;
  border-radius: 0;
  background-clip: padding-box;
}

.viewport-frame {
  position: relative;
  border-radius: 0;
}

.panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.9rem;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel header,
.panel header * {
  text-shadow: 
    -1px -1px 0 rgba(0, 0, 0, 0.5),
    1px -1px 0 rgba(0, 0, 0, 0.5),
    -1px 1px 0 rgba(0, 0, 0, 0.5),
    1px 1px 0 rgba(0, 0, 0, 0.5),
    0 0 2px rgba(0, 0, 0, 0.5),
    0 0 4px rgba(0, 0, 0, 0.45);
}

.equipment-panel .ui-panel-content {
  width: max-content;
  margin: 0 auto;
}

.equipment-panel header,
.inventory-panel header {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.equipment-panel .panel-body,
.inventory-panel .panel-body {
  width: 100%;
  box-sizing: border-box;
}

.inventory-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 0.5rem;
}

/* Override `.panel header { justify-content: space-between; }` (more specific selector)
   so the Backpack header doesn't get spaced out across the full width. */
article.panel.inventory-panel > header.inventory-header {
  justify-content: flex-start;
}

.inventory-header span {
  text-align: left !important;
  flex: 0 0 auto !important;
}

.inventory-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  margin-right: 0.5rem;
}

.inventory-toggle {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  padding: 0 0.5rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  position: relative;
  margin-left: auto;
}

.inventory-toggle:hover {
  opacity: 1;
}

.inventory-toggle span {
  display: inline-block;
}

.inventory-panel.is-minimized .panel-body {
  display: none;
}

.inventory-panel.is-minimized {
  min-width: calc(4 * 46px + 3 * 0.3rem + 8px); /* Match grid width: 4 slots + 3 gaps + padding */
}

.inventory-panel.is-minimized .inventory-toggle span {
  display: none;
}

.inventory-panel.is-minimized .inventory-toggle::after {
  content: "+";
  display: inline-block;
}

.bin-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bin-btn img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.deposit-panel .panel-body {
  width: 100%;
  box-sizing: border-box;
}

.deposit-panel header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: 0.5rem;
}

.deposit-panel header span {
  text-align: left !important;
  flex: 0 0 auto !important;
}

.deposit-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  margin-right: 0.5rem;
}

.deposit-toggle {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  padding: 0 0.5rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  position: relative;
  margin-left: auto;
}

.deposit-toggle:hover {
  opacity: 1;
}

.deposit-toggle span {
  display: inline-block;
}

.deposit-panel.is-minimized .panel-body {
  display: none;
}

.deposit-panel.is-minimized {
  min-width: calc(4 * 48px + 3 * 0.3rem + 8px); /* Match grid width: 4 slots + 3 gaps + padding */
}

.deposit-panel.is-minimized .deposit-toggle span {
  display: none;
}

.deposit-panel.is-minimized .deposit-toggle::after {
  content: "+";
  display: inline-block;
}

.inventory-panel .ui-panel-content {
  width: max-content;
  margin: 0 auto;
}

.panel h2 {
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Add text shadow to all text elements inside panels */
.panel .panel-body,
.panel .panel-body h1,
.panel .panel-body h2,
.panel .panel-body h3,
.panel .panel-body h4,
.panel .panel-body h5,
.panel .panel-body h6,
.panel .panel-body p,
.panel .panel-body span,
.panel .panel-body div,
.panel .panel-body li,
.panel .panel-body td,
.panel .panel-body th,
.panel .panel-body label {
  text-shadow: 
    -1px -1px 0 rgba(0, 0, 0, 0.5),
    1px -1px 0 rgba(0, 0, 0, 0.5),
    -1px 1px 0 rgba(0, 0, 0, 0.5),
    1px 1px 0 rgba(0, 0, 0, 0.5),
    0 0 2px rgba(0, 0, 0, 0.5),
    0 0 4px rgba(0, 0, 0, 0.45);
}

/* Keep the heavier outline inside the actual game viewport */
.panel .panel-body .viewport-frame,
.panel .panel-body .viewport-frame * {
  text-shadow: 
    -1px -1px 0 rgba(0, 0, 0, 0.5),
    1px -1px 0 rgba(0, 0, 0, 0.5),
    -1px 1px 0 rgba(0, 0, 0, 0.5),
    1px 1px 0 rgba(0, 0, 0, 0.5),
    0 0 2px rgba(0, 0, 0, 0.5),
    0 0 4px rgba(0, 0, 0, 0.45);
}

.panel-toggle {
  background: #1a1107;
  color: var(--text-primary);
  border: 1px solid var(--border-gold);
  border-radius: 0;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.panel.collapsed .panel-body {
  display: none;
}

.panel.collapsed .panel-toggle {
  background: #2f1a0c;
}

.panel .ui-nine-slice {
  --tile: 32px;
  display: grid;
  grid-template-columns: var(--tile) minmax(0, 1fr) var(--tile);
  grid-template-rows: min-content auto min-content;
  width: 100%;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
}

.ui-nine-slice__cell {
  background-color: transparent;
}

.ui-nine-slice__cell.corner {
  width: var(--tile);
  height: var(--tile);
}

.ui-nine-slice__cell.edge {
  min-height: var(--tile);
}

.ui-nine-slice__cell.edge.edge-left,
.ui-nine-slice__cell.edge.edge-right {
  min-width: var(--tile);
}

.ui-nine-slice__cell.center {
  padding: 0.35rem;
}

.ui-panel-content {
  height: 100%;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 0.65rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

article.panel[data-ui-panel].stat-panel > .panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem; /* Extra padding to prevent bars/numbers from touching borders */
}

/* Stat Bar Styles */
.stat-bar {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stat-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.stat-bar-track {
  width: 100%;
  height: 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
  background-image: url("assets/tibia74/UI/MoreUI/EmptyBar.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.stat-bar-fill {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Health Bar */
.stat-bar.hp .stat-bar-fill {
  background-image: url("assets/tibia74/UI/MoreUI/FullHPBar.png");
}

/* Mana Bar */
.stat-bar.mana .stat-bar-fill {
  background-image: url("assets/tibia74/UI/MoreUI/FullManaBar.png");
}

/* Regen Bar */
.stat-bar.regen .stat-bar-fill {
  background-image: url("assets/tibia74/UI/MoreUI/fullRegenBar.png");
}

.stat-bar.regen .stat-bar-fill.is-empty {
  opacity: 0;
}

/* Timer text inside regen bar - centered in the track */
.stat-bar.regen .stat-bar-track::after {
  content: attr(data-timer);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.65rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.status-indicators {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  min-height: 16px;
}

.status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  opacity: 0.25;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
  background: #777;
  transition: opacity 120ms ease, transform 120ms ease;
}

.status-dot.is-active {
  opacity: 1;
  transform: scale(1.05);
}

.status-dot--poison {
  background: #5bd46f;
}

.status-effect {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  display: none;
}

.status-effect--fire {
  display: none;
}


.skill-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}

.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.skill-bar {
  width: 100%;
  height: 8px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
}

.skill-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #007f00, #2fe22f);
}

.skill-header--single {
  margin-bottom: 0;
}

.skill-label {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.skill-value {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.map-panel,
.collection-panel,
.info-panel,
.highscores-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.map-panel .panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  max-height: var(--map-panel-max-height);
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  flex: 1;
  overflow: hidden;
  padding: 0.6rem;
}

/* When center-shared-ui is present (battle log), constrain the entire center-column to fluid height */
.column.center-column:has(.center-shared-ui) {
  max-height: var(--center-column-max-height);
  overflow: hidden;
}

/* Constrain panel-body when center-shared-ui is present to leave room for header, hotkey bar + battle log */
/* Town panels (North Bridge) need more height since they have area lists instead of single viewports */
.column.center-column:has(.center-shared-ui) .map-panel .panel-body:not(#panelNorthBridge .panel-body) {
  max-height: calc(var(--center-column-max-height) - var(--ui-elements-reserved-height));
}

/* North Bridge gets full height since it has multiple areas to display */
.column.center-column:has(.center-shared-ui) #panelNorthBridge .panel-body {
  max-height: var(--center-column-max-height);
}

/*
 * IMPORTANT: For all map panels containing .viewport-frame, add justify-content: center
 * to vertically center the viewport-frame within the panel-body and prevent gaps at the bottom.
 * This ensures consistent layout across all adventure/area panels (North Bridge, Shops, Oracle, etc.)
 * and should be applied to any future panels with viewport-frame.
 * NOTE: Town panels use flex-start (top alignment) to prevent viewport overflow.
 */
#panelAdventure .panel-body:has(.viewport-frame),
#panelNorthBridge .panel-body:has(.viewport-frame) {
  justify-content: flex-start;
}

/* Non-town panels still use centering */
.map-panel .panel-body:has(.viewport-frame):not(#panelAdventure .panel-body):not(#panelNorthBridge .panel-body) {
  justify-content: center;
}

/* Tighten spacing between viewport, hotkey bar, and battle log on adventure panel */
#panelAdventure .panel-body {
  gap: 1px;
}

.viewport-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  max-height: var(--viewport-max-height);
  border: 2px solid transparent;
  border-image: url("assets/tibia74/UI/MoreUI/textura_dark.png") 16 repeat;
  background: radial-gradient(circle at 40% 30%, #1b5c1b, #0c2e0c 55%, #041204 100%);
  /* Reduce viewport shadow strength by ~50% */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  padding: 0;
}

/* When center-shared-ui is present, reduce viewport-frame max-height to accommodate battle log */
.column.center-column:has(.center-shared-ui) .viewport-frame {
  max-height: calc(var(--center-column-max-height) - var(--ui-elements-reserved-height));
}



.viewport-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  height: 2.7rem;
  box-sizing: border-box;
}

.viewport-header,
.viewport-header * {
  text-shadow: 
    -1px -1px 0 rgba(0, 0, 0, 0.5),
    1px -1px 0 rgba(0, 0, 0, 0.5),
    -1px 1px 0 rgba(0, 0, 0, 0.5),
    1px 1px 0 rgba(0, 0, 0, 0.5),
    0 0 2px rgba(0, 0, 0, 0.5),
    0 0 4px rgba(0, 0, 0, 0.45);
}

.viewport-header > span {
  flex: 1;
  text-align: center;
  display: block;
}

.viewport-header .ui-btn {
  margin-left: auto;
}


.viewport-area-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  padding: 1rem;
  justify-content: flex-start;  /* Align to top to prevent centering gaps */
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: center;
  background-image: url("assets/art/Backgrounds/cityBackground.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Shops list: only a few panels right now, so center them in the viewport */
#panelShops #shopOptionsContainer.viewport-area-list {
  justify-content: center;
}


.viewport-area-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.viewport-area-list {
  scrollbar-width: none;
}

/* Hide and disable area panels while panel combat viewport is active */
body.panel-combat-active .viewport-area-list,
/* AREA PANELS - Viewport Navigation System */
/* These panels appear inside the game viewport when in town/adventure areas */
/* They allow players to travel to different locations like shops, sewers, etc. */
/* NOT part of the Inventory system - these are for world navigation */

body.panel-combat-active .area-panel {
  pointer-events: none;
}
body.panel-combat-active .viewport-area-list {
  display: none;
}

/* Base styles for area navigation panels in viewport */
.area-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  padding: 1rem 1.1rem;
  background: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  opacity: 0.93;
  background-repeat: repeat;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.35);
  color: #f8f3e6;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  min-height: 150px;
  justify-content: center;
  width: min(640px, 100%);
  border-radius: 0;
  border: 4px solid transparent;
  border-image: url("assets/tibia74/UI/MoreUI/textura_dark.png") 4 repeat;
}

/* Adventure panel area panels - use background images instead of textures */
#panelAdventure .viewport-area-list .area-panel {
  background-size: cover;
  background-position: center;
}

#panelAdventure .viewport-area-list .area-panel[data-area="northBridge"] {
  background-image: url("assets/art/Backgrounds/northBridge.png");
}

#panelAdventure .viewport-area-list .area-panel[data-area="shop"] {
  background-image: url("assets/art/Backgrounds/shops.png");
}

#panelAdventure .viewport-area-list .area-panel[data-area="sewer"] {
  background-image: url("assets/art/Backgrounds/rats.png");
}

/* Sewer Quest Icons - Layered Background Approach */
#panelAdventure .viewport-area-list .area-panel[data-area="sewer"] {
  position: relative;
  /* Default: no icons */
  --q1-excl: none;
  --q2-excl: none;
  --q1-chest: none;
  --q2-chest: none;
}

/* Quest 1 active: show exclamation and chest */
#panelAdventure .viewport-area-list .area-panel[data-area="sewer"][data-sewer-quest1-state="active"] {
  --q1-excl: url("assets/art/UI/exclamationMark.png");
  --q1-chest: url("assets/art/Icons/questChest.png");
}

/* Quest 1 complete: show completed exclamation and chest */
#panelAdventure .viewport-area-list .area-panel[data-area="sewer"][data-sewer-quest1-state="complete"] {
  --q1-excl: url("assets/art/UI/exclamationMark2.png");
  --q1-chest: url("assets/art/Icons/questChest.png");
}

/* Quest 2 active: show exclamation and chest */
#panelAdventure .viewport-area-list .area-panel[data-area="sewer"][data-sewer-quest2-state="active"] {
  --q2-excl: url("assets/art/UI/exclamationMark.png");
  --q2-chest: url("assets/art/Icons/questChest.png");
}

/* Quest 2 complete: show completed exclamation and chest */
#panelAdventure .viewport-area-list .area-panel[data-area="sewer"][data-sewer-quest2-state="complete"] {
  --q2-excl: url("assets/art/UI/exclamationMark2.png");
  --q2-chest: url("assets/art/Icons/questChest.png");
}

/* Quest icon positioning - replaced CSS pseudo-elements with real DOM elements */
/* These styles position the quest icon containers */
.area-panel .quest-icon-row {
  position: absolute;
  display: flex;
  gap: 5px; /* Gap between icons in multi-quest areas */
  z-index: 1;
}

.area-panel .quest-icon-row--top {
  bottom: 37px; /* Match previous ::before bottom value */
  right: 5px;   /* Match previous ::before right value */
}

.area-panel .quest-icon-row--bottom {
  bottom: 5px;  /* Match previous ::after bottom value */
  right: 5px;   /* Match previous ::after right value */
}

.area-panel .quest-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated; /* Preserve pixel-art look */
  pointer-events: auto;       /* Allow hover events on icons */
}

/* LEGACY: Old pseudo-element styles - kept for reference but no longer used */
/*
#panelAdventure .viewport-area-list .area-panel[data-area="sewer"]::before {
  content: "";
  position: absolute;
  bottom: 37px;
  right: 5px;
  width: 69px;
  height: 32px;
  background-image: var(--q2-excl), var(--q1-excl);
  background-position: 0 0, 37px 0;
  background-size: 32px 32px;
  background-repeat: no-repeat;
  pointer-events: none;
}

#panelAdventure .viewport-area-list .area-panel[data-area="sewer"]::after {
  content: "";
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 69px;
  height: 32px;
  background-image: var(--q2-chest), var(--q1-chest);
  background-position: 0 0, 37px 0;
  background-size: 32px 32px;
  background-repeat: no-repeat;
  pointer-events: none;
}
*/

/* Barn quest indicators (in Lakeside panel) */
#panelLakeside .viewport-area-list .area-panel[data-area-target="barn"] {
  --barn-chest: none;
}

/* Quest active: show exclamation and chest */
#panelLakeside .viewport-area-list .area-panel[data-area-target="barn"][data-barn-quest1-state="active"] {
  --barn-excl: url("assets/art/UI/exclamationMark.png");
  --barn-chest: url("assets/art/Icons/questChest.png");
}

/* Quest complete: show completed exclamation and chest */
#panelLakeside .viewport-area-list .area-panel[data-area-target="barn"][data-barn-quest1-state="complete"] {
  --barn-excl: url("assets/art/UI/exclamationMark2.png");
  --barn-chest: url("assets/art/Icons/questChest.png");
}

/* LEGACY: Barn quest icons - replaced with real DOM elements */
/*
#panelLakeside .viewport-area-list .area-panel[data-area-target="barn"]::before {
  content: "";
  position: absolute;
  bottom: 37px;
  right: 5px;
  width: 32px;
  height: 32px;
  background-image: var(--barn-excl);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  pointer-events: none;
}

#panelLakeside .viewport-area-list .area-panel[data-area-target="barn"]::after {
  content: "";
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 32px;
  height: 32px;
  background-image: var(--barn-chest);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  pointer-events: none;
}
*/

/* Hive quest indicators (in North Bridge panel) */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="hive"] {
  --hive-chest: none;
}

/* Quest active: show exclamation and chest */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="hive"][data-hive-quest1-state="active"] {
  --hive-excl: url("assets/art/UI/exclamationMark.png");
  --hive-chest: url("assets/art/Icons/questChest.png");
}

/* Quest complete: show completed exclamation and chest */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="hive"][data-hive-quest1-state="complete"] {
  --hive-excl: url("assets/art/UI/exclamationMark2.png");
  --hive-chest: url("assets/art/Icons/questChest.png");
}

/* LEGACY: Hive quest icons - replaced with real DOM elements */
/*
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="hive"]::before {
  content: "";
  position: absolute;
  bottom: 37px;
  right: 5px;
  width: 32px;
  height: 32px;
  background-image: var(--wasp-excl);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  pointer-events: none;
}

#panelNorthBridge .viewport-area-list .area-panel[data-area-target="hive"]::after {
  content: "";
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 32px;
  height: 32px;
  background-image: var(--hive-chest);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  pointer-events: none;
}
*/

/* Cemetery quest indicators (in North Bridge panel) */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="cemetery"] {
  --cemetery-chest: none;
}

/* Quest active: show exclamation and chest */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="cemetery"][data-cemetery-quest1-state="active"] {
  --cemetery-excl: url("assets/art/UI/exclamationMark.png");
  --cemetery-chest: url("assets/art/Icons/questChest.png");
}

/* Quest complete: show completed exclamation and chest */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="cemetery"][data-cemetery-quest1-state="complete"] {
  --cemetery-excl: url("assets/art/UI/exclamationMark2.png");
  --cemetery-chest: url("assets/art/Icons/questChest.png");
}

/* LEGACY: Cemetery quest icons - replaced with real DOM elements */
/*
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="cemetery"]::before {
  content: "";
  position: absolute;
  bottom: 37px;
  right: 5px;
  width: 32px;
  height: 32px;
  background-image: var(--cemetery-excl);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  pointer-events: none;
}

#panelNorthBridge .viewport-area-list .area-panel[data-area-target="cemetery"]::after {
  content: "";
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 32px;
  height: 32px;
  background-image: var(--cemetery-chest);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  pointer-events: none;
}
*/

/* Abandoned Mine quest indicators (in North Bridge panel) */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="abandonedMine"] {
  --abandoned-underground-chest1: none;
  --abandoned-underground-chest2: none;
}

/* Quest 1 active: show exclamation and chest */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="abandonedMine"][data-abandoned-underground-quest1-state="active"] {
  --abandoned-underground-excl1: url("assets/art/UI/exclamationMark.png");
  --abandoned-underground-chest1: url("assets/art/Icons/questChest.png");
}

/* Quest 1 complete: show completed exclamation and chest */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="abandonedMine"][data-abandoned-underground-quest1-state="complete"] {
  --abandoned-underground-excl1: url("assets/art/UI/exclamationMark2.png");
  --abandoned-underground-chest1: url("assets/art/Icons/questChest.png");
}

/* Quest 2 active: show exclamation and chest (layered) */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="abandonedMine"][data-abandoned-underground-quest2-state="active"] {
  --abandoned-underground-excl2: url("assets/art/UI/exclamationMark.png");
  --abandoned-underground-chest2: url("assets/art/Icons/questChest.png");
}

/* Quest 2 complete: show completed exclamation and chest (layered) */
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="abandonedMine"][data-abandoned-underground-quest2-state="complete"] {
  --abandoned-underground-excl2: url("assets/art/UI/exclamationMark2.png");
  --abandoned-underground-chest2: url("assets/art/Icons/questChest.png");
}

/* LEGACY: Abandoned Mine quest icons - replaced with real DOM elements */
/*
#panelNorthBridge .viewport-area-list .area-panel[data-area-target="abandonedMine"]::before {
  content: "";
  position: absolute;
  bottom: 37px;
  right: 5px;
  width: 69px;
  height: 32px;
  background-image: var(--abandoned-underground-excl2), var(--abandoned-underground-excl1);
  background-position: 0 0, 37px 0;
  background-size: 32px 32px;
  background-repeat: no-repeat;
  pointer-events: none;
}

#panelNorthBridge .viewport-area-list .area-panel[data-area-target="abandonedMine"]::after {
  content: "";
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 69px;
  height: 32px;
  background-image: var(--abandoned-underground-chest2), var(--abandoned-underground-chest1);
  background-position: 0 0, 37px 0;
  background-size: 32px 32px;
  background-repeat: no-repeat;
  pointer-events: none;
}
*/



/* LEGACY: Responsive quest icon styles - no longer needed with real DOM elements */
/*
@media (max-width: 930px), (max-height: 600px) {
  #panelAdventure .viewport-area-list .area-panel[data-area="sewer"]::before,
  #panelAdventure .viewport-area-list .area-panel[data-area="sewer"]::after {
    width: 69px;
    height: 32px;
  }
}
*/

#panelAdventure .viewport-area-list .area-panel[data-area="oracle"] {
  background-image: url("assets/art/Backgrounds/oracle.png");
}

#panelAdventure .viewport-area-list .area-panel[data-area="temple"] {
  background-image: url("assets/art/Backgrounds/temple.png");
}

#panelAdventure .viewport-area-list .area-panel[data-area="lakeside"] {
  background-image: url("assets/art/Backgrounds/Lakeside.png");
}

/* Dark variant of area panels - used for town panels like North Bridge, Lakeside */
.area-panel.area-panel-dark {
  border: 4px solid transparent;
  border-image: url("assets/tibia74/UI/MoreUI/textura_dark.png") 4 repeat;
  padding: 0.85rem 1rem;
}

.area-title {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.shop-select-item .area-title {
  text-transform: none;
}

.area-subtitle {
  font-size: 0.95rem;
  opacity: 0.85;
  text-align: center;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.hotkey-bar {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(10, var(--hotkey-slot-size));
  grid-auto-rows: var(--hotkey-bar-height);
  justify-items: center;
  align-items: center;
  width: max-content;
  padding: var(--hotkey-padding);
  margin: 0 auto;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hotkey bar double-stacks at smaller widths */
@media (max-width: 600px) {
  .hotkey-bar {
    grid-template-columns: repeat(5, var(--hotkey-slot-size));
    grid-template-rows: var(--hotkey-bar-height) var(--hotkey-bar-height);
  }
}

.hotkey-slot {
  --slot-size: var(--hotkey-slot-size);
}

.hotkey-slot .hotkey-label {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f8f3e6;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  z-index: 2;
  pointer-events: none;
}


/* === New combat viewport (3×3 grid) === */

#combatRoot {
  position: absolute;
  inset: 0;
  pointer-events: none;  /* combat UI can re-enable for buttons if needed */
}

/* ===== FLOOR INDICATOR ===== */
/* Floor Indicator – 3D isometric infinite‑layer stack with navigation arrows to the left */
.floor-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  display: grid;
  grid-template-areas:
    "arrows floors"
    "travel travel"
    "timer timer";
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  gap: 8px;
  align-items: start;
  justify-items: center;

  /* Variables for easy adjustment */
  --layer-separation: 13px;
  --floor-width: 90px;             /* Image width */
  --floor-height: 45px;             /* Image height */
  --floor-highlight-color: #4CAF50; /* Green */
  --color-black: #222;             /* Darker black for 'Black' */
  --color-grey: #555;              /* Lighter grey for 'Grey' */
  --default-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  --arrow-available-color: #4CAF50; /* Green */
  --arrow-unavailable-color: #555;  /* Grey */
  --transition-speed: 0.3s;
}

/* Arrows container - positioned in grid */
.floor-indicator__arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  grid-area: arrows;
}

/* Navigation arrows */
.floor-indicator__arrow {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}

.floor-indicator__arrow img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  display: block;
}

.floor-indicator__arrow--unavailable {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none; /* This is the "kill switch" for clicks */
}

.floor-indicator__arrow--unavailable img {
  filter: grayscale(100%) brightness(0.7);
}

.floor-indicator__arrow:disabled {
  cursor: not-allowed;
}

/* Floor tiles container – hosts the isometric stack */
.floor-indicator__container {
  position: relative;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  grid-area: floors;
}

.floor-indicator__floors {
  position: relative;
  width: var(--floor-width);
  height: var(--floor-height);
  transform-style: preserve-3d;
  padding-top: 24px; /* small lift so stack sits nicely in the container */
  perspective: 1000px;
}

.floor-indicator__floor {
  width: var(--floor-width);
  height: var(--floor-height);
  position: absolute;
  top: 0;
  left: 0;
  transition: all var(--transition-speed);
  box-sizing: border-box;
}

/* Dynamic Z‑axis stacking using CSS variables */
.floor-indicator__floor {
  transform: translate3d(0, calc(var(--i) * var(--layer-separation)), calc(-1 * var(--i) * var(--layer-separation)));
  z-index: calc(100 - var(--i));
}

/* Color states for floor tiles - images must stay exactly 90x45px */
.floor-indicator__floor--highlighted {
  background-image: url("assets/art/UI/highlightedFloor.png");
  background-repeat: no-repeat;
  background-size: 90px 45px; /* Exact size, no scaling */
  background-position: 0 0; /* No offset */
}

.floor-indicator__floor--grey {
  background-image: url("assets/art/UI/lightFloor.png");
  background-repeat: no-repeat;
  background-size: 90px 45px; /* Exact size, no scaling */
  background-position: 0 0; /* No offset */
}

.floor-indicator__floor--black {
  background-image: url("assets/art/UI/darkFloor.png");
  background-repeat: no-repeat;
  background-size: 90px 45px; /* Exact size, no scaling */
  background-position: 0 0; /* No offset */
}

/* Traveling state - styled with textura theme */
.floor-indicator__traveling {
  grid-area: travel;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.9);
  color: #ffd700;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 0; /* Maintain blocky aesthetic */
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
  justify-self: center;
}

.floor-indicator__traveling-timer {
  grid-area: timer;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.9);
  color: #ffd700;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 4px 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  justify-self: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.floor-indicator__traveling--visible {
  opacity: 1;
  visibility: visible;
}

.floor-indicator__traveling-timer--visible {
  opacity: 1;
  visibility: visible;
}

/* Pulse animation for traveling */
.floor-indicator--traveling .floor-indicator__traveling {
  animation: travelPulse 1.5s ease-in-out infinite;
}

@keyframes travelPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* During travel, dim the floor indicator */
.floor-indicator--traveling .floor-indicator__container {
  opacity: 0.5;
}

.floor-indicator--traveling .floor-indicator__arrow {
  pointer-events: none;
  opacity: 0.4;
}

.floor-indicator--traveling .floor-indicator__arrows {
  pointer-events: none;
}

/* Hidden state */
.floor-indicator--hidden {
  display: none;
}

/* Background for the current area (sewer, forest, etc.) */
.combat-area-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* center the grid inside */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Missile overlay layer (projectiles like spear/bolt/etc) */
.missile-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 900; /* above sprites, below spawn timer (1000) */
}

.missile-sprite {
  position: absolute;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Spawn timer styling - removed old simple bar, now uses wrapper structure */

/* 3×3 grid always visible */
.combat-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(3, auto);
  gap: 24px;                 /* spacing between slots */
  pointer-events: auto;
}

.combat-slot {
  min-width: 126px;
  min-height: 133px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  /* make the tile visible */
  background: rgba(0, 0, 0, 0.99);  /* 20% darker than 0.35 */
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);

  opacity: 0.35;          /* faint when empty */
  filter: grayscale(0.8);
  transition: opacity 0.2s ease, filter 0.2s ease;
  pointer-events: auto;
}

/* filled slot (monster or player) */
.combat-slot--filled {
  opacity: 1;
  filter: none;
}

.combat-slot--active {
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.4);
}

/* player slot never faint */
.combat-slot.slot-4 {
  opacity: 1 !important;
  filter: none !important;
}

/* Death respawn button in combat slot - removed, will be re-implemented later */


.sprite-container {
  position: relative;
  display: inline-block;
  transform: scale(1);
  transform-origin: center top;
}

.sprite-corpse {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}


/* Combined frame image */
.sprite-frame {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  transform: scale(1.5);
}

.sprite-nameplate {
  position: absolute;
  top: 0;          /* or 4px / 6px if you want it a bit lower */
  z-index: 2;
  transform: scale(1.5);

  /* match your new art size, then double via container scale */
  width: 86px;     /* or whatever SpriteNamePlate1.png is */
  height: 89px;

  background-image: url("assets/art/UI/SpriteFrames/SpriteNamePlate1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}


/* Text inside the nameplate */
.sprite-name {
  position: absolute;
  top: 1px;
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  color: #f7f0d8;
  text-shadow: 1px 1px 0 #000;
  line-height: 1;
  text-align: center;
}

.sprite-hpbar {
  position: absolute;
  top: 13px;
  width: 70%;
  height: 4px;
  border: 1px solid #000;
  background: #111;
  overflow: hidden;
  margin-top: 1px;    /* if it feels too far, set this to 0 */
}

.sprite-hpbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1b7b1b, #4caf50);
  width: 100%;
}

/* 32×32 underlay sprite (blood/venom pools) - positioned at bottom under the creature/corpse */
.sprite-underlay {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 1;
}

.sprite-creature {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  image-rendering: pixelated;
  z-index: 2;
}

/* scale for tile size */
.sprite-size-1 {
  width: 40px;
  height: 40px;
}

.sprite-size-2 {
  width: 64px;
  height: 64px;
}

/* Custom sprite: 64x64 image with 32x32 visible content at bottom-center */
/* The source image is 64x64, but we only want to display the bottom-center 32x32 portion */
/* Anchor "bottom-center": the 32x32 content is positioned at the bottom center of the 64x64 image */
.sprite-custom-64-bottom-center {
  width: 32px;
  height: 32px;
  object-fit: none;
  /* Position the 64x64 source image so the bottom-center 32x32 portion is visible */
  /* X: 16px centers horizontally (shows pixels 16-47), Y: 32px shows bottom portion (pixels 32-64) */
  object-position: -16px -32px;
}







.corpse-wrapper {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.corpse-wrapper .corpse-sprite {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}


.sprite-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.sprite-wrapper img {
  pointer-events: none;
}

/* Overlay used for explore choices and death screen */
.viewport-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.viewport-overlay--visible {
  display: flex;
}


.leave-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 60;
  padding: 0.35rem 0.75rem;
}

.explore-label {
  pointer-events: auto;
  padding: 0.75rem 1rem;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.8);
  text-align: center;
}

.explore-label {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


.tile-button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
}

.tile-button .tile-btn {
  pointer-events: auto;
  width: 80%;
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  letter-spacing: 0.08em;
}

.grid-effect {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  opacity: 0.8;
  pointer-events: none;
  animation: effect-pop 0.4s ease-out forwards;
}


@keyframes effect-pop {
  0% {
    transform: scale(0.4);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.encounter-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* HP bars inside the grid, Tibia-style */
.hp-bar {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 48px;
  height: 6px;
  border: 1px solid #000;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: 15;
}

.floating-text {
  position: absolute;
  pointer-events: none;
  font-weight: bold;
  /* Using bitmap font instead of web fonts */
  /* font-family: "Press Start 2P", "VT323", "Courier New", monospace; */
  /* font-size: 20px; */
  line-height: 1.1;
  /* Bitmap fonts don't need text-shadow since they're already styled */
  /* text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; */
  opacity: 1;
  transform: translate(-50%, 0) scale(1.0);
  transition: transform 1s linear;
  z-index: 1000; /* High z-index to appear above all other text/animations */
  image-rendering: pixelated;
}

.floating-text--active {
  transform: translate(-50%, -22px) scale(1.0);
  opacity: 1;
}

/* Static floating text: no upward float animation (used for fluid speech stacking) */
.floating-text--static {
  transition: none;
  transform: translate(-50%, 0) scale(1.0);
}

.floating-text-heal {
  /* Healing should read as light blue (numbers are bitmap-tinted separately). */
  color: #4fe0ff;
  /* Ensure healing numbers draw over speech (e.g. lifefluid "Aaaah..."). */
  z-index: 32;
}

.floating-text-speech {
  /* Exact Tibia-style orange requested */
  color: #FFA500;
  font-family: "Press Start 2P", "VT323", "Courier New", monospace;
  font-size: 14px;
  z-index: 31;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.floating-text-miss {
  color: rgba(255, 255, 255, 0.85);
}

.floating-text-zero {
  color: #ffe05f;
}

.floating-text-skill {
  color: #4fe0ff;
}

.floating-text-gold {
  color: #ffd76a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.floating-text-xp {
  color: #f8f8f8;
  font-size: 18px;
}

.floating-text-fire {
  /* Fire damage should be orange (same as fireField) */
  color: #FF8C00;
  z-index: 1000;
}

.floating-text-poison {
  /* Poison damage should be green */
  color: #4caf50;
  z-index: 1000;
}

.floating-text-energy {
  /* Energy damage should be slightly dark blue */
  color: #4169E1;
  z-index: 1000;
}

.floating-text-icon {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  min-width: 16px;
  min-height: 16px;
  aspect-ratio: 1 / 1;
  object-fit: none;
  transform: translate(0, 0) scale(1) rotate(0deg) !important;
  transition: none !important;
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.floating-text-number {
  line-height: 1;
}

.click-fade-message {
  position: fixed;
  pointer-events: none;
  font-family: "Press Start 2P", "VT323", monospace;
  font-size: 14px;
  color: #ffffff;
  padding: 6px 8px;
  border-radius: 0;
  background: rgba(0,0,0,0.7);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
  opacity: 1;
  transform: translate(-50%, -60%);
  transition: opacity 4s ease, transform 0.2s ease;
  z-index: 1000000;
}

.skill-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  color: #ffd700;
  padding: 4px 8px;
  border-radius: 0;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 215, 0, 0.3);
  display: none;
}

.hp-bar-fill {
  height: 100%;
  width: 100%;
}

.hp-bar-player .hp-bar-fill {
  background: linear-gradient(90deg, #1b7b1b, #4caf50);
}

.hp-bar-monster .hp-bar-fill {
  background: linear-gradient(90deg, #7a1e1e, #c83333);
}

/* ===== Tibia 7.4 HP bar color thresholds =====
   Applied via JS by toggling hp74-* classes on the fill element.
   Ranges (HP% remaining):
   - 100%–76%: Light Green
   - 75%–51%: Yellow-Green
   - 50%–26%: Yellow/Orange
   - 25%–6%:  Red-Orange
   - 5%–0%:   Dark Red (near death / dead)
*/
.hp-bar-fill.hp74-healthy,
.sprite-hpbar-fill.hp74-healthy {
  background: #4caf50;
}

.hp-bar-fill.hp74-yellowgreen,
.sprite-hpbar-fill.hp74-yellowgreen {
  background: #9acd32; /* yellowgreen */
}

.hp-bar-fill.hp74-yelloworange,
.sprite-hpbar-fill.hp74-yelloworange {
  background: #ffb400;
}

.hp-bar-fill.hp74-redorange,
.sprite-hpbar-fill.hp74-redorange {
  background: #ff4500; /* orange red */
}

.hp-bar-fill.hp74-darkred,
.sprite-hpbar-fill.hp74-darkred {
  background: #8b0000; /* dark red */
}

.ui-btn,
.ui-btn--sprite {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  color: var(--text-primary);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  image-rendering: pixelated;
}

.ui-btn:hover,
.ui-btn--sprite:hover {
  background-image: url("assets/tibia74/UI/MoreUI/textura_lighter.png");
}

.ui-btn:active,
.ui-btn--sprite:active {
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
}

.ui-btn.toggled,
.ui-btn--sprite.toggled {
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
}

.ui-btn--sprite {
  width: 128px;
  height: 32px;
}

.ui-btn.ghost {
  opacity: 0.85;
  filter: grayscale(0.2);
}

.ui-btn.back-btn,
.ui-btn.cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
}

/* Remove hover highlight on back and cancel buttons */
.ui-btn.back-btn:hover,
.ui-btn.cancel-btn:hover {
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
}

.ui-btn.back-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: var(--back-icon, url("assets/art/UI/back.png"));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

.ui-btn.cancel-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: var(--cancel-icon, url("assets/art/UI/cancel.png"));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

.map-caption {
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, 0.55);
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.battle-log {
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 0.4rem 0.5rem;
  height: var(--battle-log-height);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex-shrink: 0;
  margin: 0 auto;
}

.battle-log {
  /* Hide scrollbar while allowing scroll */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.battle-log::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.log-entry {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
  align-items: baseline;
}

.log-time {
  color: var(--text-muted, var(--text-primary));
  font-size: 0.75rem;
}

.log-entry.loot .log-text {
  color: var(--accent-green);
}

.log-entry.damage .log-text {
  color: var(--accent-red);
}

.log-entry.heal .log-text {
  color: #4fc3f7;
}

.log-entry.xp .log-text {
  color: #f0c66e;
}

.option-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 4px;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
}

.option-buttons .ui-btn {
  width: 100%;
}

.equipment-column.stance-column {
  width: 28px;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding-top: calc(22px + 0.4rem);
  align-self: flex-start;
}


.stance-btn {
  width: 22px;
  height: 22px;
  border: none;
  padding: 0;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: pixelated;
}

/* OFF sprites */
.stance-btn.offensive {
  background-image: url("assets/tibia74/UI/MoreUI/Offensive.png");
}
.stance-btn.balanced {
  background-image: url("assets/tibia74/UI/MoreUI/Balanced.png");
}
.stance-btn.defensive {
  background-image: url("assets/tibia74/UI/MoreUI/Defensive.png");
}
.stance-btn.move {
  background-image: url("assets/art/UI/move.png");
}
.stance-btn.walk {
  background-image: url("assets/art/UI/walk.png");
}
.stance-btn.hold {
  background-image: url("assets/art/UI/hold.png");
}
.stance-btn.ranged-toggle {
  background-image: url("assets/art/UI/ranged.png");
}

/* ON sprites */
.stance-btn.defensive.active {
  background-image: url("assets/tibia74/UI/MoreUI/DefensiveOn.png");
}
.stance-btn.balanced.active {
  background-image: url("assets/tibia74/UI/MoreUI/BalancedOn.png");
}
.stance-btn.offensive.active {
  background-image: url("assets/tibia74/UI/MoreUI/OffensiveOn.png");
}
.stance-btn.move.active {
  background-image: url("assets/art/UI/moveSelected.png");
}
.stance-btn.walk.active {
  background-image: url("assets/art/UI/walkSelected.png");
}
.stance-btn.hold.active {
  background-image: url("assets/art/UI/holdSelected.png");
}
.stance-btn.ranged-toggle.active {
  background-image: url("assets/art/UI/rangedPressed.png");
}

/* Hide ranged button for playtest */
.stance-btn.ranged-toggle {
  display: none;
}

/* Tooltip styles */
.stance-btn {
  position: relative;
}

.stance-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  color: #ffffff;
  background: none;
  padding: 0;
  margin: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.stance-btn:hover::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.333s;
}

/* Space between combat stances and positioning buttons */


.equipment-grid {
  display: flex;
  flex-direction: row;
  gap: 0.35rem;
  justify-content: center;
  align-items: stretch;
  padding: 0.4rem;
  width: max-content;      /* ← makes the container shrink-wrap the grid */
  height: max-content;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  margin: 0 auto;
}

.equipment-column {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
}

.button-spacer {
  height: 0.5rem; /* Creates empty space between button groups */
}

/* Keep all equipment columns (except the stance buttons) bottom-aligned so
   helmet/armor/legs/boots lines up with Speed/Cap regardless of stance column height. */
.equipment-column:first-child,
.equipment-column:nth-of-type(2),
.equipment-column:nth-of-type(3) {
  justify-content: flex-end;
}

.slot {
  --slot-size: 48px;
  width: var(--slot-size);
  height: var(--slot-size);
  position: relative;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Prevent accidental text selection while interacting with inventory UI (gaps between slots, etc.) */
.equipment-inventory-scroll-container,
.equipment-grid,
.inventory-grid,
.deposit-grid,
.loot-bag-grid,
.hotkey-bar,
.slot,
.slot * {
  -webkit-user-select: none;
  user-select: none;
}

/*
  During item drags, disable selection across the whole app so dragging over other panels
  (tutorial/information/etc.) doesn't create blue selection highlights.
  Keep the battle log selectable/copyable.
*/
body.is-dragging,
body.is-dragging * {
  -webkit-user-select: none;
  user-select: none;
}

body.is-dragging .battle-log,
body.is-dragging .battle-log * {
  -webkit-user-select: text;
  user-select: text;
}

.slot::before {
  content: "";
  position: absolute;
  inset: 1px; /* 1px inset gives inner frame */

  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 64px 64px;
  background-repeat: repeat;

  /* The classic Tibia bevel: dark TL, light BR */
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.7),       /* dark top-left */
    inset -1px -1px 0 rgba(255, 255, 255, 0.12); /* light bottom-right */

  z-index: 0;
}

.slot img {
  position: relative;
  z-index: 1;
  display: block;
  pointer-events: none; /* allow dragging/hovering anywhere in the slot (not just the 32x32 sprite) */
  align-self: center;
  box-sizing: content-box;
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  aspect-ratio: 1 / 1;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  object-fit: none !important;
  transform: translate(0, 0) scale(1) rotate(0deg) !important;
  transition: none !important;
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  opacity: 0.8;                 /* slightly faded like Tibia */
  margin: 0;
  padding: 0;
  border: none;
}

.item-tooltip {
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 0.45rem 0.6rem;
  color: var(--text-primary);
  font-size: 0.78rem;
  max-width: 240px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.item-tooltip .item-name {
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.item-tooltip .item-slot,
.item-tooltip .item-weight,
.item-tooltip .item-stat,
.item-tooltip .item-flag,
.item-tooltip .item-desc {
  line-height: 1.3;
}

.item-tooltip .item-flag {
  color: var(--text-muted, var(--text-primary));
  font-size: 0.72rem;
}

.item-tooltip .item-desc {
  margin-top: 0.15rem;
  color: var(--text-muted, var(--text-primary));
}


.equipment-grid .slot.speed,
.equipment-grid .slot.cap {
  width: 48px;
  height: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow:
    0 0 0 1px #000,
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  font-size: 10px;
}

.equipment-grid .slot.speed span,
.equipment-grid .slot.cap span {
  position: relative;
  z-index: 1;
  display: block;
}

.equipment-grid .slot.speed strong,
.equipment-grid .slot.cap strong {
  position: relative;
  z-index: 1;
  display: block;
}

.gold-counter-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gold-counter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
  justify-content: flex-start;
  position: relative;
}

.gold-counter-container .gold-amount {
  position: relative;
  display: block;
  width: 140px;
  margin: 0 auto;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
}

.gold-counter-container .gold-amount::before {
  content: "";
  position: absolute;
  inset: 1px;
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  z-index: 0;
  pointer-events: none;
}

.gold-counter-container .gold-amount .gold-text {
  position: relative;
  z-index: 1;
  display: block;
  color: #ffd24a;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
  padding: 0.25rem 0.5rem;
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

.gold-counter {
  --slot-size: 48px;
  position: relative;
  width: var(--slot-size);
  height: var(--slot-size);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.gold-counter-slot {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.gold-counter-slot img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}

.gold-counter img {
  width: var(--slot-size);
  height: var(--slot-size);
  object-fit: contain;
}

.gold-counter-row .gold-labels {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  align-items: flex-end;
  text-align: right;
}

.gold-counter-row .gold-labels .gold-label {
  color: #ffffff !important;
}

.gold-counter-row .gold-labels .gold-help {
  font-size: 0.75rem;
  color: var(--text-muted, var(--text-primary));
}

.equipment-stats {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.stat-chip {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 0.35rem 0.4rem;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  gap: 0.3rem;
  justify-content: start;
  padding: 0px;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  width: max-content;      /* ← makes the container shrink-wrap the grid */
  height: max-content;
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
  margin: 0;
}

.inventory-grid .slot {
  --slot-size: 46px;
}

.deposit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  grid-template-rows: repeat(5, minmax(0, auto));
  gap: 0.3rem;
  justify-content: start;
  padding: 0px;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  width: max-content;
  height: max-content;
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
  margin: 0;
}

.deposit-grid .slot {
  --slot-size: 46px;
}

.slot-count {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.65rem;
  background: rgba(0, 0, 0, 0.7);
  padding: 0 4px;
}

.item-count {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.75rem;
  color: #fff;
  pointer-events: none; /* don't block drag start / hover from the slot */
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 2px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  z-index: 2; /* ensure count renders above item sprite */
}

.inventory-grid .item-count,
.deposit-grid .item-count,
.loot-bag-grid .item-count {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.deposit-grid .item-count {
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* Lootbag */
.loot-bag-panel header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: 0.5rem;
}

.loot-bag-panel header span {
  text-align: left !important;
  flex: 0 0 auto !important;
}

.loot-bag-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  margin-right: 0.5rem;
  cursor: grab;
  transition: opacity 0.2s ease;
}

.loot-bag-icon:hover {
  opacity: 0.8;
}

.loot-bag-icon:active {
  cursor: grabbing;
}

.loot-bag-toggle {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  padding: 0 0.5rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  position: relative;
  margin-left: auto;
}

.loot-bag-toggle:hover {
  opacity: 1;
}

.loot-bag-toggle span {
  display: inline-block;
}

.loot-bag-panel.is-minimized .panel-body {
  display: none;
}

.loot-bag-panel.is-minimized {
  min-width: calc(4 * 48px + 3 * 0.3rem + 8px); /* Match grid width: 4 slots + 3 gaps + padding */
}

.loot-bag-panel.is-minimized .loot-bag-toggle span {
  display: none;
}

.loot-bag-panel.is-minimized .loot-bag-toggle::after {
  content: "+";
  display: inline-block;
}

.loot-bag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  gap: 0.3rem;
  justify-content: start;
  padding: 0px;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  width: max-content;
  height: max-content;
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
  margin: 0;
}

.loot-bag-grid .slot {
  --slot-size: 46px;
}

.debug-panel {
  flex-shrink: 0;
}

.debug-panel .panel-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.debug-panel .ui-btn {
  width: auto;
  min-width: 150px;
}

/* Bestiary */
.bestiary-panel .panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  max-height: calc(100vh - 120px);
  overflow: hidden;
}

.bestiary-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.bestiary-toolbar__meta {
  font-size: 0.85rem;
  color: var(--text-muted, var(--text-primary));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bestiary-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
}

.bestiary-search input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.95rem;
  min-width: 200px;
}

.bestiary-search input:focus {
  outline: none;
}

.bestiary-content {
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.bestiary-list,
.bestiary-detail {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.35);
  min-height: 0;
}

.bestiary-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.bestiary-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.bestiary-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: auto;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.bestiary-detail::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.bestiary-empty {
  font-size: 0.9rem;
  color: var(--text-muted, var(--text-primary));
  text-align: center;
  padding: 2rem 0.5rem;
}

.bestiary-empty--error {
  color: var(--accent-red);
}

.bestiary-card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.45);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.bestiary-card:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 163, 80, 0.4);
}

.bestiary-card.is-selected {
  border-color: var(--border-gold);
  box-shadow: 0 0 0 1px rgba(200, 163, 80, 0.35);
}

.bestiary-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bestiary-card__name {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.bestiary-card__kills {
  font-size: 0.8rem;
  color: var(--text-muted, var(--text-primary));
  text-transform: uppercase;
}

.bestiary-sprite-port {
  position: relative;
  --port-tile: 48px;
  width: calc(var(--port-tile) * 2);
  height: calc(var(--port-tile) * 2);
  border-radius: 6px;
  overflow: hidden;
}

.bestiary-sprite-port.is-large {
  --port-tile: 64px;
}

.bestiary-sprite-port__grid {
  display: grid;
  grid-template-columns: repeat(2, var(--port-tile));
  grid-template-rows: repeat(2, var(--port-tile));
  width: 100%;
  height: 100%;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
}

.bestiary-sprite-port__tile {
  border: 1px solid rgba(255, 255, 255, 0.05);
  background-color: rgba(0, 0, 0, 0.15);
}

.bestiary-sprite-port img {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  image-rendering: pixelated;
  transition: filter 0.25s ease, opacity 0.25s ease;
  /* Size is controlled by sprite-size-1 or sprite-size-2 class based on tileSize */
}

.bestiary-sprite-port.is-locked img {
  filter: grayscale(1) brightness(0.2) contrast(1.35);
  opacity: 0.45;
}

.bestiary-detail-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.bestiary-detail-sprite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.bestiary-kill-counter {
  font-size: 0.8rem;
  color: var(--text-muted, var(--text-primary));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bestiary-detail-headline h3 {
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bestiary-detail-subtitle {
  margin: 0.15rem 0 0;
  color: var(--text-muted, var(--text-primary));
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bestiary-detail-summary {
  margin: 0.25rem 0 0;
  color: var(--text-muted, var(--text-primary));
  font-size: 0.85rem;
}

.bestiary-detail-sections {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.bestiary-section {
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
}

.bestiary-section h4 {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--text-muted, var(--text-primary));
}

.bestiary-section-body {
  font-size: 0.9rem;
  color: var(--text-muted, var(--text-primary));
}

.bestiary-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
  margin: 0;
}

.bestiary-stat-grid dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-primary));
}

.bestiary-stat-grid dd {
  margin: 0;
  font-weight: 600;
}

.bestiary-immunity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.4rem;
}

.bestiary-immunity {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.35rem 0.5rem;
}

.bestiary-attack-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bestiary-attack-list li {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.35rem 0.5rem;
}

.attack-name {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.attack-damage {
  font-size: 0.85rem;
  color: var(--text-muted, var(--text-primary));
}

.attack-meta {
  font-size: 0.75rem;
  color: var(--text-muted, var(--text-primary));
}

.bestiary-loot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bestiary-loot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 0.35rem;
}

.bestiary-loot-slot {
  position: relative;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.bestiary-loot-slot img {
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.bestiary-loot-slot.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  opacity: 0.85;
}

.bestiary-loot-slot.is-locked img {
  filter: grayscale(1) brightness(0.2) contrast(1.35);
  opacity: 0.5;
}

.bestiary-loot-slot .slot-count {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 0.65rem;
  background: rgba(0, 0, 0, 0.7);
  padding: 0 3px;
  border-radius: 3px;
}

.bestiary-loot-list {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.bestiary-loot-row {
  display: grid;
  grid-template-columns: 1fr 70px 50px;
  gap: 0.5rem;
  padding: 0.2rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bestiary-loot-row.is-locked {
  opacity: 0.6;
  font-style: italic;
}

.bestiary-loot-row span:last-child {
  text-align: right;
}

.bestiary-locked-hint {
  font-size: 0.85rem;
  color: var(--text-muted, var(--text-primary));
}

/* Collection */
.collection-panel .panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  flex: 1; /* Fill available space in panel */
  overflow: hidden;
}

.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.collection-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.45);
}

.collection-search input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  min-width: 180px;
}

.collection-search input:focus {
  outline: none;
}

.collection-meta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, var(--text-primary));
}

.collection-layout {
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
  width: 100%; /* Fill panel-body width */
  min-width: 0; /* Allow grid to shrink if needed */
}

.collection-grid {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: auto;
  min-height: 0;
}

/* Hide scrollbars for collection grid */
.collection-grid::-webkit-scrollbar {
  display: none;
}

.collection-grid {
  scrollbar-width: none;
}

.collection-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.collection-section-title {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, var(--text-primary));
}

.collection-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 0.3rem;
}

.collection-card {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.collection-card img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.collection-card.is-locked img {
  filter: grayscale(1) brightness(0.2) contrast(1.35);
  opacity: 0.5;
}

.collection-card.is-selected {
  box-shadow: 0 0 0 1px var(--border-gold);
}

.collection-card .collection-card-label {
  position: absolute;
  left: 50%;
  bottom: -1.4rem;
  transform: translateX(-50%);
  font-size: 0.65rem;
  text-align: center;
  width: 120%;
  color: var(--text-muted, var(--text-primary));
  pointer-events: none;
}

.collection-grid .collection-empty {
  grid-column: 1 / -1;
  text-align: center;
}

.collection-detail {
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  overflow: auto;
  flex: 1;
}

.collection-detail h4 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.collection-detail-status {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-primary));
}

.collection-source-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.collection-source-list li {
  padding: 0.35rem 0.45rem;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.collection-source-list span:last-child {
  color: var(--text-muted, var(--text-primary));
}

body.trade-active {
  background: radial-gradient(circle at 20% 20%, rgba(90, 132, 177, 0.12), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(200, 160, 90, 0.1), transparent 30%),
    #0b1017;
}

.trade-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(3, 6, 10, 0.82), rgba(6, 10, 16, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.trade-overlay[hidden] {
  display: none !important;
}

.trade-window {
  width: min(760px, 96vw);
  background: linear-gradient(180deg, #1a1f26 0%, #0f141b 100%);
  border: 2px solid #2f3a48;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
}

.trade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(#3c3c3c, #2e2e2e);
  border-bottom: 1px solid #111;
}

.trade-title {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.trade-close {
  background: #444;
  color: #f5f5f5;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
  font-size: 1rem;
  cursor: pointer;
}

.trade-body {
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.trade-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.trade-column {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 260px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.trade-column-header {
  padding: 0.45rem 0.6rem;
  background: #2d2d2d;
  border-bottom: 1px solid #111;
  font-weight: 700;
}

.trade-search {
  padding: 0.35rem 0.6rem;
}

.trade-search input {
  width: 100%;
  background: #141414;
  border: 1px solid #444;
  color: #e5e5e5;
  padding: 0.35rem 0.45rem;
}

.trade-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem;
  overflow-y: auto;
  max-height: 420px;
}

.trade-item {
  position: relative;
  border: 1px solid #3a3f46;
  background: linear-gradient(180deg, #141920, #0f141a);
  padding: 0.45rem;
  cursor: pointer;
  display: flex;
  gap: 0.45rem;
  align-items: center;
  border-radius: 6px;
}

.trade-item:hover,
.trade-item.selected {
  border-color: #c8a350;
}

.trade-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(1);
}

.trade-item img {
  align-self: center;
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  aspect-ratio: 1 / 1;
  flex-shrink: 0 !important;
  object-fit: none !important;
  transform: translate(0, 0) scale(1) rotate(0deg) !important;
  transition: none !important;
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.trade-item .trade-item-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.trade-item .trade-item-name {
  font-weight: 700;
  color: #f3f3f3;
}

.trade-item .trade-item-price {
  font-size: 0.85rem;
  color: #ffffff;
}

.trade-item .trade-item-count {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 0.75rem;
  color: #aaa;
}

.trade-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 0.75rem;
  background: #1a1a1a;
  border: 1px solid #444;
}

.trade-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
}

.trade-meta span {
  color: #aaa;
}

.trade-meta strong {
  color: #f5f5f5;
}

.trade-actions {
  display: flex;
  gap: 0.5rem;
}

.trade-actions .ui-btn {
  min-width: 96px;
}

.shop-select-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 10, 16, 0.78), rgba(2, 4, 8, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 1rem;
}

.shop-select-overlay[hidden] {
  display: none !important;
}

.shop-select-window {
  width: min(520px, 92vw);
  background: linear-gradient(180deg, #161b23 0%, #0d1118 100%);
  border: 2px solid #2f3a48;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03);
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  position: center;
}

.shop-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  background: linear-gradient(#2f3540, #232a33);
  border-bottom: 1px solid #0b0f14;
}

.shop-select-title {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.shop-select-close {
  background: #444;
  color: #f5f5f5;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  font-size: 1rem;
  cursor: pointer;
}

.shop-select-body {
  padding: 0.65rem 0.85rem 0.85rem;
}

.shop-select-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shop-select-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #3a3f46;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  cursor: pointer;
  color: #e5e5e5;
  font-weight: 700;
  position: relative;
  min-height: 120px;
}

.shop-select-item .shop-select-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  z-index: 2;
  pointer-events: none;
}

.shop-select-item .shop-select-meta .area-title {
  line-height: 1.1;
}

.shop-select-item .shop-select-meta .area-subtitle {
  font-size: 0.95rem;
  opacity: 0.85;
  text-align: center;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-family: 'TibiaUniversal', monospace !important;
  font-weight: 400 !important;
  font-synthesis: none;
}

.shop-select-item[data-shop="aldee"] {
  background-image: url("assets/art/Panels/shopImages1.png");
}

.shop-select-item[data-shop="billy"] {
  background-image: url("assets/art/Panels/shopImages2.png");
}

.shop-select-item[data-shop="lily"] {
  background-image: url("assets/art/Panels/shopImages3.png");
}

.shop-npc-sprite-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  position: absolute;
  top: 50%;
  left: calc(50% - 32px);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.shop-npc-sprite {
  image-rendering: pixelated;
  width: auto;
  height: auto;
  display: block;
  object-fit: none;
}

.shop-select-item .area-title {
  position: relative;
  z-index: 2;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.shop-select-item .area-subtitle {
  position: relative;
  z-index: 2;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


/* Individual Shop Panels */
.shop-panel .viewport-frame {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#panelAlDee .shop-panel .viewport-frame {
  background-image: url("assets/art/Panels/shopImages1.png");
}

#panelBilly .shop-panel .viewport-frame {
  background-image: url("assets/art/Panels/shopImages2.png");
}

#panelLily .shop-panel .viewport-frame {
  background-image: url("assets/art/Panels/shopImages3.png");
}

.shop-panel .shop-content {
  padding: 1rem;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.85);
  border-radius: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.shop-description {
  font-family: 'TibiaUniversal', monospace !important;
  padding-bottom: 4px;
  width: 100%;
  text-align: center;
  color: var(--text-primary);
  font-size: 0.9rem;
  margin-bottom: 4px;
  display: block;
  min-height: 1.2em;
}

.shop-panel .shop-inner-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
  padding: 4px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.shop-panel .shop-inner-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.shop-panel .shop-inner-frame::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.shop-panel .shop-inner-frame > * {
  position: relative;
  z-index: 1;
}

.shop-panel .shop-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.shop-panel .shop-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.shop-panel .shop-section h3 {
  margin: 0 0 1rem 0;
  color: #c8a350;
  border-bottom: 1px solid #c8a350;
  padding-bottom: 0.5rem;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

.shop-panel .shop-quantity-control {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.75rem;
}

.shop-panel .shop-quantity-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
}


.shop-panel .shop-quantity-btn:active {
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.8);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

.shop-panel .shop-quantity-btn:disabled {
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.6);
  border-color: rgba(255, 255, 255, 0.05);
  color: #888;
  cursor: not-allowed;
  opacity: 0.6;
}

.shop-panel .shop-quantity-input {
  width: 50px;
  height: 24px;
  padding: 0 0.25rem;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  text-align: center;
  font-size: 12px;
  border-radius: 0;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
}

.shop-panel .shop-quantity-input:focus {
  outline: none;
  border-color: #c8a350;
  box-shadow: 0 0 3px rgba(200, 163, 80, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.7);
}

.shop-panel .shop-quantity-input::-webkit-outer-spin-button,
.shop-panel .shop-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shop-panel .shop-quantity-input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.shop-panel .shop-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shop-panel .shop-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}


.shop-panel .shop-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.shop-panel .shop-item.disabled .shop-item-icon {
  pointer-events: auto;
}

.shop-panel .shop-item.can-sell {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.85);
}

.shop-panel .shop-item-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.shop-panel .shop-item-info {
  flex: 1;
  min-width: 0;
}

.shop-panel .shop-item-name {
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.25rem;
}

.shop-panel .shop-item-price {
  color: #c8a350;
  font-size: 0.9em;
}

.shop-panel .shop-buy-btn,
.shop-panel .shop-sell-btn {
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(42, 90, 42, 0.9);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.2s ease;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}


.shop-panel .shop-sell-btn {
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(90, 42, 42, 0.9);
}


/* Shop Tabs */
.shop-panel .shop-inner-frame .shop-tabs {
  display: flex;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.5rem 0.75rem 0;
}

.shop-panel .shop-tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  color: #ccc;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

.shop-panel .shop-tab:first-child {
  border-top-left-radius: 4px;
  border-right: none;
}

.shop-panel .shop-tab:last-child {
  border-top-right-radius: 4px;
  border-left: none;
}

.shop-panel .shop-tab.active {
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f8f3e6;
}

.shop-panel .shop-tab:hover:not(.active) {
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
}


.shop-panel .shop-inner-frame .shop-tab-content {
  display: flex;
  justify-content: center;
  padding: 0 0.75rem 0.75rem;
  flex: 1 1 0;
  min-height: 0;
}

.shop-panel .shop-section {
  display: none;
  width: 100%;
  max-width: 800px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.shop-panel .shop-section.active {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
}

.shop-panel .shop-items {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.shop-panel .shop-items::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

.shop-panel .shop-item-quantity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.25rem;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.8);
  border-radius: 0;
}

.shop-panel .shop-item-quantity input {
  width: 60px;
  padding: 0.25rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #666;
  color: #fff;
  text-align: center;
  border-radius: 3px;
}

.shop-panel .shop-item-quantity button {
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  cursor: pointer;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
}






/* =========================================================
   PANEL POP OVERRIDE – must be last in the file
   ========================================================= */

/* Kill the old border-image frame on real UI panels */
article.panel[data-ui-panel],
article.panel[data-ui-panel] > header,
article.panel[data-ui-panel] > .panel-body {
  border: none !important;
  border-image: none !important;
  border-radius: 0;
}

/* Core panel container - shrinkable panels (inventory, deposit, loot) */
article.panel[data-ui-panel]:not(.stat-panel):not(.map-panel) {
  position: relative;
  padding: 4px; /* gap between outer frame & content */
  background: transparent;
  border-radius: 0;
  overflow: visible;
  transform: translateZ(0);
  width: fit-content; /* Allow inventory/deposit/loot panels to shrink to their content */
}

/* Map panels (Adventure/Bestiary/Shops/etc.) also need the outer padding,
   otherwise their panel-body background covers the frame and it looks borderless. */
article.panel[data-ui-panel].map-panel {
  position: relative;
  padding: 4px; /* gap between outer frame & content */
  background: transparent;
  border-radius: 0;
  overflow: visible;
  transform: translateZ(0);
}

/* Fixed-width panels (health/mana, skills, viewport/map panels) */
article.panel[data-ui-panel].stat-panel,
article.panel[data-ui-panel].skills-panel {
  width: 100%; /* Fill left column width */
  min-width: 100%; /* Ensure minimum width matches column */
}

article.panel[data-ui-panel].map-panel {
  width: auto; /* These panels can size naturally */
}

article.panel[data-ui-panel].collection-panel,
article.panel[data-ui-panel].info-panel,
article.panel[data-ui-panel].highscores-panel {
  width: 100%; /* Fill column width like bestiary */
  min-width: 100%; /* Prevent shrinking */
  max-width: 100%; /* Prevent expanding beyond column */
}

/* Restore borders and padding for panels that need them */
article.panel[data-ui-panel].stat-panel::after,
article.panel[data-ui-panel].skills-panel::after,
article.panel[data-ui-panel].map-panel::after,
article.panel[data-ui-panel].collection-panel::after,
article.panel[data-ui-panel].info-panel::after,
article.panel[data-ui-panel].highscores-panel::after {
  inset: 2px; /* Restore 2px border gap for these panels */
}

article.panel[data-ui-panel].stat-panel > .panel-body,
.skills-panel .panel-body {
  display: flex;
  flex-direction: column;
}

article.panel[data-ui-panel].skills-panel > .panel-body {
  padding: 0.7rem; /* Restore padding for these panels */
  margin-top: 2px; /* Restore top margin for these panels */
}

article.panel[data-ui-panel].map-panel > .panel-body {
  padding: 0.7rem; /* Restore padding for these panels */
  margin-top: 2px; /* Restore top margin for these panels */
  overflow: hidden; /* Allow scrolling inside content, not panel-body */
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 900px; /* Constrain height to enable scrolling */
}

article.panel[data-ui-panel].collection-panel > .panel-body,
article.panel[data-ui-panel].info-panel > .panel-body,
article.panel[data-ui-panel].highscores-panel > .panel-body {
  padding: 0.7rem; /* Restore padding for these panels */
  margin-top: 2px; /* Restore top margin for these panels */
  overflow: hidden; /* Allow scrolling inside content, not panel-body */
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1; /* Fill available space in panel like map-panel */
}

/* Outer stone frame */
article.panel[data-ui-panel]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.75), /* drop shadow */
    inset 0 1px 2px rgba(255, 255, 255, 0.1); /* top rim */
  z-index: 0;
}

/* Inner slab */
article.panel[data-ui-panel]::after {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.75);
  z-index: 0;
}

/* Lift-on-hover for all game panels (stats, map, inventory, etc.) */
article.panel[data-ui-panel]:hover {
  transform: none;
  transition: none;
}

article.panel[data-ui-panel]:hover::before {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.75),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

/* Header styling */
article.panel[data-ui-panel] > header {
  position: relative;
  z-index: 1;
  border-radius: 0;
  padding: 0.55rem 0.85rem;
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.18),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ensure left alignment for inventory, deposit, and Lootbag headers */
article.panel[data-ui-panel].inventory-panel > .inventory-header,
article.panel[data-ui-panel].inventory-panel > header,
article.panel[data-ui-panel].deposit-panel > header,
article.panel[data-ui-panel].loot-bag-panel > header {
  text-align: left;
}

article.panel[data-ui-panel].inventory-panel > .inventory-header span,
article.panel[data-ui-panel].inventory-panel > header span,
article.panel[data-ui-panel].deposit-panel > header span,
article.panel[data-ui-panel].loot-bag-panel > header span {
  text-align: left !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}

/* Add header borders for panels that have body borders */
article.panel[data-ui-panel].stat-panel > header,
article.panel[data-ui-panel].skills-panel > header,
article.panel[data-ui-panel].map-panel > header,
article.panel[data-ui-panel].collection-panel > header,
article.panel[data-ui-panel].info-panel > header,
article.panel[data-ui-panel].highscores-panel > header {
  border: 2px solid transparent;
  border-image: url("assets/tibia74/UI/MoreUI/textura_dark.png") 2 repeat;
  border-bottom: none; /* Remove the default border-bottom since we have full borders */
}

/* Body styling (default dark interior) */
article.panel[data-ui-panel] > .panel-body {
  position: relative;
  z-index: 1;
  border-radius: 0;
  margin-top: 0px;
  padding: 0px;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(5, 8, 11, 0.92);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.85),
    inset 0 -1px 3px rgba(255, 255, 255, 0.06);
}

/* Map panel body – slightly lighter to show the Rookgaard art */
.map-panel.panel > .panel-body {
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-color: rgba(5, 8, 11, 0.85);
}

/* Inventory / deposit / loot grids – keep their stronger stone inset */
.inventory-grid,
.deposit-grid,
.loot-bag-grid {
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
}

.center-shared-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  width: 100%;
}

.center-shared-ui .battle-log {
  width: 100%;
  max-width: 640px;
}

.leave-progress {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  width: calc(100% - 16px);
  max-width: 520px;
  padding: 0.35rem 0.45rem;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.leave-progress[hidden] {
  display: none !important;
}

.leave-progress__label {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.leave-progress__bar {
  width: 100%;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
}

.leave-progress__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #f5d76e, #c89b2b);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  transition: width 120ms linear;
}

/* ----------------------- */
/* Information panel styles */
/* ----------------------- */
.info-panel .info-body {
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.information-content {
  color: #f8f3e6;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
  width: 100%; /* Fill panel-body width */
  overflow-y: auto;
  /* Hide scrollbar but allow scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.information-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.information-content p {
  margin: 0;
}

.information-content h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.information-content h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.information-content ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.information-content li {
  margin: 0.25rem 0;
}

/* Highscores Panel Styles */
.highscores-panel .highscores-body {
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.5rem;
}

.highscores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0.25rem;
  min-height: 0; /* Critical: allows grid items to shrink */
}

/* Responsive columns */
@media (max-width: 1200px) {
  .highscores-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .highscores-grid {
    grid-template-columns: 1fr;
  }
}

.highscores-category {
  display: flex;
  flex-direction: column;
  background: rgba(8, 14, 20, 0.6);
  border: 1px solid rgba(200, 163, 80, 0.3);
  padding: 0.4rem;
  min-height: 0; /* Critical: allows flex children to shrink */
  overflow: hidden; /* Prevents bleed */
  min-width: 0; /* Prevent grid items from overflowing */
}

.highscores-category h3 {
  margin: 0 0 0.3rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #f7f0d8;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  text-align: center;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(200, 163, 80, 0.3);
  flex-shrink: 0; /* Header doesn't shrink */
}

.highscores-list {
  flex: 1;
  min-height: 0; /* Critical: allows scrolling */
  overflow-y: auto; /* Enables scroll */
  /* Hide scrollbar but allow scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.highscores-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.highscores-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  color: #f7f0d8;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  table-layout: fixed;
  min-width: 0; /* Allow table to shrink below content size */
}

.highscores-table tbody tr {
  border-bottom: 1px solid rgba(200, 163, 80, 0.15);
}

.highscores-table tbody tr:last-child {
  border-bottom: none;
}

.highscores-table td {
  padding: 0.15rem 0.25rem;
  line-height: 1.2;
}

.highscores-rank {
  width: 2rem;
  text-align: right;
  color: rgba(247, 240, 216, 0.85);
  font-weight: 600;
}

.highscores-name {
  text-align: left;
  color: #f7f0d8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0; /* Force ellipsis to work */
}

.highscores-value {
  width: 3rem;
  text-align: right;
  color: #f7f0d8;
  font-weight: 600;
}

.highscores-table tbody tr:last-child .highscores-value {
  color: #c83333;
}

.character-create-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.character-create-row input {
  flex: 1 1 auto;
}

.main-menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 2000;
}

.main-menu-panel.hidden {
  display: none;
}

.main-menu-card {
  pointer-events: auto;
  position: relative;
  width: min(520px, calc(100% - 2rem));
  min-width: 320px;
  max-width: 560px;
  padding: 4px; /* gap between outer frame & content */
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-primary, #eee);
  overflow: visible;
  transform: translateZ(0);
}

/* Outer stone frame */
.main-menu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.75), /* drop shadow */
    inset 0 1px 2px rgba(255, 255, 255, 0.1); /* top rim */
  z-index: 0;
}

/* Inner slab */
.main-menu-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.75);
  z-index: 0;
}

/* Content area - add padding similar to panel-body */
.main-menu-card > * {
  position: relative;
  z-index: 1;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

.main-menu-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding-top: 0.7rem;
  padding-bottom: 0.5rem;
  image-rendering: pixelated;
}

.main-menu-card > h2 {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0.75rem;
}

.main-menu-card > .main-menu-view {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.main-menu-card h2 {
  margin: 0 0 0.75rem;
}

.main-menu-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.alpha-badge {
  align-self: flex-start;
  position: relative;
  z-index: 2;
  padding: 0.25rem 0.6rem;
  border: none;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  color: var(--text-primary, #eee);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(200, 163, 90, 0.3);
}

.alpha-warning {
  margin: 0;
  font-size: 0.9rem;
  color: #f17474;
}

.main-menu-view.hidden {
  display: none;
}

.game-page.hidden {
  display: none !important;
}

/* Make the in-game page a flex column so `.game-grid { flex: 1; }` actually works.
   Without this, the grid becomes content-sized and will grow/shrink when right-column
   panels (deposit/loot) collapse, which makes the hotkeybar/battlelog look like it resizes. */
.game-page:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.main-menu-section {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.main-menu-section label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.main-menu-card input {
  position: relative;
  z-index: 2;
  padding: 0.4rem 0.5rem;
  border-radius: 0;
  border: none;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  color: var(--text-primary, #eee);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}

.main-menu-card button {
  align-self: flex-start;
  position: relative;
  z-index: 2;
  padding: 0.4rem 0.75rem;
  border-radius: 0;
  border: none;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  color: var(--text-primary, #eee);
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(200, 163, 90, 0.3);
}

.main-menu-card button:hover {
  filter: brightness(1.1);
}

.main-menu-card button:active {
  filter: brightness(0.9);
}

.main-menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.main-menu-error {
  min-height: 1.25rem;
  color: #f17474;
  font-size: 0.9rem;
}

.main-menu-charlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.main-menu-charlist button {
  width: 100%;
}

.main-menu-create {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.main-menu-create input {
  flex: 1 1 180px;
}

.main-menu-gender {
  display: flex;
  flex: 1 1 auto;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9rem;
}

.main-menu-gender label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.main-menu-account-label {
  font-size: 0.95rem;
  color: var(--text-primary, #eee);
}

/* Character Item Layout */
.main-menu-charlist li {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  border: none;
  border-radius: 0;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(200, 163, 90, 0.2);
}

.character-name {
  flex: 1;
  font-weight: bold;
}

.character-select-btn {
  background: var(--accent-blue);
  color: white;
  border: 1px solid var(--border-shadow);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.character-select-btn:hover {
  background: #2c8cd9;
}

.character-export-btn,
.character-import-btn {
  background: var(--accent-green);
  color: white;
  border: 1px solid var(--border-shadow);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.character-export-btn:hover,
.character-import-btn:hover {
  background: #5cb85c;
}

.character-delete-btn {
  background: var(--accent-red);
  color: white;
  border: 1px solid var(--border-shadow);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.character-delete-btn:hover {
  background: #d9534f;
}

/* Import Modal */
.main-menu-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.main-menu-modal.hidden {
  display: none;
}

.main-menu-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.main-menu-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  position: relative;
  padding: 4px; /* gap between outer frame & content */
  background: transparent;
  border: none;
  border-radius: 0;
  max-width: 500px;
  width: 90%;
  overflow: visible;
}

/* Outer stone frame for modal */
.main-menu-modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.75), /* drop shadow */
    inset 0 1px 2px rgba(255, 255, 255, 0.1); /* top rim */
  z-index: 0;
}

/* Inner slab for modal */
.main-menu-modal-content::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.75);
  z-index: 0;
}

/* Modal content area */
.main-menu-modal-content > * {
  position: relative;
  z-index: 1;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.main-menu-modal-content > h3 {
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.main-menu-modal-content > .main-menu-modal-actions {
  padding-bottom: 1.5rem;
}

.main-menu-modal-content h3 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
}

.main-menu-modal-content p {
  margin: 0 0 1rem 0;
  color: var(--text-muted, var(--text-primary));
}

.main-menu-modal-content textarea {
  position: relative;
  z-index: 2;
  width: 100%;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  border: none;
  border-radius: 0;
  color: var(--text-primary);
  padding: 0.5rem;
  font-family: monospace;
  resize: vertical;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}

.main-menu-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.main-menu-modal-actions button {
  position: relative;
  z-index: 2;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  color: white;
  border: none;
  border-radius: 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(28, 123, 217, 0.4);
}

.main-menu-modal-actions button:hover {
  background: #2c8cd9;
}

/* --- Main Menu Footer --- */
.main-menu-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  border-top: 2px solid var(--border-gold);
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    0 -2px 8px rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.main-menu-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 64px 64px;
  background-repeat: repeat;
  opacity: 0.6;
  z-index: -1;
}

.main-menu-footer-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  flex: 1;
  z-index: 1;
}

.main-menu-footer-section h4 {
  margin: 0 0 0.5rem 0;
  color: var(--border-gold);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(200, 163, 80, 0.3);
  padding-bottom: 0.35rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.main-menu-footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.main-menu-footer-section ul li {
  margin: 0;
}

.main-menu-footer-section a {
  color: var(--text-muted, var(--text-primary));
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  display: inline-block;
  padding: 0.15rem 0;
  cursor: pointer;
}

.main-menu-footer-section a:hover {
  color: var(--border-gold);
  text-shadow: 0 0 4px rgba(200, 163, 80, 0.5);
}

.main-menu-footer-bottom {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0.75rem 2rem;
  border-top: 1px solid rgba(200, 163, 80, 0.2);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted, var(--text-primary));
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 1;
}

.main-menu-footer-bottom p {
  margin: 0;
}

.main-menu-footer-meta {
  font-size: 0.7rem;
  opacity: 0.7;
}

@media (max-width: 1024px) {
  .main-menu-footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .main-menu-footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem 1.5rem;
  }
  
  .main-menu-footer-bottom {
    padding: 0.75rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .main-menu-footer-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* --- Loading Overlay --- */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loading-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid var(--border-gold);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Death Popup */
.death-popup-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2rem;
  z-index: 1000;
  pointer-events: none;
}

.death-popup-overlay:not([hidden]) {
  pointer-events: auto;
}

.death-popup {
  position: relative;
  border: 4px solid;
  border-image: url("assets/tibia74/UI/MoreUI/textura_dark.png") 4 repeat;
  border-radius: 0;
  background-clip: padding-box;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: 0 0 0 1px #000, 0 4px 12px rgba(0, 0, 0, 0.8);
  min-width: 400px;
  max-width: 600px;
  width: 90%;
}

.death-popup::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 64px 64px;
  background-repeat: repeat;
  z-index: -1;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.7),
    inset -1px -1px 0 rgba(255, 255, 255, 0.12);
}

.death-popup-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}

.death-popup-text {
  margin: 0;
  color: var(--text-primary, #f8f3e6);
  text-align: center;
  line-height: 1.6;
  font-size: 1rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.death-popup-ok-btn {
  padding: 0.5rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 1px solid var(--border-gold, #c9a45a);
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  color: var(--text-primary, #f8f3e6);
  transition: filter 120ms ease;
}

.death-popup-ok-btn:hover {
  filter: brightness(1.1);
}

.death-popup-ok-btn:active {
  filter: brightness(0.95);
}




/* Death popup locked by default */
#deathPopupOverlay {
  display: none;
}

/* Explicit unlock */
#deathPopupOverlay.death-popup-unlocked {
  display: flex;
}

/* =========================================================
   Deposit box visual consistency
   =========================================================
   The global panel-body styling uses textura_mid. If the deposit box should
   always read as the darker stone, force it here at the end of the file.
*/
article.panel[data-ui-panel].deposit-panel > .panel-body {
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
}

/* =========================================================
   Stack split popover (Tibia-textura)
   ========================================================= */
.stack-split-popover {
  position: fixed;
  width: 190px;
  z-index: 100000;
  pointer-events: auto;
}

.stack-split-popover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/tibia74/UI/MoreUI/textura_dark.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.stack-split-popover::after {
  content: "";
  position: absolute;
  inset: 2px;
  background-image: url("assets/tibia74/UI/MoreUI/textura_mid.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.12), inset 0 -3px 6px rgba(0, 0, 0, 0.75);
  z-index: 0;
}

.stack-split-popover__inner {
  position: relative;
  z-index: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack-split-popover__title {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary, #f7f0d8);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
}

.stack-split-popover__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stack-split-popover__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.55);
  color: var(--text-primary, #f7f0d8);
  padding: 6px 8px;
  border-radius: 0;
  outline: none;
}

.stack-split-popover__quick,
.stack-split-popover__actions {
  display: flex;
  gap: 6px;
}

.stack-split-popover__btn {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-image: url("assets/tibia74/UI/MoreUI/textura_light.png");
  background-size: 96px 96px;
  background-repeat: repeat;
  color: var(--text-primary, #f7f0d8);
  padding: 4px 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}

.stack-split-popover__btn--primary {
  border-color: rgba(200, 163, 90, 0.7);
}

/* Prevent accidental page text highlighting while dragging items */
body.is-dragging,
body.is-dragging * {
  user-select: none !important;
}