/* =========================
   Spyfall Arabic – UI v3
   Dark + Orange (mobile-first)
========================= */

*{ box-sizing:border-box; }

:root{
  --bg0:#16002E;
  --bg1:#2A0650;
  --card:#2E0A57;
  --line:#4C1D95;
  --text:#F5F3FF;
  --muted:#C9B6FF;

  --primary:#FF9F1C;
  --primary2:#FFD166;
  --danger:#FF4D6D;
  --ok:#2ED573;

  --r:16px;
  --shadow: 0 12px 28px rgba(0,0,0,.45);
  --glow: 0 0 18px rgba(255,193,7,.25);
}

html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Tahoma, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(255,159,28,.18), transparent 60%),
    radial-gradient(900px 360px at 80% 20%, rgba(34,211,238,.16), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

h1,h2,h3{ margin:0; }
.muted{ color:var(--muted); font-size:.92rem; }

/* =========================
   Utilities
========================= */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* =========================
   Header
========================= */
.hdr{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(22,0,46,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(76,29,149,.55);
  padding:12px;
  display:flex;
  gap:12px;
  align-items:stretch;
}

.hdr__left{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

/* شعار الهيدر */
.hdr__brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.hdr__logo{
  width:46px;
  height:46px;
  object-fit:contain;
  padding:6px;
  border-radius:12px;
  border:1px solid rgba(76,29,149,.55);
  background: rgba(46,10,87,.55);
  box-shadow: var(--glow);
}

/* بقايا/دعم قديم (لا تضر) */
.hdr__title{ min-width:0; }
.hdr__room{ font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:8px; }
.hdr__meta{ font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; color:var(--muted); }

.hdr__actions{ display:flex; gap:8px; align-items:center; }

.iconbtn{
  width:42px; height:42px;
  border-radius:12px;
  border:1px solid rgba(76,29,149,.55);
  background: rgba(46,10,87,.55);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow: var(--glow);
}
.iconbtn:hover{ border-color: rgba(255,159,28,.55); }
.iconbtn.danger:hover{ border-color: rgba(255,77,109,.65); }

.hdr__ad{
  width:min(360px, 38vw);
  display:flex;
}

/* إعلان داخل الهيدر */
.room-ad-container.in-header{
  margin:0;
  height:64px;
  border-radius:16px;
}

@media (max-width:720px){
  .hdr{ flex-direction:column; }
  .hdr__ad{ width:100%; }
  .hdr__meta{ max-width:100%; }
  .room-ad-container.in-header{ height:78px; }
}

/* =========================
   Layout
========================= */
.shell{
  max-width: 560px;
  margin: 12px auto 32px;
  padding: 0 12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom: 140px; /* مساحة لشريط الكتابة الثابت */
}

.card{
  background: linear-gradient(180deg, rgba(46,10,87,.72), rgba(22,0,46,.58));
  border:1px solid rgba(76,29,149,.55);
  border-radius: var(--r);
  padding: 14px;
  box-shadow: var(--shadow);
}

.card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.row{ display:flex; gap:10px; align-items:center; }

/* =========================
   Room banner (فوق البطاقة)
========================= */
.roomBanner{
  background: rgba(46,10,87,.55);
  border:1px solid rgba(76,29,149,.55);
  border-radius:16px;
  padding:10px 12px;
  box-shadow: var(--shadow);
}

.roomBanner__row {
    display: flex;
    align-items: center;
    gap: 6px;              /* تقليل المسافة */
    flex-wrap: wrap;
    overflow: hidden;
}

.roomBanner__title{ font-weight:900; }

/* رقم الغرفة داخل إطار */
.roomCode{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(255,159,28,.45);
  background: rgba(255,159,28,.14);
  font-weight:900;
  letter-spacing:.3px;
  color: rgba(245,243,255,.95);
  font-size:.95rem;
  line-height:1;
}

/* أسماء اللاعبين بجانب رقم الغرفة */
.playersPills{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}

/* شارة اللاعب (بيضاوي) */
.playersPills .chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:2px 10px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(76,29,149,.55);
  background: rgba(46,10,87,.55);
  max-width:220px;
  line-height:1;
}

/* اسم اللاعب فقط */
.playersPills .chip__left{ min-width:0; display:flex; align-items:center; gap:8px; }
.playersPills .chip__name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:200px;
  font-weight:800;
}

/* إزالة كلمة متصل/غير متصل وأي عناصر إضافية */
.playersPills .pill,
.playersPills .chip__right,
.playersPills .chip__status,
.playersPills .statusText,
.playersPills [class*="status"],
.playersPills [class*="online"],
.playersPills [class*="offline"]{
  display:none !important;
}

/* نخفي النقطة لكن نخليها موجودة للّون */
.playersPills .statusDot{ display:none !important; }

/* ألوان حسب الاتصال */
.playersPills .chip:has(.statusDot.off){
  border-color: rgba(148,163,184,.55);
  color: rgba(201,182,255,.75);
}
.playersPills .chip:has(.statusDot:not(.off)){
  border-color: rgba(46,213,115,.55);
  color: rgba(46,213,115,.95);
}

/* جوال: خلي اللاعبين تحت رقم الغرفة لتفادي تزاحم */
@media (max-width:420px){
  .playersPills{ flex-basis:100%; }
  .playersPills .chip{ max-width:100%; }
  .playersPills .chip__name{ max-width:100%; }
}

/* =========================
   Inputs / Buttons
========================= */
input{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(76,29,149,.55);
  background: rgba(22,0,46,.35);
  color: var(--text);
  outline:none;
}
input:focus{ border-color: rgba(255,159,28,.70); box-shadow: 0 0 0 3px rgba(255,159,28,.14); }
input:disabled{ opacity:.55; }

button{
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(76,29,149,.55);
  background: rgba(46,10,87,.55);
  color: var(--text);
  cursor:pointer;
}
button:disabled{ opacity:.55; cursor:not-allowed; }

.btn-primary{
  border:none;
  background: linear-gradient(180deg, var(--primary2), var(--primary));
  color:#14001F;
  font-weight:800;
  box-shadow: 0 12px 30px rgba(255,159,28,.18);
}
.btn-primary:hover{ filter:brightness(1.03); }

.btn-ghost{
  background: rgba(46,10,87,.40);
  border:1px solid rgba(255,159,28,.45);
  font-weight:800;
}
.btn-ghost:hover{ border-color: rgba(255,159,28,.70); }

.btn-xs{ padding:8px 10px; border-radius:12px; font-size:13px; }

/* =========================
   Reveal (Curtain)
========================= */
.reveal{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(76,29,149,.55);
  background: rgb(233 30 99);
  min-height: 132px;
}

.reveal__under{
  padding:16px;
  line-height:1.7;
  min-height: 132px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.reveal__curtain{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgb(255, 159, 28), rgb(46, 10, 87)),
    radial-gradient(900px 300px at 50% 20%, rgba(255,209,102,.22), transparent 60%);
  transform: translateY(0);
  transition: transform .25s ease;
  touch-action:none;
}

.reveal.open .reveal__curtain{ transform: translateY(-78%); }

.curtain__handle{
  position:absolute;
  bottom:10px;
  left:10px;
  right:10px;
  height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,159,28,.45);
  background: rgba(46,10,87,.55);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  font-weight:700;
  box-shadow: var(--glow);
}

