:root {
  --blue: #302faa;
  --purple: #7b48df;
  --gold: #c28b4e;
  --ink: #25265e;
  --panel: rgba(255, 255, 255, 0.74);
  --header: 76px;
  --dmm-header-height: 40px;
  --top-scale: 1;
  --top-artboard-scaled-width: 100vw;
  --top-section-height: 100dvh;
  --scaled-content-y-offset: 120px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
  background: #fbfbff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  scroll-padding-top: 0;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  display: block;
  height: var(--anchor-end-spacer, 0px);
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

html[data-site-variant="general"] [data-r18-only],
html[data-site-variant="r18"] [data-general-only] {
  display: none !important;
}

html.is-general .common-age-verification {
  display: none;
}

#dmm_ntgnavi {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100vw;
  height: var(--dmm-header-height);
  min-height: var(--dmm-header-height);
  overflow: hidden;
  transform: translateY(0);
  transition: transform 160ms ease, opacity 160ms ease;
}

#dmm_ntgnavi ul {
  width: auto;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  margin-block: 0;
}

#dmm_ntgnavi li,
#dmm_ntgnavi a,
#dmm_ntgnavi span {
  white-space: nowrap;
}

#dmm_ntgnavi .navi_left {
  flex: 0 1 auto;
}

#dmm_ntgnavi .navi_right {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

body:not(.is-at-top) #dmm_ntgnavi {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  min-height: clamp(46px, calc((var(--header) - 20px) * var(--top-scale)), 56px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 0 clamp(28px, calc(58px * var(--top-scale)), 64px);
  color: rgba(239, 248, 255, 0.97);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 251, 255, 0.48) 46%, rgba(221, 234, 255, 0.34)),
    radial-gradient(120% 220% at 50% -80%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 62%),
    rgba(236, 244, 255, 0.36);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 0;
  box-shadow:
    0 12px 30px rgba(24, 54, 112, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(142, 166, 214, 0.16);
  -webkit-backdrop-filter: saturate(1.9) blur(30px);
  backdrop-filter: saturate(1.9) blur(30px);
  transition: top 160ms ease;
}

.site-brand {
  display: none;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.62);
}

.site-brand span {
  font-size: clamp(17px, calc(23px * var(--top-scale)), 23px);
}

.site-brand small {
  margin-top: clamp(3px, calc(5px * var(--top-scale)), 5px);
  color: #b78a42;
  font-size: clamp(8px, calc(10px * var(--top-scale)), 10px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


.site-nav {
  display: flex;
  justify-content: center;
  gap: 0;
  width: 100%;
}


.site-nav a {
  position: relative;
  flex: 1 1 0;
  display: grid;
  align-items: center;
  min-height: clamp(46px, calc((var(--header) - 20px) * var(--top-scale)), 56px);
  min-width: clamp(104px, calc(158px * var(--top-scale)), 168px);
  padding: 0 clamp(10px, calc(18px * var(--top-scale)), 20px);
  color: rgba(22, 53, 103, 0.97);
  font-size: clamp(15px, calc(18.5px * var(--top-scale)), 20px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.045em;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 0 10px rgba(255, 255, 255, 0.18);
}

.site-nav a::before {
  display: none;
}

.site-nav a:last-child {
  box-shadow: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  bottom: clamp(7px, calc(11px * var(--top-scale)), 11px);
  left: 50%;
  width: 0;
  height: clamp(2px, calc(2px * var(--top-scale)), 2px);
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(121, 222, 255, 0), rgba(139, 241, 255, 0.95), rgba(121, 222, 255, 0));
  box-shadow: 0 0 12px rgba(111, 222, 255, 0.42);
  transition: width 160ms ease;
}


.site-nav a > span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(4px, calc(5px * var(--top-scale)), 6px);
  padding: clamp(8px, calc(10px * var(--top-scale)), 12px) clamp(6px, calc(9px * var(--top-scale)), 10px);
  border: 0;
  border-radius: 0;
}

.site-nav a > span::after {
  content: "";
  color: rgba(35, 72, 127, 0.76);
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(8px, calc(10px * var(--top-scale)), 11px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

.site-nav a:nth-child(1) > span::after {
  content: "TOP";
}

.site-nav a:nth-child(2) > span::after {
  content: "CAMPAIGN";
}

.site-nav a:nth-child(3) > span::after {
  content: "CHARACTER";
}

.site-nav a:nth-child(4) > span::after {
  content: "GAME SYSTEM";
}

.site-nav a:nth-child(5) > span::after {
  content: "MOVIE";
}

.site-nav a:nth-child(6) > span::after {
  content: "WORLD";
}

.site-nav a:nth-child(7) > span::after {
  content: "NEWS";
}

.site-nav a:nth-child(8) > span::after {
  content: "REQUIREMENTS";
}


.site-nav a:hover > span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(190, 224, 255, 0.08)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 18px rgba(138, 204, 255, 0.13);
}

.site-nav a.is-active::after {
  bottom: clamp(3px, calc(7px * var(--top-scale)), 7px);
  width: clamp(72px, calc(108px * var(--top-scale)), 120px);
  height: 3px;
  background: linear-gradient(90deg, rgba(121, 222, 255, 0), rgba(132, 236, 255, 1), rgba(121, 222, 255, 0));
  box-shadow:
    0 0 12px rgba(99, 218, 255, 0.62),
    0 0 22px rgba(132, 236, 255, 0.34);
}

.site-nav a.is-active {
  color: #0f376f;
}

.site-nav a.is-active::before,
.site-nav a:has(+ a.is-active)::before {
  display: none;
}

.site-nav a.is-active > span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(202, 232, 255, 0.12) 48%, rgba(83, 159, 238, 0.1)),
    radial-gradient(130% 130% at 50% 0%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 52%),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.2),
    inset -1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 22px rgba(143, 207, 255, 0.18);
}

body.is-at-top .site-header {
  top: var(--dmm-header-height);
}

body.is-at-top .site-nav {
  justify-content: center;
}

body.is-at-top .site-brand {
  display: none;
}



.section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(82px, 8vh, 118px) clamp(42px, 3.1vw, 68px) clamp(38px, 4vh, 54px);
  background:
    radial-gradient(circle at 10% 8%, rgba(234,218,255,0.7), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(201,232,255,0.8), transparent 32%),
    linear-gradient(110deg, rgba(255,255,255,0.92) 0 28%, rgba(244,244,255,0.76) 52%, rgba(236,247,255,0.9) 100%),
    url("./public/assets/game/bg/background_game_1.webp") center / cover no-repeat;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 4% 54%, rgba(255,137,188,0.28) 0 1.2%, transparent 1.6%),
    radial-gradient(circle at 94% 72%, rgba(255,137,188,0.28) 0 1.4%, transparent 1.8%),
    radial-gradient(circle at 32% 88%, rgba(142,114,255,0.16) 0 1.4%, transparent 1.9%);
  background-size: 360px 300px;
  opacity: 0.8;
}

.section::after {
  display: none;
}

.reward-section {
  background-color: #dff3ff;
  background-image: url("./public/assets/preregister/bg/background_preregister_1.webp");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.reward-section::before,
.reward-section::after {
  display: none;
}

.right-figure-section {
  padding-right: clamp(320px, 25vw, 470px);
}


.section-title {
  position: relative;
  z-index: 2;
  margin: 0 auto clamp(28px, 3.1vh, 46px);
  text-align: center;
  color: var(--blue);
}

.section-title h2 {
  margin: 0;
  font-size: clamp(46px, 4.2vw, 76px);
  line-height: 0.95;
  letter-spacing: 0.08em;
  font-weight: 900;
  background: linear-gradient(90deg, #7a41dc, #1766df);
  -webkit-background-clip: text;
  color: transparent;
}

.section-title small {
  display: block;
  margin-top: 10px;
  color: #c38145;
  font-size: clamp(12px, 0.9vw, 18px);
  font-weight: 800;
  letter-spacing: 0.32em;
}

.section-title p {
  margin: 18px 0 0;
  color: #3030a2;
  font-size: clamp(18px, 1.25vw, 26px);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(54px, 4.2vw, 74px);
  width: min(560px, 40vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(185,119,54,0.72), transparent);
}

.reward-section .section-title {
  margin-bottom: clamp(20px, 2.6vh, 36px);
}

.reward-title-frame,
.reward-subtitle-frame {
  display: block;
  margin: 0 auto;
}

.reward-title-frame {
  width: min(760px, 86vw);
  max-width: 100%;
  aspect-ratio: 1672 / 253;
  }

.reward-subtitle-frame {
  width: min(620px, 70vw);
  max-width: 100%;
  aspect-ratio: 2000 / 750;
  margin-top: -18px;
  }

.reward-title-art {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  filter: none;
}

.reward-subtitle-art {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  filter: none;
}

.reward-section .section-title h2,
.reward-section .section-title small {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.reward-section .section-title p {
  margin: -18px 0 0;
  color: #4a35b2;
  font-size: clamp(19px, 1.35vw, 28px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 8px rgba(255, 255, 255, 0.72);
}

.reward-section .section-title::after {
  display: none;
}


.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  min-height: 62px;
  padding: 0 44px;
  color: #fff;
  -webkit-text-stroke: 1.15px rgba(7, 39, 132, 0.96);
  border: 2px solid rgba(218,169,93,0.78);
  border-radius: 999px;
  background: linear-gradient(135deg, #a462ff, #6654e9 52%, #386cdf);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.42), 0 10px 22px rgba(62,54,177,0.24);
  font-size: clamp(20px, 1.55vw, 30px);
  font-weight: 900;
}

.bottom-note {
  position: relative;
  z-index: 2;
  margin: clamp(22px, 2.2vh, 34px) auto 0;
  color: #3830af;
  text-align: center;
  font-size: clamp(18px, 1.25vw, 26px);
  font-weight: 800;
  letter-spacing: 0.08em;
}


.side-character {
  position: absolute;
  right: clamp(-38px, -1.6vw, -8px);
  bottom: 0;
  z-index: 1;
  width: clamp(280px, 24vw, 460px);
  max-height: 92%;
  object-fit: contain;
  object-position: bottom right;
  opacity: 0.96;
    pointer-events: none;
}

.reward-section .side-character {
  right: clamp(-170px, -7.4vw, -82px);
  bottom: clamp(-340px, -29vh, -250px);
  z-index: 1;
  width: clamp(560px, 39.5vw, 770px);
  max-height: none;
  opacity: 1;
  }

.top-section {
  --top-design-width: 1672;
  --top-design-height: 941;
  --top-scale: 1;
  min-height: 0;
  height: var(--top-section-height);
  padding: 0;
  background: #eaf1ff url("./public/assets/top/bg/background_top_1.webp") center / cover no-repeat;
}

.top-section::after {
  display: none;
}


.top-artboard {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--top-design-width) * 1px);
  height: calc(var(--top-design-height) * 1px);
  transform: translateX(-50%) scale(var(--top-scale));
  transform-origin: top center;
  overflow: hidden;
  container-type: inline-size;
  background: none;
}

.top-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.top-keyvisual-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#top.top-section--video::after,
#top.top-section--video > .top-artboard::after {
  content: none !important;
  display: none !important;
}

.top-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.top-copy::before {
  display: none;
}

.top-logo-link,
.top-main-title-wrap,
.top-button-container {
  position: absolute;
  display: block;
}

.top-logo-link {
  left: 216.3px;
  top: 119px;
  width: 315.05px;
  aspect-ratio: 1129 / 483;
  pointer-events: auto;
}

.top-logo-img,
.top-main-title,
.preregister-button-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

:root[data-site-variant="r18"] .top-logo-link {
  width: 333.66px;
  aspect-ratio: 1619 / 654;
}

.top-main-title-wrap {
  left: 79px;
  top: 269px;
  width: 570px;
  aspect-ratio: 1563 / 520;
}

.top-main-title {
  opacity: 1;
}

.top-button-container {
  left: 115px;
  top: 486px;
  --preregister-button-width: 497px;
}

.preregister-button-container {
  width: var(--preregister-button-width, 497px);
  aspect-ratio: 1822 / 391;
}

.preregister-button-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  overflow: visible;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

.preregister-button-link:hover {
  transform: translateY(-2px);
  }

.preregister-button-link:active {
  transform: translateY(1px) scale(0.985);
  }

.top-button-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(2px, 0.25cqw, 5px);
  color: #fff;
  -webkit-text-stroke: clamp(0.25px, 0.025cqw, 0.5px) rgba(30, 72, 172, 0.5);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif;
  font-size: clamp(26px, 2.1cqw, 40px);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px 1px rgba(19, 58, 148, 0.75),
    0 0 8px rgba(92, 181, 255, 0.62),
    0 0 15px rgba(255, 255, 255, 0.62);
  pointer-events: none;
}

.top-button-text::after {
  content: "登録者数に応じて豪華報酬をプレゼント!";
  display: block;
  font-size: 0.31em;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
  color: #f7fbff;
  -webkit-text-stroke: 0;
  text-shadow:
    0 1px 1px rgba(32, 78, 160, 0.72),
    0 0 7px rgba(115, 199, 255, 0.56);
}

.preregister-button-img {
  pointer-events: none;
}


.dmm-implementation-panel {
  position: absolute;
  left: 21.8%;
  top: 66.8%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: start;
  width: max-content;
  max-width: 30%;
  min-width: 0;
  padding: 13px 22px;
  color: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background: rgba(10, 22, 58, 0.42);
  box-shadow: 0 8px 18px rgba(16, 32, 86, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(5px);
  font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.48);
}

.dmm-implementation-panel span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dmm-implementation-panel span:first-child {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-wrap: normal;
}

.dmm-implementation-panel input {
  width: 15px;
  height: 15px;
  margin: 0 6px 0 0;
  accent-color: #3676ff;
}

.dmm-implementation-panel .site-title-policy-button {
  appearance: none;
  min-width: 0;
  padding: 0;
  color: #ffffff;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-shadow: inherit;
  cursor: pointer;
}

.dmm-implementation-panel label {
  min-width: 0;
  font-weight: inherit;
  overflow-wrap: anywhere;
}

.social-rail {
  position: absolute;
  right: calc(40px / var(--top-scale));
  top: 16%;
  z-index: 5;
  display: grid;
  gap: clamp(18px, 1.32cqw, 26px);
  justify-items: center;
}

.social-link {
  position: relative;
  width: clamp(27px, 1.99cqw, 38px);
  height: clamp(27px, 1.99cqw, 38px);
  display: grid;
  place-items: center;
  color: rgba(66, 54, 159, 0.96);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  opacity: 0.98;
  appearance: none;
  cursor: pointer;
  transition: transform 150ms ease, opacity 150ms ease, filter 150ms ease;
}

.social-link::before {
  display: none;
}

.social-link:hover {
  transform: translateY(-2px);
  opacity: 1;
  }

.social-link-pending {
  opacity: 0.88;
}

.social-link:focus-visible {
  outline: 2px solid rgba(196, 239, 255, 0.9);
  outline-offset: 3px;
}

.social-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

@media (min-width: 2560px) and (min-aspect-ratio: 16 / 10) {
  .top-section {
    height: var(--top-section-height);
  }

  .top-artboard {
    width: calc(var(--top-design-width) * 1px);
    height: calc(var(--top-design-height) * 1px);
    transform: translateX(-50%) scale(var(--top-scale));
  }

  .social-rail {
    right: calc(40px / var(--top-scale));
  }
}


.reward-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  width: min(75vw, 1210px);
}

.reward-card-container {
  position: relative;
  min-width: 0;
}

.reward-card-container > article {
  width: 100%;
  height: 100%;
}

.reward-grid article {
  position: relative;
  aspect-ratio: 1086 / 1738;
  min-height: 0;
  padding: 0;
  border: 0;
  background: url("./public/assets/preregister/ui/ui_frame_reward_card_1.webp") center / 106% 104% no-repeat;
  box-shadow: none;
  text-align: center;
  overflow: hidden;
}


.reward-grid h3 {
  position: absolute;
  top: 5.9%;
  left: 10.5%;
  right: 10.5%;
  height: 12.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.16em;
  margin: 0;
  padding: 0;
  color: #fff;
  -webkit-text-stroke: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(24px, 1.75vw, 37px);
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 2px 3px rgba(42, 34, 128, 0.82),
    0 0 5px rgba(255, 255, 255, 0.88),
    0 0 10px rgba(255, 255, 255, 0.62),
    0 0 12px rgba(94, 74, 210, 0.32);
  white-space: nowrap;
  z-index: 3;
}

.reward-grid h3 span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.reward-grid h3 span:not(.reward-count) {
  color: #fff;
  -webkit-text-stroke: 0;
  font-size: 1em;
  font-weight: inherit;
  transform: none;
}

.reward-count {
  display: inline-flex;
  justify-content: center;
  min-width: 0;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: 0;
  font-size: 1em;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  transform: none;
}


.reward-grid img {
  display: block;
  width: clamp(92px, 8vw, 150px);
  height: clamp(92px, 8vw, 150px);
  margin: 0 auto 18px;
  object-fit: contain;
}

.reward-icon-stage {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 50%;
  height: 31%;
  width: auto;
  margin: 0;
  transform: translateY(-50%);
}

.reward-grid img.reward-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90%, 209px);
  height: min(100%, 209px);
  margin: 0;
  object-fit: contain;
  transform: translate(-50%, -50%);
  }

.reward-grid img.reward-stamp {
  position: absolute;
  left: 50%;
  top: 63%;
  z-index: 8;
  width: clamp(144px, 11.55vw, 222px);
  height: auto;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
  transform-origin: center;
  opacity: 0.95;
  }

.reward-grid img.reward-stamp[hidden] {
  display: none !important;
}


.reward-grid p,
.reward-grid b {
  position: absolute;
  left: 9%;
  right: 9%;
  display: grid;
  place-items: center;
  margin: 0;
  color: #38299f;
  font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif;
  font-size: clamp(25px, 1.67vw, 34px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.96),
    0 0 12px rgba(255,255,255,0.76),
    0 2px 4px rgba(92, 82, 201, 0.14);
}

.reward-grid p {
  top: 70%;
  min-height: 8%;
}

.reward-grid b {
  top: 79%;
  min-height: 7%;
  font-size: clamp(28px, 1.79vw, 37px);
}


.progress-line {
  --reward-progress: 0%;
  position: relative;
  z-index: 2;
  width: min(75vw, 1210px);
  height: 48px;
  margin: 28px 0 34px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 100%;
  column-gap: 12px;
  align-items: center;
  justify-items: center;
  border-top: 0;
}

.progress-line::before,
.progress-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.progress-line::before {
  right: 0;
  background: rgba(232, 214, 255, 0.5);
  border: 1px solid rgba(250, 243, 255, 0.86);
  box-shadow:
    0 0 0 1px rgba(129, 64, 224, 0.34),
    0 0 12px rgba(168, 95, 255, 0.34),
    inset 0 0 8px rgba(108, 45, 210, 0.18);
}

