/* ---------- device ---------- */
.dev{position:relative;width:308px;height:640px;border-radius:58px;padding:3px;flex-shrink:0;
  background:linear-gradient(145deg,#5b5651 0%,#232120 18%,#3b3835 46%,#151413 72%,#45413d 100%);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.8),0 24px 60px -24px rgba(0,0,0,.6)}
.dev::before,.dev::after{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#2c2a28,#5b5651)}
.dev::before{left:-3px;top:140px;height:58px;box-shadow:0 74px 0 #3a3735}
.dev::after{right:-3px;top:178px;height:92px}
.bezel{position:relative;width:100%;height:100%;border-radius:55px;background:#050505;padding:9px}
.island{position:absolute;left:50%;top:20px;width:86px;height:26px;border-radius:20px;background:#000;transform:translateX(-50%);z-index:6}
.island::after{content:"";position:absolute;right:16px;top:9px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#1f2a44,#05070c 70%)}
.scr{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:#FFF6EA;color:#2E1508;font-family:"Mukta",system-ui,sans-serif;isolation:isolate}
.scr::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:46px;
  background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 32%)}
.home-ind{position:absolute;left:50%;bottom:8px;width:118px;height:5px;border-radius:3px;background:#2E1508;opacity:.85;transform:translateX(-50%);z-index:6}
.scr.dark .home-ind{background:#F6EBDC}
.stat{position:absolute;top:0;left:0;right:0;height:54px;padding:6px 24px 0 32px;display:flex;justify-content:space-between;align-items:center;font:600 15px "Mukta",sans-serif;z-index:5}
.stat .sti{display:flex;gap:4px;align-items:center}
.stat .sti svg{flex-shrink:0}
.scr.dark{background:#1C120A;color:#F6EADB}

/* screens stack */
.sv{position:absolute;inset:0;transition:opacity .5s cubic-bezier(.2,.7,.1,1),transform .5s cubic-bezier(.2,.7,.1,1)}
.sv.off{opacity:0;transform:scale(.985);pointer-events:none}

/* ---------- JAAP screen ---------- */
.jp{padding:58px 18px 24px;display:flex;flex-direction:column;align-items:center;height:100%;
  background:radial-gradient(120% 60% at 50% 52%,#FFF0DC 0%,#FFF6EA 55%)}
.jp-top{width:100%;display:flex;align-items:center;justify-content:space-between}
.ic-btn{width:34px;height:34px;border-radius:50%;background:#F3E3CE;display:grid;place-items:center}
.appchip{display:flex;align-items:center;gap:7px;font:600 12.5px "Mukta";color:#6E4F3C}
.appchip .tile{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#3b2a20,#140b06);display:grid;place-items:center;color:#FFF6EA;font:700 11px "Mukta"}
.jp .jai{font:400 25px/1.3 "Tiro Devanagari Sanskrit";color:#A6460C;margin:18px 0 0}
.jp .whom{font:500 13px "Mukta";color:#6E4F3C;margin:0}
.ring{position:relative;width:250px;height:250px;margin:4px 0 100px}
.ring svg{position:absolute;inset:0;overflow:visible}
.core{position:absolute;left:55px;top:55px;width:140px;height:140px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 50% 35%,#FFF9F0 0%,#FBE6C9 70%,#F4D6B0 100%);
  box-shadow:inset 0 -6px 14px rgba(150,80,20,.16),inset 0 3px 6px rgba(255,255,255,.9),0 10px 24px -10px rgba(120,60,20,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#2E1508;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s ease}
.core:active{transform:scale(.96)}
.core .nm{font:400 30px/1.2 "Tiro Devanagari Sanskrit"}
.core .num{font:400 38px/1 "Rozha One";margin-top:2px}
.core .of{font:600 10.5px "Mukta";letter-spacing:.14em;text-transform:uppercase;color:#8C705C;margin-top:4px}
.jp .left{font:400 19px "Rozha One";margin:0}
.jp .soft{font-size:12.5px;color:#6E4F3C;margin:2px 0 0}
.jp-bar{margin-top:auto;width:100%;height:4px;border-radius:2px;background:#F1DEC6;overflow:hidden}
.jp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#C2561A,#E9A23B);border-radius:2px;transition:width .3s ease}
.jp-meta{width:100%;display:flex;justify-content:space-between;margin:8px 0 16px;font:500 11px "Mukta";color:#8C705C}

/* ---------- SHIELD / lock screen ---------- */
.sh{height:100%;display:flex;flex-direction:column;align-items:center;padding:60px 18px 26px;text-align:center}
.sh .art{width:100%;height:268px;border-radius:26px;overflow:hidden;position:relative;box-shadow:0 18px 30px -18px rgba(90,40,10,.5)}
.sh .art img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.sh .art .badge{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:20px;background:rgba(255,246,234,.92);backdrop-filter:blur(6px);font:600 12px "Mukta";color:#2E1508}
.sh .art .badge .tile{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#3b2a20,#140b06);display:grid;place-items:center;color:#FFF6EA;font:700 10px "Mukta"}
.sh h4{font:400 23px/1.12 "Rozha One";margin:18px 0 0}
.sh p{font-size:13px;line-height:1.45;color:#6E4F3C;margin:8px 0 0}
.sh .streak{display:flex;align-items:center;gap:6px;font:600 12px "Mukta";color:#6E4F3C;margin-top:10px}
.btn-p{margin-top:auto;width:100%;height:48px;border-radius:24px;background:linear-gradient(180deg,#C25A12,#AE4A08);box-shadow:0 8px 18px -8px rgba(174,74,8,.7),inset 0 1px 0 rgba(255,255,255,.25);color:#fff;display:grid;place-items:center;font:700 15.5px "Mukta"}
.btn-t{height:38px;display:grid;place-items:center;font:600 13.5px "Mukta";color:#6E4F3C;margin-bottom:6px}

/* ---------- HOME ---------- */
.hm{height:100%;padding:58px 16px 0;display:flex;flex-direction:column;gap:10px}
.hm .hi{display:flex;justify-content:space-between;align-items:flex-start}
.hm .hi small{display:block;font:500 12.5px "Mukta";color:#6E4F3C}
.hm .hi b{display:block;font:400 20px/1.1 "Rozha One";white-space:nowrap}
.avatar{width:34px;height:34px;border-radius:50%;background:#F3E3CE;display:grid;place-items:center;font:400 16px "Rozha One";color:#A6460C}
.mandir{position:relative;height:200px;border-radius:22px;overflow:hidden;color:#FFF6EA;box-shadow:0 18px 30px -20px rgba(60,25,5,.7)}
.mandir img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.mandir::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,4,0) 30%,rgba(20,10,4,.55) 58%,rgba(20,10,4,.9) 100%)}
.mandir .ov{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end}
.mandir .ov b{display:block;font:400 17px/1.1 "Rozha One";white-space:nowrap}
.mandir .ov small{display:block;max-width:120px;line-height:1.3}
.mandir .ov small{font:500 11.5px "Mukta";opacity:.85}
.wk{display:flex;gap:3px}
.wk svg{width:17px;height:17px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tl{background:#fff;border:1px solid #EFDCC6;border-radius:18px;padding:11px 12px}
.tl small{display:block;font:500 11px "Mukta";color:#8C705C}
.tl b{display:block;font:400 24px/1.1 "Rozha One"}
.tl span{font:500 11px "Mukta";color:#6E4F3C}
.chal{display:flex;align-items:center;gap:11px;background:#FCE7CC;border-radius:18px;padding:10px 12px}
.chal .rg{width:40px;height:40px;flex-shrink:0}
.chal b{display:block;font:700 13.5px "Mukta"}
.chal small{font:500 11.5px "Mukta";color:#6E4F3C}
.tabs{margin:auto -16px 0;height:74px;border-top:1px solid #EFDCC6;background:rgba(255,249,241,.92);display:grid;grid-template-columns:repeat(4,1fr);padding:8px 0 18px}
.tabs div{display:flex;flex-direction:column;align-items:center;gap:2px;font:600 10.5px "Mukta";color:#8C705C}
.tabs div.on{color:#B84E0A}

.core{position:absolute;overflow:visible}
.rip{position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(194,86,26,.45);opacity:0;pointer-events:none}
.rip.go{animation:rip .6s cubic-bezier(.2,.7,.1,1)}
@keyframes rip{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.32)}}
@media (prefers-reduced-motion:reduce){.rip.go{animation:none}}
.mala-tassel{animation:tassel 5.5s ease-in-out infinite alternate}
@keyframes tassel{from{transform:rotate(-2.2deg)}to{transform:rotate(2.6deg)}}
@media (prefers-reduced-motion:reduce){.mala-tassel{animation:none}}