/* 🎮 Guruhlar o'yini — xona (lobbi, ovoz berish, chat, mikrofon, dashboard) */
.gr-wrap{display:flex;flex-direction:column;gap:14px;min-width:0}
.gr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 16px}
.gr-ttl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.gr-ttl b{font-family:var(--font-disp);font-size:18px}
.gr-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12.5px;font-weight:800;white-space:nowrap}
.gr-chip.easy{background:var(--green-soft);color:var(--green)} .gr-chip.hard{background:var(--rose-soft);color:var(--rose)}
.gr-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.gr-link{border:1px dashed var(--line2);background:var(--surface2);color:var(--ink2);border-radius:10px;padding:7px 10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
@media (max-width:980px){.gr-grid{grid-template-columns:minmax(0,1fr)}}
.gr-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.gr-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.gr-card{padding:18px}
.gr-card h2{font-family:var(--font-disp);font-size:20px;margin:0 0 12px}
.gr-card h3{font-size:15px;margin:14px 0 8px}
.gr-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.gr-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gr-big{width:100%;margin-top:14px;padding:14px;font-size:16px}
.gr-wait{color:var(--ink3);font-weight:700;display:flex;align-items:center;gap:8px;justify-content:center;margin:12px 0 0}
.gr-sum{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.gr-callbox{display:flex;flex-direction:column;gap:8px;margin:10px 0 0;padding:12px;border-radius:12px;background:var(--surface2)}
.gr-callbox[hidden]{display:none}
.gr-callbox .chk,.gr-mem .chk{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:700}
.gr-err{color:var(--rose);font-weight:700;background:var(--rose-soft);padding:10px 12px;border-radius:12px}
.gr-lvl{color:var(--ink2)}
/* O'yinlar kartochkalari (ovoz berish) */
.gr-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gr-gc{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:var(--r);background:var(--surface2);border:2px solid transparent;transition:var(--tr)}
.gr-gc.top{border-color:var(--amber)} .gr-gc.my{border-color:var(--brand);box-shadow:var(--glow)}
.gr-gc p{margin:0;color:var(--ink2);font-size:13px;line-height:1.4;flex:1}
.gr-gi{font-size:30px;line-height:1} .gr-gi.big{font-size:52px}
.gr-vb{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.gr-vb i{display:block;height:100%;background:var(--grad);transition:width .4s}
.gr-vn{font-size:12.5px;font-weight:800;color:var(--ink3)}
.gr-diffs{justify-content:center}
.gr-diff{min-width:140px;padding:16px 22px;font-size:17px;font-weight:900;border-radius:16px;color:#fff}
.gr-diff.easy{background:linear-gradient(135deg,#10B981,#22C55E)} .gr-diff.hard{background:linear-gradient(135deg,#F43F5E,#F97316)}
/* O'yin paytidagi tasma */
.gr-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;font-size:14px}
.gr-waitc{color:var(--green);font-weight:800} .gr-waitc small{display:block;color:var(--ink3);font-weight:600}
.gr-mon{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.gr-mg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--surface2)}
.gr-mg small{color:var(--ink3);font-weight:700}
/* Ishtirokchilar */
.gr-mem,.gr-chat{padding:14px}
.gr-mem h3,.gr-chat h3{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:6px}
.gr-cnt{background:var(--brand-soft);color:var(--brand);border-radius:99px;padding:1px 8px;font-size:12px}
.gr-grp{margin:0 0 10px} .gr-grp.mine .gr-gname{color:var(--brand)}
.gr-gname{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);margin:0 0 4px}
.gr-mrow{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:10px}
.gr-mrow.off{opacity:.55}
.gr-ava{position:relative;width:32px;height:32px;flex:none;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.gr-ava i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--bg)}
.gr-mrow.off .gr-ava i{background:var(--ink3)}
.gr-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gr-nm b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gr-nm small{color:var(--ink3);font-weight:600}
.gr-tag{align-self:flex-start;font-size:11px;font-weight:900;padding:1px 7px;border-radius:99px;background:var(--surface2);color:var(--ink2)}
.gr-tag.lead{background:var(--amber-soft);color:#B45309}
[data-theme="dark"] .gr-tag.lead{color:#FCD34D}
.gr-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden} .gr-bar i{display:block;height:100%;background:var(--grad-cool);transition:width .4s}
.gr-done{font-size:15px}
.gr-mic{width:36px;height:36px;flex:none;border-radius:50%;border:1.5px solid var(--line2);background:var(--surface2);color:var(--ink3);display:grid;place-items:center;cursor:pointer;padding:0;transition:var(--tr)}
.gr-mic svg{width:17px;height:17px}
.gr-mic.ro{width:26px;height:26px;border:0;background:transparent;cursor:default;opacity:.35} .gr-mic.ro svg{width:15px;height:15px}
.gr-mic.on{background:linear-gradient(135deg,#10B981,#22C55E);color:#fff;border-color:transparent;box-shadow:0 0 0 4px var(--green-soft);animation:grPulse 1.6s infinite}
.gr-mic.ro.on{background:transparent;color:var(--green);opacity:1;box-shadow:none}
@keyframes grPulse{50%{box-shadow:0 0 0 8px transparent}}
.gr-mk{border:0;background:transparent;cursor:pointer;font-size:15px;opacity:.5;padding:4px} .gr-mk:hover{opacity:1}
/* Chat */
.gr-note{font-size:12px;color:var(--ink3);font-weight:700;margin:-4px 0 6px} .gr-note:empty{display:none}
.gr-msgs{max-height:300px;min-height:80px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px;margin:0 0 10px}
.gr-msg{max-width:86%;padding:7px 11px;border-radius:14px 14px 14px 4px;background:var(--surface2);font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.gr-msg b{display:block;font-size:11.5px;color:var(--brand);margin:0 0 1px}
.gr-msg.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--brand-soft)}
.gr-msg.t b{color:#B45309}
.gr-form{display:flex;gap:8px} .gr-form .inp{flex:1;min-width:0}
/* Natijalar */
.gr-won{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--green-soft);color:var(--green);font-weight:900;text-align:center;font-size:16px}
.gr-podium{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:0 0 16px}
.gr-pg{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px;border-radius:var(--r);background:var(--surface2);text-align:center;border:2px solid transparent}
.gr-pg.win{border-color:var(--amber);background:var(--amber-soft)} .gr-pg.mine{box-shadow:0 0 0 2px var(--brand) inset}
.gr-pg small{color:var(--ink3);font-weight:700;font-size:12px}
.gr-medal{font-size:30px} .gr-pct{font-family:var(--font-disp);font-size:28px;font-weight:900}
.gr-tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 12px}
.gr-tbl th{text-align:left;color:var(--ink3);font-size:12px;font-weight:800;padding:6px 8px;border-bottom:1px solid var(--line)}
.gr-tbl td{padding:7px 8px;border-bottom:1px solid var(--line)} .gr-tbl tr.me td{background:var(--brand-soft)}
.gr-plus{color:var(--green);font-weight:900}
.gr-ptsn{color:var(--ink3);font-size:12.5px;font-weight:700}
.gr-sound{margin-left:auto}
.gr-empty{padding:40px 20px;text-align:center}
@media (max-width:560px){
  .gr-card{padding:14px} .gr-head{padding:10px 12px}
  .gr-games{grid-template-columns:1fr 1fr} .gr-gc p{display:none}
  .gr-tbl th:nth-child(5),.gr-tbl td:nth-child(5){display:none}
  .gr-diff{min-width:0;flex:1}
}
@media (prefers-reduced-motion:reduce){.gr-mic.on{animation:none}}
/* Kabinet: «Guruhlar o'yini» bo'limi (havolalar ro'yxati, takliflar) */
.gm-inv{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:0 0 10px}
.gm-inv b{flex:1;min-width:0} .gm-inv small{display:block;color:var(--ink3);font-weight:600}
.gm-join{display:flex;gap:8px;flex-wrap:wrap} .gm-join .inp{flex:1;min-width:160px}

/* Panel: o'yin havolalari va so'zlar to'plami */
.gm-room{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin:0 0 10px}
.gm-room.off{opacity:.55}
.gm-main{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.gm-main small{color:var(--ink3);font-weight:600}
.gm-acts{display:flex;gap:6px;flex-wrap:wrap}
.gm-hist{padding:12px 14px;margin:0 0 10px;display:flex;flex-direction:column;gap:6px}
.gm-hist small{color:var(--ink3)}
.gp-rows{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;margin:10px 0}
.gp-row{padding:10px;border-radius:12px;background:var(--surface2);display:flex;flex-direction:column;gap:6px}
.gp-top,.gp-sub{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.gp-top .inp,.gp-sub .inp{padding:7px 9px;font-size:13px;flex:1;min-width:110px}
.gp-top .gp-emoji{flex:0 0 56px;min-width:56px;text-align:center}
.gp-top .gp-definition,.gp-sub .gp-sent{flex:2;min-width:200px}