:root {
  --ink           : #222;
  --blue          : #1e90ff;
  --green         : #0bffae;
  --s             : 1;
  --stage-gutter-y: 0px;
  --stage-crop-y  : 0px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin     : 0;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color      : var(--ink);
  background : #121517;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

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

button {
  font  : inherit;
  color : inherit;
  cursor: pointer;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible {
  outline       : 2px solid var(--blue);
  outline-offset: 6px;
}

button {
  border    : 0;
  background: none;
  padding   : 0;
}

img {
  display: block;
}

section,
footer {
  position : relative;
  overflow : hidden;
  width    : 100%;
  isolation: isolate;
}

.screen {
  height    : 100svh;
  background: #f6f7f9;
}

.stage {
  position        : absolute;
  left            : 0;
  top             : 50%;
  margin-top      : calc(-540px * var(--s));
  width           : 1920px;
  height          : 1080px;
  transform       : scale(var(--s));
  transform-origin: 0 0;
}

#home {
  background: #03050a;
  color     : white;
}

.hero-aurora {
  position      : absolute;
  inset         : 0;
  width         : 100%;
  height        : 100%;
  pointer-events: none;
}

.hero-blurs {
  position      : absolute;
  inset         : 0;
  pointer-events: none;
}

.hero-blurs img {
  position      : absolute;
  mix-blend-mode: hard-light;
}

.blur-one {
  width : 1932px;
  height: 1658px;
  left  : 274px;
  top   : -838px;
}

.blur-two {
  width : 1686px;
  height: 1484px;
  left  : 1013px;
  top   : 293px;
}

.blur-three {
  width : 1932px;
  height: 1658px;
  left  : -1113px;
  top   : -650px;
}

.hero-title {
  position: absolute;
  left    : 92px;
  top     : 309px;
  width   : 1756px;
  font    :
    700 120px/141px "Afacad Flux",
    sans-serif;
  text-align: center;
}

.hero-title span {
  display: block;
}

.hero-title span+span {
  line-height            : 170px;
  background             : linear-gradient(90deg, #0bffae 29.413%, #1e90ff 51.146%);
  background-clip        : text;
  -webkit-background-clip: text;
  color                  : transparent;
}

.site-header {
  position   : fixed;
  z-index    : 50;
  top        : 0;
  width      : 100%;
  height     : calc(102px * var(--s));
  min-height : 64px;
  display    : flex;
  align-items: center;
  padding    : 0 6.97917%;
  color      : #fff;
  transition :
    background 0.3s,
    color 0.3s;
  gap: 24px;
}

.site-header.light {
  background     : #ffffffd9;
  backdrop-filter: blur(18px);
  color          : #173650;
  border-bottom  : 1px solid #1736500c;
}

.brand {
  width     : calc(200px * var(--s));
  height    : calc(37.172px * var(--s));
  min-width : 140px;
  min-height: 26px;
}

.brand img {
  width     : 100%;
  height    : 100%;
  object-fit: contain;
}

.site-header.light .brand img {
  filter: brightness(0);
}

.site-header nav {
  position   : absolute;
  left       : 41.1458%;
  display    : flex;
  gap        : calc(26px * var(--s));
  white-space: nowrap;
  font-size  : calc(16px * var(--s));
}

.site-header nav a {
  position: relative;
  padding : 12px 0;
}

.site-header nav a[aria-current="page"]:after {
  content   : "";
  height    : 2px;
  position  : absolute;
  bottom    : calc(-14px * var(--s));
  left      : 0;
  width     : 100%;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.languages {
  margin-left: auto;
  display    : flex;
  align-items: center;
  gap        : 8px;
  font-size  : calc(16px * var(--s));
}

.languages button[aria-pressed="false"] {
  opacity: 0.4;
}

.menu-toggle {
  display: none;
}

.scroll-cue {
  position      : absolute;
  width         : 84px;
  display       : flex;
  align-items   : center;
  flex-direction: column;
  font-size     : 12px;
  line-height   : 17px;
  gap           : 3px;
}

.scroll-cue img {
  width : 36px;
  height: 36px;
}

.hero-scroll {
  left: 918px;
  top : 845px;
}

.decor {
  position      : absolute;
  inset         : 0;
  pointer-events: none;
}

.dots-top {
  position: absolute;
  left    : 0;
  top     : 102px;
  width   : 134px;
  height  : 221px;
}

.dots-bottom {
  position: absolute;
  left    : 1558px;
  top     : 859px;
  width   : 362px;
  height  : 221px;
  z-index : 9;
}

.leaf-small {
  position: absolute;
  left    : 226.75px;
  top     : 884px;
  width   : 386px;
  height  : 294px;
  opacity : 0.06;
}

.leaf-large {
  position: absolute;
  left    : -213.7px;
  top     : 499px;
  width   : 959.6px;
  height  : 665.3px;
  opacity : 0.06;
}

.pixel {
  position  : absolute;
  width     : 20px;
  height    : 20px;
  background: var(--blue);
  left      : 9px;
  top       : 111px;
}

.p2 {
  left: 35px;
  top : 137px;
}

.p3 {
  width     : 11px;
  height    : 11px;
  left      : 18px;
  top       : 172px;
  background: var(--green);
}

.p4 {
  width     : 11px;
  height    : 11px;
  left      : 53px;
  top       : 224px;
  background: #efff04;
}

.rail {
  position      : absolute;
  inset         : 0;
  pointer-events: none;
}

.rail a {
  pointer-events: auto;
}

.section-number {
  position           : absolute;
  left               : 146px;
  top                : 167px;
  font               : 700 48px/60px monospace;
  color              : transparent;
  -webkit-text-stroke: 1px #cdd0d4;
}

.section-label {
  position      : absolute;
  left          : 147px;
  top           : 232px;
  font-size     : 18px;
  line-height   : 19.2px;
  letter-spacing: 1.08px;
}

.section-vertical {
  position           : absolute;
  left               : 93px;
  top                : 328px;
  transform          : rotate(90deg);
  transform-origin   : 0 0;
  font-size          : 64px;
  font-weight        : 600;
  line-height        : 1;
  letter-spacing     : 1.08px;
  white-space        : nowrap;
  color              : #22222205;
  -webkit-text-stroke: 1px #cdd0d4;
}

.rail-line {
  position  : absolute;
  left      : 132px;
  top       : 244px;
  width     : 1px;
  height    : 656px;
  background: #0005;
}

/* .rail-line:after {
  content   : '';
  position  : absolute;
  top       : 784px;
  height    : 52px;
  background: #222;
  width     : 1px
} */

.rail-mark {
  position  : absolute;
  left      : 132px;
  top       : 134px;
  height    : 100px;
  width     : 3px;
  background: #222;
}

.rail-mark:before,
.rail-mark:after {
  content   : "";
  position  : absolute;
  left      : 0;
  width     : 2px;
  height    : 10px;
  background: #222;
  top       : -32px;
}

.rail-mark:after {
  top: -16px;
}

.rail-cross {
  position: absolute;
  left    : 151px;
  top     : 265px;
  width   : 41px;
  height  : 59px;
}

.rail-cross img {
  position: absolute;
  width   : 100%;
  height  : 100%;
}

.rail .scroll-cue {
  left          : 90px;
  top           : 942px;
  z-index       : 3;
  pointer-events: auto;
  cursor        : pointer;
}

.rail .scroll-cue img {
  filter: brightness(0);
}

.game-diagonal {
  position: absolute;
  left    : 811px;
  top     : 408px;
  width   : 1158px;
  height  : 672px;
}

.game-soldier {
  position     : absolute;
  /* left      : 1005px; */
  right        : -50px;
  top          : 97px;
  width        : 918px;
  height       : 1005px;
  object-fit   : contain;
}

@media (min-width: 761px) {
  .screen>.stage {
    left       : 50%;
    margin-left: calc(-960px * var(--s));
  }

  #games .dots-bottom,
  #games .bottom-pixels,
  #about .dots-bottom,
  #about .bottom-pixels,
  #news .dots-bottom,
  #news .bottom-pixels {
    transform: translateY(calc(-1 * var(--stage-crop-y)));
  }

  #games .dots-top,
  #about .dots-top,
  #news .dots-top {
    top: calc(-1 * var(--stage-gutter-y));
  }

  #games .rail::before,
  #games .rail::after,
  #about .rail::before,
  #about .rail::after,
  #news .rail::before,
  #news .rail::after {
    content   : "";
    position  : absolute;
    left      : 133px;
    width     : 1px;
    background: #0005;
  }

  #games .rail::before,
  #about .rail::before,
  #news .rail::before {
    top   : calc(-1 * var(--stage-gutter-y) - 10px);
    height: calc(var(--stage-gutter-y) + 102px);
  }

  #games .rail::after,
  #about .rail::after,
  #news .rail::after {
    top   : 1040px;
    height: calc(var(--stage-gutter-y) + 102px);
  }

  #games .game-diagonal,
  #games .game-soldier {
    transform: translateY(var(--stage-gutter-y));
  }
}