.curtain__handle .dots{ opacity:.75; letter-spacing:2px; }

.hint{ margin-top:10px; color:var(--muted); }

/* =========================
   Turn box (pulse when active)
========================= */
.turn.off{ opacity:.70; filter:saturate(.65); }
.turn.off input, .turn.off button{ pointer-events:none; }

.turn.on{
  border-color: rgba(255,159,28,.55);
  box-shadow: var(--shadow), 0 0 0 3px rgba(255,159,28,.10), var(--glow);
  animation: pulse 1.25s ease-in-out infinite;
}

@keyframes pulse{
  0%{ box-shadow: var(--shadow), 0 0 0 0 rgba(255,159,28,.0), var(--glow); }
  50%{ box-shadow: var(--shadow), 0 0 0 6px rgba(255,159,28,.10), 0 0 28px rgba(255,159,28,.18); }
  100%{ box-shadow: var(--shadow), 0 0 0 0 rgba(255,159,28,.0), var(--glow); }
}

/* =========================
   Feed (no scrollbar)
========================= */
.feed{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.roundblock{
  border:1px solid rgba(76,29,149,.55);
  background: rgba(46,10,87,.40);
  border-radius: 14px;
  padding:10px;
}

.roundblock__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

.tag{
  padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #E91E63;
    font-size: .82rem;
    color: rgba(245, 243, 255, .88);
    background: #E91E63;
}

.line{ line-height:1.8; }
.line b{ color: rgba(255,159,28,.95); }

/* =========================
   List items
========================= */
.list{ display:flex; flex-direction:column; gap:8px; }
.item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(76,29,149,.55);
  border-radius:14px;
  background: rgba(46,10,87,.40);
}

/* pill (used elsewhere) */
.pill{ padding:3px 10px; border-radius:999px; font-size:.85rem; border:1px solid rgba(76,29,149,.55); background: rgba(22,0,46,.25); color: rgba(245,243,255,.88); }
.pill.off{ opacity:.6; }
.pill.ok{ border-color: rgba(46,213,115,.55); color: rgba(46,213,115,.95); }

/* =========================
   Players / Voting – original components
========================= */
.chipsGrid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* هذا ستايل chip الأصلي داخل القوائم (ليس شارات اللاعبين في البانر) */
.chip{
  flex: 1 1 160px;
  min-width: 150px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(76,29,149,.55);
  border-radius:16px;
  background: rgba(46,10,87,.40);
}
.chip {
  flex: 0 0 auto;          /* لا يتمدد */
  min-width: auto;         /* إزالة الحد الأدنى */
  padding: 4px 8px;        /* تصغير البادينج */
  border-radius: 10px;     /* تقليل الزوايا */
  font-size: .85rem;       /* تصغير النص */
}

.chip__left {
  gap: 6px;                /* تقليل المسافة بين النقطة والاسم */
}

.statusDot {
  width: 8px;
  height: 8px;             /* تصغير النقطة */
}

.chip__left{ display:flex; align-items:center; gap:10px; min-width:0; }
.chip__name{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.statusDot{
  width:10px; height:10px;
  border-radius:999px;
  background: var(--ok);
  box-shadow: 0 0 12px rgba(46,213,115,.28);
}
.statusDot.off{ background:#6b7280; box-shadow:none; }

.voteBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:transparent;
  border:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  padding:0;
}
.voteBtn:disabled{ opacity:.55; cursor:not-allowed; }

/* =========================
   Voting – distinct look
========================= */
.voteCard{
  border-color: rgba(255,77,109,.35);
  box-shadow: var(--shadow), 0 0 26px rgba(255,77,109,.14);
}

.voteGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}

@media (max-width:420px){
  .voteGrid{ grid-template-columns: 1fr; }
}

.votePick{
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(76, 29, 149, .55);
    background: linear-gradient(273deg, #00BCD4, #673ab700);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .30);
}

.votePick:hover{ border-color: rgba(255,159,28,.55); }
.votePick.selected{
  border-color: rgba(255,159,28,.70);
  box-shadow: 0 0 0 3px rgba(255,159,28,.12), 0 0 26px rgba(255,159,28,.14);
}

.votePick__dot{
  width:10px; height:10px;
  border-radius:999px;
  background: var(--ok);
  box-shadow: 0 0 12px rgba(46,213,115,.28);
  flex:0 0 auto;
}
.votePick__dot.off{ background:#6b7280; box-shadow:none; }

.votePick__name{ font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.votePick__hint{ color: rgba(201,182,255,.80); font-size:.86rem; }

/* =========================
   Fixed composer (phrase + send)
========================= */
.composer{
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(22,0,46,0) 0%, rgba(22,0,46,.75) 20%, rgba(22,0,46,.92) 100%);
  backdrop-filter: blur(10px);
}

.composer__inner{
  max-width: 560px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgb(135, 4, 211), rgba(22,0,46,.55));
  border: 1px solid rgba(76,29,149,.55);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: var(--shadow), var(--glow);
}

.composer__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.composer__title{ font-weight:900; }

.composer__row{ display:flex; gap:10px; }

.composer input{
  flex:1;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(76,29,149,.55);
  background: rgba(22,0,46,.35);
  color:var(--text);
  outline:none;
}
.composer input:focus{ border-color: rgba(255,159,28,.70); box-shadow: 0 0 0 3px rgba(255,159,28,.10); }

/* =========================
   Result overlay (balloons + pop)
========================= */
.result{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.result__card{
  position: relative;
    width: min(520px, 92vw);
    background: linear-gradient(188deg, rgb(161 12 179), rgb(24 10 233));
    border: 1px solid rgba(255, 159, 28, .45);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow), var(--glow);
    overflow: hidden;
}

.result__confetti{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,209,102,.30) 0 6px, transparent 7px),
    radial-gradient(circle at 60% 10%, rgba(34,211,238,.25) 0 6px, transparent 7px),
    radial-gradient(circle at 90% 30%, rgba(46,213,115,.22) 0 6px, transparent 7px),
    radial-gradient(circle at 30% 70%, rgba(255,77,109,.22) 0 6px, transparent 7px);
  opacity:.9;
  animation: confetti 1.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes confetti{
  0%{ transform: translateY(-6px) rotate(0deg); opacity:.65; }
  50%{ transform: translateY(8px) rotate(6deg); opacity:.9; }
  100%{ transform: translateY(-6px) rotate(0deg); opacity:.65; }
}

