/* Variáveis e resets básicos */
/* === SISTEMA DE NOTIFICAÇÕES (TOASTS) === */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
    scale: 0.9;
  }
  to {
    transform: translateY(0);
    opacity: 1;
    scale: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(0);
    opacity: 1;
    scale: 1;
  }
  to {
    transform: translateY(-50px);
    opacity: 0;
    scale: 0.95;
  }
}

.notification-close:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: scale(1.1);
}

/* Responsividade para mobile */
@media (max-width: 768px) {
  #notifications-container {
    top: 10px !important;
    max-width: 95vw !important;
  }
  
  .notification {
    font-size: 14px !important;
    padding: 12px 16px !important;
    min-width: 240px !important;
  }
}

/* === FIM DO SISTEMA DE NOTIFICAÇÕES === */

/* Bloqueio visual para conta banida */
#banned-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#banned-overlay.active {
  display: flex;
}

#banned-overlay .banned-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

#banned-overlay .banned-overlay-card {
  position: relative;
  width: min(560px, 100%);
  border: 2px solid #c62828;
  border-radius: 16px;
  background: linear-gradient(180deg, #2c1111 0%, #120909 100%);
  color: #fff2f2;
  text-align: center;
  padding: 28px 22px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

#banned-overlay .banned-overlay-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #ff8a80;
}

#banned-overlay .banned-overlay-reason {
  margin: 16px 0 0;
  font-size: clamp(16px, 2.6vw, 22px);
  line-height: 1.5;
  color: #ffe0e0;
  white-space: pre-wrap;
  word-break: break-word;
}

body.is-user-banned .stage {
  pointer-events: none;
}

:root {
  --icon-top-size: clamp(72px, 7vw, 280px); /*tamanho dos icones*/
  --icon-bottom-size: clamp(64px, 12vw, 110px); /*tamanho dos icones*/
  --edge-gap: max(12px, env(safe-area-inset-left));  /*bordas da tela*/
  --edge-gap-right: max(12px, env(safe-area-inset-right)); /*bordas da tela*/
  --edge-gap-top: max(12px, env(safe-area-inset-top)); /*bordas da tela*/
  --edge-gap-bottom: max(16px, env(safe-area-inset-bottom)); /*bordas da tela*/

  /* EDITÁVEL: tamanhos individuais dos ícones do topo (em px no canvas 1080x1920). 
     Altere cada variável abaixo para ajustar SOMENTE o ícone indicado. */
  --size-carteira: 400px; /* ícone carteira (topo/esquerda) */
  --size-vip: 170px;      /* ícone VIP (abaixo da carteira) */
  --size-ton: 385px;      /* ícone TON (topo/direita) */
  --top-balance-font-size: 30px;
  --top-balance-font-weight: 800;
  --top-balance-color: #3f2b14;
  --top-balance-shadow: 0 1px 0 rgba(255,255,255,0.35);
  --withdraw-hud-left: 150px;
  --withdraw-hud-top: 72px;
  --withdraw-hud-width: 190px;
  --withdraw-hud-height: 56px;
  --deposit-hud-left: 22px;
  --deposit-hud-top: 72px;
  --deposit-hud-width: 190px;
  --deposit-hud-height: 56px;

  /* EDITÁVEL: posições dos ícones do topo (coordenadas absolutas no canvas 1080x1920). 
     Use px para precisão. Ajuste top/left/right separadamente por ícone. */
  --carteira-top: 24px;   /* distância do topo da tela para a CARTEIRA */
  --carteira-left: 24px;  /* distância da esquerda da tela para a CARTEIRA */
  --vip-top: 330px;       /* distância do topo da tela para o VIP */
  --vip-left: 50px;       /* distância da esquerda da tela para o VIP */
  --ton-top: 24px;        /* distância do topo da tela para o TON */
  --ton-right: 24px;      /* distância da direita da tela para o TON */

  /* EDITÁVEL: tamanhos e posições dos HABITATS (coordenadas absolutas no canvas). 
     Ajuste cada habitat separadamente. */
  --hab1-width: 290px; --hab1-left: 10%; --hab1-bottom: 500px;  /* habitat 1 */
  --hab2-width: 300px; --hab2-left: 62%; --hab2-bottom: 600px;  /* habitat 2 */
  --hab3-width: 250px; --hab3-left: 22%; --hab3-bottom: 850px;  /* habitat 3 */
  --hab4-width: 320px; --hab4-left: 32%; --hab4-bottom: 1020px;  /* habitat 4 */
  --hab5-width: 260px; --hab5-right: 15%; --hab5-top: 490px;    /* habitat 5 */

  /* EDITÁVEL: DOCK inferior (contêiner dos 4 ícones de baixo) */
  --dock-left: 40px;   /* distância da esquerda da tela para o dock */
  --dock-right: 40px;  /* distância da direita da tela para o dock */
  --dock-bottom: 40px; /* distância do fundo da tela para o dock */

  /* EDITÁVEL: posições individuais dos ícones inferiores (coordenadas absolutas dentro do dock). 
     Use % para distribuir e px para ajustes finos. */
  --sell-left: 2%;
  --friends-left: 28%;
  --tournament-left: 53%;
  --menu-left: 77%;

  /* EDITÁVEL: tamanhos dos ícones inferiores (cada um independente) */
  --size-sell: 200px;       /* ícone SELL (inferior/esquerda) */
  --size-friends: 200px;    /* ícone FRIENDS (à direita de SELL) */
  --size-tournament: 200px; /* ícone TOURNAMENT (à esquerda de MENU) */
  --size-menu: 220px;       /* ícone MENU (inferior/direita) */

  

}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #000;
}

/* Stage responsivo com escala fixa (1080x1920) */
.stage-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
}

.stage {
  position: relative;
  width: 1080px;
  height: 1920px;
  overflow: hidden;
  background: url('assets/ui/bg.png') center center / cover no-repeat;
  transform-origin: top left;
}

a {
  text-decoration: none;
  outline: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
}

/* Top left (carteira & vip) */
.top-left {
  /* EDITÁVEL: container visual apenas. Ícones do topo estão com posição ABSOLUTA
     usando variáveis individuais (veja regras #btn-... abaixo). */
  position: static;
}
/* EDITÁVEL: posição e tamanho do ícone CARTEIRA (apenas este ícone) */
#btn-carteira {
  position: absolute;
  top: var(--carteira-top);
  left: var(--carteira-left);
  z-index: 20;
  display: block;
}
#btn-carteira img {
  width: var(--size-carteira); /* ajuste aqui apenas a carteira */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

/* EDITÁVEL: posição e tamanho do ícone VIP (apenas este ícone) */
#btn-vip {
  position: absolute;
  top: var(--vip-top);
  left: var(--vip-left);
  z-index: 20;
}
#btn-vip img {
  width: var(--size-vip); /* ajuste aqui apenas o VIP */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

/* Top right (ton) */
.top-right { position: static; }

/* EDITÁVEL: posição e tamanho do ícone TON (apenas este ícone) */
#btn-ton {
  position: absolute;
  top: var(--ton-top);
  right: var(--ton-right);
  z-index: 20;
  display: block;
}
#btn-ton img {
  width: var(--size-ton); /* ajuste aqui apenas o TON */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

#btn-carteira .top-balance-hud,
#btn-ton .top-balance-hud {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--top-balance-font-size);
  font-weight: var(--top-balance-font-weight);
  color: var(--top-balance-color);
  text-shadow: var(--top-balance-shadow);
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#btn-carteira .top-balance-hud {
  left: var(--withdraw-hud-left);
  top: var(--withdraw-hud-top);
  width: var(--withdraw-hud-width);
  height: var(--withdraw-hud-height);
}

#btn-ton .top-balance-hud {
  left: var(--deposit-hud-left);
  top: var(--deposit-hud-top);
  width: var(--deposit-hud-width);
  height: var(--deposit-hud-height);
}

/* Bottom bar (sell, friends, tournament, menu) - coordenadas absolutas no stage */
.bottom-bar {
  position: absolute;
  left: var(--dock-left);   /* EDITÁVEL: ajuste a posição X do dock */
  right: var(--dock-right); /* EDITÁVEL: ajuste a posição X do dock (lado direito) */
  bottom: var(--dock-bottom); /* EDITÁVEL: ajuste a posição Y do dock */
  height: 220px; /* altura lógica do dock para acomodar ícones grandes */
  z-index: 25; /*z-index do dock*/
}

/* EDITÁVEL: posições e tamanhos da barra inferior (cada ícone é independente) */
#btn-sell {
  position: absolute;
  left: var(--sell-left);
  bottom: 0;
}
#btn-friends {
  position: absolute;
  left: var(--friends-left);
  bottom: 0;
}
#btn-tournament {
  position: absolute;
  left: var(--tournament-left);
  bottom: 0;
}
#btn-menu {
  position: absolute;
  left: var(--menu-left);
  bottom: 0;
}

#btn-sell img { width: var(--size-sell); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); }
#btn-friends img { width: var(--size-friends); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); }
#btn-tournament img { width: var(--size-tournament); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); }
#btn-menu img { width: var(--size-menu); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); }

/* Habitats (cliques) */
.habitat {
  position: absolute;
  z-index: 10;
}
.habitat img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

/* Posições e tamanhos conforme solicitado (convertidos para canvas 1080x1920) */
/* Mantemos percentuais e pixels, pois o stage escala proporcionalmente */
/* EDITÁVEL: HABITAT 1 */
.habitat-1 {
  width: var(--hab1-width);
  left: var(--hab1-left);
  bottom: var(--hab1-bottom);
}

/* EDITÁVEL: HABITAT 2 */
.habitat-2 {
  width: var(--hab2-width);
  left: var(--hab2-left);
  bottom: var(--hab2-bottom);
}

/* EDITÁVEL: HABITAT 3 */
.habitat-3 {
  width: var(--hab3-width);
  left: var(--hab3-left);
  bottom: var(--hab3-bottom);
}

/* EDITÁVEL: HABITAT 4 */
.habitat-4 {
  width: var(--hab4-width);
  left: var(--hab4-left);
  bottom: var(--hab4-bottom);
}

/* EDITÁVEL: HABITAT 5 */
.habitat-5 {
  width: var(--hab5-width);
  right: var(--hab5-right);
  top: var(--hab5-top);
}

/* Responsividade mínima: diminuir habitats em telas muito baixas */
/* Não precisamos mais de media queries para posicionamento, o stage escala */

/* ===========================
   Modal Habitat (UI do popup)
   =========================== */

