html, body, #main {
  background: #75387c -webkit-gradient(linear, left top, left bottom, from(#805592), color-stop(#a9504e), to(#5f2847));
  background: #75387c linear-gradient(#805592, #a9504e, #5f2847);
  color: #fff;
  overflow-x: hidden;
}

#header::after {
  background: transparent;
}

#footer::after {
  background: transparent;
}

#header .nav {
  -webkit-filter: drop-shadow(0 0.1em 0.2em rgba(0, 68, 136, 0.5)) drop-shadow(0 0.08em 0.05em rgba(0, 0, 0, 0.75));
          filter: drop-shadow(0 0.1em 0.2em rgba(0, 68, 136, 0.5)) drop-shadow(0 0.08em 0.05em rgba(0, 0, 0, 0.75));
  max-width: 16.66667em;
}

.bg-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 16em);
  z-index: -5;
  width: 32em;
  margin: 0 auto;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: #75387c -webkit-gradient(linear, left top, left bottom, from(#805592), color-stop(#a9504e), to(#5f2847));
  background: #75387c linear-gradient(#805592, #a9504e, #5f2847);
}

.bg-area img {
  width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/*===================*/
/* MAIN PAGE CONTENT */
.btn-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  text-align: center;
}

.btn-dl, .btn-yoe {
  display: inline-block;
  vertical-align: bottom;
  width: 8em;
  height: 2.5em;
  border-radius: 1em;
  background: url(/img/Edm/Feature_Game/btns.png?v=20250430) 0 0/16.5em auto no-repeat;
  -webkit-animation: dlBtn .6s infinite step-end;
          animation: dlBtn .6s infinite step-end;
  -webkit-transition: -webkit-filter .2s;
  transition: -webkit-filter .2s;
  transition: filter .2s;
  transition: filter .2s, -webkit-filter .2s;
  cursor: pointer;
}