/* Mobile tweaks */
@media (max-width:520px){
  .row{ flex-direction:column; align-items:stretch; }
  .btn-primary{ width:100%; }
  .composer__row{ flex-direction:column; }
}

/* =========================
   Home page (index)
========================= */
.home-container{
  max-width:420px;
  margin:32px auto;
  padding:16px;
}

.top-links{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.top-link{
  color: rgba(245,243,255,.88);
  text-decoration:none;
  font-size:.92rem;
  border:1px solid rgba(76,29,149,.55);
  background: rgba(46,10,87,.45);
  padding:10px 12px;
  border-radius:14px;
}
.top-link:hover{
  border-color: rgba(255,159,28,.55);
}

.hero{ text-align:center; margin-bottom:18px; }
.hero-icon{ font-size:52px; margin-bottom:8px; }
.hero-title{ font-size:1.8rem; font-weight:900; }
.hero-sub{ color:var(--muted); margin:8px 0 0; }

.home-card{
  background: rgba(46,10,87,.45);
  border:1px solid rgba(76,29,149,.55);
  border-radius: 18px;
  padding:18px;
  box-shadow: var(--shadow);
}
.home-card label{ display:block; margin:10px 0 8px; color: rgba(245,243,255,.88); }
.home-card input{
  width:100%;
  padding:14px 14px;
  border-radius: 14px;
  border:1px solid rgba(76,29,149,.55);
  background: rgba(22,0,46,.35);
  color:var(--text);
  outline:none;
}
.home-card input:focus{ border-color: rgba(255,159,28,.70); box-shadow: var(--glow); }

.home-primary{ margin-top:14px; }

.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:16px 0;
  color: rgba(201,182,255,.75);
}
.divider span{ padding:0 10px; }
.divider:before, .divider:after{
  content:"";
  height:1px;
  flex:1;
  background: rgba(76,29,149,.45);
}

.note{ color: rgba(201,182,255,.80); font-size:.9rem; margin:14px 0 0; }

.catsWrap.hidden{ display:none; }
.catsHead{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin-top:12px; }
.catsTitle{ font-weight:800; }

/* chips for home */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.chip{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(76,29,149,.55);
  background: rgba(46,10,87,.35);
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
  user-select:none;
}
.chip input{ margin:0; }

.center{ text-align:center; }

/* =========================
   Auth/Admin pages
========================= */
.page{
  max-width:560px;
  margin:32px auto;
  padding:16px;
}
.panel{
  background: rgba(46,10,87,.45);
  border:1px solid rgba(76,29,149,.55);
  border-radius: 18px;
  padding:18px;
  box-shadow: var(--shadow);
}
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.row > *{ flex:1; min-width: 220px; }
.small{ font-size:.9rem; color: rgba(201,182,255,.80); }
.table{
  width:100%;
  border-collapse: collapse;
  margin-top:12px;
}
.table th,.table td{
  border-bottom:1px solid rgba(76,29,149,.45);
  padding:10px 8px;
  text-align:right;
  font-size:.92rem;
}
.table th{ color: rgba(201,182,255,.90); font-weight:800; }
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(76,29,149,.55);
  background: rgba(22,0,46,.25);
  font-size:.85rem;
}
.badge.ok{ border-color: rgba(46,213,115,.55); color: rgba(46,213,115,.95); }
.badge.no{ border-color: rgba(148,163,184,.55); color: rgba(201,182,255,.75); }

