/* Canopy – pixel-art nature theme */
:root {
  --bg-cream: #F5F0E1;
  --canopy-green: #3D8C3D;
  --btn-brown: #7B4B2E;
  --btn-text: #E8E0D0;
  --border-dark: #2C2416;
  --grass-dark: #2D4A2D;
  --grass-mid: #3D8C3D;
  --grass-light: #5BA35B;
  --grass-darker: #2C3D2C;
  --shadow-offset: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* Stacks header, main, and grass in order */
  align-items: center;
  background: var(--bg-cream);
  overflow-x: hidden; /* Prevents accidental side-scrolling */
}

.screen {
  width: 100%;
  max-width: 400px;
  min-height: 100vh;
  padding: 2.25rem 1.75rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo pill */
.logo-pill {
  margin-bottom: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.15rem 2.25rem;
  border: 3px solid var(--border-dark);
  border-radius: 9999px;
  background: var(--bg-cream);
  text-decoration: none;
  margin-bottom: 2.75rem;
  box-shadow: var(--shadow-offset);
}

.logo-text {
  font-family: "Press Start 2P", cursive;
  font-size: 1.35rem;
  color: var(--canopy-green);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  letter-spacing: 0.02em;
}

@media (min-width: 380px) {
  .logo-text {
    font-size: 1.6rem;
  }
}

/* Nav buttons */
.nav-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem; /* Increased from 1.25rem for more breathing room */
  flex: 1;
  width: 100%;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 200px;
  padding: 1.15rem 1.75rem;
  background: var(--btn-brown);
  color: var(--btn-text);
  font-family: "Press Start 2P", cursive;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  box-shadow: var(--shadow-offset);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.nav-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}

.nav-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.grass-strip {
  display: block;           /* Ensures it acts as a layout block */
  width: 100%;
  height: 84px;             /* This is your "Clipper" - nothing can go taller than this */
  background-image: url('assets/grass.png');
  background-repeat: repeat-x;
  background-position: top left;
  /* Image is 2× container height so only the upper half of the grass is visible */
  background-size: auto 200%;
  image-rendering: pixelated;
  margin-top: auto;
  flex-shrink: 0;
  overflow: hidden;         /* Prevents any bleed-through */
  border: none;
}

.main-logo {
  width: 200px;          /* Adjust size as needed */
  height: auto;
  margin-top: 2rem; 
  margin-bottom: 2rem;
  image-rendering: pixelated; /* Keeps pixel art sharp */
  filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.1)); /* Optional: subtle retro shadow */
}

/* Optional: Add a gentle float animation to the logo for that WOW factor */
.main-logo {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}