/* Карточка игры коинфлипа — по макету Figma (узел 1:15975, 1327×103).
   Предметов у нас нет, поэтому пилюля предметов показывает ставку в Robux. */

.CFRow {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 103px;
  padding: 0 26px;
  margin-bottom: 14px;
  border: 2px solid #fff;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(42, 35, 63, 0) 0%, rgba(160, 70, 255, 0.14) 100%),
    #18172b;
}

/* ── Игроки ───────────────────────────────────────────────── */
.CFRow__players { display: flex; align-items: center; gap: 14px; flex: none; }

.CFPlayer { position: relative; width: 60px; height: 60px; flex: none; }
.CFPlayer__avatar {
  width: 60px;
  height: 60px;
  border-radius: 500px;
  object-fit: cover;
  border: 1px solid #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(20, 21, 50, 0.45) 100%);
}
.CFPlayer_winner .CFPlayer__avatar { border-color: #23ff10; }
.CFPlayer_empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 500px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(20, 21, 50, 0.45) 100%);
  color: #fff;
  font-size: 16px;
}
.CFPlayer__coin {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 22px;
  height: 22px;
}
.CFRow__vs { color: #fff; font-size: 14px; font-weight: 500; }

/* ── Крупная монета раунда ────────────────────────────────── */
.CFRow__bigcoin { width: 64px; height: 64px; flex: none; }
.CFRow__bigcoin_pending { opacity: 0.25; filter: grayscale(1); }

/* ── Пилюля со ставкой ────────────────────────────────────── */
.CFRow__pill {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  height: 71px;
  padding: 0 24px;
  border: 1px solid #fff;
  border-radius: 128px;
  background: #151223;
  box-shadow: inset 0 9px 11.3px rgba(0, 0, 0, 0.2);
}
.CFRow__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51px;
  height: 51px;
  border: 1.5px solid #a095de;
  border-radius: 10px;
  background: #1b1730;
  flex: none;
}
.CFRow__item img { width: 28px; height: 28px; }
.CFRow__stake { color: #fff; font-size: 17px; font-weight: 600; }
.CFRow__stake span { color: #a095de; font-size: 12px; font-weight: 500; display: block; margin-top: 2px; }
.CFRow__extra {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51px;
  height: 51px;
  margin-left: auto;
  border: 1px solid #fff;
  border-radius: 43px;
  background: linear-gradient(180deg, #0a0911 0%, #211e39 100%);
  color: #a095de;
  font-size: 14px;
  flex: none;
}

/* ── Стоимость ────────────────────────────────────────────── */
.CFRow__value { text-align: center; flex: none; min-width: 96px; }
.CFRow__value-num {
  color: #863aff;
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 0 29.5px rgba(134, 58, 255, 0.2);
}
.CFRow__value-label { color: #fff; font-size: 11px; margin-top: 2px; }

/* ── Кнопка ───────────────────────────────────────────────── */
.CFRow__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 41px;
  flex: none;
  border: 1px solid #fff;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  background: linear-gradient(180deg, #a448ff 0%, #883bff 91.463%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: 0.15s;
}
.CFRow__action:hover { filter: brightness(1.08); }
.CFRow__action_ghost {
  background: linear-gradient(180deg, #2d2a40 0%, #322c54 100%);
  color: #a095de;
}
.CFRow__action_view {
  width: 41px;
  border-radius: 43px;
  background: linear-gradient(180deg, #0a0911 0%, #211e39 100%);
}
.CFRow__action_view img { width: 18px; height: 18px; opacity: 0.8; }

/* ── Пустое состояние ─────────────────────────────────────── */
.CFEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 103px;
  margin-bottom: 14px;
  border: 2px dashed #2a2340;
  border-radius: 15px;
  color: #4a4574;
  font-size: 14px;
}

/* ── Узкие экраны ─────────────────────────────────────────── */
@media screen and (max-width: 1400px) {
  .CFRow { gap: 16px; padding: 0 16px; }
  .CFRow__pill { padding: 0 16px; gap: 12px; }
  .CFRow__value { min-width: 84px; }
  .CFRow__action { width: 104px; }
}
@media screen and (max-width: 1000px) {
  .CFRow { height: auto; flex-wrap: wrap; padding: 16px; gap: 14px; }
  .CFRow__pill { order: 3; width: 100%; flex: 1 0 100%; }
  .CFRow__action { margin-left: auto; }
}