:root{
  --bg:#0c0a12; --bg2:#15111f; --card:#1c1729; --line:#2c2540;
  --text:#f4f0ff; --muted:#a59cc0; --accent:#ffb547; --accent2:#ff6b4a;
  --good:#3ddc97; --bad:#ff5470; --radius:20px;
  --display:'Lalezar', 'Tajawal', system-ui, sans-serif;
}
body.g-mafia{ --accent:#ff4d5e; --accent2:#ff8a3d; }
body.g-imposter{ --accent:#b18cff; --accent2:#4fd1ff; }
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:'Tajawal',system-ui,sans-serif; color:var(--text); background:var(--bg);
  background-image:radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 60%),
                   radial-gradient(900px 500px at -10% 110%, color-mix(in srgb,var(--accent2) 16%,transparent), transparent 60%);
  background-attachment:fixed; line-height:1.6; -webkit-tap-highlight-color:transparent;
}
a{color:var(--accent)}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 60px}
.narrow{max-width:520px}

/* شعار */
.logo{font-family:var(--display);font-size:clamp(56px,11vw,120px);line-height:1;letter-spacing:1px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo.sm{font-size:34px}
.tag{color:var(--muted);font-size:clamp(16px,2.4vw,20px)}

/* عناصر */
.card{background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid var(--line);border-radius:var(--radius);padding:20px;backdrop-filter:blur(8px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;border-radius:14px;
  padding:14px 22px;font-weight:800;font-size:18px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#140d00;
  transition:transform .12s, filter .12s;text-decoration:none}
.btn:active{transform:scale(.97)}
.btn:disabled{filter:grayscale(1) brightness(.6);cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.sm{padding:8px 14px;font-size:15px;border-radius:11px}
.btn.block{width:100%}
.input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:20px;outline:none}
.input:focus{border-color:var(--accent)}
.code-input{text-align:center;letter-spacing:10px;font-weight:900;font-size:30px;text-transform:uppercase;direction:ltr}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.muted{color:var(--muted)}
.center{text-align:center}
.mt{margin-top:16px}.mt2{margin-top:28px}
.err{color:var(--bad);font-weight:700;min-height:1.6em}
h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.2}
h3{font-size:19px}

/* الصفحة الرئيسية */
.hero{text-align:center;padding:40px 0 24px}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:24px}
.game-card{position:relative;overflow:hidden}
.game-card .emo{font-size:58px;line-height:1}
.game-card.mafia{--accent:#ff4d5e;--accent2:#ff8a3d}
.game-card.imposter{--accent:#b18cff;--accent2:#4fd1ff}
.game-card h2{color:var(--accent);margin:8px 0 4px}
.game-card::after{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;
  background:var(--accent);opacity:.12;filter:blur(10px)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.step b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#140d00;margin-left:8px}

/* شاشة الحكم */
.host-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.room-chip{font-weight:900;letter-spacing:4px;direction:ltr;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:6px 14px;font-size:22px}
.lobby{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:20px}
@media (max-width:820px){.lobby{grid-template-columns:1fr}}
.qr-box{text-align:center}
.qr{background:#fff;border-radius:18px;padding:16px;display:inline-block;margin:10px auto}
.qr img,.qr canvas{display:block;width:min(300px,70vw)!important;height:auto!important}
.big-code{font-family:var(--display);font-size:64px;letter-spacing:10px;direction:ltr;color:var(--accent);line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;animation:pop .3s}
.chip.dead{opacity:.4;text-decoration:line-through}
.chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--bg2))}
.chip .x{cursor:pointer;opacity:.6;border:0;background:none;font-size:16px}
.chip .sc{color:var(--accent);font-weight:900}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.field label{display:block;color:var(--muted);font-size:14px;margin-bottom:6px}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);font-size:22px;cursor:pointer}
.stepper span{min-width:40px;text-align:center;font-size:24px;font-weight:900}
select.input{font-size:17px;padding:10px 12px}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.toggle input{width:22px;height:22px;accent-color:var(--accent)}
.cat-grid{display:flex;flex-wrap:wrap;gap:8px}
.cat-grid .chip{cursor:pointer}

.stage{min-height:calc(100vh - 140px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}
.stage .emo{font-size:clamp(70px,12vw,150px);line-height:1;animation:pop .4s}
.stage .title{font-family:var(--display);font-size:clamp(40px,7vw,90px);line-height:1.15}
.stage .sub{font-size:clamp(20px,3vw,32px);color:var(--muted);max-width:900px}
.stage .hl{color:var(--accent)}
.timer{--p:1;position:relative;width:clamp(130px,18vw,200px);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p)*360deg), var(--line) 0);display:grid;place-items:center}
.timer::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--bg)}
.timer span{position:relative;font-family:var(--display);font-size:clamp(44px,7vw,76px);line-height:1}
.timer.urgent span{color:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
.night{background:#05040a!important;background-image:none!important}
.night .stage .title{color:#8a80b0}
.host-controls{position:fixed;bottom:14px;left:14px;display:flex;gap:8px;z-index:5}
.tally{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tally .chip b{color:var(--accent)}
.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;width:min(900px,100%)}
.role-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;justify-content:space-between;gap:8px}
.role-item.mafia,.role-item.imp{border-color:var(--bad);color:#ffc1cb}

/* شاشة اللاعب */
.pbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pname{font-weight:900;font-size:18px}
.pscreen{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:16px;text-align:center}
.pscreen .emo{font-size:84px;line-height:1}
.pscreen .title{font-family:var(--display);font-size:38px;line-height:1.2}
.secret{cursor:pointer;user-select:none;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:2px dashed var(--line);border-radius:var(--radius);padding:20px;background:var(--card)}
.secret.open{border-style:solid;border-color:var(--accent)}
.secret .word{font-family:var(--display);font-size:46px;line-height:1.2;color:var(--accent)}
.secret .word.flag{font-size:110px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{padding:16px 10px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-size:18px;font-weight:800;cursor:pointer;word-break:break-word}
.choice.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 28%,var(--card))}
.choice.skip{grid-column:1/-1;background:var(--bg2)}
.choice.flag{font-size:44px}
.choice .votes{display:block;font-size:13px;color:var(--muted);font-weight:500}
.ptimer{font-family:var(--display);font-size:30px;color:var(--accent)}
.badge{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);font-size:14px}
.sleep{background:#000!important;background-image:none!important}
.sleep .pscreen{color:#5f5878}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--bad);color:#fff;padding:10px 18px;border-radius:12px;font-weight:700;z-index:9;display:none}
footer{color:var(--muted);text-align:center;font-size:13px;margin-top:40px}
.timeup-hint{display:none;font-size:clamp(18px,2.6vw,28px);font-weight:800;color:var(--bad)}
body.timeup .timeup-hint{display:block;animation:pulse 1.2s infinite}
body.timeup #nextBtn{animation:pulse 1s infinite;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 40%,transparent)}
.host-controls .btn{padding:14px 22px;font-size:18px}