*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:#000;
  color:white;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  overflow-x:hidden;
}
.hidden{display:none!important}

/* INTRO */
.intro-screen{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:26px 16px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,31,139,.35), transparent 26%),
    radial-gradient(circle at 50% 90%, rgba(255,0,125,.45), transparent 38%),
    linear-gradient(180deg,#150010 0%,#050008 55%,#000 100%);
}
.intro-screen::before{
  content:"⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡";
  position:absolute;
  inset:0;
  font-size:28px;
  opacity:.14;
  letter-spacing:70px;
  animation:lightningFloat 12s linear infinite;
}
@keyframes lightningFloat{from{transform:translateY(100vh)}to{transform:translateY(-120vh)}}
.stars::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1.4px),
    radial-gradient(circle,rgba(255,80,180,.8) 1px,transparent 1.6px);
  background-size:42px 42px,72px 72px;
  opacity:.28;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{0%,100%{opacity:.22}50%{opacity:.42}}
.intro-content{
  position:relative;
  z-index:2;
  width:min(920px,100%);
  text-align:center;
}
.intro-content h2{
  margin:0;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:clamp(3rem,11vw,7rem);
  font-weight:400;
  text-shadow:0 0 12px #ff50b4,0 0 34px #ff0078,0 0 80px rgba(255,0,120,.55);
}
.intro-content h1{
  margin:-8px 0 8px;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:clamp(4.6rem,18vw,11rem);
  font-weight:400;
  line-height:.9;
  text-shadow:0 0 14px #ff50b4,0 0 42px #ff0082,0 0 90px rgba(255,0,150,.55);
}
.tagline,.small-quote{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:clamp(.72rem,2.3vw,1.05rem);
  color:#ffd2ea;
  text-shadow:0 0 14px rgba(255,78,170,.85);
}
.quote{
  margin:20px auto 12px;
  max-width:640px;
  font-size:clamp(1.08rem,4vw,1.65rem);
  line-height:1.38;
  color:#fff6fb;
}
.infinity{
  font-size:clamp(2.4rem,8vw,4.5rem);
  color:#ffd5ed;
  text-shadow:0 0 24px #ff50aa;
}
.break-text{
  font-size:clamp(1.2rem,4vw,2rem);
  text-shadow:0 0 20px #ff50aa;
}
.bolt-button{
  width:clamp(130px,34vw,230px);
  height:clamp(130px,34vw,230px);
  border-radius:50%;
  border:2px solid rgba(255,175,225,.95);
  color:white;
  background:radial-gradient(circle,rgba(255,255,255,.92),rgba(255,0,140,.5) 18%,rgba(85,0,65,.35) 55%,rgba(255,0,150,.08));
  font-size:clamp(4.2rem,15vw,9rem);
  cursor:pointer;
  box-shadow:0 0 24px white,0 0 55px #ff00a0,0 0 110px rgba(255,0,160,.75);
  animation:pulseBolt 1.5s ease-in-out infinite;
}
@keyframes pulseBolt{0%,100%{transform:scale(1)}50%{transform:scale(1.06);filter:brightness(1.35)}}
.tap-text{
  margin:16px 0 0;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:clamp(1.8rem,7vw,4rem);
  line-height:1.05;
  text-shadow:0 0 12px #ff50b4,0 0 36px #ff008c;
}
.tap-text span{font-size:.42em;opacity:.85}
.balloons{
  position:absolute;
  z-index:1;
  font-size:clamp(3rem,14vw,8rem);
  opacity:.72;
  filter:drop-shadow(0 0 22px rgba(255,0,140,.9));
  animation:float 4s ease-in-out infinite;
}
.balloon-left{left:4%;top:10%}.balloon-right{right:5%;top:12%;animation-delay:-1s}
.balloon-bottom-left{left:7%;bottom:8%;animation-delay:-2s}.balloon-bottom-right{right:8%;bottom:10%;animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-18px) rotate(4deg)}}

/* TIMELINE */
.timeline{
  min-height:100vh;
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  text-align:center;
  background:radial-gradient(circle at center,rgba(255,255,255,.12),rgba(0,0,0,.96)),linear-gradient(180deg,#0f0018,#000);
  overflow:hidden;
}
.timeline-stars{
  position:absolute;
  inset:-200px;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.95) 1px,transparent 1.6px),
    radial-gradient(circle,rgba(255,0,160,.8) 1px,transparent 1.8px);
  background-size:45px 45px,75px 75px;
  opacity:.45;
  animation:driftStars 10s linear infinite;
}
@keyframes driftStars{from{transform:translateY(0)}to{transform:translateY(-120px)}}
.timeline h2{
  position:relative;
  z-index:2;
  font-size:clamp(2rem,7vw,4rem);
  text-shadow:0 0 24px #ff00a0;
}
.timeline p{
  position:relative;
  z-index:2;
  margin-top:140px;
  font-size:clamp(1.8rem,6vw,3.3rem);
  color:#ffd7ef;
  text-shadow:0 0 18px #ff00a0;
}

