/* ===== MODAL ===== */
#game-modal {
  display: none;
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  max-width: 90vw;
  max-height: 90vh;

  z-index: 100001 !important;
}

#game-modal-box {
  background: rgb(27, 27, 36);
  border: none; /* ❌ إزالة الخط البنفسجي */
  border-radius: 8px;

  width: 810px;
  max-width: 90vw;

  min-height: 350px;
  max-height: 90vh;

  /* ⭐ نفس مستوى الضلال الخفيف */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.14),
    0 0 8px rgba(0, 0, 0, 0.06);

  position: relative;
  padding: 70px 40px 40px;
  overflow-y: visible;
  text-align: center;
}




/* ===== CLOSE BUTTON ===== */
#close-modal {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 26px;
  cursor: pointer;
  font-weight: bold;
  color: #d2b4ff;
  transition: .2s ease;
}

#close-modal:hover {
  color: white;
}

/* ===== COIN SELECTION ===== */
.coin-selection {
  text-align: center;
  margin-top: 10px;
}

.coin-selection h2 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #e2e2f2;
}

.coins {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.coin-option {
  width: 180px;
  height: 180px;
  border-radius: 15px;
  cursor: pointer;
  transition: .3s ease;
  border: 3px solid transparent;
}

.coin-option.selected {
  transform: scale(1.1);
  border-color: #00ffcc;
  filter: brightness(1.2);
}

/* ===== BUTTON STYLE ===== */
.select-coin-btn {
  background: #6e42ca;
  border: 1px solid #8f68e7;
  color: #fff;

  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .8px;

  padding: 14px 26px;
  border-radius: 8px;
  cursor: pointer;
  transition: .18s ease-in-out;
}

.select-coin-btn:hover {
  background: #8254df;
  border-color: #b58dff;
}



.active-now,
.total-now {
  position: absolute;

  top: 70px;
  transform: none;

  color: white;
  z-index: 5;
  text-align: center;

  white-space: nowrap;
}

/* Active في النص */
.active-now {
  left: 50%;
  transform: translateX(-50%);
}

/* Total يتحرك يمين فعليًا */
.total-now {
  left: 130px;   /* 👈 غيّر الرقم هنا */
}

/* النص */
.active-text {
  font-size: 17px;
  opacity: 0.7;
  font-weight: 600;
}

/* الرقم */
.active-number {
  font-size: 20px;
  font-weight: bold;
  color: #a259ff;
}

.box-container {
  width: 100%;
  max-width: 1900px;
  margin: 45px auto 60px;
  
  padding-left: 30px;   /* ↓ كان 40 → الآن 30 */
  padding-right: 90px;  /* ↑ كان 80 → الآن 90 */
  
  display: flex;
  gap: 24px;
  align-items: flex-start;
  box-sizing: border-box;
}


.left-boxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  align-items: flex-start;
  position: sticky;
  top: 85px;

  /* ✅ التعديل المهم */
  padding-right: 300px;
  box-sizing: border-box;
  min-width: 0;
}

.left-boxes > div {
  flex-shrink: 0;
  flex-grow: 0;
}


/* صندوق رئيسي بتصميم حديث */
#deposit-box {
  background: rgb(27, 27, 36);
  border-radius: 8px;

  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.18),
    0 0 10px rgba(0, 0, 0, 0.08);

  border: none;

  width: 100%;
  position: relative;

  backdrop-filter: blur(4px);
}

/* الهيدر */
.deposit-header {
  background: linear-gradient(135deg, #7b3ff6, #a974ff);
  color: #fff;
  font-weight: 600;
  padding: 14px 18px;
  font-size: 1.12rem;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  letter-spacing: 0.7px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  text-transform: uppercase;
}


#deposit-inner-boxes {
  align-items: center;
  justify-content: space-between;

  width: 100%;
  
  padding: 0 22px;   /* نفس مسافة الهامش في الهيدر */
  margin-top: 10px;  /* عشان ما يلتصق بالهيدر */

  height: 62px; /* يثبت مستوى العناصر */
  box-sizing: border-box;
}


/* كتابة داخل الصندوق */
#deposit-inner-boxes span {
  font-weight: 500;
  color: #d7d7e4;
  font-size: 1.05rem;
  letter-spacing: 0.4px;
  font-family: 'Inter', sans-serif;
  margin-right: auto;
}


