@import url("mzf-theme.css");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

body {
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;

  font-family: "LTWave", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
  background: var(--bg-color);
}

/* ======================================================
    LOADING SCREEN
====================================================== */
#loading {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-color);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.icon-sistar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(90vw, 520px);
}

.icon-sistar-wrap {
  position: absolute;
  width: auto;
  height: 90vh;
  height: 90dvh;
  margin-top: -5vh;
  aspect-ratio: 400 / 320;
  overflow: hidden;
  z-index: 1;
  opacity: .1;
}

.icon-sistar-wrap object {
  width: auto;
  height: auto;
  display: block;
  aspect-ratio: 400 / 400;
}

.preloader-info {
  position: absolute;
  width: min(60vw, 450px);
  text-align: center;
  z-index: 2;
}

.preloader-track {
  width: 100%;
  height: 25px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(89, 58, 31, .1);
}

.preloader-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
      #ff8a23 0%,
      #f55825 30%,
      #a7000b 100%);
  transition: width 0.25s ease;
}

.preloader-percent {
  margin-top: 0.35rem;
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: var(--color-2);
}

/* ======================================================
    LOADING
====================================================== */
#mzf-loading {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.mzf-loading-page {
  background-color: var(--bg-color);
}

span.mzf-loading-wave {
  height: 30px;
  width: 7px;
  margin: 5px;
  background-color: var(--color-2);
  animation: loading 1s linear infinite;
  z-index: 999;
}

span.mzf-loading-wave:nth-child(1) {
  animation-delay: 0.1s;
}

span.mzf-loading-wave:nth-child(2) {
  animation-delay: 0.2s;
}

span.mzf-loading-wave:nth-child(3) {
  animation-delay: 0.3s;
}

span.mzf-loading-wave:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes loading {
  0% {
    height: 0;
  }

  25% {
    height: 25px;
  }

  50% {
    height: 50px;
  }

  100% {
    height: 0;
  }
}

/* ======================================================
    WRAPPER
====================================================== */

.mzf-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ======================================================
    HEADER
====================================================== */

.mzf-header {
  position: absolute;
  inset: 0;
  z-index: 12;
  opacity: 0;
  animation: fadeInDown_Style 2s forwards;
  animation-delay: 500ms;
}

