.siteText {
  color: white;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;

  background-color: #0b0b16;
  color: white;
  padding-top: 75px;

  background-image:

    /* 💜 بقعة اليسار — محصورة أكثر */
    radial-gradient(
      circle at 18% 32%,      /* ← رفعناها فوق قليلاً */
      rgba(162, 89, 255, 0.22) 0%,
      rgba(162, 89, 255, 0.10) 22%, /* ← أقل انتشار */
      rgba(162, 89, 255, 0.00) 45%  /* ← لن تصل للأسفل */
    ),

    /* 💜 بقعة اليمين — محصورة أكثر */
    radial-gradient(
      circle at 82% 32%,      /* ← رفعناها فوق */
      rgba(162, 89, 255, 0.22) 0%,
      rgba(162, 89, 255, 0.10) 22%,
      rgba(162, 89, 255, 0.00) 45%
    );

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* =========================================================
   GLOBAL MODAL HEADER (يستخدم للبروفايل ولأي مودال عام)
   ========================================================= */
.modal-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  background: linear-gradient(135deg, #7b3ff6, #a974ff);

  padding: 14px 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #ffffff;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;

  border-bottom: 1px solid rgba(255,255,255,0.15);
}


/* =========================================================
   GLOBAL OVERLAY ANIMATIONS
   ========================================================= */

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOutOverlay {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* =========================================================
   GLOBAL MODAL OVERLAY (خلفية أي مودال)
   ========================================================= */

#overlay,
#profile-overlay,
.global-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);

  /* 🔥 أعلى من Coinflip Overlay */
  z-index: 100000;

  opacity: 0;
  animation-fill-mode: forwards;
  display: none;
}
/* =========================================================
   GLOBAL MODAL ANIMATIONS (دخول وخروج)
   ========================================================= */

@keyframes slideDownFadeIn {
  0% {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes slideUpFadeOut {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
}
/* -------------------------
   CSS للتوست
   ------------------------- */
#toast-container {
  position: fixed;
  bottom: 30px;
  left: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999999;
  pointer-events: none; /* يسمح بالنقر فقط على التوست نفسه */
}

/* القالب العام للتوست */
.toast {
  pointer-events: auto;
  min-width: 260px;          /* يمنع التصغير */
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  background: rgba(30, 30, 36, 0.45); /* زجاجي داكن */
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 24px rgba(2,6,23,0.6);
  color: #ffffff;
  font-family: Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(-14px) translateY(0);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.9,.2,1);
  overflow: hidden;
}

/* عند الظهور */
.toast.show {
  opacity: 1;
  transform: translateX(0);
}

/* رأس التوست: شعار + كلمة */
.toast-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* الشعار (نفّذ على شكل حرف أو أيقونة) */
.toast-icon {
  min-width: 34px;
  min-height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

/* نص الرأس (الكلمة الكبيرة مثل SICSESS / ERROR) */
.toast-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

/* نص الرسالة تحت الرأس */
.toast-body {
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  line-height: 1.25;
  margin-top: 2px;
}

/* شريط التقدّم السفلي */
.toast-progress {
  height: 4px;
  width: 100%;
  border-radius: 0 0 8px 8px;
  transform-origin: left center;
  transition: width 60ms linear;
  background: linear-gradient(90deg, rgba(120,255,180,0.85), rgba(40,200,120,0.65));
}

/* --- تعديل للأخطاء (أحمر) --- */
.toast.error {
  background: rgba(36, 10, 10, 0.55);
  border: 1px solid rgba(255,120,120,0.08);
}
.toast.error .toast-icon {
  background: rgba(255,70,70,0.12);
  color: #ff6565;
  box-shadow: 0 6px 18px rgba(255,70,70,0.06);
}
.toast.error .toast-title {
  color: #ff7b7b;
}
.toast.error .toast-progress {
  background: linear-gradient(90deg, rgba(255,120,120,0.85), rgba(220,60,60,0.65));
}

/* --- تعديل للنجاح (أخضر باهت) --- */
.toast.success {
  background: rgba(16, 28, 18, 0.55);
  border: 1px solid rgba(120,255,180,0.06);
}
.toast.success .toast-icon {
  background: rgba(100, 220, 140, 0.08);
  color: #96f1a8;
  box-shadow: 0 6px 18px rgba(120,200,140,0.04);
}
.toast.success .toast-title {
  color: #c7f7cf;
}
.toast.success .toast-progress {
  background: linear-gradient(90deg, rgba(100,220,140,0.85), rgba(70,200,110,0.65));
}

/* عند الإخفاء بالسلاسة */
.toast.hide {
  opacity: 0;
  transform: translateX(-20px);
}

/* =========================================================
   🌐 NETWORK TOAST ICONS
   ========================================================= */

/* 🔴 Offline Spinner */
.net-spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;

  border: 2px solid rgba(255,120,120,0.25);
  border-top: 2px solid #ff6565;

  animation: netSpin 0.8s linear infinite;
}

