/* Reset default browser margins and paddings */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Soft green background color to match the design outside the canvas */
  --bg-green: #7ecb72;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--bg-green);
  overflow: hidden;
  font-family: 'Georgia', 'Times New Roman', serif;
}

#app-root {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-green);
}

/* 4:3 Canvas Wrapper to preserve original PSD proportions */
.canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  max-width: 133.33vh; /* 4/3 of viewport height */
  max-height: 75vw;    /* 3/4 of viewport width */
  margin: auto;
  overflow: hidden;
  /* Support container queries for responsive input text scaling */
  container-type: inline-size;
}

/* Base style for PSD image layers */
.psd-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none; /* Let clicks pass through to inputs */
}

/* z-indexing for the layers to guarantee correct ordering */
#layer-6 { z-index: 1; }
#layer-16 { z-index: 2; }
#layer-11 { z-index: 3; }
#layer-10 { z-index: 4; }
#layer-12 { 
  z-index: 5; 
  animation: egg-wiggle 3s ease-in-out infinite;
  transform-origin: 46% 85%;
}
#layer-19 { 
  z-index: 6; 
  animation: egg-wiggle 3s ease-in-out infinite;
  transform-origin: 46% 85%;
}
#layer-14 { z-index: 7; }
#layer-lotus { z-index: 8; }
#layer-fore-grass { z-index: 9; }
#layer-from-selection { z-index: 10; }
#layer-21 { z-index: 11; }

/* Interactive overlay for form input elements */
.interactive-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15; /* Sits on top of all images */
}

/* Auth Mode Toggle Tabs (Log In | Sign Up) */
.auth-mode-toggle {
  position: absolute;
  left: 51.84%;
  top: 13.5%;
  display: flex;
  align-items: center;
  gap: 1cqi;
  font-family: 'Alkatra', cursive;
  font-size: 2.4cqi;
  z-index: 20;
}

.mode-tab {
  background: none;
  border: none;
  color: rgba(176, 255, 247, 0.6);
  font-family: 'Alkatra', cursive;
  font-size: 2.4cqi;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.mode-tab:hover {
  color: #b0fff7;
}

.mode-tab.active {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(176, 255, 247, 0.8);
  border-bottom: 0.3cqi solid #b0fff7;
}

.tab-divider {
  color: rgba(176, 255, 247, 0.4);
  font-weight: 300;
}

/* Welcome Text Header */
.welcome-text {
  position: absolute;
  left: 51.84%;
  top: 19.2%; /* Positioned above the username input at 29.11% */
  font-family: 'Alkatra', cursive;
  font-size: 5.8cqi; /* Scales dynamically with container width */
  font-weight: 700;
  color: #b0fff7;    /* Matches the exact light cyan color of the input blocks */
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(26, 77, 46, 0.15); /* Soft depth */
}

/* Auth Forms Toggle */
.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

/* Style the form inputs to sit perfectly inside the PSD's cyan boxes */
.form-input {
  position: absolute;
  background-color: #b0fff7; /* Render the cyan boxes directly in CSS */
  border-radius: 1.6cqi;    /* Rounded corners matching your reference image */
  border: none;
  outline: none;
  font-family: 'Architects Daughter', cursive;
  font-size: 2.2cqi; /* Scales text dynamically with the container width */
  font-weight: normal;
  color: #1a4d2e;    /* Legible dark forest green color */
  padding-left: 7.5cqi; /* Spacing for left-aligned icon, ensuring text & eye never touch */
  padding-right: 4%;
  box-sizing: border-box;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input::placeholder {
  color: rgba(26, 77, 46, 0.35);
  font-style: italic;
  font-weight: normal;
}

/* Log In Form Coordinates */
#login-identifier-input {
  left: 51.84%;
  top: 29.11%;
  width: 28.59%;
  height: 8.48%;
}

#login-password-container {
  position: absolute;
  left: 67.80%;
  top: 38.45%;
  width: 28.59%;
  height: 8.48%;
}

/* Sign Up Form Coordinates */
.field-username {
  left: 51.84%;
  top: 28.5%;
  width: 44.55%;
  height: 7.5%;
}

.field-email {
  left: 51.84%;
  top: 38.0%;
  width: 21.5%;
  height: 7.5%;
  padding-left: 3cqi;
  font-size: 1.8cqi;
}

.field-password {
  position: absolute;
  left: 74.80%;
  top: 38.0%;
  width: 21.5%;
  height: 7.5%;
}

.field-password input.form-input {
  padding-left: 5.2cqi;
  font-size: 1.8cqi;
}

