/* Game cards and task cards supplied by the client. */

/* Game cards */
html body[data-view="game"] .game-hub {
  display: grid !important;
  box-sizing: border-box !important;
  width: 328px !important;
  grid-template-columns: repeat(2, 156px) !important;
  gap: 16px !important;
  margin: 0 !important;
}

html body[data-view="game"] .game-card.game-card,
html body[data-view="game"] .game-card.game-card:nth-child(3) {
  position: relative !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 156px !important;
  min-width: 156px !important;
  height: 214px !important;
  min-height: 214px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(8, 10, 11, 0.8) 0%, rgba(44, 48, 51, 0.8) 100%) !important;
  box-shadow: none !important;
}

html body[data-view="game"] .game-card.game-card::before {
  position: absolute !important;
  z-index: 0 !important;
  top: 18px !important;
  left: 14px !important;
  width: 99.05px !important;
  height: 99.05px !important;
  border-radius: 50% !important;
  background: rgba(245, 176, 65, 0.4) !important;
  filter: blur(24.3885px) !important;
  content: "" !important;
  opacity: 0.8 !important;
}

html body[data-view="game"] .game-card.game-card::after {
  position: absolute !important;
  z-index: 0 !important;
  top: 38.27px !important;
  left: 43.27px !important;
  width: 99.05px !important;
  height: 99.05px !important;
  border-radius: 50% !important;
  background: rgba(65, 143, 245, 0.4) !important;
  filter: blur(24.3885px) !important;
  content: "" !important;
  opacity: 0.8 !important;
}

html body[data-view="game"] .game-card.game-card .game-card-icon {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 156px !important;
  min-width: 156px !important;
  height: 156px !important;
  min-height: 156px !important;
  flex: 0 0 156px !important;
  margin: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 120px 120px !important;
}

html body[data-view="game"] .game-card.game-card > div,
html body[data-view="game"] .game-card.game-card:nth-child(3) > div {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 156px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 8px !important;
  text-align: center !important;
}

html body[data-view="game"] .game-card.game-card strong,
html body[data-view="game"] .game-card.game-card:nth-child(2) strong,
html body[data-view="game"] .uno-preview-card.game-card strong {
  display: block !important;
  width: 140px !important;
  height: 24px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #f5b041 !important;
  font: 600 18px/24px "Montserrat", sans-serif !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="game"] .game-card.game-card small {
  display: block !important;
  width: 140px !important;
  height: 20px !important;
  overflow: hidden !important;
  color: #d4d9de !important;
  font: 400 14px/20px "Open Sans", sans-serif !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-line-clamp: 1 !important;
}

/* Task cards */
html body[data-view="home"] .quest-list {
  gap: 16px !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task),
