*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#7c4807;color:#ffe8a9;font-family:"Times New Roman",Times,serif}
body{position:fixed;inset:0}
button,input{font:inherit}

.gold-bg{position:fixed;inset:0;z-index:-5;background:
linear-gradient(180deg,rgba(101,52,2,.30),rgba(71,28,0,.25) 48%,rgba(18,5,1,.78)),
url("assets/sthuthi.jpg") center 19%/cover no-repeat;
filter:saturate(.82) sepia(.16) brightness(.78)}
.gold-bg:before{content:"";position:absolute;inset:0;background:
repeating-linear-gradient(90deg,rgba(255,230,141,.055) 0 1px,transparent 1px 48px),
repeating-linear-gradient(0deg,rgba(72,34,1,.08) 0 1px,transparent 1px 42px);
mix-blend-mode:multiply}
.vignette{position:fixed;inset:0;z-index:-3;box-shadow:inset 0 0 120px rgba(38,16,0,.75),inset 0 -100px 120px rgba(37,15,0,.55);pointer-events:none}
.hieroglyphs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;opacity:.38}
.hieroglyphs:before,.hieroglyphs:after{position:absolute;inset:-20px;display:block;text-align:center;color:#432304;font-size:22px;line-height:2.55;letter-spacing:20px}
.hieroglyphs:before{content:"𓂀 𓋹 𓆣 𓇳 𓊹 𓆙 𓏏 𓉐 𓅓 𓊽 𓁿 𓂀 𓋹 𓆣 𓇳 𓊹 𓆙 𓏏 𓉐 𓅓 𓊽 𓁿 𓂀 𓋹 𓆣"}
.hieroglyphs:after{content:"𓆣 𓂀 𓊹 𓋹 𓇳 𓆙 𓏏 𓂀 𓅓 𓊽 𓉐 𓋹 𓆣 𓇳 𓂀 𓊹 𓆙 𓏏 𓉐 𓅓 𓋹 𓂀 𓆣";transform:translateY(22px);opacity:.5}

.poster{height:100dvh;min-height:620px;width:100%;max-width:680px;margin:auto;padding:max(14px,env(safe-area-inset-top)) 17px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden;text-align:center}

header{display:flex;align-items:center;justify-content:center;gap:15px;flex:0 0 auto}
.eye,.ankh{font-size:30px;color:#ffe08a;text-shadow:0 2px 3px #5d3000,0 0 13px #ffcf54}
.heading h1{margin:0;font-size:clamp(40px,10vw,64px);line-height:.95;letter-spacing:.13em;margin-left:.13em;color:#fff0b4;text-shadow:0 2px 1px #704006,0 4px 8px rgba(70,28,0,.45)}
.meetup{font-size:9px;letter-spacing:.42em;margin:6px 0 0 .42em;color:#ffe3a0;text-shadow:0 1px 2px #6b3503}
.winged{font-size:33px;color:#ffd66e;line-height:.8;margin:2px 0;text-shadow:0 2px 4px #754000}

.heart-zone{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.heart-aura{position:absolute;width:min(84vw,500px);height:min(84vw,500px);border-radius:50%;background:radial-gradient(circle,rgba(255,218,104,.28),transparent 68%);filter:blur(20px);animation:aura 1s ease-in-out infinite}
@keyframes aura{0%,100%{transform:scale(.95);opacity:.72}45%{transform:scale(1.07);opacity:1}}
#heart{width:min(93vw,585px);height:min(93vw,585px);max-height:64vh;z-index:2;display:block;filter:drop-shadow(0 14px 20px rgba(69,19,0,.55)) drop-shadow(0 0 25px rgba(255,94,32,.25))}
.countdown{position:absolute;z-index:4;top:51%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;color:#ffeab5;text-shadow:0 1px 2px #3a0800,0 0 12px #ff6b39}
.countdown>div{font-size:clamp(37px,10.5vw,67px);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.countdown b{font-weight:normal;color:#ffd078;margin:0 3px}
.countdown small{display:flex;justify-content:center;gap:clamp(24px,6vw,48px);font-size:6px;letter-spacing:.25em;color:#f4d58f;margin-top:8px}

.arrival{
  width:min(430px,96%);
  height:58px;
  flex:0 0 auto;
  margin:1px auto 8px;
  border:1px solid #ffcf5c;
  border-radius:8px;
  background:linear-gradient(180deg,#8f260d,#551006 58%,#330702);
  color:#ffe4a0;
  letter-spacing:.13em;
  font-size:clamp(15px,4.5vw,22px);
  font-weight:900;
  text-shadow:0 1px 2px #4a1004,0 0 8px rgba(255,213,120,.35);
  box-shadow:0 4px 14px rgba(52,16,0,.48),inset 0 1px rgba(255,238,176,.4);
  cursor:pointer;
}

.meeting{
  width:100%;
  min-height:82px;
  flex:0 0 auto;
  margin:0 auto 5px;
  padding:5px 1px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e0aa43;
  background:linear-gradient(180deg,rgba(117,67,7,.82),rgba(54,25,1,.74));
  box-shadow:inset 0 0 22px rgba(255,224,132,.10),0 5px 15px rgba(45,16,0,.35);
  overflow:hidden;
}
.calendar-icon{font-size:38px;color:#ffd45e;text-shadow:0 2px 3px #5b3000}
.meeting-info{text-align:left}.meeting-title{font-size:14px;letter-spacing:.13em;color:#ffe2a1}.date{font-size:19px;color:#fff0bd;margin-top:2px;letter-spacing:.06em}.time{font-size:17px;color:#ffe1a0;margin-top:2px}.time small{font-size:8px;color:#d6ae68}

.modal,.success{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(35,13,0,.76);backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:.25s}
.modal.show,.success.show{opacity:1;pointer-events:auto}
.modal-card,.success-card{width:min(360px,100%);padding:28px 22px;text-align:center;border:1px solid #e1ad4d;border-radius:12px;background:linear-gradient(145deg,#70400a,#2d1101);box-shadow:0 25px 70px #2a0b00,inset 0 0 30px rgba(255,211,108,.08)}
.modal-glyph{font-size:39px;color:#ffda73}.modal-label{font-size:7px;letter-spacing:.38em;color:#d9b16b}.modal-card h2,.success-card h2{font-size:25px;font-weight:normal;color:#ffe4a5;margin:9px 0 15px}.modal-card input{width:100%;height:47px;border:1px solid #bc8333;border-radius:8px;background:#210a01;color:#ffe0a0;text-align:center;letter-spacing:.38em;outline:none}.error{height:17px;color:#e9a080;font-size:9px;margin-top:4px}.actions{display:flex;gap:8px;margin-top:7px}.actions button,.success-card button{flex:1;height:42px;border:1px solid #b47b2b;border-radius:7px;background:#3a1704;color:#edcb8b;cursor:pointer}.actions button:last-child,.success-card button{background:#75200e;color:#ffe7ad}.success-card h2{font-size:29px}.success-card p{font-size:12px;color:#e4c992}.success-card button{margin-top:9px}

@media(max-height:700px){.heading h1{font-size:40px}.meetup{font-size:8px}.winged{font-size:27px}.heart-zone #heart{max-height:56vh}.arrival{height:54px}.meeting{min-height:66px}.date{font-size:17px}}
@media(max-width:380px){.eye,.ankh{font-size:23px}.heading h1{font-size:37px}.countdown>div{font-size:34px}.countdown small{gap:18px}.meeting{padding:6px 10px}.calendar-icon{font-size:31px}.date{font-size:15px}.time{font-size:15px}}

.heart-zone:before{
 content:"";
 position:absolute;
 width:min(96vw,610px);
 height:min(96vw,610px);
 border-radius:50%;
 background:radial-gradient(circle,rgba(255,215,105,.16),rgba(104,48,3,.08) 48%,transparent 72%);
 pointer-events:none;
 z-index:0;
}
.heart-zone:after{
 content:"𓂀 𓋹 𓆣 𓇳 𓊹 𓆙 𓂀";
 position:absolute;
 inset:3% 0 2%;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 2%;
 color:rgba(255,220,119,.30);
 font-size:24px;
 text-shadow:0 1px 4px #4b2602;
 pointer-events:none;
 z-index:1;
}
#heart{position:relative;z-index:3}
.countdown{z-index:5}

/* More visible Egyptian atmosphere */
.hieroglyphs{opacity:.68}
.hieroglyphs:before,.hieroglyphs:after{
  color:#5a2c00;
  font-size:25px;
  line-height:2.38;
  letter-spacing:18px;
  text-shadow:0 1px 1px rgba(255,223,125,.24);
}
.hieroglyphs:after{opacity:.72}
.flower-layer{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.flower{position:absolute;top:-10%;font-size:clamp(15px,4vw,28px);opacity:.82;
  filter:drop-shadow(0 2px 3px rgba(70,25,0,.55));
  animation:flowerFall linear forwards;
}
.flower.small{font-size:12px;opacity:.68}
.flower.gold{color:#ffd66c}
.flower.red{color:#d75b42}
.flower.cream{color:#ffe8b0}
@keyframes flowerFall{
  0%{transform:translate3d(0,-8vh,0) rotate(0deg);opacity:0}
  8%{opacity:.86}
  45%{transform:translate3d(calc(var(--drift)*.45),48vh,0) rotate(160deg)}
  100%{transform:translate3d(var(--drift),112vh,0) rotate(360deg);opacity:0}
}


  49%{transform:translateX(calc(min(430px,96vw) + 46px)) scaleX(1)}
  50%{transform:translateX(calc(min(430px,96vw) + 46px)) scaleX(-1)}
  99%{transform:translateX(0) scaleX(-1)}
  100%{transform:translateX(0) scaleX(1)}
}
@media(max-height:700px){
  .heart-zone #heart{max-height:70vh}
  .dog-track{height:30px;flex-basis:30px}
  .runner-dog{font-size:24px}
}

/* High-drama golden fire around the heart, inspired by the supplied reference. */
.heart-aura{
  width:min(92vw,650px);height:min(92vw,650px);
  background:radial-gradient(circle,rgba(255,55,20,.30) 0,rgba(255,148,35,.22) 28%,rgba(255,194,60,.08) 51%,transparent 72%);
  filter:blur(18px);
  animation:fireAura .72s ease-in-out infinite alternate;
}
@keyframes fireAura{
  from{transform:scale(.93);opacity:.72}
  to{transform:scale(1.09);opacity:1}
}
.heart-zone:after{
  content:"";
  position:absolute;inset:3% 0;
  background:radial-gradient(ellipse at 50% 95%,rgba(255,99,17,.20),transparent 40%);
  pointer-events:none;z-index:1;
}
#heart{width:min(126vw,790px);height:min(126vw,790px);max-height:78vh;z-index:3}
.countdown>div{font-size:clamp(43px,11vw,76px);font-weight:bold;letter-spacing:.02em}
.countdown small{font-size:7px;font-weight:bold;letter-spacing:.27em}
.arrival{
  height:64px;
  font-size:clamp(17px,5vw,25px);
  font-weight:900;
  letter-spacing:.13em;
  border:2px solid #ffd56d;
  box-shadow:0 0 9px rgba(255,182,50,.45),0 0 24px rgba(255,83,20,.22),inset 0 1px rgba(255,246,198,.65);
}
.meeting{min-height:82px;border:2px solid #eab447}
.meeting-full{
  font-size:clamp(30px,9.4vw,56px);
  font-weight:900;
  letter-spacing:-.015em;
  text-shadow:0 0 4px #fff,0 0 10px #ffe17c,0 0 22px #ffae1e,0 0 35px rgba(255,72,15,.62);
  animation:goldGlitter .92s ease-in-out infinite;
}
.fire-layer{position:fixed;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.flame{
 position:absolute;bottom:-6%;width:3px;height:3px;border-radius:50%;
 background:#ffd56a;box-shadow:0 0 5px #fff0a2,0 0 11px #ff8c22,0 0 19px #ff3c12;
 animation:riseFire linear forwards;
 opacity:.9;
}
@keyframes riseFire{
  0%{transform:translate3d(0,0,0) scale(.55);opacity:0}
  12%{opacity:.9}
  55%{transform:translate3d(var(--dx),-52vh,0) scale(1)}
  100%{transform:translate3d(calc(var(--dx)*1.35),-112vh,0) scale(.2);opacity:0}
}