/* calculadora-de-captura.css -- Calculadora de Captura (calculadora-de-captura.php). */

.cc{ --cc-a:#4d8dff; --cc-b:#3fbf7f; }

.cc-palco{ display:grid; grid-template-columns: minmax(280px, 380px) 1fr; gap:1.2rem; align-items:start; }
@media (max-width: 900px){ .cc-palco{ grid-template-columns: 1fr; } }

/* ---------- Controles ---------- */
.cc-controles{
  display:flex; flex-direction:column; gap:1.1rem; padding:1.2rem 1.2rem 1.3rem;
  background: linear-gradient(160deg, var(--panel-2), var(--panel)); border:1px solid var(--hairline); border-radius:16px;
}
.cc-campo label{ display:flex; justify-content:space-between; gap:.6rem; margin-bottom:.35rem; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); }
.cc-campo output{ font-family: var(--font-mono); color: var(--text-bright); letter-spacing:0; }
.cc-campo input[type=range]{ width:100%; accent-color: var(--cc-a); }
.cc-campo small{ display:block; margin-top:.2rem; color: var(--text-dim); font-size:.74rem; }

.cc-presets{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.cc-presets button{
  padding:.25rem .7rem; font-size:.78rem; color: var(--text); cursor:pointer;
  background: var(--panel); border:1px solid var(--hairline); border-radius:999px; transition: border-color .15s ease, background .15s ease;
}
.cc-presets button:hover{ border-color: var(--accent-line); }
.cc-presets button.is-ativo{ color: var(--text-bright); border-color: var(--cc-a); background: color-mix(in srgb, var(--cc-a) 16%, var(--panel)); }

/* ---------- Seletor de Pal ---------- */
.cc-pal{ position:relative; }
.cc-pal-atual, .cc-pal-itens button{
  display:flex; align-items:center; gap:.6rem; width:100%; padding:.4rem .7rem .4rem .45rem; text-align:left; color: var(--text-bright);
  background: var(--panel); border:1px solid var(--hairline); border-radius:12px; cursor:pointer;
}
.cc-pal-atual{ font-weight:600; }
.cc-pal-atual:hover, .cc-pal-atual[aria-expanded=true]{ border-color: var(--accent-line); }
.cc-pal-atual i{ margin-left:auto; color: var(--text-dim); }
.cc-pal-atual img, .cc-pal-itens img{ --rarity-color: var(--hairline); flex:none; width:38px; height:38px; object-fit:cover; border-radius:50%; border:2px solid var(--rarity-color); background: var(--panel-2); }
.cc-pal em{ font-style:normal; font-family: var(--font-mono); font-size:.8em; color: var(--text-dim); }
.cc-pal-lista{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px); padding:.5rem;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:12px; box-shadow: 0 22px 44px -18px rgba(0,0,0,.8);
}
.cc-pal-lista input{ width:100%; margin-bottom:.5rem; padding:.45rem .7rem; color: var(--text-bright); background: var(--panel); border:1px solid var(--hairline); border-radius:8px; }
.cc-pal-itens{ display:flex; flex-direction:column; gap:.2rem; max-height:320px; overflow-y:auto; }
.cc-pal-itens button{ border-color:transparent; background:transparent; padding-block:.25rem; font-weight:500; }
.cc-pal-itens button:hover, .cc-pal-itens button.is-ativo{ background: var(--panel); border-color: var(--hairline); }
.cc-vazio{ margin:.4rem; color: var(--text-dim); font-size:.85rem; }

/* ---------- Resultados ---------- */
.cc-resultados{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
@media (max-width: 640px){ .cc-resultados{ grid-template-columns: 1fr; } }
.cc-legenda{ grid-column:1 / -1; display:flex; gap:1rem; margin:0; font-size:.78rem; color: var(--text-dim); }
.cc-legenda span::before{ content:""; display:inline-block; width:.8rem; height:.8rem; margin-right:.4rem; vertical-align:-.1rem; border-radius:3px; }
.cc-legenda--a::before{ background: var(--cc-a); }
.cc-legenda--b::before{ background: var(--cc-b); }
.cc-bloco{ padding:1rem 1rem 1.1rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border:1px solid var(--hairline); border-radius:16px; }
.cc-bloco h2{ margin:0 0 .8rem; font-size:1.05rem; font-family: var(--font-display); color: var(--text-bright); }
.cc-bloco h2 small{ margin-left:.4rem; font-family: var(--font-mono); font-size:.7rem; font-weight:400; color: var(--text-dim); }
.cc-linhas{ display:flex; flex-direction:column; gap:.55rem; }
.cc-linha{ display:flex; align-items:center; gap:.7rem; }
.cc-esfera{ flex:none; display:grid; place-items:center; width:38px; height:38px; }
.cc-esfera img{ width:100%; height:100%; object-fit:contain; }
.cc-barras{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.cc-barra{ position:relative; height:17px; overflow:hidden; background: color-mix(in srgb, var(--text-dim) 16%, transparent); border-radius:5px; }
.cc-barra span{ position:absolute; inset:0 auto 0 0; border-radius:5px; transition: width .25s ease; }
.cc-barra--a span{ background: var(--cc-a); }
.cc-barra--b span{ background: var(--cc-b); }
.cc-barra b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:.68rem; font-weight:600; color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }