@font-face {
  font-family: "MStiffHeiHK-UltraBold";
  src: url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.eot");
  src: url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.svg#MStiffHeiHK-UltraBold")format("svg");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  overscroll-behavior-x: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: rgba(235, 183, 213);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.game-container {
  position: relative;
  width: 56.25vh;
  /* 9:16 aspect ratio */
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* visibility: hidden; */
  position: relative;
  display: none;
}

.screen.active {
  display: block;
}

.full-screen {
  width: 100%;
  /* height: 100%; */
  /* object-fit: cover; */
}

.rules-text-container {
  position: absolute;
  width: 100%;
  top: 0;
}

#rules .rule-text {
  position: absolute;
  width: 57%;
  /* background: red; */
  display: block;
  top: 62%;
  left: 24%;
  font-family: MStiffHeiHK-UltraBold;
  font-size: 12px;
}

.invisible-button {
  position: absolute;
  /* top: 100%; */
  left: 0;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  height: 100%;
  width: 100%;
  /* height: 36px; */
  background-color: rgba(255, 0, 0, 0.4);
  border: none;
  cursor: pointer;
  z-index: 100;
  /* Ensure buttons are on top for clickability */
  background-color: transparent;
}

.countdown-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
}

.hidden {
  display: none;
}

/* Game Screen Styles */
.game-background {
  position: absolute;
  width: 100%;
  /* height: 100%; */
  z-index: 1;
}

.holes-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.hole {
  position: absolute;
  width: 20%;
  /* Relative to game-container */
  height: 20%;
  /* Relative to game-container */
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
  /* Ensure holes are above other elements for clickability */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.hole:hover {
  /* Optional: Add a subtle highlight effect on hover */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0);
}

.hole-outside {
  position: absolute;
  width: 100%;
  /* height: 100%; */
  z-index: 3;
  pointer-events: none;
  /* Ensure this doesn't block clicks */
}