.deposit-btn {
  background: linear-gradient(to top, #6f3fe8, #8b5aff);  /* 🔥 Purple smooth gradient */
  color: #fff;

  border: 0;
  border-bottom: 2px solid #b98aff; /* border subtle نفس منطق green version */

  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .8px;
  text-transform: uppercase;

  padding: 16px 42px;
  min-width: 260px;

  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;

  cursor: pointer;
  transition: 0.18s ease-in-out;

  margin-left: auto;
  margin-right: 20px;
  display: flex;
  justify-content: center;
}

/* Hover — بدون حركة */
.deposit-btn:hover {
  background: linear-gradient(to top, #7b49ff, #a470ff);
  border-bottom-color: #d6baff;
}

/* Click — تغيير بسيط فقط */
.deposit-btn:active {
  background: linear-gradient(to top, #592ec9, #7b49ff);
}

/* 🔖 History Label */
.history-label {
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  letter-spacing: 0.4px;
  white-space: nowrap;
  line-height: 1;

  flex-shrink: 0;
}


/* 🎯 History Bar */
#coinflip-history {
  display: flex;
  align-items: center;

  gap: 6px;

  padding: 0 18px;

  width: 100%;
  margin: 0;

  overflow: hidden;
  white-space: nowrap;

  box-sizing: border-box;
  min-width: 0;

  background: transparent;
  border: none;

  line-height: 1;
}


/* 🪙 Coins Wrapper */
#coinflip-history-items {
  display: flex;
  align-items: center;

  gap: 1px; /* 🔥 شبه ملتصق */

  flex: 1;
  min-width: 0;

  overflow: hidden;

  /* ✨ Fade Effect */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 88%,
    rgba(0,0,0,0) 100%
  );

  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 88%,
    rgba(0,0,0,0) 100%
  );
}


/* 🪙 Each Coin */
#coinflip-history-items img {
  width: 34px;
  height: 34px;

  display: block;

  flex-shrink: 0; /* ❗ لا ينضغط */

  border-radius: 50%;

  user-select: none;
}

/* ===== TITLE ===== */
.skins-title {
  font-size: 22px;
  margin: 0 0 10px;
  color: #f0f0f0;
  font-weight: 600;
}

/* ===== TOP BAR ===== */
.skins-top-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}

/* ===== SEARCH ===== */
#skin-search {
  flex: 1;
  padding: 8px 10px;

  border: 1px solid #ddd;
  border-radius: 6px;

  font-size: 14px;
  outline: none;

  box-sizing: border-box;
  margin: 0;
}

/* ===== BUTTONS (REFRESH + SORT) ===== */
#refresh-skins,
#sort-price {
  width: 40px;
  height: 40px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;

  color: #fff;
  font-size: 16px;
  cursor: pointer;

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

  transition: 0.15s;
}

/* hover */
#refresh-skins:hover,
#sort-price:hover {
  background: rgba(255,255,255,0.1);
}

/* حركة بسيطة */
#refresh-skins:active {
  transform: rotate(180deg);
}

/* ===== BOX ===== */
#skins-box {
  background: transparent;
  border: none;
  border-radius: 0;

  padding: 10px;

  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;

  box-sizing: border-box;
}
.cancelled {
  color: #ff4d4f !important;
  text-shadow: 0 0 8px rgba(255,77,79,0.8) !important;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.active-text.cancelled {
  color: #ff4d4f;
  text-shadow: 0 0 8px rgba(255,77,79,0.6);
}
.cancel-badge {
  color: #ff4d4f;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}
/* ===== LIST ===== */
#skins-list {
  width: 100%;
  display: block;
  min-height: 150px;
  box-sizing: border-box;
}

/* ===== GRID ===== */
.skins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  width: 100%;
  align-content: start;
}

/* ===== CARD ===== */
.skin-item {
  width: 100%;
  aspect-ratio: 1 / 1;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);

  border-radius: 6px;

  position: relative;

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

  overflow: hidden;

  cursor: pointer;

  transition: all .12s ease;
}

/* ===== HOVER ===== */
.skin-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  transform: scale(1.02);
}

/* ===== IMAGE ===== */
.skin-img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* ===== PRICE ===== */
.skin-price {
  position: absolute;
  top: 4px;
  left: 6px;

  font-size: 10px;
  font-weight: 600;

  color: #eaeaea;

  background: rgba(0, 0, 0, 0.55);
  padding: 2px 5px;

  border-radius: 4px;
}

/* ===== OVERLAY ===== */
.skin-overlay {
  position: absolute;
  inset: 0;

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

  background: rgba(0, 0, 0, 0.65);

  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;

  padding: 6px;

  opacity: 0;
  transition: opacity .12s ease;
}

.skin-item:hover .skin-overlay {
  opacity: 1;
}

/* ===== SELECTED ===== */
.skin-item.selected {
  border: 1px solid #7c8cff;
  background: rgba(124, 140, 255, 0.15);
  box-shadow: 0 0 6px rgba(124, 140, 255, 0.4);
}

/* ===== LOADING ===== */
.loading-animation {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.loading-animation div {
  width: 8px;
  height: 8px;

  background: #a259ff;
  border-radius: 50%;

  animation: bounce 0.6s infinite alternate;
}

.loading-animation div:nth-child(2) { animation-delay: 0.2s; }
.loading-animation div:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  to {
    transform: translateY(-8px);
    opacity: 0.6;
  }
}

