/* Scape Idle - Estilo Medieval Cozy */
/* Fontes carregadas com preconnect e CORS no index.html */

:root {
  /* Paleta Cozy Quente (Clara) */
  --bg-app: #f6ebd6;
  --bg-card: #fdfaf2;
  --bg-card-hover: #f5eedb;
  --bg-header: #4e3620;
  --bg-nav: #422d1a;
  
  --text-primary: #3d240f;
  --text-secondary: #6e4e34;
  --text-light: #fdfaf2;
  
  --border-color: #835c3b;
  --border-light: #d6be9c;
  
  --color-primary: #e58e26;
  --color-accent: #f39c12;
  --color-success: #27ae60;
  --color-danger: #c0392b;
  --color-info: #2980b9;
  
  --hp-color: #eb4d4b;
  --xp-color: #3ae374;
  --xp-color-dark: #20bf6b;
  
  --shadow-color: rgba(61, 36, 15, 0.15);
  
  --font-title: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

/* ================= TIPOGRAFIA / ESCOLHA DE FONTES ================= */
body.font-default,
body.font-nunito {
  --font-title: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
}

body.font-inter {
  --font-title: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

body.font-medieval {
  --font-title: 'MedievalSharp', 'Cinzel', cursive, serif;
  --font-body: 'MedievalSharp', 'Alegreya', cursive, serif;
}

body.font-classic {
  --font-title: 'Cinzel', 'Alegreya', Georgia, serif;
  --font-body: 'Alegreya', 'Nunito', system-ui, sans-serif;
}

body.font-pixel {
  --font-title: 'Pixelify Sans', cursive, sans-serif;
  --font-body: 'Pixelify Sans', cursive, sans-serif;
}

body.font-gothic {
  --font-title: 'Almendra', 'Cinzel', serif;
  --font-body: 'Almendra', 'Alegreya', serif;
}

/* Paleta de Cores do Modo Escuro Cozy (Dark Chocolate com Alto Contraste) */
.theme-cozy.dark-mode {
  --bg-app: #150d06;
  --bg-card: #28180d;
  --bg-card-hover: #352011;
  --bg-header: #1e1108;
  --bg-nav: #140b05;
  
  --text-primary: #f8f1e2;
  --text-secondary: #e2d1be;
  --text-light: #ffffff;
  
  --border-color: #744e30;
  --border-light: #523722;
  
  --color-primary: #e58e26;
  --color-accent: #f39c12;
  
  --shadow-color: rgba(0, 0, 0, 0.6);
}

/* RESET E BASE */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-app);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh; /* Corrige altura no Safari iOS (barra de endereço dinâmica) */
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6, .pixel-art-title {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

p {
  color: var(--text-secondary);
  line-height: 1.5;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
}

.hidden {
  display: none !important;
}

/* LAYOUT PRINCIPAL */
#game-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* Corrige altura no Safari iOS (barra de endereço dinâmica) */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  box-sizing: border-box;
}

/* CABEÇALHO (HEADER) */
.game-header {
  background: linear-gradient(180deg, var(--bg-header) 0%, rgba(32, 20, 11, 0.98) 100%);
  color: var(--text-light);
  padding: max(10px, env(safe-area-inset-top, 10px)) max(16px, env(safe-area-inset-right, 16px)) 10px max(16px, env(safe-area-inset-left, 16px));
  border-bottom: 3px solid var(--border-color);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(229, 142, 38, 0.25);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.header-main-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  position: relative;
  padding-right: 54px;
  min-height: 52px;
}

.char-badge {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
}

.char-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.avatar-img {
  font-size: 2.2rem;
  background: radial-gradient(circle at 35% 28%, rgba(255, 211, 42, 0.24) 0%, rgba(46, 28, 13, 0.92) 54%, rgba(15, 9, 5, 0.96) 100%);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 2px solid #f1c40f;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 0 2px rgba(78, 45, 16, 0.85), 0 0 11px rgba(241, 196, 15, 0.38), inset 0 0 8px rgba(0, 0, 0, 0.58);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(-3px);
}

.avatar-img:hover {
  transform: translateY(-3px) scale(1.08);
  border-color: #ffd32a;
  box-shadow: 0 0 0 2px rgba(111, 66, 19, 0.95), 0 0 16px rgba(241, 196, 15, 0.65), inset 0 0 10px rgba(229, 142, 38, 0.42);
}

.avatar-img::after {
  content: "✏️";
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 0.65rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.char-name-text {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff4df;
  letter-spacing: 0;
  line-height: 1.1;
  padding: 5px 11px 6px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(241, 196, 15, 0.5);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(91, 54, 22, 0.9) 0%, rgba(30, 18, 10, 0.96) 56%, rgba(57, 33, 15, 0.9) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  text-align: center;
}

.char-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
  gap: 5px;
  font-size: 0.8rem;
  color: #f0deca;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(255, 211, 42, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 4px rgba(0, 0, 0, 0.2);
}

.char-sub strong {
  color: #ffd32a;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, rgba(255, 211, 42, 0.18), rgba(255, 211, 42, 0.04));
  border: 1.5px solid rgba(255, 211, 42, 0.4);
  border-radius: 3px;
  padding: 1px 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  line-height: 1.1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.header-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-settings-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(0, 0, 0, 0.3) 100%);
  border: 1.5px solid rgba(229, 142, 38, 0.55);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.2s ease, border-color 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.header-settings-btn:hover {
  transform: translateY(-50%) rotate(18deg) scale(1.12);
  border-color: #f39c12;
  box-shadow: 0 0 10px rgba(229, 142, 38, 0.45);
  filter: brightness(1.2);
}

.header-settings-btn:active {
  transform: translateY(-50%) rotate(18deg) scale(0.96);
  border-color: var(--color-primary);
}

.header-settings-btn.active {
  background: linear-gradient(180deg, rgba(229, 142, 38, 0.32) 0%, rgba(45, 27, 14, 0.65) 100%) !important;
  border: 1.5px solid #f39c12 !important;
  border-bottom: 3px solid var(--color-primary) !important;
  box-shadow: 0 2px 8px rgba(229, 142, 38, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.header-settings-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
}

.currency-group {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 1.05rem;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(38, 24, 13, 0.75) 100%);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(241, 196, 15, 0.45);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #ffd32a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.gold-sprite-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(241, 196, 15, 0.5));
}

.header-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(0, 0, 0, 0.25) 100%);
  border: 1.5px solid var(--border-light);
  color: var(--text-light);
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.header-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(0, 0, 0, 0.15) 100%);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

/* GRUPO DE COMIDA RÁPIDA (QUICK EAT WITH DOCKED FOOD SELECTOR) */
.quick-eat-group,
.minibar-eat-group {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.quick-food-select-btn,
.minibar-food-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(180deg, #3d2817 0%, #20140a 100%);
  border: 1.5px solid #d4973b;
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 2px 7px;
  cursor: pointer;
  min-width: 34px;
  height: auto;
  transition: all 0.15s ease;
  user-select: none;
}

.quick-food-select-btn:hover,
.minibar-food-select-btn:hover {
  background: linear-gradient(180deg, #4d331e 0%, #2a1b0d 100%);
  border-color: #ffd32a;
  filter: brightness(1.15);
}

.quick-food-select-btn:active,
.minibar-food-select-btn:active {
  transform: scale(0.96);
}

.quick-food-img,
.minibar-food-img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.quick-food-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2b180d 0%, #170d06 100%);
  border: 1.5px solid #f39c12;
  color: #f1c40f;
  font-size: 0.68rem;
  font-weight: 900;
  font-family: var(--font-body);
  line-height: 1;
  padding: 1px 4px;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 3;
}

.quick-food-badge.no-food {
  background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
  border-color: #7f8c8d;
  color: #bdc3c7;
  opacity: 0.85;
}

.quick-eat-group #quick-eat-btn,
.minibar-eat-group #minibar-eat-btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.header-btn:active {
  transform: translateY(1px);
}

.header-btn-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
}

.header-bars-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .header-main-info {
    padding-right: 50px;
  }

  .char-badge {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .header-bars-info {
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }
}

/* BARRAS DE STATUS */
.stat-bar-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hp-bar-container {
  position: relative !important;
  overflow: visible !important;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.hp-bar-container .bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  position: relative;
}

.hp-bar-container .bar-label .currency-group {
  margin-left: auto;
  justify-content: center;
  align-self: center;
  width: auto;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 8px;
  font-size: 0.90rem;
  white-space: nowrap;
}

.hp-bar-container #gold-display {
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 0;
}

.hp-bar-container .gold-label {
  display: none;
}

.hp-bar-container #gold-display[data-digits="7"],
.hp-bar-container #gold-display[data-digits="8"],
.hp-bar-container #gold-display[data-digits="9"] {
  font-size: 0.88rem;
}

.hp-bar-container #gold-display[data-digits="10"],
.hp-bar-container #gold-display[data-digits="11"],
.hp-bar-container #gold-display[data-digits="12"] {
  font-size: 0.78rem;
}

.hp-bar-container #gold-display[data-digits="13"],
.hp-bar-container #gold-display[data-digits="14"],
.hp-bar-container #gold-display[data-digits="15"],
.hp-bar-container #gold-display[data-digits="16"] {
  font-size: 0.62rem;
}

.hp-bar-bg {
  height: 20px !important;
  border-radius: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  border: 1.5px solid var(--border-light) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

.hp-bar-overlay-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.2px;
}

.hp-bar-overlay-text .bar-label-icon-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.hp-bar-overlay-text #hp-current {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

.hp-bar-overlay-text #hp-max {
  color: #ffffff;
  font-weight: 900;
}

.bar-label > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.12));
  border: 1px solid rgba(255, 211, 42, 0.18);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bar-label #total-level,
.bar-label #header-combat-level {
  color: #ffd32a;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.bar-background {
  background-color: rgba(0, 0, 0, 0.35);
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35);
}

.bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 9px;
  transition: width 0.15s linear;
}

.hp-fill {
  background: linear-gradient(90deg, #ff5e57, #ff3f34);
  box-shadow: 0 0 6px rgba(255, 77, 77, 0.5);
}

.skill-fill {
  background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.plot-fill {
  background: linear-gradient(90deg, #27ae60, #2ecc71);
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}

.combat-skill-fill {
  background: linear-gradient(90deg, #e67e22, #d35400);
}

.active-banner {
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 4px 8px 6px 8px;
  font-family: 'Alegreya', Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 32px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.active-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.active-banner-text {
  font-family: 'Alegreya', Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  text-align: center;
}

.active-banner-text strong {
  font-family: 'Alegreya', Georgia, serif;
  color: #ffd32a;
  font-weight: 800;
}

.banner-skill-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 211, 42, 0.5);
  text-underline-offset: 2px;
}

.banner-skill-link:hover,
.banner-skill-link:active {
  color: #ffe589;
  text-decoration-color: #ffe589;
}

.banner-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.banner-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.6);
  transition: width 0.08s linear;
}

.banner-combat-fill {
  background: linear-gradient(90deg, #ffd32a, #f39c12) !important;
  box-shadow: 0 0 8px rgba(255, 211, 42, 0.8) !important;
}

.banner-floating-xp-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 20;
}

.banner-floating-xp {
  position: absolute;
  bottom: 2px;
  left: 10px;
  font-family: 'Nunito', 'Alegreya', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  color: #2ecc71;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(46, 204, 113, 0.9);
  pointer-events: none;
  user-select: none;
  z-index: 21;
  animation: bannerFloatingXpRise 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bannerFloatingXpRise {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.85);
  }
  15% {
    opacity: 1;
    transform: translateY(-1px) scale(1.1);
  }
  60% {
    opacity: 0.95;
    transform: translateY(-11px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
}

.avatar-floating-heal-container,
.hp-floating-heal-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 60;
}

.hp-floating-heal-container {
  bottom: 0;
  top: auto;
  height: 20px;
}

.avatar-floating-heal,
.hp-floating-heal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Nunito', 'Alegreya', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: #2ecc71;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 12px rgba(46, 204, 113, 0.95), 0 0 4px rgba(255, 255, 255, 0.85);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 65;
  animation: hpFloatingHealRise 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hpFloatingHealRise {
  0% {
    opacity: 0;
    transform: translate(-50%, 0%) scale(0.75);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -45%) scale(1.25);
  }
  60% {
    opacity: 0.95;
    transform: translate(-50%, -115%) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -185%) scale(0.9);
  }
}

.banner-stop-btn {
  background-color: var(--color-danger);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.banner-stop-btn:hover {
  transform: scale(1.18);
  background-color: #e74c3c;
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.9);
}

.active-buffs-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.buff-badge {
  background-color: rgba(46, 204, 113, 0.25);
  border: 1px solid var(--color-success);
  color: #2ecc71;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* NAVEGAÇÃO DO JOGO */
.game-nav {
  background: linear-gradient(180deg, var(--bg-nav) 0%, rgba(24, 15, 8, 0.98) 100%);
  display: flex;
  justify-content: space-around;
  padding: 6px 4px max(6px, env(safe-area-inset-bottom, 6px)) 4px;
  border-top: 3px solid var(--border-color);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(229, 142, 38, 0.25);
  z-index: 10;
  overflow-x: auto;
  flex-shrink: 0;
  gap: 3px;
}

.nav-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.18) 100%);
  border: 1px solid rgba(229, 142, 38, 0.18);
  color: #d7c4af;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  min-width: 48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  user-select: none;
}

