:root{
  --bg:#0b1015; --panel:#0f1620; --ink:#e7eef5; --soft:#93a7bd;
  --c1:#68d4ff; --c2:#b176ff; --line:#1b2736;
  --inner-max: 1180px;        /* << más estrecho: todo se ve más “grande” */
  --nav-gap: 1rem;
  --nav-fs: clamp(15px, 1.15vw, 17px); /* tamaño texto nav */
  --ico-size: clamp(24px, 1.6vw, 30px);/* tamaño iconos nav */
  --logo-h: clamp(76px, 8vw, 96px);    /* altura logo */
  --pad-y: .75rem;
}

.main-header{
  background:url('/assets/pixel/ui/ui_pattern_dark.png') center/auto repeat, linear-gradient(180deg,#141c26,#0b1118);
  border-bottom:2px solid var(--line);
  position:sticky; top:0; z-index:1000;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05), 0 6px 25px rgba(0,0,0,.35);
}
.main-header .inner{
  max-width: var(--inner-max);              /* << 1180px */
  margin:auto;
  padding: var(--pad-y) 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

/* === Marca (logo) === */
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink)}
.brand img{
  height: 54px; width:auto; max-width:260px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.15));
  image-rendering: pixelated;
}
.brand.brand-xl img{               /* << crece con clamp() */
  height: var(--logo-h);
}
.brand-text{display:none;}
@media (min-width:640px){
  .brand-text{display:inline-block; letter-spacing:.3px; font-family:Cinzel,serif;}
}

/* === Navegación con iconos + texto === */
.nav-links{
  display:flex; align-items:center; gap: var(--nav-gap);
  flex:1; justify-content:center; flex-wrap:wrap
}
.nav-item{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#cfdae8; text-decoration:none;
  padding:.45rem .65rem; border-radius:12px; border:1px solid transparent;
  transition: all .15s ease;
  font-size: var(--nav-fs);                  /* << texto más grande */
}
.nav-item .ico{
  width: var(--ico-size); height: var(--ico-size); /* << iconos más grandes */
  image-rendering: pixelated; opacity:.95;
}
.nav-item:hover{
  color:#eaffff; border-color:#223647;
  box-shadow:0 0 0 1px #223647 inset, 0 0 14px rgba(104,212,255,.18);
}

/* === Botones === */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.62rem 1.05rem;                   /* << más altos */
  border-radius:12px; border:1px solid #26485e; text-decoration:none;
  font-family:Inter,system-ui,sans-serif; font-size: clamp(15px,1.05vw,16.5px);
  background:linear-gradient(180deg,#0f2a3a,#0b1c29);
  color:#e7faff; box-shadow:0 0 0 1px #0e2535 inset, 0 8px 22px rgba(104,212,255,.14);
}
.btn.primary{ border-color:#2a6f95; }
.btn.secondary{ border-color:#333; background:linear-gradient(180deg,#1a1d28,#12151d); color:#d6deea; }
.btn.small{ padding:.45rem .75rem; font-size:clamp(14px,.95vw,15.5px); border-radius:10px; }
.btn.danger{ border-color:#612828; background:linear-gradient(180deg,#4e1818,#2a0e0e); color:#ffd0d0; }

/* === Banderitas === */
.lang-flags{list-style:none; display:flex; align-items:center; gap:.45rem; margin:0; padding:0}
.lang-flags a{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  padding:.3rem .5rem; border-radius:10px; border:1px solid #22303f; color:#c9d4e3;
  background:rgba(15,22,32,.65); font-size: clamp(13px,.9vw,15px);
}
.lang-flags img{
  display:block; width:28px; height:18px; object-fit:cover; border-radius:2px; image-rendering:pixelated;
}
.lang-flags a:hover{
  color:#eaffff; border-color:#2a4158; box-shadow:0 0 0 1px #2a4158 inset, 0 0 12px rgba(104,212,255,.18);
}
.lang-flags li {
  list-style: none !important;
  display: inline-flex;
  margin: 0;
  padding: 0;
}

/* === Zona usuario === */
.user-info{display:flex; align-items:center; gap:.7rem;}
.user-info .avatar{width:36px; height:36px; border-radius:50%; border:1px solid #334; object-fit:cover; background:#111;}
.user-info .user-name{color:#dfe8f6; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* === Footer para coherencia (opcional) === */
.site-footer{
  border-top:1px solid var(--line); background:#0a0f14; color:var(--soft);
}
.site-footer .inner{
  max-width: var(--inner-max); margin:auto; padding:1rem; display:flex; gap:1rem; align-items:center; justify-content:space-between;
}
.site-footer a{ color:#a9bed6; text-decoration:none; margin-left:.75rem; }
.site-footer a:hover{ color:#d2ecff; }
/* tamaño coherente para el logo en todos los headers */
.main-header .brand .brand-logo{ height:36px; max-width:100%; object-fit:contain }
@media (max-width: 992px){
  .main-header .brand .brand-logo{ height:30px }
}
/* === Header — Botones compactos === */
.main-header .btn,
.main-header .nav-links .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;                 /* igual que "Entrar" */
  line-height: 36px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Evita que "Jugar gratis" se estire a toda la barra */
.main-header .btn.primary,
.main-header .btn.secondary {
  width: auto !important;
}

/* Toque sutil del primario */
.main-header .btn.primary {
  box-shadow: 0 3px 8px rgba(16, 185, 129, .25);
}

/* Separación entre items del menú */
.main-header .nav-links {
  gap: 20px;
}