*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}
body{font-family:'Tajawal','Segoe UI',system-ui,sans-serif;color:#F6E7CE;background:#0E3B3A;user-select:none;-webkit-user-select:none}
.hidden{display:none!important}
#stage{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(3,12,18,.58) 100%),radial-gradient(ellipse 72% 56% at 50% 40%,rgba(242,200,121,.35) 0%,rgba(242,200,121,.13) 45%,rgba(242,200,121,0) 78%),radial-gradient(ellipse at 50% 38%,#1c5a52 0%,#14304A 62%,#0E3B3A 100%)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#hud{position:absolute;top:0;inset-inline:0;padding:20px 16px 0;text-align:center;pointer-events:none}
.title{font-weight:800;font-size:32px;line-height:1.3;letter-spacing:0;color:#E9B85C;background:linear-gradient(180deg,#F2C879 0%,#E9B85C 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(242,200,121,.4)) drop-shadow(0 2px 3px rgba(0,0,0,.35))}
#counter{display:inline-block;margin-top:8px;padding:6px 18px;border-radius:999px;background:linear-gradient(180deg,rgba(246,231,206,.2),rgba(246,231,206,.08));color:#F2C879;font-weight:800;font-size:19px;border:1px solid rgba(233,184,92,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 14px rgba(0,0,0,.25);text-shadow:0 0 8px rgba(242,200,121,.45)}
#hint{margin:14px auto 0;max-width:300px;font-size:18px;line-height:1.6;color:rgba(246,231,206,.85);text-shadow:0 1px 6px rgba(4,14,20,.85),0 0 14px rgba(4,14,20,.6);transition:opacity .4s}
#dock{position:absolute;bottom:0;inset-inline:0;padding:12px 16px 20px;display:flex;align-items:center;gap:12px;justify-content:center}
.icon-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(233,184,92,.6);background:rgba(246,231,206,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2);color:#F2C879;display:grid;place-items:center;cursor:pointer;flex:none}
.icon-btn svg{stroke-width:2.2;filter:drop-shadow(0 0 4px rgba(242,200,121,.5))}
.icon-btn:active{transform:scale(.92)}
#charge{display:flex;gap:8px;flex:1;justify-content:center}
#charge i{width:14px;height:14px;border-radius:50%;background:rgba(246,231,206,.35);box-shadow:0 0 0 1px rgba(246,231,206,.18);transition:background .25s,transform .25s,box-shadow .25s}
#charge i.on{background:#F2C879;box-shadow:0 0 12px 2px rgba(242,200,121,.75);transform:scale(1.35)}
button{font-family:inherit;font-size:16px;cursor:pointer;min-height:48px;border-radius:999px;border:0;padding:0 22px;font-weight:700}
button:focus-visible,input:focus-visible{outline:3px solid #7FD2B4;outline-offset:2px}
.primary{background:linear-gradient(135deg,#E9B85C,#F2C879);color:#23201C;font-size:18px;min-height:56px;box-shadow:0 6px 24px rgba(233,184,92,.45);animation:pulse 1.6s ease-in-out infinite}
.primary:active{transform:scale(.95)}
.primary.wide{width:100%;animation:none;margin-top:16px}
@keyframes pulse{50%{box-shadow:0 6px 34px rgba(233,184,92,.85);transform:scale(1.03)}}
body.reduced .primary{animation:none}
body.reduced *{transition-duration:.01s!important}
.ghost{background:rgba(246,231,206,.14);color:#F6E7CE;border:1px solid rgba(246,231,206,.3)}
#backdrop{position:absolute;inset:0;background:rgba(5,20,25,.55);z-index:5}
.sheet{position:absolute;inset-inline:0;bottom:0;z-index:6;padding:0 12px 16px;transform:translateY(105%);transition:transform .4s cubic-bezier(.2,1.1,.3,1)}
.sheet.show{transform:none}
.paper{max-width:460px;margin:0 auto;background:#F6E7CE;color:#23201C;border-radius:28px;padding:22px 20px 18px;box-shadow:0 -10px 40px rgba(0,0,0,.45);background-image:radial-gradient(circle at 20% 10%,rgba(233,184,92,.25),transparent 55%)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#5b4a35}
.chip{background:#23201C;color:#F2C879;border-radius:999px;padding:4px 12px;font-size:14px;white-space:nowrap}
.tag{display:inline-block;margin-top:12px;font-size:14px;font-weight:700;color:#0E3B3A;background:#bfe8d8;padding:3px 12px;border-radius:999px}
.dua{font-family:'Noto Naskh Arabic','Tajawal',serif;font-weight:700;font-size:27px;line-height:2.05;margin:10px 0 14px;text-align:center;max-height:44vh;overflow:auto}
.card-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ghost-dark{background:transparent;border:2px solid #23201C;color:#23201C;padding:0 16px}
.solid-dark{background:#23201C;color:#F6E7CE}
.panel{max-width:460px;margin:0 auto;background:#14304A;border:1px solid rgba(246,231,206,.2);border-radius:28px;padding:22px 20px;box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.panel h2{margin:0 0 8px;font-size:20px;color:#E9B85C}
.row{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:17px;gap:12px;border-bottom:1px solid rgba(246,231,206,.1)}
.row input{width:26px;height:26px;accent-color:#7FD2B4}
#loading{position:absolute;inset:0;z-index:20;background:#0E3B3A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .5s}
#loading.fade{opacity:0}
.logo{font-size:64px;animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.15);filter:drop-shadow(0 0 18px #E9B85C)}}
.ltxt{font-size:18px;font-weight:700}
.bar{width:180px;height:6px;border-radius:99px;background:rgba(246,231,206,.18);overflow:hidden}
.bar b{display:block;height:100%;width:8%;background:#7FD2B4;transition:width .3s}
@media (min-width:700px){#hint{font-size:22px}.dua{font-size:32px}}
@media (max-height:520px){.dua{font-size:21px;line-height:1.8}#hint{display:none}}