/* =========================
   ROOM AD BANNER (generic)
========================= */
.room-ad-container{
  width:100%;
  height:90px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(22,0,46,0.22);
  border:1px solid rgba(255,159,28,0.25);
  box-shadow:0 0 24px rgba(255,159,28,0.10);
  margin:10px 0 18px 0;
}
.room-ad-img,
.room-ad-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.room-ad-link{ display:block; width:100%; height:100%; }

/* =========================
   ADMIN TABS
========================= */
.admin-tabs{ margin-top:10px; }
.tabs-header{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.tab-btn{ background:rgba(46,10,87,.45); border:1px solid rgba(76,29,149,.55); color:var(--text); padding:10px 14px; border-radius:14px; cursor:pointer; transition:0.2s; }
.tab-btn:hover{ border-color:rgba(255,159,28,.55); }
.tab-btn.active{ background:linear-gradient(180deg,#FFD166,#FF9F1C); border-color:transparent; color:#14001F; font-weight:700; }
.tab-danger{ margin-inline-start:auto; background:rgba(22,0,46,0.20); }
.tab-panel{ display:none; animation:fadeIn 0.25s ease; }
.tab-panel.active{ display:block; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.admin-ads-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.ad-row{ display:flex; gap:10px; align-items:stretch; padding:10px; border-radius:16px; border:1px solid rgba(76,29,149,.55); background:rgba(46,10,87,.40); }
.ad-thumb{ width:92px; height:62px; border-radius:12px; overflow:hidden; flex:0 0 auto; border:1px solid rgba(245,243,255,0.10); background:rgba(0,0,0,0.35); }
.ad-thumb img,.ad-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.ad-meta{ flex:1; display:flex; flex-direction:column; gap:6px; }
.ad-title{ font-weight:800; }
.ad-small{ opacity:.75; font-size:13px; color: rgba(201,182,255,.85); }
.ad-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* =========================
   FINAL OVERRIDES (لاعبين: صف واحد ثم سطر ثاني + بدون قص)
   — هذا القسم يضمن عدم وجود nowrap/scroll من أي تعديل سابق
========================= */
.roomBanner__row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;     /* ✅ صف واحد ثم سطر ثاني */
  overflow:visible;
}

.playersPills{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;     /* ✅ صف واحد ثم سطر ثاني */
  overflow:visible;   /* ✅ بدون سحب أفقي */
  min-width:0;
}

/* الشارة تتمدد حسب الاسم (بدون قص) */
.playersPills .chip{
  flex:0 0 auto;
  max-width:none !important;
  width:auto !important;
  white-space:nowrap; /* الاسم في سطر واحد داخل الشارة */
}

/* الاسم بدون قص */
.playersPills .chip__left{ min-width:auto !important; }
.playersPills .chip__name{
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}
/* =========================
   ADD: room code in header between logo and share buttons
   (بدون ما نلمس بقية التنسيق)
========================= */
.hdr__roomcode{
  flex:0 0 auto;
  margin-inline: 4px;          /* مسافة خفيفة بين الشعار والأزرار */
}

@media (max-width: 720px){
  .hdr__left{
    flex-wrap: nowrap;    /* ✅ يمنع نزول البنر تحت */
    align-items: center;
    gap: 10px;
  }
}
/* ترتيب الجملة مع زر ابدأ اللعبة */
.hintRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  flex-wrap:wrap;
}

.hintRow .btn-xs{
  padding:8px 14px;
  border-radius:12px;
}
/* شعار الهيدر */
.hdr__brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* شعار الهيدر بدون مربع */
.hdr__logo{
  width:300px;
  height:90px;
  object-fit:contain;
  padding:0;          /* ❌ إزالة المسافة الداخلية */
  border:none;        /* ❌ إزالة الإطار */
  background:none;    /* ❌ إزالة الخلفية */
  box-shadow:none;    /* ❌ إزالة الظل */
  border-radius:0;    /* ❌ إزالة الحواف الدائرية */
  display:block;
}

/* ✅ على الجوال: يصغر تلقائياً بدون ما يكسر الهيدر */
@media (max-width:720px){
  .hdr__logo{
    width:min(300px, 100%);
    height:auto;                /* يحافظ على النسبة */
    max-height:90px;
  }
}
/* =========================
   FIX: Category cards layout (no grouped orange frame)
========================= */

/* شبكة التصنيفات */
#cats.chips{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  margin-top:10px;
}

/* على الجوال: 3 كروت بنفس الصف (مثل الصورة) */
@media (max-width: 520px){
  #cats.chips{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
  }
}

