/*
Theme Name: Didi Bhai Dooj
Theme URI: https://example.com
Author: Divyanshu
Description: A cute mobile-first Bhai Dooj interactive greeting site for your didi. Create 7 pages with slugs: balloon, thaal, tilak, things, photos, shayari, finale - and assign the matching page template to each.
Version: 1.0
*/
:root{
  --cream:#f6ead8; --mag:#b81f6e; --magd:#8f1556;
  --orange:#f28c28; --gold:#f5b942; --teal:#2a9d8f; --night:#1d3557;
  --ink:#1a0f08;            /* main text colour: near black brown */
  --ink-mag:#7a0f47;        /* deep magenta text for highlights */
  /* white outline around text so it stays visible on any background */
  --stroke:
    0 0 2px #fff,
    1px 1px 0 #fff, -1px -1px 0 #fff,
    1px -1px 0 #fff, -1px 1px 0 #fff,
    0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff,
    2px 3px 4px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Baloo 2',cursive; background:linear-gradient(180deg,#f6ead8,#efdfc6);
  display:flex; justify-content:center; align-items:flex-start; overflow-x:hidden;
  background-size:cover; background-position:center; background-attachment:fixed;
}
#phone{position:relative; width:100%; max-width:420px; min-height:100vh; min-height:100dvh; overflow:hidden; margin:0 auto}
.bgimg{position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.bgshade{position:fixed; inset:0; z-index:-1; background:rgba(246,234,216,.18)}
.screen{position:relative; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; padding:70px 22px 110px; text-align:center; animation:fadein .7s ease}
@keyframes fadein{from{opacity:0; transform:translateY(20px)}}

/* headings and subtitles: dark text with white outline */
h1,h2{font-family:'Amatic SC',cursive; font-weight:700; letter-spacing:2px; color:var(--ink); text-shadow:var(--stroke); text-align:center; width:100%}
h1{font-size:44px; line-height:1.05} h2{font-size:40px}
.sub{font-family:'Patrick Hand',cursive; font-weight:700; font-size:18px; color:var(--ink); margin-top:8px; text-shadow:var(--stroke); text-align:center; width:100%}

.btn{margin-top:26px; background:var(--mag); color:#fff; text-decoration:none; display:inline-block;
  font-family:'Baloo 2',cursive; font-weight:700; font-size:16px; padding:13px 26px; border-radius:10px;
  border:2px dashed rgba(255,255,255,.55); box-shadow:0 4px 0 var(--magd), 0 8px 18px rgba(184,31,110,.35); cursor:pointer}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--magd)}
.btn.ghost{background:#fff; color:var(--mag); border:2px dashed var(--mag); box-shadow:0 4px 0 rgba(184,31,110,.25)}
.chip{display:inline-block; margin-top:18px; background:#fff; border-radius:999px; padding:8px 18px; font-weight:700; font-size:14px; color:var(--ink); box-shadow:0 3px 10px rgba(0,0,0,.08); text-align:center}
.corner{position:absolute; font-size:28px; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(0,0,0,.15)); z-index:1}
.lantern{position:absolute; top:-6px; font-size:26px; animation:sway 3.4s ease-in-out infinite; pointer-events:none; z-index:1}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* music toggle */
#musicBtn{position:fixed; right:14px; bottom:18px; z-index:99; width:44px; height:44px; border-radius:50%;
  border:none; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.2); font-size:18px; cursor:pointer}

/* balloons */
.balloon-wrap{margin-top:30px; position:relative; height:320px; width:100%; max-width:330px; margin-left:auto; margin-right:auto}
.hotspot{position:absolute; cursor:pointer; transition:transform .2s; display:flex; align-items:center; justify-content:center}
.hotspot:active{transform:scale(.9)}
.hotspot img{width:100%; height:auto; pointer-events:none}
.hs1{left:8%; top:70px; width:70px} .hs2{left:36%; top:10px; width:88px} .hs3{left:68%; top:80px; width:64px}
.pop{animation:pop .35s ease forwards}
@keyframes pop{40%{transform:scale(1.35); opacity:1}100%{transform:scale(0); opacity:0}}
.tag{position:absolute; left:50%; top:225px; transform:translateX(-50%) rotate(-8deg); background:#fdf3e0;
  padding:12px 16px; font-family:'Patrick Hand',cursive; font-weight:700; font-size:20px; color:var(--ink);
  box-shadow:0 4px 10px rgba(0,0,0,.12)}
