/* Artwork edited from the user-supplied MU image, 17 October 2026. */
.section-1 {
  height: auto;
  min-height: 0;
  aspect-ratio: 1738 / 905;
  margin-bottom: 1.5rem;
  background: #210708 url('./luc-dia-hero-dark-clean-v6-opt.webp') center top / 100% 100% no-repeat;
}
.section-1 .cta {
  top: auto;
  bottom: 1.5%;
  transform: translate3d(-50%, 0, 0) scale(.85);
  transform-origin: bottom center;
}
@media (max-width: 767px) {
  .section-1 {
    aspect-ratio: 1.35;
    background-size: auto 100%;
  }
  .section-1 .cta {
    bottom: 1%;
    transform: translate3d(-50%, 0, 0) scale(.8);
    transform-origin: bottom center;
  }
}

.section-1 .btn-app img { aspect-ratio: 1; object-fit: cover; border-radius: 12%; border: 1px solid #b49256; }

.section-1 .install-button {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  height: 8.5rem;
  width: 8.5rem;
  padding: .65rem;
  overflow: visible;
  border: 1px solid #a7793c;
  border-radius: 0;
  color: #edce94;
  background: radial-gradient(ellipse at 50% 100%, #4a1618 0%, #210c0e 48%, #10090b 100%);
  box-shadow: inset 0 0 0 4px #190c0d, inset 0 0 0 5px #6b4928, 0 3px 12px #0009;
  transition: color .2s, box-shadow .2s, background .2s;
}
.section-1 .install-button::before,
.section-1 .install-button::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid #9b6b3499;
  transform: rotate(3deg);
  pointer-events: none;
}
.section-1 .install-button::after { inset: -7px 1px; transform: rotate(-3deg); border-color: #845c3277; }
.install-button svg { width: 2.4rem; height: 2.4rem; filter: drop-shadow(0 2px 3px #000); }
.install-button span { font: 700 1.35rem Georgia, 'Times New Roman', serif; text-shadow: 0 2px 3px #000; white-space: nowrap; }
.section-1 .install-button:hover,
.section-1 .install-button:focus-visible { color: #fff0c3; background: radial-gradient(ellipse at 50% 100%, #682024, #210c0e 70%); box-shadow: inset 0 0 0 4px #190c0d, inset 0 0 0 5px #c7944b, 0 0 15px #a5482544; }

/* Smooth crimson light trails across the lower landing page. */
body { background-color: #080406; }
.page-home {
  background-color: #080406;
  background-image:
    radial-gradient(ellipse 68% 14% at 105% 43%, #6a1c2440 0%, transparent 75%),
    radial-gradient(ellipse 72% 11% at -12% 62%, #7b202c38 0%, transparent 76%),
    radial-gradient(ellipse 65% 9% at 95% 82%, #68202c38 0%, transparent 78%),
    linear-gradient(157deg, transparent 43%, #842c3514 45%, #a7434026 45.2%, #55192215 45.6%, transparent 48%),
    linear-gradient(23deg, transparent 65%, #55152112 68%, #a9444821 68.2%, transparent 69.4%),
    linear-gradient(180deg, #120508, #080406 40%, #17080d 72%, #080406);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section-2 {
  padding-top: 1.5rem;
  border-top: 1px solid #8b513039;
}
.section-1 { margin-bottom: 0; }
.latestnews {
  background: linear-gradient(135deg, #220b10ed, #0c070aef 75%);
  box-shadow: inset 0 1px #b77b3c33;
}
.latestnews-header { color: #efdab7; }
.latestnews .list-time { color: #ac8f89; }
.section-4 {
  background: radial-gradient(ellipse 75% 25% at 50% 100%, #68233326, transparent 80%);
}
.footer {
  background: radial-gradient(ellipse at 50% 0, #30101688, transparent 70%), #080406;
  border-top: 1px solid #885c343d;
}
/* User supplied section 4 artwork: retain complete image and lettering. */
.section-4 .swiper .swiper-slide { width:58rem; max-width:82vw; }
.section-4 .swiper .swiper-slide>img { display:block; aspect-ratio:2.2; object-fit:contain; background:#0b080b; }
/* Fine overlapping bronze frames inspired by the supplied MU event artwork. */
.section-4 .swiper .swiper-container { padding:2.5rem 0; }
.section-4 .swiper .swiper-slide { border:1px solid #a16c35; box-shadow:0 0 0 4px #180b0d,0 0 0 5px #95653470,0 8px 25px #0008; }
.section-4 .swiper .swiper-slide::before,
.section-4 .swiper .swiper-slide::after {
  content:''; position:absolute; z-index:2; pointer-events:none;
  background:none; border:1px solid #bb804388; opacity:1;
  inset:-9px -6px; transform:rotate(-1deg);
}
.section-4 .swiper .swiper-slide::after {
  inset:-5px -12px; transform:rotate(1.2deg);
  border-color:#b17c3870; background:none; background-image:none;
}
.section-4 .swiper .swiper-slide-active::after { opacity:1; }
.realm-section { width:80.625rem; max-width:94%; margin:0 auto 1rem; padding:2.4rem 0 1.5rem; border:0; font-family:Beaufort,Georgia,serif; }
.realm-heading { text-align:center; margin-bottom:1.7rem; }
.realm-heading>span { color:#b48a53; font-size:.7rem; letter-spacing:.24em; }
.realm-heading h2 { color:#ecd7b4; font-size:2rem; margin:.55rem 0; }
.realm-heading p { color:#a08b7e; font-size:.95rem; }
.realm-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.realm-card { position:relative; isolation:isolate; min-height:22rem; border:1px solid #9b6a3c99; background:radial-gradient(ellipse at 25% 40%,#3c3a4e60,transparent 65%),linear-gradient(120deg,#151925,#0c0e17 72%); box-shadow:inset 0 0 0 5px #090c13, inset 0 0 0 6px #85623a50; }
.realm-card::before,.realm-card::after { content:''; position:absolute; inset:-4px 3px; border:1px solid #a7783d55; transform:rotate(.7deg); pointer-events:none; z-index:3; }
.realm-card::after { inset:3px -4px; transform:rotate(-.6deg); border-color:#9c6b353f; }
.realm-character { position:absolute; left:0; bottom:0; width:54%; height:105%; object-fit:contain; object-position:center bottom; filter:drop-shadow(5px 0 15px #0008); pointer-events:none; }
.realm-card::marker { display:none; }
.realm-copy { position:relative; z-index:2; width:53%; margin-left:auto; padding:2.5rem 1.7rem 2rem 0; }
.realm-label { color:#b9925e; font-size:.65rem; letter-spacing:.13em; }
.realm-copy h3 { font-family:Beaufort,Georgia,serif; font-size:2.15rem; color:#f0d5a0; margin:.7rem 0 .9rem; white-space:nowrap; }
.realm-rule { display:block; width:5rem; height:1px; background:linear-gradient(90deg,#c8944f,transparent); margin-bottom:1rem; }
.realm-copy p { color:#b8afa0; font-size:.95rem; line-height:1.8; min-height:5.4rem; margin:0 0 1rem; }
.realm-copy button { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.7rem 1.1rem; width:100%; border:1px solid #bd8c4c; background:linear-gradient(#6b4325,#382317); color:#f1d5a3; font:700 .9rem Beaufort,Georgia,serif; cursor:pointer; box-shadow:inset 0 0 0 3px #d9a7571a; transition:filter .2s; }
.realm-copy button:hover,.realm-copy button:focus-visible { filter:brightness(1.2); outline:1px solid #d1a364; outline-offset:3px; }
.realm-copy button span { font-size:1.4rem; line-height:1; }
.realm-index { position:absolute; right:1rem; bottom:.45rem; font:3rem Georgia,serif; color:#d2ad6710; pointer-events:none; }
#sec-rank { scroll-margin-top:5rem; }
@media(max-width:767px) { .realm-grid { grid-template-columns:1fr; gap:1.5rem; } .realm-copy h3 { font-size:2rem; } .realm-card { min-height:23rem; } }
.realm-character { height:100%; width:59%; object-fit:cover; object-position:72% center; mask-image:linear-gradient(90deg,#000 55%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 100%); }
.realm-copy { text-shadow:0 2px 5px #000; }

.multi-device-section { width:80.625rem; max-width:94%; margin:0 auto; padding:2.2rem 0 1rem; border:0; }
.multi-device-section>img { display:block; width:100%; height:auto; filter:drop-shadow(0 15px 20px #0005); }

.multi-device-section { display:grid; grid-template-columns: .8fr 1.5fr; align-items:center; gap:2rem; padding:2rem 0 1rem; }
.multi-device-section>img { width:100%; }
.device-copy { font-family:Beaufort,Georgia,serif; padding-left:1.5rem; }
.device-eyebrow { color:#b38a54; font-size:.72rem; letter-spacing:.2em; }
.device-copy h2 { color:#f0d6a9; font:700 2.5rem/1.25 Beaufort,Georgia,serif; margin:.8rem 0 1rem; }
.device-copy h2>span { color:#e3d7c3; font-size:1.85rem; font-weight:400; }
.device-divider { height:1px; width:7rem; background:linear-gradient(90deg,#b78b4d,transparent); margin:1.2rem 0; }
.device-copy p { color:#bba99a; font-size:1rem; line-height:1.8; margin:0 0 .5rem; }
.device-platforms { display:flex; align-items:center; gap:1rem; margin-top:1.2rem; color:#d4b582; font-size:.75rem; letter-spacing:.12em; }
.device-platforms i { color:#92663b; font-size:.65rem; font-style:normal; }
@media(max-width:767px) { .multi-device-section { grid-template-columns:1fr; gap:1.2rem; } .device-copy { text-align:center; padding:0 1rem; } .device-divider { margin:1rem auto; } .device-platforms { justify-content:center; } .device-copy h2 { font-size:2.2rem; } }
/* Thin bronze separators between hero, device section and account/news. */
.multi-device-section { position:relative; }
.multi-device-section::before,.multi-device-section::after {
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,#9b713749 15%,#c19a597d 50%,#9b713749 85%,transparent);
  pointer-events:none;
}
.multi-device-section::before { top:0; }
.multi-device-section::after { bottom:0; }

.hero-return-title { position:absolute; display:block; width:49%; height:auto; left:50%; bottom:19%; transform:translateX(-50%); pointer-events:none; }
@media(max-width:767px) { .hero-return-title { width:72%; bottom:23%; } }

.hero-return-title { width:46%; bottom:16.5%; }
@media(max-width:767px) { .hero-return-title { width:67%; bottom:21%; } }

.hero-return-title { width:36.8%; }
@media(max-width:767px) { .hero-return-title { width:53.6%; } }

/* Embers stay behind the download controls within the hero stacking context. */
.section-1 { isolation:isolate; }
.hero-embers { position:absolute; inset:auto 0 0; height:29%; overflow:hidden; z-index:0; pointer-events:none; mask-image:linear-gradient(transparent,#000 30%); }
.hero-embers i { position:absolute; bottom:-8px; left:var(--x); width:var(--size); height:var(--size); border-radius:50%; background:#ffbc62; box-shadow:0 0 4px #ff6b25,0 0 8px #ff492255; opacity:0; animation:hero-ember-rise var(--duration) linear var(--delay) infinite; }
.hero-return-title { z-index:1; }
.section-1 .cta { z-index:2; }
@keyframes hero-ember-rise { 0% { opacity:0; transform:translate3d(0,0,0) scale(.5); } 15% { opacity:.7; } 65% { opacity:.4; } 100% { opacity:0; transform:translate3d(var(--drift),-15rem,0) scale(.25); } }
@media(prefers-reduced-motion:reduce) { .hero-embers { display:none; } }

.section-1 button.btn-img { border:0; padding:0; background:transparent; cursor:pointer; }
.section-1 .install-button span { font-size:1.1rem; line-height:1.35; text-align:center; }
.cta-play-video .btn-play-video { cursor:default; }
#app-development-dialog { position:fixed; inset:0; margin:auto; width:min(28rem,90vw); padding:2.5rem 2rem 2rem; background:linear-gradient(135deg,#271014,#0e101b); border:1px solid #b1874c; color:#efdfc1; text-align:center; box-shadow:0 20px 70px #0009; font-family:Beaufort,Georgia,serif; }
#app-development-dialog::backdrop { background:#000b; }
#app-development-dialog h2 { font:700 1.6rem Beaufort,Georgia,serif; margin:0 0 1.5rem; }
.app-popup-close { position:absolute; top:.4rem; right:.7rem; background:none; border:0; color:#cfb88f; font-size:1.6rem; cursor:pointer; }
.app-popup-ok { padding:.65rem 1.8rem; background:linear-gradient(#80532d,#4b2d1b); border:1px solid #bd9152; color:#f6e1b7; font:700 1rem Beaufort,Georgia,serif; cursor:pointer; }

.header { background:linear-gradient(180deg,#0a080ee8,#180a10b3); border-bottom:1px solid #ac804042; backdrop-filter:blur(7px); }
.header>.container { height:4.6rem; }
.header-brand { margin-top:.35rem; }
.header-brand img { width:6.7rem; height:6.7rem; object-fit:contain; filter:drop-shadow(0 3px 9px #0009); }
.header-headroom.headroom--not-top .header-brand img { transform:scale(.72); }
.header-nav { align-items:center; gap:.65rem; }
.header-nav .nav-link { display:flex; align-items:center; gap:.6rem; padding:.65rem 1rem; font:700 .95rem Beaufort,Georgia,serif; color:#e1d0b3; border:1px solid #96704445; background:linear-gradient(135deg,#3d251b50,#11101970); transition:background .2s,color .2s,border-color .2s; }
.header-nav .nav-link:hover,.header-nav .nav-link:focus-visible { color:#fff0cb; border-color:#c99b59; background:#75401d55; }
.header-nav svg { width:1.15rem; height:1.15rem; fill:none; stroke:#c79d5b; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.header-nav .header-download { background:linear-gradient(#78512c,#422919); border-color:#b0854c99; }
#hero-download { scroll-margin-top:7rem; }
@media(max-width:767px) { .header-brand img { width:4.6rem; height:4.6rem; } .header-nav { gap:.3rem; } .header-nav .nav-link { font-size:.8rem; padding:.55rem .5rem; gap:.35rem; } .header-nav svg { width:1rem; height:1rem; } }
/* Header backdrop spans the viewport even beyond the original 1920px limit. */
.header { max-width:none; left:0; right:0; width:100%; }

.ht-footer>.container { display:flex; align-items:center; justify-content:space-between; gap:2rem; font-family:Beaufort,Georgia,serif; color:#b9a58b; }
.ht-footer-brand { display:flex; align-items:center; gap:1rem; color:#e7c997!important; font-size:1.1rem; }
.ht-footer-brand img { width:4rem; height:4rem; object-fit:contain; }
.ht-footer-brand small { display:block; margin-top:.35rem; font-size:.65rem; letter-spacing:.12em; color:#a28e73; }
.ht-footer nav { display:flex; gap:1.7rem; }
.ht-footer nav a { color:#cab393; font-size:1rem; }
.ht-footer nav a:hover { color:#fff0c9; }
@media(max-width:767px) { .ht-footer>.container { flex-direction:column; text-align:center; gap:1.2rem; } }

.footer-introduction { width:58rem; max-width:88%; margin:0 auto 1.8rem; padding:.3rem 0 1.5rem; border-bottom:1px solid #9b713735; text-align:center; font:1rem/1.9 Beaufort,Georgia,serif; color:#b9a58b; }
.footer-introduction p { margin:.25rem 0; }