:root {
  color-scheme: dark;
  --ink: #050711;
  --gold: #ffd77a;
  --gold-strong: #ffb72e;
  --blue: #77b8ff;
  --glass: rgba(10, 12, 24, .38);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--ink); }

body {
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button { font: inherit; }

.experience {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.ambient {
  position: fixed;
  inset: -8%;
  z-index: -2;
  background: radial-gradient(circle at 50% 30%, #172d59, #080913 55%, #03040a 80%);
  overflow: hidden;
}

.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(3, 5, 13, .82), rgba(3, 7, 18, .44), rgba(3, 5, 13, .84));
  backdrop-filter: blur(30px) saturate(1.5);
}

.ambient-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .7;
  filter: blur(32px) saturate(1.35);
  transform: scale(1.12);
}

.stage {
  position: relative;
  width: min(100vw, calc(100svh * .5625));
  height: min(100svh, calc(100vw * 1.7778));
  max-height: 100svh;
  overflow: hidden;
  background: #090b14;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 90px rgba(0,0,0,.58);
}

.birthday-video,
.cinema-shade,
.light-sweep,
.bokeh,
.decorations,
#effects {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.birthday-video {
  object-fit: contain;
  object-position: center;
}

.cinema-shade {
  background:
    linear-gradient(180deg, rgba(2, 3, 8, .58) 0%, transparent 17%, transparent 63%, rgba(2, 3, 8, .76) 100%),
    radial-gradient(circle at 50% 44%, transparent 42%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}

.light-sweep {
  left: -50%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 235, 169, .18), transparent);
  transform: skewX(-15deg);
  mix-blend-mode: screen;
  animation: sweep 8s ease-in-out infinite;
  pointer-events: none;
}

.bokeh {
  background:
    radial-gradient(circle at 8% 25%, rgba(255,183,46,.35) 0 4px, transparent 6px),
    radial-gradient(circle at 93% 17%, rgba(119,184,255,.28) 0 5px, transparent 8px),
    radial-gradient(circle at 88% 62%, rgba(255,92,136,.27) 0 4px, transparent 7px),
    radial-gradient(circle at 14% 72%, rgba(255,215,122,.24) 0 6px, transparent 10px);
  background-size: 100% 100%;
  animation: breathe 4s ease-in-out infinite alternate;
  pointer-events: none;
}

.decorations {
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.decor {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .34));
  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
}

.decor-fireworks {
  inset: auto auto 8% 50%;
  width: 152%;
  opacity: 0;
  animation: fireworksCycle 9.2s ease-in-out infinite;
}

.decor-confetti {
  inset: auto auto -1% 50%;
  width: 147%;
  opacity: 0;
  animation: confettiCycle 7.8s ease-in-out 1.1s infinite;
}

.decor-garland {
  top: -3%;
  left: 50%;
  width: 116%;
  opacity: 0;
  animation: garlandDrop 9s cubic-bezier(.2,.8,.2,1) .35s infinite;
}

.decor-title {
  top: 9%;
  left: 50%;
  width: 96%;
  opacity: 0;
  filter: drop-shadow(0 7px 24px rgba(255, 180, 39, .34));
  animation: titleGlow 9s ease-in-out .35s infinite;
}

.decor-balloons {
  top: 13%;
  left: -29%;
  width: 66%;
  opacity: 0;
  transform-origin: 42% 92%;
  animation: balloonsFloat 10s ease-in-out .8s infinite;
}

.decor-gifts {
  right: -18%;
  bottom: -9%;
  width: 55%;
  opacity: 0;
  animation: giftsPop 10s cubic-bezier(.2,.8,.2,1) 2.2s infinite;
}

.decor-cake {
  left: -15%;
  bottom: -8%;
  width: 52%;
  opacity: 0;
  animation: cakeRise 10s cubic-bezier(.2,.8,.2,1) 3.2s infinite;
}

.decor-crown {
  right: -10%;
  top: 38%;
  width: 38%;
  opacity: 0;
  animation: crownTwinkle 8.4s ease-in-out 1.7s infinite;
}

#effects { z-index: 3; pointer-events: none; }

.icon-button,
.replay-button {
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  background: var(--glass);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.icon-button:hover,
.replay-button:hover { transform: translateY(-2px); background: rgba(20,24,43,.62); border-color: rgba(255,215,122,.5); }
.icon-button:active,
.replay-button:active { transform: scale(.96); }
.icon-button:focus-visible,
.replay-button:focus-visible { outline: 3px solid rgba(119,184,255,.75); outline-offset: 3px; }

.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
}

