:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #05050a;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 1180px;
  scroll-behavior: smooth;
  background: #05050a;
}

body {
  margin: 0;
  min-width: 1180px;
  overflow-x: hidden;
  background: #05050a;
}

button {
  font: inherit;
}

.screen {
  position: relative;
  width: 100%;
  min-width: 1180px;
  aspect-ratio: 16 / 9;
  min-height: 664px;
  overflow: hidden;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  scroll-margin-top: 8.06vh;
}

.hero {
  background-image: url("https://file-hwkefu.leniuhw.com/kefu/20260824/home/background.png?v=e0d5c1418ce1617b");
}

.features {
  height: 100vh;
  min-height: 664px;
  aspect-ratio: auto;
  background-image: url("https://file-hwkefu.leniuhw.com/kefu/20260824/features/bg.jpg");
}

.characters {
  background-image: url("https://file-hwkefu.leniuhw.com/kefu/20260824/characters/bg.jpg");
}

.hotspot,
.download-hotspots a,
.social-hotspots button {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hotspot:focus-visible,
.download-hotspots a:focus-visible,
.social-hotspots button:focus-visible {
  outline: 2px solid #ffda8a;
  outline-offset: -3px;
}

.hero-hotspots {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 8.06%;
  background-image: url("https://file-hwkefu.leniuhw.com/kefu/20260824/nav/frame.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.hero-hotspots .hotspot {
  top: 0;
  width: 11.04%;
  height: 100%;
  pointer-events: auto;
}

.nav-logo {
  position: absolute;
  top: 13.8%;
  left: 25%;
  width: 7.92%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.nav-label,
.nav-indicator {
  position: absolute;
  left: 50%;
  height: auto;
  transform: translateX(-50%);
  transition: opacity 150ms ease, filter 180ms ease;
  pointer-events: none;
  user-select: none;
}

.nav-label {
  top: 25.3%;
  max-width: 62%;
  max-height: 40.3%;
}

.nav-label-active,
.nav-indicator {
  opacity: 0;
}

.nav-indicator {
  top: 78.1%;
  width: 100%;
}

.nav-home .nav-label-normal {
  opacity: 1;
}

.hero-hotspots .hotspot.is-active .nav-label-normal {
  opacity: 0;
}

.hero-hotspots .hotspot.is-active .nav-label-active,
.hero-hotspots .hotspot.is-active .nav-indicator {
  opacity: 1;
}

.hero-hotspots .hotspot:hover .nav-label-normal,
.hero-hotspots .hotspot:focus-visible .nav-label-normal {
  opacity: 0;
}

.hero-hotspots .hotspot:hover .nav-label-active,
.hero-hotspots .hotspot:hover .nav-indicator,
.hero-hotspots .hotspot:focus-visible .nav-label-active,
.hero-hotspots .hotspot:focus-visible .nav-indicator {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255, 77, 52, .4));
}

.nav-home {
  left: 36.88%;
}

.nav-features {
  left: 50.68%;
}

.nav-characters {
  left: 64.32%;
}

.hero-play {
  z-index: 4;
  left: 45.08%;
  top: 59.44%;
  width: 9.84%;
  height: 17.59%;
  border-radius: 50%;
  transition: filter 180ms ease, transform 180ms ease;
}

.hero-play:hover {
  filter: brightness(1.2) drop-shadow(0 0 16px rgba(255, 58, 30, .65));
  transform: scale(1.04);
}

.hero-play img,
.download-hotspots img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-slogan {
  position: absolute;
  z-index: 3;
  left: 20.1%;
  top: 77.05%;
  width: 60.36%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.download-hotspots {
  position: absolute;
  z-index: 4;
  left: 18.49%;
  top: 84.81%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 63.8%;
  height: 7.96%;
  gap: 0;
}

.download-hotspots a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: filter 160ms ease, transform 160ms ease;
}

.download-hotspots a:hover {
  z-index: 2;
  filter: brightness(1.18) drop-shadow(0 0 8px rgba(255, 205, 126, .4));
  transform: translateY(-2px);
}

.download-hotspots a.is-loading {
  cursor: wait;
  filter: brightness(.58);
  pointer-events: none;
}

.download-hotspots a.is-loading::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 230, 178, .3);
  border-top-color: #ffe6b2;
  border-radius: 50%;
  content: "";
  animation: download-loading 750ms linear infinite;
}

@keyframes download-loading {
  to {
    transform: rotate(360deg);
  }
}

