/* ============================================================
   g2.css — the three newer party games (js/games2.js):
   لو خيّروك · برّا السالفة · مين قالها؟
   Built on the same navy/gold ground as the rest of the big screen,
   and deliberately large: every one of these screens is read from
   across a majlis, not from a desk.
   ============================================================ */

/* ---- lobby ---- */
.g2-lobby{
  display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:22px;align-items:start;
  max-width:1000px;margin:0 auto;
}
.g2-join{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:18px;text-align:center;
}
.g2-join .hn-qr{background:#fff;border-radius:12px;padding:10px;display:inline-block;}
.g2-join .hn-qr svg{display:block;width:100%;max-width:100%;height:auto;image-rendering:pixelated;}
.g2-code{
  margin-top:10px;font-size:26px;font-weight:900;letter-spacing:6px;color:var(--green-300);
}
.g2-seats{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;}
.g2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.g2-chip{
  font-size:14px;font-weight:800;padding:7px 14px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
}

/* ---- shared stage ---- */
.g2-head{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.g2-head h2{margin:0;font-size:clamp(20px,2.6vw,30px);}
.g2-round{
  font-size:12.5px;font-weight:900;color:var(--green-300);
  background:rgba(174,184,255,.12);border:1px solid var(--line);border-radius:999px;padding:5px 14px;
}
.g2-count{font-size:14px;font-weight:800;color:var(--ink-soft);}
.g2-stage{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:clamp(18px,3vw,34px);text-align:center;max-width:980px;margin:0 auto;
}
.g2-stage.good{border-color:#2F8F55;background:linear-gradient(180deg,rgba(63,191,106,.10),transparent 60%),var(--surface);}
.g2-stage.bad{border-color:#8E3A3A;background:linear-gradient(180deg,rgba(212,74,74,.10),transparent 60%),var(--surface);}
.g2-stage h2{margin:6px 0 8px;font-size:clamp(22px,3.2vw,36px);line-height:1.6;}
.g2-stage p{margin:0;font-size:clamp(14px,1.7vw,18px);color:var(--ink-soft);line-height:1.95;}
.g2-big{font-size:clamp(46px,6vw,74px);line-height:1;}
.g2-who{color:var(--warn);}

.g2-clock{
  margin:16px auto 6px;width:112px;height:112px;border-radius:50%;
  border:4px solid var(--line);display:grid;place-items:center;background:var(--bg-2);
}
.g2-clock span{font-size:40px;font-weight:900;color:var(--ink);line-height:1;}
.g2-clock span.hot{color:#FF9A8F;}
.g2-clock small{font-size:11px;font-weight:800;color:var(--ink-dim);}

/* ---- لو خيّروك ---- */
.g2-sides{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;
  max-width:1050px;margin:0 auto;
}
.g2-side{
  background:var(--surface);border:2px solid var(--line);border-radius:22px;
  padding:clamp(16px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;justify-content:center;
}
.g2-side.a{border-color:#3B4BC4;}
.g2-side.b{border-color:#B4531B;}
.g2-side.win{box-shadow:0 0 0 3px rgba(217,164,65,.35);}
.g2-side-label{font-size:12.5px;font-weight:900;color:var(--ink-dim);}
.g2-side-text{font-size:clamp(20px,2.9vw,34px);font-weight:900;line-height:1.7;}
.g2-side-count{font-size:clamp(30px,4vw,48px);font-weight:900;color:var(--warn);}
.g2-side-names{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.g2-side-names span{
  font-size:13px;font-weight:800;padding:5px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
}
.g2-side-names i{font-size:13px;color:var(--ink-dim);}
.g2-or{
  align-self:center;font-size:15px;font-weight:900;color:var(--ink-dim);
  background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:10px 12px;
}

/* ---- seats, votes, guesses ---- */
.g2-order,.g2-votes,.g2-guesses{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px;
}
.g2-seat{
  font-size:14px;font-weight:800;padding:8px 15px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);
}
.g2-seat.now{background:rgba(217,164,65,.18);border-color:var(--warn);color:#FFD98A;transform:scale(1.06);}
.g2-seat.done{opacity:.5;}
.g2-seat.voted{border-color:var(--warn);color:#FFD98A;}
.g2-seat.right{border-color:#2F8F55;color:#7BE3A2;}
.g2-seat.wrong{border-color:#8E3A3A;color:#FF9A8F;}

/* ---- مين قالها؟ ---- */
.g2-prompt{font-size:clamp(14px,1.8vw,19px);font-weight:800;color:var(--ink-soft);margin-top:8px;}
.g2-answer{
  margin:16px auto;max-width:820px;font-size:clamp(22px,3.4vw,40px);font-weight:900;line-height:1.8;
  background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:clamp(14px,2.4vw,26px);
}
.g2-author{font-size:clamp(18px,2.4vw,26px);font-weight:900;color:var(--warn);margin-top:6px;}
.g2-guesses i{font-size:13px;color:var(--ink-dim);}

/* ---- score strip ---- */
.g2-scores{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px auto 0;max-width:900px;}
.g2-score{
  font-size:13.5px;font-weight:800;padding:7px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);
}
.g2-score b{color:var(--ink);margin-inline-start:4px;}
.g2-score.top{border-color:var(--warn);color:#FFD98A;}

/* ---- rules sheet ---- */
.modal.g2-rules{max-width:560px;text-align:right;}
.modal.g2-rules ol{margin:12px 0 0;padding-inline-start:20px;font-size:14.5px;line-height:2.1;color:var(--ink-soft);}
.modal.g2-rules li{margin-bottom:8px;}
.modal.g2-rules b{color:var(--ink);}

@media (max-width:760px){
  .g2-lobby{grid-template-columns:1fr;}
  .g2-sides{grid-template-columns:1fr;}
  .g2-or{justify-self:center;}
}