/* كل تصنيف = كرت مستقل */
#cats .chip{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  height:92px !important;             /* ثابت */
  border-radius:18px !important;
  padding:10px 10px 12px !important;

  border:1px solid rgba(76,29,149,.55) !important;
  background: rgba(46,10,87,.40) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;

  /* ✅ مهم: يمنع شكل الشريط/الكبسولة القديم */
  flex: initial !important;
  width: 100% !important;
  margin: 0 !important;
}

/* checkbox داخل الكرت أعلى اليمين (RTL) */
#cats .chip input.cat{
  position:absolute !important;
  top:10px !important;
  right:10px !important;   /* ✅ بدل left */
  left:auto !important;

  width:18px !important;
  height:18px !important;
  accent-color: var(--primary) !important;
}

/* اسم التصنيف تحت الأيقونة */
#cats .chip span{
  display:block;
  margin-top:6px;
  padding-top:0 !important;
  font-weight:900;
  font-size: 1.02rem;
  color: var(--text);
}

/* الأيقونة */
#cats .chip::before{
  content:"🎴";
  font-size:34px;
  line-height:1;
  margin-top:4px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}

/* أيقونات حسب التصنيف */
#cats .chip:has(input[value="جماد"])::before{ content:"🧱"; }
#cats .chip:has(input[value="حيوان"])::before{ content:"🐾"; }
#cats .chip:has(input[value="أشياء"])::before{ content:"🎁"; }

/* تأثير تحديد */
#cats .chip:has(input:checked){
  border-color: rgba(255,159,28,.70) !important;
  box-shadow: 0 0 0 3px rgba(255,159,28,.12), 0 10px 24px rgba(0,0,0,.22) !important;
}

/* غير محدد */
#cats .chip:has(input:not(:checked)){
  opacity:.72;
}
/* =========================
   ULTRA COMPACT Category Cards
========================= */

#cats.chips{
  gap:8px !important;
}

/* الكرت */
#cats .chip{
  height:58px !important;          /* أصغر بكثير */
  padding:6px 6px 8px !important;
  border-radius:12px !important;

  box-shadow: 0 4px 10px rgba(0,0,0,.18) !important; /* ظل خفيف */
}

/* الأيقونة */
#cats .chip::before{
  font-size:22px !important;
  margin-top:0;
}

/* النص */
#cats .chip span{
  font-size:0.82rem !important;
  margin-top:2px;
}

/* مربع الصح */
#cats .chip input.cat{
  width:14px !important;
  height:14px !important;
  top:5px !important;
  right:5px !important;
}

/* لو تبي الإطار البرتقالي أخف */
#cats .chip:has(input:checked){
  border-width:1px !important;
  box-shadow: 0 0 0 2px rgba(255,159,28,.14) !important;
}
/* =========================
   FIX OVERFLOW: categories must NOT exceed card width
========================= */

/* خلي الكارد نفسه يمنع أي خروج */
.home-card{ 
  overflow: hidden;
}

/* حاوية التصنيفات 100% بدون أي زيادات */
#catsWrap,
#cats{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;      /* ✅ يمنع خروج الإطار */
}

/* شبكة ثابتة داخل الكارد */
#cats.chips{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* ✅ لا تتمدد */
  gap: 8px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

/* الكرت نفسه لا يسمح بالتمدد خارج العمود */
#cats .chip{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;          /* ✅ هذا أهم سطر للـ overflow */
  box-sizing: border-box !important;
  margin: 0 !important;

  height: 58px !important;
  padding: 6px 6px 8px !important;
  border-radius: 12px !important;

  box-shadow: 0 4px 10px rgba(0,0,0,.18) !important;
}

/* تصغير محتوى الكرت */
#cats .chip::before{
  font-size: 22px !important;
  margin-top: 0 !important;
}
#cats .chip span{
  font-size: 0.82rem !important;
  margin-top: 2px !important;
  min-width: 0 !important;
}