/* 🟢 Online Check */
.net-check {
  width: 18px;
  height: 18px;
  border-radius: 6px;

  background: rgba(120,255,180,0.18);

  display: grid;
  place-items: center;
}

.net-check::after {
  content: "✓";
  color: #96f1a8;
  font-weight: 900;
  font-size: 13px;
}

/* 🔄 Spin */
@keyframes netSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


#loader {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #0f0f1f, #0b0b16);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

/* المحتوى */
.loader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* 🔥 اللوقو */
.loader-logo {
  width: 180px; /* ← أكبر */
  max-width: 60vw;
  filter: drop-shadow(0 0 25px rgba(162, 89, 255, 0.35));
  animation: logoFloat 2.5s ease-in-out infinite;
}

/* ✨ حركة خفيفة للوقو */
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* 🔘 الدوتس */
.dots {
  display: flex;
  justify-content: center;
  gap: 14px; /* أكبر */
}

/* 🔥 حجم أكبر + glow */
.dots span {
  width: 12px;
  height: 12px;
  background: #a259ff;
  border-radius: 50%;
  opacity: 0.3;

  box-shadow: 0 0 10px rgba(162, 89, 255, 0.6);

  animation: blink 1.2s infinite;
}

/* تأخير */
.dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* ✨ أنيميشن محسّن */
@keyframes blink {
  0%, 80%, 100% {
    opacity: 0.25;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1.6);
  }
}

/* الخلفية */
#trade-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(3px);

  z-index: 110000;

  opacity: 0;
  transition: opacity 0.3s ease;
}

/* مودال التريد */
#trade-modal {
  display: none;
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -80%);
  background: rgb(27, 27, 36);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  width: 380px;
  box-shadow: 0 0 20px rgba(0,0,0,0.35);

  z-index: 110001;

  font-family: "Inter", sans-serif;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}

#trade-modal .modal-header {
  background: linear-gradient(135deg, #7b3ff6, #a974ff);
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;

  width: 100%; /* ← الآن على قد البوكس تمام */
  padding: 14px 0; /* ← بدون padding يمين ويسار عشان ما يتوسع */

  font-size: 0.98rem;
  letter-spacing: 0.6px;

  border-bottom: 1px solid rgba(255,255,255,0.10);
}



/* جسم المودال */
#trade-modal .modal-body {
  padding: 20px;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* الرسالة والزر بأماكن ثابتة */
  min-height: 150px; /* يعطي مساحة بين الرسالة والزر */
}

/* النص أو الأنيميشن في الوسط */
#trade-modal .modal-body p,
#trade-modal .modal-body .loading-animation {
  margin: auto 0;
}

#trade-modal .modal-body button {
  background: #38c96b; /* أخضر هادئ ومريح للعين */
  border: 1px solid rgba(255,255,255,0.05);

  color: #ffffff;
  padding: 14px 20px;
  width: 100%;

  border-radius: 6px; /* حواف ناعمة بدون مبالغة */
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;

  cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;

  /* ظل بسيط يعطي وزن */
  box-shadow: 0 2px 8px rgba(56, 201, 107, 0.18);
}
#trade-modal .modal-body button:hover {
  background: #45db79; 
  box-shadow: 0 4px 14px rgba(56, 201, 107, 0.26);
  transform: translateY(-1px);
}
#trade-modal .modal-body button:active {
  background: #2fad5a;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(56, 201, 107, 0.18);
}


/* حالة الفتح */
#trade-modal.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* حالة ظهور الخلفية */
#trade-overlay.show {
  display: block;
  opacity: 1;
}
/* =========================================================
   🖥️ DESKTOP FIX — إخفاء قائمة الموبايل في الكمبيوتر
   ========================================================= */
