@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');
.session-scores{margin-bottom:26px}
:root{--bg:#f4f8ff;--panel:#fff;--text:#102e49;--muted:#71869b;--line:#dce6f1;--blue:#087fff;--soft:#eaf3ff;--shadow:0 18px 55px #1b4b7710;--red:#c5203b;--redbg:#fff0f2;color-scheme:light}*{box-sizing:border-box}[data-theme=dark]{--bg:#0b1726;--panel:#122438;--text:#e6f1fc;--muted:#95abc0;--line:#293d51;--blue:#69adff;--soft:#1b3553;--shadow:0 18px 55px #0002;--red:#ff7287;--redbg:#351c2a;color-scheme:dark}body{margin:0;background:radial-gradient(ellipse at 50% 15%,var(--soft),transparent 65%),var(--bg);color:var(--text);font-family:Tajawal,Arial,sans-serif;font-size:17px;min-height:100dvh}button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button{transition:transform .18s,background .18s}button:hover:not(:disabled){transform:translateY(-2px)}button:active:not(:disabled){transform:scale(.97)}header{margin:0 auto;max-width:1300px;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);height:100px}.brand{background:none;border:0;padding:0;width:115px;height:77px}.brand img{width:100%;height:100%;object-fit:contain}nav{display:flex;gap:8px}nav button,.icon{background:var(--panel);border:1px solid var(--line);border-radius:13px;width:43px;height:43px;font-size:23px}#stage{font-size:14px;color:var(--muted)}main{min-height:calc(100dvh - 180px);max-width:1100px;margin:auto;padding:42px 24px 60px}section{animation:enter .25s ease-out}.narrow{max-width:740px;margin:auto}.home{text-align:center;max-width:840px;margin:auto}.eyebrow,.title>span{color:var(--blue);font-size:15px;font-weight:700}.logo-stage{position:relative;max-width:480px;margin:5px auto 0;height:275px}.logo-stage img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 22px #2376c018)}.note{position:absolute;font-size:13px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.n1{right:-65px;top:100px;transform:rotate(7deg)}.n2{left:-50px;bottom:35px;transform:rotate(-6deg)}h1,h2,p{margin-top:0}.home h1{font-size:clamp(36px,5vw,57px);font-weight:900;margin:12px 0}.home h1 span{display:block;color:var(--blue)}.home>p{color:var(--muted);font-size:20px}.primary,.secondary{border-radius:14px;padding:16px 25px;font-weight:800;min-height:54px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:12px}.primary{color:white;background:#087fff;box-shadow:0 8px 22px #087fff24}.secondary{background:var(--panel);border-color:var(--line)}.start{font-size:22px;min-width:295px;margin:5px auto 28px}.facts{display:flex;justify-content:center;gap:26px;color:var(--muted);font-size:15px}.facts span+span{border-right:1px solid var(--line);padding-right:26px}.title{text-align:center;margin-bottom:35px}.title h1{font-size:clamp(29px,4vw,42px);font-weight:900;margin:10px 0 12px}.title p{color:var(--muted);line-height:1.8}.panel{background:var(--panel);border:1px solid var(--line);border-radius:23px;padding:28px;box-shadow:var(--shadow)}h2{font-size:22px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.section-head h2{margin:0}.section-head>span,.pill{color:var(--muted);font-size:14px}.pill{padding:7px 12px;border:1px solid var(--line);border-radius:50px;display:inline-block}form{display:flex;gap:10px}input[type=text],input:not([type]){min-width:0;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:13px;padding:14px 17px;color:var(--text)}input[type=checkbox],input[type=radio]{accent-color:#087fff;width:20px;height:20px;flex-shrink:0}.players{display:grid;grid-template-columns:1fr 1fr;gap:10px}.player{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:13px;padding:12px}.player b{flex:1;overflow-wrap:anywhere}.player button{border:0;background:none;color:var(--muted);padding:7px}.avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:13px;background:#e1edff;color:#326fa5;font-weight:800;flex-shrink:0;font-size:23px}.a1{background:#ece5ff;color:#7859a6}.a2{background:#dff3e9;color:#2b856c}.a3{background:#fff0dc;color:#a8782f}.a4{background:#e7edf4;color:#5d768d}.empty{grid-column:1/-1;text-align:center;padding:45px 0;color:var(--muted)}.micro,small{font-size:14px;color:var(--muted);line-height:1.6}.micro{margin:22px 0 0}.actions{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}.text{background:none;border:0;color:var(--muted);padding:15px}.setup{display:grid;grid-template-columns:1.5fr 1fr;gap:26px}.categories{display:grid;grid-template-columns:1fr 1fr;gap:12px}.category{position:relative;display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);padding:20px 15px;border-radius:18px;min-height:105px;cursor:pointer}.category input{position:absolute;left:8px;top:8px;width:14px;height:14px}.category small,.startbar small,.option small,.toggle small{display:block;margin-top:6px}.cat-icon{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--cat) 12%,var(--panel));color:var(--cat);width:42px;height:44px;border-radius:12px;font-size:29px}.chosen{border-color:var(--blue);background:var(--soft)}fieldset{border:0;padding:0;margin:26px 0}legend{font-weight:700;margin-bottom:12px}.option{display:flex;align-items:center;gap:12px;padding:15px 12px;border:1px solid var(--line);border-radius:13px;margin:8px 0;cursor:pointer}.option:has(input:checked){background:var(--soft);border-color:var(--blue)}.stepper{display:flex;gap:17px;align-items:center;margin-top:18px}.stepper>span{flex:1}.toggle{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;border-top:1px solid var(--line);cursor:pointer}.startbar{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;margin-bottom:28px}.safe,.role{max-width:480px;text-align:center;margin:auto;padding:35px}.safe>.avatar{width:76px;height:76px;font-size:40px;border-radius:22px;margin-bottom:25px}.hold{display:block;width:115px;height:115px;margin:0 auto 20px;border:7px solid transparent;border-radius:50%;background:linear-gradient(var(--soft),var(--soft)) padding-box,conic-gradient(var(--blue) var(--p,0%),var(--line) 0) border-box;color:var(--blue);font-size:54px;user-select:none;-webkit-touch-callout:none;touch-action:none}.safe>b{display:block}.safe progress{width:110px;height:4px;margin-top:15px;accent-color:var(--blue)}.privacy{margin:27px 0 0;font-size:13px;color:var(--muted)}.role{animation:reveal .35s ease-out}.role-icon{display:block;font-size:46px;color:var(--blue);margin:5px 0 25px}.role h2{font-size:40px;color:var(--blue);margin:15px 0 28px}.role>p{line-height:1.9}.role .primary{width:100%;margin-top:15px}.outside{background:var(--redbg);border-color:var(--red);box-shadow:0 0 45px color-mix(in srgb,var(--red) 14%,transparent)}.outside h2,.outside .role-icon,.outside>p:not(.privacy){color:var(--red)}.outside .primary{background:var(--red);color:white}.red-person{color:var(--red);background:var(--redbg);border:1px solid color-mix(in srgb,var(--red) 35%,transparent);padding:10px 15px;border-radius:12px}.red-text{color:var(--red)}.score-rule{display:flex;justify-content:space-between;background:var(--soft);border-radius:12px;padding:12px;font-size:14px;margin-bottom:24px}.ballot{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ballot label{display:flex;align-items:center;gap:12px;padding:16px 12px;border:1px solid var(--line);border-radius:13px;cursor:pointer;overflow-wrap:anywhere}.ballot label:has(input:checked){background:var(--soft);border-color:var(--blue)}.ballot input{margin:0}.wide{width:100%}#selection-count{text-align:center;color:var(--muted);margin:22px}.question{text-align:center}.match{display:flex;align-items:center;justify-content:space-evenly;padding:38px 0}.match .avatar{width:78px;height:78px;font-size:40px;border-radius:22px}.match h2{margin:15px 0 4px}.asks{font-size:32px;color:var(--blue)}.asks small{display:block}.tip{font-size:15px;padding:15px;background:var(--soft);border-radius:12px;margin:0;color:var(--muted)}.center{text-align:center}.unmask{text-align:center;padding:45px}.countdown{font-size:100px;color:var(--blue)}.outsiders{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:25px 0}.secret-result{text-align:center;max-width:760px;margin:auto}.secret-result h2{font-size:48px;color:var(--blue);margin:20px 0}.secret-result>p{margin-top:23px}.results-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;margin-top:22px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:right;font-size:15px}td,th{padding:16px 8px;border-bottom:1px solid var(--line)}th{font-size:13px;color:var(--muted);font-weight:500}td small{display:block;color:inherit}.guess-result{border-bottom:1px solid var(--line);padding:15px 0}.guess-result>span{float:left;font-size:14px}.guess-result p{margin:12px 0 0}footer{max-width:1200px;display:flex;justify-content:space-between;margin:auto;padding:25px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}footer button{border:0;background:none;color:var(--muted)}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:24px;max-width:min(480px,calc(100% - 32px));width:100%;padding:30px}dialog::backdrop{background:#061728a8;backdrop-filter:blur(7px)}dialog p,dialog li{line-height:1.9;color:var(--muted)}dialog li{margin:12px 0}#curtain{position:fixed;inset:0;background:var(--bg);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:var(--blue)}#curtain[hidden]{display:none}#curtain span{font-size:55px;animation:enter .2s}#error{color:var(--red);font-size:14px;margin:10px 0}button[data-action=restart]{font-size:15px}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes reveal{from{transform:perspective(700px) rotateY(12deg) scale(.97)}to{transform:none}}
@media(max-width:760px){header{padding:10px 20px;height:87px}.brand{width:98px;height:67px}#stage{display:none}main{padding:30px 18px 45px}.setup,.results-grid{grid-template-columns:1fr}.category{padding:18px 12px;gap:9px}.category b{font-size:16px}.category small{font-size:13px}.title{margin-bottom:28px}.panel{padding:22px}.logo-stage{height:255px;max-width:360px}.note{display:none}.home{padding-top:10px}.home>p{font-size:18px}.home h1{font-size:40px}.facts{gap:14px;font-size:14px}.facts span+span{padding-right:14px}.startbar{gap:18px;flex-direction:column;align-items:stretch}.players{grid-template-columns:1fr}.safe,.role{padding:28px 22px}.ballot{gap:8px}.ballot label{padding:15px 9px;gap:8px}.ballot .avatar{display:none}.role h2{font-size:34px}.results-grid .panel{padding:18px 12px}.table-wrap td,.table-wrap th{padding:13px 5px}footer>span{display:none}.actions>.primary{flex:1}.match{gap:15px}.match>div{min-width:0;overflow-wrap:anywhere}.match h2{font-size:21px}.home .start{width:100%;min-width:0}dialog{padding:24px}.score-rule{font-size:13px}.red-person{font-size:16px}.secret-result h2{font-size:39px}}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;left:var(--x);top:-20px;width:7px;height:12px;background:var(--c);animation:fall 2.2s var(--d) both}@keyframes fall{from{transform:translateY(-20px) rotate(0)}to{transform:translateY(105vh) rotate(550deg);opacity:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.confetti{display:none}}