.game-copy {
  position: absolute;
  inset   : 0;
}

.game-logo {
  position: absolute;
  left    : 323px;
  top     : 250px;
  width   : 650px;
  height  : 140px;
}

.game-title {
  position      : absolute;
  left          : 319px;
  top           : 287px;
  font-size     : 98px;
  font-weight   : 600;
  line-height   : 1.2;
  letter-spacing: -4px;
  white-space   : nowrap;
}

.game-tags {
  position      : absolute;
  left          : 320px;
  top           : 422px;
  display       : flex;
  gap           : 20px;
  color         : #005eff;
  font-size     : 18px;
  letter-spacing: 2px;
}

.game-tags span {
  width      : auto;
  padding    : 0 12px;
  height     : 35px;
  border     : 1px solid rgba(0, 94, 255, 0.4);
  display    : grid;
  place-items: center;
}

.game-description {
  position      : absolute;
  left          : 319px;
  top           : 477px;
  width         : 553px;
  font-size     : 18px;
  line-height   : 44px;
  letter-spacing: 2px;
}

.socials {
  position: absolute;
  left    : 319px;
  top     : 688px;
  display : flex;
  gap     : 20px;
}

.socials a {
  width      : 56px;
  height     : 56px;
  border     : 1px solid #dedfe2;
  background : #ffffff94;
  display    : grid;
  place-items: center;
  transition :
    border-color 0.2s,
    transform 0.2s;
}

