/* ملف xo-client.css — ضعه في public/css/ */

.xo-modal{
  display:none; position:fixed; inset:0; z-index:2147483000;
  background:transparent; backdrop-filter:none;
  align-items:center; justify-content:center; direction:rtl;
  font-family:"Tahoma","Segoe UI",sans-serif;
}
.xo-modal.show{ display:flex; }
.xo-box{
  width:min(94vw,400px); background:rgba(19,40,58,.55);
  border:1px solid rgba(255,255,255,.22); border-radius:18px; padding:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.35); color:#fff; position:relative;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.xo-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
#xoTurn{ font-size:18px; font-weight:800; color:#f4a826; }
.xo-x{ background:rgba(255,255,255,.1); color:#fff; border:none; width:34px; height:34px;
  border-radius:50%; font-size:16px; cursor:pointer;
  display:inline-flex!important; align-items:center!important; justify-content:center!important; flex-shrink:0!important; }
.xo-top-btns{ display:flex; align-items:center; gap:8px; }

.xo-players{ display:flex; flex-direction:row; justify-content:space-between; align-items:stretch; gap:8px; margin-bottom:12px; }
.xo-pcard{ display:flex; flex-direction:row; align-items:center; gap:8px; flex:1 1 0; min-width:0;
  position:relative; background:rgba(255,255,255,.06); border:2px solid transparent; padding:8px 10px;
  border-radius:14px; font-weight:700; font-size:13px; transition:.2s; box-sizing:border-box; }
.xo-pcard.active{ border-color:#f4a826; background:rgba(244,168,38,.18); transform:scale(1.03); z-index:5;
  box-shadow:0 0 14px rgba(244,168,38,.4); }
