:root {
  --realm-day: #68cfff;
  --realm-night: #163f69;
  --realm-ice: #ecfbff;
}

[hidden] { display: none !important; }

/* Opening realm choice */
.realm-gate {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding:
    calc(26px + env(safe-area-inset-top))
    calc(22px + env(safe-area-inset-right))
    calc(26px + env(safe-area-inset-bottom))
    calc(22px + env(safe-area-inset-left));
  color: #f7fdff;
  background:
    linear-gradient(180deg, rgba(1, 22, 38, .08), rgba(2, 22, 37, .03) 42%, rgba(1, 13, 24, .28)),
    url("/realms/gate-ambient-desktop.webp") center / cover no-repeat;
  overflow: hidden;
  isolation: isolate;
  transition: opacity .48s cubic-bezier(.55, 0, .9, .45), visibility .48s;
}

.realm-gate::before,
.realm-gate::after {
  content: "";
  position: absolute;
  inset: -16%;
  pointer-events: none;
}

.realm-gate::before {
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(2, 29, 49, .42), transparent 27%),
    radial-gradient(ellipse at 17% 72%, rgba(197, 242, 255, .18), transparent 24%),
    radial-gradient(ellipse at 83% 68%, rgba(44, 139, 190, .18), transparent 25%),
    linear-gradient(90deg, rgba(222, 249, 255, .05), transparent 42%, rgba(1, 9, 17, .12));
  filter: saturate(1.08);
}

.realm-gate::after {
  z-index: -1;
  background: repeating-radial-gradient(circle at 50% 55%, transparent 0 12%, rgba(222, 250, 255, .1) 12.2% 12.34%, transparent 12.58% 18%);
  opacity: .5;
}

.realm-gate.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.realm-gate-inner {
  width: min(1040px, 94vw);
  text-align: center;
}

.realm-gate-kicker {
  margin-bottom: 10px;
  font-family: var(--bingxian-editorial-font);
  font-size: clamp(8px, .68vw, 11px);
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .78;
}

.realm-gate h1 {
  font-family: var(--bingxian-title-font);
  font-size: clamp(42px, 5.6vw, 82px);
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  text-shadow: 0 6px 34px rgba(1, 24, 42, .22);
}

.realm-gate-lead {
  margin-top: 14px;
  font-size: clamp(11px, .92vw, 14px);
  letter-spacing: .14em;
  opacity: .76;
}

.realm-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 18px);
  margin-top: clamp(30px, 5vh, 58px);
}

.realm-option {
  position: relative;
  min-height: clamp(260px, 42vh, 420px);
  padding: clamp(22px, 3vw, 42px);
  text-align: left;
  color: #f7fdff;
  border: 1px solid rgba(237, 251, 255, .5);
  border-radius: clamp(16px, 1.8vw, 26px);
  overflow: hidden;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), border-color .3s, box-shadow .34s, filter .3s;
  background-color: #0a2638;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 28px 78px rgba(1, 23, 40, .25), inset 0 1px 0 rgba(255, 255, 255, .42);
}

.realm-option::before,
.realm-option::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.realm-option::before {
  inset: 0;
  background:
    radial-gradient(circle at 74% 22%, rgba(255, 255, 255, .32), transparent 17%),
    linear-gradient(180deg, rgba(1, 20, 34, .04), rgba(2, 31, 49, .12) 36%, rgba(2, 24, 40, .78) 100%),
    linear-gradient(145deg, rgba(235, 251, 255, .2), transparent 46%);
  box-shadow: inset 0 0 0 1px rgba(246, 253, 255, .12), inset 0 -90px 120px rgba(1, 15, 27, .12);
}

.realm-option::after {
  width: min(38vmin, 330px);
  aspect-ratio: 1;
  right: -12%;
  bottom: -24%;
  border: 1px solid rgba(226, 249, 255, .58);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.74), transparent 7%, transparent 48%, rgba(121, 211, 255, .2) 66%, rgba(248, 254, 255, .62) 73%, transparent 79%);
  opacity: .42;
  transform: scale(.76);
  transition: transform .52s cubic-bezier(.22, 1, .36, 1), opacity .28s;
}

