:root { --bg: #060607; }
html, body { margin: 0; }
/* a página rola, mas a tela é fixa: a rolagem só move o universo (ver docs/universo.md) */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.viagem { height: 500vh; }
body {
  background-color: var(--bg);
  cursor: crosshair;
}
/* com mouse, o cursor vira a mira desenhada pelo visor (capacete.js) */
html.mira, html.mira body { cursor: none; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#bg { z-index: 0; }
#c { z-index: 1; }
/* entrada: o sigilo surge do escuro quando a máscara termina de carregar (html.pronto, em particulas.js);
   o visor e a interface só acendem depois, em sequência. html.intro só existe com movimento permitido. */
html.intro #c { opacity: 0; }
html.intro.pronto #c { opacity: 1; transition: opacity 1.6s ease-out; }
html.intro:not(.pronto) :is(.logo, .rumo-cab, .rumo li, .rumo-status, .rumo ol::before, .loja,
  .central-links, .central-faixa > *, .radio) { animation-play-state: paused; }
/* o visor do capacete: por cima de tudo, mas não pega o mouse */
#hud { z-index: 4; pointer-events: none; }
/* a mira (o cursor) é desenhada num canvas à parte, acima do rádio (z-index 100) */
#mira { z-index: 101; pointer-events: none; }
/* desfoque nas bordas: o que chega perto das extremidades sai de foco, como no vidro curvo do visor.
   Três camadas, cada uma mais forte e mais perto da borda, formam o gradiente. Fica abaixo do visor. */
.borda { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.borda i { position: absolute; inset: 0; }
.borda i:nth-child(1) {
  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
  mask-image: radial-gradient(ellipse, transparent 48%, #000 68%);
  -webkit-mask-image: radial-gradient(ellipse, transparent 48%, #000 68%);
}
.borda i:nth-child(2) {
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  mask-image: radial-gradient(ellipse, transparent 58%, #000 80%);
  -webkit-mask-image: radial-gradient(ellipse, transparent 58%, #000 80%);
}
.borda i:nth-child(3) {
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  mask-image: radial-gradient(ellipse, transparent 68%, #000 95%);
  -webkit-mask-image: radial-gradient(ellipse, transparent 68%, #000 95%);
}

/* no celular, ou quando o aparelho não acompanha (js/desempenho.js), o desfoque das bordas sai:
   o backdrop-filter refaz o blur de tudo atrás dele a cada quadro. A vinheta do visor continua. */
@media (pointer: coarse), (max-width: 640px) { .borda { display: none; } }
.leve .borda { display: none; }

/* logo: a marca da banda no canto superior esquerdo, gravada no visor. Acima do desfoque,
   para ficar nítida, e discreta, para não disputar com o sigilo. Não pega o mouse. */
.logo {
  position: fixed; z-index: 3; top: 32px; left: 32px; margin: 0;
  width: clamp(120px, 13vw, 190px); line-height: 0;
  opacity: 0.78; pointer-events: none;
}
.logo img { width: 100%; height: auto; }
@media (max-width: 640px) { .logo { top: 18px; left: 18px; width: 120px; } }
@media (prefers-reduced-motion: no-preference) {
  .logo { animation: logo-liga 1.6s ease-out both; }
  @keyframes logo-liga {
    0% { opacity: 0; } 40% { opacity: 0; } 46% { opacity: 0.5; } 50% { opacity: 0.1; } 100% { opacity: 0.78; }
  }
}

/* painel do visor: a ficha do planeta, aberta ao clicar nele (painel.js). Fica abaixo do #hud,
   para a mira continuar por cima, e acima do desfoque das bordas, para continuar legível. */
html.painel-aberto { overflow: hidden; }
.painel {
  --frio: 222, 226, 232;
  position: fixed; z-index: 3;
  right: clamp(16px, 7vw, 120px); top: 50%; transform: translateY(-50%);
  width: min(400px, calc(100vw - 32px));
  color: rgba(var(--frio), 0.82);
  font: 11px/1.6 "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
}
.painel[hidden] { display: none; }
/* planeta à direita: a ficha abre do outro lado */
.painel.esquerda { right: auto; left: clamp(16px, 7vw, 120px); }
.painel:focus { outline: none; }
.caixa { position: relative; }
.vidro {
  position: absolute; inset: 0;
  background: rgba(8, 9, 11, 0.62);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--frio), 0.14);
  /* linhas de varredura bem fracas no vidro */
  background-image: repeating-linear-gradient(0deg, rgba(var(--frio), 0.025) 0 1px, transparent 1px 3px);
}
.feixe {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(var(--frio), 0.9); box-shadow: 0 0 8px rgba(var(--frio), 0.6);
  opacity: 0;
}
.canto { position: absolute; width: 12px; height: 12px; border: 0 solid rgba(var(--frio), 0.6); }
.canto:nth-of-type(3) { top: -4px; left: -4px; border-width: 1px 0 0 1px; --dx: 40px; --dy: 40px; }
.canto:nth-of-type(4) { top: -4px; right: -4px; border-width: 1px 1px 0 0; --dx: -40px; --dy: 40px; }
.canto:nth-of-type(5) { bottom: -4px; right: -4px; border-width: 0 1px 1px 0; --dx: -40px; --dy: -40px; }
.canto:nth-of-type(6) { bottom: -4px; left: -4px; border-width: 0 0 1px 1px; --dx: 40px; --dy: -40px; }
.conteudo {
  position: relative;
  max-height: min(76vh, 720px); overflow: auto; scrollbar-width: none;
  padding: 24px 26px 22px; box-sizing: border-box;
}
.conteudo::-webkit-scrollbar { display: none; }
.painel h2, .painel h3, .painel p, .painel ol, .painel ul, .painel dl, .painel figure { margin: 0; }
.painel .rotulo { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(var(--frio), 0.4); }
.painel h2 {
  margin-top: 6px; font-size: 19px; font-weight: 400; line-height: 1.25;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--frio), 0.96);
}
.painel .sub { margin-top: 2px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--frio), 0.5); }
.dados { display: flex; gap: 16px; align-items: center; margin-top: 18px; }
.capa {
  position: relative; flex: 0 0 112px; aspect-ratio: 1; overflow: hidden;
  border: 1px solid rgba(var(--frio), 0.18);
}
.capa img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(0.82); }
.capa::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}
.painel dl { display: grid; gap: 8px; }
.painel dt { font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(var(--frio), 0.36); }
.painel dd { margin: 0; font-size: 12px; color: rgba(var(--frio), 0.85); }
.painel cite { font-style: normal; color: rgba(var(--frio), 0.92); }
.painel section { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(var(--frio), 0.1); }
.painel h3 { font: inherit; font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(var(--frio), 0.38); margin-bottom: 8px; }
.faixas { padding: 0; list-style: none; counter-reset: f; columns: 2; column-gap: 16px; font-size: 10px; letter-spacing: 0.06em; }
.faixas li { counter-increment: f; break-inside: avoid; color: rgba(var(--frio), 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixas li::before { content: counter(f, decimal-leading-zero) "  "; color: rgba(var(--frio), 0.3); }
.links { padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.painel a, .painel .fechar {
  color: rgba(var(--frio), 0.78); text-decoration: none; text-transform: uppercase; font-size: 10px; letter-spacing: 0.18em;
}
.links a { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted rgba(var(--frio), 0.16); transition: color .2s, border-color .2s, padding .2s; }
.links a::after { content: '↗'; color: rgba(var(--frio), 0.35); transition: color .2s; }
.links a:hover, .links a:focus-visible { color: rgba(var(--frio), 1); border-color: rgba(var(--frio), 0.5); padding-left: 4px; }
.links a:hover::after, .links a:focus-visible::after { color: rgba(var(--frio), 0.9); }
.painel .fechar {
  position: absolute; top: 14px; right: 16px; z-index: 1;
  background: none; border: 0; padding: 4px; cursor: inherit; font-family: inherit; font-size: 8px; color: rgba(var(--frio), 0.45);
}
.painel .fechar:hover, .painel .fechar:focus-visible { color: rgba(var(--frio), 0.95); }
@media (pointer: coarse) { .painel kbd { display: none; } }
.painel kbd { font: inherit; border: 1px solid rgba(var(--frio), 0.25); padding: 0 3px; margin-left: 4px; }
.painel :focus-visible { outline: 1px solid rgba(var(--frio), 0.5); outline-offset: 2px; }
@media (max-width: 640px) {
  .painel, .painel.esquerda { left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; transform: none; }
  .conteudo { max-height: 72vh; padding: 20px 18px 18px; }
  .capa { flex-basis: 88px; }
}
/* acessível pelo teclado: o planeta não é foco, então um botão invisível o representa */
.sr { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 5;
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
  background: rgba(8, 9, 11, 0.8); color: rgba(222, 226, 232, 0.85); border: 1px solid rgba(222, 226, 232, 0.3);
  font: 10px "SF Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 12px; }
.sr:focus-visible { clip-path: none; width: auto; height: auto; outline: none; }

/* abrir: um feixe acende no meio e se estica, o vidro abre a partir dele como um monitor ligando,
   os cantos chegam de dentro e o conteúdo surge em sequência (o texto se decifra em painel.js).
   Com "reduzir movimento" não há animação: tudo já aparece no lugar. */
@media (prefers-reduced-motion: no-preference) {
  .painel.abrindo .feixe { animation: feixe .7s cubic-bezier(.2, .7, .2, 1) both; }
  .painel.abrindo .vidro { animation: vidro .55s .28s cubic-bezier(.3, .8, .2, 1) both; }
  .painel.abrindo .canto { animation: canto .6s .18s cubic-bezier(.2, .8, .2, 1) both; }
  .painel.abrindo .fechar { animation: surge .4s .9s both; }
  .painel.abrindo .surge { animation: surge .5s calc(.55s + var(--i, 0) * .09s) cubic-bezier(.2, .7, .2, 1) both; }
  .painel.abrindo .capa img { animation: capa 1.2s 1s steps(14, end) both; }
  .painel.abrindo .capa::before {
    content: ''; position: absolute; left: 0; right: 0; height: 2px; z-index: 1;
    background: rgba(222, 226, 232, 0.9); box-shadow: 0 0 10px rgba(222, 226, 232, 0.7);
    animation: varre 1.2s 1s linear both;
  }
  .painel.fechando .caixa { animation: desliga .26s cubic-bezier(.6, 0, .9, .4) both; }
}
@keyframes feixe {
  0% { opacity: 0; transform: scaleX(0); }
  15% { opacity: 1; }
  55% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes vidro {
  0% { clip-path: inset(50% 0 50% 0); opacity: .4; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes canto {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  40% { opacity: 1; }
  70% { opacity: .3; }
  85% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes surge {
  0% { opacity: 0; transform: translateX(8px); filter: blur(3px); }
  30% { opacity: .9; }
  45% { opacity: .2; }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes capa {
  0% { clip-path: inset(0 0 100% 0); opacity: .6; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes varre {
  0% { top: 0; opacity: 1; }
  95% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes desliga {
  0% { opacity: 1; transform: none; filter: none; }
  60% { opacity: 1; transform: scale(1, .02); filter: brightness(2); }
  100% { opacity: 0; transform: scale(0, .02); }
}

/* menu de navegação do visor (rumo.js): um trilho no canto esquerdo com as paradas da viagem.
   Gravado no visor como a logo: vetor fino, monoespaçado, sem cor. Uma marca corre pelo trilho
   com a rolagem; o planeta onde ela está acende. Clicar leva a viagem até ele. */
.rumo {
  --frio: 222, 226, 232;
  position: fixed; z-index: 3; left: 56px; top: 50%; transform: translateY(-50%);
  color: rgba(var(--frio), 0.5);
  font: 12px/1.35 "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: opacity .5s, visibility .5s;
}
/* com a ficha aberta, o menu se apaga para não disputar com ela */
html.painel-aberto .rumo { opacity: 0; visibility: hidden; }
.rumo-cab {
  display: flex; align-items: center; gap: 10px; margin: 0 0 26px;
  font-size: 9.5px; letter-spacing: 0.3em; color: rgba(var(--frio), 0.34);
}
.rumo-cab i { width: 32px; height: 1px; background: linear-gradient(90deg, rgba(var(--frio), 0.4), rgba(var(--frio), 0.06)); }
.rumo ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
/* o trilho: uma linha que esmaece para baixo e uma régua fina ao lado */
.rumo ol::before, .rumo ol::after { content: ''; position: absolute; top: 13px; bottom: 13px; pointer-events: none; }
.rumo ol::before { left: 12.5px; width: 1px; background: linear-gradient(rgba(var(--frio), 0.3), rgba(var(--frio), 0.08)); }
.rumo ol::after {
  left: -8px; width: 5px;
  background: repeating-linear-gradient(rgba(var(--frio), 0.16) 0 1px, transparent 1px 6px);
}
.rumo li { position: relative; }
.rumo button {
  display: flex; align-items: center; gap: 14px; padding: 0; margin: 0;
  background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left; cursor: inherit;
}
.rumo .glifo {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, #060607 62%, transparent 64%);   /* corta o trilho atrás do nó */
  color: rgba(var(--frio), 0.5); transition: color .3s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.rumo svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; }
.rumo svg .cheio { fill: currentColor; stroke: none; }
/* anel em volta do nó: aparece no planeta onde se está e gira tracejado durante a viagem */
.rumo .glifo::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(var(--frio), 0.5); opacity: 0; transform: scale(.6);
  transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.rumo .n { font-size: 9.5px; letter-spacing: 0.2em; color: rgba(var(--frio), 0.28); transition: color .3s; }
.rumo .txt { position: relative; display: block; max-width: 18ch; }
.rumo .txt::before {        /* um traço que se estica até o nome, no hover */
  content: ''; position: absolute; left: -10px; top: 0.65em; width: 0; height: 1px;
  background: rgba(var(--frio), 0.7); transition: width .3s cubic-bezier(.2, .8, .2, 1), left .3s cubic-bezier(.2, .8, .2, 1);
}
.rumo b {
  display: block; font-weight: 400; color: rgba(var(--frio), 0.6);
  transition: color .3s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.rumo small { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: 0.24em; color: rgba(var(--frio), 0.28); transition: color .3s, transform .35s .03s cubic-bezier(.2, .8, .2, 1); }

.rumo button:hover .glifo, .rumo button:focus-visible .glifo { color: rgba(var(--frio), 1); transform: scale(1.15); }
.rumo button:hover .n, .rumo button:focus-visible .n { color: rgba(var(--frio), 0.6); }
.rumo button:hover b, .rumo button:focus-visible b,
.rumo button:hover small, .rumo button:focus-visible small { color: rgba(var(--frio), 0.98); transform: translateX(14px); }
.rumo button:hover small, .rumo button:focus-visible small { color: rgba(var(--frio), 0.5); }
.rumo button:hover .txt::before, .rumo button:focus-visible .txt::before { width: 12px; left: -4px; }
.rumo button:focus-visible { outline: none; }
.rumo button:focus-visible .glifo::after { opacity: 1; transform: none; border-style: dotted; }

/* no alvo: o nó acende com um anel e um pulso */
.rumo .aqui .glifo { color: rgba(var(--frio), 1); }
.rumo .aqui .glifo::after { opacity: 1; transform: none; }
.rumo .aqui .n { color: rgba(var(--frio), 0.7); }
.rumo .aqui b { color: rgba(var(--frio), 0.96); }
.rumo .aqui small { color: rgba(var(--frio), 0.5); }
/* em rota: o anel do destino gira tracejado e o nome pisca, como um sinal sendo seguido */
.rumo .rota .glifo { color: rgba(var(--frio), 1); }
.rumo .rota .glifo::after { opacity: 1; transform: none; border-style: dashed; }
.rumo .rota b { color: rgba(var(--frio), 0.96); }

/* a marca "você está aqui": um ponteiro que corre pelo trilho com a rolagem */
.rumo-marca {
  position: absolute !important; left: -18px; top: 0; width: 0; height: 0; pointer-events: none;
}
.rumo-marca::before {       /* ponteiro */
  content: ''; position: absolute; left: 0; top: -4.5px;
  border: 4.5px solid transparent; border-left: 6px solid rgba(var(--frio), 0.85);
}
.rumo-marca::after {        /* brilho no trilho */
  content: ''; position: absolute; left: 30.5px; top: -11px; width: 1px; height: 22px;
  background: linear-gradient(transparent, rgba(var(--frio), 0.9), transparent);
  box-shadow: 0 0 6px rgba(var(--frio), 0.6);
}
.rumo-status {
  margin: 28px 0 0; min-height: 2.7em; max-width: 36ch;
  font-size: 9.5px; letter-spacing: 0.24em; color: rgba(var(--frio), 0.4);
}
.rumo.voando .rumo-status { color: rgba(var(--frio), 0.8); }

@media (prefers-reduced-motion: no-preference) {
  /* acende junto com o visor, item por item */
  .rumo-cab, .rumo li:not(.rumo-marca), .rumo-status, .rumo ol::before { animation: rumo-liga .9s both; }
  .rumo-cab { animation-delay: 1.4s; }
  .rumo ol::before { animation-delay: 1.5s; }
  .rumo li:nth-child(1) { animation-delay: 1.6s; }
  .rumo li:nth-child(2) { animation-delay: 1.7s; }
  .rumo li:nth-child(3) { animation-delay: 1.8s; }
  .rumo li:nth-child(4) { animation-delay: 1.9s; }
  .rumo-status { animation-delay: 2.1s; }
  .rumo-marca { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .rumo.voando .rumo-marca { transition: none; }
  .rumo .aqui .glifo::after { animation: rumo-pulso 2.4s 0.4s infinite; }
  .rumo .rota .glifo::after { animation: rumo-gira 1.6s linear infinite; }
  .rumo .rota b { animation: rumo-pisca 0.9s steps(2, jump-none) infinite; }
  @keyframes rumo-liga {
    0% { opacity: 0; transform: translateX(-10px); }
    40% { opacity: .9; }
    55% { opacity: .2; }
    100% { opacity: 1; transform: none; }
  }
  @keyframes rumo-pulso {
    0% { box-shadow: 0 0 0 0 rgba(var(--frio), 0.35); }
    70%, 100% { box-shadow: 0 0 0 11px rgba(var(--frio), 0); }
  }
  @keyframes rumo-gira { to { transform: rotate(360deg); } }
  @keyframes rumo-pisca { 50% { color: rgba(var(--frio), 0.55); } }
}
/* tela estreita: só o trilho com os glifos, sem legenda */
@media (max-width: 640px) {
  .rumo { left: 18px; }
  .rumo-cab, .rumo-status, .rumo .n, .rumo .txt { display: none; }
  .rumo ol { gap: 22px; }
}

/* central do visor (central.js): relógio, volume geral e tela cheia, no canto superior direito.
   Gravada no visor como o menu de navegação: vetor fino, monoespaçado, sem cor. Acima do desfoque. */
.central {
  --frio: 222, 226, 232;
  --mola: cubic-bezier(.2, .8, .2, 1);
  position: fixed; z-index: 3; top: 28px; right: 32px;
  color: rgba(var(--frio), 0.6);
  font: 12px/1 "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; align-items: center; flex-wrap: nowrap; gap: 20px; white-space: nowrap;
  transition: opacity .5s;
}
/* com a ficha aberta, a central recua, mas continua à mão */
html.painel-aberto .central { opacity: 0.3; }
html.painel-aberto .central:hover, html.painel-aberto .central:focus-within { opacity: 1; }
.central .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* redes sociais e compra: uma linha acima do relógio, no mesmo vidro gravado dos botões */
.central-links { display: flex; align-items: center; gap: 18px; margin: 0; }
.central-redes { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.central-redes a { display: block; width: 22px; height: 22px; color: rgba(var(--frio), 0.5); text-decoration: none; cursor: inherit; transition: color .3s; }
.central .central-redes svg { width: 100%; height: 100%; }
.central-redes a:hover, .central-redes a:focus-visible { color: rgba(var(--frio), 1); outline: none; }
.central-compra {
  position: relative; padding: 8px 14px; font-size: 9.5px; letter-spacing: 0.26em; text-decoration: none; cursor: inherit;
  color: rgba(var(--frio), 0.85); background: rgba(8, 9, 11, 0.35); border: 1px solid rgba(var(--frio), 0.24);
  transition: color .3s, background-color .3s, border-color .3s;
}
.central-compra::before, .central-compra::after {
  content: ''; position: absolute; width: 6px; height: 6px; border: 0 solid rgba(var(--frio), 0.55);
  transition: transform .35s var(--mola), border-color .3s;
}
.central-compra::before { top: -3px; left: -3px; border-width: 1px 0 0 1px; }
.central-compra::after { bottom: -3px; right: -3px; border-width: 0 1px 1px 0; }
.central-compra:hover, .central-compra:focus-visible { color: rgba(var(--frio), 1); background-color: rgba(var(--frio), 0.08); border-color: rgba(var(--frio), 0.5); outline: none; }
.central-compra:hover::before, .central-compra:focus-visible::before { transform: translate(-2px, -2px); border-color: rgba(var(--frio), 0.95); }
.central-compra:hover::after, .central-compra:focus-visible::after { transform: translate(2px, 2px); border-color: rgba(var(--frio), 0.95); }
@media (max-width: 640px) { .central-compra { display: none; } }
.central-faixa { display: flex; align-items: center; gap: 16px; }
.central-sep { width: 1px; height: 30px; background: linear-gradient(transparent, rgba(var(--frio), 0.22), transparent); }

/* loja (loja.js): o menu Store, no canto superior esquerdo, à direita da marca. Mesmo vidro gravado da central:
   vetor fino, monoespaçado, branco frio. A lista abre para baixo. Acima do desfoque. */
.loja {
  --frio: 222, 226, 232;
  --mola: cubic-bezier(.2, .8, .2, 1);
  position: fixed; z-index: 4; top: 32px; left: calc(32px + clamp(120px, 13vw, 190px) + 28px);
  display: flex; align-items: center; height: calc(clamp(120px, 13vw, 190px) * 0.1856);   /* centrado na altura da logo */
  font: 12px/1 "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.loja-bt {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 0;
  font: inherit; font-size: 9.5px; letter-spacing: 0.26em; text-transform: inherit; cursor: inherit;
  color: rgba(var(--frio), 0.85); background: rgba(8, 9, 11, 0.35); border: 1px solid rgba(var(--frio), 0.24);
  transition: color .3s, background-color .3s, border-color .3s;
}
.loja-bt::before, .loja-bt::after {
  content: ''; position: absolute; width: 6px; height: 6px; border: 0 solid rgba(var(--frio), 0.55);
  transition: transform .35s var(--mola), border-color .3s;
}
.loja-bt::before { top: -3px; left: -3px; border-width: 1px 0 0 1px; }
.loja-bt::after { bottom: -3px; right: -3px; border-width: 0 1px 1px 0; }
.loja-bt:hover, .loja-bt:focus-visible, .loja.aberta .loja-bt { color: rgba(var(--frio), 1); background-color: rgba(var(--frio), 0.08); border-color: rgba(var(--frio), 0.5); outline: none; }
.loja-bt:hover::before, .loja-bt:focus-visible::before, .loja.aberta .loja-bt::before { transform: translate(-2px, -2px); border-color: rgba(var(--frio), 0.95); }
.loja-bt:hover::after, .loja-bt:focus-visible::after, .loja.aberta .loja-bt::after { transform: translate(2px, 2px); border-color: rgba(var(--frio), 0.95); }
.loja-seta { width: 5px; height: 5px; border: solid currentColor; border-width: 0 1px 1px 0; transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--mola); }
.loja.aberta .loja-seta { transform: translateY(1px) rotate(-135deg); }
.loja-lista {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; margin: 0; padding: 6px 0; list-style: none;
  border: 1px solid rgba(var(--frio), 0.16); background: rgba(8, 9, 11, 0.5);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.loja-lista[hidden] { display: none; }
.loja-lista a {
  display: flex; gap: 10px; padding: 9px 14px; font-size: 9.5px; letter-spacing: 0.22em; white-space: nowrap;
  color: rgba(var(--frio), 0.6); text-decoration: none; cursor: inherit; transition: color .3s, background-color .3s, padding-left .3s var(--mola);
}
.loja-lista b { font-weight: 400; color: rgba(var(--frio), 0.34); }
.loja-lista a:hover, .loja-lista a:focus-visible { color: rgba(var(--frio), 1); background-color: rgba(var(--frio), 0.06); padding-left: 18px; outline: none; }
@media (max-width: 640px) { .loja { top: 18px; left: calc(18px + 120px + 16px); height: calc(120px * 0.1856); } }
@media (prefers-reduced-motion: no-preference) {
  .loja { animation: central-liga .9s 1.5s both; }
  .loja-lista:not([hidden]) { animation: central-liga .35s both; }
}

/* relógio: horas grandes e finas, segundos pequenos ao lado, o dia e o fuso embaixo */
.central-hora { text-align: right; }
.relogio { display: inline-flex; align-items: flex-start; font-size: 22px; font-weight: 300; letter-spacing: 0.06em; color: rgba(var(--frio), 0.92); font-variant-numeric: tabular-nums; }
.relogio-dois { margin: 0 1px; color: rgba(var(--frio), 0.5); }
.relogio-s { margin: 2px 0 0 5px; font-size: 9.5px; letter-spacing: 0.12em; color: rgba(var(--frio), 0.4); }
.relogio-sub {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 6px 0 0;
  font-size: 8.5px; letter-spacing: 0.24em; color: rgba(var(--frio), 0.4);
}
.relogio-fuso { color: rgba(var(--frio), 0.26); }
.relogio-vivo { width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--frio), 0.75); box-shadow: 0 0 6px rgba(var(--frio), 0.6); }

/* botões: quadrados de vidro com cantos de mira que se abrem no hover */
.central-bt {
  position: relative; flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0; margin: 0;
  background: rgba(8, 9, 11, 0.35); border: 1px solid rgba(var(--frio), 0.1); border-radius: 0;
  color: rgba(var(--frio), 0.62); cursor: inherit;
  transition: color .3s, background-color .3s, border-color .3s;
}
.central-bt::before, .central-bt::after {
  content: ''; position: absolute; width: 6px; height: 6px; border: 0 solid rgba(var(--frio), 0.55);
  transition: transform .35s var(--mola), border-color .3s;
}
.central-bt::before { top: -3px; left: -3px; border-width: 1px 0 0 1px; }
.central-bt::after { bottom: -3px; right: -3px; border-width: 0 1px 1px 0; }
.central-bt:hover, .central-bt:focus-visible { color: rgba(var(--frio), 1); background-color: rgba(var(--frio), 0.06); border-color: rgba(var(--frio), 0.24); outline: none; }
.central-bt:hover::before, .central-bt:focus-visible::before { transform: translate(-2px, -2px); border-color: rgba(var(--frio), 0.95); }
.central-bt:hover::after, .central-bt:focus-visible::after { transform: translate(2px, 2px); border-color: rgba(var(--frio), 0.95); }
.central-bt:active { background-color: rgba(var(--frio), 0.12); }
.central-bt[hidden] { display: none; }
.central svg { display: block; width: 18px; height: 18px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.central svg .cheio { fill: currentColor; stroke: none; }
.central svg path, .central svg g, .central svg rect { transition: opacity .25s, transform .35s var(--mola); transform-box: fill-box; transform-origin: center; }

/* volume: alto-falante (silencia), uma régua de barras em rampa e o nível */
.central-som { display: flex; align-items: center; gap: 12px; }
.central-mudo[data-ondas="0"] .onda1, .central-mudo[data-ondas="0"] .onda2,
.central-mudo[data-ondas="1"] .onda2 { opacity: 0; transform: scale(.4); }
.central-mudo .corta { opacity: 0; transform: scale(.4); }
.central-mudo[data-ondas="0"] .corta { opacity: 1; transform: none; }
.central-regua { position: relative; display: block; padding: 8px 0; }
.central-barras {
  display: flex; align-items: flex-end; gap: 2px; height: 18px;
  clip-path: polygon(0 78%, 100% 0, 100% 100%, 0 100%);      /* a rampa: cada barra mais alta que a anterior */
}
.central-barras i { width: 3px; height: 100%; background: rgba(var(--frio), 0.12); transition: background-color .2s, box-shadow .2s; }
.central-barras i.on { background: rgba(var(--frio), 0.78); }
.central-regua:hover .central-barras i.on, .central-regua:focus-within .central-barras i.on { background: rgba(var(--frio), 1); box-shadow: 0 0 6px rgba(var(--frio), 0.5); }
.central-regua:hover .central-barras i:not(.on) { background: rgba(var(--frio), 0.2); }
.central.sem-som .central-barras i.on { background: rgba(var(--frio), 0.26); box-shadow: none; }
.central-vol {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: inherit; -webkit-appearance: none; appearance: none; background: none;
}
.central-regua:has(:focus-visible) { outline: 1px dotted rgba(var(--frio), 0.5); outline-offset: 3px; }
.central-nivel { min-width: 4ch; font-size: 9.5px; letter-spacing: 0.2em; color: rgba(var(--frio), 0.4); font-variant-numeric: tabular-nums; }
.central.sem-som .central-nivel { color: rgba(var(--frio), 0.62); }

/* idioma: EN e PT lado a lado, à esquerda da tela cheia; o idioma ativo fica aceso */
.central-idioma { position: relative; }
.central-idioma-bt[aria-expanded="true"] { color: rgba(var(--frio), 1); background-color: rgba(var(--frio), 0.1); border-color: rgba(var(--frio), 0.35); }
.central-idioma-lista {
  position: absolute; top: calc(100% + 8px); right: 0; margin: 0; padding: 6px 0; list-style: none; z-index: 1;
  border: 1px solid rgba(var(--frio), 0.16); background: rgba(8, 9, 11, 0.5);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.central-idioma-lista[hidden] { display: none; }
.central-idioma-lista button {
  display: flex; gap: 10px; width: 100%; padding: 9px 14px; margin: 0; border: 0; background: none; font: inherit; font-size: 9.5px;
  letter-spacing: 0.22em; white-space: nowrap; text-align: left; color: rgba(var(--frio), 0.6); cursor: inherit;
  transition: color .3s, background-color .3s, padding-left .3s var(--mola);
}
.central-idioma-lista b { font-weight: 400; color: rgba(var(--frio), 0.34); }
.central-idioma-lista button[aria-pressed="true"] { color: rgba(var(--frio), 1); }
.central-idioma-lista button[aria-pressed="true"] b { color: rgba(var(--frio), 0.7); }
.central-idioma-lista button:hover, .central-idioma-lista button:focus-visible { color: rgba(var(--frio), 1); background-color: rgba(var(--frio), 0.06); padding-left: 18px; outline: none; }

/* tela cheia: os cantos se afastam no hover; em tela cheia viram para dentro */
.central-cheia .ico-fecha { opacity: 0; transform: scale(1.3); }
.central.em-cheia .central-cheia .ico-abre { opacity: 0; transform: scale(.7); }
.central.em-cheia .central-cheia .ico-fecha { opacity: 1; transform: none; }
.central-cheia .miolo { fill: currentColor; stroke: none; opacity: 0; transform: scale(.2); }
.central-cheia:hover .miolo, .central-cheia:focus-visible .miolo { opacity: .8; transform: none; }
.central-cheia:hover .ico-abre path:nth-child(1), .central-cheia:focus-visible .ico-abre path:nth-child(1) { transform: translate(-1.5px, -1.5px); }
.central-cheia:hover .ico-abre path:nth-child(2), .central-cheia:focus-visible .ico-abre path:nth-child(2) { transform: translate(1.5px, -1.5px); }
.central-cheia:hover .ico-abre path:nth-child(3), .central-cheia:focus-visible .ico-abre path:nth-child(3) { transform: translate(1.5px, 1.5px); }
.central-cheia:hover .ico-abre path:nth-child(4), .central-cheia:focus-visible .ico-abre path:nth-child(4) { transform: translate(-1.5px, 1.5px); }
.central.em-cheia .central-cheia:hover .ico-fecha { transform: scale(.82); }

/* abaixo de 1920px de largura, só ficam redes, compra e tela cheia: relógio e volume somem */
@media (max-width: 1919px) {
  .central-hora, .central-som, .central-faixa > .central-sep { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* acende junto com o visor, da direita para a esquerda */
  .central-links, .central-faixa > * { animation: central-liga .9s both; }
  .central-links { animation-delay: 1.4s; }
  .central-faixa > :nth-last-child(1) { animation-delay: 1.55s; }
  .central-faixa > :nth-last-child(3) { animation-delay: 1.7s; }
  .central-faixa > :nth-last-child(5) { animation-delay: 1.85s; }
  .central-faixa > :nth-last-child(7) { animation-delay: 2s; }
  .central-sep { animation-delay: 1.6s !important; }
  .relogio-dois { animation: central-pisca 1s steps(2, jump-none) infinite; }
  .relogio-vivo { animation: central-vivo 2s ease-in-out infinite; }
  @keyframes central-liga {
    0% { opacity: 0; transform: translateX(10px); }
    40% { opacity: .9; }
    55% { opacity: .2; }
    100% { opacity: 1; transform: none; }
  }
  @keyframes central-pisca { 50% { opacity: .25; } }
  @keyframes central-vivo { 50% { opacity: .3; box-shadow: 0 0 0 rgba(var(--frio), 0); } }
}
/* tela estreita: só a hora e os dois botões (o volume do aparelho fica com o sistema) */
@media (max-width: 640px) {
  .central { top: 14px; right: 18px; }
  .central-redes, .relogio-sub, .central-regua, .central-nivel, .central-sep { display: none; }
  .central-faixa { gap: 8px; }
  .central-som { gap: 0; }
  .relogio { font-size: 15px; margin-right: 4px; }
  .relogio-s { display: none; }
  .central-bt { width: 30px; height: 30px; }
}

/* só para leitores de tela */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* rádio do visor (radio.js): o player no canto inferior direito. Gravado no visor como o menu:
   vetor fino, monoespaçado, branco frio, sem cor. Cantos em colchete, um osciloscópio do sinal
   e a lista de faixas, que abre para cima como um monitor ligando. Acima do desfoque, nítido. */
.radio {
  --frio: 222, 226, 232;
  position: fixed; z-index: 100; right: 32px; bottom: 64px; width: 460px;
  padding: 26px 28px 20px; box-sizing: border-box;
  /* a moldura: borda fina e um vidro quase transparente, muito desfocado */
  border: 1px solid rgba(var(--frio), 0.16);
  background: rgba(8, 9, 11, 0.22);
  backdrop-filter: blur(28px) saturate(1.1); -webkit-backdrop-filter: blur(28px) saturate(1.1);
  color: rgba(var(--frio), 0.6);
  font: 12px/1.4 "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: opacity .5s, visibility .5s, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.radio button { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: inherit; }
.radio svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.radio svg .cheio { fill: currentColor; stroke: none; }
.radio p { margin: 0; }
.radio :focus-visible { outline: 1px solid rgba(var(--frio), 0.5); outline-offset: 3px; }
/* os cantos em colchete, como os do painel, só que mais apagados */
.radio > .canto { position: absolute; width: 8px; height: 8px; border: 0 solid rgba(var(--frio), 0.32); pointer-events: none; }
.radio > .canto:nth-of-type(1) { top: -5px; left: -5px; border-width: 1px 0 0 1px; }
.radio > .canto:nth-of-type(2) { top: -5px; right: -5px; border-width: 1px 1px 0 0; }
.radio > .canto:nth-of-type(3) { bottom: -5px; right: -5px; border-width: 0 1px 1px 0; }
.radio > .canto:nth-of-type(4) { bottom: -5px; left: -5px; border-width: 0 0 1px 1px; }
.radio.com-lista:not(.lista-baixo) > .canto:nth-of-type(1), .radio.com-lista:not(.lista-baixo) > .canto:nth-of-type(2),
.radio.com-lista.lista-baixo > .canto:nth-of-type(3), .radio.com-lista.lista-baixo > .canto:nth-of-type(4) { opacity: 0; }
/* arrastável pelo que não é controle (radio.js): segurando, os colchetes acendem */
.radio-cab, .radio-info, .radio-osc { touch-action: none; }
.radio > .canto { transition: border-color .25s, opacity .25s; }
.radio.arrastando > .canto { border-color: rgba(var(--frio), 0.85); }
.radio.arrastando { transition: none; user-select: none; -webkit-user-select: none; }

.radio-cab {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.28em; color: rgba(var(--frio), 0.36);
}
.radio-cab i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--frio), 0.3), rgba(var(--frio), 0.05)); }
.radio-estado { position: relative; padding-left: 12px; }
.radio-estado::before {     /* o led do sinal: apagado em espera, aceso transmitindo */
  content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-radius: 50%;
  border: 1px solid rgba(var(--frio), 0.5); box-sizing: border-box;
}
.radio.tocando .radio-estado { color: rgba(var(--frio), 0.75); }
.radio.tocando .radio-estado::before { background: rgba(var(--frio), 0.95); border-color: transparent; box-shadow: 0 0 6px rgba(var(--frio), 0.8); }
.radio.falhou .radio-estado { color: rgba(var(--frio), 0.75); }
.radio-num { font-variant-numeric: tabular-nums; }
.radio[hidden] { display: none; }

/* minimizar e fechar: dois traços no fim do cabeçalho, como os de uma janela do visor */
.radio-jan { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.radio-jan button { position: relative; flex: none; width: 16px; height: 16px; color: rgba(var(--frio), 0.45); transition: color .25s; }
.radio-jan button::before { content: ''; position: absolute; inset: -6px; }   /* área de toque maior */
.radio-jan button:hover, .radio-jan button:focus-visible { color: rgba(var(--frio), 1); }
.radio .ico-max, .radio.minimizado .ico-min { display: none; }
.radio.minimizado .ico-max { display: inline; }

/* minimizado: o cabeçalho, a capa e o título, tocar/passar, a lista de faixas e um fio do tempo; continua tocando */
@media (min-width: 641px) {
  .radio.minimizado { width: 380px; padding: 16px 20px 12px; }
  .radio.minimizado .radio-corpo {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px;
    grid-template-areas: "cab cab" "info ctrl" "tempo tempo";
  }
  .radio.minimizado .radio-cab { grid-area: cab; }
  .radio.minimizado .radio-info { grid-area: info; margin-top: 10px; gap: 10px; }
  .radio.minimizado .radio-capa { width: 44px; height: 44px; }
  .radio.minimizado .radio-titulo { font-size: 13px; }
  .radio.minimizado .radio-ctrl { grid-area: ctrl; margin-top: 10px; gap: 16px; }
  .radio.minimizado .radio-toca { width: 36px; height: 36px; padding: 10px; }
  .radio.minimizado .radio-tempo { grid-area: tempo; margin-top: 4px; }
  .radio.minimizado .radio-tempo span,
  .radio.minimizado .radio-osc,
  .radio.minimizado .radio-ctrl > :not(.radio-ant):not(.radio-toca):not(.radio-prox):not(.radio-lista-bt) { display: none; }
}

/* o rádio fechado volta por aqui: um controle pequeno no rodapé, ao centro */
.radio-chama {
  --frio: 222, 226, 232;
  position: fixed; z-index: 100; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 8px 14px 8px 12px;
  border: 1px solid rgba(var(--frio), 0.16);
  background: rgba(8, 9, 11, 0.22);
  backdrop-filter: blur(28px) saturate(1.1); -webkit-backdrop-filter: blur(28px) saturate(1.1);
  color: rgba(var(--frio), 0.6); cursor: inherit;
  font: 9px/1 "SF Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.3em; text-transform: uppercase;
  transition: color .25s, border-color .25s;
}
.radio-chama[hidden] { display: none; }
/* em telas menores a telemetria do rodapé chega ao centro: o controle sobe acima dela */
@media (max-width: 900px) { .radio-chama { bottom: 66px; } }
.radio-chama svg { display: block; width: 15px; height: 15px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.radio-chama button { position: relative; display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: inherit; transition: color .25s; }
.radio-chama button::before { content: ''; position: absolute; inset: -8px -5px; }   /* área de toque maior */
.radio-chama svg .cheio { fill: currentColor; stroke: none; }
.radio-chama button:hover, .radio-chama button:focus-visible { color: rgba(var(--frio), 1); outline: none; }
.radio-chama:hover, .radio-chama:focus-within { border-color: rgba(var(--frio), 0.45); }
.radio-chama-sep { width: 1px; height: 14px; background: linear-gradient(transparent, rgba(var(--frio), 0.3), transparent); }
.radio-chama-toca svg { width: 17px; height: 17px; }
.radio ~ .radio-chama .ico-pausa, .radio.tocando ~ .radio-chama .ico-toca { display: none; }
.radio.tocando ~ .radio-chama .ico-pausa { display: inline; }
.radio.tocando ~ .radio-chama .radio-chama-toca { color: rgba(var(--frio), 0.95); }
.radio ~ .radio-chama .radio-chama-lista { color: rgba(var(--frio), 0.6); }
.radio.com-lista ~ .radio-chama .radio-chama-lista { color: rgba(var(--frio), 1); }
/* ondas: cinco barras; paradas e baixas em pausa, dançando enquanto a música toca */
.radio-chama-ondas { display: flex; align-items: center; gap: 2px; height: 14px; color: rgba(var(--frio), 0.3); transition: color .3s; }
.radio-chama-ondas i { display: block; width: 2px; height: 3px; background: currentColor; transform-origin: center; transition: height .3s; }
.radio.tocando ~ .radio-chama .radio-chama-ondas { color: rgba(var(--frio), 0.85); }
.radio.tocando ~ .radio-chama .radio-chama-ondas i:nth-child(1) { height: 7px; }
.radio.tocando ~ .radio-chama .radio-chama-ondas i:nth-child(2) { height: 12px; }
.radio.tocando ~ .radio-chama .radio-chama-ondas i:nth-child(3) { height: 9px; }
.radio.tocando ~ .radio-chama .radio-chama-ondas i:nth-child(4) { height: 13px; }
.radio.tocando ~ .radio-chama .radio-chama-ondas i:nth-child(5) { height: 6px; }
.radio.tocando.carregando ~ .radio-chama .radio-chama-ondas { color: rgba(var(--frio), 0.45); }
html.painel-aberto .radio-chama { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .radio.tocando ~ .radio-chama .radio-chama-ondas i { height: 14px; animation: radio-onda 1.1s ease-in-out infinite; transform: scaleY(.25); }
  .radio.tocando ~ .radio-chama .radio-chama-ondas i:nth-child(2) { animation-delay: -.8s; animation-duration: .9s; }
  .radio.tocando ~ .radio-chama .radio-chama-ondas i:nth-child(3) { animation-delay: -.3s; animation-duration: 1.3s; }
  .radio.tocando ~ .radio-chama .radio-chama-ondas i:nth-child(4) { animation-delay: -.6s; animation-duration: 1s; }
  .radio.tocando ~ .radio-chama .radio-chama-ondas i:nth-child(5) { animation-delay: -.1s; animation-duration: 1.2s; }
  @keyframes radio-onda { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
  .radio-chama:not([hidden]) { animation: radio-chama .5s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes radio-chama { 0% { opacity: 0; transform: translate(-50%, 8px); } 100% { opacity: 1; transform: translateX(-50%); } }
}

.radio-info { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.radio-capa {
  position: relative; flex: none; width: 72px; height: 72px; margin: 0; overflow: hidden;
  border: 1px solid rgba(var(--frio), 0.2);
}
.radio-capa img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(0.8); transition: filter .6s; }
.radio-capa::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px);
}
.radio.tocando .radio-capa img { filter: grayscale(1) contrast(1.15) brightness(0.95); }
.radio-txt { flex: 1; min-width: 0; }
.radio-titulo {
  overflow: hidden; white-space: nowrap; font-size: 16px; letter-spacing: 0.16em; color: rgba(var(--frio), 0.95);
  mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.radio-titulo span { display: inline-block; }
.radio-disco { margin-top: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; letter-spacing: 0.22em; color: rgba(var(--frio), 0.4); }
.radio-abre { display: none; }

.radio-osc { position: static; inset: auto; display: block; width: 100%; height: 80px; margin-top: 18px; }   /* não é tela cheia como os outros canvas */

/* barras: um fio que acende até onde a faixa já tocou (--p), com uma cabeça clara */
.radio input[type=range] {
  -webkit-appearance: none; appearance: none; display: block; margin: 0; height: 16px; background: none; cursor: inherit;
  --p: 0%;
}
.radio input[type=range]:focus-visible { outline: none; }
.radio input[type=range]::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--frio), 0.8) var(--p), rgba(var(--frio), 0.16) var(--p));
}
.radio input[type=range]::-moz-range-track { height: 1px; background: rgba(var(--frio), 0.16); }
.radio input[type=range]::-moz-range-progress { height: 1px; background: rgba(var(--frio), 0.8); }
.radio input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 2px; height: 9px; margin-top: -4px; border: 0; border-radius: 0;
  background: rgba(var(--frio), 0.95); box-shadow: 0 0 6px rgba(var(--frio), 0.7);
  transition: transform .2s;
}
.radio input[type=range]::-moz-range-thumb {
  width: 2px; height: 9px; border: 0; border-radius: 0;
  background: rgba(var(--frio), 0.95); box-shadow: 0 0 6px rgba(var(--frio), 0.7);
}
.radio input[type=range]:hover::-webkit-slider-thumb, .radio input[type=range]:focus-visible::-webkit-slider-thumb { transform: scaleY(1.5); }
.radio input[type=range]:focus-visible::-webkit-slider-runnable-track { box-shadow: 0 0 0 3px rgba(var(--frio), 0.08); }

.radio-tempo { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 10px; letter-spacing: 0.12em; color: rgba(var(--frio), 0.45); font-variant-numeric: tabular-nums; }
.radio-tempo span { flex: none; width: 5.5ch; }
.radio-falta { text-align: right; }
.radio-busca { flex: 1; min-width: 0; }

.radio-ctrl { display: flex; align-items: center; gap: 22px; margin-top: 12px; }
.radio-ctrl button { position: relative; flex: none; width: 20px; height: 20px; color: rgba(var(--frio), 0.55); transition: color .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.radio-ctrl button::before { content: ''; position: absolute; inset: -8px; }   /* área de toque maior */
.radio-ctrl button:hover, .radio-ctrl button:focus-visible { color: rgba(var(--frio), 1); }
.radio-ant:hover { transform: translateX(-2px); }
.radio-prox:hover { transform: translateX(2px); }
/* tocar: um anel fino; transmitindo, um anel tracejado gira em volta, como o destino no menu */
.radio-ctrl .radio-toca {
  width: 48px; height: 48px; padding: 14px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid rgba(var(--frio), 0.45); color: rgba(var(--frio), 0.9);
}
.radio-ctrl .radio-toca::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px dashed rgba(var(--frio), 0.4); opacity: 0; transform: scale(.7);
  transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.radio-ctrl .radio-toca:hover, .radio-ctrl .radio-toca:focus-visible { border-color: rgba(var(--frio), 0.95); box-shadow: 0 0 12px rgba(var(--frio), 0.15), inset 0 0 8px rgba(var(--frio), 0.08); }
.radio.tocando .radio-toca::after { opacity: 1; transform: none; }
.radio-toca svg { transform: translateX(0.5px); }
.radio .ico-pausa, .radio.tocando .ico-toca { display: none; }
.radio.tocando .ico-pausa { display: inline; }
.radio .ico-mudo, .radio.mudo .ico-som { display: none; }
.radio.mudo .ico-mudo { display: inline; }
.radio-sep { flex: 1; }
.radio.com-lista .radio-lista-bt { color: rgba(var(--frio), 1); }
/* o volume é uma régua de traços que sobem e acendem até o nível; o range invisível fica por cima */
.radio-regua { position: relative; flex: none; display: block; width: 84px; height: 20px; }
.radio-barras { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; padding-bottom: 4px; box-sizing: border-box; pointer-events: none; }
.radio-barras i { flex: 1; height: calc(20% + var(--k) * 8%); background: rgba(var(--frio), 0.16); transition: background-color .15s; }
.radio-barras i.acesa { background: rgba(var(--frio), 0.8); }
.radio.mudo .radio-barras i.acesa { background: rgba(var(--frio), 0.16); }
.radio-regua:hover .radio-barras i.acesa, .radio-regua:focus-within .radio-barras i.acesa { background: rgba(var(--frio), 1); }
.radio-regua:focus-within { outline: 1px solid rgba(var(--frio), 0.5); outline-offset: 3px; }
.radio .radio-vol { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }

/* a lista: o arquivo de sinais, que abre para cima */
.radio-lista {
  position: absolute; left: -1px; right: -1px; bottom: calc(100% + 18px);
  max-height: min(56vh, 460px); display: flex; flex-direction: column;
  padding: 16px 16px 6px; box-sizing: border-box;
  background: rgba(8, 9, 11, 0.66);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--frio), 0.14);
  background-image: repeating-linear-gradient(0deg, rgba(var(--frio), 0.022) 0 1px, transparent 1px 3px);
}
.radio-lista[hidden] { display: none; }
.radio-lista::after {      /* um fio liga a lista ao rádio */
  content: ''; position: absolute; right: 28px; top: 100%; width: 1px; height: 18px;
  background: linear-gradient(rgba(var(--frio), 0.35), transparent);
}
/* com o rádio no alto do visor, a lista abre para baixo */
.radio.lista-baixo .radio-lista { bottom: auto; top: calc(100% + 18px); }
.radio.lista-baixo .radio-lista::after { top: auto; bottom: 100%; background: linear-gradient(transparent, rgba(var(--frio), 0.35)); }
.radio-total { font-variant-numeric: tabular-nums; }
.radio-discos {
  margin: 12px 0 0 -10px; padding-left: 10px; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--frio), 0.2) transparent;
  overscroll-behavior: contain;
}
.radio-grupo + .radio-grupo { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(var(--frio), 0.08); }
.radio-grupo header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.radio-g-capa { flex: none; width: 30px; height: 30px; border: 1px solid rgba(var(--frio), 0.18); overflow: hidden; }
.radio-g-capa img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.8); }
.radio-g-capa i { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, rgba(var(--frio), 0.12) 0 1px, transparent 1px 4px); }
.radio-grupo b { display: block; font-weight: 400; font-size: 11px; letter-spacing: 0.2em; color: rgba(var(--frio), 0.85); }
.radio-grupo small { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 0.24em; color: rgba(var(--frio), 0.35); }
.radio-grupo ol { list-style: none; margin: 0; padding: 0; }
.radio-grupo li button {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 4px; box-sizing: border-box;
  text-align: left; text-transform: none; letter-spacing: 0.08em; font-size: 12px; color: rgba(var(--frio), 0.62);
  transition: color .2s, background-color .2s, padding .25s cubic-bezier(.2, .8, .2, 1);
}
.radio-grupo li button:hover, .radio-grupo li button:focus-visible { color: rgba(var(--frio), 1); background: rgba(var(--frio), 0.05); padding-left: 8px; outline: none; }
.radio-grupo .n { flex: none; font-size: 10px; letter-spacing: 0.16em; color: rgba(var(--frio), 0.3); }
.radio-grupo .nome { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.radio-grupo .dur { flex: none; font-size: 10px; letter-spacing: 0.1em; color: rgba(var(--frio), 0.3); font-variant-numeric: tabular-nums; }
.radio-grupo button.atual { color: rgba(var(--frio), 1); }
.radio-grupo button.atual::before {   /* o ponteiro da faixa atual, como a marca do menu */
  content: ''; position: absolute; left: -9px; top: 50%; margin-top: -3.5px;
  border: 3.5px solid transparent; border-left: 5px solid rgba(var(--frio), 0.85);
}
.radio-grupo button.atual .n { color: rgba(var(--frio), 0.7); }
/* o equalizador da faixa tocando: três traços que sobem e descem */
.radio-grupo .eq { display: none; flex: none; align-items: flex-end; gap: 2px; width: 10px; height: 9px; }
.radio-grupo .eq i { flex: 1; height: 30%; background: rgba(var(--frio), 0.85); }
.radio-grupo button.atual .eq { display: flex; }
.radio-grupo button.toca .eq i:nth-child(1) { height: 70%; }
.radio-grupo button.toca .eq i:nth-child(2) { height: 100%; }
.radio-grupo button.toca .eq i:nth-child(3) { height: 50%; }
.radio-fora {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 4px 10px;
  color: rgba(var(--frio), 0.35); text-decoration: none; font-size: 8.5px; letter-spacing: 0.22em;
  border-bottom: 1px dotted rgba(var(--frio), 0.14); transition: color .2s, border-color .2s;
}
.radio-fora span { color: rgba(var(--frio), 0.7); }
.radio-fora:hover, .radio-fora:focus-visible { color: rgba(var(--frio), 0.6); border-color: rgba(var(--frio), 0.45); }
.radio-fora:hover span, .radio-fora:focus-visible span { color: rgba(var(--frio), 1); }

/* as faixas das fichas tocam no rádio */
.faixas .faixa-toca {
  position: relative; display: inline; max-width: 100%; padding: 0; margin: 0; background: none; border: 0;
  color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: inherit;
  transition: color .2s;
}
.faixas .faixa-toca::after { content: ' ▸'; opacity: 0; font-size: 8px; transition: opacity .2s; }
.faixas .faixa-toca:hover, .faixas .faixa-toca:focus-visible { color: rgba(var(--frio), 1); outline: none; }
.faixas .faixa-toca:hover::after, .faixas .faixa-toca:focus-visible::after { opacity: .8; }
.faixas .faixa-toca.atual { color: rgba(var(--frio), 1); }
.faixas .faixa-toca.toca::after { content: ' ∿'; opacity: .9; }

/* com a ficha aberta, o rádio encolhe ao essencial: título, tempo e controles */
html.painel-aberto .radio .radio-osc,
html.painel-aberto .radio .radio-capa,
html.painel-aberto .radio .radio-cab { display: none; }
html.painel-aberto .radio .radio-info { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* acende junto com o visor, depois do menu */
  .radio { animation: radio-liga 1.1s 2.2s both; }
  @keyframes radio-liga {
    0% { opacity: 0; transform: translateY(8px); }
    40% { opacity: .9; }
    55% { opacity: .25; }
    100% { opacity: 1; transform: none; }
  }
  .radio-titulo.rola span { animation: radio-letreiro var(--dur, 8s) 1.5s ease-in-out infinite alternate; }
  @keyframes radio-letreiro { 0%, 15% { transform: none; } 85%, 100% { transform: translateX(var(--d)); } }
  .radio.tocando .radio-toca::after { animation: rumo-gira 7s linear infinite; }
  .radio.carregando .radio-toca::after { animation-duration: 1.2s; }
  .radio.carregando .radio-estado { animation: rumo-pisca 0.9s steps(2, jump-none) infinite; }
  .radio.tocando .radio-estado::before { animation: radio-led 2.4s ease-in-out infinite; }
  @keyframes radio-led { 50% { opacity: .45; } }
  .radio-grupo button.toca .eq i { animation: radio-eq .9s ease-in-out infinite alternate; }
  .radio-grupo button.toca .eq i:nth-child(2) { animation-duration: .6s; animation-delay: -.3s; }
  .radio-grupo button.toca .eq i:nth-child(3) { animation-duration: .75s; animation-delay: -.5s; }
  @keyframes radio-eq { 0% { height: 15%; } 100% { height: 100%; } }
  .radio-lista:not([hidden]) { animation: radio-lista .45s cubic-bezier(.3, .8, .2, 1) both; }
  .radio-lista.saindo { animation: radio-lista-sai .24s cubic-bezier(.6, 0, .9, .4) both; }
  @keyframes radio-lista { 0% { clip-path: inset(100% 0 0 0); opacity: .4; } 100% { clip-path: inset(0); opacity: 1; } }
  @keyframes radio-lista-sai { 0% { clip-path: inset(0); opacity: 1; } 100% { clip-path: inset(100% 0 0 0); opacity: 0; } }
  .radio.lista-baixo .radio-lista:not([hidden]) { animation-name: radio-lista-desce; }
  .radio.lista-baixo .radio-lista.saindo { animation-name: radio-lista-sobe; }
  @keyframes radio-lista-desce { 0% { clip-path: inset(0 0 100% 0); opacity: .4; } 100% { clip-path: inset(0); opacity: 1; } }
  @keyframes radio-lista-sobe { 0% { clip-path: inset(0); opacity: 1; } 100% { clip-path: inset(0 0 100% 0); opacity: 0; } }
  /* sintonizou o disco do planeta na mira: o título pisca como um sinal chegando */
  .radio.sintonia .radio-txt, .radio.sintonia .radio-capa { animation: radio-sintonia .7s both; }
  @keyframes radio-sintonia { 0% { opacity: 0; filter: blur(2px); } 30% { opacity: .9; } 45% { opacity: .2; } 100% { opacity: 1; filter: none; } }
}
@media (prefers-reduced-motion: no-preference) {
  .faixas .faixa-toca.toca::after { animation: rumo-pisca 1.2s steps(2, jump-none) infinite; }
}

/* telas médias: o rádio fica mais estreito */
@media (max-width: 900px) { .radio { width: 380px; right: 24px; } }
/* tela estreita: recolhido num botão de tocar; expandido, vira uma folha embaixo, como o painel */
@media (max-width: 640px) {
  .radio { right: 18px; bottom: 18px; width: auto; padding: 10px; }
  .radio-cab, .radio-info, .radio-osc { touch-action: auto; }
  .radio:not(.expandida) .radio-cab,
  .radio:not(.expandida) .radio-capa,
  .radio:not(.expandida) .radio-txt,
  .radio:not(.expandida) .radio-osc,
  .radio:not(.expandida) .radio-tempo,
  .radio:not(.expandida) .radio-ctrl > :not(.radio-toca),
  .radio:not(.expandida) > .canto { display: none; }
  .radio:not(.expandida) .radio-corpo { display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; }
  .radio:not(.expandida) .radio-info, .radio:not(.expandida) .radio-ctrl { margin: 0; }
  .radio-abre { display: block; flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; color: rgba(var(--frio), 0.6); }
  .radio.expandida .radio-abre svg { transform: rotate(180deg); }
  .radio.expandida {
    left: 16px; right: 16px; bottom: 16px; padding: 16px 18px 12px;
    background: rgba(8, 9, 11, 0.78); border: 1px solid rgba(var(--frio), 0.14);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .radio.expandida > .canto { display: none; }
  .radio.expandida .radio-lista { left: -1px; right: -1px; bottom: calc(100% + 8px); max-height: 50vh; }
  .radio.expandida .radio-lista::after { display: none; }
  .radio-ctrl { gap: 18px; }
  .radio-vol { width: 72px; }
  /* a ficha vira folha embaixo e cobre o canto: o rádio se apaga enquanto ela está aberta */
  html.painel-aberto .radio { opacity: 0; visibility: hidden; }
}

/* rádio fechado: a música segue na barra do rodapé; só a lista de faixas pode abrir, sobre a barra */
.radio.fechada {
  left: 50%; right: auto; bottom: 70px; transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px)); height: 0; padding: 0; border: 0; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.radio.fechada > .canto, .radio.fechada .radio-corpo { display: none; }
.radio.fechada .radio-lista { left: 0; right: 0; bottom: 0; }
.radio.fechada .radio-lista::after { right: 50%; }
@media (max-width: 900px) { .radio.fechada { bottom: 114px; } }