/* =========================
   H Y T A L E   H E A D E R
   ========================= */

.mmo-header {
  background:
    linear-gradient(
      180deg,
      #0f3d2e 0%,
      #0b2b22 100%
    );
  border-bottom: 3px solid rgba(160, 255, 203, 0.35); /* verde neón */
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 6px 25px rgba(0,0,0,0.6);
}

/* Contenedor principal */
.mmo-nav {
  max-width: 1200px;
  margin: auto;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Orbitron', sans-serif;
}

/* =========================
   L O G O
   ========================= */

.logo {
  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  color: #A0FFCB; /* verde claro */
  text-shadow:
    0 2px 0 rgba(0,0,0,0.4),
    0 0 12px rgba(160,255,203,0.6);
}

/* (cuando tengamos el icono del logo) */
.logo img {
  height: 38px;
  width: auto;
  filter:
    drop-shadow(0 0 6px rgba(160,255,203,0.6));
}

/* =========================
   N A V   L I N K S
   ========================= */

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-links a {
  position: relative;
  text-decoration: none;

  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 1px;

  color: #A0FFCB;
  padding: 6px 2px;

  transition:
    color 0.25s ease,
    text-shadow 0.25s ease;
}

/* subrayado mágico */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 3px;
  border-radius: 4px;

  background:
    linear-gradient(
      90deg,
      #5affb8,
      #a0ffc3
    );

  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(160,255,203,0.8);
  transition: width 0.25s ease;
}

.nav-links a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(160,255,203,0.8);
}

.nav-links a:hover::after {
  width: 100%;
}

/* =========================
   L A N G U A G E
   ========================= */

.language-switcher {
  display: flex;
  gap: 6px;
}

.language-switcher button {
  background:
    linear-gradient(
      180deg,
      #0b2b22,
      #062016
    );

  border: 1px solid rgba(160,255,203,0.45);
  border-radius: 6px;

  color: #A0FFCB;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  padding: 6px 10px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 3px 6px rgba(0,0,0,0.5);

  transition: all 0.25s ease;
}

.language-switcher button:hover {
  background:
    linear-gradient(
      180deg,
      #0f3d2e,
      #08402a
    );

  box-shadow:
    0 0 10px rgba(160,255,203,0.8),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

/* =========================
   JOIN SERVER BUTTON
   ========================= */

.join-server button {
  background:
    linear-gradient(
      180deg,
      #5affb8,
      #3fd09a
    );
  border: none;
  border-radius: 6px;

  color: #062016;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;

  cursor: pointer;

  box-shadow:
    0 0 10px rgba(160,255,203,0.8),
    inset 0 1px 0 rgba(255,255,255,0.2);

  transition: all 0.25s ease;
}

.join-server button:hover {
  background:
    linear-gradient(
      180deg,
      #3fd09a,
      #27a87f
    );
  box-shadow:
    0 0 12px rgba(160,255,203,1),
    inset 0 1px 0 rgba(255,255,255,0.3);
}