:root{--glow:.3;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* girl */
:root[data-gender="f"][data-theme="light"]{--bg1:#ffe3ef;--bg2:#f9c6dd;--ink:#6b2150;--soft:#a85a86;--card:rgba(255,255,255,.65);--btn:#e8579a;--btnink:#fff;--moon:#fff6d6;--star:#e8579a;--off:rgba(107,33,80,.18);--r1:#ffd9b8;--r2:#ff9fc4;--eye:#6b2150;--hat:#ff8fb8}
:root[data-gender="f"][data-theme="dark"]{--bg1:#1d1038;--bg2:#3b1d63;--ink:#f6e8ff;--soft:#c8a6ea;--card:rgba(255,255,255,.08);--btn:#b57cf0;--btnink:#1d1038;--moon:#fff3c4;--star:#ffd86b;--off:rgba(246,232,255,.2);--r1:#5a2a6e;--r2:#e0709a;--eye:#6b2150;--hat:#ff8fb8}
/* boy */
:root[data-gender="m"][data-theme="light"]{--bg1:#e9f0f8;--bg2:#c3d3e6;--ink:#12263f;--soft:#3b5578;--card:rgba(255,255,255,.7);--btn:#1e5fd1;--btnink:#fff;--moon:#fff0c2;--star:#d48a00;--off:rgba(18,38,63,.18);--r1:#d6e4f5;--r2:#86a9d8;--eye:#0f2a44;--hat:#3b82f6}
:root[data-gender="m"][data-theme="dark"]{--bg1:#0b1220;--bg2:#14233f;--ink:#e8f0ff;--soft:#8fb0dc;--card:rgba(255,255,255,.07);--btn:#3b82f6;--btnink:#06101f;--moon:#ffe9a8;--star:#fbbf24;--off:rgba(232,240,255,.2);--r1:#0f2a44;--r2:#1f5a86;--eye:#0f2a44;--hat:#3b82f6}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg2);color:var(--ink);font-family:"Vazirmatn","Noto Naskh Arabic",Tahoma,sans-serif;text-align:center;transition:background .5s}
main{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:18px 16px 40px}
header{display:flex;justify-content:space-between;align-items:center}
h1{font-size:1.5rem;font-weight:900;margin:0}
.sw{border:0;background:var(--card);color:var(--ink);font-size:1.4rem;width:48px;height:48px;border-radius:50%;cursor:pointer}
.phase{margin:10px 0 0;font-size:1.25rem;font-weight:700;color:var(--soft)}
#moon{width:min(62vw,250px);height:auto;margin:32px auto 24px;display:block;overflow:visible;shape-rendering:geometricPrecision;filter:drop-shadow(0 0 calc(var(--glow)*60px) var(--moon));transition:filter 1s}
#moon .eyes-closed{display:none}
body.rest #moon .eyes-open{display:none}
body.rest #moon .eyes-closed{display:inline}
body.rest #moon{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.07)}}
.time{font-size:clamp(2.5rem,13vw,4.2rem);font-weight:900;direction:ltr;letter-spacing:2px;margin:0}
.bar{height:12px;border-radius:9px;background:var(--off);overflow:hidden;margin:8px 10px 18px}
#fill{height:100%;width:0;background:var(--btn);border-radius:9px;transition:width 1s linear}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
button.b{font:inherit;font-weight:700;font-size:1.2rem;padding:14px 30px;border:0;border-radius:40px;background:var(--btn);color:var(--btnink);cursor:pointer;min-height:56px}
button.b.alt{background:var(--card);color:var(--ink)}
.card{background:var(--card);border-radius:22px;padding:16px;margin-top:20px;line-height:1.9}
.card h2{margin:0 0 6px;font-size:1.15rem}
#quote{display:none;font-size:1.15rem}
body.rest #quote{display:block}
#sky{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.s{font-size:2rem;background:none;border:0;cursor:pointer;color:var(--off);padding:6px}
.s.on{color:var(--star);filter:drop-shadow(0 0 6px var(--star))}
#note{min-height:3.4em;margin-top:8px;font-size:1.1rem}
:focus-visible{outline:3px solid var(--btn);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.hid{display:none}
#tr{display:grid;gap:8px;margin:10px 0}
#tr button{font:inherit;font-size:1.05rem;padding:12px;border:2px solid transparent;border-radius:16px;background:var(--off);color:var(--ink);cursor:pointer;min-height:48px}
#tr button.sel{border-color:var(--btn);background:var(--btn);color:var(--btnink);font-weight:700}
#vol{width:60%;vertical-align:middle;accent-color:var(--btn)}

/* ===== sky background ===== */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#bg .gs,#bg .gr{position:absolute;inset:0;transition:opacity 3s}
#bg .gs{background:linear-gradient(170deg,var(--bg1),var(--bg2))}
#bg .gr{background:linear-gradient(170deg,var(--r1),var(--r2));opacity:0}
body.rest #bg .gr{opacity:1}
.st{position:absolute;border-radius:50%;background:#fff;opacity:.2;animation:tw var(--t) ease-in-out var(--d) infinite}
@keyframes tw{50%{opacity:.95;transform:scale(1.5)}}
body.rest .st{animation-duration:calc(var(--t)*2)}
.qod{margin:8px 6px 0;font-size:1rem;color:var(--soft)}
/* moon extras */
#moon .hat,#moon .zz{display:none}
body.rest #moon .hat,body.rest #moon .zz{display:inline}
.blink{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.zz text{animation:zz 3s ease-in-out infinite;transform-box:fill-box}
.zz text+text{animation-delay:1.2s}
@keyframes zz{0%{opacity:0;transform:translateY(8px)}50%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
/* shooting star + toast + celebration */
.shoot{position:fixed;top:10%;right:-110px;z-index:4;width:90px;height:44px;border:0;background:none;cursor:pointer;animation:shoot 3.4s linear forwards}
.shoot::before{content:"";position:absolute;left:0;top:18px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px #fff}
.shoot::after{content:"";position:absolute;left:4px;top:21px;width:90px;height:3px;border-radius:3px;background:linear-gradient(to right,#fff,rgba(255,255,255,0));transform-origin:left center;transform:rotate(-20deg)}
@keyframes shoot{to{transform:translate(-130vw,42vh)}}
.shoot.ltr{right:auto;left:-110px;animation-name:shootR}
@keyframes shootR{from{transform:translate(0,0) scaleX(-1)}to{transform:translate(130vw,42vh) scaleX(-1)}}
#toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%,30px);background:var(--bg1);color:var(--ink);padding:14px 20px;border-radius:20px;opacity:0;transition:.4s;z-index:6;max-width:90%;pointer-events:none;box-shadow:0 6px 24px rgba(0,0,0,.2)}
#toast.on{opacity:1;transform:translate(-50%,0)}
.pt{position:fixed;left:50%;top:38%;font-size:1.7rem;z-index:5;pointer-events:none;animation:pop 1.5s ease-out forwards}
@keyframes pop{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--x),var(--y)) scale(1.3);opacity:0}}

/* ===== duration presets ===== */
.plabel{margin:0 0 8px;font-size:.95rem;color:var(--soft)}
.presets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px}
.custom-time{margin:0 0 18px;padding:16px;border-radius:20px;background:var(--card)}
.custom-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.custom-fields label{font-size:.95rem;color:var(--soft)}
.custom-fields input{display:block;width:100%;margin-top:6px;padding:10px;font:inherit;font-size:1.15rem;direction:ltr;text-align:center;border:2px solid var(--off);border-radius:12px;background:var(--bg1);color:var(--ink);min-height:48px}
.custom-time button.b{padding:10px 24px;font-size:1rem;min-height:48px}
.custom-time :disabled{opacity:.5;cursor:not-allowed}
.presets button{font:inherit;direction:ltr;font-size:1.05rem;padding:10px 18px;min-height:48px;border:2px solid transparent;border-radius:30px;background:var(--card);color:var(--ink);cursor:pointer}
.presets button.sel{border-color:var(--btn);background:var(--btn);color:var(--btnink);font-weight:700}
.presets button:disabled{opacity:.5;cursor:not-allowed}
/* ===== reset confirmation ===== */
.modal{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,8,25,.6)}
.modal.hid{display:none}
.modal .box{background:var(--bg1);color:var(--ink);border-radius:24px;padding:22px;max-width:420px;width:100%;max-height:calc(100dvh - 40px);overflow-y:auto;line-height:1.9;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.modal h2{margin:0 0 6px;font-size:1.3rem}
.modal p{margin:0 0 16px}
.modal .btns{flex-wrap:wrap}
.modal button.b{padding:12px 22px;font-size:1.1rem}

.pt.sm{font-size:1.1rem;animation-duration:.9s}

/* ===== gender details ===== */
[data-gender="m"] .cheek{display:none}
[data-gender="f"] .ring{display:none}
/* ===== greeting ===== */
.hi{margin:6px 0 0;font-size:1.15rem;font-weight:700;overflow-wrap:anywhere}
.ed{border:0;background:none;font-size:1rem;cursor:pointer;padding:8px;min-width:40px;min-height:40px}
/* ===== profile form ===== */
.fl{display:block;margin:10px 0 6px;font-weight:700}
#pn{width:100%;font:inherit;font-size:1.15rem;padding:12px 16px;border-radius:16px;border:2px solid var(--off);background:var(--card);color:var(--ink);text-align:center}
.gs2{margin-bottom:16px}
.gs2 button.b{flex:1;padding:12px 10px}
.gs2 button.on{background:var(--btn);color:var(--btnink)}
#pok:disabled{opacity:.45;cursor:not-allowed}
/* ===== stats ===== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats b{display:block;font-size:2rem;font-weight:900;direction:ltr}
.stats small{color:var(--soft);font-size:.85rem;line-height:1.4;display:block}