/* ============================================================
   IVY.HK · 老婆生日快樂
   Zero-build static stylesheet.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
  --cream:      #f7f1e0;
  --cream-2:    #fdf9ec;
  --paper:      #fbf6e4;
  --paper-edge: #e7ddc0;
  --red:        #f36363;
  --red-soft:   #f88b7f;
  --red-deep:   #d94f4f;
  --red-dark:   #b03b3b;
  --gold:       #e8b64c;
  --mint:       #7bb7a4;
  --ink:        #453a3a;
  --ink-soft:   #7d6d6d;

  --shadow-sm:  0 2px 6px rgba(120, 78, 60, .10);
  --shadow-md:  0 10px 30px rgba(120, 78, 60, .16);
  --shadow-lg:  0 24px 60px rgba(120, 78, 60, .22);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;

  --ease-out: cubic-bezier(.22, .9, .28, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 2. reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'PingFang HK',
               'Microsoft JhengHei', 'Hiragino Sans CNS', sans-serif;
  color: var(--ink);
  background: var(--cream);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, p, figure { margin: 0; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--red-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 3. background ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;          /* never intercept taps */
  background:
    radial-gradient(120% 80% at 50% 0%,   #fffaf0 0%, transparent 60%),
    radial-gradient(100% 70% at 10% 100%, #fde9dd 0%, transparent 55%),
    linear-gradient(165deg, #fdf8ec 0%, var(--cream) 45%, #f3e8d3 100%);
}

.bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  animation: blob-drift 26s ease-in-out infinite alternate;
}
.bg__blob--1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: #ffd9c9; }
.bg__blob--2 { width: 38vmax; height: 38vmax; right: -12vmax; top: 18vmax;  background: #ffe9b8; animation-delay: -8s; }
.bg__blob--3 { width: 42vmax; height: 42vmax; left: 22vmax; bottom: -18vmax; background: #ffd6d2; animation-delay: -16s; }

@keyframes blob-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vmax, 3vmax, 0) scale(1.12); }
}

.bg__grain {
  position: absolute;
  inset: -50%;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. stage machinery ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  pointer-events: none;
}
.stage.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---------- 5. buttons ---------- */
.btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 14px 34px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .18s var(--ease-back), box-shadow .22s var(--ease-out), background .2s;
}
.btn:active { transform: translateY(1px) scale(.97); }

.btn--primary {
  color: #fff;
  background: linear-gradient(165deg, var(--red-soft), var(--red-deep));
  box-shadow: 0 10px 24px rgba(217, 79, 79, .34), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(217, 79, 79, .42), inset 0 1px 0 rgba(255, 255, 255, .4); }

.btn--ghost {
  color: var(--red-deep);
  background: rgba(255, 255, 255, .72);
  border: 1.5px solid rgba(217, 79, 79, .28);
  box-shadow: var(--shadow-sm);
  font-size: 15px;
  padding: 11px 26px;
}
.btn--ghost:hover { background: #fff; transform: translateY(-2px); }

.btn--tiny {
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 20px;
}

/* ---------- 6. stage · intro ---------- */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 30ch;
}

.intro__pig {
  width: clamp(96px, 26vmin, 150px);
  height: auto;
  animation: bob 2.6s ease-in-out infinite;
  filter: drop-shadow(0 12px 18px rgba(150, 90, 70, .25));
}

.intro__kicker {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--red-deep);
  opacity: .8;
}

.intro__title {
  font-size: clamp(30px, 8.2vmin, 52px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--ink);
}

.intro__hint {
  font-size: clamp(14px, 3.6vmin, 17px);
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 10px;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

/* ---------- 7. stage · game ---------- */
.stage--game { justify-content: flex-start; overflow: hidden; }

.hud {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
}

.hud__hearts {
  display: flex;
  gap: 6px;
  align-items: center;
}

.heart-slot {
  width: 26px;
  height: 24px;
  color: rgba(69, 58, 58, .16);
  transition: color .25s var(--ease-out);
}
.heart-slot svg { width: 100%; height: 100%; fill: currentColor; }
.heart-slot.is-on {
  color: var(--red);
  animation: heart-pop .45s var(--ease-back);
}
.heart-slot.is-on svg { filter: drop-shadow(0 3px 6px rgba(217, 79, 79, .5)); }

@keyframes heart-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.hud__side { display: flex; align-items: center; gap: 10px; }

.combo {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--gold);
  background: rgba(232, 182, 76, .16);
  border: 1px solid rgba(232, 182, 76, .4);
  border-radius: 999px;
  padding: 4px 11px;
  animation: combo-in .3s var(--ease-back);
}
@keyframes combo-in {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(69, 58, 58, .14);
  background: rgba(255, 255, 255, .68);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s var(--ease-back), background .2s;
}
.icon-btn:hover { transform: scale(1.08); background: #fff; }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.icon-btn__off { display: none; }
.icon-btn[aria-pressed="false"] .icon-btn__on { display: none; }
.icon-btn[aria-pressed="false"] .icon-btn__off { display: block; }

.hud__tip {
  position: relative;
  z-index: 4;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .05em;
  opacity: .9;
  transition: opacity .4s;
}
.hud__tip.is-gone { opacity: 0; }

.playfield {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  touch-action: none;
}

/* cakes ---------------------------------------------------------------- */
.cake {
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: none;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.cake img {
  position: absolute;
  inset: 12px;
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(140, 70, 60, .3));
}

.cake::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px solid rgba(243, 99, 99, .38);
  background: radial-gradient(circle, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, 0) 68%);
  animation: halo 1.5s ease-in-out infinite;
  pointer-events: none;
}

