/* A warm 3D birthday surprise for Mom. */
.music-invite {
  max-width:680px; margin:0 auto 23px; padding:0 12px;
  text-align:center; font-size:clamp(19px,4.6vw,26px);
  font-weight:800; line-height:1.95; color:#a62169;
  text-shadow:0 1px 1px #ffeaf5;
}
#our-song.section {margin-top:clamp(35px,7vw,70px);}
/* Keep the same pink song card; the section is moved before all text. */
.surprise-overlay.surprise-world {
  padding:0; overflow:hidden; display:none; position:fixed; inset:0;
  border:0; border-radius:0; background:#030005;
  z-index:1200; backdrop-filter:none; -webkit-backdrop-filter:none;
  touch-action:none; isolation:isolate; opacity:1;
}
.surprise-overlay.surprise-world:target {display:block;}
.surprise-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; }
.surprise-world .surprise-ui { position:absolute; inset:0; z-index:2; pointer-events:none; font-family:'Cairo',system-ui,sans-serif; }
.surprise-world .surprise-home {
  position:absolute; top:calc(env(safe-area-inset-top) + 15px); right:16px;
  z-index:5; border:1px solid #ff6688a0; border-radius:999px;
  padding:12px 17px; color:#fff5fa; font-size:13px; font-weight:800;
  background:linear-gradient(110deg,rgba(68,3,22,.88),rgba(133,20,52,.76));
  text-decoration:none; box-shadow:0 6px 25px #f315534d,inset 0 1px 0 #fff3;
  pointer-events:auto; -webkit-tap-highlight-color:transparent;
}
.surprise-world .surprise-home:active {transform:scale(.97)}
.surprise-world .scene-header {position:absolute; top:calc(env(safe-area-inset-top) + 75px); left:0; right:0; text-align:center; padding:0 16px;}
.surprise-world .scene-eyebrow { display:block; font-size:10px; letter-spacing:3px; direction:ltr; color:#f6a4b4; font-weight:800; }
.surprise-world .scene-title { margin:8px 0 0; font-size:clamp(24px,5vw,39px); color:#fff0f3; font-family:Georgia,serif; text-shadow:0 0 16px #ee3c61,0 0 35px #fa194e; direction:ltr; font-weight:700; }
.surprise-world .scene-title span {color:#ff6383}
.surprise-world .scene-bottom {
  position:absolute; bottom:calc(env(safe-area-inset-bottom) + 23px);
  width:100%; left:0; padding:0 18px; text-align:center;
}
.surprise-world .scene-message {font-size:clamp(13px,3.4vw,18px); color:#ffdae7; line-height:1.8; margin:0 auto 9px; font-weight:700; text-shadow:0 2px 13px #950c39}
.surprise-world .scene-hint {font-size:clamp(10px,2.9vw,13px); color:#eb8ba5; line-height:1.8; margin:0 auto;}
.surprise-world .surprise-fallback {position:absolute; inset:33% 0 auto; text-align:center; font-size:85px; color:#e42b56; filter:drop-shadow(0 0 18px #f00);}
.surprise-world .surprise-fallback span {display:block;font:800 19px Georgia,serif; color:#ffaac3}
.surprise-world.is-ready .surprise-fallback {display:none}
@media (min-width:740px) {
  .surprise-world .surprise-home {top:24px; right:28px; font-size:16px; padding:13px 23px}
  .surprise-world .scene-header {top:90px}
  .surprise-world .scene-bottom {bottom:35px}
}
@media (max-height:620px) {
  .surprise-world .scene-header {top:calc(env(safe-area-inset-top) + 64px)}
  .surprise-world .scene-title {font-size:clamp(19px,4vw,27px)}
  .surprise-world .scene-message {font-size:12px}
  .surprise-world .scene-bottom {bottom:calc(env(safe-area-inset-bottom) + 7px)}
}
@media (prefers-reduced-motion:reduce) {.surprise-world .scene-hint {display:none}}
/* RTL documents can over-constrain absolute inset+width. Pin both layers
   to the physical top-left, including on wide Safari/Chrome viewports. */
.surprise-overlay.surprise-world .surprise-canvas {
  top:0; left:0; right:auto; bottom:auto; width:100%; height:100%;
}
.surprise-overlay.surprise-world .surprise-ui {
  top:0; left:0; right:auto; bottom:auto; width:100%; height:100%;
}