/* =========================================================
   MuGM AAA Dark Fantasy — override stylesheet (separado)
   Fuentes: Cinzel / Inter / Orbitron
   ========================================================= */

:root{
  --bg0:#0B0E13;
  --bg1:#101521;
  --bg2:#151A22;
  --line:#232A3A;
  --text:#E6E9F2;
  --muted:#AAB2C5;

  --gold:#C8A45A;
  --gold2:#9F7C3A;

  --aether:#4FA3FF;
  --cyan:#00F2FF;

  --danger:#E74C3C;
  --success:#2ECC71;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --r12:12px;
  --r16:16px;
  --r20:20px;
  --mugm-bg0: #050812;
  --mugm-bg1: #070b18;
  --mugm-bg2: #0a1222;

  --mugm-card: rgba(12,18,34,.58);
  --mugm-card2: rgba(10,14,26,.48);

  --mugm-line: rgba(255,255,255,.07);
  --mugm-line2: rgba(255,255,255,.10);

  --mugm-blue: #4fd0ff;
  --mugm-blue2:#0ea5e9;
  --mugm-gold: #d7b25d;
  --mugm-text: rgba(255,255,255,.88);
  --mugm-muted: rgba(255,255,255,.65);

  --mugm-shadow: 0 18px 55px rgba(0,0,0,.50);
  --mugm-shadow2: 0 10px 25px rgba(0,0,0,.40);
  --mugm-radius: 18px;
}

}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body.mugm-body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(79,163,255,.12), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(200,164,90,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg0));
}

/* ===== Layout width (más ancho real en desktop) ===== */
.mugm-shell{
  width: 100%;
  max-width: 1320px;          /* antes seguro 1100/1200 */
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* pantallas grandes */
@media (min-width: 1600px){
  .mugm-shell{ max-width: 1440px; }
}

/* mobile */
@media (max-width: 576px){
  .mugm-shell{ padding-left: 14px; padding-right: 14px; }
}


/* Links */
.mugm-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  text-decoration:none;
  border:0;
  background:transparent;
  padding:6px 10px;
  border-radius:999px;
}
.mugm-link:hover{ color:var(--text); background: rgba(255,255,255,.06); }
.mugm-link--discord{
  color:#EAF0FF;
  background: rgba(88,101,242,.16);
  border:1px solid rgba(88,101,242,.25);
}
.mugm-link--discord:hover{ background: rgba(88,101,242,.22); }

/* Topbar */
.mugm-topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,14,19,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mugm-topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  gap:16px;
}
.mugm-topbar__left,
.mugm-topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.mugm-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--text);
  font-weight:600;
}
.mugm-badge--version{
  border-color: rgba(200,164,90,.25);
  background: rgba(200,164,90,.10);
}
.mugm-clock{
  color:var(--muted);
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

/* Header */
.mugm-header{
  position:sticky;
  top:48px;
  z-index:49;
  background: rgba(11,14,19,.78);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.mugm-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
}
.mugm-brand{ display:flex; align-items:center; text-decoration:none; }
.mugm-brand__logo{
  width:auto;
  height:46px;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.55));
}

/* Nav */
.mugm-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
/* WebEngine navbar output suele generar <li><a>... */
.mugm-nav__list li{ margin:0; padding:0; }
.mugm-nav__list a{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
}
.mugm-nav__list a:hover{
  color:var(--text);
  background: rgba(255,255,255,.06);
}

/* Actions / Buttons */
.mugm-actions{ display:flex; align-items:center; gap:10px; }
.mugm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight:700;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
.mugm-btn--full{ width:100%; }
.mugm-btn--lg{ padding:12px 18px; font-size:15px; }

.mugm-btn--ghost{
  color:var(--text);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.mugm-btn--ghost:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}
.mugm-btn--gold{
  color:#120E06;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  border-color: rgba(200,164,90,.35);
  box-shadow: 0 16px 45px rgba(200,164,90,.18);
}
.mugm-btn--gold:hover{
  filter: brightness(1.03);
  box-shadow: 0 18px 55px rgba(200,164,90,.22);
}

/* Hamburger */
.mugm-hamburger{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--text);
}

/* Mobile menu */
.mugm-nav--mobile{ display:none; }
.mugm-nav--mobile.show{ display:block; }
.mugm-mobile-cta{ padding: 14px 0 18px; display:grid; gap:10px; }

/* Hero */
.mugm-hero{
  position:relative;
  overflow:hidden;
  padding: 42px 0 28px;
}
.mugm-hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 30% 15%, rgba(79,163,255,.18), transparent 60%),
    radial-gradient(800px 520px at 75% 10%, rgba(200,164,90,.14), transparent 55%),
    linear-gradient(180deg, rgba(21,26,34,.85), rgba(11,14,19,.25));
  pointer-events:none;
}
.mugm-hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:center;
}
.mugm-hero__copy{
  padding: 22px 0;
}
.mugm-hero__kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.mugm-dot{
  width:10px; height:10px;
  border-radius:50%;
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}
.mugm-dot--online{ background: var(--success); }
.mugm-dot--offline{ background: var(--danger); }
.mugm-kicker-text{ color:var(--muted); font-weight:600; }

.mugm-title{
  font-family: Cinzel, serif;
  letter-spacing: .6px;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.06;
  margin: 0 0 12px;
}
.mugm-title__accent{
  color: var(--gold);
  text-shadow: 0 18px 60px rgba(200,164,90,.22);
}
.mugm-subtitle{
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 16px;
}
.mugm-hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}

.mugm-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.mugm-stat{
  padding: 12px 14px;
  border-radius: var(--r16);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  min-width: 150px;
}
.mugm-stat__label{
  display:block;
  color: var(--muted);
  font-weight:700;
  font-size: 12px;
}
.mugm-stat__value{
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .3px;
}

.mugm-hero__art{
  position:relative;
  min-height: 280px;
}
.mugm-hero__img{
  position:absolute;
  max-width: 330px;
  filter: drop-shadow(0 25px 65px rgba(0,0,0,.55));
  opacity:.95;
}
.mugm-hero__img--left{ left:0; bottom:-24px; transform: translateX(-6%); }
.mugm-hero__img--right{ right:0; bottom:-24px; transform: translateX(6%); }

/* Main */
.mugm-main{ padding: 18px 0 34px; }

/* Sections */
.mugm-section{
  margin-top: 22px;
  padding: 18px 16px;
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.mugm-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}
.mugm-section__title{
  margin:0;
  font-family: Cinzel, serif;
  letter-spacing: .5px;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  display:flex;
  align-items:center;
  gap:10px;
}

/* Modals */
.mugm-modal{
  background: #0f1420;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow:hidden;
}
.mugm-modal__header{
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mugm-modal__header .modal-title{
  font-family: Cinzel, serif;
  font-weight: 800;
}
.mugm-modal__body{ background: transparent; }

/* Eventos list */
.mugm-event-list{ list-style:none; margin:0; padding:0; }
.mugm-event-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mugm-event-card:last-child{ border-bottom:none; }
.mugm-event-name{ font-weight:800; color:var(--text); }
.mugm-event-next{ color:var(--muted); font-size:12px; }
.mugm-event-next span{ color: rgba(79,163,255,.95); font-weight:700; }
.mugm-event-badge{
  background: rgba(79,163,255,.16);
  border: 1px solid rgba(79,163,255,.22);
  color: #EAF3FF;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight:800;
  font-family: Orbitron, Inter, sans-serif;
  font-size: 12px;
  letter-spacing: .2px;
}

/* TikTok floating button */
.mugm-tiktok{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  gap:10px;
}
.mugm-tiktok.is-live{
  border-color: rgba(0,242,255,.35);
  background: rgba(0,242,255,.10);
}

/* Responsive */
@media (max-width: 991px){
  .mugm-nav--desktop{ display:none; }
  .mugm-hamburger{ display:inline-flex; align-items:center; justify-content:center; }
  .mugm-hero__inner{ grid-template-columns: 1fr; }
  .mugm-hero__art{ min-height: 210px; }
  .mugm-hero__img{ max-width: 280px; }
  .mugm-hero__img--left{ left: -20px; bottom:-20px; }
  .mugm-hero__img--right{ right: -20px; bottom:-20px; }
}

/* Bootstrap modal close button visibility */
.modal .close{ color: #fff; opacity:.8; }
.modal .close:hover{ opacity:1; }
/* ===== NAVBAR HOTFIX (evita que legacy CSS lo infle) ===== */
.mugm-header{ height:auto !important; }
.mugm-header__inner{ min-height: 74px; } /* controla alto real */
.mugm-brand__logo{ height:42px; }

.mugm-nav__list{
  display:flex !important;
  flex-direction: row !important;
  align-items:center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

/* Neutraliza estilos Bootstrap/legacy sobre ul/li/a */
.mugm-nav__list,
.mugm-nav__list li{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

.mugm-nav__list > li{ display:flex !important; align-items:center !important; }

.mugm-nav__list a{
  display:inline-flex !important;
  width:auto !important;
  height:auto !important;
  line-height: 1.1 !important;
  padding: 10px 12px !important;
  margin: 0 !important;
}

/* Si WebEngine mete dropdowns */
.mugm-nav__list .dropdown-menu{
  background: #0f1420 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  padding: 8px !important;
}
.mugm-nav__list .dropdown-menu > li > a{
  border-radius: 10px !important;
  padding: 10px 10px !important;
  color: rgba(230,233,242,.85) !important;
}
.mugm-nav__list .dropdown-menu > li > a:hover{
  background: rgba(255,255,255,.06) !important;
  color: #E6E9F2 !important;
}

/* Evita que la topbar + header te coman media pantalla */
.mugm-topbar{ padding:0 !important; }
.mugm-topbar__inner{ padding: 8px 0 !important; }
/* ===== FIX CRÍTICO: el menú móvil quedó siempre visible por CSS legacy ===== */
#mobile-nav-menu{
  display:none !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

#mobile-nav-menu.show{
  display:block !important;
}

/* Asegura el nav desktop en una fila */
.mugm-nav--desktop{
  display:block !important;
}

.mugm-nav--desktop .mugm-nav__list{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center; /* si lo querés centrado */
  flex-wrap:wrap !important;
  gap:8px !important;
}

/* Neutraliza cualquier regla vieja tipo "li {display:block;width:100%}" */
.mugm-nav--desktop .mugm-nav__list > li{
  display:flex !important;
  width:auto !important;
}
.mugm-nav--desktop .mugm-nav__list > li > a{
  display:inline-flex !important;
  width:auto !important;
}
/* ===== FIX DEFINITIVO: items del navbar quedan en columna por reglas legacy ===== */

/* Asegura que el NAV desktop NO sea el móvil */
.mugm-nav--desktop{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* El UL siempre en una sola línea */
.mugm-nav--desktop .mugm-nav__list{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;        /* <- clave */
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:auto !important;
  white-space:nowrap !important;      /* <- evita cortes raros */
}

/* EL PROBLEMA: li “se estira” a 100% por CSS viejo */
.mugm-nav--desktop .mugm-nav__list > li{
  display:inline-flex !important;
  width:auto !important;
  flex:0 0 auto !important;           /* <- clave */
  float:none !important;
}

/* Anchor también auto */
.mugm-nav--desktop .mugm-nav__list > li > a{
  display:inline-flex !important;
  width:auto !important;
  flex:0 0 auto !important;
  padding:10px 12px !important;
  white-space:nowrap !important;
}

/* Si WebEngine mete spans/ics */
.mugm-nav--desktop .mugm-nav__list *{
  max-width:none !important;
}
/* Si la función imprime UL adentro, lo estilizamos igual */
.mugm-nav__list ul{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.mugm-nav__list ul > li{ flex:0 0 auto !important; width:auto !important; }
/* =========================================================
   AAA Highlight Slider (inc/modules/slider.php)
   ========================================================= */

.mugm-hslider{
  padding: 0 !important; /* ya viene envuelto por .mugm-section */
  overflow: hidden;
}

.mugm-hslider__frame{
  position: relative;
  border-radius: var(--r20);
  overflow: hidden;
  min-height: 360px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

/* Swiper container */
.mugm-hslider__swiper{
  position: relative;
  width: 100%;
  min-height: 360px;
}

/* Slide */
.mugm-hslide{
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 360px;
}

/* Overlay cinematic */
.mugm-hslide__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 380px at 18% 50%, rgba(11,14,19,.18), rgba(11,14,19,.72) 55%, rgba(11,14,19,.92)),
    linear-gradient(90deg, rgba(11,14,19,.82), rgba(11,14,19,.35) 55%, rgba(11,14,19,.82));
}

/* Content */
.mugm-hslide__content{
  position: relative;
  z-index: 2;
  padding: 28px 26px;
  max-width: 640px;
}

.mugm-hslide__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 12px;
  color: #EAF3FF;
  background: rgba(79,163,255,.14);
  border: 1px solid rgba(79,163,255,.22);
  margin-bottom: 12px;
}
.mugm-hslide__tag--gold{
  background: rgba(200,164,90,.12);
  border-color: rgba(200,164,90,.25);
  color: #FFF3DD;
}

.mugm-hslide__title{
  margin: 0 0 10px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 28px;
  line-height: 1.1;
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.mugm-hslide__text{
  margin: 0 0 16px;
  color: rgba(230,233,242,.86);
  line-height: 1.6;
  max-width: 60ch;
}

.mugm-hslide__cta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Dots */
.mugm-hslider__dots{
  position:absolute;
  left: 22px !important;
  bottom: 18px !important;
  width:auto !important;
}
.mugm-hslider__dots .swiper-pagination-bullet{
  width: 9px; height: 9px;
  opacity: 1;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.14);
  margin: 0 4px !important;
}
.mugm-hslider__dots .swiper-pagination-bullet-active{
  background: rgba(200,164,90,.85);
  border-color: rgba(200,164,90,.35);
}

/* Figure */
.mugm-hslider__figure{
  position:absolute;
  right: -18px;
  bottom: -22px;
  height: 420px;
  width: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.60));
  transition: opacity .38s ease, transform .38s ease;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mugm-hslider__figure.is-fading{
  opacity: 0;
  transform: translateY(14px) scale(.97);
}

/* Responsive */
@media (max-width: 991px){
  .mugm-hslider__frame,
  .mugm-hslider__swiper,
  .mugm-hslide{ min-height: 420px; }

  .mugm-hslide__content{ padding: 22px 18px; }

  .mugm-hslider__figure{
    height: 280px;
    right: -24px;
    bottom: -18px;
    opacity: .9;
  }

  .mugm-hslider__dots{
    left: 16px !important;
    bottom: 14px !important;
  }
}
/* =========================================================
   AAA Gallery + Lightbox (inc/modules/carousel.php)
   ========================================================= */

.mugm-gallery{
  padding: 0;
}

.mugm-gallery__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 12px;
}

.mugm-gallery__kicker{
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 12px;
  display:flex;
  align-items:center;
  gap:8px;
}

.mugm-gallery__title{
  margin: 2px 0 0;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 20px;
}

.mugm-gallery__controls{
  display:flex;
  gap:10px;
}

.mugm-gallery__btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.mugm-gallery__btn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

.mugm-gallery__viewport{
  position: relative;
  overflow: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r16);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}

/* oculta scrollbar (sin romper scroll) */
.mugm-gallery__viewport::-webkit-scrollbar{ height: 10px; }
.mugm-gallery__viewport::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}

.mugm-gallery__track{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 33.333%;
  gap: 14px;
  padding: 14px;
  align-items: stretch;
}

/* Cards */
.mugm-gallery__card{
  position: relative;
  border: 0;
  padding: 0;
  border-radius: var(--r16);
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  scroll-snap-align: start;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  transform: translateZ(0);
}

.mugm-gallery__img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display:block;
  filter: contrast(1.02) saturate(1.04);
  transform: scale(1.01);
  transition: transform .35s ease, filter .35s ease;
}

.mugm-gallery__shine{
  position:absolute; inset:0;
  background: radial-gradient(420px 220px at 20% 0%, rgba(255,255,255,.10), transparent 45%),
              linear-gradient(180deg, rgba(11,14,19,.05), rgba(11,14,19,.45));
  opacity: .85;
  pointer-events:none;
}

