/*
 * MYRION — pulido visual final FASE 2.
 *
 * Esta capa sólo ajusta presentación. No cambia rutas, formularios, IDs legacy,
 * autenticación, Web Push ni la fuente dinámica de universos.
 */
:root {
  --myrion-polish-red: #ff2635;
  --myrion-polish-red-soft: rgba(255, 38, 53, .24);
  --myrion-polish-metal: rgba(186, 174, 178, .22);
}

/* Header: facetas más largas, brillo controlado y navegación ópticamente centrada. */
.myrion-header .header-wrapper {
  border-bottom-width: 1px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(255,58,69,.20),
    0 1px 0 rgba(92,82,85,.30),
    0 8px 26px rgba(0,0,0,.80),
    0 2px 12px rgba(255,20,34,.105) !important;
}
.myrion-header__frame {
  inset: 7px 31px 9px !important;
  opacity: .96;
}
.myrion-header__inner.header-container {
  padding-top: 7px !important;
  padding-bottom: 9px !important;
}
.myrion-brand.logo { gap: 11px !important; }
.myrion-brand__sigil::before {
  content: "";
  position: absolute;
  inset: 6px 3px;
  clip-path: polygon(50% 0, 91% 20%, 100% 67%, 72% 100%, 28% 100%, 0 67%, 9% 20%);
  border: 1px solid rgba(255,58,69,.18);
  box-shadow: inset 0 0 14px rgba(255,28,42,.06);
}
.myrion-brand__copy strong { line-height: .91 !important; }
.myrion-nav.navigation {
  max-width: 560px;
  justify-self: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), inset 0 -1px 0 rgba(255,38,53,.08);
}
.myrion-nav__item.nav-item {
  min-width: 128px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.myrion-nav__item i { width: 18px; text-align: center; }
.myrion-actions.navigation { align-self: center; }
.myrion-language.lang-select,
.myrion-balance.nav-profile,
.myrion-account-link.nav-profile,
.myrion-notifications.notification-button { height: 43px !important; }

/* Valores extremos: el header nunca debe crecer por usuario/saldo/badges. */
.myrion-balance__value {
  display: block;
  max-width: 88px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myrion-account-link span {
  display: block;
  max-width: 126px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-counter {
  min-width: 18px !important;
  max-width: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-select-list,
#langSelectList,
.language-dropdown {
  max-height: min(420px, 70vh);
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Eclipse/planeta: presencia mayor sin convertir la escena en UI horneada. */
.myrion-reference .xz-infernal__scene {
  inset: -34px -42px -28px !important;
  transform: translate3d(var(--xz-scene-x), var(--xz-scene-y), 0) scale(1.065) !important;
  transform-origin: 50% 36%;
}
.myrion-reference .xz-infernal__ambient {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255,22,35,.025) 0 20%, transparent 37%),
    radial-gradient(ellipse at 50% 31%, transparent 0 25%, rgba(0,0,0,.035) 48%, rgba(0,0,0,.17) 74%, rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,.055) 58%, rgba(0,0,0,.26) 100%) !important;
}

/* Hero: jerarquía similar al mockup, con glow mínimo para conservar nitidez. */
.myrion-reference .xz-hero {
  min-height: 306px !important;
  padding-top: 45px !important;
}
.myrion-reference .xz-hero h1 {
  max-width: 880px !important;
  margin-top: 22px !important;
  font-weight: 600 !important;
  text-shadow: 0 4px 7px rgba(0,0,0,.82), 0 0 2px rgba(255,255,255,.13) !important;
}
.myrion-reference .xz-hero__divider {
  margin-top: 12px !important;
  margin-bottom: 9px !important;
}
.myrion-reference .xz-hero__divider::before,
.myrion-reference .xz-hero__divider::after {
  height: 1px !important;
  box-shadow: 0 0 7px rgba(255,38,53,.24);
}

/* Cards: marco metálico doble, relieve contenido y menos volumen vertical. */
.myrion-reference .xz-universes {
  width: min(1008px, calc(100% - 46px)) !important;
  padding-bottom: 31px !important;
}
.myrion-reference .xz-universe-card {
  isolation: isolate;
  border-color: rgba(126,109,113,.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -11px 22px rgba(0,0,0,.46),
    0 9px 22px rgba(0,0,0,.59),
    0 0 10px rgba(255,30,44,.075) !important;
}
.myrion-reference .xz-universe-card::after {
  content: "";
  position: absolute;
  z-index: 19;
  pointer-events: none;
  inset: 3px;
  clip-path: inherit;
  border: 1px solid rgba(211,198,201,.075);
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 15% 85%, rgba(255,255,255,.025)),
    linear-gradient(180deg, transparent 0 68%, rgba(255,31,44,.022));
}
.myrion-reference .xz-universe-card--featured {
  transform: translateY(-4px);
}
.myrion-reference .xz-universe-card__identity { bottom: 10px !important; }
.myrion-reference .xz-universe-card__body { padding: 9px 15px 15px !important; }
.myrion-reference .xz-enter {
  min-height: 36px !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
}
.myrion-reference .xz-enter__arrow { font-size: 16px !important; }

/* Footer: banda metálica más plana y próxima a la referencia. */
.footer {
  background:
    linear-gradient(180deg, rgba(17,13,14,.995), rgba(7,6,6,.998) 46%, rgba(2,2,2,.999) 100%) !important;
  border-top-color: rgba(154,140,144,.29) !important;
}
.footer::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), rgba(255,38,53,.09), rgba(255,255,255,.055), transparent);
  pointer-events: none;
}
.footer .footer-container {
  min-height: 110px !important;
  padding-top: 16px !important;
  padding-bottom: 14px !important;
}