/* افتراضيًا: مخفي */
#mobile-menu-btn,
#mobile-side-menu,
#mobile-menu-overlay {
  display: none;
}

/* الموبايل فقط */
@media (max-width: 1200px) {
  #mobile-menu-btn {
    display: flex;
  }
}


/* =========================================================
   📱 MOBILE — الإصدار المدمج النهائي
   ========================================================= */
@media (max-width: 1200px) {

  /* الشعار */
  .standalone-logo {
    width: 140px !important;
    height: 50px !important;
    top: 0 !important;
    left: 0 !important;
  }


  /* حذف التوب بار */
  .top-bar {
    display: none !important;
  }

  /* الهيدر */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 140px !important;
    width: calc(100% - 140px) !important;
    height: 50px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    background: #0f0f1f !important;
    border-bottom: 1px solid #1b1b2a !important;
    padding: 0 12px !important;
    z-index: 9997 !important;
  }

  /* إخفاء نصوص التابات */
  .game-title,
  .game-price {
    display: none !important;
  }

  .center-labels {
    transform: scale(0.85) !important;
    transform-origin: left center !important;
  }

  /* زر تسجيل الدخول */
  .login-btn {
    font-size: 13px !important;
    padding: 6px 12px !important;
  }
  .login-btn img {
    display: none !important;
  }

  #user-menu + .login-btn,
  .login-btn.logged-in {
    display: none !important;
  }

  /* صورة المستخدم */
  #user-avatar,
  #user-menu img {
    width: 32px !important;
    height: 32px !important;
  }

  #user-menu span {
    display: none !important;
  }

  /* المحتوى يبدأ بعد الهيدر */
  #page-view,
  #main-content,
  #coinflip-container {
    margin-top: 60px !important;
  }

  /* إيقاف انزلاق العناصر نهائياً */
  .pf-wrapper,
  .box-container,
  .coinflip-area,
  #chat-container {
      transform: none !important;
      transition: none !important;
  }

  /* الشات يلامس الهيدر */
  #chat-sidebar {
    top: 50px !important;
  }
  .chat-messages {
    top: 0 !important;
  }

  /* زر الثلاث شرطات */
  #mobile-menu-btn {
    position: fixed;
    top: 10px;
    left: 150px;
    width: 32px;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 99999;
  }
  #mobile-menu-btn .bar {
    width: 100%;
    height: 4px;
    background: white;
    border-radius: 4px;
  }

  /* القائمة الجانبية */
  #mobile-side-menu {
    position: fixed;
    top: 0;
    left: calc(-100% - 40px) !important;
    width: 250px;
    height: 100vh;
    background: #11131d;
    border-right: 1px solid #1b1b2a;
    padding: 20px;
    z-index: 99998;

    display: flex;
    flex-direction: column;
    gap: 22px;

    transition: left .25s ease;
  }

  #mobile-side-menu.open {
    left: 0 !important;
  }

  /* الخلفية الداكنة */
  #mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    display: none;
    z-index: 99997;
  }
  #mobile-menu-overlay.show {
    display: block;
  }

  .menu-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .menu-title {
    color: #a259ff;
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
  }
  .menu-item {
    padding: 10px 0;
    color: white;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
  }
  .menu-item:hover {
    color: #c7afff;
  }
}
/* المودالات */
#profile-modal {
  z-index: 100000 !important;
}

#coinflip-modal {
  z-index: 9999 !important;
}

#deposit-modal {
  z-index: 100001 !important;
}

#trade-modal {
  z-index: 110001 !important;
}