.mugm-gallery__card:hover .mugm-gallery__img{
  transform: scale(1.06);
  filter: contrast(1.05) saturate(1.12);
}

.mugm-gallery__hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color: var(--muted);
  font-size: 12px;
  padding: 10px 0 0;
}
.mugm-gallery__dot{ opacity:.6; }

/* Responsive columns */
@media (max-width: 991px){
  .mugm-gallery__track{ grid-auto-columns: 58%; }
  .mugm-gallery__img{ height: 200px; }
}
@media (max-width: 560px){
  .mugm-gallery__track{ grid-auto-columns: 86%; }
  .mugm-gallery__img{ height: 190px; }
}

/* ===== Lightbox ===== */
.mugm-lock{ overflow:hidden !important; }

.mugm-lightbox{
  position: fixed;
  inset: 0;
  z-index: 3000;
}

.mugm-lightbox__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(6px);
}

.mugm-lightbox__panel{
  position: relative;
  width: min(1100px, calc(100% - 28px));
  height: min(82vh, 760px);
  margin: 7vh auto 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,20,32,.85);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
}

.mugm-lightbox__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  display:block;
  user-select:none;
}

.mugm-lightbox__close{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 2;
}
.mugm-lightbox__close:hover{ background: rgba(255,255,255,.10); }

.mugm-lightbox__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 2;
}
.mugm-lightbox__nav:hover{ background: rgba(255,255,255,.10); }
.mugm-lightbox__nav--prev{ left: 12px; }
.mugm-lightbox__nav--next{ right: 12px; }

.mugm-lightbox__meta{
  position:absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(230,233,242,.90);
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
}

/* Open animation */
.mugm-lightbox.is-open .mugm-lightbox__panel{
  animation: mugmPop .14s ease-out;
}
@keyframes mugmPop{
  from{ transform: translateY(10px) scale(.985); opacity: .85; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
/* =========================================================
   AAA Leaderboards (inc/home_ranking.php)
   ========================================================= */

.mugm-leaderboards{
  padding: 0;
}

.mugm-leaderboards__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mugm-leaderboard{
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.mugm-leaderboard__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(700px 220px at 20% 0%, rgba(200,164,90,.10), transparent 55%),
              rgba(255,255,255,.03);
}

.mugm-leaderboard__title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 16px;
}
.mugm-leaderboard__title i{
  color: rgba(200,164,90,.95);
}

.mugm-leaderboard__link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color: rgba(230,233,242,.78);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  font-size: 12px;
}
.mugm-leaderboard__link:hover{
  color: var(--text);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}

.mugm-leaderboard__list{
  padding: 10px;
  display:grid;
  gap: 10px;
}

/* Entry card */
.mugm-entry{
  display:grid;
  grid-template-columns: 42px 48px 1fr 120px;
  gap: 10px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}

.mugm-entry:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
}

.mugm-entry__pos{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 42px;
}

.mugm-rankpos{
  display:inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  align-items:center;
  justify-content:center;
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: rgba(230,233,242,.92);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.mugm-medal{
  font-size: 18px;
  filter: drop-shadow(0 12px 35px rgba(0,0,0,.55));
}
.mugm-medal--gold{ color: rgba(200,164,90,.95); }
.mugm-medal--silver{ color: rgba(200,210,225,.95); }
.mugm-medal--bronze{ color: rgba(190,120,70,.95); }

.mugm-entry__avatar,
.mugm-entry__guildlogo{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}

.mugm-classimg{
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
  display:block;
}

.mugm-glogo{
  display:block;
  width: 34px;
  height: 34px;
  image-rendering: -webkit-optimize-contrast;
}

.mugm-entry__main{
  min-width: 0;
}

.mugm-entry__name{
  font-weight: 900;
  color: rgba(230,233,242,.98);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mugm-entry__sub{
  margin-top: 2px;
  color: rgba(170,178,197,.92);
  font-size: 12px;
}
.mugm-muted{ color: rgba(170,178,197,.92); }

.mugm-entry__stat{
  justify-self:end;
  text-align:right;
  padding-left: 8px;
}
.mugm-entry__statlabel{
  color: rgba(170,178,197,.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
}
.mugm-entry__statvalue{
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: rgba(230,233,242,.98);
}

/* Empty */
.mugm-empty{
  padding: 12px;
  color: rgba(170,178,197,.92);
}

/* Responsive */
@media (max-width: 991px){
  .mugm-leaderboards__grid{ grid-template-columns: 1fr; }
  .mugm-entry{ grid-template-columns: 42px 48px 1fr 110px; }
}
@media (max-width: 560px){
  .mugm-entry{ grid-template-columns: 38px 46px 1fr; }
  .mugm-entry__stat{ display:none; }
}
/* =========================================================
   AAA Footer (inc/modules/footer.php)
   ========================================================= */

.mugm-footer{
  margin-top: 26px;
  padding: 26px 0 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 380px at 15% 0%, rgba(200,164,90,.10), transparent 55%),
    radial-gradient(900px 380px at 85% 0%, rgba(79,163,255,.12), transparent 55%),
    rgba(11,14,19,.65);
}

.mugm-footer__top{
  display:grid;
  grid-template-columns: 1.2fr .7fr .8fr;
  gap: 16px;
  padding: 18px 0;
}

.mugm-footer__brand{
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 16px;
}

.mugm-footer__logo img{
  height: 54px;
  width: auto;
  display:block;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}

.mugm-footer__tagline{
  margin: 10px 0 14px;
  color: rgba(170,178,197,.92);
  line-height: 1.55;
  max-width: 52ch;
}

.mugm-footer__cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.mugm-footer__col{
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 16px;
}

.mugm-footer__title{
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .6px;
  margin-bottom: 10px;
}

.mugm-footer__links{
  display:grid;
  gap: 8px;
}

.mugm-footer__links a{
  color: rgba(230,233,242,.78);
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.mugm-footer__links a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* Social */
.mugm-footer__social{
  display:flex;
  gap:10px;
  margin-top: 12px;
  flex-wrap:wrap;
}

.mugm-social{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(230,233,242,.88);
  text-decoration:none;
  font-weight: 900;
}
.mugm-social i{ font-size: 18px; }
.mugm-social:hover{
  color: var(--text);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}
.mugm-social--discord{
  border-color: rgba(88,101,242,.22);
  background: rgba(88,101,242,.12);
}

/* Bottom */
.mugm-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,.06);
  color: rgba(170,178,197,.92);
  font-size: 12px;
}

.mugm-footer__copy{
  line-height: 1.6;
}

.mugm-footer__disclaimer{
  display:block;
  opacity: .9;
}

.mugm-footer__powered{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.mugm-footer__ssemu img{
  height: 24px;
  width: auto;
  display:block;
  opacity: .95;
}

/* Responsive */
@media (max-width: 991px){
  .mugm-footer__top{ grid-template-columns: 1fr; }
  .mugm-footer__bottom{ flex-direction: column; align-items:flex-start; }
  .mugm-footer__powered{ white-space: normal; }
}
/* =========================================================
   AAA UserCP (inc/modules/usercp_dropdown.php)
   ========================================================= */

.mugm-usercp{
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.mugm-usercp__head{
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(700px 220px at 20% 0%, rgba(79,163,255,.10), transparent 55%),
              rgba(255,255,255,.03);
}

.mugm-usercp__title{
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .6px;
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 16px;
}

.mugm-usercp__sub{
  margin-top: 4px;
  color: rgba(170,178,197,.92);
  font-size: 12px;
}

.mugm-usercp__grid{
  display:grid;
  gap: 10px;
  padding: 12px;
}

.mugm-usercp__item{
  display:grid;
  grid-template-columns: 44px 1fr 20px;
  gap: 12px;
  align-items:center;
  text-decoration:none;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  color: rgba(230,233,242,.92);
}

.mugm-usercp__item:hover{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.14);
  color: var(--text);
}

.mugm-usercp__icon{
  width:44px;
  height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(230,233,242,.92);
}

.mugm-usercp__icon--gem{ border-color: rgba(200,164,90,.22); background: rgba(200,164,90,.10); }
.mugm-usercp__icon--gold{ border-color: rgba(200,164,90,.28); background: rgba(200,164,90,.12); }
.mugm-usercp__icon--aether{ border-color: rgba(79,163,255,.22); background: rgba(79,163,255,.10); }
.mugm-usercp__icon--danger{ border-color: rgba(231,76,60,.25); background: rgba(231,76,60,.10); }

.mugm-usercp__text strong{
  display:block;
  font-weight: 900;
  line-height: 1.2;
}
.mugm-usercp__text small{
  display:block;
  margin-top: 3px;
  color: rgba(170,178,197,.92);
  font-size: 12px;
}

.mugm-usercp__chev{
  justify-self:end;
  opacity: .7;
}
.mugm-usercp__item:hover .mugm-usercp__chev{ opacity: 1; }

.mugm-usercp__item--danger:hover{
  border-color: rgba(231,76,60,.30);
}
/* =========================================================
   AAA Auth (login/register)
   ========================================================= */

.mugm-page-title{
  margin: 18px 0 10px;
  padding: 0;
  text-align:center;
}
.mugm-page-title span{
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: clamp(18px, 2.4vw, 26px);
  color: rgba(230,233,242,.98);
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.mugm-auth{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items: stretch;
  margin: 16px auto 28px;
}

.mugm-auth__panel{
  position:relative;
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 420px;
}

.mugm-auth__panelGlow{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 520px at 25% 10%, rgba(79,163,255,.18), transparent 60%),
    radial-gradient(900px 520px at 80% 0%, rgba(200,164,90,.16), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28));
  pointer-events:none;
}

.mugm-auth__panelContent{
  position:relative;
  padding: 18px;
}

.mugm-auth__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(230,233,242,.92);
  font-weight: 900;
  font-size: 12px;
}

.mugm-auth__headline{
  margin: 12px 0 10px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.08;
}
.mugm-auth__headline span{
  color: var(--gold);
  text-shadow: 0 18px 60px rgba(200,164,90,.22);
}

.mugm-auth__bullets{
  list-style:none;
  margin: 12px 0 0;
  padding: 0;
  display:grid;
  gap: 10px;
  color: rgba(230,233,242,.88);
}
.mugm-auth__bullets li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.mugm-auth__bullets i{
  margin-top: 2px;
  color: rgba(79,163,255,.95);
}

.mugm-auth__panelCta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

.mugm-auth__card{
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.mugm-auth__cardHead{
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.10);
}

.mugm-auth__cardTitle{
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .6px;
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 16px;
}

.mugm-auth__cardSub{
  margin-top: 4px;
  color: rgba(170,178,197,.92);
  font-size: 12px;
}

.mugm-form{
  padding: 14px;
  display:grid;
  gap: 12px;
}

.mugm-field{ display:grid; gap: 8px; }

.mugm-label{
  font-weight: 900;
  color: rgba(230,233,242,.92);
  font-size: 12px;
  letter-spacing: .2px;
}

.mugm-input{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.mugm-input i{
  color: rgba(170,178,197,.92);
  width: 18px;
  text-align:center;
}

.mugm-input input{
  width:100%;
  border:0;
  outline:none;
  background: transparent;
  color: rgba(230,233,242,.98);
  font-weight: 700;
}

.mugm-input input::placeholder{ color: rgba(170,178,197,.65); }

.mugm-help{
  display:flex;
  justify-content:flex-end;
}

.mugm-help__link{
  color: rgba(170,178,197,.92);
  text-decoration:none;
  font-weight: 800;
  font-size: 12px;
}
.mugm-help__link:hover{ color: rgba(230,233,242,.98); }

.mugm-hint{
  color: rgba(170,178,197,.92);
  font-size: 12px;
}

.mugm-legal{
  color: rgba(170,178,197,.92);
  font-size: 12px;
  line-height: 1.5;
}
.mugm-legal a{ color: rgba(79,163,255,.95); }

.mugm-auth__switch{
  text-align:center;
  color: rgba(170,178,197,.92);
  font-size: 12px;
}
.mugm-auth__switch a{
  color: rgba(79,163,255,.95);
  font-weight: 900;
  text-decoration:none;
}
.mugm-auth__switch a:hover{ color: rgba(230,233,242,.98); }

/* Alerts (AAA) */
.mugm-alert{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(230,233,242,.95);
  font-weight: 700;
}
.mugm-alert--error,
.mugm-alert--danger{
  border-color: rgba(231,76,60,.28);
  background: rgba(231,76,60,.10);
}
.mugm-alert--success{
  border-color: rgba(46,204,113,.26);
  background: rgba(46,204,113,.10);
}
.mugm-alert--warning{
  border-color: rgba(200,164,90,.26);
  background: rgba(200,164,90,.10);
}
.mugm-alert--info{
  border-color: rgba(79,163,255,.26);
  background: rgba(79,163,255,.10);
}

/* Responsive */
@media (max-width: 991px){
  .mugm-auth{ grid-template-columns: 1fr; }
  .mugm-auth__panel{ min-height: 320px; }
}
/* =========================================================
   AAA Downloads
   ========================================================= */

.mugm-dl-hero,
.mugm-don-hero{
  position:relative;
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  margin: 16px 0 18px;
}

.mugm-dl-hero__bg,
.mugm-don-hero__bg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 520px at 25% 10%, rgba(79,163,255,.16), transparent 60%),
    radial-gradient(900px 520px at 80% 0%, rgba(200,164,90,.14), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.26));
  pointer-events:none;
}

.mugm-dl-hero__inner,
.mugm-don-hero__inner{
  position:relative;
  padding: 16px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.mugm-dl-hero__badge,
.mugm-don-hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  font-weight: 900;
  font-size: 12px;
}

.mugm-dl-hero__title,
.mugm-don-hero__title{
  margin: 10px 0 6px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.1;
}

.mugm-dl-hero__sub,
.mugm-don-hero__sub{
  margin:0;
  color: rgba(170,178,197,.92);
  max-width: 70ch;
}

.mugm-dl-hero__trust,
.mugm-don-hero__trust{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.mugm-dl-trust{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  color: rgba(230,233,242,.92);
  font-weight: 800;
  font-size: 12px;
}

/* Tips */
.mugm-dl-tipgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mugm-dl-tip{
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  padding: 14px;
}

.mugm-dl-tip__title{
  font-weight: 900;
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom: 10px;
  font-size: 14px;
}
.mugm-dl-tip__title small{
  color: rgba(170,178,197,.92);
  font-weight: 800;
}

.mugm-dl-tip--gold{ border-color: rgba(200,164,90,.22); }
.mugm-dl-tip--aether{ border-color: rgba(79,163,255,.22); }

.mugm-dl-ul{ margin:0; padding-left: 18px; color: rgba(230,233,242,.88); }
.mugm-dl-ul li{ margin: 6px 0; }

/* Download list */
.mugm-dl-list{
  display:grid;
  gap: 10px;
}

.mugm-dl-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}

.mugm-dl-item__name{
  display:flex;
  align-items:center;
  gap:10px;
}
.mugm-dl-item__desc{
  margin-top: 4px;
  color: rgba(170,178,197,.92);
  font-size: 12px;
  max-width: 80ch;
}

.mugm-dl-item__meta{
  display:flex;
  align-items:center;
  gap: 10px;
}

.mugm-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(230,233,242,.92);
  font-weight: 900;
  font-size: 12px;
}

/* =========================================================
   AAA Donation
   ========================================================= */

.mugm-don-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mugm-don-card{
  text-decoration:none;
  color: rgba(230,233,242,.92);
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  padding: 14px;
  display:grid;
  gap: 10px;
}

.mugm-don-card:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
}

.mugm-don-card__logo{
  height: 44px;
  display:flex;
  align-items:center;
}
.mugm-don-card__logo img{
  max-height: 40px;
  width:auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.35));
}

.mugm-don-card__name{
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .4px;
  font-size: 16px;
}

.mugm-don-card__meta{
  color: rgba(170,178,197,.92);
  font-size: 12px;
}

.mugm-don-card__cta{ margin-top: 4px; }