:root {
  /* Tema do modal (ajuste conforme seu tema) */
  --modal-z: 120;                 /* acima da bottom-bar (~25) */
  --modal-bg: #111418;            /* fundo do card */
  --modal-fg: #ffffff;            /* texto principal */
  --modal-accent: #d4af37;        /* acento verde suave */
  --modal-gold: #d4af37;          /* contorno/acento dourado */
  --modal-muted: #9aa3a0;         /* textos secundários */

  /* Tamanho/posicionamento dentro do canvas 1080x1920 (px) */
  --modal-width: 920px;
  --modal-top: 30px;
  /* EDITÁVEL: redimensiona o CARD inteiro de forma independente em X e Y */
  --modal-scale-x: 1;             /* 1 = 100% largura; ex.: 0.95 reduz, 1.1 aumenta */
  --modal-scale-y: 1;             /* padrão global = 100% altura */

  /* Grade (imagens) */
  /* EDITÁVEL: reduzir este valor diminui a área total da grade (alvo ~65% do card). */
  --slot-img-size: 280px;         /* tamanho quadrado das imagens por slot */
  --slot-gap-x: 12px;             /* gap entre imagens (ajustado) */
  --meta-gap-x: 12px;             /* distância entre blocos de texto (linha meta) */

  /* EDITÁVEL: fontes do conteúdo do modal (aumente para melhorar legibilidade) */
  --font-slot-name: 28px;         /* nome do mascote abaixo de cada imagem */
  --font-slot-prod: 24px;         /* produção abaixo do nome (0.000 TON/D) */
  --font-info-topline: 28px;      /* linha "Slots / Produção total" */
  --font-hint: 28px;              /* texto de dica */
  --font-mint: 34px;              /* "Custo do Mint" */
  --font-subhint: 26px;           /* texto pequeno abaixo do botão mintar */
  --btn-font-size: 28px;          /* fonte dos botões COLETAR / MINTAR */

  /* EDITÁVEL: dimensões da barra de progresso (px do canvas 1080x1920) */
  --progress-width: 500px;
  --progress-height: 74px;        /* um pouco maior para caber % maior */

  /* === RENT (aluguel) === */
  --rent-title-offset-y: 420px;   /* + desce o título; - sobe */
  --rent-content-offset-y: -60px;  /* a partir do meio da imagem: + desce, - sobe */

  --rent-font-info: 36px;        /* “esse habitat ainda nao foi alugado” */
  --rent-font-price: 32px;       /* “valor: X TON” */
  --rent-btn-minw: 280px;
  --rent-btn-minh: 80px;

  /* EDITÁVEL: posicionamentos finos da ÁREA INFORMATIVA (textos e botões) */
  --info-area-mt: 0px;           /* ↓ distância da grade até a área informativa */
  --info-area-mb: 5px;            /* margem inferior */
  --info-topline-mb: 5px;        /* ↓ espaço abaixo da linha “Slots / Produção total” */
  --info-topline-justify: space-between;
  --progress-row-gap: 18px;       /* ↓ distância entre a barra e o bloco da direita */
  --progress-row-mb: 0px;
  --progress-row-mt: 0px;        /* ↓ espaço abaixo da barra de progresso */
  --hint-mb: 0px;                /* ↓ espaço abaixo do texto de dica */
  --mint-row-mt: 0px;             /* ↓ espaço acima da linha INVENTÁRIO/MINTAR */
  --mint-row-mb: 20px;              /* ↓ espaço abaixo dessa linha */
  --btn-collect-shift-x: 0px;
  --btn-collect-shift-y:  20px;
  --btn-mint-shift-x: 0px;
  --btn-mint-shift-y: 0px;
  --btn-mint-row-mt: 5px;
  --info-area-shift-y: 0px;

  
}

/* Escopo: somente o modal Habitat tem redução vertical de 7% */
#modal-habitat { --modal-scale-y: 1; }

/* Garantir que modais fechados não apareçam na tela principal */
#modal-instant-sell:not(.open),
#modal-deposit:not(.open),
#modal-wallet:not(.open),
#modal-friends:not(.open),
#modal-tournament:not(.open),
#modal-menu:not(.open),
#modal-vip:not(.open) {            
  display: none !important;
}


/* Base mínima do Menu */
#modal-menu { position: absolute; inset: 0; z-index: var(--modal-z); display: none; }
#modal-menu.open { display: block; }

/* Compartilhar o MESMO card com Habitat/VIP/Friends/Tournament/Menu */
#modal-habitat .modal-overlay,
#modal-vip .modal-overlay,
#modal-friends .modal-overlay,
#modal-tournament .modal-overlay,
#modal-menu .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 200ms linear;
}
#modal-habitat.open .modal-overlay,
#modal-vip.open .modal-overlay,
#modal-friends.open .modal-overlay,
#modal-tournament.open .modal-overlay,
#modal-menu.open .modal-overlay { opacity: 1; }

#modal-habitat .modal-card,
#modal-vip .modal-card,
#modal-friends .modal-card,
#modal-tournament .modal-card,
#modal-menu .modal-card {
  position: absolute;
  top: var(--modal-top);
  left: 50%;
  width: var(--modal-width);
  color: var(--modal-fg);
  background: var(--modal-bg);
  border: 10px solid var(--modal-gold);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateX(-50%) translateY(10px) scaleX(calc(var(--modal-scale-x) * 0.96)) scaleY(calc(var(--modal-scale-y) * 0.96));
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  outline: none;
  padding: 22px 26px 36px;
}
#modal-habitat.open .modal-card,
#modal-vip.open .modal-card,
#modal-friends.open .modal-card,
#modal-tournament.open .modal-card,
#modal-menu.open .modal-card {
  transform: translateX(-50%) translateY(0) scaleX(var(--modal-scale-x)) scaleY(var(--modal-scale-y));
  opacity: 1;
}

#modal-habitat .modal-card-inner,
#modal-vip .modal-card-inner,
#modal-friends .modal-card-inner,
#modal-tournament .modal-card-inner,
#modal-menu .modal-card-inner {
  transform: scale(calc(1 / var(--modal-scale-x)), calc(1 / var(--modal-scale-y)));
  transform-origin: top left;
}

#modal-habitat .modal-close,
#modal-vip .modal-close,
#modal-friends .modal-close,

#modal-tournament .modal-close,
#modal-menu .modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 70px; height: 70px;
  border: 2px solid #b22222; border-radius: 12px;
  background: #e53935; color: #000;
  font-size: 68px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}

#modal-habitat .modal-title,
#modal-vip .modal-title,
#modal-friends .modal-title,
#modal-tournament .modal-title,
#modal-menu .modal-title {
  margin: 0 0 12px 0;
  text-align: center; letter-spacing: 2px; font-weight: 700;
  font-size: 58px; color: var(--modal-gold);
}

/* Ajustes do conteúdo do Menu */
#modal-menu .modal-body { display: grid; gap: 18px; }
#modal-menu .menu-subtitle { color: var(--modal-fg); font-size: 28px; margin: 0 0 4px; }
#modal-menu .menu-section { border-top: 1px solid rgba(212,175,55,0.25); padding-top: 10px; }
#modal-menu .menu-sound-row { display: flex; align-items: center; gap: 12px; }
#modal-menu .menu-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; color: var(--modal-fg); }
#modal-menu .menu-help { margin: 6px 0 10px; color: var(--modal-fg); font-size: 24px; }


/* Base mínima do Tournament */
#modal-tournament { position: absolute; inset: 0; z-index: var(--modal-z); display: none; }
#modal-tournament.open { display: block; }

/* Compartilhar o MESMO card (Habitat/VIP/Friends/Tournament) */
#modal-habitat .modal-overlay,
#modal-vip .modal-overlay,
#modal-friends .modal-overlay,
#modal-tournament .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 200ms linear;
}
#modal-habitat.open .modal-overlay,
#modal-vip.open .modal-overlay,
#modal-friends.open .modal-overlay,
#modal-tournament.open .modal-overlay { opacity: 1; }

#modal-habitat .modal-card,
#modal-vip .modal-card,
#modal-friends .modal-card
{
  position: absolute;
  top: var(--modal-top);
  left: 50%;
  width: var(--modal-width);
  color: var(--modal-fg);
  background: var(--modal-bg);
  border: 10px solid var(--modal-gold);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateX(-50%) translateY(10px) scaleX(calc(var(--modal-scale-x) * 0.96)) scaleY(calc(var(--modal-scale-y) * 0.96));
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  outline: none;
  padding: 22px 26px 36px;
}
#modal-habitat.open .modal-card,
#modal-vip.open .modal-card,
#modal-friends.open .modal-card,
#modal-tournament.open .modal-card {
  transform: translateX(-50%) translateY(0) scaleX(var(--modal-scale-x)) scaleY(var(--modal-scale-y));
  opacity: 1;
}

#modal-habitat .modal-card-inner,
#modal-vip .modal-card-inner,
#modal-friends .modal-card-inner,
#modal-tournament .modal-card-inner {
  transform: scale(calc(1 / var(--modal-scale-x)), calc(1 / var(--modal-scale-y)));
  transform-origin: top left;
}

#modal-habitat .modal-close,
#modal-vip .modal-close,
#modal-friends .modal-close,

#modal-tournament .modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 70px; height: 70px;
  border: 2px solid #b22222; border-radius: 12px;
  background: #e53935; color: #000;
  font-size: 68px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}

#modal-habitat .modal-title,
#modal-vip .modal-title,
#modal-friends .modal-title{
  margin: 0 0 12px 0;
  text-align: center; letter-spacing: 2px; font-weight: 700;
  font-size: 58px; color: var(--modal-gold);
}

#modal-tournament .modal-card {
  position: absolute;
  top: 10%;
  left: 50%;
  width: var(--modal-width);
  color: var(--modal-fg);
  background: var(--modal-bg);
  border: 10px solid var(--modal-gold);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateX(-50%) translateY(10px) scaleX(calc(var(--modal-scale-x) * 0.96)) scaleY(calc(var(--modal-scale-y) * 0.96));
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  outline: none;
  padding: 22px 26px 36px;
}

/* ajustes de conteúdo do torneio */
#modal-tournament .modal-body { display: grid; gap: 14px; }
#modal-tournament .modal-title {
  margin: 0 0 12px 0;
  text-align: center; letter-spacing: 2px; font-weight: 700;
  font-size: 58px; color: var(--modal-gold);
}
.modal { display: none; }
.modal.open { display: block; }
#modal-tournament .tournament-rules { display: none !important; }
#modal-tournament .tournament-header {
  background: linear-gradient(180deg, #f9e076 0%, #e2b23d 100%);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;   /* deixa em coluna */
  align-items: center;      /* centraliza no meio */
  text-align: center;
}
#modal-tournament .timer-label {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 4px;   /* espaço entre texto e timer */
  color: #0004ff;
}
#modal-tournament .timer-value {
  font-size: 32px;
  font-weight: bold;
  color: #222;
}
#modal-tournament .tournament-header2 { 
  background: #fff3cd;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 28px;
  font-weight: 600;
  color: #444;
  text-align: center;
  margin-top: 8px;
}

#modal-tournament .tournament-subtitle { text-align:left; font-size: 28px; color: var(--modal-fg); margin: 0; }

/* Container com scroll para a tabela do torneio */
#modal-tournament .tournament-table-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 8px;
  margin: 8px 0;
  background: rgba(255,255,255,0.05);
}

/* Scrollbar customizada para o container do torneio */
#modal-tournament .tournament-table-container::-webkit-scrollbar {
  width: 8px;
}

#modal-tournament .tournament-table-container::-webkit-scrollbar-track {
  background: rgba(212,175,55,0.1);
  border-radius: 4px;
}

