@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#0b1020;--panel:#161d2e;--panel2:#20293e;--line:#30394d;--text:#f7f4eb;--muted:#a1aabc;--gold:#edc572;--gold2:#b88935;--good:#67d2a3;--bad:#ec8895}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% -15%,#253353 0,transparent 46%),var(--bg);color:var(--text);font-family:Tajawal,Arial,sans-serif;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}.hidden{display:none!important}.shell{max-width:1100px;margin:auto;padding:22px 22px 30px;position:relative;z-index:1}.ambient{position:fixed;border-radius:50%;filter:blur(100px);opacity:.12;pointer-events:none}.ambient.a{width:300px;height:300px;background:#cca45b;top:30%;left:-200px}.ambient.b{width:400px;height:400px;background:#557ac5;bottom:-270px;right:-200px}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:60px}.brand{display:flex;gap:11px;align-items:center;font-size:22px;font-weight:800}.brand strong{color:var(--gold)}.brand-icon{display:grid;place-items:center;background:linear-gradient(145deg,var(--gold),var(--gold2));height:41px;width:41px;color:#161921;border-radius:13px;font-size:28px}.top-tag{font-size:12px;letter-spacing:1px;color:#d4b575;border:1px solid #5a4b32;border-radius:30px;padding:8px 13px}.hero{text-align:center}.hero-crown{font-size:94px;line-height:1;color:var(--gold);text-shadow:0 7px 60px #c59d4c80;margin-bottom:5px}.eyebrow{color:var(--gold);font-weight:700;font-size:14px;letter-spacing:.2px}.hero h1{font-size:clamp(40px,7vw,73px);margin:6px auto 10px;font-weight:900;line-height:1.22}.hero h1 em{font-style:normal;color:var(--gold)}.lead{color:var(--muted);max-width:620px;line-height:1.9;margin:10px auto 35px;font-size:17px}.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px;max-width:860px;margin:auto;text-align:right}.panel{background:linear-gradient(145deg,#192236ee,#131b2cf2);border:1px solid var(--line);border-radius:22px;padding:27px;box-shadow:0 12px 45px #00000017}.panel-head{display:flex;align-items:center;gap:13px;margin-bottom:24px}.panel-head h2{font-size:21px;margin:0 0 3px}.panel-head p{font-size:13px;color:var(--muted);margin:0}.bubble{width:48px;height:48px;display:grid;place-items:center;background:#554a32;color:var(--gold);border-radius:14px;font-size:27px;flex-shrink:0}label{display:block;color:#d8dce5;margin:15px 0 8px;font-size:14px;font-weight:700}input,select{width:100%;background:#11192b;color:var(--text);border:1px solid #394258;border-radius:12px;padding:13px 15px;outline:none;min-height:48px}input:focus,select:focus{border-color:var(--gold)}input::placeholder{color:#748197}.code-input{text-align:center;direction:ltr;letter-spacing:4px;font-weight:900;text-transform:uppercase}.btn{border:0;border-radius:12px;min-height:47px;padding:12px 16px;font-weight:800;transition:transform .16s,filter .16s}.btn:not(:disabled):active{transform:scale(.98)}.btn.primary{background:linear-gradient(120deg,#f6d68e,#c69841);color:#211b13}.btn.secondary{background:#2a3549;color:#f6f4ea;border:1px solid #3f4b60}.btn.ghost{color:#d5d9e3;background:transparent;border:1px solid #3e485d}.entry-grid .btn{width:100%;margin-top:23px}.btn.small{font-size:13px;padding:10px 14px;min-height:41px}.btn.wide{width:100%;max-width:340px;margin:22px auto 0;display:block}.features{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;color:#c1c6d1;margin:35px 0;font-size:14px}footer{text-align:center;color:#727d91;font-size:12px;margin-top:70px}.room-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px;padding:18px 24px}.tiny-label{margin:0;color:var(--muted);font-size:12px}.room-code{letter-spacing:4px;direction:ltr;text-align:right;margin:5px 0 0;font-size:27px;color:var(--gold)}.room-actions{display:flex;gap:8px}.stage{max-width:760px;margin:auto;text-align:center;padding:40px 24px}.stage h2{font-size:31px;margin:9px 0}.stage-icon{font-size:60px}.muted{color:var(--muted);line-height:1.7}.small-text{font-size:13px}.metric{display:flex;gap:9px;align-items:baseline;justify-content:center;padding:17px}.metric strong{font-size:44px;color:var(--gold)}.metric span{color:var(--muted)}.name-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:10px 0 22px}.name-tag{background:#273149;border:1px solid #3f4a62;border-radius:30px;padding:8px 14px;font-weight:700}.name-tag.host{border-color:#997d46;color:#f1d59a}.match-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;align-items:start;gap:20px}.question-panel{text-align:center;min-height:460px}.question-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.pill{background:#53452f;color:#ffdc98;padding:7px 12px;border-radius:30px;font-weight:800;font-size:13px}.category{color:var(--muted);font-size:13px}.time-outer{width:100%;height:9px;background:#353c4f;border-radius:20px;overflow:hidden;margin:22px 0 8px}.time-inner{width:100%;height:100%;background:linear-gradient(90deg,#bc8637,#f4d18d);transition:width .12s linear}.clock{font-size:36px;font-weight:900;color:var(--gold)}.question-text{font-size:clamp(22px,4vw,32px);min-height:68px;margin:10px 0 25px;line-height:1.5}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:right}.answer-btn{background:#26314a;border:1px solid #40516b;border-radius:13px;color:var(--text);padding:16px;min-height:66px;font-weight:700;text-align:right}.answer-btn:not(:disabled):hover{border-color:var(--gold);background:#38455e}.answer-btn.chosen{border-color:#d7b369;background:#5b4d35}.answer-btn.right{border-color:#74cca3;background:#20483e}.answer-btn.wrong{border-color:#e18a95;background:#512c3b}.status-note{font-size:14px;min-height:25px;margin-top:18px}.result-note{padding:16px;background:#26314a;border-radius:13px;margin:13px 0;line-height:1.8;font-weight:800}.ranking-panel h3{margin:0;font-size:21px}.ranking{margin-top:20px}.rank-row{display:flex;align-items:center;gap:9px;border-bottom:1px solid #384057;padding:12px 1px}.rank-row:last-child{border:0}.rank-number{min-width:28px;font-weight:900;color:var(--gold)}.rank-name{flex:1;text-align:right;overflow-wrap:anywhere}.rank-score{font-weight:900;color:#e8d29c}.rank-row.me{background:#384052;border-radius:8px;padding-inline:8px}.winner{font-size:clamp(29px,6vw,56px);color:var(--gold);font-weight:900;margin:15px 0}.final-rank{max-width:400px;margin:10px auto 15px}.toast{position:fixed;z-index:30;bottom:22px;left:50%;transform:translateX(-50%);background:#2c374a;color:white;border:1px solid #5b6574;box-shadow:0 10px 50px #0009;border-radius:15px;padding:13px 18px;min-width:min(340px,90vw);text-align:center}.toast.error{border-color:#dc8392;color:#ffe4e8}
@media(max-width:700px){.shell{padding:16px}.top{margin-bottom:35px}.top-tag{font-size:10px;letter-spacing:0}.brand{font-size:18px}.entry-grid,.match-layout{grid-template-columns:1fr}.hero-crown{font-size:71px}.lead{font-size:15px}.panel{padding:20px;border-radius:18px}.room-head{flex-wrap:wrap}.room-actions{width:100%;justify-content:space-between}.ranking-panel{order:2}.answers{grid-template-columns:1fr}.answer-btn{min-height:56px}.stage{padding:28px 15px}.features{gap:10px;font-size:12px}}