.progress-line::after {
  width: var(--reward-progress);
  background: linear-gradient(90deg, #8b52ff 0%, #9f46ff 48%, #6f35dc 100%);
  border: 1px solid rgba(248, 232, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(111, 42, 195, 0.38),
    0 0 14px rgba(157, 70, 255, 0.46);
}

.progress-line span {
  position: relative;
  z-index: 1;
  width: clamp(51px, 4.65vw, 69px);
  height: clamp(54px, 5.025vw, 75px);
  transform: none;
  border: 0;
  background: url("./public/assets/preregister/icons/ui_icon_progress_diamond_1.webp") center / contain no-repeat;
  }

.progress-line-container {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(75vw, 1210px);
  margin: 28px auto 34px;
}

.progress-line-container .progress-line {
  width: 100%;
  margin: 0 auto;
}

.reward-progress-container,
.reward-bonus-container {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(75vw, 1210px);
  margin-right: auto;
  margin-left: auto;
}

.reward-progress-container {
  margin-top: 28px;
  margin-bottom: 34px;
}

.reward-progress-container .progress-line-container {
  width: 100%;
  margin: 0;
}

.reward-bonus-container .bonus-card {
  width: 100%;
}

.bonus-card {
  position: relative;
  z-index: 2;
  width: min(75vw, 1210px);
  min-height: 150px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 430px;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  border: 1px solid rgba(202,149,82,0.48);
  border-radius: 12px;
  background: rgba(255,255,255,0.74);
}


.bonus-card strong {
  display: grid;
  place-items: center;
  width: 160px;
  height: 120px;
  color: #fff;
  background: linear-gradient(135deg, #7656e8, #45a4ff);
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  font-size: 32px;
  line-height: 1.15;
  text-align: center;
}

.bonus-card p {
  margin: 0;
  color: #8b4bd2;
  font-size: clamp(38px, 3.1vw, 58px);
  font-weight: 900;
}

.bonus-card p span {
  display: block;
  color: #2f33a3;
  font-size: clamp(20px, 1.3vw, 28px);
}

.bonus-silhouettes {
  display: flex;
  justify-content: center;
  gap: 10px;
  opacity: 0.62;
  filter: saturate(0) contrast(1.2);
}

.bonus-silhouettes img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 50%;
}

.bonus-card.bonus-card-art {
  position: relative;
  min-height: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin-top: 18px;
}

.reward-bonus-container .bonus-card.bonus-card-art {
  width: 100%;
  margin-top: 0;
}

.reward-bonus-art {
  display: block;
  width: 100%;
  height: auto;
  }

.reward-bonus-number {
  position: absolute;
  left: 11.2%;
  top: 48%;
  z-index: 2;
  color: #ffffff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(58px, 4.8vw, 92px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 3px 8px rgba(0, 20, 120, 0.48), 0 0 10px rgba(255, 255, 255, 0.55);
  transform: translate(calc(-50% - 35px), calc(-50% - 30px));
  pointer-events: none;
}


.character-section {
  display: grid;
  grid-template-columns: minmax(460px, 40%) minmax(340px, 30%) minmax(380px, 30%);
  grid-template-rows: auto 1fr;
  gap: clamp(16px, 1.45vw, 30px);
  align-items: start;
  padding-top: clamp(84px, 7vh, 102px);
  background:
    radial-gradient(circle at 48% 47%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.12) 31%, transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(239,231,255,0.22)),
    url("./public/assets/character/bg/background_character_1.webp") center / cover no-repeat;
}

.character-section::before {
  display: none;
}

.character-section::after {
  inset: clamp(12px, 1.2vw, 24px);
  border-color: rgba(188, 151, 210, 0.2);
}

.character-section .section-title {
  grid-column: 1 / -1;
  margin-bottom: clamp(-8px, -0.2vw, 0px);
}

.character-title-art {
  display: block;
  width: min(760px, 86vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  }

.character-title-frame,
.character-subtitle-frame {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.character-subtitle-art {
  display: block;
  width: min(620px, 70vw);
  max-width: 100%;
  height: auto;
  margin: -18px auto 0;
  }

.character-section .section-title h2,
.character-section .section-title small,
.character-section .section-title p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.character-section .section-title::after {
  display: none;
}

.character-section .section-title p {
  position: static;
  width: auto;
  height: auto;
  margin: -18px 0 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  color: #4a35b2;
  font-size: clamp(19px, 1.35vw, 28px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 8px rgba(255, 255, 255, 0.72);
}



.character-list {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(11px, 0.78vw, 20px);
  align-self: start;
  margin-top: clamp(10px, 1.2vh, 22px);
  padding-left: clamp(0px, 0.8vw, 20px);
}

.character-card-container {
  position: relative;
  min-width: 0;
}

.character-card-container > .char-card {
  width: 100%;
  height: 100%;
}

.char-card {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  align-content: end;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  --char-name: #1742a0;
  --char-glow: rgba(70, 150, 255, 0.46);
  --char-wash: rgba(225, 241, 255, 0.78);
  --char-card-bg: #d8e6ff;
  min-height: 0;
  aspect-ratio: 889 / 1373;
  padding: 0 6% 4.2%;
  overflow: visible;
  isolation: isolate;
  color: #3329a1;
  border: 1px solid rgba(232, 214, 198, 0.72);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.char-card--empty {
  pointer-events: none;
  cursor: default;
}



.char-card[data-element="fire"] {
  --char-name: #c83a42;
  --char-glow: rgba(238, 82, 104, 0.46);
  --char-wash: rgba(255, 236, 241, 0.82);
  --char-card-bg: #e99a92;
}

.char-card[data-element="water"] {
  --char-name: #1861b8;
  --char-glow: rgba(72, 158, 255, 0.46);
  --char-wash: rgba(225, 245, 255, 0.82);
  --char-card-bg: #8bc8e8;
}

.char-card[data-element="wind"] {
  --char-name: #357a2e;
  --char-glow: rgba(94, 185, 89, 0.42);
  --char-wash: rgba(234, 250, 226, 0.82);
  --char-card-bg: #a7cf8a;
}

.char-card[data-element="light"] {
  --char-name: #b17727;
  --char-glow: rgba(221, 169, 74, 0.4);
  --char-wash: rgba(255, 248, 226, 0.82);
  --char-card-bg: #e7cf83;
}

.char-card[data-element="dark"] {
  --char-name: #6340bd;
  --char-glow: rgba(128, 82, 225, 0.46);
  --char-wash: rgba(238, 232, 255, 0.82);
  --char-card-bg: #b49ae3;
}

.char-card[data-attr="不明"] {
  --char-name: #b17727;
  --char-glow: rgba(128, 114, 218, 0.46);
  --char-wash: rgba(242, 240, 255, 0.82);
  --char-card-bg: #a9c8ea;
}

.char-card.is-active {
  filter: none;
  animation: none;
}

@keyframes char-card-active-glow {
  from {
    filter: none;
  }

  to {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .char-card.is-active {
    animation: none;
  }
}


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

:root {
  --character-card-frame: url("./public/assets/character/ui/ui_frame_character_card_1.webp");
}

.char-card::before {
  display: none;
}

.char-card::after {
  inset: 0;
  z-index: 30;
  background: var(--character-card-frame, url("./public/assets/character/ui/ui_frame_character_card_1.webp")) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  filter: none;
}

.char-card.is-active::before {
  display: block;
  inset: 4px;
  z-index: 60;
  border: 3px solid rgba(225, 72, 255, 0.88);
  border-radius: 14px;
  background: transparent;
  filter: blur(0.8px);
  box-shadow:
    inset 0 0 8px rgba(244, 160, 255, 0.42),
    0 0 10px rgba(225, 72, 255, 0.58),
    0 0 13px 2px rgba(225, 72, 255, 0.38),
    0 0 17px 4px rgba(225, 72, 255, 0.18);
}

.char-card.is-active::after {
  z-index: 30;
  background: var(--character-card-frame, url("./public/assets/character/ui/ui_frame_character_card_1.webp")) center / 100% 100% no-repeat;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}


.char-card .char-portrait {
  position: absolute;
  left: 9.1%;
  top: 8.2%;
  z-index: 40;
  width: 81.7%;
  height: 83.2%;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 34px 0 34px 0;
  filter: saturate(1.03) contrast(1.02);
}

.char-card .char-attr-icon {
  display: none;
}



.char-card span {
  display: none;
}


.character-stage {
  position: relative;
  z-index: 1;
  align-self: start;
  height: clamp(560px, 74vh, 1080px);
  display: grid;
  place-items: center;
}

.character-stage::before {
  content: "";
  display: none;
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: -1;
  width: min(94%, 620px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(116, 88, 196, 0.15);
  background:
    radial-gradient(circle, rgba(255,255,255,0.45) 0 30%, transparent 60%),
    conic-gradient(from 45deg, rgba(112,85,195,0.12), transparent 12%, rgba(48,137,228,0.12), transparent 28%, rgba(112,85,195,0.12));
  opacity: 0.7;
}

.character-stage img {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  }

.character-stage.is-character-switching img,
.character-r18-backdrop.is-character-switching img {
  visibility: hidden;
}

.character-r18-backdrop {
  display: none;
}


.character-panel {
  --panel-accent: #e75286;
  position: relative;
  z-index: 2;
  align-self: start;
  margin-top: clamp(2px, 0.45vh, 10px);
  padding: clamp(20px, 2vw, 36px);
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.character-panel-container {
  position: relative;
  z-index: 2;
}

.character-panel-container > .character-panel {
  width: 100%;
  height: 100%;
}

.character-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--character-panel-frame) center / 100% 100% no-repeat;
  pointer-events: none;
}

.character-panel::after {
  content: none;
}

.character-panel > * {
  position: relative;
  z-index: 2;
}

.character-panel-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 42px;
  transform-origin: top center;
}

:root {
  --character-panel-frame: url("./public/assets/character/ui/ui_frame_character_detail_1.webp");
}

.character-panel[data-element="fire"] {
  --panel-accent: #e75286;
}

.character-panel[data-element="water"] {
  --panel-accent: #2378d5;
}

.character-panel[data-element="wind"] {
  --panel-accent: #4b9951;
}

.character-panel[data-element="light"] {
  --panel-accent: #c48a32;
}

.character-panel[data-element="dark"] {
  --panel-accent: #7047d3;
}

.character-heading {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.character-heading > div {
  width: auto;
  min-width: 0;
}

#active-character-icon {
  position: static;
  flex: 0 0 auto;
  width: clamp(42px, 3vw, 64px);
  height: auto;
  margin-top: -2px;
  transform: none;
}

.character-panel h3 {
  display: inline-block;
  margin: 0;
  color: #24346f;
  font-size: clamp(36px, 2.9vw, 62px);
  line-height: 1;
  letter-spacing: 0.12em;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.96),
    0 0 12px rgba(255,255,255,0.72);
}

.character-panel .cv {
  display: none;
  margin: 6px 0 0;
  color: #2e258f;
  font-size: clamp(15px, 1vw, 20px);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.character-description-box {
  width: 100%;
}

.character-panel p {
  color: #223160;
  font-size: clamp(14px, 0.9vw, 18px);
  line-height: 1.68;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255,255,255,0.78);
}


.chips,
.skill-row {
  display: flex;
  gap: clamp(10px, 0.9vw, 18px);
  flex-wrap: wrap;
  justify-content: center;
  margin: clamp(10px, 0.95vw, 18px) 0;
}

.chips span {
  min-width: clamp(102px, 7.4vw, 138px);
  padding: 7px 18px;
  color: var(--panel-accent);
  border: 1px solid color-mix(in srgb, var(--panel-accent) 62%, white);
  border-radius: 999px;
  text-align: center;
  font-weight: 900;
  background: rgba(255,255,255,0.32);
}

.stars {
  color: #344782;
  font-size: clamp(18px, 1.35vw, 26px);
  letter-spacing: 0.28em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.82);
}

.character-panel dl {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 34px;
  margin: clamp(12px, 1vw, 18px) 0;
  padding: clamp(12px, 0.95vw, 18px);
  border: 0;
  border-top: 1px solid rgba(109, 116, 174, 0.24);
  background: transparent;
}

.character-panel dl::before {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(12px, 0.95vw, 18px);
  bottom: clamp(12px, 0.95vw, 18px);
  width: 1px;
  background: rgba(109, 116, 174, 0.22);
}

.character-panel dl div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  font-size: clamp(13px, 0.78vw, 16px);
  text-align: left;
}

.character-panel dl div:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.character-panel dl div:nth-child(4) {
  grid-column: 1;
  grid-row: 2;
}

.character-panel dt {
  color: #314173;
  font-weight: 900;
  white-space: nowrap;
}

.character-panel dd {
  margin: 0;
  color: #1f2d58;
  font-weight: 700;
  white-space: nowrap;
}

.character-panel h4,
.skill-row {
  display: none;
}

.character-panel h4 {
  margin: 0 0 10px;
  color: #4b37bc;
  font-size: clamp(18px, 1.25vw, 24px);
  letter-spacing: 0.1em;
}

.skill-row span {
  width: clamp(62px, 4.2vw, 86px);
  min-height: auto;
  display: grid;
  gap: 6px;
  place-items: center;
  color: #2a2486;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(11px, 0.72vw, 14px);
  font-weight: 900;
  text-align: center;
}

.skill-row img {
  width: clamp(58px, 4vw, 78px);
  height: clamp(58px, 4vw, 78px);
  object-fit: contain;
  }

.skill-row b {
  display: block;
  color: #26218b;
  font-size: clamp(11px, 0.7vw, 14px);
  line-height: 1.25;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.82);
}


.game-section .section-title {
  margin-bottom: clamp(16px, 2vh, 34px);
}

.game-title-art {
  display: block;
  width: min(820px, 78vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  }

.game-subtitle-art {
  display: block;
  width: min(620px, 70vw);
  max-width: 100%;
  height: auto;
  margin: -18px auto 0;
  }

.game-section .section-title h2,
.game-section .section-title small,
.game-section .section-title p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.game-section .section-title::after {
  display: none;
}

.game-section .section-title p {
  position: static;
  width: auto;
  height: auto;
  margin: -18px 0 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  color: #4a35b2;
  font-size: clamp(19px, 1.35vw, 28px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 8px rgba(255, 255, 255, 0.72);
}


.game-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 480px));
  grid-template-rows: repeat(2, minmax(0, 320px));
  gap: clamp(14px, 1vw, 22px);
  width: min(100%, 982px);
  margin: 0;
}

.game-card-container {
  --game-card-overlay-frame: url("./public/assets/movie/ui/ui_frame_movie_1.png");
  position: relative;
  min-width: 0;
  height: 100%;
}

.game-card-container::after {
  content: "";
  position: absolute;
  inset:
    calc(3.325% - 25px)
    calc(2.625% - 25px)
    calc(2.017% - 25px)
    calc(2.625% - 25px);
  z-index: 5;
  pointer-events: none;
  background: var(--game-card-overlay-frame) center / 100% 100% no-repeat;
}


.game-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  min-height: 0;
  height: 100%;
  padding: clamp(11px, 0.72vw, 16px);
  border: 0;
  background: none;
  overflow: visible;
}

.game-card > * {
  position: relative;
  z-index: 1;
}

.game-card::before {
  content: "";
  position: absolute;
  inset: clamp(7px, 0.65vw, 14px);
  z-index: 4;
  pointer-events: none;
  background: url("./public/assets/game/ui/ui_frame_game_intro_card_1.png") center / 100% 100% no-repeat;
}

.game-card:nth-child(1)::before,
.game-card:nth-child(2)::before,
.game-card:nth-child(3)::before,
.game-card:nth-child(4)::before {
  display: none;
}

.game-card::after {
  display: none;
}

.game-card-container > .game-card {
  width: 100%;
}

.game-card__text {
  position: absolute;
  left: clamp(24px, 1.6vw, 42px);
  top: clamp(32px, 2.35vw, 58px);
  bottom: clamp(32px, 2.35vw, 58px);
  z-index: 3;
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 36%;
  min-width: 0;
  padding: clamp(18px, 1.55vw, 30px) clamp(20px, 1.5vw, 32px);
  overflow: visible;
}

.game-card__text::before {
  display: none;
}


.game-card__image {
  position: absolute;
  inset: 7% 4.8%;
  z-index: 1;
  overflow: hidden;
  border-radius: 0;
  clip-path: none;
  background: transparent;
  box-shadow: none;
}

.game-card b {
  color: #4a37c2;
  font-size: clamp(38px, 3vw, 60px);
  line-height: 0.9;
  text-shadow: 0 2px 0 rgba(255,255,255,0.9);
}

.game-card h3 {
  margin: clamp(8px, 0.8vh, 14px) 0 clamp(12px, 1.4vh, 22px);
  color: #3032a3;
  font-size: clamp(23px, 1.72vw, 34px);
  line-height: 1.18;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(255,255,255,0.88);
}

.game-card p {
  margin: 0;
  color: #1c1f60;
  font-size: clamp(16px, 1.05vw, 21px);
  line-height: 1.72;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.92);
}

.game-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  clip-path: none;
}



.game-section .side-character {
  display: block;
}

.movie-section .section-title {
  margin-bottom: clamp(22px, 2.4vh, 40px);
}

.movie-title-art {
  display: block;
  width: min(980px, 86vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  }

.movie-subtitle-art {
  display: block;
  width: min(620px, 70vw);
  max-width: 100%;
  height: auto;
  margin: -18px auto 0;
  }

.movie-section .section-title h2,
.movie-section .section-title small,
.movie-section .section-title p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.movie-section .section-title::after {
  display: none;
}

.movie-section .section-title p {
  position: static;
  width: auto;
  height: auto;
  margin: -18px 0 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  color: #4a35b2;
  font-size: clamp(19px, 1.35vw, 28px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 8px rgba(255, 255, 255, 0.72);
}


.movie-card {
  position: relative;
  z-index: 2;
  width: min(70vw, 1680px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.movie-frame-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.movie-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: visible;
  isolation: isolate;
}



.movie-player {
  position: absolute;
  left: calc(12% + 70px);
  top: calc(12% + 70px);
  width: calc(76% - 140px);
  height: calc(76% - 140px);
  z-index: 4;
  overflow: hidden;
  background: #050b1e;
  pointer-events: auto;
}

.movie-video-link {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(101, 65, 224, 0.38), transparent 48%),
    linear-gradient(135deg, rgba(22, 31, 85, 0.92), rgba(8, 12, 38, 0.98));
  background-color: #101646;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.movie-video-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.22;
  pointer-events: none;
}

.movie-video-link:hover .movie-play-mark {
  transform: scale(1.08);
}



.movie-play-mark {
  position: relative;
  z-index: 1;
  width: 132px;
  height: 92px;
  border: 0;
  border-radius: 24px;
  background: #ff0000;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  transition: transform 160ms ease;
}

.movie-play-mark::after {
  content: "";
  position: absolute;
  left: 54px;
  top: 28px;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 30px solid #fff;
}



.movie-video-label,
.movie-video-sub {
  display: none;
}

.movie-video-label {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0;
}

.movie-video-sub {
  font-size: 28px;
  font-weight: 800;
}

.movie-frame-art {
  position: absolute;
  left: calc(9.63% + 74px);
  top: calc(2.1% + 88px);
  z-index: 10;
  width: calc(80.79% - 149px);
  height: calc(94.79% - 175px);
  object-fit: fill;
  pointer-events: none;
}



.movie-frame > img:not(.movie-frame-art),
.movie-frame > button,
.movie-card h3,
.movie-card > small {
  display: none;
}

.movie-card h3 {
  margin: 24px 0 8px;
  color: #322eb0;
  font-size: clamp(30px, 2.4vw, 48px);
}

.movie-card small {
  color: #8062d6;
  font-size: 18px;
  letter-spacing: 0.28em;
}

.movie-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 64px);
  background: rgba(5, 12, 34, 0.62);
  backdrop-filter: blur(5px);
}

.movie-lightbox__dialog {
  position: relative;
  width: min(88vw, 960px);
  aspect-ratio: 16 / 9;
  background: #050b1e;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}

.movie-lightbox__close {
  position: absolute;
  right: -14px;
  top: -14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: rgba(16, 22, 70, 0.96);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.movie-lightbox__close:focus-visible {
  outline: 3px solid rgba(121, 201, 255, 0.9);
  outline-offset: 3px;
}

.movie-youtube-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

body.movie-lightbox-open {
  overflow: hidden;
}



.movie-prereg-title {
  position: relative;
  left: 50%;
  z-index: 2;
  display: block;
  width: min(42vw, 1160px);
  max-width: 86%;
  height: auto;
  margin: clamp(20px, 2.2vh, 36px) auto 0;
    transform: translateX(-50%);
}

.world-section {
  min-height: 100dvh;
  padding-top: clamp(72px, 6vh, 104px);
  padding-bottom: clamp(24px, 2.7vh, 44px);
  padding-right: clamp(360px, 24vw, 520px);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0 27%, rgba(255,255,255,0.7) 48%, rgba(246,250,255,0.82) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.38) 36%, rgba(255,255,255,0.84) 100%),
    url("./public/assets/world/bg/background_world_1.webp") center / cover no-repeat;
}

.world-section::before {
  background:
    radial-gradient(circle at 4% 54%, rgba(255,137,188,0.22) 0 1.2%, transparent 1.6%),
    radial-gradient(circle at 92% 72%, rgba(255,137,188,0.22) 0 1.4%, transparent 1.8%),
    radial-gradient(circle at 36% 88%, rgba(142,114,255,0.14) 0 1.4%, transparent 1.9%),
    linear-gradient(90deg, rgba(255,255,255,0.72), transparent 42%);
  background-size: 360px 300px, 360px 300px, 360px 300px, auto;
  opacity: 0.86;
}

.world-section .section-title {
  margin-bottom: clamp(18px, 2.1vh, 32px);
}

.world-title-art {
  display: block;
  width: min(760px, 86vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  }

.world-subtitle-art {
  display: block;
  width: min(620px, 70vw);
  max-width: 100%;
  height: auto;
  margin: -18px auto 0;
  }

.world-section .section-title h2,
.world-section .section-title small,
.world-section .section-title p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.world-section .section-title::after {
  display: none;
}

.world-section .section-title p {
  position: static;
  width: auto;
  height: auto;
  margin: -18px 0 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  color: #4a35b2;
  font-size: clamp(19px, 1.35vw, 28px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 8px rgba(255, 255, 255, 0.72);
}

.world-title-divider {
  display: block;
  width: min(780px, 58vw);
  max-width: 100%;
  height: auto;
  margin: clamp(12px, 1.4vh, 24px) auto 0;
  opacity: 0.82;
}


.world-hero {
  position: relative;
  z-index: 2;
  width: min(1160px, 58vw);
  margin: 0 0 clamp(20px, 2.2vh, 32px);
  padding-left: clamp(12px, 1.35vw, 32px);
}

.world-main-divider {
  display: block;
  width: min(820px, 48vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto clamp(8px, 0.85vh, 14px);
  opacity: 0.84;
}

.world-main-copy {
  display: block;
  width: min(820px, 48vw);
  max-width: 100%;
  height: auto;
  margin: 0 0 clamp(10px, 1vh, 18px);
  }

.world-hero p {
  width: min(820px, 44vw);
  margin: 0;
  transform: translateY(50px);
  color: #24245c;
  font-size: clamp(18px, 1.18vw, 25px);
  line-height: 1.78;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.96),
    0 0 12px rgba(255,255,255,0.76),
    0 2px 4px rgba(23, 34, 112, 0.16);
}

.world-hero p::before {
  content: "";
  display: block;
  width: min(760px, 48vw);
  aspect-ratio: 2609 / 59;
  margin: 0 auto 5px;
  background: url("./public/assets/world/ui/ui_divider_world_1.png") center / contain no-repeat;
  opacity: 0.82;
}


.world-cards {
  position: relative;
  z-index: 2;
  --world-card-gap: clamp(12px, 1.1vw, 22px);
  --world-card-inset: clamp(8px, 0.6vw, 12px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1540px, 86vw);
  gap: var(--world-card-gap);
  margin: 0 0 clamp(10px, 1.4vh, 22px);
}

.world-cards article {
  position: relative;
  z-index: 2;
  min-height: clamp(190px, 17vh, 288px);
  padding: clamp(24px, 2.1vw, 44px) clamp(20px, 1.75vw, 34px);
  border: 0;
  background:
    url("./public/assets/common/vectors/frames/ui_frame_border_gold_1.svg") center / 100% 100% no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0 54%, rgba(255, 255, 255, 0.84) 70%, rgba(255, 255, 255, 0.44) 100%);
  overflow: hidden;
  pointer-events: none;
}

.world-cards article::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 47%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.54;
  filter: saturate(1.02);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 100%);
  pointer-events: none;
}

.world-cards article:nth-of-type(1)::before {
  right: -4%;
  width: 43%;
  background-size: 105% auto;
  background-position: right 16%;
  background-image: none;
  opacity: 0.26;
}

.world-cards article:nth-of-type(2)::before {
  right: -3%;
  width: 51%;
  background-position: 66% center;
  background-image: url("./public/assets/world/cards/world_card_2.webp");
  opacity: 0.44;
}

.world-cards article:nth-of-type(3)::before {
  right: -2%;
  top: 2%;
  width: 42%;
  height: 96%;
  background-size: contain;
  background-image: url("./public/assets/world/cards/world_card_1.webp");
  opacity: 0.68;
  filter: saturate(1.08);
}

.world-cards article:nth-of-type(4)::before {
  right: -3%;
  width: 52%;
  background-position: 62% bottom;
  background-image: url("./public/assets/world/cards/world_card_3.webp");
  opacity: 0.5;
}

.world-card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 583 / 243;
  object-fit: fill;
  pointer-events: none;
}

.world-card-shell {
  position: relative;
  z-index: 2;
  min-width: 0;
  aspect-ratio: 1672 / 941;
  overflow: visible;
}

.world-card-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: url("./public/assets/world/ui/ui_frame_world_card_1.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

.world-card-shell .world-card-image {
  position: absolute;
  left: 2.1%;
  top: 3%;
  z-index: 1;
  width: 95.8%;
  height: 94%;
  object-fit: fill;
}

.world-card-shell::after {
  content: "";
  position: absolute;
  left: 2.1%;
  top: 3%;
  z-index: 2;
  width: 64%;
  height: 94%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.84) 58%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.world-card-number {
  position: absolute;
  left: 3.8%;
  top: 1.9%;
  z-index: 4;
  display: grid;
  width: 140px;
  height: 140px;
  place-items: center;
  background: url("./public/assets/world/ui/ui_badge_world_card_1.png") center / contain no-repeat;
  color: #2f2a82;
  font-family: "Noto Serif JP", serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92);
  pointer-events: none;
}

.world-card-copy {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  color: #32304f;
  font-family: "Noto Serif JP", serif;
  text-align: left;
  pointer-events: none;
}

.world-card-copy h3 {
  position: absolute;
  left: 22.6%;
  top: 12.5%;
  margin: 0 0 clamp(8px, 0.65vw, 14px);
  color: #6f52d2;
  font-size: clamp(26px, 2.35vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9);
}

.world-card-copy p {
  position: absolute;
  left: calc(2.1% + 20px);
  top: 35.5%;
  width: 46%;
  margin: 0;
  color: #34324b;
  font-size: clamp(14px, 1.08vw, 20px);
  font-weight: 600;
  line-height: 1.78;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
}

.world-cards h3 {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.34em;
  max-width: 100%;
  margin: 0 0 clamp(14px, 1.15vh, 22px);
  color: #352db0;
  font-size: clamp(19px, 1.02vw, 26px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.84);
  text-wrap: balance;
}

.world-cards h3::before {
  content: "✦";
  color: #3136c4;
  font-size: 0.82em;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255,255,255,0.92);
}

.world-cards p {
  position: relative;
  z-index: 2;
  max-width: 67%;
  margin: 0;
  color: #4f4f5b;
  font-size: clamp(13px, 0.74vw, 16px);
  line-height: 1.62;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.78);
}

.world-cards article:nth-of-type(4) h3,
.world-cards article:nth-of-type(4) p {
  margin-left: 0;
  max-width: 67%;
}

.world-cards article:nth-of-type(4) h3 {
  font-size: clamp(18px, 0.96vw, 25px);
}

.world-cards article {
  display: none;
}

.world-cards .world-card-copy h3 {
  display: block;
  max-width: none;
  margin: 0 0 clamp(8px, 0.65vw, 14px);
}

.world-cards .world-card-copy h3::before {
  content: none;
}

.world-cards .world-card-copy p {
  max-width: none;
  margin: 0;
}


.world-bottom-text {
  position: relative;
  z-index: 3;
  width: min(1220px, 70vw);
  margin: clamp(2px, 0.65vh, 12px) auto 0;
  color: #3522c7;
  font-size: clamp(22px, 1.45vw, 38px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.92),
    0 0 12px rgba(255,255,255,0.76);
}

.world-bottom-copy {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(36px, 3.9vh, 62px);
  margin: clamp(2px, 0.35vh, 8px) auto 0;
  }

.world-section .side-character {
  width: clamp(320px, 21.8vw, 530px);
  right: clamp(-30px, -1vw, -6px);
  opacity: 0.94;
}

.world-section .world-side-character {
  display: block;
}


.news-section {
  padding-top: clamp(74px, 6.2vh, 108px);
  padding-bottom: clamp(28px, 3vh, 48px);
  padding-right: clamp(340px, 24vw, 520px);
}

.news-section .section-title {
  margin-bottom: clamp(10px, 1.3vh, 22px);
}