@media (max-width: 1200px) {

  /*اجعل العملات فوق بعض*/
  .coins {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  /* حجم أكبر شوي */
  .coin-selection .coin-option {
    width: 90px !important;
    height: 90px !important;
  }
}
@media (max-width: 1200px) {
  .coin-selection .coin-option {
    width: 105px !important;
    height: 105px !important;
  }
}

@media (max-width: 1200px) {

  #skins-box {
    height: 55vh !important;         /* يخلّي البوكس الأبيض كبير */
    max-height: 55vh !important;
    padding: 10px !important;
  }

  #skins-list {
    height: 100% !important;
    max-height: 100% !important;
  }
}
/* 📱 موبايل: شبكة الجلود 2×2 — بدون كسر اللودر */
@media (max-width: 1200px) {

  /* ✅ طبّق الشبكة فقط على حاوية الجلود الحقيقية */
  #skins-list > div:not(.loading-animation) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* ✅ تأكيد أن اللودر يبقى سطر واحد */
  #skins-list .loading-animation {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
  }

  /* حجم السكن في الموبايل */
  .skin-item {
    height: 150px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  /* صورة السكن */
  .skin-item img {
    height: 75px !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  /* اسم السكن */
  .skin-item div:nth-child(2) {
    font-size: 13px !important;
    line-height: 14px !important;
    min-height: 28px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* سعر السكن */
  .skin-item div:nth-child(3) {
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
  }
}

@media (max-width: 1200px) {

  /* زر Deposit */
  .select-coin-btn {
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  /* زر Back */
  #back-button-container button {
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

}

@media (max-width: 1200px) {

  #accept-trade-btn,
  #trade-modal #accept-trade-btn,
  .modal-body #accept-trade-btn {
    padding: 6px 14px !important;
    font-size: 13px !important;
    height: 38px !important;
    border-radius: 6px !important;

    /* نلغي أي width يفرضه السكربت */
    width: auto !important;
    min-width: 120px !important;
  }

}
@media (max-width: 1200px) {

  #toast-container .toast {
    min-width: 220px;
    max-width: 300px;
    padding: 10px 12px;
    border-radius: 10px;
    gap: 6px;
  }

  #toast-container .toast .toast-icon {
    min-width: 28px;
    min-height: 28px;
    font-size: 13px;
  }

  .toast-title {
    font-size: 14px;
  }

  .toast-body {
    font-size: 12px;
  }

  .toast-progress {
    height: 3px;
  }

  #toast-container {
    bottom: 20px;
    left: 20px;
  }
}
@media (max-width: 1200px) {

  .left-boxes {
    top: 40px !important;     /* 🔥 يخلي البوكس قريب من الهيدر */
    margin-top: 0 !important; /* يمنع النزول الإجباري */
    width: 100% !important;   /* يمنع انكماش البوكس */
  }

}
@media (max-width: 1200px) {
  .deposit-header {
    width: 100% !important;    /* يجعل الهيدر على عرض البوكس */
    box-sizing: border-box !important;
  }
}
@media (max-width: 1200px) {

  #deposit-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
    height: auto !important;     /* يخليه يكبر عموديًا بدون خربطة */
  }

  #deposit-inner-boxes {
    padding: 12px !important;    /* يحافظ على شكل المحتوى من داخل */
  }

}
@media (max-width: 1200px) {

  .box-container {
    margin-top: -80px !important;   /* 🔥 هنا نرفع البوكس لفوق */
    padding: 0 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  /* 🔥 نخلي left-boxes ما يضغط ولا يزحلق المحتوى */
  .left-boxes {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 40px !important;          /* ← يرفع البوكس لفوق */
    align-items: stretch !important;
  }


  /* 🔥 البوكس يصير قد عرض الهاتف تماماً */
  #deposit-box {
    width: 100% !important;           /* ← أهم خطوة */
    border-radius: 10px !important;

    min-height: 190px !important;     /* ← يكبر عمودياً بشكل مناسب */
    height: auto !important;
    
    margin: 0 !important;
    padding: 0 !important;            /* ← نحذف البادنغ اللي يكسر عرض الهيدر */

    box-sizing: border-box !important;
    background: rgb(27,27,36);
  }


  /* 🔥 الهيدر يصير قد البوكس 100% */
  .deposit-header {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 10px 10px 0 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }


  /* 🔥 محتوى البوكس من داخل — padding خفيف فقط */
  #deposit-inner-boxes {
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

}
@media (max-width: 1200px) {
  .deposit-btn {
    display: block !important;
    margin: 0 auto 12px auto !important;  /* ← يوسّط الزر */
    text-align: center !important;
  }
}
@media (max-width: 1200px){

  /* خلي COINFLIP سطر كامل تحت البوكس */
  .coinflip-title {
    position: static !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 12px !important;   /* ← يخليه تحت البوكس */
    margin-bottom: 10px !important;
  }

  /* خلي كل واحدة منهم فوق بعض (title + number) */
  .active-now,
  .total-now {
    position: static !important;
    transform: none !important;

    display: block !important;
    width: 100% !important;
    text-align: center !important;

    margin: 6px 0 !important;  /* مسافة بين الكتل */
  }

  /* نص العنوان */
  .active-now .active-text,
  .total-now .active-text {
    font-size: 14px !important;
    opacity: 0.8;
    display: block !important;
  }

  /* الرقم تحت العنوان */
  .active-now .active-number,
  .total-now .active-number {
    font-size: 18px !important;
    font-weight: 700 !important;
    display: block !important;
    margin-top: 2px !important;
  }
}
/* =========================================================
   📱 COINFLIP — FINAL WORKING MOBILE FIX (STABLE)
   ========================================================= */