.mzf-header-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.mzf-header-left object,
.mzf-header-right object {
  position: absolute;
  top: 0;

  background-repeat: no-repeat;
  background-size: contain;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.mzf-header-left object {
  left: 0;
  width: clamp(120px, 40vmin, 420px);
  aspect-ratio: 420/360;
  z-index: 2;
}

.mzf-header-right object {
  right: 0;
  width: clamp(220px, 70vmin, 880px);
  aspect-ratio: 880/580;
  z-index: 1;
}

/* ======================================================
    FOOTER
====================================================== */

.mzf-footer {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 800ms;
}

.mzf-footer-content {
  width: 100%;
  height: 100%;
}

.mzf-footer-left object,
.mzf-footer-right object {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.mzf-footer-left object {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(140px, 60vmin, 600px);
  aspect-ratio: 880/580;
  z-index: 2;
}

.mzf-footer-right object {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(180px, 60vmin, 700px);
  aspect-ratio: 710/440;
  z-index: 1;
}

.mzf-center object {
  position: relative;
  display: flex;
  top: 0;
  left: 0;
  margin: auto;
  width: clamp(140px, 44vw, 600px);
  aspect-ratio: 600/1300;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.mzf-footer-text {
  position: absolute;
  width: 100vw;
  height: auto;
  bottom: 0;
  text-align: center;
  background-color: rgba(255, 255, 255, .5);
  font-weight: 400;
  color: var(--color-2);
  letter-spacing: .15rem;
  font-size: var(--text-footer);
  z-index: 30;
}


/* ======================================================
    MAIN
====================================================== */

.mzf-main {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.mzf-main.main-tombol {
  align-items: flex-start;
}

.mzf-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

/* ======================================================
    LOGO
====================================================== */

.mzf-header-game {
  width: min(90vw, 90vh, 960px);
  height: auto;
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 500ms;
}

#logo-game {
  width: 100%;
  height: auto;
  aspect-ratio: 1080/1080;
}

.mzf-logo-game {
  width: min(62vw, 42vh, 460px);
  aspect-ratio: 1;

  background-image: var(--gambar-logo-game);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}


.visual-logo_qris {
  width: clamp(96px, 150vw, 90vh);
  height: auto;
}

.peserta-screen {
  width:50vmin;
  height: auto;
  padding-bottom: 10vmin;
}


/* ======================================================
    CONTENT
====================================================== */

.mzf-content-game {
  width: min(80%, 500px);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -10%;
  gap: 20px;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 800ms;
}

.mzf-game-text {
  width: 100%;
  text-align: center;
  color: var(--color-3);
  font-size: clamp(.5rem, 2.55vmin, 1rem);
}

.mzf-game-text span {
  font-size: 1.4em;
  font-weight: 700;
}


/* ======================================================
    PILIH GAME
====================================================== */

.mzf-content-game.pilih-game {

  width: 80vmin;
  height: auto;
  display: flex;
  flex-grow: 1;
  position: relative;
}

.mzf-pilih-game {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;

  transform: rotate(-4deg);
}

.mzf-game-pilh {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  background: var(--color-1);
  border: 2px solid var(--color-2);
  color: var(--color-1);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 5px 15px 20px rgba(0, 0, 0, .2);
  transition: transform .2s ease;
}

.mzf-game-pilh img {
  width: 100%;
  height: auto;
  aspect-ratio: 400/500;
}

.mzf-game-pilh:hover {
  transform: scale(1.05);
}


/* ======================================================
    QR
====================================================== */


.qr_boxs {
  position: relative;
  width: clamp(30px, 50vmin, 400px);
  background-color: rgb(255, 255, 255);
  aspect-ratio: 1 / 1;
  border-radius: 3%;
  bottom: 10vmin;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 800ms;
}

#qrcodes img,
#qrcodes canvas {
  position: relative;
  width: 100%;
  height: auto !important;
  display: grid;
  padding: 5%;
  text-align: center;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.kotak {
  width: 90%;
  margin: 0 auto;
  font-size: var(--text-sm);
  padding-bottom: 10px;
  color: #000;
  display: grid;
  text-align: center;
  justify-content: center;
}

/* ======================================================
    BUTTON
====================================================== */
.mzf-menu-game {
  width: min(90%, 650px);

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 5px;

  transform: rotate(-4deg);

}

.mzf-game-btn {
  position: relative;

  display: inline-block;
  border: none;
  outline: none;
  padding: 10px 15px;

  color: #fff;
  text-decoration: none;

  font-size: clamp(22px, 5vw, 42px);
  font-weight: 900;
  font-style: italic;

  line-height: 1;

  text-transform: uppercase;
  white-space: nowrap;

  transform: skew(-4deg);

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
  position: relative;


}

.mzf-game-btn::after {
  content: "";
  position: absolute;

  left: 0;
  right: -7.5px;
  bottom: -9.9px;

  height: 10px;

  z-index: -2;

  clip-path: polygon(0 0,
      100% 0,
      100% 100%,
      5% 100%);
}

/* Sisi kanan 3D */
.mzf-game-btn::before {
  content: "";
  position: absolute;

  right: -7.5px;
  top: 0px;

  width: 7.5px;
  height: calc(100% + 10px);

  z-index: -1;

  clip-path: polygon(-2% 0,
      100% 25%,
      100% 100%,
      -2% 86%);
}


.red {
  background:
    linear-gradient(90deg,
      #ff8a23 0%,
      #f55825 30%,
      #a7000b 100%);

}

.red::after {
  background:
    linear-gradient(90deg,
      #a7000b 0%,
      #f55825 80%,
      #ff8a23 100%);
}

.red::before {
  background:
    linear-gradient(0deg,
      #ff8a23 0%,
      #f55825 10%,
      #a7000b 100%);
}

/* =====================
       BIRU
    ====================== */

.blue {
  background:
    linear-gradient(90deg,
      #168bc1 0%,
      #0d699e 50%,
      #054170 100%);

}

.blue::after {
  background:
    linear-gradient(90deg,
      #054170 0%,
      #0d699e 50%,
      #054170 100%);
}

.blue::before {
  background:
    linear-gradient(0deg,
      #3d474b 0%,
      #0d699e 10%,
      #054170 100%);
}

.mzf-game-btn:hover {
  transform:
    skew(-4deg) translateY(-5px) scale(1.03);

  filter: brightness(1.2);
}

.mzf-game-btn:active {
  transform:
    skew(-4deg) translateY(2px) scale(0.98);
}

.btn-1 {
  margin-left: 30px;
}

.btn-2 {
  margin-left: -110px;
}

.btn-3 {
  margin-left: 90px;
}


/* ======================================================
    POPUP
====================================================== */
.mzf-popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(30, 30, 30, .95);
  opacity: 0;
  animation: fadein 1s forwards;
  animation-delay: 100ms;
}

.mzf-popup-content {
  position: relative;
  width: min(80vw, 400px);
  padding: 20px;
  color: var(--color-2);
  padding: 10px 40px;
  background-color: var(--color-1);
  border-radius: 8px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 12px;

}

.mzf-popup-content h2 {
  font-family: "LTWave", sans-serif;
  font-size: 2.5rem;
  color: var(--color-2);
}

.mzf-popup-content p {
  font-size: 1.5rem;
  color: var(--color-2);
  text-align: center;
}

.mzf-popup-content li {
  font-size: 1.05rem;
  line-height: 2;
  color: var(--color-2);
  text-align: left;
  margin-left: 10px;
}

.mzf-popup-content button {
  margin: 20px;
  padding: 18px 36px;
  font-size: 1rem;
  color: var(--color-1);
  background-color: var(--color-2);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.mzf-popup-content button:hover {
  background-color: var(--color-3);
}

/* ===========================
   FORM PESERTA
=========================== */

.mzf-peserta-form {
  width: min(90vw, 360px);
  height: auto;
  margin-top: -10vmin;
  background: var(--color-1);
  color: var(--color-2);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 5px 15px 20px rgba(0, 0, 0, .2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 200ms;
}

.mzf-peserta-form h1 {
  text-align: center;
  font-family: LTWave;
  font-size: 1.5em;
  margin-bottom: 20px;

}

.mzf-input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.mzf-input-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-2);
  margin-bottom: 8px;
}

.mzf-input-group input {
  width: 100%;
  height: 60px;
  border: 1px solid var(--color-2);
  border-radius: 12px;
  padding: 0 16px;
  font-size: 16px;
  transition: .25s;
  outline: none;
  background: rgb(230, 230, 230);
}

.mzf-input-group input:focus {
  border-color: var(--color-1);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(33, 150, 243, .15);
}

.mzf-input-group input::placeholder {
  color: #999;
}

.mzf-btn-submit {
  width: 120px;
  height: 54px;
  border: none;
  border-radius: 12px;
  background: var(--color-2);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: .25s;
}

.mzf-btn-submit:hover {
  background: var(--color-3);
  transform: translateY(-2px);
}

.mzf-btn-submit:active {
  transform: scale(.98);
}

.mzf-btn-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.tapbtn {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  z-index: 99
}

.tapbtn:active {
  background: rgba(255, 255, 255, .5);
}

.tapbtn.tombol {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: -50px;
  opacity: 0;
  animation: fadeInUp_Style 2s forwards;
  animation-delay: 400ms;
}

.tapbtn.tombol:active {
  background: rgba(255, 255, 255, 0);
}

/* Styling Dasar Tombol Bulat Modern */
#tapbtnGame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(80vmin, 500px);
  height: auto;
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;

  /* Warna gradasi modern (bisa diganti sesuai tema KOPI DAY) */
  background: linear-gradient(135deg, #ff6b6b, #ee5253);
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;

  /* Efek Bayangan 3D yang halus */
  box-shadow: 0 8px 15px rgba(238, 82, 83, 0.4),
    inset 0 -4px 0 rgba(0, 0, 0, 0.2);

  /* Transisi halus saat disentuh/dilepas */
  transition: all 0.1s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* Menghilangkan kotak biru bawaan HP saat ditekan */

  /* Posisi (Sesuaikan sendiri jika ingin ditaruh di tengah layar) */
  margin: 20px auto;
}

/* Efek Hover (Saat kursor di atas tombol - untuk PC) */
#tapbtnGame:hover {
  transform: translateY(-2px);
  /* Tombol sedikit melayang */
  box-shadow: 0 12px 20px rgba(238, 82, 83, 0.5),
    inset 0 -4px 0 rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
  /* Sedikit lebih cerah */
}

/* Efek Aktif / Ketika Ditekan (Dikombinasikan dengan class "is-pressed" dari jQuery Anda) */
#tapbtnGame:active,
#tapbtnGame.is-pressed {
  transform: translateY(4px);
  /* Tombol turun ke bawah seolah tertekan */
  box-shadow: 0 2px 4px rgba(238, 82, 83, 0.6),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Bayangan luar mengecil, bayangan dalam masuk */
  filter: brightness(0.9);
  /* Sedikit menggelap karena tertekan */
}

/* ======================================================
    ANIMASI KEYFRAME
====================================================== */

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeInUp_Style {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes fadeInDown_Style {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

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

/* ======================================================
    LANDSCAPE
====================================================== */

@media (orientation:landscape) {
  .mzf-container {
    width: auto;
    flex-direction: row;
    justify-content: space-around;

    margin-top: 0%;
  }


  .mzf-content-game.pilih-game {
    width: 45%;
    flex-grow: 0;
    position: relative;
    bottom: 0vmin;
    right: max(2vw, 30px);
  }

  .mzf-pilih-game {
    width: min(90%, 500px);



  }
  .first-screen{
    position: relative;
    right: 5vw;
  }
  .qr_boxs {
    position: relative;
    width: clamp(30px, 70vmin, 400px);
    bottom: 0vmin;
  right: 0px;
  }

  .mzf-popup-content {
    max-height: 90dvh;
    overflow-y: auto;
  }

}