.nav-item:hover {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(229, 142, 38, 0.22) 0%, rgba(45, 27, 14, 0.45) 100%);
  border-color: rgba(229, 142, 38, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.nav-item.active {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(229, 142, 38, 0.32) 0%, rgba(45, 27, 14, 0.65) 100%);
  border: 1.5px solid #f39c12;
  border-bottom: 3px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(229, 142, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.nav-icon {
  font-size: 1.3rem;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-sprite-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}

.nav-item:hover .nav-sprite-img {
  transform: scale(1.1);
}

.nav-item.active .nav-sprite-img {
  transform: scale(1.12);
  filter: drop-shadow(0 2px 4px rgba(229, 142, 38, 0.6));
}

.nav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 4px;
  min-width: 15px;
  height: 15px;
  line-height: 13px;
  text-align: center;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
}

#inventory-badge,
#bank-badge {
  background: linear-gradient(135deg, #2b180d 0%, #170d06 100%);
  border: 1.5px solid #f39c12;
  color: #f1c40f;
  font-weight: 900;
  border-radius: 3px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

#inventory-badge.full,
#bank-badge.full {
  background: linear-gradient(135deg, #c0392b 0%, #962d22 100%);
  border: 1.5px solid #ff7675;
  color: #ffffff;
  border-radius: 3px !important;
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* CONTEÚDO PRINCIPAL (MAIN) */
.game-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 85px 16px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.tab-panel {
  display: none;
  animation: fadeIn 0.2s ease-in-out;
}

.tab-panel.active {
  display: block;
}

/* CARDS E ELEMENTOS COMUNS */
.card {
  background-color: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 8px var(--shadow-color);
}

.panel-header {
  background: linear-gradient(135deg, rgba(253, 250, 242, 0.92) 0%, rgba(244, 231, 208, 0.96) 100%);
  border: 1.5px solid var(--border-light);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px var(--shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

body.dark-mode .panel-header {
  background: linear-gradient(135deg, rgba(40, 24, 13, 0.92) 0%, rgba(22, 14, 8, 0.96) 100%);
  border-color: rgba(229, 142, 38, 0.35);
  border-left: 5px solid #e58e26;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.panel-header h2,
.panel-header h3 {
  font-family: var(--font-title);
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  letter-spacing: 0.3px;
}

body.dark-mode .panel-header h2,
body.dark-mode .panel-header h3 {
  color: #fdfaf2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.panel-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(229, 142, 38, 0.25) 0%, rgba(0, 0, 0, 0.15) 100%);
  padding: 4px;
  border-radius: 6px;
  border: 1px solid rgba(229, 142, 38, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.panel-title-sprite {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.panel-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-top: 4px;
  margin-bottom: 0;
  line-height: 1.35;
}

body.dark-mode .panel-desc {
  color: #d7c4af;
}

.panel-desc strong {
  color: var(--color-primary);
}

body.dark-mode .panel-desc strong {
  color: #ffd32a;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

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

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.text-center { text-align: center; }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-sm { font-size: 0.85rem; }
.font-bold { font-weight: bold; }
.mar-t-1 { margin-top: 8px; }
.mar-t-2 { margin-top: 16px; }
.pad-y-2 { padding-top: 16px; padding-bottom: 16px; }
.divider { border: 0; border-top: 1px solid var(--border-light); margin: 16px 0; }
.w-full { width: 100%; }

/* BOTÕES ESTILO PAPEL / MEDIEVAL */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: bold;
  cursor: pointer;
  border: 2px solid var(--border-color);
  transition: all 0.15s;
  box-shadow: 0 2px 4px var(--shadow-color);
  user-select: none;
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-accent);
}

.btn-secondary {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--border-light);
}

.btn-danger {
  background-color: var(--color-danger);
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background-color: #962a17;
}

.btn-dark-red {
  background: linear-gradient(180deg, #7c1a1a, #561111);
  border: 1px solid #942525 !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: all 0.15s ease;
}

.btn-dark-red:hover:not(:disabled) {
  background: linear-gradient(180deg, #962222, #6b1616);
  border-color: #b83333 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(124, 26, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-dark-red:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #4d0f0f, #3b0b0b);
}

.btn-warning {
  background-color: #f39c12;
  color: #fff;
}

.btn-eat-green,
.btn-farm-green {
  background: linear-gradient(180deg, #27ae60, #1e8449);
  border: 1.5px solid #196f3d !important;
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(30, 132, 73, 0.35);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  transition: all 0.15s ease;
}

.btn-eat-green:hover:not(:disabled),
.btn-farm-green:hover:not(:disabled) {
  background: linear-gradient(180deg, #2ecc71, #229954);
  border-color: #1e8449 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(39, 174, 96, 0.45);
}

.btn-eat-green:active:not(:disabled),
.btn-farm-green:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.btn-prayer-bone {
  background: linear-gradient(180deg, #fdfbf7 0%, #ede6d8 100%);
  border: 1.5px solid #d5cbb8 !important;
  color: #3d3429 !important;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.15s ease;
}

.btn-prayer-bone:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffffff 0%, #f4ede0 100%);
  border-color: #c4b59d !important;
  color: #271f16 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.btn-prayer-bone:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, #e4dcce 0%, #dbd0bf 100%);
}

body.dark-mode .btn-prayer-bone {
  background: linear-gradient(180deg, #3d3935 0%, #2b2723 100%);
  border-color: #5c554e !important;
  color: #f1ede6 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

body.dark-mode .btn-prayer-bone:hover:not(:disabled) {
  background: linear-gradient(180deg, #4d4843 0%, #38332e 100%);
  border-color: #786f66 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

.btn-sm {
  padding: 5px 10px;
  font-size: 0.85rem;
}

.btn-large {
  padding: 12px 24px;
  font-size: 1.15rem;
}

.button-group-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.button-group-stack .btn,
#open-reset-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-theme-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* SELETOR DE TEMA (AUTOMÁTICO / ESCURO / CLARO) */
.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}

#font-selector-grid,
#audio-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px;
}

.btn-theme-option {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  color: var(--text-primary);
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 4px var(--shadow-color);
  user-select: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.btn-theme-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

.btn-theme-option:hover {
  border-color: var(--color-primary);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

.btn-theme-option.active {
  background: linear-gradient(180deg, #e58e26 0%, #d35400 100%) !important;
  border-color: #f39c12 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(229, 142, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.btn-audio-option {
  padding: 6px 4px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.btn-audio-option .audio-btn-top {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 0.74rem !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.btn-audio-option .audio-btn-top span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.btn-audio-option .header-btn-icon-img,
.btn-audio-option .btn-action-icon-img {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.btn-audio-option .badge-status-green,
.btn-audio-option .badge-status-red {
  display: inline-block !important;
  font-size: 0.70rem !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
}

#pwa-install-app-btn,
.btn-audio-option.btn-primary,
#combat-modal-goto-btn,
.dungeon-explore-action-btn,
#bank-deposit-gold-btn,
#confirm-bank-gold-btn,
#close-offline-btn,
.food-select-btn {
  background: linear-gradient(180deg, #e58e26 0%, #d35400 100%) !important;
  border-color: #f39c12 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(229, 142, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

#pwa-install-app-btn:hover,
.btn-audio-option.btn-primary:hover,
#combat-modal-goto-btn:hover,
.dungeon-explore-action-btn:hover,
#bank-deposit-gold-btn:hover,
#confirm-bank-gold-btn:hover,
#close-offline-btn:hover,
.food-select-btn:hover {
  background: linear-gradient(180deg, #f39c12 0%, #e67e22 100%) !important;
  border-color: #f1c40f !important;
  transform: translateY(-1px);
}

#language-selector-grid,
#creation-language-selector-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 480px) {
  .theme-selector-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px;
  }
  .btn-theme-option {
    padding: 6px 2px;
    font-size: 0.72rem;
  }
  #font-selector-grid,
  #audio-settings-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #language-selector-grid,
  #creation-language-selector-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ================= ABA SKILLS ================= */
.skills-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.skills-tabs-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  box-shadow: 0 2px 6px var(--shadow-color);
  width: 100%;
  box-sizing: border-box;
}

body.dark-mode .skills-tabs-card {
  background: rgba(30, 18, 10, 0.85);
  border-color: rgba(229, 142, 38, 0.3);
}

.skills-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.skills-cat-btn {
  background-color: var(--bg-app);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 4px var(--shadow-color);
}

.skills-cat-btn:hover {
  border-color: var(--color-primary);
  background-color: var(--bg-card-hover);
  transform: translateY(-1px);
}

.skills-cat-btn.active {
  background: linear-gradient(180deg, #e58e26 0%, #d35400 100%) !important;
  color: #ffffff !important;
  border-color: #f39c12 !important;
  box-shadow: 0 2px 8px rgba(229, 142, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.skill-card {
  background-color: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 4px var(--shadow-color);
}

.skill-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-color);
  box-shadow: 0 4px 8px var(--shadow-color);
}

.skill-card.combat-skill {
  border-color: #d35400;
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(211, 84, 0, 0.08) 100%);
}

.skill-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.skill-icon {
  font-size: 1.8rem;
  background-color: rgba(61, 36, 15, 0.05);
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
}

.skill-info {
  flex: 1;
  min-width: 0;
}

.skill-info h3 {
  font-size: 1.02rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-card-level-badge {
  background: linear-gradient(135deg, var(--color-primary), #d35400);
  color: white;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
}

.skill-card-level-badge span {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
  font-weight: bold;
  line-height: 1;
}

.skill-card-level-badge strong {
  font-size: 1.12rem;
  line-height: 1.1;
  font-weight: 900;
}

/* EFEITO LENDÁRIO DE NÍVEL MÁXIMO 99 */
.skill-card.max-level-99 {
  border: 2px solid #f1c40f !important;
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(241, 196, 15, 0.08) 100%) !important;
  box-shadow: 0 0 12px rgba(241, 196, 15, 0.35), 0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

.skill-card.max-level-99:hover {
  box-shadow: 0 0 18px rgba(241, 196, 15, 0.55), 0 5px 12px rgba(0, 0, 0, 0.4) !important;
  border-color: #ffd700 !important;
}

.skill-card.max-level-99 .skill-card-level-badge {
  background: linear-gradient(135deg, #f1c40f, #d4ac0d) !important;
  color: #2c1a06 !important;
  border-color: #fff !important;
  box-shadow: 0 0 8px rgba(241, 196, 15, 0.6) !important;
}

.skill-card.max-level-99 .skill-card-level-badge span {
  color: #4a3000 !important;
  font-weight: 900;
}

.skill-card.max-level-99 .skill-card-level-badge strong {
  color: #2c1a06 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.skill-card.max-level-99 .bar-fill {
  background: linear-gradient(90deg, #f39c12, #f1c40f) !important;
  box-shadow: 0 0 8px rgba(241, 196, 15, 0.6) !important;
}

.skill-card.training-active {
  border: 2px solid #2ecc71 !important;
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.12) 0%, var(--bg-card) 100%) !important;
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.28), 0 0 12px rgba(46, 204, 113, 0.3) !important;
}

.skill-card.training-active .skill-card-level-badge {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.5) !important;
}

.skill-card.training-active .bar-fill {
  background: linear-gradient(90deg, #2ecc71, #27ae60) !important;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.6) !important;
}

/* Painel de detalhes de skill no nível 99 */
.skill-detail-progress-card.max-level-99 {
  border: 2px solid #f1c40f !important;
  box-shadow: 0 0 16px rgba(241, 196, 15, 0.35) !important;
}

.skill-detail-progress-card.max-level-99 .detail-level-badge {
  background: linear-gradient(135deg, #f1c40f, #d4ac0d) !important;
  color: #2c1a06 !important;
  border: 1px solid #fff !important;
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.6) !important;
}

.skill-detail-progress-card.max-level-99 .detail-level-badge span {
  color: #4a3000 !important;
  font-weight: 900;
}

.skill-detail-progress-card.max-level-99 .detail-level-badge strong {
  color: #2c1a06 !important;
}

.skill-detail-progress-card.max-level-99 #detail-skill-xp-bar {
  background: linear-gradient(90deg, #f39c12, #f1c40f) !important;
  box-shadow: 0 0 8px rgba(241, 196, 15, 0.6) !important;
}

.skill-active-indicator {
  font-size: 0.72rem;
  font-weight: 800;
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  animation: pulse-green 1s infinite alternate;
  letter-spacing: 0.5px;
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.6);
}

@keyframes pulse-green {
  from {
    box-shadow: 0 0 3px rgba(46, 204, 113, 0.5);
  }
  to {
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.9), 0 0 4px rgba(39, 174, 96, 0.8);
  }
}

.skill-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill-xp-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: right;
  font-weight: bold;
}

.skill-xp-text span:first-child {
  color: var(--text-primary);
  font-weight: 700;
}

.skill-xp-text span:last-of-type {
  color: var(--color-primary);
  font-weight: 900;
}

body.dark-mode .skill-xp-text span:last-of-type {
  color: #ffd166;
}

/* PAINEL DE DETALHES DA SKILL */
.detail-panel {
  animation: slideIn 0.2s ease-out;
}

.detail-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
  gap: 8px;
}

.detail-header h3, .detail-header h4 {
  font-size: 1.3rem;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 6px 12px;
  text-align: center;
  grid-column: 1 / -1;
  grid-row: 1;
  border: 1px solid rgba(241, 196, 15, 0.46);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(91, 54, 22, 0.9) 0%, rgba(30, 18, 10, 0.96) 56%, rgba(57, 33, 15, 0.9) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.28);
}

body:not(.dark-mode) .detail-header h3,
body:not(.dark-mode) .detail-header h4 {
  color: #3e2712;
  background: linear-gradient(135deg, #fffaf0 0%, #f7e5bd 54%, #f1d397 100%);
  border-color: rgba(181, 124, 38, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(129, 79, 21, 0.16), 0 2px 5px rgba(83, 51, 17, 0.18);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.detail-header > :last-child {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  grid-column: 2;
  grid-row: 2;
}

.detail-header #stop-skill-btn {
  padding: 5px 9px;
  font-size: 0.78rem;
}

.detail-header > :first-child {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

@media (max-width: 460px) {
  .detail-header h3, .detail-header h4 {
    font-size: 1.05rem;
  }
}

/* Card de Progresso / Barra de XP na Visão Detalhada da Skill */
.skill-detail-progress-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 5px var(--shadow-color);
}

.detail-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-level-badge {
  background: linear-gradient(135deg, var(--color-primary), #d35400);
  color: white;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.detail-level-badge span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.detail-level-badge strong {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 900;
}

.detail-xp-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-xp-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-xp-numbers {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.detail-xp-numbers #detail-skill-xp-current {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.92rem;
}

.detail-xp-numbers #detail-skill-xp-next {
  color: #e58e26;
  font-weight: 900;
  font-size: 0.96rem;
}

body.dark-mode .detail-xp-numbers #detail-skill-xp-next {
  color: #f39c12;
}

.detail-xp-numbers #detail-skill-xp-pct {
  color: #2ecc71;
  font-weight: 900;
  background: rgba(46, 204, 113, 0.14);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(46, 204, 113, 0.4);
  font-size: 0.8rem;
  margin-left: 2px;
}

body.dark-mode .detail-xp-numbers #detail-skill-xp-pct {
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.18);
  border-color: rgba(46, 204, 113, 0.5);
}

.detail-xp-to-next {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.detail-xp-to-next span {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.detail-xp-to-next strong {
  font-size: 0.92rem;
  color: #e58e26;
  font-weight: 900;
  background: rgba(229, 142, 38, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(229, 142, 38, 0.35);
  display: inline-block;
}

body.dark-mode .detail-xp-to-next strong {
  color: #f39c12;
  background: rgba(243, 156, 18, 0.16);
  border-color: rgba(243, 156, 18, 0.45);
}

/* ================= ABAS DE SUB-CATEGORIAS DAS SKILLS ================= */
.skill-subcategory-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.skill-subcategory-tabs-bar::-webkit-scrollbar {
  height: 4px;
}

.skill-subcategory-tabs-bar::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.skill-subcat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.skill-subcat-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: #d4af37;
}

.skill-subcat-btn.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(243, 156, 18, 0.12) 100%);
  color: var(--text-primary);
  border-color: #d4af37;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 2px 8px rgba(212, 175, 55, 0.15);
}

body.dark-mode .skill-subcat-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: #b2bec3;
}

body.dark-mode .skill-subcat-btn.active {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.22) 0%, rgba(212, 175, 55, 0.12) 100%);
  border-color: #f1c40f;
  color: #ffd32a;
  box-shadow: 0 0 0 1px rgba(241, 196, 15, 0.35), 0 0 10px rgba(241, 196, 15, 0.15);
}

.skill-subcat-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-row {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 5px var(--shadow-color);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.action-row:hover:not(.locked) {
  border-color: var(--color-primary);
  box-shadow: 0 4px 10px var(--shadow-color);
  transform: translateY(-1px);
}

.action-row.training-active {
  border: 2px solid #2ecc71 !important;
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.12) 0%, var(--bg-card) 100%) !important;
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.28), 0 0 14px rgba(46, 204, 113, 0.35) !important;
}

body.dark-mode .action-row.training-active {
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.18) 0%, var(--bg-card) 100%) !important;
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.38), 0 0 16px rgba(46, 204, 113, 0.45) !important;
}

.action-row.locked {
  opacity: 0.6;
  background-color: rgba(0, 0, 0, 0.03);
}

.action-media {
  font-size: 1.8rem;
  background-color: rgba(0, 0, 0, 0.04);
  padding: 6px;
  border-radius: var(--radius-sm);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .action-media {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.action-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.action-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.action-title {
  font-size: 1.06rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: 0.3px;
  font-family: var(--font-medieval, 'Cinzel', serif);
}

.action-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ff9a9a;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.45);
  padding: 2px 7px;
  border-radius: 4px;
}

.locked-badge-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.action-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.action-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 3px 8px;
  height: 24px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid transparent;
  line-height: 1;
}

.action-chip img,
.action-chip .inline-xp-icon,
.action-chip .inline-time-icon,
.action-chip .inline-meta-icon,
.action-chip .inline-misc-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
  margin: 0;
}

.action-chip-xp {
  background: rgba(46, 204, 113, 0.12);
  color: #27ae60;
  border-color: rgba(46, 204, 113, 0.35);
}

body.dark-mode .action-chip-xp {
  background: rgba(46, 204, 113, 0.16);
  color: #7ef0ae;
  border-color: rgba(46, 204, 113, 0.45);
}

.action-chip-time {
  background: rgba(59, 130, 246, 0.12);
  color: #2980b9;
  border-color: rgba(59, 130, 246, 0.35);
}

body.dark-mode .action-chip-time {
  background: rgba(59, 130, 246, 0.16);
  color: #7cc6ff;
  border-color: rgba(59, 130, 246, 0.45);
}

.action-chip-gold {
  background: rgba(243, 156, 18, 0.12);
  color: #d35400;
  border-color: rgba(243, 156, 18, 0.35);
}

body.dark-mode .action-chip-gold {
  background: rgba(243, 156, 18, 0.16);
  color: #ffd166;
  border-color: rgba(243, 156, 18, 0.45);
}

.action-chip-success {
  background: rgba(142, 68, 173, 0.12);
  color: #8e44ad;
  border-color: rgba(142, 68, 173, 0.35);
}

body.dark-mode .action-chip-success {
  background: rgba(142, 68, 173, 0.16);
  color: #d2a8ff;
  border-color: rgba(142, 68, 173, 0.45);
}

.action-desc {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.05);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 4px 8px;
  margin-top: 2px;
  line-height: 1.35;
  font-style: italic;
  display: inline-block;
  max-width: fit-content;
}

body.dark-mode .action-desc {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: #f39c12;
  color: #e2d9cc;
}

.action-inputs {
  margin-top: 6px;
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.action-inputs-label {
  font-size: 0.76rem;
  font-weight: bold;
  color: var(--text-secondary);
  margin-right: 2px;
}

.action-input-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.theme-cozy.dark-mode .action-input-chip {
  background-color: rgba(255, 255, 255, 0.08);
}

.action-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.action-right .btn {
  white-space: nowrap;
  min-width: 118px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.86rem;
  padding: 8px 12px;
}

.action-train-btn {
  background: linear-gradient(180deg, #f39c12 0%, #d35400 100%) !important;
  border: 1.5px solid #e67e22 !important;
  color: #ffffff !important;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 6px rgba(211, 84, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.15s ease;
}

.action-train-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #f5b041 0%, #e67e22 100%) !important;
  border-color: #f39c12 !important;
  box-shadow: 0 4px 10px rgba(211, 84, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.action-btn-time {
  background: rgba(0, 0, 0, 0.35);
  color: #fff3a8 !important;
  font-weight: 900;
  font-size: 0.78rem;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 243, 168, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.3px;
  display: inline-block;
}

body.dark-mode .action-btn-time {
  background: rgba(0, 0, 0, 0.45);
  color: #ffe066 !important;
  border-color: rgba(255, 224, 102, 0.45);
}

.action-training-active-btn {
  background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%) !important;
  border: 1.5px solid #e74c3c !important;
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
  animation: pulse-btn-danger 1.2s infinite alternate;
}

@keyframes pulse-btn-danger {
  from {
    box-shadow: 0 0 4px rgba(231, 76, 60, 0.4);
  }
  to {
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.85);
  }
}

.action-bar-container {
  grid-column: 1 / -1;
  margin-top: 6px;
}

@media (max-width: 580px) {
  .action-row {
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 10px 12px;
  }

  .action-right {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
  }

  .action-right .btn {
    width: 100%;
  }
}

/* AGRICULTURA - CANTEIROS MEDIEVAIS EM TERRA FÉRTIL (2X2 GRID) */
.farming-plots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .farming-plots {
    gap: 10px;
  }
}

.plot-card {
  background: linear-gradient(180deg, #3d2615 0%, #261509 100%);
  border: 2px solid #6b4323;
  border-bottom: 3.5px solid #4a2d16;
  border-radius: var(--radius-md);
  padding: 10px 12px 12px 12px;
  text-align: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 3px 8px var(--shadow-color);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 195px;
  position: relative;
  overflow: hidden;
}

body.dark-mode .plot-card {
  background: linear-gradient(180deg, #24160d 0%, #150b05 100%);
  border-color: #55341c;
  border-bottom-color: #3b2210;
}

.plot-card.plot-empty {
  border: 1.5px dashed rgba(229, 142, 38, 0.55);
}

.plot-card.plot-empty:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(229, 142, 38, 0.25);
}

.plot-card.plot-locked {
  opacity: 0.5;
  background: linear-gradient(180deg, #231c17 0%, #171310 100%);
  border-color: #4a4038;
  border-bottom-color: #332c26;
  box-shadow: none;
}

.plot-card.training-active,
.plot-card.plot-ready {
  border: 2px solid #2ecc71 !important;
  border-bottom: 3.5px solid #27ae60 !important;
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.16) 0%, #1f1208 100%) !important;
  box-shadow: inset 0 0 10px rgba(46, 204, 113, 0.2), 0 0 14px rgba(46, 204, 113, 0.35) !important;
}

body.dark-mode .plot-card.training-active,
body.dark-mode .plot-card.plot-ready {
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.2) 0%, #140b04 100%) !important;
  box-shadow: inset 0 0 12px rgba(46, 204, 113, 0.25), 0 0 16px rgba(46, 204, 113, 0.45) !important;
}

.plot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 8px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin: -10px -12px 8px -12px;
}

.plot-header h4 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffd166;
  font-family: var(--font-medieval, 'Cinzel', serif);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.plot-header-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.plot-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(229, 142, 38, 0.25);
  color: #ffd32a;
  border: 1px solid rgba(229, 142, 38, 0.45);
  padding: 1px 6px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* LEITO DE TERRA DO CANTEIRO (SOIL BED) */
.plot-soil-bed {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(107, 67, 35, 0.6);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 2px 0 6px 0;
  min-height: 60px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.plot-soil-bed.empty {
  border-style: dashed;
  border-color: rgba(229, 142, 38, 0.35);
  background: rgba(0, 0, 0, 0.2);
}

.plot-soil-bed.growing {
  border-color: rgba(46, 204, 113, 0.4);
  background: rgba(46, 204, 113, 0.06);
}

.plot-soil-bed.ready {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.14);
}

.plot-soil-sprout-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.plot-soil-sprite-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.plot-soil-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #f1dfcf;
  line-height: 1.2;
}

.plot-lock-icon {
  font-size: 1.3rem;
  opacity: 0.7;
}

.plot-soil-crop-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plot-crop-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.plot-ready-sparkle {
  position: absolute;
  top: -6px;
  right: -8px;
  font-size: 0.95rem;
}

.plot-status-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #d2bfad;
  margin-bottom: 4px;
}