.realm-option[data-realm-choice="day"] {
  background-image: url("/realms/gate-day-desktop.webp");
  background-position: 50% 54%;
}

.realm-option[data-realm-choice="night"] {
  background-image: url("/realms/gate-night-desktop.webp");
  background-position: 54% 54%;
}

.realm-option[data-realm-choice="day"]::before {
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, .3), transparent 18%),
    linear-gradient(180deg, rgba(4, 78, 119, .08), rgba(3, 74, 111, .2) 40%, rgba(2, 43, 69, .84) 100%),
    linear-gradient(135deg, rgba(231, 251, 255, .22), transparent 42%);
}

.realm-option[data-realm-choice="night"]::before {
  background:
    radial-gradient(circle at 67% 22%, rgba(191, 229, 255, .13), transparent 20%),
    linear-gradient(180deg, rgba(1, 9, 17, .06), rgba(2, 15, 27, .24) 42%, rgba(1, 9, 17, .9) 100%),
    linear-gradient(138deg, rgba(146, 210, 245, .11), transparent 44%);
}

.realm-option:hover,
.realm-option:focus-visible {
  transform: translate3d(0, -7px, 0) scale(1.012);
  border-color: rgba(248, 254, 255, .9);
  box-shadow: 0 30px 86px rgba(1, 27, 48, .28), 0 0 42px rgba(155, 225, 255, .18), inset 0 1px 0 rgba(255,255,255,.54);
  outline: none;
}

.realm-option:hover::after,
.realm-option:focus-visible::after {
  opacity: .82;
  transform: scale(1.06);
}

.realm-option small,
.realm-option em,
.realm-option span,
.realm-option strong { position: relative; z-index: 1; display: block; }
.realm-option small { font-size: 9px; letter-spacing: .28em; opacity: .84; text-shadow: 0 2px 12px rgba(1, 17, 29, .72); }
.realm-option strong { margin-top: clamp(42px, 8vh, 82px); font-family: var(--bingxian-title-font); font-size: clamp(30px, 3vw, 48px); font-weight: 400; letter-spacing: .08em; text-shadow: 0 4px 26px rgba(1, 18, 31, .72), 0 1px 2px rgba(1, 16, 28, .58); }
.realm-option em { margin-top: 9px; font-family: var(--bingxian-editorial-font); font-size: 9px; font-style: normal; letter-spacing: .2em; opacity: .82; text-shadow: 0 2px 12px rgba(1, 17, 29, .72); }
.realm-option span { max-width: 27em; margin-top: 24px; font-size: 12px; letter-spacing: .08em; line-height: 1.8; opacity: .9; text-shadow: 0 2px 14px rgba(1, 15, 26, .74); }
.realm-option b { position: absolute; right: clamp(20px, 2.4vw, 34px); bottom: clamp(18px, 2.2vw, 30px); z-index: 2; font-size: 18px; font-weight: 300; }

/* Branch-specific second loading screen */
.site-loader {
  background: #071722;
}

.realm-loader-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  transform: scale(1.015);
  animation: realm-loader-drift 4.8s ease-out both;
}

.site-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 17, 29, .1), transparent 42%, rgba(2, 14, 24, .34));
}

.site-loader-copy {
  position: relative;
  z-index: 2;
  width: min(88vw, 660px);
  text-align: center;
  text-shadow: 0 3px 28px rgba(2, 28, 48, .3);
}

.site-loader-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -54% -18%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(5, 72, 111, .3), rgba(5, 72, 111, .1) 44%, transparent 72%);
  filter: blur(10px);
}

.site-loader-copy small,
.site-loader-copy strong,
.site-loader-copy span { display: block; }
.site-loader-copy small { font-size: 9px; letter-spacing: .34em; opacity: .72; }
.site-loader-copy strong { margin-top: 12px; font-family: var(--bingxian-title-font); font-size: clamp(46px, 6vw, 82px); font-weight: 400; letter-spacing: .12em; line-height: 1; }
.site-loader-copy span { margin-top: 18px; font-size: clamp(10px, .85vw, 13px); letter-spacing: .16em; opacity: .76; }
.site-loader-progress { z-index: 3; }

