/* Selector de servidores (AOServerPicker.js): un boton por servidor arriba al centro, fuera del escudo del login,
   solo en las pantallas de ingreso. Al pasar el mouse (o con el teclado) cada boton muestra las reglas de su servidor. */
.ao-server-picker {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10000;
  display: none; max-width: calc(100vw - 24px); box-sizing: border-box;
  font: 600 12px/1.2 system-ui, 'Segoe UI', Arial, sans-serif;
}
.ao-server-picker[hidden] { display: none !important; }
body[data-ao-app-state="ACCOUNT_LOGIN"] .ao-server-picker:not([hidden]),
body[data-ao-app-state="ACCOUNT_CREATE"] .ao-server-picker:not([hidden]) { display: block; }
html.ao-splash-on .ao-server-picker { display: none !important; }
.ao-server-picker-list { display: flex; gap: 10px; }

.ao-server-card {
  position: relative; flex: 1 1 0; min-width: 150px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px;
  color: #e9dfc9; text-decoration: none; cursor: pointer;
  background: rgba(18, 16, 12, .88); border: 1px solid rgba(212, 175, 55, .5); border-radius: 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .55); transition: border-color .15s, background .15s, transform .15s;
}
.ao-server-card:hover, .ao-server-card:focus-visible { border-color: #d4af37; background: rgba(40, 34, 20, .92); outline: none; }
a.ao-server-card:hover { transform: translateY(1px); }
.ao-server-card.pvp { border-color: rgba(214, 96, 77, .6); }
.ao-server-card.pvp:hover, .ao-server-card.pvp:focus-visible { border-color: #e0705a; }
.ao-server-card.current { background: linear-gradient(180deg, rgba(212, 175, 55, .28), rgba(212, 175, 55, .12)); border-color: #d4af37; cursor: default; }
.ao-server-card.offline:not(.current) { cursor: not-allowed; }
.ao-server-card.offline:not(.current) .ao-server-dot, .ao-server-card.offline:not(.current) .ao-server-text { opacity: .6; }

.ao-server-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #777; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.ao-server-card.online .ao-server-dot { background: #5fd36b; box-shadow: 0 0 8px rgba(95, 211, 107, .8), 0 0 0 2px rgba(0, 0, 0, .35); }
.ao-server-card.offline .ao-server-dot { background: #d9614f; }
.ao-server-card.loading .ao-server-dot { animation: aoServerPulse 1.2s ease-in-out infinite; }
@keyframes aoServerPulse { 50% { opacity: .35; } }
.ao-server-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ao-server-name { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: #f3e7c8; }
.ao-server-card.current .ao-server-name { color: #ffe9a8; }
.ao-server-count { font-size: 11px; font-weight: 600; color: #a8997c; white-space: nowrap; }

/* Cuadro de informacion: aparece debajo del boton, sin capturar el mouse. */
.ao-server-tip {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 2; width: min(290px, calc(100vw - 24px)); box-sizing: border-box;
  padding: 12px 14px; text-align: left; font-weight: 500; line-height: 1.45; color: #e9dfc9;
  background: rgba(14, 12, 9, .97); border: 1px solid rgba(212, 175, 55, .6); border-radius: 8px; box-shadow: 0 8px 26px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s, visibility .15s;
}
.ao-server-card:last-child .ao-server-tip { left: auto; right: 0; }
.ao-server-card:only-child .ao-server-tip { left: 0; right: auto; }
.ao-server-card:hover .ao-server-tip, .ao-server-card:focus-visible .ao-server-tip, .ao-server-card:focus-within .ao-server-tip { opacity: 1; visibility: visible; transform: none; }
.ao-server-tip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ao-server-tip-head strong { font-size: 14px; color: #f3e7c8; }
.ao-server-status { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #3a3a3a; color: #ccc; }
.ao-server-status.online { background: rgba(95, 211, 107, .18); color: #7be389; }
.ao-server-status.offline { background: rgba(217, 97, 79, .2); color: #f08a7a; }
.ao-server-fact { font-size: 12px; color: #c9bb9a; }
.ao-server-rules { margin: 8px 0 0; padding: 8px 0 0 18px; border-top: 1px solid rgba(212, 175, 55, .25); font-size: 12px; }
.ao-server-rules li { margin: 2px 0; }
.ao-server-tip-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(212, 175, 55, .25); font-size: 11px; color: #a8997c; }

@media (max-width: 480px) {
  .ao-server-picker-list { gap: 6px; }
  .ao-server-card { min-width: 0; padding: 7px 10px 7px 9px; gap: 7px; }
  .ao-server-name { font-size: 13px; }
  .ao-server-count { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ao-server-card, .ao-server-tip { transition: none; } .ao-server-card.loading .ao-server-dot { animation: none; } }