/* checkbox داخل حدود الكرت */
#cats .chip input.cat{
  width: 14px !important;
  height: 14px !important;
  top: 5px !important;
  right: 5px !important;
  left: auto !important;
}
/* أيقونات الهيدر */
.iconbtn img{
  width:20px;
  height:20px;
  display:block;
}

/* زر واتساب بلونه الرسمي */
.whatsappBtn{
  background:#25D366;
  border:none;
}

.whatsappBtn:hover{
  background:#20ba5a;
}

/* زر النسخ */
.copyBtn{
  background:rgba(46,10,87,.45);
  border:1px solid rgba(76,29,149,.55);
}

/* زر الخروج */
.leaveBtn{
  background:rgba(255,77,109,.12);
  border:1px solid rgba(255,77,109,.35);
}
/* منع تكبير Safari عند التركيز على الحقول */
input,
textarea,
select {
  font-size: 16px !important;
}
/* =========================
   SPLASH SPACE BACKGROUND
========================= */

#splashScreen{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  overflow:hidden;
  background:#050711;
}

/* طبقة نجوم متحركة */
#splashScreen::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:
    radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,.6) 1px, transparent 2px),
    radial-gradient(rgba(255,255,255,.3) 1px, transparent 2.5px);
  background-size: 120px 120px, 200px 200px, 300px 300px;
  animation: spaceZoom 4s linear infinite;
  transform:translateZ(0);
}

/* حركة الكاميرا للأمام */
@keyframes spaceZoom{
  from{
    transform: scale(1) translateY(0);
  }
  to{
    transform: scale(1.8) translateY(-40px);
  }
}

/* الشعار */
#splashScreen img{
  position:relative;
  width:150px;
  animation: splashLogo 1.4s ease;
  z-index:2;
}

@keyframes splashLogo{
  0%{ opacity:0; transform: scale(.8); }
  50%{ opacity:1; transform: scale(1); }
  80%{ transform: scale(1.05); }
  100%{ transform: scale(1); }
}

/* اختفاء الانترو */
#splashScreen{
  animation: splashFadeOut 1s ease forwards;
  animation-delay: 2.2s;
}

@keyframes splashFadeOut{
  to{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}
/* =========================
   FIX: Top gap + Top links minimal (HOME)
   (بدون حذف أي سطر — Override فقط)
========================= */

/* تقليل الفراغ أعلى الصفحة */
html,body{
  margin:0 !important;
  padding:0 !important;
}

/* بدل margin الكبير بالـ home */
.home-container{
  margin: 10px auto !important;   /* كان 32px */
  padding: 10px 14px !important;  /* أقل */
}

/* تقليل مسافة الهيرو */
.hero{
  margin-bottom: 12px !important; /* كان 18px */
}

/* تقليل مسافة الروابط */
.top-links{
  justify-content:flex-end !important; /* بدل المسافة الكبيرة */
  gap:10px !important;
  margin-bottom: 6px !important;
}

/* إزالة شكل المربع بالكامل (يصير رابط نصي خفيف) */
.top-link{
  background: transparent !important;
  border: 0 !important;
  padding: 6px 6px !important;
  border-radius: 10px !important;  /* خفيف جداً */
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* Hover خفيف بدون إطار */
.top-link:hover{
  border-color: transparent !important;
  text-decoration: underline;
}

/* على الجوال: أقل بعد */
@media (max-width:520px){
  .home-container{
    margin: 6px auto !important;
    padding: 8px 12px !important;
  }
  .top-links{ margin-bottom: 4px !important; }
  .top-link{ padding: 4px 6px !important; }
}
/* =========================
   Global Footer
========================= */
.site-footer{
  margin-top:40px;
  padding:18px 12px 24px;
  text-align:center;
  font-size:.9rem;
  color:var(--muted);
}

.footer-inner{
  max-width:560px;
  margin:0 auto;
}

.site-footer a{
  color:rgba(245,243,255,.88);
  text-decoration:none;
  font-weight:700;
}

.site-footer a:hover{
  text-decoration:underline;
  color:var(--primary);
}
/* =========================
   FIX: عبارة الجولة أفقي دائمًا
========================= */

/* خلي الصف أفقي حتى في الجوال */
.composer__row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:10px;
}

/* خانة الإدخال تأخذ المساحة */
.composer__row input{
  flex:1 1 auto;
  min-width:0;
  height:44px;
}

/* زر الإرسال ثابت العرض */
.composer__row button{
  flex:0 0 auto;
  height:44px;
  padding:0 18px;
  white-space:nowrap;
}

/* إلغاء أي كود قديم يحوله عمودي في الجوال */
@media (max-width:520px){
  .composer__row{
    flex-direction:row !important;
  }
}
/* =========================
   FIX: composer input + send side-by-side (no stretch)
   ضع هذا آخر style.css
========================= */

.composer__row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
}

