body.valon-site .valon-roulette-catalog {
  border: 1px solid rgba(202, 151, 72, .28);
  background: rgba(9, 15, 14, .94);
}

body.valon-site .valon-roulette-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

body.valon-site .valon-roulette-heading h2 { margin: 4px 0 0; }
body.valon-site .valon-roulette-heading p { margin: 0; color: #9eaaa5; font-size: .78rem; }

body.valon-site .valon-roulette-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-bottom: 24px;
}

body.valon-site .valon-roulette-intro .mmorpg-cms-summary { margin: 0 0 10px; max-width: 720px; }

body.valon-site .valon-roulette-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #d8c49b;
  font-size: .82rem;
}

body.valon-site .valon-roulette-note i { color: #36baa7; }

body.valon-site .valon-roulette-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  border: 1px solid rgba(202, 151, 72, .2);
  background: rgba(255, 255, 255, .025);
}

body.valon-site .valon-roulette-stats div { padding: 13px 18px; text-align: center; }
body.valon-site .valon-roulette-stats div + div { border-left: 1px solid rgba(202, 151, 72, .2); }
body.valon-site .valon-roulette-stats strong { display: block; color: #f0b858; font: 700 1.35rem/1 'Rajdhani', sans-serif; }
body.valon-site .valon-roulette-stats span { display: block; margin-top: 4px; color: #9eaaa5; font-size: .72rem; text-transform: uppercase; }

body.valon-site .valon-roulette-list { display: grid; gap: 14px; }

body.valon-site .valon-roulette-entry {
  overflow: hidden;
  border: 1px solid rgba(202, 151, 72, .26);
  border-radius: 6px;
  background: rgba(7, 12, 11, .78);
}

body.valon-site .valon-roulette-entry > summary {
  display: grid;
  grid-template-columns: 44px minmax(155px, .8fr) minmax(260px, 1.35fr) auto 18px;
  gap: 15px;
  align-items: center;
  min-height: 76px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(90deg, rgba(165, 55, 42, .14), rgba(25, 112, 101, .08));
}

body.valon-site .valon-roulette-entry > summary::-webkit-details-marker { display: none; }
body.valon-site .valon-roulette-entry[open] > summary { border-bottom: 1px solid rgba(202, 151, 72, .2); }

body.valon-site .valon-roulette-symbol,
body.valon-site .valon-roulette-coupon-icon,
body.valon-site .valon-roulette-reward-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(202, 151, 72, .34);
  background: #080b0a;
}

body.valon-site .valon-roulette-symbol { width: 44px; height: 44px; color: #e5a943; font-size: 1.25rem; }
body.valon-site .valon-roulette-title small,
body.valon-site .valon-roulette-title strong,
body.valon-site .valon-roulette-coupon small,
body.valon-site .valon-roulette-coupon strong,
body.valon-site .valon-roulette-coupon em { display: block; }
body.valon-site .valon-roulette-title small,
body.valon-site .valon-roulette-coupon small { color: #9eaaa5; font-size: .67rem; font-style: normal; text-transform: uppercase; }
body.valon-site .valon-roulette-title strong { margin-top: 3px; color: #f4ece0; font-size: 1rem; }

body.valon-site .valon-roulette-coupon { display: flex; align-items: center; gap: 11px; min-width: 0; }
body.valon-site .valon-roulette-coupon-icon { width: 48px; height: 48px; }
body.valon-site .valon-roulette-coupon-icon img,
body.valon-site .valon-roulette-reward-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
body.valon-site .valon-roulette-coupon strong { overflow: hidden; color: #ddd4c8; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
body.valon-site .valon-roulette-coupon em { color: #76817d; font-size: .68rem; font-style: normal; }
body.valon-site .valon-roulette-count { padding: 5px 8px; border: 1px solid currentColor; color: #d9b673; font-size: .68rem; white-space: nowrap; }
body.valon-site .valon-roulette-count.is-active { color: #55c4aa; }
body.valon-site .valon-roulette-count.is-closed { color: #a18f7b; }
body.valon-site .valon-roulette-chevron { color: #8b9691; transition: transform .2s ease; }
body.valon-site .valon-roulette-entry[open] .valon-roulette-chevron { transform: rotate(180deg); }

body.valon-site .valon-roulette-rewards { padding: 18px; }
body.valon-site .valon-roulette-rewards-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
body.valon-site .valon-roulette-rewards-head strong { color: #e8ded0; font-size: .86rem; }
body.valon-site .valon-roulette-rewards-head span { color: #7f8b86; font-size: .72rem; text-align: right; }

body.valon-site .valon-roulette-reward-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.valon-site .valon-roulette-reward {
  --roulette-rarity: #8e9994;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 88px;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 9px 12px 9px 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid var(--roulette-rarity);
  background: rgba(255, 255, 255, .025);
}
body.valon-site .valon-roulette-reward.rarity-2 { --roulette-rarity: #39b99e; }
body.valon-site .valon-roulette-reward.rarity-3 { --roulette-rarity: #4f95df; }
body.valon-site .valon-roulette-reward.rarity-4 { --roulette-rarity: #a66be0; }
body.valon-site .valon-roulette-reward.rarity-5 { --roulette-rarity: #d79b35; }
body.valon-site .valon-roulette-reward-icon { width: 52px; height: 52px; color: var(--roulette-rarity); }
body.valon-site .valon-roulette-reward-main { min-width: 0; }
body.valon-site .valon-roulette-reward-main small,
body.valon-site .valon-roulette-reward-main strong,
body.valon-site .valon-roulette-reward-main em { display: block; }
body.valon-site .valon-roulette-reward-main small { color: var(--roulette-rarity); font-size: .64rem; font-weight: 700; text-transform: uppercase; }
body.valon-site .valon-roulette-reward-main strong { overflow: hidden; margin-top: 2px; color: #eee6dc; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
body.valon-site .valon-roulette-reward-main em { margin-top: 3px; color: #7f8b86; font-size: .67rem; font-style: normal; }
body.valon-site .valon-roulette-chance { text-align: right; }
body.valon-site .valon-roulette-chance small,
body.valon-site .valon-roulette-chance strong { display: block; }
body.valon-site .valon-roulette-chance small { color: #7f8b86; font-size: .62rem; text-transform: uppercase; }
body.valon-site .valon-roulette-chance strong { color: #f2d398; font: 700 1rem/1.2 'Rajdhani', sans-serif; }
body.valon-site .valon-roulette-chance > span { display: block; height: 3px; margin-top: 5px; background: rgba(255, 255, 255, .08); }
body.valon-site .valon-roulette-chance > span i { display: block; height: 100%; background: var(--roulette-rarity); }

body.valon-site .valon-roulette-empty { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 180px; border: 1px dashed rgba(202, 151, 72, .28); color: #d5c8b8; text-align: left; }
body.valon-site .valon-roulette-empty > i { color: #d6a448; font-size: 1.5rem; }
body.valon-site .valon-roulette-empty strong,
body.valon-site .valon-roulette-empty span { display: block; }
body.valon-site .valon-roulette-empty span { margin-top: 3px; color: #84908b; font-size: .8rem; }
body.valon-site .valon-roulette-empty.is-error > i { color: #d66d5f; }

@media (max-width: 991px) {
  body.valon-site .valon-roulette-intro { grid-template-columns: 1fr; }
  body.valon-site .valon-roulette-stats { width: 100%; }
  body.valon-site .valon-roulette-entry > summary { grid-template-columns: 44px minmax(0, 1fr) auto 18px; }
  body.valon-site .valon-roulette-coupon { grid-column: 2 / 5; }
  body.valon-site .valon-roulette-reward-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  body.valon-site .valon-roulette-heading { align-items: flex-start; flex-direction: column; }
  body.valon-site .valon-roulette-stats { grid-template-columns: 1fr; }
  body.valon-site .valon-roulette-stats div + div { border-top: 1px solid rgba(202, 151, 72, .2); border-left: 0; }
  body.valon-site .valon-roulette-entry > summary { grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 10px; padding: 12px; }
  body.valon-site .valon-roulette-symbol { width: 38px; height: 38px; }
  body.valon-site .valon-roulette-count { display: none; }
  body.valon-site .valon-roulette-coupon { grid-column: 1 / 4; }
  body.valon-site .valon-roulette-rewards { padding: 12px; }
  body.valon-site .valon-roulette-rewards-head { align-items: flex-start; flex-direction: column; }
  body.valon-site .valon-roulette-rewards-head span { text-align: left; }
  body.valon-site .valon-roulette-reward { grid-template-columns: 46px minmax(0, 1fr) 70px; gap: 9px; padding-right: 8px; }
  body.valon-site .valon-roulette-reward-icon { width: 46px; height: 46px; }
}