/* General Reset */
* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* FIXED: Use 100dvh to account for mobile browser bars */
  min-height: 100vh;      /* Fallback for old browsers */
  min-height: 100dvh;     /* Modern fix for mobile bars */
  
  background: #000000;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* --- NO SCROLL FIX --- */
  overflow: hidden;
  touch-action: none;
}

.calculator {
  width: 100%;
  max-width: 375px;
  padding: 20px;
  margin: 0 auto;
}

/* Screen Display */
.display {
  color: #ffffff;
  font-size: 5rem;
  font-weight: 300;
  text-align: right;
  padding: 0 10px;
  margin-bottom: 20px;
  height: 100px;
  
  overflow-x: auto; 
  overflow-y: hidden;
  touch-action: pan-x;
  
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Button Grid */
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Base Button Style */
.buttons button {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  font-size: 1.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.05s, background-color 0.1s;
  
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;

  /* ADD THIS LINE: Explicitly tells browser "No Double Tap Zoom here" */
  touch-action: manipulation; 
}
/* Pressed State */
.buttons button:active, 
.buttons button.pressed {
  transform: scale(0.8);
}

/* --- iOS Color Schemes --- */

.btn-dark-gray {
  background-color: #333333;
  color: #ffffff;
}
.btn-dark-gray:active, 
.btn-dark-gray.pressed {
  background-color: #737373;
}

.btn-light-gray {
  background-color: #a5a5a5;
  color: #000000;
  font-weight: 600;
}
.btn-light-gray:active, 
.btn-light-gray.pressed {
  background-color: #d9d9d9;
}

.btn-orange {
  background-color: #ff9f0a;
  color: #ffffff;
  font-size: 2.2rem;
}
.btn-orange:active, 
.btn-orange.pressed {
  background-color: #fbc78d;
}

/* Zero Button */
.buttons .zero {
  grid-column: span 2;
  aspect-ratio: auto;
  border-radius: 40px;
  justify-content: flex-start;
  padding-left: 30px;
}

/* --- Mobile Fixes --- */
@media (max-width: 480px) {
  .calculator {
    /* FIXED: Force calculator to fit exact visible screen height */
    height: 100vh;      /* Fallback */
    height: 100dvh;     /* Fixes "going down" issue */
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    /* FIXED: Respect iPhone "Home Bar" safe area */
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .display {
    margin-bottom: 10px;
    /* Ensure display doesn't push buttons off screen if text is huge */
    flex-shrink: 1; 
  }
}