.social-hotspots {
  position: fixed;
  z-index: 90;
  right: 1.09%;
  top: 16.94%;
  width: 7.14%;
  height: 57.5%;
  background-image: url("https://file-hwkefu.leniuhw.com/kefu/20260824/home/sidebar-frame.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: width 200ms ease, height 200ms ease, top 200ms ease;
}

.side-entry {
  position: absolute;
  left: 0;
  width: 100%;
  height: 16.3%;
}

.side-facebook {
  top: 10.3%;
  --normal-width: 55.5%;
  --active-width: 59.9%;
}

.side-discord {
  top: 26.6%;
  --normal-width: 45.3%;
  --active-width: 49.6%;
}

.side-faq {
  top: 42.9%;
  --normal-width: 30.7%;
  --active-width: 29.2%;
}

.side-recharge {
  top: 59.2%;
  --normal-width: 57.7%;
  --active-width: 62%;
}

.side-top {
  top: 75.5%;
  --normal-width: 71.5%;
  --active-width: 75.2%;
}

.side-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  transform: translate(-50%, -50%);
  transition: opacity 150ms ease, transform 180ms ease, filter 180ms ease;
  pointer-events: none;
}

.side-icon-normal {
  width: var(--normal-width);
}

.side-icon-active {
  width: var(--active-width);
  opacity: 0;
}

.side-entry:hover .side-icon-normal,
.side-entry:focus-visible .side-icon-normal,
.side-entry.is-active .side-icon-normal {
  opacity: 0;
}

.side-entry:hover .side-icon-active,
.side-entry:focus-visible .side-icon-active,
.side-entry.is-active .side-icon-active {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 80, 48, .5));
  transform: translate(-50%, -50%) scale(1.04);
}

.side-dividers {
  position: absolute;
  z-index: 0;
  top: 26.1%;
  left: 50%;
  width: 67.9%;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

.side-collapse {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: .3%;
  width: 43.8%;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
}

.side-collapse img {
  display: block;
  width: 100%;
  height: auto;
}

.social-hotspots.collapsed {
  top: 69.6%;
  width: 3.13%;
  height: 5%;
  background-image: none;
}

.social-hotspots.collapsed .side-entry,
.social-hotspots.collapsed .side-dividers {
  opacity: 0;
  pointer-events: none;
}

.social-hotspots.collapsed .side-collapse {
  bottom: 0;
  width: 100%;
}

.section-title {
  position: absolute;
  z-index: 5;
  top: 7.2%;
  left: 50%;
  width: 34.54%;
  height: auto;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
}

.feature-canvas {
  --feature-arrow-offset: 11.72%;
  position: absolute;
  top: 50%;
  left: calc(50% + (100vw - 100%) / 2);
  height: 100%;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

.features .section-title {
  top: 8.98%;
}

.feature-carousel {
  position: absolute;
  z-index: 3;
  top: 28%;
  left: 0;
  width: 100%;
  height: 49%;
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: center center;
}

.feature-card {
  position: absolute;
  top: 0;
  left: 26%;
  z-index: 0;
  width: 48%;
  height: 100%;
  visibility: hidden;
  filter: brightness(.28) saturate(.72);
  opacity: 0;
  transform: translateZ(-160px) scale(.9);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: left 520ms ease, top 520ms ease, height 520ms ease, filter 520ms ease, opacity 520ms ease, transform 520ms ease;
  pointer-events: none;
  user-select: none;
}

.feature-card.is-active {
  left: 26%;
  z-index: 3;
  visibility: visible;
  filter: none;
  opacity: 1;
  transform: translateZ(0) rotateY(0) scale(1);
}

.feature-card.is-prev,
.feature-card.is-next {
  top: 14%;
  z-index: 1;
  width: 48%;
  height: 72%;
  visibility: visible;
  filter: brightness(.48) saturate(.72) drop-shadow(0 10px 16px rgba(0, 0, 0, .28));
  opacity: .76;
}

.feature-card.is-prev {
  left: 11%;
  transform: translateZ(-70px) rotateY(15deg) scale(.92);
  transform-origin: right center;
}

.feature-card.is-next {
  left: 41%;
  transform: translateZ(-70px) rotateY(-15deg) scale(.92);
  transform-origin: left center;
}

.feature-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.carousel-arrow {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: filter 180ms ease, transform 180ms ease;
}

.carousel-arrow:hover {
  filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 89, 62, .7));
  transform: scale(1.08);
}

.carousel-arrow:focus-visible {
  outline: 2px solid #ffda8a;
  outline-offset: 2px;
}

.carousel-arrow img {
  display: block;
  width: 100%;
  height: auto;
}

.feature-prev,
.feature-next {
  top: 50.19%;
  width: 2.97%;
  padding: 0;
  transform: none;
}

.feature-prev:hover,
.feature-next:hover {
  transform: scale(1.08);
}

.feature-prev {
  left: var(--feature-arrow-offset);
}

.feature-next {
  right: var(--feature-arrow-offset);
}