.mugm-don-pricebox{
  display:grid;
  gap: 10px;
}

.mugm-don-price{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.mugm-don-price span{ color: rgba(170,178,197,.92); font-weight: 800; }
.mugm-don-price strong{
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 900;
  color: rgba(230,233,242,.98);
}

.mugm-don-vipcta{
  margin-top: 12px;
  display:flex;
  justify-content:center;
}

/* Responsive */
@media (max-width: 991px){
  .mugm-dl-tipgrid{ grid-template-columns: 1fr; }
  .mugm-don-grid{ grid-template-columns: 1fr; }
  .mugm-dl-item__meta{ width:100%; justify-content:space-between; }
}
/* =========================================================
   AAA Payments (MercadoPago / PayPal)
   ========================================================= */

.mugm-pay-hero{
  position:relative;
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  margin: 16px 0 18px;
}
.mugm-pay-hero__bg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 520px at 25% 10%, rgba(79,163,255,.16), transparent 60%),
    radial-gradient(900px 520px at 80% 0%, rgba(200,164,90,.14), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.26));
  pointer-events:none;
}
.mugm-pay-hero__inner{
  position:relative;
  padding: 16px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.mugm-pay-hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  font-weight: 900;
  font-size: 12px;
}
.mugm-pay-hero__title{
  margin: 10px 0 6px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.1;
}
.mugm-pay-hero__sub{ margin:0; color: rgba(170,178,197,.92); max-width: 70ch; }
.mugm-pay-hero__trust{ display:flex; gap:10px; flex-wrap:wrap; }

.mugm-pay-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mugm-pay-card{
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  padding: 14px;
  display:grid;
  gap: 12px;
  position:relative;
  overflow:hidden;
}
.mugm-pay-card.is-featured{
  border-color: rgba(200,164,90,.28);
  background: rgba(200,164,90,.06);
}
.mugm-pay-card.is-featured::before{
  content:"Recomendado";
  position:absolute;
  top: 12px; right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(200,164,90,.14);
  border: 1px solid rgba(200,164,90,.22);
  color: rgba(230,233,242,.98);
  font-weight: 900;
  font-size: 11px;
}

.mugm-pay-card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  flex-wrap:wrap;
}
.mugm-pay-card__title{
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 18px;
}
.mugm-pay-card__title span{
  color: rgba(170,178,197,.92);
  font-weight: 900;
  font-size: 12px;
  margin-left: 6px;
}
.mugm-pay-card__price{
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 900;
  font-size: 18px;
}
.mugm-pay-card__price small{
  font-family: Inter, sans-serif;
  font-weight: 800;
  color: rgba(170,178,197,.92);
  font-size: 12px;
  margin-left: 6px;
}

.mugm-pay-card__meta{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

@media (max-width: 991px){
  .mugm-pay-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   AAA Events Page
   ========================================================= */

.mugm-events-head{
  margin: 12px 0 14px;
  display:grid;
  gap: 10px;
}
.mugm-events-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.mugm-events-tab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(230,233,242,.92);
  font-weight: 900;
  letter-spacing:.2px;
}
.mugm-events-tab.is-blue{ border-color: rgba(79,163,255,.22); background: rgba(79,163,255,.10); }
.mugm-events-tab.is-gold{ border-color: rgba(200,164,90,.22); background: rgba(200,164,90,.10); }
.mugm-events-tab.is-red { border-color: rgba(231,76,60,.22); background: rgba(231,76,60,.10); }

.mugm-events-sub{
  color: rgba(170,178,197,.92);
  display:flex;
  gap:10px;
  align-items:center;
}

.mugm-events-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mugm-evcard{
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  overflow:hidden;
  box-shadow: var(--shadow);
  display:grid;
}
.mugm-evcard.is-blue{ border-color: rgba(79,163,255,.18); }
.mugm-evcard.is-gold{ border-color: rgba(200,164,90,.20); }
.mugm-evcard.is-red { border-color: rgba(231,76,60,.22); }

.mugm-evcard__media{
  position:relative;
  height: 140px;
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.mugm-evcard__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
  opacity:.92;
}
.mugm-evcard__media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
}

.mugm-evcard__body{
  padding: 12px 12px 14px;
  display:grid;
  gap: 10px;
}
.mugm-evcard__title{
  margin:0;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing:.5px;
  font-size: 16px;
  min-height: 22px;
}
.mugm-evcard__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mugm-evcard__label{
  color: rgba(170,178,197,.92);
  font-weight: 800;
  font-size: 12px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.mugm-evcard__time{
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(230,233,242,.98);
}

/* responsive */
@media (max-width: 991px){
  .mugm-events-cards{ grid-template-columns: 1fr; }
  .mugm-evcard__media{ height: 170px; }
}
/* =========================================================
   AAA INFO (Wiki) — Sidebar + Content + Tables
   ========================================================= */

.mugm-page-title{
  margin: 18px 0 10px;
}
.mugm-page-title > span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing:.6px;
  color: var(--text);
  font-size: 20px;
}

/* wrapper */
.mugm-info{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items:start;
}

/* sidebar */
.mugm-info-sidebar{
  position: sticky;
  top: 132px; /* topbar + header */
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.mugm-info-sidebar__head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.mugm-info-sidebar__title{
  margin:0 0 10px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing:.6px;
  font-size: 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.mugm-info-search{
  position:relative;
}
.mugm-info-search input{
  width:100%;
  padding: 10px 12px 10px 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;
}
.mugm-info-search i{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(170,178,197,.9);
}

/* nav list */
.mugm-info-nav{
  list-style:none;
  margin:0;
  padding: 10px 10px 14px;
  display:grid;
  gap: 6px;
}
.mugm-info-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(230,233,242,.86);
  border: 1px solid transparent;
  background: transparent;
  font-weight: 800;
}
.mugm-info-link:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.mugm-info-link.is-active{
  border-color: rgba(79,163,255,.28);
  background: rgba(79,163,255,.10);
  color: #EAF3FF;
}
.mugm-info-link i{
  width: 18px;
  text-align:center;
  color: rgba(200,164,90,.9);
}

/* groups (accordion) */
.mugm-info-group{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 10px;
}
.mugm-info-group__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
}
.mugm-info-group__toggle:hover{ background: rgba(255,255,255,.06); }
.mugm-info-group__toggle .left{
  display:inline-flex; align-items:center; gap:10px;
}
.mugm-info-group__toggle .chev{
  color: rgba(170,178,197,.9);
  transition: transform .18s ease;
}
.mugm-info-group.is-open .mugm-info-group__toggle .chev{
  transform: rotate(180deg);
}
.mugm-info-sub{
  list-style:none;
  margin: 8px 0 2px;
  padding: 0;
  display:none;
  gap:6px;
}
.mugm-info-group.is-open .mugm-info-sub{ display:grid; }
.mugm-info-sub a{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 9px 10px;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(230,233,242,.84);
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.06);
  font-weight: 800;
}
.mugm-info-sub a:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.mugm-info-sub a.is-active{
  border-color: rgba(200,164,90,.28);
  background: rgba(200,164,90,.10);
}

/* content card */
.mugm-info-content{
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 16px 16px 18px;
}

/* typography inside content */
.mugm-info-content h2{
  margin: 4px 0 10px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing:.6px;
  font-size: 26px;
}
.mugm-info-content h3{
  margin: 18px 0 10px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing:.5px;
  font-size: 18px;
  color: rgba(230,233,242,.96);
}
.mugm-info-content p{
  color: rgba(170,178,197,.95);
  line-height: 1.6;
}
.mugm-info-content ul{
  margin: 8px 0 0;
  padding-left: 18px;
  color: rgba(230,233,242,.86);
}
.mugm-info-content li{ margin: 6px 0; }

/* highlight (tu clase existente) */
.mugm-info-content .highlight{
  margin: 14px 0;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(200,164,90,.22);
  background: rgba(200,164,90,.10);
  color: rgba(234,243,255,.95);
  font-weight: 800;
}

/* general-table-ui (estilo AAA) */
.general-table-ui{
  width:100%;
  margin: 10px 0 6px;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}
.general-table-ui thead th{
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(230,233,242,.95);
  font-weight: 900;
  padding: 10px 10px;
}
.general-table-ui td{
  padding: 10px 10px;
  color: rgba(230,233,242,.86);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.general-table-ui tr:last-child td{ border-bottom: 0; }
.general-table-ui tr:hover td{
  background: rgba(255,255,255,.04);
}

/* responsive */
@media (max-width: 991px){
  .mugm-info{ grid-template-columns: 1fr; }
  .mugm-info-sidebar{ position: relative; top:auto; }
}
/* =========================================================
   AAA EVENTS — grid + cards
   ========================================================= */

.mugm-events-head{
  margin: 10px 0 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.mugm-events-tabs{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}
.mugm-events-tab{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(230,233,242,.92);
  font-weight: 900;
}
.mugm-events-tab.is-blue{
  border-color: rgba(79,163,255,.28);
  background: rgba(79,163,255,.10);
}
.mugm-events-tab.is-gold{
  border-color: rgba(200,164,90,.28);
  background: rgba(200,164,90,.10);
}
.mugm-events-tab.is-red{
  border-color: rgba(231,76,60,.28);
  background: rgba(231,76,60,.10);
}

.mugm-events-sub{
  color: rgba(170,178,197,.95);
  font-weight: 700;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}

.mugm-events-grid{ padding: 14px; }

.mugm-events-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.mugm-evcard{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: var(--shadow);
}

.mugm-evcard.is-blue{ border-color: rgba(79,163,255,.18); }
.mugm-evcard.is-gold{ border-color: rgba(200,164,90,.18); }
.mugm-evcard.is-red{  border-color: rgba(231,76,60,.18); }

.mugm-evcard__media{
  position:relative;
  background:
    radial-gradient(180px 120px at 30% 20%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.05));
  border-right: 1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.mugm-evcard__media img{
  width: 92%;
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.6));
  opacity:.98;
}

.mugm-evcard__body{
  padding: 12px 12px 12px 0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 110px;
}

.mugm-evcard__title{
  margin: 0;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing:.4px;
  font-size: 16px;
  color: rgba(230,233,242,.96);
}

/* los IDs name los llena el timer; asegurar consistencia */
.eventstimer{
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing:.4px;
  color: rgba(230,233,242,.96);
}

