/* Só o que o Tailwind não cobre bem com utilitários. */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.thin-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.thin-scroll::-webkit-scrollbar { width: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 6px; }

:where(a, button, input, select, textarea):focus-visible { outline: 2px solid #ff5e8a; outline-offset: 3px; border-radius: 6px; }

/* número gigante do Top 10 (contorno) */
.t10-num {
  font-weight: 900; letter-spacing: -.06em; line-height: .74;
  font-size: clamp(120px, 15vw, 230px); color: #13131b;
  -webkit-text-stroke: 2.5px rgba(255,255,255,.34); text-shadow: 0 8px 30px rgba(0,0,0,.5);
}

/* clamp de linhas */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* legenda do player (valores vindos do painel de legenda) */
:root { --cc-size: 18px; --cc-pos: 12%; --cc-color: #fff; --cc-bg: rgba(0,0,0,.55); }
.cc-cap { position: absolute; left: 6%; right: 6%; bottom: var(--cc-pos); z-index: 6; text-align: center; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cc-txt { display: inline; padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: var(--cc-size); line-height: 1.3; color: var(--cc-color); background: var(--cc-bg); text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* range inputs */
input[type=range].nv-range { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; height: 22px; }
input[type=range].nv-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); }
input[type=range].nv-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #ff2d6b; margin-top: -6px; box-shadow: 0 0 0 4px rgba(255,45,107,.25); }
input[type=range].nv-range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); }
input[type=range].nv-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #ff2d6b; }

/* spinner */
.nv-spin { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: #ff2d6b; animation: nvspin .8s linear infinite; }
@keyframes nvspin { to { transform: rotate(360deg); } }

/* cartão: zoom suave da capa */
@media (hover: hover) {
  .card:hover .card-img { transform: scale(1.06); }
  .card:hover .card-ring { opacity: 1; }
}

/* bottom nav: respeita o notch do iPhone */
.safe-b { padding-bottom: max(8px, env(safe-area-inset-bottom)); }