/* =====================================================
   AGING CALC — VISUAL PREMIUM (TioLeoBPT)
   NÃO altera estrutura nem JS
===================================================== */

.aging-ui {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* CARD PRINCIPAL */
.aging-ui .container {
  background: radial-gradient(circle at top, #1a1a1a, #000 70%);
  border-radius: 26px;
  padding: 24px 18px 28px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.9),
    inset 0 0 0 1px #222;
}

/* TÍTULO */
.aging-ui h3 {
  text-align: center;
  font-weight: 300;
  margin-bottom: 18px;
}

.aging-ui h3 span {
  background: #ffd564;
  color: #111;
  border-radius: 999px;
  padding: 4px 16px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(255,213,100,.45);
}

/* LABELS */
.aging-ui label {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #bdbdbd;
}

/* SELECTS / INPUTS */
.aging-ui select,
.aging-ui input[type="number"] {
  width: 100% !important;
  background: linear-gradient(#1b1b1b, #111);
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 10px 12px;
  color: #cccccc;
  font-size: .95rem;
}

.aging-ui select:focus,
.aging-ui input:focus {
  outline: none;
  border-color: #00eaff;
  box-shadow: 0 0 0 2px rgba(0,234,255,.25);
}

/* CONTAINERS DE SELECT */
.container-items > label {
  margin-top: 10px;
  display: block;
}

/* BLOCO STATS */
#weapon-stats,
#armor-stats,
#shield-stats,
#bracelet-stats {
  background: linear-gradient(#050505, #000);
  border-radius: 20px;
  padding: 14px 12px 16px;
  margin-top: 18px;
  box-shadow: inset 0 0 0 1px #222;
}

/* NOME DO ITEM */
#weapon-name,
#defense-name,
#shield-name,
#bracelet-name {
  background: #1e1e1e;
  color: #fff;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: .8rem;
  box-shadow: inset 0 0 0 1px #333;
}

/* LINHAS DE STATUS */
.atk-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  font-size: .85rem;
}

/* BOTÕES PERF */
.perf-btn {
  opacity: .75;
  transition: .15s;
}
.perf-btn:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* AGING + DESPERTADO */
#aging-container {
  margin-top: 18px;
  padding: 14px 10px;
  background: #000;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px #222;
}

.age-desp-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* CHECKBOX */
#despertado {
  accent-color: #ffd564;
}

/* BOTÃO CALCULAR */
#calculate {
  margin-top: 14px;
  background: linear-gradient(#ffe08a, #ffd564);
  color: #111;
  border-radius: 999px;
  border: none;
  padding: 10px 30px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255,213,100,.45);
  transition: .15s;
}

#calculate:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(255,213,100,.65);
}

/* TERMINAL GAMER */
#result {
  margin-top: 18px;
}

#result pre {
  background: #000;
  border-radius: 18px;
  padding: 18px 14px;
  color: #00ff88;
  font-size: .9rem;
  line-height: 1.45;
  box-shadow:
    inset 0 0 0 1px #1b1b1b,
    0 0 30px rgba(0,255,136,.15);
}

#result pre::before {
  content: "> RESULTADO";
  display: block;
  margin-bottom: 10px;
  color: #00eaff;
  font-weight: 700;
}

/* RESPONSIVO */
@media (max-width: 480px) {
  .aging-ui .container {
    padding: 20px 14px;
  }

  #calculate {
    width: 100%;
  }
}



/* =====================================================
   FIX DEFINITIVO — FORÇAR LAYOUT EM COLUNA
===================================================== */

/* 1️⃣ O wrapper geral NÃO pode ser flex em linha */
.aging-ui {
  display: block !important;
}

/* 2️⃣ Mata qualquer layout horizontal antigo */
.calc-box {
  display: block !important;
}

/* 3️⃣ Container principal vira coluna */
.calc-box > .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* 4️⃣ TODOS os filhos viram blocos verticais */
.calc-box > .container > * {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 5️⃣ Remove divisão esquerda/direita dos stats */
.weapon-stats-left,
.weapon-stats-right {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
}

/* 6️⃣ Espaçamento vertical consistente */
.container-items,
#weapon-stats,
#armor-stats,
#shield-stats,
#bracelet-stats,
#aging-container,
#result {
  margin-top: 18px !important;
}