.plot-locked-req-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #ff9a9a;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.45);
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.plot-timer {
  font-size: 0.78rem;
  color: #d2bfad;
  margin-bottom: 4px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plot-progress-bar {
  margin-bottom: 6px;
  height: 7px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.plot-fill {
  background: linear-gradient(90deg, #27ae60, #2ecc71) !important;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}

.plot-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}

.plot-actions .btn {
  width: 100%;
  font-weight: 800;
  padding: 5px 8px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-action-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.btn-harvest-plot {
  background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%) !important;
  border: 1.5px solid #2ecc71 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.45);
}

.btn-harvest-plot:hover {
  background: linear-gradient(180deg, #3ae37e 0%, #2ecc71 100%) !important;
  transform: translateY(-1px);
}

/* ================= ABA COMBATE ================= */
.combat-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start;
}

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

/* ================= ABA COMBATE - MAPAS & MASMORRAS ================= */
.combat-zones-wrapper {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dungeons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px 8px 4px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 600px) {
  .dungeons-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.dungeon-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(246, 239, 226, 0.95) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 8px var(--shadow-color);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

body.dark-mode .dungeon-card {
  background: linear-gradient(180deg, rgba(32, 20, 12, 0.96) 0%, rgba(18, 11, 6, 0.98) 100%);
  border-color: rgba(229, 142, 38, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.dungeon-card:hover {
  border-color: #f39c12;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(229, 142, 38, 0.3);
}

.dungeon-card.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 16px rgba(229, 142, 38, 0.45);
}

/* Banner da Região / Dungeon */
.dungeon-card-banner {
  position: relative;
  width: 100%;
  height: 110px;
  overflow: hidden;
  background: #1a0f08;
}

.dungeon-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  filter: brightness(0.9);
}

.dungeon-card:hover .dungeon-banner-img {
  transform: scale(1.06);
  filter: brightness(1.02);
}

.dungeon-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(15, 9, 5, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 12px;
  box-sizing: border-box;
}

.dungeon-banner-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dungeon-icon-bubble {
  font-size: 1.15rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.dungeon-banner-title {
  font-family: var(--font-title);
  font-size: 1.12rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  line-height: 1.2;
}

.dungeon-info {
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.dungeon-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dungeon-creature-tag {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 7px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-light);
  border-radius: 4px;
}

body.dark-mode .dungeon-creature-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.dungeon-boss-chip {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.18) 0%, rgba(211, 84, 0, 0.18) 100%);
  border: 1px solid rgba(243, 156, 18, 0.45);
  color: #d35400;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.dark-mode .dungeon-boss-chip {
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.5);
  background: rgba(241, 196, 15, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.dungeon-boss-mini-sprite {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.dungeon-diff-chip {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.dungeon-diff-chip.diff-easy {
  background: rgba(46, 204, 113, 0.85);
  color: #ffffff;
  border: 1px solid #2ecc71;
}

.dungeon-diff-chip.diff-moderate {
  background: rgba(241, 196, 15, 0.85);
  color: #2c1a06;
  border: 1px solid #f1c40f;
}

.dungeon-diff-chip.diff-hard {
  background: rgba(230, 126, 34, 0.85);
  color: #ffffff;
  border: 1px solid #e67e22;
}

.dungeon-diff-chip.diff-deadly {
  background: rgba(192, 57, 43, 0.9);
  color: #ffffff;
  border: 1px solid #e74c3c;
}

.dungeon-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin: 0;
}

.dungeon-monsters-preview-tome {
  margin-top: 2px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.dark-mode .dungeon-monsters-preview-tome {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
}

.dungeon-preview-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

.dungeon-mini-inhabitants-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.dungeon-mini-inhabitant-avatar {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.dungeon-mini-inhabitant-avatar:hover {
  transform: scale(1.25);
  z-index: 2;
  border-color: #f39c12;
}

.dungeon-mini-inhabitant-avatar img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
}

.dungeon-explore-action-btn {
  width: 100%;
  margin-top: 4px;
  padding: 8px 12px;
  font-size: 0.84rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dungeon-btn-arrow {
  transition: transform 0.2s ease;
}

.dungeon-card:hover .dungeon-btn-arrow {
  transform: translateX(4px);
}

.dungeon-title-mini-img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 6px;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ================= LISTA DE MONSTROS / BESTIÁRIO 3D (3 POR ROW) ================= */
.monster-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 10px;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 4px 8px 4px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 580px) {
  .monster-cards-container {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 10px;
  }
}

.monster-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 10px 8px;
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(246, 239, 226, 0.96) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
  gap: 5px;
  box-shadow: 0 3px 8px var(--shadow-color);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

body.dark-mode .monster-card {
  background: linear-gradient(180deg, rgba(32, 20, 12, 0.98) 0%, rgba(18, 11, 6, 0.98) 100%);
  border-color: rgba(229, 142, 38, 0.28);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.monster-card:hover {
  border-color: #f39c12;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(229, 142, 38, 0.3);
}

.monster-card.active {
  border-color: var(--color-danger);
  background: linear-gradient(180deg, rgba(192, 57, 43, 0.15) 0%, var(--bg-card) 100%);
  box-shadow: 0 0 14px rgba(192, 57, 43, 0.45);
}

/* Boss Card Especial */
.monster-card.boss-card {
  border: 2px solid #f1c40f !important;
  background: linear-gradient(180deg, rgba(241, 196, 15, 0.14) 0%, var(--bg-card) 100%) !important;
  box-shadow: 0 0 16px rgba(241, 196, 15, 0.35) !important;
}

body.dark-mode .monster-card.boss-card {
  background: linear-gradient(180deg, rgba(241, 196, 15, 0.16) 0%, rgba(26, 14, 8, 0.98) 100%) !important;
}

.monster-card.elite-card {
  border: 1.5px solid #3498db;
}

/* Ribbons no canto do card estilo shop */
.monster-card-ribbon {
  position: absolute;
  top: 4px;
  right: -25px;
  width: 86px;
  text-align: center;
  font-size: 0.52rem;
  font-weight: 900;
  padding: 2px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 4;
}

.monster-card-ribbon.ribbon-boss {
  background: linear-gradient(135deg, #f1c40f 0%, #e67e22 100%);
  color: #1a0f02;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

.monster-card-ribbon.ribbon-elite {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: #ffffff;
}

.monster-card-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 18px;
}

.monster-chip.chip-lvl {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(229, 142, 38, 0.15);
  color: var(--color-primary);
  border: 1px solid rgba(229, 142, 38, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.monster-avatar-pedestal {
  width: 58px;
  height: 58px;
  min-width: 58px;
  background: radial-gradient(circle, rgba(229, 142, 38, 0.22) 0%, rgba(0, 0, 0, 0.15) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px auto;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
  cursor: pointer;
}

.monster-card:hover .monster-avatar-pedestal {
  transform: scale(1.08);
  border-color: #f39c12;
}

body.dark-mode .monster-avatar-pedestal {
  background: radial-gradient(circle, rgba(229, 142, 38, 0.22) 0%, rgba(12, 6, 3, 0.9) 100%);
  border-color: rgba(229, 142, 38, 0.35);
}

.monster-avatar-pedestal .sprite-icon,
.monster-avatar-pedestal img,
.monster-avatar-sprite {
  width: 52px !important;
  height: 52px !important;
  max-width: 92% !important;
  max-height: 92% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.monster-card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.monster-card-name {
  font-family: var(--font-title);
  font-size: 0.76rem;
  font-weight: 800;
  margin: 1px 0 3px 0;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
  max-width: 100%;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monster-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 100%;
  box-sizing: border-box;
}

.monster-stat-pill {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 2px 3px;
  font-size: 0.64rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  box-sizing: border-box;
}

body.dark-mode .monster-stat-pill {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
}

.stat-val-hp {
  color: #eb4d4b;
}

.stat-val-atk {
  color: #e67e22;
}

.stat-val-xp {
  color: #2ecc71;
}

/* Drops Preview */
.monster-drops-preview-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
}

.monster-drops-chips-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.monster-mini-drop-chip {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.monster-mini-drop-chip:hover {
  transform: scale(1.2);
  border-color: #f39c12;
}

.monster-mini-drop-chip .mini-drop-sprite,
.monster-mini-drop-chip img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.monster-card-bottom-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
}

.monster-card-bottom-actions .monster-inspect-btn {
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 0.76rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.monster-card-bottom-actions .monster-fight-btn {
  flex: 1;
  padding: 4px 6px;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
  border-radius: 4px;
}

.monster-card-bottom-actions .monster-fight-btn:not(.btn-fight-active) {
  background: linear-gradient(180deg, #7c1a1a, #561111) !important;
  border: 1px solid #942525 !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.15s ease;
}

.monster-card-bottom-actions .monster-fight-btn:not(.btn-fight-active):hover {
  background: linear-gradient(180deg, #962222, #6b1616) !important;
  border-color: #b83333 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(124, 26, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.monster-card-bottom-actions .monster-fight-btn:not(.btn-fight-active):active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  background: linear-gradient(180deg, #4d0f0f, #3b0b0b) !important;
}

.btn-fight-active {
  background: linear-gradient(180deg, #c0392b 0%, #96281b 100%) !important;
  border-color: #e74c3c !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.5) !important;
  animation: pulseCombat 1.5s infinite alternate ease-in-out;
}

@keyframes pulseCombat {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.02); filter: brightness(1.12); }
}

/* Tabela de Drops do Monstro no Modal */
.monster-drops-section {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px;
  box-sizing: border-box;
}

.theme-cozy.dark-mode .monster-drops-section {
  background: rgba(255, 255, 255, 0.02);
}

.monster-drops-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}

.monster-drop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.82rem;
  gap: 8px;
  box-sizing: border-box;
  transition: transform 0.15s ease;
}

.monster-drop-row:hover {
  transform: translateX(2px);
  border-color: var(--color-primary);
}

.monster-drop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.drop-item-icon-box {
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.theme-cozy.dark-mode .drop-item-icon-box {
  background: rgba(255, 255, 255, 0.05);
}

.drop-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.drop-item-name {
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drop-item-qty {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.drop-chance-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.drop-100 {
  background-color: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  border: 1px solid #27ae60;
}

.theme-cozy.dark-mode .drop-100 {
  color: #2ecc71;
  border-color: #2ecc71;
}

.drop-common {
  background-color: rgba(41, 128, 185, 0.15);
  color: #2980b9;
  border: 1px solid #2980b9;
}

.theme-cozy.dark-mode .drop-common {
  color: #3498db;
  border-color: #3498db;
}

.drop-rare {
  background-color: rgba(230, 126, 34, 0.15);
  color: #d35400;
  border: 1px solid #d35400;
}

.theme-cozy.dark-mode .drop-rare {
  color: #e67e22;
  border-color: #e67e22;
}

.drop-very-rare {
  background-color: rgba(155, 89, 182, 0.15);
  color: #8e44ad;
  border: 1px solid #8e44ad;
}

.theme-cozy.dark-mode .drop-very-rare {
  color: #9b59b6;
  border-color: #9b59b6;
}

.drop-legendary {
  background-color: rgba(241, 196, 15, 0.2);
  color: #d68910;
  border: 1px solid #f39c12;
  box-shadow: 0 0 6px rgba(243, 156, 18, 0.4);
}

.theme-cozy.dark-mode .drop-legendary {
  color: #f1c40f;
  border-color: #f1c40f;
}

/* ARENA DE COMBATE */
.arena-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.combat-styles-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}

.style-option {
  min-width: 0;
}

.style-option input {
  display: none;
}

.style-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  min-height: 46px;
  padding: 5px 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(245, 238, 222, 0.9) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-title);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
  box-shadow: 0 2px 4px var(--shadow-color);
}

@media (max-width: 500px) {
  .style-btn {
    flex-direction: column;
    gap: 2px;
    height: 54px;
    min-height: 54px;
    font-size: 0.68rem;
    line-height: 1;
  }

  .combat-style-icon-img {
    width: 17px;
    height: 17px;
  }
}

body.dark-mode .style-btn {
  background: linear-gradient(135deg, rgba(38, 22, 12, 0.9) 0%, rgba(20, 12, 6, 0.98) 100%);
  border-color: rgba(229, 142, 38, 0.25);
  color: #d7c4af;
}

/* Melee: Tom Avermelhado / Aço */
.style-option input[value="melee_balanced"]:checked + .style-btn {
  background: linear-gradient(135deg, #c0392b 0%, #8e1b10 100%);
  border-color: #e74c3c;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(231, 76, 60, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Distância: Tom Verde Esmeralda */
.style-option input[value="ranged"]:checked + .style-btn {
  background: linear-gradient(135deg, #27ae60 0%, #196f3d 100%);
  border-color: #2ecc71;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Magia: Tom Azul Safira */
.style-option input[value="magic"]:checked + .style-btn {
  background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
  border-color: #3498db;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(52, 152, 219, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.melee-substyles-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.melee-substyles-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-bottom: 6px;
}

.melee-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

@media (max-width: 650px) {
  .melee-focus-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.melee-focus-option {
  position: relative;
}

.melee-focus-option input {
  display: none;
}

.melee-focus-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  background-color: var(--bg-app);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
  user-select: none;
  min-height: 42px;
}

.melee-focus-btn small {
  font-size: 0.65rem;
  font-weight: normal;
  opacity: 0.85;
  margin-top: 1px;
}

.melee-focus-btn:hover {
  border-color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.12);
  transform: translateY(-1px);
}

.melee-focus-option input:checked + .melee-focus-btn {
  background: linear-gradient(135deg, #c0392b 0%, #8e1b10 100%);
  border-color: #e74c3c;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transform: translateY(-1px);
}

.melee-focus-option input:checked + .melee-focus-btn small {
  color: #fff;
  opacity: 0.95;
  font-weight: 600;
}

/* SELETOR DO LIVRO DE FEITIÇOS (MAGIC SPELLBOOK - ARCANE GRIMOIRE) */
.magic-spells-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(135deg, rgba(240, 247, 253, 0.65) 0%, rgba(227, 240, 252, 0.5) 50%, rgba(240, 247, 253, 0.65) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(133, 193, 233, 0.45);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(41, 128, 185, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

body.dark-mode .magic-spells-container {
  background: linear-gradient(135deg, rgba(14, 25, 40, 0.65) 0%, rgba(10, 18, 29, 0.75) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(52, 152, 219, 0.3);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.magic-spells-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(52, 152, 219, 0.25);
}

body.dark-mode .magic-spells-header {
  border-bottom-color: rgba(52, 152, 219, 0.35);
}

.magic-spells-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 900;
  color: #1b4f72;
}

body.dark-mode .magic-spells-title {
  color: #93c5fd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.magic-active-spell-badge {
  font-size: 0.74rem;
  background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
  border: 1.5px solid #3498db;
  color: #ffffff;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(41, 128, 185, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.dark-mode .magic-active-spell-badge {
  background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
  border-color: #3498db;
  color: #ffffff;
}

.magic-active-spell-badge strong {
  color: #ffffff;
  font-weight: 900;
}

body.dark-mode .magic-active-spell-badge strong {
  color: #ffffff;
}

.spells-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}

.combat-spell-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  border: 1.5px solid #d4e6f1;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  user-select: none;
  box-shadow: 0 1px 4px rgba(41, 128, 185, 0.08);
}

body.dark-mode .combat-spell-card {
  background: linear-gradient(180deg, rgba(18, 30, 48, 0.9) 0%, rgba(12, 20, 34, 0.95) 100%);
  border-color: rgba(52, 152, 219, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.combat-spell-card:hover:not(.locked) {
  border-color: #3498db;
  background: #f0f7fd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
}

body.dark-mode .combat-spell-card:hover:not(.locked) {
  border-color: #3498db;
  background: linear-gradient(180deg, rgba(28, 46, 72, 0.95) 0%, rgba(16, 28, 46, 0.98) 100%);
  box-shadow: 0 4px 14px rgba(52, 152, 219, 0.3);
}

.combat-spell-card.selected {
  background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;
  border: 2px solid #3498db !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(52, 152, 219, 0.5) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .combat-spell-card.selected {
  background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;
  border: 2px solid #60a5fa !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(52, 152, 219, 0.6) !important;
}

.combat-spell-card.selected .spell-card-name {
  color: #ffffff !important;
}

.combat-spell-card.selected .spell-card-lvl {
  color: #e0f2fe !important;
}

.combat-spell-card.selected .spell-card-stats {
  color: #e0f2fe !important;
}

.combat-spell-card.selected .spell-rune-chip {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.combat-spell-card.selected .spell-rune-chip.has-runes {
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.45);
}

.combat-spell-card.selected .spell-rune-chip.infinite {
  color: #bae6fd;
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.5);
}

.combat-spell-card.locked {
  opacity: 0.55;
  cursor: not-allowed;
  background: #f2f4f4;
  border-color: #d5dbdb;
  filter: grayscale(0.4);
}

body.dark-mode .combat-spell-card.locked {
  opacity: 0.5;
  background: rgba(10, 16, 26, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

.spell-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spell-card-name {
  font-size: 0.85rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1b4f72;
}

body.dark-mode .spell-card-name {
  color: #f1f5f9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.spell-card-lvl {
  font-size: 0.70rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.15;
  white-space: nowrap;
}

.spell-lvl-unlocked {
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.4);
  color: #1e8449;
}

body.dark-mode .spell-lvl-unlocked {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.45);
  color: #55efc4;
}

.spell-lvl-locked {
  background: rgba(231, 76, 60, 0.14);
  border: 1px solid rgba(231, 76, 60, 0.45);
  color: #c0392b;
}

body.dark-mode .spell-lvl-locked {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.spell-lvl-icon {
  width: 11px;
  height: 11px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.spell-card-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: #2980b9;
  font-weight: 800;
}

body.dark-mode .spell-card-stats {
  color: #60a5fa;
}

.spell-runes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.spell-rune-chip {
  font-size: 0.68rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

body.dark-mode .spell-rune-chip {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
  color: inherit;
}

.spell-rune-chip.has-runes {
  color: #1e8449;
  border-color: #a3e4d7;
  background: rgba(46, 204, 113, 0.12);
}

body.dark-mode .spell-rune-chip.has-runes {
  color: #55efc4;
  border-color: rgba(85, 239, 196, 0.4);
  background: rgba(0, 184, 148, 0.15);
}

.spell-rune-chip.no-runes {
  color: #c0392b;
  border-color: #f5b7b1;
  background: rgba(231, 76, 60, 0.12);
}

body.dark-mode .spell-rune-chip.no-runes {
  color: #ff7675;
  border-color: rgba(255, 118, 117, 0.4);
  background: rgba(214, 48, 49, 0.15);
}

.spell-rune-chip.infinite {
  color: #2980b9;
  border-color: rgba(52, 152, 219, 0.4);
  background: rgba(52, 152, 219, 0.12);
}

body.dark-mode .spell-rune-chip.infinite {
  color: #93c5fd;
  border-color: rgba(52, 152, 219, 0.45);
  background: rgba(52, 152, 219, 0.2);
  box-shadow: 0 0 6px rgba(52, 152, 219, 0.3);
}

.spell-special-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: #6c5ce7;
  background: #f4f1fe;
  border: 1px solid #dcd6fd;
  border-radius: 3px;
  padding: 2px 6px;
  text-align: center;
  margin-top: 2px;
}

body.dark-mode .spell-special-tag {
  color: #a29bfe;
  background: rgba(108, 92, 231, 0.22);
  border-color: rgba(162, 155, 254, 0.45);
}

.mini-rune-sprite {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
}

.spell-avatar-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: middle;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

body.dark-mode .spell-avatar-img {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.spell-avatar-mini-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: middle;
  margin-right: 4px;
}

.combat-warning-box {
  background: #fdedec;
  border: 1.5px solid #e74c3c;
  color: #922b21;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

.combat-warning-box .combat-stat-mini-img {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}

.combat-warning-box span {
  flex: 1;
  display: inline;
}

.combat-warning-box strong {
  color: inherit;
  font-weight: 800;
}

.combat-warning-box.warning-ranged {
  background: linear-gradient(135deg, #e8f8f5 0%, #d4efdf 100%);
  border-color: #27ae60;
  color: #145a32;
  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.15);
}

.combat-warning-box.warning-magic {
  background: linear-gradient(135deg, #ebf5fb 0%, #d4e6f1 100%);
  border-color: #2980b9;
  color: #154360;
  box-shadow: 0 2px 8px rgba(41, 128, 185, 0.15);
}

/* Dark Mode Combat Warning Box */
body.dark-mode .combat-warning-box {
  background: rgba(192, 57, 43, 0.2);
  border-color: #e74c3c;
  color: #ff7675;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

body.dark-mode .combat-warning-box strong {
  color: #ffb8b8;
}

body.dark-mode .combat-warning-box.warning-ranged {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.22) 0%, rgba(10, 25, 15, 0.85) 100%);
  border-color: #2ecc71;
  color: #55efc4;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.25);
}

body.dark-mode .combat-warning-box.warning-ranged strong {
  color: #a8f5c4;
}

body.dark-mode .combat-warning-box.warning-magic {
  background: linear-gradient(135deg, rgba(41, 128, 185, 0.22) 0%, rgba(10, 20, 35, 0.85) 100%);
  border-color: #3498db;
  color: #74b9ff;
  box-shadow: 0 0 12px rgba(52, 152, 219, 0.25);
}

body.dark-mode .combat-warning-box.warning-magic strong {
  color: #bce0fd;
}

.arena-fight-space {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
}

@media (max-width: 500px) {
  .arena-fight-space {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .fight-vs {
    text-align: center;
    padding: 4px 0;
  }
}

.fighter-card {
  background: linear-gradient(135deg, rgba(253, 250, 242, 0.92) 0%, rgba(244, 231, 208, 0.96) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  box-shadow: 0 4px 12px var(--shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body.dark-mode .fighter-card {
  background: linear-gradient(135deg, rgba(38, 22, 12, 0.95) 0%, rgba(20, 12, 6, 0.98) 100%);
  border-color: rgba(229, 142, 38, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.fighter-avatar {
  font-size: 2.4rem;
  margin: 0 auto 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.fighter-header-info {
  margin-bottom: 8px;
}

.fighter-name {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

body.dark-mode .fighter-name {
  color: #fdfaf2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.fighter-level-tag {
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

body.dark-mode .fighter-level-tag strong {
  color: #ffd32a;
}

.fighter-hp-container {
  margin-bottom: 6px;
}

.fighter-hp-bar {
  height: 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 4px;
}

.fighter-hp-text {
  font-size: 0.84rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-primary);
}

body.dark-mode .fighter-hp-text {
  color: #fdfaf2;
}

.combat-fighter-stats-box {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 8px;
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

body.dark-mode .combat-fighter-stats-box {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(229, 142, 38, 0.2);
}

.combat-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  font-size: 0.74rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 580px) {
  .combat-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.combat-stat-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.04);
  padding: 3px 4px;
  border-radius: 4px;
  border: 1px solid rgba(229, 142, 38, 0.2);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body.dark-mode .combat-stat-chip {
  background: rgba(255, 255, 255, 0.04);
  color: #fdfaf2;
}

.combat-stat-chip .stat-lbl {
  color: var(--text-secondary);
  font-size: 0.7rem;
}

body.dark-mode .combat-stat-chip strong {
  color: #ffd32a;
}

.combat-stat-bonus {
  color: #2ecc71 !important;
  font-weight: 800;
  font-size: 0.7rem;
  margin-left: 2px;
}

body.dark-mode .combat-stat-bonus {
  color: #2ecc71 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.combat-max-hit-chip {
  margin-top: 6px;
  padding: 4px 8px;
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.15) 0%, rgba(229, 142, 38, 0.2) 100%);
  border: 1px solid rgba(241, 196, 15, 0.5);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

#combat-max-hit {
  display: inline;
  min-width: 0;
  padding: 0;
  margin-left: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f1c40f !important;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.fight-vs-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 4px 0;
}

.fight-vs-badge {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.mini-bar {
  height: 8px;
  margin-top: 2px;
}

.fill-accent {
  background-color: var(--color-primary);
}

.respawn-timer-container {
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-primary);
}

/* FLOATING SPLATS (RuneScape / OSRS Hitsplat System) */
.combat-splat {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 1.25rem;
  font-weight: 900;
  font-family: var(--font-title), 'Inter', -apple-system, sans-serif;
  color: #ffffff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.8);
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  image-rendering: pixelated;
  pointer-events: none;
  animation: splatFloat 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 25;
  letter-spacing: 0;
  user-select: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.splat-damage-monster,
.splat-damage-player {
  background-image: url('assets/sprites/misc/hit.png');
  background-color: transparent;
  color: #ffffff;
}

.splat-miss,
.splat-block,
.splat-zero {
  background-image: url('assets/sprites/misc/defesaevasao.png');
  background-color: transparent;
  color: #ffffff;
}

.splat-warning {
  background-image: none !important;
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.95), rgba(192, 57, 43, 0.95)) !important;
  border: 1.5px solid #f39c12 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(231, 76, 60, 0.6) !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  padding: 4px 12px !important;
  width: auto !important;
  min-width: 90px !important;
  height: auto !important;
  min-height: auto !important;
  color: #ffffff !important;
  top: 6% !important;
  white-space: nowrap !important;
  z-index: 50 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  letter-spacing: 0.4px !important;
}

.splat-heal {
  background-image: none;
  background-color: rgba(46, 204, 113, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
  font-size: 1rem;
  padding: 3px 10px;
  width: auto;
  min-width: auto;
  height: auto;
  min-height: auto;
  color: #ffffff;
}

@keyframes splatFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 15px) scale(0.6);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.25);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -18px) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -42px) scale(0.9);
  }
}

/* COMBAT LOGS */
.combat-logs-container {
  margin-bottom: 16px;
}

.combat-logs-container h4 {
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.combat-logs {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(247, 236, 217, 0.92) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  height: 165px;
  overflow-y: auto;
  font-size: 0.76rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: inset 0 1px 6px rgba(61, 36, 15, 0.08), 0 2px 8px rgba(61, 36, 15, 0.06);
  color: var(--text-primary);
  box-sizing: border-box;
}

.log-entry {
  line-height: 1.3;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.76rem;
  padding: 2.5px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

.log-entry strong {
  color: var(--color-primary);
}

.log-entry.damage-player {
  background: rgba(231, 76, 60, 0.1);
  border-left: 3px solid #e74c3c;
  color: #b8463a;
}

.log-entry.damage-monster {
  background: rgba(46, 204, 113, 0.12);
  border-left: 3px solid #2ecc71;
  color: #1f8f57;
  font-weight: 700;
}

.combat-log-xp {
  color: #15803d;
  font-weight: 600;
  font-size: 0.74rem;
  margin-left: 2px;
}

.log-entry.loot-get {
  background: rgba(229, 142, 38, 0.12);
  border-left: 3px solid #f39c12;
  color: var(--color-primary);
  font-weight: 700;
}

.log-entry.log-miss {
  background: rgba(149, 165, 166, 0.08);
  border-left: 3px solid #95a5a6;
  color: #7a6b5d;
  opacity: 0.9;
}

.log-entry.log-block {
  background: rgba(52, 152, 219, 0.1);
  border-left: 3px solid #3498db;
  color: #2980b9;
}

.log-entry.log-warning,
.log-entry.text-danger {
  background: rgba(230, 126, 34, 0.12);
  border-left: 3px solid #e67e22;
  color: #d35400;
  font-weight: 700;
}

.theme-cozy.dark-mode .combat-logs {
  background: linear-gradient(180deg, rgba(20, 12, 6, 0.96) 0%, rgba(10, 6, 3, 0.98) 100%);
  border-color: rgba(229, 142, 38, 0.35);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
  color: #fdfaf2;
}

.theme-cozy.dark-mode .log-entry {
  color: #e4d5c3;
  background: rgba(255, 255, 255, 0.03);
}

.theme-cozy.dark-mode .log-entry strong {
  color: #ffd32a;
}

.theme-cozy.dark-mode .log-entry.damage-player {
  background: rgba(231, 76, 60, 0.15);
  border-left: 3px solid #e74c3c;
  color: #ff7675;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.theme-cozy.dark-mode .log-entry.damage-monster,
body.dark-mode .log-entry.damage-monster {
  background: rgba(46, 204, 113, 0.14);
  border-left: 3px solid #2ecc71;
  color: #2ecc71;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.theme-cozy.dark-mode .combat-log-xp,
body.dark-mode .combat-log-xp {
  color: #a8f5c4;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.theme-cozy.dark-mode .log-entry.loot-get,
body.dark-mode .log-entry.loot-get {
  background: rgba(243, 156, 18, 0.15);
  border-left: 3px solid #f39c12;
  color: #f1c40f;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.theme-cozy.dark-mode .log-entry.log-miss,
body.dark-mode .log-entry.log-miss {
  background: rgba(149, 165, 166, 0.1);
  border-left: 3px solid #7f8c8d;
  color: #bdc3c7;
}

.theme-cozy.dark-mode .log-entry.log-block,
body.dark-mode .log-entry.log-block {
  background: rgba(52, 152, 219, 0.14);
  border-left: 3px solid #3498db;
  color: #74b9ff;
}

.theme-cozy.dark-mode .log-entry.log-warning,
.theme-cozy.dark-mode .log-entry.text-danger,
body.dark-mode .log-entry.log-warning,
body.dark-mode .log-entry.text-danger {
  background: rgba(230, 126, 34, 0.15);
  border-left: 3px solid #e67e22;
  color: #fab1a0;
}

.log-entry.stunned {
  color: #e67e22;
  font-weight: bold;
}

.combat-equipment-quick-view {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1.5px solid var(--border-light);
}

.combat-equipment-quick-view h4 {
  font-size: 1.05rem;
  margin-bottom: 0;
}

.combat-eq-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(245, 238, 222, 0.8) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  min-height: 36px;
  gap: 8px;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

body.dark-mode .combat-eq-row {
  background: linear-gradient(135deg, rgba(38, 22, 12, 0.85) 0%, rgba(20, 12, 6, 0.95) 100%);
  border-color: rgba(229, 142, 38, 0.25);
}

.combat-eq-row:hover {
  border-color: #f39c12;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(229, 142, 38, 0.25);
}

.combat-eq-slot-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.combat-eq-val {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
  font-size: 0.84rem;
}

.combat-eq-val.empty .combat-eq-empty-txt {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.78rem;
  background: rgba(229, 142, 38, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px dashed rgba(229, 142, 38, 0.4);
}

.combat-eq-val.equipped {
  color: var(--text-primary);
  font-weight: bold;
}

.combat-eq-val.equipped .combat-eq-item-name {
  color: #ffd32a;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.combat-eq-item-icon {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  font-size: 14px !important;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  object-fit: contain;
  margin: 0 !important;
  pointer-events: none;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.slot-mini-sprite {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: inline-block;
  pointer-events: none;
  flex-shrink: 0;
  margin: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* ================= ABA INVENTÁRIO (MOCHILA) ================= */
.equipment-layout {
  margin-bottom: 16px;
}

.eq-slots-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 480px;
  margin: 12px auto;
}

@media (max-width: 500px) {
  .eq-slots-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.eq-slot {
  background: radial-gradient(circle, rgba(229, 142, 38, 0.08) 0%, rgba(0, 0, 0, 0.05) 100%);
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-sm);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  font-size: 1.2rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.12);
}

body.dark-mode .eq-slot {
  background: radial-gradient(circle, rgba(229, 142, 38, 0.06) 0%, rgba(15, 8, 4, 0.6) 100%);
  border-color: rgba(229, 142, 38, 0.25);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.slot-empty-sprite {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-bottom: 2px;
  opacity: 0.55;
  filter: grayscale(15%) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.eq-slot:hover .slot-empty-sprite {
  opacity: 0.85;
  transform: scale(1.08);
}

.eq-slot:hover {
  border-color: var(--color-primary);
  background: radial-gradient(circle, rgba(229, 142, 38, 0.18) 0%, rgba(0, 0, 0, 0.1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.eq-slot.equipped {
  border: 2px solid #f1c40f;
  background: radial-gradient(circle, rgba(241, 196, 15, 0.18) 0%, rgba(40, 24, 12, 0.6) 100%);
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.35), inset 0 0 6px rgba(0, 0, 0, 0.4);
}

.eq-slot span {
  font-size: 0.68rem;
  color: var(--text-secondary);
  display: block;
  font-weight: 700;
  margin-top: 2px;
}

.eq-slot.equipped span {
  color: #ffd32a;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.equipment-stats-block {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 12px;
}

body.dark-mode .equipment-stats-block {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(229, 142, 38, 0.22);
}

.equipment-stats-block h4 {
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 5px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

body.dark-mode .equipment-stats-block h4 {
  border-color: rgba(229, 142, 38, 0.2);
}

.eq-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 0.86rem;
  font-weight: bold;
}

@media (max-width: 500px) {
  .eq-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* GRADE DE INVENTÁRIO */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

@media (max-width: 600px) {
  .inventory-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.inventory-slot {
  aspect-ratio: 1;
  border: 1.5px solid var(--border-light);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(245, 238, 225, 0.85) 100%);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 4px var(--shadow-color);
  box-sizing: border-box;
  overflow: hidden;
}

body.dark-mode .inventory-slot {
  background: linear-gradient(135deg, rgba(42, 26, 15, 0.85) 0%, rgba(24, 14, 8, 0.95) 100%);
  border-color: rgba(229, 142, 38, 0.25);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.4);
}

.inventory-slot:hover:not(.empty) {
  border-color: #f39c12;
  background: linear-gradient(135deg, rgba(229, 142, 38, 0.2) 0%, rgba(45, 28, 16, 0.8) 100%);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 10px rgba(229, 142, 38, 0.35);
}

.slot-icon {
  font-size: 1.6rem;
}

.slot-qty {
  position: absolute;
  bottom: 2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2b180d 0%, #170d06 100%);
  border: 1.5px solid #f39c12;
  color: #f1c40f;
  font-weight: 900;
  font-size: 0.68rem;
  font-family: var(--font-body);
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 2;
}

.inventory-slot.empty {
  cursor: default;
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px dashed var(--border-light);
  box-shadow: none;
  opacity: 0.55;
}

body.dark-mode .inventory-slot.empty {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(229, 142, 38, 0.15);
}

.inventory-slot.empty:hover {
  transform: none;
  border-color: var(--border-light);
  background: rgba(0, 0, 0, 0.03);
  box-shadow: none;
}

/* BARRA DE ORDENAÇÃO DA MOCHILA */
.inventory-sort-bar {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sort-buttons-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sort-buttons-group .btn {
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.sort-buttons-group .btn:hover {
  transform: translateY(-1px);
}

/* MODAIS E SELETORES DE QUANTIDADE */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Corrige altura no Safari iOS (barra de endereço dinâmica) evitando cortar botões no rodapé */
  background-color: rgba(15, 8, 3, 0.85);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px calc(36px + env(safe-area-inset-bottom)) 16px;
  box-sizing: border-box;
  overflow-y: auto;
  backdrop-filter: blur(4px);
  -webkit-overflow-scrolling: touch;
}

.modal-content {
  background-color: var(--bg-card);
  border: 3px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 480px;
  margin: auto;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: modalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.item-action-content {
  background-color: var(--bg-card);
  border: 3px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 100%;
  max-width: 420px;
  margin: auto;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: modalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.item-preview-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.item-preview-icon {
  font-size: 2.5rem;
  background: rgba(0, 0, 0, 0.05);
  padding: 8px;
  border-radius: var(--radius-sm);
}

.modal-qty-control {
  background-color: rgba(0, 0, 0, 0.04);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 10px 0 6px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.theme-cozy.dark-mode .modal-qty-control {
  background-color: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
}

.modal-qty-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-qty, .btn-bank-qty {
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.15s ease;
}

.btn-qty:hover, .btn-bank-qty:hover {
  background-color: rgba(0, 0, 0, 0.08);
  border-color: var(--border-color);
}

.btn-qty.active, .btn-bank-qty.active {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--border-color);
}

.qty-input-box {
  width: 60px;
  padding: 4px 6px;
  text-align: center;
  font-weight: bold;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.modal-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.modal-actions-grid .btn-sm {
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

/* BOTÕES DE AÇÃO DOS MODAIS (MEDIEVAL RPG THEMED) */
#modal-use-btn:not(.btn-prayer-bone),
#inspect-buy-btn,
#manual-save-btn,
#force-update-pwa-btn,
.update-pwa-btn {
  background: linear-gradient(180deg, #27ae60, #1e8449) !important;
  border: 1.5px solid #2ecc71 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 6px rgba(39, 174, 96, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#modal-use-btn:not(.btn-prayer-bone):hover:not(:disabled),
#inspect-buy-btn:hover:not(:disabled),
#manual-save-btn:hover:not(:disabled),
#force-update-pwa-btn:hover:not(:disabled),
.update-pwa-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #2ecc71, #229954) !important;
  border-color: #58d68d !important;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

#modal-use-btn.btn-prayer-bone,
.btn-prayer-bone {
  background: linear-gradient(180deg, #ffffff 0%, #f4eee1 100%) !important;
  border: 1.5px solid #dcd1be !important;
  color: #3b3123 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: all 0.15s ease;
}

#modal-use-btn.btn-prayer-bone:hover:not(:disabled),
.btn-prayer-bone:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffffff 0%, #ede3d2 100%) !important;
  border-color: #c9bca6 !important;
  color: #1f1810 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

#modal-use-btn.btn-prayer-bone:active:not(:disabled),
.btn-prayer-bone:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  background: linear-gradient(180deg, #e4dcce 0%, #dbd0bf 100%) !important;
}

body.dark-mode #modal-use-btn.btn-prayer-bone,
body.dark-mode .btn-prayer-bone {
  background: linear-gradient(180deg, #44403c 0%, #292524 100%) !important;
  border-color: #57534e !important;
  color: #f5f5f4 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode #modal-use-btn.btn-prayer-bone:hover:not(:disabled),
body.dark-mode .btn-prayer-bone:hover:not(:disabled) {
  background: linear-gradient(180deg, #57534e 0%, #3a3532 100%) !important;
  border-color: #78716c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.bone-xp-badge {
  color: #1e8449 !important;
  font-weight: 900 !important;
  display: inline-block;
  margin: 0 3px;
}

body.dark-mode .bone-xp-badge {
  color: #2ecc71 !important;
  text-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
}

/* MODAL SELETOR DE COMIDA RÁPIDA (FLOATING MINI DIALOG) */
.food-selector-modal-content {
  max-width: 330px;
  width: 90%;
  padding: 14px 16px;
  border: 2px solid var(--border-color);
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(20, 12, 6, 0.98) 100%);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.food-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1.5px solid var(--border-light);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.food-modal-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-light);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.food-modal-title-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.food-modal-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.3;
  text-align: center;
}

.food-selector-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 2px;
}

.food-option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
  border: 1.5px solid var(--border-light);
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
}

.food-option-card:hover {
  background: linear-gradient(180deg, rgba(229, 142, 38, 0.2) 0%, rgba(45, 27, 14, 0.4) 100%);
  border-color: #ffd32a;
  transform: translateX(2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.food-option-card.selected {
  border: 1.5px solid #2ecc71;
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.22) 0%, rgba(20, 90, 50, 0.4) 100%);
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.35);
}

.food-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.food-card-sprite {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
}

.food-card-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.food-card-name {
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--text-color);
}

.food-card-heal {
  font-size: 0.72rem;
}

.food-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.food-card-qty {
  font-size: 0.88rem;
  font-weight: 900;
  color: #ffd32a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 211, 42, 0.3);
}

.food-card-check {
  color: #2ecc71;
  font-size: 1.05rem;
  font-weight: 900;
}

.food-select-btn {
  padding: 4px 8px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  min-height: unset !important;
}

.food-empty-state {
  text-align: center;
  padding: 16px 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.food-empty-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 6px;
}

#modal-deposit-btn,
#bank-withdraw-btn {
  background: linear-gradient(180deg, #2980b9, #1f618d) !important;
  border: 1.5px solid #3498db !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 6px rgba(41, 128, 185, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#modal-deposit-btn:hover:not(:disabled),
#bank-withdraw-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #3498db, #2471a3) !important;
  border-color: #5dade2 !important;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

#modal-sell-btn,
#bank-sell-btn {
  background: linear-gradient(180deg, #d35400, #a04000) !important;
  border: 1.5px solid #e67e22 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 6px rgba(211, 84, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#modal-sell-btn:hover:not(:disabled),
#bank-sell-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #e67e22, #ba4a00) !important;
  border-color: #f39c12 !important;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

#inspect-unequip-btn {
  background: linear-gradient(180deg, #f39c12, #d68910) !important;
  border: 1.5px solid #f1c40f !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 6px rgba(243, 156, 18, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#inspect-unequip-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #f1c40f, #d68910) !important;
  border-color: #f7dc6f !important;
  box-shadow: 0 4px 12px rgba(241, 196, 15, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

#modal-deposit-qty-txt,
#modal-sell-qty-txt,
#bank-withdraw-qty-txt,
#bank-sell-qty-txt,
.shop-buy-qty-txt {
  color: #ffd32a !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* MODAL IN-GAME DE SKILL DE COMBATE */
.combat-modal-content {
  text-align: left;
}

.combat-modal-progress-card {
  background-color: rgba(0, 0, 0, 0.04);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 12px 0;
}

.combat-modal-desc-box {
  background-color: rgba(0, 0, 0, 0.03);
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.combat-modal-how-to {
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
}

.combat-modal-how-to strong {
  color: var(--color-primary);
  font-size: 0.85rem;
  display: block;
  margin-bottom: 2px;
}

/* MODAL DE MORTE E PENALIDADES */
.death-modal-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.death-modal-icon-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 12px rgba(192, 57, 43, 0.45));
  animation: pulse 1.5s infinite alternate;
}

.death-penalty-box {
  background-color: rgba(192, 57, 43, 0.08);
  border: 1.5px dashed var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

/* MODAL DE GERENCIAMENTO DE SAVE */
.save-textarea {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-primary);
  font-family: monospace;
  font-size: 0.8rem;
  resize: vertical;
  line-height: 1.4;
}

/* MODAL DE SELEÇÃO DE SEMENTES DA AGRICULTURA */
.farming-seeds-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.seed-choice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px var(--shadow-color);
}

.seed-choice-card:hover:not(.disabled) {
  border-color: #2ecc71;
  background-color: rgba(46, 204, 113, 0.06);
  transform: translateY(-1px);
}

.seed-choice-card.disabled {
  opacity: 0.6;
  filter: grayscale(0.3);
}

.seed-choice-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.seed-choice-icon-wrap {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(46, 204, 113, 0.18) 0%, var(--bg-header) 100%);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.seed-choice-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  min-width: 0;
}

.seed-choice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.seed-choice-name {
  margin: 0;
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--text-primary);
  font-family: var(--font-title);
  line-height: 1.2;
}

.seed-req-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

.seed-req-badge.req-met {
  background: rgba(46, 204, 113, 0.15);
  color: #27ae60;
  border: 1px solid rgba(46, 204, 113, 0.4);
}

body.dark-mode .seed-req-badge.req-met {
  color: #2ecc71;
  border-color: rgba(46, 204, 113, 0.5);
}

.seed-req-badge.req-unmet {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.4);
}

.seed-choice-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.action-chip-loot {
  background: rgba(155, 89, 182, 0.12);
  color: #8e44ad;
  border-color: rgba(155, 89, 182, 0.35);
}

body.dark-mode .action-chip-loot {
  background: rgba(155, 89, 182, 0.18);
  color: #bb86fc;
  border-color: rgba(155, 89, 182, 0.45);
}

.seed-choice-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.seed-bag-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #f39c12;
}

body.dark-mode .seed-bag-stock {
  color: #f7dc6f;
}

@media (max-width: 580px) {
  .seed-choice-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .seed-choice-actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-top: 1px dashed var(--border-light);
    padding-top: 8px;
  }
}

/* CRIAÇÃO DE PERSONAGEM */
.pixel-art-title {
  font-size: 2rem;
  margin-bottom: 4px;
  color: var(--color-primary);
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-creation-logo-img {
  max-width: 240px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.subtitle {
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
  text-align: left;
}

.form-group label {
  display: block;
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.form-group input[type="text"] {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.avatar-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px 4px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.08);
}

#creation-avatar-selector {
  grid-template-columns: repeat(2, 1fr) !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 12px;
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
}

#creation-avatar-selector .avatar-card {
  padding: 10px 8px;
}

#creation-avatar-selector .avatar-card-img {
  width: 54px;
  height: 54px;
}

@media (max-width: 520px) {
  .avatar-selector:not(#creation-avatar-selector) {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 380px) {
  .avatar-selector:not(#creation-avatar-selector) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.avatar-option input {
  display: none;
}

.avatar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  background-color: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.avatar-card:hover {
  border-color: var(--color-primary);
  background-color: rgba(229, 142, 38, 0.15);
  transform: translateY(-2px);
}

.avatar-option input:checked + .avatar-card {
  border-color: var(--color-primary);
  background-color: rgba(229, 142, 38, 0.25);
  box-shadow: 0 0 8px rgba(229, 142, 38, 0.4);
}

.avatar-card-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.avatar-num-badge {
  font-size: 0.72rem;
  font-weight: bold;
  color: var(--text-secondary);
}

.avatar-option input:checked + .avatar-card .avatar-num-badge {
  color: var(--color-primary);
}

.bonus-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.bonus-option input {
  display: none;
}

.bonus-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 10px 8px;
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
  transition: all 0.2s;
}

.bonus-option input:checked + .bonus-card {
  border-color: var(--color-primary);
  background-color: rgba(229, 142, 38, 0.15);
}

/* ================= ABA BANCO ================= */
.bank-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

@media (max-width: 600px) {
  .bank-header-actions {
    align-items: stretch;
    width: 100%;
    margin-top: 8px;
  }
  .bank-header-actions .bank-capacity-badge,
  .bank-header-actions #bank-deposit-all-btn {
    width: 100%;
    justify-content: center;
  }
}

.bank-container {
  min-height: 280px;
}

.inventory-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  margin-bottom: 6px;
}

.slot-capacity-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 14px auto;
  width: 100%;
}

.header-capacity-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .header-capacity-wrap {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

.bank-capacity-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  background: rgba(229, 142, 38, 0.12);
  border: 1.5px solid var(--border-color);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--color-primary);
  box-shadow: 0 1px 3px var(--shadow-color);
  min-width: 135px;
  box-sizing: border-box;
}

body.dark-mode .bank-capacity-badge {
  background: rgba(35, 20, 10, 0.75);
  border-color: rgba(229, 142, 38, 0.35);
}

.capacity-badge-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.capacity-mini-bar {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: 5px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

body.dark-mode .capacity-mini-bar {
  background: rgba(0, 0, 0, 0.45);
}

.capacity-mini-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s ease, background 0.3s ease;
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
}

.bank-capacity-badge.bank-full {
  background: rgba(231, 76, 60, 0.18);
  border-color: #e74c3c;
  color: #e74c3c;
  animation: pulseCombat 1.5s infinite alternate ease-in-out;
}

.bank-capacity-badge.bank-full .capacity-mini-fill {
  background: linear-gradient(90deg, #e74c3c, #c0392b) !important;
  box-shadow: 0 0 6px rgba(231, 76, 60, 0.6) !important;
}

/* ================= COFRE DE OURO DO BANCO ================= */
.bank-vault-card {
  background: linear-gradient(135deg, rgba(255, 249, 230, 0.98) 0%, rgba(252, 241, 210, 0.94) 50%, rgba(246, 226, 175, 0.9) 100%);
  border: 1.5px solid #d4af37;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.28), 0 4px 14px rgba(243, 156, 18, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.bank-vault-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #f1c40f 50%, transparent 100%);
  opacity: 0.85;
}

body.dark-mode .bank-vault-card {
  background: linear-gradient(135deg, rgba(54, 34, 14, 0.96) 0%, rgba(36, 22, 9, 0.96) 50%, rgba(24, 14, 6, 0.98) 100%);
  border-color: rgba(243, 156, 18, 0.55);
  box-shadow: 0 0 0 1px rgba(243, 156, 18, 0.25), 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 12px rgba(243, 156, 18, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bank-vault-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.bank-vault-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  width: 100%;
}

.bank-vault-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.bank-vault-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bank-vault-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.bank-vault-title {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.1;
  text-align: left;
}

.bank-vault-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin: 2px 0 0 0;
  text-align: left;
}

.bank-vault-rate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #2b180d 0%, #170d06 100%);
  border: 1.5px solid #f39c12;
  color: #f1c40f;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

body.dark-mode .bank-vault-rate-badge {
  color: #f1c40f;
  border-color: #f39c12;
  background: linear-gradient(135deg, #2b180d 0%, #170d06 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.vault-rate-gold-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
}

.bank-vault-balance-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.bank-vault-balance-row .currency-group {
  padding: 4px 10px;
  font-size: 0.95rem;
}

.bank-vault-balance-label {
  font-size: 0.84rem;
  color: var(--text-secondary);
  font-weight: 800;
}

.bank-vault-balance-val {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 1.05rem;
  font-weight: 900;
  color: #f39c12;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body.dark-mode .bank-vault-balance-val {
  color: #f1c40f;
}

.inline-gold-sprite {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}

.bank-vault-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.vault-action-btn {
  padding: 7px 18px !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
  flex: 1;
  max-width: 180px;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-sm) !important;
}

/* Modal do Cofre de Ouro */
.vault-modal-balances-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 12px;
}

.vault-modal-bal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.vault-preset-btns {
  display: flex;
  gap: 4px;
  justify-content: center;
  width: 100%;
}

.vault-preset-btn {
  flex: 1;
  padding: 5px 2px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

.vault-preset-btn.active {
  background: var(--color-primary) !important;
  color: white !important;
  border-color: var(--border-color) !important;
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 4px;
  box-sizing: border-box;
}

@media (max-width: 580px) {
  .bank-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
}

.bank-slot {
  aspect-ratio: 1;
  border: 1.5px solid var(--border-light);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(245, 238, 225, 0.85) 100%);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 4px var(--shadow-color);
  box-sizing: border-box;
  overflow: hidden;
}

body.dark-mode .bank-slot {
  background: linear-gradient(135deg, rgba(42, 26, 15, 0.85) 0%, rgba(24, 14, 8, 0.95) 100%);
  border-color: rgba(229, 142, 38, 0.25);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.4);
}

.bank-slot:hover:not(.empty) {
  border-color: #f39c12;
  background: linear-gradient(135deg, rgba(229, 142, 38, 0.2) 0%, rgba(45, 28, 16, 0.8) 100%);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 10px rgba(229, 142, 38, 0.35);
}

.bank-slot.empty {
  cursor: default;
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px dashed var(--border-light);
  box-shadow: none;
  opacity: 0.55;
}

body.dark-mode .bank-slot.empty {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(229, 142, 38, 0.15);
}

.bank-slot.empty:hover {
  transform: none;
  border-color: var(--border-light);
  background: rgba(0, 0, 0, 0.03);
  box-shadow: none;
}

.empty-slot-num {
  font-size: 0.72rem;
  font-weight: 800;
  opacity: 0.35;
  color: var(--text-secondary);
}

/* Paginação Unificada (Loja & Banco) */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1.5px dashed var(--border-light);
  width: 100%;
  box-sizing: border-box;
}

.pagination-indicator {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
}

.pagination-indicator strong {
  color: var(--color-primary);
}

.pagination-btn {
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ================= ABA LOJA ================= */
.shop-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.shop-tabs-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  box-shadow: 0 2px 6px var(--shadow-color);
  width: 100%;
  box-sizing: border-box;
}

body.dark-mode .shop-tabs-card {
  background: rgba(30, 18, 10, 0.85);
  border-color: rgba(229, 142, 38, 0.3);
}

.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.shop-tab-btn {
  background-color: var(--bg-app);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 4px var(--shadow-color);
}

.shop-tab-btn:hover {
  border-color: var(--color-primary);
  background-color: var(--bg-card-hover);
  transform: translateY(-1px);
}

.shop-tab-btn.active {
  background: linear-gradient(180deg, #e58e26 0%, #d35400 100%) !important;
  color: #ffffff !important;
  border-color: #f39c12 !important;
  box-shadow: 0 2px 8px rgba(229, 142, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.shop-tab-btn.tab-promo {
  border-color: rgba(231, 76, 60, 0.5);
  background: linear-gradient(180deg, rgba(231, 76, 60, 0.12) 0%, rgba(211, 84, 0, 0.12) 100%);
  color: #e74c3c;
  font-weight: 900;
}

.shop-tab-btn.tab-promo:hover {
  border-color: #e74c3c;
  background: linear-gradient(180deg, rgba(231, 76, 60, 0.22) 0%, rgba(211, 84, 0, 0.22) 100%);
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.shop-tab-btn.tab-promo.active {
  background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%) !important;
  border-color: #f39c12 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(231, 76, 60, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.shop-tab-btn.tab-specials {
  border-color: rgba(241, 196, 15, 0.5);
  background: linear-gradient(180deg, rgba(241, 196, 15, 0.15) 0%, rgba(212, 175, 55, 0.12) 100%);
  color: #d4af37;
  font-weight: 900;
}

.shop-tab-btn.tab-specials:hover {
  border-color: #f1c40f;
  background: linear-gradient(180deg, rgba(241, 196, 15, 0.25) 0%, rgba(212, 175, 55, 0.22) 100%);
  box-shadow: 0 2px 8px rgba(241, 196, 15, 0.35);
}

.shop-tab-btn.tab-specials.active {
  background: linear-gradient(180deg, #f39c12 0%, #b7791f 100%) !important;
  border-color: #f1c40f !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(241, 196, 15, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.shop-multiplier-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-light);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}

.shop-multiplier-btn {
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: all 0.2s;
}

.shop-multiplier-btn:hover {
  border-color: var(--color-primary);
  background-color: rgba(229, 142, 38, 0.15);
}

.shop-multiplier-btn.active {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--border-color);
  box-shadow: 0 1px 4px rgba(229, 142, 38, 0.4);
}

.shop-qty-input {
  width: 72px;
  padding: 4px 8px;
  font-size: 0.82rem;
  font-weight: bold;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-light);
  background-color: var(--bg-app);
  color: var(--text-primary);
  text-align: center;
}

.shop-qty-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 6px rgba(229, 142, 38, 0.4);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 540px) {
  .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .shop-item-card {
    padding: 6px 4px 8px 4px !important;
    gap: 4px !important;
  }
  .shop-item-pedestal {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 1px 0 !important;
  }
  .shop-pedestal-sprite {
    width: 36px !important;
    height: 36px !important;
    max-width: 88% !important;
    max-height: 88% !important;
  }
  .shop-item-name {
    font-size: 0.70rem !important;
    line-height: 1.15 !important;
    min-height: 2.2em !important;
  }
  .shop-item-stock {
    font-size: 0.58rem !important;
  }
  .shop-req-tag, .shop-item-type-badge {
    font-size: 0.58rem !important;
    padding: 1px 3px !important;
  }
  .shop-price-tag {
    font-size: 0.68rem !important;
    padding: 2px 3px !important;
  }
  .shop-old-price {
    font-size: 0.6rem !important;
  }
  .shop-buy-btn {
    font-size: 0.72rem !important;
    padding: 4px 2px !important;
  }
  .shop-inspect-btn {
    padding: 2px 3px !important;
  }
  .shop-inspect-icon-img {
    width: 11px !important;
    height: 11px !important;
  }
  .shop-card-promo-ribbon {
    font-size: 0.48rem !important;
    width: 78px !important;
    padding: 1.5px 0 !important;
    top: 3px !important;
    right: -22px !important;
  }
  .shop-card-special-ribbon {
    font-size: 0.46rem !important;
    width: 78px !important;
    padding: 1.5px 0 !important;
    top: 3px !important;
    right: -22px !important;
  }
  .shop-card-special-ribbon.under-promo {
    top: 19px !important;
    right: -30px !important;
    width: 105px !important;
    font-size: 0.40rem !important;
    padding: 1px 0 !important;
  }
  .shop-card-req-slot.has-promo-offset {
    padding-right: 22px !important;
  }
}

.shop-item-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(246, 239, 225, 0.96) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 10px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  box-shadow: 0 3px 8px var(--shadow-color);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

body.dark-mode .shop-item-card {
  background: linear-gradient(180deg, rgba(36, 22, 12, 0.98) 0%, rgba(20, 12, 6, 0.98) 100%);
  border-color: rgba(229, 142, 38, 0.28);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.shop-item-card:hover {
  border-color: #f39c12;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(229, 142, 38, 0.25);
}

/* CARD DE PROMOÇÃO / DESTAQUE COM COR DISTINTA */
.shop-item-card.is-promo {
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.98) 0%, rgba(254, 233, 203, 0.96) 100%);
  border: 2px solid #e67e22;
  box-shadow: 0 4px 14px rgba(230, 126, 34, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.dark-mode .shop-item-card.is-promo {
  background: linear-gradient(180deg, rgba(54, 28, 12, 0.98) 0%, rgba(32, 14, 6, 0.98) 100%);
  border-color: #f39c12;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(243, 156, 18, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.shop-item-card.is-promo:hover {
  border-color: #f1c40f;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 22px rgba(243, 156, 18, 0.35);
}

.shop-card-promo-ribbon {
  position: absolute;
  top: 4px;
  right: -25px;
  width: 88px;
  text-align: center;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: #ffffff;
  font-size: 0.53rem;
  font-weight: 900;
  padding: 2px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 4;
}

.shop-card-special-ribbon {
  position: absolute;
  top: 4px;
  right: -25px;
  width: 88px;
  text-align: center;
  background: linear-gradient(135deg, #f39c12 0%, #d35400 100%);
  color: #ffffff;
  font-size: 0.52rem;
  font-weight: 900;
  padding: 2px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
}

.shop-card-special-ribbon.under-promo {
  top: 26px;
  right: -38px;
  width: 125px;
  background: linear-gradient(135deg, #f1c40f 0%, #e67e22 100%);
  color: #1a0f05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  font-size: 0.46rem;
  padding: 1.5px 0;
  z-index: 2;
}

.shop-item-badges-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin: -2px 0 2px 0;
}

.shop-item-stock {
  font-size: 0.70rem;
  color: var(--text-secondary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: rgba(0, 0, 0, 0.03);
  padding: 3px 6px;
  border-radius: 6px;
  box-sizing: border-box;
}

body.dark-mode .shop-item-stock {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.shop-stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.shop-stock-icon-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.shop-stock-divider {
  opacity: 0.35;
  font-size: 0.65rem;
}

.shop-stock-val {
  font-weight: 800;
  color: #d68910;
  font-size: 0.72rem;
}

body.dark-mode .shop-stock-val {
  color: #f7dc6f;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.shop-price-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.shop-old-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-secondary);
  text-decoration: line-through;
  opacity: 0.75;
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed var(--border-light);
  padding: 2px 6px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}

body.dark-mode .shop-old-price {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.12);
}

.shop-empty-message {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 12px;
  text-align: center;
  background: var(--bg-card);
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-md);
}

.shop-empty-sprite {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.7;
}

.shop-card-top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 4px;
}

.shop-item-type-badge {
  font-size: 0.66rem;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  line-height: 1.1;
  white-space: nowrap;
  display: inline-block;
  background: rgba(229, 142, 38, 0.15);
  color: #d35400;
  border: 1px solid rgba(229, 142, 38, 0.35);
}

body.dark-mode .shop-item-type-badge {
  background: rgba(243, 156, 18, 0.15);
  color: #f39c12;
  border-color: rgba(243, 156, 18, 0.35);
}

.shop-req-tag {
  font-size: 0.66rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  line-height: 1.1;
  white-space: nowrap;
  display: inline-block;
}

.shop-req-tag.req-atk { background: rgba(230, 126, 34, 0.15); color: #e67e22; border: 1px solid rgba(230, 126, 34, 0.3); }
.shop-req-tag.req-def { background: rgba(41, 128, 185, 0.15); color: #2980b9; border: 1px solid rgba(41, 128, 185, 0.3); }
.shop-req-tag.req-ran { background: rgba(39, 174, 96, 0.15); color: #27ae60; border: 1px solid rgba(39, 174, 96, 0.3); }
.shop-req-tag.req-mag { background: rgba(155, 89, 182, 0.15); color: #9b59b6; border: 1px solid rgba(155, 89, 182, 0.3); }
.shop-req-tag.req-wc  { background: rgba(211, 84, 0, 0.15); color: #d35400; border: 1px solid rgba(211, 84, 0, 0.3); }
.shop-req-tag.req-min { background: rgba(127, 140, 141, 0.15); color: #7f8c8d; border: 1px solid rgba(127, 140, 141, 0.3); }

.shop-item-type-tag {
  font-size: 0.68rem;
  color: var(--text-secondary);
  text-transform: capitalize;
  white-space: nowrap;
}

.shop-inspect-btn {
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 4px 6px;
  color: var(--text-primary);
  transition: all 0.2s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shop-inspect-btn:hover {
  background: var(--border-light);
  border-color: var(--color-primary);
  transform: scale(1.08);
}

.shop-inspect-icon-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
  pointer-events: none;
}

.shop-item-pedestal {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: radial-gradient(circle, rgba(241, 196, 15, 0.22) 0%, rgba(0, 0, 0, 0.12) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
  margin: 2px 0;
}

body.dark-mode .shop-item-pedestal {
  background: radial-gradient(circle, rgba(241, 196, 15, 0.2) 0%, rgba(12, 6, 3, 0.85) 100%);
  border-color: rgba(229, 142, 38, 0.35);
}

.shop-item-pedestal:hover {
  transform: scale(1.06);
  border-color: #f1c40f;
}

.shop-item-pedestal .sprite-icon,
.shop-item-pedestal img,
.shop-pedestal-sprite {
  width: 44px !important;
  height: 44px !important;
  max-width: 88% !important;
  max-height: 88% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.shop-item-name {
  font-family: var(--font-title);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
  color: var(--text-primary);
  width: 100%;
  line-height: 1.15;
  word-break: break-word;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.shop-price-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 900;
  color: #f1c40f;
  width: 100%;
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

body.dark-mode .shop-price-tag {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(229, 142, 38, 0.25);
}

.shop-price-tag.price-unaffordable {
  color: #ff7675 !important;
  border-color: rgba(231, 76, 60, 0.35);
}

.shop-buy-btn {
  background: linear-gradient(180deg, #27ae60 0%, #196f3d 100%) !important;
  border: 1.5px solid #2ecc71 !important;
  border-radius: var(--radius-sm);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px !important;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.shop-buy-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #2ecc71 0%, #229954 100%) !important;
  border-color: #58d68d !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

.shop-buy-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.shop-buy-btn.cannot-afford {
  background: linear-gradient(180deg, #7f8c8d 0%, #4b6584 100%) !important;
  border-color: #778ca3 !important;
  opacity: 0.88;
}

/* ================= ABA MISSÕES (QUESTS) ================= */
.quests-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.quests-tabs-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  box-shadow: 0 2px 6px var(--shadow-color);
  width: 100%;
  box-sizing: border-box;
}

body.dark-mode .quests-tabs-card {
  background: rgba(30, 18, 10, 0.85);
  border-color: rgba(229, 142, 38, 0.3);
}

.quest-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.quest-filter-btn {
  background-color: var(--bg-app);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 4px var(--shadow-color);
}

.quest-filter-btn:hover {
  border-color: var(--color-primary);
  background-color: var(--bg-card-hover);
  transform: translateY(-1px);
}

.quest-filter-btn.active {
  background: linear-gradient(180deg, #e58e26 0%, #d35400 100%) !important;
  color: #ffffff !important;
  border-color: #f39c12 !important;
  box-shadow: 0 2px 8px rgba(229, 142, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.quests-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .quests-list {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
  }
}

.quest-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(248, 241, 226, 0.96) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 10px;
  box-shadow: 0 3px 8px var(--shadow-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

body.dark-mode .quest-card {
  background: linear-gradient(180deg, rgba(32, 20, 12, 0.98) 0%, rgba(18, 12, 7, 0.98) 100%);
  border-color: rgba(229, 142, 38, 0.28);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.quest-card:hover {
  border-color: #f39c12;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(229, 142, 38, 0.25);
}

.quest-card.status-active {
  border: 1.5px solid #d4af37 !important;
  background: linear-gradient(180deg, rgba(254, 249, 231, 0.98) 0%, var(--bg-card) 100%) !important;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.28), 0 4px 14px rgba(212, 175, 55, 0.2) !important;
}

body.dark-mode .quest-card.status-active {
  background: linear-gradient(180deg, rgba(46, 32, 12, 0.98) 0%, rgba(28, 18, 8, 0.98) 100%) !important;
  border-color: #f1c40f !important;
  box-shadow: 0 0 0 1px rgba(241, 196, 15, 0.35), 0 4px 16px rgba(241, 196, 15, 0.25) !important;
}

.quest-card.status-ready {
  border: 1.5px solid #f1c40f !important;
  background: linear-gradient(180deg, rgba(241, 196, 15, 0.16) 0%, var(--bg-card) 100%) !important;
  box-shadow: 0 0 16px rgba(241, 196, 15, 0.4) !important;
  animation: pulseQuestReady 2s infinite alternate ease-in-out;
}

@keyframes pulseQuestReady {
  0% { box-shadow: 0 0 8px rgba(241, 196, 15, 0.25); }
  100% { box-shadow: 0 0 18px rgba(241, 196, 15, 0.55); }
}

.quest-card.status-completed {
  border: 1.5px solid #27ae60;
  background: linear-gradient(180deg, rgba(39, 174, 96, 0.12) 0%, rgba(46, 204, 113, 0.06) 100%);
  box-shadow: 0 2px 6px var(--shadow-color);
  opacity: 0.92;
}

body.dark-mode .quest-card.status-completed {
  background: linear-gradient(180deg, rgba(18, 38, 22, 0.96) 0%, rgba(12, 26, 15, 0.98) 100%);
  border-color: #2ecc71;
}

.quest-card-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.quest-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  width: 100%;
}

.quest-card-emblem {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-sm);
  background: radial-gradient(circle, rgba(229, 142, 38, 0.22) 0%, rgba(0, 0, 0, 0.15) 100%);
  border: 1.5px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  margin: 2px auto 4px auto;
  transition: transform 0.2s ease;
}

.quest-card:hover .quest-card-emblem {
  transform: scale(1.08);
  border-color: #f39c12;
}

body.dark-mode .quest-card-emblem {
  background: radial-gradient(circle, rgba(229, 142, 38, 0.22) 0%, rgba(12, 6, 3, 0.9) 100%);
  border-color: rgba(229, 142, 38, 0.35);
}

.quest-emblem-sprite {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.quest-card-name {
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 800;
  margin: 1px 0 2px 0;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
  max-width: 100%;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quest-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.25;
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.quest-status-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  min-height: 20px;
  line-height: 1;
  border-radius: 4px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.quest-badge-mini-img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.quest-status-badge.badge-available {
  background: rgba(41, 128, 185, 0.15);
  color: #2980b9;
  border: 1px solid rgba(41, 128, 185, 0.35);
}

body.dark-mode .quest-status-badge.badge-available {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}

.quest-status-badge.badge-active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(243, 156, 18, 0.16) 100%);
  color: #b78103;
  border: 1px solid #d4af37;
  font-weight: 800;
}

body.dark-mode .quest-status-badge.badge-active {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.25) 0%, rgba(212, 175, 55, 0.15) 100%);
  color: #ffd32a;
  border-color: #f1c40f;
}

.quest-status-badge.badge-ready {
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.25) 0%, rgba(229, 142, 38, 0.25) 100%);
  color: #f1c40f;
  border: 1px solid #f1c40f;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.quest-status-badge.badge-completed {
  background: rgba(46, 204, 113, 0.15);
  color: #27ae60;
  border: 1px solid rgba(46, 204, 113, 0.35);
}

.quest-progress-box {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  width: 100%;
  box-sizing: border-box;
}

body.dark-mode .quest-progress-box {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(229, 142, 38, 0.2);
}

.quest-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  color: var(--text-secondary);
  font-weight: bold;
  margin-bottom: 4px;
}

.quest-req-details-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  line-height: 1.2;
}

.quest-materials-label {
  color: var(--text-secondary);
  font-weight: bold;
}

.quest-materials-items-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.quest-material-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  vertical-align: middle;
}

.quest-material-sep {
  opacity: 0.55;
  margin: 0 1px;
}

.quest-pct-val {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--text-primary);
  white-space: nowrap;
}

.quest-progress-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}

body.dark-mode .quest-progress-track {
  background: rgba(0, 0, 0, 0.4);
}

.quest-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #e67e22, #f1c40f);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.quest-rewards-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.quest-reward-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
}

.quest-rewards-chips-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
  width: 100%;
}

.quest-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.quest-reward-chip.chip-gold {
  background: rgba(241, 196, 15, 0.15);
  color: #d4ac0d;
  border: 1px solid rgba(241, 196, 15, 0.4);
}

body.dark-mode .quest-reward-chip.chip-gold {
  color: #ffd32a;
}

.quest-reward-chip.chip-xp {
  background: rgba(46, 204, 113, 0.12);
  color: #27ae60;
  border: 1px solid rgba(46, 204, 113, 0.35);
}

body.dark-mode .quest-reward-chip.chip-xp {
  color: #2ecc71;
}

.quest-reward-chip.chip-item {
  background: rgba(56, 189, 248, 0.12);
  color: #0284c7;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

body.dark-mode .quest-reward-chip.chip-item {
  color: #38bdf8;
}

.quest-card-bottom {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.quest-action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.quest-btn-action {
  background: linear-gradient(180deg, #27ae60 0%, #196f3d 100%) !important;
  border: 1.5px solid #2ecc71 !important;
  color: #ffffff !important;
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  min-height: 28px !important;
  line-height: 1 !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quest-btn-action:hover {
  background: linear-gradient(180deg, #2ecc71 0%, #229954 100%) !important;
  border-color: #58d68d !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.quest-btn-action:active {
  transform: translateY(1px);
}

.quest-btn-abandon {
  background: linear-gradient(180deg, #c0392b 0%, #78281f 100%) !important;
  border: 1.5px solid #e74c3c !important;
  color: #ffffff !important;
  padding: 4px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  min-height: 26px !important;
  line-height: 1 !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.quest-btn-abandon:hover {
  background: linear-gradient(180deg, #e74c3c 0%, #922b21 100%) !important;
  border-color: #f1948a !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.quest-btn-abandon:active {
  transform: translateY(1px);
}

.quest-active-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ================= STATUS E ESTATÍSTICAS ================= */
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.stat-category-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 12px;
  box-shadow: 0 2px 8px var(--shadow-color);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  width: 100%;
}

.stat-category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--shadow-color);
  border-color: rgba(229, 142, 38, 0.4);
}

body.dark-mode .stat-category-card {
  background: rgba(30, 18, 10, 0.85);
  border-color: rgba(229, 142, 38, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.stat-category-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border-light);
  margin-bottom: 2px;
  text-align: center;
}

.stat-category-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
}

.stat-category-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.stats-list {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .stats-list {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
}

.stats-list li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg-app);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  transition: all 0.15s ease;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.stats-list li:hover {
  background: var(--bg-card-hover);
  border-color: rgba(229, 142, 38, 0.35);
  transform: translateY(-1px);
}

body.dark-mode .stats-list li {
  background: rgba(20, 12, 6, 0.6);
  border-color: rgba(229, 142, 38, 0.15);
}

body.dark-mode .stats-list li:hover {
  background: rgba(45, 26, 14, 0.8);
  border-color: rgba(229, 142, 38, 0.4);
}

.stat-label-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.2;
  min-width: 0;
  width: 100%;
  word-break: break-word;
  text-align: center;
}

.stat-label-wrap > span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
}

.stat-sprite-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.stat-badge-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 900;
  font-size: 0.76rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  align-self: center;
  margin-top: auto;
}

/* Paleta de Cores Temáticas para cada tipo de Estatística */
.stat-val-time {
  background: rgba(59, 130, 246, 0.14);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.4);
}
body.dark-mode .stat-val-time {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.2);
}

.stat-val-kills {
  background: rgba(249, 115, 22, 0.14);
  color: #ea580c;
  border: 1px solid rgba(249, 115, 22, 0.4);
}
body.dark-mode .stat-val-kills {
  color: #fb923c;
  background: rgba(249, 115, 22, 0.2);
}

.stat-val-deaths {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
body.dark-mode .stat-val-deaths {
  color: #f87171;
  background: rgba(239, 68, 68, 0.2);
}

.stat-val-gold {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.45);
}
body.dark-mode .stat-val-gold {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.22);
}

.stat-val-quests {
  background: rgba(168, 85, 247, 0.14);
  color: #9333ea;
  border: 1px solid rgba(168, 85, 247, 0.4);
}
body.dark-mode .stat-val-quests {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.2);
}

.stat-val-gathering {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
body.dark-mode .stat-val-gathering {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.2);
}

.stat-val-production {
  background: rgba(14, 165, 233, 0.14);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.4);
}
body.dark-mode .stat-val-production {
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.2);
}

.stat-val-level {
  background: rgba(234, 179, 8, 0.14);
  color: #ca8a04;
  border: 1px solid rgba(234, 179, 8, 0.45);
}
body.dark-mode .stat-val-level {
  color: #facc15;
  background: rgba(234, 179, 8, 0.22);
}

/* ================= MODAL DE SELEÇÃO RÁPIDA DE EQUIPAMENTO ================= */
.equip-picker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 12px;
}

.equip-picker-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 238, 220, 0.95) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: 0 2px 6px var(--shadow-color);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  width: 100%;
}

body.dark-mode .equip-picker-card {
  background: linear-gradient(135deg, rgba(42, 26, 14, 0.95) 0%, rgba(22, 13, 7, 0.98) 100%);
  border-color: rgba(229, 142, 38, 0.25);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.equip-picker-card.current-equipped {
  border: 2px solid #f1c40f;
  background: radial-gradient(circle, rgba(241, 196, 15, 0.15) 0%, rgba(35, 20, 10, 0.75) 100%);
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.35);
}

.equip-picker-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.equip-picker-icon-box {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: radial-gradient(circle, rgba(229, 142, 38, 0.22) 0%, rgba(0, 0, 0, 0.18) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
}

body.dark-mode .equip-picker-icon-box {
  background: radial-gradient(circle, rgba(229, 142, 38, 0.25) 0%, rgba(12, 6, 3, 0.9) 100%);
  border-color: rgba(229, 142, 38, 0.35);
}

.equip-picker-icon-box .sprite-icon,
.equip-picker-icon-box img,
.equip-picker-icon {
  width: 44px !important;
  height: 44px !important;
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}

.equip-picker-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.equip-picker-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.2;
}

.equip-picker-item-name {
  font-family: var(--font-title);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
}

body.dark-mode .equip-picker-item-name {
  color: #ffd32a;
}

.equip-picker-qty-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
}

body.dark-mode .equip-picker-qty-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #f1c40f;
}

.equip-equipped-tag {
  font-size: 0.62rem !important;
  padding: 2px 6px !important;
  font-weight: 800;
}

.equip-picker-stats {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  align-items: center !important;
  width: 100% !important;
}

.equip-picker-stats .stat-chip {
  width: auto !important;
  min-width: 0 !important;
  max-width: fit-content !important;
  flex: 0 1 auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 2px 7px !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid var(--border-light) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

body.dark-mode .equip-picker-stats .stat-chip {
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(229, 142, 38, 0.22) !important;
}

.equip-picker-stats .stat-chip .stat-chip-lbl {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex: 0 0 auto !important;
  font-size: 0.70rem !important;
}

.equip-picker-stats .stat-chip .stat-chip-val {
  font-size: 0.72rem !important;
  flex: 0 0 auto !important;
}

.equip-picker-stats .chip-sprite-icon {
  width: 14px !important;
  height: 14px !important;
}

.equip-picker-action-row {
  width: 100%;
  margin-top: 2px;
}

.btn-equip-picker,
.btn-unequip-picker {
  width: 100%;
  height: 32px;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.equip-picker-empty-notice {
  text-align: center;
  padding: 24px 12px;
  background: rgba(0, 0, 0, 0.04);
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-sm);
}

body.dark-mode .equip-picker-empty-notice {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(229, 142, 38, 0.2);
}

/* ================= OFFLINE PROGRESS MODAL ================= */
.offline-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.offline-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.offline-hero-sprite-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(241, 196, 15, 0.45));
}

.offline-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(229, 142, 38, 0.2) 0%, rgba(0, 0, 0, 0.15) 100%);
  border: 1.5px solid rgba(229, 142, 38, 0.4);
  padding: 4px 14px;
  border-radius: 20px;
  color: var(--color-primary);
}

body.dark-mode .offline-time-badge {
  background: linear-gradient(135deg, rgba(229, 142, 38, 0.2) 0%, rgba(15, 8, 4, 0.8) 100%);
  color: #ffd32a;
}

.offline-log-card {
  background: linear-gradient(180deg, rgba(24, 15, 8, 0.95) 0%, rgba(14, 8, 4, 0.98) 100%);
  border: 1.5px solid rgba(229, 142, 38, 0.35);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  max-height: 240px;
  overflow-y: auto;
  text-align: left;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.offline-log-list {
  list-style-type: none;
  font-size: 0.86rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.offline-log-list li {
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.045);
  border-left: 3px solid #f1c40f;
  border-radius: 6px;
  color: #fdfaf2;
  line-height: 1.5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.offline-log-list li strong {
  color: #ffd32a;
}

.offline-log-list li > .inline-toast-icon,
.offline-log-list li > img {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 4px;
}

.offline-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: -1px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin: 0 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.offline-stat img,
.offline-stat .inline-gold-icon,
.offline-stat .inline-toast-icon,
.offline-stat .inline-misc-icon {
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
  margin: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.offline-stat-xp {
  background: rgba(46, 204, 113, 0.14);
  color: #7ef0ae;
  border: 1px solid rgba(46, 204, 113, 0.45);
}

.offline-stat-gold {
  background: rgba(245, 158, 11, 0.14);
  color: #ffd166;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.offline-stat-qty {
  background: rgba(59, 130, 246, 0.14);
  color: #7cc6ff;
  border: 1px solid rgba(59, 130, 246, 0.45);
}

.offline-stat-bad {
  background: rgba(239, 68, 68, 0.14);
  color: #ff9a9a;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

/* NOTIFICAÇÕES TOAST */
.toast-container {
  position: fixed;
  bottom: 125px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
}

@media (min-width: 768px) {
  .toast-container {
    bottom: 110px;
  }
}

.toast,
.toast-message {
  background: linear-gradient(135deg, rgba(38, 26, 18, 0.96) 0%, rgba(22, 15, 10, 0.96) 100%);
  color: #f8fafc;
  border: 1.5px solid rgba(229, 142, 38, 0.55);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  animation: toastIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s ease, transform 0.2s ease, filter 0.2s ease;
  backdrop-filter: blur(6px);
}

.toast strong {
  color: #f59e0b;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.toast-qty,
.toast .toast-qty {
  color: #38bdf8;
  font-weight: 800;
  display: inline;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.toast-xp,
.toast .toast-xp {
  color: #2ecc71;
  font-weight: 800;
  display: inline;
  margin-left: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.toast-gold-spent,
.toast .toast-gold-spent {
  color: #ff6b6b !important;
  font-weight: 800;
  display: inline;
  margin-left: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.toast-gold-earned,
.toast .toast-gold-earned {
  color: #2ecc71 !important;
  font-weight: 800;
  display: inline;
  margin-left: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.toast span.text-success,
.toast .heal-badge-green {
  color: #2ecc71 !important;
  font-weight: 800;
}

body.dark-mode .toast,
body.dark-mode .toast-message {
  background: linear-gradient(135deg, rgba(28, 19, 13, 0.98) 0%, rgba(15, 10, 7, 0.98) 100%);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 12px rgba(245, 158, 11, 0.1);
}

.toast:hover,
.toast-message:hover {
  filter: brightness(1.12);
  transform: translateY(-2px) scale(1.02);
}

.toast:active,
.toast-message:active {
  transform: scale(0.97);
}

.toast.fade-out,
.toast-message.fade-out {
  opacity: 0;
  transform: translateY(10px) scale(0.95);
}

.toast.level-up,
.toast-message.level-up {
  border-color: #2ecc71;
  background: linear-gradient(135deg, #1e8449, #27ae60);
  color: white;
  box-shadow: 0 4px 18px rgba(46, 204, 113, 0.45);
}

.toast.damage-player,
.toast-message.damage-player {
  border-color: #e74c3c;
  background: linear-gradient(135deg, #922b21, #c0392b);
  color: white;
  box-shadow: 0 4px 18px rgba(231, 76, 60, 0.45);
}

.toast.warning,
.toast-message.warning {
  border-color: #f39c12;
  background: linear-gradient(135deg, #b9770e, #d35400);
  color: white;
  box-shadow: 0 4px 18px rgba(230, 126, 34, 0.45);
}

.toast.burnt,
.toast-message.burnt {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(48, 18, 18, 0.96), rgba(30, 12, 12, 0.96));
  color: #fecaca;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.toast.toast-prayer-bone,
.toast-message.toast-prayer-bone {
  background: linear-gradient(180deg, #ffffff 0%, #f4eee1 100%) !important;
  border: 1.5px solid #dcd1be !important;
  color: #3b3123 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.toast.toast-prayer-bone strong,
.toast-message.toast-prayer-bone strong {
  color: #1f1810 !important;
}

body.dark-mode .toast.toast-prayer-bone,
body.dark-mode .toast-message.toast-prayer-bone {
  background: linear-gradient(180deg, #44403c 0%, #292524 100%) !important;
  border-color: #57534e !important;
  color: #f5f5f4 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .toast.toast-prayer-bone strong,
body.dark-mode .toast-message.toast-prayer-bone strong {
  color: #ffffff !important;
}

.inline-toast-icon,
.toast img,
.toast .sprite-icon {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* ANIMATIONS */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  from { box-shadow: 0 0 2px var(--color-primary); }
  to { box-shadow: 0 0 8px var(--color-primary); }
}

/* ================= CELEBRAÇÃO DE LEVEL UP (BANNER LUXUOSO) ================= */
.level-up-container {
  position: fixed;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 90%;
  max-width: 440px;
}

.level-up-banner {
  pointer-events: auto;
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, rgba(28, 20, 14, 0.98) 0%, rgba(48, 30, 14, 0.98) 50%, rgba(20, 14, 10, 0.98) 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 158, 11, 0.45), inset 0 0 15px rgba(251, 191, 36, 0.2);
  padding: 12px 16px;
  overflow: hidden;
  cursor: pointer;
  animation: lvlUpSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: transform 0.2s ease, opacity 0.3s ease;
}

.level-up-banner:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(245, 158, 11, 0.6), inset 0 0 20px rgba(251, 191, 36, 0.3);
}

.level-up-banner.fade-out {
  animation: lvlUpSlideOut 0.3s ease forwards;
}

.lvl-up-shimmer {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), rgba(251, 191, 36, 0.3), transparent);
  transform: skewX(-25deg);
  animation: lvlUpShimmer 2.5s infinite;
  pointer-events: none;
}

.lvl-up-content {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.lvl-up-medallion {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, #451a03 0%, #1c0d02 100%);
  border: 2.5px solid #fbbf24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.6), inset 0 0 8px rgba(245, 158, 11, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lvl-up-sprite-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  animation: lvlUpIconPop 0.6s ease-out;
}

.lvl-up-glow-ring {
  display: none;
}

.lvl-up-text-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lvl-up-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lvl-up-tag {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #fbbf24;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.lvl-up-stars {
  font-size: 0.75rem;
  letter-spacing: 2px;
}

.lvl-up-skill-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff7ed;
  text-shadow: 0 2px 6px rgba(245, 158, 11, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lvl-up-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.lvl-up-pill-old {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
}

.lvl-up-arrow {
  color: #fbbf24;
  font-size: 0.8rem;
  font-weight: 900;
}

.lvl-up-pill-new {
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(180deg, #16a34a, #15803d);
  padding: 1px 8px;
  border-radius: 4px;
  border: 1px solid #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.lvl-up-close-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
  align-self: flex-start;
}

.lvl-up-close-btn:hover {
  color: #f87171;
}

.lvl-up-sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 10%, #fbbf24 60%, #d97706 100%);
  box-shadow: 0 0 10px #fbbf24, 0 0 16px #f59e0b;
  pointer-events: none;
  animation: lvlUpSparkleBurst 1.2s ease-out forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
  z-index: 1;
}

@keyframes lvlUpSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lvlUpSlideOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-25px) scale(0.92);
  }
}

@keyframes lvlUpShimmer {
  0% { left: -150%; }
  50% { left: 150%; }
  100% { left: 150%; }
}

@keyframes lvlUpIconPop {
  0% { transform: scale(0.4) rotate(-15deg); }
  60% { transform: scale(1.25) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes lvlUpSparkleBurst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0px) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--dist) * -1)) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--dist) * -1.4)) scale(0.2);
  }
}

/* ESTILOS DE RESPONSIVIDADE DESKTOP */
@media (min-width: 768px) {
  #game-container {
    display: grid;
    grid-template-columns: 210px 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
  }
  
  .game-header {
    grid-column: 1 / span 2;
  }
  
  .game-nav {
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    justify-content: flex-start;
    border-top: none;
    border-right: 3px solid var(--border-color);
    padding: 16px 8px;
    gap: 10px;
  }
  
  .nav-item {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 9px 12px;
    font-size: 0.82rem;
    min-width: unset;
  }
  
  .nav-item.active {
    border: 1px solid #f39c12;
    border-left: 4px solid var(--color-primary);
  }

  .nav-badge {
    position: static;
    margin-left: auto;
    font-size: 0.72rem;
    padding: 2px 7px;
    height: auto;
    min-width: unset;
    line-height: normal;
    border-radius: 3px !important;
  }
  
  .game-content {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    padding: 24px;
    height: 100%;
  }
}

/* ================= MODAL DE INSPEÇÃO DE ITENS (DETALHES COMPLETOS) ================= */
#item-inspect-modal {
  z-index: 1500;
}

.inspect-modal-content {
  position: relative !important;
  max-width: 460px;
  width: 100%;
  margin: auto;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden !important;
}

.inspect-modal-promo-ribbon {
  position: absolute;
  top: 8px;
  right: -30px;
  width: 105px;
  text-align: center;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 900;
  padding: 3px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 10;
}

.inspect-modal-special-ribbon {
  position: absolute;
  top: 8px;
  right: -30px;
  width: 105px;
  text-align: center;
  background: linear-gradient(135deg, #f39c12 0%, #d35400 100%);
  color: #ffffff;
  font-size: 0.56rem;
  font-weight: 900;
  padding: 3px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 9;
}

.inspect-modal-special-ribbon.under-promo {
  top: 28px;
  right: -38px;
  width: 130px;
  background: linear-gradient(135deg, #f1c40f 0%, #e67e22 100%);
  color: #1a0f05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  font-size: 0.48rem;
  padding: 2px 0;
  z-index: 8;
}

.inspect-modal-boss-ribbon {
  position: absolute;
  top: 8px;
  right: -30px;
  width: 105px;
  text-align: center;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 900;
  padding: 3px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 10;
}

.inspect-modal-elite-ribbon {
  position: absolute;
  top: 8px;
  right: -30px;
  width: 105px;
  text-align: center;
  background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 900;
  padding: 3px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 10;
}

.inspect-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-light);
}

.inspect-icon-large {
  font-size: 2.8rem;
  background: rgba(0, 0, 0, 0.06);
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-light);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inspect-title-group h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.inspect-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.tag-badge {
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.tag-badge.slot {
  background-color: rgba(229, 142, 38, 0.2);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.requirements-box {
  background-color: rgba(192, 57, 43, 0.08);
  border: 1.5px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.requirements-box.met {
  background-color: rgba(39, 174, 96, 0.08);
  border-color: var(--color-success);
  color: var(--color-success);
}

.stats-inspect-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 8px;
  margin: 10px 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 440px) {
  .stats-inspect-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 6px;
  }
}

.stat-chip {
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.theme-cozy.dark-mode .stat-chip {
  background-color: rgba(255, 255, 255, 0.04);
}

.stat-chip-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.stat-chip-val {
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.stat-chip-val {
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--color-success);
}

.theme-cozy.dark-mode .stat-chip-val {
  color: #2ecc71;
}

.stat-chip-val.text-speed {
  color: #2980b9;
}

.theme-cozy.dark-mode .stat-chip-val.text-speed {
  color: #3498db;
}

.stat-chip-val.text-gold {
  color: #d35400;
}

.theme-cozy.dark-mode .stat-chip-val.text-gold {
  color: #f1c40f;
}

#modal-sell-value,
#bank-modal-sell-val,
.modal-price-val-green {
  color: #2ecc71 !important;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* COMPARAÇÃO DE ATRIBUTOS COM EQUIPADO */
.stat-diff {
  font-size: 0.74rem;
  margin-left: 4px;
  font-weight: 700;
}

.stat-diff.positive {
  color: #2ecc71 !important;
}

.stat-diff.negative {
  color: #e74c3c !important;
}

.stat-diff.neutral {
  color: var(--text-secondary) !important;
  font-size: 0.72rem;
}

.req-check-icon {
  color: #2ecc71;
  font-weight: 900;
  margin-left: 5px;
}

.req-need-badge {
  color: #e74c3c;
  font-size: 0.8rem;
  margin-left: 5px;
  font-weight: normal;
}

.inspect-desc {
  background-color: rgba(0, 0, 0, 0.02);
  border-left: 3px solid var(--color-primary);
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 10px 0;
}

.inspect-footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: bold;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

/* ================= MODAL DE INSTALAÇÃO PWA ================= */
.pwa-benefits-list {
  list-style-type: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
  font-size: 0.9rem;
  background-color: rgba(0, 0, 0, 0.04);
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-light);
}

.pwa-benefits-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pwa-instructions-box {
  background: rgba(229, 142, 38, 0.12);
  border: 1.5px dashed var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 12px 0;
  text-align: center;
  line-height: 1.4;
}

.theme-cozy.dark-mode .pwa-instructions-box {
  background: rgba(229, 142, 38, 0.18);
  border-color: var(--color-accent);
}

/* ================= BARRA FLUTUANTE DE COMBATE (MINIBAR EM TEMPO REAL) ================= */
.combat-minibar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  background-color: var(--bg-header);
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.65);
  padding: 8px 12px max(8px, env(safe-area-inset-bottom, 8px)) 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 100;
  color: var(--text-light);
  backdrop-filter: blur(8px);
  animation: slideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
}

.minibar-fighter-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 900px;
  box-sizing: border-box;
  min-width: 0;
}

.minibar-fighter {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  box-sizing: border-box;
  overflow: visible;
}

.minibar-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  min-height: 18px;
  gap: 6px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.minibar-name-row span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.minibar-avatar-img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: var(--radius-xs, 3px);
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  flex-shrink: 0;
  pointer-events: none;
}

.minibar-name-row span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  font-weight: 900;
  font-size: 0.78rem;
  flex-shrink: 0;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
}

#minibar-player-hp-txt,
#minibar-monster-hp-txt,
.minibar-hp-label,
.minibar-hp-num {
  color: #c0392b;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.dark-mode #minibar-player-hp-txt,
body.dark-mode #minibar-monster-hp-txt,
body.dark-mode .minibar-hp-label,
body.dark-mode .minibar-hp-num {
  color: #ff6b6b;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.minibar-hp-icon-img,
.minibar-hp-icon-img.skill-sprite-img {
  width: 13px !important;
  height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: -1.5px !important;
  margin-right: 3px !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 1px 2px rgba(231, 76, 60, 0.4)) !important;
}

/* Pop-up Flutuante de Dano / Miss na Minibar Fixa */
.minibar-floating-splat {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 0.95rem;
  font-weight: 900;
  font-family: var(--font-title), 'Inter', sans-serif;
  color: #ffffff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 150;
  white-space: nowrap;
  animation: minibarFloatSplat 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  user-select: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.minibar-floating-splat.splat-warning {
  background-image: none !important;
  background: rgba(192, 57, 43, 0.95) !important;
  border: 1px solid #f39c12 !important;
  border-radius: 4px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  width: auto !important;
  min-width: auto !important;
  height: auto !important;
  min-height: auto !important;
  top: -22px !important;
}

@keyframes minibarFloatSplat {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.7);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.15);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -36px) scale(0.85);
  }
}

.minibar-bar {
  height: 9px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.minibar-atk-bar {
  height: 3.5px;
  margin-top: 3px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.45);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.fighter-atk-bar {
  height: 4px;
  margin-top: 4px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.45);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.fill-monster-atk {
  height: 100%;
  background: linear-gradient(90deg, #e74c3c, #e67e22);
  box-shadow: 0 0 6px rgba(231, 76, 60, 0.75);
  transition: width 0.08s linear;
}

.fill-player-atk {
  height: 100%;
  background: linear-gradient(90deg, #ffd32a, #f39c12);
  box-shadow: 0 0 6px rgba(255, 211, 42, 0.75);
  transition: width 0.08s linear;
}

.minibar-vs {
  font-size: 1rem;
  font-weight: bold;
  opacity: 0.85;
  flex-shrink: 0;
}

.minibar-actions-group {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 900px;
  box-sizing: border-box;
  margin: 0 auto;
  flex-wrap: nowrap;
}

.minibar-actions-group > .btn,
.minibar-actions-group > .minibar-eat-group {
  flex: 1 1 0;
  min-width: 0;
  max-width: 140px;
}

.minibar-eat-group {
  display: flex;
  align-items: stretch;
  position: relative;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  min-width: 0;
}

.minibar-food-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(180deg, #3d2817 0%, #20140a 100%);
  border: 1.5px solid #d4973b;
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 2px 5px;
  cursor: pointer;
  flex-shrink: 0;
  width: 32px;
  transition: all 0.15s ease;
  user-select: none;
}

.minibar-eat-group #minibar-eat-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 6px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.minibar-actions-group .btn {
  padding: 5px 8px;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .combat-minibar {
    left: 210px;
    width: calc(100% - 210px);
    max-width: calc(100vw - 210px);
    border-left: 2px solid var(--border-color);
    padding: 10px 24px;
    gap: 8px;
  }

  .game-content {
    padding: 24px 24px 105px 24px;
  }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ================= MODAL DE TROCA DE AVATAR ================= */
.avatar-modal-box {
  max-width: 520px;
  width: 94%;
}

.avatar-change-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding: 6px 4px;
}

@media (max-width: 520px) {
  .avatar-change-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 380px) {
  .avatar-change-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.avatar-change-option {
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  color: var(--text-color);
}

.avatar-change-option:hover {
  border-color: var(--color-primary);
  background-color: rgba(229, 142, 38, 0.15);
  transform: translateY(-2px);
}

.avatar-change-option.active {
  border-color: var(--color-primary);
  background-color: rgba(229, 142, 38, 0.25);
  box-shadow: 0 0 10px rgba(229, 142, 38, 0.5);
}

.avatar-option-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  pointer-events: none;
}

.avatar-option-name {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--text-secondary);
}

.avatar-change-option.active .avatar-option-name {
  color: var(--color-primary);
}

.avatar-option-fallback {
  font-size: 2rem;
  display: block;
}

.avatar-card-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0 auto 6px;
}

/* ================= MODAL DE SAVE & LOAD DE ARQUIVO ================= */
.save-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: center;
}

@media (max-width: 540px) {
  .save-cards-grid {
    grid-template-columns: 1fr;
  }
}

.save-action-card {
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 2px 5px var(--shadow-color);
  transition: all 0.2s;
}

.save-action-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.save-card-icon {
  font-size: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
  min-height: 48px;
}

.save-card-sprite-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}

.save-action-card h4 {
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0;
}

.save-action-card p {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.35;
}

/* ================= SISTEMA DE CONQUISTAS (ACHIEVEMENTS) ================= */
.achievements-summary-badge {
  background-color: rgba(229, 142, 38, 0.15);
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.achievements-tabs-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  box-shadow: 0 2px 6px var(--shadow-color);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
}

body.dark-mode .achievements-tabs-card {
  background: rgba(30, 18, 10, 0.85);
  border-color: rgba(229, 142, 38, 0.3);
}

.achievements-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.ach-tab-btn {
  background-color: var(--bg-app);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 4px var(--shadow-color);
}

.ach-tab-btn:hover {
  border-color: var(--color-primary);
  background-color: var(--bg-card-hover);
  transform: translateY(-1px);
}

.ach-tab-btn.active {
  background: linear-gradient(180deg, #e58e26 0%, #d35400 100%) !important;
  color: #ffffff !important;
  border-color: #f39c12 !important;
  box-shadow: 0 2px 8px rgba(229, 142, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .achievements-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
  }
}

.achievement-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(246, 239, 226, 0.96) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 6px var(--shadow-color);
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow: hidden;
}

body.dark-mode .achievement-card {
  background: linear-gradient(180deg, rgba(34, 22, 13, 0.98) 0%, rgba(18, 12, 7, 0.98) 100%);
  border-color: rgba(229, 142, 38, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.achievement-card.unlocked {
  background: linear-gradient(180deg, rgba(39, 174, 96, 0.12) 0%, rgba(46, 204, 113, 0.06) 100%);
  border: 1.5px solid #27ae60;
  box-shadow: 0 2px 6px var(--shadow-color);
}

body.dark-mode .achievement-card.unlocked {
  background: linear-gradient(180deg, rgba(18, 38, 22, 0.96) 0%, rgba(12, 26, 15, 0.98) 100%);
  border-color: #2ecc71;
}

.achievement-card.locked {
  opacity: 0.92;
}

.achievement-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 6px 14px rgba(229, 142, 38, 0.25);
}

.achievement-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  flex-wrap: wrap;
}

.achievement-tier-chip {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.achievement-tier-chip.tier-bronze {
  background: rgba(205, 127, 50, 0.18);
  color: #cd7f32;
  border: 1px solid rgba(205, 127, 50, 0.4);
}

.achievement-tier-chip.tier-prata {
  background: rgba(189, 195, 199, 0.2);
  color: #7f8c8d;
  border: 1px solid rgba(189, 195, 199, 0.5);
}

body.dark-mode .achievement-tier-chip.tier-prata {
  color: #bdc3c7;
}

.achievement-tier-chip.tier-ouro {
  background: rgba(241, 196, 15, 0.2);
  color: #d4ac0d;
  border: 1px solid rgba(241, 196, 15, 0.5);
}

.achievement-tier-chip.tier-lendaria {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.2) 0%, rgba(231, 76, 60, 0.2) 100%);
  color: #9b59b6;
  border: 1px solid rgba(155, 89, 182, 0.5);
}

.achievement-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  width: 100%;
}

.achievement-icon-box {
  font-size: 1.6rem;
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: radial-gradient(circle, rgba(241, 196, 15, 0.22) 0%, rgba(0, 0, 0, 0.14) 100%);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  margin: 2px auto 4px auto;
  transition: transform 0.2s ease;
}

.achievement-card:hover .achievement-icon-box {
  transform: scale(1.08);
  border-color: #f39c12;
}

body.dark-mode .achievement-icon-box {
  background: radial-gradient(circle, rgba(241, 196, 15, 0.2) 0%, rgba(12, 6, 3, 0.85) 100%);
  border-color: rgba(229, 142, 38, 0.3);
}

.achievement-emblem-sprite {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.achievement-emoji-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.achievement-title {
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 800;
  margin: 1px 0 2px 0;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
  max-width: 100%;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.achievement-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.25;
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.achievement-progress-box {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  width: 100%;
  box-sizing: border-box;
}

body.dark-mode .achievement-progress-box {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(229, 142, 38, 0.2);
}

.achievement-progress-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.16);
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}

body.dark-mode .achievement-progress-track {
  background: rgba(0, 0, 0, 0.45);
}

.achievement-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #e67e22, #f1c40f);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.achievement-progress-fill.unlocked-fill {
  background: linear-gradient(90deg, #27ae60, #2ecc71);
}

.achievement-progress-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-top: 3px;
}

.achievement-progress-labels strong {
  color: var(--text-primary);
}

.achievement-status-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.achievement-status-badge.ach-badge-unlocked {
  background: rgba(39, 174, 96, 0.18);
  color: #27ae60;
  border: 1px solid rgba(39, 174, 96, 0.4);
}

.achievement-status-badge.ach-badge-locked {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

.achievement-card-bottom {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--border-light);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.achievement-rewards-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.achievement-rewards-row .reward-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
}

.achievement-rewards-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
  width: 100%;
}

.reward-gold-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(241, 196, 15, 0.15);
  border: 1px solid rgba(241, 196, 15, 0.4);
  color: #b78103;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
}

body.dark-mode .reward-gold-chip {
  color: #ffd32a;
}

.reward-xp-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.4);
  color: #27ae60;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
}

body.dark-mode .reward-xp-chip {
  color: #2ecc71;
}

/* SOBRE O SCAPE IDLE & CRÉDITOS */
.about-scape-card {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.about-logo-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
}

.about-logo-img {
  max-width: 220px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.about-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
}

.settings-dev-credit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--text-primary);
  background-color: rgba(0, 0, 0, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  margin-top: 4px;
}

.theme-cozy.dark-mode .settings-dev-credit {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-light);
}

.dev-heart {
  display: inline-block;
  animation: heartPulse 1.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes heartPulse {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

.dev-link {
  color: #27ae60;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.dev-link:hover {
  color: #2ecc71;
  border-bottom-color: #2ecc71;
  text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
  transform: translateY(-1px);
}

.about-version-tag {
  margin-top: 2px;
}

.version-highlight {
  font-weight: 900;
  color: #d4ac0d;
}

body.dark-mode .version-highlight {
  color: #ffd32a;
  text-shadow: 0 0 6px rgba(241, 196, 15, 0.5);
}

.update-check-wrapper {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.update-pwa-btn {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.update-pwa-btn:active {
  transform: translateY(1px);
}

.pwa-update-progress-wrap {
  width: 100%;
  max-width: 260px;
  margin: 8px auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.pwa-update-progress-wrap.hidden {
  display: none !important;
}

.pwa-update-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  position: relative;
}

body.dark-mode .pwa-update-progress-track {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(46, 204, 113, 0.3);
}

.pwa-update-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #27ae60 0%, #2ecc71 50%, #a8e6cf 100%);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
  transition: width 0.15s ease-out;
  position: relative;
  overflow: hidden;
}

.pwa-update-progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: updateBarShimmer 1s infinite linear;
}

@keyframes updateBarShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.pwa-update-progress-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2ecc71;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.3px;
}

.heal-badge-green {
  color: #2ecc71;
  font-weight: 800;
  display: inline-block;
}

.btn .heal-badge-green {
  background: rgba(0, 0, 0, 0.35);
  color: #4cd137;
  padding: 1px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-left: 4px;
  font-size: 0.82rem;
}

.badge-status-green {
  color: #2ecc71 !important;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.badge-status-red {
  color: #e74c3c !important;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* ================= SUPORTE A SPRITES GRÁFICOS (PIXEL ART) ================= */

.sprite-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  object-fit: contain;
  display: inline-block;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.inventory-slot .sprite-icon,
.inventory-slot img,
.bank-slot .sprite-icon,
.bank-slot img,
.equipment-slot .sprite-icon,
.equipment-slot img {
  width: 44px !important;
  height: 44px !important;
  max-width: 88% !important;
  max-height: 88% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.action-media .sprite-icon,
.action-media img {
  width: 44px !important;
  height: 44px !important;
  max-width: 90% !important;
  max-height: 90% !important;
}

.shop-item-icon-box .sprite-icon,
.shop-item-icon-box img,
.shop-item-pedestal .sprite-icon,
.shop-item-pedestal img,
.shop-pedestal-sprite {
  width: 44px !important;
  height: 44px !important;
  max-width: 88% !important;
  max-height: 88% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.drop-item-icon-box .sprite-icon,
.drop-item-icon-box img {
  width: 32px !important;
  height: 32px !important;
  max-width: 90% !important;
  max-height: 90% !important;
}

.avatar-top-icon .sprite-icon,
.avatar-sprite-img.avatar-top-icon,
.avatar-img .avatar-sprite-img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.avatar-arena-icon .sprite-icon,
.avatar-sprite-img.avatar-arena-icon,
#combat-player-avatar .avatar-sprite-img,
#combat-player-avatar img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.monster-arena-icon .sprite-icon {
  width: 68px !important;
  height: 68px !important;
}

.monster-avatar-pedestal .sprite-icon,
.monster-avatar-pedestal img {
  width: 52px !important;
  height: 52px !important;
  max-width: 92% !important;
  max-height: 92% !important;
}

.inspect-header .sprite-icon,
.inspect-icon-large .sprite-icon,
.inspect-icon-large img {
  width: 52px !important;
  height: 52px !important;
}

/* Sprites de Habilidades e Combate */
.skill-sprite-img {
  width: 32px;
  height: 32px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.skill-icon .skill-sprite-img {
  width: 32px;
  height: 32px;
}

.detail-title-icon.skill-sprite-img {
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

.combat-modal-sprite.skill-sprite-img {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  margin: 0 auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}

.banner-skill-icon.skill-sprite-img {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}

.minibar-hp-icon-img.skill-sprite-img {
  width: 13px !important;
  height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  display: inline-block !important;
  vertical-align: -1.5px !important;
  margin-right: 3px !important;
  flex-shrink: 0 !important;
}

/* Ícones de Estilos de Combate e Sub-estilos Melee */
.combat-style-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin: 0 !important;
  flex-shrink: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.combat-focus-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  margin: 0 auto 4px auto;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.combat-stat-mini-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 4px;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* Sprites de Navegação e Menu Principal */
.nav-sprite-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  transition: transform 0.15s ease;
}

.nav-item:hover .nav-sprite-img {
  transform: translateY(-1px) scale(1.06);
}

.nav-item.active .nav-sprite-img {
  transform: scale(1.1);
  filter: drop-shadow(0 1px 4px rgba(229, 142, 38, 0.6));
}

/* Sprite do Botão de Som */
.header-btn-icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: -3px;
  display: inline-block;
  margin-right: 4px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Sprite de Ícones em Botões de Ação de Modais e Navegação */
.btn-action-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -2px;
  display: inline-block;
  margin: 0 3px;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* Sprite de Vida na Barra de HP */
.bar-label-icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: -3px;
  display: inline-block;
  margin-right: 4px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Sprite VS na Barra de Combate Flutuante */
.minibar-vs-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Sprites de Ouro / Moeda Oficial */
.gold-sprite-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: -4px;
  display: inline-block;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.inline-gold-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -2px;
  display: inline-block;
  margin-right: 2px;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* Ícones de Atributos dentro dos Modais (Stat Chips) */
.chip-sprite-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -2px;
  display: inline-block;
  pointer-events: none;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.inline-speed-icon,
.inline-xp-icon,
.inline-time-icon,
.inline-misc-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -2px;
  display: inline-block;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.pwa-modal-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.pwa-modal-logo-img {
  max-width: 180px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

/* ================= OVERRIDE DEFINITIVO: CHIPS DE STATS NO MODAL DE EQUIPAMENTOS ================= */
.equip-picker-stats {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  align-items: center !important;
  width: 100% !important;
}

.equip-picker-stats .stat-chip {
  width: auto !important;
  min-width: 0 !important;
  max-width: fit-content !important;
  flex: 0 1 auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 2px 7px !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid var(--border-light) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

body.dark-mode .equip-picker-stats .stat-chip {
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(229, 142, 38, 0.22) !important;
}

.equip-picker-stats .stat-chip .stat-chip-lbl {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex: 0 0 auto !important;
  font-size: 0.70rem !important;
}

.equip-picker-stats .stat-chip .stat-chip-val {
  font-size: 0.72rem !important;
  flex: 0 0 auto !important;
}