/* ===== SCROLLBAR ===== */
#skins-box::-webkit-scrollbar {
  width: 8px;
}

#skins-box::-webkit-scrollbar-thumb {
  background: rgba(162, 89, 255, 0.6);
  border-radius: 10px;
}

#skins-box::-webkit-scrollbar-thumb:hover {
  background: rgba(162, 89, 255, 0.9);
}

#skins-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(162,89,255,0.6) transparent;
}


/* Overlay + modal are fine */
#coinflip-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  animation-fill-mode: forwards;
}

#coinflip-modal {
  display: none;
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  animation-fill-mode: forwards;
}

/* 🎯 ONLY KEEP THIS — CLEAN AND COMPATIBLE WITH RAF */
.coin-container {
  width: 150px;
  height: 150px;
  perspective: 1000px;
  position: relative;
  margin: 0 auto;
}

.coin-flip {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  /* ❗ No transition, no animation here */
}

.coin-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 50%;
}

.coin-face.back {
  transform: rotateY(180deg);
}
/* لما اللعبة تدور */
.coin-container.spinning .timer-circle,
.coin-container.spinning [id^="modal-timer-slot-"] {
    display: none !important;
}


.global-tooltip {
  position: fixed;
  background-color: #111;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
  text-align: center;
}

.copy-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.copy-icon {
  font-size: 16px;
  opacity: 0.6;
  transition: 0.2s ease;
}

.copy-container:hover .copy-icon,
.copy-container:hover .coinflip-title {
  opacity: 1;
  color: #fff;
}

/* 🔥 النسخة الاحترافية للتولتيب */
.copy-tooltip {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%) translateY(5px) scale(0.92);
  background: rgba(15, 15, 20, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.45);
}

/* عند الهوفر */
.copy-container:hover .copy-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px) scale(1);
}


.coinflip-chat {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 12px 10px;
  width: 100%;
  max-width: 340px;
  font-size: 14px;
}

.coinflip-badge {
  position: absolute;
  top: -8px;
  right: 10px;
  background: #28a745;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  color: #fff;
  font-weight: bold;
  transform: skew(-15deg); /* الميلان */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.coinflip-badge span {
  display: inline-block;
  transform: skew(15deg); /* تعديل النص ليظهر مستقيم */
}

.coinflip-badge.ended {
  background: #dc3545;
}

.coinflip-row {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* يخلي كل الصور بنفس الارتفاع */
  gap: 25px;
}

.coinflip-player {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coinflip-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #a259ff;
  object-fit: cover;
}

.coinflip-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #2b2b2b;
  border: 2px solid #a259ff;
  color: #a259ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 22px;
}

.coinflip-coin {
  width: 60px;
  height: 60px;
}

/* المربع تحت الصورة بشكل البريفيو */
.player-info-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 6px;
  margin-top: 6px;
  text-align: center;
  min-width: 80px; /* نفس الحجم للجميع */
  min-height: 34px; /* نفس الطول حتى لو فاضي */
}

.player-name {
  font-weight: bold;
  color: #fff;
  font-size: 13px;
}

.player-price {
  color: #28a745;
  font-size: 12px;
  margin-top: 2px;
}
/* التأثير المتحرك */
.loading-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* حركة الشيمر */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ✨ وميض شيمر احترافي بدل علامة الاستفهام */
.waiting-shimmer {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(162, 89, 255, 0.4);
  background: rgba(162, 89, 255, 0.08);
  box-shadow: inset 0 0 12px rgba(162, 89, 255, 0.2), 0 0 6px rgba(162, 89, 255, 0.15);
}

.waiting-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmerRotate 3.5s infinite linear;
  border-radius: 50%;
}

@keyframes shimmerRotate {
  0% { background-position: -200% 0; filter: brightness(1); }
  50% { background-position: 0 0; filter: brightness(1.3); }
  100% { background-position: 200% 0; filter: brightness(1); }
}



#deposit-value {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
/* المستطيل الشفاف */
.coinflip-bottom {
  max-height: 350px;       /* تقريباً 7 جلود */
  overflow-y: auto;        /* سكرول عمودي فقط */
  padding-right: 8px;      /* عشان ما يقطع النص */

  /* شكل السكرول */
  scrollbar-width: thin;             /* للفايرفوكس */
  scrollbar-color: #a020f0 #1a1a1a;  /* بنفسجي على أسود */
}

/* للكروم وباقي المتصفحات */
.coinflip-bottom::-webkit-scrollbar {
  width: 8px; /* عرض السكرول */
}

.coinflip-bottom::-webkit-scrollbar-track {
  background: #1a1a1a; /* الخلفية */
  border-radius: 10px;
}