.password-container input.form-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.password-container input[type="password"] {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 3.2cqi; /* Larger password dots */
  letter-spacing: 0.18em;
}

.password-container input[type="text"] {
  font-family: 'Architects Daughter', cursive;
  font-size: 2.2cqi;
  letter-spacing: normal;
}

.password-container input::placeholder {
  font-family: 'Architects Daughter', cursive;
  font-size: 2.2cqi;
  font-style: italic;
  font-weight: normal;
}

.toggle-password-btn {
  position: absolute;
  left: 2.8cqi; /* Sits cleanly centered in the left padding gutter */
  top: 50%;
  transform: translateY(-50%);
  width: 2.2cqi; /* About the same size as the letters */
  height: 2.2cqi;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11; /* Sits above the input text */
  opacity: 0.65;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toggle-password-btn:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.toggle-password-btn:active {
  transform: translateY(-50%) scale(0.9);
}

/* Vector SVG eye colors & toggle states */
.toggle-password-btn .eye-svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: #1d6b61; /* Darker blue/cyan shade of the block (#b0fff7) */
  transition: stroke 0.2s ease;
}

.toggle-password-btn:hover .eye-svg {
  stroke: #114c44; /* Even darker on hover for crisp feedback */
}

.toggle-password-btn .eye-svg.eye-open circle {
  fill: currentColor;
}

.toggle-password-btn .eye-open {
  display: none;
}

.toggle-password-btn .eye-closed {
  display: block;
}

.password-container.visible .toggle-password-btn .eye-open {
  display: block;
}

.password-container.visible .toggle-password-btn .eye-closed {
  display: none;
}

/* Visual cue when user focuses an input */
.form-input:focus {
  background-color: #c4fff9; /* Slightly brighter focus color */
  box-shadow: 0 0 12px rgba(176, 255, 247, 0.4);
}

/* Styled login, signup and enter buttons underneath the password block */
.auth-action-btn, .enter-btn {
  position: absolute;
  top: 49.0%; /* Positioned below the password block which ends at 46.93% */
  font-family: 'Architects Daughter', cursive;
  font-size: 2.2cqi;
  font-weight: bold;
  color: #b0fff7;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
  transition: all 0.2s ease;
}

.login-btn, .signup-btn {
  left: 67.80%;
}

.enter-btn {
  right: 3.61%; /* Aligned to the right edge of the password container */
}

.auth-action-btn:hover, .enter-btn:hover {
  opacity: 0.85;
  text-shadow: 0 0 8px rgba(176, 255, 247, 0.3);
}

.auth-action-btn:active, .enter-btn:active {
  transform: scale(0.96);
}

/* Pop-up Error Alert Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 30, 20, 0.65);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
}

.modal-overlay.hidden {
  display: none !important;
}

.modal-card {
  background: #18442e;
  border: 3px solid #b0fff7;
  border-radius: 1.8rem;
  padding: 2.2rem 2.8rem;
  max-width: 440px;
  width: 88%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(176, 255, 247, 0.2);
  animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes modalPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-icon {
  font-size: 2.8rem;
  margin-bottom: 0.6rem;
}

.modal-text {
  font-family: 'Architects Daughter', cursive;
  font-size: 1.25rem;
  color: #b0fff7;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.modal-btn {
  font-family: 'Architects Daughter', cursive;
  font-size: 1.15rem;
  font-weight: bold;
  color: #1a4d2e;
  background-color: #b0fff7;
  border: none;
  border-radius: 99rem;
  padding: 0.6rem 2.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-btn:hover {
  background-color: #ffffff;
  transform: scale(1.05);
}

.modal-btn:active {
  transform: scale(0.95);
}


/* Periodic egg wiggle animation */
@keyframes egg-wiggle {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  15% {
    transform: rotate(-3deg) translate(-2px, 0);
  }
  30% {
    transform: rotate(2.5deg) translate(2px, 0);
  }
  45% {
    transform: rotate(-2deg) translate(-1px, 0);
  }
  60% {
    transform: rotate(1.5deg) translate(1px, 0);
  }
/* Forgot Password Link & Reset Modal Styles */
.forgot-password-link {
  position: absolute;
  top: 49.0%;
  right: 3.61%;
  font-family: 'Architects Daughter', cursive;
  font-size: 2.0cqi;
  font-weight: bold;
  color: #b0fff7;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  transition: all 0.2s ease;
  z-index: 25;
}

.forgot-password-link:hover {
  opacity: 0.85;
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(176, 255, 247, 0.5);
}

.forgot-password-link:active {
  transform: scale(0.96);
}

.modal-card.reset-card {
  max-width: 380px;
  width: 90%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}