/* footer */
.mugm-evcard__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mugm-evcard__label{
  color: rgba(170,178,197,.95);
  font-weight: 800;
  font-size: 12px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.mugm-evcard__time{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(234,243,255,.95);
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.2px;
  min-width: 120px;
}

/* responsive */
@media (max-width: 991px){
  .mugm-events-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mugm-evcard{ grid-template-columns: 110px 1fr; }
}
@media (max-width: 640px){
  .mugm-events-cards{ grid-template-columns: 1fr; }
  .mugm-evcard__body{ padding-right: 12px; }
}
/* =========================================================
   AAA NEWS — cards + grid + pagination
   ========================================================= */

.news-section{
  margin-top: 14px;
}

.news-section .section-title{
  margin: 0 0 12px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .5px;
  color: rgba(230,233,242,.96);
  display:flex;
  align-items:center;
  gap:10px;
}

/* grid */
.news-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

/* card */
.news-card{
  border-radius: var(--r20);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}

/* image */
.news-card > img{
  width:100%;
  height: 170px;
  object-fit: cover;
  display:block;
  filter: contrast(1.02) saturate(1.02);
}

/* body */
.news-card .card-body{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.news-card small.text-muted{
  color: rgba(170,178,197,.92) !important;
  font-weight: 700;
  display:block;
}

.news-card .card-title{
  margin: 0;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .4px;
  font-size: 16px;
  line-height: 1.2;
  color: rgba(230,233,242,.96);
}

.news-card .card-text{
  margin: 0;
  color: rgba(170,178,197,.95);
  line-height: 1.55;
  font-size: 13px;
}

/* CTA */
.news-card .read-more-btn{
  margin-top: auto;
  padding: 0;
  text-align:left;
  color: rgba(79,163,255,.95);
  font-weight: 900;
  text-decoration:none;
  border: 0;
}
.news-card .read-more-btn:hover{
  color: rgba(0,242,255,.95);
  text-decoration:none;
}

/* pagination */
.pagination-wrapper{
  margin-top: 14px;
  display:flex;
  justify-content:center;
}

.pagination{
  margin: 0;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.pagination>li>a,
.pagination>li>span{
  background: transparent !important;
  border: 0 !important;
  color: rgba(230,233,242,.88) !important;
  font-weight: 900;
  padding: 10px 14px;
}
.pagination>li>a:hover{
  background: rgba(255,255,255,.06) !important;
  color: rgba(230,233,242,.96) !important;
}
.pagination>li.active>a{
  background: rgba(200,164,90,.14) !important;
  color: rgba(255,255,255,.95) !important;
}

/* responsive */
@media (max-width: 991px){
  .news-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .news-card > img{ height: 160px; }
}
@media (max-width: 640px){
  .news-row{ grid-template-columns: 1fr; }
  .news-card > img{ height: 180px; }
}
/* =========================
   Rankings (AAA)
   ========================= */

.mugm-page-title{
  margin: 22px auto 14px;
  width: min(1180px, calc(100% - 32px));
}
.mugm-page-title > span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: Cinzel, serif;
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 20px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}

/* wrapper ranking */
.mugm-rankings{
  padding: 16px;
}

/* Menu de rankings (lo imprime el CMS; lo hacemos robusto) */
.mugm-rankings .rankings-menu,
.mugm-rankings .rankings-menu ul{
  list-style:none;
  margin: 0 0 12px;
  padding: 0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.mugm-rankings .rankings-menu li{ margin:0; padding:0; }
.mugm-rankings .rankings-menu a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.mugm-rankings .rankings-menu a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
}
.mugm-rankings .rankings-menu .active a,
.mugm-rankings .rankings-menu a.active{
  color:#120E06;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  border-color: rgba(200,164,90,.35);
}

/* tablas */
.mugm-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.mugm-table thead th{
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color: rgba(230,233,242,.85);
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 12px;
  white-space: nowrap;
}
.mugm-table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
  color: rgba(230,233,242,.92);
}
.mugm-table tbody tr:hover td{
  background: rgba(255,255,255,.03);
}
.mugm-table tbody tr:last-child td{ border-bottom:0; }

.mugm-td-center{ text-align:center; }
.mugm-td-right{ text-align:right; }

/* flags + avatar */
.img-flag{ height:15px; width:auto; border-radius:3px; opacity:.9; }
.rankings-class-image{ height:22px; width:auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }

/* badges online/offline */
.badge-online, .badge-offline{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
}
.badge-online{
  background: rgba(46,204,113,.12);
  border-color: rgba(46,204,113,.22);
  color: #BFF4D4;
}
.badge-offline{
  background: rgba(231,76,60,.10);
  border-color: rgba(231,76,60,.22);
  color: #FFC9C4;
}

/* medallas */
.medal-gold{ color: #f5d76e; }
.medal-silver{ color: #cfd8dc; }
.medal-bronze{ color: #d39b6a; }

/* responsive */
@media (max-width: 991px){
  .mugm-table thead{ display:none; }
  .mugm-table, .mugm-table tbody, .mugm-table tr, .mugm-table td{ display:block; width:100%; }
  .mugm-table tr{ border-bottom: 1px solid rgba(255,255,255,.08); }
  .mugm-table td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .mugm-table td::before{
    content: attr(data-label);
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 11px;
  }
}
/* USERCP – AAA UI */

.mugm-usercp-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.mugm-usercp-grid .full{
  grid-column:1 / -1;
}

.mugm-card{
  background:#0d1118;
  border:1px solid #1f2633;
  border-radius:14px;
  padding:16px;
}

.mugm-card h3{
  margin-bottom:12px;
  font-size:15px;
  color:#f5c77a;
  display:flex;
  align-items:center;
  gap:8px;
}

.mugm-user-list{
  list-style:none;
  padding:0;
  margin:0;
}
.mugm-user-list li{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.mugm-user-list span{
  color:#9ca3af;
}
.link{
  margin-left:8px;
  font-size:12px;
  color:#f5c77a;
}

.mugm-form label{
  display:block;
  margin-top:10px;
  color:#9ca3af;
}
.mugm-form select,
.mugm-form input{
  width:100%;
  padding:8px 10px;
  margin-top:4px;
  background:#05070c;
  border:1px solid #252d3c;
  border-radius:8px;
  color:#fff;
}

.mugm-btn-gold{
  width:100%;
  margin-top:14px;
  padding:10px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg,#f5c77a,#caa34d);
  color:#000;
  font-weight:700;
}

.mugm-alert{
  margin:10px 0;
  padding:10px 14px;
  border-radius:10px;
}
.mugm-alert.success{background:#12381f;color:#6aff9d}
.mugm-alert.error{background:#3a1414;color:#ff8a8a}

@media(max-width:900px){
  .mugm-usercp-grid{
    grid-template-columns:1fr;
  }
}
/* ===== News (pro grid) ===== */
.news-section{ margin-top: 18px; }

.news-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* responsive */
@media (max-width: 1100px){
  .news-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .news-row{ grid-template-columns: 1fr; }
}

.news-card{
  background: rgba(10,14,26,.75);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.news-card > img{
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

.news-card .card-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.news-card .card-title{
  margin: 0;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .2px;

  /* clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card .card-text{
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.45;

  /* clamp */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card .read-more-btn{
  margin-top: auto;                 /* pega el botón abajo */
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  background: rgba(0,200,255,.12);
  border: 1px solid rgba(0,200,255,.18);
  color: #b9f0ff;
  font-weight: 700;
  text-decoration: none;
}
.news-card .read-more-btn:hover{
  background: rgba(0,200,255,.18);
}
/* ================================
   Mobile Nav – Drawer seguro
================================ */

/* Desktop nav visible por defecto */
.mugm-nav--desktop { display: block; }
.mugm-hamburger { display: none; }

/* Mobile nav oculto por defecto */
.mugm-nav--mobile { display: none; }

/* Breakpoint: mobile/tablet */
@media (max-width: 992px){
  /* ocultar el menú desktop */
  .mugm-nav--desktop { display: none !important; }
      .mugm-nav--mobile .mugm-shell{
  display: flex !important;
  flex-direction: column !important;
}

.mugm-nav--mobile .mugm-nav__list{
  grid-template-columns: 1fr !important;
}

.mugm-nav--mobile ul,
.mugm-nav--mobile ul > li{
  float: none !important;
  display: block !important;
  width: 100% !important;
}

  

  /* mostrar hamburguesa */
  .mugm-hamburger { 
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10,14,26,.55);
    color: #fff;
  }

  /* drawer container */
  .mugm-nav--mobile{
    display: block !important;
    position: fixed;
    left: 0; right: 0;
    top: 72px;                 /* ajustá si tu header mide distinto */
    height: calc(100vh - 72px);
    background: rgba(6,9,18,.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.10);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 9999;
  }

  /* estado abierto */
  .mugm-nav--mobile.show{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* lista */
  .mugm-nav--mobile .mugm-nav__list{
    list-style: none;
    margin: 0;
    padding: 16px;
    display: grid;
    gap: 10px;
  }

  .mugm-nav--mobile .mugm-nav__list > li{
    margin: 0;
  }

  .mugm-nav--mobile .mugm-nav__list a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
  }

  .mugm-nav--mobile .mugm-nav__list a:hover{
    background: rgba(255,255,255,.06);
  }

  /* CTA sección inferior */
  .mugm-mobile-cta{
    padding: 0 16px 16px;
    display: grid;
    gap: 10px;
  }
}

/* Evitar scroll del body cuando el menú está abierto */
body.mugm-nav-open{ overflow: hidden; }

/* sticky premium: al scrollear, más sólido */
.mugm-header.is-scrolled{
  backdrop-filter: blur(10px);
  background: rgba(6,9,18,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* =========================================
   HOME GRID (2 columnas premium)
   ========================================= */

.mugm-home-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Desktop: 2 columnas */
@media (min-width: 992px){
  .mugm-home-grid{
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
    gap: 22px;
    align-items: start;
  }
}

/* Columna derecha sticky (solo desktop) */
@media (min-width: 992px){
  .mugm-home-sidebar{
    position: sticky;
    top: 96px; /* ajusta si tu header/topbar tiene otra altura */
  }
}

/* “Cards” dentro del grid, para que se sienta premium */
.mugm-home-block{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
  overflow: hidden;
}

@media (min-width: 992px){
  .mugm-home-block{ padding: 16px; }
}

/* Títulos de secciones dentro del home */
.mugm-home-block .mugm-section__head{
  margin-bottom: 12px;
}

/* Si algún módulo trae tablas anchas: que no rompan el layout */
.mugm-home-block .table-responsive,
.mugm-home-block table{
  width: 100%;
}

/* Compactar un poco el slider en home para que se vea más “pro” */
.mugm-home-hero-stack{
  display: grid;
  gap: 18px;
}

/* Sticky premium del header (si ya lo tenías, dejalo; esto lo refuerza) */
.mugm-header.is-scrolled{
  backdrop-filter: blur(10px);
  background: rgba(6,9,18,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Ajuste: el icono solo de imágenes (sin texto) no quede “perdido” */
.mugm-section__title.mugm-title--icononly{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mugm-section__title.mugm-title--icononly:after{
  content: "Imágenes del servidor";
  font-weight: 700;
  letter-spacing: .2px;
  opacity: .92;
}
/* =========================================================
   HOME GRID – Fixes PRO (carousel/ranking/stretch + balance)
   Pegá esto al final de aaa.css
   ========================================================= */

/* Asegura que las columnas no se rompan por contenido ancho */
.mugm-home-grid,
.mugm-home-main,
.mugm-home-sidebar{
  min-width: 0;
}

/* Sidebar como stack prolijo */
.mugm-home-sidebar{
  display: grid;
  gap: 18px;
}

/* Cards más “premium” y sin recortes raros */
.mugm-home-block{
  border-radius: 18px;
  overflow: hidden; /* ok para estética */
}

/* Si algún módulo mete cosas absolutas o sombras, que no corte feo */
.mugm-home-block .mugm-section__head{
  padding: 2px 2px 10px;
}

/* --- Carousel: evita estirado / fuerza ratio prolijo --- */
.mugm-home-block--carousel .swiper,
.mugm-home-block--carousel .swiper-wrapper{
  width: 100%;
}

.mugm-home-block--carousel .swiper{
  /* contenedor con ratio para que no se “aplane” */
  aspect-ratio: 16 / 10;
  height: auto !important;
  max-height: 420px;
  border-radius: 16px;
  overflow: hidden;
}

/* Slides ocupan el alto del contenedor */
.mugm-home-block--carousel .swiper-slide{
  height: 100% !important;
}

/* Imágenes: nunca deformar */
.mugm-home-block--carousel img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* --- Ranking: que NO estire toda la página --- */
/* Convertimos el ranking en “panel” con scroll interno */
@media (min-width: 992px){
  .mugm-home-block--ranking{
    /* Ajustá si querés más/menos alto */
    max-height: calc(100vh - 220px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* scrollbar más discreto */
  .mugm-home-block--ranking::-webkit-scrollbar{
    width: 10px;
  }
  .mugm-home-block--ranking::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.12);
    border-radius: 12px;
  }
}

/* Tablas dentro del ranking: que no rompan el ancho */
.mugm-home-block--ranking table{
  width: 100%;
}
.mugm-home-block--ranking .table-responsive{
  border: 0;
  margin: 0;
}

/* Micro-ajuste: si el ranking usa cards/listados, que respiren */
.mugm-home-block--ranking .mugm-rank,
.mugm-home-block--ranking .rank,
.mugm-home-block--ranking .ranking,
.mugm-home-block--ranking .top10{
  min-width: 0;
}

/* --- Sticky sidebar: que se vea pro (pero sin exagerar) --- */
@media (min-width: 992px){
  .mugm-home-sidebar{
    position: sticky;
    top: 96px; /* ajustá si tu header/topbar cambia */
    align-content: start;
  }
}
/* =========================================================
   HOME AAA — FIX DISTRIBUCIÓN / SIDEBAR / RANKINGS / CAROUSEL
   Pegarlo al FINAL de aaa.css
========================================================= */

/* Contenedor general del home */
.mugm-home .mugm-home-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Desktop: sidebar más ancha para que el ranking respire */
@media (min-width: 992px){
  .mugm-home .mugm-home-grid{
    grid-template-columns: minmax(0, 1.40fr) minmax(420px, 0.95fr);
    gap: 24px;
    align-items: start;
  }
}

/* Sidebar: que no “se estire” y que tenga buen ritmo vertical */
.mugm-home .mugm-home-sidebar{
  display: grid;
  gap: 18px;
  align-content: start;
}

/* Sticky solo desktop */
@media (min-width: 992px){
  .mugm-home .mugm-home-sidebar{
    position: sticky;
    top: 104px; /* ajustá si tu header/topbar cambia */
  }
}

/* Cards de sidebar: look premium + padding consistente */
.mugm-home .mugm-home-block{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px;
  overflow: hidden; /* evita “bordes” raros de hijos */
}

/* Títulos en sidebar */
.mugm-home .mugm-home-block .mugm-section__head{
  margin-bottom: 12px;
}

/* ---------- CAROUSEL (Galería) ---------- */
/* Evita “estirado”: definimos tamaño de cards + aspect ratio */
.mugm-home .mugm-home-block--carousel .mugm-gallery__viewport{
  overflow: hidden;
}

.mugm-home .mugm-home-block--carousel .mugm-gallery__track{
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 6px;
}

.mugm-home .mugm-home-block--carousel .mugm-gallery__card{
  flex: 0 0 168px;            /* ancho fijo, se ve pro */
  aspect-ratio: 16 / 10;      /* evita deformación */
  border-radius: 14px;
  overflow: hidden;
}

@media (min-width: 1200px){
  .mugm-home .mugm-home-block--carousel .mugm-gallery__card{
    flex-basis: 182px;
  }
}

.mugm-home .mugm-home-block--carousel .mugm-gallery__img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* clave para no deformar */
  display: block;
}

/* ---------- RANKING ---------- */
/* En sidebar: FORZAR 1 columna (2 columnas queda feo en ancho chico) */
.mugm-home .mugm-home-block--ranking .mugm-leaderboards__grid{
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 14px;
}

/* Que el ranking NO meta scroll interno raro */
.mugm-home .mugm-home-block--ranking .mugm-leaderboard__list{
  max-height: none !important;
  overflow: visible !important;
}

/* Compactar entries para que “se vea premium”, más aire y menos ladrillo */
.mugm-home .mugm-home-block--ranking .mugm-entry{
  padding: 10px 10px;
  border-radius: 14px;
}

.mugm-home .mugm-home-block--ranking .mugm-entry__statlabel{
  display: none; /* más limpio */
}

.mugm-home .mugm-home-block--ranking .mugm-entry__statvalue{
  font-weight: 800;
  letter-spacing: .2px;
}

/* Si algún módulo mete width/float legacy, lo neutralizamos dentro del home */
.mugm-home .mugm-home-grid *{
  max-width: 100%;
}

/* Ajuste fino: el slider dentro del grid que no “empuje” con márgenes raros */
.mugm-home .mugm-home-hero-stack{
  display: grid;
  gap: 18px;
}

/* =========================================
   HOME — Alineación premium (slider vs sidebar)
   ========================================= */

/* Alto objetivo del bloque superior (slider + carousel) */
:root{
  --mugm-home-top-h: clamp(320px, 34vw, 420px);
}

/* 1) Slider: que tenga un alto consistente */
.mugm-hslider__frame{
  min-height: var(--mugm-home-top-h);
}

/* 2) Carousel block: que calce con el slider */
.mugm-home-block--carousel{
  min-height: var(--mugm-home-top-h);
  display: flex;
  flex-direction: column;
}

/* El contenido del carousel que se estire sin deformarse */
.mugm-home-block--carousel .mugm-gallery{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mugm-home-block--carousel .mugm-gallery__viewport{
  flex: 1;
  min-height: 0; /* important para que no “empuje” */
}

/* Asegura que las cards no parezcan “estiradas” */
.mugm-gallery__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* =========================================
   Ranking en sidebar — stack + compacto
   ========================================= */

/* En sidebar, el grid de leaderboards va apilado */
.mugm-home-block--ranking .mugm-leaderboards__grid{
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 14px;
}

/* Compactar filas para que entren ambos rankings */
.mugm-home-block--ranking .mugm-entry{
  padding: 10px 12px;
}

/* Reducir levemente avatar/logo/pos */
.mugm-home-block--ranking .mugm-entry__avatar img,
.mugm-home-block--ranking .mugm-entry__guildlogo img{
  width: 30px !important;
  height: 30px !important;
}

.mugm-home-block--ranking .mugm-entry__pos{
  transform: scale(.95);
}

/* Que la lista no se vaya de largo; que se vea “card” pro */
.mugm-home-block--ranking .mugm-leaderboard__list{
  max-height: 420px;          /* ajustable */
  overflow: auto;
  padding-right: 4px;
}

/* Scrollbar sutil (opcional, queda premium) */
.mugm-home-block--ranking .mugm-leaderboard__list::-webkit-scrollbar{ width: 8px; }
.mugm-home-block--ranking .mugm-leaderboard__list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 20px;
}
/* =========================================
   NEWS GRID — 6 por página (2 filas de 3)
   ========================================= */

.news-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px){
  .news-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px){
  .news-row{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Para que todas las cards se vean parejas */
.news-card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.news-card img{
  width: 100%;
  height: 180px;      /* ajustá si querés más alto */
  object-fit: cover;
  border-radius: 14px;
}

.news-card .card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card .card-text{
  flex: 1;
}
/* =========================================
   HOME SIDEBAR — Ranking compacto + apilado
   ========================================= */

.mugm-home-block--ranking .mugm-leaderboards__grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* achicar encabezados */
.mugm-home-block--ranking .mugm-leaderboard__head{
  padding: 10px 10px 8px;
}

.mugm-home-block--ranking .mugm-leaderboard__title{
  font-size: 13px;
  opacity: .95;
}

.mugm-home-block--ranking .mugm-leaderboard__link{
  font-size: 12px;
  opacity: .85;
}

/* lista más compacta */
.mugm-home-block--ranking .mugm-entry{
  padding: 9px 10px !important;
  gap: 10px;
}

/* achicar imágenes */
.mugm-home-block--ranking .mugm-classimg,
.mugm-home-block--ranking .mugm-glogo{
  width: 28px !important;
  height: 28px !important;
}

/* Para que entren los dos rankings sin “estirar” */
.mugm-home-block--ranking .mugm-leaderboard__list{
  max-height: 280px;  /* cada bloque */
  overflow: auto;
}
/* ===== HOME FINAL FIX (NO sticky, NO scroll interno) ===== */
@media (min-width: 992px){
  .mugm-home-sidebar{
    position: static !important;  /* <- clave: deja de “perseguir” */
    top: auto !important;
  }

  .mugm-home-block--ranking{
    max-height: none !important;  /* <- no recorta */
    overflow: visible !important;
  }
}

/* Ranking en sidebar apilado SIEMPRE (resets arriba, guilds abajo) */
.mugm-home-block--ranking .mugm-leaderboards__grid{
  grid-template-columns: 1fr !important;
}

/* Compacto real */
.mugm-home-block--ranking .mugm-entry{
  grid-template-columns: 36px 42px 1fr 90px;
  padding: 8px 10px;
  border-radius: 14px;
}
.mugm-home-block--ranking .mugm-entry__statvalue{
  font-size: 14px;
}
.mugm-home-block--ranking .mugm-entry__avatar,
.mugm-home-block--ranking .mugm-entry__guildlogo{
  width: 42px;
  height: 42px;
}
.mugm-home-block--ranking .mugm-classimg{
  width: 30px !important;
  height: 30px !important;
}
.mugm-home-block--ranking .mugm-glogo{
  width: 28px;
  height: 28px;
}
/* =========================================================
   SIDEBAR Carousel — Coverflow PRO (sin estirar, sin achicar)
   Pegar al FINAL de aaa.css
   ========================================================= */

/* Asegura altura pareja con el slider (respeta tu “línea”) */
:root{
  --mugm-home-top-h: clamp(320px, 34vw, 420px);
}

/* Slider: altura consistente */
.mugm-hslider__frame{
  min-height: var(--mugm-home-top-h) !important;
}

/* Sidebar carousel block: calza con slider */
.mugm-home .mugm-home-block--carousel{
  min-height: var(--mugm-home-top-h) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* viewport ocupa el “resto” */
.mugm-home .mugm-home-block--carousel .mugm-gallery{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.mugm-home .mugm-home-block--carousel .mugm-gallery__viewport{
  flex: 1 !important;
  min-height: 0 !important;
}

/* --------- COVERFLOW --------- */
.mugm-gallery--coverflow .mugm-gallery__viewport{
  overflow: hidden !important;         /* clave: no se ve el “scroll” feo */
  padding: 6px 0 2px !important;
  border-radius: 16px !important;
}

/* track en fila */
.mugm-gallery--coverflow .mugm-gallery__track{
  display: flex !important;
  gap: 14px !important;
  padding: 14px !important;
  align-items: center !important;
  will-change: transform;
}

/* cards con ratio fijo: nunca se deforman */
.mugm-gallery--coverflow .mugm-gallery__card{
  flex: 0 0 190px !important;          /* base */
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transform-origin: center center !important;

  /* animación coverflow (desde JS con variables) */
  transform:
    perspective(900px)
    rotateY(calc(var(--cf-rot, 0) * 1deg))
    scale(var(--cf-scale, .88)) !important;

  opacity: var(--cf-alpha, .72) !important;
  filter: blur(calc(var(--cf-blur, 2) * 1px)) saturate(1.05) contrast(1.03) !important;
  transition: transform .22s ease, filter .22s ease, opacity .22s ease, box-shadow .22s ease !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.45) !important;
}

/* Centro más “hero” */
.mugm-gallery--coverflow .mugm-gallery__card.is-center{
  flex-basis: 280px !important;        /* centro más grande */
  transform:
    perspective(900px)
    rotateY(0deg)
    scale(1) !important;
  opacity: 1 !important;
  filter: blur(0px) saturate(1.12) contrast(1.06) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.60) !important;
  border-color: rgba(200,164,90,.22) !important;
}

/* imagen siempre cover */
.mugm-gallery--coverflow .mugm-gallery__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* en mobile: cards grandes, sin rotación fuerte */
@media (max-width: 991px){
  .mugm-gallery--coverflow .mugm-gallery__card{
    flex-basis: 74% !important;
    transform: scale(var(--cf-scale, .96)) !important;
    filter: blur(calc(var(--cf-blur, 1.5) * 1px)) !important;
  }
  .mugm-gallery--coverflow .mugm-gallery__card.is-center{
    flex-basis: 86% !important;
  }
}

/* =========================================================
   Slider — retoque visual pro (sin romper tu Swiper)
   ========================================================= */
.mugm-hslide__overlay{
  background:
    radial-gradient(900px 380px at 18% 50%, rgba(11,14,19,.12), rgba(11,14,19,.72) 55%, rgba(11,14,19,.92)),
    linear-gradient(90deg, rgba(11,14,19,.88), rgba(11,14,19,.28) 55%, rgba(11,14,19,.85)) !important;
}

.mugm-hslide__title{
  font-size: 30px !important;
}

.mugm-hslider__figure{
  opacity: .95 !important;
  right: -24px !important;
  bottom: -28px !important;
}
/* ===== Fix: slider ocupa el alto completo del frame ===== */
.mugm-hslider__frame{
  min-height: var(--mugm-home-top-h) !important;
  height: var(--mugm-home-top-h) !important;
  overflow: hidden !important;
}

/* el Swiper y wrapper deben medir 100% */
.mugm-hslider__swiper,
.mugm-hslider__swiper .swiper-wrapper,
.mugm-hslider__swiper .swiper-slide{
  height: 100% !important;
}

/* el slide con background debe cubrir todo */
.mugm-hslide{
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* ===== Coverflow: centrado real + sin cambiar ancho ===== */
.mugm-gallery--coverflow .mugm-gallery__viewport{
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
}

/* OJO: padding inline para poder centrar extremos */
.mugm-gallery--coverflow .mugm-gallery__track{
  gap: 14px !important;
  padding-block: 14px !important;
  padding-inline: clamp(16px, 3vw, 28px) !important;
}

/* cards: ancho fijo, snap al centro */
.mugm-gallery--coverflow .mugm-gallery__card{
  flex: 0 0 220px !important;              /* ancho estable */
  aspect-ratio: 16 / 10 !important;
  scroll-snap-align: center !important;

  transform:
    perspective(900px)
    rotateY(calc(var(--cf-rot, 0) * 1deg))
    scale(var(--cf-scale, .90)) !important;

  opacity: var(--cf-alpha, .78) !important;
  filter: blur(calc(var(--cf-blur, 1.6) * 1px)) saturate(1.05) contrast(1.03) !important;
}

/* centro: SOLO scale + quitar blur (no tocar width) */
.mugm-gallery--coverflow .mugm-gallery__card.is-center{
  transform: perspective(900px) rotateY(0deg) scale(1.12) !important;
  opacity: 1 !important;
  filter: blur(0px) saturate(1.12) contrast(1.06) !important;
}
/* =========================
   HERO ART — integración sin “cuadrado”
========================= */
.we-hero-art--blend { position: relative; }

.we-hero-art--blend .we-hero-art-frame{
  position: relative;
  width: 100%;
  max-width: 560px; /* ajustá según tu grid */
  margin-left: auto;
  margin-right: 0;
  pointer-events: none;
}

.we-hero-art--blend .we-hero-art-img{
  width: 100% !important;
  height: auto !important;
  display: block !important;

  /* “integración” */
  opacity: .92;
  filter: saturate(1.08) contrast(1.05);
  transform: translateZ(0);
}

/* difumina bordes para que no se note el rectángulo */
.we-hero-art--blend .we-hero-art-img{
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
}

/* viñeta suave (termina de “fundir” con el fondo) */
.we-hero-art--blend .we-hero-art-vignette{
  position:absolute; inset:-10%;
  background: radial-gradient(closest-side, rgba(0,0,0,0) 58%, rgba(0,0,0,.55) 100%);
  filter: blur(6px);
  opacity: .9;
  pointer-events:none;
}

/* glow azul + dorado MU */
.we-hero-art--blend .we-hero-art-glow{
  position:absolute; inset:-18%;
  background:
    radial-gradient(circle at 55% 45%, rgba(0,180,255,.28), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 60% 55%, rgba(255,200,90,.14), rgba(0,0,0,0) 60%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: .75;
  pointer-events:none;
}

/* “partículas” sutiles (sin JS) */
.we-hero-art--blend .we-hero-art-sparkles{
  position:absolute; inset:-8%;
  background-image:
    radial-gradient(2px 2px at 15% 30%, rgba(160,220,255,.40) 40%, transparent 60%),
    radial-gradient(1.6px 1.6px at 30% 55%, rgba(255,220,150,.30) 40%, transparent 60%),
    radial-gradient(1.8px 1.8px at 62% 28%, rgba(160,220,255,.35) 40%, transparent 60%),
    radial-gradient(1.4px 1.4px at 74% 60%, rgba(255,220,150,.26) 40%, transparent 60%),
    radial-gradient(1.2px 1.2px at 85% 38%, rgba(160,220,255,.28) 40%, transparent 60%);
  opacity: .55;
  filter: blur(.2px);
  animation: mugmSparkleFloat 7s ease-in-out infinite;
  pointer-events:none;
}

@keyframes mugmSparkleFloat{
  0%,100% { transform: translate3d(0,0,0); opacity:.45; }
  50%     { transform: translate3d(-6px,-10px,0); opacity:.65; }
}

/* si el grid te deja el arte “muy abajo”, subilo un toque */
.we-home-hero .we-hero-art--blend{
  align-self: center !important;
  transform: translateY(-6px);
}
/* =========================================================
   HERO ART — “mancha” integrada al costado derecho (FINAL)
   - Sin bordes / sin rectángulo
   - No tapa texto
   - Sin línea inferior
   ========================================================= */

/* stacking seguro */
.mugm-hero{ position:relative; overflow:hidden; }
.mugm-hero__bg{ position:absolute; inset:0; z-index:0; }
.mugm-hero__inner{ position:relative; z-index:2; }

/* capa contenedora del art */
.mugm-hero__art--bg{
  position:absolute;
  inset:0;
  z-index:1;              /* detrás del contenido */
  pointer-events:none;
}

/* MANCHA PRINCIPAL (más grande que la “caja”, así nunca corta abajo) */
.mugm-hero__art--bg::before{
  content:"";
  position:absolute;

  /* la empujamos a la derecha y le damos “aire” para que no se vea borde */
  right: -18%;
  top: 50%;

  /* IMPORTANTE: que sea grande (sin recorte visible) */
  width:  clamp(720px, 70vw, 1200px);
  height: clamp(520px, 78vh, 860px);
  transform: translateY(-52%);

  background-image: var(--hero-art);
  background-repeat: no-repeat;
  background-position: 62% 50%;
  background-size: contain;

  /* presencia sin “banner” */
  opacity: .62;
  filter:
    saturate(1.00)
    contrast(1.08)
    brightness(1.03)
    blur(0.55px)
    drop-shadow(0 32px 90px rgba(0,0,0,.55));

  /* máscara fuerte: centro definido + bordes que desaparecen ANTES de tocar el borde inferior */
  -webkit-mask-image: radial-gradient(closest-side at 58% 52%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,.78) 48%,
    rgba(0,0,0,.28) 62%,
    rgba(0,0,0,0) 74%);
  mask-image: radial-gradient(closest-side at 58% 52%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,.78) 48%,
    rgba(0,0,0,.28) 62%,
    rgba(0,0,0,0) 74%);

  /* menos “lavado” que screen */
  mix-blend-mode: lighten;
}

/* GLOW azul/dorado (solo aura, no genera cortes) */
.mugm-hero__art--bg::after{
  content:"";
  position:absolute;
  right: -22%;
  top: 50%;
  width:  clamp(820px, 82vw, 1400px);
  height: clamp(600px, 92vh, 980px);
  transform: translateY(-52%);

  background:
    radial-gradient(circle at 58% 48%, rgba(0,180,255,.22) 0%, rgba(0,180,255,0) 52%),
    radial-gradient(circle at 52% 60%, rgba(255,190,70,.14) 0%, rgba(255,190,70,0) 58%);
  filter: blur(12px);
  opacity: .92;
  mix-blend-mode: screen;

  /* también con máscara para que jamás se “corte” */
  -webkit-mask-image: radial-gradient(closest-side at 58% 52%,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(closest-side at 58% 52%,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,0) 78%);
}

/* “ANTI-LÍNEA” INFERIOR: mata cualquier corte residual del blend */
.mugm-hero__art--bg .mugm-hero__art-bottomfade{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 64px;
  pointer-events:none;
  z-index: 2; /* arriba del art (1), debajo del contenido (2/3 real) */
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.22) 55%,
    rgba(0,0,0,.45) 100%);
}

/* partículas MUY leves (sin JS) */
.mugm-hero__art--bg .mugm-hero__art-sparkles{
  position:absolute;
  inset:0;
  opacity:.16;
  mix-blend-mode: screen;
  pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 2px) 0 0/200px 200px,
    radial-gradient(circle, rgba(90,200,255,.14) 0 1px, transparent 2px) 60px 30px/260px 260px;
  animation: mugmSparkleFloat 10s ease-in-out infinite;
}

@keyframes mugmSparkleFloat{
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(-10px,-6px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* Garantía: el texto siempre encima */
.mugm-hero__copy{ position:relative; z-index:3; }
.mugm-hero__copy *{ position:relative; z-index:3; }

/* Mobile: baja intensidad y tamaño */
@media (max-width: 991px){
  .mugm-hero__art--bg::before{
    right:-30%;
    width: 900px;
    height: 620px;
    opacity: .28;
    filter: saturate(1.0) contrast(1.05) brightness(1.02) blur(0.9px);
  }
  .mugm-hero__art--bg::after{ opacity: .55; }
  .mugm-hero__art--bg .mugm-hero__art-sparkles{ opacity: .10; }
}
/* =========================================================
   MUGM — FINAL SITE THEME OVERRIDES (sin reescribir todo)
   Pegar al FINAL del CSS
   ========================================================= */

/* ---------- Palette / variables ---------- */
:root{
  --mugm-bg0: #050812;
  --mugm-bg1: #070b18;
  --mugm-bg2: #0a1222;

  --mugm-card: rgba(12,18,34,.58);
  --mugm-card2: rgba(10,14,26,.48);

  --mugm-line: rgba(255,255,255,.07);
  --mugm-line2: rgba(255,255,255,.10);

  --mugm-blue: #4fd0ff;
  --mugm-blue2:#0ea5e9;
  --mugm-gold: #d7b25d;
  --mugm-text: rgba(255,255,255,.88);
  --mugm-muted: rgba(255,255,255,.65);

  --mugm-shadow: 0 18px 55px rgba(0,0,0,.50);
  --mugm-shadow2: 0 10px 25px rgba(0,0,0,.40);
  --mugm-radius: 18px;
}

/* ---------- Fondo general: profundidad + “nebula” sutil ---------- */
html, body{
  background: radial-gradient(1200px 520px at 24% 8%,
              rgba(79,208,255,.10) 0%,
              rgba(79,208,255,0) 58%),
              radial-gradient(1000px 520px at 82% 18%,
              rgba(215,178,93,.10) 0%,
              rgba(215,178,93,0) 62%),
              radial-gradient(1200px 900px at 50% 55%,
              rgba(16,24,50,.55) 0%,
              rgba(5,8,18,1) 62%),
              linear-gradient(180deg, var(--mugm-bg2) 0%, var(--mugm-bg0) 70%) !important;
  color: var(--mugm-text) !important;
}

/* “grano” sutil (premium) */
body::before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.08;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.65) 0 1px, transparent 2px);
  background-size: 210px 210px;
  mix-blend-mode: overlay;
}
/* ---------- Topbar + Header (glass + bordes + mejor contraste) ---------- */
.mugm-topbar{
  background: linear-gradient(180deg,
    rgba(6,10,18,.78) 0%,
    rgba(6,10,18,.55) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--mugm-line) !important;
}

.mugm-header{
  background: linear-gradient(180deg,
    rgba(8,12,20,.72) 0%,
    rgba(8,12,20,.52) 55%,
    rgba(8,12,20,.36) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
/* Links navbar más finos + hover pro */
.mugm-nav__list a{
  color: rgba(255,255,255,.80) !important;
  transition: color .18s ease, text-shadow .18s ease, transform .18s ease !important;
}
.mugm-nav__list a:hover{
  color: var(--mugm-blue) !important;
  text-shadow: 0 0 18px rgba(79,208,255,.25);
}
/* Botón ghost más “glass” */
.mugm-btn--ghost{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.25) !important;
}

/* Botón gold más metal + borde fino */
.mugm-btn--gold{
  background: linear-gradient(180deg, #e8cf86 0%, #c79a41 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.35) !important;
}
.mugm-btn--gold:hover{
  filter: brightness(1.04) saturate(1.05) !important;
}
/* ---------- Textos: más legibles ---------- */
.we-p, .mugm-subtitle, .we-p-sm{
  color: var(--mugm-muted) !important;
}
.mugm-title{
  text-shadow: 0 14px 50px rgba(0,0,0,.65) !important;
}
.mugm-title__accent{
  color: var(--mugm-gold) !important;
  text-shadow: 0 0 22px rgba(215,178,93,.18);
}

/* ---------- Inputs / paginación / chips (si aplica) ---------- */
.pagination > li > a,
.pagination > li > span{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.78) !important;
}
.pagination > .active > a,
.pagination > .active > span{
  background: rgba(79,208,255,.16) !important;
  border-color: rgba(79,208,255,.22) !important;
  color: #fff !important;
}
/* =========================================
   HERO KICKER — Servidor Online destacado
   ========================================= */

.mugm-hero__kicker--live{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 8px 14px !important;
  border-radius: 999px !important;

  background:
    linear-gradient(180deg,
      rgba(20,30,45,.85),
      rgba(10,15,30,.85)) !important;

  border: 1px solid rgba(255,255,255,.08) !important;

  box-shadow:
    0 8px 28px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;

  backdrop-filter: blur(6px) !important;
}

/* Texto */
.mugm-kicker-text{
  font-size: 13px !important;
  letter-spacing: .4px !important;
  color: rgba(220,230,255,.9) !important;
}

.mugm-kicker-text strong{
  color: #e9f1ff !important;
  font-weight: 600 !important;
}

/* Separador */
.mugm-kicker-sep{
  margin: 0 6px !important;
  opacity: .6 !important;
}

/* Contador de jugadores */
.mugm-kicker-count{
  color: #6ddcff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(100,200,255,.35) !important;
}

/* Punto online animado */
.mugm-dot--online{
  animation: mugmOnlinePulse 1.8s ease-in-out infinite !important;
}

@keyframes mugmOnlinePulse{
  0%   { box-shadow: 0 0 0 0 rgba(80,220,140,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(80,220,140,0); }
  100% { box-shadow: 0 0 0 0 rgba(80,220,140,0); }
}
/* ===== Castle Siege widget dentro del slider ===== */
.mugm-cs-widget{
  margin-top: 14px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(10,16,28,.55) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(6px) !important;
}

/* fallback cuando no detecta el widget */
.mugm-cs-widget--empty{
  color: rgba(220,230,255,.85) !important;
  font-size: 13px !important;
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
}
/* ===== Castle Siege widget dentro del SLIDER (skin premium) ===== */
.mugm-cs-slot .panel.castle-owner-widget{
  background: rgba(10,16,28,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(6px) !important;
  margin: 12px 0 0 !important;
}

.mugm-cs-slot .panel.castle-owner-widget .panel-heading{
  background: linear-gradient(90deg, rgba(255,190,70,.16), rgba(0,170,255,.10)) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.mugm-cs-slot .panel.castle-owner-widget .panel-title{
  color: rgba(255,255,255,.92) !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}

.mugm-cs-slot .panel.castle-owner-widget .panel-body{
  color: rgba(230,240,255,.90) !important;
}

.mugm-cs-slot .panel.castle-owner-widget .alt{
  color: rgba(255,190,70,.92) !important;
  font-weight: 700 !important;
}

.mugm-cs-slot .btn.btn-castlewidget{
  background: rgba(255,190,70,.18) !important;
  border: 1px solid rgba(255,190,70,.35) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 10px !important;
}

.mugm-cs-slot .btn.btn-castlewidget:hover{
  background: rgba(255,190,70,.26) !important;
}

/* fallback */
.mugm-cs-fallback{
  margin-top: 12px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(10,16,28,.45) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(230,240,255,.85) !important;
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.mugm-cs-mini{
  margin-top:12px!important;
  padding:12px 14px!important;
  border-radius:14px!important;
  background:rgba(10,16,28,.45)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter: blur(6px)!important;
}
.mugm-cs-mini__row{display:flex!important;gap:8px!important;flex-wrap:wrap!important;align-items:center!important;margin-bottom:8px!important;}
.mugm-cs-mini__pill{
  display:inline-flex!important;gap:8px!important;align-items:center!important;
  padding:6px 10px!important;border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.10)!important;
  color:rgba(255,255,255,.90)!important;font-weight:700!important;font-size:12px!important;
}
.mugm-cs-mini__pill--gold{
  background:rgba(255,190,70,.14)!important;border-color:rgba(255,190,70,.30)!important;
}
.mugm-cs-mini__text{color:rgba(230,240,255,.86)!important;font-size:13px!important;line-height:1.35!important;}
/* =========================================================
   Castle Siege Widget dentro del slider (no rompe WebEngine)
   Target: .mugm-cs-slot
   ========================================================= */

.mugm-cs-slot{
  margin-top: 16px;
  max-width: 560px;
  width: 100%;
}

/* El widget nativo imprime .panel */
.mugm-cs-slot .panel.castle-owner-widget,
.mugm-cs-slot .panel{
  background: linear-gradient(180deg, rgba(15,20,35,.88), rgba(8,12,22,.92)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
  overflow: hidden;
}

/* header */
.mugm-cs-slot .panel-heading{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,215,130,.14) !important;
  padding: 10px 12px !important;
  text-align: center;
}

.mugm-cs-slot .panel-title{
  color: #e6c98b !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  font-family: 'Cinzel', serif;
}

/* body */
.mugm-cs-slot .panel-body{
  padding: 12px 14px !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 13.5px !important;
}

/* Bootstrap rows/cols (evita que “se achique” y que se corte) */
.mugm-cs-slot .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mugm-cs-slot [class*="col-"]{
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Logo guild: limita tamaño para que entre bien */
.mugm-cs-slot img{
  max-width: 84px !important;
  height: auto !important;
  display: inline-block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}

/* labels */
.mugm-cs-slot .alt{
  color: rgba(255,215,130,.80) !important;
  font-size: 12px !important;
  letter-spacing: .03em;
}

/* botón del widget */
.mugm-cs-slot .btn.btn-castlewidget{
  background: linear-gradient(135deg,#e3b96a,#b7893f) !important;
  color: #1a1408 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
}

/* si el contenido del widget fuera muy alto, que scrollee dentro */
.mugm-cs-slot{
  max-height: 260px;
  overflow: auto;
  padding-right: 6px; /* espacio para scrollbar */
}

/* scrollbar más prolija (Chrome/Edge) */
.mugm-cs-slot::-webkit-scrollbar{ width: 8px; }
.mugm-cs-slot::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 10px;
}
.mugm-cs-slot::-webkit-scrollbar-track{
  background: rgba(0,0,0,.20);
  border-radius: 10px;
}

/* Mobile: que no quede “apretado” */
@media (max-width: 991px){
  .mugm-cs-slot{
    max-width: 100%;
    max-height: 240px;
  }
  .mugm-cs-slot img{ max-width: 72px !important; }
}
/* ===== Castle Siege: que el slide crezca y no haya scroll ===== */

/* sacamos el scroll interno */
.mugm-hslide--cs .mugm-cs-slot{
  max-height: none !important;
  overflow: visible !important;
}

/* el contenedor del slider pasa a auto height */
.mugm-hslider__frame{ overflow: visible; } /* importante para que no recorte */
#mugmHighlightSwiper{ height: auto; }
#mugmHighlightSwiper .swiper-wrapper{ height: auto; }

/* cada slide: altura automática */
#mugmHighlightSwiper .swiper-slide{
  height: auto;
}

/* pero mantenemos una altura mínima “premium” para los otros slides */
#mugmHighlightSwiper .mugm-hslide{
  min-height: 360px;
}

/* el CS suele necesitar más alto */
#mugmHighlightSwiper .mugm-hslide--cs{
  min-height: 520px;
}
/* =========================================================
   VIP — Skin AAA (solo dentro de .mugm-vip)
   ========================================================= */

.mugm-vip{
  --vip-bg: rgba(10,14,24,.55);
  --vip-border: rgba(255,255,255,.08);
  --vip-border-2: rgba(120,170,255,.14);
  --vip-glow: rgba(0,170,255,.18);
  --vip-gold: rgba(255,190,70,.95);
}

/* título */
.mugm-vip .page-title{
  margin: 10px 0 18px;
}
.mugm-vip .page-title span{
  display:inline-block;
  padding: 10px 14px;
  border: 1px solid var(--vip-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  letter-spacing:.5px;
}

/* panel VIP */
.mugm-vip .panel.panel-vip{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--vip-border);
  background: radial-gradient(110% 130% at 20% 0%, rgba(0,170,255,.08) 0%, transparent 55%),
              radial-gradient(110% 130% at 80% 0%, rgba(255,190,70,.06) 0%, transparent 60%),
              var(--vip-bg);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

/* header */
.mugm-vip .panel.panel-vip > .panel-heading{
  border: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.08));
}
.mugm-vip .panel.panel-vip > .panel-heading .panel-title{
  font-family: "Cinzel", serif;
  font-weight: 800;
  letter-spacing: .6px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 25px rgba(0,0,0,.55);
}

/* body */
.mugm-vip .panel.panel-vip > .panel-body{
  padding: 16px;
}

/* tabla */
.mugm-vip .vip-table{
  margin: 0;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.mugm-vip .vip-table tbody tr{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--vip-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.mugm-vip .vip-table tbody tr td{
  border-top: 0 !important;
  padding: 12px 14px !important;
  color: rgba(255,255,255,.82);
  vertical-align: middle;
}
.mugm-vip .vip-table tbody tr td:first-child{
  border-radius: 14px 0 0 14px;
  font-weight: 700;
}
.mugm-vip .vip-table tbody tr td:nth-child(2){
  color: rgba(255,255,255,.9);
}
.mugm-vip .vip-table tbody tr td:last-child{
  border-radius: 0 14px 14px 0;
  text-align: right;
  width: 160px;
}

/* botón VIP (pisamos .btn-vip) */
.mugm-vip .btn.btn-vip{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,190,70,.38);
  background: linear-gradient(180deg, rgba(255,190,70,.95), rgba(190,130,40,.95));
  color: rgba(10,10,10,.92) !important;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.mugm-vip .btn.btn-vip:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* mensajes (alerts de WebEngine) */
.mugm-vip .alert{
  border-radius: 14px;
  border: 1px solid var(--vip-border);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.mugm-vip .alert-success{
  border-color: rgba(60,220,160,.25);
  background: rgba(60,220,160,.10);
}
.mugm-vip .alert-info{
  border-color: rgba(0,170,255,.25);
  background: rgba(0,170,255,.10);
}
.mugm-vip .alert-danger{
  border-color: rgba(255,80,80,.22);
  background: rgba(255,80,80,.10);
}

/* responsive: la tabla no explota */
@media (max-width: 767px){
  .mugm-vip .vip-table tbody tr td:last-child{
    width: auto;
    text-align: left;
  }
  .mugm-vip .btn.btn-vip{
    display: inline-block;
    margin-top: 6px;
  }
}
/* =========================================================
   DONACIONES / PACKS — legibilidad + sin "(recomendado)"
   (override safe, sin tocar PHP)
   ========================================================= */

/* Título (GMPoints) — más grande y con números legibles */
.mugm-pay-card__title{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  line-height: 1.1 !important;
  font-size: clamp(22px, 2.3vw, 30px) !important;
  color: rgba(255,255,255,.96) !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* “GMPoints / Coins / créditos” (span dentro del título) */
.mugm-pay-card__title > span{
  display: inline-block;
  margin-left: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(6px);
}

/* Precio — que se lea “de una” */
.mugm-pay-card__price{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(20px, 2.1vw, 28px) !important;
  color: rgba(255,255,255,.95) !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* Moneda (ARS / USD) más discreta pero legible */
.mugm-pay-card__price small{
  font-size: 12px !important;
  font-weight: 700 !important;
  opacity: .85 !important;
  letter-spacing: .35px;
  text-transform: uppercase;
}

/* Card — un poquito más “premium” (contraste y borde) */
.mugm-pay-card{
  background: linear-gradient(180deg, rgba(20,24,34,.78), rgba(12,14,20,.78)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.45) !important;
}

/* Featured: que destaque sin meter texto "recomendado" */
.mugm-pay-card.is-featured{
  border-color: rgba(255,200,120,.30) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.55) !important;
}

/* Si tu CSS anterior agrega un badge tipo “Recomendado”, lo apagamos */
.mugm-pay-card .mugm-badge,
.mugm-pay-card .mugm-ribbon,
.mugm-pay-card .mugm-tag,
.mugm-pay-card [data-badge],
.mugm-pay-card .recommended,
.mugm-pay-card .is-recommended{
  display: none !important;
}

/* Si “(recomendado)” está siendo inyectado como ::after en featured, lo anulamos */
.mugm-pay-card.is-featured::before,
.mugm-pay-card.is-featured::after{
  content: "" !important;
  display: none !important;
}
/* ===============================
   STATS / COUNTERS – Tipografía
   =============================== */

.mugm-stats,
.mugm-stat,
.mugm-counter,
.server-stats,
.stats-block {
  font-family: 'Inter', 'Poppins', 'Segoe UI', sans-serif !important;
}

/* Títulos: Accounts / Characters / Estado */
.mugm-stats .label,
.mugm-stat-title,
.server-stats span,
.stats-block small {
  font-size: 12px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(200,220,255,.75);
  font-weight: 600;
}

/* Números grandes */
.mugm-stats .value,
.mugm-stat-number,
.server-stats strong,
.stats-block h3 {
  font-size: 28px !important;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Estado ONLINE / OFFLINE */
.mugm-stats .online,
.status-online {
  color: #39ff9a;
  font-weight: 800;
  letter-spacing: .06em;
}

.mugm-stats .offline,
.status-offline {
  color: #ff5a5a;
  font-weight: 800;
  letter-spacing: .06em;
}
/* =========================================================
   CASTLE SIEGE WIDGET — skin AAA (solo dentro del slider)
   Target: .mugm-cs-slot .castle-owner-widget (panel bootstrap)
   ========================================================= */

.mugm-cs-slot { margin-top: 14px; }

/* panel base */
.mugm-cs-slot .castle-owner-widget.panel{
  background: rgba(10, 14, 24, .62) !important;
  border: 1px solid rgba(120,160,220,.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.45) !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* header */
.mugm-cs-slot .castle-owner-widget .panel-heading{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) !important;
  border-bottom: 1px solid rgba(120,160,220,.14) !important;
  padding: 10px 14px !important;
}

.mugm-cs-slot .castle-owner-widget .panel-title{
  font-family: "Cinzel", serif !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(235,245,255,.92) !important;
  font-size: 14px !important;
  margin: 0 !important;
  text-align: center !important;
}

/* body */
.mugm-cs-slot .castle-owner-widget .panel-body{
  padding: 14px !important;
  color: rgba(210,225,245,.88) !important;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, sans-serif !important;
}

/* grilla compacta (evita “widget gigante”) */
.mugm-cs-slot .castle-owner-widget .row{ margin-left: -8px !important; margin-right: -8px !important; }
.mugm-cs-slot .castle-owner-widget [class*="col-"]{ padding-left: 8px !important; padding-right: 8px !important; }

/* logo guild */
.mugm-cs-slot .castle-owner-widget img{
  border-radius: 12px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45) !important;
}

/* labels (los <span class="alt">) */
.mugm-cs-slot .castle-owner-widget .alt{
  display: inline-block !important;
  font-size: 12px !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: rgba(160,190,235,.78) !important;
  margin-bottom: 4px !important;
}

/* valores (guild owner / master / stage / countdown) */
.mugm-cs-slot .castle-owner-widget .panel-body{
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* el “bloque” inferior centrado: etapa + countdown + botón */
.mugm-cs-slot .castle-owner-widget .row[style*="margin-top"]{
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(120,160,220,.12) !important;
}

/* botón */
.mugm-cs-slot .castle-owner-widget .btn-castlewidget{
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  border: 1px solid rgba(255,200,110,.35) !important;
  background: linear-gradient(180deg, rgba(255,200,110,.18), rgba(255,200,110,.08)) !important;
  color: rgba(255,235,200,.95) !important;
}

.mugm-cs-slot .castle-owner-widget .btn-castlewidget:hover{
  border-color: rgba(255,200,110,.55) !important;
  background: linear-gradient(180deg, rgba(255,200,110,.24), rgba(255,200,110,.10)) !important;
  transform: translateY(-1px);
}

/* responsive: en mobile, que no “explote” */
@media (max-width: 991px){
  .mugm-cs-slot .castle-owner-widget .panel-body{ padding: 12px !important; }
  .mugm-cs-slot .castle-owner-widget img{ max-width: 86px !important; height: auto !important; }
}
/* =========================================================
   CASTLE SIEGE MODULE — AAA Skin (sin tocar PHP)
   Target: .castle-siege-block + panel/tablas/timer
   ========================================================= */

/* contenedor del módulo */
.castle-siege-block{
  background: rgba(10,14,24,.35) !important;
  border: 1px solid rgba(120,160,220,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
  padding: 18px 18px 6px !important;
  margin-bottom: 22px !important;
}

/* títulos del módulo */
.castle-siege-block h2{
  font-family: "Cinzel", serif !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
  color: rgba(235,245,255,.92) !important;
  margin: 12px 0 10px !important;
}

/* separadores */
.castle-siege-block hr{
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    rgba(120,160,220,0),
    rgba(120,160,220,.18),
    rgba(120,160,220,0)) !important;
  margin: 14px 0 !important;
}

/* =========================================
   PANEL: dueños + alianzas
   ========================================= */
.castle-owner-panel.panel{
  background: rgba(10,14,24,.62) !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.35) !important;
  overflow: hidden !important;
}

.castle-owner-panel .panel-body{
  padding: 16px !important;
  color: rgba(210,225,245,.90) !important;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, sans-serif !important;
}

.castle-owner-name{
  display:block;
  font-family: "Cinzel", serif !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  color: rgba(255,235,200,.95) !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

.castle-owner-panel h4{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  color: rgba(160,190,235,.85) !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  margin: 10px 0 6px !important;
}

.castle-owner-panel p{
  margin: 0 !important;
  color: rgba(235,245,255,.90) !important;
  font-weight: 700 !important;
}

/* grilla más compacta, menos “bootstrap viejo” */
.castle-owner-panel .row{ margin-left: -8px !important; margin-right: -8px !important; }
.castle-owner-panel [class*="col-"]{ padding-left: 8px !important; padding-right: 8px !important; }

/* logos (guild marks) */
.castle-owner-panel img{
  border-radius: 14px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.45) !important;
}

/* header “tabla” de alianzas */
.castle-owner-ally-title{
  margin-top: 8px !important;
  padding: 10px 0 !important;
  border-top: 1px solid rgba(120,160,220,.12) !important;
  border-bottom: 1px solid rgba(120,160,220,.12) !important;
  color: rgba(160,190,235,.90) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 12px !important;
}

.castle-owner-ally{
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(120,160,220,.08) !important;
}

.castle-owner-ally:last-child{ border-bottom: 0 !important; }

/* =========================================
   TIMER
   ========================================= */
#siegeTimer{
  background: rgba(10,14,24,.55) !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: rgba(255,235,200,.95) !important;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.30) !important;
  text-align: center !important;
}

/* =========================================
   TABLAS (info / registered / schedule)
   ========================================= */
.castle-siege-block .table{
  background: rgba(10,14,24,.45) !important;
  border: 1px solid rgba(120,160,220,.12) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}

.castle-siege-block .table > thead > tr > th{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) !important;
  border-bottom: 1px solid rgba(120,160,220,.14) !important;
  color: rgba(160,190,235,.92) !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  font-size: 12px !important;
  padding: 12px 12px !important;
}

.castle-siege-block .table > tbody > tr > td{
  border-top: 1px solid rgba(120,160,220,.08) !important;
  color: rgba(235,245,255,.88) !important;
  padding: 12px 12px !important;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, sans-serif !important;
  font-weight: 650 !important;
}

.castle-siege-block .table-striped > tbody > tr:nth-of-type(odd){
  background: rgba(255,255,255,.02) !important;
}

/* links de guildProfile/playerProfile (si son <a>) */
.castle-siege-block a{
  color: rgba(150,210,255,.95) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.castle-siege-block a:hover{
  color: rgba(255,235,200,.95) !important;
  text-decoration: none !important;
}

/* mobile: apila mejor */
@media (max-width: 991px){
  .castle-siege-block{ padding: 14px 12px 6px !important; }
  .castle-owner-panel .panel-body{ padding: 12px !important; }
  .castle-owner-panel img{ max-width: 86px !important; height: auto !important; }
}
/* =========================================================
   MUGM — MODALES (Eventos + Panel usuario) — override final
   Pegar AL FINAL del CSS
   ========================================================= */

/* Backdrop más premium */
.modal-backdrop.in,
.modal-backdrop.show{
  opacity:.72 !important;
  background: radial-gradient(1200px 700px at 50% 20%, rgba(20,35,70,.55), rgba(0,0,0,.85)) !important;
}

/* Centrado y ancho consistente */
.modal-dialog{
  width: min(920px, calc(100% - 24px)) !important;
  margin: 6vh auto !important;
}
@media (max-width: 767px){
  .modal-dialog{ margin: 10px auto !important; }
}

/* Contenedor glass */
.modal-content{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(18,28,58,.92), rgba(10,14,24,.92)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.65) !important;
  overflow: hidden !important;
}

/* Header con “barra” MU */
.modal-header{
  border: 0 !important;
  padding: 16px 18px !important;
  background:
    linear-gradient(90deg, rgba(255,190,70,.10), rgba(0,170,255,.10), rgba(255,190,70,.06)) !important;
  position: relative !important;
}
.modal-header:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: linear-gradient(90deg, rgba(255,190,70,.45), rgba(0,170,255,.35), rgba(255,190,70,.35)) !important;
  opacity:.35;
}
.modal-title{
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: rgba(255,255,255,.92) !important;
  text-transform: uppercase !important;
}

/* Botón cerrar (x) */
.modal-header .close,
.modal-header button.close{
  opacity: 1 !important;
  color: rgba(255,255,255,.85) !important;
  text-shadow: none !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  width: 36px; height: 36px;
  border-radius: 10px !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.modal-header .close:hover,
.modal-header button.close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,190,70,.22) !important;
}

/* Body */
.modal-body{
  padding: 14px 18px 18px !important;
  color: rgba(255,255,255,.78) !important;
}

/* =========================================================
   EVENTOS: filas tipo “lista” con separadores finos + timer pill
   (aplica si el modal usa listas/filas como en tu captura)
   ========================================================= */
#eventModal .modal-body,
.modal#mugmEventModal .modal-body{
  padding-top: 8px !important;
}

/* Separadores entre items */
#eventModal .modal-body > * + *,
.modal#mugmEventModal .modal-body > * + *{
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* Si tenés filas con flex/row, esto ayuda a que queden “cards” */
#eventModal .modal-body > div,
.modal#mugmEventModal .modal-body > div{
  padding: 14px 0 !important;
}

/* Links dentro (ej: “Siguiente: Thu …”) */
#eventModal a,
.modal#mugmEventModal a{
  color: rgba(0,170,255,.90) !important;
  text-decoration: none !important;
}
#eventModal a:hover,
.modal#mugmEventModal a:hover{
  color: rgba(255,190,70,.92) !important;
}

/* “Pill” del timer (lado derecho) */
#eventModal .badge,
#eventModal .label,
#eventModal .mugm-pill,
.modal#mugmEventModal .badge,
.modal#mugmEventModal .label,
.modal#mugmEventModal .mugm-pill{
  background: rgba(0,170,255,.12) !important;
  border: 1px solid rgba(0,170,255,.20) !important;
  color: rgba(255,255,255,.88) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}

/* =========================================================
   PANEL USUARIO: items clickeables “list-group” / filas
   ========================================================= */
#userPanelModal .modal-body,
#panelModal .modal-body{
  padding-top: 10px !important;
}

/* Panel interno (si usás panel/heading/body) */
#userPanelModal .panel,
#panelModal .panel,
#userPanelModal .panel-body,
#panelModal .panel-body{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Items del menú del panel (list-group o rows) */
#userPanelModal .list-group-item,
#panelModal .list-group-item{
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  color: rgba(255,255,255,.85) !important;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
#userPanelModal .list-group-item:hover,
#panelModal .list-group-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,190,70,.18) !important;
}

/* Flechita o iconos a la derecha (si existieran) */
#userPanelModal .list-group-item i,
#panelModal .list-group-item i{
  color: rgba(255,190,70,.85) !important;
}

/* Textos secundarios dentro de cada item */
#userPanelModal .list-group-item small,
#panelModal .list-group-item small,
#userPanelModal .text-muted,
#panelModal .text-muted{
  color: rgba(255,255,255,.55) !important;
}

/* =========================================================
   Extras: scroll prolijo si el contenido es largo
   ========================================================= */
.modal-body{
  max-height: min(72vh, 740px) !important;
  overflow: auto !important;
  scrollbar-width: thin;
}
.modal-body::-webkit-scrollbar{ width: 10px; }
.modal-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.modal-body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
/* =========================================================
   MUGM — PROFILES (player.php / guild.php) — override final
   Pegar AL FINAL del CSS
   ========================================================= */

/* Wrapper opcional (si lo agregás en PHP). Si no, igual aplica por clases existentes */
.mugm-profiles {}

/* Cards base (player + guild) */
.profiles_player_card,
.profiles_guild_card{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg, rgba(18,28,58,.60), rgba(10,14,24,.70)) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow: hidden !important;
  padding: 18px !important;
  margin: 12px 0 24px !important;
}

