body {
  font-family: sans-serif;
  text-align: center;
  background: #f4f7fa;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 2em 0;
  min-height: 100vh;
  box-sizing: border-box;
}

h1, #counter, .jar-container, button, details {
  font-family: 'Knewave', cursive;
  margin: 0;
  padding: 0;
  text-align: center;
}

.jar-container {
  position: relative;
  margin: 0 0 2em 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: auto;
}

#jar-img {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

#jar-img img {
  display: block;
  margin: 0 auto;
  max-width: 320px;
  max-height: 300px;
  width: auto;
  height: auto;
  position: relative;
  z-index: 100;   /* ENSURE IN FRONT OF COINS */
}

#coins {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;    /* COINS BEHIND JAR IMAGE */
}

.coin {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  z-index: 99;
  opacity: 1;
  transition: top 0.7s cubic-bezier(0.42,0,0.58,1), opacity 0.3s 0.8s;
}


#counter {
  font-family: 'Knewave', cursive;
  font-size: 4.5em;
  font-weight: bold;
  margin: 0.2em 0 1.5em 0;
}

button {
  font-family: sans-serif;
  margin: 0 0 1em 0;
  padding: 0.7em 1.8em;
  background: #1e81b0;
  color: white;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  display: block;
}

button#add-coin {
  margin-top: 0.8em;
  margin-bottom: 1em;
}

details {
  margin-top: 1em;
  font-size: 1em;
}

@keyframes jar-jiggle {
  0%   { transform: rotate(0deg)}
  20%  { transform: rotate(-3deg)}
  50%  { transform: rotate(2deg)}
  80%  { transform: rotate(-2deg)}
  100% { transform: rotate(1deg)}
}

.jiggle {
  animation: jar-jiggle 0.35s cubic-bezier(.36,.07,.19,.97);
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;      /* Add this line */
  margin-left: auto;            /* NEW */
  margin-right: auto;           /* NEW */
  max-width: 480px;             /* Or a width that fits your layout */
  width: 100%;
  gap: 0.5em;
  padding: 2em 0;
}

.button-row {
  display: flex;
  gap: 0.5em;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
}

.icon-btn {
  background: #1e81b0;         /* same as main button */
  border: 2px solid #1e81b0;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.icon-img {
  width: 24px;
  height: 24px;
  display: block;
  fill: #fff;                  /* icon is now filled white */
  stroke: #fff;                /* make sure outline is also white */
}

.icon-img {
  width: 24px;
  height: 24px;
  display: block;
}

#add-coin {
  font-size: 1.2em;
  margin: 0;
  padding: 0.7em 1.8em;
  background: #1e81b0;
  color: white;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 48px; /* Match icon button */
}

.modal-backdrop {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 28px rgba(0,0,0,0.20);
  padding: 2em 2em 1.5em 2em;
  text-align: center;
  max-width: 320px;
  width: 90vw;
}

.modal-card h2 {
  margin: 0 0 0.5em 0;
}

.modal-subtitle {
  color: #1e81b0;
  margin-bottom: 1.5em;
}

.modal-btn-row {
  display: flex;
  gap: 1em;
  justify-content: center;
  align-items: stretch;
}

.modal-main-btn {
  background: #1e81b0;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.7em 1.4em;
  font-size: 1em;
  cursor: pointer;
  font-weight: 600;
}

.modal-secondary-btn {
  background: #eee;
  color: #333;
  border: none;
  border-radius: 20px;
  padding: 0.7em 1.2em;
  font-size: 1em;
  cursor: pointer;
}

@media (max-width: 600px) {
  main {
    box-sizing: border-box;
    max-height: 100svh;    /* Use full available, including browser toolbars */
    padding-top: 1em;
    padding-bottom: 1em;
    gap: clamp(0.3em, 2vw, 0.7em); /* Shrink gap only if tight! */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;    /* Keep normal stacking, don't force full vertical spacing */
    overflow-y: auto;               /* Allow gentle scroll if really tight */
  }
  /* You may also enforce a max-width on things like .jar-container */
  .jar-container {
    margin-bottom: clamp(0.3em, 2vw, 1em); /* Shrink margin only if space tight */
  }
  .button-row {
    margin-bottom: clamp(0.2em, 1.5vw, 0.8em);
  }
  /* Optionally limit jar height */
  #jar-img img {
    max-height: 34vh;    /* Limit so it never overflows */
  }
  /* Keep text sizes bold on mobile */
  h1 { font-size: 2em; }
  #counter { font-size: 3.5em; }
}