/* Dark Brawl presentation. Reference: https://store.supercell.com/en/brawlstars
   Its public CSS uses Lilita One for Brawl headings. The same font is hosted locally here.
   Selectors are scoped to the page and dialogs, excluding the footer. */
.ds-site {
  --ds-bg: #050a17;
  --ds-surface: #0b1731;
  --ds-raised: #102143;
  --ds-border: #29446f;
  --ds-input: #060e20;
  --ds-gold-start: #ffda38;
  --ds-gold-end: #f5b500;
  --ds-gold-hover-start: #ffe05a;
  --ds-gold-hover-end: #ffc328;
  --ds-button-ink: #091226;
  --ds-text: #f4f7fc;
  --ds-muted: #b5c3db;
  --ds-accent: #ffd43b;
  --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-display: "Lilita One", "Trebuchet MS", sans-serif;
  background: var(--ds-bg) !important;
  color-scheme: dark;
}

.ds-background {
  background: radial-gradient(ellipse at 50% 0, #10234c 0, #050a17 720px) !important;
}

.ds-background-pattern { display: block; opacity: .025 !important; animation: none !important; }

.ds-page { padding: 32px 0 56px !important; }
.ds-page-inner {
  max-width: 1120px !important;
  padding-inline: 28px !important;
  gap: 24px !important;
}

.ds-page :is(input, p),
.ds-modal :is(input, p) {
  font-family: var(--ds-font) !important;
}

.ds-page :is(button, h2, h3, h4),
.ds-modal :is(button, h2, h3, h4),
.ds-page .ds-tab > span,
.ds-page .ds-reward-price > span,
.ds-page .ds-reward-action > span,
.ds-modal button > span {
  font-family: var(--ds-display) !important;
  font-weight: 400 !important;
}

.ds-page [class*="text-stroke"],
.ds-modal [class*="text-stroke"] {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.ds-page :is(h2, h3, h4, p, span),
.ds-modal :is(h2, h3, h4, p, span) {
  filter: none !important;
}

.ds-page :is(h2, h3, h4)[class],
.ds-modal :is(h2, h3, h4)[class] {
  -webkit-text-stroke: 1.2px #050a18 !important;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #050a18 !important;
}

.ds-page :is(button, input):focus-visible,
.ds-modal :is(button, input, a):focus-visible {
  outline: 3px solid var(--ds-accent);
  outline-offset: 4px;
}

.ds-logo-wrap { margin: 0 0 2px !important; }
.ds-logo {
  width: 232px !important;
  animation: none !important;
  filter: drop-shadow(0 8px 24px #0003) !important;
}

/* Keep the existing activity block compact and visually secondary. */
.ds-activity { max-width: 380px !important; margin: 0 !important; }
.ds-activity-panel {
  background: #0b1832 !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 10px !important;
  gap: 8px !important;
}
.ds-activity-panel > .grid > div {
  background: #070f23 !important;
  border-color: #2a4776 !important;
  border-radius: 10px !important;
}
.ds-activity-panel .animate-breathe,
.ds-activity-panel .animate-float-icon { animation: none !important; }
.ds-activity-panel [class*="text-yellow-300"],
.ds-activity-panel [class*="text-emerald-400"] { color: #d9e4f2 !important; }
.ds-activity-panel [class*="font-black"] { font-weight: 400 !important; }

/* Catalog shell, controls and responsive grid. */
.ds-catalog { padding: 0 !important; margin: 0 !important; }
.ds-catalog-shell {
  padding: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ds-catalog-shell > .absolute,
.ds-catalog-panel > .absolute { display: none; }
.ds-catalog-panel {
  background: var(--ds-surface) !important;
  border: 2px solid #22375d !important;
  border-radius: 20px !important;
  box-shadow: 0 5px 0 #040b1c, inset 0 1px 0 #7daaff30 !important;
}
.ds-catalog-content { padding: 28px !important; gap: 20px !important; }
.ds-catalog-heading { text-align: left !important; margin: 0 !important; }
.ds-catalog-heading h2 {
  font-size: 31px !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
  font-weight: 400;
  color: #ffdc49 !important;
}
.ds-tabs {
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 2px 2px 4px !important;
  scrollbar-width: thin;
  scrollbar-color: #33435a transparent;
}
.ds-tabs::-webkit-scrollbar { height: 3px; }
.ds-tabs::-webkit-scrollbar-track { background: transparent; }
.ds-tabs::-webkit-scrollbar-thumb { background: #33435a; }
.ds-tab {
  min-height: 42px;
  padding: 9px 13px !important;
  border: 2px solid #050c1f !important;
  border-radius: 8px !important;
  background: linear-gradient(#172f5c, #0c1c3b) !important;
  color: #f4f7fc !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 3px 0 #040b1b, inset 0 1px 0 #ffffff25 !important;
  transform: none !important;
  transition: background 160ms, border-color 160ms !important;
}
.ds-tab > span { color: inherit !important; filter: none !important; }
.ds-tab > span:not(:last-child) { text-shadow: 0 1.5px #040b1b; }
.ds-tab > span:last-child {
  background: #0003 !important;
  font-size: 12px !important;
  padding: 2px 6px !important;
}
.ds-tab:hover { background: linear-gradient(#203e71, #132b52) !important; }
.ds-tab.tab-active {
  background: linear-gradient(var(--ds-gold-start), var(--ds-gold-end)) !important;
  border-color: #050c1f !important;
  color: var(--ds-button-ink) !important;
}
.ds-tab.tab-active > span { text-shadow: none !important; }
.ds-tab.tab-active > span:last-child { background: #09172f !important; color: #f7f9ff !important; }
.ds-search-row { padding: 0 !important; gap: 12px !important; }
.ds-search {
  background: var(--ds-input) !important;
  border: 2px solid #2b4879 !important;
  border-radius: 10px !important;
  min-height: 48px;
  box-shadow: none !important;
  padding: 10px 14px !important;
}
.ds-search:focus-within {
  border-color: #ffd43b !important;
  box-shadow: 0 0 0 3px #ffd43b18 !important;
}
.ds-search > span { font-size: 16px !important; opacity: .9; }
.ds-search input {
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0 !important;
  color: var(--ds-text) !important;
}
.ds-search input::placeholder { color: #a7b6cf !important; opacity: 1; }
.ds-result-count {
  min-height: 36px;
  background: #102143 !important;
  border-color: var(--ds-border) !important;
  color: #d5dff0 !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}
.ds-reward-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bold blue cards retain the normalized visible size of every reward image. */
.ds-reward-card {
  min-height: 300px !important;
  border: 2px solid #29446f !important;
  border-radius: 12px !important;
  background: radial-gradient(ellipse at 50% 30%, #183260 0, #10234b 62%, #0b1731 100%) !important;
  box-shadow: 0 4px 0 #030816, inset 0 1px 0 #87afff20 !important;
  animation: none !important;
  transition: border-color 160ms, transform 160ms !important;
}
.ds-reward-card.new-item-glow { border-color: #edc343 !important; }
.ds-reward-card > .absolute { display: none; }
.ds-reward-card:hover {
  border-color: #6b90d1 !important;
}
.ds-reward-body { padding: 16px !important; }
.ds-reward-card .reward-title-block { height: 64px; margin: 0 !important; }
.ds-reward-card h3 {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  color: #fff !important;
}
.ds-reward-card .reward-artwork-frame {
  margin-block: 8px !important;
  height: 140px;
  flex-basis: 140px;
}
.ds-reward-card .reward-artwork {
  filter: drop-shadow(0 8px 10px #0005) !important;
}
.ds-reward-price { gap: 8px !important; margin-bottom: 12px !important; }
.ds-reward-price > span:first-child {
  color: #c5d1e5 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
.ds-reward-price > span:last-child {
  color: #ffdf56 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 1px 0 #071026 !important;
}
.ds-reward-action {
  min-height: 46px;
  background: linear-gradient(var(--ds-gold-start), var(--ds-gold-end)) !important;
  border: 2px solid #090d1b !important;
  color: var(--ds-button-ink) !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
  box-shadow: 0 4px 0 #050a17, inset 0 2px 0 #fff6 !important;
  transform: none !important;
}
.ds-reward-action > span { color: var(--ds-button-ink) !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
.ds-reward-action:hover { background: linear-gradient(var(--ds-gold-hover-start), var(--ds-gold-hover-end)) !important; }
.ds-reward-action:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #050a17 !important; }

/* Existing FAQ content and interactions retain their original behavior. */
.ds-faq { max-width: none !important; padding: 0 !important; margin: 8px 0 0 !important; }
.ds-faq-panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 18px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.ds-faq-heading { justify-content: flex-start !important; margin: 0 !important; }
.ds-faq-heading > span { font-size: 18px !important; opacity: .65; }
.ds-faq-heading h3 { font-size: 22px !important; font-weight: 400 !important; letter-spacing: -.02em !important; }
.ds-faq-item {
  background: #0b1935 !important;
  border: 2px solid #061129 !important;
  border-radius: 12px !important;
}
.ds-faq-item > button { padding: 18px !important; min-height: 58px; }
.ds-faq-item > button > span:first-child { font-family: var(--ds-display) !important; font-size: 17px !important; font-weight: 400 !important; letter-spacing: -.01em !important; }
.ds-faq-item > button > span:last-child { color: #98acc7 !important; font-size: 9px !important; }
.ds-faq-item > div { padding: 14px 18px 18px !important; color: #c0cde1 !important; font-size: 14px !important; line-height: 1.7 !important; }

/* Shared dialog presentation; no step transitions or event handlers are altered. */
.ds-backdrop { background: #050911d9 !important; backdrop-filter: blur(5px); }
.ds-modal {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  align-items: flex-start !important;
  padding: 28px 16px !important;
  color: var(--ds-text);
  scrollbar-width: thin;
  scrollbar-color: #33435a #0b101a;
}
.ds-modal > .relative { margin-block: auto !important; flex-shrink: 0; }
.ds-tag-content, .ds-profile-content { padding-inline: 0 !important; }
.ds-modal-shell {
  background: var(--ds-surface) !important;
  border: 4px solid var(--ds-border) !important;
  border-radius: 32px !important;
  padding: 4px !important;
  box-shadow: 0 0 0 4px #030816, 0 28px 90px #000c !important;
}
.ds-modal-panel {
  background-color: var(--ds-surface) !important;
  background-image: radial-gradient(circle, #7daaff0a 1.5px, transparent 1.5px) !important;
  background-size: 18px 18px !important;
  border: 2px solid #3b5b91 !important;
  border-radius: 24px !important;
  padding: 26px !important;
  gap: 16px !important;
}
.ds-modal-panel > .absolute.pointer-events-none,
.ds-modal button > .absolute { display: none !important; }
.ds-modal-panel > .absolute[class*="top-3"],
.ds-modal-panel > .absolute[class*="bottom-3"] {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  background: var(--ds-raised) !important;
  border: 1px solid #5076b1 !important;
  pointer-events: none;
}
.ds-modal h2 { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -.03em !important; font-weight: 400 !important; transform: none !important; }
.ds-modal h3 { font-weight: 400 !important; letter-spacing: -.015em !important; }
.ds-modal p { font-size: 13px !important; line-height: 1.6 !important; }
.ds-modal [class*="tracking-wider"],
.ds-modal [class*="tracking-wide"] { letter-spacing: .035em !important; }
.ds-modal .step-badge {
  background: var(--ds-raised) !important;
  border: 1px solid #46628b !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.ds-modal .step-badge > span { font-family: var(--ds-display) !important; font-size: 12px !important; color: #fff !important; font-weight: 400; }
.ds-modal .step-badge > span:first-child { color: #ffdf45 !important; }
.ds-modal .step-badge > span:nth-child(2) { color: #a3b1cf !important; }
.ds-tag-content .step-badge { margin-left: 28px !important; }
.ds-tag-input {
  background: var(--ds-input) !important;
  border-radius: 16px !important;
  border-width: 2px !important;
  min-height: 60px;
  box-shadow: none !important;
}
.ds-tag-input input { font-size: 22px !important; font-weight: 600 !important; letter-spacing: .06em !important; }
.ds-modal button[class*="bg-gradient-to-b"] {
  background: linear-gradient(var(--ds-gold-start), var(--ds-gold-end)) !important;
  border: 2px solid #050b1b !important;
  border-radius: 9px !important;
  min-height: 48px;
  height: auto !important;
  padding: 13px 18px !important;
  color: var(--ds-button-ink) !important;
  font-weight: 400 !important;
  box-shadow: 0 4px 0 #040915, inset 0 2px 0 #ffffff60 !important;
  transform: none !important;
}
.ds-modal button[class*="bg-gradient-to-b"] :is(span, p) {
  color: inherit !important;
  font-size: 23px !important;
  line-height: 1.3 !important;
  letter-spacing: -.025em !important;
  margin-top: 0 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
.ds-modal button[class*="bg-gradient-to-b"]:hover { background: linear-gradient(var(--ds-gold-hover-start), var(--ds-gold-hover-end)) !important; }
.ds-modal button[class*="bg-gradient-to-b"]:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #040915 !important; }
.ds-modal button:disabled { opacity: .6; }
.ds-profile-content .ds-modal-panel { padding: 22px !important; gap: 12px !important; }
.ds-profile-content h2 { font-size: 21px !important; }
.ds-profile-stat, .ds-profile-brawler {
  background: #08182f !important;
  border: 1px solid #3a5787 !important;
  border-radius: 10px !important;
  padding: 10px 7px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.ds-profile-stat > span { font-size: 9px !important; margin-top: 5px; color: #a9b8cc !important; font-weight: 600; }
.ds-profile-brawler h4 { color: #f4f7fc !important; font-size: 13px !important; margin-block: 5px; font-weight: 400; }
.ds-modal .brawl-offer-card {
  background: #0a1934 !important;
  border: 1px solid #374961 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 12px !important;
  transform: none !important;
}
.ds-modal .brawl-offer-card:hover { background: #10244a !important; border-color: #6288b1 !important; }
.ds-modal .brawl-offer-title { font-family: var(--ds-display) !important; font-size: 16px !important; font-weight: 400 !important; white-space: normal !important; }
.ds-modal .brawl-offer-desc { color: #b7c5d8 !important; line-height: 1.5 !important; }
.ds-modal .brawl-offer-img { border: 1px solid #435775 !important; border-radius: 9px !important; }
.ds-modal .brawl-offer-btn {
  background: linear-gradient(var(--ds-gold-start), var(--ds-gold-end)) !important;
  color: var(--ds-button-ink) !important;
  border: 2px solid #050b1b !important;
  border-radius: 8px !important;
  font-family: var(--ds-display) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  box-shadow: 0 2px 0 #040915 !important;
}
.ds-modal .brawl-status-box { background: #0d1521 !important; border: 1px solid #2a394d !important; box-shadow: none !important; }
.ds-modal .brawl-pulsing-dot { animation: none !important; background: #8ea5c3 !important; }

/* Player-tag dialog follows the supplied deep-blue, double-frame reference. */
.ds-modal:has(.ds-tag-content) > .relative { max-width: 500px !important; }
.ds-tag-content { max-width: none !important; }
.ds-tag-content .ds-modal-panel { padding: 30px 24px 26px !important; gap: 20px !important; }
.ds-tag-content .step-badge { margin: 0 0 0 30px !important; padding: 6px 12px !important; }
.ds-tag-content .step-badge > span:last-child {
  -webkit-text-stroke: 1px #080c18 !important;
  paint-order: stroke fill;
  text-shadow: 0 1px #080c18 !important;
}
.ds-tag-content h2[class] {
  font-size: 36px !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  margin: 10px 0 2px !important;
  -webkit-text-stroke: 3px #02050b !important;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #02050b !important;
}
.ds-tag-content .ds-tag-input {
  height: 72px !important;
  border-color: #2d54a4 !important;
  border-radius: 17px !important;
  box-shadow: inset 0 4px 14px #0005 !important;
  padding-inline: 16px !important;
}
.ds-tag-content .ds-tag-input:focus-within { border-color: #75afff !important; }
.ds-tag-content .ds-tag-input[class*="border-red-500"] { border-color: #ff7587 !important; }
.ds-tag-content .ds-tag-input input {
  font-family: var(--ds-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  padding-top: 0 !important;
  color: #fff !important;
}
.ds-tag-content .ds-tag-input input::placeholder { color: #99a8c1 !important; opacity: 1; }
.ds-tag-content .ds-tag-input > span { font-size: 28px !important; padding-top: 0 !important; }
.ds-tag-content .ds-tag-input > span[class*="text-white/40"] { color: #99a8c1 !important; }
.ds-tag-content button[title="Watch Tutorial"] img { width: 42px !important; height: 42px !important; }
.ds-tag-content button[class*="bg-gradient-to-b"] {
  min-height: 76px !important;
  padding: 12px 16px !important;
  background: linear-gradient(var(--ds-gold-start), var(--ds-gold-end)) !important;
  border: 0 !important;
  border-top: 4px solid #ffe15a !important;
  border-bottom: 7px solid #b57f00 !important;
  border-radius: 17px !important;
  color: #fff !important;
  box-shadow: 0 5px 16px #0005, inset 0 1px 0 #fff5 !important;
}
.ds-tag-content button[class*="bg-gradient-to-b"] > span {
  font-size: 34px !important;
  letter-spacing: -.02em !important;
  color: #fff !important;
  -webkit-text-stroke: 3px #03050b !important;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #03050b !important;
}
.ds-tag-content button[class*="bg-gradient-to-b"]:hover {
  background: linear-gradient(var(--ds-gold-hover-start), var(--ds-gold-hover-end)) !important;
}
.ds-tag-content .ds-modal-panel > div:last-child p {
  font-family: var(--ds-display) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #d6def2 !important;
  line-height: 1.55 !important;
  letter-spacing: .015em !important;
}
.ds-tag-input [class*="bg-white"] { background: var(--ds-raised) !important; border: 1px solid #46628b; }
.ds-tag-input [class*="border-t-white"] { border-top-color: var(--ds-raised) !important; }
.ds-tag-input p[class] { font-size: 11px !important; color: #f7f9ff !important; }
.ds-tag-input p[class*="345ffd"] { color: #ffe068 !important; }

/* Reward-unlocked screen uses the supplied matching celebration layout. */
.ds-modal:has(.ds-unlocked-state) > .relative { max-width: 500px !important; }
.ds-modal:has(.ds-unlocked-state) .ds-modal-panel { padding: 26px 22px 24px !important; }
.ds-unlocked-state { gap: 0; }
.ds-modal h2.ds-unlocked-heading {
  font-size: 34px !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
  margin: 4px 0 10px !important;
  color: #fff !important;
  -webkit-text-stroke: 3px #02050b !important;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #02050b !important;
}
.ds-modal p.ds-unlocked-recipient {
  font-family: var(--ds-display) !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  margin: 0 0 14px !important;
}
.ds-unlocked-recipient > span {
  -webkit-text-stroke: 1px #03050b;
  paint-order: stroke fill;
  text-shadow: 0 1px #03050b;
}
.ds-unlocked-artwork { width: 160px !important; height: 160px !important; margin: 0 0 18px !important; }
.ds-modal p.ds-unlocked-copy {
  max-width: 100% !important;
  font-family: var(--ds-display) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin: 0 0 24px !important;
  color: #fff !important;
  -webkit-text-stroke: 1px #02050b !important;
  paint-order: stroke fill;
  text-shadow: 0 1px 0 #02050b !important;
}
.ds-modal button.ds-unlocked-action {
  min-height: 70px !important;
  padding: 12px 16px !important;
  background: linear-gradient(var(--ds-gold-start), var(--ds-gold-end)) !important;
  border: 0 !important;
  border-bottom: 6px solid #b57f00 !important;
  border-radius: 16px !important;
  color: #fff !important;
  box-shadow: 0 7px 18px #0005 !important;
}
.ds-modal button.ds-unlocked-action > span {
  font-size: 32px !important;
  color: #fff !important;
  letter-spacing: -.02em !important;
  -webkit-text-stroke: 3px #03050b !important;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #03050b !important;
}
.ds-modal button.ds-unlocked-action:hover { background: linear-gradient(var(--ds-gold-hover-start), var(--ds-gold-hover-end)) !important; }

/* Consistent typography and clear requirements for the third-party offer screen. */
.ds-modal:has(.ds-offers-state) > .relative { max-width: 560px !important; }
.ds-modal:has(.ds-offers-state) .ds-modal-panel { min-height: 0 !important; padding: 24px 20px 20px !important; }
.ds-offers-state { --ds-offer-font: "Lilita One", Tahoma, "Segoe UI", Arial, sans-serif; padding-top: 6px; }
.ds-offers-header {
  padding: 0 !important;
  margin: 0 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: center;
}
.ds-offers-header > .absolute { display: none; }
.ds-modal .ds-offers-header h3 {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 9px !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  -webkit-text-stroke: 1.6px #02050b !important;
  paint-order: stroke fill;
  text-shadow: 0 2px #02050b !important;
}
.ds-offers-header h3 > span { font-family: var(--ds-display) !important; }
.ds-offers-header h3 > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: #172c4f;
  border: 1px solid #3e5c88;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 #ffffff14;
}
.ds-offers-header h3 .brawl-ui-icon { width: 22px !important; height: 22px !important; filter: none; }
.ds-offers-header p {
  font-family: var(--ds-offer-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: #c5d4ed !important;
  margin-top: 6px !important;
  text-shadow: none !important;
  text-align: center !important;
}
.ds-offer-summary {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  background: var(--ds-input) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  gap: 12px !important;
  box-shadow: none !important;
}
.ds-offer-summary > div { flex: 1 1 auto; min-width: 0; }
.ds-offer-summary > div > div { min-width: 0; }
.ds-offer-summary > div > img { width: 42px !important; height: 42px !important; }
.ds-offer-summary [class*="truncate"] {
  font-family: var(--ds-display) !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ds-offer-summary > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: #162942 !important;
  border: 1px solid #3c5c8f !important;
  border-radius: 8px !important;
  color: #cce0ff !important;
  font-size: 11px !important;
  line-height: 1 !important;
  padding: 7px 8px !important;
  margin: 0 !important;
  min-height: 30px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: none !important;
}
.ds-offer-summary .brawl-lock-label { gap: 5px; line-height: 1; }
.ds-offer-summary .brawl-lock-label .brawl-ui-icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  flex: 0 0 14px;
}
.ds-offer-selected { font-family: var(--ds-display) !important; letter-spacing: .04em; }
.ds-modal .ds-offers-disclosure {
  font-family: var(--ds-offer-font) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  color: #bdcde5 !important;
  margin: 0 0 12px !important;
  text-shadow: none !important;
}
.ds-offers-state .brawl-offers-container { margin: 0 !important; gap: 10px !important; }
.ds-offers-state .brawl-offer-card {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 80px;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  background: #0b1932 !important;
  border: 1px solid #365078 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 0 #030816 !important;
  transition: border-color 180ms, background 180ms !important;
}
.ds-offers-state .brawl-offer-card > div:first-child { display: none !important; }
.ds-offers-state .brawl-offer-left { display: contents !important; }
.ds-offers-state .brawl-offer-artwork-slot {
  display: block;
  width: 40px;
  height: 40px;
  align-self: center;
  border-radius: 9px;
  background: #102143 url("icons/offer-placeholder.svg") center / cover no-repeat;
}
.ds-offers-state .brawl-offer-img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  align-self: center;
  border: 1px solid #465f85 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  object-fit: contain !important;
  background: #102143 !important;
}
.ds-offers-state .brawl-offer-info { gap: 0 !important; }
.ds-offers-state .brawl-offer-title {
  font-family: var(--ds-offer-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  color: #f4f7fc !important;
  text-shadow: none !important;
}
.ds-offers-state .brawl-offer-desc {
  font-family: var(--ds-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  margin-top: 6px !important;
  color: #bdcce1 !important;
  text-transform: none !important;
  -webkit-text-stroke: 0 !important;
  unicode-bidi: plaintext;
  text-shadow: none !important;
}
.ds-offers-state .brawl-offer-btn {
  width: 80px;
  min-width: 80px !important;
  height: 40px !important;
  padding: 0 8px !important;
  align-self: center;
  border-radius: 8px !important;
  font-family: var(--ds-display) !important;
  font-size: 15px !important;
  letter-spacing: -.02em !important;
  color: var(--ds-button-ink) !important;
  filter: none !important;
  text-shadow: none !important;
}
.ds-offers-state .brawl-offer-card:hover { background: #102143 !important; border-color: #6b8ebb !important; }
.ds-offers-state .brawl-offer-card:hover .brawl-offer-btn { background: linear-gradient(var(--ds-gold-hover-start), var(--ds-gold-hover-end)) !important; }
.ds-offers-state .brawl-status-box {
  margin-top: 14px !important;
  padding: 4px 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ds-offers-state .brawl-pulsing-dot { width: 6px !important; height: 6px !important; box-shadow: none !important; }
.ds-offers-state .brawl-status-box > span:last-child {
  font-family: var(--ds-display) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  text-transform: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.ds-modal .ds-offers-provider-note { font-family: var(--ds-offer-font) !important; font-size: 11px !important; line-height: 1.4 !important; color: #a6b9d3 !important; margin: 10px 0 0 !important; }
.ds-offers-state .ds-offer-expiry { font-family: var(--ds-display) !important; font-size: 12px !important; letter-spacing: .015em !important; }
.ds-offer-expiry > span { font-family: var(--ds-display) !important; font-weight: 400 !important; }
.ds-offer-expiry > .brawl-ui-icon { width: 15px !important; height: 15px !important; }
.ds-offer-completed { background: var(--ds-raised) !important; border: 1px solid #46688f !important; box-shadow: none !important; }
.ds-offer-completed h3 { font-size: 20px !important; }
.ds-offer-completed p { font-family: var(--ds-offer-font) !important; color: #d6e2f4 !important; }

/* Actual game artwork for categories; a single drawn icon style for UI controls. */
.brawl-ui-icon, .brawl-game-icon, .brawl-category-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
  object-fit: contain;
  vertical-align: middle;
  pointer-events: none;
}
.brawl-ui-icon { filter: drop-shadow(0 1px 0 #030916); }
.brawl-category-icon { width: 26px; height: 26px; filter: drop-shadow(0 2px 1px #0006); }
.brawl-category-icon[src*="profile-icon"] { border-radius: 5px; }
.ds-result-count .brawl-game-icon { width: 22px; height: 22px; }
.ds-activity .brawl-ui-icon { width: 12px; height: 14px; margin-right: 2px; }
.ds-faq-heading .brawl-ui-icon { width: 26px; height: 26px; }
.ds-faq-item > button > span:last-child .brawl-ui-icon { width: 16px; height: 16px; }
.ds-catalog [class*="text-4xl"] > .brawl-ui-icon { width: 48px; height: 48px; }
.ds-catalog [class*="animate-bounce"] { animation: none !important; }
.brawl-lock-label { display: inline-flex; align-items: center; gap: 5px; }
.brawl-lock-label .brawl-ui-icon { width: 14px; height: 14px; }
.brawl-result-icon { width: 40px; height: 40px; }
button[class*="bg-white"] > .brawl-ui-icon { filter: brightness(0); width: 16px; height: 16px; }

/* Helpful filter feedback replaces the old automatic claim popups. */
.ds-result-count {
  background: var(--ds-raised) !important;
  border-color: var(--ds-border) !important;
  gap: 7px !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds-result-count .brawl-ui-icon { width: 15px; height: 15px; opacity: .8; }

/* Small, deliberate interactions. Hover movement is limited to fine pointers. */
.ds-reward-card {
  isolation: isolate;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), border-color 180ms, box-shadow 220ms !important;
}
.ds-reward-card .reward-artwork {
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), filter 260ms !important;
}
.ds-reward-card::after {
  content: "";
  position: absolute;
  inset: -20% -30%;
  z-index: 30;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, #fff1 48%, #fff2 50%, transparent 63%);
  transform: translateX(-140%);
  opacity: 0;
}
.ds-reward-card:focus-within { border-color: #e8bf44 !important; box-shadow: 0 4px 0 #030816, 0 0 0 2px #ffd43b25 !important; }
.ds-reward-action { transition: background 160ms, box-shadow 160ms, transform 140ms !important; }
.ds-tab { transition: background 180ms, border-color 180ms, box-shadow 180ms, transform 180ms !important; }
.ds-tab .brawl-category-icon { transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.ds-faq-item { transition: border-color 180ms, background 180ms !important; }
.ds-faq-item .brawl-ui-icon { transition: transform 180ms; }
.ds-search { transition: border-color 180ms, box-shadow 180ms !important; }
.ds-search .brawl-ui-icon { transition: transform 180ms, opacity 180ms; }
.ds-search:focus-within > span .brawl-ui-icon { opacity: 1; }

@keyframes ds-card-sheen {
  0% { transform: translateX(-140%); opacity: 0; }
  20% { opacity: .7; }
  80% { opacity: .7; }
  100% { transform: translateX(140%); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ds-reward-card:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: #6b90d1 !important;
    box-shadow: 0 9px 0 #030816, 0 16px 28px #0005, 0 0 18px #6b90d115 !important;
  }
  .ds-reward-card.new-item-glow:hover { border-color: #ffdf70 !important; }
  .ds-reward-card:hover .reward-artwork {
    transform: translate(var(--art-center-x, -50%), var(--art-center-y, -50%)) translateY(-3px) scale(1.035);
    filter: drop-shadow(0 12px 12px #0006) !important;
  }
  .ds-reward-card:hover::after { animation: ds-card-sheen 650ms ease-out; }
  .ds-tab:hover { transform: translateY(-2px) !important; box-shadow: 0 5px 0 #040b1b, inset 0 1px 0 #ffffff25 !important; }
  .ds-tab:hover .brawl-category-icon { transform: translateY(-1px) rotate(-5deg); }
  .ds-faq-item:hover { border-color: #3d5c8d !important; background: #102143 !important; }
  .ds-faq-item > button:hover .brawl-ui-icon { transform: translateY(2px); }
  .ds-search:focus-within > span .brawl-ui-icon { transform: scale(1.08); }
}

@media (min-width: 1024px) {
  .ds-reward-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 639px) {
  .ds-page { padding: 22px 0 36px !important; }
  .ds-page-inner { padding-inline: 12px !important; gap: 20px !important; }
  .ds-logo { width: 192px !important; }
  .ds-activity { max-width: 360px !important; }
  .ds-catalog-panel { border-radius: 16px !important; }
  .ds-catalog-content { padding: 16px 12px !important; gap: 16px !important; }
  .ds-catalog-heading h2 { font-size: 27px !important; }
  .ds-tabs { gap: 6px !important; }
  .ds-tab { padding: 7px 9px !important; font-size: 13px !important; gap: 5px !important; }
  .ds-search-row { gap: 8px !important; }
  .ds-search { min-height: 46px; padding-inline: 11px !important; }
  .ds-search input { font-size: 12px !important; }
  .ds-result-count { align-self: flex-end; min-height: 28px; padding: 4px 9px !important; font-size: 11px !important; }
  .ds-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .ds-reward-card { min-height: 280px !important; border-radius: 12px !important; }
  .ds-reward-body { padding: 12px 10px !important; }
  .ds-reward-card h3 { font-size: 15px !important; line-height: 1.15 !important; }
  .ds-reward-card .reward-title-block { height: 56px; }
  .ds-reward-card .reward-artwork-frame { height: 124px; flex-basis: 124px; margin-block: 6px !important; }
  .ds-reward-price { gap: 5px !important; margin-bottom: 10px !important; flex-wrap: wrap; }
  .ds-reward-price > span:first-child { font-size: 12px !important; }
  .ds-reward-price > span:last-child { font-size: 16px !important; }
  .ds-reward-action { font-size: 19px !important; min-height: 44px; padding: 8px 10px !important; }
  .ds-faq-heading h3 { font-size: 19px !important; }
  .ds-faq-item > button { padding: 16px 14px !important; }
  .ds-faq-item > button > span:first-child { font-size: 15px !important; }
  .ds-faq-item > div { padding: 12px 14px 16px !important; font-size: 13px !important; }
  .ds-modal { padding: 20px 12px !important; }
  .ds-modal-panel { padding: 24px 20px !important; }
  .ds-modal h2 { font-size: 27px !important; }
  .ds-profile-content .ds-modal-panel { padding: 20px 16px !important; }
  .ds-modal-shell { border-radius: 28px !important; padding: 3px !important; }
  .ds-modal-panel { border-radius: 20px !important; }
  .ds-tag-content .ds-modal-panel { padding: 28px 16px 22px !important; gap: 18px !important; }
  .ds-tag-content .step-badge { margin-left: 28px !important; padding: 5px 8px !important; gap: 5px !important; }
  .ds-tag-content .step-badge > span { font-size: 11px !important; }
  .ds-tag-content h2[class] { font-size: 29px !important; margin-top: 8px !important; -webkit-text-stroke-width: 2.5px !important; }
  .ds-tag-content .ds-tag-input { height: 66px !important; padding-inline: 12px !important; }
  .ds-tag-content .ds-tag-input input, .ds-tag-content .ds-tag-input > span { font-size: 24px !important; }
  .ds-tag-content button[title="Watch Tutorial"] img { width: 36px !important; height: 36px !important; }
  .ds-tag-content button[class*="bg-gradient-to-b"] { min-height: 68px !important; }
  .ds-tag-content button[class*="bg-gradient-to-b"] > span { font-size: 30px !important; -webkit-text-stroke-width: 2.5px !important; }
  .ds-tag-content .ds-modal-panel > div:last-child p { font-size: 11px !important; }
  .ds-modal:has(.ds-unlocked-state) .ds-modal-panel { padding: 24px 16px 20px !important; }
  .ds-modal h2.ds-unlocked-heading { font-size: 29px !important; -webkit-text-stroke-width: 2.5px !important; }
  .ds-modal p.ds-unlocked-recipient { font-size: 18px !important; margin-bottom: 12px !important; }
  .ds-unlocked-artwork { width: 144px !important; height: 144px !important; }
  .ds-modal p.ds-unlocked-copy { font-size: 13px !important; margin-bottom: 20px !important; }
  .ds-modal button.ds-unlocked-action { min-height: 64px !important; }
  .ds-modal button.ds-unlocked-action > span { font-size: 29px !important; -webkit-text-stroke-width: 2.5px !important; }
  .ds-modal:has(.ds-offers-state) .ds-modal-panel { padding: 26px 16px 18px !important; }
  .ds-offers-header { padding-right: 0 !important; margin-bottom: 14px !important; }
  .ds-modal .ds-offers-header h3 { font-size: 23px !important; }
  .ds-offers-header h3 .brawl-ui-icon { width: 19px; height: 19px; }
  .ds-offers-state .brawl-offer-card { grid-template-columns: 40px minmax(0, 1fr) 80px; gap: 10px !important; padding: 12px !important; }
  .ds-offers-state .brawl-offer-img { grid-row: auto; }
  .ds-offers-state .brawl-offer-btn { grid-column: auto; justify-self: end; width: 80px; min-width: 80px !important; height: 40px !important; margin-top: 0; }
  .ds-offers-state .brawl-offer-title { font-size: 15px !important; }
  .ds-offers-state .brawl-offer-desc { font-size: 13px !important; }
}

@media (max-width: 439px) {
  .ds-offers-state .brawl-offer-card { grid-template-columns: 40px minmax(0, 1fr); gap: 10px !important; }
  .ds-offers-state :is(.brawl-offer-img, .brawl-offer-artwork-slot) { align-self: start; }
  .ds-offers-state .brawl-offer-btn { grid-column: 1 / -1; width: 100%; min-width: 0 !important; height: 38px !important; margin-top: 2px; }
  .ds-offer-summary { gap: 8px !important; padding: 10px !important; }
  .ds-offer-summary > div > img { width: 36px !important; height: 36px !important; }
  .ds-offer-summary [class*="truncate"] { font-size: 14px !important; }
  .ds-offer-summary > span { font-size: 10px !important; padding: 6px !important; }
  .ds-modal .ds-offers-header h3 { font-size: 22px !important; }
}

@media (max-width: 359px) {
  .ds-reward-card .reward-artwork-frame { --reward-art-size: 96px; }
  .ds-tab { padding-inline: 8px !important; }
  .ds-modal-panel { padding-inline: 16px !important; }
  .ds-modal .brawl-offer-card { gap: 8px !important; }
  .ds-modal .brawl-offer-btn { min-width: 56px !important; padding-inline: 9px !important; }
  .ds-tag-content .ds-modal-panel { padding-inline: 12px !important; }
  .ds-tag-content .step-badge > span { font-size: 10px !important; }
  .ds-tag-content h2[class] { font-size: 26px !important; }
  .ds-tag-content .ds-tag-input input, .ds-tag-content .ds-tag-input > span { font-size: 22px !important; }
  .ds-modal h2.ds-unlocked-heading { font-size: 26px !important; }
  .ds-modal .ds-offers-header h3 { font-size: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-page *, .ds-modal * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ds-page :is(.ds-reward-card, .ds-tab, .ds-reward-action) { transform: none !important; }
  .ds-page .reward-artwork { transform: translate(var(--art-center-x, -50%), var(--art-center-y, -50%)) !important; }
  .ds-reward-card::after { display: none !important; }
}

/* Approved catalog value treatment. Original grid, card, artwork and button dimensions remain above unchanged. */
.ds-main-catalog .ds-reward-value { container-type:inline-size; height:36px; flex:0 0 36px; margin:0; position:relative; text-align:center; display:flex; align-items:center; }
.ds-main-catalog .ds-reward-price { height:24px; min-height:0; flex-wrap:nowrap!important; margin:0!important; white-space:nowrap; }
.ds-main-catalog .ds-value-number s { text-decoration-thickness:2px; text-decoration-color:#bdcce5; }
.ds-main-catalog .ds-reward-price > .ds-free-bundle:last-child { text-transform:uppercase; }
.ds-main-catalog .ds-reward-value[data-long-quantity="true"] .ds-reward-price > .ds-free-bundle:last-child { font-size:clamp(13px,11cqi,18px)!important; }
@media(max-width:639px){
 .ds-main-catalog .ds-reward-value { height:30px; flex-basis:30px; }
 .ds-main-catalog .ds-reward-price { height:20px; }
}