/* Nursery theme. Layout: soft night gate → pastel fajr sky with clouds and floating blue balloons
   → rounded pastel cards in one calm column. Arabic, right-to-left. A deliberately light, single theme. */
@font-face{
  font-family:"Amiri Quran Local";
  src:url("/fonts/AmiriQuran.woff2") format("woff2");
  font-display:swap;
}
:root{
  --bg:#f4f9ff;          /* very light baby blue page */
  --surface:#ffffff;
  --ink:#23406f;         /* soft navy text */
  --muted:#6d82a6;
  --line:#d8e8f7;
  --blue:#5aa3e0;        /* main baby blue */
  --blue-deep:#2f6fb5;
  --blue-soft:#e3f1fd;
  --peach:#ffc9a3;       /* fajr sun */
  --peach-soft:#fff1e6;
  --gold:#d9a441;
  --night:#1c2b5a;
  --f-quran:"Amiri Quran Local","Amiri Quran","Amiri",serif;
  --f-round:"Baloo Bhaijaan 2","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-letter:"Newsreader",Georgia,"Times New Roman",serif;
  --radius:24px;
  --shadow:0 6px 24px rgba(90,163,224,.14);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.75;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  background-image:radial-gradient(circle at 20% 30%,rgba(90,163,224,.10) 0 2px,transparent 3px),radial-gradient(circle at 70% 60%,rgba(255,201,163,.18) 0 2px,transparent 3px);
  background-size:120px 120px,160px 160px}
body.locked{overflow:hidden}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:760px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}