.news-title-art {
  display: block;
  width: min(46vw, 1040px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  }

.news-subtitle-art {
  display: block;
  width: min(620px, 70vw);
  max-width: 100%;
  height: auto;
  margin: -18px auto 0;
  }

.news-section .section-title h2,
.news-section .section-title small,
.news-section .section-title p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.news-section .section-title::after {
  display: none;
}

.news-section .section-title p {
  position: static;
  width: auto;
  height: auto;
  margin: -18px 0 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  color: #4a35b2;
  font-size: clamp(19px, 1.35vw, 28px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 8px rgba(255, 255, 255, 0.72);
}

.news-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(76vw, 1620px);
  margin: 0 auto clamp(16px, 1.6vh, 30px);
  border: 1px solid rgba(203, 173, 130, 0.48);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.news-tabs a {
  display: grid;
  min-height: clamp(40px, 4.4vh, 64px);
  place-items: center;
  color: #272084;
  border-right: 1px solid rgba(203, 173, 130, 0.36);
  font-size: clamp(15px, 1vw, 22px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.news-tabs a:last-child {
  border-right: 0;
}

.news-tabs a.is-active {
  color: #fff;
  background: linear-gradient(180deg, #b76af1 0%, #7d5be8 100%);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.45);
}


.news-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(360px, 0.6fr) minmax(0, 1fr);
  gap: clamp(18px, 1.6vw, 34px);
  width: min(88vw, 2600px);
  margin: 0 auto;
  align-items: center;
  place-items: center;
}

.news-layout--cards-and-follow {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
  width: min(92vw, 2600px);
  margin-left: clamp(32px, 7vw, 180px);
  margin-right: auto;
}

.news-main-column {
  display: grid;
  grid-template-rows: clamp(210px, 24vh, 354px) minmax(0, 1fr);
  gap: 0;
  min-width: 0;
}

.news-filter-frame,
.news-frame {
  width: 100%;
}

.news-frame {
  margin-top: -9.5vh;
}

.news-layout-single {
  display: block;
  width: min(68vw, 1320px);
  margin-left: clamp(32px, 7vw, 180px);
  margin-right: auto;
}


.news-filter-frame {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

.news-filter-frame-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  }

.news-frame {
  position: relative;
  width: 100%;
  height: clamp(390px, 53vh, 720px);
  margin: 0;
}

.news-frame-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  }

.news-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(44px, 5.2%, 84px) clamp(52px, 5.8%, 96px);
}


.news-link-window {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: transform 180ms ease, filter 180ms ease;
}

.news-link-window:hover {
  transform: translateY(-4px);
  filter: brightness(1.04);
}

.news-link-window img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  }

.news-link-window-empty {
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 38%, rgba(123, 86, 230, 0.05), transparent 46%),
    rgba(255, 255, 255, 0.24);
}

.news-site-panel {
  width: 100%;
  aspect-ratio: 1100 / 1240;
  overflow: hidden;
  border: 1px solid rgba(101, 92, 170, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 34px rgba(74, 64, 140, 0.14);
}

.news-embed-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}




.news-list {
  list-style: none;
  display: grid;
  gap: 0;
  align-content: stretch;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.news-list li {
  display: grid;
  grid-template-columns: clamp(104px, 7.4vw, 150px) minmax(0, 1fr) clamp(106px, 8.6vw, 164px) clamp(78px, 5.4vw, 112px) clamp(18px, 1.4vw, 28px);
  gap: clamp(12px, 1vw, 22px);
  align-items: center;
  min-height: clamp(58px, 7.4vh, 96px);
  padding: clamp(9px, 0.7vw, 16px) clamp(12px, 1vw, 22px);
  border-bottom: 1px solid rgba(110, 105, 160, 0.18);
}

.news-list time {
  color: #77789b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 0.86vw, 18px);
  font-weight: 900;
  letter-spacing: 0.03em;
}

.news-tag {
  display: inline-grid;
  place-items: center;
  min-height: clamp(30px, 3vh, 42px);
  padding: 0 clamp(12px, 1vw, 18px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.54);
  border-radius: 999px;
  box-shadow: 0 5px 10px rgba(78, 85, 180, 0.13);
  text-align: center;
  font-size: clamp(12px, 0.78vw, 16px);
  font-weight: 900;
}

.news-tag-update {
  background: linear-gradient(90deg, #a95cea, #6f93ef);
}

.news-tag-event {
  background: linear-gradient(90deg, #e7b33f, #e6cc7a);
}

.news-tag-info {
  background: linear-gradient(90deg, #6da5eb, #71b5f0);
}

.news-tag-maintenance {
  background: linear-gradient(90deg, #aeb0ca, #8d8bad);
}

.news-list a {
  color: #292a94;
  font-size: clamp(17px, 1.16vw, 24px);
  font-weight: 900;
  line-height: 1.25;
  text-decoration: none;
}

.news-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 2.25 / 1;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(70, 72, 150, 0.12);
}

.news-arrow {
  color: #5d5f8d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 2vw, 42px);
  line-height: 1;
}


.news-more {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-self: center;
  width: min(42%, 420px);
  min-height: clamp(38px, 4vh, 56px);
  margin-top: clamp(14px, 1.4vh, 24px);
  padding: 0 clamp(22px, 1.8vw, 34px);
  color: #3630ad;
  border: 1px solid rgba(212, 174, 137, 0.62);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  font-size: clamp(14px, 0.9vw, 20px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.news-note-art {
  display: block;
  position: relative;
  z-index: 2;
  width: min(76vw, 1620px);
  max-height: clamp(48px, 7vh, 86px);
  height: auto;
  margin: clamp(20px, 2vh, 34px) auto 0;
  object-fit: contain;
    pointer-events: none;
}

.news-x-column {
  display: grid;
  min-width: 0;
  justify-items: center;
}

.news-x-panel {
  position: relative;
  width: min(100%, 1500px);
  min-height: 0;
  margin-top: 0;
  }

.news-social-guide-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 24px);
  width: 100%;
  transform-origin: center center;
}

.news-social-guide-item {
  display: block;
  width: 100%;
}

.news-social-guide-art {
  display: block;
  width: 100%;
  height: auto;
  align-self: center;
  border-radius: 8px;
}

.news-x-panel-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.news-follow-column {
  display: grid;
  min-width: 0;
  justify-items: center;
}

.news-follow-panel {
  --news-follow-bg-bottom: 23px;
  --news-follow-bg-side: 6px;
  --news-follow-bg-top: 14px;
  --news-follow-chibi-nudge: 20px;
  --news-follow-frame-visual-outset: 30px;
  --news-follow-list-font: 34px;
  position: relative;
  width: min(100%, 920px);
  aspect-ratio: 1000 / 1240;
  min-height: 0;
  background: transparent;
  isolation: isolate;
  overflow: visible;
  transform: translateY(-50px);
}

.news-follow-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #ffffff;
  pointer-events: none;
}

.news-follow-frame {
  position: absolute;
  inset: calc(-1 * var(--news-follow-frame-visual-outset));
  z-index: 1;
  width: calc(100% + (var(--news-follow-frame-visual-outset) * 2));
  height: calc(100% + (var(--news-follow-frame-visual-outset) * 2));
  object-fit: fill;
  pointer-events: none;
  opacity: 0.96;
  }

.news-follow-x-container {
  position: absolute;
  left: 50%;
  top: 7%;
  z-index: 2;
  display: block;
  width: 84.15%;
  aspect-ratio: 1402 / 1122;
  color: #ffffff;
  text-decoration: none;
  transform: translateX(-50%);
}

.news-follow-link-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.news-follow-x-account {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  width: 56%;
  color: #fff8df;
  font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(20px, 3.05vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
}

.news-follow-list {
  display: grid;
  gap: 1.05em;
  margin: 0;
  padding: 0;
  color: #a6612f;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif;
  font-size: var(--news-follow-list-font);
  font-weight: 800;
  line-height: 1.1;
  list-style: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.news-follow-text-container {
  position: absolute;
  left: calc(8% - 10px);
  bottom: calc(3% + var(--news-follow-text-lift, 30px));
  z-index: 2;
}

.news-follow-list li {
  position: relative;
  padding-left: 1.35em;
}

.news-follow-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
  color: #6257df;
  font-size: 0.7em;
  line-height: 1.35;
}

.news-follow-chibi-container {
  position: absolute;
  right: calc(2.5% - var(--news-follow-chibi-nudge));
  bottom: calc(4% - var(--news-follow-chibi-nudge));
  z-index: 3;
  width: 50.16%;
}

.news-follow-chibi {
  display: block;
  width: 100%;
  height: auto;
    pointer-events: none;
}


.news-x-content {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  place-items: center;
  align-content: center;
  gap: clamp(10px, 1.1vh, 18px);
  padding: clamp(34px, 3.5vw, 70px) clamp(22px, 2.6vw, 48px);
  color: #30279b;
  text-align: center;
}

.news-x-main-stage {
  position: absolute;
  left: 50%;
  top: clamp(34px, 3.5vw, 70px);
  z-index: 1;
  display: block;
  width: min(86%, 520px);
  max-height: clamp(220px, 30vh, 390px);
  transform: translateX(-50%);
}

.news-x-main-art {
  display: block;
  width: 100%;
  max-height: inherit;
  height: auto;
  object-fit: contain;
  transform: translateY(-20px) scale(1.35);
  transform-origin: center center;
  }

.news-x-info {
  display: contents;
  width: min(88%, 560px);
  margin-top: clamp(12px, 1.5vh, 28px);
}

.news-x-topics {
  position: absolute;
  left: clamp(42px, 5vw, 90px);
  bottom: clamp(44px, 5vw, 94px);
  z-index: 2;
  display: grid;
  gap: clamp(8px, 1vh, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
  color: #a8642d;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(21px, 1.76vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255,255,255,0.92);
  white-space: nowrap;
}

.news-x-topics li {
  position: relative;
  padding-left: 1.25em;
}

.news-x-topics li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: #5c63df;
  font-family: serif;
}

.news-x-chibi-stage {
  position: absolute;
  right: clamp(26px, 4.2vw, 74px);
  bottom: clamp(36px, 4.8vw, 86px);
  z-index: 2;
  display: block;
  width: clamp(100px, 11vw, 164px);
  max-height: clamp(118px, 14vw, 210px);
}

.news-x-chibi {
  display: block;
  width: 100%;
  max-height: inherit;
  object-fit: contain;
  transform: scale(1.5);
  transform-origin: right bottom;
  }

.news-x-content p {
  margin: 0;
  font-size: clamp(19px, 1.55vw, 34px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.92);
}

.news-x-content strong {
  color: #5b32d2;
  font-size: 1.22em;
}

.news-x-content em {
  color: #9b5a1e;
  font-style: normal;
}

.news-x-mark {
  display: grid;
  width: clamp(70px, 5.2vw, 108px);
  aspect-ratio: 1;
  place-items: center;
  color: #fff;
  border-radius: 999px;
  background: #050505;
  box-shadow: 0 10px 18px rgba(53, 45, 120, 0.18);
  font-family: Arial, sans-serif;
  font-size: clamp(36px, 3vw, 62px);
  line-height: 1;
}

.news-x-content b {
  min-width: min(82%, 360px);
  padding: clamp(8px, 0.8vh, 14px) clamp(18px, 1.6vw, 32px);
  color: #fff;
  background: linear-gradient(90deg, #7a54e9, #5e9aec);
  border: 2px solid rgba(255,255,255,0.62);
  border-radius: 8px;
  box-shadow: inset 0 0 16px rgba(255,255,255,0.34), 0 8px 14px rgba(82, 82, 190, 0.16);
  font-size: clamp(16px, 1.08vw, 24px);
  line-height: 1;
  letter-spacing: 0.02em;
}

.news-x-content small {
  color: #2d2a9d;
  font-size: clamp(12px, 0.85vw, 18px);
  font-weight: 900;
  letter-spacing: 0.06em;
}


.news-card-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 0.8vw, 14px);
  width: 100%;
}

.news-card-links a {
  display: grid;
  place-items: center;
  min-width: 0;
  height: clamp(136px, 15vw, 300px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.news-card-links img {
  display: block;
  width: 100%;
  height: clamp(136px, 15vw, 300px);
  max-height: 100%;
  object-fit: contain;
}


.news-x-button {
  display: block;
  position: relative;
  width: min(84%, 380px);
  height: clamp(42px, 4.2vh, 60px);
  overflow: hidden;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}

.news-x-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.news-x-button img {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}

.news-section .side-character {
  display: none;
  width: clamp(320px, 22vw, 500px);
  right: clamp(-32px, -1vw, -8px);
  opacity: 0.94;
}


.requirements-section {
  padding-right: clamp(360px, 24vw, 760px);
}

.requirements-section .section-title {
  margin-bottom: clamp(12px, 1.5vh, 24px);
}

.requirements-title-art {
  display: block;
  width: min(44vw, 780px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  }

.requirements-subtitle-art {
  display: block;
  width: min(620px, 70vw);
  max-width: 100%;
  height: auto;
  margin: -18px auto 0;
  }

.requirements-section .section-title h2,
.requirements-section .section-title small,
.requirements-section .section-title p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.requirements-section .section-title::after {
  display: none;
}

.requirements-section .section-title p {
  position: static;
  width: auto;
  height: auto;
  margin: -18px 0 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  color: #4a35b2;
  font-size: clamp(19px, 1.35vw, 28px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 8px rgba(255, 255, 255, 0.72);
}

.requirements-section .side-character {
  right: clamp(-90px, -3vw, -36px);
  width: clamp(340px, 23vw, 520px);
  max-height: 90%;
}


.requirements-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 0.8vw, 18px);
  width: min(100%, 1180px);
  margin: 0 auto;
}

.requirements-top-container {
  display: contents;
}

.requirements-card {
  --requirements-frame-image: url("./public/assets/requirements/ui/ui_frame_requirements_card_1.webp");
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(310px, 42vh, 470px);
  padding: clamp(26px, 2.25vw, 42px) clamp(18px, 1.45vw, 28px);
  color: #5d55d9;
  background: none;
  box-sizing: border-box;
  overflow: hidden;
  filter: none;
}

.requirements-card > * {
  position: relative;
  z-index: 1;
}

.requirements-card:hover {
  transform: none;
  filter: none;
}

.requirements-card-head {
  display: grid;
  grid-template-columns: clamp(40px, 3.1vw, 58px) minmax(0, 1fr);
  gap: clamp(8px, 0.65vw, 12px);
  align-items: center;
  min-height: clamp(48px, 4.4vw, 72px);
  margin-bottom: clamp(18px, 1.6vw, 30px);
}

.requirements-platform-icon {
  display: block;
  width: 100%;
  height: auto;
  color: #8b82ef;
  }

.requirements-card h3 {
  margin: 0;
  color: #6b61dd;
  font-size: clamp(16px, 1.08vw, 22px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.88);
}

.requirements-pill {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(30px, 2.2vw, 44px);
  margin: 0 0 clamp(12px, 1vw, 18px);
  color: #ffffff;
  font-size: clamp(13px, 0.86vw, 18px);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(29, 23, 105, 0.45);
}

.requirements-pill img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.requirements-pill span {
  position: relative;
  z-index: 1;
}

.requirements-specs {
  display: grid;
  gap: 0;
  margin: 0;
  color: #5e57c9;
  font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif;
  font-size: clamp(9px, 0.62vw, 13px);
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.96),
    0 0 12px rgba(255,255,255,0.76),
    0 2px 4px rgba(92, 82, 201, 0.14);
}

.requirements-specs div {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(4px, 0.35vw, 8px);
  min-height: clamp(42px, 3.5vw, 62px);
  padding: clamp(8px, 0.65vw, 14px) 0;
  background: transparent;
}

.requirements-specs dt,
.requirements-specs dd {
  display: flex;
  align-items: center;
  margin: 0;
  font: inherit;
}

.requirements-specs dt {
  color: #7770e8;
  white-space: nowrap;
}

.requirements-specs dt::before {
  content: "✥";
  margin-right: 0.35em;
  color: #7770e8;
  font-size: 0.9em;
}

.requirements-specs dd {
  color: #5e57c9;
  white-space: nowrap;
}

.requirements-bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(12px, 0.95vw, 20px);
  width: min(100%, 1180px);
  margin: clamp(14px, 1.5vh, 24px) auto 0;
}

.requirements-bottom-container {
  display: contents;
}

.requirements-environment,
.requirements-x-panel {
  --requirements-frame-image: url("./public/assets/requirements/ui/ui_frame_requirements_bottom_1.webp");
  position: relative;
  margin: 0;
  min-height: clamp(156px, 17vh, 230px);
  overflow: hidden;
  box-sizing: border-box;
  isolation: isolate;
}

.requirements-environment::before,
.requirements-x-panel::before {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--requirements-frame-image) center / 100% 100% no-repeat;
  pointer-events: none;
}

.requirements-environment {
  border-radius: 8px;
  filter: none;
}

.requirements-x-panel {
  border-radius: 0;
  filter: none;
  overflow: visible;
}

.requirements-env-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  height: 100%;
  padding: clamp(22px, 1.7vw, 34px) clamp(30px, 2.2vw, 48px);
  text-align: center;
}

.requirements-env-content h3 {
  margin: 0 0 clamp(18px, 1.4vw, 28px);
  color: #6b61dd;
  font-size: clamp(20px, 1.6vw, 34px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.88);
}

.requirements-env-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 22px);
  align-items: center;
}

.requirements-env-options span {
  display: grid;
  grid-template-rows: clamp(42px, 3.5vw, 70px) auto;
  gap: clamp(8px, 0.7vw, 14px);
  place-items: center;
  color: #6b61dd;
  font-size: clamp(13px, 0.95vw, 20px);
  font-weight: 900;
  white-space: nowrap;
}

.requirements-env-options img {
  display: block;
  width: auto;
  height: 100%;
  color: #8b82ef;
}

.requirements-x-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vh, 16px);
  height: 100%;
  padding: clamp(20px, 1.8vw, 34px) clamp(28px, 2.4vw, 48px);
  text-align: center;
}

.requirements-x-content p {
  margin: 0;
  color: #6b61dd;
  font-size: clamp(15px, 1vw, 22px);
  font-weight: 900;
  line-height: 1.42;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.requirements-x-content strong {
  font-family: Georgia, "Times New Roman", "Noto Serif JP", serif;
  font-size: 1.12em;
  font-weight: 900;
}

.requirements-x-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 0.95vw, 18px);
  position: relative;
  width: min(92%, 420px);
  height: clamp(54px, 5.8vw, 80px);
  margin: 0 auto;
  padding: 0 clamp(26px, 2.8vw, 44px);
  color: #ffffff;
  font-size: clamp(17px, 1.15vw, 25px);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  background: linear-gradient(90deg, #7e67e9 0%, #6659d8 48%, #5a63dd 100%);
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(61, 57, 160, 0.18);
  overflow: hidden;
}

.requirements-x-button:hover {
  transform: none;
  filter: none;
}

.requirements-x-button span {
  white-space: nowrap;
}

.requirements-x-button .requirements-x-icon {
  display: block;
  position: static;
  width: clamp(26px, 2vw, 40px);
  height: auto;
  transform: none;
  flex: 0 0 auto;
}

.game-section,
.movie-section,
.world-section,
.news-section,
.requirements-section {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.game-section::before,
.game-section::after,
.movie-section::before,
.movie-section::after,
.world-section::before,
.world-section::after,
.news-section::before,
.news-section::after,
.requirements-section::before,
.requirements-section::after {
  display: none;
}

.game-section {
  background-image: url("./public/assets/game/bg/background_game_1.webp");
}

.movie-section {
  background-image: url("./public/assets/movie/bg/background_movie_1.webp");
}

.world-section {
  background-image: url("./public/assets/world/bg/background_world_1.webp");
}

.news-section {
  background-image: url("./public/assets/news/bg/background_news_1.webp");
}

.requirements-section {
  background-image: url("./public/assets/requirements/bg/background_requirements_1.webp");
}


.site-footer {
  padding: 0 22px 26px;
  background: #fff;
  border-top: 1px solid rgba(31,67,120,0.18);
  text-align: center;
}

.footer-preregister-cta {
  display: flex;
  justify-content: center;
  margin: 0 auto 30px;
}

.footer-preregister-button-container {
  --preregister-button-width: min(calc(497px * var(--top-scale, 1)), calc(100vw - 44px));
}

.footer-preregister-button {
  display: block;
  width: 100%;
  height: 100%;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  color: #13295b;
  font-size: 14px;
  font-weight: 900;
}

.footer-legal-button {
  appearance: none;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-decoration: underline;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.footer-legal-button:hover {
  color: #6659d8;
}

.footer-link-disabled {
  color: rgba(19, 41, 91, 0.46);
  cursor: default;
}

.site-footer p {
  margin: 24px 0 12px;
  color: #19386d;
  font-size: 20px;
  font-weight: 900;
}

.site-footer small {
  color: #8b96ad;
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 28px;
}

.legal-modal.is-open {
  display: grid;
}

.legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 42, 0.58);
}

.legal-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: min(82vh, 880px);
  background: rgba(255, 255, 255, 0.98);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(26, 31, 72, 0.28);
  overflow: visible;
}

.legal-modal__close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  background: #050505;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.legal-modal__body {
  max-height: min(82vh, 880px);
  padding: 28px 38px 32px;
  color: #111111;
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
  line-height: 1.45;
  text-align: left;
  overflow-y: auto;
}

.legal-modal__body h2 {
  margin: 0 0 24px;
  color: #111111;
  font-size: 20px;
  font-weight: 500;
  text-align: left;
}

.legal-modal__body h3 {
  margin: 20px 0 6px;
  color: #111111;
  font-size: 18px;
  font-weight: 500;
}

.legal-modal__body p,
.legal-modal__list {
  margin: 0 0 10px;
  font-size: 18px;
}

.legal-modal__list {
  padding-left: 1.8em;
}

.legal-modal__list li {
  margin-bottom: 8px;
}

.legal-modal__definition-list {
  display: block;
  margin: 0;
}

.legal-modal__definition-list div {
  display: block;
  padding-bottom: 10px;
  border-bottom: 0;
}

.legal-modal__definition-list dt,
.legal-modal__definition-list dd {
  margin: 0;
  color: #111111;
  font-size: 18px;
}

.legal-modal__definition-list dt {
  font-weight: 500;
}

.legal-modal__definition-list dt::before {
  content: "・";
}

body.legal-modal-open {
  overflow: hidden;
}


.scaled-section {
  width: 100vw !important;
  height: var(--section-height, 100dvh) !important;
  min-height: var(--section-height, 100dvh) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(226, 232, 255, 0.94), rgba(241, 242, 255, 0.98) 18%, rgba(241, 242, 255, 0.98) 82%, rgba(226, 232, 255, 0.94)),
    #eef2ff !important;
}

.scaled-section::before,
.scaled-section::after {
  display: none !important;
}

.scaled-section > .section-canvas {
  position: absolute !important;
  left: 50%;
  top: 0;
  width: 3840px !important;
  height: 2160px !important;
  min-height: 2160px !important;
  max-width: none !important;
  transform: translateX(-50%) scale(var(--section-scale, 1));
  transform-origin: top center;
  overflow: hidden !important;
}

.scaled-section > .section-canvas > * {
  translate: 0 var(--scaled-content-y-offset);
}

.scaled-section > .section-canvas > .section-title {
  translate: 0 calc(var(--scaled-content-y-offset) + 10px) !important;
}

.scaled-section > .section-canvas::before,
.scaled-section > .section-canvas::after {
  display: none !important;
}