html body[data-view="home"] .quest-item:not(.figma-referral-task):nth-child(3),
html body[data-view="home"] .quest-item:not(.figma-referral-task):nth-child(4) {
  position: relative !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: 328px !important;
  height: 250px !important;
  min-height: 250px !important;
  grid-template-columns: 80px 206px !important;
  grid-template-rows: 28px 80px 20px 44px !important;
  align-items: start !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(8, 10, 11, 0.8) 0%, rgba(44, 48, 51, 0.8) 100%) !important;
  box-shadow: none !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-topline {
  display: flex !important;
  width: 304px !important;
  height: 28px !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-status {
  position: relative !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 89px !important;
  height: 28px !important;
  min-height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  color: #f8f9fa !important;
  background: linear-gradient(0deg, #253740 0%, #51585c 100%) !important;
  font: 600 12px/17px "Open Sans", sans-serif !important;
  white-space: nowrap !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-status.active {
  width: 104px !important;
  background: linear-gradient(180deg, #3498db 0%, #0073bf 100%) !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-status.done {
  width: 106px !important;
  color: #080a0b !important;
  background: linear-gradient(180deg, #32e332 0%, #00ba4f 100%) !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-status::before {
  display: block !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  background: url("/assets/icons/task-flag.svg") center / 20px 20px no-repeat !important;
  content: "" !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-status.active::before {
  background-image: url("/assets/icons/task-clock.svg") !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-status.done::before {
  background-image: url("/assets/icons/task-tick-circle.svg") !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-status::after {
  display: none !important;
  content: none !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-timer {
  display: flex !important;
  width: 148px !important;
  height: 24px !important;
  align-items: center !important;
  gap: 4px !important;
  color: #d4d9de !important;
  font: 400 14px/20px "Open Sans", sans-serif !important;
  white-space: nowrap !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-timer b {
  display: inline-flex !important;
  box-sizing: border-box !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 2px !important;
  color: #f8f9fa !important;
  background: #080a0b !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-timer b:first-of-type {
  width: 33px !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-timer b:last-of-type {
  width: 36px !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-art {
  position: relative !important;
  display: grid !important;
  width: 80px !important;
  height: 80px !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  place-items: center !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-art::before {
  position: absolute !important;
  z-index: 0 !important;
  top: 3.5px !important;
  left: 0.33px !important;
  width: 62.26px !important;
  height: 62.26px !important;
  border-radius: 50% !important;
  background: rgba(245, 176, 65, 0.4) !important;
  filter: blur(15.3302px) !important;
  content: "" !important;
  opacity: 0.8 !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-art::after {
  position: absolute !important;
  z-index: 0 !important;
  top: 16.24px !important;
  left: 18.73px !important;
  width: 62.26px !important;
  height: 62.26px !important;
  border-radius: 50% !important;
  background: rgba(65, 143, 245, 0.4) !important;
  filter: blur(15.3302px) !important;
  content: "" !important;
  opacity: 0.8 !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-art img {
  position: relative !important;
  z-index: 1 !important;
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-copy {
  display: flex !important;
  width: 206px !important;
  height: 78px !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-copy > strong {
  display: -webkit-box !important;
  width: 206px !important;
  height: 48px !important;
  overflow: hidden !important;
  color: #f8f9fa !important;
  font: 600 18px/24px "Montserrat", sans-serif !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-copy > span {
  display: flex !important;
  width: 206px !important;
  height: 24px !important;
  align-items: center !important;
  gap: 8px !important;
  color: #939ba2 !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
  white-space: nowrap !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-copy > span b {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #f8f9fa !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-copy > span b::before {
  display: block !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat !important;
  content: "" !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress {
  position: relative !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 304px !important;
  height: 20px !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background: #080a0b !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress > span {
  box-sizing: border-box !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0 11px, transparent 11px 28px),
    linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
}

html body[data-view="home"] .quest-item.progress-filled:not(.figma-referral-task) .quest-progress > span {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text {
  z-index: 2 !important;
  display: flex !important;
  width: 304px !important;
  height: 20px !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: auto !important;
  color: #f5b041 !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
  text-align: center !important;
}

/*html body[data-view="home"] .quest-item.progress-dark-text:not(.figma-referral-task) .quest-progress-text {*/
/*  color: #080a0b !important;*/
/*}*/

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-play {
  display: flex !important;
  box-sizing: border-box !important;
  width: 304px !important;
  height: 44px !important;
  min-height: 44px !important;
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #080a0b !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
  box-shadow: none !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
  opacity: 1 !important;
}

/* QUEST CARD FIX: split progress text colors */

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text {
  color: unset !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text .quest-progress-current,
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text .quest-progress-total {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
}

/* 0–49%: 0 жёлтый, /20 белый */
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="low"] .quest-progress-current {
  color: #f5b041 !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="low"] .quest-progress-total {
  color: #f8f9fa !important;
}

/* 50–97%: 10 чёрный, /20 белый */
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="mid"] .quest-progress-current {
  color: #080a0b !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="mid"] .quest-progress-total {
  color: #f8f9fa !important;
}

/* 98–100%: всё чёрное */
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="full"] .quest-progress-current,
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="full"] .quest-progress-total {
  color: #080a0b !important;
}

/* QUEST PROGRESS TEXT — final split color fix */

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text {
  color: unset !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text .quest-progress-current,
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text .quest-progress-total {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
}

/* 0–49% */
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="low"] .quest-progress-current {
  color: #f5b041 !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="low"] .quest-progress-total {
  color: #f8f9fa !important;
}

/* 50–97%, например 3/5 */
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="mid"] .quest-progress-current {
  color: #080a0b !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="mid"] .quest-progress-total {
  color: #f8f9fa !important;
}

/* 98–100% */
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="full"] .quest-progress-current,
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="full"] .quest-progress-total {
  color: #080a0b !important;
}

/* перебиваем старый progress-dark-text, который красил весь текст целиком */
html body[data-view="home"] .quest-item.progress-dark-text:not(.figma-referral-task) .quest-progress-text {
  color: unset !important;
}

/* QUEST PROGRESS TEXT — correct Figma color logic */

/* low: 0–49%, например 0/20 или 2/20 */
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="low"] .quest-progress-current {
  color: #f5b041 !important;
}

html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="low"] .quest-progress-total {
  color: #f8f9fa !important;
}

/* mid: 50–97%, например 3/5 — ВСЁ чёрное */
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="mid"] .quest-progress-current,
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="mid"] .quest-progress-total {
  color: #080a0b !important;
}

/* full: 98–100%, например 30/30 — ВСЁ чёрное */
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="full"] .quest-progress-current,
html body[data-view="home"] .quest-item:not(.figma-referral-task) .quest-progress-text[data-progress-state="full"] .quest-progress-total {
  color: #080a0b !important;
}

/* добиваем старые классы, если они ещё остались */
html body[data-view="home"] .quest-item.progress-mid-text:not(.figma-referral-task) .quest-progress-text .quest-progress-current,
html body[data-view="home"] .quest-item.progress-mid-text:not(.figma-referral-task) .quest-progress-text .quest-progress-total,
html body[data-view="home"] .quest-item.progress-dark-text:not(.figma-referral-task) .quest-progress-text .quest-progress-current,
html body[data-view="home"] .quest-item.progress-dark-text:not(.figma-referral-task) .quest-progress-text .quest-progress-total {
  color: #080a0b !important;
}