/* Ajuste de “contenido” (player) */
.profiles_player_content{
  padding: 6px 6px 2px !important;
}

/* Nombre del PJ */
.profiles_player_table .cname{
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  color: rgba(255,255,255,.94) !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  padding: 6px 0 2px !important;
}

/* Clase del PJ */
.profiles_player_table .cclass{
  font-weight: 800 !important;
  color: rgba(255,190,70,.90) !important;
  letter-spacing: .02em !important;
  padding-bottom: 10px !important;
}

/* Tabla info (player) */
.profiles_player_table_info{
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 10px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
.profiles_player_table_info tr{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.profiles_player_table_info tr:last-child{
  border-bottom: 0 !important;
}
.profiles_player_table_info td{
  padding: 10px 12px !important;
  font-weight: 700 !important;
}
.profiles_player_table_info td:first-child{
  color: rgba(255,255,255,.70) !important;
  width: 54% !important;
}
.profiles_player_table_info td:last-child{
  color: rgba(255,255,255,.92) !important;
  text-align: right !important;
}

/* Online / Offline (player) */
.profiles_player_table_info td.isonline,
.profiles_player_table_info td.isoffline{
  text-align: right !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}
.profiles_player_table_info td.isonline{
  color: rgba(60,230,140,.95) !important;
}
.profiles_player_table_info td.isoffline{
  color: rgba(255,120,120,.92) !important;
}

/* Guild: logo y nombre */
.profiles_guild_card .guild_logo img{
  border-radius: 16px !important;
  box-shadow: 0 12px 50px rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.profiles_guild_card .guild_name{
  display: block !important;
  font-weight: 950 !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  color: rgba(255,255,255,.94) !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  margin: 6px 0 10px !important;
}

/* Guild: tabla info */
.profiles_guild_card table.table{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.profiles_guild_card table.table tr{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.profiles_guild_card table.table tr:last-child{
  border-bottom: 0 !important;
}
.profiles_guild_card table.table td{
  border-top: 0 !important;
  padding: 10px 12px !important;
  font-weight: 750 !important;
  color: rgba(255,255,255,.86) !important;
}
.profiles_guild_card table.table td.text-right{
  color: rgba(255,255,255,.68) !important;
}
.profiles_guild_card table.table a{
  color: rgba(0,170,255,.92) !important;
  text-decoration: none !important;
  font-weight: 850 !important;
}
.profiles_guild_card table.table a:hover{
  color: rgba(255,190,70,.92) !important;
}

/* Separador */
.profiles_guild_card hr{
  border-top: 1px solid rgba(255,255,255,.08) !important;
  opacity: .55 !important;
}

/* Guild: “Miembros” */
.profiles_guild_card .guild_members{
  display:block !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.86) !important;
  margin-bottom: 10px !important;
}

/* Lista miembros como chips */
.profiles_guild_card .guild_members_list .col-xs-3{
  padding: 6px !important;
}
.profiles_guild_card .guild_members_list a{
  display:block !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  padding: 9px 10px !important;
  font-weight: 850 !important;
  color: rgba(255,255,255,.86) !important;
  text-decoration: none !important;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.profiles_guild_card .guild_members_list a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,190,70,.18) !important;
  color: rgba(255,190,70,.92) !important;
}

/* Responsive */
@media (max-width: 767px){
  .profiles_guild_card .col-xs-6{ width:100% !important; }
  .profiles_guild_card .guild_members_list .col-xs-3{ width:50% !important; }
}
/* =========================================================
   MUGM — CAROUSEL (override final, sin tocar HTML/JS)
   - Más grande (PC + mobile)
   - Sin blur/coverflow feo
   - Look coherente con el sitio
   ========================================================= */

/* contenedor general */
.mugm-gallery{
  position: relative !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(18,28,55,.55), rgba(8,12,22,.55)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.55) !important;
  overflow: hidden !important;
}

/* toolbar (flechas) */
.mugm-gallery__toolbar{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 4 !important;
  display: flex !important;
  gap: 10px !important;
  margin: 0 !important;
}

.mugm-gallery__btn{
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(10,14,24,.55) !important;
  color: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}
.mugm-gallery__btn:hover{
  border-color: rgba(255,190,70,.35) !important;
  transform: translateY(-1px) !important;
}
.mugm-gallery__btn:active{ transform: translateY(0) !important; }

/* viewport: sin scrollbar fea + máscara suave en bordes */
.mugm-gallery__viewport{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 18px 14px 42px !important; /* espacio para hint */
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 8%,
    rgba(0,0,0,1) 92%,
    rgba(0,0,0,0) 100%) !important;
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 8%,
    rgba(0,0,0,1) 92%,
    rgba(0,0,0,0) 100%) !important;
}
.mugm-gallery__viewport::-webkit-scrollbar{ display:none !important; }