.tag:before{content:""; position:absolute; top:-22px; left:50%; width:2px; height:22px; background:#a0522d}
#card{margin-top:10px; width:min(78vw,300px); display:none; cursor:pointer; animation:cardin .6s cubic-bezier(.2,1.4,.4,1); align-self:center; margin-left:auto; margin-right:auto}
#card img{width:100%; border:10px solid var(--mag); border-radius:8px; box-shadow:0 14px 30px rgba(0,0,0,.25); display:block}
@keyframes cardin{from{transform:scale(.4) rotate(-8deg); opacity:0}}

/* thaal */
.scene{width:min(84vw,330px); margin-top:18px; margin-left:auto; margin-right:auto; border-radius:18px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.25); position:relative}
.scene img{width:100%; display:block}
.scene .emojiscene{font-size:64px; padding:50px 20px; background:linear-gradient(180deg,#1d3557,#2a9d8f)}

/* tilak */
.frame{position:relative; width:min(72vw,280px); margin-top:26px; margin-left:auto; margin-right:auto; border-radius:18px; border:10px solid transparent;
  background:linear-gradient(#1d3557,#152a45) padding-box, repeating-linear-gradient(45deg,var(--gold) 0 12px,var(--mag) 12px 24px) border-box;
  box-shadow:0 12px 28px rgba(0,0,0,.25)}
.frame img{width:100%; display:block; border-radius:8px; cursor:pointer}
.frame .garland{position:absolute; top:-28px; left:-14px; right:-14px; font-size:26px; letter-spacing:-4px; z-index:2}
#tilakMark{position:absolute; left:50%; top:30%; transform:translateX(-50%); width:16px; height:34px;
  background:radial-gradient(ellipse at 50% 20%, #ff4d6d, #c9184a); border-radius:50% 50% 45% 45%;
  opacity:0; transition:opacity .5s; box-shadow:0 0 10px rgba(255,77,109,.8); pointer-events:none}
.grain{position:absolute; width:5px; height:5px; background:#fff; border-radius:50%; opacity:0; pointer-events:none; z-index:3}
@keyframes fall{0%{opacity:1; transform:translateY(0)}100%{opacity:0; transform:translateY(120px)}}
.bubble{margin-top:16px; margin-left:auto; margin-right:auto; background:#fff; border-radius:14px; padding:12px 18px; font-weight:700; font-size:15px;
  color:var(--ink); box-shadow:0 5px 14px rgba(0,0,0,.12); position:relative; display:none; max-width:300px; text-align:center}
.bubble:before{content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%); border:10px solid transparent; border-bottom-color:#fff; border-top:0}
/* "Officially blessed!" - magenta with dark outline and white glow */
.blessed{font-family:'Amatic SC',cursive; font-weight:700; font-size:34px; color:var(--ink-mag); letter-spacing:2px; margin-top:14px; display:none;
  text-shadow:var(--stroke); text-align:center; width:100%}
.diya{font-size:52px; margin-top:10px; display:inline-block}
.diya .flame{display:none}
.diya.lit .flame{display:inline-block; animation:flick .35s ease-in-out infinite alternate}
@keyframes flick{from{transform:scale(1)}to{transform:scale(1.2,1.3)}}

/* flip tags */
.tags{margin-top:24px; display:flex; flex-direction:column; gap:14px; width:100%; max-width:320px; margin-left:auto; margin-right:auto}
.tagcard{perspective:700px; height:86px; cursor:pointer}
.tagcard .in{position:relative; width:100%; height:100%; transition:transform .6s; transform-style:preserve-3d}
.tagcard.flipped .in{transform:rotateX(180deg)}
.tagcard .front,.tagcard .back{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px;
  border-radius:12px; backface-visibility:hidden; font-weight:700; font-size:15px; padding:0 18px;
  clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%)}
.tagcard .front{color:#fff; font-family:'Amatic SC',cursive; font-weight:700; font-size:26px; letter-spacing:2px; text-shadow:0 2px 3px rgba(0,0,0,.45)}
.tagcard .back{background:#fff; color:var(--ink); transform:rotateX(180deg); box-shadow:0 4px 12px rgba(0,0,0,.1); font-family:'Patrick Hand',cursive}
.t1 .front{background:var(--mag)} .t2 .front{background:var(--teal)} .t3 .front{background:var(--orange)} .t4 .front{background:var(--gold)}
/* "Tap the photo!" / "Tap all the balloons" type hints */
.deny{font-family:'Amatic SC',cursive; font-weight:700; font-size:26px; color:var(--ink-mag); letter-spacing:2px; margin-top:20px;
  text-shadow:var(--stroke); text-align:center; width:100%}

/* photos */
.photos{margin-top:22px; display:flex; gap:14px; width:100%; max-width:340px; justify-content:center; margin-left:auto; margin-right:auto}
.polaroid{background:#fff; padding:8px 8px 26px; width:31%; box-shadow:0 8px 18px rgba(0,0,0,.15); transform:rotate(-3deg); position:relative}
.polaroid:nth-child(2){transform:rotate(2deg)} .polaroid:nth-child(3){transform:rotate(-1deg)}
.polaroid .ph{width:100%; aspect-ratio:3/4; background:repeating-linear-gradient(45deg,#f3e3cc 0 8px,#eddcc0 8px 16px);
  display:flex; align-items:center; justify-content:center; font-size:30px; overflow:hidden}
.polaroid .ph img{width:100%; height:100%; object-fit:cover; display:block}
.polaroid .cap{position:absolute; bottom:4px; left:0; right:0; font-family:'Patrick Hand',cursive; font-weight:700; font-size:13px; color:var(--ink); text-align:center}
.tape{position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-4deg); width:44px; height:16px; background:rgba(245,185,66,.75); z-index:2}
/* short notes on a light card: dark text, still outlined for contrast */
.note{margin-top:20px; margin-left:auto; margin-right:auto; font-family:'Patrick Hand',cursive; font-weight:700; font-size:17px; color:var(--ink); max-width:300px;
  background:rgba(255,255,255,.88); padding:8px 14px; border-radius:12px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.15)}

/* shayari */
.shayari-box{margin-top:22px; margin-left:auto; margin-right:auto; background:rgba(255,255,255,.95); border-radius:20px; padding:30px 22px; max-width:330px; width:100%;
  box-shadow:0 10px 26px rgba(0,0,0,.15); position:relative; text-align:center}
.shayari-box .play{font-size:54px}
audio#shayari{display:block; margin:18px auto 0; width:min(80vw,300px)}
.wa{margin-top:16px; margin-left:auto; margin-right:auto; font-family:'Patrick Hand',cursive; font-size:17px; color:var(--ink-mag); max-width:320px;
  background:rgba(255,255,255,.92); padding:10px 16px; border-radius:14px; font-weight:700; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.15)}

/* finale */
.msgcard{margin-top:16px; margin-left:auto; margin-right:auto; background:rgba(255,255,255,.96); border-radius:14px; padding:18px 20px; max-width:320px; box-shadow:0 8px 22px rgba(0,0,0,.15); text-align:center}
.msgcard p{font-weight:700; font-size:15px; color:var(--ink); line-height:1.55; text-align:center}
.sign{margin-top:16px; font-family:'Patrick Hand',cursive; font-weight:700; font-size:17px; color:var(--ink); text-shadow:var(--stroke); text-align:center; width:100%}
.sign b{display:block; font-family:'Amatic SC',cursive; font-weight:700; font-size:36px; color:var(--ink-mag); letter-spacing:2px; text-shadow:var(--stroke); text-align:center}