.btn-dl:hover, .btn-yoe:hover {
  -webkit-filter: brightness(1.2) drop-shadow(0 0 0.25em #fff);
          filter: brightness(1.2) drop-shadow(0 0 0.25em #fff);
}

.btn-dl:active, .btn-yoe:active {
  -webkit-animation: none;
          animation: none;
  background-position-y: bottom;
}

.btn-yoe {
  width: 8.5em;
  background-position: 100% 0;
}

@-webkit-keyframes dlBtn {
  0% {
    background-position-y: top;
  }
  50% {
    background-position-y: bottom;
  }
  100% {
    background-position-y: top;
  }
}

@keyframes dlBtn {
  0% {
    background-position-y: top;
  }
  50% {
    background-position-y: bottom;
  }
  100% {
    background-position-y: top;
  }
}

.sr-only {
  position: fixed;
  top: -9in;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.section {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

/*==============*/
/* PAGE CONTENT */
img {
  max-width: 100%;
  display: block;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.content {
  position: relative;
  width: 92%;
  max-width: 920px;
  margin: 0 auto;
}

.head-title {
  display: block;
  position: relative;
  width: 16.5em;
  top: 0;
  left: calc(50% - 8.25em);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 1.8em 0 0;
}

.title-01 {
  margin: 4.8em auto -.5em;
  width: 16em;
  -webkit-filter: drop-shadow(0 0.1em 0.2em #000);
          filter: drop-shadow(0 0.1em 0.2em #000);
}

.border {
  position: relative;
  display: table;
  z-index: 0;
  font-weight: 700;
  width: 15.5em;
  margin: 2em auto .75em;
  min-height: 4em;
  color: #fff;
  border-radius: .25em;
  background: #8f2777;
  -webkit-box-shadow: 0 -.1em .03em .15em #d53dac, 0 -.05em .07em .4em #f777d3, 0 -.1em 0 .5em #fff2e8, 0 -.05em .05em .55em #d645af;
          box-shadow: 0 -.1em .03em .15em #d53dac, 0 -.05em .07em .4em #f777d3, 0 -.1em 0 .5em #fff2e8, 0 -.05em .05em .55em #d645af;
}

.border p, .border ol {
  font-size: .66667em;
  line-height: 1.5;
  padding: 0 1em;
  margin: .75em auto .75em;
  text-align: center;
}

.border p b, .border ol b {
  font-size: larger;
  line-height: 1.333;
  color: #c50000;
}

.border a img {
  -webkit-transition: -webkit-filter .2s, -webkit-transform .5s;
  transition: -webkit-filter .2s, -webkit-transform .5s;
  transition: filter .2s, transform .5s;
  transition: filter .2s, transform .5s, -webkit-filter .2s, -webkit-transform .5s;
}

.border a:hover img, .border a:active img {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.title {
  font-size: .75em;
  line-height: 1.2;
  position: relative;
  z-index: 2;
  color: #fff;
  margin: 0 auto .5em;
  -webkit-filter: drop-shadow(0 0 0.1em rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0 0 0.1em rgba(0, 0, 0, 0.5));
  text-align: center;
}

.title i {
  --glow-color: #0005;
  text-shadow: 0.05em 0 currentColor, 0 0.05em 0.2em #000, 0 0.05em #fec000, 0.05em 0.05em 0.02em #fec000, 0 0.1em 0.02em #fec000, 0.05em 0.1em 0.02em #fec000;
}

h2.title {
  position: absolute;
  top: -1.3em;
  left: 0;
  right: 0;
  font-size: 1em;
}

h3.title {
  color: #fffced;
  margin-top: .5em;
}

a {
  color: inherit;
}

:visited {
  color: inherit;
}

.text-hilight {
  color: #ff0297;
}

.text-yellow {
  color: #fffa68;
}

.text-blue {
  color: #68fdff;
}

.text-center {
  text-align: center;
}

:root {
  --glow-color: rgba(60,0,120,.5);
  --glow-size: .1em;
  --outline-color: #cc3988;
  --outline-width: .08em;
}

.text-glow {
  text-shadow: 0 0 calc(var(--glow-size) * .5) var(--glow-color);
  -webkit-filter: drop-shadow(0 0 calc(var(--glow-size) * .5) var(--glow-color)) drop-shadow(0 0 calc(var(--glow-size)) var(--glow-color));
          filter: drop-shadow(0 0 calc(var(--glow-size) * .5) var(--glow-color)) drop-shadow(0 0 calc(var(--glow-size)) var(--glow-color));
}

.text-outline {
  letter-spacing: normal;
  font-weight: 600;
  text-shadow: calc(.7 * var(--outline-width)) calc(.7 * var(--outline-width)) calc(.25 * var(--outline-width)) var(--outline-color), calc(.7 * var(--outline-width)) calc(-.7 * var(--outline-width)) calc(.25 * var(--outline-width)) var(--outline-color), calc(-.7 * var(--outline-width)) calc(.7 * var(--outline-width)) calc(.25 * var(--outline-width)) var(--outline-color), calc(-.7 * var(--outline-width)) calc(-.7 * var(--outline-width)) calc(.25 * var(--outline-width)) var(--outline-color), calc(1 * var(--outline-width)) 0 calc(.25 * var(--outline-width)) var(--outline-color), calc(-1 * var(--outline-width)) 0 calc(.25 * var(--outline-width)) var(--outline-color), 0 calc(1 * var(--outline-width)) calc(.25 * var(--outline-width)) var(--outline-color), 0 calc(-1 * var(--outline-width)) calc(.25 * var(--outline-width)) var(--outline-color), calc(.9 * var(--outline-width)) calc(.4 * var(--outline-width)) calc(.3 * var(--outline-width)) var(--outline-color), calc(.9 * var(--outline-width)) calc(-.4 * var(--outline-width)) calc(.3 * var(--outline-width)) var(--outline-color), calc(-.9 * var(--outline-width)) calc(.4 * var(--outline-width)) calc(.3 * var(--outline-width)) var(--outline-color), calc(-.9 * var(--outline-width)) calc(-.4 * var(--outline-width)) calc(.3 * var(--outline-width)) var(--outline-color), calc(.4 * var(--outline-width)) calc(.9 * var(--outline-width)) calc(.3 * var(--outline-width)) var(--outline-color), calc(.4 * var(--outline-width)) calc(-.9 * var(--outline-width)) calc(.3 * var(--outline-width)) var(--outline-color), calc(-.4 * var(--outline-width)) calc(.9 * var(--outline-width)) calc(.3 * var(--outline-width)) var(--outline-color), calc(-.4 * var(--outline-width)) calc(-.9 * var(--outline-width)) calc(.3 * var(--outline-width)) var(--outline-color);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  [text-stroke] {
    color: transparent;
    text-shadow: none;
    display: inline-block;
    position: relative;
    letter-spacing: .5em;
    padding: 0 .1em 0 .5em;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #bf003a), color-stop(80%, #bf003a));
    background: linear-gradient(#bf003a 20%, #bf003a 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: .15em transparent;
    -webkit-filter: drop-shadow(-0.05em 0 #c34a88) drop-shadow(0.05em 0 #c34a88) drop-shadow(0 0.1em 0.01em #c34a88);
            filter: drop-shadow(-0.05em 0 #c34a88) drop-shadow(0.05em 0 #c34a88) drop-shadow(0 0.1em 0.01em #c34a88);
  }
  [text-stroke]::before {
    content: attr(text-stroke);
    position: absolute;
    z-index: 1;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), color-stop(80%, #ffd40c));
    background: linear-gradient(#fff 20%, #ffd40c 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 0em transparent;
    pointer-events: none;
  }
}

#article {
  pointer-events: none;
}

#article > * {
  pointer-events: all;
}

#article .head-title {
  pointer-events: none;
}

#article .head-title > * {
  pointer-events: all;
}

#content-area {
  position: relative;
  width: 16.66667em;
  left: calc(50% - 8.33333em);
}

.btn-play {
  font-size: inherit;
  display: block;
  margin: -.5em auto -.5em;
  position: relative;
  z-index: 1;
  width: 13.5em;
  height: 5.55em;
  border-radius: 2.5em;
  border: none;
  cursor: pointer;
}

.btn-play::after, .btn-play::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("/img/Edm/Feature_Game/btn-play.png?v=20250430") 0 0/auto 200%;
  border-radius: inherit;
  pointer-events: none;
}

.btn-play::after {
  background-position: 0 100%;
  -webkit-animation: btnPlay2 2s infinite ease-in-out;
          animation: btnPlay2 2s infinite ease-in-out;
  opacity: 0;
  -webkit-transition: opacity .1s, -webkit-transform .1s;
  transition: opacity .1s, -webkit-transform .1s;
  transition: opacity .1s, transform .1s;
  transition: opacity .1s, transform .1s, -webkit-transform .1s;
}

.btn-play b {
  position: absolute;
  top: 1em;
  left: .9em;
  z-index: 1;
  width: 3em;
  height: 3em;
  -webkit-transform: translate(0, 0.1em);
          transform: translate(0, 0.1em);
  -webkit-animation: btnPlay 2s infinite ease-in-out;
          animation: btnPlay 2s infinite ease-in-out;
  pointer-events: none;
  -webkit-transition: -webkit-transform .15s;
  transition: -webkit-transform .15s;
  transition: transform .15s;
  transition: transform .15s, -webkit-transform .15s;
}

.btn-play b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("/img/Edm/Feature_Game/bg-button2.png?v=20250430") 100% 100%/100% auto;
  -webkit-transition: -webkit-filter .5s;
  transition: -webkit-filter .5s;
  transition: filter .5s;
  transition: filter .5s, -webkit-filter .5s;
}

.btn-play:hover b, .btn-play:active b {
  -webkit-transition: -webkit-transform .65s;
  transition: -webkit-transform .65s;
  transition: transform .65s;
  transition: transform .65s, -webkit-transform .65s;
  -webkit-transform: translate(0, 0) scale(1.05);
          transform: translate(0, 0) scale(1.05);
}

.btn-play:hover b::before, .btn-play:active b::before {
  -webkit-filter: drop-shadow(0 0 0.025em #008) drop-shadow(0 0 0.25em #dff) drop-shadow(0 0 0.25em rgba(0, 0, 136, 0.5));
          filter: drop-shadow(0 0 0.025em #008) drop-shadow(0 0 0.25em #dff) drop-shadow(0 0 0.25em rgba(0, 0, 136, 0.5));
}

@-webkit-keyframes btnPlay {
  0% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(30deg);
            filter: hue-rotate(30deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
}

@keyframes btnPlay {
  0% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(30deg);
            filter: hue-rotate(30deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
}

@-webkit-keyframes btnPlay1 {
  15% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
}

@keyframes btnPlay1 {
  15% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
}

@-webkit-keyframes btnPlay2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes btnPlay2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

:root {
  --swiper-navigation-sides-offset: 0;
  --swiper-navigation-size: 1em;
}

.swiper-button-container {
  -webkit-filter: drop-shadow(0 0 0.2em #000);
          filter: drop-shadow(0 0 0.2em #000);
}

.swiper-button-prev, .swiper-button-next {
  width: 1.5em;
  top: 0;
  margin: 0;
  height: 100%;
}

.swiper-button-prev::after, .swiper-button-next::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/img/Edm/Feature_Game/arrow.png?v=20250430) left/1.25em auto no-repeat;
  -webkit-transition: -webkit-transform .2s, -webkit-filter .2s;
  transition: -webkit-transform .2s, -webkit-filter .2s;
  transition: transform .2s, filter .2s;
  transition: transform .2s, filter .2s, -webkit-transform .2s, -webkit-filter .2s;
}

.swiper-button-prev:hover::after, .swiper-button-next:hover::after {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.swiper-button-next {
  right: 0;
}

.swiper-button-prev {
  left: 0;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

#event1 {
  margin-top: 1.4em;
}

#event1::after {
  border-image-source: url(/img/Edm/Feature_Game/border1.png?v=20250430);
}

#event1 a {
  border-radius: inherit;
}

#event1 .game-image {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  margin: 0;
}

#event1 .game-image img {
  width: 100%;
}

#event1 .game-image figcaption {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100%;
  font-size: .66667em;
  line-height: 1.2;
  text-align: center;
  padding: 2em 0 .5em;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(20%, #000), to(transparent));
  background: linear-gradient(0deg, #000 20%, transparent);
}

#event2::after {
  border-image-source: url(/img/Edm/Feature_Game/border2.png?v=20250430);
}

#event2 .swiper {
  width: 15.5em;
  margin: .5em 0 1em;
}

#event2 .swiper-slide {
  width: 12em;
  border: .05em solid #fff;
  position: relative;
  overflow: hidden;
  -webkit-box-shadow: 0 0 0.25em var(--glow-color, #fff);
          box-shadow: 0 0 0.25em var(--glow-color, #fff);
  isolation: isolate;
}

#event2 .swiper-slide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  -webkit-box-shadow: inset 0 0 .25em #fff;
          box-shadow: inset 0 0 .25em #fff;
  pointer-events: none;
}

#event3::after, #event3-mo::after {
  border-image-source: url(/img/Edm/Feature_Game/border3.png?v=20250430);
}

#event3 .swiper, #event3-mo .swiper {
  width: 15.5em;
  margin: 0 0 0em;
  padding: 0 0em;
}

#event3 .video-container, #event3-mo .video-container {
  padding: 0 .2em;
  margin: 0 auto;
}

#event3 .video, #event3-mo .video {
  width: 200%;
  height: 200%;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}

#event3 .video-frame, #event3-mo .video-frame {
  position: relative;
  width: 6.4em;
  height: 3.6em;
  margin: 0 0 0 auto;
  border: .02em solid #fff;
  -webkit-box-shadow: 0 0 0.25em var(--glow-color, #fff);
          box-shadow: 0 0 0.25em var(--glow-color, #fff);
  background: #000;
  -webkit-transform-origin: 0% 25%;
          transform-origin: 0% 25%;
  -webkit-transition: margin .3s, -webkit-transform .3s;
  transition: margin .3s, -webkit-transform .3s;
  transition: transform .3s, margin .3s;
  transition: transform .3s, margin .3s, -webkit-transform .3s;
  overflow: hidden;
}

#event3 .video-frame::after, #event3-mo .video-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  -webkit-box-shadow: inset 0 0 .25em #fff;
          box-shadow: inset 0 0 .25em #fff;
  pointer-events: none;
}

#event3 .video-title, #event3-mo .video-title {
  width: calc(6.4em / .6);
  padding: .5em 0 0;
  font-size: .6em;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  color: #fffced;
  --outline-color: #cc3988;
  --outline-width: .08em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#event3 .swiper-button-prev, #event3 .swiper-button-next {
  width: 1.35em;
}

