.hero-controls { display: grid; justify-items: end; gap: 10px; }
.country-picker { display: grid; gap: 5px; width: 205px; }
.country-picker span { color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.country-picker select {
  width: 100%; padding: 9px 34px 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: #0c1613; color: var(--text); font: inherit; font-size: .83rem; cursor: pointer;
}
.listen { width: 38px; height: 34px; padding: 0; border-radius: 9px; font-size: 0; }
.listen::after { content: "🔈"; font-size: 1rem; filter: grayscale(1); }
.listen.active { border-color: var(--green); background: var(--green); box-shadow: 0 0 16px rgba(85,227,157,.3); }
.listen.active::after { content: "🔊"; filter: none; }
.listen.connecting::after { content: "…"; color: #06100c; font-size: 1rem; font-weight: 900; }
@media (max-width:780px) {
  .hero-controls { justify-items: start; margin-top: 20px; }
  .connection { margin-top: 0; }
  .country-picker { width: min(100%, 240px); }
}