/* ===============================
   FONTE GLOBAL
================================ */
.aging-ui,
.aging-ui * {
  font-family: "Comic Neue", system-ui, sans-serif !important;
}

/* ===============================
   SELECT / INPUT — FOCO AZUL
================================ */
.aging-ui select,
.aging-ui input {
  border: 1px solid #2a2a2a;
  background: #111;
  color: #fff;
}

/* foco */
.aging-ui select:focus,
.aging-ui input:focus {
  outline: none;
  border-color: #00eaff;
  box-shadow: 0 0 0 2px rgba(0,234,255,.35);
}

/* opções do select */
.aging-ui select option {
  background: #111;
  color: #fff;
}

/* hover / selecionado */
.aging-ui select option:checked,
.aging-ui select option:hover {
  background: #1f1f1f;
  color: #00eaff;
}

/* ===============================
   INPUTS MAIS COMPACTOS
================================ */
.aging-ui input[type="number"],
.aging-ui select {
  max-width: 320px;
  max-height: 35px;
  margin: 0 auto;
  display: block;
}

/* ===============================
   BOTÕES CENTRALIZADOS
================================ */
.aging-ui button,
#calculate {
  display: block;
  margin: 16px auto;
}

/* botão perf menor e alinhado */
.perf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===============================
   RESULTADO CENTRALIZADO
================================ */
#result {
  text-align: center;
}

#result pre {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  
}

/* ===============================
   PADRÃO ENTRE OS DOIS MODOS
================================ */
.stats-wrapper {
  max-width: 720px;
  margin: 0 auto;
}

.container-items {
  max-width: 720px;
  margin: 0 auto;
}

#aging-container {
  max-width: 720px;
  margin: 18px auto 0;
}


/* ===============================
   SELEÇÃO — MAIS COMPACTA
================================ */
.container-items {
  gap: 6px;
}

.container-items label {
  margin-bottom: 2px;
  font-size: 13px;
}

.container-items select {
  margin-bottom: 8px;
}


/* ===============================
   STATS — MENOS ESPAÇO VERTICAL
================================ */
.stats-wrapper {
  padding: 14px 14px;
}

.item-image-container {
  margin: 6px 0 10px;
}

.atk-group {
  margin-bottom: 8px;
}


/* inputs mais baixos */
.aging-ui input[type="number"],
.aging-ui select {
  height: 35px;
  font-size: 14px;
}

/* ===============================
   AGING — COMPACTAR
================================ */
#aging-container {
  margin-top: 10px;
  padding-top: 6px;
}

#aging-container label {
  margin-bottom: 4px;
}


/* ===============================
   RESULTADO — MAIS PRÓXIMO
================================ */
#result {
  margin-top: 12px;
}

#result pre {
  margin-top: 25px;
}

/* ===============================
   TÍTULO — TEXTO AZUL
================================ */
.calc-label {
  color: #00eaff;
  font-size: 14px;
  letter-spacing: .5px;
  display: block;
  margin-bottom: 6px;
}