#event3 .video-container {
  font-size: .95em;
}

#event3 .swiper-slide {
  margin: 0;
  padding: 1em 0;
  position: relative;
}

#event3 .swiper-slide:hover {
  z-index: 1;
}

#event3 .swiper-slide:hover .video-frame {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

#event3 .swiper-slide-active .video-frame, #event3 .swiper-slide-active .video-title {
  -webkit-transform-origin: 0% 25%;
          transform-origin: 0% 25%;
  margin: 0 0 0 auto;
}

#event3 .swiper-slide-prev .video-frame, #event3 .swiper-slide-prev .video-title, #event3 .swiper-slide-active + .swiper-slide-next .video-frame, #event3 .swiper-slide-active + .swiper-slide-next .video-title {
  -webkit-transform-origin: 100% 25%;
          transform-origin: 100% 25%;
  margin: 0 auto 0 0;
}

#event3-mo {
  --swiper-navigation-sides-offset: 1.25em;
}

#event3-mo .swiper {
  margin: .5em 0 1em;
}

#event3-mo .swiper-wrapper {
  will-change: transform;
}

#event3-mo .swiper-slide {
  width: 12.4em;
  padding: 0;
  will-change: transform;
}

#event3-mo .swiper-button-prev::after, #event3-mo .swiper-button-next::after {
  bottom: 2em;
}