.mole {
  position: absolute;
  width: 100%;
  /* Fill parent hole completely */
  height: 100%;
  /* Fill parent hole completely */
  object-fit: contain;
  z-index: 2;
  transition: transform 0.3s;
  transform: scale(0.9);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.mole.position-1 {
  left: 0%;
  bottom: 0%;
}

.mole.position-2 {
  left: 0%;
  bottom: 0%;
}

.mole.position-3 {
  left: 0%;
  bottom: 0%;
}

.mole.position-4 {
  left: 0%;
  bottom: 0%;
}

.mole.position-5 {
  left: 0%;
  bottom: 0%;
}

.mole.position-6 {
  left: 0%;
  bottom: 0%;
}

.mole.position-7 {
  left: 0%;
  bottom: 0%;
}

/* Hole positions - Using vmin/vh for consistent ratios */
.hole[data-index="0"] {
  top: 49.5%;
  left: 23%;
}

.hole[data-index="1"] {
  top: 49.5%;
  left: 56%;
}

.hole[data-index="2"] {
  top: 60.4%;
  left: 8%;
}

.hole[data-index="3"] {
  top: 60.4%;
  left: 41%;
}

.hole[data-index="4"] {
  top: 60.4%;
  left: 73%;
}

.hole[data-index="5"] {
  top: 70.42%;
  left: 23%;
}

.hole[data-index="6"] {
  top: 70.42%;
  left: 56%;
}

.explosion {
  position: fixed;
  width: 200px;
  height: 200px;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Score Container in Game Screen */
.score-container {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 6;
  width: 30%;
  text-align: center;
}

.score-background {
  width: 100%;
  height: auto;
  position: relative;
}

.score-value {
  position: absolute;
  top: 65%;
  /* Moved down from 50% to 65% */
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  font-family: 'MStiffHeiHK-UltraBold', sans-serif;
  color: black;
  line-height: 1;
}

/* Timer Container */
.timer-container {
  position: absolute;
  left: 0;
  /* transform: translateX(-50%); */
  z-index: 5;
  right: 0;
  margin: auto;
  width: 20%;
  top: 28%;
}

.timer-background {
  width: 100%;
  height: auto;
  top: 34%;
  position: absolute;
}

.timer-value {
  position: absolute;
  /* top: 39%; */
  /* left: 50%; */
  /* transform: translate(-50%, -55%); */
  font-size: 26px;
  font-family: 'MStiffHeiHK-UltraBold', sans-serif;
  color: black;
  width: 100%;
  text-align: center;
  margin-top: 27%;
}

/* Score popup colors */
.score-popup.points {
  color: #4df2d5;
  font-size: 60px;
}

.score-popup.time {
  color: orange;
  font-size: 60px;
}

.score-popup.skipped {
  color: red;
  font-size: 70px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
  animation: skippedAnimation 0.7s ease-out;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 10px;
}

@keyframes skippedAnimation {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

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

/* Final Score Screen */
.final-score-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Score container styles */
.score-container-final {
  position: absolute;
  /* width: 70%; */
  top: 33.5%;
  /* left: 50%; */
  /* transform: translateX(-50%); */
}

.accuracy-container-final {
  position: absolute;
  /* width: 70%; */
  top: 43.55%;
  left: 44%;
  /* transform: translateX(-50%); */
}

.total-time-container-final {
  position: absolute;
  /* width: 70%; */
  top: 53.6%;
  /* left: 50%; */
  /* transform: translateX(-50%); */
}

/* Score text styles */

#finalScore .textinbox {
  position: relative;
  font-family: 'MStiffHeiHK-UltraBold', sans-serif;
  color: black;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
  font-size: 40px;
  left: 16%;
}

.score-text {
  /* top: 50%; */
}

/* Accuracy styles */
.accuracy {
  /* top: 50%; */
}

/* Total time styles */
.total-time {
  /* top: 50%; */
}

/* Small screen adjustments */
@media (max-height: 600px) {
  /* 
  .score-text,
  .accuracy,
  .total-time {
    font-size: 4vh;
  }

  .score-container-final {
    top: 25%;
  }

  .accuracy-container-final {
    top: 50%;
  }

  .total-time-container-final {
    top: 75%;
  } */
}

/* Very small screen adjustments */
@media (max-height: 300px) {
  /* 
  .score-text,
  .accuracy,
  .total-time {
    font-size: 3vh;
  }

  .score-container-final {
    top: 30%;
  }

  .accuracy-container-final {
    top: 50%;
  }

  .total-time-container-final {
    top: 70%;
  } */
}

.back-to-menu {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'MStiffHeiHK-UltraBold', sans-serif;
  font-size: 4vh;
  color: #00ffff;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
  cursor: pointer;
  text-transform: uppercase;
}

/* Small screen adjustments */
@media (max-height: 300px) {
  .score-text {
    font-size: 3vh;
  }

  .accuracy-label,
  .accuracy,
  .total-time-label,
  .total-time {
    font-size: 2vh;
  }

  .score-container-final::before,
  .accuracy-container-final::before,
  .total-time-container-final::before {
    font-size: 2vh;
    top: -25px;
  }

  .score-container-final,
  .accuracy-container-final,
  .total-time-container-final {
    margin-top: 25px;
  }
}

.back-button {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  width: 785px;
  z-index: 1000;
}

/* Score popup animation */
@keyframes scorePopup {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  100% {
    transform: scale(1.5) translateY(-20px);
    opacity: 0;
  }
}

.score-popup {
  position: absolute;
  font-family: 'MStiffHeiHK-UltraBold', sans-serif;
  color: white;
  font-size: 36px;
  z-index: 7;
  pointer-events: none;
  animation: scorePopup 0.5s ease-out forwards;
}

/* End screen styles */
.end-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 60%;
  display: none;
}

.end-overlay.show {
  display: block;
}

/* After the accuracy styles */
.total-time-label {
  font-family: 'MStiffHeiHK-UltraBold', sans-serif;
  font-size: 2.5vh;
  margin-top: 1vh;
  white-space: nowrap;
}

.accuracy-label {
  font-family: 'MStiffHeiHK-UltraBold', sans-serif;
  font-size: 2.5vh;
  margin-top: 1vh;
  white-space: nowrap;
}

/* Update the small screen adjustments to include total time */
@media (max-height: 300px) {
  /* This is already handled in the previous media query */
}

/* After the total-time styles */
.final-score-countdown {
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'MStiffHeiHK-UltraBold', sans-serif;
  font-size: 3.5vh;
  /* Smaller text size */
  color: #ff5c5c;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 1vh 3vh;
  border-radius: 5vh;
  z-index: 10;
  text-align: center;
  /* Ensure text is centered */
  min-width: 30vmin;
  width: 50vmin;
  /* Fixed width for better centering */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Red ball counter */
.red-ball-counter {
  position: absolute;
  top: 15vh;
  right: 5vw;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 0.5vh 1.5vh;
  border-radius: 3vh;
  z-index: 5;
}

.red-ball-icon {
  width: 4vh;
  height: 4vh;
  margin-right: 1vh;
}

#redBallCount {
  font-family: 'MStiffHeiHK-UltraBold', sans-serif;
  font-size: 2.5vh;
  color: #ff5c5c;
}

.mode-select-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
}

