@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#10062e;--ink:#fbf8ff;--muted:#c8bddf;--violet:#8d19e9;--gold:#ffcc43;--panel:#141139;--border:rgba(169,124,255,.4);--bright:#a539fa;--soft:rgba(255,255,255,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:#0d082c;color:var(--ink);font-family:'Cairo',Tahoma,Arial,sans-serif;overflow-x:hidden;font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffd44e;outline-offset:3px}
.cosmos{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 55% 4%,rgba(120,20,226,.66),transparent 36%),radial-gradient(ellipse at 92% 72%,rgba(72,27,154,.47),transparent 44%),radial-gradient(ellipse at 5% 88%,rgba(60,20,140,.55),transparent 50%),linear-gradient(110deg,#16063f,#090a30 46%,#170740)}.cosmos:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 10% 17%,#ffe387 0 1px,transparent 2px),radial-gradient(circle at 80% 7%,#fff2f0 0 1px,transparent 2px),radial-gradient(circle at 65% 34%,#cd8cff 0 1.5px,transparent 2px),radial-gradient(circle at 40% 76%,#ffe387 0 1px,transparent 2px);background-size:310px 290px;opacity:.62}.cosmos i{position:absolute;width:5px;height:5px;transform:rotate(45deg);background:#fdd664;box-shadow:0 0 17px 5px rgba(255,193,32,.6);animation:twinkle 3s infinite alternate}.cosmos i:nth-child(1){top:12%;left:17%}.cosmos i:nth-child(2){top:19%;left:68%;animation-delay:1s}.cosmos i:nth-child(3){top:56%;left:94%;animation-delay:2s}.cosmos i:nth-child(4){top:85%;left:24%;animation-delay:.6s}.cosmos i:nth-child(5){top:31%;left:52%;animation-delay:1.5s}.cosmos i:nth-child(6){top:67%;left:75%;animation-delay:2.5s}@keyframes twinkle{to{opacity:.17;transform:rotate(45deg) scale(.6)}}
.app-shell{max-width:1410px;margin:auto;padding:0 12px 9px}.glass{background:linear-gradient(125deg,rgba(30,22,79,.93),rgba(12,12,54,.9));border:1.5px solid rgba(151,113,248,.47);box-shadow:inset 0 0 17px rgba(107,62,222,.13),0 7px 18px rgba(0,0,0,.19)}.header{height:161px;display:flex;align-items:flex-start;justify-content:space-between;direction:ltr;gap:10px;position:relative;padding:28px 6px 0}.status-top{width:206px;height:86px;display:flex;direction:ltr;align-items:center;justify-content:center;gap:14px;border-radius:20px;direction:rtl}.status-trophy{font-size:39px;filter:drop-shadow(0 3px 5px rgba(255,185,0,.35))}.micro{display:block;font-weight:700;font-size:13px}.online-status{display:block;font-size:13px;color:#4ae991;white-space:nowrap}.status-dot{display:inline-block;background:#00e96d;width:11px;height:11px;border-radius:50%;margin-left:5px;box-shadow:0 0 9px #00e96d}.masthead{width:490px;text-align:center;position:relative;margin-top:-24px;flex:0 1 490px}.masthead h1{font-size:clamp(38px,5vw,65px);letter-spacing:-3px;line-height:1.5;font-weight:900;color:#ffd449;margin:0;white-space:nowrap;-webkit-text-stroke:2px #3f0b29;text-shadow:0 4px 0 #7f1b2a,3px 6px 0 #341037,0 0 20px rgba(255,207,39,.75)}.masthead h1 span{color:#ffdb4b}.brand-crown{position:absolute;top:8px;right:-10px;font-size:44px;transform:rotate(22deg);filter:drop-shadow(0 5px 3px #2c0957)}.brand-ribbon{margin:-6px auto 0;background:linear-gradient(160deg,#a100e9,#5e13ba);border:2px solid #b92bff;border-radius:13px 13px 22px 22px;box-shadow:0 5px 14px #08031c,0 0 14px #ad24ed;font-size:19px;font-weight:900;transform:rotate(-2deg);padding:0 19px;width:max-content;max-width:90%}.brand-ribbon span{font-size:16px}.account{height:85px;width:196px;display:flex;align-items:center;justify-content:space-around;border-radius:28px;direction:ltr;color:white;text-align:right;padding:8px}.account-avatar{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#222;font-size:25px}.account-text{direction:rtl;line-height:1.3}.account-text small{display:block}.account-text strong{display:block;font-size:16px}.chevron{font-size:24px}
.content-grid{display:grid;grid-template-columns:239px minmax(0,1fr) 240px;direction:ltr;gap:11px;align-items:stretch}.content-grid>*{direction:rtl}.panel{background:linear-gradient(155deg,rgba(30,14,74,.96),rgba(16,13,49,.97));border:2px solid #6424a5;border-radius:18px;box-shadow:0 0 17px rgba(109,24,201,.5),inset 0 0 17px rgba(112,35,195,.13);overflow:hidden}.panel-heading{height:58px;display:flex;align-items:center;justify-content:center;gap:8px}.panel-heading h2{font-size:19px;line-height:1.3;margin:0;font-weight:900;white-space:nowrap}.heading-emoji{font-size:26px}.purple-heading{background:linear-gradient(90deg,#8c1bbf,#471177);color:#ffce52;border-bottom:2px solid #a42bea}.gold-heading{background:linear-gradient(105deg,#ffe079,#ffbe22);color:#190b24;border-bottom:3px solid #e89c13}.rank-list{min-height:346px;padding:5px 11px 4px}.rank-item{height:69px;display:grid;grid-template-columns:45px 1fr 45px;align-items:center;gap:4px;border-bottom:1px solid rgba(163,121,224,.28)}.rank-item:last-child{border:0}.rank-place{display:grid;place-items:center;font-weight:900;font-size:22px;width:39px;height:39px;border-radius:50%;background:linear-gradient(160deg,#35234f,#0c0e36);border:2px solid #625089}.rank-place.gold{background:linear-gradient(135deg,#fff4b0,#d38a0e);color:#542b04;border-color:#ffd34e;box-shadow:0 0 11px rgba(255,204,61,.4)}.rank-place.silver{background:linear-gradient(135deg,#fff,#9e9eaf);color:#323046;border-color:#d8d6ea}.rank-place.bronze{background:linear-gradient(135deg,#fac376,#a4530b);color:#4b1706;border-color:#edab62}.rank-data{min-width:0;text-align:center;line-height:1.35}.rank-name{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-score{display:block;color:#ffdb64;font-size:17px;font-weight:900}.rank-avatar{display:grid;place-items:center;border:2px solid #badbff;width:45px;height:45px;border-radius:50%;background:radial-gradient(circle at 25% 18%,#81c5e2,#2e2864);font-size:24px}.players-stat{text-align:center;margin:5px 10px;padding:9px;border:2px solid #6b21c2;border-radius:15px;background:linear-gradient(155deg,#361270,#17104c);box-shadow:inset 0 0 13px rgba(129,45,235,.25)}.players-stat span{display:block;font-size:12px;font-weight:800}.players-stat strong{display:block;font-size:28px;line-height:1.2}.tiny-note{color:#9c8fb9;text-align:center;font-size:10px;margin:9px 2px 11px}.rank-empty{text-align:center;color:#cbbadf;padding:70px 7px;font-weight:700}.skeleton-line{height:55px;margin:10px;border-radius:10px;background:linear-gradient(90deg,transparent,#34255d,transparent);animation:shimmer 2s infinite}@keyframes shimmer{50%{opacity:.4}}
.game-center{padding:8px 0 3px;border-radius:15px;background:linear-gradient(180deg,rgba(9,12,47,.81),rgba(12,10,43,.82));box-shadow:0 0 0 2px rgba(84,35,162,.5),0 0 18px rgba(83,31,156,.4)}.stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 10px;direction:ltr}.stat-box{direction:rtl;min-height:83px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 3px}.stat-label{color:#f7f1ff;font-size:14px;font-weight:800;white-space:nowrap}.stat-value{font-size:29px;line-height:1.2;font-weight:900}.stat-value small{font-size:14px;font-weight:700}.stat-value.hearts{font-size:25px;letter-spacing:-2px;color:#ff4f6c}.golden{color:#ffe059}
.quiz-card{min-height:402px;margin:12px 9px 7px;border:3px solid #e3a135;box-shadow:inset 0 0 0 2px rgba(255,237,142,.34),0 0 0 2px rgba(125,72,11,.4),0 0 16px 4px rgba(255,179,37,.38);border-radius:20px;background:radial-gradient(ellipse at top left,rgba(45,63,163,.27),transparent 65%),linear-gradient(150deg,#0b153d,#090d2e 63%,#201124);position:relative}.question-tab{position:absolute;top:-3px;left:50%;transform:translateX(-50%);border-radius:0 0 14px 14px;background:linear-gradient(170deg,#a420e6,#5410a4);color:white;padding:5px 20px;min-width:175px;text-align:center;font-weight:900;white-space:nowrap;box-shadow:0 5px 7px rgba(0,0,0,.3);z-index:1}.quiz-content{padding:24px 19px 10px}.question-main{display:grid;grid-template-columns:162px 1fr;direction:ltr;gap:19px;align-items:center;min-height:158px}.question-main>*{direction:rtl}.question-visual{height:155px;border:2px solid #d6dbff;border-radius:19px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.36),transparent 45%),linear-gradient(140deg,var(--q-accent),#10113c 95%);display:grid;place-items:center;box-shadow:inset 0 -20px 25px rgba(5,5,32,.25)}.question-visual span{font-size:82px;filter:drop-shadow(0 8px 5px rgba(0,0,0,.25))}.question-title{font-size:clamp(24px,2.65vw,37px);line-height:1.5;text-align:center;font-weight:900;text-shadow:0 3px 7px #000;letter-spacing:-.9px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px;direction:ltr}.answer-option{direction:rtl;min-height:57px;border:2px solid #96a0d4;border-radius:13px;background:linear-gradient(150deg,#294581,#171a54);color:white;font-size:23px;font-weight:900;box-shadow:inset 0 3px 9px rgba(106,161,236,.13),0 3px 4px #080722;transition:transform .12s,border-color .12s,box-shadow .12s}.answer-option:hover:not(:disabled){transform:translateY(-2px);border-color:#ffdc5c}.answer-option.selected{border-color:#ffe35a;box-shadow:0 0 0 2px #a97d0b,0 0 18px rgba(255,214,54,.64);background:linear-gradient(150deg,#59495c,#222149)}.answer-option.correct{border-color:#42e789;background:linear-gradient(150deg,#18864d,#153f35);box-shadow:0 0 15px rgba(25,220,92,.46)}.answer-option.incorrect{border-color:#f87285;background:linear-gradient(150deg,#872d46,#391a35)}.send-button,.big-action{display:flex;align-items:center;justify-content:center;gap:13px;color:white;background:linear-gradient(180deg,#bf22ff,#7f10d3);border:2px solid #c55cff;border-radius:24px;box-shadow:inset 0 2px 5px rgba(255,255,255,.25),0 4px 12px rgba(97,19,194,.65);font-size:20px;font-weight:900;max-width:380px;min-height:50px;width:75%;margin:14px auto 0;transition:transform .12s,filter .12s}.send-button:hover,.big-action:hover{filter:brightness(1.14);transform:translateY(-2px)}.bottom-tip{text-align:center;color:#e1c5f4;font-size:12px;padding:0 9px 4px}.bottom-tip strong{color:#ffdc68}.feedback-banner{text-align:center;font-weight:900;font-size:15px;padding:6px 4px 0;color:#55f6b5}.feedback-banner.bad{color:#ff9ba2}.welcome-content{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:339px}.welcome-art{font-size:68px;position:relative;line-height:1.3}.welcome-art span{font-size:31px;position:absolute;top:0;right:-32px}.welcome-content h2{font-size:32px;margin:2px 0;color:#ffe061}.welcome-content p{max-width:440px;margin:0;font-size:17px;color:#e5d9ff;font-weight:700;line-height:1.9}.welcome-content .big-action{width:85%}.finish-score{font-size:48px;color:#ffe365;line-height:1.3;font-weight:900}.finished-p{font-size:15px!important}.finished-button{max-width:345px}
.controls-panel{border:3px solid #ecae2c;box-shadow:0 0 13px rgba(249,167,30,.35),inset 0 0 15px rgba(255,193,44,.12)}.controls-inner{border-radius:14px;background:linear-gradient(#171638,#1a1642);margin:10px 9px;padding:14px 9px;min-height:423px;box-shadow:inset 0 0 12px rgba(102,36,199,.18)}.control-button{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:6px;color:#fff;width:100%;min-height:51px;padding:8px 11px;margin:0 0 12px;text-align:center;border:1.5px solid #585188;border-radius:14px;background:linear-gradient(145deg,#343162,#1e1b4c);font-weight:800;font-size:14px;box-shadow:inset 0 2px 8px rgba(164,153,255,.1),0 3px 6px rgba(0,0,0,.27)}.control-button:hover{filter:brightness(1.17)}.control-icon{font-size:27px;color:#fff;line-height:1}.control-icon.mint{color:#4fff9c}.control-icon.sky{color:#6de8ff}.primary-control{min-height:102px;border:2px solid #17dd81;background:linear-gradient(165deg,#0ffb76,#007b3a 80%);box-shadow:inset 0 0 10px rgba(255,255,255,.3),0 0 13px rgba(16,240,110,.4)}.primary-control.closed{border-color:#f37e8c;background:linear-gradient(165deg,#ea4c68,#8c1c3f)}.primary-control strong{font-size:21px;display:block;white-space:nowrap}.primary-control small{font-size:12px;display:block}.divider{height:1px;background:linear-gradient(to left,transparent,#756d9d,transparent);margin:8px 0 15px}.admin-access{width:100%;border:1px solid #9d75e7;background:#291b55;color:#f4e5ff;border-radius:11px;padding:6px;font-weight:700;margin-top:1px}.admin-access:hover{background:#3d2277}
.footer{direction:ltr;display:flex;align-items:center;justify-content:space-between;margin:10px 0 0;border-radius:22px;min-height:48px;padding:0 18px;font-weight:800;font-size:13px}.footer>span{direction:rtl}.live-indicator{white-space:nowrap}.live-indicator .status-dot{vertical-align:middle}.hidden{display:none!important}
.modal-root{position:fixed;inset:0;background:rgba(5,2,19,.82);z-index:200;display:grid;place-items:center;padding:14px;backdrop-filter:blur(6px)}.modal{max-height:min(85vh,780px);overflow:auto;width:min(95vw,580px);padding:23px;border-radius:21px;border:2px solid #b54aff;background:linear-gradient(145deg,#29115b,#0d1339);box-shadow:0 0 55px rgba(108,27,240,.46);position:relative;animation:appear .18s ease-out}.modal.wide{width:min(95vw,800px)}@keyframes appear{from{transform:scale(.96);opacity:.5}to{transform:scale(1);opacity:1}}.modal-close{position:absolute;left:13px;top:8px;background:none;border:0;color:white;font-size:32px;line-height:1}.modal h2{color:#ffda5d;margin:2px 0 15px;font-weight:900;font-size:24px}.modal p{color:#d6c9f1}.form-row{display:flex;flex-direction:column;gap:5px;margin:0 0 13px}.form-row label{font-size:13px;color:#eee3ff;font-weight:800}.form-row input,.form-row select{width:100%;min-height:46px;background:#120f39;color:#fff;border:1.5px solid #6555a1;border-radius:10px;padding:8px 12px;outline:none}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 13px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}.modal .form-save{background:linear-gradient(130deg,#9f23f5,#641dba);color:white;border:1px solid #cc83ff;border-radius:11px;padding:10px 24px;font-weight:800}.modal .form-secondary{background:#28234d;color:#e2d5fa;border:1px solid #5f5189;border-radius:11px;padding:10px 17px;font-weight:800}.modal .danger{background:#a52a47;border-color:#ff7f9a}.alert-note{background:rgba(255,206,78,.13);padding:11px;border:1px solid rgba(255,201,83,.36);border-radius:10px;font-size:12px;color:#ffe59d;margin:11px 0}.question-list{display:grid;gap:9px}.question-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#191442;padding:12px;border-radius:11px;border:1px solid #4e3979}.question-item p{margin:0;color:white;font-weight:800}.question-item small{color:#d0b5ff}.question-item .item-buttons{display:flex;gap:7px}.question-item button{padding:5px 11px;background:#392269;color:#fff;border:1px solid #7650ae;border-radius:7px}.question-item button.danger{background:#802a43}.result-table{width:100%;border-collapse:collapse}.result-table th,.result-table td{border-bottom:1px solid #4a376a;padding:9px;text-align:right}.result-table th{color:#ffd77d}.result-table tr:nth-child(even){background:#ffffff08}.toast{position:fixed;z-index:300;bottom:25px;left:50%;transform:translate(-50%,20px);background:#2c175f;color:white;border:1px solid #db8dff;border-radius:12px;max-width:min(90vw,580px);padding:12px 19px;font-weight:800;box-shadow:0 8px 32px #050311;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:1130px){.content-grid{grid-template-columns:203px minmax(0,1fr) 210px;gap:7px}.panel-heading h2{font-size:16px}.rank-list{padding-inline:5px}.stat-label{font-size:12px}.question-title{font-size:27px}.control-button{padding-inline:7px;font-size:12px}.primary-control strong{font-size:17px}.question-main{grid-template-columns:135px 1fr;gap:10px}.question-visual{height:142px}.quiz-content{padding-inline:12px}}
@media(max-width:890px){.header{height:auto;padding:15px 0 22px;align-items:center}.masthead{order:2;max-width:55%;margin-top:0}.masthead h1{font-size:40px}.masthead .brand-crown{font-size:30px;right:-4px;top:-5px}.brand-ribbon{font-size:12px;padding:3px 10px}.status-top{order:1;width:145px;height:70px;gap:6px}.status-trophy{font-size:27px}.micro,.online-status{font-size:10px}.account{order:3;width:140px;height:67px;padding:4px}.account-avatar{width:36px;height:36px;font-size:19px}.account-text small,.account-text strong{font-size:11px}.content-grid{grid-template-columns:minmax(0,1fr) 225px;grid-template-areas:'game controls' 'ranking ranking';direction:ltr}.game-center{grid-area:game}.controls-panel{grid-area:controls}.leaderboard-panel{grid-area:ranking}.rank-list{min-height:auto;display:grid;grid-template-columns:repeat(5,1fr)}.rank-item{grid-template-columns:1fr;justify-items:center;height:132px;gap:0;border-bottom:0;border-left:1px solid #54356e}.rank-avatar{display:none}.players-stat{margin:6px auto;width:220px}.tiny-note{margin:0 5px 7px}.question-title{font-size:28px}}
@media(max-width:630px){.app-shell{padding:0 8px 7px}.header{padding:8px 0 13px;flex-wrap:wrap;gap:7px}.masthead{order:0;max-width:100%;width:100%;flex:0 0 100%}.masthead h1{font-size:43px}.masthead .brand-crown{right:calc(50% - 148px)}.brand-ribbon{font-size:14px}.status-top{order:1;width:48%;height:61px;border-radius:13px}.account{order:2;width:48%;height:61px;border-radius:13px;justify-content:center;gap:7px}.content-grid{display:flex;flex-direction:column;gap:12px}.game-center{order:0}.leaderboard-panel{order:1}.controls-panel{order:2}.stats-row{gap:5px;padding:0 5px}.stat-box{min-height:68px;padding:4px 1px}.stat-label{font-size:10px;white-space:normal;text-align:center;line-height:1.4}.stat-value{font-size:25px}.stat-value.hearts{font-size:17px}.stat-value small{font-size:11px}.quiz-card{margin:10px 7px 8px;min-height:367px}.quiz-content{padding:30px 10px 9px}.question-main{grid-template-columns:96px 1fr;gap:8px;min-height:113px}.question-visual{height:100px;border-radius:15px}.question-visual span{font-size:55px}.question-title{font-size:20px}.answer-grid{gap:7px;margin-top:18px}.answer-option{min-height:55px;font-size:18px;border-radius:10px}.send-button{width:91%;margin-top:17px;font-size:18px}.welcome-content{min-height:298px}.welcome-content h2{font-size:23px}.welcome-content p{font-size:14px}.welcome-art{font-size:55px}.rank-list{grid-template-columns:repeat(5,minmax(0,1fr));padding:3px}.rank-item{height:100px;border-left:0}.rank-place{font-size:17px;width:34px;height:34px}.rank-name{font-size:11px}.rank-score{font-size:12px}.panel-heading{height:48px}.controls-inner{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px}.control-button{margin:0;min-height:59px}.primary-control{min-height:80px}.divider{display:none}.admin-access{grid-column:1/-1}.footer{gap:7px;flex-wrap:wrap;justify-content:center;font-size:10px;padding:6px}.form-grid{grid-template-columns:1fr}.modal{padding:16px}.question-item{flex-direction:column;align-items:stretch}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* v0.3 verified account sign-in */
.auth-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:15px 0;padding:5px;background:#110d32;border:1px solid #4f3e7e;border-radius:13px}
.auth-tabs button{border:0;border-radius:9px;flex:1 1 100px;padding:9px 5px;color:#ddd3fa;background:transparent;font-size:12px;font-weight:800}
.auth-tabs button.active{background:#6723c1;color:#fff;box-shadow:0 3px 12px #050218}
.google-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;border-radius:11px;text-decoration:none;background:#fff;color:#252538;font-size:15px;font-weight:800;border:1px solid #c3c7dd}
.google-button:hover{background:#f2f5ff}
.google-icon{color:#4285f4;font-weight:900;font-size:26px;font-family:Arial,sans-serif;line-height:1}
.auth-divider{text-align:center;position:relative;color:#b9a6d9;margin:10px 0;font-size:12px}