#event3-mo .video {
  width: 150%;
  height: 150%;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(0.66667);
          transform: scale(0.66667);
}

#event3-mo .video-frame {
  width: 12em;
  height: 6.75em;
}

#event3-mo .video-title {
  font-size: .8em;
  width: calc(12em / .8);
}

#event3-mo .swiper .swiper-slide-shadow-left, #event3-mo .swiper .swiper-slide-shadow-right {
  height: 6.75em;
}

#event4 {
  padding-bottom: .25em;
}

#event4::after {
  border-image-source: url(/img/Edm/Feature_Game/border4.png?v=20250430);
}

.unbox-container {
  display: block;
  text-align: center;
}

.unbox-item {
  display: inline-block;
  width: 7.5em;
  height: auto;
  max-height: 4.22em;
  border: 0.05em solid rgba(255, 255, 255, 0.5);
  border-radius: .051em;
  overflow: hidden;
}

.unbox-item img {
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
  will-change: transform;
}

.unbox-item:hover img {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.side-container {
  position: fixed;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  top: 4em;
  z-index: 5;
  pointer-events: none;
  width: 100%;
  max-width: 26em;
  opacity: 1;
}

.side-container > * {
  pointer-events: all;
}

.side-container #side-qr {
  -webkit-box-shadow: 0 0 0.2em 0.05em rgba(128, 0, 96, 0.5);
          box-shadow: 0 0 0.2em 0.05em rgba(128, 0, 96, 0.5);
}

