/* Наши разделы в визуале BLOXPVP: иконки для пунктов, которых не было в оригинале */

/* ── Сайдбар: Пополнить / Вывод ───────────────────────────── */
.Sidebar .Wallet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  margin-bottom: 24px;
}
.Sidebar .Wallet a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
}
.Sidebar .Wallet p {
  font-weight: 500;
  font-size: 0.9rem;
  color: #9F9DA7;
}
.Sidebar .Deposit.Active p,
.Sidebar .Withdraw.Active p {
  color: #7C00FF;
}

.Sidebar .Deposit.Active img,
.Sidebar .Deposit.Inactive img {
  width: 34px;
  height: auto;
  content: url("/img/ui/purpleRobux.svg");
}
.Sidebar .Deposit.Inactive img { opacity: 0.45; }

.Sidebar .Withdraw.Active img,
.Sidebar .Withdraw.Inactive img {
  width: 34px;
  height: auto;
  content: url("/img/ui/coinsDrop.svg");
}
.Sidebar .Withdraw.Inactive img { opacity: 0.45; }

/* ── Шапка: пункт «Игра» ──────────────────────────────────── */
.Navbar .GameLinks .GameLink.Jackpot img { width: 26px; height: auto; }

/* ── Колонка справа вместо чата: лента раундов ────────────── */
.SidePanel {
  background-color: #19172c;
  border-left: #322e58 1px solid;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.SidePanel__header {
  padding: 18px 20px;
  border-bottom: #322e58 1px solid;
}
.SidePanel__title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.SidePanel__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.SidePanel__empty {
  color: #4a4574;
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

/* ── Контентная колонка ───────────────────────────────────── */
.PageContent {
  background-color: #151223;
  color: #fff;
}

/* ── Страницы входа и регистрации ─────────────────────────── */
.AuthBody { background-color: #0f0c1f; }

/* Ошибки валидации в их стилистике */
.form-field__error {
  color: #ff5a5a;
  font-size: 12px;
  line-height: 16px;
  min-height: 16px;
}
.input.form-field__input_error { border: 1px solid #ff5a5a !important; }

.AuthAlert {
  display: none;
  align-items: center;
  gap: 8px;
  width: 80%;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 90, 90, 0.12);
  border: 1px solid rgba(255, 90, 90, 0.35);
  color: #ff8b8b;
  font-size: 13px;
}
.AuthAlert_success {
  background: rgba(89, 255, 86, 0.12);
  border-color: rgba(89, 255, 86, 0.35);
  color: #7dff7a;
}

/* Ссылка «нет аккаунта» под формой */
.AuthSwitch {
  color: #717171;
  font-size: 13px;
  text-align: center;
}
.AuthSwitch a {
  color: #9742ff;
  text-decoration: none;
  font-weight: 600;
}
.AuthSwitch a:hover { opacity: 0.8; }

/* Кнопка: лоадер */
.LoginModal form button .btn__loader { display: none; }

/* ── Базовое: ссылки не должны выглядеть ссылками ─────────── */
#root a { text-decoration: none; color: inherit; }
#root a:hover { cursor: pointer; }

/* Позиции контента в сетке — их Home.css/Jackpot.css ждут
   корневой класс страницы прямым потомком .Home */
.Home > .JackpotPage,
.Home > .Coinflip,
.Home > .PageContent {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  overflow: hidden;
}
@media screen and (max-width: 1400px) {
  .Home > .JackpotPage,
  .Home > .Coinflip,
  .Home > .PageContent {
    grid-column: 1 / 4 !important;
    border-left: none;
  }
}

/* ── Правая колонка: последние победители ─────────────────── */
.Winners {
  background-color: #19172c;
  border-left: #322e58 1px solid;
  border-top: #322e58 2px solid;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.Winners__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  min-height: 62px;
  border-bottom: #322e58 1px solid;
  background-color: #0d0b1b;
}
.Winners__title {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.Winners__live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a095de;
  font-size: 12px;
}
.Winners__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #59ff56;
  box-shadow: 0 0 8px #59ff56;
  animation: winnersPulse 1.6s ease-in-out infinite;
}
@keyframes winnersPulse { 50% { opacity: 0.35; } }

.Winners__list {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.Winner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1e1a39 0%, #191630 100%);
  border: 1px solid #251f42;
  transition: 0.15s;
}
.Winner:hover { border-color: #3b3268; }
.Winner__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #863aff;
}
.Winner__body { flex: 1; min-width: 0; }
.Winner__name {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Winner__meta { color: #4a4574; font-size: 11px; }
.Winner__amount {
  color: #59ff56;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.Winners__empty {
  color: #4a4574;
  font-size: 13px;
  text-align: center;
  padding: 30px 0;
}

/* Колонка победителей встаёт на место чата */
.Home > .Winners {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}
@media screen and (max-width: 1400px) {
  .Home > .Winners { display: none; }
}

/* Колесо джекпота вписываем в их .WheelBG (у них .Wheel 500px, в узком режиме меньше) */
.WheelBG .DemoWheel { width: 500px; height: 500px; margin: 0; }
.WheelBG .DemoWheel__disc {
  mask: radial-gradient(circle, transparent 62%, #000 62.5%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 62.5%);
}
.WheelBG .DemoWheel__winner {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
}
@media screen and (max-width: 1400px) {
  .WheelBG .DemoWheel { width: 360px; height: 360px; }
}
@media screen and (max-width: 513px) {
  .WheelBG .DemoWheel { width: 280px; height: 280px; }
}

/* ── Индикатор силы пароля на регистрации ─────────────────── */
.PasswordStrength { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.PasswordStrength__bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #19182d;
  overflow: hidden;
}
.PasswordStrength__fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.2s, background-color 0.2s;
}
.PasswordStrength__label { font-size: 11px; font-weight: 600; min-width: 84px; text-align: right; }

/* ── Профиль: вкладки слева, действия справа ──────────────── */
.profile-tabs {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.profile-tabs__list { display: flex; align-items: center; gap: 6px; }
.profile-tabs__actions { display: flex; align-items: center; gap: 8px; }
.profile-tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  color: var(--color-text-secondary);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.15s;
}
.profile-tab:hover { color: #fff; background: rgba(134, 58, 255, 0.08); }
.profile-tab_active {
  color: #fff !important;
  background: linear-gradient(180deg, #a448ff 0%, #873aff 100%);
  box-shadow: 0 0 20px rgba(134, 58, 255, 0.25);
}

/* ── Формы пополнения и вывода: кнопка во всю ширину карточки ── */
#withdraw-btn, #pay-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}
.payment-form__note {
  display: block;
  margin-top: 14px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 18px;
}
.payment-form__summary { margin-top: 18px; }

/* ── Адаптив: их правила из layout.css перебиваются sidebar.css,
   поэтому дублируем здесь — custom.css подключается последним ── */
@media screen and (max-width: 1400px) {
  .Home > .Sidebar { display: none !important; }
  .Home { grid-template: 90px 1fr / 1fr !important; }
  .Home > .JackpotPage,
  .Home > .Coinflip,
  .Home > .PageContent {
    grid-row: 2 / 3;
    grid-column: 1 / 2 !important;
    border-left: none;
  }
  .JackpotPage { padding: 20px !important; }
  .JackpotPage > .Container { gap: 30px !important; padding: 20px !important; }
  .Info { height: auto !important; max-width: 100% !important; }
  .Entries { max-height: 320px; }
  .Coinflip { padding: 0 20px !important; }
}

/* Мобильная навигация: их .MobileNav показывается ниже 1400 */
@media screen and (max-width: 1400px) {
  .MobileNav { display: flex !important; }
  .MobileNav .Tab { text-decoration: none; }
}
@media screen and (min-width: 1401px) {
  .MobileNav { display: none !important; }
}

/* ── Узкие экраны: компактный логотип и колесо по месту ───── */
@media screen and (max-width: 1400px) {
  .Navbar > img#nav-logo {
    content: url("/img/ui/logo-mark-bloxpvp.png");
    width: 46px !important;
    height: 46px !important;
    align-self: center;
    margin-left: 14px;
  }
  .WheelBG .DemoWheel { width: 300px; height: 300px; }
  .WheelBG { height: auto !important; width: 100% !important; }
  .Info .Header p { font-size: 16px; }
}
@media screen and (max-width: 900px) {
  .WheelBG .DemoWheel { width: 250px; height: 250px; }
  .WheelInfo .Value { font-size: 34px !important; }
}

/* ── Коинфлип: их адаптив на 1640 рассчитан под колонку чата,
   у нас на этой ширине её нет — возвращаем строки ────────── */
@media screen and (min-width: 1100px) and (max-width: 1640px) {
  .Coinflip .CurrentGames .Overview {
    flex-direction: row !important;
    padding: 7.5px 24px !important;
    align-items: center !important;
    gap: 20px;
  }
  .Coinflip .CurrentGames .Overview .Interact { justify-content: flex-end !important; }
  .Coinflip .CurrentGames .Overview .Value { text-align: right; }
  .Coinflip .CurrentGames .Overview .Players { flex-direction: row !important; align-items: center !important; }
  .Coinflip .CurrentGames .Overview .Player { align-items: center !important; margin: 0 !important; }
}

/* Баланс рядом с «Create Game» */
#my-balance {
  padding: 8px 14px;
  border-radius: 10px;
  background: #19172c;
  border: 1px solid #322e58;
  color: #a095de !important;
  font-size: 13px !important;
  font-weight: 600;
}