@import "https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700;800&display=swap";:root{--gold:#e9c878;--cream:#faf1d5;--muted:#b5c8b9;--green:#063c2a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--cream);background:#031f18;margin:0;font-family:Noto Kufi Arabic,Tahoma,Arial,sans-serif}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible{outline-offset:5px;outline:2px solid #ffdf8d}a:focus-visible{outline-offset:5px;outline:2px solid #ffdf8d}[tabindex]:focus-visible{outline-offset:5px;outline:2px solid #ffdf8d}a{color:inherit}button{border:0}.ambient{pointer-events:none;z-index:0;background:radial-gradient(at 50% 25%,#14643b44,#0000 65%);position:fixed;inset:0;overflow:hidden}.ambient i{background:#ffe49c;border-radius:50%;width:3px;height:3px;animation:8s ease-in-out infinite alternate float;position:absolute;box-shadow:0 0 12px #d9c575}@keyframes float{0%{opacity:.12;transform:translateY(20px)}to{opacity:.7;transform:translateY(-45px)}}.portal{text-align:center;background:radial-gradient(at 50% 38%,#3d7e3b65,#0000 60%);flex-direction:column;justify-content:center;align-items:center;min-height:100svh;padding:35px 22px 85px;display:flex;position:relative;overflow:hidden}.border-ornament{pointer-events:none;border:1px solid #c6ac6040;position:absolute;inset:18px}.border-ornament:before{content:"";border:1px solid #b9994e18;position:absolute;inset:6px}.school{color:#e9e8cc;font-size:12px;line-height:2}.eyebrow{color:var(--gold);letter-spacing:1px;font-size:11px}.portal>.eyebrow{margin:22px 0 0}.portal-art{isolation:isolate;width:min(610px,100vw);margin:-1px 0 -18px;position:relative}.flag-art{filter:drop-shadow(0 24px 30px #00160d);width:100%;height:auto;overflow:visible}.cloth{transform-origin:570px 200px;animation:7s ease-in-out infinite breeze}.hex{cursor:pointer;transition:fill .8s,filter .3s}.hex:hover{filter:brightness(1.5)}.hex.new-cell{animation:2s ease-out 2 cell-light}@keyframes cell-light{0%{filter:brightness()drop-shadow(0 0 #ffdf8b)}45%{filter:brightness(2.2)drop-shadow(0 0 16px #ffdf8b)}to{filter:brightness()drop-shadow(0 0 3px #ffdf8b)}}@keyframes breeze{0%,to{transform:skewY(-1deg)scaleY(.99)}50%{transform:skewY(1deg)scaleY(1.01)}}.fingerprint{color:#f0d68c;z-index:3;background:radial-gradient(circle,#195638,#03281c 75%);border:1px solid #ecd080;border-radius:50%;place-items:center;width:112px;height:112px;animation:2.8s ease-in-out infinite heartbeat;display:grid;position:absolute;top:calc(50% - 64px);left:calc(50% - 56px);overflow:hidden;box-shadow:0 0 0 8px #082d20cc,0 0 0 9px #edcf8270,0 0 45px #d8b66166}.fingerprint svg{width:69px;height:77px}.scan{background:#ffeaa4;height:2px;animation:3s linear infinite scan;position:absolute;left:13%;right:13%;box-shadow:0 0 13px 4px #f2ce7b77}.light-ring{pointer-events:none;border:1px solid #eed28170;border-radius:50%;width:126px;height:126px;position:absolute;top:calc(50% - 71px);left:calc(50% - 63px)}@keyframes scan{0%,to{opacity:0;top:15%}40%,70%{opacity:.9}90%{top:85%}}@keyframes heartbeat{50%{transform:scale(1.035);box-shadow:0 0 0 8px #082d20cc,0 0 0 9px #edcf82bb,0 0 70px #d8b66199}}.opening .fingerprint{animation:none;transform:scale(1.09);box-shadow:0 0 140px 60px #ffe5a388}.opening .light-ring{animation:1.4s ease-out forwards ripple}.opening .portal-art{filter:brightness(1.45);transition:filter 1.2s}.opening .hex{fill:#dec078;transition:fill 1s}@keyframes ripple{to{opacity:0;transform:scale(7)}}h1,h2,p{margin-top:0}.portal h1{color:#0000;text-shadow:0 4px 35px #dfc97913;background:linear-gradient(105deg,#b58b3f,#fff0b7,#dfbf72);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(49px,8vw,77px);line-height:1.5}.portal-tagline{color:#efdfb6;margin:0 0 18px;font-size:18px}.live-pill{color:#d9dab9;background:#001b1440;border:1px solid #bda25c38;border-radius:30px;align-items:center;gap:8px;padding:8px 16px;font-size:11px;display:inline-flex}.live-pill>span{background:#dfbc63;border-radius:50%;width:6px;height:6px;animation:2s infinite heartbeat;box-shadow:0 0 12px #e3c879}.enter{color:#f0d695;background:0 0;margin-top:20px;padding:8px;font-size:16px}.enter span{margin-right:8px;animation:12s linear infinite rotate;display:inline-block}@keyframes rotate{to{transform:rotate(360deg)}}.sound-hint{color:#8fae99;margin:2px 0 16px;font-size:10px}.credit{color:#a3bbaa;font-size:10px;line-height:2.3}.credit strong{color:#e7e3c6;font-size:12px;font-weight:500;display:block}.sound{z-index:20;color:#f3df9c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#052f23ed;border:1px solid #c6a75b;border-radius:40px;align-items:center;gap:10px;padding:12px 20px;font-size:11px;display:flex;position:fixed;bottom:20px;left:20px;box-shadow:0 4px 20px #0006}.equalizer{align-items:center;gap:3px;height:18px;display:flex}.equalizer i{background:#daba69;border-radius:2px;width:3px;height:5px}.playing .equalizer i{animation:.7s infinite alternate equalizer}.playing .equalizer i:nth-child(2){animation-delay:-.2s}.playing .equalizer i:nth-child(3){animation-delay:-.4s}.playing .equalizer i:nth-child(4){animation-delay:-.1s}@keyframes equalizer{to{height:18px}}.sound-error{color:#ffe7a9;z-index:21;background:#312c1c;border-radius:10px;max-width:330px;padding:10px;font-size:10px;position:fixed;bottom:76px;left:20px;right:20px}main{z-index:1;max-width:1100px;margin:auto;padding:0 30px;position:relative}nav{border-bottom:1px solid #bc9e4d33;justify-content:space-between;align-items:center;padding:24px 0;display:flex}.brand{color:var(--gold);font-size:23px;font-weight:700;text-decoration:none}.brand span{margin-right:5px;font-size:20px}.small-button{color:#f2dfb0;background:0 0;border:1px solid #d4b66d66;border-radius:30px;padding:10px 18px;font-size:11px}.live-hero{text-align:center;padding:44px 0 50px;scroll-margin-top:10px}.live-hero h1{color:#efd69b;margin:9px 0 10px;font-size:clamp(30px,5vw,52px);line-height:1.6}.lead{color:#bdcbb9;font-size:13px}.board-shell{max-width:750px;margin:-15px auto;position:relative}.board-stats{justify-content:center;align-items:center;gap:30px;margin-top:0;display:flex}.board-stats>div{flex-direction:column;gap:5px;display:flex}.board-stats strong{color:var(--gold);font-size:32px;line-height:1.6}.board-stats small{color:#7b9e85;font-size:15px}.board-stats span{color:#bdc8ae;font-size:10px}.board-stats .divider{background:#bba06044;width:1px;height:46px}.progress{background:#354c37;border-radius:8px;max-width:330px;height:4px;margin:20px auto 12px;overflow:hidden}.progress span{background:linear-gradient(90deg,#b18534,#f6db90);height:100%;transition:width 1.2s;display:block;box-shadow:0 0 15px #f3d583}.cell-hint{color:#a4b9a5;font-size:10px;line-height:2}.legend-dot{background:#d9b966;border-radius:2px;width:7px;height:7px;margin:0 7px;display:inline-block}.legend-dot.empty{background:#17432d;border:1px solid #9a864b}.gold-button{color:#123923;background:linear-gradient(110deg,#bd9145,#f5dfa0,#d3ad5b);border-radius:12px;justify-content:center;align-items:center;gap:25px;padding:17px 25px;font-size:13px;font-weight:700;display:flex;box-shadow:0 7px 25px #d5b26015}.gold-button:hover{filter:brightness(1.1)}.hero-cta{margin:23px auto 0}.article{background:linear-gradient(90deg,#0000,#b99d5110,#0000);border-block:1px solid #b99c5540;align-items:center;gap:25px;margin:0 auto 60px;padding:27px 35px;display:flex}.article>span{color:#ccac63;font-size:60px;line-height:1}.article .eyebrow{margin-bottom:9px}.article p:last-child{color:#ccd2bc;margin:0;font-size:13px;line-height:2.1}.participate{max-width:720px;margin:0 auto 65px;scroll-margin-top:25px}.section-title>span{color:#b49c63;font-size:11px}.section-title h2{color:#eddbb0;margin:10px 0 12px;font-size:clamp(22px,3vw,31px)}.section-title p{color:#aabfac;font-size:12px;line-height:2}.form-shell{background:linear-gradient(145deg,#123c2b,#07291f);border:1px solid #9d8f5144;border-radius:20px;padding:27px}.tabs{gap:10px;margin-bottom:27px;display:flex}.tabs button{color:#c2cfb8;background:#001e1655;border:1px solid #c8ac5b33;border-radius:10px;flex:1;padding:14px 5px;font-size:12px}.tabs button[aria-pressed=true]{color:#f6dda0;background:#b5933430;border-color:#d9b562}.presets{gap:9px;margin-bottom:22px;display:grid}.presets button{text-align:right;color:#e1e0c4;background:#ecd48a0e;border:1px solid #bea66344;border-radius:10px;padding:12px;font-size:11px;line-height:2}.presets button:hover{background:#ecd48a22}label{color:#e5dbb7;justify-content:space-between;margin:18px 0 8px;font-size:12px;display:flex}label small{color:#97aa91;font-size:10px}input,textarea{color:#f2e8cb;background:#032118aa;border:1px solid #74927377;border-radius:10px;width:100%;padding:14px;font-size:13px;line-height:2}input::placeholder,textarea::placeholder{color:#708e7c}textarea{resize:vertical;min-height:150px}input:focus,textarea:focus{border-color:#ceac63;outline:1px solid #ceac63}.privacy-note{color:#9eb198;margin:10px 0 20px;font-size:10px;line-height:1.9}form .gold-button{width:100%}.error{color:#ffd4bc;background:#5a33294d;border-radius:10px;padding:12px;font-size:12px}.error button,.retry{color:#f4d998;background:0 0;font-size:11px;text-decoration:underline}.success{color:#f7e5ab;background:#53602955;border:1px solid #d8b76677;border-radius:12px;max-width:550px;margin:20px auto;padding:15px;font-size:12px}.messages-section{max-width:850px;margin:0 auto 50px}.names{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px;display:grid}.names button{text-align:right;color:#f0dfb7;overflow-wrap:anywhere;background:linear-gradient(145deg,#31432b,#0b2c20);border:1px solid #baa15d66;border-radius:12px;padding:15px;font-size:12px}.names span{color:#d1b16a;margin-left:8px}.names small{color:#9faf91;margin-top:7px;font-size:9px;display:block}.empty-state{color:#a1b39a;text-align:center;border:1px dashed #b8a06455;border-radius:15px;padding:40px 15px;font-size:13px;line-height:2.2}.pagination{justify-content:center;align-items:center;gap:18px;margin:15px;font-size:11px;display:flex}.pagination button{color:#ecd59b;background:#27432d;border-radius:5px;padding:8px 14px}.pagination button:disabled{cursor:default}footer{text-align:center;background:radial-gradient(#36663b33,#0000 70%);padding:40px 5px 110px}.footer-mark{color:#bfa361;font-size:35px}footer h2{color:#e9ce8c;margin:12px 0;font-size:32px}footer p{color:#afc3ab;font-size:12px;line-height:2.2}footer small{color:#8ca58d;font-size:10px}.footer-rule{background:#c4a86655;width:100px;height:1px;margin:25px auto}details{color:#839d85;max-width:400px;margin:20px auto;font-size:9px}details a{margin-top:12px;line-height:2;display:block}summary{cursor:pointer}dialog{color:#f7ecd0;text-align:center;background:radial-gradient(at top,#2a5f36,#062e21 75%);border:1px solid #d2b66b;border-radius:22px;width:calc(100% - 36px);max-width:520px;max-height:85svh;padding:45px 28px;box-shadow:0 20px 100px #000a}dialog::backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#001c13d9}.dialog-close{color:#e5d09b;background:0 0;font-size:28px;position:absolute;top:12px;left:15px}.message-seal{color:#e9ce82;font-size:45px;line-height:1.5;display:block}dialog h2{color:#f0d68f;margin-top:15px;font-size:26px}.message-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:2.4}.message-author{color:#e7c985;overflow-wrap:anywhere;border-top:1px solid #ccac5b44;padding-top:22px}dialog small{color:#8eaa90;margin-top:18px;font-size:10px;display:block}.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti i{background:#f6d78c;width:5px;height:11px;animation:2.5s ease-out forwards confetti;position:absolute;top:10%}.confetti i:nth-child(2n){background:#83b38b;width:8px;height:8px}@keyframes confetti{0%{opacity:0;translate:0 -15px}15%{opacity:1}to{opacity:0;translate:40px 350px;rotate:500deg}}.celebrating .board-shell{filter:brightness(1.2)}@media (max-width:600px){.portal{justify-content:flex-start;padding-top:36px}.school{font-size:11px}.portal-art{width:calc(100vw - 8px);margin:15px 0 0}.fingerprint{width:92px;height:92px;top:calc(50% - 53px);left:calc(50% - 46px)}.fingerprint svg{width:58px;height:63px}.light-ring{width:106px;height:106px;top:calc(50% - 60px);left:calc(50% - 53px)}.portal h1{margin-top:0;font-size:55px}.portal-tagline{font-size:16px}.enter{margin-top:18px;font-size:14px}.credit{font-size:9px}.credit strong{font-size:11px}main{padding:0 18px}.brand{font-size:20px}.small-button{padding:8px 12px;font-size:10px}.live-hero{padding-top:28px}.live-hero h1{font-size:30px}.lead{font-size:11px}.board-shell{width:calc(100% + 30px);margin:5px -15px -7px}.board-stats{gap:22px}.board-stats strong{font-size:27px}.board-stats span{font-size:9px}.cell-hint{max-width:300px;margin:auto;font-size:9px}.article{gap:18px;margin-bottom:40px;padding:22px 12px}.article>span{font-size:44px}.article p:last-child{font-size:11px}.article .eyebrow{font-size:9px}.section-title h2{font-size:23px}.section-title p{font-size:11px}.form-shell{padding:18px}.tabs button{font-size:11px}.names{grid-template-columns:repeat(2,1fr)}.names button{padding:13px;font-size:11px}.sound{padding:10px 15px;font-size:10px;bottom:15px;left:15px}.message-body{font-size:14px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}.map-art{filter:drop-shadow(0 18px 26px #00150baa);width:100%;height:auto;display:block;overflow:visible}.portal-art{width:min(560px,96vw);margin:2px 0 -5px}.portal .fingerprint{top:calc(49% - 56px);left:calc(53% - 56px)}.portal .light-ring{top:calc(49% - 63px);left:calc(53% - 63px)}.portal{background:radial-gradient(at 52% 35%,#3d7e3b75,#0000 57%)}.portal-tagline{margin-bottom:18px}.portal h1{margin-top:4px;line-height:1.35}.board-shell{max-width:740px;margin:4px auto 5px}.hex{stroke-linejoin:round;paint-order:stroke fill}.hex.lit{filter:drop-shadow(0 0 3px #e5c779)}.remaining{color:#c6c9a7;margin:17px 0 0;font-size:11px}.opening .portal-art{filter:brightness(1.35)}@media (max-width:600px){.portal{padding-top:30px}.portal-art{width:calc(100vw - 22px);margin:12px 0 4px}.portal .fingerprint{width:86px;height:86px;top:calc(49% - 43px);left:calc(53% - 43px)}.portal .light-ring{width:100px;height:100px;top:calc(49% - 50px);left:calc(53% - 50px)}.portal h1{font-size:49px}.portal-tagline{font-size:16px}.board-shell{width:calc(100% + 20px);margin:12px -10px}.remaining{font-size:10px}.live-hero h1{font-size:28px}}.map-caption{max-width:520px;margin:0 auto 25px}.map-caption h2{color:#efd18c;margin:18px 0 10px;font-size:22px}.map-caption p{color:#b9c8aa;font-size:12px;line-height:2.1}.map-caption p:first-child{color:#eed89d;font-size:13px}.map-caption strong{color:#e7cf96;font-weight:500}@media (max-width:600px){.map-caption h2{font-size:19px}.map-caption p,.map-caption p:first-child{font-size:11px}}.royal-hero{text-align:center;background:radial-gradient(at top,#80703b66,#0000 65%),repeating-linear-gradient(45deg,#0000 0 70px,#d5bd6920 71px,#0000 72px),linear-gradient(#105737,#03291e);border:1px solid #bba36166;border-radius:28px;margin:28px 0;padding:45px 20px}.royal-hero h1{color:var(--gold);margin:10px;font-size:48px}.royal-portraits{justify-content:center;gap:50px;display:flex}.royal-portraits figure{width:290px;margin:15px 0}.royal-portraits img{object-fit:cover;object-position:top;background:#06291c;border:5px solid #e1c77e;border-radius:100px;width:180px;height:225px}.royal-portraits figcaption{gap:10px;margin-top:18px;line-height:2;display:grid}.royal-portraits small{color:#d6ddbc;font-size:11px}.royal-portraits strong{font-size:15px}.royal-prayer{color:#ebd395;margin:30px 0 0;font-size:20px}.school-identity{text-align:center;background:#143a2c;border:1px solid #8d9d6355;border-radius:24px;margin-bottom:35px;padding:32px 22px}.school-identity h2{color:#f2dba2;font-size:23px;line-height:2}.identity-grid{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.identity-grid>div{background:#ae8c2b15;border:1px solid #c0a35a88;border-radius:16px;gap:14px;padding:20px 10px;display:grid}.identity-grid span{color:#c0ccb8;font-size:11px}.identity-grid strong{font-size:14px}.contribution-shell fieldset{border:0;min-width:0;margin:0;padding:0}.mode-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px;display:grid}.mode-grid button{color:#ebead8;background:#04291f;border:1px solid #788c5666;border-radius:18px;justify-items:center;gap:10px;padding:22px 8px;display:grid}.mode-grid button[aria-pressed=true]{background:#8a72252d;border:2px solid #e1bb62;box-shadow:0 0 0 4px #b49a3420}.mode-icon{color:#ebc96d;font-size:36px}.mode-grid strong{font-size:15px}.card-categories{gap:8px;margin:24px 0 16px;display:flex}.card-categories button{color:#f3e7c9;background:#042a1e;border:1px solid #83935b66;border-radius:30px;flex:1;padding:10px 4px;font-size:12px}.card-categories button[aria-pressed=true]{background:#0b7948;border-color:#d3b169}.ready-card{text-align:center;background:radial-gradient(at 100% 0,#27784c,#063b2a);border:2px solid #d9b562;border-radius:25px;flex-direction:column;justify-content:center;align-items:center;min-height:280px;padding:26px;display:flex}.ready-card p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:21px;line-height:2.3}.ready-ornament{color:#e9cf85;font-size:30px}.ready-card small{color:#c2cdad;font-size:10px}.card-nav,.drawing-tools{justify-content:space-between;align-items:center;gap:8px;margin:17px 0;display:flex}.card-nav button,.drawing-tools button,.voice-preview button{color:#e7dbb9;background:#062a20;border:1px solid #91a47766;border-radius:9px;padding:10px;font-size:11px}.card-nav span{color:#bfcbaa;font-size:11px}.panel-help{color:#b0c4ae;text-align:center;margin:18px 0;font-size:11px;line-height:2}.palette{flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0;display:flex}.palette button{border:3px solid #fff;border-radius:50%;width:37px;height:37px}.palette button[aria-pressed=true]{outline-offset:3px;outline:3px solid #dcba64}.drawing-canvas{touch-action:none;background:#fff;border:3px solid #e1c575;border-radius:14px;width:100%;height:auto;display:block}.brush-sizes{gap:5px;display:flex}.brush-sizes button{place-items:center;width:36px;height:40px;padding:3px;display:grid}.brush-sizes button[aria-pressed=true]{background:#5f5327;border-color:#f0cc6e}.brush-sizes i{background:#f0ead4;border-radius:50%;display:block}.upload-button{color:#223a23;cursor:pointer;background:linear-gradient(120deg,#e6ce87,#b99243);border-radius:12px;justify-content:center;width:fit-content;margin:18px auto;padding:12px 20px;font-size:12px;font-weight:700;display:flex}.upload-button input{opacity:0;width:1px;height:1px;position:absolute}.upload-button:focus-within{outline:2px solid #fff}.audio-panel{text-align:center;padding:10px 0}.record-button{color:#113c28;background:linear-gradient(130deg,#f5dfa0,#b58c36);border-radius:50%;width:120px;height:120px;margin:15px;font-size:45px}.record-button.recording{color:#fff;background:#b63d39;animation:1s infinite heartbeat}.voice-bars{justify-content:center;align-items:center;gap:5px;height:45px;margin:12px;display:flex}.voice-bars i{background:linear-gradient(#16a86a,#dfbd69);border-radius:8px;width:6px;height:8px}.voice-bars.active i{animation:.4s infinite alternate equalizer}.record-clock{color:#dfc57f;font-size:18px}.voice-preview audio,.contribution-audio{width:100%;margin:15px 0}.contribution-image{background:#fff;border-radius:12px;width:100%;margin-bottom:20px}.voice-preview p{font-size:12px}.disabled{opacity:.5}.contribution-shell textarea{min-height:110px}@media (max-width:600px){.royal-portraits{flex-direction:column;align-items:center;gap:15px}.royal-hero{padding:30px 12px}.royal-prayer{font-size:16px}.identity-grid{grid-template-columns:1fr}.school-identity h2{font-size:18px}.ready-card p{font-size:17px}.drawing-tools{flex-wrap:wrap}.mode-grid strong{font-size:13px}}.premium-icon{width:100%;height:100%;display:block;overflow:visible}.mode-grid .mode-icon{filter:drop-shadow(0 2px 12px #b997321a);place-items:center;width:90px;height:90px;transition:transform .25s,filter .25s;display:grid;position:relative}.mode-grid button{background:radial-gradient(at 50% 38%,#20563c66,#0000 72%),#04291f;gap:15px;padding:22px 10px 20px;position:relative;overflow:hidden}.mode-grid button:hover .mode-icon,.mode-grid button[aria-pressed=true] .mode-icon{filter:drop-shadow(0 0 14px #dfbd6644);transform:translateY(-3px)}.mode-grid button[aria-pressed=true]{background:radial-gradient(at 50% 30%,#927b3540,#0000 75%),#203e28}.record-button{place-items:center;padding:15px;display:inline-grid}.record-button .premium-icon{width:85px;height:85px}@media (max-width:600px){.mode-grid .mode-icon{width:82px;height:82px}.mode-grid button{gap:12px;padding:20px 8px 17px}.mode-grid strong{font-size:14px}}
