:root{--pink:#ff8fc2;--pink-d:#e0569a;--purple:#8e5bd6;--purple-d:#6a3db0;--sky:#8fd3ff;--sky-d:#4aa8e0;--ink:#3b2a63;--ok:#2fb67c;--bad:#e5586e;color-scheme:light;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;font-family:'Geeza Pro','Noto Naskh Arabic','Tahoma','Arial',sans-serif;color:var(--ink);background-color:#fdeefa;
background-image:radial-gradient(#fff 1.5px,transparent 2px),radial-gradient(#ffd2ea 2px,transparent 2.5px),linear-gradient(180deg,#e6f4ff 0%,#fdeefa 60%,#f1e6ff 100%);
background-size:70px 70px,110px 110px,100% 100%;background-position:0 0,35px 50px,0 0;overflow-x:hidden}
.cloud{position:fixed;width:150px;height:46px;background:#fff;border-radius:50px;opacity:.85;z-index:0;box-shadow:0 6px 0 #dbeeff}
.cloud:before{content:"";position:absolute;width:64px;height:64px;background:#fff;border-radius:50%;top:-30px;right:24px}
.c1{top:9%;left:4%}.c2{bottom:8%;right:5%;transform:scale(.8)}
main{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:16px}
.card{background:#fff;border-radius:28px;border:4px solid #fff;box-shadow:0 10px 0 #d9c3f5,0 18px 30px rgba(142,91,214,.18);padding:24px;text-align:center}
.deco{font-size:44px}
h1{margin:6px 0;font-size:clamp(34px,7vw,56px);font-weight:900;color:var(--purple);text-shadow:0 4px 0 #e9d9ff}
.fh{font-size:clamp(28px,6vw,44px)}
h2{margin:4px 0;font-size:clamp(22px,4.5vw,32px);color:var(--pink-d)}
.sub{font-size:clamp(22px,4vw,30px);font-weight:700;color:var(--sky-d)}
.motto{margin:16px 0;font-size:20px;font-weight:700}
input{font:inherit;font-size:22px;width:min(100%,420px);padding:12px 18px;border-radius:20px;border:3px solid #cfb4f5;text-align:center;color:var(--ink);background:#fff}
input:focus{outline:3px solid var(--sky)}
.btn{font:inherit;font-weight:900;font-size:22px;color:#fff;border:0;border-radius:22px;padding:12px 30px;margin:8px 6px;cursor:pointer;background:var(--purple);box-shadow:0 7px 0 var(--purple-d);display:inline-block;text-decoration:none;transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--purple-d)}
.btn.pk{background:var(--pink);box-shadow:0 7px 0 var(--pink-d)}
.btn.sk{background:var(--sky-d);box-shadow:0 7px 0 #2f84b8}
.err{color:var(--bad);font-weight:700;min-height:26px}
.top{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;font-weight:700;font-size:18px;margin-bottom:10px}
.pill{background:#f3e9ff;border-radius:18px;padding:4px 14px}
.bar{height:18px;border-radius:12px;background:#eadcff;overflow:hidden;margin-bottom:14px;box-shadow:inset 0 2px 0 #d6c0f7}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--purple));border-radius:12px;transition:width .4s}
.q{font-size:clamp(22px,4.5vw,30px);font-weight:700;margin:6px 0 14px}
.big{display:inline-block;min-width:150px;font-size:clamp(40px,10vw,76px);font-weight:900;color:var(--purple);background:linear-gradient(180deg,#fff,#f6ecff);border:4px solid #d9c3f5;border-radius:28px;padding:6px 32px;margin-bottom:16px;box-shadow:0 8px 0 #d9c3f5}
.big:empty{display:none}
sup{font-size:.6em;line-height:0;margin-inline:.05em}
.opts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.opt{font:inherit;font-size:clamp(22px,4vw,30px);font-weight:700;color:var(--ink);background:#e9f6ff;border:3px solid var(--sky);border-radius:20px;padding:14px 10px;cursor:pointer;box-shadow:0 6px 0 var(--sky-d)}
.opt:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 var(--sky-d)}
.opt:disabled{cursor:default}
.opt.wrong{background:#ffe3e8;border-color:var(--bad);box-shadow:0 6px 0 #b8384d;opacity:.75}
.opt.right{background:#dcf7ea;border-color:var(--ok);box-shadow:0 6px 0 #1f8c5e}
.msg{min-height:34px;margin:14px 0 4px;font-size:22px;font-weight:900}
.msg.g{color:var(--ok)}.msg.r{color:var(--pink-d)}.msg.n{color:var(--purple)}
.exp{background:#fff7d6;border-radius:18px;padding:10px 16px;font-size:20px;font-weight:700;margin:8px 0;display:none}
.stars{font-size:60px;letter-spacing:6px}
.rows{font-size:22px;font-weight:700;line-height:2}
.lvl{display:inline-block;font-size:28px;font-weight:900;color:#fff;background:linear-gradient(90deg,var(--pink),var(--purple));border-radius:24px;padding:6px 26px;margin:8px 0}
.hide{display:none!important}
#modal{position:fixed;inset:0;background:rgba(59,42,99,.75);z-index:9;display:flex;align-items:center;justify-content:center;padding:16px}
#modal .box{background:#fff;border-radius:24px;padding:16px;max-width:900px;width:100%;max-height:100%;overflow:auto;text-align:center}
#modal img{width:100%;border-radius:12px;border:2px solid #e9d9ff}
.mt{font-weight:700;font-size:20px;margin:0 0 10px}