/* Mini Gifts — shared look for storage/gifts/mini-*.html.
   Each look sets its own colours on :root (--bg, --ink, --accent, --accent-2,
   --card, --card-ink) and its own stage; this file is the frame, the cards,
   buttons, and the ending. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink, #2b2230);
  background: var(--bg, #fff4e6);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; }
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

/* One phone-wide column, centred on bigger screens. */
.m-app {
  position: relative;
  width: 100%;
  max-width: 460px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
}
@media (min-width: 700px) {
  .m-app { box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 30px 80px -30px rgba(0,0,0,.35); }
}

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(58px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.985);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1), visibility 0s linear .55s;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.scene.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .5s ease .08s, transform .6s cubic-bezier(.2,.8,.2,1) .08s, visibility 0s;
}
.scene.is-off { transform: translateY(-10px) scale(.985); }
/* a short phone scrolls the scene; nothing in it gets squeezed */
.scene > * { flex-shrink: 0; }

/* type */
.m-kicker {
  margin: 0 0 8px;
  font: 800 12px/1.2 "Nunito", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent, #e2483d);
  text-align: center;
}
.m-title {
  margin: 0;
  font: 700 clamp(28px, 8.4vw, 38px)/1.08 "Baloo 2", "Nunito", sans-serif;
  text-align: center;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.m-sub {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  text-align: center;
  opacity: .78;
  text-wrap: balance;
}
.m-hand { font-family: "Kalam", "Comic Sans MS", cursive; }

/* buttons */
.m-btn {
  --b: var(--accent, #e2483d);
  --b2: var(--accent-dark, #b8322a);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--b);
  color: var(--btn-ink, #fff);
  font: 800 17px/1 "Baloo 2", "Nunito", sans-serif;
  letter-spacing: .01em;
  box-shadow: 0 5px 0 var(--b2), 0 14px 26px -10px var(--b);
  transition: transform .12s ease, box-shadow .12s ease, opacity .3s ease;
}
.m-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--b2), 0 8px 18px -10px var(--b); }
.m-btn[disabled] { opacity: .45; pointer-events: none; }
.m-btn--ghost {
  background: rgba(255,255,255,.75);
  color: var(--ink, #2b2230);
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.m-btn.is-pulse { animation: m-pulse 1.8s ease-in-out infinite; }
@keyframes m-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* the "tap here" finger */
.m-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: var(--ink, #2b2230);
  font: 800 13px/1 "Nunito", sans-serif;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.35);
  animation: m-bob 1.4s ease-in-out infinite;
}
@keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* paper card for the words */
.m-card {
  position: relative;
  width: 100%;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: var(--card, #fffdf8);
  color: var(--card-ink, #2b2230);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -20px rgba(0,0,0,.45);
}
.m-card--paper {
  background:
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(80,120,200,.13) 31px 32px),
    var(--card, #fffdf8);
  background-position: 0 14px;
}
.m-letter {
  margin: 0;
  font: 400 21px/32px "Kalam", cursive;
  white-space: normal;
  overflow-wrap: anywhere;
}
.m-sign {
  margin: 14px 0 0;
  text-align: right;
  font: 700 18px/1.3 "Kalam", cursive;
  color: var(--accent, #e2483d);
}
.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: currentColor;
  animation: m-caret .8s steps(1) infinite;
}
@keyframes m-caret { 50% { opacity: 0; } }

/* pop-in for anything revealed */
.m-pop { animation: m-pop .55s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes m-pop { from { opacity: 0; transform: scale(.6) translateY(16px); } to { opacity: 1; transform: none; } }
.m-rise { animation: m-rise .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes m-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.m-shake { animation: m-shake .5s ease both; }
@keyframes m-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-1deg); }
  40% { transform: translateX(7px) rotate(1deg); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}

/* sound toggle */
.m-sound {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, calc(50% - 230px + 12px));
  z-index: 50;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  color: var(--ink, #2b2230);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.m-sound svg { width: 20px; height: 20px; }
.m-sound.is-muted { opacity: .7; }

.m-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}

.m-toast {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 70;
  max-width: 88vw;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(20,16,24,.88);
  color: #fff;
  font: 700 14px/1.3 "Nunito", sans-serif;
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.m-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* the ending */
.m-end {
  width: 100%;
  margin-top: 18px;
  padding: 16px 14px 6px;
  text-align: center;
  animation: m-rise .7s cubic-bezier(.2,.8,.2,1) .2s both;
}
.m-end-q { margin: 0 0 10px; font: 800 13px/1.2 "Nunito", sans-serif; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.m-react { display: flex; justify-content: center; gap: 10px; }
.m-react button {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  font-size: 25px;
  line-height: 1;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.4);
  transition: transform .2s cubic-bezier(.2,1.6,.4,1);
}
.m-react button:active, .m-react button.is-on { transform: scale(1.18); }
.m-react button.is-on { box-shadow: 0 0 0 3px var(--accent, #e2483d), 0 6px 14px -8px rgba(0,0,0,.4); }
.m-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 800 14px/1 "Nunito", sans-serif;
  opacity: .75;
}
.m-replay svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}