.phone-input-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* margin: auto; */
  z-index: 200;
  width: 100%;
  /* max-width: 500px; */
  height: 100%;
  /* background: rgba(255, 0, 0, 0.2); */
}

.phone-input-container input {
  position: absolute;
  left: 30%;
  width: 49%;
  border: none;
  font-size: 16px;
  background-color: #ededed00;
  text-align: left;
  color: #000000;
  border-color: transparent;
  z-index: 251;
}

#phoneNumber {
  top: 42.8%;
}

#memberName {
  top: 49%;
}

#email {
  top: 55.3%;
}

#phoneNumber::placeholder {
  color: #ffffff00;
}

#memberName::placeholder {
  color: #ffffff00;
}

#email::placeholder {
  color: #ffffff00;
}

#submitPhone {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 50px;
  padding: 0;
  background-color: transparent;
  color: transparent;
  border: none;
  border-radius: 0;
  font-size: 16px;
  cursor: pointer;
  z-index: 201;
}

#submitPhone:hover {
  background-color: transparent;
}

.member-status {
  position: absolute;
  /* bottom: 22%; */
  left: 28%;
  top: 62.1%;
  /* transform: translateX(-50%); */
  margin-top: 0px;
  padding: 0;
  border-radius: 8px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
  /* width: 80%; */
}

.member-status.success {
  background-color: rgba(0, 255, 0, 0.2);
  color: #006600;
  border: 2px solid #00cc00;
  opacity: 1;
}

.member-status.error {
  background-color: transparent;
  color: #cc0000;
  border: 2px solid transparent;
  opacity: 1;
  /* top: 72%; */
}

.score-submission-status {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  max-width: 80%;
}

.score-submission-status.success {
  background-color: rgba(0, 128, 0, 0.7);
  opacity: 1;
}

.score-submission-status.error {
  background-color: rgba(255, 0, 0, 0.7);
  opacity: 1;
}

.score-submission-status.pending {
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 1;
}

/* iPhone-specific adjustments */
@supports (-webkit-touch-callout: none) {

  /* CSS specific to iOS devices */
  body {
    /* Prevent overscroll bounce effect */
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .game-container {
    /* Ensure full height on iOS */
    height: 100vh;
    /* Account for the notch on newer iPhones */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}

/* iPhone SE, 5, 5S, 5C (smaller screens) */
@media screen and (max-width: 320px),
screen and (max-height: 568px) {

  .phone-input-container {
    /* top: 50%; */
    /* width: 90%; */
  }

  #phoneNumber {
    /* top: 34%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
    /* font-size: 14px; */
  }

  #memberName {
    /* top: 46%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
    /* font-size: 14px; */
  }

  #email {
    /* top: 58%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
    /* font-size: 14px; */
  }

  .member-status {
    /* font-size: 11px; */
    /* bottom: 23%; */
  }

  .wewa-registration-link {
    /* bottom: 28%; */
  }

  .terms-link {
    /* bottom: 2%; */
  }

  #submitPhone {
    /* bottom: 15%; */
    /* height: 40px; */
  }

  .score-submission-status {
    /* font-size: 12px; */
    /* bottom: 5%; */
  }
}

/* iPhone 6, 7, 8 (medium screens) */
@media screen and (min-width: 321px) and (max-width: 375px),
screen and (min-height: 569px) and (max-height: 667px) {
  .phone-input-container {
    /* top: 50%; */
  }

  #phoneNumber {
    /* top: 35%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }

  #memberName {
    /* top: 47%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }

  #email {
    /* top: 58%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }
}

/* iPhone X, XS, 11 Pro, 12 mini (notched screens) */
@media screen and (min-width: 375px) and (max-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .game-container {
    /* Add padding for the notch */
    /* padding-top: env(safe-area-inset-top); */
    /* padding-bottom: env(safe-area-inset-bottom); */
  }

  #phoneNumber {
    /* top: 35%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }

  #memberName {
    /* top: 47%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }

  #email {
    /* top: 58.5%; */
    /* left: 52%; */
    /* width: 60%;
    padding: 4px 12px; */
  }
}