/* Modales legacy: no salen del viewport en tablet/mobile. */
.modal,
.modal-dialog,
#switchLogin,
#switchRegister,
#switchLostPassword {
  max-width: calc(100vw - 24px);
}
.modal-dialog {
  margin-left: auto !important;
  margin-right: auto !important;
}
.modal-content,
.login-box,
.register-box {
  max-height: calc(100vh - 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 1920x1080: composición base de referencia. */
@media (min-width: 1600px) and (max-width: 2559px) {
  .myrion-reference .xz-hero { padding-top: 48px !important; }
  .myrion-reference .xz-universes { margin-top: -4px !important; }
}

/* 2560x1440: no ensanchar UI, sólo dar más respiración a la escena. */
@media (min-width: 2560px) and (max-width: 2999px) {
  .myrion-reference .xz-infernal__scene { transform: translate3d(var(--xz-scene-x), var(--xz-scene-y), 0) scale(1.045) !important; }
  .myrion-reference .xz-hero { padding-top: 60px !important; min-height: 330px !important; }
}

/* 3440x1440 ultrawide: UI permanece centrada y el planeta no se aplana. */
@media (min-width: 3000px) {
  .myrion-reference .xz-infernal__scene {
    background-size: cover !important;
    transform: translate3d(var(--xz-scene-x), var(--xz-scene-y), 0) scale(1.025) !important;
  }
  .myrion-reference .xz-hero { max-width: 1500px !important; }
}

/* 1366x768: altura limitada, header/hero/cards caben sin aplastar el footer. */
@media (max-width: 1366px) and (max-height: 820px) {
  .myrion-reference .xz-hero { min-height: 260px !important; padding-top: 32px !important; padding-bottom: 6px !important; }
  .xz-hero__reference-emblem { width: 26px !important; height: 31px !important; }
  .myrion-reference .xz-hero h1 { margin-top: 17px !important; font-size: clamp(42px,4.15vw,58px) !important; }
  .myrion-reference .xz-universes { margin-top: -8px !important; padding-bottom: 24px !important; }
  .myrion-reference .xz-universe-card__image { max-height: 184px !important; min-height: 184px !important; height: 184px !important; }
  .footer .footer-container { min-height: 92px !important; }
}

/* 1024x768 y tablets landscape. */
@media (min-width: 901px) and (max-width: 1100px) {
  .myrion-reference .xz-universes { width: min(676px, calc(100% - 28px)) !important; }
  .myrion-reference .xz-universe-grid { gap: 22px !important; }
}

/* 834x1194 / 768x1024: header de dos bloques y cards a dos columnas. */
@media (min-width: 721px) and (max-width: 900px) {
  .myrion-header__inner.header-container { width: calc(100% - 24px) !important; }
  .myrion-reference .xz-hero { padding-top: 58px !important; min-height: 318px !important; }
  .myrion-reference .xz-universes { width: min(650px, calc(100% - 30px)) !important; }
  .myrion-reference .xz-universe-grid { gap: 22px !important; }
}

/* Mobile 430/390/360: prioridad a marca, menú móvil y CTA. */
@media (max-width: 430px) {
  .myrion-header__inner.header-container { min-height: 82px !important; }
  .myrion-reference .xz-infernal__scene {
    inset: -18px -14px -20px !important;
    background-position: 50% 24% !important;
    transform: translate3d(0,0,0) scale(1.035) !important;
  }
  .myrion-reference .xz-hero { min-height: 258px !important; padding: 41px 18px 8px !important; }
  .myrion-reference .xz-universes { padding-bottom: 35px !important; }
  .myrion-reference .xz-universe-card__body { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 390px) {
  .myrion-reference .xz-hero h1 { font-size: 38px !important; }
  .myrion-reference .xz-hero__subtitle { letter-spacing: .27em !important; }
}
@media (max-width: 360px) {
  .myrion-reference .xz-hero { min-height: 246px !important; padding-top: 36px !important; }
  .myrion-reference .xz-hero h1 { font-size: 34px !important; }
  .myrion-reference .xz-universe-grid { gap: 22px !important; }
  .myrion-reference .xz-enter { letter-spacing: .085em !important; }
}

@media (prefers-reduced-motion: reduce) {
  .myrion-reference .xz-infernal__particles,
  .myrion-reference .xz-infernal__embers,
  .myrion-reference .xz-infernal__cursor { display: none !important; }
}