/* track: centrado “real” con padding lateral */
.mugm-gallery__track{
  display: flex !important;
  gap: 14px !important;
  padding: 0 calc(50% - 260px) !important; /* centra una card ~520px */
}

/* cards: look premium + grande (PC) */
.mugm-gallery__card{
  flex: 0 0 clamp(320px, 44vw, 520px) !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(0,0,0,.25) !important;
  overflow: hidden !important;

  /* mata el coverflow anterior */
  transform: none !important;
  filter: none !important;
  opacity: .78 !important;

  scroll-snap-align: center !important;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;
}

/* card central: destaca (el JS ya pone .is-center) */
.mugm-gallery__card.is-center{
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  border-color: rgba(255,190,70,.22) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.65) !important;
}

/* imagen: llena bien */
.mugm-gallery__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.02) !important;
}

/* brillo/shine más sutil y “pro” */
.mugm-gallery__shine{
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(0,170,255,.14) 0%, rgba(0,170,255,0) 55%),
    radial-gradient(120% 90% at 30% 80%, rgba(255,190,70,.10) 0%, rgba(255,190,70,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)) !important;
  pointer-events:none !important;
  opacity: .95 !important;
}

/* hint abajo (más limpio) */
.mugm-gallery__hint{
  position:absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 10px !important;
  z-index: 4 !important;
  display:flex !important;
  justify-content:center !important;
  gap: 10px !important;
  color: rgba(255,255,255,.70) !important;
  font-size: 12px !important;
  opacity: .95 !important;
}
.mugm-gallery__dot{ opacity: .55 !important; }

