body { 
  padding: 0; 
  margin: 0; 
  background-color: black;
  overflow: hidden; 
}
@font-face {
  font-family: 'numberFont';
  src: url('numberFont.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
#unity-container { position: absolute }
#unity-container.unity-desktop { /*left: 50%; top: 50%; transform: translate(-50%, -50%)*/ }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: black; }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  height: 100%; 
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; 
}
#unity-logo-bg { 
  width: 1600px;
  height: 900px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transform-origin: center center;
  transition: transform 0.1s ease;
  pointer-events: none;
  z-index: -1;
 }
 #unity-logo-bg.normal{
  background: url('bgr.jpg') no-repeat center center;
  background-size: contain;
 }
 #unity-logo-bg.register{
  background: url('bgr1.jpg') no-repeat center center;
  background-size: contain;
 }
 #unity-logo { 
   width: 40%; 
   height: 40%; 
   max-width: 302px;
   max-height: 250px;
   background: url('loading.gif') no-repeat center;
   background-size: contain;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); 
  }
#unity-progress-bar-empty { 
  width: 141px; 
  height: 18px; 
  margin-top: 10px; 
  margin-left: 80.5px; background: url('progress-bar-empty-dark.png') no-repeat center;
  background-size: cover;
  display: none;
 }
#unity-progress-bar-full { 
  width: 0%; 
  height: 18px; 
  margin-top: 10px; 
  background: url('progress-bar-full-dark.png') no-repeat center;
  background-size: cover;
  display: none;
 }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

.lds-hourglass {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 166.67px;
  height: 127px;
  background: url('loading-anim.png') no-repeat left center;
  background-size: 1000px 127px; /* 10 frame ngang */
  animation: sprite-anim 0.2s steps(6) infinite;
}
@keyframes sprite-anim {
  100% { background-position: -1000px 0; }
}

#play-btn {
  pointer-events: auto;
  position: absolute;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: auto;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, opacity 0.4s ease, filter 0.4s ease;
}
#reg-btn {
  pointer-events: auto;
  position: absolute;
  bottom: 106px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: auto;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, opacity 0.4s ease, filter 0.4s ease;
}
#reg-btn-daily {
  pointer-events: auto;
  position: absolute;
  bottom: 210px;
  left: 29%;
  transform: translateX(-50%);
  width: 200px;
  height: auto;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, opacity 0.4s ease, filter 0.4s ease;
}
#reg-btn-weekly {
  pointer-events: auto;
  position: absolute;
  bottom: 210px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: auto;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, opacity 0.4s ease, filter 0.4s ease;
}
#reg-btn-monthly {
  pointer-events: auto;
  position: absolute;
  bottom: 210px;
  left: 71%;
  transform: translateX(-50%);
  width: 200px;
  height: auto;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, opacity 0.4s ease, filter 0.4s ease;
}
#reg-retry-btn {
  pointer-events: auto;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: auto;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, opacity 0.4s ease, filter 0.4s ease;
}
#retry-btn {
  pointer-events: auto;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: auto;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, opacity 0.4s ease, filter 0.4s ease;
}
#play-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(100%);
}
#play-btn.pulse-anim {
  animation: pulse 1.2s ease-in-out infinite;
}
#reg-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(100%);
}
#reg-btn.pulse-anim {
  animation: pulse 1.2s ease-in-out infinite;
}
#reg-btn-daily.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(100%);
}
#reg-btn-daily.pulse-anim {
  animation: pulse 1.2s ease-in-out infinite;
}
#reg-btn-weekly.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(100%);
}
#reg-btn-weekly.pulse-anim {
  animation: pulse 1.2s ease-in-out infinite;
}
#reg-btn-monthly.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(100%);
}
#reg-btn-monthly.pulse-anim {
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scale(1.08);
    opacity: 0.9;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}
#play-btn:hover {
  transform: translateX(-50%) scale(1.1);
}
#loading-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: Arial, sans-serif;
  font-size: 32px;
  color: white;
  z-index: 10;
  pointer-events: none;
  animation: loadingPulse 1.5s ease-in-out infinite;
}
@keyframes loadingPulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}
#loading-text.finalizing::after {
  content: ".";
  animation: dots 1s steps(3, end) infinite;
}

@keyframes dots {
  0%   { content: ""; }
  33%  { content: "."; }
  66%  { content: ".."; }
  100% { content: "..."; }
}


/* ===== POPUPS ===== */
#popup-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.popup {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.popup::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.popup-content {
  position: relative;
  top: 32px;
  z-index: 2;
  width: 420px;
  min-height: 260px;
  padding: 64px 48px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: url('popup-bg.png') no-repeat center center;
  background-size: 100% 100%;
}

.popup-text {
  color: #694800;
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
.popup-text-2 {
  color: #473101;
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}

#phone-input {
  width: min(300px, 72vw);
  height: 52px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  font-size: 24px;
  font-family: 'numberFont', sans-serif;
  text-align: center;
  outline: none;
}

#phone-input:focus,
.otp-input:focus {
  border-color: #ffd54a;
  box-shadow: 0 0 10px rgba(255, 213, 74, 0.65);
}

.popup-btn-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.popup-btn {
  min-width: 130px;
  height: 54px;
  padding: 0 24px;
  border: none;
  cursor: pointer;
  background: url('popup-btn.png') no-repeat center center;
  background-size: 100% 100%;
  color: #000000;
  font-size: 22px;
  font-weight: 700;
  font-family: 'numberFont', sans-serif;
}
#btn-submit-phone.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(100%);
}

.otp-input-group {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.otp-input {
  width: 48px;
  height: 56px;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  font-size: 24px;
  font-family: 'numberFont', sans-serif;
  text-align: center;
  outline: none;
}
#popup-1 .popup-content,
#popup-2 .popup-content,
#popup-3 .popup-content {
  transform: scale(0.8);
  max-width: 105vw;
}
#popup-4 .popup-content {
  transform: scale(0.8);
  max-width: 105vw;
}
.otp-resend-wrap {
  text-align: center;
}

.otp-resend {
  font-size: 20px;
  font-family: 'numberFont', sans-serif;
  color: #000000;
  text-decoration: underline;
  cursor: pointer;
  user-select: none;
}

.otp-resend.disabled {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}