@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@400;500;600;700;800&display=swap');
:root{--bg:#10100f;--panel:#191917;--gold:#d7b66b;--gold2:#f1d99b;--text:#f4f0e7;--muted:#aaa69b;--line:rgba(226,205,157,.14);--purple:#a99be9;--orange:#e49a68}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"IBM Plex Sans Arabic",sans-serif;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.ambient{position:absolute;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.12;z-index:-1}.ambient-one{width:420px;height:420px;background:#bf9748;top:100px;right:-180px}.ambient-two{width:340px;height:340px;background:#6954a5;top:550px;left:-180px}
.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}.topbar{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1160px)/2));gap:24px;background:rgba(16,16,15,.76);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:11px;min-width:max-content}.brand-mark{width:42px;height:42px;border:1px solid #d7b66b8c;border-radius:14px;display:grid;place-items:center;color:var(--gold2);font:800 25px "Noto Kufi Arabic";background:linear-gradient(145deg,#312919,#171713);box-shadow:0 5px 22px #0008}.brand-copy{display:grid}.brand-copy strong{font:700 17px "Noto Kufi Arabic"}.brand-copy i{color:var(--gold);font-style:normal}.brand-copy small{font-size:10px;color:var(--muted)}.top-nav{display:flex;gap:33px;color:#aaa69b;font-size:13px}.top-nav a{padding:30px 0;position:relative}.top-nav a.active,.top-nav a:hover{color:var(--gold2)}.top-nav a.active:after{content:"";height:2px;background:var(--gold);position:absolute;bottom:0;right:0;left:0}.top-actions{display:flex;align-items:center;gap:12px}.icon-btn{height:38px;width:38px;border-radius:12px;border:1px solid var(--line);background:#1b1b18;color:var(--gold);font-size:21px}.profile-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:30px;padding:5px 12px 5px 6px;color:var(--text);background:#1a1a17;font-size:12px}.avatar-mini{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#40351e;color:var(--gold2);font-weight:700}
.hero{min-height:510px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding-top:34px;padding-bottom:26px}.hero-copy{padding:25px 0}.eyebrow{font-size:11px;color:var(--gold);letter-spacing:.6px;display:inline-flex;align-items:center;gap:9px}.live-dot{width:7px;height:7px;border-radius:50%;background:#9ac27d;box-shadow:0 0 12px #9ac27d}.hero h1{font:800 clamp(38px,5.2vw,64px)/1.45 "Noto Kufi Arabic";margin:20px 0 12px;letter-spacing:-2px}.hero h1 em,.section-heading h2 em,.how-inner h2 em{font-style:normal;color:var(--gold)}.hero-copy>p{color:var(--muted);font-size:15px;line-height:2;max-width:520px;margin:0}.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}.btn{border:0;border-radius:12px;padding:12px 20px;font-weight:700;font-size:13px;transition:transform .2s,filter .2s}.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn-gold{background:linear-gradient(120deg,#c19b50,#efd698);color:#211b10;box-shadow:0 8px 25px #c19b502b}.btn-gold span{margin-right:14px}.btn-ghost{background:#1e1e1a;border:1px solid var(--line);color:var(--text)}.hero-foot{display:flex;gap:20px;flex-wrap:wrap;color:#8e8a80;font-size:11px;margin-top:30px}.hero-art{height:410px;position:relative;display:grid;place-items:center;isolation:isolate}.orbit{position:absolute;border:1px solid #d7b66b33;border-radius:50%;transform:rotate(-20deg)}.orbit-a{width:340px;height:280px}.orbit-b{width:430px;height:340px;transform:rotate(35deg);border-style:dashed;opacity:.5}.hero-card{position:absolute;width:210px;height:280px;border-radius:24px;border:1px solid #ecd39d61;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 30px 75px #0009}.card-back{background:linear-gradient(140deg,#343026,#171714);transform:rotate(-13deg) translate(-35px,0);color:var(--gold);font:800 100px "Noto Kufi Arabic"}.card-front{background:linear-gradient(145deg,#2b2920,#171715 70%);transform:rotate(8deg) translate(28px,4px);gap:10px}.card-front small{font-size:10px;color:var(--gold)}.card-front strong{font-size:82px;filter:drop-shadow(0 8px 15px #0008)}.card-front b{font:700 15px "Noto Kufi Arabic"}.card-line{width:60px;height:2px;background:var(--gold);opacity:.5;margin:4px}.spark{position:absolute;color:var(--gold);font-size:26px}.spark-a{top:55px;right:80px}.spark-b{bottom:55px;left:75px}.bubble{position:absolute;border:1px solid var(--line);background:#22211c;border-radius:14px;padding:9px 13px;box-shadow:0 10px 30px #0008}.bubble-one{font-size:24px;right:30px;bottom:82px}.bubble-two{font-size:12px;color:var(--gold2);left:5px;top:95px;transform:rotate(-8deg)}.hero-stamp{position:absolute;right:12px;top:48px;width:72px;height:72px;border-radius:50%;border:1px solid var(--gold);background:#191812;display:grid;place-content:center;text-align:center;transform:rotate(10deg)}.hero-stamp strong{font:700 17px "Noto Kufi Arabic";color:var(--gold2)}.hero-stamp small{font-size:9px;color:var(--muted)}
.quick-wrap{margin-top:-5px}.quick-panel{border:1px solid var(--line);border-radius:18px;background:linear-gradient(110deg,#1b1b18,#171714);display:grid;grid-template-columns:repeat(3,1fr);padding:9px;box-shadow:0 15px 45px #0004}.quick-item{display:flex;align-items:center;gap:13px;text-align:right;background:none;color:var(--text);border:0;padding:15px 20px;border-radius:12px}.quick-item+.quick-item{border-right:1px solid var(--line)}.quick-item:hover{background:#ffffff08}.quick-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:23px}.quick-icon.gold{background:#c5a45a1c;color:var(--gold)}.quick-icon.violet{background:#a99be91b;color:var(--purple)}.quick-icon.orange{background:#e49a681b;color:var(--orange)}.quick-item span:nth-child(2){display:grid;gap:3px}.quick-item b{font-size:13px}.quick-item small{font-size:10px;color:var(--muted)}.quick-arrow{margin-right:auto;color:#777;font-size:23px}
.section{padding-top:82px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.section-heading h2,.how-inner h2{font:700 28px/1.65 "Noto Kufi Arabic";margin:7px 0 0}.text-link{color:var(--gold);font-size:12px}.text-link span{font-size:20px;vertical-align:middle;margin-right:7px}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.game-card{background:linear-gradient(150deg,#20201c,#171715);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .22s,border-color .22s}.game-card:hover{transform:translateY(-5px);border-color:#c5a45a66}.game-visual{height:190px;position:relative;display:grid;place-items:center;overflow:hidden}.guess-visual{background:radial-gradient(circle at 50% 60%,#67512a 0,#342a1a 30%,#1b1a16 75%)}.number-visual{background:radial-gradient(circle at 50% 50%,#33413e 0,#1b2825 40%,#171a18 80%)}.chaos-visual{background:radial-gradient(circle at 50% 50%,#51402e 0,#29221c 45%,#191714 80%)}.visual-tag{position:absolute;top:14px;right:14px;border:1px solid #ffffff22;border-radius:20px;padding:5px 10px;font-size:9px;color:var(--gold2);background:#15151288}.question-bubble{position:absolute;font:800 88px "Noto Kufi Arabic";color:#f1d99b25;top:7px;right:36px}.face-emoji{font-size:91px;filter:drop-shadow(0 10px 15px #0009);transform:rotate(-7deg)}.mini-sticker{position:absolute;font-size:25px}.sticker-laugh{bottom:24px;right:27%}.sticker-eye{top:45px;left:24%}.number-display{width:118px;height:118px;border:1px solid #b3d3bf55;border-radius:50%;display:grid;place-content:center;text-align:center;background:#0e1714a8;box-shadow:0 0 45px #8fc5a51a}.number-display b{font:800 58px "Noto Kufi Arabic";color:#b6d7c2;line-height:1.1}.number-display span{font-size:10px;color:#99afa4}.number-spark{position:absolute;left:25%;top:35%;color:#b6d7c2;font-size:28px}.chaos-face{font-size:83px;filter:drop-shadow(0 10px 14px #0009)}.chaos-word{position:absolute;bottom:18px;color:#e9b17e;font:700 18px "Noto Kufi Arabic";transform:rotate(-8deg)}.game-info{padding:18px}.game-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.players{color:#c6b27f}.game-info h3{font:700 17px "Noto Kufi Arabic";margin:12px 0 6px}.game-info p{font-size:12px;line-height:1.9;color:var(--muted);min-height:46px;margin:0 0 13px}.btn-card{width:100%;display:flex;align-items:center;justify-content:space-between;background:#28271f;border:1px solid #b99b5a36;color:var(--gold2);padding:10px 13px;font-size:11px}.btn-card:disabled{opacity:.5;cursor:not-allowed}.category-strip{display:flex;gap:10px;flex-wrap:wrap}.category-strip span{border:1px solid var(--line);background:#1a1a17;border-radius:30px;padding:10px 15px;color:#d4d0c5;font-size:12px}.category-strip span:hover{border-color:#c7a75d77}
.how-section{margin-top:86px;background:linear-gradient(100deg,#191915,#242117 55%,#181815);border-block:1px solid var(--line);padding:58px 0}.how-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.step{border-right:1px solid #d1b36a55;padding:8px 17px;display:grid;gap:8px}.step>b{font:700 25px "Noto Kufi Arabic";color:var(--gold)}.step>span{font-weight:700;font-size:14px}.step small{color:var(--muted);font-size:11px;line-height:1.8}.footer{padding-block:27px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}.footer p{margin:0}.footer-brand .brand-mark{width:35px;height:35px;border-radius:11px;font-size:20px}
.modal-backdrop{position:fixed;inset:0;z-index:30;background:#050504d9;backdrop-filter:blur(9px);display:grid;place-items:center;padding:18px}.modal-backdrop[hidden]{display:none}.modal{width:min(580px,100%);max-height:min(90vh,850px);overflow:auto;position:relative;background:linear-gradient(145deg,#22211c,#151512);border:1px solid #cdb16b55;border-radius:22px;padding:29px;box-shadow:0 30px 100px #000b}.modal-close{position:absolute;left:17px;top:13px;border:0;background:none;color:#aaa;font-size:28px}.modal h2{font:700 23px "Noto Kufi Arabic";margin:0 0 8px}.modal-lead{font-size:12px;color:var(--muted);line-height:1.9;margin:0 0 20px}.field{display:grid;gap:7px;margin:13px 0}.field label{font-size:11px;color:#d6cba9}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#11110f;color:var(--text);padding:12px;font:inherit;font-size:13px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}.field textarea{min-height:66px;resize:vertical}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.choice{border:1px solid var(--line);border-radius:11px;padding:11px;background:#181815;color:var(--text);text-align:right;font-size:12px}.choice.selected{border-color:var(--gold);background:#b9943b1b;color:var(--gold2)}.modal-actions{display:flex;gap:9px;margin-top:20px}.modal-actions .btn{flex:1}.hint-box{padding:12px;border-radius:10px;background:#d7b66b12;color:#d8c590;font-size:11px;line-height:1.9;margin-top:13px}.game-topline{display:flex;justify-content:space-between;align-items:center;margin:12px 0 18px}.pill{font-size:10px;border:1px solid var(--line);border-radius:20px;padding:6px 10px;color:var(--gold2)}.turn-card{border:1px solid var(--line);background:#11110f;border-radius:15px;padding:18px;text-align:center;margin:14px 0}.turn-card .big-emoji{font-size:43px}.turn-card h3{font:700 17px "Noto Kufi Arabic";margin:7px 0}.turn-card p{font-size:11px;color:var(--muted);margin:0}.answer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}.answer-btn{background:#23231e;color:#eee6d4;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:11px}.answer-btn:hover{border-color:var(--gold);background:#c19b5018}.sticker-row{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0}.sticker-btn{font-size:22px;border:1px solid var(--line);border-radius:10px;background:#1a1a16;padding:6px 10px}.sticker-btn:hover{transform:translateY(-3px);border-color:var(--gold)}.guess-log{display:grid;gap:7px;margin-top:12px}.log-line{font-size:11px;color:var(--muted);border-right:2px solid #9d8956;padding:6px 9px;background:#ffffff05;border-radius:5px}.number-form{display:flex;gap:8px}.number-form input{min-width:0;flex:1}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#eee0b8;color:#17130b;padding:11px 18px;border-radius:10px;font-size:12px;font-weight:700;z-index:50;transition:.25s;box-shadow:0 8px 30px #0008}.toast.show{opacity:1;transform:translate(-50%,0)}.muted-note{font-size:10px;color:#938d7d;line-height:1.8}
@media(max-width:850px){.top-nav{gap:17px}.hero{grid-template-columns:1fr .8fr}.hero-art{transform:scale(.85)}.game-grid{grid-template-columns:repeat(2,1fr)}.game-card:last-child{display:none}.how-inner{grid-template-columns:1fr;gap:25px}}
@media(max-width:620px){.wrap{width:min(100% - 30px,480px)}.topbar{height:68px;padding:0 15px;gap:10px}.top-nav{display:none}.brand-mark{width:37px;height:37px}.brand-copy strong{font-size:14px}.brand-copy small{font-size:9px}.profile-chip{padding:4px}.profile-chip #profileName{display:none}.top-actions{gap:7px}.hero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:42px}.hero-copy{padding:0}.hero h1{font-size:37px;line-height:1.55;margin-top:15px}.hero-copy>p{font-size:13px}.hero-art{height:295px;transform:scale(.82);transform-origin:top center;margin-bottom:-45px}.hero-foot{gap:12px;font-size:9px;margin-top:23px}.quick-panel{grid-template-columns:1fr;padding:5px}.quick-item{padding:11px 12px}.quick-item+.quick-item{border-right:0;border-top:1px solid var(--line)}.quick-icon{width:37px;height:37px}.section{padding-top:57px}.section-heading h2,.how-inner h2{font-size:23px}.game-grid{grid-template-columns:1fr;gap:13px}.game-card:last-child{display:block}.game-visual{height:170px}.game-info{padding:15px}.category-strip{gap:7px}.category-strip span{font-size:10px;padding:8px 11px}.how-section{margin-top:58px;padding:40px 0}.steps{grid-template-columns:1fr;gap:9px}.step{grid-template-columns:45px 1fr;border-right:1px solid #d1b36a55;padding:7px 13px;align-items:center}.step>b{grid-row:span 2;font-size:19px}.step small{grid-column:2}.footer{flex-wrap:wrap;gap:14px}.footer p{order:3;width:100%}.modal{padding:25px 18px}.field-row{grid-template-columns:1fr}.answer-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Beginner-friendly game guide */
.guide-intro{max-width:760px;color:var(--muted);font-size:13px;line-height:2;margin:-8px 0 22px}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.guide-card{border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,#20201c,#171715);padding:20px;min-width:0}
.guide-icon{font-size:28px;margin-bottom:10px}
.guide-status{display:inline-block;border-radius:20px;padding:5px 9px;font-size:10px;margin-bottom:9px}
.status-ready{color:#b8dfbd;background:#29432b66;border:1px solid #82bd8b55}
.status-test{color:var(--gold2);background:#c5a45a17;border:1px solid #c5a45a44}
.status-dev{color:#d0c5ff;background:#8a78d21c;border:1px solid #a99be944}
.guide-card h3{font:700 16px/1.7 "Noto Kufi Arabic";margin:0 0 8px}
.guide-card p,.guide-card li{font-size:12px;color:#c3bfb4;line-height:2}
.guide-card p{margin:0 0 10px}
.guide-card>b{font-size:12px;color:var(--gold2)}
.guide-card ol{padding-right:19px;margin:7px 0 12px}
.guide-card li{padding-right:2px;margin-bottom:3px}
.guide-card small{display:block;border-top:1px solid var(--line);padding-top:10px;color:#a49d8c;font-size:10px;line-height:1.9}
.guide-room{grid-column:span 2}
@media(max-width:850px){.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-room{grid-column:span 2}}
@media(max-width:620px){.guide-grid{grid-template-columns:1fr}.guide-room{grid-column:auto}.guide-card{padding:17px}}

/* Polished interactions and the interactive game wheel */
:root{--ease-out:cubic-bezier(.2,.75,.25,1)}
::selection{background:#d7b66b55;color:#fff8e6}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.btn,.quick-item,.icon-btn,.profile-chip,.choice,.answer-btn,.sticker-btn{position:relative;overflow:hidden}
.btn:after,.quick-item:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#ffffff14 48%,transparent 72%);transform:translateX(-120%);transition:transform .65s var(--ease-out);pointer-events:none}
.btn:hover:after,.quick-item:hover:after{transform:translateX(120%)}
.btn:active{transform:scale(.98)}
.sound-on{box-shadow:0 0 0 3px #d7b66b20,0 0 18px #d7b66b25}
.hero-art .hero-card{animation:card-float 5s ease-in-out infinite}
.hero-art .card-back{animation-delay:-1.8s}
.hero-art .spark{animation:sparkle 2.8s ease-in-out infinite}
.hero-art .bubble-one{animation:bubble-float 4s ease-in-out infinite}
.hero-art .bubble-two{animation:bubble-float 4.6s ease-in-out infinite reverse}
@keyframes card-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes sparkle{0%,100%{opacity:.45;scale:.8;rotate:0deg}50%{opacity:1;scale:1.2;rotate:20deg}}
@keyframes bubble-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
.game-card,.guide-card,.quick-item,.category-strip span{transition:transform .28s var(--ease-out),border-color .28s,background .28s,box-shadow .28s}
.game-card:hover{box-shadow:0 18px 48px #0005}
.game-visual:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 20%,#fff0 42%,#ffffff0b 50%,transparent 70%);transform:translateX(-110%);transition:transform .7s}
.game-card:hover .game-visual:after{transform:translateX(110%)}
.reveal-on-scroll{opacity:0;transform:translateY(17px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}
.modal-backdrop{animation:backdrop-in .2s ease-out}
.modal{animation:modal-pop .32s var(--ease-out)}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes modal-pop{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
.wheel-head{text-align:center;padding-inline:12px}
.wheel-head h2{margin-top:8px}
.wheel-stage{width:min(330px,78vw);aspect-ratio:1;margin:12px auto 16px;position:relative;display:grid;place-items:center;filter:drop-shadow(0 15px 24px #0008)}
#gameWheel{width:100%;height:100%;display:block;transform:rotate(0deg);border-radius:50%;border:5px solid #e8cb83;box-shadow:0 0 0 7px #d7b66b19,0 0 36px #d7b66b21}
.wheel-pointer{position:absolute;z-index:3;top:-10px;left:50%;transform:translateX(-50%);color:#f8e5aa;font-size:30px;line-height:1;text-shadow:0 3px 8px #000b}
.wheel-center{position:absolute;z-index:2;width:76px;height:76px;border-radius:50%;display:grid;align-content:center;text-align:center;background:radial-gradient(circle at 35% 25%,#4d4025,#171510 75%);border:3px solid #f1d99b;color:#f6e4b0;font:800 14px "Noto Kufi Arabic";box-shadow:0 0 0 5px #16140f66,0 5px 15px #0009;pointer-events:none}
.wheel-center small{font-size:10px;color:#d7b66b}
.wheel-status{text-align:center;color:#e3d2a1;font-size:13px;min-height:25px;margin:8px 0 13px}
.wheel-spin{display:block;width:100%;font-size:14px;padding:14px}
.wheel-spin:disabled{opacity:.65;cursor:wait}
.wheel-result{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:17px;padding:14px;border:1px solid #d7b66b55;border-radius:15px;background:linear-gradient(120deg,#c19b5017,#ffffff04);animation:modal-pop .35s var(--ease-out)}
.wheel-result-icon{width:54px;height:54px;display:grid;place-items:center;font-size:30px;background:#d7b66b16;border:1px solid #d7b66b3d;border-radius:15px}
.wheel-result>div:nth-child(2){flex:1;min-width:125px}
.wheel-result small{color:var(--gold);font-size:10px}
.wheel-result h3{font:700 15px "Noto Kufi Arabic";margin:4px 0}
.wheel-result p{font-size:11px;color:var(--muted);margin:0}
.wheel-result .btn{width:100%;margin-top:4px}
.wheel-note{margin-top:15px;text-align:center}
.confetti-layer{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.confetti-layer i{position:absolute;top:-35px;left:var(--x);font-size:clamp(12px,2.5vw,25px);font-style:normal;color:var(--gold2);text-shadow:0 2px 8px #0008;animation:confetti-fall 2.2s var(--delay) cubic-bezier(.15,.65,.3,1) forwards}
.confetti-layer i:nth-child(3n){color:#b5d8c1}.confetti-layer i:nth-child(3n + 1){color:#dca078}.confetti-layer i:nth-child(4n){font-size:14px}
@keyframes confetti-fall{0%{transform:translate3d(0,-5vh,0) rotate(0);opacity:0}8%{opacity:1}100%{transform:translate3d(var(--drift),110vh,0) rotate(var(--spin));opacity:.1}}
@media(max-width:620px){.wheel-stage{width:min(300px,76vw)}.wheel-result{gap:10px}.wheel-result .btn{margin-top:8px}.wheel-head h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){.reveal-on-scroll{opacity:1;transform:none}.hero-art .hero-card,.hero-art .spark,.hero-art .bubble-one,.hero-art .bubble-two{animation:none}.confetti-layer{display:none}}

/* Welcome opening */
body.welcome-lock{overflow:hidden}
.welcome-screen{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,#14271d 0%,#0b100d 42%,#070807 100%);color:#effff2;opacity:1;transition:opacity .9s ease,visibility .9s ease}
.welcome-screen:before,.welcome-screen:after{content:"";position:absolute;inset:6%;border:1px solid #8de6a326;border-radius:28px;pointer-events:none}
.welcome-screen:after{inset:10%;border-color:#d7b66b20;border-radius:22px}
.welcome-screen.welcome-leaving{opacity:0;visibility:hidden;pointer-events:none}
.welcome-glow{position:absolute;width:min(72vw,620px);aspect-ratio:1;border-radius:50%;filter:blur(85px);opacity:.12;pointer-events:none}
.welcome-glow-one{background:#39f878;top:-28%;left:-15%;animation:welcome-breathe 7s ease-in-out infinite alternate}
.welcome-glow-two{background:#c7a75c;bottom:-35%;right:-12%;animation:welcome-breathe 8s ease-in-out infinite alternate-reverse}
.welcome-content{position:relative;z-index:1;width:min(88vw,700px);text-align:center;padding:32px 20px}
.welcome-emblem{width:76px;height:76px;margin:0 auto 20px;display:grid;place-items:center;border:1px solid #a2efb2aa;border-radius:25px 8px 25px 8px;color:#c6ffd3;font-size:42px;font-weight:900;text-shadow:0 0 24px #55ff7b75;box-shadow:0 0 35px #3bff7018,inset 0 0 25px #3bff7010;transform:rotate(-3deg)}
.welcome-kicker{font-size:clamp(13px,2.5vw,18px);letter-spacing:.08em;color:#e2c984}
.welcome-divider{display:flex;align-items:center;gap:12px;justify-content:center;margin:23px auto 17px;color:#a4f4b5}
.welcome-divider i{height:1px;width:68px;background:linear-gradient(90deg,transparent,#9beeb0)}
.welcome-divider i:last-child{transform:rotate(180deg)}
.welcome-intro{font-size:12px;color:#a9b9ad;letter-spacing:.1em;margin:0 0 16px}
.welcome-quote{min-height:2.6em;margin:0 auto;color:#c8ffce;font-size:clamp(22px,5.2vw,40px);line-height:1.9;text-shadow:0 0 10px #3cff6b7a,0 0 30px #39f87838;filter:drop-shadow(0 0 7px #7aff9c25)}
.welcome-source{margin:12px 0 0;color:#d9c58e;font-size:13px;min-height:22px}.welcome-closing{margin:8px 0 0;color:#c8ffce;font-size:clamp(14px,3vw,19px);font-weight:700;letter-spacing:.02em;text-shadow:0 0 12px #3cff6b45}
.welcome-progress{height:2px;width:min(280px,70%);margin:26px auto 18px;background:#ffffff12;border-radius:99px;overflow:hidden}
.welcome-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#4bdb77,#c5ffce);box-shadow:0 0 12px #54ff7b;transition:width .08s linear}
.welcome-note{color:#9eada2;font-size:12px;margin:0}
.welcome-skip{margin-top:26px;padding:9px 19px;border:1px solid #9beab04a;border-radius:999px;background:#a6f3b20a;color:#d8fce0;font:inherit;font-size:12px;cursor:pointer;transition:background .2s,border-color .2s}
.welcome-skip:hover{background:#70ed8c18;border-color:#a6f3b2a0}
@keyframes welcome-breathe{from{transform:scale(.88) translateY(-10px)}to{transform:scale(1.12) translateY(18px)}}
/* Community UI */
.community-section{scroll-margin-top:100px}
.community-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.community-card{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line,#ffffff18);border-radius:20px;background:linear-gradient(145deg,#ffffff08,#ffffff02);transition:transform .25s,border-color .25s,box-shadow .25s}
.community-card:hover{transform:translateY(-4px);border-color:#b8f3c56b;box-shadow:0 18px 42px #0003}
.community-symbol{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:15px;background:#92e8a617;border:1px solid #92e8a633;color:#b9f8c7;font-size:25px}
.community-label{font-size:11px;color:#b5d8bd}
.community-card h3{margin:7px 0;font-size:19px}
.community-card p{font-size:13px;line-height:1.8;color:var(--muted);min-height:48px}
.community-card .btn{margin-top:8px;font-size:12px}
.community-foot{display:flex;gap:9px;align-items:center;margin-top:18px;color:var(--muted);font-size:12px}
.community-status-dot{width:8px;height:8px;border-radius:50%;background:#9bdfaa;box-shadow:0 0 12px #70ef8c80}
.friend-list{display:grid;gap:9px;margin-top:18px;max-height:280px;overflow:auto}
.friend-row{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid #ffffff12;border-radius:13px;background:#ffffff05}
.friend-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#9cebb21a;color:#c4f8d0}
.friend-row>span:nth-child(2){flex:1;overflow-wrap:anywhere}
.friend-open,.friend-remove,.friend-select{border:1px solid #9cebb233;border-radius:9px;padding:7px 10px;background:#9cebb20b;color:#dff8e4;cursor:pointer;font:inherit;font-size:12px}
.friend-remove{border-color:#f09b9b30;color:#f2b5b5;font-size:17px}
.empty-friends,.chat-empty{padding:20px;text-align:center;color:var(--muted);font-size:13px}
.chat-messages{height:min(38vh,330px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid #ffffff12;border-radius:15px;background:#080a08}
.chat-bubble{max-width:90%;align-self:flex-start;padding:10px 13px;border-radius:13px 13px 13px 4px;background:#9cebb20d;border:1px solid #9cebb21c}
.chat-bubble small{color:#a8dcb4;font-size:10px}
.chat-bubble p{margin:5px 0 0;overflow-wrap:anywhere;font-size:13px;line-height:1.7}
.chat-compose{display:flex;gap:8px;margin-top:12px}
.chat-compose input{flex:1;min-width:0;border:1px solid #ffffff20;border-radius:12px;padding:12px;background:#ffffff06;color:var(--text,#f6f2e7);font:inherit}
.chat-compose .btn{white-space:nowrap}
.friend-select{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px;text-align:right}
.friend-select span{color:#b9edc5;font-size:11px}
.full-btn{width:100%;margin-top:12px}
@media(max-width:800px){.community-grid{grid-template-columns:1fr}.community-card{padding:18px}.community-card p{min-height:0}.top-nav{gap:10px}.top-nav a{font-size:11px}}
@media(max-width:540px){.welcome-content{padding:22px 14px}.welcome-emblem{width:64px;height:64px;font-size:35px}.welcome-screen:before{inset:3%}.welcome-screen:after{inset:6%}.community-card{gap:12px}.community-symbol{width:42px;height:42px;flex-basis:42px}.chat-compose .btn{padding-inline:13px}}
@media(prefers-reduced-motion:reduce){.welcome-glow{animation:none}.welcome-screen,.community-card{transition:none}}

/* Social accounts and new games */
.chat-mine{align-self:flex-end;background:#d7b66b18;border-color:#d7b66b35;border-radius:13px 13px 4px 13px}
#friendSections h3{font-size:13px;color:var(--gold2);margin:18px 0 8px}
.friend-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.friend-row b{font-size:12px;color:var(--gold2)}
#authFeedback{color:#e4d8b8;margin-top:12px;line-height:1.8}
#authSubmit:disabled{opacity:.6;cursor:wait}
#authFields [hidden]{display:none!important}


/* Prominent animated name rules notice in the account sign-in modal */
.auth-name-notice{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;margin:18px 0 20px;padding:16px 17px;overflow:hidden;text-align:center;border:1px solid rgba(241,217,155,.72);border-radius:15px;background:linear-gradient(115deg,rgba(215,182,107,.19),rgba(76,61,32,.34),rgba(215,182,107,.13));color:#ffe9ae;font-family:"Noto Kufi Arabic",sans-serif;font-size:clamp(14px,2.4vw,17px);font-weight:800;line-height:1.95;box-shadow:0 0 0 1px rgba(215,182,107,.08),0 0 24px rgba(215,182,107,.12);animation:authNoticeFloat 3.2s ease-in-out infinite,authNoticeGlow 2.6s ease-in-out infinite alternate}
.auth-name-notice:before{content:"";position:absolute;inset:-40% auto -40% -35%;width:28%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,245,207,.16),transparent);animation:authNoticeShine 4.2s ease-in-out infinite;pointer-events:none}
.auth-notice-icon,.auth-notice-spark{flex:0 0 auto;color:#f5d88c;font-size:22px;text-shadow:0 0 13px rgba(241,217,155,.65)}
.auth-notice-spark{font-size:19px;animation:authSparkTwinkle 1.7s ease-in-out infinite alternate}
@keyframes authNoticeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes authNoticeGlow{from{box-shadow:0 0 0 1px rgba(215,182,107,.08),0 0 15px rgba(215,182,107,.08)}to{box-shadow:0 0 0 1px rgba(215,182,107,.2),0 0 27px rgba(215,182,107,.2)}}
@keyframes authNoticeShine{0%,35%{left:-40%}75%,100%{left:130%}}
@keyframes authSparkTwinkle{from{opacity:.55;transform:scale(.88) rotate(-8deg)}to{opacity:1;transform:scale(1.12) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.auth-name-notice,.auth-name-notice:before,.auth-notice-spark{animation:none}}

/* Hussaini qasida library: the dock is independent from game modals so audio keeps playing. */
.audio-header-btn{display:inline-flex;align-items:center;gap:8px;margin-inline-start:14px;padding:10px 13px;border:1px solid rgba(216,181,103,.38);border-radius:14px;background:linear-gradient(135deg,rgba(214,177,94,.16),rgba(24,22,18,.92));color:#f3dca2;font:inherit;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:0 5px 22px #0003;transition:transform .2s,border-color .2s,box-shadow .2s}
.audio-header-btn:hover{transform:translateY(-2px);border-color:#e2c47d;box-shadow:0 0 24px #d6b15e25}
.audio-header-icon{font-size:21px;animation:audioNotePulse 2.2s ease-in-out infinite}
@keyframes audioNotePulse{0%,100%{transform:scale(1);text-shadow:0 0 0 transparent}50%{transform:scale(1.12);text-shadow:0 0 13px #e3c47a}}
.hussaini-library-backdrop{position:fixed;inset:0;z-index:120;background:rgba(4,4,4,.8);backdrop-filter:blur(12px);display:grid;place-items:center;padding:18px}
.hussaini-library-backdrop[hidden],.hussaini-player-dock[hidden]{display:none}
.hussaini-library{width:min(920px,100%);max-height:min(88vh,900px);overflow:auto;border:1px solid #b89a5c55;border-radius:26px;background:radial-gradient(ellipse at 90% 0%,#7253242b,transparent 38%),linear-gradient(145deg,#191815,#0d0d0c 70%);color:#f7f0e2;box-shadow:0 30px 100px #000b;padding:clamp(16px,3vw,28px);animation:audioLibraryIn .28s ease-out}
@keyframes audioLibraryIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.hussaini-library-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.audio-eyebrow{color:#d8b86d;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:800}.hussaini-library-head h2{margin:6px 0;font-size:clamp(24px,4vw,36px)}.hussaini-library-head h2 em{color:#e4c77e;font-style:normal}.hussaini-library-head p{margin:0;color:#bdb6a7;line-height:1.8}.audio-close{border:1px solid #ffffff20;border-radius:13px;background:#ffffff08;color:#fff;font-size:28px;width:42px;height:42px;cursor:pointer;flex-shrink:0}
.audio-feature{display:flex;align-items:center;gap:14px;margin:22px 0;padding:16px;border:1px solid #d3b36a2c;border-radius:18px;background:linear-gradient(100deg,#c6a35517,#ffffff04)}.audio-disc{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4df9b,#9c7836 55%,#342814);color:#211b10;font-size:27px;box-shadow:0 0 25px #d4b36720;animation:audioDiscSpin 12s linear infinite}.audio-feature b{display:block}.audio-feature small{display:block;margin-top:4px;color:#bcb4a5;line-height:1.6}.audio-equalizer{margin-inline-start:auto;display:flex;align-items:center;gap:4px;height:28px}.audio-equalizer i{width:4px;border-radius:5px;background:#d9b86d;animation:audioEq .7s ease-in-out infinite alternate}.audio-equalizer i:nth-child(1){height:10px}.audio-equalizer i:nth-child(2){height:23px;animation-delay:.2s}.audio-equalizer i:nth-child(3){height:15px;animation-delay:.4s}.audio-equalizer i:nth-child(4){height:26px;animation-delay:.1s}@keyframes audioEq{to{transform:scaleY(.35)}}@keyframes audioDiscSpin{to{transform:rotate(360deg)}}
.audio-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0}.audio-search{display:flex;align-items:center;gap:9px;flex:1 1 260px;border:1px solid #ffffff1c;background:#ffffff08;border-radius:13px;padding:0 12px;color:#d9b86d}.audio-search input{width:100%;min-width:0;padding:13px 0;background:transparent;border:0;outline:0;color:#fff;font:inherit}.audio-filters select{padding:12px;border:1px solid #ffffff22;border-radius:12px;background:#171613;color:#f5ebd4;font:inherit;max-width:100%}.audio-count{font-size:12px;color:#bdb5a5;white-space:nowrap}
.audio-reciter-chips{display:flex;gap:8px;overflow:auto;padding:2px 0 13px}.audio-chip{border:1px solid #ffffff1a;border-radius:999px;background:#ffffff07;color:#c9c1b0;padding:8px 12px;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}.audio-chip.is-active{border-color:#d9b86d88;background:#d9b86d19;color:#f5d990}
.audio-track-list{display:grid;gap:8px}.audio-track{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid #ffffff10;border-radius:15px;background:linear-gradient(100deg,#ffffff06,#ffffff02);transition:border-color .2s,background .2s}.audio-track:hover,.audio-track.is-playing{border-color:#d9b86d70;background:#d9b86d0d}.audio-track-number{width:26px;color:#8e8779;font-size:12px;font-variant-numeric:tabular-nums}.audio-track-play{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid #d9b86d55;background:#d9b86d18;color:#f0d48c;cursor:pointer;font-size:15px}.audio-track-info{min-width:0;flex:1}.audio-track-info b,.audio-track-info small{display:block;overflow:hidden;text-overflow:ellipsis}.audio-track-info b{font-size:14px}.audio-track-info small{margin-top:4px;color:#aaa292;font-size:12px}.audio-track-info small span{color:#d9b86d}.audio-track-status{color:#c7ad72;font-size:11px;white-space:nowrap}.audio-empty{padding:28px;text-align:center;color:#c0b8a8}.audio-footnote{margin:17px 0 0;color:#938b7c;font-size:12px;line-height:1.8}
.hussaini-player-dock{position:fixed;z-index:110;left:16px;bottom:16px;width:min(620px,calc(100vw - 32px));min-height:78px;display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid #d9b86d65;border-radius:19px;background:rgba(17,16,14,.96);backdrop-filter:blur(18px);box-shadow:0 14px 50px #0009;color:#f8efdc;overflow:hidden}.audio-dock-art{flex:0 0 auto;display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:linear-gradient(145deg,#e7cd86,#84652b);color:#1a160d;font-size:25px}.audio-dock-meta{min-width:0;flex:1}.audio-dock-meta b,.audio-dock-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audio-dock-meta b{font-size:13px}.audio-dock-meta small{color:#c5b99d;margin-top:3px;font-size:11px}.audio-live-line{display:flex;align-items:center;gap:5px;margin-top:5px;color:#8fbd92;font-size:10px}.audio-live-line i{width:6px;height:6px;border-radius:50%;background:#8fbd92;box-shadow:0 0 8px #8fbd92}.audio-dock-library,.audio-dock-hide{flex:0 0 auto;border:1px solid #ffffff1c;border-radius:10px;width:34px;height:34px;background:#ffffff08;color:#f2d58f;font-size:20px;cursor:pointer}.audio-player-frame{position:relative;flex:0 0 170px;width:170px;height:96px;overflow:hidden;border-radius:10px;background:#000;opacity:1;pointer-events:auto}.audio-player-frame iframe{width:100%;height:100%;border:0}.audio-source-note{display:none}.hussaini-player-dock.dock-compact{min-height:52px;width:220px;padding:8px}.hussaini-player-dock.dock-compact .audio-dock-art,.hussaini-player-dock.dock-compact .audio-live-line,.hussaini-player-dock.dock-compact .audio-player-frame{display:none}.hussaini-player-dock.dock-compact .audio-dock-meta b{max-width:105px}.hussaini-player-dock.dock-compact .audio-dock-meta small{display:none}
@media(max-width:760px){.audio-player-frame{flex-basis:126px;width:126px;height:71px}.hussaini-player-dock{gap:7px}.audio-dock-art{display:none}.audio-dock-library,.audio-dock-hide{width:30px;height:30px}.audio-header-btn{margin-inline-start:8px;padding:8px 9px;font-size:12px;gap:5px}.audio-header-btn .audio-header-icon{font-size:18px}.hussaini-library-backdrop{padding:8px}.hussaini-library{max-height:92vh;border-radius:20px;padding:14px}.audio-track{gap:8px;padding:9px 8px}.audio-track-number{display:none}.audio-track-status{font-size:10px}.hussaini-player-dock{left:10px;bottom:10px;width:min(390px,calc(100vw - 20px));padding:10px}.audio-feature{padding:12px}.audio-feature small{font-size:12px}}
@media(prefers-reduced-motion:reduce){.audio-header-icon,.audio-disc,.audio-equalizer i,.hussaini-library{animation:none}}

/* Offline local party games */
.offline-header-btn{display:inline-flex;align-items:center;gap:7px;margin-inline-start:8px;padding:10px 12px;border:1px solid #8de2a54d;border-radius:14px;background:linear-gradient(135deg,#77d9951b,#121b14);color:#c9f6d3;font:inherit;font-weight:800;cursor:pointer;white-space:nowrap;transition:transform .2s,border-color .2s,box-shadow .2s}
.offline-header-btn:hover{transform:translateY(-2px);border-color:#9cebb2;box-shadow:0 0 22px #75df9624}.offline-header-btn>span:first-child{font-size:22px}
.offline-hub-head{display:flex;gap:15px;align-items:flex-start}.offline-hub-icon{flex:0 0 58px;height:58px;display:grid;place-items:center;border:1px solid #8de2a555;border-radius:18px;background:#7bd99518;color:#a8f2ba;font-size:34px}.offline-hub-head h2{margin:8px 0 4px}.offline-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.offline-info-grid article{padding:15px;border:1px solid #ffffff16;border-radius:15px;background:#ffffff05}.offline-info-grid b{color:#c6f2ce}.offline-info-grid p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.8}.offline-game-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:15px}.offline-game-actions .btn{font-size:12px;padding-inline:10px}.offline-header-btn:focus-visible{outline:2px solid #a5f0b7;outline-offset:3px}
@media(max-width:760px){.offline-header-btn{margin-inline-start:5px;padding:8px 9px;font-size:12px;gap:4px}.offline-header-btn>span:first-child{font-size:18px}}
@media(max-width:540px){.offline-info-grid{grid-template-columns:1fr}.offline-game-actions{grid-template-columns:1fr}.offline-hub-head{gap:10px}.offline-hub-icon{flex-basis:45px;height:45px;font-size:27px}}

/* Clickable game-card guides and read-aloud controls */
.game-card{cursor:pointer}.game-card button{cursor:pointer}.guide-detail{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#ffffff05;line-height:1.9}.guide-detail h3{margin:0 0 8px;color:var(--gold2)}.guide-detail ol{padding-inline-start:24px;margin:8px 0}.guide-detail li{padding:4px 0}.audio-time-row{display:flex;align-items:center;gap:7px;margin-top:6px;color:#c5b99d;font-size:10px;font-variant-numeric:tabular-nums}.audio-time-row input{min-width:35px;width:100%;height:4px;accent-color:#d9b86d;cursor:pointer}.audio-dock-meta{align-self:center}.audio-player-frame #hussainiYTPlayer{width:100%;height:100%}
@media(max-width:760px){.audio-time-row{gap:4px;font-size:9px}.audio-time-row input{max-width:74px}}


/* Online multiplayer rooms, share links, QR invitations and board games */
.invite-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;margin:15px 0;padding:14px;border:1px solid #d9b86d45;border-radius:17px;background:#d9b86d0a}
.invite-panel>div{display:flex;flex-direction:column;gap:5px}.invite-panel small{color:var(--muted);font-size:11px}.room-code{font-size:25px;letter-spacing:.16em;color:var(--gold2);font-variant-numeric:tabular-nums}.room-qr{grid-column:1/-1;justify-self:center;width:140px;height:140px;padding:7px;border-radius:12px;background:#fff}.invite-panel>small{grid-column:1/-1;text-align:center}
.online-room-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.online-room-head h2{margin:7px 0}.room-player-list{margin:18px 0}.room-player-list h3{color:var(--gold2);margin-bottom:8px}.room-player-list .friend-row{display:flex;align-items:center;gap:10px}.room-player-list .friend-row>span:nth-child(2){flex:1}.room-bottom-actions{display:flex;gap:9px;margin-top:12px}.room-bottom-actions .btn{flex:1}
.online-game-board{margin-top:18px;padding:15px;border:1px solid #d9b86d38;border-radius:18px;background:#ffffff05}.online-game-board>h3{margin:0 0 12px;color:var(--gold2)}.turn-banner{padding:10px;border-radius:12px;background:#d9b86d12;color:#f2d995;text-align:center;font-weight:800}.snakes-board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;margin:12px 0}.snake-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;min-width:0;border:1px solid #ffffff12;border-radius:5px;background:#ffffff07;font-size:clamp(8px,1.8vw,12px)}.snake-cell b{font-size:clamp(8px,1.8vw,12px)}.snake-cell i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#d9b86d;color:#15120b;font-size:10px;font-style:normal;font-weight:900;margin-top:2px}.ladder-cell{background:#77d99519;border-color:#77d99550}.snake-cell-mark{background:#f08b7c16;border-color:#f08b7c4d}
.domino-chain{display:block;overflow-wrap:anywhere;padding:12px;border-radius:10px;background:#0004;color:#f5d991}.domino-hand{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.domino-tile{display:flex;align-items:center;gap:8px;min-width:57px;padding:9px;border:1px solid #d9b86d80;border-radius:9px;background:#f5e9c8;color:#17140d;font-weight:900;cursor:pointer}.domino-tile i{height:24px;border-left:1px solid #897345}.domino-tile:disabled,.color-card:disabled{opacity:.45;cursor:not-allowed}.color-card{display:flex;flex-direction:column;gap:7px;min-width:62px;align-items:center;padding:12px 9px;border:2px solid #fff8;border-radius:12px;color:white;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.color-card b{font-size:20px}.color-0{background:#a52c2c}.color-1{background:#245ba5}.color-2{background:#267347}.color-3{background:#b38a17;color:#15120b}
.tavla-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:14px 0}.tavla-point{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:58px;padding:8px 3px;border:1px solid #d9b86d35;border-radius:8px;background:linear-gradient(145deg,#6b4e2b55,#191613);color:#f5e7c8;cursor:pointer}.tavla-point span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#d9b86d;color:#17130a;font-weight:900}
.question-panel{padding:14px;border:1px solid #ffffff16;border-radius:14px;background:#0002}.question-panel>span{font-size:11px;color:var(--gold2)}.question-panel h3{line-height:1.8}.question-panel input{width:100%;margin:8px 0;padding:13px;border:1px solid #ffffff20;border-radius:11px;background:#111;color:#fff;font:inherit}.room-feed{max-height:150px;overflow:auto;margin-top:14px}.room-feed p{padding:7px 10px;border-radius:8px;background:#ffffff07;font-size:12px;line-height:1.8}
@media(max-width:540px){.invite-panel{grid-template-columns:1fr 1fr;padding:10px}.invite-panel .btn{font-size:11px;padding:10px 6px}.room-code{font-size:21px}.room-qr{width:125px;height:125px}.online-game-board{padding:10px}.tavla-track{gap:4px}.tavla-point{min-height:50px}.snakes-board{gap:2px}}


/* In-room game instructions with visual cues and device text-to-speech */
.game-guide-panel{margin:12px 0 16px}
.game-guide-panel[hidden]{display:none!important}
.game-guide-panel .guide-detail{background:linear-gradient(145deg,#d9b86d12,#ffffff04);border-color:#d9b86d45}
.game-guide-panel .guide-detail h4{margin:14px 0 6px;color:#f2d995}
.game-guide-panel .guide-visual{display:grid;place-items:center;min-height:88px;margin:-2px 0 12px;border:1px solid #d9b86d38;border-radius:14px;background:radial-gradient(circle at 50% 45%,#d9b86d1e,transparent 65%);font-size:42px;letter-spacing:7px}
.game-guide-panel .guide-mode{padding:10px 12px;border-radius:10px;background:#d9b86d0d}
.game-guide-panel .guide-detail ol{line-height:1.9}
.game-guide-panel .guide-detail li::marker{color:#d9b86d;font-weight:800}


/* Clear visual hierarchy for the reorganized guide */
.guide-group-title{font:700 18px/1.8 "Noto Kufi Arabic";color:var(--gold2);margin:24px 0 14px}
.guide-group-break{grid-column:1/-1;padding:12px 16px;border:1px solid #a99be933;border-radius:12px;background:#8a78d20c}
.guide-group-break .guide-group-title{margin:0 0 4px;color:#d0c5ff;font-size:15px}
.guide-group-break p{margin:0;color:var(--muted);font-size:12px;line-height:1.8}
.guide-room{grid-column:1/-1;max-width:760px;width:100%;margin-inline:auto}


/* In-game illustrated walkthrough: local and online game modes */
.in-game-tutorial{margin:0 0 16px;padding:12px;border:1px solid #d9b86d55;border-radius:17px;background:linear-gradient(145deg,#292419,#171714);color:#f7f0df}
.in-game-tutorial-bar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.in-game-tutorial-bar b,.in-game-tutorial-bar small{display:block}
.in-game-tutorial-bar b{font-size:13px;color:#f4d994}
.in-game-tutorial-bar small{margin-top:3px;color:#aaa18f;font-size:10px}
.in-game-tutorial-bar button{padding:8px 11px;border:1px solid #d9b86d65;border-radius:10px;background:#d9b86d13;color:#f5dfa4;font:inherit;font-size:11px;white-space:nowrap}
.in-game-tutorial-body{padding-top:10px}
.in-game-tutorial-body[hidden]{display:none}
.tutorial-progress{display:flex;justify-content:space-between;gap:8px;margin:4px 0 10px;color:#e5cd91;font-size:10px}
.tutorial-picture{display:grid;gap:12px;min-height:142px;padding:14px;border:1px solid #d9b86d35;border-radius:15px;background:radial-gradient(circle at 15% 20%,#d9b86d20,transparent 38%),linear-gradient(130deg,#202b24,#121714);align-content:center;text-align:center}
.tutorial-picture-main{display:flex;align-items:center;justify-content:center;gap:11px;color:#f7e7bd}
.tutorial-picture-main>span{display:grid;place-items:center;width:55px;height:55px;border:1px solid #d9b86d65;border-radius:16px;background:#d9b86d15;font-size:31px}
.tutorial-picture-main>b{font:700 15px "Noto Kufi Arabic"}
.tutorial-picture-items{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap}
.tutorial-picture-items span{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 11px;border:1px solid #ffffff22;border-radius:9px;background:#ffffff0b;color:#eee4ce;font-size:11px}
.tutorial-picture-caption{color:#a79e8b;font-size:9px}
.tutorial-step-text{margin:11px 2px;color:#f4eddd;font-size:13px;line-height:1.95}
.tutorial-audio-actions,.tutorial-nav{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.tutorial-audio-actions .btn,.tutorial-nav .btn{flex:1;min-width:0;padding:10px 8px;font-size:10px}
.tutorial-device-note{display:block;margin-top:9px;color:#a69c88;font-size:9px;line-height:1.8}
.game-guide-panel[hidden]{display:none}
@media(max-width:540px){.in-game-tutorial{padding:10px}.tutorial-picture{min-height:124px;padding:10px}.tutorial-picture-main>span{width:46px;height:46px;font-size:26px}.tutorial-picture-items span{font-size:10px;padding:6px 8px}.tutorial-audio-actions,.tutorial-nav{gap:5px}.tutorial-audio-actions .btn,.tutorial-nav .btn{font-size:9px;padding:9px 5px}}

.room-field-hint{display:block;color:#c6b990;font-size:10px;line-height:1.8;margin-top:4px}
.room-create-status{margin:10px 0 0;font-size:12px;line-height:1.9;color:#d9d2bd;white-space:pre-wrap}
.room-create-status:empty{display:none}
.room-create-status[data-state="error"]{padding:10px 12px;border:1px solid #e58c8c66;border-radius:10px;background:#9d33331a;color:#ffd0d0}
.room-create-status[data-state="info"]{padding:9px 0;color:#e5d49e}
.room-readiness{margin:16px 0;padding:14px;border:1px solid #d9b86d55;border-radius:14px;background:#d9b86d0d}
.room-readiness>b{display:block;color:#f3d891;font-size:14px}
.room-readiness>p{margin:7px 0 0;color:#eee5d2;font-size:12px;line-height:1.9}
.room-readiness>small{display:block;margin-top:7px;color:#ffceaf;font-size:10px}
#startOnlineGame:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.55)}


/* Installed-app and compact-screen polish */
html{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
.topbar{padding-top:env(safe-area-inset-top)}
.modal-backdrop,.hussaini-library-backdrop{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
.modal{max-height:min(90dvh,850px)}
.hussaini-library{max-height:min(88dvh,900px)}
@media(max-width:850px){.game-card:last-child{display:block}}
@media(max-width:620px){
  .topbar{padding-inline:10px;gap:7px}
  .brand{gap:7px;min-width:0}
  .brand-copy strong{font-size:13px;white-space:nowrap}
  .brand-copy small{font-size:8px;white-space:nowrap}
  .audio-header-btn{margin-inline-start:0;padding:7px 9px;gap:5px;border-radius:11px;font-size:10px}
  .audio-header-icon{font-size:18px}
  .top-actions{gap:5px;flex-shrink:0}
  .icon-btn{width:34px;height:34px}
  .hero{padding-top:28px}
  .section-heading{gap:10px;align-items:flex-start}
  .text-link{max-width:44%;text-align:left;line-height:1.7}
  .game-info p{min-height:0}
  .modal-backdrop,.hussaini-library-backdrop{padding-inline:10px}
  .modal{width:100%;border-radius:17px;padding:24px 15px}
}
@media(max-width:390px){
  .brand-mark{width:32px;height:32px;border-radius:10px;font-size:20px}
  .brand-copy strong{font-size:11px}
  .brand-copy small{font-size:7px}
  .audio-header-btn{padding:6px 7px}
  .audio-header-btn>span:last-child{display:none}
  .profile-chip{display:none}
}
@media(orientation:landscape) and (max-height:500px){
  .welcome-content{padding:12px 14px}
  .welcome-emblem{width:46px;height:46px;margin-bottom:8px;font-size:25px}
  .welcome-divider{margin:9px auto 7px}
  .welcome-progress{margin:10px auto}
  .welcome-skip{margin-top:10px}
  .hero{min-height:0}
  .modal{max-height:84dvh}
}


/* Stable centered opening screen across mobile, desktop and desktop-mode browsers */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body.welcome-lock{overflow:hidden!important;overscroll-behavior:none}
body.welcome-lock>:not(#welcomeScreen){visibility:hidden!important;pointer-events:none!important}
#welcomeScreen.welcome-screen{
  position:fixed!important;inset:0!important;
  width:100vw!important;max-width:100%!important;
  height:100vh!important;height:100dvh!important;min-height:100vh;min-height:100dvh;
  margin:0!important;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;overflow:hidden!important;transform:none!important;
}
#welcomeScreen .welcome-content{
  position:relative!important;left:auto!important;right:auto!important;
  flex:0 1 680px!important;width:calc(100% - 32px)!important;max-width:680px!important;
  min-width:0!important;margin:0 auto!important;padding:clamp(18px,4vh,34px) clamp(12px,4vw,24px)!important;
  text-align:center!important;box-sizing:border-box!important;
}
#welcomeScreen .welcome-emblem{width:clamp(68px,9vh,88px);height:clamp(68px,9vh,88px);font-size:clamp(36px,5vh,48px);margin:0 auto clamp(12px,2.5vh,22px)!important;flex-shrink:0}
#welcomeScreen .welcome-kicker{display:block;text-align:center;line-height:1.9}
#welcomeScreen .welcome-divider{width:100%;margin:clamp(12px,2.5vh,23px) auto clamp(10px,2vh,17px)!important}
#welcomeScreen .welcome-intro,#welcomeScreen .welcome-quote,#welcomeScreen .welcome-source,#welcomeScreen .welcome-note{text-align:center!important;max-width:100%;overflow-wrap:anywhere}
#welcomeScreen .welcome-quote{font-size:clamp(23px,3.5vw,40px);line-height:1.85;min-height:2.4em;margin-inline:auto!important}
#welcomeScreen .welcome-progress{margin:clamp(16px,3vh,26px) auto clamp(12px,2vh,18px)!important}
#welcomeScreen .welcome-skip{display:inline-block;margin:clamp(14px,2.5vh,26px) auto 0!important}
@media(max-width:480px){
  #welcomeScreen .welcome-content{width:calc(100% - 28px)!important;padding:20px 12px!important}
  #welcomeScreen .welcome-quote{font-size:clamp(23px,6vw,30px);line-height:1.9}
  #welcomeScreen .welcome-kicker{font-size:clamp(12px,3.5vw,16px);letter-spacing:0}
  #welcomeScreen .welcome-divider i{width:min(18vw,68px)}
}
@media(orientation:landscape) and (max-height:500px){
  #welcomeScreen .welcome-content{padding:8px 16px!important}
  #welcomeScreen .welcome-emblem{width:44px;height:44px;font-size:24px;margin-bottom:6px!important}
  #welcomeScreen .welcome-divider{margin:5px auto!important}
  #welcomeScreen .welcome-intro{margin-bottom:4px}
  #welcomeScreen .welcome-quote{font-size:clamp(18px,4vh,26px);line-height:1.45;min-height:1.5em}
  #welcomeScreen .welcome-source{margin-top:4px;font-size:11px}
  #welcomeScreen .welcome-progress{margin:7px auto!important}
  #welcomeScreen .welcome-note{font-size:10px}
  #welcomeScreen .welcome-skip{margin-top:7px!important;padding:6px 15px}
}


/* Fixed, centered interaction mode: no lateral drift and no background interaction */
html,body{width:100%;max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
body{position:relative}
body.welcome-lock{position:fixed;inset:0;width:100%;height:100%;overflow:hidden!important;touch-action:pan-y}
#welcomeScreen.welcome-screen{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;transform:none!important;translate:none!important;overflow:hidden!important}
#welcomeScreen .welcome-content{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;translate:none!important;width:min(680px,calc(100vw - 32px))!important;max-width:680px!important;margin:0 auto!important;text-align:center!important}
#welcomeScreen .welcome-quote,#welcomeScreen .welcome-source,#welcomeScreen .welcome-progress,#welcomeScreen .welcome-note,#welcomeScreen .welcome-kicker{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
body:not(.welcome-lock) #welcomeScreen{display:none!important}
/* Keep the homepage viewport stable rather than sliding between horizontal positions */
main,.topbar,.footer,.wrap,.hero,.quick-wrap,.section,.how-section{max-width:100%;min-width:0}
main,.topbar,.footer{transform:none!important;translate:none!important;left:auto!important;right:auto!important}
.reveal-on-scroll,.reveal-on-scroll.is-visible{opacity:1!important;transform:none!important;translate:none!important;transition:none!important}
.hero-art .hero-card,.hero-art .spark,.hero-art .bubble-one,.hero-art .bubble-two{animation:none!important;translate:none!important}
/* All dialogs are fixed to the viewport center; the backdrop is the only active layer */
body.modal-open{overflow:hidden!important;overscroll-behavior:none!important}
body.modal-open> :not(#modalBackdrop):not(#toast){pointer-events:none!important;user-select:none}
#modalBackdrop.modal-backdrop{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;min-height:0!important;display:grid!important;place-items:center!important;align-items:center!important;justify-items:center!important;overflow:hidden!important;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;transform:none!important;translate:none!important;z-index:9990!important;touch-action:auto}
#modalBackdrop[hidden]{display:none!important}
#modalBackdrop .modal{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;translate:none!important;margin:0 auto!important;width:min(580px,100%)!important;max-width:580px!important;max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-gutter:stable;animation:none!important}
#modalBackdrop .in-game-tutorial{width:100%;max-width:100%;margin-inline:auto;text-align:center}
#modalBackdrop .in-game-tutorial-bar{justify-content:center;flex-wrap:wrap;text-align:center}
#modalBackdrop .tutorial-picture,#modalBackdrop .tutorial-progress,#modalBackdrop .tutorial-step-text,#modalBackdrop .tutorial-device-note{text-align:center;margin-inline:auto}
#modalBackdrop .tutorial-audio-actions,#modalBackdrop .tutorial-nav{justify-content:center;flex-wrap:wrap}
#modalBackdrop .field label{text-align:right}
#modalBackdrop .modal-actions{justify-content:center}
@media(max-width:620px){#modalBackdrop.modal-backdrop{padding:10px!important}#modalBackdrop .modal{width:100%!important;max-height:calc(100dvh - 20px)!important;border-radius:17px;padding:22px 15px!important}}
@media(prefers-reduced-motion:reduce){#welcomeScreen *,#modalBackdrop *{animation:none!important;transition:none!important}}
.online-wheel-panel{text-align:center}
.online-wheel-visual{width:min(260px,72vw);aspect-ratio:1;margin:18px auto;border-radius:50%;display:grid;place-items:center;border:7px solid #e8cb83;box-shadow:0 0 0 6px #d7b66b20,0 12px 35px #0008;background:conic-gradient(#40371f 0deg 36deg,#243d35 36deg 72deg,#49302c 72deg 108deg,#34304c 108deg 144deg,#3d3b25 144deg 180deg,#243d35 180deg 216deg,#49302c 216deg 252deg,#34304c 252deg 288deg,#40371f 288deg 324deg,#243d35 324deg 360deg);transition:transform 6.8s cubic-bezier(.08,.72,.1,1)}
.online-wheel-visual span{width:72px;height:72px;display:grid;place-items:center;border-radius:50%;border:3px solid #f1d99b;background:#171510;font-size:39px;box-shadow:0 4px 20px #0009}