/* ===== Mobile: bien grande (no miniatura) ===== */
@media (max-width: 991px){
  .mugm-gallery__track{
    padding: 0 calc(50% - 42vw) !important; /* centra una card ~84vw */
  }
  .mugm-gallery__card{
    flex-basis: 84vw !important;
    border-radius: 16px !important;
    opacity: .88 !important;
  }
  .mugm-gallery__toolbar{
    top: 10px !important;
    right: 10px !important;
  }
  .mugm-gallery__btn{
    width: 40px !important;
    height: 40px !important;
  }
}

/* ===== Lightbox: que también combine ===== */
.mugm-lightbox__panel{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(10,14,24,.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 30px 120px rgba(0,0,0,.75) !important;
}
.mugm-lightbox__close,
.mugm-lightbox__nav{
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(10,14,24,.55) !important;
  color: rgba(255,255,255,.92) !important;
}
.mugm-lightbox__close:hover,
.mugm-lightbox__nav:hover{
  border-color: rgba(255,190,70,.35) !important;
}
/* ====== CAROUSEL 1-UP (solo una imagen visible) ====== */

/* viewport ocupa bien el ancho y centra */
.mugm-gallery__viewport{
  scroll-snap-type: x mandatory !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* track: elimina el padding raro y centra el "1-up" */
.mugm-gallery__track{
  padding: 0 !important;
  justify-content: flex-start !important;
}

/* cada card ocupa el ancho visible (una sola por vez) */
.mugm-gallery__card{
  flex: 0 0 100% !important;  /* 1 por pantalla */
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  scroll-snap-align: center !important;

  /* para que el “central” no se vea desalineado */
  margin: 0 14px !important; /* margen interno para que no toque bordes */
}

/* y el track tiene que compensar esos márgenes para que el snap quede al centro */
.mugm-gallery__track{
  gap: 0 !important;
}

/* en desktop que no quede exageradamente alto */
@media (min-width: 992px){
  .mugm-gallery__card{
    margin: 0 18px !important;
    aspect-ratio: 21 / 9 !important; /* más cinemático, opcional */
  }
}
/* =========================================================
   FIX MOBILE: que el navbar siempre quede arriba
   ========================================================= */
header, .navbar, .navbar-fixed-top, .mugm-navbar, .we-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Si existe alguna "topbar" fija arriba, evitá que empuje o tape */
.we-timebar, .topbar, .topbar-time, .nav-time, .mugm-top-time {
  position: static !important;
  top: auto !important;
}

/* En mobile: ocultar cualquier barra de tiempos (si coincide la clase) */
@media (max-width: 768px){
  .we-timebar,
  .topbar-time,
  .nav-time,
  .mugm-top-time {
    display: none !important;
  }
}
@media (max-width: 768px){
  /* cambia .we-news-card por la clase real de cada card */
  .we-news-grid .we-news-card { display:none !important; }
  .we-news-grid .we-news-card:nth-child(-n+3){ display:block !important; }
}
/* =========================
   HERO SIDE CARD (Castle Siege)
========================= */
.we-hero-grid { position: relative; }
.we-hero-side{
  margin-top: 16px;
}

.we-hero-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(10,14,22,.72), rgba(8,10,16,.62));
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow: hidden;
}

