.meme-generator {
  font-family: Arial, sans-serif;
  margin: 0;
  touch-action: none;
  overflow-x: hidden;
}

.meme-generator .container {
  text-align: center;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.meme-generator .user-panel {
  background-color: rgba(51, 51, 51, 0.9); /* Slightly transparent grey */
  color: white;
  padding: 10px;
  width: 75vw; /* Desktop width */
  max-width: 75vw; /* Desktop max-width */
  margin: 0 auto; /* Centered with no bottom margin */
  display: flex;
  flex-direction: column; /* Stack h1 above buttons */
  gap: 10px;
  border-radius: 5px 5px 0 0; /* Rounded top corners only */
}

.meme-generator .user-panel h1 {
  font-family: 'Old English Text MT', 'UnifrakturMaguntia', cursive; /* Old English font with fallback */
  color: #60a5fa; /* Light blue */
  text-shadow:
    0 0 5px rgba(96, 165, 250, 0.8), /* Subtle blue glow */
    1px 1px 2px rgba(0, 0, 0, 0.5), /* Dark outline for depth */
    -1px -1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px; /* Slightly spread letters */
  margin: 0 0 10px 0; /* Space below h1 */
  align-self: center; /* Center h1 */
  text-align: center;
  font-size: clamp(20px, 15vw, 46px); /* Adjusted for fancy look */
  font-weight: 400; /* Lighter weight for elegance */
}

.meme-generator .user-panel .button-group {
  display: flex;
  flex-direction: column; /* Stack rows vertically */
  align-items: center; /* Center buttons horizontally */
  gap: 10px; /* Space between rows */
}

.meme-generator .button-group .row {
  display: flex;
  justify-content: center; /* Center buttons in each row */
  gap: 3px; /* Tight 3px gap between buttons */
  flex-wrap: nowrap; /* Prevent wrapping by default */
}

.meme-generator .button-group .row.second-row {
  justify-content: center; /* Ensure second row is centered */
  gap: 3px; /* Consistent 3px gap */
}

.meme-generator button, .meme-generator .file-button {
  padding: 12px; /* Doubled from original 6px */
  cursor: pointer;
  border-radius: 4px;
  font-size: clamp(16px, 2.4vw, 18px); /* Increased from 12px-14px */
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px; /* Doubled from 60px */
  background-color: transparent;
  border: none;
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); /* Raised effect */
  position: relative;
  transition: all 0.2s ease; /* Smooth transitions */
}

.meme-generator #addWatermarkBabyJesus {
  padding: 12px 6px; /* Reduced horizontal padding to tighten */
  min-width: 100px; /* Slightly smaller to match other buttons */
}

.meme-generator .file-button:hover, 
.meme-generator #addWatermarkBabyJesus:hover, 
.meme-generator #addWatermarkGeneric:hover, 
.meme-generator #addText:hover, 
.meme-generator #clearOverlays:hover, 
.meme-generator #exportImage:hover {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.meme-generator .file-button:active, 
.meme-generator #addWatermarkBabyJesus:active, 
.meme-generator #addWatermarkGeneric:active, 
.meme-generator #addText:active, 
.meme-generator #clearOverlays:active, 
.meme-generator #exportImage:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(2px);
  background-color: rgba(255, 255, 255, 0.2);
}

/* Generic Watermark button PNG */
.meme-generator #addWatermarkGeneric {
  padding: 12px 2px; /* Doubled from 6px 1px */
}

.meme-generator .generic-watermark-img, .meme-generator .button-img {
  width: auto;
  height: 80px; /* Doubled from 40px */
  object-fit: contain;
  vertical-align: middle;
}

.meme-generator .fake-canvas {
  width: 75vw; /* Desktop width */
  height: 50vh;
  max-width: 75vw; /* Desktop max-width */
  max-height: 50vh;
  background-color: rgba(51, 51, 51, 0.9); /* Match user-panel */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 0 0 5px 5px; /* Rounded bottom corners */
}

.meme-generator .fake-canvas.image-loaded {
  background-color: #e0e0e0;
}

.meme-generator #dragText {
  font-size: clamp(14px, 2vw, 16px);
  color: #666;
  pointer-events: none;
  text-align: center;
  padding: 10px;
  z-index: 10;
  display: flex !important;
}

.meme-generator .fake-canvas.image-loaded #dragText {
  display: none !important;
}

.meme-generator #canvasContainer {
  overflow: hidden;
  touch-action: manipulation;
  position: relative;
  z-index: 2;
}

.meme-generator .text-edit-input {
  z-index: 10000;
  opacity: 1;
  pointer-events: auto;
  outline: 1px solid #000;
  caret-color: black;
}

