/* ovos.css -- página /breeding/ovos. Tom de casca quente sobre os tokens do codex. */
.ov{ --ov-cor:#e8b86a; }
.ov-painel{
  margin-bottom:1.5rem; padding:1.25rem; border-radius:18px; border:1px solid var(--hairline);
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%); box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.ov-titulo, .ov-config h2{ display:flex; align-items:center; gap:.6rem; margin:0 0 .75rem; font-size:1.05rem; font-weight:700; color: var(--text-bright); }
.ov-titulo i, .ov-config h2 i{ color: var(--ov-cor); }
.ov-sub{ margin:-.35rem 0 1rem; font-size:.85rem; color: var(--text-dim); }
.ov-nota{ margin:.9rem 0 0; font-size:.78rem; color: var(--text-dim); max-width:90ch; }

.ov-config{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  border-color: color-mix(in srgb, var(--ov-cor) 40%, var(--hairline));
  background: radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--ov-cor) 13%, transparent), transparent 60%), linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
}
.ov-config-texto{ flex:1 1 380px; min-width:0; }
.ov-config-texto p{ margin:0; font-size:.88rem; color: var(--text); max-width:70ch; }
.ov-config-campo{ display:flex; flex-direction:column; gap:.35rem; min-width:200px; }
.ov-config-campo span{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); }
.ov-config-campo input{ font-size:1.4rem; font-weight:700; font-variant-numeric: tabular-nums; }
.ov-config-campo input:focus-visible{ outline:2px solid var(--ov-cor); outline-offset:1px; }

.ov-faixas{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:.75rem; }
.ov-faixa{
  display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:1rem .75rem; border-radius:14px; text-align:center;
  background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.05);
}
.ov-faixa img{ height:calc(56px * var(--escala, 1)); width:auto; max-height:112px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.ov-faixa-nome{ font-weight:700; color: var(--text-bright); }
.ov-faixa-nome small{ display:block; font-weight:500; font-size:.7rem; color: var(--text-dim); }
.ov-faixa-rar{ font-size:.75rem; color: var(--text-dim); }
.ov-faixa-tempo{ font-size:1.5rem; font-weight:800; color: var(--ov-cor); font-variant-numeric: tabular-nums; line-height:1.1; }
.ov-faixa-div{ font-size:.7rem; color: var(--text-dim); font-family: var(--font-mono); }

.ov-temps{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:.6rem; }
.ov-temp{ display:flex; flex-direction:column; padding:.75rem .9rem; border-radius:12px; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.05); }
.ov-temp b{ font-size:1.4rem; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.ov-temp.is-bom b{ color:#4cc38a; }
.ov-temp.is-ruim b{ color:#ef6b6b; }
.ov-temp span{ font-size:.8rem; color: var(--text); }
.ov-temp small{ font-size:.7rem; color: var(--text-dim); }

.ov-pals{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:.45rem; }
.ov-pal{
  display:grid; grid-template-columns: 40px 1fr 32px auto; align-items:center; gap:.55rem; padding:.4rem .6rem; border-radius:11px;
  text-decoration:none; color: var(--text); background: var(--panel-2); border:1px solid var(--hairline);
}
.ov-pal:hover, .ov-pal:focus-visible{ border-color: color-mix(in srgb, var(--ov-cor) 55%, transparent); color: var(--text-bright); }
.ov-pal-img{ width:40px; height:40px; object-fit:contain; }
.ov-pal-nome{ font-weight:600; min-width:0; overflow-wrap:anywhere; }
.ov-pal-ovo{ width:32px; height:32px; object-fit:contain; }
.ov-pal-tempo{ font-weight:700; color: var(--ov-cor); font-variant-numeric: tabular-nums; font-size:.85rem; text-align:right; }
.montador-notas code{ font-family: var(--font-mono); font-size:.92em; color: var(--text); }