html[data-realm="day"] .site-loader { color: #0c5781; }
html[data-realm="day"] .site-loader-copy { color: #fbfeff; text-shadow: 0 2px 4px rgba(3, 55, 88, .52), 0 8px 32px rgba(3, 65, 103, .52); }
html[data-realm="day"] .site-loader-copy::before { background: radial-gradient(ellipse at center, rgba(3, 70, 110, .46), rgba(5, 87, 129, .2) 48%, transparent 74%); }
html[data-realm="day"] .site-loader::after { background: linear-gradient(180deg, rgba(8, 83, 124, .12), rgba(11, 96, 139, .08) 42%, rgba(7, 80, 120, .32)); }
html[data-realm="night"] .site-loader-copy { color: #f4fbff; }
html[data-realm="night"] .site-loader::after { background: linear-gradient(180deg, rgba(1, 8, 16, .18), transparent 42%, rgba(1, 8, 16, .5)); }

/* Realm switch and transition veil */
.realm-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 126px;
  min-height: 52px;
  padding: 0 16px 0 10px;
  color: rgba(244, 252, 255, .94);
  border: 1px solid rgba(221, 246, 255, .38);
  border-radius: 14px;
  background: rgba(4, 27, 43, .66);
  box-shadow: 0 12px 32px rgba(1, 17, 29, .24), inset 0 1px 0 rgba(255,255,255,.18);
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.realm-switch:hover,
.realm-switch:focus-visible { color: #fff; border-color: rgba(236, 251, 255, .76); background: rgba(45, 143, 190, .42); transform: translateY(-2px); box-shadow: 0 16px 38px rgba(1, 17, 29, .3), 0 0 26px rgba(151, 226, 255, .2), inset 0 1px 0 rgba(255,255,255,.28); outline: none; }
.realm-switch::after { content: ""; position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #dff8ff; box-shadow: 0 0 10px rgba(145, 224, 255, .88); }
.realm-switch-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; font-size: 15px; line-height: 1; border: 1px solid rgba(226, 248, 255, .34); border-radius: 50%; background: rgba(205, 241, 255, .1); }
.realm-switch-copy { display: grid; gap: 2px; text-align: left; line-height: 1; }
.realm-switch-copy small { font-size: 8px; letter-spacing: .18em; opacity: .72; }
.realm-switch-label { font-family: var(--bingxian-editorial-font); font-size: 13px; letter-spacing: .1em; white-space: nowrap; }
html[data-realm="day"] .realm-switch { background: rgba(4, 79, 117, .68); border-color: rgba(231, 250, 255, .52); }
html[data-realm="night"] .realm-switch { background: rgba(3, 17, 29, .76); }

.chapter-hub-heading h1 { white-space: nowrap; }

.realm-switch-veil {
  position: fixed;
  inset: 0;
  z-index: 10010;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(218, 249, 255, .38), rgba(13, 68, 104, .8) 52%, rgba(2, 14, 24, .98));
}
.realm-switch-veil::before,
.realm-switch-veil::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.12);
}
.realm-switch-veil::before {
  width: min(68vmin, 680px);
  aspect-ratio: 1;
  border: 2px solid rgba(229, 251, 255, .9);
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.9), transparent 7%, rgba(45, 158, 206, .2) 32%, rgba(8, 97, 147, .34) 51%, rgba(70, 190, 235, .62) 68%, rgba(247, 254, 255, .9) 77%, rgba(31, 137, 183, .2) 81%, transparent 83%);
  box-shadow: 0 0 24px rgba(211, 247, 255, .78), 0 0 78px rgba(76, 191, 235, .64), inset 0 0 108px rgba(7, 91, 136, .46), inset 0 0 36px rgba(165, 232, 255, .52);
}
.realm-switch-veil::after {
  width: min(110vmin, 1100px);
  aspect-ratio: 1;
  border: 1px solid rgba(201, 243, 255, .3);
  box-shadow: 0 0 90px rgba(111, 209, 248, .28), inset 0 0 72px rgba(224, 250, 255, .24);
}
body.is-realm-switching .realm-switch-veil { animation: realm-veil .66s cubic-bezier(.22, 1, .36, 1) both; }
body.is-realm-switching .realm-switch-veil::before { animation: realm-bubble-switch .66s cubic-bezier(.22, 1, .36, 1) both; }
body.is-realm-switching .realm-switch-veil::after { animation: realm-frost-switch .66s cubic-bezier(.22, 1, .36, 1) both; }