.coinflip-bottom::-webkit-scrollbar-thumb {
  background: #a020f0;  /* بنفسجي */
  border-radius: 10px;
}

.coinflip-bottom::-webkit-scrollbar-thumb:hover {
  background: #c44dff;  /* بنفسجي أفتح عند المرور */
}


/* ======== إصلاح نهائي (حجم عملة أكبر فقط بدون لمس أي شيء آخر) ======== */

/* فقط العناصر داخل البوكسات (id يبدأ بـ "box-") — لا تؤثر على المودال/الـmodal-timer-slot */
[id^="box-"] > * [data-phase],
[id^="box-"] > * .winner-display {
  box-sizing: border-box;
  flex: 0 0 60px !important;    /* لا ينمو ولا ينكمش — ثابت */
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ثابت حجم الـSVG داخل البوكس (يمنع الـstroke من زيادة الحجم) */
[id^="box-"] > * [data-phase] svg,
[id^="box-"] > * .winner-display svg {
  width: 52px !important;   /* رجعت الأصلية لتصحيح شكل العداد */
  height: 52px !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* رقم العداد داخل البوكس — حجم ثابت ومركزي */
[id^="box-"] > * .countdown-number {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}

/* صورة العملة داخل البوكس: أكبر قليلاً وثابتة تمامًا */
/* ✅ الحجم النهائي الصحيح */
[id^="box-"] > * .winner-display img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover !important;

  /* تنظيف أي تأثير */
  transform: none !important;
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}


/* إلغاء أي تأثير عام سابق قد يؤثر على النصوص أو الأرقام داخل البوكس */
[id^="box-"] span,
[id^="box-"] div {
  transition: none !important;
  transform: none !important;
}

/* ✨ تأثير التلاشي + النزول */
.box-fade-out {
  animation: fadeSlideWinner 0.5s ease forwards;
}

@keyframes fadeSlideWinner {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(25px);
  }
}
/* يمنع أي تغيير للحدود داخل بوكسات الكوين فليب */
[id^="box-"] .skin-box {
  border: 1px solid rgba(255,255,255,0.06) !important;
}
  .skin-tooltip {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #111;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
    text-align: center;
  }

  .skin-tooltip hr {
    border: none;
    height: 1px;
    background-color: #555;
    margin: 4px 0;
  }

  .skin-box:hover .skin-tooltip {
    opacity: 1;
    transition-delay: 0.3s;
  }
  

.loading-animation {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.loading-animation div {
  width: 10px;
  height: 10px;
  background: #a259ff;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}
.loading-animation div:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-animation div:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes bounce {
  to {
    transform: translateY(-10px);
    opacity: 0.6;
  }
}
/* يمنع ظهور سكرول أفقي نهائيًا */
body {
  overflow-x: hidden; 
}
#confetti-canvas {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2147483647 !important; /* 🔥 أعلى رقم آمن */
}
@keyframes replayPulse {
  0%   { opacity:0.3; transform:scale(0.8); }
  50%  { opacity:1;   transform:scale(1); }
  100% { opacity:0.3; transform:scale(0.8); }
}
/* 🌐 Network Indicator */

.net-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: relative;
}


/* 🔴 Offline Spinner */
.net-spin {
  border: 2px solid rgba(255,120,120,0.3);
  border-top: 2px solid #ff6565;
  animation: netSpin 0.8s linear infinite;
}


/* 🟢 Online Check */
.net-check {
  background: rgba(120,255,180,0.15);
  display: grid;
  place-items: center;
}

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


@keyframes netSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* =========================
   🎒 INVENTORY EMPTY
========================= */

.inventory-empty{
    height:200px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:0 20px;
}

.inventory-title{
    color:#fff;
    font-size:20px;
    font-weight:700;
    margin-bottom:8px;
}

.inventory-text{
    color:#a8afbc;
    font-size:14px;
    line-height:1.6;
    max-width:340px;
}

.inventory-text b{
    color:#ff7a7a;
    font-weight:700;
}

.trade-url-link{
    position:relative;
    margin-top:12px;
    color:#63b8ff;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    transition:.2s;
}

.trade-url-link::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-3px;
    width:0;
    height:2px;
    background:#63b8ff;
    transform:translateX(-50%);
    transition:.2s;
}

.trade-url-link:hover{
    color:#8fd1ff;
}

.trade-url-link:hover::after{
    width:100%;
}
/* =========================
   🚫 NOT ACCEPTED ITEMS
========================= */

.skin-item.not-accepted {

    filter: grayscale(1) blur(2px);
    opacity: .55;
    pointer-events: none;

}

.skin-item.not-accepted::after {

    content: "Not Accepted";

    position: absolute;
    inset: 0;

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

    background: rgba(0,0,0,.45);

    color: #fff;
    font-size: 12px;
    font-weight: 700;

}