/* ============================================================
   RESPONSIVE — loads last, so it overrides every module.
   The original site was desktop-only; the readme listed mobile
   support as a "future plan". These rules cover the core page
   (cake, message, buttons, profile photo). Module-specific
   responsive rules live in each module's own stylesheet.
   ============================================================ */

/* ---------- tablets and small laptops ---------- */
@media only screen and (max-width: 900px) {
  .cake-cover { margin-top: 20px; }

  .profile-img {
    width: 100px;
    height: 100px;
    right: -95px;
    bottom: 10px;
  }
}

/* ---------- phones ---------- */
@media only screen and (max-width: 600px) {
  /* The cake is a fixed 300px block centred with a -150px margin.
     Scale the whole thing rather than trying to re-derive its internals. */
  .cake {
    transform: scale(0.72);
    transform-origin: bottom center;
  }

  /* At this width the profile photo has nowhere to sit beside the cake,
     so tuck it above-left instead of letting it run off the screen. */
  .profile-img {
    width: 78px;
    height: 78px;
    right: auto;
    left: -20px;
    bottom: 190px;
    border-width: 3px;
  }

  .message {
    bottom: 13vh;
    width: 94%;
  }
  .message p { margin: 8px 0; }

  .btn-primary {
    padding: 9px 16px;
    font-size: 13px;
    white-space: normal;
    max-width: 92vw;
  }

  .control-panel { padding: 8px 0; }

  /* The decorative balloon border strip is noise on a small screen. */
  .balloon-border { opacity: 0.3; }
}

/* ---------- very narrow phones ---------- */
@media only screen and (max-width: 380px) {
  .cake { transform: scale(0.62); }
  .profile-img { width: 64px; height: 64px; bottom: 175px; }
  .btn-primary { padding: 8px 13px; font-size: 12px; }
}

/* ---------- short/landscape phones ---------- */
@media only screen and (max-height: 520px) {
  .cake { transform: scale(0.6); transform-origin: bottom center; }
  .message { bottom: 10vh; }
  .profile-img { display: none; }
}