#modal-tournament .tournament-table-container::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.6);
  border-radius: 4px;
}

#modal-tournament .tournament-table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(212,175,55,0.8);
}

#modal-tournament .tournament-table { width:100%; border-collapse:collapse; }
#modal-tournament .tournament-table th,
#modal-tournament .tournament-table td { text-align:left; padding:10px; border-bottom:1px solid rgba(212,175,55,0.25); font-size: 26px; }
#modal-tournament .tournament-table thead th { font-size: 24px; text-transform: uppercase; letter-spacing: .3px; }
#modal-tournament .tournament-table .pos-col,
#modal-tournament .tournament-table th:nth-child(1) { width: 110px; text-align: center; }
#modal-tournament .tournament-table .prize-col,
#modal-tournament .tournament-table th:nth-child(3) { width: 170px; text-align: right; white-space: nowrap; }
#modal-tournament .tournament-table .points-col,
#modal-tournament .tournament-table th:nth-child(4) { width: 120px; text-align: right; white-space: nowrap; }
#modal-tournament .tournament-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
#modal-tournament .tournament-avatar,
#modal-tournament .tournament-avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid rgba(212,175,55,0.55);
  background: rgba(212,175,55,0.12);
  flex: 0 0 auto;
}
#modal-tournament .tournament-avatar { object-fit: cover; }
#modal-tournament .tournament-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
#modal-tournament .tournament-player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
#modal-tournament .tournament-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size: 32px; }
#modal-tournament .modal-content { margin-top:8px; padding-top:8px; border-top:1px solid rgba(212,175,55,0.25); font-size: 32px; }
#modal-tournament .btn-rules { border: 6px solid rgba(202, 183, 10, 0.808);
  border-radius: 14px; 
  background: rgba(231, 183, 23, 0.815); 
  color: rgb(0, 0, 0); font-size: 32px;}

#modal-rules { position: absolute; inset: 0; z-index: var(--modal-z); display: none; }
#modal-rules.open { display: block; }

#modal-rules .modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0; transition: opacity 200ms linear;
}
#modal-rules.open .modal-overlay { opacity: 1; }

#modal-rules .modal-card {
  position: absolute; top: 20%; left: 50%; width: var(--modal-width);
  color: var(--modal-fg); background: var(--modal-bg);
  border: 10px solid var(--modal-gold); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateX(-50%) translateY(10px) scale(.96);
  opacity: 0; transition: transform 200ms ease, opacity 200ms ease;
  outline: none; padding: 22px 26px 36px;
}
#modal-rules.open .modal-card {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
}
#modal-rules .modal-card-inner {
  transform: scale(calc(1 / var(--modal-scale-x)), calc(1 / var(--modal-scale-y)));
  transform-origin: top left;
}
#modal-rules .modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 70px; height: 70px;
  border: 2px solid #b22222; border-radius: 12px;
  background: #e53935; color: #000; font-size: 68px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3;
}
#modal-rules .modal-title {
  margin: 0 0 12px 0; text-align: center; letter-spacing: 2px; font-weight: 700;
  font-size: 58px; color: var(--modal-gold);
}
#modal-rules .modal-body {
  font-size: 32px;
}

/* Base mínima do Friends */
#modal-friends { position: absolute; inset: 0; z-index: var(--modal-z); display: none; }
#modal-friends.open { display: block; }

/* Compartilha as MESMAS regras do card com Habitat e VIP */
#modal-habitat .modal-overlay,
#modal-vip .modal-overlay,
#modal-friends .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 200ms linear;
}
#modal-habitat.open .modal-overlay,
#modal-vip.open .modal-overlay,
#modal-friends.open .modal-overlay { opacity: 1; }

#modal-habitat .modal-card,
#modal-vip .modal-card,
#modal-friends .modal-card {
  position: absolute;
  top: var(--modal-top);
  left: 50%;
  width: var(--modal-width);
  color: var(--modal-fg);
  background: var(--modal-bg);
  border: 10px solid var(--modal-gold);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateX(-50%) translateY(10px) scaleX(calc(var(--modal-scale-x) * 0.96)) scaleY(calc(var(--modal-scale-y) * 0.96));
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  outline: none;
  padding: 22px 26px 36px;
}
#modal-habitat.open .modal-card,
#modal-vip.open .modal-card,
#modal-friends.open .modal-card {
  transform: translateX(-50%) translateY(0) scaleX(var(--modal-scale-x)) scaleY(var(--modal-scale-y));
  opacity: 1;
}

#modal-habitat .modal-card-inner,
#modal-friends .modal-card-inner {
  transform: scale(calc(1 / var(--modal-scale-x)), calc(1 / var(--modal-scale-y)));
  transform-origin: top left;
}

#modal-habitat .modal-close,
#modal-friends .modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 70px; height: 70px;
  border: 2px solid #b22222; border-radius: 12px;
  background: #e53935; color: #000;
  font-size: 68px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}

#modal-habitat .modal-title,
#modal-friends .modal-title {
  margin: 0 0 12px 0;
  text-align: center; letter-spacing: 2px; font-weight: 700;
  font-size: 58px; color: var(--modal-gold);
}

/* pequenos ajustes do conteúdo Friends */
#modal-friends .modal-body { display: grid; gap: 14px; }
#modal-friends .friends-subtitle { text-align: center; color: var(--modal-fg); font-size: 28px; }
#modal-friends .friends-link-row { display: flex; gap: 8px; }
#modal-friends #friends-link {
  flex: 1; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(212,175,55,0.25);
  background: #fff; color: #000;
}
#modal-friends .friends-stats { display: grid; gap: 4px; color: var(--modal-fg); font-size: 24px; }
#modal-friends .friends-history-wrap {
  margin-top: 6px;
  display: grid;
  gap: 8px;
}
#modal-friends .friends-history-title {
  margin: 0;
  text-align: center;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--modal-gold);
}
#modal-friends .friends-history-table-wrap {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 10px;
  background: rgba(8, 12, 24, 0.7);
}
#modal-friends .friends-history-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#modal-friends .friends-history-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(212,175,55,0.2);
  color: var(--modal-fg);
  text-align: center;
  font-size: 18px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(212,175,55,0.4);
}
#modal-friends .friends-history-table tbody td {
  color: var(--modal-fg);
  font-size: 18px;
  text-align: center;
  padding: 10px 8px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
#modal-friends .friends-history-table tbody tr:last-child td {
  border-bottom: none;
}
#modal-friends .friends-history-table th:nth-child(1),
#modal-friends .friends-history-table td:nth-child(1) { width: 58%; }
#modal-friends .friends-history-table th:nth-child(2),
#modal-friends .friends-history-table td:nth-child(2) { width: 21%; }
#modal-friends .friends-history-table th:nth-child(3),
#modal-friends .friends-history-table td:nth-child(3) { width: 21%; }
#modal-friends .friends-history-id-cell {
  text-align: left !important;
}
#modal-friends .friends-history-id {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}
#modal-friends .friends-history-id .friends-history-avatar,
#modal-friends .friends-history-id .friends-history-avatar-fallback {
  margin: 0;
  flex: 0 0 auto;
}
#modal-friends .friends-history-name {
  display: block;
  text-align: left;
  font-size: 26px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#modal-friends .friends-history-avatar,
#modal-friends .friends-history-avatar-fallback {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#modal-friends .friends-history-avatar {
  object-fit: cover;
  border: 1px solid rgba(212,175,55,0.45);
}
#modal-friends .friends-history-avatar-fallback {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(212,175,55,0.35);
}
#modal-friends .friends-eligible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  padding: 2px 8px;
}
#modal-friends .friends-eligible.yes {
  color: #9dffb3;
  background: rgba(24, 120, 64, 0.35);
  border: 1px solid rgba(102, 255, 153, 0.4);
}
#modal-friends .friends-eligible.no {
  color: #ffb1b1;
  background: rgba(120, 24, 24, 0.35);
  border: 1px solid rgba(255, 120, 120, 0.4);
}
#modal-friends .friends-history-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  padding: 8px 0 2px;
}


/* Modal VIP (usa a mesma lógica dos outros modais) */
#modal-vip {
  position: absolute;
  inset: 0;
  z-index: var(--modal-z);  /* mesmo nível dos outros cards */
  display: none;            /* escondido por padrão */
}
#modal-vip.open {
  display: block;           /* aparece quando abrimos via JS */
}

/* Fixar altura das metas para não empurrar o card */
#habitat-grid .slot-meta { height: 72px; }
#habitat-grid .slot-meta .name,
#habitat-grid .slot-meta .prod { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Linha de mint com custo centralizado entre botões */
#modal-habitat .mint-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; margin: var(--mint-row-mt) 0 var(--mint-row-mb) 0; }
#modal-habitat .mint-row .mint-cost { justify-self: center; color: var(--modal-fg); font-size: var(--font-mint); }
#modal-habitat .mint-row .mint-cost .value { color: var(--modal-gold); font-weight: 800; }

#modal-habitat {
  position: absolute;
  inset: 0;
  z-index: var(--modal-z);
  display: none;                  /* controlado via classe .open */
}

#modal-habitat.open {
  display: block;
}

#modal-habitat .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 200ms linear;
}

#modal-habitat.open .modal-overlay {
  opacity: 1;
}

#modal-habitat .modal-card {
  position: absolute;
  top: var(--modal-top);
  left: 50%;
  width: var(--modal-width);
  color: var(--modal-fg);
  background: var(--modal-bg);
  border: 10px solid var(--modal-gold);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  /* EDITÁVEL: escala base do contêiner externo do card (não afeta o conteúdo, que está em .modal-card-inner) */
  transform: translateX(-50%) translateY(10px) scaleX(calc(var(--modal-scale-x) * 0.96)) scaleY(calc(var(--modal-scale-y) * 0.96));
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  outline: none;
  padding: 22px 26px 24px; /* menos espaço inferior (item 6) */
}

#modal-habitat.open .modal-card {
  /* EDITÁVEL: escala final do contêiner externo do card */
  transform: translateX(-50%) translateY(0) scaleX(var(--modal-scale-x)) scaleY(var(--modal-scale-y));
  opacity: 1;
}

/* Importante: o conteúdo interno NÃO herda a escala do contêiner externo. */
#modal-habitat .modal-card-inner {
  transform: scale(calc(1 / var(--modal-scale-x)), calc(1 / var(--modal-scale-y)));
  transform-origin: top left; /* mantém o alinhamento com o topo do card */
}

#modal-habitat .modal-close { position: absolute; top: 10px; right: 12px; width: 70px; height: 70px; border: 2px solid #b22222; border-radius: 12px; background: #e53935; color: #000000; font-size: 68px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }

#modal-habitat .modal-title { margin: 0 0 12px 0; text-align: center; letter-spacing: 2px; font-weight: 700; font-size: 58px; color: var(--modal-gold); }

#modal-habitat .modal-body { display: block; }



/* Regras COMPARTILHADAS — Habitat e VIP usam o mesmo card */
#modal-habitat .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 200ms linear;
}
#modal-habitat.open .modal-overlay { opacity: 1; }