/* مهم: لا نخلي input width:100% داخل flex */
.composer__row #roundText{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  height:44px !important;
}

/* مهم: نكسر قاعدة .btn-primary {width:100%} داخل composer فقط */
.composer__row #submitRound{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:88px !important;
  height:44px !important;
  padding:0 18px !important;
  white-space:nowrap !important;
}

/* لو عندك media query قديم يخلي الزر 100%، هذا يكسره */
@media (max-width:520px){
  .composer .btn-primary{ width:auto !important; }
}
/* ===== Vote Overlay (end rounds) ===== */
.voteOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.70);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}

.voteOverlay__card{
  width: min(420px, 92vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
  text-align: center;
}

.voteOverlay__title{
  font-weight: 900;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.voteOverlay__sub{
  margin-bottom: 12px;
}

.voteOverlay__count{
  width: 72px;
  height: 72px;
  margin: 10px auto 14px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 2rem;
  font-weight: 900;
  border: 1px solid var(--line);
  background: rgba(255,159,28,.14);
}

.voteOverlay__btn{
  width: 100%;
}

.voteOverlay__hint{
  margin-top: 10px;
}
/* =========================
   Player Score Badge (Phase 1)
========================= */

.chip{
  position: relative;
}

.chip__left{
  position: relative;
  padding-inline-end: 18px; /* مساحة للدائرة */
}

.chip__score{
  position: absolute;
  inset-inline-end: -11px; /* يخليها تخرج وتلامس الحافة */
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: .85rem;
  background: rgba(46,213,115,.18);
  border: 2px solid #2ED573;
  color: #2ED573;
  padding: 0;
}
/* =========================
   NEW: Category chips = button-like (no checkbox tick)
   + NEW: Goal segmented squares
   ضع هذا آخر style.css
========================= */

/* --- 1) التصنيفات: خليها أزرار --- */
#cats .chip{
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, opacity .12s ease;
}

/* اخفِ الـ checkbox نهائياً (يبقى موجود للمنطق فقط) */
#cats .chip input.cat{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  pointer-events: none !important; /* يمنع ظهور/تفاعل علامة الصح */
}

/* حالة غير محدد */
#cats .chip:has(input:not(:checked)){
  opacity: .88 !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(219,231,255,.95) !important;
  box-shadow: 0 4px 10px rgba(15,23,42,.06) !important;
}

/* تأثير الضغط */
#cats .chip:active{
  transform: scale(.98) !important;
  filter: brightness(.98) !important;
}

/* حالة محدد = نفس زر إنشاء غرفة (btn-primary) */
#cats .chip:has(input:checked){
  opacity: 1 !important;
  border: 0 !important;
  background: linear-gradient(180deg, var(--primary2), var(--primary)) !important;
  box-shadow: 0 12px 30px rgba(255,140,26,.16) !important;
}

/* النص داخل المحدد أوضح */
#cats .chip:has(input:checked) span{
  color: #111827 !important;
}

/* --- 2) هدف الفوز: مربعات متصلة (Segmented) --- */
.goalWrap{
  margin-top: 10px;
}

.goalTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.goalSeg{
  margin-top: 8px;
  display:flex;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(219,231,255,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.goalSeg .goalBtn{
  flex: 1 1 0;
  border: 0;
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

/* فواصل بين المربعات */
.goalSeg .goalBtn + .goalBtn{
  border-inline-start: 1px solid rgba(219,231,255,.95);
}

.goalSeg .goalBtn:active{
  transform: scale(.98);
  filter: brightness(.98);
}

/* المحدد = تدرج زر إنشاء غرفة */
.goalSeg .goalBtn.active{
  background: linear-gradient(180deg, var(--primary2), var(--primary));
  color: #111827;
}

/* غير المحدد */
.goalSeg .goalBtn:not(.active){
  color: rgba(30,41,59,.90);
}