:root {
  --primary-text: #262626;
  --background: #FFFFFF;
  --button-bg: #242424;
  --button-text: #FFFFFF;
}

.gradient-mesh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  background: transparent;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../../assets/images/bg_v4.png') no-repeat center center;
  background-size: cover;
  opacity: 0.3; /* Reduced opacity to let gradient show */
  z-index: 0;
}

.launch-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: var(--background);
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* The logo section - improved responsive scaling with guaranteed centering */
.logo {
  position: absolute;
  width: clamp(140px, 25vw, 233px);
  height: auto;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: clamp(15px, 3vh, 30px);
  z-index: 1;
}

/* Add this to ensure the SVG scales correctly */
.logo svg {
  width: 100%;
  height: auto;
}

/* Updated hero-text with better responsive scaling */
.hero-text {
  position: absolute;
  width: clamp(280px, 70vw, 800px);
  height: auto;
  left: 50%;
  top: clamp(60px, 12vh, 120px);
  transform: translateX(-50%);
  
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 58px);
  line-height: clamp(35px, 6vw, 70px);
  text-align: center;
  color: #262626;
  z-index: 4;
}

.hero-text svg {
  width: 100%;
  height: auto;
  max-width: 800px;
}

/* Improved tips section with responsive positioning */
.tips {
  position: absolute;
  width: clamp(260px, 80vw, 584px);
  height: auto;
  left: 50%;
  bottom: clamp(30px, 6vh, 60px);
  transform: translateX(-50%);
  
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-size: clamp(14px, 2.5vw, 20px);
  line-height: clamp(18px, 3vw, 26px);
  text-align: center;
  letter-spacing: 0.25px;
  color: #262626;
  z-index: 4;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Button container for responsive positioning - centered between hero text and tips */
.button-container {
  position: absolute;
  /* Calculate position: hero text top + hero text line-height + half of remaining space to tips */
  top: calc(clamp(60px, 12vh, 120px) + clamp(35px, 6vw, 70px) + (100vh - clamp(60px, 12vh, 120px) - clamp(35px, 6vw, 70px) - clamp(30px, 6vh, 60px) - clamp(18px, 3vw, 26px)) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  cursor: pointer;
  width: clamp(120px, 18vw, 200px);
  height: clamp(120px, 18vw, 200px);
  /* Ensure perfect centering */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reset-button {
  position: relative;
  width: 100%;
  height: 100%;
  background: #242424;
  border-radius: 50%;
  border: none;
  color: white;
  font-family: 'Outfit';
  font-size: clamp(16px, 3vw, 32px);
  font-weight: bold;
  z-index: 5;
  padding: 0;
  cursor: pointer !important;
  margin: 0;
  transition: transform 0.3s ease, filter 0.2s ease;
  /* Ensure button can be clicked */
  pointer-events: auto !important;
  
  /* Touch-friendly sizing */
  min-width: 44px;
  min-height: 44px;
  
  /* Focus accessibility - OVERRIDE BROWSER DEFAULTS */
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Add this to ensure the text is visible */
.reset-button svg g path {
  fill: white !important;
}

/* Make sure SVG content is visible */
.reset-button svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Enhanced interactive states - NO HOVER, NO FOCUS COLOR CHANGES */
.reset-button:active {
  transform: scale(0.95);
  background: #242424 !important; /* Keep original color */
  color: white !important; /* Keep original color */
}

.reset-button:focus {
  background: #242424 !important; /* Keep original color */
  color: white !important; /* Keep original color */
  outline: none !important;
}

.reset-button:hover {
  background: #242424 !important; /* Keep original color */
  color: white !important; /* Keep original color */
}

/* Accessibility: Focus ring for keyboard navigation */
.reset-button:focus-visible {
  outline: none !important; /* Remove focus ring entirely */
}


/* Central group container - groups button and circular text together */
.center-group {
  position: absolute;
  /* Center the entire group */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: clamp(100px, 15vh, 140px);
  z-index: 3;
  /* Container for both button and text */
  display: flex;
  align-items: center;
  justify-content: center;
}

.circular-text {
  position: absolute;
  width: clamp(171px, 26.6vw, 285px);
  height: clamp(171px, 26.6vw, 285px);
  /* Center the circular text around the button - centered between hero text and tips */
  top: calc(clamp(60px, 12vh, 120px) + clamp(35px, 6vw, 70px) + (100vh - clamp(60px, 12vh, 120px) - clamp(35px, 6vw, 70px) - clamp(30px, 6vh, 60px) - clamp(18px, 3vw, 26px)) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  /* CRITICAL: Don't block button clicks */
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ensure perfect centering */
  margin: 0;
}

/* ============================================
   TIER 1: COMMON BREAKPOINT RANGES (FALLBACK)
   ============================================ */

/* Extra Small Mobile (Portrait): 320px – 480px */
@media (min-width: 320px) and (max-width: 480px) {
  .logo {
    width: clamp(80px, 22vw, 120px); /* Improved minimum touch target */
    top: clamp(8px, 1.5vh, 15px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero-text {
    width: clamp(280px, 90%, 440px); /* Better responsive width */
    top: clamp(45px, 9vh, 75px); /* More proportional spacing */
    font-size: clamp(18px, 5.5vw, 30px); /* Better readability */
    line-height: clamp(24px, 7vw, 38px);
    padding: 0 15px;
  }
  
  .button-container {
    width: clamp(80px, 18vw, 110px); /* Minimum 80px for touch target */
    height: clamp(80px, 18vw, 110px);
  }
  
  .reset-button {
    font-size: clamp(12px, 3.2vw, 16px); /* Better scaling */
  }
  
  .tips {
    width: clamp(280px, 92%, 440px);
    bottom: clamp(12px, 2.5vh, 22px);
    font-size: clamp(11px, 3.2vw, 15px); /* Improved readability */
    line-height: clamp(15px, 4.2vw, 19px);
    padding: 0 15px;
  }
  
  .circular-text {
    width: clamp(104.5px, 30.4vw, 161.5px); /* Reduced by 5% */
    height: clamp(104.5px, 30.4vw, 161.5px);
  }
}

/* Small Mobile (Landscape): 481px – 600px */
@media (min-width: 481px) and (max-width: 600px) {
  .logo {
    width: clamp(95px, 18vw, 135px); /* Better proportional scaling */
    top: clamp(10px, 1.8vh, 18px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero-text {
    width: clamp(420px, 85%, 520px); /* Better responsive width */
    top: clamp(50px, 9vh, 80px); /* More proportional */
    font-size: clamp(20px, 4.5vw, 32px); /* Improved scaling */
    line-height: clamp(26px, 5.5vw, 40px);
    padding: 0 20px;
  }
  
  .button-container {
    width: clamp(90px, 16vw, 125px); /* Maintained touch target */
    height: clamp(90px, 16vw, 125px);
  }
  
  .reset-button {
    font-size: clamp(13px, 2.8vw, 18px); /* Better readability */
  }
  
  .tips {
    width: clamp(420px, 88%, 520px);
    bottom: clamp(18px, 3.5vh, 28px);
    font-size: clamp(13px, 2.8vw, 17px); /* Improved readability */
    line-height: clamp(17px, 3.5vw, 21px);
    padding: 0 20px;
  }
  
  .circular-text {
    width: clamp(114px, 26.6vw, 171px); /* Reduced by 5% */
    height: clamp(114px, 26.6vw, 171px);
  }
}

/* Small Tablets (Portrait): 601px – 768px */
@media (min-width: 601px) and (max-width: 768px) {
  .logo {
    width: clamp(105px, 16vw, 155px); /* Better proportional scaling */
    top: clamp(12px, 2vh, 22px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero-text {
    width: clamp(480px, 78%, 600px); /* Better responsive width */
    top: clamp(55px, 10vh, 95px); /* More proportional */
    font-size: clamp(22px, 4.2vw, 36px); /* Improved scaling */
    line-height: clamp(28px, 5.2vw, 44px);
  }
  
  .button-container {
    width: clamp(105px, 15vw, 145px); /* Better touch target */
    height: clamp(105px, 15vw, 145px);
  }
  
  .reset-button {
    font-size: clamp(15px, 2.3vw, 20px); /* Better readability */
  }
  
  .tips {
    width: clamp(480px, 82%, 600px);
    bottom: clamp(22px, 4.5vh, 38px);
    font-size: clamp(15px, 2.5vw, 19px); /* Improved readability */
    line-height: clamp(19px, 3.2vw, 23px);
  }
  
  .circular-text {
    width: clamp(137.75px, 21.85vw, 199.5px); /* Reduced by 5% */
    height: clamp(137.75px, 21.85vw, 199.5px);
  }
}

/* Large Tablets (Landscape): 769px – 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .logo {
    width: clamp(120px, 15vw, 180px);
    top: clamp(15px, 2.5vh, 25px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero-text {
    width: clamp(300px, 70vw, 550px);
    top: clamp(65px, 11vh, 110px);
    font-size: clamp(26px, 4vw, 42px);
    line-height: clamp(32px, 5vw, 52px);
  }
  
  .button-container {
    width: clamp(120px, 15vw, 170px);
    height: clamp(120px, 15vw, 170px);
  }
  
  .reset-button {
    font-size: clamp(16px, 2.5vw, 26px);
  }
  
  .tips {
    width: clamp(280px, 80vw, 480px);
    bottom: clamp(30px, 5vh, 50px);
    font-size: clamp(16px, 2.5vw, 22px);
    line-height: clamp(20px, 3vw, 26px);
  }
  
  .circular-text {
    width: clamp(161.5px, 23.75vw, 237.5px); /* Reduced by 5% */
    height: clamp(161.5px, 23.75vw, 237.5px);
  }
}

/* Small Desktops and Laptops: 1025px – 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
  .logo {
    width: clamp(140px, 12vw, 200px);
    top: clamp(18px, 3vh, 30px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero-text {
    width: clamp(350px, 65vw, 650px);
    top: clamp(70px, 12vh, 120px);
    font-size: clamp(30px, 3.5vw, 48px);
    line-height: clamp(38px, 4.5vw, 58px);
  }
  
  .button-container {
    width: clamp(140px, 14vw, 190px);
    height: clamp(140px, 14vw, 190px);
  }
  
  .reset-button {
    font-size: clamp(18px, 2.5vw, 30px);
  }
  
  .tips {
    width: clamp(350px, 75vw, 550px);
    bottom: clamp(35px, 6vh, 60px);
    font-size: clamp(16px, 2.2vw, 24px);
    line-height: clamp(22px, 2.8vw, 30px);
  }
  
  .circular-text {
    width: clamp(180.5px, 20.9vw, 266px); /* Reduced by 5% */
    height: clamp(180.5px, 20.9vw, 266px);
  }
}

/* Large Desktops: 1281px – 1440px */
@media (min-width: 1281px) and (max-width: 1440px) {
  .logo {
    width: clamp(160px, 11vw, 220px);
    top: clamp(20px, 3vh, 32px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero-text {
    width: clamp(400px, 60vw, 700px);
    top: clamp(75px, 12vh, 125px);
    font-size: clamp(34px, 3.2vw, 52px);
    line-height: clamp(42px, 4.2vw, 62px);
  }
  
  .button-container {
    width: clamp(150px, 13vw, 200px);
    height: clamp(150px, 13vw, 200px);
  }
  
  .reset-button {
    font-size: clamp(20px, 2.2vw, 32px);
  }
  
  .tips {
    width: clamp(400px, 70vw, 580px);
    bottom: clamp(40px, 6vh, 65px);
    font-size: clamp(18px, 2vw, 26px);
    line-height: clamp(24px, 2.6vw, 32px);
  }
  
  .circular-text {
    width: clamp(190px, 19vw, 285px); /* Reduced by 5% */
    height: clamp(190px, 19vw, 285px);
  }
}

/* Extra-Large Desktops: 1441px+ */
@media (min-width: 1441px) {
  .logo {
    width: clamp(180px, 10vw, 233px);
    top: clamp(22px, 3vh, 35px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero-text {
    width: clamp(450px, 55vw, 800px);
    top: clamp(80px, 12vh, 130px);
    font-size: clamp(38px, 3vw, 58px);
    line-height: clamp(48px, 4vw, 70px);
  }
  
  .button-container {
    width: clamp(160px, 12vw, 220px);
    height: clamp(160px, 12vw, 220px);
  }
  
  .reset-button {
    font-size: clamp(22px, 2vw, 36px);
  }
  
  .tips {
    width: clamp(450px, 65vw, 584px);
    bottom: clamp(45px, 7vh, 70px);
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: clamp(26px, 2.4vw, 34px);
  }
  
  .circular-text {
    width: clamp(209px, 17.1vw, 304px); /* Reduced by 5% */
    height: clamp(209px, 17.1vw, 304px);
  }
}

/* ================================================
   TIER 2: SPECIFIC POPULAR SIZES (PIXEL-PERFECT)
   ================================================ */

/* Common Android: 360×800 */
@media (width: 360px) and (height: 800px) {
  .logo {
    width: 95px;
    top: 12px;
  }
  
  .hero-text {
    width: 340px;
    top: 55px;
    font-size: 22px;
    line-height: 28px;
  }
  
  .button-container {
    width: 95px;
    height: 95px;
  }
  
  .reset-button {
    font-size: 14px;
  }
  
  .tips {
    width: 340px;
    bottom: 18px;
    font-size: 13px;
    line-height: 17px;
  }
  
  .circular-text {
    width: 118.75px; /* Reduced by 5% from 125px */
    height: 118.75px;
  }
}

/* iPhone 12/13/14: 390×844 */
@media (width: 390px) and (height: 844px) {
  .logo {
    width: 105px;
    top: 14px;
  }
  
  .hero-text {
    width: 360px;
    top: 60px;
    font-size: 24px;
    line-height: 30px;
  }
  
  .button-container {
    width: 100px;
    height: 100px;
  }
  
  .reset-button {
    font-size: 15px;
  }
  
  .tips {
    width: 360px;
    bottom: 20px;
    font-size: 14px;
    line-height: 18px;
  }
  
  .circular-text {
    width: 123.5px; /* Reduced by 5% from 130px */
    height: 123.5px;
  }
}

/* iPhone 14 Pro: 393×873 */
@media (width: 393px) and (height: 873px) {
  .logo {
    width: 108px;
    top: 15px;
  }
  
  .hero-text {
    width: 365px;
    top: 65px;
    font-size: 25px;
    line-height: 31px;
  }
  
  .button-container {
    width: 102px;
    height: 102px;
  }
  
  .reset-button {
    font-size: 16px;
  }
  
  .tips {
    width: 365px;
    bottom: 22px;
    font-size: 14px;
    line-height: 18px;
  }
  
  .circular-text {
    width: 125.4px; /* Reduced by 5% from 132px */
    height: 125.4px;
  }
}

/* Common Laptop: 1366×768 */
@media (width: 1366px) and (height: 768px) {
  .logo {
    width: 180px;
    top: 25px;
  }
  
  .hero-text {
    width: 520px;
    top: 85px;
    font-size: 38px;
    line-height: 48px;
  }
  
  .button-container {
    width: 160px;
    height: 160px;
  }
  
  .reset-button {
    font-size: 24px;
  }
  
  .tips {
    width: 520px;
    bottom: 35px;
    font-size: 18px;
    line-height: 24px;
  }
  
  .circular-text {
    width: 199.5px; /* Reduced by 5% from 210px */
    height: 199.5px;
  }
}

/* Surface Devices: 1536×864 */
@media (width: 1536px) and (height: 864px) {
  .logo {
    width: 200px;
    top: 28px;
  }
  
  .hero-text {
    width: 580px;
    top: 95px;
    font-size: 42px;
    line-height: 52px;
  }
  
  .button-container {
    width: 170px;
    height: 170px;
  }
  
  .reset-button {
    font-size: 26px;
  }
  
  .tips {
    width: 580px;
    bottom: 40px;
    font-size: 20px;
    line-height: 26px;
  }
  
  .circular-text {
    width: 218.5px; /* Reduced by 5% from 230px */
    height: 218.5px;
  }
}

/* Full HD Desktop: 1920×1080 */
@media (width: 1920px) and (height: 1080px) {
  .logo {
    width: 233px;
    top: 35px;
  }
  
  .hero-text {
    width: 750px;
    top: 120px;
    font-size: 55px;
    line-height: 67px;
  }
  
  .button-container {
    width: 210px;
    height: 210px;
  }
  
  .reset-button {
    font-size: 34px;
  }
  
  .tips {
    width: 580px;
    bottom: 65px;
    font-size: 24px;
    line-height: 30px;
  }
  
  .circular-text {
    width: 294.5px; /* Reduced by 5% from 310px */
    height: 294.5px;
  }
}

/* iPad Mini (Portrait): 768×1024 */
@media (width: 768px) and (height: 1024px) {
  .logo {
    width: 140px;
    top: 18px;
  }
  
  .hero-text {
    width: 650px;
    top: 80px;
    font-size: 36px;
    line-height: 46px;
  }
  
  .button-container {
    width: 140px;
    height: 140px;
  }
  
  .reset-button {
    font-size: 20px;
  }
  
  .tips {
    width: 650px;
    bottom: 45px;
    font-size: 18px;
    line-height: 24px;
  }
  
  .circular-text {
    width: 180.5px; /* Reduced by 5% from 190px */
    height: 180.5px;
  }
}

/* iPad Air (Portrait): 820×1180 */
@media (width: 820px) and (height: 1180px) {
  .logo {
    width: 155px;
    top: 22px;
  }
  
  .hero-text {
    width: 700px;
    top: 90px;
    font-size: 40px;
    line-height: 50px;
  }
  
  .button-container {
    width: 150px;
    height: 150px;
  }
  
  .reset-button {
    font-size: 22px;
  }
  
  .tips {
    width: 700px;
    bottom: 50px;
    font-size: 19px;
    line-height: 25px;
  }
  
  .circular-text {
    width: 190px; /* Reduced by 5% from 200px */
    height: 190px;
  }
}

/* iPad Pro 11" (Portrait): 1024×1366 */
@media (width: 1024px) and (height: 1366px) {
  .logo {
    width: 180px;
    top: 25px;
  }
  
  .hero-text {
    width: 800px;
    top: 110px;
    font-size: 48px;
    line-height: 58px;
  }
  
  .button-container {
    width: 170px;
    height: 170px;
  }
  
  .reset-button {
    font-size: 26px;
  }
  
  .tips {
    width: 800px;
    bottom: 60px;
    font-size: 22px;
    line-height: 28px;
  }
  
  .circular-text {
    width: 228px; /* Reduced by 5% from 240px */
    height: 228px;
  }
}

/* PC Adjustments for all PC screens - move button and circular text down 10% */

/* All PC/Desktop screens 1024px and wider - move button and circular text down 10% */
@media (min-width: 1024px) {
  .button-container {
    top: calc(clamp(60px, 12vh, 120px) + clamp(35px, 6vw, 70px) + (100vh - clamp(60px, 12vh, 120px) - clamp(35px, 6vw, 70px) - clamp(30px, 6vh, 60px) - clamp(18px, 3vw, 26px)) / 2 + 10vh);
  }
  
  .circular-text {
    top: calc(clamp(60px, 12vh, 120px) + clamp(35px, 6vw, 70px) + (100vh - clamp(60px, 12vh, 120px) - clamp(35px, 6vw, 70px) - clamp(30px, 6vh, 60px) - clamp(18px, 3vw, 26px)) / 2 + 10vh);
  }
}

/* Tablets (475px-768px) */
@media (min-width: 475px) and (max-width: 767px) {
  .logo {
    width: clamp(100px, 22vw, 150px);
    top: clamp(10px, 2vh, 20px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero-text {
    width: 85%;
    top: clamp(56px, 11vh, 112px); /* Down 40% from original 40px, 8vh, 80px */
    font-size: clamp(22px, 5.5vw, 36px);
    line-height: clamp(28px, 6.5vw, 45px);
  }
  
  .button-container {
    width: clamp(100px, 18vw, 140px);
    height: clamp(100px, 18vw, 140px);
  }
  
  .reset-button {
    font-size: clamp(12px, 3vw, 20px);
  }
  
  .tips {
    width: 90%;
    bottom: clamp(20px, 4vh, 35px);
    font-size: clamp(13px, 3.5vw, 18px);
    line-height: clamp(17px, 4vw, 22px);
  }
  
  .circular-text {
    width: clamp(133px, 28.5vw, 190px); /* Reduced by 5% */
    height: clamp(133px, 28.5vw, 190px);
  }
}

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

/* Rotating text SVG */
.circular-text > svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  animation: rotate 30s linear infinite;
  pointer-events: none; /* Allow clicks to pass through */
}

/* Keep button SVG static */
.reset-button svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: none; /* Explicitly prevent animation */
}


/* NEW: Added this outside of media queries to apply to all screen sizes */
.circular-text svg path {
  fill: var(--primary-text);
}

/* App container transitions */
.app-container {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Mobile devices */
/* Mobile (<475px) */
@media (max-width: 474px) {
  .logo {
    width: clamp(90px, 25vw, 130px);
    top: clamp(8px, 1.5vh, 15px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero-text {
    width: 90%;
    top: clamp(63px, 11vh, 98px); /* Down 40% from original 45px, 8vh, 70px */
    font-size: clamp(20px, 6vw, 32px);
    line-height: clamp(26px, 7vw, 40px);
    padding: 0 15px;
  }
  
  .button-container {
    width: clamp(90px, 20vw, 120px);
    height: clamp(90px, 20vw, 120px);
  }
  
  .reset-button {
    font-size: clamp(10px, 3.5vw, 18px);
  }
  
  .tips {
    width: 95%;
    bottom: clamp(15px, 3vh, 25px);
    font-size: clamp(12px, 3.5vw, 16px);
    line-height: clamp(16px, 4.5vw, 20px);
    padding: 0 15px;
  }
  
  .circular-text {
    width: clamp(114px, 33.25vw, 171px); /* Reduced by 5% */
    height: clamp(114px, 33.25vw, 171px);
  }
}











/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  .logo {
    width: clamp(70px, 12vh, 120px);
    top: 1vh;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero-text {
    top: clamp(2px, 2vh, 4px); /* Down 40% from original 1.5vh */
    font-size: clamp(16px, 3.5vh, 28px);
    line-height: clamp(20px, 4.5vh, 36px);
    width: 80%;
  }
  
  .button-container {
    width: clamp(70px, 14vh, 120px);
    height: clamp(70px, 14vh, 120px);
  }
  
  .reset-button {
    font-size: clamp(8px, 2vh, 16px);
  }
  
  .tips {
    bottom: 1vh;
    font-size: clamp(10px, 2vh, 16px);
    line-height: clamp(14px, 2.5vh, 20px);
    width: 85%;
  }
  
  .circular-text {
    width: clamp(85.5px, 17.1vh, 152px); /* Reduced by 5% */
    height: clamp(85.5px, 17.1vh, 152px);
  }
}