.socials a:hover {
  border-color: var(--blue);
  transform   : translateY(-3px);
}

.socials img {
  width     : 28px;
  height    : 28px;
  object-fit: contain;
}

.game-website {
  position   : absolute;
  left       : 319px;
  top        : 796px;
  font-size  : 14px;
  display    : flex;
  gap        : 20px;
  align-items: center;
}

.game-website>span:first-child {
  text-decoration      : underline;
  text-underline-offset: 3px;
}

.game-website>span:last-child {
  font-size : 23px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.game-website:hover>span:first-child {
  color: #005eff;
}

.game-website:hover>span:last-child,
.game-website:focus-visible>span:last-child {
  transform: translateX(10px);
}

#about {
  background: #eef1f5;
}

.about-brand {
  position: absolute;
  left    : 547px;
  top     : 130px;
  width   : 284px;
}

.about-brand strong {
  display        : block;
  border-block   : 1px solid #888;
  height         : 138px;
  line-height    : 138px;
  font-size      : 44px;
  letter-spacing : 35px;
  white-space    : nowrap;
  font-weight    : 600;
  background     : linear-gradient(90deg, #00e69a 1.937%, #1e90ff 67.841%);
  background-clip: text;
  color          : transparent;
}

.about-brand .about-brand-en {
  font-size     : 38px;
  letter-spacing: 5px;
}

.about-brand>span {
  display   : block;
  margin-top: 119px;
  font      :
    500 12px/1.4 Arial,
    sans-serif;
  letter-spacing: 1.68px;
  color         : #b9cade;
}

.about-copy {
  position: absolute;
  left    : 960px;
  top     : 130px;
  width   : 826px;
}

.about-copy h2 {
  font-size     : 48px;
  font-weight   : 600;
  line-height   : 67px;
  letter-spacing: 2px;
  margin-bottom : 29px;
}

[data-locale-only][hidden] {
  display: none !important;
}

.about-copy .about-title-en {
  /* width         : 920px; */
  font-size        : 40px;
  line-height      : 67px;
  letter-spacing   : 0;
  /* white-space   : nowrap */
}

.about-copy p {
  font-size     : 22px;
  line-height   : 44px;
  letter-spacing: 2px;
}

.about-copy p+p {
  margin-top: 16px;
}

.values-heading {
  position       : absolute;
  left           : 547px;
  top            : 700px;
  width          : 1239px;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.values-heading h3 {
  font-size     : 26px;
  font-weight   : 500;
  letter-spacing: 0.52px;
}

.values-heading>span {
  font:
    500 12px/1.4 Arial,
    sans-serif;
  letter-spacing: 1.68px;
  color         : #b9cade;
}

.values {
  position             : absolute;
  left                 : 547px;
  top                  : 779.27px;
  width                : 1239px;
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 34px;
}

.values article {
  position   : relative;
  border-top : 1px solid #888;
  padding-top: 35px;
}

.values h4 {
  font-size     : 22px;
  line-height   : 1.3;
  letter-spacing: 0.44px;
  font-weight   : 500;
  margin-bottom : 12px;
}

.values p {
  font-size  : 22px;
  line-height: 44px;
}

.value-ring {
  position: absolute;
  left    : -21px;
  top     : 24px;
  width   : 42px;
  height  : 42px;
  z-index : -1;
}

.news-date {
  position: absolute;
  left    : 549px;
  top     : 221px;
}

.news-date span {
  display    : block;
  color      : #888;
  font-size  : 22px;
  line-height: 31px;
}

.news-date strong {
  font-size  : 44px;
  font-weight: 400;
  line-height: 61px;
}

.news-rule {
  position  : absolute;
  left      : 694px;
  top       : 272px;
  width     : 72px;
  height    : 1px;
  background: #888;
}

.news-title {
  position: absolute;
  left    : 820px;
  top     : 227px;
  width   : 968px;
}

.news-title h2 {
  font-size  : 36px;
  font-weight: 600;
  line-height: 45px;
  cursor     : pointer;
}

.news-title p {
  font-size  : 22px;
  line-height: 29px;
  color      : #555;
  margin-top : 8px;
  cursor     : pointer;
}

.news-title:hover h2,
.news-title:hover p {
  color: #005EFF;
}

.news-window {
  position: absolute;
  left    : 549px;
  top     : 340px;
  width   : 1371px;
  height  : 455px;
  overflow: hidden;
}

.news-track {
  display   : flex;
  gap       : 46px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.news-image {
  width   : 1239px;
  height  : 455px;
  flex    : none;
  overflow: hidden;
  position: relative;
}

.news-image img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-image:hover img {
  transform: scale(1.05);
}

.news-controls {
  position: absolute;
  left    : 549px;
  top     : 831px;
  display : flex;
  gap     : 86px;
}

.news-controls button {
  width      : 52px;
  height     : 52px;
  border     : 1px solid #0008;
  display    : grid;
  place-items: center;
  transition : background 0.2s;
}

.news-controls button:hover {
  background: #1e90ff15;
}

.news-controls img {
  width : 24px;
  height: 24px;
}

#contact {
  height: 27.604167vw;
  background: linear-gradient(157.76955deg,
      #2090ff 0%,
      #0ffeaf 67.126%,
      #efff04 102.39%);
  background: linear-gradient(112.23045deg,
      #efff04 -2.39%,
      #0ffeaf 32.874%,
      #2090ff 100%);
}

#contact .stage {
  top   : 0;
  margin: 0;
  height: 530px;
}

.contact-grid {
  position: absolute;
  inset   : 0;
  background-image:
    linear-gradient(#ffffff4d 0.5px, transparent 0.5px),
    linear-gradient(90deg, #ffffff4d 0.5px, transparent 0.5px);
  background-size    : 80px 80px;
  background-position: 2.73px 0;
}

.grid-star {
  position: absolute;
  width   : 139px;
  height  : 138px;
}

.star-one {
  left: 1533px;
  top : 170px;
}

.star-two {
  left: 1773px;
  top : 331px;
}

.contact-brand {
  position: absolute;
  left    : 132px;
  top     : 199px;
  color   : #0006;
}

.contact-brand strong {
  font:
    30px "Special Gothic Expanded One",
    sans-serif;
  letter-spacing: 5.7px;
  opacity       : 0.7;
  font-weight   : 400;
}

.contact-brand>span {
  display       : block;
  font-size     : 11px;
  letter-spacing: 3.52px;
  margin-top    : 4px;
}

.contact-brand small {
  display       : block;
  font-size     : 10px;
  letter-spacing: 1.4px;
  margin-top    : 43px;
  color         : #0003;
}

.contact-item {
  position: absolute;
  top     : 199px;
}

.business {
  left: 547px;
}

.careers {
  left: 960px;
}

.support {
  left: 1366px;
}

.contact-item h2 {
  font-size    : 34px;
  font-weight  : 400;
  line-height  : 40px;
  margin-bottom: 35px;
}

.contact-item>a {
  font-size                  : 34px;
  font-weight                : 600;
  /* text-decoration         : underline; */
  /* text-underline-offset   : 6px */
  line-height                : 40px;
  border-bottom              : 2px solid #222;
}

.contact-item .career-button {
  display        : flex;
  width          : 322px;
  height         : 52px;
  background     : #222;
  color          : #fff;
  align-items    : center;
  justify-content: center;
  gap            : 22px;
  border-radius  : 2px;
  font-size      : 22px;
  font-weight    : 400;
  text-decoration: none;
  margin-top     : -6px;
}

.contact-item .career-button:hover {
  background: rgba(34, 34, 34, 0.8);
}

.contact-item .career-button:hover img {
  transform : translateX(4px);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.career-button img {
  width : 18px;
  height: 18px;
}

#footer {
  height    : 17.239583vw;
  background: #121517;
  color     : #ffffffe6;
}

#footer .stage {
  top        : 0;
  left       : 50%;
  margin-top : 0;
  margin-left: calc(-960px * var(--s));
  height     : 331px;
}

.footer-logo {
  display       : flex;
  flex-direction: column;
  position      : absolute;
  width         : auto;
  height        : 32px;
  left          : 873px;
  top           : 54px;
}

.back-top {
  position   : absolute;
  left       : 1692px;
  top        : 54px;
  display    : flex;
  gap        : 8px;
  align-items: center;
  font-size  : 14px;
}

.back-top img {
  width : 24px;
  height: 24px;
}

.health {
  position   : absolute;
  left       : 0;
  top        : 115px;
  width      : 100%;
  text-align : center;
  font-size  : 14px;
  line-height: 20.4px;
}

.legal {
  position       : absolute;
  left           : 0;
  top            : 161px;
  width          : 100%;
  display        : flex;
  justify-content: center;
  align-items    : center;
  gap            : 20px;
  font-size      : 14px;
  line-height    : 20.4px;
}

.filing {
  position       : absolute;
  top            : 208px;
  left           : 0;
  width          : 100%;
  border-top     : 1px solid rgba(255, 255, 255, 0.2);
  padding-top    : 20px;
  display        : flex;
  justify-content: center;
  align-items    : center;
  color          : #ffffffb3;
  font-size      : 12px;
  line-height    : 21px;
  gap            : 16px;
}

.filing a {
  display    : flex;
  align-items: center;
  gap        : 5px;
}

.filing a:hover {
  color: #fff;
}

.filing a+a {
  /* border-left : 1px solid rgba(255, 255, 255, 0.2); */
  padding-left: 16px;
}

.gap-line {
  content         : "";
  display         : inline-block;
  width           : 1px;
  height          : 14px;
  background-color: rgba(255, 255, 255, 0.2);
}

.filing img {
  width     : 13px;
  height    : 15px;
  object-fit: contain;
}

.copyright {
  position   : absolute;
  top        : 255px;
  left       : 0;
  width      : 100%;
  text-align : center;
  font-size  : 12px;
  color      : #ffffffb3;
  line-height: 20.4px;
}

.site-dialog {
  border    : 0;
  padding   : 40px;
  max-width : 680px;
  width     : calc(100% - 40px);
  max-height: 85vh;
  background: #f6f7f9;
  color     : #222;
}

.site-dialog::backdrop {
  background     : #050b16b3;
  backdrop-filter: blur(6px);
}

.dialog-close {
  position : absolute;
  right    : 16px;
  top      : 10px;
  font-size: 28px;
}

.dialog-body h2 {
  font-size  : 28px;
  line-height: 1.4;
  margin     : 0 25px 20px 0;
}

.dialog-body p {
  margin     : 16px 0;
  line-height: 1.8;
}

.dialog-body img {
  width     : 100%;
  height    : 240px;
  object-fit: cover;
}

.dialog-body a {
  display   : inline-block;
  background: #222;
  color     : #fff;
  padding   : 12px 20px;
}

.english .game-description {
  letter-spacing: 0;
  line-height   : 32px;
}

.english .game-title {
  letter-spacing: 0;
}

.english .about-copy .about-title-en {
  margin-bottom: 30px;
}

.english .about-copy p {
  font-size     : 21px;
  line-height   : 33px;
  letter-spacing: 0;
}

.english .values p {
  font-size  : 19px;
  line-height: 29px;
}

.english .contact-item h2 {
  font-size: 26px;
}

.english .health,
.english .filing {
  display: none;
}

.english .section-label {
  font-size: 16px;
}

@media (max-width: 760px) {
  :root {
    --s: 1 !important;
  }

  .site-header {
    height    : 72px;
    padding   : 0 24px;
    min-height: 0;
  }

  .brand {
    width     : 150px;
    height    : 28px;
    min-width : 0;
    min-height: 0;
  }

  .site-header nav {
    display       : none;
    position      : absolute;
    top           : 72px;
    left          : 0;
    right         : 0;
    padding       : 22px 24px;
    background    : #fffffffa;
    color         : #173650;
    font-size     : 16px;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 5px;
  }

  .site-header nav a {
    width: max-content;
  }

  .site-header.menu-open nav {
    display: flex;
  }

  .site-header nav a[aria-current="page"]:after {
    bottom: 2px;
  }

  .languages {
    font-size: 12px;
    gap      : 5px;
  }

  .menu-toggle {
    display  : block;
    font-size: 22px;
    transform: translateY(-2px);
  }

  .screen {
    height    : auto;
    min-height: 0;
  }

  .stage {
    position : relative;
    top      : 0;
    left     : 0;
    margin   : 0;
    width    : 100%;
    height   : auto;
    transform: none;
  }

  .screen>.stage {
    padding: 20px 24px 64px;
  }

  #home {
    height    : 100svh;
    min-height: 620px;
  }

  .screen>.hero-stage {
    padding: 0;
    height : 100%;
  }

  .hero-title {
    left          : 20px;
    top           : 34%;
    width         : calc(100% - 40px);
    font-size     : clamp(36px, 9.8vw, 68px);
    line-height   : 1.3;
    letter-spacing: -1px;
  }

  .hero-title span+span {
    line-height: 1.2;
    margin-top : 16px;
  }

  .hero-scroll {
    left  : calc(50% - 42px);
    top   : auto;
    bottom: 80px;
  }

  .hero-blurs {
    width           : 1920px;
    height          : 1080px;
    transform       : scale(0.5);
    transform-origin: 0 0;
    left            : -300px;
  }

  .rail {
    position        : relative;
    inset           : auto;
    height          : 76px;
    margin-top      : 20px;
    /* margin-bottom: 32px; */
  }

  .section-number {
    top        : 0;
    left       : 0;
    font-size  : 36px;
    line-height: 42px;
  }

  .section-label {
    left     : 62px;
    top      : 14px;
    font-size: 16px;
  }

  .section-vertical,
  .rail-line,
  .rail-mark,
  .rail-cross,
  .rail .scroll-cue {
    display: none;
  }

  .dots-top {
    width  : 68px;
    height : 112px;
    top    : 0;
    opacity: 0.3;
  }

  .dots-bottom {
    width  : 181px;
    height : 110px;
    left   : auto;
    right  : 0;
    top    : auto;
    bottom : 0;
    z-index: 9;
  }

  .leaf-large {
    left  : -170px;
    top   : 45%;
    width : 480px;
    height: 333px;
  }

  .leaf-small {
    left  : 50px;
    top   : calc(45% + 193px);
    width : 193px;
    height: 147px;
  }

  .pixel {
    display     : none;
    /* transform: scale(0.5) translate(0, -200px); */
  }

  .game-copy {
    position      : relative;
    inset         : auto;
    padding-bottom: 305px;
  }

  .game-logo {
    position     : static;
    width        : 300px;
    height       : 60px;
    margin-bottom: 24px;
  }

  .game-title {
    position      : static;
    font-size     : 38px;
    letter-spacing: -2px;
    white-space   : normal;
    line-height   : 1.25;
  }

  .game-tags {
    position  : static;
    margin-top: 24px;
    gap       : 12px;
    font-size : 14px;
  }

  .game-tags span {
    width  : auto;
    height : 28px;
    padding: 0 12px;
  }

  .game-description {
    position      : static;
    width         : auto;
    font-size     : 15px;
    line-height   : 28px;
    letter-spacing: 0.5px;
    margin-top    : 24px;
  }

  .socials {
    position  : static;
    margin-top: 28px;
    gap       : 10px;
    flex-wrap : wrap;
  }

  .socials a {
    width : 43px;
    height: 43px;
  }

  .socials img {
    width : 24px;
    height: 24px;
  }

  .game-website {
    position  : static;
    margin-top: 32px;
    width     : max-content;
    font-size : 14px;
  }

  .game-soldier {
    left  : auto;
    right : -60px;
    top   : auto;
    bottom: -40px;
    width : 355px;
    height: 389px;
  }

  .game-diagonal {
    left  : auto;
    right : -100px;
    top   : auto;
    bottom: 0;
    width : 500px;
    height: 290px;
  }

  .about-brand {
    position     : static;
    width        : 240px;
    margin-bottom: 32px;
  }

  .about-brand strong {
    font-size     : 32px;
    letter-spacing: 28px;
    height        : 90px;
    line-height   : 90px;
  }

  .about-brand>span {
    display: none;
  }

  .about-copy {
    position: static;
    width   : auto;
  }

  .about-copy h2 {
    font-size     : 27px;
    line-height   : 1.5;
    letter-spacing: 0;
    margin-bottom : 24px;
  }

  .about-copy p {
    font-size     : 15px;
    line-height   : 28px;
    letter-spacing: 0.5px;
  }

  .values-heading {
    position: static;
    width   : auto;
    margin  : 48px 0 24px;
    gap     : 12px;
  }

  .values-heading h3 {
    font-size: 22px;
  }

  .values-heading>span {
    font-size: 9px;
  }

  .values {
    position             : static;
    width                : auto;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 28px 20px;
  }

  .values article {
    padding-top: 25px;
  }

  .values h4 {
    font-size: 18px;
  }

  .values p {
    font-size  : 14px;
    line-height: 26px;
  }

  .value-ring {
    width : 32px;
    height: 32px;
    left  : -8px;
    top   : 18px;
  }

  .news-date {
    position     : static;
    display      : flex;
    align-items  : baseline;
    gap          : 12px;
    margin-bottom: 20px;
  }

  .news-date span {
    font-size: 16px;
  }

  .news-date strong {
    font-size  : 32px;
    line-height: 1.2;
  }

  .news-rule {
    display: none;
  }

  .news-title {
    position     : static;
    width        : auto;
    margin-bottom: 24px;
  }

  .news-title:hover {
    color: #005EFF;
  }

  .news-title h2 {
    font-size  : 26px;
    line-height: 1.4;
  }

  .news-title p {
    font-size  : 15px;
    line-height: 26px;
  }

  .news-window {
    position    : relative;
    left        : 0;
    top         : 0;
    width       : calc(100% + 24px);
    height      : 245px;
    touch-action: pan-y;
  }

  .news-track {
    gap: 16px;
  }

  .news-image {
    width : calc(100vw - 48px);
    height: 245px;
  }

  .news-image img {
    width     : 100%;
    height    : 100%;
    left      : 0;
    top       : 0;
    object-fit: cover;
  }

  .news-controls {
    position  : static;
    margin-top: 24px;
    gap       : 20px;
  }

  .news-controls button {
    width : 44px;
    height: 44px;
  }

  #contact {
    height: auto;
  }

  #contact .stage {
    height : auto;
    padding: 64px 24px;
  }

  .contact-brand,
  .contact-item {
    position: relative;
    left    : auto;
    top     : auto;
  }

  .contact-brand {
    margin-bottom: 44px;
  }

  .contact-brand strong {
    font-size: 23px;
  }

  .contact-brand small {
    margin-top: 20px;
  }

  .contact-item+.contact-item {
    margin-top: 32px;
  }

  .contact-item h2 {
    font-size    : 22px;
    line-height  : 1.3;
    margin-bottom: 16px;
  }

  .contact-item>a {
    font-size: 25px;
  }

  .contact-item .career-button {
    width     : 100%;
    max-width : 322px;
    font-size : 18px;
    margin-top: 0;
  }

  .contact-grid {
    background-size: 48px 48px;
  }

  .star-one {
    left: 180px;
    top : 400px;
  }

  .star-two {
    display: none;
  }

  #footer {
    height: auto;
  }

  #footer .stage {
    height        : auto;
    left          : 0;
    margin        : 0;
    padding       : 40px 24px 32px;
    display       : flex;
    align-items   : center;
    flex-direction: column;
    gap           : 24px;
  }

  .footer-logo,
  .back-top,
  .health,
  .legal,
  .filing,
  .copyright {
    position: static;
  }

  .footer-logo {
    width : 173px;
    height: 32px;
  }

  .back-top {
    order    : 6;
    font-size: 12px;
  }

  .health {
    font-size  : 11px;
    line-height: 1.8;
  }

  .legal {
    flex-wrap: wrap;
    gap      : 12px 20px;
    font-size: 12px;
  }

  .filing {
    padding-top: 20px;
    flex-wrap  : wrap;
    gap        : 6px;
    font-size  : 10px;
  }

  .filing a+a {
    padding-left: 6px;
  }

  .copyright {
    font-size: 10px;
  }

  .about-brand .about-brand-en {
    font-size     : 28px;
    letter-spacing: 7px;
  }

  .english .about-copy .about-title-en {
    font-size  : 27px;
    line-height: 1.5;
  }

  .english .about-copy p,
  .english .game-description {
    font-size  : 15px;
    line-height: 27px;
  }

  .english .values p {
    font-size  : 13px;
    line-height: 22px;
  }

  .english .contact-item h2 {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *:before,
  *:after {
    transition: none !important;
    animation : none !important;
  }
}