.side {
  position: relative;
  z-index: 0;
  margin-left: auto;
  text-align: center;
  line-height: 1.25;
  width: 4.5em;
  padding: .3em .25em;
  border-radius: .5em;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

.side.active {
  opacity: 1;
  pointer-events: all;
}

@media (max-width: 900px) {
  .side.active {
    opacity: 0;
    pointer-events: none;
  }
}

.side::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: .08em solid #ffa8e7;
  border-radius: inherit;
  background: -webkit-gradient(linear, left top, left bottom, from(#ea6ec9), color-stop(#ff7edc), to(#aa206a));
  background: linear-gradient(#ea6ec9, #ff7edc, #aa206a);
  -webkit-box-shadow: inset 0 0 0.1em 0.1em rgba(128, 0, 96, 0.5), 0 0 0.1em 0.05em rgba(128, 0, 96, 0.25);
          box-shadow: inset 0 0 0.1em 0.1em rgba(128, 0, 96, 0.5), 0 0 0.1em 0.05em rgba(128, 0, 96, 0.25);
  pointer-events: none;
}

.side-mobile {
  position: fixed;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
  font-size: smaller;
  bottom: 0;
  width: 100%;
  height: 3em;
  background: #fb72c3;
  -webkit-box-shadow: 0 0 .15em .15em #fb72c3;
          box-shadow: 0 0 .15em .15em #fb72c3;
}

.side-mobile .btn-container {
  margin-top: .5em;
  gap: 1em;
}

.side-mobile .btn-dl, .side-mobile .btn-yoe {
  display: inline-block;
  vertical-align: bottom;
  width: 6.1em;
  height: 2.3em;
  margin: -.25em 0;
  background-image: url(/img/Edm/Feature_Game/btns-mobile.png?v=20250430);
  background-position-y: top;
  background-size: 12.2em auto;
  -webkit-animation: none;
          animation: none;
  -webkit-transition: -webkit-filter .2s;
  transition: -webkit-filter .2s;
  transition: filter .2s;
  transition: filter .2s, -webkit-filter .2s;
  cursor: pointer;
}

.side-mobile .btn-dl:hover, .side-mobile .btn-yoe:hover {
  -webkit-filter: brightness(1.2) drop-shadow(0 0 0.25em #fff);
          filter: brightness(1.2) drop-shadow(0 0 0.25em #fff);
}

.side-mobile .btn-dl:active, .side-mobile .btn-yoe:active {
  -webkit-animation: none;
          animation: none;
  background-position-y: bottom;
}

@media (max-width: 900px) {
  #main {
    padding-bottom: 2.75em;
  }
  .side-mobile.active {
    opacity: 1;
    pointer-events: all;
  }
}

#rules {
  color: #551a00;
  margin-top: 0;
  text-shadow: 0 0 .25em #ff6152, 0 0 .25em #ff6152, 0 0 .25em #ff6152,0 0 .25em #ff6152;
  padding: 0 .5em;
  --outline: #ff6152;
}

#rules h2 {
  font-size: .6em;
  text-align: center;
  line-height: 1.2;
  margin: .25em auto;
  padding-left: .75em;
}

#rules ul, #rules ol {
  text-align: justify;
  font-size: .5em;
  font-weight: 700;
  padding-left: 2em;
  padding-right: 1em;
  margin: .35em auto;
  line-height: 1.3333;
}

#rules li + li {
  margin-top: .5em;
}

