/**
 * css/base.css — reset, tipografia base, layout raiz.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  overflow-x: hidden; /* reforço: impede overflow horizontal também no html */
}
body {
  margin: 0;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* app-like: sem scroll de página */
  overscroll-behavior: none;
}
img,
canvas,
svg {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-tertiary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* -----------------------------------------------------------------------
 * App shell
 * --------------------------------------------------------------------- */
.app-shell {
  position: relative;
  height: 100vh; /* fallback pra navegadores sem svh */
  height: 100svh; /* estável: não recalcula quando a barra do navegador
                      some/aparece, evitando o "pulo" de layout no celular
                      durante o carregamento (diferente de 100dvh) */
  width: 100vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* trava a coluna em 100% do
                                             container — sem isso, o item
                                             de grid herda min-width: auto
                                             e o texto do "now playing" com
                                             white-space: nowrap empurra a
                                             coluna (e o app inteiro) além
                                             de 100vw quando o nome é longo */
  grid-template-rows: auto auto minmax(0, 1fr) auto; /* minmax(0, 1fr) na
                                             fileira do .hero — mesmo
                                             raciocínio do minmax acima,
                                             mas no eixo vertical: sem
                                             isso, uma fileira "1fr" tem
                                             altura MÍNIMA baseada no
                                             próprio conteúdo. Em telas
                                             de TV (responsive.css deixa
                                             título/orbe bem maiores), esse
                                             mínimo passa a exceder o
                                             espaço que sobra dentro dos
                                             100svh fixos — a grade "estoura"
                                             a altura da tela e, como não
                                             há scroll (overflow:hidden
                                             acima), a última fileira (o
                                             dock "Tocando agora") é cortada
                                             sem aviso. Com minmax(0, 1fr),
                                             a fileira respeita o espaço
                                             real disponível em vez do
                                             mínimo do conteúdo. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.reduce-motion #bg-canvas {
  opacity: 0.6;
}
/* -----------------------------------------------------------------------
 * Topbar
 * --------------------------------------------------------------------- */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 4vw, 40px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand__logo {
  height: 28px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(76, 141, 255, 0.35));
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}
.connection {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: background 0.4s var(--ease-standard);
}
.live-dot[data-state='live'] {
  background: var(--accent-tertiary);
  box-shadow: 0 0 0 0 rgba(56, 225, 198, 0.5);
  animation: live-pulse 2s ease-out infinite;
}
.live-dot[data-state='offline'] {
  background: var(--state-danger);
}
.live-dot[data-state='reconnecting'],
.live-dot[data-state='connecting'],
.live-dot[data-state='error'] {
  background: var(--state-warning);
  animation: live-pulse-warn 1.1s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(56, 225, 198, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(56, 225, 198, 0); }
}
@keyframes live-pulse-warn {
  0% { box-shadow: 0 0 0 0 rgba(255, 180, 84, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(255, 180, 84, 0); }
}