/* iPhone 12, 13, 14 (larger screens) */
@media screen and (min-width: 390px) and (min-height: 844px) {
  #phoneNumber {
    /* top: 35%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }

  #memberName {
    /* top: 47%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }

  #email {
    /* top: 58.5%; */
    /* left: 52%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }

  .game-container {
    /* Add padding for the notch */
    /* padding-top: env(safe-area-inset-top); */
    /* padding-bottom: env(safe-area-inset-bottom); */
  }
}

/* Landscape orientation adjustments */
@media screen and (orientation: landscape) {
  .phone-input-container {
    /* top: 50%; */
    /* width: 60%; */
    /* max-width: 500px; */
  }

  #phoneNumber {
    /* top: 28%; */
    /* left: 44%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }

  #memberName {
    /* top: 47%; */
    /* left: 44%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }

  #email {
    /* top: 68%; */
    /* left: 44%; */
    /* width: 60%; */
    /* padding: 4px 12px; */
  }

  .member-status {
    /* bottom: 10%; */
  }

  .wewa-registration-link {
    /* bottom: 15%; */
  }

  .terms-link {
    /* bottom: 3%; */
  }

  #submitPhone {
    /* bottom: 5%; */
  }

  .final-score-display {
    /* transform: scale(0.8); */
  }

  .member-status.error {
    /* background-color: transparent;
    color: #cc0000;
    border: 2px solid transparent;
    opacity: 1;
    top: 90%; */
  }

}

.wewa-registration-link {
  position: absolute;
  top: 60.1%;
  left: 28%;
  /* transform: translateX(-50%); */
  width: 33%;
  height: 40px;
  z-index: 251;
  cursor: pointer;
  /* background-color: red; */
  /* For debugging: 
    background-color: rgba(255, 0, 0, 0.3); 
    */
  /* Add a subtle hover effect */
  transition: background-color 0.3s;
}

a.wewa-registration-link {}

.wewa-registration-link:hover {
  /* Very subtle highlight on hover */
  background-color: rgba(255, 255, 255, 0.1);
}

.terms-link {
  position: absolute;
  /* bottom: 26%; */
  left: 60%;
  /* transform: translateX(-50%); */
  top: 70%;
  width: 19%;
  height: 30px;
  z-index: 251;
  cursor: pointer;
  background-color: transparent;
  /* For debugging: 
    background-color: rgba(255, 0, 0, 0.3); 
    */
  transition: background-color 0.3s;
}

.terms-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.mode-area {
  position: absolute;
  width: 46%;
  height: 8%;
  z-index: 150;
  left: 30%;
  cursor: pointer;
  background-color: transparent;
  /* For debugging: 
    background-color: rgba(255, 0, 0, 0.3); 
    */
  transition: background-color 0.3s;
}

.mode-area:hover {
  /* Very subtle highlight on hover */
  background-color: rgba(255, 255, 255, 0.1);
}

/* Position for the first mode area (top option) */
.mode-area-1 {
  top: 27%;
  /* left: 30%; */
  /* transform: translate(-50%, -50%); */
}

/* Position for the second mode area (bottom option) */
.mode-area-2 {
  top: 36.5%;
  /* transform: translate(-50%, -50%); */
}

.mode-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 150;
  /* Increased z-index to be above all game elements */
  pointer-events: none;
  /* Allow clicks to pass through to the game elements */
  opacity: 0;
  /* Hidden by default */
  visibility: hidden;
  /* Hidden by default */
  transition: opacity 0.5s ease;
  Z-INDEX: 4;
  overflow: hidden;
}

.mode-overlay.active {
  opacity: 1;
  /* Visible when active */
  visibility: visible;
  /* Visible when active */
  /* Uncomment for debugging:
    background-color: rgba(255, 0, 0, 0.2); 
    */
}

.mode-overlay>img {
  margin-top: 22%;
  transform: scale(0.8);
}

#finalScore .invisible-button {
  width: 59%;
  /* bottom: 30.5%; */
  top: 79.5%;
  height: 12%;
  /* left: 10%; */
}

#finalScore #link-to-leaderboard {
  width: 39%;
  bottom: 30.5%;
  top: unset;
  height: 7%;
  position: absolute;
  /* left: 10%; */
  margin-left: 10%;
}

#phoneNumber:focus,
#memberName:focus,
#email:focus {
  outline: none;
  border: none;
  box-shadow: none;
  border-color: transparent;
}

/* This ensures no outline or border shows up on any browser */
input:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Prevent text selection and blue highlights */
.game-container,
.hole,
.mole,
.screen,
.invisible-button,
.score-popup,
.explosion {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Apply to the entire body to ensure no selection happens anywhere */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}