.xo-pcard.active .xo-avatar-frame{ box-shadow:0 0 0 3px #f4a826, 0 2px 6px rgba(0,0,0,.4); }

.xo-avatar-col{ display:flex; flex-direction:row; align-items:center; gap:8px; position:relative; min-width:0; width:100%; }
.xo-avatar-frame{ width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid rgba(255,255,255,.55); box-shadow:0 2px 6px rgba(0,0,0,.35); background:#334; }
.xo-avatar{ width:100%; height:100%; object-fit:cover; display:block; }
.xo-pname{ font-size:12px; font-weight:700; flex:1; min-width:0; text-align:center; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xo-bot-tag{ font-size:14px; flex-shrink:0; cursor:pointer; }

.xo-wrap{ width:100%; aspect-ratio:1/1; background:linear-gradient(145deg,#fff,#e9dfc4);
  border-radius:14px; padding:10px; box-shadow:inset 0 0 0 3px rgba(0,0,0,.15); }
.xo-board{ width:100%; height:100%; display:grid;
  grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:8px; }
.xo-cell{ background:#fdf6e3; border:2px solid #0d1b2a; border-radius:10px; position:relative;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.xo-cell.movable{ background:#fdf1cf; animation:xoPulse 1.1s infinite ease-in-out; }
@keyframes xoPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(244,168,38,.5); } 50%{ box-shadow:0 0 0 6px rgba(244,168,38,0); } }
.xo-cell.filled{ cursor:default; }
.xo-cell.win-cell{ background:#c8f7d2 !important; }

.xo-mark{ width:64%; height:64%; overflow:visible; }
.xo-mark-x line{ stroke:#d81f28; stroke-width:11; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; animation:xoDrawLine .28s ease forwards; }
.xo-mark-x line:nth-child(2){ animation-delay:.12s; }
@keyframes xoDrawLine{ to{ stroke-dashoffset:0; } }
.xo-mark-o circle{ fill:none; stroke:#1a9c58; stroke-width:11;
  stroke-dasharray:210; stroke-dashoffset:210; animation:xoDrawCircle .32s ease forwards; }
@keyframes xoDrawCircle{ to{ stroke-dashoffset:0; } }

.xo-controls{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:14px; }
.xo-msg-row{ display:flex; align-items:center; justify-content:center; }
.xo-msg-btn{ width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff;
  font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.3); transition:transform .15s, background .15s; }
.xo-msg-btn:hover{ background:rgba(244,168,38,.4); }
.xo-msg-btn:active{ transform:scale(.88); }
.xo-hint{ font-size:14px; color:#cdd6df; min-height:20px; text-align:center; }

/* ===== حلقة عدّاد الدور ===== */
.xo-turn-ring{ width:40px; height:40px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.xo-turn-ring .xo-avatar-frame{ width:34px; height:34px; }
.xo-ring-svg{ position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .2s ease; pointer-events:none; transform:rotate(-90deg); }
.xo-turn-ring.on .xo-ring-svg{ opacity:1; }
.xo-ring-track{ stroke:rgba(255,255,255,.18); }
.xo-ring-progress{ transition:stroke-dashoffset .22s linear, stroke .25s linear; stroke-linecap:round; }

/* ===== لوحة المشاهدين ===== */
.xo-eye-wrap{ position:relative; }
.xo-eye{ display:flex; align-items:center; gap:4px; width:auto !important; padding:0 10px; border-radius:16px !important; font-size:13px; font-weight:700; }
.xo-spec-panel{ display:none; position:absolute; top:110%; left:0; width:180px; max-height:220px; overflow-y:auto;
  background:#16303f; border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:10px; z-index:50;
  box-shadow:0 12px 30px rgba(0,0,0,.5); }
.xo-spec-panel.show{ display:block; }
.xo-spec-title{ font-size:12.5px; font-weight:800; color:#f4a826; margin-bottom:6px; text-align:center; }
.xo-spec-list{ display:flex; flex-direction:column; gap:4px; }
.xo-spec-row{ font-size:12px; color:#eaf1f6; background:rgba(255,255,255,.06); border-radius:8px; padding:4px 8px; }
.xo-spec-empty{ font-size:12px; color:#9fb0bd; text-align:center; padding:8px 0; }

.xo-spec-banner{ position:absolute; top:52px; left:0; right:0; z-index:30; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.xo-spec-banner-row{ background:rgba(13,27,42,.85); color:#fff; font-size:12.5px; font-weight:700;
  padding:6px 14px; border-radius:20px; margin-top:4px; opacity:0; transform:translateY(-8px); transition:.3s; }
.xo-spec-banner-row.in{ opacity:1; transform:translateY(0); }
.xo-spec-banner-row.out{ opacity:0; transform:translateY(-8px); }

/* ===== إشعارات المباريات الجارية ===== */
.xo-live-notices{ position:fixed; bottom:16px; left:16px; z-index:2147482000; display:flex; flex-direction:column; gap:8px; }
.xo-live-chip{ background:#16303f; border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:10px;
  width:220px; display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; direction:rtl;
  box-shadow:0 12px 30px rgba(0,0,0,.5); opacity:0; transform:translateX(-16px); transition:.3s; }
.xo-live-chip.in{ opacity:1; transform:translateX(0); }
.xo-live-chip.out{ opacity:0; transform:translateX(-16px); }
.xo-live-player{ display:flex; align-items:center; gap:6px; width:100%; }
.xo-live-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.xo-live-name{ font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:95px; }
.xo-live-player.x .xo-live-name{ color:#ff7a7a; }
.xo-live-player.o .xo-live-name{ color:#6be396; }
.xo-live-vs{ color:#f4a826; font-size:11px; font-weight:900; letter-spacing:1px; }
.xo-live-actions{ display:flex; gap:6px; margin-top:4px; width:100%; }
.xo-live-watch{ flex:1; background:#f4a826; color:#1a2733; border:none; border-radius:8px;
  padding:6px; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; }
.xo-live-watch:hover{ background:#ffbc4d; }
.xo-live-dismiss{ background:rgba(255,255,255,.12); color:#fff; border:none;
  border-radius:50%; width:22px; height:22px; font-size:11px; cursor:pointer; flex-shrink:0; }

/* ===== لوحة الرسائل السريعة ===== */
.xo-quick-overlay{ position:fixed; inset:0; z-index:2147483000; display:none;
  align-items:center; justify-content:center; background:rgba(0,0,0,.5); direction:rtl;
  pointer-events:auto !important; }
.xo-quick-overlay.show{ display:flex; }
.xo-quick-overlay, .xo-quick-overlay *{ pointer-events:auto !important; }
.xo-quick-panel{ width:min(88vw,290px); max-height:78vh; overflow-y:auto;
  background:#16303f; border:1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.5); position:relative; }
.xo-quick-close{ position:absolute; top:8px; left:8px; width:28px; height:28px;
  border-radius:50%; background:rgba(255,255,255,.14); border:none; color:#fff;
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:2; transition:background .15s; }
.xo-quick-close:hover{ background:rgba(229,72,77,.6); }
.xo-quick-title{ text-align:center; font-size:13.5px; font-weight:800; color:#eaf1f6;
  margin-bottom:10px; padding-left:26px; }
.xo-quick-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
.xo-quick-phrase{ background:rgba(255,255,255,.1); color:#eaf1f6; border:1px solid rgba(255,255,255,.14);
  border-radius:9px; padding:8px 4px; font-size:11.5px; font-weight:700; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.15s; }
.xo-quick-phrase:hover{ background:rgba(244,168,38,.3); }
.xo-quick-emoji{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
  border-radius:9px; padding:7px 0; font-size:20px; cursor:pointer; transition:.15s; }
.xo-quick-emoji:hover{ background:rgba(244,168,38,.3); transform:scale(1.08); }
.xo-quick-write{ width:100%; margin-top:10px; background:#f4a826; color:#1a2733; border:none;
  border-radius:10px; padding:10px 0; font-size:13px; font-weight:800; cursor:pointer; }
.xo-quick-write:hover{ background:#ffbc4d; }

/* ===== فقاعة كلام ===== */
.xo-chat-bubble{ position:absolute; top:100%; left:50%; margin-top:8px;
  transform:translateX(-50%) translateY(-6px) scale(.85); opacity:0;
  background:#fdfdfd; color:#12222f; font-size:14px; font-weight:800;
  padding:7px 12px; border-radius:12px; white-space:nowrap; max-width:160px;
  overflow:hidden; text-overflow:ellipsis; box-shadow:0 6px 16px rgba(0,0,0,.4);
  z-index:70; transition:transform .22s ease, opacity .22s ease; }
.xo-chat-bubble::after{ content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:#fdfdfd; }
.xo-chat-bubble.emoji{ font-size:28px; padding:4px 8px; background:transparent; box-shadow:none; }
.xo-chat-bubble.emoji::after{ display:none; }
.xo-chat-bubble.in{ transform:translateX(-50%) translateY(0) scale(1); opacity:1; }
.xo-chat-bubble.out{ transform:translateX(-50%) translateY(6px) scale(.85); opacity:0; }

/* ===== نافذة كتابة رسالة نصية حرة ===== */
.xo-textprompt-overlay{ position:fixed; inset:0; z-index:2147483000; display:none;
  align-items:center; justify-content:center; background:rgba(0,0,0,.5); direction:rtl;
  pointer-events:auto !important; }
.xo-textprompt-overlay.show{ display:flex; }
.xo-textprompt-overlay, .xo-textprompt-overlay *{ pointer-events:auto !important; }
.xo-textprompt-box{ width:min(88vw,320px); background:#fbfbf7; color:#1a2733;
  border-radius:16px; padding:20px 18px; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.xo-textprompt-title{ font-size:16.5px; font-weight:700; margin-bottom:16px; text-align:center; }
.xo-textprompt-input{ width:100%; border:none; border-bottom:2px solid #2a9d4a; background:transparent;
  font-size:15px; padding:6px 2px; color:#1a2733; outline:none; box-sizing:border-box; margin-bottom:18px; }
.xo-textprompt-btns{ display:flex; justify-content:space-between; }
.xo-textprompt-ok, .xo-textprompt-cancel{ background:none; border:none; cursor:pointer;
  font-size:14.5px; font-weight:700; color:#2a9d4a; padding:6px 10px; }
.xo-textprompt-cancel{ color:#666; }
.xo-textprompt-ok:hover, .xo-textprompt-cancel:hover{ opacity:.75; }

/* ===== شعار البداية/النهاية ===== */
.xo-match-banner{ position:absolute; inset:0; z-index:200; display:flex;
  align-items:center; justify-content:center; pointer-events:none; }
.xo-match-banner-card{ background:linear-gradient(160deg,#1c3a4d,#0d1f2b);
  border:2px solid rgba(244,168,38,.75); border-radius:16px; padding:16px 22px;
  text-align:center; box-shadow:0 18px 46px rgba(0,0,0,.55), 0 0 30px rgba(244,168,38,.25);
  opacity:0; transform:scale(.8) translateY(10px); transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; }
.xo-match-banner-card.in{ opacity:1; transform:scale(1) translateY(0); }
.xo-match-banner-card.out{ opacity:0; transform:scale(.85) translateY(-8px); }
.xo-match-banner-icon{ font-size:30px; margin-bottom:4px; }
.xo-match-banner-line{ font-size:15px; font-weight:800; color:#fff; white-space:nowrap; }
.xo-match-banner-line .vs{ color:#f4a826; margin:0 6px; font-size:13px; }

/* ===== لوحة متصدري إكس أو (نفس أسلوب لوحة اللودو) ===== */
.xo-back-btn{display:block;width:100%;padding:8px;background:rgba(255,255,255,0.08);border:none;color:#e0c9ff;font-size:13px;text-align:right;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.1);}
.xo-title{text-align:center;padding:10px 0 4px;color:#f4d03f;font-size:17px;font-weight:bold;letter-spacing:2px;text-shadow:0 0 12px #f4d03f99;}
.xo-podium{display:flex;justify-content:center;align-items:flex-end;gap:6px;padding:10px 8px 0;}
.xo-pod{display:flex;flex-direction:column;align-items:center;position:relative;}
.xo-pod-avatar{border-radius:50%;object-fit:cover;border:3px solid #fff;background:#333;}
.xo-pod-crown{font-size:20px;line-height:1;margin-bottom:-4px;}
.xo-pod-name{color:#fff;font-weight:bold;margin-top:4px;max-width:80px;width:80px;text-align:center;white-space:nowrap;overflow:hidden;line-height:1.2;}
.xo-pod-wins{font-size:11px;color:#f4d03f;margin-top:1px;}
.xo-pod-bar{border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:900;margin-top:6px;width:72px;}
.xo-list{padding:6px 8px 16px;}
.xo-list-row{display:flex;align-items:center;background:rgba(255,255,255,0.06);border-radius:10px;margin-bottom:6px;padding:6px 8px;border:1px solid rgba(255,255,255,0.08);}
.xo-list-rank{color:#f4d03f;font-weight:900;font-size:15px;width:24px;text-align:center;flex-shrink:0;}
.xo-list-pic{width:38px;height:38px;border-radius:50%;object-fit:cover;margin:0 8px;border:2px solid rgba(255,255,255,0.2);flex-shrink:0;}
.xo-list-name{flex:1;color:#e0c9ff;font-weight:bold;white-space:nowrap;overflow:hidden;min-width:0;}
.xo-list-wins{color:#f4d03f;font-size:13px;font-weight:bold;flex-shrink:0;}
.xo-divider{height:1px;background:linear-gradient(90deg,transparent,#f4d03f55,transparent);margin:4px 0 8px;}