/* Nocturne branch: carry the moonlit Xuanye landscape through every non-video stage. */
html[data-realm="night"] body {
  background: #071722 url("/realms/gate-night-desktop.webp") center / cover no-repeat;
}

html[data-realm="night"] .experience,
html[data-realm="night"] .media-stage {
  background:
    linear-gradient(180deg, rgba(2, 13, 24, .16), rgba(3, 19, 33, .34)),
    url("/realms/gate-night-desktop.webp") center / cover no-repeat;
}

html[data-realm="night"] .brand-intro,
html[data-realm="night"] .chapter-hub,
html[data-realm="night"] .continuation-end,
html[data-realm="night"] .collection-stage,
html[data-realm="night"] .overview {
  background:
    radial-gradient(circle at 67% 22%, rgba(224, 245, 255, .14), transparent 24%),
    linear-gradient(180deg, rgba(2, 13, 25, .16), rgba(2, 14, 25, .48)),
    url("/realms/gate-night-desktop.webp") center / cover no-repeat;
}

html[data-realm="night"] .site-header {
  background: linear-gradient(180deg, rgba(2, 12, 23, .48), transparent);
}

/* Daylight branch: retain the local sky composition, remove black card framing. */
html[data-realm="day"] body {
  background: #53b9e5;
}

html[data-realm="day"] .experience,
html[data-realm="day"] .media-stage {
  background:
    linear-gradient(180deg, rgba(28, 146, 200, .1), rgba(235, 252, 255, .04)),
    url("/realms/day-sky-desktop.webp") center / cover no-repeat;
}

html[data-realm="day"] .brand-intro,
html[data-realm="day"] .chapter-hub,
html[data-realm="day"] .continuation-end,
html[data-realm="day"] .collection-stage,
html[data-realm="day"] .overview {
  background:
    radial-gradient(circle at 50% 34%, rgba(238, 252, 255, .35), transparent 30%),
    linear-gradient(180deg, rgba(12, 116, 166, .2), rgba(9, 89, 136, .42)),
    url("/realms/day-sky-desktop.webp") center / cover no-repeat;
}

html[data-realm="day"] .site-header {
  background: linear-gradient(180deg, rgba(6, 75, 113, .28), transparent);
}

html[data-realm="day"] .chapter-card,
html[data-realm="day"] .continuation-card,
html[data-realm="day"] .collection-card {
  border-color: rgba(239, 252, 255, .68);
  background: rgba(226, 247, 255, .14);
  box-shadow:
    0 24px 66px rgba(3, 91, 135, .24),
    0 0 0 1px rgba(255, 255, 255, .14) inset,
    0 1px 0 rgba(255, 255, 255, .42) inset;
}

html[data-realm="day"] .chapter-card-media {
  background: linear-gradient(160deg, rgba(224, 248, 255, .13), rgba(15, 124, 174, .24));
}

html[data-realm="day"] .chapter-card-copy {
  background: linear-gradient(180deg, transparent 0, rgba(17, 128, 178, .18) 28%, rgba(4, 79, 119, .9) 100%);
}

html[data-realm="day"] .continuation-card > picture::after {
  background: linear-gradient(180deg, rgba(225, 247, 255, .02), rgba(65, 165, 211, .1) 42%, rgba(5, 82, 124, .7) 100%);
}