#modal-habitat .modal-card {
  position: absolute;
  top: var(--modal-top);
  left: 50%;
  width: var(--modal-width);
  color: var(--modal-fg);
  background: var(--modal-bg);
  border: 10px solid var(--modal-gold);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateX(-50%) translateY(10px) scaleX(calc(var(--modal-scale-x) * 0.96)) scaleY(calc(var(--modal-scale-y) * 0.96));
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  outline: none;
  padding: 22px 26px 36px;
}
#modal-habitat.open .modal-card {
  transform: translateX(-50%) translateY(0) scaleX(var(--modal-scale-x)) scaleY(var(--modal-scale-y));
  opacity: 1;
}

#modal-habitat .modal-card-inner {
  transform: scale(calc(1 / var(--modal-scale-x)), calc(1 / var(--modal-scale-y)));
  transform-origin: top left;
}

#modal-habitat .modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 70px; height: 70px;
  border: 2px solid #b22222; border-radius: 12px;
  background: #e53935; color: #000;
  font-size: 68px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}

#modal-habitat .modal-title {
  margin: 0 0 12px 0;
  text-align: center; letter-spacing: 2px; font-weight: 700;
  font-size: 58px; color: var(--modal-gold);
}



/* Grade 3x3 */
#habitat-grid { display: block; margin: 8px 0 12px 0; }
#habitat-grid .grid-row { display: flex; justify-content: center; gap: var(--slot-gap-x); }


#habitat-grid .slot { width: var(--slot-img-size); height: var(--slot-img-size); background: #1b222b; border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 10px; overflow: hidden; position: relative; }
#habitat-grid .slot img.pet-img { width: 97%; height: 97%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Botão remover (X) no canto do slot) */
#habitat-grid .slot .slot-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  border: 2px solid #b22222;
  border-radius: 8px;
  background: #e53935;
  color: #000;          /* mantém contraste com o vermelho */
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: none;        /* só mostramos em slots ocupados */
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}

#habitat-grid .slot.has-pet .slot-remove {
  display: flex;        /* aparece quando o slot tem pet */
}

#habitat-grid .slot .slot-remove:focus {
  outline: 2px solid var(--modal-accent);
  outline-offset: 2px;
}


/* Fundos por tema (slot) */
#modal-habitat.theme-hab1 #habitat-grid .slot { background: url('assets/ui/floresta-slot.png') center/cover no-repeat; }
#modal-habitat.theme-hab2 #habitat-grid .slot { background: url('assets/ui/pantano-slot.png') center/cover no-repeat; }
#modal-habitat.theme-hab3 #habitat-grid .slot { background: url('assets/ui/planicie-slot.png') center/cover no-repeat; }
#modal-habitat.theme-hab4 #habitat-grid .slot { background: url('assets/ui/geleira-slot.png') center/cover no-repeat; }
#modal-habitat.theme-hab5 #habitat-grid .slot { background: url('assets/ui/sonhos-slot.png') center/cover no-repeat; }

/* Fundos por tema (slot) — alias para o modal de MINT */
#modal-mint.theme-hab1 #mint-grid .slot { background: url('assets/ui/floresta-slot.png') center/cover no-repeat; }
#modal-mint.theme-hab2 #mint-grid .slot { background: url('assets/ui/pantano-slot.png') center/cover no-repeat; }
#modal-mint.theme-hab3 #mint-grid .slot { background: url('assets/ui/planicie-slot.png') center/cover no-repeat; }
#modal-mint.theme-hab4 #mint-grid .slot { background: url('assets/ui/geleira-slot.png') center/cover no-repeat; }
#modal-mint.theme-hab5 #mint-grid .slot { background: url('assets/ui/sonhos-slot.png') center/cover no-repeat; }


#habitat-grid .meta-row { display: grid; grid-template-columns: repeat(3, var(--slot-img-size)); justify-content: center; column-gap: var(--meta-gap-x); margin: 4px 0 12px 0; }
#habitat-grid .slot-meta { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; text-align: center; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(212, 175, 55, 0.25); border-radius: 8px; padding: 6px 8px; }
#habitat-grid .slot-meta .name { font-size: var(--font-slot-name); text-transform: lowercase; color: var(--modal-fg); line-height: 1.2; }
#habitat-grid .slot-meta .prod { font-size: var(--font-slot-prod); color: var(--modal-gold); line-height: 1.2; }

/* Área informativa */
#modal-habitat .info-area { margin-top: var(--info-area-mt); margin-bottom: var(--info-area-mb); display: flex; flex-direction: column; position: relative; top: var(--info-area-shift-y); }
#modal-habitat .info-topline { display: flex; justify-content: flex-start; align-items: center; gap: 28px; color: var(--modal-fg); margin-bottom: var(--info-topline-mb); font-size: var(--font-info-topline); justify-content: flex-start; border-radius: 10px; background: rgba(0, 0, 0, 0.822); border: 6px solid rgba(212, 175, 55, 0.35); }
#modal-habitat .info-topline .produced-now { margin-left: auto; color: var(--modal-gold); font-weight: 800; }

#modal-habitat .progress-row { display: flex; align-items: center; justify-content: space-between; gap: var(--progress-row-gap); margin-bottom: var(--progress-row-mb); margin-top: var(--progress-row-mt); }
#modal-habitat .progress-bar { position: relative; width: var(--progress-width); height: var(--progress-height); border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(212, 175, 55, 0.35); overflow: hidden; }
#habitat-progress { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, rgba(148,211,143,1), rgba(212,175,55,1)); }
#habitat-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 6px 0 rgb(0, 0, 0);
  font-size: 40px;
  pointer-events: none;
}
#habitat-progress-label .progress-time,
#habitat-progress-label .progress-pct {
  white-space: nowrap;
  line-height: 1;
}

#modal-habitat .collect-side {
  display: flex;
  align-items: center;   /* centraliza verticalmente com a barra */
  justify-content: flex-end;
}


#modal-habitat .hint { color: var(--modal-muted); margin: 0 0 var(--hint-mb) 0; font-size: var(--font-hint); }

#modal-habitat .mint-row {
  display: flex;
  justify-content: space-between; /* inventário à esquerda, mint à direita */
  align-items: flex-end;
  margin: var(--mint-row-mt) 0 var(--mint-row-mb) 0;
}

/* container do botão mint + valor */
#modal-habitat .mint-mintar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* valor de mint acima do botão */
#modal-habitat .mint-mintar .mint-cost {
  margin-bottom: 0px;
  font-size: var(--font-mint);
  font-weight: 700;
  color: var(--modal-gold);
}

#modal-habitat .btn-inventory { min-width: 240px; min-height: 90px; }
#modal-habitat .btn-mint { min-width: 320px; min-height: 100px; transform: translate(var(--btn-mint-shift-x), var(--btn-mint-shift-y)); }

#modal-habitat .mint-cost { color: var(--modal-fg); font-size: var(--font-mint); }
#modal-habitat .subhint { color: var(--modal-muted); font-size: var(--font-subhint); margin: 10px 0 0 0; text-align: right; margin-top: auto; }

/* Botões */
#modal-habitat .btn { appearance: none; border: 1px solid var(--modal-gold); color: var(--modal-fg); background: rgba(212,175,55,0.08); padding: 0 24px; border-radius: 10px; font-weight: 700; font-size: var(--btn-font-size); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#modal-habitat .btn-collect { min-width: 320px; min-height: 90px; transform: translate(var(--btn-collect-shift-x), var(--btn-collect-shift-y), var(--btn-mint-row-mt)); }
#modal-habitat .btn-collect.is-vip-active {
  border: 3px solid rgba(212, 175, 55, 0.95);
  background: linear-gradient(180deg, rgba(252, 233, 117, 0.98), rgba(214, 169, 48, 0.98));
  color: #2f1d00;
  text-shadow: none;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(40, 24, 0, 0.45) inset;
}

/* Acessibilidade: foco visível */
#modal-habitat .modal-card :is(button, [href], input, select, textarea, [tabindex]):focus { outline: 2px solid var(--modal-accent); outline-offset: 2px; }
#modal-habitat .vip-collect-badge {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,0.55);
  background: rgba(212,175,55,0.12);
  color: var(--modal-gold);
  font-size: var(--btn-font-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* ===========================
   Modal Mint (reusa padrões)
   =========================== */

#modal-mint {
  position: absolute;
  inset: 0;
  z-index: calc(var(--modal-z) + 1);
  display: none;
}
#modal-mint.open { display: block; }

/* Aproveita o mesmo visual do card, título, etc. */
#modal-mint .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity 200ms; }
#modal-mint.open .modal-overlay { opacity: 1; }

#modal-mint .modal-card { position: absolute; top: var(--modal-top); left: 50%; width: var(--modal-width); color: var(--modal-fg); background: var(--modal-bg); border: 10px solid var(--modal-gold); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04); transform: translateX(-50%) translateY(10px) scale(.96); opacity: 0; transition: transform 200ms, opacity 200ms; outline: none; padding: 24px 28px 28px; }
#modal-mint.open .modal-card { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
#modal-mint .modal-close { position: absolute; top: 10px; right: 12px; width: 56px; height: 56px; border: 2px solid #b22222; border-radius: 12px; background: #e53935; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#modal-mint .modal-title { margin: 0 0 16px 0; text-align: center; letter-spacing: 2px; font-weight: 700; font-size: 42px; color: var(--modal-gold); }

/* Grade 3x3 igual ao habitat */
#mint-grid { display: block; margin: 10px 0 16px 0; }
#mint-grid .grid-row { display: flex; justify-content: center; gap: var(--slot-gap-x); }
#modal-inventory .grid-row { display: flex; justify-content: center; gap: var(--slot-gap-x); }
#mint-grid .slot { width: var(--slot-img-size); height: var(--slot-img-size); background: #0b0d0f; border: 1px solid rgba(212,175,55,.35); border-radius: 10px; overflow: hidden; position: relative; }
#modal-inventory .slot { width: var(--slot-img-size); height: var(--slot-img-size); background: #0b0d0f; border: 1px solid rgba(212,175,55,.35); border-radius: 10px; overflow: hidden; }
#mint-grid .slot img.pet-img { width: 97%; height: 97%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#modal-inventory .slot img { width: 100%; height: 100%; object-fit: cover; }
#mint-grid .meta-row { display: grid; grid-template-columns: repeat(3, var(--slot-img-size)); justify-content: center; column-gap: var(--meta-gap-x); margin: 6px 0 16px 0; }
#modal-inventory .meta-row { display: grid; grid-template-columns: repeat(3, var(--slot-img-size)); justify-content: center; column-gap: var(--meta-gap-x); margin: 6px 0 16px 0; }
#mint-grid .slot-meta { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; text-align: center; background: rgba(0, 0, 0, 0.555); border: 1px solid rgba(212,175,55,.15); border-radius: 8px; padding: 6px 8px; }
#modal-inventory .slot-meta { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; text-align: center; background: rgba(0, 0, 0, 0.555); border: 1px solid rgba(212,175,55,.15); border-radius: 8px; padding: 6px 8px; }
#mint-grid .slot-meta .name { font-size: var(--font-slot-name); text-transform: lowercase; color: var(--modal-fg); line-height: 1.2; }
#modal-inventory .slot-meta .name { font-size: var(--font-slot-name); text-transform: lowercase; color: var(--modal-fg); line-height: 1.2; }
#mint-grid .slot-meta .prod { font-size: var(--font-slot-prod); color: var(--modal-accent); line-height: 1.2; }
#modal-inventory .slot-meta .prod { font-size: var(--font-slot-prod); color: var(--modal-accent); line-height: 1.2; }
/* Inventário: 3 linhas sempre visíveis; sem scroll por padrão */
#modal-inventory .inventory-scroll {
  /* 3 linhas = (imagem + bloco meta) * 3 + espaçamentos */
  max-height: calc((var(--slot-img-size) + 56px + 12px) * 3);
  overflow-y: hidden;   /* sem barra quando vazio/≤9 */
  overflow-x: hidden;   /* remove barra horizontal */
}