#rules button {
  color: #f43228;
}

/*==============*/
/* MODAL STYLES */
/* ==================== */
/* JS ANIMATION CLASSES */
.fade-up, .fade-left, .fade-right, .fade-down, .fade-in {
  opacity: 0;
  -webkit-transition: opacity 1.6s, -webkit-transform 1s;
  transition: opacity 1.6s, -webkit-transform 1s;
  transition: opacity 1.6s, transform 1s;
  transition: opacity 1.6s, transform 1s, -webkit-transform 1s;
}

.fade-up.faded, .fade-left.faded, .fade-right.faded, .fade-down.faded, .fade-in.faded {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}

.fade-up {
  -webkit-transform: translate(0, 1em);
          transform: translate(0, 1em);
}

.fade-down {
  -webkit-transform: translate(0, -1em);
          transform: translate(0, -1em);
}

.fade-left {
  -webkit-transform: translate(1em, 0);
          transform: translate(1em, 0);
}

.fade-right {
  -webkit-transform: translate(-1em, 0);
          transform: translate(-1em, 0);
}

.bg-area.fade-up, .bg-area .fade-up {
  -webkit-transform: none;
          transform: none;
}

/*=====================*/
/* KEYFRAMES AND MEDIA */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes glow {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
}

@keyframes glow {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
}

@-webkit-keyframes pop {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes pop {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes fade {
  0% {
    opacity: 0;
    -webkit-backdrop-filter: blur(0);
            backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
    -webkit-backdrop-filter: blur(0);
            backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }
}

@-webkit-keyframes blink {
  0% {
    background-position: top;
  }
  50% {
    background-position: bottom;
  }
}

@keyframes blink {
  0% {
    background-position: top;
  }
  50% {
    background-position: bottom;
  }
}

@media (max-width: 1920px) {
  #main, .modal {
    font-size: 3.125vw;
  }
}

@media (max-width: 1280px) {
  #main, .modal {
    font-size: 40px;
  }
}

@media (max-height: 720px) {
  .modal {
    font-size: 6vmin;
  }
}

@media (max-width: 666px) {
  #main, .modal {
    font-size: 6vw;
  }
}

@media (max-width: 420px) {
  #rules {
    font-size: 27px;
    padding: 0 0;
  }
  .modal-window {
    max-width: 96%;
  }
}
/*# sourceMappingURL=main.css.map */