/* =========================
   Layout & Containers
   ========================= */
.contset{ padding: 2% 7% }

.price-contset{
  display:flex; align-items:center; justify-content:space-around; flex-direction:column;
}

.box-contset{
  background:#757575; color:#fff; padding:10px 40px; border-radius:5px;
}

.text-contset{ text-align:center; padding:10px }
.text-contset p{ font-size:14px; color:coral }

.set-p{
  align-self:start; margin:0 5vw 10px 0; padding-bottom:10px; width:90%;
  border-bottom:1px solid #f86633;
}

/* =========================
   Price Now
   ========================= */
.price-now-contset{
  display:flex; justify-content:space-around; align-items:center;
}
.price-now-contset div{
  background:#2f382b; color:#00ffd9; padding:5px 10px; border-radius:5px; margin:5px;
}

/* =========================
   Chat
   ========================= */
.chat-container{
  border:1px solid #ccc; border-radius:5px; padding:10px; background:#dfdfdf;
  display:block; overflow:scroll; height:200px; color:#111;
}
.message{ margin-bottom:10px }
.sender{ font-weight:bold }
.timestamp{ color:#888; font-size:12px }
.message-content{ margin-top:5px }

/* =========================
   Highlight Text
   ========================= */
.green{
  color:#7FFF00; font-weight:700;
  text-shadow:0 0 10px rgba(127,255,0,.8);
  animation:glowing 1.5s infinite alternate;
  transition:color .3s ease, text-shadow .3s ease, transform .2s ease;
  cursor:pointer;
}
.green:hover{
  color:#ADFF2F;
  text-shadow:0 0 20px rgba(127,255,0,1), 0 0 40px rgba(127,255,0,.7);
  transform:scale(1.05);
}
@keyframes glowing{
  0%{ text-shadow:0 0 10px rgba(127,255,0,.8) }
  50%{ text-shadow:0 0 20px rgba(127,255,0,1), 0 0 40px rgba(127,255,0,.6) }
  100%{ text-shadow:0 0 10px rgba(127,255,0,.8) }
}

/* =========================
   Reports / Prizes
   ========================= */
.rep,
.rep-contset-one,
.rep-header,
.rep-x{ display:grid }

.rep{
  background:#0b1b31; border:1px solid #f86633;
  grid-template-columns:50% 50%;
}
.rep-header,
.rep-x{ background:#8d8431 }
.rep-x{
  border:1px solid #fff; grid-template-columns:10% 90%;
}
.rep-header{
  grid-template-columns:auto auto; justify-content:space-around; width:100%;
  color:#fff; padding:20px 0;
}

.rep-element-h{
  background-color:#8d8431; padding:5px; color:#fff; display:flex; margin-top:10px;
}

.rep-element-p{
  background-color:#061114; border:1px solid #f86633; padding:3px 6px; margin:4px;
  color:#f8f8f8; font-size:12.5px; font-weight:500; border-radius:10px;
  display:flex; align-items:center; justify-content:center; gap:5px; line-height:1.4;
}

/* =========================
   Ball Icon
   ========================= */
.ball-icon{
  width:40px; height:40px; background-color:gold; color:black; font-weight:bold; font-size:20px;
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  margin-right:8px; box-shadow:0 0 5px #FFD700;
}

/* =========================
   Rep Balls Container
   ========================= */
.rep-ball-flex{
  background-color:#8a2929; padding:10px; width:100%;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}

/* (قديمة) تصميم الكرة داخل rep-ball-flex — ستُوحّد لاحقًا */
.rep-ball-flex .ball{
  width:50px; height:50px; background-color:#3477db; color:#fff; font-size:18px; font-weight:bold;
  display:flex; justify-content:center; align-items:center; border-radius:50%; text-align:center;
  box-shadow:0 4px 6px rgba(0,0,0,0.1);
}

/* تصغير كرات rep حسب الشاشة (قديمة) */
@media (max-width:1024px){
  .rep-ball-flex .ball{ width:40px; height:40px; font-size:16px; }
}
@media (max-width:768px){
  .rep-ball-flex .ball{ width:35px; height:35px; font-size:14px; }
}
@media (max-width:480px){
  .rep-ball-flex .ball{ width:30px; height:30px; font-size:12px; }
}

/* =========================
   Lines Grid (outer)
   ========================= */
.line-contset{
  display:grid; grid-gap:10px; grid-template-columns:repeat(auto-fill, minmax(25vw, 1fr));
  text-align:center; margin:0 auto; padding:15px;
  background:linear-gradient(135deg, #0b1b31, #1a1f2b, #2c3e50);
  border-radius:10px; box-shadow:0px 4px 10px rgba(0,0,0,0.5);
}

/* =========================
   Card
   ========================= */
.line-contset-one{
  background:rgba(11,27,49,0.95); padding:12px; border-radius:8px; max-width:100%; margin-top:20px;
  box-shadow:0px 4px 12px rgba(255,215,0,0.3);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.line-contset-one:hover{
  transform:scale(1.03); box-shadow:0px 6px 18px rgba(241,196,15,0.5);
}
.line-contset-one div{
  display:grid; grid-template-columns:auto auto auto auto; gap:8px;
}
.line-contset-one div p{
  background:rgba(255,215,0,0.15); margin:5px; color:#FFD700; padding:7px; border-radius:6px;
  font-size:14px; font-weight:bold; transition:background 0.3s ease;
}
.line-contset-one div p:hover{ background:rgba(255,215,0,0.35) }
.line-contset-one div p span{ color:#ffbb33 }

.line-contset-one a{
  background-color:#222; color:#FFD700; padding:5px 15px; margin-top:10px; border-radius:8px;
  text-decoration:none; font-weight:bold; transition:background 0.3s ease, color 0.3s ease;
}
.line-contset-one a:hover{ background-color:#FFD700; color:#0b1b31 }

/* =========================
   Top Section
   ========================= */
.screen-contset{
  padding:2% 7%; border-top:2px solid #FFD700;
}

/* =========================
   Clickable Numbers
   ========================= */
.line-one-contset{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1px;
}
.line-one-contset div{
  cursor:pointer; animation:background-pulse 1.5s infinite alternate;
  background:#0a1723; margin:5px; color:#FFD700; font-size:18px; padding:10px;
  border-radius:5px; width:50px; height:50px; text-align:center; font-weight:bold;
  transition:background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.line-one-contset div:active{
  transform:scale(0.95); background:#ff8c00; color:white;
  box-shadow:0px 4px 10px rgba(255,140,0,0.6);
}
.line-one-contset .color-screen-contset{ background:#af00357a }
@keyframes background-pulse{ from{ filter:brightness(1) } to{ filter:brightness(1.25) } }

/* =========================
   Tables / Sets
   ========================= */
.container-set{ display:inline-block; justify-content:center }
.grid-item table{ margin:0 }
.grid-item td{
  height:60px; width:60px; background-color:#f86633; border-radius:10px;
  font-size:20px; color:#fff; text-align:center;
}

.heading-container-set{ font-size:18px; color:#fff }
.set-table th{ font-size:13px; font-weight:300 }

/* =========================
   Centered Two-Column Grid
   ========================= */
.grid-container{
  display:grid; grid-template-columns:auto auto; grid-gap:5px; grid-auto-flow:column;
  direction:ltr; width:fit-content; margin:0 auto;
  background-color:#323232; color:#fff; padding:10px; border:solid 1px #fff; border-radius:20px;
}
.grid-item:nth-child(-n+3){ grid-column:1 }
.grid-item:nth-child(n+4){ grid-column:2 }
.grid-item:nth-child(n){ grid-row:span 1 }

/* =========================
   Misc Sections
   ========================= */
.ngame{
  background-color:#f4f4f4; padding:20px 5px; margin:2px; border-radius:5px;
}
.set-contained{
  background-color:#323232; border-radius:20px; padding:20px 5px;
}

/* =========================
   Horizontal Balls (scroll)
   ========================= */
.ball-flex{
  padding:5px; width:98%; overflow-x:scroll; white-space:nowrap;
  display:flex; flex-direction:row-reverse; scroll-snap-type:x mandatory;
}
.ball-flex > div{ scroll-snap-align:start }

/* =========================
   Gold Ball (Unified)
   ========================= */
.ball{
  flex:0 0 auto; align-self:center; box-sizing:border-box;
  display:grid; place-items:center; text-align:center;

  width:clamp(56px, 8.5vw, 96px);
  aspect-ratio:1 / 1; height:auto; border-radius:50%; margin:6px;

  background:linear-gradient(180deg, #f0c35a 0%, #cc8f1d 100%);
  border:3px solid #8a5e0a; box-shadow:0 6px 12px rgba(0,0,0,.35);

  color:#111; font-weight:900; font-size:clamp(22px, 3vw, 30px); line-height:1; text-shadow:none;
}
.ball::before,
.ball::after{ content:none !important }

.g-container{ margin:23px 0; text-align:-webkit-center }

/* فجوات الكرات في الحاوية الأفقية */
@media (min-width:1024px){
  .ball-flex{ gap:10px; align-items:center }
  .ball-flex > .ball{ max-width:96px; }
}
@media (max-width:1023px) and (min-width:768px){
  .ball-flex{ gap:8px; align-items:center }
  .ball-flex > .ball{ max-width:84px; }
}
@media (max-width:767px) and (min-width:480px){
  .ball-flex{ gap:6px; align-items:center }
  .ball-flex > .ball{ max-width:68px; }
}
@media (max-width:479px) and (min-width:296px){
  .ball-flex{ gap:4px; align-items:center }
  .ball-flex > .ball{ max-width:56px; font-size:inherit; }
}
@media (max-width:295px){
  .ball-flex{ gap:2px; align-items:center }
  .ball-flex > .ball{ max-width:50px; font-size:inherit; }
}

/* =========================
   Game Frame / Popups / Misc
   ========================= */
.ingame{
  border:1px solid #f86633; border-radius:5px; padding:40px; margin:50px;
}

.pop-set{
  display:none; position:fixed; background-color:#262626; left:50%; top:50%;
  transform:translate(-50%, -50%); border:1px solid #000; border-radius:5px;
  padding:15px; z-index:99; width:50vw; max-width:600px; min-width:300px; color:#fff;
}
@media screen and (max-width:600px){
  .pop-set{ width:90vw }
}

.close-set{ color:#fff }

.set-table td{
  height:unset !important; width:20px; padding:0; background-color:#ff5858;
  border-radius:1px; font-size:12px; color:#000; text-align:center; font-weight:700; font-family:sans-serif;
}

.mt-50{ margin-top:50px }

#checking{
  position:relative; background-color:#5d8864 !important; color:#fff;
}
#checking::before{
  content:""; position:absolute; height:3px; width:108%; top:5px; opacity:0.4;
  right:-2px; transform:rotate(313deg); background:red;
}

/* =========================
   Responsive Tweaks
   ========================= */
@media screen and (max-width:650px){
  .line-contset{ grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
  .set-table td{ width:20px; font-size:12px; }
}

/* =========================
   Unification Overrides
   (توحيد قياسات كرات rep مع النمط العام)
   ضع هذه في النهاية لتتغلّب على القواعد القديمة أعلاه
   ========================= */
.rep-ball-flex .ball{
  /* إجبار نفس قياسات .ball الموحّدة */
  width:clamp(56px, 8.5vw, 96px);
  height:auto;
  aspect-ratio:1 / 1;
  font-size:clamp(22px, 3vw, 30px);
  background:linear-gradient(180deg, #f0c35a 0%, #cc8f1d 100%);
  border:3px solid #8a5e0a;
  box-shadow:0 6px 12px rgba(0,0,0,.35);
  color:#111;
  font-weight:900;
  line-height:1;
  text-shadow:none;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:50%;
  margin:6px;
}