.icon-button svg { width: 20px; height: 20px; fill: currentColor; }
.sound-on { display: none; }
.fullscreen-button {
  position: absolute;
  z-index: 5;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
}

.start-with-sound {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: rgba(3, 5, 13, .45);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,.84);
  text-align: center;
  cursor: pointer;
}

.start-with-sound[hidden] { display: none; }
.start-with-sound span {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 8vw, 3.2rem);
  text-shadow: 0 4px 24px rgba(0,0,0,.72);
}

.bottom-controls {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.bottom-controls strong {
  max-width: 11ch;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.02;
  text-shadow: 0 3px 16px rgba(0,0,0,.8);
}

.replay-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
}

.replay-button svg { width: 18px; height: 18px; fill: currentColor; }
@keyframes sweep { 0%, 14% { transform: translateX(0) skewX(-15deg); opacity: 0; } 25% { opacity: 1; } 52%, 100% { transform: translateX(350%) skewX(-15deg); opacity: 0; } }
@keyframes breathe { to { opacity: .55; transform: scale(1.04); } }
@keyframes fireworksCycle {
  0%, 5%, 62%, 100% { opacity: 0; transform: translate(-50%, 8%) scale(.9); }
  13%, 24% { opacity: .7; transform: translate(-50%, 0) scale(1); }
  42% { opacity: .25; transform: translate(-50%, -2%) scale(1.035); }
}
@keyframes confettiCycle {
  0%, 8%, 67%, 100% { opacity: 0; transform: translate(-50%, -5%) scale(1.03); }
  16%, 42% { opacity: .92; transform: translate(-50%, 0) scale(1); }
  58% { opacity: .25; transform: translate(-50%, 3%) scale(.98); }
}
@keyframes garlandDrop {
  0%, 4%, 63%, 100% { opacity: 0; transform: translate(-50%, -42%) scale(.92); }
  12%, 48% { opacity: .96; transform: translate(-50%, 0) scale(1); }
  55% { opacity: .35; transform: translate(-50%, -2%) scale(1); }
}
@keyframes titleGlow {
  0%, 6%, 54%, 100% { opacity: 0; transform: translate(-50%, -14%) scale(.84); }
  15%, 36% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  25% { filter: drop-shadow(0 7px 32px rgba(255, 196, 72, .72)); }
  45% { opacity: .15; transform: translate(-50%, -2%) scale(1.02); }
}
@keyframes balloonsFloat {
  0%, 5%, 70%, 100% { opacity: 0; transform: translate(-18%, 12%) rotate(-9deg) scale(.88); }
  14%, 48% { opacity: 1; transform: translate(0, 0) rotate(1deg) scale(1); }
  31% { transform: translate(2%, -2%) rotate(-2deg) scale(1.02); }
  58% { opacity: .28; transform: translate(-3%, -5%) rotate(2deg) scale(1.01); }
}
@keyframes giftsPop {
  0%, 8%, 67%, 100% { opacity: 0; transform: translate(24%, 24%) rotate(7deg) scale(.72); }
  17%, 48% { opacity: .98; transform: translate(0, 0) rotate(0) scale(1); }
  29% { transform: translate(-2%, -2%) rotate(-1deg) scale(1.04); }
  58% { opacity: .25; transform: translate(4%, 3%) scale(.98); }
}
@keyframes cakeRise {
  0%, 8%, 68%, 100% { opacity: 0; transform: translate(-18%, 28%) rotate(-6deg) scale(.72); }
  17%, 48% { opacity: .98; transform: translate(0, 0) rotate(0) scale(1); }
  31% { transform: translate(1%, -2%) rotate(1deg) scale(1.035); }
  58% { opacity: .22; transform: translate(-2%, 2%) scale(.98); }
}
@keyframes crownTwinkle {
  0%, 8%, 65%, 100% { opacity: 0; transform: translate(22%, 10%) rotate(18deg) scale(.72); }
  18%, 48% { opacity: .9; transform: translate(0, 0) rotate(-6deg) scale(1); }
  31% { filter: drop-shadow(0 0 22px rgba(255, 209, 87, .9)); transform: translate(-2%, -3%) rotate(-2deg) scale(1.08); }
  57% { opacity: .22; transform: translate(3%, -1%) rotate(3deg) scale(.98); }
}

@media (max-aspect-ratio: 9/16) {
  .stage { width: 100vw; height: 100svh; }
  .birthday-video { object-fit: contain; }
}

@media (prefers-reduced-motion: reduce) {
  .light-sweep, .bokeh, .decor { animation: none; }
  .decor-garland, .decor-confetti { opacity: .7; transform: translateX(-50%); }
}