@font-face {
  font-family: 'Rockwell';
  src: url('rockwell.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;}

/* ===== Global Reset & Base ===== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* Prevents scrolling when content fits */
  font-family: Arial, sans-serif;
  background-color: #DCD7C7;
}

/* ===== Layout ===== */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.lucky-cactus-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
  height: 100vh;           /* full viewport height */
}

/* ===== Headings & Text ===== */
h1 {
  font-family: 'Rockwell', 'Courier New', Courier, serif;
  font-size: clamp(1.8rem, 6vw, 3em); /* scales with screen width */
  letter-spacing: clamp(0px, 0.5vw, 2px); /* adjusts kerning */
  color: #4a5c53;
  margin: 0 0 20px 0;
  white-space: nowrap; /* keep on one line */
  overflow: hidden;    /* prevent overflow */
  text-overflow: ellipsis; /* optional: adds "…" if it ever overflows */
}
.instructions-text {
  font-family: 'Rockwell', 'Courier New', Courier, serif;
  font-size: 1.2em;
  color: #6c7a89;
  margin: 20px 0 0 0;
}

/* ===== Cactus Image & Interaction ===== */
#cactus {
  cursor: pointer;
  font-size: 200px;
  transition: transform 0.1s ease-out;
  user-select: none;
}

#cactus.tapped {
  transform: scale(1.05);
}

/* Remove blue tap highlight & prevent drag/callout on cactus image */
#cactus,
#cactus img.cactus-image {
  -webkit-tap-highlight-color: transparent; /* Chrome/Safari/Android */
}

#cactus:focus,
#cactus img.cactus-image:focus {
  outline: none;
}

#cactus img.cactus-image {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  display: block;
}

/* ===== Emoji Display ===== */
#emojis-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.emoji {
  font-size: 40px;
  position: absolute;
  animation: popUp 1.2s forwards;
  opacity: 0;
  user-select: none;
}

@keyframes popUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100px) scale(1);
  }
}

.cactus-emoji {
  display: block;
}