/* VIDEO PAGE */
.video-page{
  min-height:100vh;
  background:radial-gradient(circle at top,#3a1426 0%,#09060a 55%,#000 100%);
}
.page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px 14px;
}
.card{
  width:min(960px,100%);
  text-align:center;
  padding:20px 12px 28px;
  position:relative;
  z-index:2;
}
.video-title{
  margin:0 0 8px;
  font-size:clamp(2.4rem,8vw,5.4rem);
  line-height:1;
  letter-spacing:-.04em;
  text-shadow:0 0 16px rgba(255,144,185,.9),0 0 34px rgba(255,75,135,.7),0 0 60px rgba(255,20,100,.35);
}
.subtitle{margin:0 0 18px;opacity:.9;font-size:clamp(1rem,3vw,1.4rem)}
.video-wrap{
  position:relative;
  width:min(520px,100%);
  margin:0 auto;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.12),0 18px 60px rgba(0,0,0,.65),0 0 50px rgba(255,73,137,.35);
  background:#000;
}
video{width:100%;display:block;background:#000}
.start-btn{
  position:absolute;
  inset:0;
  border:0;
  background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.65)),radial-gradient(circle,rgba(255,95,155,.35),rgba(0,0,0,.8));
  color:white;
  font-size:clamp(1.3rem,5vw,2.4rem);
  font-weight:800;
  cursor:pointer;
  text-shadow:0 0 18px white;
}
.start-btn.hidden-btn{opacity:0;pointer-events:none;transition:opacity .8s ease}
.note{margin:16px 0 0;opacity:.75}
.continue-btn{
  display:inline-block;
  margin-top:22px;
  padding:16px 28px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(255,220,245,.95);
  background:linear-gradient(135deg,rgba(255,0,140,.55),rgba(255,120,200,.25));
  color:white;
  font-size:clamp(1.05rem,4vw,1.45rem);
  font-weight:900;
  box-shadow:0 0 26px rgba(255,0,160,.95),0 0 55px rgba(255,0,160,.45);
  animation:continuePulse 1.7s ease-in-out infinite;
}
@keyframes continuePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.hearts::before,.hearts::after{
  content:"❤️ 💗 ❤️ 💞 💖";
  position:fixed;
  left:0;
  width:100%;
  font-size:28px;
  letter-spacing:36px;
  opacity:.18;
  white-space:nowrap;
  animation:floatHearts 18s linear infinite;
}
.hearts::before{top:90%}.hearts::after{top:110%;animation-delay:-8s;opacity:.12}
@keyframes floatHearts{from{transform:translateY(0) translateX(-10%)}to{transform:translateY(-140vh) translateX(10%)}}