html[data-realm="day"] .continuation-card > span,
html[data-realm="day"] .collection-card-copy {
  background: linear-gradient(180deg, transparent, rgba(18, 126, 174, .52) 28%, rgba(4, 75, 115, .92));
}

html[data-realm="day"] .chapter-card:hover,
html[data-realm="day"] .chapter-card:focus-visible,
html[data-realm="day"] .continuation-card:hover,
html[data-realm="day"] .continuation-card:focus-visible,
html[data-realm="day"] .collection-card[data-slot="0"]:hover,
html[data-realm="day"] .collection-card[data-slot="0"]:focus-visible {
  border-color: rgba(255, 255, 255, .94);
  box-shadow: 0 30px 82px rgba(3, 90, 136, .3), 0 0 38px rgba(206, 246, 255, .24), inset 0 1px 0 rgba(255,255,255,.52);
}

html[data-realm="day"] :is(.chapter-card-bubble, .continuation-card-bubble, .chapter-transition-bubble, .portal-bubble) {
  mix-blend-mode: normal;
  filter: saturate(1.42) contrast(1.14) brightness(.74) hue-rotate(-5deg) drop-shadow(0 12px 26px rgba(10, 103, 151, .28));
}

html[data-realm="day"] .chapter-card-glow,
html[data-realm="day"] .collection-card-glint {
  mix-blend-mode: soft-light;
}

html[data-realm="day"] .video-scrim {
  background: linear-gradient(180deg, rgba(3, 14, 23, .52), rgba(3, 14, 23, .05) 34%, transparent 55%, rgba(3, 13, 22, .62));
}

@keyframes realm-loader-drift {
  from { transform: scale(1.035); filter: saturate(.92); }
  to { transform: scale(1.01); filter: saturate(1.04); }
}

@keyframes realm-veil {
  0% { opacity: 0; }
  28%, 78% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes realm-bubble-switch {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
  38% { opacity: .9; transform: translate(-50%, -50%) scale(.94); }
  58% { opacity: .34; transform: translate(-50%, -50%) scale(1.1); clip-path: polygon(4% 14%, 24% 0, 45% 13%, 68% 0, 100% 20%, 87% 48%, 100% 78%, 70% 100%, 46% 85%, 14% 100%, 0 68%, 13% 42%); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.24); }
}

@keyframes realm-frost-switch {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  42% { opacity: .8; }
  100% { opacity: .2; transform: translate(-50%, -50%) scale(1.12); }
}

