/* Cabecera en tres zonas: marca | navegación | herramientas + monedas.
   Escritorio: todo en una fila. Móvil: marca y monedas arriba; navegación y herramientas debajo. */
.topbar-in { gap: 12px; }
.nav { margin-left: 4px; gap: 4px; }

/* Herramientas: idioma, Discord, cuenta y sonido agrupados en una sola cápsula */
.tools {
  flex: none; display: flex; align-items: center; gap: 2px; padding: 3px;
  background: rgba(31, 29, 46, 0.28); border-radius: 10px;
}
.tools .icon-btn { width: 34px; height: 34px; opacity: 0.9; }
.tools .icon-btn.off { opacity: 0.55; }
.tools .icon-btn:hover, .tools .icon-btn:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.16); }
.tools .discord-btn:hover, .tools .discord-btn:focus-visible { background: #5865f2; }
.tools .discord-btn img { width: 22px; height: 22px; display: block; }

/* Selector de idioma, integrado en la cápsula */
.lang-sel {
  appearance: none; -webkit-appearance: none; flex: none;
  font: inherit; font-size: 11px; color: #fff; cursor: pointer;
  background: transparent; border: 0; border-radius: 7px; padding: 9px 6px; width: auto;
  text-shadow: 1px 1px 0 var(--ink);
}
.lang-sel:hover, .lang-sel:focus-visible { background: rgba(255, 255, 255, 0.16); }
.lang-sel option { color: #1f1d2e; background: #fff; text-shadow: none; }
.lang-sel[hidden] { display: none; }

@media (max-width: 680px) {
  .tools .icon-btn { width: 32px; height: 32px; }
}

@media (max-width: 520px) {
  .topbar-in { display: grid; grid-template-columns: 1fr auto; gap: 8px 6px; padding: 8px; align-items: center; }
  .brand { display: flex; gap: 0; grid-column: 1; grid-row: 1; }
  .brand-name { font-size: 12px; -webkit-text-stroke-width: 4px; }
  .coins { grid-column: 2; grid-row: 1; min-width: 0; }
  .nav {
    grid-column: 1; grid-row: 2; margin: 0; gap: 4px; display: grid; grid-template-columns: repeat(3, 1fr);
  }
  .navlink { font-size: 8px; padding: 10px 2px; text-align: center; white-space: nowrap; }
  .tools { grid-column: 2; grid-row: 2; }
  .tools .icon-btn { width: 30px; height: 30px; }
  .lang-sel { padding: 8px 3px; font-size: 10px; }
}

/* Páginas estáticas (sin monedas): la cápsula de herramientas sube a la fila de la marca en móvil */
.lang-link { text-decoration: none; display: inline-block; }
@media (max-width: 520px) {
  .topbar-in.static .tools { grid-row: 1; }
  .topbar-in.static .nav { grid-column: 1 / -1; }
}