.cake:hover::before { border-color: rgba(243, 99, 99, .75); }
.cake.is-caught { pointer-events: none; }
/* the pop animates the inner <img>; the <button> keeps its positioning transform */
.cake.is-caught img { animation: cake-pop .38s var(--ease-out) forwards; }

@keyframes halo {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.14); opacity: 1; }
}

@keyframes cake-pop {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5) translateY(-18px); }
}

/* thrower (the pig) ---------------------------------------------------- */
.thrower {
  position: absolute;
  left: 50%;
  bottom: calc(6px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.thrower img {
  width: clamp(96px, 24vmin, 152px);
  height: auto;
  filter: drop-shadow(0 14px 18px rgba(140, 80, 60, .26));
  animation: bob 2.4s ease-in-out infinite;
}
.thrower.is-throwing img { animation: throw-pig .42s var(--ease-out); }

@keyframes throw-pig {
  0%   { transform: translateY(0)    scale(1, 1); }
  30%  { transform: translateY(6px)  scale(1.1, .86); }
  55%  { transform: translateY(-22px) scale(.9, 1.14); }
  100% { transform: translateY(0)    scale(1, 1); }
}

.thrower.is-cheer img { animation: cheer 1.1s var(--ease-out); }
@keyframes cheer {
  0%   { transform: translateY(0)    scale(1, 1) rotate(0); }
  25%  { transform: translateY(-26px) scale(.94, 1.1) rotate(-6deg); }
  50%  { transform: translateY(0)    scale(1.08, .92) rotate(6deg); }
  75%  { transform: translateY(-18px) scale(.96, 1.06) rotate(-4deg); }
  100% { transform: translateY(0)    scale(1, 1) rotate(0); }
}

/* ---------- 8. stage · victory ---------- */
.stage--victory { text-align: center; }

.victory {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 32ch;
}

.victory__pig {
  width: clamp(104px, 27vmin, 168px);
  height: auto;
  filter: drop-shadow(0 16px 22px rgba(140, 80, 60, .28));
  animation: cheer 1.5s var(--ease-out) infinite;
}

.victory__title {
  margin-top: 8px;
  font-size: clamp(22px, 6vmin, 34px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--red-deep);
  letter-spacing: .01em;
  animation: pop-in .55s var(--ease-back) both;
}

.victory__heart {
  width: clamp(46px, 11vmin, 62px);
  height: auto;
  fill: var(--red);
  margin-top: 6px;
  filter: drop-shadow(0 6px 12px rgba(217, 79, 79, .4));
  animation: pulse 1.1s ease-in-out infinite;
}

.victory__sign {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .06em;
}

.victory__actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(.7) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}

/* ---------- 9. fx layer ---------- */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: var(--w);
  height: calc(var(--w) * .58);
  border-radius: 1.5px;
  background: var(--c);
  will-change: transform, opacity;
  animation: confetti-fall var(--dur) cubic-bezier(.25, .7, .4, 1) forwards;
}
.confetti--round { border-radius: 50%; height: var(--w); }

@keyframes confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); opacity: 0; }
}

.pop-text {
  position: absolute;
  font-size: 22px;
  font-weight: 900;
  color: var(--red-deep);
  text-shadow: 0 2px 6px rgba(255, 255, 255, .9);
  animation: pop-up .85s var(--ease-out) forwards;
}
@keyframes pop-up {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  25%  { transform: translate(-50%, -60%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(1); opacity: 0; }
}

/* ---------- 10. responsive ---------- */
@media (max-height: 620px) {
  .victory { gap: 4px; }
  .victory__pig { width: clamp(84px, 20vmin, 120px); }
  .victory__actions { margin-top: 10px; }
}

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