@media (max-width: 760px) {
  .realm-gate {
    padding: calc(18px + env(safe-area-inset-top)) 8px calc(16px + env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg, rgba(1, 18, 31, .06), rgba(2, 23, 39, .02) 44%, rgba(1, 12, 22, .3)),
      url("/realms/gate-ambient-mobile.webp") center / cover no-repeat;
  }
  .realm-gate-inner { width: 100%; }
  .realm-gate h1 { font-size: clamp(38px, 12vw, 56px); }
  .realm-gate-lead { font-size: 9px; }
  .realm-options { gap: 6px; margin-top: clamp(24px, 4vh, 38px); }
  .realm-option { min-height: clamp(330px, 58dvh, 520px); padding: 20px 13px; border-radius: 13px; }
  .realm-option strong { margin-top: clamp(48px, 10vh, 90px); font-size: clamp(24px, 7.6vw, 34px); line-height: 1.12; }
  .realm-option em { font-size: 6px; letter-spacing: .1em; }
  .realm-option span { margin-top: 18px; font-size: 9px; line-height: 1.65; }
  .realm-option b { right: 14px; bottom: 14px; }
  .realm-option::after { width: 48vw; right: -34%; bottom: -12%; }
  .realm-option[data-realm-choice="day"] { background-image: url("/realms/gate-day-mobile.webp"); background-position: 46% center; }
  .realm-option[data-realm-choice="night"] { background-image: url("/realms/gate-night-mobile.webp"); background-position: 54% center; }
  .site-loader-copy { width: calc(100vw - 32px); transform: translateY(-4dvh); }
  .site-loader-copy::before { inset: -46% -8%; filter: blur(7px); }
  .site-loader-copy strong { font-size: clamp(42px, 14vw, 62px); }
  .site-loader-copy span { font-size: 9px; }
  .realm-switch {
    position: fixed;
    z-index: 72;
    top: calc(67px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    width: auto;
    min-width: 132px;
    height: 54px;
    min-height: 54px;
    justify-content: flex-start;
    padding: 0 12px 0 9px;
    border-radius: 13px;
  }
  .realm-switch-label { display: block; }
  .chapter-hub-heading { top: calc(124px + env(safe-area-inset-top)); }
  .chapter-hub-heading h1 { font-size: clamp(23px, 6.8vw, 32px); letter-spacing: .04em; }
  .collection-card[data-product-index="0"]::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 5.1%;
    left: 10%;
    width: 80%;
    height: 10.8%;
    pointer-events: none;
    background:
      radial-gradient(circle at 88% 12%, rgba(196, 226, 243, .34), transparent 48%),
      linear-gradient(90deg, rgba(14, 54, 86, .94), rgba(52, 105, 145, .9) 56%, rgba(103, 153, 188, .86));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .collection-card[data-product-index="0"]::before {
    content: "冰弦·凌境";
    position: absolute;
    z-index: 2;
    top: 6.15%;
    left: 50%;
    width: 100%;
    pointer-events: none;
    color: rgba(248, 252, 255, .96);
    font-family: var(--bingxian-title-font);
    font-size: clamp(18px, 5.25vw, 24px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(3, 23, 39, .5), 0 0 11px rgba(220, 246, 255, .32);
    transform: translateX(-50%);
  }
  html[data-realm="day"] .experience,
  html[data-realm="day"] .media-stage,
  html[data-realm="day"] .brand-intro,
  html[data-realm="day"] .chapter-hub,
  html[data-realm="day"] .continuation-end,
  html[data-realm="day"] .collection-stage,
  html[data-realm="day"] .overview {
    background:
      radial-gradient(circle at 50% 30%, rgba(238, 252, 255, .28), transparent 28%),
      linear-gradient(180deg, rgba(9, 106, 154, .16), rgba(4, 75, 116, .5)),
      url("/realms/day-sky-mobile.webp") center / cover no-repeat;
  }

  html[data-realm="night"] body,
  html[data-realm="night"] .experience,
  html[data-realm="night"] .media-stage,
  html[data-realm="night"] .brand-intro,
  html[data-realm="night"] .chapter-hub,
  html[data-realm="night"] .continuation-end,
  html[data-realm="night"] .collection-stage,
  html[data-realm="night"] .overview {
    background:
      radial-gradient(circle at 62% 18%, rgba(225, 246, 255, .14), transparent 25%),
      linear-gradient(180deg, rgba(2, 13, 24, .16), rgba(2, 14, 25, .5)),
      url("/realms/gate-night-mobile.webp") center / cover no-repeat;
  }
}

@media (max-width: 760px) and (max-height: 680px) {
  .realm-switch { top: calc(61px + env(safe-area-inset-top)); min-width: 112px; height: 44px; min-height: 44px; }
  .realm-switch-icon { width: 23px; height: 23px; flex-basis: 23px; font-size: 12px; }
  .realm-switch-label { font-size: 10px; }
  .realm-switch-copy small { font-size: 6px; }
  .chapter-hub-heading { top: calc(101px + env(safe-area-inset-top)); }
  .chapter-hub-heading p,
  .chapter-hub-heading > span { display: none; }
  .chapter-hub-heading h1 { font-size: clamp(21px, 6.2vw, 27px); }
}

@media (prefers-reduced-motion: reduce) {
  .realm-option,
  .realm-option::after,
  .realm-gate,
  .realm-loader-image { transition-duration: .2s; animation-duration: .25s !important; }
  body.is-realm-switching .realm-switch-veil,
  body.is-realm-switching .realm-switch-veil::before,
  body.is-realm-switching .realm-switch-veil::after { animation-duration: .25s !important; }
}