:root{
  --bg:#191919; --card:#222; --accent:#ff7800; --accent2:#ffd166; --text:#ffffff; --muted:#bfbfbf; --danger:#ff5a5a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Tajawal',system-ui,Segoe UI,Arial; background:#111; color:var(--text); height:100%; overscroll-behavior:none; touch-action:manipulation}
.app-header, .app-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#111;border-bottom:1px solid #2a2a2a;position:sticky;top:0;z-index:2}
.app-footer{position:fixed;bottom:0;left:0;right:0;gap:8px;justify-content:center;border-top:1px solid #2a2a2a}
.brand-logo{height:40px}
.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:8px 12px;border-radius:10px;cursor:pointer}
.primary{background:var(--accent);color:#111;border:0;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:800}
.secondary{background:#333;border:1px solid #444;color:#eee;padding:12px 16px;border-radius:12px;cursor:pointer}
.lg{font-size:18px;padding:16px 18px}
.nav{background:transparent;border:0;color:var(--muted);padding:10px 16px;border-bottom:2px solid transparent;cursor:pointer}
.nav.active{color:var(--text); border-bottom:2px solid var(--accent)}
main{padding:16px 16px 96px;max-width:900px;margin:0 auto}
.card{background:var(--card);border-radius:16px;padding:16px;box-shadow:0 8px 30px rgba(0,0,0,.35);margin-bottom:16px}
.hidden{display:none}
.hero{display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-logo{width:160px;height:auto;border-radius:20px}
.tag{color:var(--accent2);opacity:.95}
.home-actions{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row{display:flex;gap:10px;align-items:center;margin:10px 0}
.row label{min-width:110px;opacity:.85}
.row input, .row select{flex:1;padding:10px;border-radius:10px;border:0;background:#111;color:var(--text);outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid #444;padding:8px 12px;border-radius:999px;background:#111;color:var(--muted);cursor:pointer}
.chip.active{background:var(--accent);color:#111;border-color:transparent}
.invite{display:flex;gap:8px;margin:10px 0}
.invite input{flex:1}
.qr{display:flex;justify-content:center;padding:12px}
.players li, #scoreboard li{background:#111;margin:6px 0;padding:10px;border-radius:10px;display:flex;justify-content:space-between;border:1px solid #2a2a2a}
.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.timerWrap{position:relative;flex:0 0 140px;height:26px;background:#2a2a2a;border-radius:999px;overflow:hidden;border:1px solid #333}
#timerBar{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,var(--accent),#ff9f1a)}
.timer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900}
#questionTitle{margin:12px 0 8px}
.choices{display:grid;grid-template-columns:1fr;gap:8px}
.choice{background:#111;border:1px solid #2a2a2a;padding:12px;border-radius:12px;cursor:pointer;transition:.2s}
.choice:hover{border-color:#555}
.choice.correct{background:#0f5132;border-color:#2ed39f}
.choice.wrong{background:#4a1f1f;border-color:#ff6b6b}
.row-cta{display:flex;gap:10px;justify-content:center}