@media (max-width: 1200px) {

  /* بوكس الكوين فليب */
  .coinflip-box {
    min-height: 340px !important;   /* 🔥 أكبر وثابت */
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-bottom: 14px !important;
  }

  /* الصف العلوي: الصور + السعر + الأزرار */
  .cf-top {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;

    margin-bottom: 14px !important; /* 🔥 نزّل الصور شوي */
  }

  /* كل عنصر في الصف العلوي */
  .cf-top > * {
    flex: 0 0 auto !important;
  }

  /* 🔘 الأزرار + السعر */
  .cf-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* 👤 صور اللاعبين */
  .players-row {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* 🧩 الجلود — منطقة ثابتة */
  .skins-container,
  .cf-skins {
    width: 100% !important;
    margin-top: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;

    min-height: 148px !important;   /* 🔥 مكان 8 جلود (4×2) */
    align-content: start !important;/* الجلود تطلع فوق داخل المساحة */

    overflow-x: hidden !important;
  }

  /* حجم السكن */
  .skins-container .skin-box,
  .cf-skins .skin-box {
    height: 70px !important;
    width: 100% !important;
  }

}
/* =========================================================
   📱 PROFILE — MOBILE (MERGED & CLEAN)
   ========================================================= */
@media (max-width: 1200px) {

  /* ================= MODAL ================= */
  #profile-modal {
    align-items: flex-start;
    height: 100vh !important;
    max-height: 100vh !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;

    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
  }

#profile-modal #game-modal-box {
  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: none !important;

  padding: 20px 16px 140px !important;
  margin-top: 24px !important; /* ✅ */
  border-radius: 10px !important;
  box-sizing: border-box !important;

  overflow: visible !important;
}

  /* ================= CONTENT FLOW ================= */
  #profile-modal #game-modal-box > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
  }

  /* ================= PLAYER ID ================= */
  #player-id {
    position: static !important;
    font-size: 13px !important;
    opacity: 0.85 !important;
    text-align: center !important;
    margin-bottom: 6px !important;
  }

  /* ================= PROFILE PIC ================= */
  #profile-pic-box {
    position: static !important;
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #profile-pic-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ================= STATS ================= */
  #profile-stats {
    position: static !important;
    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;
  }

  #profile-stats > div {
    width: 100% !important;
    max-width: 320px !important;
    padding: 14px !important;

    font-size: 14px !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
@media (max-width: 1200px) {
  #profile-stats {
    transform: translateX(-15px) !important; /* 👈 زحزحة يسار خفيفة */
  }
}

  /* ================= TRADE URL ================= */
  #profile-steam-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    margin-top: 16px !important;
    text-align: center !important;
  }

  #profile-steam-box > div {
    max-width: 90% !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
  }

  #trade-url-input {
    width: 90% !important;
    max-width: 420px !important;

    padding: 10px !important;
    font-size: 13px !important;
    text-align: center !important;

    white-space: normal !important;
    word-break: break-all !important;
  }

  /* ================= SETTINGS / REFERRAL ================= */
  .settings-bar {
    width: 100% !important;
    max-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    padding: 10px !important;
    gap: 8px !important;

    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
@media (max-width: 1200px) {
  .settings-bar {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

  .settings-bar .left-section,
  .settings-bar .right-section {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .referral-input {
    width: 100% !important;
    max-width: 260px !important;
    padding: 6px 8px !important;

    font-size: 12px !important;
    text-align: center !important;
  }

  .save-btn,
  .sound-toggle,
  .slafban,
  #profile-modal button {
    min-width: 120px !important;

    font-size: 12px !important;
    text-align: center !important;
  }

  /* ================= HISTORY ================= */
  .history-container {
    width: 92vw !important;
    max-width: 92vw !important;
    max-height: none !important;
height: auto !important;
overflow: visible !important;

    margin: 0 auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .history-container table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 12px !important;
  }

  .history-table th:nth-child(5),
  .history-table td:nth-child(5) {
    width: 72px !important;
  }
}
@media (max-width: 1200px) {

  /* نفصل trade url عن أي انحراف سابق */
  #profile-steam-box {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* نغلف المحتوى داخله ونوسّطه فعليًا */
  #profile-steam-box > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* input نفسه */
  #trade-url-input {
    width: 90% !important;
    max-width: 420px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    display: block !important;
    text-align: center !important;
  }

}
@media (max-width: 1200px) {
  #profile-steam-box {
    margin-top: clamp(48px, 15vh, 200px) !important;
  }
}