.rail-cross img {
  width : 21.5px;
  height: 30.45px;
  left  : -0.5px;
  top   : -0.5px;
}

.rail-cross img:nth-child(2) {
  top      : 29px;
  transform: scaleY(-1);
}

.rail-cross img:nth-child(3) {
  left     : 20px;
  transform: scaleX(-1);
}

.rail-cross img:nth-child(4) {
  left     : 20px;
  top      : 29px;
  transform: rotate(180deg);
}

.game-ring {
  position: absolute;
  left    : 302px;
  top     : 240px;
  width   : 42px;
  height  : 42px;
}

.game-title {
  letter-spacing: 0;
}

.game-title .colon {
  letter-spacing: -30px;
}

.bottom-pixels {
  position: absolute;
  left    : 1558px;
  top     : 859px;
  width   : 362px;
  height  : 221px;
  z-index : 9;
}

.bottom-pixels i {
  position  : absolute;
  background: #1e90ff;
  width     : 20px;
  height    : 20px;
  left      : 90.88%;
  top       : 81.9%;
}

.bottom-pixels i:nth-child(2) {
  left: 84.81%;
  top : 75.11%;
}

.bottom-pixels i:nth-child(3) {
  background: #0bffae;
  left      : 91.99%;
  top       : 63.35%;
  width     : 11px;
  height    : 11px;
}