/* ENDING PAGE */
.ending-body{background:#000;overflow:hidden}
.ending-page{
  min-height:100vh;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at center, rgba(255,98,180,.28), rgba(0,0,0,.92) 55%),
    linear-gradient(180deg,#160010 0%,#000 100%);
}
.flower-bg{
  position:absolute;
  inset:auto 0 -20px 0;
  min-height:80vh;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-end;
  justify-content:space-around;
  gap:8px;
  padding:30px 8px;
}
.flower-bg span{
  font-size:clamp(3.6rem,11vw,8rem);
  opacity:0;
  transform:translateY(240px) scale(.25) rotate(-8deg);
  animation:flowerBloom 2.4s ease forwards;
  filter:drop-shadow(0 0 22px rgba(255,90,170,.95));
}
.flower-bg span:nth-child(2){animation-delay:.15s}.flower-bg span:nth-child(3){animation-delay:.30s}
.flower-bg span:nth-child(4){animation-delay:.45s}.flower-bg span:nth-child(5){animation-delay:.60s}
.flower-bg span:nth-child(6){animation-delay:.75s}.flower-bg span:nth-child(7){animation-delay:.90s}
.flower-bg span:nth-child(8){animation-delay:1.05s}.flower-bg span:nth-child(9){animation-delay:1.20s}
.flower-bg span:nth-child(10){animation-delay:1.35s}.flower-bg span:nth-child(11){animation-delay:1.5s}
.flower-bg span:nth-child(12){animation-delay:1.65s}.flower-bg span:nth-child(13){animation-delay:1.8s}
.flower-bg span:nth-child(14){animation-delay:1.95s}.flower-bg span:nth-child(15){animation-delay:2.1s}
@keyframes flowerBloom{to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
.ending-message{
  position:relative;
  z-index:2;
  text-align:center;
  padding:22px;
  width:min(900px,96%);
}
.ending-message h1{
  margin:0 0 12px;
  font-size:clamp(2.6rem,10vw,6rem);
  line-height:1;
  text-shadow:0 0 18px #ffb4e1,0 0 45px #ff00a0,0 0 90px rgba(255,0,160,.65);
}
.ending-message p{
  margin:8px 0;
  font-size:clamp(1.05rem,4vw,1.55rem);
  color:#ffe2f2;
  text-shadow:0 0 14px rgba(255,0,150,.9);
}
.replay-btn{
  display:inline-block;
  margin-top:26px;
  padding:16px 28px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(255,220,245,.95);
  background:linear-gradient(135deg,rgba(255,0,140,.55),rgba(255,120,200,.24));
  color:white;
  font-size:clamp(1rem,3.6vw,1.35rem);
  font-weight:900;
  box-shadow:0 0 26px rgba(255,0,160,.95),inset 0 0 14px rgba(255,255,255,.12);
  animation:continuePulse 1.7s ease-in-out infinite;
}


/* Transition text fixed + centered */
.timeline{
  place-items:center !important;
  text-align:center !important;
}

.timeline-box{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(900px,94%);
  min-height:260px;
}

.timeline h2{
  margin:0 0 26px !important;
}

.timeline p{
  margin:0 !important;
  transition:opacity .8s ease, transform .8s ease;
}

.found-hidden{
  opacity:0;
  transform:translateY(14px);
}

.found-show{
  opacity:1 !important;
  transform:translateY(0) !important;
}


/* Behind the scenes button */
.ending-buttons{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.bts-btn{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.bts-btn.show-bts{
  opacity:1;
  transform:translateY(0);
}

.bts-btn,
.close-bts{
  padding:14px 24px;
  border-radius:999px;
  border:1px solid rgba(255,220,245,.95);
  background:linear-gradient(135deg,rgba(255,0,140,.45),rgba(255,120,200,.2));
  color:white;
  font-size:clamp(.95rem,3vw,1.2rem);
  font-weight:800;
  cursor:pointer;
  box-shadow:
    0 0 18px rgba(255,0,160,.85),
    inset 0 0 12px rgba(255,255,255,.08);
}

/* Modal */
.bts-modal{
  position:fixed;
  inset:0;
  z-index:9999999;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(12px);
}

.hidden-bts{
  display:none;
}

.bts-content{
  width:min(950px,92%);
  max-height:88vh;
  overflow:auto;
  border-radius:26px;
  padding:28px;
  background:
    radial-gradient(circle at top, rgba(255,0,160,.22), rgba(0,0,0,.92)),
    linear-gradient(180deg,#170012,#020003);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 45px rgba(255,0,160,.4),
    0 0 120px rgba(255,0,160,.18);
}

.bts-content h2{
  margin-top:0;
  font-size:clamp(2rem,7vw,4rem);
  text-align:center;
  text-shadow:
    0 0 18px rgba(255,255,255,.9),
    0 0 45px rgba(255,0,160,1);
}

.bts-content p{
  text-align:center;
  font-size:clamp(1rem,3vw,1.35rem);
  color:#ffe4f4;
}

.code-window{
  margin-top:22px;
  border-radius:18px;
  overflow:auto;
  background:#050505;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 25px rgba(255,255,255,.04);
}

.code-window pre{
  margin:0;
  padding:24px;
  color:#ffb7dd;
  font-size:.95rem;
  line-height:1.7;
  white-space:pre-wrap;
}


#actualCode{
  color:#ffb7dd;
  font-size:.78rem;
  line-height:1.45;
  text-align:left;
  max-height:55vh;
  overflow:auto;
  white-space:pre-wrap;
}


.handmade-line{
  margin-top:18px;
  margin-bottom:10px;
  text-align:center;
  font-size:clamp(1rem,3vw,1.35rem);
  color:#ffe4f4;
  text-shadow:
    0 0 12px rgba(255,255,255,0.7),
    0 0 28px rgba(255,0,160,0.8);
  line-height:1.6;
}


.scan-log{
  margin-top:8px;
  margin-bottom:30px;
  min-height:140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.scan-line{
  margin:0;
  font-size:clamp(1rem,3.2vw,1.4rem) !important;
  color:#ffd9ef !important;
  letter-spacing:.08em;
  text-shadow:0 0 12px rgba(255,0,160,.85);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.hidden-line{
  opacity:0;
  transform:translateY(10px);
}

.show-line{
  opacity:1;
  transform:translateY(0);
}


/* SUPER OBVIOUS CONSTELLATION TRANSITION FIX */
.timeline{
  position:fixed !important;
  inset:0 !important;
  z-index:9999999 !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  background:
    radial-gradient(circle at center, rgba(255, 80, 180, 0.16), rgba(0,0,0,0.98) 62%),
    linear-gradient(180deg, #160024 0%, #000 100%) !important;
  overflow:hidden !important;
}

.timeline.hidden{
  display:none !important;
}

.timeline-stars{
  position:absolute !important;
  inset:-200px !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,0,160,.9) 1px, transparent 2px),
    radial-gradient(circle, rgba(115,220,255,.75) 1px, transparent 1.7px) !important;
  background-size:38px 38px, 68px 68px, 110px 110px !important;
  opacity:.55 !important;
  animation:driftStars 11s linear infinite !important;
}

.constellation-map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:.95;
  filter: drop-shadow(0 0 16px rgba(255, 70, 180, .9));
  animation: constellationFloat 8s ease-in-out infinite;
}

.constellation line,
.constellation path{
  fill:none;
  stroke:rgba(255, 210, 240, .86);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:12 14;
  animation: constellationDash 3.2s linear infinite;
}

.constellation circle{
  fill:white;
  stroke:rgba(255, 0, 170, .95);
  stroke-width:3;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.95));
  animation: starPulse 1.8s ease-in-out infinite;
}

.heart-constellation path{
  stroke:rgba(255, 80, 170, .95);
  stroke-width:4;
}

@keyframes constellationDash{
  from{ stroke-dashoffset:0; }
  to{ stroke-dashoffset:-52; }
}

@keyframes constellationFloat{
  0%,100%{ transform:scale(1) rotate(0deg); opacity:.86; }
  50%{ transform:scale(1.035) rotate(.4deg); opacity:1; }
}

@keyframes starPulse{
  0%,100%{ transform:scale(1); opacity:.7; }
  50%{ transform:scale(1.35); opacity:1; }
}

.timeline-box{
  position:relative !important;
  z-index:3 !important;
  width:min(900px,94%) !important;
  min-height:430px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  border-radius:32px !important;
  background:rgba(0,0,0,.18) !important;
  backdrop-filter:blur(2px) !important;
}

#timelineTitle{
  margin:0 0 28px !important;
  font-size:clamp(2rem,7vw,4.2rem) !important;
  text-shadow:
    0 0 18px rgba(255,255,255,.9),
    0 0 36px rgba(255,0,160,1),
    0 0 80px rgba(255,0,160,.55) !important;
}

.scan-log{
  margin-top:8px !important;
  margin-bottom:30px !important;
  min-height:150px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}

.scan-line{
  margin:0 !important;
  font-size:clamp(1rem,3.2vw,1.45rem) !important;
  color:#ffd9ef !important;
  letter-spacing:.08em !important;
  text-shadow:0 0 14px rgba(255,0,160,1) !important;
  transition:opacity .7s ease, transform .7s ease !important;
}

.hidden-line{
  opacity:0 !important;
  transform:translateY(10px) !important;
}

.show-line{
  opacity:1 !important;
  transform:translateY(0) !important;
}

#foundText{
  margin-top:18px !important;
  font-size:clamp(1.9rem,6vw,3.7rem) !important;
  color:#ffd7ef !important;
  text-shadow:
    0 0 18px rgba(255,255,255,.9),
    0 0 35px rgba(255,0,160,1),
    0 0 75px rgba(255,0,160,.65) !important;
  transition:opacity .8s ease, transform .8s ease !important;
}

