/* Reset and base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  touch-action: manipulation;
  overflow-x: hidden;
  background: #f5f0e8;
  color: #333;
}

/* Container to center everything - use min-height to avoid clipping */
.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: visible;
}

/* Text block - large readable font - positioned above character */
.text-block {
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
  margin: 5px 0 20px 0;
  max-width: 90%;
  color: #555;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  z-index: 10;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Character illustration section */
.character-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* Character illustration - the office worker reaction GIF */
#character-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  /* Initially static - no animation */
  animation: none;
}

/* State: hit - no CSS transform, GIF plays naturally */
#character-img.hit {
  animation: none;
}

/* Button styles */
.slap-button {
  font-size: 1.6rem;
  font-weight: bold;
  padding: 18px 48px;
  border: none;
  border-radius: 30px;
  background: #e53935;
  color: white;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.2s ease;
  margin-top: 20px;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 4px 14px rgba(229, 57, 53, 0.4);
  touch-action: manipulation;
}

.slap-button:hover {
  background: #c62828;
  transform: scale(1.05);
}

.slap-button:active {
  background: #a72727;
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(229, 57, 53, 0.4);
}

/* Counter styles */
.counter-wrapper {
  margin-top: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.4rem;
  color: #555;
  font-family: 'Montserrat', sans-serif;
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
  .text-block {
    font-size: 1.5rem;
  }

  .slap-button {
    font-size: 1.4rem;
    padding: 16px 40px;
  }

  .counter-wrapper {
    font-size: 1.2rem;
  }

  #character-img {
    max-width: 350px;
  }
}