body {
  background-image: url("hearts%203.gif");
  background-repeat: repeat;
  color: black;
  font-family: Verdana, system-ui, sans-serif;
  margin: 0;
}

.page {
  min-height: 100vh;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* sprite + bubble + arrows row */ 
.scene {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;          /* don't wrap. faggots */
}

/* puff Sprite (left) – scales with screen */
.sprite {
  width: 30vw;                /* 30% of screen width */
  max-width: 260px;           /* cap for desktop*/
  height: auto;
  object-fit: contain;        /* keeps right */
  max-height: 70vh;           /* dont be taller than viewport */
}

/* Thought bubble (right) – image background */
.bubble {
  position: relative;
  width: 40vw;              /* scales with screen */
  max-width: 320px;
 /* aspect-ratio: 1 / 1; */
  background-image: url("https://placehold.co/1000x800/000000/FFFFFF/png");
  background-size: contain; /* fit inside container */
  background-repeat: no-repeat;
  background-position: center;

  padding: 20px;            /* move text in */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;

}

/* arrow buttons OUTSIDE bubble */
.arrow-btn {
  background: #ffd6ec;
  border: 2px solid #ff9ecf;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  font-size: 1.2rem;
  cursor: pointer;
  font-weight: bold;
  flex-shrink: 0;             /* don’t let them squish */
  align-self: center;         /* always vertically centered */
}
.arrow-btn:active {
  transform: translateY(1px);
}

/* ubble text */
.bubble-text {
  font-size: clamp(12px, 3.4vw, 16px);  /* responsive but not too tiny/huge */
  margin-bottom: 8px;
}

/* Buttons inside bubble */
.actions {
  display: flex;
  justify-content: center; /* centers the button */
  width: 100%;             /* ensures flex centering works */
}
.btn {
  padding: 6px 14px;
  background: #ffc7e6;
  border: 2px solid #ff9ecf;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.btn:active {
  transform: translateY(1px);
}

/* make the icon itself behave */
.icon-button {
  background: transparent;
  border: none;
  padding: 0;
}

.btn-icon {
  width: 60px;   
  height: auto;
}

/* for very small screens */
@media (max-width: 420px) {

  .scene {
    gap: 4px;
  }

  .sprite {
    width: 28vw;              
  }

  .bubble {
    width: 44vw;             
    padding: 10px 12px;
  }

  .bubble-text {
    font-size: clamp(11px, 3.2vw, 14px);
  }

  .arrow-btn {
    padding: 0.45rem 0.6rem;
    font-size: 1rem;
  }
}


#actionBtn {
  margin-top: 35px;
}