/* badge azul */
.aging-badge-blue {
  background: linear-gradient(#9be6ec, #00eaff);
  color: #000;
  box-shadow: 0 6px 20px rgba(0,234,255,.45);
}

.aging-title {
  text-align: center;
  margin-bottom: 14px;
}

/* ===============================
   BADGE — AGING → LIMPO (AZUL)
================================ */
.aging-ui .aging-badge {
  background: linear-gradient(#9be6ec, #00eaff) !important;
  color: #000 !important;
  box-shadow: 0 6px 20px rgba(0,234,255,.45) !important;
  font-size: 18px;
}

/* ===============================
   INPUTS DE STATUS — COMPACTOS
   (altura + largura)
================================ */
.atk-group input[type="number"] {
  height: 28px;          /* altura reduzida */
  width: 0px;           /* largura menor */
  padding: 2px 6px;
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

/* VERSAO FINAL */
/* =====================================================
   AGING CALC — UI FINAL (TioLeoBPT)
   Base única para:
   - LIMPO → AGING
   - AGING → LIMPO
===================================================== */

/* ===============================
   RESET / BASE
================================ */
.aging-ui,
.aging-ui * {
  box-sizing: border-box;
  font-family: "Comic Neue", system-ui, sans-serif;
}

/* ===============================
   WRAPPER GERAL
================================ */
.aging-ui {
  display: block;
  padding: 20px 0;
}

.calc-box {
  display: block;
}

.calc-box > .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 720px;
  margin: 0 auto;
}

/* ===============================
   TÍTULO
================================ */
.aging-title {
  text-align: center;
  margin-bottom: 14px;
}

.calc-label {
  display: block;
  margin-bottom: 6px;
  color: #dffcff;
  background: none;
  font-size: 14px;
  opacity: .9;
}

.aging-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 18px;
  font-weight: bold;
  font-size: 13px;
  background: linear-gradient(#9be6ec, #00eaff);
  color: #000;
  box-shadow: 0 6px 20px rgba(0,234,255,.45);
}

/* ===============================
   SEÇÃO DE SELEÇÃO
================================ */
.container-items {
  max-width: 720px;
  margin: 0 auto;
}

.container-items label {
  font-size: 13px;
  margin-bottom: 2px;
  color: #cccccc;
}

.container-items select {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}

/* ===============================
   SELECTS / INPUTS (BASE)
================================ */
.aging-ui select {
  width: 100%;
  background: #111;
  color: #fff;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 6px 10px;
}

.aging-ui select:focus {
  outline: none;
  border-color: #00eaff;
  box-shadow: 0 0 0 2px rgba(0,234,255,.35);
}

/* opções do select abertas */
.aging-ui select option {
  background: #111;
  color: #fff;
}

.aging-ui select option:hover,
.aging-ui select option:checked {
  background: #1f1f1f;
  color: #00eaff;
}

/* ===============================
   STATS — CARD ÚNICO
================================ */
.stats-wrapper {
  margin-top: 18px;
  background: linear-gradient(#050505, #000);
  border-radius: 24px;
  padding: 14px;
  box-shadow:
    inset 0 0 0 1px #222,
    0 14px 40px rgba(0,0,0,.7);
}

.stats-wrapper > div {
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

.stats-wrapper > div:not([hidden]) + div:not([hidden]) {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.item-name {
  text-align: center;
  margin-bottom: 8px;
}

/* ===============================
   IMAGEM DO ITEM
================================ */
.item-image-container {
  text-align: center;
  margin: 6px 0 10px;
}

.item-image {
  max-height: 72px;
}

/* ===============================
   INPUTS DE STATUS (ATK / DEF)
   👉 SOMENTE ESTES
================================ */
.atk-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.atk-group input[type="number"] {
  width: 90px;
  min-width: 90px;
  max-width: 90px;

  height: 28px;
  padding: 2px 6px;

  background: #111;
  color: #fff;
  border: 1px solid #2a2a2a;
  border-radius: 12px;

  font-size: 13px;
  text-align: center;
}

/* ===============================
   BOTÃO PERF
================================ */
.perf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===============================
   AGING (SELECT MAIS ESTREITO)
   👉 SOMENTE O SELECT DE AGING
================================ */
#aging-container {
  margin-top: 10px;
  text-align: center;
}

#aging-container label {
  display: block;
  margin-bottom: 4px;
  color: #979797;
}

/* 🔥 AQUI ESTÁ O AJUSTE PEDIDO */
#aging-container select {
  width: 140px;        /* mais estreito */
  max-width: 70px;
  margin: 0 auto;
}

/* ===============================
   BOTÃO CALCULAR
================================ */
#calculate {
  display: block;
  margin: 16px auto 0;
  padding: 8px 22px;
  border-radius: 18px;
  border: none;
  background: linear-gradient(#ffe08a, #ffd564);
  color: #000;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,213,100,.45);
}

/* ===============================
   RESULTADO
================================ */
#result {
  margin-top: 12px;
  text-align: center;
}

#result pre {
  max-width: 520px;
  margin: 35px auto 0;
  padding: 14px;
  background: #000;
  border-radius: 18px;
  color: #00ff88;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px #1b1b1b,
    0 0 30px rgba(0,255,136,.15);
}