/* ---------- Gate: a soft, sleepy night ---------- */
.gate{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at 50% 35%,#2d4180 0%,var(--night) 70%);display:grid;place-items:center;align-content:center;gap:16px;color:#fff;transition:opacity 1.6s ease,visibility 1.6s;padding:env(safe-area-inset-top,0px) 16px env(safe-area-inset-bottom,0px)}
.gate.open{opacity:0;visibility:hidden}
#stars{position:absolute;inset:0;width:100%;height:100%}
.moon{position:relative;width:84px;height:84px;filter:drop-shadow(0 0 22px rgba(255,236,190,.55))}
@media (prefers-reduced-motion:no-preference){.moon{animation:rock 5s ease-in-out infinite}@keyframes rock{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}}
.enter{position:relative;border:0;background:transparent;color:#fff;cursor:pointer;display:grid;gap:4px;justify-items:center;padding:20px 26px;font:inherit;border-radius:28px}
.enter:focus-visible{outline:2px solid var(--peach);outline-offset:6px}
.basmala{font-family:var(--f-quran);font-size:clamp(34px,9vw,52px);line-height:1.8;color:#fff;text-shadow:0 2px 24px rgba(255,214,170,.35)}
.enter-pill{margin-top:12px;padding:8px 34px;border-radius:999px;background:var(--blue);color:#fff;font-family:var(--f-round);font-weight:700;font-size:19px;box-shadow:0 6px 20px rgba(90,163,224,.45);transition:transform .2s,background .2s}
.enter:hover .enter-pill{background:#6cb2ea;transform:translateY(-2px)}
.gate-hint{position:relative;font-size:14px;opacity:.6;margin:0}

.mute{position:fixed;z-index:40;top:calc(14px + env(safe-area-inset-top,0px));left:calc(14px + env(safe-area-inset-left,0px));width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--blue-deep);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.mute:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- Fajr sky: pastel blue fading into a peach sunrise ---------- */
.sky{position:relative;overflow:hidden;background:linear-gradient(180deg,#9ccdf3 0%,#c7e4fa 45%,#ffe3cf 82%,#ffd3b4 100%);color:var(--ink)}
.sun{position:absolute;left:50%;bottom:-120px;width:320px;height:320px;margin-left:-160px;border-radius:50%;background:radial-gradient(circle,#fff6e8 0%,#ffd7b5 45%,rgba(255,201,163,0) 70%)}
.hill{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:60px;z-index:2}
.hill path{fill:var(--bg)}
.clouds{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;opacity:.9;filter:drop-shadow(0 4px 10px rgba(90,163,224,.15))}
.c1{width:150px;top:8%;right:-10px}
.c2{width:110px;top:30%;left:4%;opacity:.75}
.c3{width:90px;top:58%;right:12%;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .c1{animation:drift 26s ease-in-out infinite alternate}
  .c2{animation:drift 32s ease-in-out infinite alternate-reverse}
  .c3{animation:drift 22s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translateX(-24px)}to{transform:translateX(24px)}}
}

/* Balloons are generated by app.js */
.balloons{position:absolute;inset:0;pointer-events:none;z-index:1}
.balloon{position:absolute;top:var(--top,30%);width:var(--w,54px);opacity:0}
.balloon svg{display:block;width:100%;height:auto;overflow:visible}
body.dawn .balloon{opacity:1;animation:rise var(--rise,4s) cubic-bezier(.2,.7,.25,1) var(--delay,0s) both, bob var(--bob,5s) ease-in-out calc(var(--delay,0s) + var(--rise,4s)) infinite alternate}
@keyframes rise{from{transform:translateY(120vh) rotate(0)}to{transform:translateY(0) rotate(var(--tilt,0deg))}}
@keyframes bob{from{transform:translateY(0) rotate(var(--tilt,0deg))}to{transform:translateY(-16px) rotate(calc(var(--tilt,0deg) * -1))}}
@media (prefers-reduced-motion:reduce){
  body.dawn .balloon{animation:none;transform:rotate(var(--tilt,0deg))}
}

.hero{position:relative;z-index:3;text-align:center;padding-block:56px 92px}
body.dawn .hero > *{animation:fadeup 1.4s ease both}
body.dawn .hero > :nth-child(2){animation-delay:.5s} body.dawn .hero > :nth-child(3){animation-delay:.8s}
body.dawn .hero > :nth-child(4){animation-delay:1.4s} body.dawn .hero > :nth-child(5){animation-delay:2.2s}
body.dawn .hero > :nth-child(6){animation-delay:2.6s}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.dawn .hero > *{animation:none}}
.eyebrow{display:inline-block;margin:0;font-family:var(--f-round);font-weight:600;font-size:15px;background:rgba(255,255,255,.7);color:var(--blue-deep);padding:3px 16px;border-radius:999px}
.name-ar{font-family:var(--f-round);font-weight:800;font-size:clamp(88px,24vw,160px);line-height:1.25;margin:10px 0 0;color:#fff;
  text-shadow:0 3px 0 var(--blue),0 6px 0 rgba(47,111,181,.35),0 14px 30px rgba(47,111,181,.35)}
.full{font-family:var(--f-round);font-weight:600;font-size:20px;margin:14px 0 0;color:var(--blue-deep)}

/* The verse */
.ayah{margin:30px auto 0;max-width:30em;padding:20px 22px 14px;background:rgba(255,255,255,.72);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(4px)}
.ayah blockquote{margin:0;font-family:var(--f-quran);font-size:clamp(26px,6.6vw,38px);line-height:2.1;color:var(--ink);text-wrap:balance}
.ayah .orn{font-family:var(--f-quran);color:var(--gold);margin-inline:.12em}
.ayah figcaption{font-size:14px;color:var(--muted);margin-top:4px}
.dua{font-family:var(--f-round);font-weight:700;font-size:clamp(26px,6.6vw,36px);line-height:1.5;margin:22px 0 0;color:var(--blue-deep)}
.age{display:inline-block;font-family:var(--f-round);font-weight:600;font-size:16px;margin:14px 0 0;background:#fff;color:var(--blue-deep);padding:4px 18px;border-radius:999px;box-shadow:var(--shadow)}
.age:empty{display:none}

/* ---------- Sections ---------- */
main .stack{display:flex;flex-direction:column;gap:52px;padding-block:28px 56px}
h2{font-family:var(--f-round);font-size:30px;font-weight:800;line-height:1.3;margin:0 0 16px;text-wrap:balance;color:var(--ink);display:flex;align-items:center;gap:10px}
h2::before{content:"";flex:none;width:30px;height:36px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Cpath d='M15 28 Q16 34 14 40' stroke='%239fb6d6' stroke-width='1.4' fill='none'/%3E%3Cellipse cx='15' cy='14' rx='11' ry='13' fill='%235aa3e0'/%3E%3Cpath d='M13 27h4l-2-3z' fill='%235aa3e0'/%3E%3Cellipse cx='11' cy='9' rx='3' ry='4.5' fill='%23fff' opacity='.55'/%3E%3C/svg%3E")}
.sub{color:var(--muted);margin:-8px 0 16px;font-size:16px}

.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fact{background:var(--surface);padding:16px 18px;border-radius:20px;box-shadow:var(--shadow);min-width:0;border:1px solid var(--line)}
.fact:nth-child(4n+2),.fact:nth-child(4n+3){background:var(--blue-soft);border-color:transparent}
.fact .k{font-family:var(--f-round);font-weight:600;font-size:14px;color:var(--muted)}
.fact .v{font-family:var(--f-round);font-size:20px;font-weight:700;color:var(--ink);line-height:1.5}
.fact .v-sub{font-size:15px;color:var(--muted)}
.fact.wide{grid-column:1/-1;text-align:center;background:var(--peach-soft);border-color:transparent}
.facts .fact.parent{background:var(--peach-soft);border-color:transparent;text-align:center}
.meaning{margin:14px 0 0;padding:14px 20px;background:var(--surface);border:2px dashed var(--line);border-radius:20px;font-size:16px;text-align:center}
.meaning strong{font-family:var(--f-round);color:var(--blue-deep)}

/* Letter: a little note card with a stitched border */
.letter{position:relative;background:#fffdf8;border:2px dashed #f2c9a6;border-radius:var(--radius);padding:28px 26px 24px;text-align:left;font-family:var(--f-letter);font-size:20px;line-height:1.7;box-shadow:var(--shadow)}
.letter::before{content:"";position:absolute;top:-16px;right:24px;width:34px;height:34px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' fill='%23fff'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:0 4px 10px rgba(90,163,224,.4)}
.letter p{margin:0 0 14px}
.sign{font-style:italic;color:var(--blue-deep);margin:0!important}

.duas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.duas li{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
.duas li:nth-child(even){background:var(--blue-soft);border-color:transparent}
.duas .q{font-family:var(--f-quran);font-size:clamp(24px,5.6vw,30px);line-height:2;color:var(--ink)}
.duas .q::before{content:"﴿";font-family:var(--f-quran);color:var(--gold);margin-inline-end:6px}
.duas .q::after{content:"﴾";font-family:var(--f-quran);color:var(--gold);margin-inline-start:6px}
.duas .d{font-size:19px;line-height:1.9;font-weight:500}
.duas .ref{font-size:14px;color:var(--muted)}

/* Wishes */
.wish-form{display:grid;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.field{display:grid;gap:6px;min-width:0}
label,legend{font-family:var(--f-round);font-size:16px;font-weight:600}
input,textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:16px;padding:11px 14px}
input:focus,textarea:focus{border-color:var(--blue);outline:none}
textarea{min-height:120px;resize:vertical}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
button[type=submit]{font-family:var(--f-round);font-size:18px;font-weight:700;border:0;border-radius:999px;padding:9px 30px;background:var(--blue);color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(90,163,224,.4);transition:transform .15s,background .15s}
button[type=submit]:hover{background:var(--blue-deep);transform:translateY(-1px)}
button[type=submit]:disabled{opacity:.55;cursor:default;transform:none}
.status{margin:0;font-size:15px;color:var(--blue-deep)}
.status.err{color:#c0392b}

fieldset.field{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;margin-bottom:8px}
legend .opt{color:var(--muted);font-weight:400;font-size:14px;font-family:var(--f-body)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:6px 16px;border-radius:999px;border:2px solid var(--line);background:var(--bg);font-family:var(--f-round);font-weight:600;font-size:15px;line-height:1.5;transition:background .15s,border-color .15s,color .15s}
.chip:hover span{border-color:var(--blue)}
.chip input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--blue-deep);outline-offset:2px}
#wish-rel-other{margin-top:10px}

.wishes{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.wish{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px 22px 22px 6px;padding:18px 20px;min-width:0;box-shadow:var(--shadow)}
.wish:nth-child(even){background:var(--blue-soft);border-color:transparent;border-radius:22px 22px 6px 22px}
.wish .msg{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start}
.wish .who{margin-top:10px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.wish .who b{font-family:var(--f-round);color:var(--blue-deep);font-weight:700;font-size:16px}
.wish.new{animation:fadeup .8s ease both}
.wish.pinned{background:var(--peach-soft);border:2px solid var(--peach)}
.wish .pin{color:#c77a3f;font-weight:600}
.empty{border:2px dashed var(--line);border-radius:var(--radius);padding:24px;text-align:center;color:var(--muted);margin:0;background:var(--surface)}

/* Countdowns */
.timers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.timer{padding:20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);min-width:0;text-align:center}
.timer:last-child{background:var(--blue-soft);border-color:transparent}
.timer .k{font-family:var(--f-round);font-weight:600;font-size:15px;color:var(--muted)}
.timer .v{font-family:var(--f-round);font-size:34px;font-weight:800;color:var(--blue);line-height:1.4}
.timer .s{font-size:15px;color:var(--muted)}

@media (max-width:560px){.facts{grid-template-columns:1fr}.timers{grid-template-columns:1fr}.fact:nth-child(4n+2),.fact:nth-child(4n+3){background:var(--surface);border-color:var(--line)}.fact:nth-child(even){background:var(--blue-soft);border-color:transparent}}

.foot{text-align:center;color:var(--muted);font-family:var(--f-round);font-weight:600;font-size:15px;padding:0 18px 40px}
.foot-balloons{width:96px;height:96px;display:block;margin:0 auto 4px}
.foot p{margin:0}