/* Painel do rádio do carro (src/radio/radio-ui.js). Fica à direita, logo abaixo do minimapa da cidade;
   o jogo pode mudar a posição com as variáveis --radio-topo / --radio-direita. */
.radio-carro {
  --radio-cor: #8e6cff;
  position: fixed; z-index: 7;
  top: var(--radio-topo, calc(env(safe-area-inset-top, 0px) + 264px));
  right: var(--radio-direita, calc(env(safe-area-inset-right, 0px) + 12px));
  display: flex; align-items: center; gap: 4px;
  width: 340px; max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 4px 6px; border: 4px solid #1d1d2b; border-radius: 18px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 0 #1d1d2b;
  font-family: var(--texto, "Nunito", system-ui, sans-serif); color: #1d1d2b;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.radio-carro[hidden] { display: none; }
.radio-bt {
  flex: none; width: 44px; height: 44px; padding: 0; border: 3px solid #1d1d2b; border-radius: 50%;
  background: #fff; color: #1d1d2b; font: 800 18px/1 system-ui, sans-serif; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.radio-bt:active { transform: translateY(2px); }
.radio-liga { background: var(--radio-cor); color: #fff; font-size: 20px; }
.radio-carro.desligado .radio-liga { background: #d9d9e3; color: #1d1d2b; }
.radio-visor { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; padding: 0 2px; }
.radio-estacao { grid-column: 2; font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--radio-cor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-hino { grid-column: 1 / 3; font-weight: 700; font-size: 12px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.radio-carro.desligado .radio-estacao { color: #8a8a99; }
.radio-carro.desligado .radio-hino { color: #8a8a99; }
.radio-ano { display: none; }
/* barrinhas de "som" (só CSS) */
.radio-ondas { grid-row: 1; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.radio-ondas i { width: 3px; height: 100%; border-radius: 2px; background: var(--radio-cor); transform-origin: bottom; animation: radio-pulsa 0.9s ease-in-out infinite; }
.radio-ondas i:nth-child(2) { animation-delay: -0.3s; } .radio-ondas i:nth-child(3) { animation-delay: -0.6s; } .radio-ondas i:nth-child(4) { animation-delay: -0.15s; }
.radio-carro.desligado .radio-ondas i { animation: none; transform: scaleY(0.2); background: #b8b8c6; }
@keyframes radio-pulsa { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .radio-ondas i { animation: none; transform: scaleY(0.6); } }
.radio-teclas { position: absolute; right: 10px; bottom: -22px; font: 700 12px var(--texto, system-ui, sans-serif); color: #fff; text-shadow: 0 1px 2px #000a; white-space: nowrap; }
body.touch .radio-teclas, body.com-controle .radio-teclas { display: none; }
@media (pointer: coarse) { .radio-teclas { display: none; } }

/* celular deitado: abaixo do minimapa menor; compacto, sem invadir o botão de ação (embaixo à direita) */
@media (max-height: 500px) {
  .radio-carro { top: var(--radio-topo, calc(env(safe-area-inset-top, 0px) + 176px)); width: 284px; padding: 1px 3px; gap: 2px; border-width: 3px; border-radius: 16px; box-shadow: 0 3px 0 #1d1d2b; }
  .radio-bt { width: 44px; height: 44px; font-size: 15px; border-width: 2px; }
  .radio-ant, .radio-prox { width: 36px; border-radius: 12px; position: relative; }
  /* área de toque continua com 44 px de largura */
  .radio-ant::after, .radio-prox::after { content: ""; position: absolute; inset: 0 -4px; }
  .radio-estacao { font-size: 12px; }
  .radio-hino { font-size: 10px; display: block; white-space: nowrap; text-overflow: ellipsis; }
  .radio-ondas, .radio-prefixo, .radio-rotulo { display: none; }
  .radio-ano { display: inline; }
  .radio-estacao { grid-column: 1 / 3; }
}