.found-hidden{
  opacity:0 !important;
  transform:translateY(14px) !important;
}

.found-show{
  opacity:1 !important;
  transform:translateY(0) !important;
}


/* =========================================================
   FULL MEMORY UNIVERSE PAGE - RELIABLE GITHUB PAGES VERSION
========================================================= */

.memory-body{
  margin:0;
  min-height:100vh;
  background:#000;
  overflow:hidden;
  color:white;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

.memory-transition,
.memory-universe-page{
  position:fixed;
  inset:0;
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at center, rgba(255,70,175,.18), rgba(0,0,0,.98) 62%),
    linear-gradient(180deg,#160024,#000);
}

.memory-transition{
  z-index:99999;
  display:grid;
  place-items:center;
  transition:opacity 1.2s ease;
}

.fade-away-memory{
  opacity:0;
}

.memory-stars::before{
  content:"";
  position:absolute;
  inset:-200px;
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,0,160,.85) 1px, transparent 2px),
    radial-gradient(circle, rgba(120,220,255,.7) 1px, transparent 1.8px);
  background-size:42px 42px, 72px 72px, 112px 112px;
  opacity:.45;
  animation:memoryStarsMove 18s linear infinite;
}

@keyframes memoryStarsMove{
  from{ transform:translateY(0); }
  to{ transform:translateY(-220px); }
}

.memory-constellations{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.9;
  z-index:1;
  filter:drop-shadow(0 0 18px rgba(255,80,180,.9));
  animation:memoryConstellationFloat 7s ease-in-out infinite;
}

.memory-constellations line,
.memory-constellations path{
  fill:none;
  stroke:rgba(255,220,245,.9);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:12 14;
  animation:memoryDash 3s linear infinite;
}

.memory-constellations circle{
  fill:white;
  stroke:rgba(255,0,160,.95);
  stroke-width:3;
  filter:drop-shadow(0 0 13px white);
  animation:memoryStarPulse 1.7s ease-in-out infinite;
}

@keyframes memoryDash{
  from{ stroke-dashoffset:0; }
  to{ stroke-dashoffset:-52; }
}

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

@keyframes memoryStarPulse{
  0%,100%{ opacity:.65; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.35); }
}

.memory-transition-box{
  position:relative;
  z-index:3;
  text-align:center;
  width:min(900px,94%);
  padding:24px;
}

.memory-transition-box h1{
  margin:0 0 34px;
  font-size:clamp(2rem,7vw,4.3rem);
  line-height:1.05;
  text-shadow:
    0 0 18px rgba(255,255,255,.9),
    0 0 36px rgba(255,0,160,1),
    0 0 80px rgba(255,0,160,.55);
}

.memory-scan{
  opacity:0;
  margin:12px 0;
  font-size:clamp(1rem,3.2vw,1.45rem);
  color:#ffd9ef;
  letter-spacing:.08em;
  text-shadow:0 0 14px rgba(255,0,160,1);
}

.line1{ animation:memoryScanLine .8s ease forwards; animation-delay:.8s; }
.line2{ animation:memoryScanLine .8s ease forwards; animation-delay:1.5s; }
.line3{ animation:memoryScanLine .8s ease forwards; animation-delay:2.2s; }

.memory-found{
  opacity:0;
  margin-top:30px;
  font-size:clamp(1.9rem,6vw,3.7rem);
  color:#ffd7ef;
  text-shadow:
    0 0 18px rgba(255,255,255,.9),
    0 0 35px rgba(255,0,160,1),
    0 0 75px rgba(255,0,160,.65);
  animation:memoryFoundAppear 1s ease forwards;
  animation-delay:3.7s;
}

@keyframes memoryScanLine{
  to{ opacity:1; transform:translateY(0); }
}

@keyframes memoryFoundAppear{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

.hidden-memory{
  display:none !important;
}

.memory-universe-page{
  z-index:99998;
}

.memory-message{
  position:absolute;
  top:6%;
  left:0;
  width:100%;
  text-align:center;
  z-index:4;
  padding:0 16px;
}

.memory-message h1{
  margin:0 0 14px;
  font-size:clamp(1.8rem,6vw,3.5rem);
  text-shadow:0 0 22px rgba(255,0,160,.9);
}

.memory-message p{
  margin:8px 0;
  font-size:clamp(1.15rem,4vw,2rem);
  color:#ffe1f3;
  text-shadow:0 0 16px rgba(255,0,160,.85);
}

.memory-container{
  position:absolute;
  inset:0;
  z-index:2;
}

.floating-memory{
  position:absolute;
  width:clamp(130px,25vw,260px);
  border-radius:22px;
  object-fit:cover;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.18),
    0 0 28px rgba(255,80,180,.72),
    0 20px 55px rgba(0,0,0,.6);
  opacity:0;
  animation:
    memoryPhotoAppear 2s ease forwards,
    memoryPhotoFloat 8s ease-in-out infinite;
}