.bottom-pixels i:nth-child(4) {
  background: #efff04;
  left      : 82.32%;
  top       : 39.82%;
  width     : 11px;
  height    : 11px;
}

.bottom-pixels i:nth-child(5) {
  background: #0bffae;
  left      : 60.5%;
  top       : 86.88%;
  width     : 11px;
  height    : 11px;
}

.top-pixels {
  display: none;
}

@media (max-width: 760px) {
  .game-ring {
    top   : -12px;
    left  : -15px;
    width : 32px;
    height: 32px;
  }

  .game-title .colon {
    letter-spacing: -12px;
  }

  .bottom-pixels {
    left            : auto;
    right           : 0;
    top             : auto;
    bottom          : 0;
    transform       : scale(0.5);
    transform-origin: bottom right;
  }

  /* ------- */

  .top-pixels {
    display  : block;
    position : absolute;
    left     : 0;
    top      : 0;
    width    : 362px;
    height   : 221px;
    transform: scale(0.5) rotate(180deg) translate(180px, 100px);
  }

  .top-pixels i {
    position  : absolute;
    background: #1e90ff;
    width     : 20px;
    height    : 20px;
    left      : 90.88%;
    top       : 81.9%;
  }

  .top-pixels i:nth-child(2) {
    left: 84.81%;
    top : 75.11%;
  }

  .top-pixels i:nth-child(3) {
    background: #0bffae;
    left      : 91.99%;
    top       : 63.35%;
    width     : 11px;
    height    : 11px;
  }

  /* .top-pixels i:nth-child(4) {
    background: #efff04;
    left      : 82.32%;
    top       : 39.82%;
    width     : 11px;
    height    : 11px;
  } */

  .top-pixels i:nth-child(5) {
    background: #0bffae;
    left      : 60.5%;
    top       : 86.88%;
    width     : 11px;
    height    : 11px;
  }

  /* ------- */
}