/* Liga a barra vertical apenas quando houver > 9 */
#modal-inventory .inventory-scroll.scrollable {
  overflow-y: auto;
}


.mint-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; }
#mint-qty-input::-webkit-outer-spin-button,
#mint-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#mint-qty-input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
#btn-mint-primary { min-width: 360px; min-height: 84px; font-size: calc(var(--btn-font-size) + 2px); }
.mint-note { color: var(--modal-muted); font-size: var(--font-subhint); margin: 0; text-align: center; }

/* Confirmação dentro do modal-mint */
#modal-mint .confirm-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; }
#modal-mint .confirm-overlay.open { display: flex; }
#modal-mint .confirm-card { width: 800px; height: 250px; background: var(--modal-bg); border: 10px solid var(--modal-gold); border-radius: 14px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
#modal-mint .confirm-text { color: var(--modal-fg); font-size: 34px; text-align: center; margin-bottom: 10px; }
#modal-mint .confirm-cost { color: var(--modal-fg); font-size: 30px; text-align: center; margin-bottom: 16px; }
#modal-mint .confirm-actions { display: flex; justify-content: center; gap: 20px; }
#modal-mint .confirm-actions .btn { min-width: 220px; min-height: 68px; font-size: var(--btn-font-size); background: rgba(0,0,0,.55); color:#b22222; border: 4px solid rgba(231, 211, 98, 0.904); }

/* ===========================
   Modal Rent (alugar habitat)
   =========================== */
#modal-rent { position: absolute; inset: 0; z-index: calc(var(--modal-z) + 2); display: none; }
#modal-rent.open { display: block; }
#modal-rent .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity 200ms; }
#modal-rent.open .modal-overlay { opacity: 1; }

.rent-wrap { position: absolute; top: var(--modal-top); left: 50%; transform: translateX(-50%); display: grid; place-items: center; row-gap: 0px; }
.rent-title { position: relative; top: var(--rent-title-offset-y); margin: 0; text-align: center; letter-spacing: 2px; font-weight: 800; font-size: 68px; color: var(--modal-gold); text-shadow: 0 2px 18px rgb(0, 0, 0); }

/* Card centralizado com a imagem como plano de fundo, preservando proporção (contain) */
.rent-card { position: relative; width: 980px; height: 1400px; outline: none; display: grid; place-items: center; background: url('assets/ui/popupfechado.png') center / contain no-repeat; }
.rent-card .modal-close { top: 500px; right: 18px; } /* garante que fique no canto da imagem */
.rent-inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; }
/* Bloco central alinhado no centro da imagem */
.rent-content { position: absolute; top: calc(50% + var(--rent-content-offset-y)); left: 50%; transform: translate(-50%, -50%); width: 75%; display: flex; flex-direction: column; align-items: center; gap: 0px; }
.rent-info { color: var(--modal-fg); font-size: var(--rent-font-info); text-align: center; text-shadow: 0 2px 8px rgb(0, 0, 0); }
.rent-price { color: var(--modal-fg); font-size: var(--rent-font-price); text-align: center; text-shadow: 0 2px 8px rgb(0, 0, 0); }
.btn-rent { min-width: var(--rent-btn-minw); min-height: var(--rent-btn-minh); font-size: calc(var(--btn-font-size) + 2px); background: rgba(231, 211, 98, 0.904); color:#000000; border-radius: 14px; border: 4px solid rgb(255, 217, 0); }

.rent-confirm { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); display: none; align-items: center; justify-content: center; }
.rent-confirm.open { display: flex; }
.rent-confirm .confirm-card { width: 800px; height: 240px; background: var(--modal-bg); border: 8px solid var(--modal-gold); border-radius: 14px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.rent-confirm .confirm-text { color: var(--modal-fg); font-size: 36px; text-align: center; margin-bottom: 30px; }
.rent-confirm .confirm-actions { display: flex; justify-content: center; gap: 20px; }
.rent-confirm .confirm-actions .btn { min-width: 220px; min-height: 80px; font-size: var(--btn-font-size); background: rgba(216, 198, 37, 0.849); color:#000000; border-radius: 14px; border: 4px solid rgb(231, 211, 98); }

/* Confirmação do Inventário (in-game) */
#inventory-confirm {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: calc(var(--modal-z) + 5);
}
#inventory-confirm.open { display: flex; }
#inventory-confirm .confirm-card {
  width: 800px; height: 240px; background: var(--modal-bg);
  border: 8px solid var(--modal-gold); border-radius: 14px;
  padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
#inventory-confirm .confirm-text { color: var(--modal-fg); font-size: 28px; text-align: center; margin-bottom: 16px; }
#inventory-confirm .confirm-actions { display: flex; justify-content: center; gap: 20px; }
#inventory-confirm .confirm-actions .btn { min-width: 220px; min-height: 64px; font-size: var(--btn-font-size); }


/* ===========================
   Botão de fechar (padrão para todos os modais)
   =========================== */
#modal-habitat .modal-close,
#modal-mint .modal-close,
#modal-rent  .modal-close,
#modal-wallet .modal-close,
#modal-deposit .modal-close { position: absolute; top: 10px; right: 12px; width: 70px; height: 70px; border: 2px solid #b22222; border-radius: 12px; background: #e53935; color: #000000; font-size: 68px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }

/* ===========================
   Modal Wallet (carteira)
   =========================== */
#modal-wallet { position: absolute; inset: 0; z-index: calc(var(--modal-z) + 3); display: none; }
#modal-wallet.open { display: block; }
#modal-wallet .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity 200ms; }
#modal-wallet.open .modal-overlay { opacity: 1; }

#modal-wallet .modal-card { position: absolute; top: var(--modal-top); left: 50%; width: var(--modal-width); color: var(--modal-fg); background: var(--modal-bg); border: 10px solid var(--modal-gold); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04); transform: translateX(-50%) translateY(10px) scale(.96); opacity: 0; transition: transform 200ms, opacity 200ms; outline: none; padding: 20px 28px 28px; }
#modal-wallet.open .modal-card { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }

#modal-wallet .modal-title { margin: 0; text-align: center; letter-spacing: 2px; font-weight: 800; font-size: 46px; color: var(--modal-gold); }

/* Cabeçalho: status à esquerda, título central */
.wallet-header { position: relative; padding: 4px 48px 12px; }
.wallet-header .wallet-status { position: absolute; left: 0; top: 8px; color: #f7d24c; background: rgba(247,210,76,0.1); border: 1px solid rgba(247,210,76,0.35); padding: 6px 10px; border-radius: 8px; font-size: 22px; }
.wallet-header .wallet-status.hidden { display: none; }

/* Corpo do wallet */
.wallet-body { display: flex; flex-direction: column; gap: 16px; }

.wallet-connect-area { display: flex; align-items: center; gap: 16px; }
.wallet-profile { display: none; align-items: center; gap: 12px; }
.wallet-profile[aria-hidden="false"] { display: flex; }
.wallet-photo { width: 106px; height: 106px; border-radius: 50%; object-fit: cover; background: #1b222b; border: 1px solid rgba(212,175,55,.3); }
.wallet-profile-meta { display: flex; flex-direction: column; }
.wallet-tgid { color: var(--modal-fg); font-size: 26px; }
.wallet-address { color: var(--modal-muted); font-size: 28px; }

/* Botões (escopo wallet) */
#modal-wallet .btn { appearance: none; border: 1px solid var(--modal-gold); color: var(--modal-fg); background: rgba(212,175,55,0.08); padding: 0 20px; border-radius: 10px; font-weight: 800; font-size: var(--btn-font-size); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 80px; }
#modal-wallet .btn-primary { background: rgba(148,211,143,0.12); }
#modal-wallet .btn-secondary { background: rgba(255,255,255,0.08); }
#modal-wallet .btn[disabled] { opacity: .5; cursor: not-allowed; }

.wallet-balance-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgb(255, 255, 255); border: 4px solid rgba(212, 175, 55, 0.541); border-radius: 10px; }
.wallet-balance-label { color: var(--modal-muted); font-size: 26px; }
.wallet-balance-value { display: inline-flex; align-items: center; gap: 10px; color: rgb(0, 0, 0); font-size: 32px; font-weight: 800; }
.wallet-ton-icon { width: 28px; height: 28px; display: inline-block; background-repeat: no-repeat; background-size: contain; }
/* SVG TON inline via data URL */
.wallet-ton-icon { background-image: url("data:image/svg+xml,%3Csvg width='256' height='256' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23A8E0FF' d='M128 16C70.6 16 24 62.6 24 120c0 28.5 12.4 54.1 32.1 72L128 240l71.9-48c19.7-17.9 32.1-43.5 32.1-72c0-57.4-46.6-104-104-104zm0 32c39.7 0 72 32.3 72 72c0 21-9 41-24.8 55L128 208l-47.2-33c-15.8-14-24.8-34-24.8-55c0-39.7 32.3-72 72-72z'/%3E%3C/svg%3E"); }

.wallet-amount-row { display: flex; align-items: center; gap: 12px; }
.wallet-amount { flex: 1; min-height: 80px; border-radius: 10px; border: 1px solid rgba(212,175,55,.35); background: #1b222b; color: var(--modal-fg); font-size: 28px; padding: 0 16px; }
.wallet-amount::placeholder { color: var(--modal-muted); }

.wallet-min { color: var(--modal-muted); font-size: 24px; }

.wallet-action-row { display: flex; align-items: center; gap: 12px; }
.wallet-countdown { color: var(--modal-accent); font-size: 34px; font-weight: 800; }

/* Notas */
.wallet-notes { background: rgba(255,255,255,0.06); border: 1px solid rgba(212,175,55,0.25); border-radius: 10px; padding: 10px 14px; }
.wallet-notes-list,
.deposit-info-list {
  margin: 0;
  padding-left: 24px;
  display: grid;
  gap: 6px;
}
.wallet-notes-list li,
.deposit-info-list li {
  color: var(--modal-muted);
  font-size: 26px;
  line-height: 1.3;
}

/* Histórico */
.wallet-history { margin-top: 6px; }
.wallet-history-title { color: var(--modal-fg); font-weight: 800; font-size: 28px; margin-bottom: 8px; }
.wallet-table { width: 100%; border-collapse: collapse; border: 1px solid rgba(212,175,55,0.25); border-radius: 10px; overflow: hidden; }
.wallet-table thead th { text-align: left; background: rgba(255,255,255,0.08); color: var(--modal-fg); font-size: 24px; padding: 10px; }
.wallet-table tbody td { color: var(--modal-fg); font-size: 22px; padding: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.wallet-empty { color: var(--modal-muted); font-size: 22px; text-align: center; padding: 12px; }

/* ===========================
   Modal Deposit (depósito TON)
   =========================== */
#modal-deposit { position: absolute; inset: 0; z-index: calc(var(--modal-z) + 4); display: none; }
#modal-deposit.open { display: block; }






#modal-deposit .modal-title { margin: 0; text-align: center; letter-spacing: 2px; font-weight: 800; font-size: 46px; color: var(--modal-gold); }

/* Cabeçalho: status à esquerda, título central */
.deposit-header { position: relative; padding: 4px 48px 12px; }
.deposit-header .deposit-status { position: absolute; left: 0; top: 8px; color: #f7d24c; background: rgba(247,210,76,0.1); border: 1px solid rgba(247,210,76,0.35); padding: 6px 10px; border-radius: 8px; font-size: 22px; }
.deposit-header .deposit-status.hidden { display: none; }

/* Corpo do deposit */
.deposit-body { display: flex; flex-direction: column; gap: 16px; }

.deposit-connect-area { display: flex; align-items: center; gap: 16px; }
.deposit-profile { display: none; align-items: center; gap: 12px; }
.deposit-profile[aria-hidden="false"] { display: flex; }
.deposit-photo { width: 106px; height: 106px; border-radius: 50%; object-fit: cover; background: #1b222b; border: 1px solid rgba(212,175,55,.3); }
.deposit-profile-meta { display: flex; flex-direction: column; }
.deposit-tgid { color: var(--modal-fg); font-size: 26px; }
.deposit-address { color: var(--modal-muted); font-size: 28px; }

/* Botões (escopo deposit) */
#modal-deposit .btn { appearance: none; border: 1px solid var(--modal-gold); color: var(--modal-fg); background: rgba(212,175,55,0.08); padding: 0 20px; border-radius: 10px; font-weight: 800; font-size: var(--btn-font-size); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 80px; }
#modal-deposit .btn-primary { background: rgba(148,211,143,0.12); }
#modal-deposit .btn[disabled] { opacity: .5; cursor: not-allowed; }

.deposit-balance-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(212,175,55,0.35); border-radius: 10px; }
.deposit-balance-label { color: var(--modal-muted); font-size: 26px; }
.deposit-balance-value { display: inline-flex; align-items: center; gap: 10px; color: var(--modal-fg); font-size: 32px; font-weight: 800; }
.deposit-ton-icon { width: 28px; height: 28px; display: inline-block; background-repeat: no-repeat; background-size: contain; }
/* SVG TON inline via data URL */
.deposit-ton-icon { background-image: url("data:image/svg+xml,%3Csvg width='256' height='256' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23A8E0FF' d='M128 16C70.6 16 24 62.6 24 120c0 28.5 12.4 54.1 32.1 72L128 240l71.9-48c19.7-17.9 32.1-43.5 32.1-72c0-57.4-46.6-104-104-104zm0 32c39.7 0 72 32.3 72 72c0 21-9 41-24.8 55L128 208l-47.2-33c-15.8-14-24.8-34-24.8-55c0-39.7 32.3-72 72-72z'/%3E%3C/svg%3E"); }

.deposit-amount-row { display: flex; align-items: center; gap: 12px; }
.deposit-amount { flex: 1; min-height: 80px; border-radius: 10px; border: 1px solid rgba(212,175,55,.35); background: #1b222b; color: var(--modal-fg); font-size: 28px; padding: 0 16px; }
.deposit-amount::placeholder { color: var(--modal-muted); }

/* Informações */
.deposit-info { background: rgba(255,255,255,0.06); border: 1px solid rgba(212,175,55,0.25); border-radius: 10px; padding: 10px 14px; }

/* Histórico */
.deposit-history { margin-top: 6px; }

/* Espaçamento extra para igualar altura com o modal da carteira */
.deposit-body::after { content: ''; height: 250px; }
.deposit-history-title { color: var(--modal-fg); font-weight: 800; font-size: 28px; margin-bottom: 8px; }
.deposit-table { width: 100%; border-collapse: collapse; border: 1px solid rgba(212,175,55,0.25); border-radius: 10px; overflow: hidden; }
.deposit-table thead th { text-align: left; background: rgba(255,255,255,0.08); color: var(--modal-fg); font-size: 24px; padding: 10px; }
.deposit-table tbody td { color: var(--modal-fg); font-size: 22px; padding: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.deposit-empty { color: var(--modal-muted); font-size: 22px; text-align: center; padding: 12px; }

/* === Normalizar popup de Depósito TON para o mesmo tamanho do Wallet === */




/* Remover calço que esticava demais o modal */
#modal-deposit .deposit-body::after {
  content: none;
  height: 0;
}




/* Remove qualquer “calço” que estique o conteúdo do depósito */
#modal-deposit .deposit-body::after { content: none !important; height: 0 !important; }

/* Se alguma regra mobile tiver forçado largura/altura da área interna, neutraliza: */
#modal-deposit .modal-card-inner,
#modal-deposit .deposit-body {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}
/* Ajuste de responsividade para modal de depósito no mobile */
@media (max-width: 768px) {
  
}

/* ===========================
   Modal Instant Sell — mesmo padrão do HABITAT
   =========================== */
#modal-instant-sell { position: absolute; inset: 0; z-index: calc(var(--modal-z) + 3); display: none; }
#modal-instant-sell.open { display: block; }
#modal-instant-sell .modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.815); opacity: 0; transition: opacity 200ms linear; }
#modal-instant-sell.open .modal-overlay { opacity: 1; }

#modal-instant-sell .modal-card {
  position: absolute;
  top: var(--modal-top);
  left: 50%;
  width: var(--modal-width);
  color: var(--modal-fg);
  background: rgb(12, 12, 12);
  border: 10px solid var(--modal-gold);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.788), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  transform: translateX(-50%) translateY(10px) scaleX(calc(var(--modal-scale-x)*0.96)) scaleY(calc(var(--modal-scale-y)*0.96));
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  outline: none;
  padding: 24px 28px 48px;
}
#modal-instant-sell.open .modal-card {
  transform: translateX(-50%) translateY(0) scaleX(var(--modal-scale-x)) scaleY(var(--modal-scale-y));
  opacity: 1;
}
#modal-instant-sell .modal-card-inner {
  transform: scale(calc(1 / var(--modal-scale-x)), calc(1 / var(--modal-scale-y)));
  transform-origin: top left;
}

#modal-instant-sell .modal-title {
  margin: 0 0 16px 0;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 60px;
  color: var(--modal-gold);
}

/* Grade 3x3 (mesmo padrão do habitat) */
#instant-sell-grid { display: block; margin: 10px 0 16px 0; }
#instant-sell-grid .grid-row { display: flex; justify-content: center; gap: var(--slot-gap-x); }
#instant-sell-grid .slot {
  width: var(--slot-img-size);
  height: var(--slot-img-size);
  background: #1b222b;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Fundo por habitat no Instant Sell (mesmo padrão do Inventário) */
#modal-instant-sell .slot.theme-hab1 { background: url('assets/ui/floresta-slot.png') center/cover no-repeat; }
#modal-instant-sell .slot.theme-hab2 { background: url('assets/ui/pantano-slot.png')  center/cover no-repeat; }
#modal-instant-sell .slot.theme-hab3 { background: url('assets/ui/planicie-slot.png')  center/cover no-repeat; }
#modal-instant-sell .slot.theme-hab4 { background: url('assets/ui/geleira-slot.png')  center/cover no-repeat; }
#modal-instant-sell .slot.theme-hab5 { background: url('assets/ui/sonhos-slot.png')   center/cover no-repeat; }


#instant-sell-grid .slot.selected { outline: 3px solid var(--modal-gold); }
#instant-sell-grid .slot-img { width: 96%; height: 96%; object-fit: contain; user-select: none; -webkit-user-drag: none; }





/* Linha inferior de ação */
#modal-instant-sell .instant-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 16px 0;
}