/* Intermediate range (769px to 960px) */
@media screen and (max-width: 960px) {
  .meme-generator .fake-canvas {
    width: 100vw; /* Match mobile behavior */
    max-width: 100vw;
  }
  .meme-generator .user-panel {
    width: 100vw; /* Match mobile behavior */
    max-width: 100vw;
    padding: 8px;
  }
  .meme-generator .user-panel h1 {
    font-family: 'Old English Text MT', 'UnifrakturMaguntia', cursive;
    white-space: nowrap;
    max-width: 100vw;
    font-size: clamp(14px, 3vw, 18px); /* Match mobile */
    text-shadow:
      0 0 4px rgba(96, 165, 250, 0.7), /* Slightly smaller glow */
      1px 1px 1px rgba(0, 0, 0, 0.5),
      -1px -1px 1px rgba(0, 0, 0, 0.5);
    letter-spacing: 1.5px; /* Slightly less spacing */
  }
  .meme-generator .button-img, .meme-generator .generic-watermark-img {
    width: auto;
    height: 40px; /* Reduced to prevent overlap */
  }
  .meme-generator #addWatermarkGeneric {
    padding: 6px 2px; /* Reduced for intermediate range */
  }
  .meme-generator #addWatermarkBabyJesus {
    padding: 6px 3px; /* Reduced to match scaling */
    min-width: 60px; /* Match other buttons */
  }
  .meme-generator button, .meme-generator .file-button {
    padding: 6px; /* Reduced to fit */
    min-width: 60px; /* Reduced to fit */
    font-size: clamp(10px, 1.5vw, 12px); /* Reduced for intermediate range */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  .meme-generator .file-button:hover, 
  .meme-generator #addWatermarkBabyJesus:hover, 
  .meme-generator #addWatermarkGeneric:hover, 
  .meme-generator #addText:hover, 
  .meme-generator #clearOverlays:hover, 
  .meme-generator #exportImage:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  .meme-generator .file-button:active, 
  .meme-generator #addWatermarkBabyJesus:active, 
  .meme-generator #addWatermarkGeneric:active, 
  .meme-generator #addText:active, 
  .meme-generator #clearOverlays:active, 
  .meme-generator #exportImage:active {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
  }
  .meme-generator .button-group .row {
    flex-wrap: nowrap; /* Keep buttons in one row per group */
    gap: 3px; /* Tight 3px gap to prevent overlap */
    width: 100%; /* Full width of user-panel */
    
  }
  .meme-generator .button-group .row.second-row {
    gap: 3px; /* Consistent 3px gap */
  }
}

/* Mobile range (768px and below) */
@media screen and (max-width: 768px) {
  .meme-generator .fake-canvas {
    width: 100vw; /* Updated to 100vw */
    max-width: 100vw; /* Updated to 100vw */
  }
  .meme-generator .user-panel {
    width: 100vw; /* Updated to 100vw */
    max-width: 100vw; /* Updated to 100vw */
    padding: 8px;
  }
  .meme-generator .user-panel h1 {
    font-family: 'Old English Text MT', 'UnifrakturMaguntia', cursive; /* Old English font with fallback */
    white-space: nowrap;
    max-width: 100vw;
    font-size: clamp(14px, 3vw, 18px); /* Smaller for mobile */
    text-shadow:
      0 0 4px rgba(96, 165, 250, 0.7), /* Slightly smaller glow */
      1px 1px 1px rgba(0, 0, 0, 0.5),
      -1px -1px 1px rgba(0, 0, 0, 0.5);
    letter-spacing: 1.5px; /* Slightly less spacing */
  }
  .meme-generator .button-img, .meme-generator .generic-watermark-img {
    width: auto;
    height: 40px; /* Reduced to prevent overlap */
  }
  .meme-generator #addWatermarkGeneric {
    padding: 6px 2px; /* Reduced for mobile */
  }
  .meme-generator #addWatermarkBabyJesus {
    padding: 6px 3px; /* Reduced to match mobile scaling */
    min-width: 60px; /* Match other buttons */
  }
  .meme-generator button, .meme-generator .file-button {
    padding: 6px; /* Reduced to fit */
    min-width: 60px; /* Reduced to fit */
    font-size: clamp(10px, 1.5vw, 12px); /* Reduced for mobile */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  .meme-generator .file-button:hover, 
  .meme-generator #addWatermarkBabyJesus:hover, 
  .meme-generator #addWatermarkGeneric:hover, 
  .meme-generator #addText:hover, 
  .meme-generator #clearOverlays:hover, 
  .meme-generator #exportImage:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  .meme-generator .file-button:active, 
  .meme-generator #addWatermarkBabyJesus:active, 
  .meme-generator #addWatermarkGeneric:active, 
  .meme-generator #addText:active, 
  .meme-generator #clearOverlays:active, 
  .meme-generator #exportImage:active {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
  }
  .meme-generator .button-group .row {
    flex-wrap: nowrap; /* Keep buttons in one row per group */
    gap: 3px; /* Tight 3px gap to prevent overlap */
    width: 100%; /* Full width of user-panel */
      }
  .meme-generator .button-group .row.second-row {
    gap: 3px; /* Consistent 3px gap */
  }
}