/* برا السالفة (js/bara.js): شاشة فوق الغرفة الصوتية، والصوت شغال وراها. ألوان من design.css،
   والشريط العلوي والأزرار وطريقة اللعب نفس كلاسات السوم (css/som.css: som-top و som-b و som-note و som-host و som-rules) */

.bara-screen{display:none;}
.bara-screen.open{
  position:fixed; inset:0; z-index:1000002; display:flex; flex-direction:column;
  padding:calc(8px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px));
  box-sizing:border-box; color:var(--text); font-family:var(--font);
  background:radial-gradient(120% 60% at 50% 0%, rgba(99,102,241,.16), transparent 60%), var(--bg);
  overscroll-behavior:contain; touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
.bara-screen > *{width:100%;max-width:460px;margin-inline:auto;}
.bara-screen button{margin:0;font-family:inherit;-webkit-tap-highlight-color:transparent;}
.bara-screen .som-title b{color:#a5b4fc;}
.bara-pill{border-color:rgba(129,140,248,.4);background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(59,130,246,.08));}
.bara-pill .som-pill-t b,.bara-pill .som-pill-go{color:#a5b4fc;}
.bara-pill .som-pill-dot{background:#818cf8;box-shadow:0 0 0 4px rgba(129,140,248,.2);}

.bara-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 0 8px;-webkit-overflow-scrolling:touch;}
.bara-act{flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding-top:6px;}
.bara-sec{font-size:12px;font-weight:700;color:var(--text-3);text-align:center;}
.bara-empty{text-align:center;color:var(--text-3);font-size:13px;padding:24px 0;}
.bara-empty .ic{width:18px;height:18px;vertical-align:middle;}

/* لوحة نص (وش يصير) */
.bara-panel{flex-shrink:0;text-align:center;padding:12px 14px;border-radius:var(--r-lg);background:var(--glass-strong);border:1px solid var(--line-2);}
.bara-p-t{font-size:18px;font-weight:800;line-height:1.35;}
.bara-p-s{font-size:12.5px;color:var(--text-2);margin-top:3px;line-height:1.5;}
.bara-p-k{font-size:12px;color:var(--text-3);}
.bara-panel.mine{border-color:rgba(245,197,66,.6);background:linear-gradient(180deg,rgba(245,197,66,.14),var(--glass-strong));}
.bara-panel.mine .bara-p-t{color:var(--gold);}
.bara-panel.caught{border-color:rgba(34,197,94,.5);background:linear-gradient(180deg,rgba(34,197,94,.14),var(--glass-strong));}
.bara-panel.caught .bara-p-t{color:#4ade80;}
.bara-panel.escaped{border-color:rgba(239,68,68,.5);background:linear-gradient(180deg,rgba(239,68,68,.14),var(--glass-strong));}
.bara-panel.escaped .bara-p-t{color:#fca5a5;}
.bara-word{font-size:30px;font-weight:800;color:var(--gold);line-height:1.3;margin:2px 0;}
.bara-gains{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px;}
.bara-gain{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:#0d3320;color:#4ade80;}
.bara-gain.me{background:#3b3113;color:var(--gold);}

/* بطاقة الدور: تنقلب بلمسة */
.bara-card{flex-shrink:0;height:132px;perspective:900px;}
.bara-card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s var(--ease);}
.bara-card.open .bara-card-in{transform:rotateY(180deg);}
.bara-face{position:absolute;inset:0;border-radius:var(--r-lg);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 14px;box-sizing:border-box;text-align:center;}
.bara-face.front{width:100%;border:1px solid rgba(129,140,248,.45);color:var(--text);cursor:pointer;box-shadow:none;
  background:repeating-linear-gradient(45deg,rgba(99,102,241,.16) 0 8px,rgba(59,130,246,.08) 8px 16px),var(--surface);}
.bara-face.front .ic{width:22px;height:22px;color:#a5b4fc;}
.bara-face.front b{font-size:17px;}
.bara-face.front span{font-size:11.5px;color:var(--text-3);}
.bara-face.back{transform:rotateY(180deg);background:linear-gradient(160deg,#1c2744,#101a33);border:1px solid rgba(245,197,66,.45);}
.bara-face.back.is-out{background:linear-gradient(160deg,#3a1418,#1d0c10);border-color:rgba(239,68,68,.55);}
.bara-role-k{font-size:11.5px;color:var(--text-3);}
.bara-role-t{font-size:28px;font-weight:800;color:var(--gold);line-height:1.2;}
.bara-role-t.out{color:#fca5a5;}
.bara-role-s{font-size:11.5px;color:var(--text-2);line-height:1.45;max-width:340px;}
.bara-role-s b{color:var(--text);}
.bara-hide{position:absolute;top:8px;left:8px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--line-2);color:var(--text-2);font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px;box-shadow:none;cursor:pointer;}
.bara-hide .ic{width:12px;height:12px;}

/* مين يسأل مين */
.bara-ask{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px;}
.bara-ask-p{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:120px;}
.bara-ask-p span{font-size:13.5px;font-weight:800;margin-top:4px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bara-ask-p small{font-size:10.5px;color:var(--text-3);}
.bara-ask-arrow .ic{width:24px;height:24px;color:var(--gold);transform:scaleX(-1);}

/* صور اللاعبين (الردهة، التصويت، الترتيب) */
.bara-av{width:46px;height:46px;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--line-2);background:var(--surface-2);box-sizing:border-box;}
.bara-av.lg{width:58px;height:58px;}
.bara-av.sm{width:32px;height:32px;flex-shrink:0;}
.bara-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px;}
.bara-grid.small{grid-template-columns:repeat(5,minmax(0,1fr));}
.bara-grid.small .bara-av{width:38px;height:38px;}
.bara-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);color:var(--text);min-width:0;font:inherit;box-shadow:none;}
.bara-tile.me{border-color:rgba(96,165,250,.6);}
.bara-tile.win{border-color:var(--gold);background:linear-gradient(180deg,rgba(245,197,66,.16),var(--surface));}
.bara-tile.vote{cursor:pointer;}
.bara-tile.picked{border-color:var(--gold);background:linear-gradient(180deg,rgba(245,197,66,.2),var(--surface));box-shadow:0 0 0 3px rgba(245,197,66,.2);}
.bara-tile.picked .bara-av{border-color:var(--gold);}
.bara-nm{max-width:100%;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bara-tag,.bara-pts,.bara-pick{font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:#3b3113;color:var(--gold);}
.bara-pts{background:var(--surface-3);color:var(--text);font-variant-numeric:tabular-nums;}
.bara-done{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:#0d3320;color:#4ade80;display:flex;align-items:center;justify-content:center;}
.bara-done .ic{width:11px;height:11px;}
.bara-rank{position:absolute;top:4px;right:6px;font-size:11px;font-weight:800;color:var(--text-3);}
.bara-tile.win .bara-rank{color:var(--gold);}
.bara-x{position:absolute;top:2px;left:2px;width:22px;height:22px;padding:0;border-radius:50%;background:var(--surface-3);border:1px solid var(--line-2);color:var(--text-2);display:flex;align-items:center;justify-content:center;box-shadow:none;}
.bara-x .ic{width:11px;height:11px;}

/* الكشف */
.bara-tally{display:flex;flex-direction:column;gap:6px;}
.bara-trow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line);}
.bara-trow.out{border-color:rgba(239,68,68,.55);background:linear-gradient(90deg,rgba(239,68,68,.14),var(--surface) 75%);}
.bara-tmid{flex:1;min-width:0;}
.bara-tn{font-size:13px;font-weight:700;}
.bara-tn em{font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:999px;background:#3f1519;color:#fca5a5;margin-inline-start:4px;}
.bara-tmid small{display:block;font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bara-bar{height:6px;border-radius:3px;background:var(--surface-3);margin:3px 0 2px;overflow:hidden;}
.bara-bar i{display:block;height:100%;background:var(--brand-grad);border-radius:3px;}
.bara-trow.out .bara-bar i{background:linear-gradient(90deg,#ef4444,#f59e0b);}
.bara-trow b{font-size:16px;font-variant-numeric:tabular-nums;}

/* التخمين */
.bara-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.bara-opt{padding:11px 6px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);font-size:14px;font-weight:700;box-shadow:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bara-opt.on{border-color:var(--gold);background:#3b3113;color:var(--gold);}

/* المنظم: التصنيف وعدد الجولات */
.bara-cats{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.bara-chip{padding:6px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);font-size:12px;font-weight:700;box-shadow:none;cursor:pointer;}
.bara-chip.on{background:var(--brand-grad);color:#fff;border-color:transparent;}
.bara-rounds{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--text-2);}
.bara-rounds b{min-width:24px;text-align:center;font-size:18px;color:var(--text);}

/* شاشات قصيرة: كل شي أصغر عشان 10 لاعبين يطلعون بدون تداخل على 360×640 */
@media (max-height:700px){
  .bara-card{height:112px;}
  .bara-role-t{font-size:24px;}
  .bara-p-t{font-size:16px;}
  .bara-panel{padding:9px 12px;}
  .bara-av{width:40px;height:40px;}
  .bara-av.lg{width:48px;height:48px;}
  .bara-grid{gap:6px 5px;}
  .bara-tile{padding:6px 2px 5px;}
  .bara-chip{padding:5px 9px;font-size:11.5px;}
}
@media (max-width:370px){
  .bara-nm{font-size:11px;}
  .bara-grid.small{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (prefers-reduced-motion:reduce){
  .bara-card-in{transition:none;}
}
/* زر داخل المحتوى (أرسل التخمين) ما يتمدد طول */
.bara-body .som-b{flex:0 0 auto;}