.feature-canvas > .feature-dots {
  position: absolute;
  z-index: 9;
  top: 84.81%;
  left: 50%;
  width: 9.74%;
  height: 3.15%;
  background-image: url("https://file-hwkefu.leniuhw.com/kefu/20260824/features/dots.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  transform: translateX(-50%);
}

.feature-dot {
  position: absolute;
  top: 0;
  display: block;
  width: 18.18%;
  height: 100%;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  transform: translateX(-50%);
  cursor: pointer;
}

.feature-dot:nth-child(1) {
  left: 4.01%;
}

.feature-dot:nth-child(2) {
  left: 27.01%;
}

.feature-dot:nth-child(3) {
  left: 50%;
}

.feature-dot:nth-child(4) {
  left: 72.46%;
}

.feature-dot:nth-child(5) {
  left: 95.45%;
}

.feature-dot.is-active {
  background-image: url("https://file-hwkefu.leniuhw.com/kefu/20260824/features/dot-active.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.character-main {
  position: absolute;
  z-index: 2;
  top: 5.1%;
  left: 2.8%;
  width: 56.46%;
  height: auto;
  transition: opacity 260ms ease, transform 420ms ease;
  pointer-events: none;
  user-select: none;
}

.character-info {
  position: absolute;
  z-index: 3;
  top: 29.4%;
  left: 52.2%;
  width: 26%;
  height: auto;
  transition: opacity 220ms ease, transform 360ms ease;
  pointer-events: none;
  user-select: none;
}

.character-main.is-changing {
  opacity: 0;
  transform: translateX(-28px);
}

.character-info.is-changing {
  opacity: 0;
  transform: translateX(24px);
}

.character-cards {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 71.3%;
  display: flex;
  justify-content: center;
  gap: 1%;
  width: 68%;
  height: 22%;
  transform: translateX(-50%);
}

.character-card {
  position: relative;
  flex: 0 0 11.625%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: filter 180ms ease, transform 180ms ease;
}

.character-card::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 113.4%;
  aspect-ratio: 161 / 231;
  background-image: url("https://file-hwkefu.leniuhw.com/kefu/20260824/characters/selected-frame.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, filter 180ms ease;
  pointer-events: none;
}

.character-card[aria-selected="true"]::after {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 8, 35, .55));
}

.character-card:hover {
  filter: brightness(1.2);
  transform: translateY(-4px);
}

.character-card:focus-visible {
  outline: 2px solid #ffda8a;
  outline-offset: 3px;
}

.character-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.character-prev,
.character-next {
  top: 75.4%;
  width: 5.4%;
}

.character-prev {
  left: 8.5%;
}

.character-next {
  right: 8.5%;
}

.license-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 1180px;
  padding: 34px 40px 38px;
  color: #aeb7c5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
  background: #030405;
  border-top: 1px solid rgba(184, 201, 220, .12);
}

.license-logo {
  width: 340px;
  height: 100px;
  overflow: hidden;
}

.license-logo img {
  display: block;
  width: 584px;
  max-width: none;
  height: auto;
  margin: -91px 0 0 -132px;
}

.license-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin: 8px 0 22px;
}

.license-age {
  width: 72px;
  height: auto;
}

.license-approved {
  width: 208px;
  height: auto;
}

.license-copy {
  width: min(1060px, 86vw);
}

.license-copy p {
  margin: 7px 0;
}

.license-copy a {
  color: #d2dae5;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.license-copy a:hover,
.license-copy a:focus-visible {
  color: #fff;
}

.video-modal {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 5vh 6vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 8, .88);
  backdrop-filter: blur(5px);
}

.video-modal__dialog {
  position: relative;
  width: min(1120px, 84vw);
  border: 1px solid rgba(237, 194, 105, .78);
  background: #030405;
  box-shadow: 0 0 0 1px rgba(92, 52, 22, .75), 0 24px 80px rgba(0, 0, 0, .82), 0 0 34px rgba(201, 137, 53, .2);
  transform: scale(.96);
  transition: transform 220ms ease;
}

.video-modal.is-open .video-modal__dialog {
  transform: scale(1);
}

.video-modal__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  z-index: 1;
  top: -18px;
  right: -18px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0 0 4px;
  border: 1px solid #e6bd70;
  border-radius: 50%;
  color: #ffe8ac;
  font: 34px/1 Arial, sans-serif;
  background: #1a1010;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .65);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
  color: #fff;
  background: #671d18;
  transform: scale(1.08);
}

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

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 42px;
  min-width: 260px;
  padding: 14px 24px;
  border: 1px solid rgba(247, 204, 129, .75);
  border-radius: 4px;
  color: #ffe6b2;
  text-align: center;
  background: rgba(16, 12, 15, .94);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translate(-50%, 18px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

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

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}