/* ============================================================
   REFINO.CSS
   ============================================================ */

.refino-body { background:var(--page-bg) !important; min-height:100vh; }

.refino-page {
  max-width: 1200px; margin:0 auto; padding: 24px 20px 60px;
}

/* ── CABEÇALHO ───────────────────────────────────────────────── */
.refino-header  { margin-bottom:24px; }
.refino-titulo  { font-family:'Nunito',sans-serif; font-size:1.7rem; font-weight:900; color:#20232A; margin:0 0 4px; }
.refino-sub     { font-size:.85rem; color:#74777F; margin:0; }

/* ── LAYOUT 3 COLUNAS ────────────────────────────────────────── */
.refino-layout {
  display:grid; grid-template-columns:260px 1fr 280px;
  gap:16px; align-items:start;
}

/* ── COL ESQUERDA ────────────────────────────────────────────── */
.refino-col-esq { display:flex; flex-direction:column; gap:12px; position:sticky; top:72px; }

/* Player card */
.refino-player-card {
  background:#F4F2ED; border:1px solid #D8D2C7; border-radius:14px; padding:18px;
  box-shadow: 0 5px 18px rgba(91,62,10,.13);}
.refino-player-top    { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.refino-player-avatar {
  width:60px; height:60px; border-radius:50%; background:#EDE9DE;
  border:2px solid #e67e22; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; overflow:hidden; flex-shrink:0; position:relative;
}
.refino-player-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.refino-player-lv-badge {
  position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
  background:#e67e22; color:#fff; font-size:.55rem; font-weight:900;
  padding:1px 5px; border-radius:4px; white-space:nowrap;
}
.refino-player-nome { font-family:'Bangers',cursive; font-size:1rem; color:#20232A; letter-spacing:.5px; }
.refino-player-grad { font-size:.72rem; color:#e67e22; font-weight:700; }
.refino-player-lv   { font-size:.68rem; color:#74777F; font-weight:700; }
.refino-player-divider { height:1px; background:#D9D5CC; margin:0 0 12px; }
.refino-player-pc      { }
.refino-player-pc-label { font-size:.7rem; color:#74777F; font-weight:700; display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.refino-player-pc-icon  { font-size:.85rem; }
.refino-player-pc-val   { font-size:1.4rem; font-weight:900; color:#20232A; font-family:'Nunito',sans-serif; }

/* Inventário */
.refino-inv-card {
  background:#F4F2ED; border:1px solid #D9D5CC; border-radius:14px; overflow:hidden;
}
.refino-inv-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #DDD8CF;
}
.refino-inv-titulo { font-size:.78rem; font-weight:800; color:#74777F; }
.refino-inv-count  { font-size:.7rem; color:#74777F; font-weight:600; }
.refino-inv-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:12px;
}
.refino-inv-item {
  aspect-ratio:1; background:#EDE9DE; border:2px solid #D9D5CC;
  border-radius:9px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:1.4rem; position:relative;
  transition:border-color .15s, transform .1s; overflow:hidden;
}
.refino-inv-item img   { width:100%; height:100%; object-fit:cover; border-radius:7px; }
.refino-inv-item:hover { border-color:#e67e22; transform:scale(1.04); }
.refino-inv-item.active { border-color:#e67e22; box-shadow:0 0 0 3px rgba(230,126,34,.2); }
.refino-inv-refbadge {
  position:absolute; bottom:2px; right:3px;
  font-size:.55rem; font-weight:900; color:#f1c40f; background:rgba(0,0,0,.8);
  padding:1px 4px; border-radius:3px; line-height:1.2;
}
.refino-inv-vazio {
  aspect-ratio:1; background:#EDE9DE; border:1px dashed #D9D5CC;
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:#D9D5CC; font-size:1rem;
}

/* ── COL CENTRAL ─────────────────────────────────────────────── */
.refino-main-card {
  background:#F4F2ED; border:1px solid #D9D5CC; border-radius:16px;
  overflow:hidden; min-height:500px;
}

/* Vazio */
.refino-vazio {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:80px 20px; cursor:pointer;
  transition:background .15s;
}
.refino-vazio:hover { background:#D9D5CC; }
.refino-vazio-icon { font-size:2.5rem; opacity:.4; }
.refino-vazio-txt  { font-size:.88rem; color:#74777F; font-weight:600; }

/* Panel item */
.refino-item-panel { padding:28px 32px; display:flex; flex-direction:column; gap:18px; }
.refino-item-panel.hidden { display:none; }

.refino-item-tipo { font-size:.68rem; font-weight:800; color:#74777F; letter-spacing:2px; text-align:center; text-transform:uppercase; }
.refino-item-nome-row { display:flex; align-items:center; justify-content:center; gap:10px; }
.refino-item-nome      { font-family:'Bangers',cursive; font-size:1.6rem; color:#20232A; letter-spacing:1px; }
.refino-item-refino-badge {
  font-family:'Nunito',sans-serif; font-size:.95rem; font-weight:900; color:#e67e22;
}

/* Imagem */
.refino-item-img-area {
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:20px 0; height:220px;
}
.refino-item-img-glow {
  position:absolute; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(230,126,34,.15) 0%, transparent 70%);
  pointer-events:none;
}
.refino-item-img-wrap {
  width:160px; height:160px; background:#EDE9DE; border-radius:50%;
  border:2px solid #D9D5CC; display:flex; align-items:center; justify-content:center;
  font-size:4rem; overflow:hidden; position:relative; z-index:1;
}
.refino-item-img-wrap img { width:100%; height:100%; object-fit:cover; }
.refino-item-estrela {
  position:absolute; top:20px; right:calc(50% - 90px);
  color:#f1c40f; font-size:1.4rem; opacity:.7; animation:spin 4s linear infinite;
  z-index:2;
}
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Bónus */
.refino-bonus-section { background:#EDE9DE; border:1px solid #D9D5CC; border-radius:12px; padding:16px; }
.refino-bonus-titulo  { font-size:.62rem; font-weight:900; color:#e67e22; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.refino-bonus-row {
  display:flex; align-items:center; gap:8px; padding:6px 0;
  border-bottom:1px solid #DDD8CF; font-size:.9rem;
}
.refino-bonus-row:last-child { border-bottom:none; }
.refino-bonus-key   { flex:1; color:#74777F; font-weight:600; }
.refino-bonus-atual { color:#74777F; font-weight:800; font-family:'Nunito',sans-serif; }
.refino-bonus-arrow { color:#74777F; font-size:.8rem; margin:0 4px; }
.refino-bonus-prox  { color:#2ecc71; font-weight:900; font-family:'Nunito',sans-serif; }

/* Recursos */
.refino-recursos {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.refino-recurso-item {
  background:#EDE9DE; border:1px solid #D9D5CC; border-radius:10px;
  padding:12px 14px; display:flex; align-items:center; gap:10px;
}
.refino-recurso-img   { font-size:1.4rem; }
.refino-recurso-label { font-size:.62rem; font-weight:800; color:#74777F; text-transform:uppercase; letter-spacing:.8px; margin-bottom:3px; }
.refino-recurso-val   { font-size:1rem; font-weight:900; color:#20232A; font-family:'Nunito',sans-serif; }

/* Toggle proteção */
.refino-toggle-wrap {
  display:flex; align-items:center; gap:14px;
  background:#EDE9DE; border:1px solid #D9D5CC; border-radius:10px;
  padding:14px; cursor:pointer;
}
.refino-toggle-switch { position:relative; width:44px; height:24px; flex-shrink:0; }
.refino-toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.refino-toggle-slider {
  position:absolute; inset:0; background:#D9D5CC; border-radius:99px;
  transition:background .2s; cursor:pointer;
}
.refino-toggle-slider::before {
  content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:transform .2s;
}
.refino-toggle-switch input:checked + .refino-toggle-slider { background:#e67e22; }
.refino-toggle-switch input:checked + .refino-toggle-slider::before { transform:translateX(20px); }
.refino-toggle-titulo { font-size:.84rem; font-weight:800; color:#74777F; display:block; margin-bottom:2px; }
.refino-toggle-desc   { font-size:.72rem; color:#74777F; line-height:1.4; }

/* Taxa de sucesso */
.refino-taxa-section  { }
.refino-taxa-header   { display:flex; align-items:center; justify-content:space-between; font-size:.82rem; color:#74777F; font-weight:700; margin-bottom:8px; }
.refino-taxa-pct      { font-size:1rem; font-weight:900; font-family:'Nunito',sans-serif; }
.refino-taxa-bar-bg   { height:6px; background:#EDE9DE; border-radius:99px; overflow:hidden; }
.refino-taxa-bar      { height:100%; border-radius:99px; transition:width .4s, background .4s; }

/* Botão refinar */
.refino-btn {
  width:100%; background:#e67e22; color:#fff; border:none; border-radius:12px;
  padding:16px; font-size:1rem; font-weight:900; font-family:'Nunito',sans-serif;
  cursor:pointer; transition:background .15s; letter-spacing:.3px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.refino-btn:hover    { background:#d35400; }
.refino-btn:disabled { background:#EDE9DE; color:#74777F; cursor:not-allowed; }

.refino-nota-prot { font-size:.72rem; color:#74777F; text-align:center; }
.refino-nota-prot.hidden { display:none; }

/* msg */
.msg-box { border-radius:8px; padding:0; max-height:0; overflow:hidden; transition:max-height .3s,padding .3s,margin .3s; font-size:.85rem; }
.msg-box.show    { max-height:60px; padding:9px 14px; margin-bottom:4px; }
.msg-box.success { background:rgba(46,204,113,.12); border:1px solid #2ecc71; color:#2ecc71; }
.msg-box.error   { background:rgba(231,76,60,.12);  border:1px solid #e74c3c; color:#e74c3c; }

/* ── COL DIREITA: LOG ────────────────────────────────────────── */
.refino-col-dir { position:sticky; top:72px; }
.refino-log-card {
  background:#F4F2ED; border:1px solid #D9D5CC; border-radius:14px; overflow:hidden;
}
.refino-log-titulo {
  font-family:'Bangers',cursive; font-size:1rem; color:#20232A; letter-spacing:.5px;
  padding:16px 18px; border-bottom:1px solid #DDD8CF;
}
.refino-log-lista  { max-height:520px; overflow-y:auto; }
.refino-log-empty  { font-size:.78rem; color:#74777F; text-align:center; padding:24px; font-style:italic; }

.refino-log-item {
  padding:12px 16px; border-bottom:1px solid #DDD8CF;
  display:flex; align-items:flex-start; gap:10px;
  transition:background .15s;
}
.refino-log-item:last-child { border-bottom:none; }
.refino-log-item:hover { background:#EDE9DE; }
.refino-log-status { font-size:1rem; flex-shrink:0; margin-top:1px; }
.refino-log-info   { flex:1; }
.refino-log-nome   { font-size:.82rem; font-weight:800; color:#74777F; margin-bottom:3px; }
.refino-log-detalhe { font-size:.72rem; color:#74777F; display:flex; align-items:center; gap:6px; }
.refino-log-niveis  { color:#74777F; font-weight:700; }
.refino-log-tempo   { color:#74777F; }
.refino-log-tag {
  font-size:.62rem; font-weight:800; padding:1px 6px; border-radius:4px; margin-top:3px;
  display:inline-block;
}
.log-tag-mantido  { color:#3498db; background:rgba(52,152,219,.1); border:1px solid rgba(52,152,219,.3); }
.log-tag-reduzido { color:#e74c3c; background:rgba(231,76,60,.1); border:1px solid rgba(231,76,60,.3); }

.refino-log-btn {
  width:100%; background:transparent; color:#74777F; border:1px solid #D9D5CC;
  border-radius:0; padding:12px; font-size:.78rem; font-weight:700;
  font-family:'Nunito',sans-serif; cursor:pointer; transition:all .15s;
  border-top:1px solid #DDD8CF;
}
.refino-log-btn:hover { background:#EDE9DE; color:#20232A; }

/* Modal */
.refino-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:999; }
.refino-modal-bg { position:absolute; inset:0; background:rgba(0,0,0,.7); }
.refino-modal-card {
  position:relative; background:#F4F2ED; border:1px solid #D9D5CC;
  border-radius:16px; width:480px; max-width:95vw; max-height:80vh;
  display:flex; flex-direction:column; z-index:1; overflow:hidden;
}
.refino-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid #DDD8CF; font-size:.88rem; font-weight:800; color:#20232A;
}
.refino-modal-close { background:none; border:none; color:#74777F; font-size:1.1rem; cursor:pointer; }
.refino-modal-lista { overflow-y:auto; padding:8px; }
.modal-equip-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:10px; cursor:pointer; transition:background .15s; border:1px solid transparent;
}
.modal-equip-item:hover { background:#EDE9DE; border-color:#D9D5CC; }

/* Responsive */
@media (max-width:1000px) {
  .refino-layout { grid-template-columns:220px 1fr; }
  .refino-col-dir { display:none; }
}
@media (max-width:700px) {
  .refino-layout { grid-template-columns:1fr; }
  .refino-col-esq { position:static; }
}