.news-prev img {
  transform: rotate(-135deg);
}

.news-next img {
  transform: rotate(45deg);
}

#contact {
  background-image: linear-gradient(-67.76955136727975deg,
      rgb(32, 144, 255) 0%,
      rgb(15, 254, 175) 67.126%,
      rgb(239, 255, 4) 102.39%);
}

/* Figma hero grid: 80px cells at the 1920px design width. */
#home::after {
  content       : "";
  position      : absolute;
  inset         : 0;
  z-index       : 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size    : max(40px, 4.166667vw) max(40px, 4.166667vw);
  background-position: 0 0;
  mask-image         : linear-gradient(#000 0%, #000 70%, rgba(0, 0, 0, 0.35) 100%);
}

#home::before {
  content       : "";
  position      : absolute;
  inset         : 0;
  z-index       : 2;
  pointer-events: none;
  opacity       : 0.13;
  background-image:
    url("https://res.sycagamecdn.com/t78b27af47a4db428c0.svg"),
    url("https://res.sycagamecdn.com/t78b27af47a4db428c0.svg"),
    url("https://res.sycagamecdn.com/t78b27af47a4db428c0.svg"),
    url("https://res.sycagamecdn.com/t78b27af47a4db428c0.svg"),
    url("https://res.sycagamecdn.com/t78b27af47a4db428c0.svg"),
    url("https://res.sycagamecdn.com/t78b27af47a4db428c0.svg"),
    url("https://res.sycagamecdn.com/t78b27af47a4db428c0.svg"),
    url("https     ://res.sycagamecdn.com/t78b27af47a4db428c0.svg");
  background-repeat: no-repeat;
  background-size  : 7.291667vw 7.239583vw;
  background-position:
    calc(12.5vw - 3.62vw) calc(4.166667vw - 3.67vw),
    calc(20.833333vw - 3.62vw) calc(20.833333vw - 3.67vw),
    calc(58.333333vw - 3.62vw) calc(8.333333vw - 3.67vw),
    calc(87.5vw - 3.62vw) calc(4.166667vw - 3.67vw),
    calc(66.666667vw - 3.62vw) calc(25vw - 3.67vw),
    calc(95.833333vw - 3.62vw) calc(20.833333vw - 3.67vw),
    calc(12.5vw - 3.62vw) calc(45.833333vw - 3.67vw),
    calc(58.333333vw - 3.62vw) calc(50vw - 3.67vw);
}

#home .stage {
  z-index: 3;
}

@media (max-width: 760px) {
  #home::before {
    display: none;
  }
}