@keyframes memoryPhotoAppear{
  from{ opacity:0; transform:translateY(40px) scale(.88) rotate(-3deg); }
  to{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
}

@keyframes memoryPhotoFloat{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -18px; }
}

.memory-pos-1{ left:6%; top:27%; animation-delay:0s, 0s; }
.memory-pos-2{ right:7%; top:22%; animation-delay:0s, .3s; }
.memory-pos-3{ left:35%; top:34%; animation-delay:0s, .6s; }
.memory-pos-4{ left:9%; bottom:14%; animation-delay:0s, .9s; }
.memory-pos-5{ right:9%; bottom:12%; animation-delay:0s, 1.2s; }
.memory-pos-6{ left:42%; bottom:8%; animation-delay:0s, 1.5s; }
.memory-pos-7{ left:23%; top:58%; animation-delay:0s, 1.8s; }
.memory-pos-8{ right:24%; top:55%; animation-delay:0s, 2.1s; }

.memory-final{
  position:absolute;
  bottom:8%;
  left:0;
  width:100%;
  text-align:center;
  z-index:5;
  opacity:0;
  font-size:clamp(1.5rem,5.5vw,3rem);
  color:#ffd7ef;
  padding:0 16px;
  text-shadow:
    0 0 18px rgba(255,255,255,.85),
    0 0 35px rgba(255,0,160,1);
  animation:memoryFinalAppear 2s ease forwards;
  animation-delay:13s;
}

@keyframes memoryFinalAppear{
  to{ opacity:1; }
}

.restart-universe{
  position:absolute;
  left:50%;
  bottom:2.5%;
  transform:translateX(-50%);
  z-index:6;
  text-decoration:none;
  color:white;
  padding:14px 24px;
  border-radius:999px;
  border:1px solid rgba(255,220,245,.95);
  background:linear-gradient(135deg,rgba(255,0,140,.55),rgba(255,120,200,.25));
  font-size:clamp(.95rem,3.2vw,1.2rem);
  font-weight:900;
  box-shadow:
    0 0 26px rgba(255,0,160,.95),
    0 0 55px rgba(255,0,160,.45);
}

@media (max-width:700px){
  .floating-memory{
    width:clamp(105px,30vw,165px);
  }

  .memory-message{
    top:5%;
  }

  .memory-pos-3{ left:36%; top:42%; }
  .memory-pos-6{ left:38%; bottom:14%; }
}


/* =========================================================
   SUNSET UNIVERSE COLLAPSE RESTART - FULLY INTEGRATED
========================================================= */

.sunset-collapse{
  position:fixed;
  inset:0;
  z-index:999999999;
  background:#000;
  overflow:hidden;
  display:block;
}

.hidden-sunset{
  display:none !important;
}

.sunset-stars::before{
  content:"";
  position:absolute;
  inset:-200px;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,170,95,.75) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,90,145,.65) 1px, transparent 1.8px);
  background-size:55px 55px, 82px 82px, 120px 120px;
  opacity:.28;
  animation:collapseStars 5.6s ease forwards;
}

@keyframes collapseStars{
  0%{
    transform:scale(1);
    opacity:.28;
  }
  65%{
    transform:scale(1.8);
    opacity:.16;
  }
  100%{
    transform:scale(2.6);
    opacity:0;
  }
}

.restarting-fate{
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  color:white;
  font-size:clamp(1.5rem,5vw,3rem);
  letter-spacing:.08em;
  opacity:0;
  z-index:3;
  text-align:center;
  white-space:nowrap;
  text-shadow:
    0 0 20px rgba(255,210,150,.95),
    0 0 50px rgba(255,130,90,.75),
    0 0 85px rgba(255,70,130,.55);
  animation:fateAppear 2.2s ease forwards;
}

@keyframes fateAppear{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.92);
  }
  100%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
}

.sunset-core{
  position:absolute;
  left:50%;
  top:50%;
  width:28px;
  height:28px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  z-index:4;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,1) 0%,
      rgba(255,232,165,1) 16%,
      rgba(255,188,90,1) 35%,
      rgba(255,125,86,1) 56%,
      rgba(255,83,130,.98) 78%,
      rgba(255,47,110,.88) 100%);
  box-shadow:
    0 0 35px rgba(255,255,255,.98),
    0 0 85px rgba(255,210,120,.98),
    0 0 170px rgba(255,130,85,.82),
    0 0 280px rgba(255,70,130,.62);
  animation:sunsetExpand 2.55s cubic-bezier(.12,.84,.32,1) forwards;
  animation-delay:2.65s;
}

@keyframes sunsetExpand{
  0%{
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
  }
  12%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.2);
  }
  34%{
    transform:translate(-50%,-50%) scale(7);
  }
  68%{
    transform:translate(-50%,-50%) scale(45);
  }
  100%{
    transform:translate(-50%,-50%) scale(135);
    opacity:1;
  }
}

.restart-universe{
  cursor:pointer;
  border:1px solid rgba(255,220,245,.95);
}


/* =========================================================
   HD SUNSET RESTART UPGRADE + MEMORY DISSOLVE
========================================================= */