@media (max-width: 1200px) {
/* 
  Mobile coinflip layout
  width: 5% is intentional to keep coin & players aligned.
  Tested on multiple devices and narrow widths.
*/
  /* ===== GAME ARENA ===== */
  .coinflip-top {
    position: relative;
    width: 5%;
    min-height: 360px;
    padding: 24px 16px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ===== COIN ===== */
  .coin-container {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);

    width: 170px;
    height: 170px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ===== PLAYERS ROW (الحل الحقيقي) ===== */
  .coinflip-top > .player-black,
  .coinflip-top > .player-purple {
    width: 110px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* نجمع اللاعبين في صف */
  .coinflip-top {
    row-gap: 18px; /* مسافة عمودية */
  }

  .coinflip-top::after {
    content: "";
    display: flex;
    gap: 12px;              /* 👈 المسافة الأفقية بين اللاعبين */
  }

  /* ندفع اللاعبين تحت العملة */
  .player-black,
  .player-purple {
    margin-top: 200px;
  }

}
@media (max-width: 1200px) {
  #coinflip-modal > div {
    padding-top: 72px !important; /* ⬇️ ارتفاع الهيدر */
  }
}
@media (max-width: 1200px) {
  .coinflip-bottom {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
  }
}
@media (max-width: 1200px) {
  #coinflip-modal {
    height: 100vh !important;
    max-height: 100vh !important;

    overflow-y: auto !important;   /* ✅ هنا السكرول */
    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1200px){
  #coinflip-modal > div {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
@media (max-width: 1200px) {
  .coinflip-bottom {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
@media (max-width: 1200px) {
  #coinflip-modal,
  #profile-modal {
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
  }
}
/* ===== VIEW SKINS — MOBILE ONLY (SAFE) ===== */
@media (max-width: 1200px) {
  .view-skin-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;

    line-height: 1.15;
    word-break: break-word;
  }
}



#snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.snowflake {
  position: absolute;
  top: -10px;
  color: white;
  font-size: 10px;
  opacity: 0.8;
  user-select: none;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(110vh);
  }
}



/* ======================================================
   GLOBAL MOBILE PAGE SYSTEM
   SAME AS PROVABLY FAIR
====================================================== */

@media(max-width:768px){

    .pf-wrapper,
    .faq-wrapper,
    .privacy-wrapper,
    .tos-wrapper,
    .support-wrapper,
    .blog-wrapper,
    .jackpot-wrapper{

        width:100% !important;

        max-width:100% !important;

        margin:20px auto !important;

        padding:0 14px 30px !important;

        box-sizing:border-box !important;

    }


    /* العناوين */

    .pf-title,
    .faq-title,
    .privacy-header h1,
    .tos-title,
    .support-title,
    .blog-title,
    .jackpot-title{

        font-size:28px !important;

        line-height:1.2;

        text-align:center;

    }


    /* الوصف */

    .pf-subtitle,
    .faq-subtitle,
    .privacy-header p,
    .support-subtitle,
    .blog-subtitle{

        max-width:340px !important;

        margin:12px auto 24px !important;

        text-align:center;

        font-size:14px;

        line-height:1.6;

    }


    /* الكروت */

    .pf-panel,
    .faq-panel,
    .privacy-section,
    .support-card,
    .support-panel{

        padding:18px !important;

        border-radius:14px;

    }


    /* الشبكات */

    .support-methods,
    .faq-list{

        grid-template-columns:1fr;

    }


    /* منع تحريك الشات في الهاتف */

    .pf-wrapper,
    .faq-wrapper,
    .privacy-wrapper,
    .tos-wrapper,
    .support-wrapper,
    .blog-wrapper,
    .jackpot-wrapper{

        transform:none !important;

    }

}