/* Caixa informativa */
#modal-instant-sell .instant-help-box {
  margin-top: var(--info-area-mt);
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 10px;
  color: var(--modal-fg);
}
#modal-instant-sell .instant-help-box .help-title { font-weight: 700; margin-bottom: 6px; }
#modal-instant-sell .instant-help-box .help-list { margin: 0; padding-left: 18px; }
#modal-instant-sell .instant-help-box .help-list li { margin: 4px 0; }

/* Confirmação (mesmo modelo do mint) */
#modal-instant-sell .confirm-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; }
#modal-instant-sell .confirm-overlay.open { display: flex; }
#modal-instant-sell .confirm-card { width: 800px; height: 250px; background: #000000ee; border: 10px solid var(--modal-gold); border-radius: 14px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
#modal-instant-sell .confirm-text { color: var(--modal-fg); font-size: 32px; text-align: center; margin-bottom: 10px; }
#modal-instant-sell .confirm-cost { color: var(--modal-fg); font-size: 26px; text-align: center; margin-bottom: 16px; }
#modal-instant-sell .confirm-actions { display: flex; justify-content: center; gap: 20px; }
#modal-instant-sell .confirm-actions .btn {
  min-width: 320px; min-height: 84px;   /* altura mais robusta */
  padding: 10px 16px;
  border: 6px solid #f8eb35;
  border-radius: 14px;
  background: #4b0000;
  color: #e6f7ff;
  font-weight: 800;
  box-shadow: 0 2px 10px rgb(255, 54, 54);
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
  font-size: var(--btn-font-size);
}
/* === Instant Sell grid: meta por célula (9/9), igual ao Habitat === */
#modal-instant-sell .instant-sell-scroll {
  max-height: calc((var(--slot-img-size) + 56px + 12px) * 3);
  overflow-y: hidden;
  overflow-x: hidden;
  margin: 10px 0 16px 0;
}
#modal-instant-sell .instant-sell-scroll.scrollable { overflow-y: auto; }
#modal-instant-sell .instant-sell-scroll::-webkit-scrollbar { width: 10px; }
#modal-instant-sell .instant-sell-scroll::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.65);
  border-radius: 10px;
}
#instant-sell-grid { display: grid; grid-template-rows: repeat(3, auto); row-gap: 10px; }
#instant-sell-grid .grid-row { display: grid; grid-template-columns: repeat(3, var(--slot-img-size)); justify-content: center; column-gap: var(--slot-gap-x); }
#instant-sell-grid .cell { width: var(--slot-img-size); display: flex; flex-direction: column; align-items: center; }
#instant-sell-grid .slot { width: var(--slot-img-size); height: var(--slot-img-size); background: #1b222b; border: 1px solid rgba(212,175,55,0.35); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
#instant-sell-grid .slot.selected { outline: 3px solid var(--modal-gold); }
#instant-sell-grid .slot-img { width: 96%; height: 96%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
#instant-sell-grid .meta { margin-top: 6px; min-height: 38px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(212,175,55,0.35); border-radius: 10px; padding: 4px 6px; }
#instant-sell-grid .meta .name { font-size: var(--font-slot-name); color: var(--modal-fg); line-height: 1.1; }
#instant-sell-grid .meta .prod { font-size: var(--font-slot-prod); color: var(--modal-accent); line-height: 1.1; }


