/* Monster Band Happy Birthday card: what's different from the Monster Jukebox's style.css. */

/* One song: no song deck, sticker book, grown-ups' panel or help button. */
.deck, #help-btn, #book-btn, #set-btn { display: none !important; }

/* The opening panel: party hats on the faces, and who the card is from. */
.party-faces { margin-top: 18px; }
.party-faces .f i { position: absolute; left: 50%; top: -26px; width: 26px; height: 30px; margin-left: -13px; transform: rotate(-10deg);
  background: repeating-linear-gradient(-40deg, #ff5d8f 0 6px, #ffd23a 6px 11px); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.party-faces .f i::after { content: ""; position: absolute; }
.party-faces .f1 i { top: -24px; transform: rotate(8deg); background: repeating-linear-gradient(-40deg, #3ec1d3 0 6px, #ff7a45 6px 11px); }
.party-faces .f2 i { transform: rotate(-4deg); background: repeating-linear-gradient(-40deg, #8e6bd8 0 6px, #6ccf5f 6px 11px); }
.party-faces .f3 i { top: -20px; width: 20px; height: 23px; margin-left: -10px; transform: rotate(12deg); background: repeating-linear-gradient(-40deg, #ffb627 0 5px, #ff5d8f 5px 9px); }
#help-title { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-size: clamp(30px, 7vmin, 46px); color: #e0218a; margin-top: 4px; }
.splash-card .from-line { font: 700 clamp(18px, 4vmin, 24px) "Fredoka", "Nunito", system-ui, sans-serif; color: #5b2bb8 !important; margin: -4px 0 16px !important; }

/* "Happy Birthday" in the sky and the birthday name. */
.hb-title, .hb-name { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 700; paint-order: stroke; stroke: #1a1f3d; stroke-linejoin: round; }
.hb-title { font-size: 92px; fill: #ff5d8f; stroke-width: 8px; fill-opacity: 0; }
.hb-name { font-size: 70px; fill: #ffd23a; stroke-width: 7px; }

/* "Play again!" in the top left corner when the party is over (the same button as the Thanksgiving Choir card). */
#again { position: fixed; z-index: 10; top: var(--top); left: calc(env(safe-area-inset-left, 0px) + 12px); height: var(--btn);
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; margin: 0;
  border: 3px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); border-radius: 999px 900px 980px 940px;
  background: #ef5350; color: #fff; font: 800 clamp(15px, 3vmin, 22px) "Nunito", system-ui, sans-serif;
  cursor: pointer; touch-action: manipulation; transition: transform .08s; transform: rotate(-2deg);
  animation: wiggle-again 2.4s ease-in-out infinite; }
#again[hidden] { display: none; }
#again:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--ink); }
#again:focus-visible { outline: 3px dashed #ffd23a; outline-offset: 3px; }
@keyframes wiggle-again { 0%, 80%, 100% { rotate: 0deg; } 85% { rotate: -4deg; } 90% { rotate: 4deg; } 95% { rotate: -2deg; } }

/* A narrow card frame (phones, small tablets): there's no room for the words between the corner buttons, so the
   words go just under the buttons and use the full width. (Tall frames keep style.css's own rule.) */
@media (max-width: 860px) and (min-aspect-ratio: 4/5) {
  .lyrics { top: calc(var(--top) + var(--btn) + 10px); max-width: calc(100% - 20px); font-size: clamp(16px, min(4.6vw, 6.4vh), 32px); line-height: 1.3; }
  .hint { top: calc(var(--top) + var(--btn) + 110px); }
}
/* very narrow frames: "Play again!" stays clear of the Play button */
@media (max-width: 380px) { #again { gap: 5px; padding: 0 11px; font-size: 14px; left: calc(env(safe-area-inset-left, 0px) + 8px); } }

@media (prefers-reduced-motion: reduce) { #again { animation: none; } }

/* The LLERRAH.COM banner a balloon tows across a tall sky would sit behind "Happy Birthday": not on this card. */
.sky-tow { display: none; }

/* ?shot=1 (the pictures): no buttons or words. */
body.shot #controls, body.shot #tools, body.shot #lyrics, body.shot #hint { display: none !important; }