.memory-fade-curtain{
  position:fixed;
  inset:0;
  z-index:99999990;
  pointer-events:none;
  background:
    radial-gradient(circle at center, rgba(255,120,185,0.10), rgba(0,0,0,0.82) 62%, rgba(0,0,0,0.96) 100%);
  opacity:0;
  transition:opacity 2.8s ease;
}

.memory-fade-curtain.fade-in-curtain{
  opacity:1;
}

.sunset-collapse{
  background:
    radial-gradient(circle at center, rgba(70,18,10,.25), rgba(0,0,0,1) 68%),
    #000 !important;
}

.sunset-aura{
  position:absolute;
  left:50%;
  top:50%;
  width:34vmin;
  height:34vmin;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  z-index:3;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.75) 0%,
      rgba(255,228,165,.55) 18%,
      rgba(255,160,85,.38) 38%,
      rgba(255,86,130,.26) 62%,
      transparent 76%);
  filter:blur(18px);
  opacity:0;
  animation:sunsetAuraBloom 3.4s ease forwards;
  animation-delay:2.1s;
}

@keyframes sunsetAuraBloom{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.1);
  }
  45%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.2);
  }
  100%{
    opacity:1;
    transform:translate(-50%,-50%) scale(8);
  }
}

.sunset-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:70px;
  height:70px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  z-index:5;
  opacity:0;
  border:2px solid rgba(255,235,190,.9);
  box-shadow:
    0 0 24px rgba(255,255,255,.9),
    0 0 55px rgba(255,190,90,.85),
    0 0 90px rgba(255,90,140,.65);
}

.ring-one{
  animation:sunsetRingBurst 2.4s cubic-bezier(.12,.84,.32,1) forwards;
  animation-delay:2.5s;
}

.ring-two{
  border-color:rgba(255,118,150,.8);
  animation:sunsetRingBurst 2.7s cubic-bezier(.12,.84,.32,1) forwards;
  animation-delay:2.75s;
}

@keyframes sunsetRingBurst{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.1);
  }
  15%{
    opacity:1;
  }
  80%{
    opacity:.75;
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(28);
  }
}

.sunset-core{
  width:38px !important;
  height:38px !important;
  background:
    radial-gradient(circle at 42% 38%,
      rgba(255,255,255,1) 0%,
      rgba(255,250,225,1) 10%,
      rgba(255,230,150,1) 22%,
      rgba(255,184,85,1) 39%,
      rgba(255,120,82,1) 58%,
      rgba(255,76,135,.98) 76%,
      rgba(165,44,110,.9) 100%) !important;
  box-shadow:
    0 0 26px rgba(255,255,255,1),
    0 0 65px rgba(255,228,145,1),
    0 0 130px rgba(255,160,75,.95),
    0 0 230px rgba(255,88,125,.78),
    0 0 340px rgba(255,48,140,.50) !important;
  filter:saturate(1.25) contrast(1.08);
  animation:sunsetExpandHD 2.75s cubic-bezier(.10,.86,.25,1) forwards !important;
  animation-delay:2.85s !important;
}

@keyframes sunsetExpandHD{
  0%{
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
    filter:saturate(1.25) contrast(1.08) blur(0px);
  }
  12%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.15);
  }
  28%{
    transform:translate(-50%,-50%) scale(4.5);
    filter:saturate(1.35) contrast(1.12) blur(.2px);
  }
  58%{
    transform:translate(-50%,-50%) scale(34);
    filter:saturate(1.45) contrast(1.16) blur(.5px);
  }
  100%{
    transform:translate(-50%,-50%) scale(155);
    opacity:1;
    filter:saturate(1.5) contrast(1.2) blur(.8px);
  }
}

.sunset-stars::before{
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,205,115,.9) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,85,145,.75) 1px, transparent 1.8px) !important;
  animation:collapseStarsHD 5.8s ease forwards !important;
}

@keyframes collapseStarsHD{
  0%{
    transform:scale(1) rotate(0deg);
    opacity:.32;
    filter:blur(0);
  }
  55%{
    transform:scale(1.55) rotate(2deg);
    opacity:.20;
    filter:blur(1px);
  }
  100%{
    transform:scale(2.8) rotate(5deg);
    opacity:0;
    filter:blur(5px);
  }
}


/* =========================================================
   FINAL SUNSET HEARTBEAT RESTART
   detailed orb -> shrink -> heartbeat -> birthday fade-in
========================================================= */

.birthday-fade-overlay{
  position:fixed;
  inset:0;
  z-index:999999999;
  background:#000;
  opacity:1;
  pointer-events:none;
  transition:opacity 2.2s ease;
}

.birthday-fade-overlay.fade-away-birthday{
  opacity:0;
}

.hidden-fade{
  display:none !important;
}

/* Reset/override older portal pieces */
.sunset-aura,
.sunset-ring,
.sunset-core{
  display:none !important;
}

.sunset-collapse{
  position:fixed !important;
  inset:0 !important;
  z-index:999999999 !important;
  overflow:hidden !important;
  background:#000 !important;
}

.hidden-sunset{
  display:none !important;
}

.sunset-stars::before{
  content:"";
  position:absolute;
  inset:-200px;
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,190,95,.85) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,90,150,.75) 1px, transparent 1.8px);
  background-size:55px 55px, 84px 84px, 125px 125px;
  opacity:.28;
  animation:finalStarsCollapse 7.2s ease forwards;
}