/* === Instant Sell: linha inferior e caixa informativa === */
#modal-instant-sell .instant-line { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 18px; margin-top: 5px; }
#modal-instant-sell .available-side {
  display: grid;
  grid-template-rows: min-content min-content;
  row-gap: 8px;
  justify-items: start;
  align-self: center;
}
#modal-instant-sell .available-box { 
  margin-top: 11px;
  min-height: 32px; display: inline-flex; align-items: center;
  padding: 8px 12px; gap: 4px;           /* <- dá espaço entre os spans */
  border: 4px solid rgba(226, 230, 49, 0.849); border-radius: 10px;
  background: rgba(0, 0, 0, 0.493); font-size: var(--font-slot-name);
}
  
#modal-instant-sell .sell-side { display: grid; grid-template-rows: min-content min-content; row-gap: 6px; justify-items: end; align-self: center; }
#modal-instant-sell .btn-instant-select-all {
  min-width: 320px;
  min-height: 64px;
  padding: 8px 14px;
  border: 5px solid rgba(248, 235, 53, 0.92);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.88);
  color: #e6f7ff;
  font-weight: 800;
  font-size: calc(var(--btn-font-size) * 0.84);
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
#modal-instant-sell .available-side .btn-instant-select-all { justify-self: start; }
#modal-instant-sell .btn-instant-select-all:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 213, 74, 0.30);
}
#modal-instant-sell .btn-instant-select-all:active:not(:disabled) { transform: translateY(0); }
#modal-instant-sell .btn-instant-select-all:disabled { opacity: .6; cursor: not-allowed; }
#modal-instant-sell .sell-price { margin: 0; line-height: 1; font-size: var(--btn-font-size); }
#modal-instant-sell .btn-instant-sell { 
  min-width: 320px; min-height: 84px;   /* altura mais robusta */
  padding: 10px 16px;
  border: 6px solid #f8eb35;
  border-radius: 14px;
  background: #000000e0;
  color: #e6f7ff;
  font-weight: 800;
  box-shadow: 0 2px 10px rgb(255, 54, 54);
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
  font-size: var(--btn-font-size);
}
#modal-instant-sell .btn-instant-sell:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(54,194,255,0.28); }
#modal-instant-sell .btn-instant-sell:active:not(:disabled) { transform: translateY(0); }
#modal-instant-sell .btn-instant-sell:disabled { opacity: .6; cursor: not-allowed; }

#modal-instant-sell .instant-help-box { width: 100%; margin-top: 16px; padding: 54px 16px; font-size: 28px; background: rgba(0, 0, 0, 0.623); border: 6px solid rgba(209, 212, 55, 0.712); border-radius: 10px; }
#modal-instant-sell .instant-help-box .help-title { font-weight: 800; margin-bottom: 6px; }
#modal-instant-sell .instant-help-box .help-list { margin: 25px; font-size: 28px; padding-left: 18px; }
#modal-instant-sell .instant-help-box .help-list li { margin: 4px 0; }



/* === NORMALIZAÇÃO: Depósito = mesmo card do Wallet === */
#modal-deposit.open { display: block; }
#modal-deposit .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity 200ms; }
#modal-deposit.open .modal-overlay { opacity: 1; }
#modal-deposit .modal-card { position: absolute; top: var(--modal-top); left: 50%; width: var(--modal-width); color: var(--modal-fg); background: var(--modal-bg); border: 10px solid var(--modal-gold); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04); transform: translateX(-50%) translateY(10px) scale(.96); opacity: 0; transition: transform 200ms, opacity 200ms; outline: none; padding: 20px 28px 28px; height: auto; }
#modal-deposit.open .modal-card { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
#modal-instant-sell { --slot-img-size: 270px; } /* ou --slot-gap-x: 12px */
#modal-instant-sell .modal-close{
  position: absolute; top: 10px; right: 12px;
  width: 70px; height: 70px;
  border: 2px solid #b22222; border-radius: 12px;
  background: #e53935; color: #000; font-size: 68px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3;
}