.scaled-section > .section-canvas .side-character {
  display: block !important;
}

  #preregister.scaled-section {
    position: relative !important;
    z-index: 6 !important;
  }

  .scaled-section > .section-canvas.reward-section {
    --reward-stack-width: 2208px;
    --reward-stack-top: calc(132px + 80px);
    padding: 132px 138px 138px !important;
    padding-right: 1040px !important;
  }

  .scaled-section > .section-canvas.reward-section .section-title {
    position: absolute !important;
    z-index: 80 !important;
    left: 50% !important;
    top: 152px !important;
    width: 3564px !important;
    max-width: none !important;
    margin: 0 !important;
    translate: none !important;
    transform: translateX(-50%) !important;
  }

  .scaled-section > .section-canvas .section-title-main--reward,
  .scaled-section > .section-canvas .section-title-subtitle--reward {
    position: absolute !important;
    z-index: 81 !important;
    left: 50% !important;
    top: 0 !important;
    display: block !important;
    width: auto !important;
    height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
  }

  .scaled-section > .section-canvas .section-title-main.section-title-main--reward {
    width: 1400px !important;
    height: 154px !important;
  }

  .scaled-section > .section-canvas .section-title-subtitle.section-title-subtitle--reward {
    width: 1306px !important;
    height: 47px !important;
  }

  .scaled-section > .section-canvas .reward-title-frame {
    position: relative !important;
    z-index: 82 !important;
    left: auto !important;
    top: 0 !important;
    display: block !important;
    width: 1400px !important;
    height: 154px !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .reward-title-art {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 1672px !important;
    height: 253px !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    translate: none !important;
    transform: translate(-50%, -50%) scale(0.6) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas.reward-section .section-title p {
    margin-top: 30px !important;
    font-size: 42px !important;
  }

  .scaled-section > .section-canvas .reward-subtitle-frame {
    position: relative !important;
    z-index: 82 !important;
    left: auto !important;
    top: 164px !important;
    display: block !important;
    width: 1306px !important;
    height: 47px !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .reward-subtitle-art {
    width: 1500px !important;
    height: 563px !important;
    max-width: none !important;
    object-fit: fill !important;
    object-position: initial !important;
    margin-top: 0 !important;
    translate: -97px -255px !important;
    transform: none !important;
    transform-origin: top left !important;
  }

  .scaled-section > .section-canvas .reward-content-stack,
  .scaled-section > .section-canvas .reward-grid,
  .scaled-section > .section-canvas .reward-progress-container,
  .scaled-section > .section-canvas .progress-line-container,
  .scaled-section > .section-canvas .reward-bonus-container {
    width: var(--reward-stack-width) !important;
  }

  .scaled-section > .section-canvas .bonus-card {
    width: 2760px !important;
  }

  .scaled-section > .section-canvas .reward-content-stack {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 58px !important;
    margin: 200px 0 0 0 !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .reward-grid {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .reward-grid h3 {
    font-size: 53px !important;
  }

  .scaled-section > .section-canvas .reward-grid article {
    padding: 0 !important;
    background-size: 106% 104% !important;
  }

  .scaled-section > .section-canvas .reward-grid article:nth-child(1) {
    transform: none !important;
  }

  .scaled-section > .section-canvas .reward-grid article:nth-child(2) {
    transform: none !important;
  }

  .scaled-section > .section-canvas .reward-grid article:nth-child(3) {
    transform: none !important;
  }

  .scaled-section > .section-canvas .reward-grid article:nth-child(4) {
    transform: none !important;
  }

  .scaled-section > .section-canvas .reward-icon-stage {
    left: 11% !important;
    right: 11% !important;
    top: 49% !important;
    width: auto !important;
    height: 38% !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  .scaled-section > .section-canvas .reward-grid img.reward-icon {
    left: 50% !important;
    top: 50% !important;
    width: min(104%, 286px) !important;
    height: min(108%, 286px) !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
  }

  .scaled-section > .section-canvas .reward-grid img.reward-stamp {
    left: 50% !important;
    top: 50% !important;
    width: 184px !important;
    transform: translate(-50%, -50%) rotate(10deg) !important;
  }

  .scaled-section > .section-canvas .reward-grid p {
    position: absolute !important;
    left: 9% !important;
    right: 9% !important;
    top: 70% !important;
    min-height: 8% !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    font-size: 36px !important;
    text-align: center !important;
  }

  .scaled-section > .section-canvas .reward-grid b {
    position: absolute !important;
    left: 9% !important;
    right: 9% !important;
    top: 79% !important;
    min-height: 7% !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    font-size: 39px !important;
    text-align: center !important;
  }


  .scaled-section > .section-canvas .reward-progress-container {
    width: 100% !important;
    margin: 0 !important;
    place-items: center !important;
  }

  .scaled-section > .section-canvas .progress-line-container {
    width: 100% !important;
    margin: 0 !important;
    place-items: center !important;
  }

  .scaled-section > .section-canvas .progress-line {
    height: 64px !important;
    width: 100% !important;
    margin: 0 auto !important;
    column-gap: 4px !important;
  }

  .scaled-section > .section-canvas .bonus-card.bonus-card-art {
    width: 100% !important;
    height: 430px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  .scaled-section > .section-canvas .reward-bonus-container {
    width: 100% !important;
    margin: 0 !important;
  }

  .scaled-section > .section-canvas .bonus-card.bonus-card-art .reward-bonus-art {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .scaled-section > .section-canvas .bonus-card.bonus-card-art .reward-bonus-number {
    left: 11.2% !important;
    top: 48% !important;
    font-size: 108px !important;
    transform: translate(calc(-50% - 35px), calc(-50% - 30px)) !important;
  }

  .scaled-section > .section-canvas.reward-section .side-character {
    display: block !important;
    right: -220px !important;
    bottom: -800px !important;
    width: 2310px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: bottom right !important;
  }


  .scaled-section > .section-canvas.character-section {
    display: block !important;
    min-height: 2160px !important;
    padding: 0 !important;
  }

  .scaled-section > .section-canvas.character-section .section-title {
    position: absolute !important;
    left: 138px !important;
    top: 2px !important;
    width: 3564px !important;
    max-width: none !important;
    margin: 0 0 12px 0 !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .character-title-art {
    width: 1240px !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: center center !important;
    translate: 0 -50px !important;
    transform: scale(0.7) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .character-title-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .scaled-section > .section-canvas .character-subtitle-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .scaled-section > .section-canvas .character-subtitle-art {
    width: var(--subtitle-source-width) !important;
    max-width: none !important;
    height: var(--subtitle-source-height) !important;
    margin: 0 !important;
    object-fit: fill !important;
    object-position: initial !important;
    translate: var(--subtitle-source-x) var(--subtitle-source-y) !important;
    transform: none !important;
    transform-origin: top left !important;
  }

  .scaled-section > .section-canvas.character-section .section-title p {
    margin-top: 30px !important;
    font-size: 42px !important;
  }

  .scaled-section > .section-canvas .character-list {
    position: absolute !important;
    z-index: 4 !important;
    left: 200px !important;
    top: 288px !important;
    grid-template-columns: repeat(3, 254px) !important;
    gap: 10px !important;
    width: 782px !important;
    margin: 0 !important;
    padding: 0 !important;
    order: initial !important;
    transform: scale(1.1) !important;
    transform-origin: top left !important;
  }

  .scaled-section > .section-canvas .char-card {
    width: 254px !important;
    height: 392px !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    align-content: end !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 10px !important;
    padding: 0 16px 16px !important;
  }

  .scaled-section > .section-canvas .character-card-container {
    position: relative !important;
    width: 254px !important;
    height: 392px !important;
    min-width: 0 !important;
  }

  .scaled-section > .section-canvas .character-card-container > .char-card {
    width: 100% !important;
    height: 100% !important;
  }

  .scaled-section > .section-canvas .char-card .char-portrait {
    left: 24px !important;
    top: 32px !important;
    bottom: auto !important;
    width: 206px !important;
    height: 326px !important;
    object-fit: cover !important;
    object-position: center bottom !important;
  }

  .scaled-section > .section-canvas .char-card[data-character-slot="1"] .char-portrait {
    content: url("./public/assets/character/characters/character_1_card_1.webp") !important;
  }

  .scaled-section > .section-canvas .char-card[data-character-slot="2"] .char-portrait {
    content: url("./public/assets/character/characters/character_2_card_1.webp") !important;
  }

  .scaled-section > .section-canvas .char-card[data-character-slot="3"] .char-portrait {
    content: url("./public/assets/character/characters/character_3_card_1.webp") !important;
  }

  .scaled-section > .section-canvas .char-card .char-attr-icon {
    display: none !important;
  }

  .scaled-section > .section-canvas .char-card span {
    display: none !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-list {
    left: 150px !important;
    top: 230px !important;
    gap: 27px !important;
  }

  .scaled-section > .section-canvas .character-stage {
    position: absolute !important;
    z-index: 1 !important;
    left: calc(50% + 100px) !important;
    top: calc(43% + 300px) !important;
    width: 1000px !important;
    height: 1540px !important;
    transform: translate(-50%, -50%) !important;
    order: initial !important;
    place-items: center !important;
  }

  .scaled-section > .section-canvas .character-stage::before {
    width: 720px !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="5"] {
    top: calc(43% + 640px) !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="7"] {
    left: calc(50% + 0px) !important;
    top: calc(43% + 350px) !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="4"] {
    left: calc(50% + 50px) !important;
    width: 950px !important;
    height: 1463px !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="3"] {
    left: calc(50% - 150px) !important;
    top: calc(43% + 415px) !important;
  }

  .scaled-section > .section-canvas .character-stage img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translateY(150px) scale(2.1924) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="1"] #active-character-image {
    transform: translateY(380px) scale(2.1924) !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="3"] #active-character-image {
    transform: translateY(350px) scale(2.63088) !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="2"] #active-character-image {
    transform: translateY(180px) scale(1.827) !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="4"] #active-character-image {
    transform: translateY(-280px) scale(2.1924) !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="5"] #active-character-image {
    transform: translate(-50px, 160px) scale(3.420144) !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="6"] #active-character-image {
    transform: translateY(-550px) scale(2.1924) !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="7"] #active-character-image {
    transform: translateY(310px) scale(2.1924) !important;
  }

  .scaled-section > .section-canvas .character-stage[data-character="8"] #active-character-image {
    transform: translateY(320px) scale(2.1924) !important;
  }

  :root[data-site-variant="general"] .scaled-section > .section-canvas .character-stage[data-character="9"] #active-character-image {
    transform: translateY(0) scale(2.1924) !important;
  }

  .scaled-section > .section-canvas .character-r18-backdrop {
    position: absolute !important;
    z-index: 0 !important;
    left: calc(var(--character-r18-backdrop-group-x-4k) * 1px) !important;
    top: calc(var(--character-r18-backdrop-top-4k) * 1px) !important;
    display: none !important;
    width: calc(var(--character-r18-backdrop-width-4k) * 1px) !important;
    height: calc(var(--character-r18-backdrop-height-4k) * 1px) !important;
    pointer-events: none !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-r18-backdrop {
    display: block !important;
  }

  .scaled-section > .section-canvas .character-r18-backdrop img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translate(calc(var(--character-r18-backdrop-img-x-4k) * 1px), calc(var(--character-r18-backdrop-img-y-4k) * 1px)) scale(var(--character-r18-backdrop-img-scale)) !important;
    transform-origin: center center !important;
    filter: none !important;
  }

  .scaled-section > .section-canvas .character-r18-backdrop[data-character="3"] img {
    transform: translate(calc(var(--character-r18-backdrop-3-x-4k) * 1px), calc(var(--character-r18-backdrop-3-y-4k) * 1px)) scale(var(--character-r18-backdrop-img-scale)) !important;
  }

  .scaled-section > .section-canvas .character-r18-backdrop[data-character="2"] img {
    transform: translate(calc(var(--character-r18-backdrop-2-x-4k) * 1px), calc(var(--character-r18-backdrop-2-y-4k) * 1px)) scale(var(--character-r18-backdrop-img-scale)) !important;
  }

  .scaled-section > .section-canvas .character-r18-backdrop[data-character="4"] img {
    transform: translate(calc(var(--character-r18-backdrop-4-x-4k) * 1px), calc(var(--character-r18-backdrop-4-y-4k) * 1px)) scale(var(--character-r18-backdrop-img-scale)) !important;
  }

  .scaled-section > .section-canvas .character-r18-backdrop[data-character="5"] img {
    transform: translate(calc(var(--character-r18-backdrop-5-x-4k) * 1px), calc(var(--character-r18-backdrop-5-y-4k) * 1px)) scale(var(--character-r18-backdrop-5-scale)) !important;
  }

  .scaled-section > .section-canvas .character-r18-backdrop[data-character="6"] img {
    transform: translate(calc(var(--character-r18-backdrop-6-x-4k) * 1px), calc(var(--character-r18-backdrop-6-y-4k) * 1px)) scale(var(--character-r18-backdrop-img-scale)) !important;
  }

  .scaled-section > .section-canvas .character-r18-backdrop[data-character="7"] img {
    transform: translate(calc(var(--character-r18-backdrop-7-x-4k) * 1px), calc(var(--character-r18-backdrop-7-y-4k) * 1px)) scale(var(--character-r18-backdrop-img-scale)) !important;
  }

  .scaled-section > .section-canvas .character-r18-backdrop[data-character="8"] img {
    transform: translate(calc(var(--character-r18-backdrop-8-x-4k) * 1px), calc(var(--character-r18-backdrop-8-y-4k) * 1px)) scale(var(--character-r18-backdrop-img-scale)) !important;
  }

  .scaled-section > .section-canvas .character-r18-backdrop[data-character="9"] img {
    transform: translate(calc(var(--character-r18-backdrop-9-x-4k) * 1px), calc(var(--character-r18-backdrop-9-y-4k) * 1px)) scale(var(--character-r18-backdrop-img-scale)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage {
    left: calc(50% + calc(var(--character-r18-stage-x-4k) * 1px)) !important;
    top: calc(43% + calc(var(--character-r18-stage-y-4k) * 1px)) !important;
    width: calc(var(--character-r18-stage-width-4k) * 1px) !important;
    height: calc(var(--character-r18-stage-height-4k) * 1px) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="3"] {
    left: calc(50% + calc(var(--character-r18-stage-3-x-4k) * 1px)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="4"] {
    left: calc(50% + calc(var(--character-r18-stage-4-x-4k) * 1px)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="7"] {
    left: calc(50% + calc(var(--character-r18-stage-7-x-4k) * 1px)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage img {
    transform: translate(calc(var(--character-r18-image-x-4k) * 1px), calc(var(--character-r18-image-y-4k) * 1px)) scale(var(--character-r18-image-scale)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="1"] #active-character-image {
    transform: translate(calc(var(--character-r18-image-1-x-4k) * 1px), calc(var(--character-r18-image-1-y-4k) * 1px)) scale(var(--character-r18-image-scale)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="2"] #active-character-image {
    transform: translate(calc(var(--character-r18-image-2-x-4k) * 1px), calc(var(--character-r18-image-2-y-4k) * 1px)) scale(var(--character-r18-image-2-scale)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="3"] #active-character-image {
    transform: translate(calc(var(--character-r18-image-3-x-4k) * 1px), calc(var(--character-r18-image-3-y-4k) * 1px)) scale(var(--character-r18-image-3-scale)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="4"] #active-character-image {
    transform: translate(calc(var(--character-r18-image-4-x-4k) * 1px), calc(var(--character-r18-image-4-y-4k) * 1px)) scale(var(--character-r18-image-scale)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="5"] #active-character-image {
    transform: translate(calc(var(--character-r18-image-5-x-4k) * 1px), calc(var(--character-r18-image-5-y-4k) * 1px)) scale(var(--character-r18-image-5-scale)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="6"] #active-character-image {
    transform: translate(calc(var(--character-r18-image-6-x-4k) * 1px), calc(var(--character-r18-image-6-y-4k) * 1px)) scale(var(--character-r18-image-scale)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="7"] #active-character-image {
    transform: translate(calc(var(--character-r18-image-7-x-4k) * 1px), calc(var(--character-r18-image-7-y-4k) * 1px)) scale(var(--character-r18-image-scale)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="8"] #active-character-image {
    transform: translate(calc(var(--character-r18-image-8-x-4k) * 1px), calc(var(--character-r18-image-8-y-4k) * 1px)) scale(var(--character-r18-image-scale)) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-stage[data-character="9"] #active-character-image {
    transform: translate(calc(var(--character-r18-image-9-x-4k) * 1px), calc(var(--character-r18-image-9-y-4k) * 1px)) scale(var(--character-r18-image-scale)) !important;
  }

  .scaled-section > .section-canvas .character-panel-container {
    /* Right-anchored panel: adjust this one value for shared 4K horizontal tweaks. */
    --character-panel-width: 1026px;
    --character-panel-height: 1310px;
    --character-panel-scale: 1.184;
    --character-panel-right-shift: 50px;
    --character-panel-right-gap-base: 88px;
    --character-panel-right-gap: calc(var(--character-panel-right-gap-base) - var(--character-panel-right-shift));
    --character-panel-top: 158px;
    position: absolute !important;
    left: auto !important;
    right: var(--character-panel-right-gap) !important;
    top: var(--character-panel-top) !important;
    width: var(--character-panel-width) !important;
    height: var(--character-panel-height) !important;
    min-height: var(--character-panel-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    padding: 66px 74px 72px !important;
    transform: scale(var(--character-panel-scale)) !important;
    transform-origin: top right !important;
    order: initial !important;
    overflow: hidden !important;
  }

  .scaled-section > .section-canvas .character-panel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 66px 74px 72px !important;
    transform: none !important;
    transform-origin: center center !important;
    order: initial !important;
    overflow: hidden !important;
  }

  .scaled-section > .section-canvas .character-panel-copy {
    box-sizing: border-box !important;
    padding: 0 !important;
    transform: translateY(50px) scale(1.2) !important;
    transform-origin: top center !important;
  }

  .scaled-section > .section-canvas .character-heading {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding-left: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .scaled-section > .section-canvas .character-heading > div {
    width: auto !important;
    min-width: 0 !important;
  }

  .scaled-section > .section-canvas #active-character-icon {
    position: static !important;
    flex: 0 0 auto !important;
    width: 76px !important;
    height: auto !important;
    margin: -8px 0 0 !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .character-panel h3 {
    display: inline-block !important;
    font-size: 58px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-shadow:
      0 3px 0 rgba(255,255,255,0.98),
      0 0 16px rgba(255,255,255,0.86) !important;
  }

  .scaled-section > .section-canvas .character-panel .cv {
    display: none !important;
    margin: 12px 0 0 !important;
    font-size: 38px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-shadow: 0 2px 0 rgba(255,255,255,0.9) !important;
  }

  .scaled-section > .section-canvas .character-description-box {
    margin: 42px auto 44px !important;
    max-width: 550px !important;
    width: 545px !important;
    transform: translateX(-2.5px) !important;
    height: 258px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .scaled-section > .section-canvas .character-description-box p {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: 27px !important;
    line-height: 1.72 !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-shadow: 0 2px 0 rgba(255,255,255,0.86) !important;
  }

  :root[data-site-variant="r18"] .scaled-section > .section-canvas .character-panel-container {
    --character-panel-top: 147px;
  }

  .scaled-section > .section-canvas .chips {
    gap: 26px !important;
    margin: 18px 0 24px !important;
  }

  .scaled-section > .section-canvas .chips span {
    min-width: 150px !important;
    padding: 8px 22px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    color: #7380b8 !important;
    border-color: rgba(150, 160, 205, 0.28) !important;
    background: rgba(235, 239, 251, 0.62) !important;
    font-weight: 700 !important;
  }

  .scaled-section > .section-canvas .stars {
    font-size: 36px !important;
    line-height: 1 !important;
    letter-spacing: 0.22em !important;
  }

  .scaled-section > .section-canvas .character-panel dl {
    position: relative !important;
    width: 545px !important;
    transform: translateX(-2.5px) !important;
    height: 192px !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 34px 76px !important;
    margin: 0 auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(109, 116, 174, 0.24) !important;
    background: transparent !important;
    align-content: center !important;
  }

  .scaled-section > .section-canvas .character-panel dl div {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    font-size: 25px !important;
    line-height: 1.28 !important;
    text-align: left !important;
  }

  .scaled-section > .section-canvas .character-panel dl::before {
    left: 46% !important;
    top: 30px !important;
    bottom: 20px !important;
    transform: translateX(-0.5px) !important;
  }

  .scaled-section > .section-canvas .character-panel dl div:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    position: relative !important;
    left: -10px !important;
  }

  .scaled-section > .section-canvas .character-panel dl div:nth-child(4) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .scaled-section > .section-canvas .character-panel dl div:nth-child(2) {
    position: relative !important;
    left: -10px !important;
  }

  .scaled-section > .section-canvas .character-panel dt,
  .scaled-section > .section-canvas .character-panel dd {
    font-size: 24px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    text-align: left !important;
    text-shadow: 0 2px 0 rgba(255,255,255,0.82) !important;
  }

  .scaled-section > .section-canvas .character-panel h4 {
    display: none !important;
    margin: 0 0 18px !important;
    font-size: 52px !important;
    line-height: 1 !important;
  }

  .scaled-section > .section-canvas .skill-row {
    display: none !important;
    gap: 22px !important;
    margin: 0 0 18px !important;
  }

  .scaled-section > .section-canvas .skill-row span {
    width: 180px !important;
    gap: 10px !important;
    font-size: 26px !important;
  }

  .scaled-section > .section-canvas .skill-row img {
    width: 154px !important;
    height: 154px !important;
  }

  .scaled-section > .section-canvas .skill-row b {
    font-size: 26px !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 0 rgba(255,255,255,0.86) !important;
  }


  .scaled-section > .section-canvas.game-section {
    padding: 2px 96px 142px 146px !important;
    padding-right: 1040px !important;
  }

  .scaled-section > .section-canvas.game-section .section-title {
    width: 3564px !important;
    max-width: none !important;
    margin: 0 0 12px 42px !important;
  }

  .scaled-section > .section-canvas .game-title-art {
    width: 1240px !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: center center !important;
    translate: 0 -50px !important;
    transform: scale(0.7) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .game-subtitle-art {
    width: 1360px !important;
    margin-top: -156px !important;
  }

  .scaled-section > .section-canvas.game-section .section-title p {
    margin-top: 30px !important;
    font-size: 42px !important;
  }

  .scaled-section > .section-canvas .game-grid {
    display: contents !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .game-card-container {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 2 !important;
    width: 1050px !important;
    height: 700px !important;
    margin: 0 !important;
    translate: none !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .game-card-container--1 {
    transform: translate(calc(-50% - 991px), calc(-50% - 325px)) !important;
  }

  .scaled-section > .section-canvas .game-card-container--2 {
    transform: translate(calc(-50% + 79px), calc(-50% - 325px)) !important;
  }

  .scaled-section > .section-canvas .game-card-container--3 {
    transform: translate(calc(-50% - 991px), calc(-50% + 395px)) !important;
  }

  .scaled-section > .section-canvas .game-card-container--4 {
    transform: translate(calc(-50% + 79px), calc(-50% + 395px)) !important;
  }

  .scaled-section > .section-canvas .game-card {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    background: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .game-card:nth-child(1) {
    transform: none !important;
  }

  .scaled-section > .section-canvas .game-card:nth-child(3) {
    transform: none !important;
  }

  .scaled-section > .section-canvas .game-card:nth-child(4) {
    transform: none !important;
  }

  .scaled-section > .section-canvas .game-card::before {
    inset: 30px !important;
    background-size: 100% 100% !important;
  }

  .scaled-section > .section-canvas .game-card__image {
    position: absolute !important;
    inset: 39px 41px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  .scaled-section > .section-canvas .game-card-container::after {
    inset: -6px -1px -15px !important;
  }

  .scaled-section > .section-canvas .game-card__text {
    position: absolute !important;
    left: 8px !important;
    top: 4.2% !important;
    bottom: 4.2% !important;
    width: 46% !important;
    padding: 48px 70px !important;
    overflow: visible !important;
  }

  .scaled-section > .section-canvas .game-card:first-child .game-card__text {
    display: none !important;
    width: 66% !important;
    justify-content: center !important;
  }

  .scaled-section > .section-canvas .game-card__text::before {
    inset: 0 !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.8) 0%,
        rgba(255,255,255,0.768) 42%,
        rgba(255,255,255,0.528) 62%,
        rgba(255,255,255,0.208) 82%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse at 22% 50%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.336) 58%, rgba(255,255,255,0) 100%) !important;
  }

  .scaled-section > .section-canvas .game-card b {
    font-size: 74px !important;
  }

  .scaled-section > .section-canvas .game-card:first-child b {
    color: rgba(138, 112, 226, 0.55) !important;
    font-size: 300px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    line-height: 0.72 !important;
  }

  .scaled-section > .section-canvas .game-card h3 {
    margin: 20px 0 28px !important;
    font-size: 42px !important;
    line-height: 1.16 !important;
    white-space: normal !important;
  }

  .scaled-section > .section-canvas .game-card:first-child h3 {
    margin: -36px 0 70px 92px !important;
    color: #8062de !important;
    font-size: 78px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .scaled-section > .section-canvas .game-card p {
    font-size: 27px !important;
    line-height: 1.72 !important;
    font-weight: 700 !important;
  }

  .scaled-section > .section-canvas .game-card:first-child p {
    color: #8569dd !important;
    font-size: 58px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }


  .scaled-section > .section-canvas.game-section .side-character,
  .scaled-section > .section-canvas.movie-section .side-character,
  .scaled-section > .section-canvas.world-section .side-character,
  .scaled-section > .section-canvas.news-section .side-character,
  .scaled-section > .section-canvas.requirements-section .side-character {
    right: 120px !important;
    bottom: 300px !important;
    width: 1180px !important;
    max-height: calc(100% - 132px) !important;
    object-fit: contain !important;
    object-position: bottom right !important;
  }

  .scaled-section > .section-canvas.game-section .side-character {
    top: -150px !important;
    right: -700px !important;
    bottom: auto !important;
    width: 2754px !important;
    max-height: none !important;
    opacity: 1 !important;
  }

  .scaled-section > .section-canvas.movie-section .side-character {
    display: none !important;
  }

  .scaled-section > .section-canvas.movie-section {
    padding: 2px 104px 148px !important;
    padding-right: 104px !important;
  }

  .scaled-section > .section-canvas.movie-section .section-title {
    width: 3564px !important;
    max-width: none !important;
    margin: 0 0 12px 34px !important;
  }

  .scaled-section > .section-canvas .movie-title-art {
    width: 1240px !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: center center !important;
    translate: 0 -50px !important;
    transform: scale(0.7) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .movie-subtitle-art {
    width: 1360px !important;
    margin-top: -156px !important;
  }

  .scaled-section > .section-canvas.movie-section .section-title p {
    margin-top: 30px !important;
    font-size: 42px !important;
  }

  .scaled-section > .section-canvas .movie-frame-container {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 2 !important;
    width: 2965px !important;
    margin: 0 !important;
    translate: none !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .movie-card {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .movie-prereg-title {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(108px + var(--scaled-content-y-offset)) !important;
    z-index: 6 !important;
    width: 1040px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }


  .scaled-section > .section-canvas.world-section {
    padding: 0 !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0 23%, rgba(255, 255, 255, 0.62) 48%, rgba(255, 255, 255, 0.18) 78%, rgba(255, 255, 255, 0.52) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0, rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0.88) 100%),
      url("./public/assets/world/bg/background_world_1.webp") center center / cover no-repeat !important;
  }

  .scaled-section > .section-canvas.world-section .section-title {
    z-index: 5 !important;
    width: 3564px !important;
    max-width: none !important;
    margin: 0 0 12px 34px !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .world-title-art {
    width: 1240px !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: center center !important;
    translate: 0 -50px !important;
    transform: scale(0.7) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .world-subtitle-art {
    width: 1360px !important;
    margin-top: -156px !important;
  }

  .scaled-section > .section-canvas.world-section .section-title p {
    margin-top: 22px !important;
    font-size: 42px !important;
    line-height: 1.25 !important;
  }

  .scaled-section > .section-canvas .world-title-divider {
    width: 1160px !important;
    margin-top: 28px !important;
  }

  .scaled-section > .section-canvas .world-hero {
    position: absolute !important;
    left: 52px !important;
    top: 270px !important;
    z-index: 4 !important;
    width: 2260px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .world-main-divider {
    display: none !important;
  }

  .scaled-section > .section-canvas .world-main-copy {
    display: none !important;
  }

  .scaled-section > .section-canvas .world-hero p {
    width: 2260px !important;
    margin: 0 auto !important;
    font-size: 38px !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

  .scaled-section > .section-canvas .world-hero p::before {
    display: none !important;
  }

  .scaled-section > .section-canvas .world-cards {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1081px) !important;
    width: 2228px !important;
    gap: 61px 66px !important;
    margin: 0 !important;
    translate: none !important;
    transform: translate(calc(-50% - 738px), calc(-50% + 193px)) scale(0.8) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .world-card-image {
    width: 100% !important;
    height: 560px !important;
    object-fit: fill !important;
  }

  .scaled-section > .section-canvas .world-card-shell {
    width: 1081px !important;
    height: 597px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  .scaled-section > .section-canvas .world-card-shell::before {
    inset: auto !important;
    left: -16px !important;
    top: -14px !important;
    width: 1113px !important;
    height: 626px !important;
  }

  .scaled-section > .section-canvas .world-card-shell .world-card-image {
    left: 12px !important;
    top: 10px !important;
    width: 1057px !important;
    height: 579px !important;
  }

  .scaled-section > .section-canvas .world-card-shell::after {
    left: 7px !important;
    top: 5px !important;
    width: 712px !important;
    height: 588px !important;
  }

  .scaled-section > .section-canvas .world-card-number {
    left: 22px !important;
    top: -2px !important;
    width: 195px !important;
    height: 195px !important;
    font-size: 47px !important;
  }

  .scaled-section > .section-canvas .world-cards article {
    height: 560px !important;
    min-height: 560px !important;
    padding: 0 !important;
    background-color: transparent !important;
    backdrop-filter: none;
  }

  .scaled-section > .section-canvas .world-cards h3 {
    margin-bottom: 30px !important;
    font-size: 29px !important;
    line-height: 1.22 !important;
  }

  .scaled-section > .section-canvas .world-cards article:nth-of-type(4) h3 {
    font-size: 28px !important;
  }

  .scaled-section > .section-canvas .world-cards p {
    font-size: 25px !important;
    line-height: 1.58 !important;
  }

  .scaled-section > .section-canvas .world-card-copy {
    left: -16px !important;
    top: -14px !important;
    z-index: 4 !important;
    width: 1113px !important;
    height: 626px !important;
  }

  .scaled-section > .section-canvas .world-card-copy h3 {
    position: absolute !important;
    left: 252px !important;
    top: 78px !important;
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    color: #7652cf !important;
    font-size: 62px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
  }

  .scaled-section > .section-canvas .world-card-copy h3::before {
    content: none !important;
  }

  .scaled-section > .section-canvas .world-card-copy p {
    position: absolute !important;
    left: 43px !important;
    top: 222px !important;
    width: 580px !important;
    max-width: none !important;
    margin: 0 !important;
    color: #34324b !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 1.58 !important;
    letter-spacing: 0.035em !important;
  }

  .scaled-section > .section-canvas.world-section .world-side-character {
    display: block !important;
    position: absolute !important;
    z-index: 3 !important;
    right: -730px !important;
    bottom: -1480px !important;
    width: 3300px !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: bottom right !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }


  .scaled-section > .section-canvas.news-section {
    padding: 2px 108px 148px !important;
    padding-right: 108px !important;
  }

  .scaled-section > .section-canvas.news-section .section-title {
    width: 3564px !important;
    max-width: none !important;
    margin: 0 0 12px 30px !important;
  }

  .scaled-section > .section-canvas .news-title-art {
    width: 1240px !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: center center !important;
    translate: 0 -50px !important;
    transform: scale(0.7) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .news-subtitle-art {
    width: 1360px !important;
    margin-top: -156px !important;
  }

  .scaled-section > .section-canvas.news-section .section-title p {
    margin-top: 30px !important;
    font-size: 42px !important;
  }

  .scaled-section > .section-canvas .news-tabs {
    width: 1860px !important;
    height: 112px !important;
    margin: 0 0 44px 0 !important;
  }

  .scaled-section > .section-canvas .news-tabs a {
    min-height: 112px !important;
    font-size: 36px !important;
  }

  .scaled-section > .section-canvas .news-layout {
    grid-template-columns: 1629px !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 1629px !important;
    margin: 0 auto !important;
    transform: translateY(58px) !important;
  }


  .scaled-section > .section-canvas .news-main-column {
    width: 1900px !important;
    height: 1355px !important;
    grid-template-rows: 426px 1086px !important;
    gap: 0 !important;
  }

  .scaled-section > .section-canvas .news-filter-frame {
    width: 1900px !important;
    height: 426px !important;
  }

  .scaled-section > .section-canvas .news-filter-frame-art {
    left: 50% !important;
    right: auto !important;
    width: 1595px !important;
    height: 100% !important;
    transform: translateX(-50%) !important;
  }

  .scaled-section > .section-canvas .news-frame {
    width: 1900px !important;
    height: 1086px !important;
    margin-top: -169px !important;
  }

  .scaled-section > .section-canvas.news-section .news-layout {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: var(--edge-mist-content-z) !important;
    grid-template-columns: 1582.08px 913.85px !important;
    gap: 75px !important;
    width: 2570.93px !important;
    margin: 0 !important;
    align-items: start !important;
    place-items: start center !important;
    translate: none !important;
    transform: translate(calc(-50% - 269.92px), calc(-50% + 148.43px)) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .news-x-column {
    width: 1582.08px !important;
    height: 1181.12px !important;
    justify-items: center !important;
    transform: translateY(-50px) !important;
  }

  .scaled-section > .section-canvas .news-x-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  .scaled-section > .section-canvas .news-follow-column {
    width: 913.85px !important;
    height: 1181.12px !important;
    justify-items: center !important;
  }

  .scaled-section > .section-canvas .news-follow-panel {
    --news-follow-bg-bottom: 17.69px;
    --news-follow-bg-side: 4.62px;
    --news-follow-bg-top: 10.77px;
    --news-follow-chibi-nudge: 18.46px;
    --news-follow-list-font: 51.78px;
    width: 913.85px !important;
    height: 1181.12px !important;
    aspect-ratio: auto !important;
  }

  .scaled-section > .section-canvas .news-site-panel {
    width: 1100px !important;
    height: 1240px !important;
  }

  .scaled-section > .section-canvas .news-social-guide-art {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .scaled-section > .section-canvas .news-social-guide-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 21.82px !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .news-social-guide-item {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .news-list li {
    grid-template-columns: 210px minmax(0, 1fr) 290px 190px 34px !important;
    gap: 34px !important;
    min-height: 178px !important;
    padding: 20px 40px !important;
  }

  .scaled-section > .section-canvas .news-content {
    padding: 110px 92px 88px !important;
  }

  .scaled-section > .section-canvas .news-link-window {
    width: 80% !important;
    height: 100% !important;
  }

  .scaled-section > .section-canvas .news-embed-frame {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .news-tag {
    min-height: 56px !important;
    padding: 0 32px !important;
    font-size: 27px !important;
  }

  .scaled-section > .section-canvas .news-list a {
    font-size: 38px !important;
  }

  .scaled-section > .section-canvas .news-list time {
    font-size: 28px !important;
  }

  .scaled-section > .section-canvas .news-thumb {
    border-radius: 12px !important;
  }

  .scaled-section > .section-canvas .news-arrow {
    font-size: 56px !important;
  }

  .scaled-section > .section-canvas .news-more {
    width: 650px !important;
    min-height: 82px !important;
    margin-top: 40px !important;
    padding: 0 48px !important;
    font-size: 30px !important;
  }

  .scaled-section > .section-canvas .news-x-content {
    gap: 26px !important;
    padding: 78px 70px 74px !important;
  }

  .scaled-section > .section-canvas .news-x-main-stage {
    position: absolute !important;
    left: 50% !important;
    top: 120px !important;
    width: 780px !important;
    max-height: 560px !important;
    transform: translateX(-50%) !important;
  }

  .scaled-section > .section-canvas .news-x-main-art {
    width: 100% !important;
    transform: translateY(-20px) scale(1.35) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .news-x-info {
    display: contents !important;
  }

  .scaled-section > .section-canvas .news-x-topics {
    position: absolute !important;
    left: 120px !important;
    bottom: 190px !important;
    z-index: 2 !important;
    gap: 28px !important;
    font-size: 55px !important;
    line-height: 1.16 !important;
  }

  .scaled-section > .section-canvas .news-x-chibi-stage {
    position: absolute !important;
    right: 70px !important;
    bottom: 110px !important;
    width: 210px !important;
    max-height: 310px !important;
    z-index: 2 !important;
  }

  .scaled-section > .section-canvas .news-x-chibi {
    transform: scale(1.95) !important;
    transform-origin: right bottom !important;
  }

  .scaled-section > .section-canvas .news-x-content p {
    font-size: 56px !important;
    line-height: 1.28 !important;
  }

  .scaled-section > .section-canvas .news-x-mark {
    width: 160px !important;
    font-size: 92px !important;
  }

  .scaled-section > .section-canvas .news-x-content b {
    min-width: 520px !important;
    padding: 20px 40px !important;
    font-size: 32px !important;
  }

  .scaled-section > .section-canvas .news-x-content small {
    font-size: 26px !important;
  }

  .scaled-section > .section-canvas .news-card-links {
    grid-template-columns: repeat(3, 220px) !important;
    gap: 20px !important;
    justify-content: center !important;
    justify-items: center !important;
  }

  .scaled-section > .section-canvas .news-card-links a {
    width: 220px !important;
    height: 320px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .scaled-section > .section-canvas .news-card-links img {
    width: 100% !important;
    height: 320px !important;
    max-height: 100% !important;
    object-fit: fill !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .news-card-links a:first-child img,
  .scaled-section > .section-canvas .news-card-links a:last-child img {
    transform: scale(1.06) !important;
  }

  .scaled-section > .section-canvas .news-card-links a:nth-child(2) img {
    transform: scale(0.95) !important;
  }

  .scaled-section > .section-canvas .news-x-button {
    width: 720px !important;
    height: 92px !important;
  }

  .scaled-section > .section-canvas .news-x-button img {
    width: 100% !important;
    height: auto !important;
    transform: translateY(-50%) !important;
  }


  .scaled-section > .section-canvas .news-note-art {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(-120px + var(--scaled-content-y-offset)) !important;
    width: 2200px !important;
    max-height: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  .scaled-section > .section-canvas.news-section .side-character {
    display: none !important;
    right: -500px !important;
    bottom: 110px !important;
    width: 980px !important;
    max-height: calc(100% - 90px) !important;
    object-fit: contain !important;
    object-position: bottom right !important;
  }



  .scaled-section > .section-canvas.requirements-section {
    padding: 2px 76px 112px !important;
    padding-right: 76px !important;
  }

  .scaled-section > .section-canvas.requirements-section .section-title {
    width: 3564px !important;
    max-width: none !important;
    margin: 0 0 12px 62px !important;
  }

  .scaled-section > .section-canvas .requirements-title-art {
    width: 1240px !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: center center !important;
    translate: 0 -50px !important;
    transform: scale(0.7) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .requirements-subtitle-art {
    width: 1360px !important;
    margin-top: -156px !important;
  }

  .scaled-section > .section-canvas.requirements-section .section-title p {
    margin-top: 30px !important;
    font-size: 42px !important;
  }

  .scaled-section > .section-canvas .requirements-top-container,
  .scaled-section > .section-canvas .requirements-bottom-container {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 2 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    translate: none !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .requirements-top-container {
    width: 2569px !important;
    height: 978px !important;
    transform: translate(-1284.5px, -685px) !important;
  }

  .scaled-section > .section-canvas .requirements-bottom-container {
    width: 1266.5px !important;
    height: 581px !important;
  }

  .scaled-section > .section-canvas .requirements-bottom-container--environment {
    transform: translate(-1284.5px, 224.4px) !important;
  }

  .scaled-section > .section-canvas .requirements-bottom-container--x {
    transform: translate(18px, 224.4px) !important;
  }

  .scaled-section > .section-canvas .requirements-grid,
  .scaled-section > .section-canvas .requirements-bottom {
    width: 2569px !important;
  }

  .scaled-section > .section-canvas .requirements-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 36px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .requirements-card {
    min-height: 799px !important;
    padding: 55px 39px 45px !important;
  }

  .scaled-section > .section-canvas .requirements-card-head {
    grid-template-columns: 117px minmax(0, 1fr) !important;
    gap: 23px !important;
    min-height: 97px !important;
    margin-bottom: 18px !important;
  }

  .scaled-section > .section-canvas .requirements-card h3 {
    font-size: 43px !important;
  }

  .scaled-section > .section-canvas .requirements-pill {
    height: 82px !important;
    margin-bottom: 18px !important;
    font-size: 32px !important;
  }

  .scaled-section > .section-canvas .requirements-pill img {
    transform: scaleY(1.2) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .requirements-specs {
    font-size: 26px !important;
    box-sizing: border-box !important;
    padding-left: 44px !important;
  }

  .scaled-section > .section-canvas .requirements-specs div {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 78px !important;
    padding: 14px 0 !important;
    background: transparent !important;
  }

  .scaled-section > .section-canvas .requirements-bottom {
    display: contents !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas .requirements-environment {
    grid-column: auto !important;
  }

  .scaled-section > .section-canvas .requirements-x-panel {
    grid-column: auto !important;
  }

  .scaled-section > .section-canvas .requirements-environment,
  .scaled-section > .section-canvas .requirements-x-panel {
    position: relative !important;
    width: 100% !important;
    height: 581px !important;
    min-height: 581px !important;
    margin: 0 !important;
  }

  .scaled-section > .section-canvas .requirements-env-content {
    box-sizing: border-box !important;
    padding: 156px 81px 34px !important;
    transform: scale(1.2) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .requirements-env-content h3 {
    margin-bottom: 14px !important;
    font-size: 57px !important;
  }

  .scaled-section > .section-canvas .requirements-env-options {
    gap: 20px !important;
    transform: translateY(-40px) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .requirements-env-options span {
    grid-template-rows: 62px auto !important;
    gap: 6px !important;
    font-size: 27px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  .scaled-section > .section-canvas .requirements-env-options img {
    transform: scale(1.2) !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .requirements-x-content {
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    box-sizing: border-box !important;
    padding: 60px 73px !important;
    text-align: center !important;
  }

  .scaled-section > .section-canvas .requirements-x-content p {
    width: 100% !important;
    margin: 0 !important;
    font-size: 44px !important;
    line-height: 1.34 !important;
  }

  .scaled-section > .section-canvas .requirements-x-button {
    width: 910px !important;
    height: 119px !important;
    margin: 0 auto !important;
    padding: 0 83px !important;
    font-size: 46px !important;
  }

  .scaled-section > .section-canvas .requirements-x-button .requirements-x-icon {
    width: 83px !important;
  }

  .scaled-section > .section-canvas.requirements-section .side-character {
    display: none !important;
  }


  .scaled-section > .section-canvas .section-title-main {
    position: relative;
    z-index: 2;
    display: block;
    width: 1065px !important;
    height: 154px !important;
    margin: 0 auto;
    overflow: hidden;
  }

  .scaled-section > .section-canvas .section-title-main > img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  .scaled-section > .section-canvas .section-title-subtitle {
    position: relative;
    z-index: 2;
    display: block;
    width: 1306px !important;
    height: 47px !important;
    margin: -100px auto 0;
    overflow: hidden;
  }

  .scaled-section > .section-canvas .section-title-subtitle > img {
    display: block;
    width: var(--subtitle-source-width) !important;
    max-width: none !important;
    height: var(--subtitle-source-height) !important;
    margin: 0 !important;
    object-fit: fill !important;
    object-position: initial !important;
    translate: var(--subtitle-source-x) var(--subtitle-source-y) !important;
    transform: none !important;
    transform-origin: top left !important;
  }

  .scaled-section > .section-canvas .section-title-subtitle--reward {
    --subtitle-source-width: 1500px;
    --subtitle-source-height: 563px;
    --subtitle-source-x: -97px;
    --subtitle-source-y: -255px;
    margin-top: 30px !important;
  }

  .scaled-section > .section-canvas .section-title-subtitle--character {
    --subtitle-source-width: 1500px;
    --subtitle-source-height: 563px;
    --subtitle-source-x: -97px;
    --subtitle-source-y: -255px;
    margin-top: 30px !important;
  }

  .scaled-section > .section-canvas .section-title-subtitle--game {
    --subtitle-source-width: 1500px;
    --subtitle-source-height: 563px;
    --subtitle-source-x: -97px;
    --subtitle-source-y: -255px;
    margin-top: 30px !important;
  }

  .scaled-section > .section-canvas .section-title-subtitle--movie {
    --subtitle-source-width: 1500px;
    --subtitle-source-height: 563px;
    --subtitle-source-x: -97px;
    --subtitle-source-y: -255px;
    margin-top: 30px !important;
  }

  .scaled-section > .section-canvas .section-title-subtitle--world {
    --subtitle-source-width: 1500px;
    --subtitle-source-height: 563px;
    --subtitle-source-x: -97px;
    --subtitle-source-y: -255px;
    margin-top: 30px !important;
  }

  .scaled-section > .section-canvas .section-title-subtitle--news {
    --subtitle-source-width: 1500px;
    --subtitle-source-height: 563px;
    --subtitle-source-x: -97px;
    --subtitle-source-y: -255px;
    margin-top: 30px !important;
  }

  .scaled-section > .section-canvas .section-title-subtitle--requirements {
    --subtitle-source-width: 1500px;
    --subtitle-source-height: 563px;
    --subtitle-source-x: -97px;
    --subtitle-source-y: -255px;
    margin-top: 30px !important;
  }

  .scaled-section > .section-canvas:is(
    .character-section,
    .game-section,
    .movie-section,
    .world-section,
    .news-section,
    .requirements-section
  ) .section-title {
    position: absolute !important;
    z-index: 80 !important;
    left: 50% !important;
    top: 152px !important;
    width: 3564px !important;
    max-width: none !important;
    margin: 0 !important;
    translate: none !important;
    transform: translateX(-50%) !important;
  }

  .scaled-section > .section-canvas .section-title-main:is(
    .section-title-main--character,
    .section-title-main--game,
    .section-title-main--movie,
    .section-title-main--world,
    .section-title-main--news,
    .section-title-main--requirements
  ),
  .scaled-section > .section-canvas .section-title-subtitle:is(
    .section-title-subtitle--character,
    .section-title-subtitle--game,
    .section-title-subtitle--movie,
    .section-title-subtitle--world,
    .section-title-subtitle--news,
    .section-title-subtitle--requirements
  ) {
    position: absolute !important;
    z-index: 81 !important;
    left: 50% !important;
    top: 0 !important;
    display: block !important;
    width: auto !important;
    height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
  }

  .scaled-section > .section-canvas .section-title-main:is(
    .section-title-main--character,
    .section-title-main--game,
    .section-title-main--movie,
    .section-title-main--world,
    .section-title-main--news,
    .section-title-main--requirements
  ) {
    width: 1400px !important;
    height: 154px !important;
  }

  .scaled-section > .section-canvas .section-title-subtitle:is(
    .section-title-subtitle--character,
    .section-title-subtitle--game,
    .section-title-subtitle--movie,
    .section-title-subtitle--world,
    .section-title-subtitle--news,
    .section-title-subtitle--requirements
  ) {
    width: 1306px !important;
    height: 47px !important;
    margin-top: 30px !important;
  }

  .scaled-section > .section-canvas :is(
    .character-title-frame,
    .game-title-frame,
    .movie-title-frame,
    .world-title-frame,
    .news-title-frame,
    .requirements-title-frame
  ) {
    position: relative !important;
    z-index: 82 !important;
    left: auto !important;
    top: 0 !important;
    display: block !important;
    width: 1400px !important;
    height: 154px !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas :is(
    .character-subtitle-frame,
    .game-subtitle-frame,
    .movie-subtitle-frame,
    .world-subtitle-frame,
    .news-subtitle-frame,
    .requirements-subtitle-frame
  ) {
    position: relative !important;
    z-index: 82 !important;
    left: auto !important;
    top: 164px !important;
    display: block !important;
    width: 1306px !important;
    height: 47px !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .scaled-section > .section-canvas :is(
    .character-title-art,
    .game-title-art,
    .movie-title-art,
    .world-title-art,
    .news-title-art,
    .requirements-title-art
  ) {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: block !important;
    width: 1672px !important;
    height: 253px !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    translate: none !important;
    transform: translate(-50%, -50%) scale(0.6) !important;
    transform-origin: center center !important;
    filter: none !important;
  }

  .scaled-section > .section-canvas :is(
    .character-subtitle-art,
    .game-subtitle-art,
    .movie-subtitle-art,
    .world-subtitle-art,
    .news-subtitle-art,
    .requirements-subtitle-art
  ) {
    display: block !important;
    width: 1500px !important;
    height: 563px !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: fill !important;
    object-position: initial !important;
    translate: -97px -255px !important;
    transform: none !important;
    transform-origin: top left !important;
    filter: none !important;
  }

  .scaled-section > .section-canvas .game-grid {
    margin-top: 283px !important;
  }

  .scaled-section > .section-canvas .movie-frame-container {
    margin: 0 !important;
  }

  .scaled-section > .section-canvas .news-layout {
    margin: 243px auto 0 !important;
  }

  .scaled-section > .section-canvas .requirements-top-container {
    margin: 0 !important;
  }


@media (min-width: 0px) {
  :root {
    /*
      1080P layout formula standard:
      - --desktop-1080-px is one design pixel on the 1920x1080 layout canvas.
      - Use calc(var(--desktop-1080-px) * N) for future position/size tweaks.
    */
    --desktop-1080-section-width: var(--section-canvas-width, var(--section-width, 100vw));
    --desktop-1080-section-height: var(--section-height, calc(var(--desktop-1080-section-width) * 0.5625));
    --desktop-1080-px: calc(var(--desktop-1080-section-width) * 0.000520833333);
    --desktop-4k-px: calc(var(--desktop-1080-px) * 0.5);
  }
}

@media (min-width: 0px) {
  #top.top-section {
    --top-scale: 1;
    position: relative !important;
    height: 56.25vw !important;
    min-height: 56.25vw !important;
    overflow: hidden !important;
    background: #eaf1ff url("./public/assets/top/bg/background_top_1.webp") center / cover no-repeat !important;
  }

  #top.top-section > .top-artboard {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 56.25vw !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: hidden !important;
  }

  #top.top-section .top-bg-video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #top.top-section .top-copy {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  #top.top-section .top-logo-link {
    left: 12.936603vw !important;
    top: 7.117225vw !important;
    width: 18.842678vw !important;
    height: auto !important;
    aspect-ratio: 1129 / 483 !important;
  }

  :root[data-site-variant="r18"] #top.top-section .top-logo-link {
    width: 19.955633vw !important;
    aspect-ratio: 1619 / 654 !important;
  }

  #top.top-section .top-main-title-wrap {
    left: 4.72488vw !important;
    top: 16.088517vw !important;
    width: 34.090909vw !important;
    height: auto !important;
    aspect-ratio: 1563 / 520 !important;
  }

  #top.top-section .top-button-container {
    left: 6.878589vw !important;
    top: 29.066986vw !important;
    --preregister-button-width: 29.72488vw !important;
    width: var(--preregister-button-width) !important;
    height: auto !important;
    aspect-ratio: 1822 / 391 !important;
  }

  #top.top-section .top-logo-img,
  #top.top-section .top-main-title,
  #top.top-section .preregister-button-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  #top.top-section .top-button-text {
    gap: 0.149522vw !important;
    font-size: clamp(21px, 2.392344vw, 46px) !important;
  }

  #top.top-section .dmm-implementation-panel {
    font-size: clamp(8px, 0.833333vw, 16px) !important;
  }

  #top.top-section .social-rail {
    right: 2.392344vw !important;
    top: 16% !important;
    gap: clamp(14px, 1.555024vw, 30px) !important;
  }

  #top.top-section .social-link {
    width: clamp(22px, 2.272727vw, 44px) !important;
    height: clamp(22px, 2.272727vw, 44px) !important;
  }
}

@media (min-width: 0px) {
  #preregister.scaled-section,
  #character.scaled-section,
  #game.scaled-section,
  #movie.scaled-section,
  #world.scaled-section,
  #news.scaled-section,
  #requirements.scaled-section {
    position: relative !important;
    width: var(--section-width, 100vw) !important;
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
    max-height: var(--desktop-1080-section-height) !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    content-visibility: auto !important;
    contain-intrinsic-size: var(--desktop-1080-section-height) !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section,
  #character.scaled-section > .section-canvas.character-section,
  #game.scaled-section > .section-canvas.game-section,
  #movie.scaled-section > .section-canvas.movie-section,
  #world.scaled-section > .section-canvas.world-section,
  #news.scaled-section > .section-canvas.news-section,
  #requirements.scaled-section > .section-canvas.requirements-section {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    width: var(--desktop-1080-section-width) !important;
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
    max-height: var(--desktop-1080-section-height) !important;
    max-width: none !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: hidden !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section > *,
  #character.scaled-section > .section-canvas.character-section > *,
  #game.scaled-section > .section-canvas.game-section > *,
  #movie.scaled-section > .section-canvas.movie-section > *,
  #world.scaled-section > .section-canvas.world-section > *,
  #news.scaled-section > .section-canvas.news-section > *,
  #requirements.scaled-section > .section-canvas.requirements-section > * {
    translate: 0 0 !important;
  }
}

@media (min-width: 0px) {
  .scaled-section {
    --edge-mist-height: calc(var(--desktop-1080-px) * 400);
    --edge-mist-blur: calc(var(--desktop-1080-px) * 3);
    --edge-seam-top-height: calc(var(--desktop-1080-px) * 12);
    --edge-seam-bottom-height: calc(var(--desktop-1080-px) * 24);
    --edge-mist-top:
      linear-gradient(to bottom, rgba(255, 255, 255, 1) 0 calc(var(--desktop-1080-px) * 17), rgba(255, 255, 255, 0.97) calc(var(--desktop-1080-px) * 48), rgba(255, 255, 255, 0.72) calc(var(--desktop-1080-px) * 91), rgba(255, 255, 255, 0.34) calc(var(--desktop-1080-px) * 165), rgba(255, 255, 255, 0.1) calc(var(--desktop-1080-px) * 270), transparent calc(var(--desktop-1080-px) * 330)),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.44) 0 calc(var(--desktop-1080-px) * 68), rgba(255, 255, 255, 0.15) calc(var(--desktop-1080-px) * 175), transparent calc(var(--desktop-1080-px) * 310)),
      radial-gradient(ellipse 46% 66% at 18% -10%, rgba(255, 255, 255, 0.56) 0 18%, rgba(255, 255, 255, 0.2) 48%, transparent 82%),
      radial-gradient(ellipse 54% 68% at 72% -8%, rgba(255, 255, 255, 0.5) 0 18%, rgba(255, 255, 255, 0.18) 48%, transparent 82%);
    --edge-mist-bottom:
      linear-gradient(to top, rgba(255, 255, 255, 1) 0 calc(var(--desktop-1080-px) * 17), rgba(255, 255, 255, 0.97) calc(var(--desktop-1080-px) * 48), rgba(255, 255, 255, 0.72) calc(var(--desktop-1080-px) * 91), rgba(255, 255, 255, 0.3) calc(var(--desktop-1080-px) * 180), rgba(255, 255, 255, 0.08) calc(var(--desktop-1080-px) * 300), transparent calc(var(--desktop-1080-px) * 400)),
      linear-gradient(to top, rgba(255, 255, 255, 0.38) 0 calc(var(--desktop-1080-px) * 68), rgba(255, 255, 255, 0.12) calc(var(--desktop-1080-px) * 200), transparent calc(var(--desktop-1080-px) * 380)),
      radial-gradient(ellipse 46% 66% at 18% 110%, rgba(255, 255, 255, 0.56) 0 18%, rgba(255, 255, 255, 0.2) 48%, transparent 82%),
      radial-gradient(ellipse 54% 68% at 72% 108%, rgba(255, 255, 255, 0.5) 0 18%, rgba(255, 255, 255, 0.18) 48%, transparent 82%);
  }

  .scaled-section::before {
    height: var(--edge-seam-top-height) !important;
    background: linear-gradient(
      to bottom,
      #fff 0 calc(var(--desktop-1080-px) * 3),
      rgba(255, 255, 255, 0.88) calc(var(--desktop-1080-px) * 6),
      rgba(255, 255, 255, 0.34) calc(var(--desktop-1080-px) * 10),
      transparent calc(var(--desktop-1080-px) * 12)
    ) !important;
  }

  .scaled-section::after {
    height: var(--edge-seam-bottom-height) !important;
    background: linear-gradient(
      to top,
      #fff 0 calc(var(--desktop-1080-px) * 6),
      rgba(255, 255, 255, 0.92) calc(var(--desktop-1080-px) * 11),
      rgba(255, 255, 255, 0.42) calc(var(--desktop-1080-px) * 19),
      transparent calc(var(--desktop-1080-px) * 24)
    ) !important;
  }

}

@media (min-width: 0px) {
  #news.scaled-section {
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
  }

  #news.scaled-section > .section-canvas.news-section {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--desktop-1080-section-width) !important;
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
    max-width: none !important;
    padding: calc(var(--desktop-1080-px) * 1) calc(var(--desktop-1080-px) * 54) calc(var(--desktop-1080-px) * 74) !important;
    padding-right: calc(var(--desktop-1080-px) * 54) !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: hidden !important;
  }

  #news.scaled-section > .section-canvas.news-section > * {
    translate: 0 0 !important;
  }

  #news.scaled-section > .section-canvas.news-section > .section-title {
    width: calc(var(--desktop-1080-px) * 1782) !important;
    max-width: none !important;
    margin: 0 0 calc(var(--desktop-1080-px) * 6) calc(var(--desktop-1080-px) * 15) !important;
    translate: 0 0 !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-title-art {
    width: calc(var(--desktop-1080-px) * 434) !important;
    height: calc(var(--desktop-1080-px) * 84) !important;
    object-fit: cover !important;
    object-position: center center !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-subtitle-art {
    width: calc(var(--desktop-1080-px) * 680) !important;
    margin-top: calc(var(--desktop-1080-px) * -78) !important;
  }

}

@media (min-width: 0px) {
  #news.scaled-section > .section-canvas.news-section .news-layout {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 182) !important;
    top: calc(var(--desktop-1080-px) * 319) !important;
    z-index: var(--edge-mist-content-z) !important;
    display: grid !important;
    grid-template-columns: calc(var(--desktop-1080-px) * 791.04) calc(var(--desktop-1080-px) * 456.9235) !important;
    gap: calc(var(--desktop-1080-px) * 37.5) !important;
    width: calc(var(--desktop-1080-px) * 1285.4635) !important;
    margin: 0 !important;
    align-items: start !important;
    place-items: start center !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-site-panel {
    width: calc(var(--desktop-1080-px) * 550) !important;
    height: calc(var(--desktop-1080-px) * 620) !important;
    aspect-ratio: auto !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-embed-frame {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-x-column {
    width: calc(var(--desktop-1080-px) * 791.04) !important;
    height: calc(var(--desktop-1080-px) * 590.562) !important;
    justify-items: center !important;
    margin-top: calc(var(--desktop-1080-px) * -25) !important;
    transform: none !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-x-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-follow-column {
    width: calc(var(--desktop-1080-px) * 456.9235) !important;
    height: calc(var(--desktop-1080-px) * 590.562) !important;
    justify-items: center !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-follow-panel {
    --news-follow-bg-bottom: calc(var(--desktop-1080-px) * 8.845);
    --news-follow-bg-side: calc(var(--desktop-1080-px) * 2.31);
    --news-follow-bg-top: calc(var(--desktop-1080-px) * 5.385);
    --news-follow-chibi-nudge: calc(var(--desktop-1080-px) * 9.23);
    --news-follow-frame-visual-outset: calc(var(--desktop-1080-px) * 15);
    --news-follow-list-font: calc(var(--desktop-1080-px) * 25.89);
    --news-follow-text-lift: calc(var(--desktop-1080-px) * 15);
    width: calc(var(--desktop-1080-px) * 456.9235) !important;
    height: calc(var(--desktop-1080-px) * 590.562) !important;
    aspect-ratio: auto !important;
    margin-top: calc(var(--desktop-1080-px) * -25) !important;
    transform: none !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-follow-x-container {
    left: calc(var(--desktop-1080-px) * 36) !important;
    top: calc(var(--desktop-1080-px) * 41) !important;
    width: calc(var(--desktop-1080-px) * 384) !important;
    transform: none !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-follow-x-account {
    left: calc(50% - calc(var(--desktop-1080-px) * 108)) !important;
    width: calc(var(--desktop-1080-px) * 215.3) !important;
    bottom: calc(var(--desktop-1080-px) * 23) !important;
    font-size: calc(var(--desktop-1080-px) * 23) !important;
    transform: none !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-social-guide-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: calc(var(--desktop-1080-px) * 10.92) !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-social-guide-item {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  #news.scaled-section > .section-canvas.news-section .news-social-guide-art {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

}

@media (min-width: 0px) {
  #news.scaled-section > .section-canvas.news-section .side-character {
    display: none !important;
  }

}


@media (min-width: 0px) {
  #game.scaled-section {
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
  }

  #game.scaled-section > .section-canvas.game-section {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--desktop-1080-section-width) !important;
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
    max-width: none !important;
    padding: calc(var(--desktop-1080-px) * 1) calc(var(--desktop-1080-px) * 520) calc(var(--desktop-1080-px) * 71) calc(var(--desktop-1080-px) * 73) !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: hidden !important;
  }

  #game.scaled-section > .section-canvas.game-section > * {
    translate: 0 0 !important;
  }

  #game.scaled-section > .section-canvas.game-section > .section-title {
    position: absolute !important;
    z-index: 80 !important;
    left: calc(var(--desktop-1080-px) * 69) !important;
    top: calc(var(--desktop-1080-px) * 76) !important;
    width: calc(var(--desktop-1080-px) * 1782) !important;
    max-width: none !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .section-title-main--game,
  #game.scaled-section > .section-canvas.game-section .section-title-subtitle--game {
    position: absolute !important;
    z-index: 81 !important;
    left: calc(var(--desktop-1080-px) * 541) !important;
    top: 0 !important;
    display: block !important;
    width: auto !important;
    height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .section-title-main--game {
    width: calc(var(--desktop-1080-px) * 700) !important;
    height: calc(var(--desktop-1080-px) * 77) !important;
    left: calc(var(--desktop-1080-px) * 541) !important;
  }

  #game.scaled-section > .section-canvas.game-section .section-title-subtitle--game {
    width: calc(var(--desktop-1080-px) * 653) !important;
    height: calc(var(--desktop-1080-px) * 23.5) !important;
    left: calc(var(--desktop-1080-px) * 565) !important;
    margin-top: calc(var(--desktop-1080-px) * 15) !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-title-frame {
    position: relative !important;
    z-index: 82 !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 700) !important;
    height: calc(var(--desktop-1080-px) * 77) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-subtitle-frame {
    position: relative !important;
    z-index: 82 !important;
    top: calc(var(--desktop-1080-px) * 82) !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 653) !important;
    height: calc(var(--desktop-1080-px) * 23.5) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-title-art {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 99) !important;
    top: calc(var(--desktop-1080-px) * 1) !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 502) !important;
    height: calc(var(--desktop-1080-px) * 76) !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
    filter: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-subtitle-art {
    display: block !important;
    position: relative !important;
    left: calc(var(--desktop-1080-px) * -49) !important;
    top: calc(var(--desktop-1080-px) * -128) !important;
    width: calc(var(--desktop-1080-px) * 750) !important;
    height: calc(var(--desktop-1080-px) * 281.5) !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: fill !important;
    object-position: initial !important;
    translate: none !important;
    transform: none !important;
    transform-origin: top left !important;
    filter: none !important;
  }

}

@media (min-width: 0px) {
  #game.scaled-section > .section-canvas.game-section .game-grid {
    display: contents !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card-container {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 2 !important;
    width: calc(var(--desktop-1080-px) * 525) !important;
    height: calc(var(--desktop-1080-px) * 350) !important;
    margin: 0 !important;
    translate: none !important;
    transform-origin: center center !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card-container--1 {
    left: calc(var(--desktop-1080-px) * 202) !important;
    top: calc(var(--desktop-1080-px) * 203) !important;
    transform: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card-container--2 {
    left: calc(var(--desktop-1080-px) * 747) !important;
    top: calc(var(--desktop-1080-px) * 203) !important;
    transform: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card-container--3 {
    left: calc(var(--desktop-1080-px) * 202) !important;
    top: calc(var(--desktop-1080-px) * 573) !important;
    transform: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card-container--4 {
    left: calc(var(--desktop-1080-px) * 747) !important;
    top: calc(var(--desktop-1080-px) * 573) !important;
    transform: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    background: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card::before {
    inset: calc(var(--desktop-1080-px) * 15) !important;
    background: url("./public/assets/game/ui/ui_frame_game_intro_card_1.png") center / 100% 100% no-repeat !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card__image {
    position: absolute !important;
    inset: calc(var(--desktop-1080-px) * 19.5) calc(var(--desktop-1080-px) * 20.5) !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card-container::after {
    inset:
      calc(calc(var(--desktop-1080-px) * 12.1287) - calc(var(--desktop-1080-px) * 10.237))
      calc(calc(var(--desktop-1080-px) * 14.5686) - calc(var(--desktop-1080-px) * 10.123))
      calc(calc(var(--desktop-1080-px) * 7.5655) - calc(var(--desktop-1080-px) * 10.384)) !important;
    background: url("./public/assets/movie/ui/ui_frame_movie_1.png") center / 100% 100% no-repeat !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card__text {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 4) !important;
    top: 4.2% !important;
    bottom: 4.2% !important;
    width: 46% !important;
    padding: calc(var(--desktop-1080-px) * 24) calc(var(--desktop-1080-px) * 35) !important;
    overflow: visible !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card:first-child .game-card__text {
    display: none !important;
    width: 66% !important;
    justify-content: center !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card b {
    font-size: calc(var(--desktop-1080-px) * 37) !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card h3 {
    margin: calc(var(--desktop-1080-px) * 10) 0 calc(var(--desktop-1080-px) * 14) !important;
    font-size: calc(var(--desktop-1080-px) * 21) !important;
    line-height: 1.16 !important;
    white-space: normal !important;
  }

  #game.scaled-section > .section-canvas.game-section .game-card p {
    font-size: calc(var(--desktop-1080-px) * 13.5) !important;
    line-height: 1.72 !important;
    font-weight: 700 !important;
  }

}

@media (min-width: 0px) {
  #game.scaled-section > .section-canvas.game-section .side-character {
    display: block !important;
    top: calc(var(--desktop-1080-px) * -75) !important;
    right: calc(var(--desktop-1080-px) * -350) !important;
    bottom: auto !important;
    width: calc(var(--desktop-1080-px) * 1377) !important;
    max-height: none !important;
    opacity: 1 !important;
    object-fit: contain !important;
    object-position: bottom right !important;
  }

}


@media (min-width: 0px) {
  #world.scaled-section {
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
  }

  #world.scaled-section > .section-canvas.world-section {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--desktop-1080-section-width) !important;
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
    max-width: none !important;
    padding: 0 !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: hidden !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0 23%, rgba(255, 255, 255, 0.62) 48%, rgba(255, 255, 255, 0.18) 78%, rgba(255, 255, 255, 0.52) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0, rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0.88) 100%),
      url("./public/assets/world/bg/background_world_1.webp") center center / cover no-repeat !important;
  }

  #world.scaled-section > .section-canvas.world-section > * {
    translate: 0 0 !important;
  }

  #world.scaled-section > .section-canvas.world-section > .section-title {
    z-index: 5 !important;
    width: calc(var(--desktop-1080-px) * 1782) !important;
    max-width: none !important;
    margin: 0 0 calc(var(--desktop-1080-px) * 6) calc(var(--desktop-1080-px) * 17) !important;
    transform: none !important;
    translate: 0 0 !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-title-art {
    width: calc(var(--desktop-1080-px) * 620) !important;
    height: calc(var(--desktop-1080-px) * 120) !important;
    object-fit: cover !important;
    object-position: center center !important;
    position: relative !important;
    top: calc(var(--desktop-1080-px) * -25) !important;
    translate: none !important;
    width: calc(var(--desktop-1080-px) * 434) !important;
    height: calc(var(--desktop-1080-px) * 84) !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-subtitle-art {
    width: calc(var(--desktop-1080-px) * 680) !important;
    margin-top: calc(var(--desktop-1080-px) * -78) !important;
  }

}

@media (min-width: 0px) {
  #world.scaled-section > .section-canvas.world-section .world-hero {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 26) !important;
    top: calc(var(--desktop-1080-px) * 210) !important;
    z-index: 4 !important;
    width: calc(var(--desktop-1080-px) * 1130) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-main-divider,
  #world.scaled-section > .section-canvas.world-section .world-main-copy,
  #world.scaled-section > .section-canvas.world-section .world-hero p::before {
    display: none !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-hero p {
    width: calc(var(--desktop-1080-px) * 1130) !important;
    margin: 0 auto !important;
    transform: none !important;
    font-size: calc(var(--desktop-1080-px) * 19) !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

}

@media (min-width: 0px) {
  #world.scaled-section > .section-canvas.world-section .world-cards {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 145) !important;
    top: calc(var(--desktop-1080-px) * 386) !important;
    bottom: auto !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: repeat(2, calc(var(--desktop-1080-px) * 432)) !important;
    width: calc(var(--desktop-1080-px) * 891) !important;
    gap: calc(var(--desktop-1080-px) * 24) calc(var(--desktop-1080-px) * 27) !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-card-shell {
    width: calc(var(--desktop-1080-px) * 432) !important;
    height: calc(var(--desktop-1080-px) * 239) !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-card-shell::before {
    inset: auto !important;
    left: calc(var(--desktop-1080-px) * -6) !important;
    top: calc(var(--desktop-1080-px) * -6) !important;
    width: calc(var(--desktop-1080-px) * 445) !important;
    height: calc(var(--desktop-1080-px) * 250) !important;
    background: url("./public/assets/world/ui/ui_frame_world_card_1.png") center / 100% 100% no-repeat !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-card-shell .world-card-image {
    left: calc(var(--desktop-1080-px) * 5) !important;
    top: calc(var(--desktop-1080-px) * 4) !important;
    width: calc(var(--desktop-1080-px) * 423) !important;
    height: calc(var(--desktop-1080-px) * 232) !important;
    object-fit: fill !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-card-shell::after {
    left: calc(var(--desktop-1080-px) * 3) !important;
    top: calc(var(--desktop-1080-px) * 2) !important;
    width: calc(var(--desktop-1080-px) * 285) !important;
    height: calc(var(--desktop-1080-px) * 235) !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-card-number {
    left: calc(var(--desktop-1080-px) * 9) !important;
    top: 0 !important;
    width: calc(var(--desktop-1080-px) * 78) !important;
    height: calc(var(--desktop-1080-px) * 78) !important;
    font-size: calc(var(--desktop-1080-px) * 19) !important;
    background-image: url("./public/assets/world/ui/ui_badge_world_card_1.png") !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-card-copy {
    left: calc(var(--desktop-1080-px) * -6) !important;
    top: calc(var(--desktop-1080-px) * -6) !important;
    z-index: 4 !important;
    width: calc(var(--desktop-1080-px) * 445) !important;
    height: calc(var(--desktop-1080-px) * 250) !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-card-copy h3 {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 101) !important;
    top: calc(var(--desktop-1080-px) * 31) !important;
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    color: #7652cf !important;
    font-size: calc(var(--desktop-1080-px) * 25) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-card-copy h3::before {
    content: none !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-card-copy p {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 17) !important;
    top: calc(var(--desktop-1080-px) * 89) !important;
    width: calc(var(--desktop-1080-px) * 232) !important;
    max-width: none !important;
    margin: 0 !important;
    color: #34324b !important;
    font-size: calc(var(--desktop-1080-px) * 14) !important;
    font-weight: 600 !important;
    line-height: 1.58 !important;
    letter-spacing: 0.035em !important;
  }

}

@media (min-width: 0px) {
  #world.scaled-section > .section-canvas.world-section .world-side-character {
    display: block !important;
    position: absolute !important;
    z-index: 3 !important;
    right: calc(var(--desktop-1080-px) * -365) !important;
    bottom: calc(var(--desktop-1080-px) * -740) !important;
    width: calc(var(--desktop-1080-px) * 1650) !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: bottom right !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

}


@media (min-width: 0px) {
  #character.scaled-section {
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
  }

  #character.scaled-section > .section-canvas.character-section {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    width: var(--desktop-1080-section-width) !important;
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
    max-width: none !important;
    padding: 0 !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: hidden !important;
  }

  #character.scaled-section > .section-canvas.character-section > * {
    translate: 0 0 !important;
  }

  #character.scaled-section > .section-canvas.character-section > .section-title {
    position: absolute !important;
    z-index: 80 !important;
    left: calc(var(--desktop-1080-px) * 69) !important;
    top: calc(var(--desktop-1080-px) * 76) !important;
    width: calc(var(--desktop-1080-px) * 1782) !important;
    max-width: none !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .section-title-main--character,
  #character.scaled-section > .section-canvas.character-section .section-title-subtitle--character {
    position: absolute !important;
    z-index: 81 !important;
    left: calc(var(--desktop-1080-px) * 541) !important;
    top: 0 !important;
    display: block !important;
    width: auto !important;
    height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .section-title-main--character {
    width: calc(var(--desktop-1080-px) * 700) !important;
    height: calc(var(--desktop-1080-px) * 77) !important;
    left: calc(var(--desktop-1080-px) * 541) !important;
  }

  #character.scaled-section > .section-canvas.character-section .section-title-subtitle--character {
    width: calc(var(--desktop-1080-px) * 653) !important;
    height: calc(var(--desktop-1080-px) * 23.5) !important;
    left: calc(var(--desktop-1080-px) * 565) !important;
    margin-top: calc(var(--desktop-1080-px) * 15) !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-title-frame {
    position: relative !important;
    z-index: 82 !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 700) !important;
    height: calc(var(--desktop-1080-px) * 77) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-subtitle-frame {
    position: relative !important;
    z-index: 82 !important;
    top: calc(var(--desktop-1080-px) * 82) !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 653) !important;
    height: calc(var(--desktop-1080-px) * 23.5) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-title-art {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 99) !important;
    top: calc(var(--desktop-1080-px) * 1) !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 502) !important;
    height: calc(var(--desktop-1080-px) * 76) !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
    filter: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-subtitle-art {
    display: block !important;
    position: relative !important;
    left: calc(var(--desktop-1080-px) * -49) !important;
    top: calc(var(--desktop-1080-px) * -128) !important;
    width: calc(var(--desktop-1080-px) * 750) !important;
    height: calc(var(--desktop-1080-px) * 281.5) !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: fill !important;
    object-position: initial !important;
    translate: none !important;
    transform: none !important;
    transform-origin: top left !important;
    filter: none !important;
  }

}

@media (min-width: 0px) {
  #character.scaled-section > .section-canvas.character-section .character-list {
    position: absolute !important;
    z-index: 12 !important;
    left: calc(var(--desktop-1080-px) * 100) !important;
    top: calc(var(--desktop-1080-px) * 144) !important;
    grid-template-columns: repeat(3, calc(var(--desktop-1080-px) * 140)) !important;
    gap: calc(var(--desktop-1080-px) * 15) !important;
    width: calc(var(--desktop-1080-px) * 450) !important;
    margin: 0 !important;
    padding: 0 !important;
    order: initial !important;
    transform: none !important;
    transform-origin: top left !important;
  }

  #character.scaled-section > .section-canvas.character-section .char-card {
    width: calc(var(--desktop-1080-px) * 140) !important;
    height: calc(var(--desktop-1080-px) * 216) !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    align-content: end !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: calc(var(--desktop-1080-px) * 5) !important;
    padding: 0 calc(var(--desktop-1080-px) * 8) calc(var(--desktop-1080-px) * 8) !important;
    background: #fff !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-card-container {
    position: relative !important;
    width: calc(var(--desktop-1080-px) * 140) !important;
    height: calc(var(--desktop-1080-px) * 216) !important;
    min-width: 0 !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-card-container > .char-card {
    width: 100% !important;
    height: 100% !important;
  }

  #character.scaled-section > .section-canvas.character-section .char-card::after {
    z-index: 30 !important;
    background: url("./public/assets/character/ui/ui_frame_character_card_1.webp") center / 100% 100% no-repeat !important;
  }

  #character.scaled-section > .section-canvas.character-section .char-card.is-active::before {
    display: block !important;
    z-index: 60 !important;
    inset: calc(var(--desktop-1080-px) * 2) !important;
    border: calc(var(--desktop-1080-px) * 2) solid rgba(225, 72, 255, 0.88) !important;
    border-radius: 0 !important;
    background: transparent !important;
    filter: blur(calc(var(--desktop-1080-px) * 0.4)) !important;
    box-shadow:
      inset 0 0 calc(var(--desktop-1080-px) * 4) rgba(244, 160, 255, 0.42),
      0 0 calc(var(--desktop-1080-px) * 6) rgba(225, 72, 255, 0.58),
      0 0 calc(var(--desktop-1080-px) * 9) rgba(225, 72, 255, 0.38),
      0 0 calc(var(--desktop-1080-px) * 13) rgba(225, 72, 255, 0.18) !important;
  }

  #character.scaled-section > .section-canvas.character-section .char-card .char-portrait {
    left: calc(var(--desktop-1080-px) * 13) !important;
    top: calc(var(--desktop-1080-px) * 18) !important;
    bottom: auto !important;
    width: calc(var(--desktop-1080-px) * 113) !important;
    height: calc(var(--desktop-1080-px) * 179) !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    border-radius: 0 !important;
  }

  #character.scaled-section > .section-canvas.character-section .char-card[data-character-slot="1"] .char-portrait {
    content: url("./public/assets/character/characters/character_1_card_1.webp") !important;
  }

  #character.scaled-section > .section-canvas.character-section .char-card[data-character-slot="2"] .char-portrait {
    content: url("./public/assets/character/characters/character_2_card_1.webp") !important;
  }

  #character.scaled-section > .section-canvas.character-section .char-card[data-character-slot="3"] .char-portrait {
    content: url("./public/assets/character/characters/character_3_card_1.webp") !important;
  }

  #character.scaled-section > .section-canvas.character-section .char-card .char-attr-icon,
  #character.scaled-section > .section-canvas.character-section .char-card span {
    display: none !important;
  }

}

@media (min-width: 0px) {
  #character.scaled-section > .section-canvas.character-section .character-stage {
    position: absolute !important;
    z-index: 1 !important;
    left: calc(var(--desktop-1080-px) * 760) !important;
    top: calc(var(--desktop-1080-px) * 229) !important;
    width: calc(var(--desktop-1080-px) * 500) !important;
    height: calc(var(--desktop-1080-px) * 770) !important;
    transform: none !important;
    order: initial !important;
    place-items: center !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="5"] {
    top: calc(var(--desktop-1080-px) * 399) !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="7"] {
    left: calc(var(--desktop-1080-px) * 710) !important;
    top: calc(var(--desktop-1080-px) * 254) !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="4"] {
    left: calc(var(--desktop-1080-px) * 748) !important;
    top: calc(var(--desktop-1080-px) * 249) !important;
    width: calc(var(--desktop-1080-px) * 475) !important;
    height: calc(var(--desktop-1080-px) * 732) !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="3"] {
    left: calc(var(--desktop-1080-px) * 635) !important;
    top: calc(var(--desktop-1080-px) * 287) !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage img {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * -248) !important;
    top: calc(var(--desktop-1080-px) * -307) !important;
    width: calc(var(--desktop-1080-px) * 997) !important;
    height: calc(var(--desktop-1080-px) * 1535) !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="1"] #active-character-image {
    left: calc(var(--desktop-1080-px) * -248) !important;
    top: calc(var(--desktop-1080-px) * -192) !important;
    width: calc(var(--desktop-1080-px) * 997) !important;
    height: calc(var(--desktop-1080-px) * 1535) !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="3"] #active-character-image {
    left: calc(var(--desktop-1080-px) * -348) !important;
    top: calc(var(--desktop-1080-px) * -361) !important;
    width: calc(var(--desktop-1080-px) * 1196) !important;
    height: calc(var(--desktop-1080-px) * 1842) !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="2"] #active-character-image {
    left: calc(var(--desktop-1080-px) * -165) !important;
    top: calc(var(--desktop-1080-px) * -164) !important;
    width: calc(var(--desktop-1080-px) * 830) !important;
    height: calc(var(--desktop-1080-px) * 1279) !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="4"] #active-character-image {
    left: calc(var(--desktop-1080-px) * -236) !important;
    top: calc(var(--desktop-1080-px) * -503) !important;
    width: calc(var(--desktop-1080-px) * 947) !important;
    height: calc(var(--desktop-1080-px) * 1458) !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="5"] #active-character-image {
    left: calc(var(--desktop-1080-px) * -552) !important;
    top: calc(var(--desktop-1080-px) * -732) !important;
    width: calc(var(--desktop-1080-px) * 1555) !important;
    height: calc(var(--desktop-1080-px) * 2394) !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="6"] #active-character-image {
    left: calc(var(--desktop-1080-px) * -248) !important;
    top: calc(var(--desktop-1080-px) * -657) !important;
    width: calc(var(--desktop-1080-px) * 997) !important;
    height: calc(var(--desktop-1080-px) * 1535) !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="7"] #active-character-image {
    left: calc(var(--desktop-1080-px) * -248) !important;
    top: calc(var(--desktop-1080-px) * -227) !important;
    width: calc(var(--desktop-1080-px) * 997) !important;
    height: calc(var(--desktop-1080-px) * 1535) !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-stage[data-character="8"] #active-character-image {
    left: calc(var(--desktop-1080-px) * -248) !important;
    top: calc(var(--desktop-1080-px) * -222) !important;
    width: calc(var(--desktop-1080-px) * 997) !important;
    height: calc(var(--desktop-1080-px) * 1535) !important;
    transform: none !important;
  }

  :root[data-site-variant="general"] #character.scaled-section > .section-canvas.character-section .character-stage[data-character="9"] #active-character-image {
    left: calc(var(--desktop-1080-px) * -248) !important;
    top: calc(var(--desktop-1080-px) * -407) !important;
    width: calc(var(--desktop-1080-px) * 997) !important;
    height: calc(var(--desktop-1080-px) * 1535) !important;
    transform: none !important;
  }

}


@media (min-width: 0px) {
  #character.scaled-section > .section-canvas.character-section .character-panel-container {
    --character-panel-width: calc(var(--desktop-1080-px) * 607);
    --character-panel-height: calc(var(--desktop-1080-px) * 776);
    --character-panel-right-shift: calc(var(--desktop-1080-px) * 25);
    --character-panel-right-gap-base: calc(var(--desktop-1080-px) * 44);
    --character-panel-right-gap: calc(var(--character-panel-right-gap-base) - var(--character-panel-right-shift));
    --character-panel-top: calc(var(--desktop-1080-px) * 79);
    position: absolute !important;
    left: auto !important;
    right: var(--character-panel-right-gap) !important;
    top: var(--character-panel-top) !important;
    width: var(--character-panel-width) !important;
    height: var(--character-panel-height) !important;
    min-height: var(--character-panel-height) !important;
    margin: 0 !important;
    padding: calc(var(--desktop-1080-px) * 39) calc(var(--desktop-1080-px) * 44) calc(var(--desktop-1080-px) * 43) !important;
    transform: none !important;
    transform-origin: top right !important;
    order: initial !important;
    overflow: hidden !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(var(--desktop-1080-px) * 39) calc(var(--desktop-1080-px) * 44) calc(var(--desktop-1080-px) * 43) !important;
    transform: none !important;
    transform-origin: center center !important;
    order: initial !important;
    overflow: hidden !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel-copy {
    box-sizing: border-box !important;
    padding: 0 !important;
    margin-top: calc(var(--desktop-1080-px) * 30) !important;
    transform: none !important;
    transform-origin: top center !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-heading {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: calc(var(--desktop-1080-px) * 4) !important;
    margin-top: calc(var(--desktop-1080-px) * 8) !important;
    padding-left: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  #character.scaled-section > .section-canvas.character-section #active-character-icon {
    position: static !important;
    flex: 0 0 auto !important;
    width: calc(var(--desktop-1080-px) * 38) !important;
    height: auto !important;
    margin: calc(var(--desktop-1080-px) * -4) 0 0 !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-heading > div {
    width: auto !important;
    min-width: 0 !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel h3 {
    display: inline-block !important;
    font-size: calc(var(--desktop-1080-px) * 35) !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #character.scaled-section > .section-canvas.character-section .chips {
    gap: calc(var(--desktop-1080-px) * 16) !important;
    margin: calc(var(--desktop-1080-px) * 11) 0 calc(var(--desktop-1080-px) * 14) !important;
  }

  #character.scaled-section > .section-canvas.character-section .chips span {
    min-width: calc(var(--desktop-1080-px) * 90) !important;
    padding: calc(var(--desktop-1080-px) * 5) calc(var(--desktop-1080-px) * 13) !important;
    font-size: calc(var(--desktop-1080-px) * 15) !important;
    line-height: 1.1 !important;
  }

  #character.scaled-section > .section-canvas.character-section .stars {
    font-size: calc(var(--desktop-1080-px) * 22) !important;
    line-height: 1 !important;
    letter-spacing: 0.22em !important;
  }

}

@media (min-width: 0px) {
  #character.scaled-section > .section-canvas.character-section .character-description-box {
    margin: calc(var(--desktop-1080-px) * 25) auto calc(var(--desktop-1080-px) * 26) !important;
    max-width: calc(var(--desktop-1080-px) * 330) !important;
    width: calc(var(--desktop-1080-px) * 327) !important;
    transform: none !important;
    height: calc(var(--desktop-1080-px) * 155) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-description-box p {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: calc(var(--desktop-1080-px) * 17) !important;
    line-height: 1.72 !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel dl {
    position: relative !important;
    width: calc(var(--desktop-1080-px) * 327) !important;
    transform: none !important;
    height: calc(var(--desktop-1080-px) * 115) !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: calc(var(--desktop-1080-px) * 20) calc(var(--desktop-1080-px) * 46) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(109, 116, 174, 0.24) !important;
    background: transparent !important;
    align-content: center !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel dl div {
    grid-template-columns: 1fr !important;
    gap: calc(var(--desktop-1080-px) * 4) !important;
    font-size: calc(var(--desktop-1080-px) * 16) !important;
    line-height: 1.28 !important;
    text-align: left !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel dl::before {
    left: 46% !important;
    top: calc(var(--desktop-1080-px) * 15) !important;
    bottom: calc(var(--desktop-1080-px) * 10) !important;
    transform: none !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel dl div:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    position: relative !important;
    left: calc(var(--desktop-1080-px) * -5) !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel dl div:nth-child(4) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel dl div:nth-child(2) {
    position: relative !important;
    left: calc(var(--desktop-1080-px) * -5) !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel dt,
  #character.scaled-section > .section-canvas.character-section .character-panel dd {
    font-size: calc(var(--desktop-1080-px) * 15) !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  #character.scaled-section > .section-canvas.character-section .character-panel h4,
  #character.scaled-section > .section-canvas.character-section .skill-row {
    display: none !important;
  }

}


@media (min-width: 0px) {
  #preregister.scaled-section {
    position: relative !important;
    z-index: 6 !important;
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section {
    --reward-stack-width: calc(var(--desktop-1080-px) * 1104);
    --reward-stack-top: calc(var(--desktop-1080-px) * 106);
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--desktop-1080-section-width) !important;
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
    max-width: none !important;
    padding: calc(var(--desktop-1080-px) * 66) calc(var(--desktop-1080-px) * 69) calc(var(--desktop-1080-px) * 69) !important;
    padding-right: calc(var(--desktop-1080-px) * 520) !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: hidden !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section > * {
    translate: 0 0 !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section > .section-title {
    position: absolute !important;
    z-index: 80 !important;
    left: calc(var(--desktop-1080-px) * 69) !important;
    top: calc(var(--desktop-1080-px) * 76) !important;
    width: calc(var(--desktop-1080-px) * 1782) !important;
    max-width: none !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .section-title-main--reward,
  #preregister.scaled-section > .section-canvas.reward-section .section-title-subtitle--reward {
    position: absolute !important;
    z-index: 81 !important;
    left: calc(var(--desktop-1080-px) * 541) !important;
    top: 0 !important;
    display: block !important;
    width: auto !important;
    height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .section-title-main--reward {
    width: calc(var(--desktop-1080-px) * 700) !important;
    height: calc(var(--desktop-1080-px) * 77) !important;
    left: calc(var(--desktop-1080-px) * 541) !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .section-title-subtitle--reward {
    width: calc(var(--desktop-1080-px) * 653) !important;
    height: calc(var(--desktop-1080-px) * 23.5) !important;
    left: calc(var(--desktop-1080-px) * 565) !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-title-frame {
    position: relative !important;
    z-index: 82 !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 700) !important;
    height: calc(var(--desktop-1080-px) * 77) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-title-art {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 99) !important;
    top: calc(var(--desktop-1080-px) * 1) !important;
    width: calc(var(--desktop-1080-px) * 502) !important;
    height: calc(var(--desktop-1080-px) * 76) !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-subtitle-frame {
    position: relative !important;
    z-index: 82 !important;
    top: calc(var(--desktop-1080-px) * 82) !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 653) !important;
    height: calc(var(--desktop-1080-px) * 23.5) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-subtitle-art {
    width: calc(var(--desktop-1080-px) * 750) !important;
    height: calc(var(--desktop-1080-px) * 281.5) !important;
    max-width: none !important;
    object-fit: fill !important;
    object-position: initial !important;
    margin-top: 0 !important;
    position: relative !important;
    left: calc(var(--desktop-1080-px) * -49) !important;
    top: calc(var(--desktop-1080-px) * -128) !important;
    translate: none !important;
    transform: none !important;
    transform-origin: top left !important;
  }

}

@media (min-width: 0px) {
  #preregister.scaled-section > .section-canvas.reward-section .reward-content-stack {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 2 !important;
    display: grid !important;
    gap: calc(var(--desktop-1080-px) * 29) !important;
    width: var(--reward-stack-width) !important;
    margin: calc(var(--desktop-1080-px) * 130) 0 0 0 !important;
    transform: none !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-grid,
  #preregister.scaled-section > .section-canvas.reward-section .reward-progress-container,
  #preregister.scaled-section > .section-canvas.reward-section .progress-line-container,
  #preregister.scaled-section > .section-canvas.reward-section .reward-bonus-container {
    width: var(--reward-stack-width) !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-grid {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: calc(var(--desktop-1080-px) * 2.5) !important;
    margin: 0 !important;
    transform: none !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-grid h3 {
    font-size: calc(var(--desktop-1080-px) * 29.5) !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow:
      0 2px 3px rgba(42, 34, 128, 0.82),
      0 0 5px rgba(255, 255, 255, 0.88),
      0 0 10px rgba(255, 255, 255, 0.62),
      0 0 12px rgba(94, 74, 210, 0.32) !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-grid article {
    padding: 0 !important;
    background-image: url("./public/assets/preregister/ui/ui_frame_reward_card_1.webp") !important;
    background-size: 106% 104% !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-icon-stage {
    left: 11% !important;
    right: 11% !important;
    top: 30% !important;
    width: auto !important;
    height: 38% !important;
    margin: 0 !important;
    transform: none !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-grid img.reward-icon {
    left: calc(50% - calc(var(--desktop-1080-px) * 72)) !important;
    top: calc(50% - calc(var(--desktop-1080-px) * 72)) !important;
    width: calc(var(--desktop-1080-px) * 143) !important;
    height: calc(var(--desktop-1080-px) * 143) !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: scale(1.5) !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-grid img.reward-stamp {
    left: calc(50% - calc(var(--desktop-1080-px) * 46)) !important;
    top: calc(50% - calc(var(--desktop-1080-px) * 46)) !important;
    width: calc(var(--desktop-1080-px) * 92) !important;
    transform: rotate(10deg) scale(0.9) !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-grid p {
    position: absolute !important;
    left: 9% !important;
    right: 9% !important;
    top: 70% !important;
    transform: translateY(calc(var(--desktop-1080-px) * 20)) !important;
    min-height: 8% !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    color: #38299f !important;
    font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif !important;
    font-size: calc(var(--desktop-1080-px) * 20.5) !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,0.96),
      0 0 12px rgba(255,255,255,0.76),
      0 2px 4px rgba(92, 82, 201, 0.14) !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-grid .reward-inline-number {
    font-family: inherit !important;
    font-size: calc(var(--desktop-1080-px) * 21.5) !important;
    display: inline-block;
    transform: translateY(-0.14em);
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-grid article:not(.is-achieved) p {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .reward-grid b {
    position: absolute !important;
    left: 9% !important;
    right: 9% !important;
    top: 79% !important;
    transform: translateY(calc(var(--desktop-1080-px) * 20)) !important;
    min-height: 7% !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    color: #38299f !important;
    font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif !important;
    font-variant-numeric: lining-nums tabular-nums !important;
    font-feature-settings: "lnum" 1, "tnum" 1 !important;
    font-size: calc(var(--desktop-1080-px) * 22) !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,0.96),
      0 0 12px rgba(255,255,255,0.76),
      0 2px 4px rgba(92, 82, 201, 0.14) !important;
  }

}

@media (min-width: 0px) {
  #preregister.scaled-section > .section-canvas.reward-section .reward-progress-container,
  #preregister.scaled-section > .section-canvas.reward-section .progress-line-container,
  #preregister.scaled-section > .section-canvas.reward-section .reward-bonus-container {
    margin: 0 !important;
    place-items: center !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .progress-line {
    width: 100% !important;
    height: calc(var(--desktop-1080-px) * 32) !important;
    margin: 0 auto !important;
    column-gap: calc(var(--desktop-1080-px) * 2) !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .progress-line span {
    width: calc(var(--desktop-1080-px) * 48.3) !important;
    height: calc(var(--desktop-1080-px) * 52.5) !important;
    background-image: url("./public/assets/preregister/icons/ui_icon_progress_diamond_1.webp") !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .bonus-card.bonus-card-art {
    width: 100% !important;
    height: calc(var(--desktop-1080-px) * 215) !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .bonus-card.bonus-card-art .reward-bonus-art {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  #preregister.scaled-section > .section-canvas.reward-section .bonus-card.bonus-card-art .reward-bonus-number {
    left: calc(11.2% - calc(var(--desktop-1080-px) * 45)) !important;
    top: calc(48% - calc(var(--desktop-1080-px) * 42)) !important;
    font-size: calc(var(--desktop-1080-px) * 54) !important;
    transform: none !important;
  }

}

@media (min-width: 0px) {
  #preregister.scaled-section > .section-canvas.reward-section .side-character {
    display: block !important;
    right: calc(var(--desktop-1080-px) * -110) !important;
    bottom: calc(var(--desktop-1080-px) * -460) !important;
    width: calc(var(--desktop-1080-px) * 1155) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: bottom right !important;
    transform: none !important;
    transform-origin: bottom right !important;
  }

}


@media (min-width: 0px) {
  #movie.scaled-section {
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
  }

  #movie.scaled-section > .section-canvas.movie-section {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--desktop-1080-section-width) !important;
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
    max-width: none !important;
    padding: calc(var(--desktop-1080-px) * 1) calc(var(--desktop-1080-px) * 52) calc(var(--desktop-1080-px) * 74) !important;
    padding-right: calc(var(--desktop-1080-px) * 52) !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: hidden !important;
  }

  #movie.scaled-section > .section-canvas.movie-section > * {
    translate: 0 0 !important;
  }

  #movie.scaled-section > .section-canvas.movie-section > .section-title {
    position: absolute !important;
    z-index: 80 !important;
    left: calc(var(--desktop-1080-px) * 69) !important;
    top: calc(var(--desktop-1080-px) * 76) !important;
    width: calc(var(--desktop-1080-px) * 1782) !important;
    max-width: none !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .section-title-main--movie,
  #movie.scaled-section > .section-canvas.movie-section .section-title-subtitle--movie {
    position: absolute !important;
    z-index: 81 !important;
    left: calc(var(--desktop-1080-px) * 541) !important;
    top: 0 !important;
    display: block !important;
    width: auto !important;
    height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .section-title-main--movie {
    width: calc(var(--desktop-1080-px) * 700) !important;
    height: calc(var(--desktop-1080-px) * 77) !important;
    left: calc(var(--desktop-1080-px) * 541) !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .section-title-subtitle--movie {
    width: calc(var(--desktop-1080-px) * 653) !important;
    height: calc(var(--desktop-1080-px) * 23.5) !important;
    left: calc(var(--desktop-1080-px) * 565) !important;
    margin-top: calc(var(--desktop-1080-px) * 15) !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .movie-title-frame {
    position: relative !important;
    z-index: 82 !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 700) !important;
    height: calc(var(--desktop-1080-px) * 77) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .movie-subtitle-frame {
    position: relative !important;
    z-index: 82 !important;
    top: calc(var(--desktop-1080-px) * 82) !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 653) !important;
    height: calc(var(--desktop-1080-px) * 23.5) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .movie-title-art {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 99) !important;
    top: calc(var(--desktop-1080-px) * 1) !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 502) !important;
    height: calc(var(--desktop-1080-px) * 76) !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
    filter: none !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .movie-subtitle-art {
    display: block !important;
    position: relative !important;
    left: calc(var(--desktop-1080-px) * -49) !important;
    top: calc(var(--desktop-1080-px) * -128) !important;
    width: calc(var(--desktop-1080-px) * 750) !important;
    height: calc(var(--desktop-1080-px) * 281.5) !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: fill !important;
    object-position: initial !important;
    translate: none !important;
    transform: none !important;
    transform-origin: top left !important;
    filter: none !important;
  }

}

@media (min-width: 0px) {
  #movie.scaled-section > .section-canvas.movie-section .movie-card {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    transform: none !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .movie-frame-container {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 219) !important;
    top: calc(var(--desktop-1080-px) * 123) !important;
    width: calc(var(--desktop-1080-px) * 1483) !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .movie-thumb {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: visible !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .movie-player {
    left: calc(12% + calc(var(--desktop-1080-px) * 38)) !important;
    top: calc(12% + calc(var(--desktop-1080-px) * 38)) !important;
    width: calc(76% - calc(var(--desktop-1080-px) * 76)) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  #movie.scaled-section > .section-canvas.movie-section .movie-frame-art {
    left: calc(10.13% + calc(var(--desktop-1080-px) * 23.5)) !important;
    top: calc(8.51% + calc(var(--desktop-1080-px) * 23.5)) !important;
    width: calc(79.67% - calc(var(--desktop-1080-px) * 47)) !important;
    height: calc(84.24% - calc(var(--desktop-1080-px) * 14)) !important;
    object-fit: fill !important;
  }

}

@media (min-width: 0px) {
  #movie.scaled-section > .section-canvas.movie-section .side-character {
    display: none !important;
  }

}


@media (min-width: 0px) {
  #requirements.scaled-section {
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--desktop-1080-section-width) !important;
    height: var(--desktop-1080-section-height) !important;
    min-height: var(--desktop-1080-section-height) !important;
    max-width: none !important;
    padding: calc(var(--desktop-1080-px) * 1) calc(var(--desktop-1080-px) * 38) calc(var(--desktop-1080-px) * 56) !important;
    padding-right: calc(var(--desktop-1080-px) * 38) !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: hidden !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section > * {
    translate: 0 0 !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section > .section-title {
    width: calc(var(--desktop-1080-px) * 1782) !important;
    max-width: none !important;
    margin: 0 0 calc(var(--desktop-1080-px) * 6) calc(var(--desktop-1080-px) * 31) !important;
    translate: 0 0 !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-title-art {
    width: calc(var(--desktop-1080-px) * 434) !important;
    height: calc(var(--desktop-1080-px) * 84) !important;
    object-fit: cover !important;
    object-position: center center !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-subtitle-art {
    width: calc(var(--desktop-1080-px) * 680) !important;
    margin-top: calc(var(--desktop-1080-px) * -78) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .section-title p {
    margin-top: calc(var(--desktop-1080-px) * 15) !important;
    font-size: calc(var(--desktop-1080-px) * 21) !important;
  }

}

@media (min-width: 0px) {
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-top-container,
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-bottom-container {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 2 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    translate: none !important;
    transform-origin: center center !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-top-container {
    left: calc(var(--desktop-1080-px) * 318) !important;
    top: calc(var(--desktop-1080-px) * 198) !important;
    width: calc(var(--desktop-1080-px) * 1285) !important;
    height: calc(var(--desktop-1080-px) * 489) !important;
    transform: none !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-bottom-container {
    width: calc(var(--desktop-1080-px) * 633) !important;
    height: calc(var(--desktop-1080-px) * 291) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-bottom-container--environment {
    left: calc(var(--desktop-1080-px) * 318) !important;
    top: calc(var(--desktop-1080-px) * 652) !important;
    transform: none !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-bottom-container--x {
    left: calc(var(--desktop-1080-px) * 969) !important;
    top: calc(var(--desktop-1080-px) * 652) !important;
    transform: none !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-bottom-container {
    z-index: var(--edge-mist-content-z) !important;
  }

}

@media (min-width: 0px) {
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-grid,
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-bottom {
    width: calc(var(--desktop-1080-px) * 1284.5) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: calc(var(--desktop-1080-px) * 18) !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-card {
    min-height: calc(var(--desktop-1080-px) * 400) !important;
    padding: calc(var(--desktop-1080-px) * 27.5) calc(var(--desktop-1080-px) * 19.5) calc(var(--desktop-1080-px) * 22.5) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-card::before {
    content: none !important;
    display: none !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-card-head {
    grid-template-columns: calc(var(--desktop-1080-px) * 58.5) minmax(0, 1fr) !important;
    gap: calc(var(--desktop-1080-px) * 11.5) !important;
    min-height: calc(var(--desktop-1080-px) * 48.5) !important;
    margin-bottom: calc(var(--desktop-1080-px) * 9) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-card h3 {
    font-size: calc(var(--desktop-1080-px) * 22) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-pill {
    height: calc(var(--desktop-1080-px) * 42) !important;
    margin-bottom: calc(var(--desktop-1080-px) * 9) !important;
    font-size: calc(var(--desktop-1080-px) * 16.5) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-pill img {
    top: 50% !important;
    bottom: auto !important;
    height: calc(var(--desktop-1080-px) * 50) !important;
    transform: translateY(-50%) !important;
    transform-origin: center center !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-specs {
    box-sizing: border-box !important;
    padding-left: calc(var(--desktop-1080-px) * 22) !important;
    color: #5e57c9 !important;
    font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif !important;
    font-size: calc(var(--desktop-1080-px) * 13.5) !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.62 !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,0.96),
      0 0 12px rgba(255,255,255,0.76),
      0 2px 4px rgba(92, 82, 201, 0.14) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-specs dt,
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-specs dd {
    font: inherit !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-specs dt {
    color: #7770e8 !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-specs dd {
    color: #5e57c9 !important;
    white-space: nowrap !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-specs div {
    grid-template-columns: 1fr !important;
    gap: calc(var(--desktop-1080-px) * 5) !important;
    min-height: calc(var(--desktop-1080-px) * 39) !important;
    padding: calc(var(--desktop-1080-px) * 7) 0 !important;
    background: transparent !important;
  }

}

@media (min-width: 0px) {
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-bottom {
    display: contents !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-environment,
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-x-panel {
    position: relative !important;
    width: 100% !important;
    height: calc(var(--desktop-1080-px) * 291) !important;
    min-height: calc(var(--desktop-1080-px) * 291) !important;
    margin: 0 !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-environment::before,
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-x-panel::before {
    content: none !important;
    display: none !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-env-content {
    box-sizing: border-box !important;
    padding: calc(var(--desktop-1080-px) * 94) calc(var(--desktop-1080-px) * 49) calc(var(--desktop-1080-px) * 20) !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-env-content h3 {
    margin-bottom: calc(var(--desktop-1080-px) * 8) !important;
    font-size: calc(var(--desktop-1080-px) * 34) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-env-options {
    gap: calc(var(--desktop-1080-px) * 10) !important;
    margin-top: calc(var(--desktop-1080-px) * -20) !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-env-options span {
    grid-template-rows: calc(var(--desktop-1080-px) * 37) auto !important;
    gap: calc(var(--desktop-1080-px) * 4) !important;
    font-size: calc(var(--desktop-1080-px) * 16) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-env-options img {
    width: calc(var(--desktop-1080-px) * 37) !important;
    height: calc(var(--desktop-1080-px) * 37) !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-x-content {
    align-items: center !important;
    justify-content: center !important;
    gap: calc(var(--desktop-1080-px) * 14) !important;
    box-sizing: border-box !important;
    padding: calc(var(--desktop-1080-px) * 30) calc(var(--desktop-1080-px) * 36.5) !important;
    text-align: center !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-x-content p {
    width: 100% !important;
    margin: 0 !important;
    font-size: calc(var(--desktop-1080-px) * 22) !important;
    line-height: 1.34 !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-x-button {
    width: calc(var(--desktop-1080-px) * 455) !important;
    height: calc(var(--desktop-1080-px) * 59.5) !important;
    margin: 0 auto !important;
    padding: 0 calc(var(--desktop-1080-px) * 41.5) !important;
    font-size: calc(var(--desktop-1080-px) * 23) !important;
  }

  #requirements.scaled-section > .section-canvas.requirements-section .requirements-x-button .requirements-x-icon {
    width: calc(var(--desktop-1080-px) * 41.5) !important;
  }

}

@media (min-width: 0px) {
  #requirements.scaled-section > .section-canvas.requirements-section .side-character {
    display: none !important;
  }

}


@media (min-width: 0px) {
  #world.scaled-section > .section-canvas.world-section > .section-title,
  #news.scaled-section > .section-canvas.news-section > .section-title,
  #requirements.scaled-section > .section-canvas.requirements-section > .section-title {
    position: absolute !important;
    z-index: 80 !important;
    left: calc(var(--desktop-1080-px) * 69) !important;
    top: calc(var(--desktop-1080-px) * 76) !important;
    width: calc(var(--desktop-1080-px) * 1782) !important;
    max-width: none !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  #world.scaled-section > .section-canvas.world-section .section-title-main--world,
  #world.scaled-section > .section-canvas.world-section .section-title-subtitle--world,
  #news.scaled-section > .section-canvas.news-section .section-title-main--news,
  #news.scaled-section > .section-canvas.news-section .section-title-subtitle--news,
  #requirements.scaled-section > .section-canvas.requirements-section .section-title-main--requirements,
  #requirements.scaled-section > .section-canvas.requirements-section .section-title-subtitle--requirements {
    position: absolute !important;
    z-index: 81 !important;
    left: calc(var(--desktop-1080-px) * 541) !important;
    top: 0 !important;
    display: block !important;
    width: auto !important;
    height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #world.scaled-section > .section-canvas.world-section .section-title-main--world,
  #news.scaled-section > .section-canvas.news-section .section-title-main--news,
  #requirements.scaled-section > .section-canvas.requirements-section .section-title-main--requirements {
    width: calc(var(--desktop-1080-px) * 700) !important;
    height: calc(var(--desktop-1080-px) * 77) !important;
    left: calc(var(--desktop-1080-px) * 541) !important;
  }

  #world.scaled-section > .section-canvas.world-section .section-title-subtitle--world,
  #news.scaled-section > .section-canvas.news-section .section-title-subtitle--news,
  #requirements.scaled-section > .section-canvas.requirements-section .section-title-subtitle--requirements {
    width: calc(var(--desktop-1080-px) * 653) !important;
    height: calc(var(--desktop-1080-px) * 23.5) !important;
    left: calc(var(--desktop-1080-px) * 565) !important;
    margin-top: calc(var(--desktop-1080-px) * 15) !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-title-frame,
  #news.scaled-section > .section-canvas.news-section .news-title-frame,
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-title-frame {
    position: relative !important;
    z-index: 82 !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 700) !important;
    height: calc(var(--desktop-1080-px) * 77) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-subtitle-frame,
  #news.scaled-section > .section-canvas.news-section .news-subtitle-frame,
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-subtitle-frame {
    position: relative !important;
    z-index: 82 !important;
    top: calc(var(--desktop-1080-px) * 82) !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 653) !important;
    height: calc(var(--desktop-1080-px) * 23.5) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-title-art,
  #news.scaled-section > .section-canvas.news-section .news-title-art,
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-title-art {
    position: absolute !important;
    left: calc(var(--desktop-1080-px) * 99) !important;
    top: calc(var(--desktop-1080-px) * 1) !important;
    display: block !important;
    width: calc(var(--desktop-1080-px) * 502) !important;
    height: calc(var(--desktop-1080-px) * 76) !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
    filter: none !important;
  }

  #world.scaled-section > .section-canvas.world-section .world-subtitle-art,
  #news.scaled-section > .section-canvas.news-section .news-subtitle-art,
  #requirements.scaled-section > .section-canvas.requirements-section .requirements-subtitle-art {
    display: block !important;
    position: relative !important;
    left: calc(var(--desktop-1080-px) * -49) !important;
    top: calc(var(--desktop-1080-px) * -128) !important;
    width: calc(var(--desktop-1080-px) * 750) !important;
    height: calc(var(--desktop-1080-px) * 281.5) !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: fill !important;
    object-position: initial !important;
    translate: none !important;
    transform: none !important;
    transform-origin: top left !important;
    filter: none !important;
  }
}


@media (max-width: 1279px) {
  body,
  main {
    overflow-x: hidden !important;
  }

  html.is-desktop-720-crop #top.top-section,
  html.is-desktop-720-crop #preregister.scaled-section,
  html.is-desktop-720-crop #character.scaled-section,
  html.is-desktop-720-crop #game.scaled-section,
  html.is-desktop-720-crop #movie.scaled-section,
  html.is-desktop-720-crop #world.scaled-section,
  html.is-desktop-720-crop #news.scaled-section,
  html.is-desktop-720-crop #requirements.scaled-section {
    width: 100vw !important;
    height: 720px !important;
    min-height: 720px !important;
    overflow: hidden !important;
  }

  html.is-desktop-720-crop #top.top-section > .top-artboard {
    width: 100vw !important;
    height: 56.25vw !important;
    transform: scale(var(--desktop-720-crop-scale, 1)) !important;
    transform-origin: top left !important;
  }

  html.is-desktop-720-crop #preregister.scaled-section > .section-canvas.reward-section,
  html.is-desktop-720-crop #character.scaled-section > .section-canvas.character-section,
  html.is-desktop-720-crop #game.scaled-section > .section-canvas.game-section,
  html.is-desktop-720-crop #movie.scaled-section > .section-canvas.movie-section,
  html.is-desktop-720-crop #world.scaled-section > .section-canvas.world-section,
  html.is-desktop-720-crop #news.scaled-section > .section-canvas.news-section,
  html.is-desktop-720-crop #requirements.scaled-section > .section-canvas.requirements-section {
    --edge-mist-local-height: calc(17.1875vw / var(--desktop-720-crop-scale, 1));
    --edge-mist-top:
      linear-gradient(to bottom, rgba(255, 255, 255, 1) 0 calc(0.885417vw / var(--desktop-720-crop-scale, 1)), rgba(255, 255, 255, 0.97) calc(2.5vw / var(--desktop-720-crop-scale, 1)), rgba(255, 255, 255, 0.72) calc(4.739583vw / var(--desktop-720-crop-scale, 1)), rgba(255, 255, 255, 0.34) calc(8.59375vw / var(--desktop-720-crop-scale, 1)), rgba(255, 255, 255, 0.1) calc(14.0625vw / var(--desktop-720-crop-scale, 1)), transparent calc(17.1875vw / var(--desktop-720-crop-scale, 1))),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.44) 0 calc(3.541667vw / var(--desktop-720-crop-scale, 1)), rgba(255, 255, 255, 0.15) calc(9.114583vw / var(--desktop-720-crop-scale, 1)), transparent calc(16.145833vw / var(--desktop-720-crop-scale, 1))),
      radial-gradient(ellipse 46% 66% at 18% -10%, rgba(255, 255, 255, 0.56) 0 18%, rgba(255, 255, 255, 0.2) 48%, transparent 82%),
      radial-gradient(ellipse 54% 68% at 72% -8%, rgba(255, 255, 255, 0.5) 0 18%, rgba(255, 255, 255, 0.18) 48%, transparent 82%);
    --edge-mist-bottom:
      linear-gradient(to top, rgba(255, 255, 255, 1) 0 calc(0.885417vw / var(--desktop-720-crop-scale, 1)), rgba(255, 255, 255, 0.97) calc(2.5vw / var(--desktop-720-crop-scale, 1)), rgba(255, 255, 255, 0.72) calc(4.739583vw / var(--desktop-720-crop-scale, 1)), rgba(255, 255, 255, 0.34) calc(8.59375vw / var(--desktop-720-crop-scale, 1)), rgba(255, 255, 255, 0.1) calc(14.0625vw / var(--desktop-720-crop-scale, 1)), transparent calc(17.1875vw / var(--desktop-720-crop-scale, 1))),
      linear-gradient(to top, rgba(255, 255, 255, 0.44) 0 calc(3.541667vw / var(--desktop-720-crop-scale, 1)), rgba(255, 255, 255, 0.15) calc(9.114583vw / var(--desktop-720-crop-scale, 1)), transparent calc(16.145833vw / var(--desktop-720-crop-scale, 1))),
      radial-gradient(ellipse 46% 66% at 18% 110%, rgba(255, 255, 255, 0.56) 0 18%, rgba(255, 255, 255, 0.2) 48%, transparent 82%),
      radial-gradient(ellipse 54% 68% at 72% 108%, rgba(255, 255, 255, 0.5) 0 18%, rgba(255, 255, 255, 0.18) 48%, transparent 82%);
    width: 100vw !important;
    height: 56.25vw !important;
    min-height: 56.25vw !important;
    transform: scale(var(--desktop-720-crop-scale, 1)) !important;
    transform-origin: top left !important;
  }
}


:root {
  --edge-mist-layer-z: 3;
  --edge-mist-art-z: 1;
  --edge-mist-content-z: 6;
  --edge-mist-height: 660px;
  --edge-mist-side-bleed: -16%;
  --edge-mist-blur: 2px;
  --edge-mist-opacity: 1;
  --edge-seam-top-height: 24px;
  --edge-seam-bottom-height: 48px;
  --edge-mist-top:
    linear-gradient(to bottom, rgba(255, 255, 255, 1) 0 34px, rgba(255, 255, 255, 0.97) 96px, rgba(255, 255, 255, 0.72) 182px, rgba(255, 255, 255, 0.34) 330px, rgba(255, 255, 255, 0.1) 540px, transparent 660px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.44) 0 136px, rgba(255, 255, 255, 0.15) 350px, transparent 620px),
    radial-gradient(ellipse 46% 66% at 18% -10%, rgba(255, 255, 255, 0.56) 0 18%, rgba(255, 255, 255, 0.2) 48%, transparent 82%),
    radial-gradient(ellipse 54% 68% at 72% -8%, rgba(255, 255, 255, 0.5) 0 18%, rgba(255, 255, 255, 0.18) 48%, transparent 82%);
  --edge-mist-bottom:
    linear-gradient(to top, rgba(255, 255, 255, 1) 0 34px, rgba(255, 255, 255, 0.97) 96px, rgba(255, 255, 255, 0.72) 182px, rgba(255, 255, 255, 0.34) 330px, rgba(255, 255, 255, 0.1) 540px, transparent 660px),
    linear-gradient(to top, rgba(255, 255, 255, 0.44) 0 136px, rgba(255, 255, 255, 0.15) 350px, transparent 620px),
    radial-gradient(ellipse 46% 66% at 18% 110%, rgba(255, 255, 255, 0.56) 0 18%, rgba(255, 255, 255, 0.2) 48%, transparent 82%),
    radial-gradient(ellipse 54% 68% at 72% 108%, rgba(255, 255, 255, 0.5) 0 18%, rgba(255, 255, 255, 0.18) 48%, transparent 82%);
  --top-edge-mist-height: 420px;
  --top-edge-bridge-height: 300px;
  --top-edge-bridge-offset: -132px;
}

/* Keep section-shell pseudo borders disabled; mist is hosted inside each canvas. */
#top::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#top {
  z-index: 2;
  overflow: visible;
}

#top > .top-artboard {
  z-index: 4;
}

#top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--top-edge-bridge-offset);
  z-index: 5;
  display: block !important;
  height: var(--top-edge-bridge-height);
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0,
    rgba(255, 255, 255, 0.72) 22%,
    #fff 48%,
    rgba(255, 255, 255, 0.82) 70%,
    transparent 100%
  );
}

#top > .top-artboard::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -1px;
  z-index: var(--edge-mist-layer-z);
  display: block !important;
  height: var(--top-edge-mist-height);
  border: 0 !important;
  box-shadow: none !important;
  opacity: var(--edge-mist-opacity);
  pointer-events: none;
  background: var(--edge-mist-bottom);
  background-repeat: no-repeat;
  filter: blur(var(--edge-mist-blur));
  transform: translateZ(0);
}

.scaled-section {
  position: relative;
  overflow: hidden !important;
  background: #fff !important;
}

.scaled-section::before,
.scaled-section::after {
  content: "";
  position: absolute;
  inset: auto 0;
  left: 0;
  right: 0;
  z-index: 7;
  display: block !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.scaled-section::before {
  top: 0;
  bottom: auto;
  height: var(--edge-seam-top-height);
  background: linear-gradient(
    to bottom,
    #fff 0 6px,
    rgba(255, 255, 255, 0.88) 12px,
    rgba(255, 255, 255, 0.34) 20px,
    transparent 24px
  );
}

.scaled-section::after {
  top: auto;
  bottom: 0;
  height: var(--edge-seam-bottom-height);
  background: linear-gradient(
    to top,
    #fff 0 12px,
    rgba(255, 255, 255, 0.92) 22px,
    rgba(255, 255, 255, 0.42) 38px,
    transparent 48px
  );
}

.scaled-section > .section-canvas {
  --edge-mist-local-height: var(--edge-mist-height);
  --edge-mist-local-bleed: var(--edge-mist-side-bleed);
  position: absolute !important;
  isolation: isolate;
}

.scaled-section > .section-canvas.section::before,
.scaled-section > .section-canvas.section::after {
  border: 0 !important;
  box-shadow: none !important;
}

.scaled-section > .section-canvas::before,
.scaled-section > .section-canvas::after {
  content: "";
  position: absolute;
  left: var(--edge-mist-local-bleed);
  right: var(--edge-mist-local-bleed);
  z-index: var(--edge-mist-layer-z);
  display: block !important;
  height: var(--edge-mist-local-height);
  border: 0 !important;
  box-shadow: none !important;
  opacity: var(--edge-mist-opacity);
  pointer-events: none;
  background-repeat: no-repeat;
  filter: blur(var(--edge-mist-blur));
  transform: translateZ(0);
}

.scaled-section > .section-canvas::before {
  top: -1px;
  bottom: auto;
  background: var(--edge-mist-top);
}

.scaled-section > .section-canvas::after {
  top: auto;
  bottom: -1px;
  background: var(--edge-mist-bottom);
}

.scaled-section > .section-canvas > .side-character,
.scaled-section > .section-canvas > .character-stage {
  z-index: var(--edge-mist-art-z) !important;
}

.scaled-section > .section-canvas > .section-title,
.scaled-section > .section-canvas > .reward-content-stack,
.scaled-section > .section-canvas > .reward-grid,
.scaled-section > .section-canvas > .reward-progress-container,
.scaled-section > .section-canvas > .reward-bonus-container,
.scaled-section > .section-canvas > .progress-line-container,
.scaled-section > .section-canvas > .bonus-card,
.scaled-section > .section-canvas > .character-list,
.scaled-section > .section-canvas > .character-panel-container,
.scaled-section > .section-canvas > .character-panel,
.scaled-section > .section-canvas > .game-grid,
.scaled-section > .section-canvas > .movie-card,
.scaled-section > .section-canvas > .movie-prereg-title,
.scaled-section > .section-canvas > .world-hero,
.scaled-section > .section-canvas > .world-cards,
.scaled-section > .section-canvas > .world-bottom-copy,
.scaled-section > .section-canvas > .news-tabs,
.scaled-section > .section-canvas > .news-layout,
.scaled-section > .section-canvas > .news-note-art,
.scaled-section > .section-canvas > .requirements-top-container,
.scaled-section > .section-canvas > .requirements-grid,
.scaled-section > .section-canvas > .requirements-bottom {
  position: relative;
  z-index: var(--edge-mist-content-z) !important;
}

.site-footer {
  border-top-color: transparent;
}

@media (max-width: 768px) {
  :root {
    --edge-mist-height: 360px;
    --edge-mist-side-bleed: -22%;
    --edge-mist-blur: 1px;
    --edge-seam-top-height: 18px;
    --edge-seam-bottom-height: 34px;
    --edge-mist-top:
      linear-gradient(to bottom, rgba(255, 255, 255, 1) 0 18px, rgba(255, 255, 255, 0.97) 52px, rgba(255, 255, 255, 0.72) 99px, rgba(255, 255, 255, 0.34) 180px, rgba(255, 255, 255, 0.1) 294px, transparent 360px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.44) 0 74px, rgba(255, 255, 255, 0.15) 191px, transparent 338px),
      radial-gradient(ellipse 46% 66% at 18% -10%, rgba(255, 255, 255, 0.56) 0 18%, rgba(255, 255, 255, 0.2) 48%, transparent 82%),
      radial-gradient(ellipse 54% 68% at 72% -8%, rgba(255, 255, 255, 0.5) 0 18%, rgba(255, 255, 255, 0.18) 48%, transparent 82%);
    --edge-mist-bottom:
      linear-gradient(to top, rgba(255, 255, 255, 1) 0 18px, rgba(255, 255, 255, 0.97) 52px, rgba(255, 255, 255, 0.72) 99px, rgba(255, 255, 255, 0.34) 180px, rgba(255, 255, 255, 0.1) 294px, transparent 360px),
      linear-gradient(to top, rgba(255, 255, 255, 0.44) 0 74px, rgba(255, 255, 255, 0.15) 191px, transparent 338px),
      radial-gradient(ellipse 46% 66% at 18% 110%, rgba(255, 255, 255, 0.56) 0 18%, rgba(255, 255, 255, 0.2) 48%, transparent 82%),
      radial-gradient(ellipse 54% 68% at 72% 108%, rgba(255, 255, 255, 0.5) 0 18%, rgba(255, 255, 255, 0.18) 48%, transparent 82%);
    --top-edge-mist-height: 260px;
    --top-edge-bridge-height: 180px;
    --top-edge-bridge-offset: -78px;
  }

  #top > .top-artboard::after {
    left: -14%;
    right: -14%;
  }
}

.movie-thumb {
  isolation: isolate;
  --movie-player-left: calc(12% + 76px);
  --movie-player-top: calc(12% + 76px);
  --movie-player-width: calc(76% - 152px);
}

.movie-player {
  left: var(--movie-player-left);
  top: var(--movie-player-top);
  width: var(--movie-player-width);
  height: auto;
  aspect-ratio: 16 / 9;
}

.movie-frame-art {
  left: calc(10.13% + 47px);
  top: calc(8.51% + 47px);
  z-index: 10;
  width: calc(79.67% - 94px);
  height: calc(84.24% - 28px);
  object-fit: fill;
  mix-blend-mode: normal;
  pointer-events: none;
}

.game-card::before {
  inset: -17px 30px -9px;
  background: url("./public/assets/game/ui/ui_frame_game_intro_card_1.png") center / 100% 100% no-repeat;
}

.scaled-section > .section-canvas .game-card::before {
  inset: -17px 30px -9px !important;
  background: url("./public/assets/game/ui/ui_frame_game_intro_card_1.png") center / 100% 100% no-repeat !important;
}

.char-card .char-portrait {
  z-index: 40;
}

.char-card .char-attr-icon,
.char-card span {
  z-index: 42;
}