/*
  play.gl 重建版布局覆盖样式。

  原始样式保留在 legacy.css。后续新的布局调整优先写在这里，
  方便审查、回退和继续维护。
*/

:root {
  --page-safe-x: clamp(16px, 4vw, 56px);
  --page-safe-y: clamp(16px, 4vh, 48px);
}

body {
  min-height: 100vh;
}

@keyframes splashFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes splashLogoPop {
  0% {
    opacity: 0;
    transform: scale(.62) translateY(28px) rotate(-5deg);
  }

  55% {
    opacity: 1;
    transform: scale(1.08) translateY(-6px) rotate(1deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0);
  }
}

@keyframes splashHaloSpin {
  to { transform: rotate(360deg); }
}

@keyframes splashPulse {
  0% {
    opacity: .55;
    transform: scale(.68);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes splashFloat {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes splashBar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* 后续布局修改从这里开始。 */

.preloader-content svg,
.preloader-canvas {
  display: none !important;
}

.preloader {
  overflow: hidden;
  background: linear-gradient(135deg, #ff5d6d 0%, #ffcd35 36%, #2ee688 68%, #00a7d8 100%) !important;
  animation: splashFadeIn .35s ease both;
}

.preloader::before,
.preloader::after {
  content: none !important;
}

.preloader::before {
  width: min(72vw, 680px);
  height: min(72vw, 680px);
  border-top-color: rgba(0, 0, 0, .85);
  border-right-color: rgba(0, 0, 0, .25);
  animation: splashHaloSpin 8s linear infinite;
}

.preloader::after {
  width: min(46vw, 420px);
  height: min(46vw, 420px);
  box-shadow: 0 0 0 18px rgba(255, 255, 255, .16);
  animation: splashPulse 2s ease-out infinite;
}

.preloader-content {
  overflow: visible !important;
  width: min(78vw, 1120px);
  height: auto;
  aspect-ratio: 1;
  background: url("/assets/game/images/LOGO.png") center / contain no-repeat;
  filter: drop-shadow(0 22px 0 rgba(0, 0, 0, .16)) drop-shadow(0 10px 28px rgba(0, 0, 0, .32));
  transform-origin: center;
  animation: splashLogoPop .9s cubic-bezier(.18, .89, .32, 1.28) both, splashFloat 2.4s ease-in-out .95s infinite;
}

.preloader-content::before,
.preloader-content::after {
  content: none !important;
}

.preloader-fonts {
  position: fixed !important;
  top: calc(50% + min(36vw, 470px)) !important;
  left: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  width: min(54vw, 380px) !important;
  height: auto !important;
  min-height: 54px;
  padding: 12px 18px 22px;
  opacity: 1 !important;
  color: #000 !important;
  font-size: clamp(18px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, .92);
  transform: translateX(-50%);
}

.preloader-fonts::after {
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  overflow: hidden;
  height: 8px;
  background: rgba(255, 255, 255, .58);
  border: 2px solid #000;
  border-radius: 999px;
  content: "";
}

.preloader-fonts::before {
  position: absolute;
  z-index: 1;
  bottom: 2px;
  left: 20px;
  width: calc(100% - 40px);
  height: 4px;
  background: linear-gradient(90deg, transparent, #fff445, #00d9c0, transparent);
  border-radius: 999px;
  content: "";
  animation: splashBar 1.2s ease-in-out infinite;
}

.preloader-fonts span {
  display: inline-block;
}

.preloader-fonts span:not(:first-child) {
  animation: splashFloat .85s ease-in-out infinite;
}

.preloader-fonts span:nth-child(2) {
  animation-delay: .05s;
}

.preloader-fonts span:nth-child(3) {
  animation-delay: .15s;
}

.preloader-fonts span:nth-child(4) {
  animation-delay: .25s;
}

.game__logo {
  width: clamp(72px, 6vw, 116px) !important;
  height: auto !important;
  content: url("/assets/game/images/LOGO.png") !important;
}

.home__title {
  width: min(58vw, 620px) !important;
  height: auto !important;
  content: url("/assets/game/images/LOGO.png") !important;
}

.home__footer-logo--gl {
  width: clamp(96px, 8vw, 150px) !important;
  height: auto !important;
  content: url("/assets/home/static/images/logo_gl.png") !important;
}

.home__footer-logo--funorama {
  width: clamp(110px, 8.5vw, 165px) !important;
  height: auto !important;
  content: url("/assets/home/static/images/logo_funorama.png") !important;
}

.menu__gfg {
  display: none !important;
}

.menu__title {
  overflow: visible !important;
}

.menu__title .title {
  position: absolute !important;
  top: 1.12em !important;
  right: 0 !important;
  left: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .06em;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.menu__title .title__letter {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  transform-origin: center !important;
}

.menu__title [data-stroke] {
  display: inline-block;
  padding: .05em .03em .12em;
}

.menu__content .menu__text {
  max-width: 32em;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.75;
}

.menu__content .col-md-12 .button {
  pointer-events: none !important;
  cursor: default !important;
}

.button--twitter,
.button--facebook {
  pointer-events: none !important;
  cursor: default !important;
}

.button--twitter .button__icon,
.button--facebook .button__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.25em;
  height: 2.25em;
}

.button--twitter .button__icon svg,
.button--facebook .button__icon svg {
  display: none !important;
}

.button--twitter .button__icon::before,
.button--facebook .button__icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  line-height: 1;
}

.button--twitter .button__icon::before {
  content: "QQ";
  background: #12b7f5;
  border-radius: 50%;
  font-size: .86em;
  letter-spacing: 0;
}

.button--facebook .button__icon::before {
  content: "WA";
  background: #25d366;
  border-radius: 50%;
  font-size: .82em;
}