/* ===========================
   Modal Inventory (simples)
   =========================== */
   #modal-inventory { position: absolute; inset: 0; z-index: calc(var(--modal-z) + 1); display: none; }
   #modal-inventory.open { display: block; }
   #modal-inventory .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity 200ms; }
   #modal-inventory.open .modal-overlay { opacity: 1; }
   #modal-inventory .modal-card { position: absolute; top: var(--modal-top); left: 50%; width: var(--modal-width); color: var(--modal-fg); background: var(--modal-bg); border: 10px solid var(--modal-gold); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04); transform: translateX(-50%) translateY(10px) scale(.96); opacity: 0; transition: transform 200ms, opacity 200ms; outline: none; padding: 24px 28px 28px; }
   #modal-inventory.open .modal-card { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
   #modal-inventory .modal-close { position: absolute; top: 10px; right: 12px; width: 70px; height: 70px; border: 2px solid #b22222; border-radius: 12px; background: #e53935; color: #000; font-size: 68px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }
   #modal-inventory .modal-title { margin: 0 0 12px 0; text-align: center; letter-spacing: 2px; font-weight: 700; font-size: 58px; color: var(--modal-gold); }
   #modal-inventory .modal-body { display: block; }
   
   /* Grade e slots (mesma lógica do habitat) */
   #modal-inventory .inventory-grid { display: block; }
   #modal-inventory .grid-row { display: flex; justify-content: center; gap: var(--slot-gap-x); margin-bottom: 10px; }
   
   
   #modal-inventory .inventory-scroll {
    max-height: calc((var(--slot-img-size) + 56px + 12px) * 3);
    overflow-y: hidden;   /* era auto */
    overflow-x: hidden;   /* remove barra horizontal */
  }
  
  /* liga a barra vertical só quando houver >9 itens */
  #modal-inventory .inventory-scroll.scrollable {
    overflow-y: auto;
  }
  
   #modal-inventory .slot { width: var(--slot-img-size); height: var(--slot-img-size); border: 1px solid rgba(212,175,55,.35); border-radius: 10px; overflow: hidden; position: relative; background: #1b222b; }
   #modal-inventory .slot img.pet-img { width: 97%; height: 97%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
   
   /* Fundos por habitat — usar a origem do pet (sourceHab) como tema */
   #modal-inventory .slot.theme-hab1 { background: url('assets/ui/floresta-slot.png') center/cover no-repeat; }
   #modal-inventory .slot.theme-hab2 { background: url('assets/ui/pantano-slot.png') center/cover no-repeat; }
   #modal-inventory .slot.theme-hab3 { background: url('assets/ui/planicie-slot.png') center/cover no-repeat; }
   #modal-inventory .slot.theme-hab4 { background: url('assets/ui/geleira-slot.png') center/cover no-repeat; }
   #modal-inventory .slot.theme-hab5 { background: url('assets/ui/sonhos-slot.png') center/cover no-repeat; }

   #modal-vip .confirm-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.6);
    display: none;
    align-items: center; justify-content: center;
  }
   #modal-vip .confirm-overlay.open { display: flex; }
   #modal-vip .confirm-card {
    width: 800px; height: 250px;
    background: var(--modal-bg);
    color: var(--modal-fg);
    border: 10px solid var(--modal-gold);
    border-radius: 14px; padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
    display: grid; align-content: center; justify-items: center; gap: 16px;
  }
   #modal-vip .confirm-text { font-size: 34px; font-weight: 800; text-align: center; }
   #modal-vip .confirm-cost { font-size: 30px; }
   #modal-vip .confirm-actions { display: flex; gap: 16px; }
   #modal-vip .btn-confirm { min-width: 220px; min-height: 64px; font-size: var(--btn-font-size);
    border: 6px solid rgba(202, 183, 10, 0.808);
    border-radius: 14px; 
    background: rgba(231, 183, 23, 0.815); 
    color: rgb(0, 0, 0);}
   #modal-vip .vip-subtitle { text-align: center; margin: 8px 0 12px; font-size: 20px; }
   #modal-vip .vip-countdown { text-align: center; font-size: 18px; margin: 6px 0 14px; }

   #modal-vip .modal-card {
    top: 43%;                 /* ignora --modal-top global só no VIP */
    left: 50%;
    transform: translate(-50%, calc(-50% + 10px)) 
               scaleX(calc(var(--modal-scale-x) * 0.96)) 
               scaleY(calc(var(--modal-scale-y) * 0.96));
    opacity: 0;               /* mantém a animação de entrada */
  }
   #modal-vip.open .modal-card {
    transform: translate(-50%, -50%) 
               scaleX(var(--modal-scale-x)) 
               scaleY(var(--modal-scale-y));
    opacity: 1;
  }
   #modal-vip {
     /* controles rápidos (ajuste se quiser): */
     --vip-text-align: left;
     --vip-text-align2: center;      /* opções: left | center | right */
     --vip-pad-left: 24px;       /* “empurra” conteúdo para a direita */
     --vip-pad-right: 24px;      /* “empurra” conteúdo para a esquerda */
  }
   #modal-vip .modal-title {
     font-size: 64px;            /* maior que o padrão */
     letter-spacing: 2px;
  }
   #modal-vip .vip-subtitle {
     font-size: 32px;
     margin: 8px 0 18px;
     text-align: var(--vip-text-align2);
     border: 6px solid rgba(202, 183, 10, 0.808);
     border-radius: 14px; 
     background-size: 0% auto;
     background: rgba(231, 183, 23, 0.815); 
     color: rgb(0, 0, 0);
  }
   #modal-vip .modal-body {
      /* grid simples para ganhar espaçamento entre blocos */
      display: grid;
      gap: 16px;                  /* ↑ mais espaçamento entre seções */
      padding-left: var(--vip-pad-left);
      padding-right: var(--vip-pad-right);
      text-align: var(--vip-text-align);
   }
   #modal-vip .vip-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
   }
   #modal-vip .vip-tab {
      border: 4px solid rgba(202, 183, 10, 0.65);
      border-radius: 12px;
      background: rgba(34, 40, 51, 0.95);
      color: var(--modal-gold);
      font-size: 22px;
      font-weight: 700;
      min-height: 58px;
   }
   #modal-vip .vip-tab.is-active {
      background: rgba(231, 183, 23, 0.85);
      color: #0b0f16;
   }
   #modal-vip .vip-tab.is-current-active {
      border-color: rgba(96, 255, 164, 0.95);
      box-shadow: 0 0 0 2px rgba(96, 255, 164, 0.28) inset;
   }
   #modal-vip .vip-tab:disabled {
      opacity: 0.75;
      cursor: not-allowed;
   }
   #modal-vip .vip-plan-summary {
      font-size: 26px;
      text-align: center;
      color: var(--modal-gold);
      font-weight: 700;
   }
   #modal-vip .vip-benefits {
      margin: 0;
      padding-left: 28px;         /* recuo da lista */
   }
   #modal-vip .vip-benefits li {
      font-size: 26px;
      line-height: 1.35;
      margin: 6px 0;              /* espaço entre itens */
   }
   #modal-vip .vip-footnote li {
      font-size: 22px;
      opacity: 0.9;
   }
   #modal-vip .vip-countdown {
      font-size: 32px;
      margin: 4px 0 12px;
   }
   #modal-vip .vip-actions {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;                  /* espaço entre preço e botão */
     margin-top: 10px;
  }
   #modal-vip .vip-price {
     font-size: 32px;
  }
   #modal-vip #btn-vip-purchase {
     min-width: 340px;
     min-height: 84px;           /* botão maior */
     font-size: calc(var(--btn-font-size) + 4px);
     border: 6px solid rgba(202, 183, 10, 0.808);
     border-radius: 14px; 
     background: rgba(231, 183, 23, 0.815); 
     color: rgb(0, 0, 0);
  }

  #modal-habitat .vip-collect-badge {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(212,175,55,0.55);
    background: rgba(212,175,55,0.12);
    color: var(--modal-gold);
    font-size: var(--btn-font-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
/* ===========================
   Ajustes VISUAIS — FRIENDS
   (escopo só neste modal)
   =========================== */
   #modal-friends .modal-card {
    top: 38%;                 /* ignora --modal-top global só no VIP */
    left: 50%;
    transform: translate(-50%, calc(-50% + 10px)) 
               scaleX(calc(var(--modal-scale-x) * 0.96)) 
               scaleY(calc(var(--modal-scale-y) * 0.96));
    opacity: 0;               /* mantém a animação de entrada */
  }
   #modal-friends.open .modal-card {
    transform: translate(-50%, -50%) 
               scaleX(var(--modal-scale-x)) 
               scaleY(var(--modal-scale-y));
    opacity: 1;
  }
  #modal-friends .modal-card-inner {
    max-height: calc(100% - 60px);
    overflow-y: auto;
  }
  #modal-friends .modal-title {
    font-size: 48px;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  #modal-friends .modal-body {
    line-height: 1.35;
  }
  #modal-friends .friends-subtitle {
    font-size: 36px;
    color: var(--modal-gold);
    margin: 0 0 8px 0;
  }
  #modal-friends .friends-link-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 16px;
  }
  #modal-friends .friends-link-row input#friends-link {
    flex: 1;
    min-height: 52px;
    padding: 10px 12px;
    font-size: 28px;
    border: 4px solid rgba(212,175,55,0.45);
    border-radius: 10px;
    background: rgba(212,175,55,0.08);
    color: var(--modal-fg);
  }
  #modal-friends .friends-stats > div {
    font-size: 28px;
    line-height: 1.25;
    margin: 4px 0;
  }
  #modal-friends .btn-primary {
    min-height: 64px;
    min-width: 220px;
    font-size: 28px;
    border: 3px solid rgba(212,175,55,0.75);
    border-radius: 12px;
    background: rgba(212,175,55,0.85);
    color: #000;
  }
  #modal-friends .friends-history-title {
    font-size: 28px;
  }
  #modal-friends .friends-history-table-wrap {
    max-height: 360px;
  }
  #modal-friends .friends-history-table thead th {
    font-size: 22px;
    padding: 12px 8px;
  }
  #modal-friends .friends-history-table tbody td {
    font-size: 24px;
    padding: 12px 8px;
  }
  #modal-friends .friends-history-avatar,
  #modal-friends .friends-history-avatar-fallback {
    width: 56px;
    height: 56px;
  }
  #modal-friends .friends-eligible {
    min-width: 74px;
    font-size: 18px;
  }
  #modal-friends .friends-history-empty {
    font-size: 22px;
  }
  
  /* ===========================
     Ajustes VISUAIS — MENU
     (escopo só neste modal)
     =========================== */
  
  #modal-menu .modal-card {
    top: 38%;                 /* ignora --modal-top global só no VIP */
    left: 50%;
    transform: translate(-50%, calc(-50% + 10px)) 
               scaleX(calc(var(--modal-scale-x) * 0.96)) 
               scaleY(calc(var(--modal-scale-y) * 0.96));
    opacity: 0;               /* mantém a animação de entrada */
  }
  #modal-menu.open .modal-card {
    transform: translate(-50%, -50%) 
               scaleX(var(--modal-scale-x)) 
               scaleY(var(--modal-scale-y));
    opacity: 1;
  }
  
  
     
  #modal-menu .modal-card-inner {
    max-height: calc(100% - 60px);
    overflow-y: auto;
  }
  #modal-menu .modal-title {
    font-size: 50px;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  #modal-menu .modal-body {
    line-height: 1.35;
  }
  #modal-menu .menu-section {
    padding: 10px 0 14px;
    border-top: 1px solid rgba(212,175,55,0.18);
  }
  #modal-menu .menu-section:first-child {
    border-top: 0;
  }
  #modal-menu .menu-subtitle {
    font-size: 36px;
    color: var(--modal-gold);
    margin: 0 0 8px 0;
  }
  #modal-menu .menu-sound-row,
  #modal-menu .menu-wallet-row,
  #modal-menu .menu-links-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
  }
  #modal-menu .menu-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 26px;
  }
  #modal-menu .menu-volume-row {
    display: grid;
    grid-template-columns: minmax(180px, auto) 1fr auto;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
  }
  #modal-menu .menu-volume-label {
    font-size: 24px;
    color: var(--modal-fg);
    white-space: nowrap;
  }
  #modal-menu #sound-volume {
    width: 100%;
    accent-color: #d4af37;
    min-height: 28px;
  }
  #modal-menu #sound-volume:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  #modal-menu .menu-volume-value {
    min-width: 56px;
    text-align: right;
    font-size: 24px;
    font-weight: 700;
    color: var(--modal-gold);
  }
  #modal-menu .btn-primary {
    min-height: 64px;
    min-width: 240px;
    font-size: 28px;
    border: 3px solid rgba(212,175,55,0.75);
    border-radius: 12px;
    background: rgba(212,175,55,0.85);
    color: #000;
  }
  #modal-menu .menu-lang-row .menu-lang-btn {
    min-width: 120px;
  }
  #modal-menu .menu-lang-row .menu-lang-btn.is-active {
    background: #f7df86;
    border-color: #f7df86;
    box-shadow: 0 0 0 2px rgba(247, 223, 134, 0.25) inset;
  }
  
  /* Ajuste fino de espaçamento vertical padrão em parágrafos dentro dos dois modais */
  #modal-friends .modal-body p,
  #modal-menu .modal-body p {
    margin: 6px 0 10px;
    font-size: 26px;
  }
  
  #modal-rent  .modal-close { position: absolute; top: 350px; right: 30px; width: 70px; height: 70px; border: 2px solid #b22222; border-radius: 12px; background: #e53935; color: #000000; font-size: 68px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }
  .history-scroll {
    max-height: 270px;     /* ~5 linhas de 1.8–2.0em cada */
    overflow-y: auto;
    margin-top: 6px;
    padding-right: 2px;    /* espaço para a scrollbar */
  }
  .history-scroll table {
    width: 100%;
    border-collapse: collapse;
  }
.history-scroll table th,
.history-scroll table td {
  padding: 6px 8px;
  font-size: 26px;
  line-height: 1.25;
}

/* Zebra: alterna fundo de linhas para leitura rápida */
.history-scroll table tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.03);
}
@media (prefers-color-scheme: dark) {
  .history-scroll table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.04);
  }
}

/* Cabeçalho “grudado” no topo (se existir THEAD) */
.history-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit; /* mantém o mesmo fundo do container */
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
@media (prefers-color-scheme: dark) {
  .history-scroll thead th {
    border-bottom-color: rgba(255, 255, 255, 0.2);
  }
}

.history-scroll table td:nth-child(1),
.history-scroll table th:nth-child(1) {
  white-space: nowrap;
}

/* Coluna 2 (Local) pode quebrar */
.history-scroll table td:nth-child(2),
.history-scroll table th:nth-child(2) {
  white-space: normal;
  word-break: break-word;
}

/* Coluna 3 (Amount) alinhada à direita */
.history-scroll table td:nth-child(3),
.history-scroll table th:nth-child(3) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Coluna 4 (Status) pode quebrar */
.history-scroll table td:nth-child(4),
.history-scroll table th:nth-child(4) {
  white-space: normal;
  word-break: break-word;
}

/* Scrollbar discreta (browsers WebKit/Blink) */
.history-scroll::-webkit-scrollbar {
  width: 8px;
}
.history-scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.25);
}
.history-scroll::-webkit-scrollbar-track {
  background: transparent;
}
@media (prefers-color-scheme: dark) {
  .history-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
  }
}
.inventory-confirm .confirm-card {
  width: 800px; height: 250px;
  background: var(--modal-bg);
  color: var(--modal-fg);
  border: 10px solid var(--modal-gold);
  border-radius: 14px; padding: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  display: grid; align-content: center; justify-items: center; gap: 16px;
}
.inventory-confirm {
  font-size: 32px;
}
.inventory-confirm .confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
  font-size: 22px;
  color: #9aa3a0;
}
.inventory-confirm .btn { 
  min-width: 220px; 
  min-height: 74px; 
  font-size: 36px;
  border: 6px solid rgba(236, 195, 8, 0.815);
  border-radius: 14px; 
  background: rgba(231, 183, 23, 0.815); 
  color: rgb(0, 0, 0);
}

/* ========================================
   ANIMAÇÕES DE REORGANIZAÇÃO DOS SLOTS
   ======================================== */

/* Container durante reorganização */
#habitat-grid.reorganizing {
  position: relative;
  overflow: visible; /* Permite que elementos animados saiam dos limites */
}

/* Transições suaves para os mascotes */
#habitat-grid .pet-img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

/* Durante reorganização, mascotes ficam acima de outros elementos */
#habitat-grid.reorganizing .pet-img {
  z-index: 10;
  transform-origin: center center;
}

/* Efeito visual sutil de "elevação" durante movimento */
#habitat-grid.reorganizing .slot.has-pet {
  transform: translateZ(0); /* Força aceleração de hardware */
}

/* Slots vazios ficam com opacidade reduzida durante reorganização */
#habitat-grid.reorganizing .slot:not(.has-pet) {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* Slots com mascotes mantêm destaque durante reorganização */
#habitat-grid.reorganizing .slot.has-pet {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Efeito de "pulse" sutil nos slots durante reorganização */
@keyframes slot-pulse {
  0%, 100% { 
    border-color: rgba(212, 175, 55, 0.35);
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  }
  50% { 
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
  }
}

#habitat-grid.reorganizing .slot {
  animation: slot-pulse 2s ease-in-out infinite;
}

/* Remove animações quando reorganização termina */
#habitat-grid:not(.reorganizing) .slot,
#habitat-grid:not(.reorganizing) .pet-img {
  animation: none;
  transition: none;
}

/* Smooth re-entrance para slots após reorganização */
#habitat-grid .slot {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Melhora performance durante animações */
#habitat-grid.reorganizing {
  will-change: transform;
}

#habitat-grid.reorganizing .pet-img {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}