@keyframes finalStarsCollapse{
  0%{
    transform:scale(1) rotate(0deg);
    opacity:.3;
    filter:blur(0px);
  }
  55%{
    transform:scale(1.45) rotate(2deg);
    opacity:.18;
    filter:blur(1px);
  }
  100%{
    transform:scale(2.4) rotate(5deg);
    opacity:0;
    filter:blur(5px);
  }
}

.restarting-fate{
  position:absolute !important;
  left:50% !important;
  top:38% !important;
  transform:translate(-50%,-50%) !important;
  color:white !important;
  font-size:clamp(1.45rem,5vw,3rem) !important;
  letter-spacing:.08em !important;
  opacity:0 !important;
  z-index:10 !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-shadow:
    0 0 18px rgba(255,255,255,.85),
    0 0 45px rgba(255,170,95,.9),
    0 0 90px rgba(255,80,140,.65) !important;
  animation:finalFateText 5.8s ease forwards !important;
}

@keyframes finalFateText{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.94); }
  22%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  70%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(.98); }
}

.sunset-portal{
  position:absolute;
  inset:0;
  z-index:9;
  display:grid;
  place-items:center;
}

.sunset-orb{
  position:relative;
  width:clamp(96px, 20vmin, 210px);
  height:clamp(96px, 20vmin, 210px);
  border-radius:50%;
  transform:scale(0);
  opacity:0;
  animation:finalSunsetOrbJourney 7.2s cubic-bezier(.14,.82,.24,1) forwards;
}

/* crisp detailed center */
.sunset-orb-core{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%,
      rgba(255,255,255,1) 0%,
      rgba(255,252,228,1) 8%,
      rgba(255,231,145,1) 19%,
      rgba(255,184,78,1) 35%,
      rgba(255,122,73,1) 54%,
      rgba(255,73,130,1) 74%,
      rgba(145,38,110,1) 100%);
  box-shadow:
    inset -18px -18px 32px rgba(80,15,70,.34),
    inset 14px 12px 28px rgba(255,255,255,.28),
    0 0 24px rgba(255,255,255,.95),
    0 0 70px rgba(255,218,130,.95),
    0 0 130px rgba(255,138,80,.72),
    0 0 210px rgba(255,74,135,.48);
  overflow:hidden;
}

/* animated texture/highlight */
.sunset-orb-core::before{
  content:"";
  position:absolute;
  inset:-30%;
  border-radius:50%;
  background:
    conic-gradient(from 20deg,
      rgba(255,255,255,.22),
      rgba(255,210,112,.18),
      rgba(255,95,135,.18),
      rgba(255,180,75,.16),
      rgba(255,255,255,.22));
  animation:orbSurfaceMove 4s linear infinite;
  mix-blend-mode:screen;
  opacity:.55;
}

.sunset-orb-core::after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.28);
  box-shadow:
    0 0 18px rgba(255,255,255,.45),
    inset 0 0 18px rgba(255,255,255,.16);
}

@keyframes orbSurfaceMove{
  from{ transform:rotate(0deg) scale(1.05); }
  to{ transform:rotate(360deg) scale(1.05); }
}

/* crisp ring */
.sunset-orb-ring{
  position:absolute;
  inset:-7%;
  border-radius:50%;
  border:3px solid rgba(255,232,180,.78);
  box-shadow:
    0 0 24px rgba(255,255,255,.8),
    0 0 54px rgba(255,190,80,.84),
    0 0 92px rgba(255,80,140,.55),
    inset 0 0 22px rgba(255,255,255,.28);
  animation:ringRotate 5.4s linear infinite;
}

.sunset-orb-ring::before{
  content:"";
  position:absolute;
  inset:-12%;
  border-radius:50%;
  border:1px dashed rgba(255,135,120,.65);
  animation:ringRotateReverse 7s linear infinite;
}

@keyframes ringRotate{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes ringRotateReverse{
  from{ transform:rotate(360deg); }
  to{ transform:rotate(0deg); }
}

/* soft outside glow only, not blurring the crisp orb */
.sunset-orb-aura{
  position:absolute;
  inset:-70%;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.18) 0%,
      rgba(255,220,135,.22) 22%,
      rgba(255,132,82,.18) 42%,
      rgba(255,72,135,.15) 58%,
      transparent 76%);
  filter:blur(22px);
  z-index:-1;
  animation:auraBreath 2.2s ease-in-out infinite;
}

@keyframes auraBreath{
  0%,100%{ opacity:.75; transform:scale(.96); }
  50%{ opacity:1; transform:scale(1.08); }
}

/* Orb opens, shrinks to heartbeat dot, then disappears into fade-in */
@keyframes finalSunsetOrbJourney{
  0%{
    opacity:0;
    transform:scale(0);
  }
  12%{
    opacity:1;
    transform:scale(.85);
  }
  30%{
    opacity:1;
    transform:scale(1.45);
  }
  46%{
    opacity:1;
    transform:scale(.18);
  }
  56%{
    opacity:1;
    transform:scale(.26);
  }
  64%{
    opacity:1;
    transform:scale(.16);
  }
  72%{
    opacity:1;
    transform:scale(.25);
  }
  82%{
    opacity:1;
    transform:scale(.13);
  }
  100%{
    opacity:0;
    transform:scale(.05);
  }
}


/* =========================================================
   SAFE CAR SEQUENCE OVERLAY
   Uses isolated iframe so car CSS cannot break the main site.
========================================================= */

.car-sequence-overlay{
  position:fixed;
  inset:0;
  z-index:99999999;
  background:#000;
  overflow:hidden;
  opacity:1;
  transition:opacity 1.4s ease;
}