.we-hero-card__head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.we-hero-card__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 700;
  letter-spacing: .2px;
}
.we-hero-card__title{
  margin-top: 10px;
  font-weight: 900;
  font-size: 18px;
}
.we-hero-card__sub{
  margin-top: 4px;
  opacity: .78;
  font-size: 13px;
}

.we-hero-card__body{
  padding: 12px 14px;
}

.we-hero-card__foot{
  padding: 12px 14px 14px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

/* =========================
   RESTYLE: templateCastleSiegeWidget()
   (no tocamos PHP, solo CSS)
========================= */
.mugm-cs-hero .panel.castle-owner-widget{
  margin: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: rgba(0,0,0,.20) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.mugm-cs-hero .panel.castle-owner-widget .panel-heading{
  border: 0 !important;
  background: rgba(255,255,255,.04) !important;
  padding: 10px 12px !important;
}
.mugm-cs-hero .panel.castle-owner-widget .panel-title{
  font-weight: 900 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  opacity: .92 !important;
}

.mugm-cs-hero .panel.castle-owner-widget .panel-body{
  padding: 12px !important;
}

.mugm-cs-hero .panel.castle-owner-widget .alt{
  display:block !important;
  font-size: 12px !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  opacity: .70 !important;
  margin-bottom: 3px !important;
}

.mugm-cs-hero .panel.castle-owner-widget .btn.btn-castlewidget{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 800 !important;
}

/* Ajuste de layout interno del widget (evita “desorden” y scroll raro) */
.mugm-cs-hero .panel.castle-owner-widget .row{
  margin-left: -6px !important;
  margin-right: -6px !important;
}
.mugm-cs-hero .panel.castle-owner-widget [class*="col-"]{
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Mobile: que se acomode bien */
@media (max-width: 768px){
  .we-hero-card__title{ font-size: 16px; }
  .we-hero-card__foot{ justify-content: space-between; }
}
/* =========================
   FOOTER MuGM (premium)
========================= */
.mugm-footer{
  margin-top: 40px;
  padding: 28px 0 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(55,120,255,.12), transparent 55%),
              radial-gradient(900px 500px at 85% 20%, rgba(255,190,70,.10), transparent 50%),
              rgba(6,8,12,.85);
}

.mugm-footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 18px;
}

.mugm-footer__brand{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}

.mugm-footer__logo img{
  max-width: 120px;
  height: auto;
  display:block;
}

.mugm-footer__desc{
  margin: 10px 0 14px;
  opacity: .78;
  line-height: 1.5;
}

.mugm-footer__cta{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

.mugm-footer__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,210,120,.16);
  color: rgba(255,255,255,.96);
  font-weight: 800;
  text-decoration:none !important;
}
.mugm-footer__btn--ghost{
  background: rgba(255,255,255,.06);
}

.mugm-footer__col{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  padding: 16px;
}

.mugm-footer__title{
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .92;
  margin-bottom: 10px;
}

.mugm-footer__link{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
  margin-bottom: 10px;
  color: rgba(120,200,255,.95);
  text-decoration:none !important;
}
.mugm-footer__link:hover{
  background: rgba(255,255,255,.05);
}

.mugm-footer__social{
  display:flex;
  gap:10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.mugm-social{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  text-decoration:none !important;
}

.mugm-footer__bottom{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mugm-footer__copy{
  opacity: .80;
  font-size: 13px;
}
.mugm-footer__muted{
  display:block;
  opacity: .65;
  margin-top: 4px;
}

.mugm-footer__engine{
  display:flex;
  align-items:center;
  gap:10px;
  opacity: .85;
}
.mugm-footer__engine img{
  height: 22px;
  width: auto;
  opacity: .92;
}

@media (max-width: 992px){
  .mugm-footer__grid{ grid-template-columns: 1fr; }
  .mugm-footer__bottom{ flex-direction: column; align-items: flex-start; }
}
/* =========================================================
   HERO: más vistoso + consistente
========================================================= */

.mugm-hero__inner{
  display:grid !important;
  grid-template-columns: 1.05fr .95fr !important;
  gap: 18px !important;
  align-items: center !important;
}

@media (max-width: 992px){
  .mugm-hero__inner{ grid-template-columns: 1fr !important; }
}

.mugm-hero__copy{
  position: relative !important;
  z-index: 2 !important;
}

.mugm-hero-bullets{
  display:flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 14px !important;
  opacity: .92 !important;
}

.mugm-hero-bullets span{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  font-size: 12.5px !important;
}

/* métricas nuevas */
.mugm-hero-metrics{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

@media (max-width: 992px){
  .mugm-hero-metrics{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

.mugm-metric{
  display:flex !important;
  gap: 10px !important;
  align-items:center !important;
  padding: 12px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(10,14,28,.35) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px) !important;
}

.mugm-metric__ico{
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.mugm-metric__label{ font-size: 12px !important; opacity: .70 !important; }
.mugm-metric__value{ font-size: 18px !important; font-weight: 900 !important; letter-spacing: .2px !important; }

.mugm-pill{
  display:inline-flex !important;
  align-items:center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.05) !important;
}

.mugm-pill--on{ box-shadow: 0 0 0 2px rgba(35,220,140,.10) inset !important; }
.mugm-pill--off{ box-shadow: 0 0 0 2px rgba(255,80,80,.10) inset !important; }

/* =========================================================
   CASTLE SIEGE BLOCK (arriba del slider)
========================================================= */

.mugm-home-block--cs .mugm-section__head--cs{
  display:flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}

.mugm-home-block--cs .mugm-section__sub{
  font-size: 12.5px !important;
  opacity: .72 !important;
}

.mugm-cs-box{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(8,10,14,.22) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.40) !important;
  padding: 12px !important;
  overflow: hidden !important;
}

/* “skin” para widget bootstrap */
.mugm-cs-skin .panel{
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mugm-cs-skin .panel-heading{ display:none !important; }
.mugm-cs-skin .panel-body{ padding: 0 !important; }

/* Asegura que el contenido interno no rompa el layout */
.mugm-cs-skin .row{ margin-left: 0 !important; margin-right: 0 !important; }
.mugm-cs-skin [class*="col-"]{ padding-left: 0 !important; padding-right: 0 !important; }

/* Si el widget trae tablas/listas, las “mugmizamos” */
.mugm-cs-skin table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.mugm-cs-skin td, .mugm-cs-skin th{
  padding: 8px 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(235,242,255,.90) !important;
}
.mugm-cs-skin tr:last-child td{ border-bottom: 0 !important; }

/* Acciones */
.mugm-cs-actions{
  display:flex !important;
  gap: 10px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}
/* =========================================================
   CASTLE SIEGE – Compact 2 columnas (izq dueño / der etapa)
========================================================= */

.mugm-home-block--cs .mugm-cs-box--compact{
  padding: 12px !important;
}

.mugm-cs-skin--compact{
  position: relative !important;
}

/* Reset bootstrap típico dentro del widget */
.mugm-cs-skin--compact .panel,
.mugm-cs-skin--compact .panel-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.mugm-cs-skin--compact .panel-heading{ display:none !important; }
.mugm-cs-skin--compact .panel-body{ padding: 0 !important; }

/* Si el widget viene con "row/col" lo convertimos a una grilla 2 columnas */
.mugm-cs-skin--compact .row{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 !important;
}

@media (max-width: 992px){
  .mugm-cs-skin--compact .row{
    grid-template-columns: 1fr !important;
  }
}

/* Columnas bootstrap típicas */
.mugm-cs-skin--compact [class*="col-"]{
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- IZQUIERDA: escudo + dueño + guild master --- */
.mugm-cs-skin--compact [class*="col-"]:first-child{
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Imágenes del widget: las tratamos como escudo */
.mugm-cs-skin--compact img{
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.40) !important;
}

/* Textos: compactos y con jerarquía */
.mugm-cs-skin--compact b,
.mugm-cs-skin--compact strong{
  color: rgba(235,242,255,.92) !important;
}

.mugm-cs-skin--compact p,
.mugm-cs-skin--compact span,
.mugm-cs-skin--compact div{
  color: rgba(235,242,255,.86) !important;
}

/* --- DERECHA: etapa + tiempo --- */
.mugm-cs-skin--compact [class*="col-"]:last-child{
  padding-left: 14px !important;
  border-left: 1px solid rgba(255,255,255,.08) !important;
}

@media (max-width: 992px){
  .mugm-cs-skin--compact [class*="col-"]:last-child{
    padding-left: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding-top: 12px !important;
  }
}

/* Cuenta regresiva / tiempo: estilo "badge" */
.mugm-cs-skin--compact .mugm-cs-countdown,
.mugm-cs-skin--compact .countdown,
.mugm-cs-skin--compact [data-countdown]{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.05) !important;
  font-weight: 800 !important;
}

/* Botón interno del widget (si existe) lo hacemos “pro” y pequeño */
.mugm-cs-skin--compact .btn,
.mugm-cs-skin--compact button,
.mugm-cs-skin--compact a.btn{
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,170,255,.14) !important;
  color: rgba(235,242,255,.92) !important;
  text-decoration: none !important;
}

/* Para que el bloque total sea más “bajo” */
.mugm-home-block--cs .mugm-cs-box--compact{
  max-height: 210px !important;
  overflow: hidden !important;
}
/* =========================
   Castle Siege (skin 2-col)
   ========================= */

.mugm-cs-box--2col{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,28,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  padding: 14px;
}

/* Contenedor que armamos por JS */
.mugm-cs-layout{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 992px){
  .mugm-cs-layout{ grid-template-columns: 1fr; }
}

/* Columnas */
.mugm-cs-left,
.mugm-cs-right{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 12px;
  min-height: 120px;
}

/* Header mini dentro */
.mugm-cs-minihead{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}

.mugm-cs-logo{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex: 0 0 48px;
}

.mugm-cs-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mugm-cs-titles{
  line-height: 1.15;
}
.mugm-cs-titles .t1{
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
.mugm-cs-titles .t2{
  font-size: 12px;
  color: rgba(230,238,255,.70);
  margin-top: 2px;
}

/* filas */
.mugm-cs-rows{
  display:grid;
  gap: 8px;
  margin-top: 6px;
}

.mugm-cs-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

.mugm-cs-row .k{
  font-size: 12px;
  color: rgba(230,238,255,.70);
}
.mugm-cs-row .v{
  font-weight: 700;
  color: rgba(255,255,255,.92);
  text-align:right;
}

/* tiempo grande */
.mugm-cs-countdown{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.mugm-cs-countdown .label{
  font-size: 12px;
  color: rgba(230,238,255,.70);
}
.mugm-cs-countdown .time{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .3px;
  color: rgba(255,255,255,.95);
}

/* Ocultamos el HTML original del widget una vez “migrado” */
.mugm-cs-skin.is-skimmed{
  display:none !important;
}
/* =========================
   Castle Siege — Page AAA
   ========================= */

.mugm-cs-page{ margin-top: 10px; }

.mugm-cs-card{
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,28,.32);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}

.mugm-cs-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.mugm-cs-badges{ display:flex; gap:8px; flex-wrap: wrap; }

.mugm-cs-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.90);
  font-size: 12px;
}

.mugm-cs-pill--muted{
  color: rgba(230,238,255,.78);
  background: rgba(255,255,255,.04);
}

/* métricas rápidas */
.mugm-cs-metrics{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 992px){
  .mugm-cs-metrics{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.mugm-cs-metric{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 10px 12px;
}
.mugm-cs-metric .k{ font-size: 12px; color: rgba(230,238,255,.70); }
.mugm-cs-metric .v{ margin-top: 2px; font-weight: 800; color: rgba(255,255,255,.92); }

/* owner + allies */
.mugm-cs-owner-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 12px;
}
@media (max-width: 992px){
  .mugm-cs-owner-grid{ grid-template-columns: 1fr; }
}

.mugm-cs-owner, .mugm-cs-allies{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 12px;
}

.mugm-cs-owner__top{
  display:flex;
  align-items:center;
  gap: 12px;
}
.mugm-cs-owner__logo{
  width: 74px; height: 74px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  overflow:hidden;
}
.mugm-cs-owner__txt .name{
  font-weight: 900;
  color: rgba(255,255,255,.95);
}
.mugm-cs-owner__txt .tag{
  display:inline-flex; gap:8px; align-items:center;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(230,238,255,.82);
  font-size: 12px;
}

.mugm-cs-owner__rows{ margin-top: 10px; display:grid; gap: 8px; }
.mugm-cs-owner__rows .rowi{
  display:flex; justify-content: space-between; gap:10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.mugm-cs-owner__rows .k{ color: rgba(230,238,255,.70); font-size: 12px; }
.mugm-cs-owner__rows .v{ color: rgba(255,255,255,.92); font-weight: 800; text-align:right; }

.mugm-cs-allies__head .t{ font-weight: 900; color: rgba(255,255,255,.92); }
.mugm-cs-allies__head .s{ margin-top: 4px; font-size: 12px; color: rgba(230,238,255,.70); }

.mugm-cs-table{ margin-top: 10px; display:grid; gap: 6px; }
.mugm-cs-tr{
  display:grid;
  grid-template-columns: 34px 1fr 1fr;
  gap: 10px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.mugm-cs-tr--th{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(230,238,255,.78);
  font-weight: 800;
}

/* timer */
.mugm-cs-timer{
  margin-top: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

/* tablas */
.mugm-cs-table2{
  margin-top: 10px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.mugm-cs-table2 thead th{
  background: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.90) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.mugm-cs-table2 tbody td{
  background: rgba(255,255,255,.03) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(235,242,255,.88) !important;
}
.mugm-cs-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 900;
}
.mugm-cs-chip--muted{
  opacity: .85;
}
.mugm-cs-empty{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(230,238,255,.78);
}