html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.mainContainer {
  display: block;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 1152px) {
  .mainContainer { width: 1152px; }
}

video::-webkit-media-controls-enclosure { display: none; }

.video-container {
  position: relative;
  margin-top: 8px;
}

.video-container::before {
  display: block;
  width: 100%;
  padding-bottom: 56.25%;
  content: "";
}

.video-container > div {
  position: absolute;
  inset: 0;
}

.video-container video,
#GameDiv,
#Cocos3dGameContainer,
#GameCanvas {
  width: 100%;
  height: 100%;
}

.centeredVideo {
  display: block;
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
}

/* Canvas, native edit boxes and both video layers share one centered frame. */
#Cocos3dGameContainer {
  position: relative;
  overflow: hidden;
}

:root {
  --gold: #e6cd8e;
  --gold-lt: #fbf0cd;
  --gold-dk: #b99f5c;
  --glow: rgba(230, 205, 142, 0.45);
}

#preloading {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(170deg, #171b28 0%, #0e1017 100%);
}

#animationElement {
  position: relative;
  width: 100%;
  height: 100%;
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.l1 {
  position: relative;
  display: grid;
  width: 200px;
  height: 200px;
  border: 2px solid #33333a;
  border-radius: 50%;
  place-items: center;
}

.l1 span {
  color: transparent;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt), var(--gold), var(--gold-dk));
  background-size: 300% 100%;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255, 252, 240, 0.85)) drop-shadow(0 0 22px rgba(198, 222, 255, 0.5));
  animation: l1pop 2.8s ease-in-out infinite, l1wave 3.4s linear infinite;
  -webkit-background-clip: text;
}

.l1::after {
  position: absolute;
  inset: -3px;
  border: 3px solid transparent;
  border-bottom-color: var(--gold);
  border-radius: 50%;
  content: "";
  filter: drop-shadow(0 0 6px var(--glow));
  animation: l1sp 1.1s linear infinite;
}

@keyframes l1pop {
  0% { opacity: 0; scale: 0.82; }
  22% { opacity: 1; scale: 1; }
  70% { opacity: 0.9; scale: 1.12; }
  100% { opacity: 0; scale: 1.3; }
}

@keyframes l1wave {
  100% { background-position: -300% 0; }
}

@keyframes l1sp {
  100% { transform: rotate(360deg); }
}

/* Mobile's native OrientationUtil sets inline visibility; desktop has no mask. */
#orientationMask { display: none; }

#videoDiv,
#gameVideoDiv,
#duotaiVideoDiv {
  position: absolute;
  z-index: -10;
  overflow: hidden;
}

#videoDiv {
  width: 100%;
  height: 100%;
}

#gameVideoDiv,
#duotaiVideoDiv {
  bottom: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transform-origin: 0 100% 0;
}

#gameVideoDiv { border-radius: 0; }
#duotaiVideoDiv { border-radius: 8px; }