.car-sequence-overlay.hidden-car-sequence{
  display:none !important;
}

.car-sequence-overlay.fade-out-car-sequence{
  opacity:0;
}

#carSequenceFrame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#000;
}


/* =========================================================
   CUTE VIDEO PAGE ENVELOPES
========================================================= */

.card{
  position:relative !important;
}

.video-envelope{
  position:absolute;
  top:42%;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transform:translateY(-50%);
}

.left-envelope{
  left:clamp(2px, 3vw, 28px);
}

.right-envelope{
  right:clamp(2px, 3vw, 28px);
}

.envelope-btn{
  width:clamp(64px, 11vw, 105px);
  height:clamp(64px, 11vw, 105px);
  border-radius:24px;
  border:1px solid rgba(255,220,245,.88);
  background:
    radial-gradient(circle at center, rgba(255,255,255,.18), rgba(255,0,140,.22)),
    rgba(0,0,0,.22);
  color:white;
  font-size:clamp(2.3rem, 6vw, 4rem);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:
    0 0 22px rgba(255,0,160,.85),
    0 0 55px rgba(255,0,160,.32),
    inset 0 0 16px rgba(255,255,255,.12);
  animation:envelopeFloat 2.2s ease-in-out infinite;
}

.right-envelope .envelope-btn{
  animation-delay:.7s;
}

@keyframes envelopeFloat{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%{ transform:translateY(-10px) rotate(3deg); }
}

.envelope-btn:hover{
  filter:brightness(1.18);
  transform:scale(1.04);
}

.envelope-opened{
  display:none;
}

.video-envelope.opened .envelope-closed{
  display:none;
}

.video-envelope.opened .envelope-opened{
  display:inline;
}

.video-envelope.opened .envelope-btn{
  animation:none;
  opacity:.82;
  box-shadow:
    0 0 16px rgba(255,255,255,.45),
    0 0 28px rgba(255,0,160,.35);
}

.envelope-label{
  margin:0;
  font-size:clamp(.72rem, 2.4vw, 1rem);
  color:#ffe2f2;
  text-align:center;
  text-shadow:0 0 12px rgba(255,0,160,.95);
  font-weight:700;
}

.joke-modal{
  position:fixed;
  inset:0;
  z-index:999999999;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
  padding:20px;
}

.hidden-joke{
  display:none !important;
}

.joke-letter{
  position:relative;
  width:min(560px, 94vw);
  animation:letterPop .65s cubic-bezier(.16,.84,.36,1);
}

@keyframes letterPop{
  from{
    opacity:0;
    transform:translateY(35px) scale(.86) rotate(-2deg);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1) rotate(0);
  }
}

.letter-paper{
  border-radius:28px;
  padding:34px 26px;
  text-align:center;
  color:#4c1230;
  background:
    radial-gradient(circle at top, rgba(255,230,245,1), rgba(255,250,253,1) 45%, rgba(255,220,240,1));
  box-shadow:
    0 0 0 2px rgba(255,255,255,.55),
    0 25px 75px rgba(0,0,0,.55),
    0 0 65px rgba(255,0,160,.38);
  border:1px solid rgba(255,160,215,.75);
}

.letter-paper::before{
  content:"💗";
  display:block;
  font-size:2.5rem;
  margin-bottom:8px;
  filter:drop-shadow(0 0 8px rgba(255,0,160,.5));
}

.letter-paper h2{
  margin:0 0 14px;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:clamp(2.1rem, 8vw, 4rem);
  font-weight:400;
  color:#ba1971;
}

.letter-paper p{
  margin:0 auto;
  max-width:440px;
  font-size:clamp(1.05rem, 3.6vw, 1.45rem);
  line-height:1.5;
  color:#43122e;
}

.close-joke{
  position:absolute;
  top:-14px;
  right:-12px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(255,0,140,.8);
  color:white;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 0 24px rgba(255,0,160,.8);
  z-index:3;
}

@media (max-width:760px){
  .video-envelope{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    transform:none;
    display:inline-flex;
    margin:8px 12px 16px;
  }

  .left-envelope,
  .right-envelope{
    left:auto;
    right:auto;
  }

  .video-wrap{
    clear:both;
  }
}

/* Rain universe button on ending page */
.rain-btn{
  display:inline-block;
  margin-top:18px;
  padding:15px 26px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(210,235,255,.95);
  background:linear-gradient(135deg,rgba(70,145,255,.48),rgba(255,120,200,.22));
  color:white;
  font-size:clamp(1rem,3.6vw,1.28rem);
  font-weight:900;
  box-shadow:
    0 0 24px rgba(90,170,255,.75),
    0 0 46px rgba(255,0,160,.30),
    inset 0 0 14px rgba(255,255,255,.12);
  animation:rainButtonPulse 2.2s ease-in-out infinite;
}

@keyframes rainButtonPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.045)}
}


/* Flower garden button on ending page */
.garden-btn{
  display:block;
  width:fit-content;
  margin:14px auto 0;
  padding:15px 26px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(255,225,245,.95);
  background:linear-gradient(135deg,rgba(255,0,150,.50),rgba(120,255,190,.20));
  color:white;
  font-size:clamp(1rem,3.6vw,1.28rem);
  font-weight:900;
  box-shadow:
    0 0 24px rgba(255,80,180,.70),
    0 0 44px rgba(120,255,190,.22),
    inset 0 0 14px rgba(255,255,255,.12);
  animation:gardenButtonPulse 2.2s ease-in-out infinite;
}

@keyframes gardenButtonPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.045)}
}