@everymatrix/casino-challenges-overlay 0.21.0 → 0.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/casino-challenges-overlay/casino-challenge-details-events_23.entry.js +1 -1
  2. package/dist/casino-challenges-overlay/casino-challenges-overlay-1f8c3734.js +1 -0
  3. package/dist/casino-challenges-overlay/casino-challenges-overlay.esm.js +1 -1
  4. package/dist/casino-challenges-overlay/index.esm.js +1 -1
  5. package/dist/cjs/casino-challenge-details-events_23.cjs.entry.js +44 -17
  6. package/dist/cjs/{casino-challenges-overlay-c99a7b11.js → casino-challenges-overlay-cdce9803.js} +24 -9
  7. package/dist/cjs/casino-challenges-overlay.cjs.js +1 -1
  8. package/dist/cjs/index.cjs.js +1 -1
  9. package/dist/cjs/loader.cjs.js +1 -1
  10. package/dist/collection/components/casino-challenges-overlay/casino-challenges-overlay.js +22 -13
  11. package/dist/collection/utils/types.js +7 -0
  12. package/dist/esm/casino-challenge-details-events_23.entry.js +45 -18
  13. package/dist/esm/{casino-challenges-overlay-d35935be.js → casino-challenges-overlay-1f8c3734.js} +24 -9
  14. package/dist/esm/casino-challenges-overlay.js +1 -1
  15. package/dist/esm/index.js +1 -1
  16. package/dist/esm/loader.js +1 -1
  17. package/dist/types/components/casino-challenges-overlay/casino-challenges-overlay.d.ts +4 -3
  18. package/dist/types/components.d.ts +2 -2
  19. package/dist/types/utils/types.d.ts +11 -1
  20. package/package.json +1 -1
  21. package/dist/casino-challenges-overlay/casino-challenges-overlay-d35935be.js +0 -1
package/dist/collection/components/casino-challenges-overlay/casino-challenges-overlay.js CHANGED
@@ -4,7 +4,7 @@ import bgIcon from "../../assets/bg-icon.svg";
4
4
  import bellIcon from "../../assets/bell.svg";
5
5
  import giftIcon from "../../assets/gift.svg";
6
6
  import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
7
- import { EChallengeProgressLevelStatus, EChallengeProgressStatus, EChallengeRewardType, EChallengesTabs } from "../../utils/types";
7
+ import { EChallengeProgressLevelStatus, EChallengeProgressStatus, EChallengeRewardType, EChallengesTabs, EFeatureFlags } from "../../utils/types";
8
8
  import "../../../../../casino-challenges-overlay-modal/dist/types/index";
9
9
  import "../../../../../casino-challenges-overlay-drawer/dist/types/index";
10
10
  export class CasinoChallengesOverlay {
@@ -45,7 +45,10 @@ export class CasinoChallengesOverlay {
45
45
  }, '*');
46
46
  }
47
47
  else {
48
- window.postMessage({ type: 'GoToChallengesPage', tab: EChallengesTabs.Promo }, '*');
48
+ window.postMessage({
49
+ type: 'GoToChallengesPage',
50
+ tab: this.enabledWidgetTabs.includes(EFeatureFlags.PromoTab) ? EChallengesTabs.Promo : EChallengesTabs.Active
51
+ }, '*');
49
52
  }
50
53
  };
51
54
  this.closeDrawer = () => {
@@ -59,6 +62,7 @@ export class CasinoChallengesOverlay {
59
62
  this.language = 'en';
60
63
  this.challenges = undefined;
61
64
  this.extendedIngameWidget = false;
65
+ this.enabledWidgetTabs = undefined;
62
66
  this.progress = 0;
63
67
  this.isNew = false;
64
68
  this.isGift = false;
@@ -375,11 +379,15 @@ export class CasinoChallengesOverlay {
375
379
  }
376
380
  /**
377
381
  * Called to initialize widget
378
- * @param config
382
+ * @param initValue
379
383
  */
380
- async init(config) {
381
- this.challenges = config.challenges;
382
- this.extendedIngameWidget = String(config === null || config === void 0 ? void 0 : config.extendedIngameWidget).toLowerCase() === 'true';
384
+ async init(initValue) {
385
+ var _a, _b, _c;
386
+ this.challenges = initValue.challenges;
387
+ this.extendedIngameWidget = (_b = (_a = initValue === null || initValue === void 0 ? void 0 : initValue.config) === null || _a === void 0 ? void 0 : _a.isExtendedIngameWidget) !== null && _b !== void 0 ? _b : false;
388
+ this.enabledWidgetTabs = Array.isArray((_c = initValue === null || initValue === void 0 ? void 0 : initValue.config) === null || _c === void 0 ? void 0 : _c.enabledWidgetTabs)
389
+ ? initValue.config.enabledWidgetTabs
390
+ : [];
383
391
  }
384
392
  render() {
385
393
  var _a, _b, _c;
@@ -389,15 +397,15 @@ export class CasinoChallengesOverlay {
389
397
  const activeProgressId = hasActiveProgress
390
398
  ? (_a = this.activeChallenge) === null || _a === void 0 ? void 0 : _a.Id
391
399
  : (_c = (_b = this.challenges) === null || _b === void 0 ? void 0 : _b.find(this.isActiveChallenge)) === null || _c === void 0 ? void 0 : _c.Id;
392
- return (h("div", { key: '9566bd839601825d3d05a823d398dcf15961d424', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '68df23a628fa738d148a3a464a57115fc45901a6', class: "container", onClick: this.handleClick }, h("div", { key: '35e691296c741f99b5cf4bcf31c48013f8b27e9c', class: "circle", style: {
400
+ return (h("div", { key: '6e9eec84248ee245d03ff919ec92a50d11158796', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '99b15759e5a9bbfca3fe533911908cb32969b699', class: "container", onClick: this.handleClick }, h("div", { key: '9705f034543b7b4f5f6e812f15d0c4b1c30f25c4', class: "circle", style: {
393
401
  '--progress': `${currProgress}%`
394
- } }, h("img", { key: '93c0c9dd7fd644f496e3a89a0a1d7dd5294a478d', class: "circle__img", src: bgIcon }), h("div", { key: 'b1996fcb626996714b296c802ddd826c41e6368c', class: "circle__content" }, hasActiveProgress ? (h("span", null, Math.floor(currProgress), "%")) : (h("span", null, translate('join', this.language)))), dot && (h("div", { key: 'db4672c7c5527673898172981ef8a7af3c99b921', class: "dot", style: {
402
+ } }, h("img", { key: 'a556b6e4d40c02087d3220b68c48b91fe99d35a1', class: "circle__img", src: bgIcon }), h("div", { key: '1642b6b5ad5285bd86304fdcb55035c409595e15', class: "circle__content" }, hasActiveProgress ? (h("span", null, Math.floor(currProgress), "%")) : (h("span", null, translate('join', this.language)))), dot && (h("div", { key: '5a545c4b561dc1b5c558ea63cd7d5d7555fa3114', class: "dot", style: {
395
403
  left: `${dot.x}px`,
396
404
  top: `${dot.y}px`
397
- } }))), hasActiveProgress && (h("div", { key: 'be5453301f15f01c862e7a36013ec20af771318b', class: {
405
+ } }))), hasActiveProgress && (h("div", { key: 'afec96fe7c99df08965b32aba42c49df84be4154', class: {
398
406
  badge: true,
399
407
  new: this.isNew
400
- } }, this.renderBadgeContent()))), h("casino-challenges-overlay-modal", { key: 'abbb2c3ec11bb07e733c88e366d62846115be99c', isOpen: this.showModal, handleClick: this.closeModal, reward: this.modalReward, addition: this.modalAddition, isFreeSpinsGranted: this.modalIsFreeSpinsGranted, bonusProgramGames: this.modalBonusProgramGames, errored: this.modalErrored, orderNumber: this.modalOrderNumber, translationUrl: this.translationUrl, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl }), this.extendedIngameWidget && (h("casino-challenges-overlay-drawer", { key: '45bf6f4c4324a1372826f6422ab5096f2be246e9', mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, language: this.language, isOpen: this.showDrawer, handleClose: this.closeDrawer, challenges: this.challenges, initialProgressId: activeProgressId }))));
408
+ } }, this.renderBadgeContent()))), h("casino-challenges-overlay-modal", { key: '928e43d118430c44c9bf41787b945fae4e9a7cfc', isOpen: this.showModal, handleClick: this.closeModal, reward: this.modalReward, addition: this.modalAddition, isFreeSpinsGranted: this.modalIsFreeSpinsGranted, bonusProgramGames: this.modalBonusProgramGames, errored: this.modalErrored, orderNumber: this.modalOrderNumber, translationUrl: this.translationUrl, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl }), this.extendedIngameWidget && (h("casino-challenges-overlay-drawer", { key: '8c87702b9965bb2ac668d62e2b4fd874fd9955b7', mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, language: this.language, isOpen: this.showDrawer, handleClose: this.closeDrawer, challenges: this.challenges, initialProgressId: activeProgressId, enabledWidgetTabs: this.enabledWidgetTabs }))));
401
409
  }
402
410
  static get is() { return "casino-challenges-overlay"; }
403
411
  static get encapsulation() { return "shadow"; }
@@ -543,6 +551,7 @@ export class CasinoChallengesOverlay {
543
551
  }
544
552
  static get states() {
545
553
  return {
554
+ "enabledWidgetTabs": {},
546
555
  "progress": {},
547
556
  "isNew": {},
548
557
  "isGift": {},
@@ -565,9 +574,9 @@ export class CasinoChallengesOverlay {
565
574
  return {
566
575
  "init": {
567
576
  "complexType": {
568
- "signature": "(config: ICasinoChallengesOverlayInitProps) => Promise<void>",
577
+ "signature": "(initValue: ICasinoChallengesOverlayInitProps) => Promise<void>",
569
578
  "parameters": [{
570
- "name": "config",
579
+ "name": "initValue",
571
580
  "type": "ICasinoChallengesOverlayInitProps",
572
581
  "docs": ""
573
582
  }],
@@ -588,7 +597,7 @@ export class CasinoChallengesOverlay {
588
597
  "text": "Called to initialize widget",
589
598
  "tags": [{
590
599
  "name": "param",
591
- "text": "config"
600
+ "text": "initValue"
592
601
  }]
593
602
  }
594
603
  }
package/dist/collection/utils/types.js CHANGED
@@ -1,3 +1,10 @@
1
+ export var EFeatureFlags;
2
+ (function (EFeatureFlags) {
3
+ EFeatureFlags["PromoTab"] = "promo";
4
+ EFeatureFlags["PendingTab"] = "pending";
5
+ EFeatureFlags["FinishedTab"] = "finished";
6
+ EFeatureFlags["CodeTab"] = "code";
7
+ })(EFeatureFlags || (EFeatureFlags = {}));
1
8
  export var EChallengeRewardType;
2
9
  (function (EChallengeRewardType) {
3
10
  EChallengeRewardType[EChallengeRewardType["FreeSpins"] = 0] = "FreeSpins";
package/dist/esm/casino-challenge-details-events_23.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-b4a452f5.js';
2
- import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './casino-challenges-overlay-d35935be.js';
3
- export { C as casino_challenges_overlay } from './casino-challenges-overlay-d35935be.js';
2
+ import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './casino-challenges-overlay-1f8c3734.js';
3
+ export { C as casino_challenges_overlay } from './casino-challenges-overlay-1f8c3734.js';
4
4
 
5
5
  const DEFAULT_LANGUAGE$3 = 'en';
6
6
  const TRANSLATIONS$3 = {
@@ -941,6 +941,13 @@ var EPostMessageResponseType;
941
941
  EPostMessageResponseType["UpdateChallengeProgress"] = "UpdateChallengeProgress";
942
942
  EPostMessageResponseType["NewChallengeProgressGranted"] = "NewChallengeProgressGranted";
943
943
  })(EPostMessageResponseType || (EPostMessageResponseType = {}));
944
+ var EFeatureFlags;
945
+ (function (EFeatureFlags) {
946
+ EFeatureFlags["PromoTab"] = "promo";
947
+ EFeatureFlags["PendingTab"] = "pending";
948
+ EFeatureFlags["FinishedTab"] = "finished";
949
+ EFeatureFlags["CodeTab"] = "code";
950
+ })(EFeatureFlags || (EFeatureFlags = {}));
944
951
 
945
952
  function _typeof(o) {
946
953
  "@babel/helpers - typeof";
@@ -3804,7 +3811,7 @@ const CasinoChallengesOverlayDrawer = class {
3804
3811
  return (h("div", { class: `notification ${((_a = this.notification) === null || _a === void 0 ? void 0 : _a.errored) ? 'errored' : ''}` }, h("div", { class: "row" }, h("img", { src: ((_b = this.notification) === null || _b === void 0 ? void 0 : _b.errored) ? errorSvg : checkSvg$1, class: "notification__icon", alt: "" }), h("p", { class: "notification__message" }, (_c = this.notification) === null || _c === void 0 ? void 0 : _c.message))));
3805
3812
  };
3806
3813
  this.renderHeader = (isMobile) => {
3807
- return (h("div", null, h("h1", { class: "challenges__drawer__title" }, h("span", null, translate$2('title', this.language)), h("button", { class: "challenges__drawer__close", onClick: this.onCloseClick }, h("img", { src: crossSvg$1, alt: "" }))), h("casino-challenges-overlay-tabs", { onTabClick: this.handleTabClick, activeTabIndex: this.activeTabIndex, activeTabHasNotification: false, pendingTabHasNotification: false, language: this.language, "is-mobile": isMobile })));
3814
+ return (h("div", null, h("h1", { class: "challenges__drawer__title" }, h("span", null, translate$2('title', this.language)), h("button", { class: "challenges__drawer__close", onClick: this.onCloseClick }, h("img", { src: crossSvg$1, alt: "" }))), this.enabledWidgetTabs.length > 0 && (h("casino-challenges-overlay-tabs", { onTabClick: this.handleTabClick, activeTabIndex: this.activeTabIndex, activeTabHasNotification: false, pendingTabHasNotification: false, language: this.language, "is-mobile": isMobile, enabledWidgetTabs: this.enabledWidgetTabs }))));
3808
3815
  };
3809
3816
  this.isEmptyState = () => {
3810
3817
  if (!this.loading && this.activeTabIndex !== EChallengesTabs.Code) {
@@ -3846,7 +3853,7 @@ const CasinoChallengesOverlayDrawer = class {
3846
3853
  return (h("swipe-up", { onSwippedUp: (e) => {
3847
3854
  this.swipped = e.detail.swipped;
3848
3855
  this.progress = e.detail.progress;
3849
- }, isMobile: isMobile, isOneSlider: isUnique }, h("div", { class: "content-header", slot: "header" }, this.renderHeader(isMobile), h("div", { class: { 'content-spacer': this.swipped || !isMobile, 'one-slide': isUnique && this.swipped } }, h("casino-challenges-overlay-slider", { mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, language: this.language, challenges: challenges, isMobile: isMobile, onActiveChallengeChange: this.onActiveChallengeChange, initialProgressId: this.activeProgressId, activeTabIndex: this.activeTabIndex }))), h("div", { class: "content-details", slot: "details" }, this.renderChallengeDetails(isMobile, isUnique))));
3856
+ }, isMobile: isMobile, isOneSlider: isUnique }, h("div", { class: "content-header", slot: "header" }, this.renderHeader(isMobile), h("div", { class: { 'content-spacer': this.swipped || !isMobile, 'one-slide': isUnique && this.swipped } }, h("casino-challenges-overlay-slider", { mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, language: this.language, challenges: challenges, isMobile: isMobile, onActiveChallengeChange: this.onActiveChallengeChange, initialProgressId: this.activeProgressId, activeTabIndex: this.activeTabIndex }))), h("div", { class: "content-details", slot: "details", style: { overflow: this.swipped ? 'auto' : 'hidden' } }, this.renderChallengeDetails(isMobile, isUnique))));
3850
3857
  };
3851
3858
  this.onCloseClick = () => {
3852
3859
  var _a, _b;
@@ -3866,6 +3873,7 @@ const CasinoChallengesOverlayDrawer = class {
3866
3873
  this.handleClose = () => { };
3867
3874
  this.challenges = [];
3868
3875
  this.initialProgressId = '';
3876
+ this.enabledWidgetTabs = undefined;
3869
3877
  this.activeChallenge = null;
3870
3878
  this.activeProgressId = '';
3871
3879
  this.activeTabIndex = EChallengesTabs.Active;
@@ -3908,7 +3916,8 @@ const CasinoChallengesOverlayDrawer = class {
3908
3916
  handleIsOpenChange(newValue) {
3909
3917
  var _a;
3910
3918
  if (newValue) {
3911
- if (this.initialProgressId && this.challenges.length) {
3919
+ if ((this.initialProgressId && this.challenges.length) ||
3920
+ !this.enabledWidgetTabs.includes(EFeatureFlags.PromoTab)) {
3912
3921
  this.activeTabIndex = EChallengesTabs.Active;
3913
3922
  this.activeProgressId = this.initialProgressId;
3914
3923
  const currentChallenge = ((_a = this.activeChallenges) === null || _a === void 0 ? void 0 : _a.find((x) => x.Id === this.activeProgressId)) || this.activeChallenges[0];
@@ -4392,7 +4401,7 @@ const alertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTki
4392
4401
 
4393
4402
  const crossSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuNSAxNy41TDE3LjUgMi41IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuMDA0NTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0yLjUgMi41TDE3LjUgMTcuNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjAwNDU5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
4394
4403
 
4395
- const casinoChallengesOverlayDrawerDetailsCss = ".Mobile.challenge-details.tabView, .Mobile.challenge-details.swipped.hasAction.tabView {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.Mobile.challenge-details.tabView::-webkit-scrollbar, .Mobile.challenge-details.swipped.hasAction.tabView::-webkit-scrollbar {\n display: none;\n}\n.Mobile.challenge-details {\n overflow-x: hidden;\n border-radius: 0;\n padding: 0;\n}\n.Mobile.challenge-details .content,\n.Mobile.challenge-details .sub-page-wrapper {\n padding: 0 12px;\n}\n.Mobile.challenge-details.tabView {\n border-radius: 20px 20px 0 0;\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n}\n.Mobile.challenge-details .breadcrumbs {\n margin: 16px 0 8px 0;\n height: 26px;\n}\n.Mobile.challenge-details .breadcrumbs .challenge-name,\n.Mobile.challenge-details .breadcrumbs .tab-name,\n.Mobile.challenge-details .breadcrumbs .total-number {\n font-size: var(--emw--font-size-small, 14px);\n}\n.Mobile.challenge-details .breadcrumbs .action {\n right: 16px;\n width: 26px;\n height: 26px;\n}\n.Mobile.challenge-details .breadcrumbs .action img {\n width: 14px;\n}\n.Mobile.challenge-details .progress-block h3 {\n font-size: var(--emw--font-size-small, 14px);\n}\n.Mobile.challenge-details .action-description,\n.Mobile.challenge-details .terms-title,\n.Mobile.challenge-details .terms-description {\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-semibold, 600);\n}\n.Mobile.challenge-details.swipped .head .row .challenge-title {\n margin: 12px 0 24px 0;\n}\n.Mobile.challenge-details.swipped .head .action-description {\n display: none;\n}\n.Mobile.challenge-details .footer .action-description {\n margin: 0;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-height: 28px;\n min-height: 14px;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.Mobile.challenge-details .footer {\n border-top: 2px solid var(--emw--gradient-blue, #003e5c);\n background: var(--emw--backdrop-background, rgba(9, 9, 9, 0.8));\n backdrop-filter: blur(16px);\n padding: 12px 16px;\n border-radius: 0;\n}\n.Mobile.challenge-details .banner {\n position: relative;\n justify-self: center;\n}\n.Mobile.challenge-details .banner.grayed {\n opacity: 0.5;\n}\n.Mobile.challenge-details .banner__badge {\n height: 27px;\n box-sizing: border-box;\n align-content: center;\n color: var(--emw--badge-font-color, #f4eff4);\n font-size: var(--emw--font-size-xs-small, 13px);\n font-weight: var(--emw--font-weight-normal, 400);\n position: absolute;\n top: 10px;\n left: 12px;\n padding: 3px 4px;\n border: 1px solid var(--emw--dot-button-active-bg, rgba(255, 255, 255, 0.2));\n background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));\n backdrop-filter: blur(4.5px);\n border-radius: 15px;\n}\n.Mobile.challenge-details .banner__badge .status {\n height: 100%;\n display: inline-flex;\n align-items: center;\n border-radius: 15px;\n border: 1px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));\n background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));\n padding: 0 8px 0 6px;\n}\n.Mobile.challenge-details .banner__badge .status::before {\n content: \"\";\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));\n margin-right: 5px;\n flex-shrink: 0;\n}\n.Mobile.challenge-details .banner__badge .timer {\n font-weight: var(--emw--font-weight-bold, 700);\n padding-right: 4px;\n}\n.Mobile.challenge-details .banner__badge.unavailable .status::before, .Mobile.challenge-details .banner__badge.expired .status::before {\n background: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));\n}\n.Mobile.challenge-details .banner__badge.completed .status::before {\n background: var(--emw--background-green-color, #00b541);\n}\n.Mobile.challenge-details .banner__badge.forfeited .status::before {\n background: var(--emw--status-badge-red-bg, #d63d1e);\n}\n.Mobile.challenge-details .banner__badge.paused .status::before {\n background: var(--emw--status-badge-yellow-bg, #ffb801);\n}\n.Mobile.challenge-details .banner__badge:has(.timer) {\n padding-left: 6px;\n}\n.Mobile.challenge-details .banner__image-wrapper {\n position: relative;\n width: 343px;\n height: 180px;\n border-radius: 16px;\n overflow: hidden;\n}\n.Mobile.challenge-details .banner__image-wrapper img {\n width: 100%;\n height: 100%;\n object-fit: fill;\n}\n.Mobile.challenge-details .banner * {\n pointer-events: none;\n}\n.Mobile.challenge-details .challenge-title {\n margin: 12px 0 8px 0;\n font-size: var(--emw--font-size-large, 18px);\n line-height: 22px;\n}\n.Mobile.challenge-details .challenge-rules {\n margin-bottom: 0;\n}\n.Mobile.challenge-details .challenge-rules .challenge-rule {\n font-size: var(--emw--font-size-x-small, 12px);\n}\n.Mobile.challenge-details .mobile-banner {\n display: flex;\n width: 343px;\n height: 180px;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n flex-shrink: 0;\n border-radius: 20px;\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n margin-bottom: 16px;\n}\n.Mobile.challenge-details .challenge-terms {\n margin-top: 0;\n}\n.Mobile.challenge-details .label {\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 12px;\n margin: 0;\n}\n.Mobile.challenge-details .description {\n font-size: var(--emw--font-size-xs-small, 13px);\n line-height: 12px;\n}\n.Mobile.challenge-details .date-description,\n.Mobile.challenge-details .total-level-description {\n line-height: 20px;\n}\n.Mobile.challenge-details .challenge-levels,\n.Mobile.challenge-details .challenge-games,\n.Mobile.challenge-details .challenge-rules {\n padding: 14px;\n}\n.Mobile.challenge-details .chevron-button {\n width: 26px;\n height: 26px;\n}\n.Mobile.challenge-details .chevron-button img {\n width: 14px;\n height: 14px;\n}\n.Mobile.challenge-details .challenge-level {\n padding: 10px;\n}\n.Mobile.challenge-details .challenge-block-header .total-levels h3,\n.Mobile.challenge-details .challenge-block-header .total-levels span,\n.Mobile.challenge-details .challenge-block-header .total-games h3,\n.Mobile.challenge-details .challenge-block-header .total-games span {\n font-size: var(--emw--font-size-small, 14px);\n}\n.Mobile.challenge-details .challenge-block-header p {\n font-size: var(--emw--font-size-x-small, 12px);\n}\n.Mobile.challenge-details .challenge-level {\n box-sizing: border-box;\n}\n.Mobile.challenge-details .challenge-level .level__title {\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 14px;\n}\n.Mobile.challenge-details .challenge-level .level__status {\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 14px;\n}\n.Mobile.challenge-details .challenge-level .level__bonus {\n margin-bottom: 3px;\n}\n.Mobile.challenge-details .challenge-level .label {\n font-size: var(--emw--font-size-x-small, 12px);\n margin-bottom: 8px;\n}\n.Mobile.challenge-details .challenge-level .description {\n font-size: var(--emw--font-size-2x-small, 11px);\n line-height: 12px;\n max-width: 110px;\n}\n.Mobile.challenge-details .challenge-game {\n min-width: 85px;\n height: 60px;\n}\n.Mobile.challenge-details .action-button {\n font-size: var(--emw--font-size-small, 14px);\n height: 34px;\n}\n.Mobile.challenge-details .notification {\n padding: 14px 12px;\n}\n.Mobile.challenge-details .notification__message, .Mobile.challenge-details .notification__title {\n font-size: 14px;\n}\n.Mobile.challenge-details .notification__icon {\n margin-top: 2px;\n width: 14px;\n height: 14px;\n}\n\n.challenge-details {\n font-family: var(--emw--font-family-primary, \"Teachers\"), sans-serif;\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n overflow: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n box-sizing: border-box;\n border-radius: 0 0 30px 30px;\n padding: 0;\n height: 100%;\n}\n.challenge-details .sub-page-wrapper {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 0 24px;\n display: flex;\n flex-direction: column;\n}\n.challenge-details .sub-page-wrapper .sub-page {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding-bottom: 24px;\n}\n.challenge-details .content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 0 24px 24px;\n}\n.challenge-details .breadcrumbs {\n display: flex;\n align-items: center;\n margin: 4px 0 16px 0;\n height: 36px;\n justify-content: space-between;\n flex-shrink: 0;\n}\n.challenge-details .breadcrumbs div {\n display: flex;\n align-items: center;\n}\n.challenge-details .breadcrumbs .challenge-name {\n color: var(--emw--color-gray-250, rgba(255, 255, 255, 0.15));\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-semibold, 600);\n line-height: normal;\n margin: 0 3px 0 10px;\n max-width: 150px;\n}\n.challenge-details .breadcrumbs .action {\n outline: none;\n background: transparent;\n border-radius: 20px;\n border: 1.5px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));\n background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));\n backdrop-filter: blur(6.882352829px);\n cursor: pointer;\n width: 36px;\n height: 36px;\n min-width: 36px;\n min-height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.challenge-details .breadcrumbs .action img {\n width: 20px;\n height: 20px;\n}\n.challenge-details .breadcrumbs .tab-name,\n.challenge-details .breadcrumbs .divider {\n color: var(--emw--color-gray-450, #edeff2);\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-semibold, 600);\n line-height: normal;\n margin-left: 3px;\n}\n.challenge-details .breadcrumbs .total-number {\n color: var(--emw--color-gray-500, rgba(255, 255, 255, 0.5));\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n margin-left: 3px;\n}\n.challenge-details .challenge-title {\n color: #fff;\n font-size: var(--emw--font-size-large-plus, 26px);\n font-style: normal;\n font-weight: var(--emw--font-weight-semibold, 600);\n line-height: normal;\n margin: 16px 0 8px 0;\n}\n.challenge-details .challenge-block {\n border-radius: 20px;\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--block-background, rgba(9, 9, 9, 0.5));\n backdrop-filter: blur(11.47px);\n display: flex;\n padding: 20px 12px;\n justify-content: center;\n align-items: center;\n gap: 16px;\n margin: 16px 0;\n align-self: stretch;\n}\n.challenge-details .progress-block h3 {\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: normal;\n margin: 0 0 10px 0;\n}\n.challenge-details .chevron-button {\n box-sizing: border-box;\n display: flex;\n width: 36px;\n height: 36px;\n padding: 4px 5px;\n justify-content: center;\n align-items: center;\n gap: 6.923px;\n aspect-ratio: 1/1;\n border-radius: 27.692px;\n border: 2px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--block-background, rgba(9, 9, 9, 0.5));\n backdrop-filter: blur(9.52px);\n margin-left: 4px;\n padding: 4px 5px;\n cursor: pointer;\n}\n.challenge-details .challenge-block-header {\n display: flex;\n padding-left: 4px;\n align-items: center;\n gap: 4px;\n align-self: stretch;\n justify-content: space-between;\n}\n.challenge-details .challenge-block-header .total-levels,\n.challenge-details .challenge-block-header .total-games {\n display: flex;\n align-items: center;\n}\n.challenge-details .challenge-block-header .total-levels span,\n.challenge-details .challenge-block-header .total-games span {\n color: var(--emw--dot-button-active-bg, rgba(255, 255, 255, 0.2));\n display: inline-block;\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n margin-left: 4px;\n}\n.challenge-details .challenge-block-header h3 {\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: normal;\n margin: 0;\n}\n.challenge-details .challenge-block-header p {\n color: var(--emw--color-empty-state, rgba(255, 255, 255, 0.7));\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n margin: 0;\n}\n.challenge-details .column {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n}\n.challenge-details .row {\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n background: transparent;\n border: none;\n}\n.challenge-details .button {\n cursor: pointer;\n}\n.challenge-details .general-info-col {\n width: 33%;\n}\n.challenge-details .general-info-icon {\n margin-left: 4px;\n}\n.challenge-details .label {\n text-transform: capitalize;\n color: var(--emw--color-gray-400, #c9cacb);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n margin: 0 0 3px 0;\n line-height: 17px;\n}\n.challenge-details .description {\n display: flex;\n align-items: center;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-semibold, 600);\n line-height: normal;\n margin: 0;\n line-height: 17px;\n}\n.challenge-details .description span {\n display: inline-block;\n}\n.challenge-details .challenge-terms {\n margin: 16px 12px 0 12px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.challenge-details .terms-title {\n display: flex;\n align-items: center;\n color: var(--emw--background-green-color, #00b541);\n line-height: 17px;\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-bold, 700);\n border-bottom: 1px solid var(--emw--background-green-color, #00b541);\n cursor: pointer;\n text-underline-offset: 3px;\n margin: 0;\n}\n.challenge-details .terms-title img {\n margin-left: 4px;\n}\n.challenge-details .terms-description {\n color: var(--emw--color-empty-state, rgba(255, 255, 255, 0.7));\n text-align: center;\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n margin: 6px 0;\n line-height: 14px;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-height: 28px;\n min-height: 14px;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.challenge-details .challenge-general-info {\n padding: 20px 12px;\n box-sizing: border-box;\n}\n.challenge-details .challenge-levels,\n.challenge-details .challenge-games,\n.challenge-details .challenge-rules {\n display: flex;\n padding: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n align-self: stretch;\n}\n.challenge-details .levels-row {\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n width: 100%;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n justify-content: flex-start;\n}\n.challenge-details .challenge-games {\n margin: 0;\n}\n.challenge-details .challenge-level {\n display: flex;\n padding: 12px;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n border-radius: 14px;\n background: var(--emw--level-color-background, rgba(114, 118, 114, 0.2));\n min-width: 153px;\n}\n.challenge-details .challenge-level .label {\n margin-bottom: 8px;\n}\n.challenge-details .challenge-level .description {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: 14px;\n max-width: 130px;\n}\n.challenge-details .challenge-level img {\n margin-right: 6px;\n}\n.challenge-details .challenge-games .games-row {\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n -ms-overflow-style: none;\n width: 100%;\n display: flex;\n gap: 10px;\n align-items: flex-start;\n justify-content: flex-start;\n}\n.challenge-details .challenge-game {\n display: flex;\n min-width: 120px;\n height: 84px;\n justify-content: flex-end;\n align-items: flex-start;\n gap: 7.978px;\n border-radius: 10.53px;\n cursor: pointer;\n}\n.challenge-details .challenge-game img {\n width: 100%;\n height: auto;\n}\n.challenge-details .challenge-rules {\n padding: 14px;\n}\n.challenge-details .challenge-rule,\n.challenge-details .challenge-event {\n color: var(--emw--color-empty-state, rgba(255, 255, 255, 0.7));\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n}\n.challenge-details .ellipsed {\n display: inline-block;\n max-width: 100%;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.challenge-details .footer {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n padding: 20px 24px 24px 24px;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n border-top: 1px solid var(--emw--gradient-blue, #003e5c);\n background: var(--emw--backdrop-background, rgba(9, 9, 9, 0.8));\n backdrop-filter: blur(16.05px);\n border-radius: 0 0 30px 30px;\n flex-shrink: 0;\n}\n.challenge-details .action-description {\n font-size: var(--emw--font-size-small, 14px);\n line-height: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-semibold, 600);\n color: var(--emw--color-white, #fff);\n}\n.challenge-details .promo-action-description {\n background: var(--emw--action-description-background, linear-gradient(310deg, #d6ffdc 12.98%, #74b580 92.6%, #509142 131.58%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.challenge-details .action-button {\n border-radius: 99px;\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--color-green, #00fa5a);\n display: flex;\n height: 40px;\n padding: 14px 20px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n color: var(--emw--color-black-100, #090909);\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: normal;\n}\n.challenge-details .action-button:hover {\n border-color: var(--emw--color-gray-300, #083b17);\n cursor: pointer;\n}\n.challenge-details .action-button.filled {\n color: var(--emw--color-green, #00fa5a);\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--button-background-primary-color, linear-gradient(35deg, rgba(255, 255, 255, 0) 33.61%, rgba(255, 255, 255, 0.15) 89.19%)), var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background-blend-mode: overlay;\n}\n.challenge-details .action-button.filled:hover {\n border-color: transparent;\n box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);\n}\n.challenge-details .action-button.grayed {\n color: var(--emw--color-gray-50, #e2e2e2);\n background: var(--emw--color-black, #000000);\n border-color: var(--emw--button-disabled-border-color, rgba(255, 255, 255, 0.5));\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.challenge-details .action-button.grayed:hover {\n color: var(--emw--color-white, #fff);\n}\n.challenge-details .action-button:disabled, .challenge-details .action-button:disabled:hover {\n color: var(--emw--color-gray-50, #e2e2e2);\n cursor: not-allowed;\n border: 2px solid var(--emw--button-disabled-border-color, rgba(255, 255, 255, 0.5));\n opacity: 0.7;\n}\n.challenge-details .expand-button {\n outline: none;\n border: none;\n width: 39px;\n height: 16px;\n background: transparent;\n margin: 0 auto;\n cursor: pointer;\n}\n.challenge-details .levels-row .level {\n display: flex;\n padding: 12px;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n border-radius: 14px;\n background: var(--emw--level-color-background, rgba(114, 118, 114, 0.2));\n border: none;\n}\n.challenge-details .levels-row .level.active, .challenge-details .levels-row .level.completed {\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--level-completed-gradient, linear-gradient(90deg, rgba(30, 101, 79, 0.2) 0%, rgba(28, 141, 86, 0.2) 100%));\n}\n.challenge-details .levels-row .level.active .level__title span, .challenge-details .levels-row .level.completed .level__title span {\n color: var(--emw--color-white, #fff);\n}\n.challenge-details .levels-row .level.suspended {\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--color-level-suspended rgba(9, 9, 9, 0.4));\n}\n.challenge-details .levels-row .level.suspended .level__status .suspended {\n color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));\n font-weight: 400;\n}\n.challenge-details .levels-row .level.suspended .level__title span {\n color: var(--emw--color-white, #fff);\n}\n.challenge-details .levels-row .level.forfeited {\n background: var(--emw--color-level-color-background, rgba(114, 118, 114, 0.2));\n border: none;\n color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));\n}\n.challenge-details .levels-row .level.forfeited .level__title span {\n color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));\n}\n.challenge-details .levels-row .level.forfeited .level__target,\n.challenge-details .levels-row .level.forfeited .level__value {\n color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));\n}\n.challenge-details .levels-row .level__status {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-semibold, 600);\n}\n.challenge-details .levels-row .level__title {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-semibold, 600);\n line-height: 17px;\n margin-bottom: 8px;\n}\n.challenge-details .levels-row .level__title span {\n color: var(--emw--color-white-150, rgba(255, 255, 255, 0.7));\n}\n.challenge-details .levels-row .level__title .completed {\n background: var(--emw--action-description-background, linear-gradient(310deg, #d6ffdc 12.98%, #74b580 92.6%, #509142 131.58%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.challenge-details .levels-row .level__title .completed, .challenge-details .levels-row .level__title .in-progress {\n color: var(--emw--border-success-color, #00b74f);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n text-align: right;\n line-height: 17px;\n}\n.challenge-details .levels-row .level__progress {\n width: 100%;\n margin-bottom: 10px;\n}\n.challenge-details .levels-row .level__icon {\n display: flex;\n opacity: 1;\n}\n.challenge-details .levels-row .level__icon img {\n display: block;\n width: 12px;\n height: 12px;\n margin: 4px 6px 0 0;\n}\n.challenge-details .levels-row .level__icon img.grayed {\n opacity: 0.5;\n}\n.challenge-details .levels-row .level__bonus, .challenge-details .levels-row .level__target {\n display: flex;\n align-items: flex-start;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.challenge-details .levels-row .level__bonus {\n margin-bottom: 6px;\n}\n.challenge-details .levels-row .level__value {\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n width: 100%;\n}\n.challenge-details .notification {\n display: flex;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background: rgba(188, 252, 177, 0.1);\n display: flex;\n padding: 20px 16px;\n align-items: flex-start;\n gap: 10px;\n margin: 16px 0;\n}\n.challenge-details .notification__icon {\n width: 18px;\n height: 18px;\n}\n.challenge-details .notification__message, .challenge-details .notification__title {\n color: var(--emw--color-white-150, rgba(255, 255, 255, 0.7));\n font-size: var(--emw--font-size-medium, 16px);\n font-weight: var(--emw--font-weight-normal, 400);\n}\n.challenge-details .notification__title {\n background: var(--emw--color-notification-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.challenge-details .notification__column {\n display: flex;\n flex-direction: column;\n}\n\n@container challenges-drawer (width <=500px) {\n .challenge-details .content,\n .challenge-details .sub-page-wrapper {\n padding: 0 20px;\n }\n}\n@container challenges-drawer (width <=475px) {\n .challenge-details .challenge-title {\n margin: 0 0 4px;\n }\n .challenge-details .challenge-block {\n margin: 12px 0;\n }\n .challenge-details .challenge-levels,\n .challenge-details .challenge-games,\n .challenge-details .challenge-rules {\n padding: 12px;\n }\n}\n@container challenges-drawer (width <=400px) {\n .challenge-details .content,\n .challenge-details .sub-page-wrapper {\n padding: 0 15px;\n }\n}\n@container challenges-drawer (width <= 480px) {\n .footer .action-description {\n font-size: var(--emw--font-size-xs-small, 13px);\n }\n .challenge-details .footer {\n padding: 20px 15px 24px;\n }\n}\n@container challenges-drawer (width <= 440px) {\n .challenge-details .footer {\n padding: 15px;\n }\n}\n@container challenges-game-page (height <= 850px) {}";
4404
+ const casinoChallengesOverlayDrawerDetailsCss = ".Mobile.challenge-details.tabView, .Mobile.challenge-details.swipped.hasAction.tabView {\n -ms-overflow-style: none !important;\n scrollbar-width: none !important;\n}\n.Mobile.challenge-details.tabView::-webkit-scrollbar, .Mobile.challenge-details.swipped.hasAction.tabView::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n}\n.Mobile.challenge-details.tabView *, .Mobile.challenge-details.swipped.hasAction.tabView * {\n scrollbar-width: none !important;\n -ms-overflow-style: none !important;\n}\n.Mobile.challenge-details.tabView *::-webkit-scrollbar, .Mobile.challenge-details.swipped.hasAction.tabView *::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n}\n.Mobile.challenge-details {\n overflow-x: hidden;\n border-radius: 0;\n padding: 0;\n scrollbar-width: none !important;\n -ms-overflow-style: none !important;\n}\n.Mobile.challenge-details::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n}\n.Mobile.challenge-details .content,\n.Mobile.challenge-details .sub-page-wrapper {\n padding: 0 12px;\n}\n.Mobile.challenge-details.tabView {\n border-radius: 20px 20px 0 0;\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n}\n.Mobile.challenge-details .breadcrumbs {\n margin: 16px 0 8px 0;\n height: 26px;\n}\n.Mobile.challenge-details .breadcrumbs .challenge-name,\n.Mobile.challenge-details .breadcrumbs .tab-name,\n.Mobile.challenge-details .breadcrumbs .total-number {\n font-size: var(--emw--font-size-small, 14px);\n}\n.Mobile.challenge-details .breadcrumbs .action {\n right: 16px;\n width: 26px;\n height: 26px;\n}\n.Mobile.challenge-details .breadcrumbs .action img {\n width: 14px;\n}\n.Mobile.challenge-details .progress-block h3 {\n font-size: var(--emw--font-size-small, 14px);\n}\n.Mobile.challenge-details .action-description,\n.Mobile.challenge-details .terms-title,\n.Mobile.challenge-details .terms-description {\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-semibold, 600);\n}\n.Mobile.challenge-details.swipped .head .row .challenge-title {\n margin: 12px 0 24px 0;\n}\n.Mobile.challenge-details.swipped .head .action-description {\n display: none;\n}\n.Mobile.challenge-details .footer .action-description {\n margin: 0;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-height: 28px;\n min-height: 14px;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.Mobile.challenge-details .footer {\n border-top: 2px solid var(--emw--gradient-blue, #003e5c);\n background: var(--emw--backdrop-background, rgba(9, 9, 9, 0.8));\n backdrop-filter: blur(16px);\n padding: 12px 16px;\n border-radius: 0;\n}\n.Mobile.challenge-details .banner {\n position: relative;\n justify-self: center;\n}\n.Mobile.challenge-details .banner.grayed {\n opacity: 0.5;\n}\n.Mobile.challenge-details .banner__badge {\n height: 27px;\n box-sizing: border-box;\n align-content: center;\n color: var(--emw--badge-font-color, #f4eff4);\n font-size: var(--emw--font-size-xs-small, 13px);\n font-weight: var(--emw--font-weight-normal, 400);\n position: absolute;\n top: 10px;\n left: 12px;\n padding: 3px 4px;\n border: 1px solid var(--emw--dot-button-active-bg, rgba(255, 255, 255, 0.2));\n background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));\n backdrop-filter: blur(4.5px);\n border-radius: 15px;\n}\n.Mobile.challenge-details .banner__badge .status {\n height: 100%;\n display: inline-flex;\n align-items: center;\n border-radius: 15px;\n border: 1px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));\n background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));\n padding: 0 8px 0 6px;\n}\n.Mobile.challenge-details .banner__badge .status::before {\n content: \"\";\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));\n margin-right: 5px;\n flex-shrink: 0;\n}\n.Mobile.challenge-details .banner__badge .timer {\n font-weight: var(--emw--font-weight-bold, 700);\n padding-right: 4px;\n}\n.Mobile.challenge-details .banner__badge.unavailable .status::before, .Mobile.challenge-details .banner__badge.expired .status::before {\n background: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));\n}\n.Mobile.challenge-details .banner__badge.completed .status::before {\n background: var(--emw--background-green-color, #00b541);\n}\n.Mobile.challenge-details .banner__badge.forfeited .status::before {\n background: var(--emw--status-badge-red-bg, #d63d1e);\n}\n.Mobile.challenge-details .banner__badge.paused .status::before {\n background: var(--emw--status-badge-yellow-bg, #ffb801);\n}\n.Mobile.challenge-details .banner__badge:has(.timer) {\n padding-left: 6px;\n}\n.Mobile.challenge-details .banner__image-wrapper {\n position: relative;\n width: 343px;\n height: 180px;\n border-radius: 16px;\n overflow: hidden;\n}\n.Mobile.challenge-details .banner__image-wrapper img {\n width: 100%;\n height: 100%;\n object-fit: fill;\n}\n.Mobile.challenge-details .banner * {\n pointer-events: none;\n}\n.Mobile.challenge-details .challenge-title {\n margin: 12px 0 8px 0;\n font-size: var(--emw--font-size-large, 18px);\n line-height: 22px;\n}\n.Mobile.challenge-details .challenge-rules {\n margin-bottom: 0;\n}\n.Mobile.challenge-details .challenge-rules .challenge-rule {\n font-size: var(--emw--font-size-x-small, 12px);\n}\n.Mobile.challenge-details .mobile-banner {\n display: flex;\n width: 343px;\n height: 180px;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n flex-shrink: 0;\n border-radius: 20px;\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n margin-bottom: 16px;\n}\n.Mobile.challenge-details .challenge-terms {\n margin-top: 0;\n}\n.Mobile.challenge-details .label {\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 12px;\n margin: 0;\n}\n.Mobile.challenge-details .description {\n font-size: var(--emw--font-size-xs-small, 13px);\n line-height: 12px;\n}\n.Mobile.challenge-details .date-description,\n.Mobile.challenge-details .total-level-description {\n line-height: 20px;\n}\n.Mobile.challenge-details .challenge-levels,\n.Mobile.challenge-details .challenge-games,\n.Mobile.challenge-details .challenge-rules {\n padding: 14px;\n}\n.Mobile.challenge-details .chevron-button {\n width: 26px;\n height: 26px;\n}\n.Mobile.challenge-details .chevron-button img {\n width: 14px;\n height: 14px;\n}\n.Mobile.challenge-details .challenge-level {\n padding: 10px;\n}\n.Mobile.challenge-details .challenge-block-header .total-levels h3,\n.Mobile.challenge-details .challenge-block-header .total-levels span,\n.Mobile.challenge-details .challenge-block-header .total-games h3,\n.Mobile.challenge-details .challenge-block-header .total-games span {\n font-size: var(--emw--font-size-small, 14px);\n}\n.Mobile.challenge-details .challenge-block-header p {\n font-size: var(--emw--font-size-x-small, 12px);\n}\n.Mobile.challenge-details .challenge-level {\n box-sizing: border-box;\n}\n.Mobile.challenge-details .challenge-level .level__title {\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 14px;\n}\n.Mobile.challenge-details .challenge-level .level__status {\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 14px;\n}\n.Mobile.challenge-details .challenge-level .level__bonus {\n margin-bottom: 3px;\n}\n.Mobile.challenge-details .challenge-level .label {\n font-size: var(--emw--font-size-x-small, 12px);\n margin-bottom: 8px;\n}\n.Mobile.challenge-details .challenge-level .description {\n font-size: var(--emw--font-size-2x-small, 11px);\n line-height: 12px;\n max-width: 110px;\n}\n.Mobile.challenge-details .challenge-game {\n min-width: 85px;\n height: 60px;\n}\n.Mobile.challenge-details .action-button {\n font-size: var(--emw--font-size-small, 14px);\n height: 34px;\n}\n.Mobile.challenge-details .notification {\n padding: 14px 12px;\n}\n.Mobile.challenge-details .notification__message, .Mobile.challenge-details .notification__title {\n font-size: 14px;\n}\n.Mobile.challenge-details .notification__icon {\n margin-top: 2px;\n width: 14px;\n height: 14px;\n}\n\n.challenge-details {\n font-family: var(--emw--font-family-primary, \"Teachers\"), sans-serif;\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n overflow: auto;\n scrollbar-width: none !important;\n -ms-overflow-style: none !important;\n box-sizing: border-box;\n border-radius: 0 0 30px 30px;\n padding: 0;\n height: 100%;\n}\n.challenge-details::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n}\n.challenge-details .sub-page-wrapper {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n scrollbar-width: none !important;\n -ms-overflow-style: none !important;\n padding: 0 24px;\n display: flex;\n flex-direction: column;\n}\n.challenge-details .sub-page-wrapper::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n}\n.challenge-details .sub-page-wrapper .sub-page {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n scrollbar-width: none !important;\n -ms-overflow-style: none !important;\n padding-bottom: 24px;\n overflow-x: hidden;\n}\n.challenge-details .sub-page-wrapper .sub-page::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n}\n.challenge-details .content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n scrollbar-width: none !important;\n -ms-overflow-style: none !important;\n padding: 0 24px 24px;\n}\n.challenge-details .content::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n}\n.challenge-details .breadcrumbs {\n display: flex;\n align-items: center;\n margin: 4px 0 16px 0;\n height: 36px;\n justify-content: space-between;\n flex-shrink: 0;\n}\n.challenge-details .breadcrumbs div {\n display: flex;\n align-items: center;\n}\n.challenge-details .breadcrumbs .challenge-name {\n color: var(--emw--color-gray-250, rgba(255, 255, 255, 0.15));\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-semibold, 600);\n line-height: normal;\n margin: 0 3px 0 10px;\n max-width: 150px;\n}\n.challenge-details .breadcrumbs .action {\n outline: none;\n background: transparent;\n border-radius: 20px;\n border: 1.5px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));\n background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));\n backdrop-filter: blur(6.882352829px);\n cursor: pointer;\n width: 36px;\n height: 36px;\n min-width: 36px;\n min-height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.challenge-details .breadcrumbs .action img {\n width: 20px;\n height: 20px;\n}\n.challenge-details .breadcrumbs .tab-name,\n.challenge-details .breadcrumbs .divider {\n color: var(--emw--color-gray-450, #edeff2);\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-semibold, 600);\n line-height: normal;\n margin-left: 3px;\n}\n.challenge-details .breadcrumbs .total-number {\n color: var(--emw--color-gray-500, rgba(255, 255, 255, 0.5));\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n margin-left: 3px;\n}\n.challenge-details .challenge-title {\n color: #fff;\n font-size: var(--emw--font-size-large-plus, 26px);\n font-style: normal;\n font-weight: var(--emw--font-weight-semibold, 600);\n line-height: normal;\n margin: 16px 0 8px 0;\n}\n.challenge-details .challenge-block {\n border-radius: 20px;\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--block-background, rgba(9, 9, 9, 0.5));\n backdrop-filter: blur(11.47px);\n display: flex;\n padding: 20px 12px;\n justify-content: center;\n align-items: center;\n gap: 16px;\n margin: 16px 0;\n align-self: stretch;\n}\n.challenge-details .progress-block h3 {\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: normal;\n margin: 0 0 10px 0;\n}\n.challenge-details .chevron-button {\n box-sizing: border-box;\n display: flex;\n width: 36px;\n height: 36px;\n padding: 4px 5px;\n justify-content: center;\n align-items: center;\n gap: 6.923px;\n aspect-ratio: 1/1;\n border-radius: 27.692px;\n border: 2px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--block-background, rgba(9, 9, 9, 0.5));\n backdrop-filter: blur(9.52px);\n margin-left: 4px;\n padding: 4px 5px;\n cursor: pointer;\n}\n.challenge-details .challenge-block-header {\n display: flex;\n padding-left: 4px;\n align-items: center;\n gap: 4px;\n align-self: stretch;\n justify-content: space-between;\n}\n.challenge-details .challenge-block-header .total-levels,\n.challenge-details .challenge-block-header .total-games {\n display: flex;\n align-items: center;\n}\n.challenge-details .challenge-block-header .total-levels span,\n.challenge-details .challenge-block-header .total-games span {\n color: var(--emw--dot-button-active-bg, rgba(255, 255, 255, 0.2));\n display: inline-block;\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n margin-left: 4px;\n}\n.challenge-details .challenge-block-header h3 {\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: normal;\n margin: 0;\n}\n.challenge-details .challenge-block-header p {\n color: var(--emw--color-empty-state, rgba(255, 255, 255, 0.7));\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n margin: 0;\n}\n.challenge-details .column {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n}\n.challenge-details .row {\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n background: transparent;\n border: none;\n}\n.challenge-details .button {\n cursor: pointer;\n}\n.challenge-details .general-info-col {\n width: 33%;\n}\n.challenge-details .general-info-icon {\n margin-left: 4px;\n}\n.challenge-details .label {\n text-transform: capitalize;\n color: var(--emw--color-gray-400, #c9cacb);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n margin: 0 0 3px 0;\n line-height: 17px;\n}\n.challenge-details .description {\n display: flex;\n align-items: center;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-semibold, 600);\n line-height: normal;\n margin: 0;\n line-height: 17px;\n}\n.challenge-details .description span {\n display: inline-block;\n}\n.challenge-details .challenge-terms {\n margin: 16px 12px 0 12px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.challenge-details .terms-title {\n display: flex;\n align-items: center;\n color: var(--emw--background-green-color, #00b541);\n line-height: 17px;\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-bold, 700);\n border-bottom: 1px solid var(--emw--background-green-color, #00b541);\n cursor: pointer;\n text-underline-offset: 3px;\n margin: 0;\n}\n.challenge-details .terms-title img {\n margin-left: 4px;\n}\n.challenge-details .terms-description {\n color: var(--emw--color-empty-state, rgba(255, 255, 255, 0.7));\n text-align: center;\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n margin: 6px 0;\n line-height: 14px;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-height: 28px;\n min-height: 14px;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.challenge-details .challenge-general-info {\n padding: 20px 12px;\n box-sizing: border-box;\n}\n.challenge-details .challenge-levels,\n.challenge-details .challenge-games,\n.challenge-details .challenge-rules {\n display: flex;\n padding: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n align-self: stretch;\n}\n.challenge-details .levels-row {\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n width: 100%;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n justify-content: flex-start;\n}\n.challenge-details .challenge-games {\n margin: 0;\n}\n.challenge-details .challenge-level {\n display: flex;\n padding: 12px;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n border-radius: 14px;\n background: var(--emw--level-color-background, rgba(114, 118, 114, 0.2));\n min-width: 153px;\n}\n.challenge-details .challenge-level .label {\n margin-bottom: 8px;\n}\n.challenge-details .challenge-level .description {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: 14px;\n max-width: 130px;\n}\n.challenge-details .challenge-level img {\n margin-right: 6px;\n}\n.challenge-details .challenge-games .games-row {\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n -ms-overflow-style: none;\n width: 100%;\n display: flex;\n gap: 10px;\n align-items: flex-start;\n justify-content: flex-start;\n}\n.challenge-details .challenge-game {\n display: flex;\n min-width: 120px;\n height: 84px;\n justify-content: flex-end;\n align-items: flex-start;\n gap: 7.978px;\n border-radius: 10.53px;\n cursor: pointer;\n}\n.challenge-details .challenge-game img {\n width: 100%;\n height: auto;\n}\n.challenge-details .challenge-rules {\n padding: 14px;\n}\n.challenge-details .challenge-rule,\n.challenge-details .challenge-event {\n color: var(--emw--color-empty-state, rgba(255, 255, 255, 0.7));\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-normal, 400);\n line-height: normal;\n}\n.challenge-details .ellipsed {\n display: inline-block;\n max-width: 100%;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.challenge-details .footer {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n padding: 20px 24px 24px 24px;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n border-top: 1px solid var(--emw--gradient-blue, #003e5c);\n background: var(--emw--backdrop-background, rgba(9, 9, 9, 0.8));\n backdrop-filter: blur(16.05px);\n border-radius: 0 0 30px 30px;\n flex-shrink: 0;\n}\n.challenge-details .action-description {\n font-size: var(--emw--font-size-small, 14px);\n line-height: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: var(--emw--font-weight-semibold, 600);\n color: var(--emw--color-white, #fff);\n}\n.challenge-details .promo-action-description {\n background: var(--emw--action-description-background, linear-gradient(310deg, #d6ffdc 12.98%, #74b580 92.6%, #509142 131.58%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.challenge-details .action-button {\n border-radius: 99px;\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--color-green, #00fa5a);\n display: flex;\n height: 40px;\n padding: 14px 20px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n color: var(--emw--color-black-100, #090909);\n font-size: var(--emw--font-size-medium, 16px);\n font-style: normal;\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: normal;\n}\n.challenge-details .action-button:hover {\n border-color: var(--emw--color-gray-300, #083b17);\n cursor: pointer;\n}\n.challenge-details .action-button.filled {\n color: var(--emw--color-green, #00fa5a);\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--button-background-primary-color, linear-gradient(35deg, rgba(255, 255, 255, 0) 33.61%, rgba(255, 255, 255, 0.15) 89.19%)), var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background-blend-mode: overlay;\n}\n.challenge-details .action-button.filled:hover {\n border-color: transparent;\n box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);\n}\n.challenge-details .action-button.grayed {\n color: var(--emw--color-gray-50, #e2e2e2);\n background: var(--emw--color-black, #000000);\n border-color: var(--emw--button-disabled-border-color, rgba(255, 255, 255, 0.5));\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.challenge-details .action-button.grayed:hover {\n color: var(--emw--color-white, #fff);\n}\n.challenge-details .action-button:disabled, .challenge-details .action-button:disabled:hover {\n color: var(--emw--color-gray-50, #e2e2e2);\n cursor: not-allowed;\n border: 2px solid var(--emw--button-disabled-border-color, rgba(255, 255, 255, 0.5));\n opacity: 0.7;\n}\n.challenge-details .expand-button {\n outline: none;\n border: none;\n width: 39px;\n height: 16px;\n background: transparent;\n margin: 0 auto;\n cursor: pointer;\n}\n.challenge-details .levels-row .level {\n display: flex;\n padding: 12px;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n border-radius: 14px;\n background: var(--emw--level-color-background, rgba(114, 118, 114, 0.2));\n border: none;\n}\n.challenge-details .levels-row .level.active, .challenge-details .levels-row .level.completed {\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--level-completed-gradient, linear-gradient(90deg, rgba(30, 101, 79, 0.2) 0%, rgba(28, 141, 86, 0.2) 100%));\n}\n.challenge-details .levels-row .level.active .level__title span, .challenge-details .levels-row .level.completed .level__title span {\n color: var(--emw--color-white, #fff);\n}\n.challenge-details .levels-row .level.suspended {\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n background: var(--emw--color-level-suspended rgba(9, 9, 9, 0.4));\n}\n.challenge-details .levels-row .level.suspended .level__status .suspended {\n color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));\n font-weight: 400;\n}\n.challenge-details .levels-row .level.suspended .level__title span {\n color: var(--emw--color-white, #fff);\n}\n.challenge-details .levels-row .level.forfeited {\n background: var(--emw--color-level-color-background, rgba(114, 118, 114, 0.2));\n border: none;\n color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));\n}\n.challenge-details .levels-row .level.forfeited .level__title span {\n color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));\n}\n.challenge-details .levels-row .level.forfeited .level__target,\n.challenge-details .levels-row .level.forfeited .level__value {\n color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));\n}\n.challenge-details .levels-row .level__status {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-semibold, 600);\n}\n.challenge-details .levels-row .level__title {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-semibold, 600);\n line-height: 17px;\n margin-bottom: 8px;\n}\n.challenge-details .levels-row .level__title span {\n color: var(--emw--color-white-150, rgba(255, 255, 255, 0.7));\n}\n.challenge-details .levels-row .level__title .completed {\n background: var(--emw--action-description-background, linear-gradient(310deg, #d6ffdc 12.98%, #74b580 92.6%, #509142 131.58%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.challenge-details .levels-row .level__title .completed, .challenge-details .levels-row .level__title .in-progress {\n color: var(--emw--border-success-color, #00b74f);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n text-align: right;\n line-height: 17px;\n}\n.challenge-details .levels-row .level__progress {\n width: 100%;\n margin-bottom: 10px;\n}\n.challenge-details .levels-row .level__icon {\n display: flex;\n opacity: 1;\n}\n.challenge-details .levels-row .level__icon img {\n display: block;\n width: 12px;\n height: 12px;\n margin: 4px 6px 0 0;\n}\n.challenge-details .levels-row .level__icon img.grayed {\n opacity: 0.5;\n}\n.challenge-details .levels-row .level__bonus, .challenge-details .levels-row .level__target {\n display: flex;\n align-items: flex-start;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.challenge-details .levels-row .level__bonus {\n margin-bottom: 6px;\n}\n.challenge-details .levels-row .level__value {\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n width: 100%;\n}\n.challenge-details .notification {\n display: flex;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background: rgba(188, 252, 177, 0.1);\n display: flex;\n padding: 20px 16px;\n align-items: flex-start;\n gap: 10px;\n margin: 16px 0;\n}\n.challenge-details .notification__icon {\n width: 18px;\n height: 18px;\n}\n.challenge-details .notification__message, .challenge-details .notification__title {\n color: var(--emw--color-white-150, rgba(255, 255, 255, 0.7));\n font-size: var(--emw--font-size-medium, 16px);\n font-weight: var(--emw--font-weight-normal, 400);\n}\n.challenge-details .notification__title {\n background: var(--emw--color-notification-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.challenge-details .notification__column {\n display: flex;\n flex-direction: column;\n}\n\n@container challenges-drawer (width <=500px) {\n .challenge-details .content,\n .challenge-details .sub-page-wrapper {\n padding: 0 20px;\n }\n}\n@container challenges-drawer (width <=475px) {\n .challenge-details .challenge-title {\n margin: 0 0 4px;\n }\n .challenge-details .challenge-block {\n margin: 12px 0;\n }\n .challenge-details .challenge-levels,\n .challenge-details .challenge-games,\n .challenge-details .challenge-rules {\n padding: 12px;\n }\n}\n@container challenges-drawer (width <=400px) {\n .challenge-details .content,\n .challenge-details .sub-page-wrapper {\n padding: 0 15px;\n }\n}\n@container challenges-drawer (width <= 480px) {\n .footer .action-description {\n font-size: var(--emw--font-size-xs-small, 13px);\n }\n .challenge-details .footer {\n padding: 20px 15px 24px;\n }\n}\n@container challenges-drawer (width <= 440px) {\n .challenge-details .footer {\n padding: 15px;\n }\n}\n@container challenges-game-page (height <= 850px) {}";
4396
4405
  const CasinoChallengesOverlayDrawerDetailsStyle0 = casinoChallengesOverlayDrawerDetailsCss;
4397
4406
 
4398
4407
  const CasinoChallengesOverlayDrawerDetails = class {
@@ -5425,7 +5434,7 @@ const notificationSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdod
5425
5434
 
5426
5435
  const crownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjU4MzMgNi43MDU0N0wxMS40NjEgNy44NDE5M0wxMi40NTUzIDcuOTQ4ODdMMTIuNTc3NSA2LjgxMjRMMTEuNTgzMyA2LjcwNTQ3Wk03LjU1ODYgMTJINi4xMDgwN1YxM0g3LjU1ODZWMTJaTTIuMjA1NjcgNy44NDE5M0wyLjA4MzQzIDYuNzA1NDdMMS4wODkxNyA2LjgxMjRMMS4yMTE0IDcuOTQ4ODdMMi4yMDU2NyA3Ljg0MTkzWk01LjExMDA1IDYuMDMyODdMNi4zMDMwNyAzLjg5MzgxTDUuNDI5NjkgMy40MDY3Mkw0LjIzNjY5IDUuNTQ1NzNMNS4xMTAwNSA2LjAzMjg3Wk03LjM2MzYgMy44OTM4MUw4LjU1NjYgNi4wMzI4N0w5LjQzIDUuNTQ1NzNMOC4yMzcgMy40MDY3Mkw3LjM2MzYgMy44OTM4MVpNOC41NTY2IDYuMDMyODdDOC42NjQ0NiA2LjIyNjIgOC43NjM3MyA2LjQwNTQ3IDguODU5OTMgNi41NDI1M0M4Ljk1OSA2LjY4MzUzIDkuMDk0MDcgNi44MzkyNyA5LjMwMSA2LjkzMDRMOS43MDQgNi4wMTUyQzkuNzQxMjcgNi4wMzE1MyA5LjczNDkzIDYuMDQ4NCA5LjY3ODMzIDUuOTY3ODdDOS42MTg5MyA1Ljg4MzI3IDkuNTQ4NDcgNS43NTgyIDkuNDMgNS41NDU3M0w4LjU1NjYgNi4wMzI4N1pNMTAuMTI3NSA1LjY0MjUzQzkuOTU1IDUuODE0MzMgOS44NTI2NiA1LjkxNTQgOS43NzIxMyA1Ljk4MDUzQzkuNjk1NCA2LjA0MjYgOS42OTM3MyA2LjAyNDggOS43MzM3MyA2LjAxOTI3TDkuODcwNjYgNy4wMDk4N0MxMC4wOTQ1IDYuOTc4OTMgMTAuMjY3MSA2Ljg2NjMzIDEwLjQwMTEgNi43NTc5M0MxMC41MzEzIDYuNjUyNiAxMC42NzYxIDYuNTA3NDcgMTAuODMzMiA2LjM1MUwxMC4xMjc1IDUuNjQyNTNaTTkuMzAxIDYuOTMwNEM5LjQ3OTg3IDcuMDA5MTMgOS42NzcxMyA3LjAzNjYgOS44NzA2NiA3LjAwOTg3TDkuNzMzNzMgNi4wMTkyN0M5LjcyMzUzIDYuMDIwNjcgOS43MTMyNyA2LjAxOTI3IDkuNzA0IDYuMDE1Mkw5LjMwMSA2LjkzMDRaTTIuODMzNDcgNi4zNTFDMi45OTA1MiA2LjUwNzQ3IDMuMTM1MzMgNi42NTI2IDMuMjY1NTYgNi43NTc5M0MzLjM5OTU1IDYuODY2MzMgMy41NzIxNiA2Ljk3ODkzIDMuNzk1OTggNy4wMDk4N0wzLjkzMjk1IDYuMDE5MjdDMy45NzI5NiA2LjAyNDggMy45NzEyNyA2LjA0MjYgMy44OTQ1MyA1Ljk4MDUzQzMuODE0MDMgNS45MTU0IDMuNzExNjkgNS44MTQzMyAzLjUzOTE5IDUuNjQyNTNMMi44MzM0NyA2LjM1MVpNNC4yMzY2OSA1LjU0NTczQzQuMTE4MjEgNS43NTgyIDQuMDQ3NzIgNS44ODMyNyAzLjk4ODMzIDUuOTY3ODdDMy45MzE3NyA2LjA0ODQgMy45MjU0MyA2LjAzMTUzIDMuOTYyNjMgNi4wMTUyTDQuMzY1NjQgNi45MzA0QzQuNTcyNTggNi44MzkyNyA0LjcwNzcgNi42ODM1MyA0LjgwNjczIDYuNTQyNTNDNC45MDI5NCA2LjQwNTUzIDUuMDAyMiA2LjIyNjIgNS4xMTAwNSA2LjAzMjg3TDQuMjM2NjkgNS41NDU3M1pNMy43OTU5OCA3LjAwOTg3QzMuOTg5NTMgNy4wMzY2IDQuMTg2NzcgNy4wMDkxMyA0LjM2NTY0IDYuOTMwNEwzLjk2MjYzIDYuMDE1MkMzLjk1MzQxIDYuMDE5MjcgMy45NDMxMSA2LjAyMDY3IDMuOTMyOTUgNi4wMTkyN0wzLjc5NTk4IDcuMDA5ODdaTTYuMTA4MDcgMTJDNS4xNDk0NyAxMiA0LjQ3ODEzIDExLjk5OTEgMy45NjU3MSAxMS45MzM1QzMuNDY3MjcgMTEuODY5NyAzLjE4NTY3IDExLjc1MTYgMi45NzQ4NSAxMS41NjI5TDIuMzA3OTEgMTIuMzA4QzIuNzI3ODIgMTIuNjgzOSAzLjIzNDI1IDEyLjg0OCAzLjgzODc5IDEyLjkyNTRDNC40MjkzNyAxMy4wMDA5IDUuMTc1OTkgMTMgNi4xMDgwNyAxM1YxMlpNMS4yMTE0IDcuOTQ4ODdDMS4zMTAxNyA4Ljg2NzEzIDEuMzg4NTUgOS43NjY2IDEuNTIyMTUgMTAuNDk2QzEuNTg5NTMgMTAuODYzOSAxLjY3NDUyIDExLjIxMDYgMS43OTIyMiAxMS41MTE1QzEuOTA4OTMgMTEuODA5OSAyLjA2OTkzIDEyLjA5NSAyLjMwNzkxIDEyLjMwOEwyLjk3NDg1IDExLjU2MjlDMi44OTc0NyAxMS40OTM2IDIuODA5MzcgMTEuMzY2NyAyLjcyMzUgMTEuMTQ3MkMyLjYzODYzIDEwLjkzMDMgMi41Njc1OSAxMC42NTMzIDIuNTA1NzkgMTAuMzE1OUMyLjM4MDk5IDkuNjM0NTMgMi4zMDgzMSA4Ljc5NjIgMi4yMDU2NyA3Ljg0MTkzTDEuMjExNCA3Ljk0ODg3Wk0xMS40NjEgNy44NDE5M0MxMS4zNTgzIDguNzk2MiAxMS4yODU3IDkuNjM0NTMgMTEuMTYwOSAxMC4zMTU5QzExLjA5OTEgMTAuNjUzMyAxMS4wMjggMTAuOTMwMyAxMC45NDMxIDExLjE0NzJDMTAuODU3MyAxMS4zNjY3IDEwLjc2OTIgMTEuNDkzNiAxMC42OTE4IDExLjU2MjlMMTEuMzU4NyAxMi4zMDhDMTEuNTk2NyAxMi4wOTUgMTEuNzU3NyAxMS44MDk5IDExLjg3NDUgMTEuNTExNUMxMS45OTIxIDExLjIxMDYgMTIuMDc3MSAxMC44NjM5IDEyLjE0NDUgMTAuNDk2QzEyLjI3ODEgOS43NjY2IDEyLjM1NjUgOC44NjcxMyAxMi40NTUzIDcuOTQ4ODdMMTEuNDYxIDcuODQxOTNaTTcuNTU4NiAxM0M4LjQ5MDY3IDEzIDkuMjM3MjcgMTMuMDAwOSA5LjgyNzg3IDEyLjkyNTRDMTAuNDMyNCAxMi44NDggMTAuOTM4OSAxMi42ODM5IDExLjM1ODcgMTIuMzA4TDEwLjY5MTggMTEuNTYyOUMxMC40ODEgMTEuNzUxNiAxMC4xOTk0IDExLjg2OTcgOS43MDA5MyAxMS45MzM1QzkuMTg4NTMgMTEuOTk5MSA4LjUxNzIgMTIgNy41NTg2IDEyVjEzWk02IDEuODMzMzNDNiAxLjM3MzA5IDYuMzczMDcgMSA2LjgzMzMzIDFWMEM1LjgyMDggMCA1IDAuODIwODEzIDUgMS44MzMzM0g2Wk02LjgzMzMzIDFDNy4yOTM2IDEgNy42NjY2NyAxLjM3MzA5IDcuNjY2NjcgMS44MzMzM0g4LjY2NjY3QzguNjY2NjcgMC44MjA4MTMgNy44NDU4NyAwIDYuODMzMzMgMFYxWk0xMi42NjY3IDQuNUMxMi42NjY3IDQuNzc2MTQgMTIuNDQyOCA1IDEyLjE2NjcgNVY2QzEyLjk5NTEgNiAxMy42NjY3IDUuMzI4NCAxMy42NjY3IDQuNUgxMi42NjY3Wk0xMS42NjY3IDQuNUMxMS42NjY3IDQuMjIzODYgMTEuODkwNSA0IDEyLjE2NjcgNFYzQzExLjMzODMgMyAxMC42NjY3IDMuNjcxNTcgMTAuNjY2NyA0LjVIMTEuNjY2N1pNMTIuMTY2NyA0QzEyLjQ0MjggNCAxMi42NjY3IDQuMjIzODYgMTIuNjY2NyA0LjVIMTMuNjY2N0MxMy42NjY3IDMuNjcxNTcgMTIuOTk1MSAzIDEyLjE2NjcgM1Y0Wk0xLjUgNUMxLjIyMzg2IDUgMSA0Ljc3NjE0IDEgNC41SDBDMCA1LjMyODQgMC42NzE1NzMgNiAxLjUgNlY1Wk0xIDQuNUMxIDQuMjIzODYgMS4yMjM4NiA0IDEuNSA0VjNDMC42NzE1NzMgMyAwIDMuNjcxNTcgMCA0LjVIMVpNMS41IDRDMS43NzYxNCA0IDIgNC4yMjM4NiAyIDQuNUgzQzMgMy42NzE1NyAyLjMyODQzIDMgMS41IDNWNFpNMTIuMTY2NyA1QzEyLjE2NDcgNSAxMi4xNjI3IDQuOTk5OTkgMTIuMTYwNyA0Ljk5OTk3TDEyLjE0OTEgNS45OTk4N0MxMi4xNTQ5IDUuOTk5OTMgMTIuMTYwOCA2IDEyLjE2NjcgNlY1Wk0xMi41Nzc1IDYuODEyNEMxMi42MDk3IDYuNTEyNDcgMTIuNjM4IDYuMjUwNTMgMTIuNjUzNSA2LjAzMkMxMi42Njg3IDUuODE3OTMgMTIuNjc0NCA1LjYxMjYgMTIuNjUwNCA1LjQzMzUzTDExLjY1OTMgNS41NjYzM0MxMS42NjkxIDUuNjM5NTMgMTEuNjcwMiA1Ljc2MDUzIDExLjY1NiA1Ljk2MTMzQzExLjY0MjEgNi4xNTc2NyAxMS42MTYyIDYuMzk5MDcgMTEuNTgzMyA2LjcwNTQ3TDEyLjU3NzUgNi44MTI0Wk0xMi4xNjA3IDQuOTk5OTdDMTIuMDEyMSA0Ljk5ODI1IDExLjg3OTMgNC45MzIxOCAxMS43ODggNC44MjY1NUwxMS4wMzEzIDUuNDgwMjdDMTEuMzAyIDUuNzkzNjcgMTEuNzAyMSA1Ljk5NDczIDEyLjE0OTEgNS45OTk4N0wxMi4xNjA3IDQuOTk5OTdaTTExLjc4OCA0LjgyNjU1QzExLjcxMjEgNC43Mzg2NiAxMS42NjY3IDQuNjI1MjYgMTEuNjY2NyA0LjVIMTAuNjY2N0MxMC42NjY3IDQuODc0MjkgMTAuODA0NCA1LjIxNzY3IDExLjAzMTMgNS40ODAyN0wxMS43ODggNC44MjY1NVpNMTAuODMzMiA2LjM1MUMxMS4yODQ5IDUuOTAxMTMgMTEuNTE3NSA1LjY3NDQgMTEuNjcyMyA1LjU3ODg3TDExLjE0NyA0LjcyNzk0QzEwLjg2NzEgNC45MDA3MyAxMC41MzEzIDUuMjQwMiAxMC4xMjc1IDUuNjQyNTNMMTAuODMzMiA2LjM1MVpNMiA0LjVDMiA0LjYyNTI2IDEuOTU0NTkgNC43Mzg2NiAxLjg3ODY2IDQuODI2NTVMMi42MzUzOCA1LjQ4MDI3QzIuODYyMjcgNS4yMTc2NyAzIDQuODc0MjkgMyA0LjVIMlpNMy41MzkxOSA1LjY0MjUzQzMuMTM1MzEgNS4yNDAyIDIuNzk5NTcgNC45MDA3MyAyLjUxOTY0IDQuNzI3OTRMMS45OTQ0IDUuNTc4ODdDMi4xNDkxOCA1LjY3NDQgMi4zODE4MiA1LjkwMTEzIDIuODMzNDcgNi4zNTFMMy41MzkxOSA1LjY0MjUzWk0xLjg3ODY2IDQuODI2NTVDMS43ODc0IDQuOTMyMTggMS42NTQ2MSA0Ljk5ODI1IDEuNTA2MDMgNC45OTk5N0wxLjUxNzU5IDUuOTk5ODdDMS45NjQ1MSA1Ljk5NDczIDIuMzY0NjcgNS43OTM2NyAyLjYzNTM4IDUuNDgwMjdMMS44Nzg2NiA0LjgyNjU1Wk0xLjUwNjAzIDQuOTk5OTdDMS41MDQwMSA0Ljk5OTk5IDEuNTAyMDEgNSAxLjUgNVY2QzEuNTA1ODcgNiAxLjUxMTc0IDUuOTk5OTMgMS41MTc1OSA1Ljk5OTg3TDEuNTA2MDMgNC45OTk5N1pNMi4wODM0MyA2LjcwNTQ3QzIuMDUwNDcgNi4zOTkwNyAyLjAyNDU4IDYuMTU3NjcgMi4wMTA2NyA1Ljk2MTMzQzEuOTk2NDUgNS43NjA1MyAxLjk5NzU3IDUuNjM5NTMgMi4wMDczOCA1LjU2NjMzTDEuMDE2MjMgNS40MzM1M0MwLjk5MjI0NiA1LjYxMjYgMC45OTgwMDYgNS44MTc5MyAxLjAxMzE3IDYuMDMyQzEuMDI4NjUgNi4yNTA1MyAxLjA1NjkgNi41MTI0NyAxLjA4OTE3IDYuODEyNEwyLjA4MzQzIDYuNzA1NDdaTTcuNjY2NjcgMS44MzMzM0M3LjY2NjY3IDIuMTU2NjkgNy40ODI2IDIuNDM3OTMgNy4yMTEyIDIuNTc2MzhMNy42NjU2NyAzLjQ2NzE1QzguMjU4NzMgMy4xNjQ1NyA4LjY2NjY3IDIuNTQ3MDIgOC42NjY2NyAxLjgzMzMzSDcuNjY2NjdaTTcuMjExMiAyLjU3NjM4QzcuMDk4MzMgMi42MzM5NyA2Ljk3MDQgMi42NjY2NyA2LjgzMzMzIDIuNjY2NjdWMy42NjY2N0M3LjEzMiAzLjY2NjY3IDcuNDE1MzMgMy41OTQ4NyA3LjY2NTY3IDMuNDY3MTVMNy4yMTEyIDIuNTc2MzhaTTguMjM3IDMuNDA2NzJDOC4wOTk0NyAzLjE2MDEzIDcuOTc1ODcgMi45MzgzMSA3Ljg2MjQ3IDIuNzU2OEw3LjAxNDQgMy4yODY3M0M3LjExMTczIDMuNDQyNDggNy4yMjE4NyAzLjYzOTY1IDcuMzYzNiAzLjg5MzgxTDguMjM3IDMuNDA2NzJaTTYuODMzMzMgMi42NjY2N0M2LjY5NjI3IDIuNjY2NjcgNi41NjgzMyAyLjYzMzk3IDYuNDU1NDcgMi41NzYzOEw2LjAwMSAzLjQ2NzE1QzYuMjUxMzMgMy41OTQ4NyA2LjUzNDY3IDMuNjY2NjcgNi44MzMzMyAzLjY2NjY3VjIuNjY2NjdaTTYuNDU1NDcgMi41NzYzOEM2LjE4NDA3IDIuNDM3OTMgNiAyLjE1NjY5IDYgMS44MzMzM0g1QzUgMi41NDcwMiA1LjQwNzkxIDMuMTY0NTcgNi4wMDEgMy40NjcxNUw2LjQ1NTQ3IDIuNTc2MzhaTTYuMzAzMDcgMy44OTM4MUM2LjQ0NDggMy42Mzk2NSA2LjU1NDkzIDMuNDQyNDggNi42NTIyNyAzLjI4NjczTDUuODA0MiAyLjc1NjhDNS42OTA4IDIuOTM4MzEgNS41NjcyIDMuMTYwMTMgNS40Mjk2OSAzLjQwNjcyTDYuMzAzMDcgMy44OTM4MVoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xOTE2XzE2ODEyKSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzE5MTZfMTY4MTIiIHgxPSIyNS45NzUzIiB5MT0iLTAuNjAzMzc1IiB4Mj0iMjUuOTc1MyIgeTI9IjEyLjM5NjYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agb2Zmc2V0PSIwLjIwNSIgc3RvcC1jb2xvcj0iI0ZGQjgwMSIvPgo8c3RvcCBvZmZzZXQ9IjAuMzYiIHN0b3AtY29sb3I9IiNGRUY3NDYiLz4KPHN0b3Agb2Zmc2V0PSIwLjQxNSIgc3RvcC1jb2xvcj0iI0ZCRkZFMCIvPgo8c3RvcCBvZmZzZXQ9IjAuNTI1IiBzdG9wLWNvbG9yPSIjRkZGQTYwIi8+CjxzdG9wIG9mZnNldD0iMC45MiIgc3RvcC1jb2xvcj0iI0ZGOTQwMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=';
5427
5436
 
5428
- const casinoChallengesOverlayTabsCss = ".challenges__tabs-wrapper.Mobile {\n width: auto;\n margin: 0 16px;\n}\n.challenges__tabs-wrapper.Mobile .challenges__tabs {\n height: 34px;\n padding: 2px 5px;\n margin: 12px 0;\n font-size: var(--emw--font-size-small, 14px);\n}\n.challenges__tabs-wrapper.Mobile .challenges__tabs.challenges__tabs--promo {\n min-width: 84px;\n border: 1px solid transparent;\n}\n.challenges__tabs-wrapper.Mobile .challenges__tab {\n height: 28px;\n min-width: auto;\n border: 1px solid transparent;\n}\n.challenges__tabs-wrapper.Mobile .challenges-tab--promo {\n min-width: auto;\n}\n.challenges__tabs-wrapper.Mobile .challenges-tab--promo.active {\n background: var(--emw--active-tab-background, rgba(9, 9, 9, 0.4));\n backdrop-filter: blur(11.4705886841px);\n}\n.challenges__tabs-wrapper.Mobile .challenges-tab--promo span {\n margin-right: 4px;\n}\n\n.challenges__tabs-wrapper {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 24px;\n}\n.challenges__tabs-wrapper .challenges__tabs {\n width: 100%;\n box-sizing: border-box;\n height: 42px;\n display: flex;\n align-items: center;\n padding: 4px;\n margin: 16px 0;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n border-radius: var(--emw--border-radius-large, 99px);\n border: 1px solid var(--emw--color-gray-100, rgba(255, 255, 255, 0.1));\n background: var(--emw--tabs-background, linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.1) 100%));\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n font-weight: var(--emw--font-weight-medium, 500);\n}\n.challenges__tabs-wrapper .challenges__tabs.challenges__tabs--promo {\n min-width: 89px;\n margin-right: 10px;\n padding: 0;\n overflow-x: hidden;\n width: initial;\n}\n.challenges__tabs-wrapper .challenges__tab {\n box-sizing: border-box;\n height: 34px;\n width: 25%;\n min-width: 75px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n cursor: pointer;\n text-align: center;\n border-radius: var(--emw--border-radius-large, 99px);\n border: 1px solid transparent;\n}\n.challenges__tabs-wrapper .challenges__tab.active {\n background: var(--emw--active-tab-background, rgba(9, 9, 9, 0.4));\n backdrop-filter: blur(6.882352829px);\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n}\n.challenges__tabs-wrapper .challenges__tab.challenges__tab--promo {\n box-sizing: content-box;\n min-width: 65px;\n padding: 8px 12px;\n background: var(--emw--color-gray-200, rgba(255, 255, 255, 0.2));\n box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 4px 4px 0 rgba(0, 0, 0, 0.05), 0 10px 10px 0 rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(10px);\n}\n.challenges__tabs-wrapper .challenges__tab.challenges__tab--promo.active {\n background: var(--emw--active-tab-background, rgba(9, 9, 9, 0.4));\n backdrop-filter: blur(11.4705886841px);\n border: 1px solid transparent;\n}\n\n@container challenges-drawer (width <= 500px) {\n .challenges__tabs-wrapper {\n margin: 0 20px;\n }\n .challenges__tabs-wrapper .challenges__tabs {\n font-size: var(--emw--font-size-small, 14px);\n }\n}\n@container challenges-drawer (width <= 400px) {\n .challenges__tabs-wrapper {\n margin: 0 15px;\n }\n}\n@container challenges-drawer (height <= 760px) {\n .challenges__tabs-wrapper .challenges__tabs {\n margin: 0 0 10px;\n }\n}";
5437
+ const casinoChallengesOverlayTabsCss = ".challenges__tabs-wrapper.Mobile {\n width: auto;\n margin: 0 16px;\n}\n.challenges__tabs-wrapper.Mobile .challenges__tabs {\n height: 34px;\n padding: 2px 5px;\n margin: 12px 0;\n font-size: var(--emw--font-size-small, 14px);\n}\n.challenges__tabs-wrapper.Mobile .challenges__tabs.challenges__tabs--promo {\n min-width: 84px;\n border: 1px solid transparent;\n}\n.challenges__tabs-wrapper.Mobile .challenges__tab {\n height: 28px;\n min-width: auto;\n border: 1px solid transparent;\n}\n.challenges__tabs-wrapper.Mobile .challenges-tab--promo {\n min-width: auto;\n}\n.challenges__tabs-wrapper.Mobile .challenges-tab--promo.active {\n background: var(--emw--active-tab-background, rgba(9, 9, 9, 0.4));\n backdrop-filter: blur(11.4705886841px);\n}\n.challenges__tabs-wrapper.Mobile .challenges-tab--promo span {\n margin-right: 4px;\n}\n\n.challenges__tabs-wrapper {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 24px;\n}\n.challenges__tabs-wrapper .challenges__tabs {\n width: 100%;\n box-sizing: border-box;\n height: 42px;\n display: flex;\n align-items: center;\n padding: 4px;\n margin: 16px 0;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n border-radius: var(--emw--border-radius-large, 99px);\n border: 1px solid var(--emw--color-gray-100, rgba(255, 255, 255, 0.1));\n background: var(--emw--tabs-background, linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.1) 100%));\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n font-weight: var(--emw--font-weight-medium, 500);\n}\n.challenges__tabs-wrapper .challenges__tabs.challenges__tabs--promo {\n min-width: 89px;\n margin-right: 10px;\n padding: 0;\n overflow-x: hidden;\n width: initial;\n}\n.challenges__tabs-wrapper .challenges__tab {\n box-sizing: border-box;\n height: 34px;\n flex: 1;\n min-width: 75px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n cursor: pointer;\n text-align: center;\n border-radius: var(--emw--border-radius-large, 99px);\n border: 1px solid transparent;\n}\n.challenges__tabs-wrapper .challenges__tab.active {\n background: var(--emw--active-tab-background, rgba(9, 9, 9, 0.4));\n backdrop-filter: blur(6.882352829px);\n border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));\n}\n.challenges__tabs-wrapper .challenges__tab.challenges__tab--promo {\n box-sizing: content-box;\n min-width: 65px;\n padding: 8px 12px;\n background: var(--emw--color-gray-200, rgba(255, 255, 255, 0.2));\n box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 4px 4px 0 rgba(0, 0, 0, 0.05), 0 10px 10px 0 rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(10px);\n}\n.challenges__tabs-wrapper .challenges__tab.challenges__tab--promo.active {\n background: var(--emw--active-tab-background, rgba(9, 9, 9, 0.4));\n backdrop-filter: blur(11.4705886841px);\n border: 1px solid transparent;\n}\n.challenges__tabs-wrapper .challenges__tabs.challenges__tabs--promo.large {\n width: 100%;\n}\n\n@container challenges-drawer (width <= 500px) {\n .challenges__tabs-wrapper {\n margin: 0 20px;\n }\n .challenges__tabs-wrapper .challenges__tabs {\n font-size: var(--emw--font-size-small, 14px);\n }\n}\n@container challenges-drawer (width <= 400px) {\n .challenges__tabs-wrapper {\n margin: 0 15px;\n }\n}\n@container challenges-drawer (height <= 760px) {\n .challenges__tabs-wrapper .challenges__tabs {\n margin: 5px 0 10px;\n }\n}";
5429
5438
  const CasinoChallengesOverlayTabsStyle0 = casinoChallengesOverlayTabsCss;
5430
5439
 
5431
5440
  const CasinoChallengeOverlayTabs = class {
@@ -5440,24 +5449,35 @@ const CasinoChallengeOverlayTabs = class {
5440
5449
  this.activeTabIndex = EChallengesTabs.Active;
5441
5450
  this.activeTabHasNotification = false;
5442
5451
  this.pendingTabHasNotification = false;
5452
+ this.enabledWidgetTabs = undefined;
5443
5453
  }
5444
5454
  get tabs() {
5445
5455
  return [
5446
- { label: translate$2('promo', this.language) },
5447
- { label: translate$2('active', this.language) },
5448
- { label: translate$2('pendingTab', this.language) },
5449
- { label: translate$2('finishedTab', this.language) },
5450
- { label: translate$2('codeTab', this.language) }
5456
+ { label: translate$2('promo', this.language), shown: this.enabledWidgetTabs.includes(EFeatureFlags.PromoTab) },
5457
+ { label: translate$2('active', this.language), shown: true },
5458
+ {
5459
+ label: translate$2('pendingTab', this.language),
5460
+ shown: this.enabledWidgetTabs.includes(EFeatureFlags.PendingTab)
5461
+ },
5462
+ {
5463
+ label: translate$2('finishedTab', this.language),
5464
+ shown: this.enabledWidgetTabs.includes(EFeatureFlags.FinishedTab)
5465
+ },
5466
+ { label: translate$2('codeTab', this.language), shown: this.enabledWidgetTabs.includes(EFeatureFlags.CodeTab) }
5451
5467
  ];
5452
5468
  }
5453
5469
  render() {
5454
5470
  var _a;
5455
- return (h(Host, { key: 'ee3ef4b4bc68c97e9d2cf09fdb18bd07c89fa393' }, h("div", { key: '7c5ad9fa44f4fb9593be61b4c47fe28d793913c4', class: { 'challenges__tabs-wrapper': true, Mobile: this.isMobile } }, h("div", { key: '2188b25224bd3f9bb2a69b1946490d7eeac49bf4', class: "challenges__tabs challenges__tabs--promo" }, h("div", { key: '6545accdd8c223d1f28c4344497b5aa236653b84', class: {
5471
+ return (h(Host, { key: 'd7406b70fa77065267703e6fe15a5a7476b13a47' }, h("div", { key: '0e92159292c795a7ecd972d8fa58af96ef4471fe', class: { 'challenges__tabs-wrapper': true, Mobile: this.isMobile } }, this.enabledWidgetTabs.includes(EFeatureFlags.PromoTab) && (h("div", { key: '238e070c09337d8f347d0e5b0d0e8c66f477e92d', class: {
5472
+ challenges__tabs: true,
5473
+ 'challenges__tabs--promo': true,
5474
+ large: this.enabledWidgetTabs.length === 1
5475
+ } }, h("div", { key: '50cfb51db808d2fc5036be2fd06b70f8a0364aee', class: {
5456
5476
  challenges__tab: true,
5457
5477
  'challenges__tab--promo': true,
5458
5478
  active: this.activeTabIndex === EChallengesTabs.Promo
5459
- }, onClick: this.handleTabClick(EChallengesTabs.Promo) }, h("span", { key: 'e145f5bf9fc6c87df0c86bedc70b97c77f1f6021' }, (_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.label), h("img", { key: 'd7d2e925a73673ec536f9aeea11211bb8db7988c', src: crownSvg }))), h("div", { key: 'd24f27763e7b288a939252f3b0d2214372e5b922', class: "challenges__tabs" }, this.tabs.map((tab, index) => {
5460
- if (index === EChallengesTabs.Promo)
5479
+ }, onClick: this.handleTabClick(EChallengesTabs.Promo) }, h("span", { key: 'a69d7dc4a1a798332bd9881cedb216ef82d279ab' }, (_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.label), h("img", { key: '877a1c0c86ed9a632a1af6831f08dc4d2a172856', src: crownSvg })))), h("div", { key: '96e99a2e385f48878f4f7b25625b241be7f2560a', class: "challenges__tabs" }, this.tabs.map((tab, index) => {
5480
+ if (index === EChallengesTabs.Promo || !tab.shown)
5461
5481
  return;
5462
5482
  return (h("div", { class: {
5463
5483
  challenges__tab: true,
@@ -5471,7 +5491,7 @@ CasinoChallengeOverlayTabs.style = CasinoChallengesOverlayTabsStyle0;
5471
5491
 
5472
5492
  const swipeSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDIzIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40NzU5NTEgNS4xMzc3NUMxLjExMDU1IDUuMzk4MSAyLjEzOTQ1IDUuMzk4MSAyLjc3NDA1IDUuMTM3NzVMMTEuMzc1IDEuNjA5MTVMMTkuOTc2IDUuMTM3NzVDMjAuNjEwNiA1LjM5ODEgMjEuNjM5NCA1LjM5ODEgMjIuMjc0IDUuMTM3NzVDMjIuOTA4NyA0Ljg3NzQgMjIuOTA4NyA0LjQ1NTI5IDIyLjI3NCA0LjE5NDk0TDEyLjUyNCAwLjE5NDkzN0MxMS44ODk0IC0wLjA2NTQxMyAxMC44NjA2IC0wLjA2NTQxMyAxMC4yMjYgMC4xOTQ5MzdMMC40NzU5NTEgNC4xOTQ5NEMtMC4xNTg2NTEgNC40NTUyOSAtMC4xNTg2NTEgNC44Nzc0IDAuNDc1OTUxIDUuMTM3NzVaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz4KPC9zdmc+Cg==';
5473
5493
 
5474
- const swipeUpCss = ":host{display:block;height:100%;overflow:hidden}.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 120ms linear, opacity 120ms linear;will-change:transform, opacity;margin-bottom:16px}.swipe-btn{display:flex;justify-content:center;align-items:center;border:none;padding:14px 28px;cursor:grab;touch-action:none;user-select:none;width:39px;height:16px;margin:0 auto}.content{overflow:hidden;transform-origin:top center;transition:transform 120ms linear, height 120ms linear, border-radius 120ms linear;will-change:transform, height, border-radius;border-radius:20px 20px 0 0;border-top:1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));background:var(--emw--color-black-200, rgba(9, 9, 9, 0.8))}.swipe-down-handle{display:flex;justify-content:center;align-items:center;padding:10px 0;cursor:grab;touch-action:none;user-select:none}.swipe-btn{border:none;border-radius:999px;padding:14px 28px;font-size:var(--emw--font-size-large, 18px);background:transparent;color:black;cursor:grab;touch-action:none;user-select:none}";
5494
+ const swipeUpCss = ":host{display:block;height:100%;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}*{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 120ms linear, opacity 120ms linear;will-change:transform, opacity;margin-bottom:16px}.swipe-btn{display:flex;justify-content:center;align-items:center;border:none;padding:14px 28px;cursor:grab;touch-action:none;user-select:none;width:39px;height:16px;margin:0 auto}.content{overflow:hidden;transform-origin:top center;transition:transform 120ms linear, height 120ms linear, border-radius 120ms linear;will-change:transform, height, border-radius;border-radius:20px 20px 0 0;border-top:1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));background:var(--emw--color-black-200, rgba(9, 9, 9, 0.8));scrollbar-width:none;-ms-overflow-style:none}.content::-webkit-scrollbar{display:none}.swipe-down-handle{display:flex;justify-content:center;align-items:center;padding:10px 0;cursor:grab;touch-action:none;user-select:none}.swipe-btn{border:none;border-radius:999px;padding:14px 28px;font-size:var(--emw--font-size-large, 18px);background:transparent;color:black;cursor:grab;touch-action:none;user-select:none}";
5475
5495
  const SwipeUpStyle0 = swipeUpCss;
5476
5496
 
5477
5497
  const SwipeUp = class {
@@ -5533,13 +5553,20 @@ const SwipeUp = class {
5533
5553
  const heroOpacity = 1 - this.progress;
5534
5554
  const contentTranslate = this.progress * -this.maxSwipe;
5535
5555
  if (this.isMobile) {
5536
- return (h("div", { style: { display: 'flex', height: '100%', 'flex-direction': 'column', overflow: 'auto' } }, h("header", { class: "hero", style: {
5556
+ return (h("div", { style: {
5557
+ display: 'flex',
5558
+ height: '100%',
5559
+ 'flex-direction': 'column',
5560
+ overflow: 'auto',
5561
+ 'overscroll-behavior-y': 'none'
5562
+ } }, h("header", { class: "hero", style: {
5537
5563
  transform: `translateY(${heroTranslate}px)`,
5538
5564
  opacity: `${heroOpacity}`
5539
5565
  } }, h("slot", { name: "header" })), h("main", { class: "content", style: {
5540
5566
  transform: `translateY(${contentTranslate}px)`,
5541
5567
  'margin-bottom': `-${this.maxSwipe}px`,
5542
- height: '100%',
5568
+ flex: '1',
5569
+ 'min-height': '0',
5543
5570
  overflow: this.isOpened ? 'auto' : 'hidden'
5544
5571
  } }, this.isOpened ? (h("button", { class: "swipe-btn", onPointerDown: this.onPointerDown, style: { position: 'sticky', zIndex: '123', left: 'calc(50% - 40px)' } }, h("img", { src: swipeSvg, width: 23, height: 6, style: { rotate: '180deg' } }))) : (h("button", { class: "swipe-btn", onPointerDown: this.onPointerDown }, h("img", { src: swipeSvg, width: 23, height: 6 }))), h("slot", { name: "details" }))));
5545
5572
  }
package/dist/esm/{casino-challenges-overlay-d35935be.js → casino-challenges-overlay-1f8c3734.js} RENAMED
@@ -176,6 +176,13 @@ const resolveTranslationUrl = async (translationUrl) => {
176
176
  }
177
177
  };
178
178
 
179
+ var EFeatureFlags;
180
+ (function (EFeatureFlags) {
181
+ EFeatureFlags["PromoTab"] = "promo";
182
+ EFeatureFlags["PendingTab"] = "pending";
183
+ EFeatureFlags["FinishedTab"] = "finished";
184
+ EFeatureFlags["CodeTab"] = "code";
185
+ })(EFeatureFlags || (EFeatureFlags = {}));
179
186
  var EChallengeRewardType;
180
187
  (function (EChallengeRewardType) {
181
188
  EChallengeRewardType[EChallengeRewardType["FreeSpins"] = 0] = "FreeSpins";
@@ -275,7 +282,10 @@ const CasinoChallengesOverlay = class {
275
282
  }, '*');
276
283
  }
277
284
  else {
278
- window.postMessage({ type: 'GoToChallengesPage', tab: EChallengesTabs.Promo }, '*');
285
+ window.postMessage({
286
+ type: 'GoToChallengesPage',
287
+ tab: this.enabledWidgetTabs.includes(EFeatureFlags.PromoTab) ? EChallengesTabs.Promo : EChallengesTabs.Active
288
+ }, '*');
279
289
  }
280
290
  };
281
291
  this.closeDrawer = () => {
@@ -289,6 +299,7 @@ const CasinoChallengesOverlay = class {
289
299
  this.language = 'en';
290
300
  this.challenges = undefined;
291
301
  this.extendedIngameWidget = false;
302
+ this.enabledWidgetTabs = undefined;
292
303
  this.progress = 0;
293
304
  this.isNew = false;
294
305
  this.isGift = false;
@@ -605,11 +616,15 @@ const CasinoChallengesOverlay = class {
605
616
  }
606
617
  /**
607
618
  * Called to initialize widget
608
- * @param config
619
+ * @param initValue
609
620
  */
610
- async init(config) {
611
- this.challenges = config.challenges;
612
- this.extendedIngameWidget = String(config === null || config === void 0 ? void 0 : config.extendedIngameWidget).toLowerCase() === 'true';
621
+ async init(initValue) {
622
+ var _a, _b, _c;
623
+ this.challenges = initValue.challenges;
624
+ this.extendedIngameWidget = (_b = (_a = initValue === null || initValue === void 0 ? void 0 : initValue.config) === null || _a === void 0 ? void 0 : _a.isExtendedIngameWidget) !== null && _b !== void 0 ? _b : false;
625
+ this.enabledWidgetTabs = Array.isArray((_c = initValue === null || initValue === void 0 ? void 0 : initValue.config) === null || _c === void 0 ? void 0 : _c.enabledWidgetTabs)
626
+ ? initValue.config.enabledWidgetTabs
627
+ : [];
613
628
  }
614
629
  render() {
615
630
  var _a, _b, _c;
@@ -619,15 +634,15 @@ const CasinoChallengesOverlay = class {
619
634
  const activeProgressId = hasActiveProgress
620
635
  ? (_a = this.activeChallenge) === null || _a === void 0 ? void 0 : _a.Id
621
636
  : (_c = (_b = this.challenges) === null || _b === void 0 ? void 0 : _b.find(this.isActiveChallenge)) === null || _c === void 0 ? void 0 : _c.Id;
622
- return (h("div", { key: '9566bd839601825d3d05a823d398dcf15961d424', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '68df23a628fa738d148a3a464a57115fc45901a6', class: "container", onClick: this.handleClick }, h("div", { key: '35e691296c741f99b5cf4bcf31c48013f8b27e9c', class: "circle", style: {
637
+ return (h("div", { key: '6e9eec84248ee245d03ff919ec92a50d11158796', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '99b15759e5a9bbfca3fe533911908cb32969b699', class: "container", onClick: this.handleClick }, h("div", { key: '9705f034543b7b4f5f6e812f15d0c4b1c30f25c4', class: "circle", style: {
623
638
  '--progress': `${currProgress}%`
624
- } }, h("img", { key: '93c0c9dd7fd644f496e3a89a0a1d7dd5294a478d', class: "circle__img", src: bgIconSvg }), h("div", { key: 'b1996fcb626996714b296c802ddd826c41e6368c', class: "circle__content" }, hasActiveProgress ? (h("span", null, Math.floor(currProgress), "%")) : (h("span", null, translate('join', this.language)))), dot && (h("div", { key: 'db4672c7c5527673898172981ef8a7af3c99b921', class: "dot", style: {
639
+ } }, h("img", { key: 'a556b6e4d40c02087d3220b68c48b91fe99d35a1', class: "circle__img", src: bgIconSvg }), h("div", { key: '1642b6b5ad5285bd86304fdcb55035c409595e15', class: "circle__content" }, hasActiveProgress ? (h("span", null, Math.floor(currProgress), "%")) : (h("span", null, translate('join', this.language)))), dot && (h("div", { key: '5a545c4b561dc1b5c558ea63cd7d5d7555fa3114', class: "dot", style: {
625
640
  left: `${dot.x}px`,
626
641
  top: `${dot.y}px`
627
- } }))), hasActiveProgress && (h("div", { key: 'be5453301f15f01c862e7a36013ec20af771318b', class: {
642
+ } }))), hasActiveProgress && (h("div", { key: 'afec96fe7c99df08965b32aba42c49df84be4154', class: {
628
643
  badge: true,
629
644
  new: this.isNew
630
- } }, this.renderBadgeContent()))), h("casino-challenges-overlay-modal", { key: 'abbb2c3ec11bb07e733c88e366d62846115be99c', isOpen: this.showModal, handleClick: this.closeModal, reward: this.modalReward, addition: this.modalAddition, isFreeSpinsGranted: this.modalIsFreeSpinsGranted, bonusProgramGames: this.modalBonusProgramGames, errored: this.modalErrored, orderNumber: this.modalOrderNumber, translationUrl: this.translationUrl, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl }), this.extendedIngameWidget && (h("casino-challenges-overlay-drawer", { key: '45bf6f4c4324a1372826f6422ab5096f2be246e9', mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, language: this.language, isOpen: this.showDrawer, handleClose: this.closeDrawer, challenges: this.challenges, initialProgressId: activeProgressId }))));
645
+ } }, this.renderBadgeContent()))), h("casino-challenges-overlay-modal", { key: '928e43d118430c44c9bf41787b945fae4e9a7cfc', isOpen: this.showModal, handleClick: this.closeModal, reward: this.modalReward, addition: this.modalAddition, isFreeSpinsGranted: this.modalIsFreeSpinsGranted, bonusProgramGames: this.modalBonusProgramGames, errored: this.modalErrored, orderNumber: this.modalOrderNumber, translationUrl: this.translationUrl, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl }), this.extendedIngameWidget && (h("casino-challenges-overlay-drawer", { key: '8c87702b9965bb2ac668d62e2b4fd874fd9955b7', mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, language: this.language, isOpen: this.showDrawer, handleClose: this.closeDrawer, challenges: this.challenges, initialProgressId: activeProgressId, enabledWidgetTabs: this.enabledWidgetTabs }))));
631
646
  }
632
647
  static get watchers() { return {
633
648
  "clientStyling": ["handleClientStylingChange"],
package/dist/esm/casino-challenges-overlay.js CHANGED
@@ -16,5 +16,5 @@ var patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["casino-challenge-details-events_23",[[1,"casino-challenges-overlay",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"challenges":[16],"extendedIngameWidget":[516,"extended-ingame-widget"],"progress":[32],"isNew":[32],"isGift":[32],"isNotification":[32],"inProgressCount":[32],"activeChallenge":[32],"completedLevelId":[32],"prevUpdateEvent":[32],"showModal":[32],"modalErrored":[32],"modalReward":[32],"modalAddition":[32],"modalOrderNumber":[32],"modalIsFreeSpinsGranted":[32],"modalBonusProgramGames":[32],"showDrawer":[32],"init":[64]},[[8,"message","handleEvent"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"challenges":["handleChallengesChange"]}],[1,"casino-challenges-overlay-drawer",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isOpen":[516,"is-open"],"handleClose":[16],"challenges":[16],"initialProgressId":[513,"initial-progress-id"],"activeChallenge":[32],"activeProgressId":[32],"activeTabIndex":[32],"error":[32],"hasError":[32],"swipped":[32],"detailsSubPageInfo":[32],"progress":[32],"loading":[32],"notification":[32],"optOutModaIsOpen":[32],"isOptedOut":[32],"prevUpdateEvent":[32],"challengeGames":[32],"activeChallenges":[32],"pendingChallenges":[32],"promoChallenges":[32],"playerHistory":[32],"hasMorePlayerHistory":[32],"emptyState":[32]},[[0,"openOptOutModal","onOpenOptOut"],[0,"closeOptOutModal","onCloseOptOut"],[0,"confirmOptOut","onConfirmOptOut"],[0,"challengeExpired","onChallengeExpired"],[8,"message","handleEvent"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"isOpen":["handleIsOpenChange"],"activeChallenge":["onActiveChallengeChanged"]}],[1,"casino-challenges-overlay-modal",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isOpen":[516,"is-open"],"reward":[513],"addition":[516],"handleClick":[16],"errored":[516],"orderNumber":[514,"order-number"],"isFreeSpinsGranted":[516,"is-free-spins-granted"],"bonusProgramGames":[16],"currentIndex":[32],"isMobile":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"bonusProgramGames":["handleBonusProgramGameChange"]}],[1,"casino-challenges-overlay-drawer-details",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"language":[513],"isMobile":[516,"is-mobile"],"isUnique":[516,"is-unique"],"swipped":[516],"progress":[514],"activeChallengesTabIndex":[513,"active-challenges-tab-index"],"detailsSubPageInfo":[16],"isOptedOut":[516,"is-opted-out"],"challengeGames":[16],"swipping":[32],"actionLoading":[32],"error":[32],"isChallengePaused":[32],"timeLeft":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"progress":["onSwipeChange"],"challenge":["onChallengeChange"]}],[0,"casino-challenge-opt-out-modal",{"language":[1],"isMobile":[4,"is-mobile"],"open":[4]}],[1,"casino-challenges-overlay-drawer-history",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isMobile":[516,"is-mobile"],"loading":[516],"hasMore":[516,"has-more"],"historyItems":[16],"openItems":[32],"pageSize":[32],"pageNumber":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"historyItems":["handlePlayerHistoryChange"]}],[1,"casino-challenges-overlay-slider",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isMobile":[516,"is-mobile"],"challenges":[16],"initialProgressId":[1,"initial-progress-id"],"activeTabIndex":[1,"active-tab-index"],"currentIndex":[32],"slideWidth":[32],"slideHeight":[32],"isOneSlide":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"currentIndex":["onCurrentIndexChange"],"challenges":["onChallengesChange"],"initialProgressId":["onInitialProgressIdChange"]}],[0,"casino-challenge-overlay-background",{"empty":[4]}],[1,"casino-challenges-claim-code",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"isMobile":[516,"is-mobile"],"loading":[32],"hasError":[32],"code":[32],"notificationMessage":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"casino-challenges-empty-state",{"header":[1],"description":[1],"isMobile":[516,"is-mobile"]}],[0,"casino-challenges-overlay-loader",{"fullSize":[4,"full-size"],"isMobile":[516,"is-mobile"]}],[0,"casino-challenges-overlay-tabs",{"language":[513],"isMobile":[516,"is-mobile"],"activeTabIndex":[514,"active-tab-index"],"activeTabHasNotification":[516,"active-tab-has-notification"],"pendingTabHasNotification":[516,"pending-tab-has-notification"]}],[4,"swipe-up",{"isMobile":[516,"is-mobile"],"isOneSlider":[516,"is-one-slider"],"progress":[32]},null,{"isOneSlider":["onIsOneSliderChange"],"progress":["onSwipeChange"]}],[0,"casino-challenge-details-levels",{"challenge":[16],"language":[1],"isMobile":[4,"is-mobile"],"isChallengePaused":[4,"is-challenge-paused"],"isOptedOut":[4,"is-opted-out"],"open":[4]}],[0,"casino-challenge-details-events",{"challenge":[16],"language":[1],"isMobile":[4,"is-mobile"],"open":[4]}],[0,"casino-challenge-details-games",{"challenge":[16],"language":[1],"isMobile":[4,"is-mobile"],"games":[16]}],[0,"casino-challenge-details-progress-bar",{"challenge":[16],"language":[1],"isMobile":[4,"is-mobile"]}],[0,"casino-challenge-details-rules",{"challenge":[16],"language":[1],"isMobile":[4,"is-mobile"],"isOptedOut":[4,"is-opted-out"],"open":[4]}],[0,"casino-challenge-drawer-history-item",{"language":[513],"index":[514],"historyItem":[16],"itemRef":[16],"isOpen":[4,"is-open"],"isMobile":[4,"is-mobile"],"toggle":[16]}],[1,"casino-challenges-modal",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[516,"is-open"],"showWinAnimation":[516,"show-win-animation"],"showBackdrop":[516,"show-backdrop"],"showCloseButton":[516,"show-close-button"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"casino-challenges-overlay-card",{"challenge":[16],"index":[2],"arrLength":[2,"arr-length"],"currentIndex":[2,"current-index"],"language":[1],"isOptedOut":[4,"is-opted-out"],"slideWidth":[2,"slide-width"],"slideHeight":[2,"slide-height"],"timeLeft":[32]}],[4,"casino-challenge-expandable-paragraph",{"maxHeight":[2,"max-height"],"active":[4],"expanded":[32],"needsTruncation":[32]}],[0,"casino-challenge-level-progress-bar",{"height":[1],"active":[4],"value":[2]}]]]], options);
19
+ return bootstrapLazy([["casino-challenge-details-events_23",[[1,"casino-challenges-overlay",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"challenges":[16],"extendedIngameWidget":[516,"extended-ingame-widget"],"enabledWidgetTabs":[32],"progress":[32],"isNew":[32],"isGift":[32],"isNotification":[32],"inProgressCount":[32],"activeChallenge":[32],"completedLevelId":[32],"prevUpdateEvent":[32],"showModal":[32],"modalErrored":[32],"modalReward":[32],"modalAddition":[32],"modalOrderNumber":[32],"modalIsFreeSpinsGranted":[32],"modalBonusProgramGames":[32],"showDrawer":[32],"init":[64]},[[8,"message","handleEvent"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"challenges":["handleChallengesChange"]}],[1,"casino-challenges-overlay-drawer",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isOpen":[516,"is-open"],"handleClose":[16],"challenges":[16],"initialProgressId":[513,"initial-progress-id"],"enabledWidgetTabs":[16],"activeChallenge":[32],"activeProgressId":[32],"activeTabIndex":[32],"error":[32],"hasError":[32],"swipped":[32],"detailsSubPageInfo":[32],"progress":[32],"loading":[32],"notification":[32],"optOutModaIsOpen":[32],"isOptedOut":[32],"prevUpdateEvent":[32],"challengeGames":[32],"activeChallenges":[32],"pendingChallenges":[32],"promoChallenges":[32],"playerHistory":[32],"hasMorePlayerHistory":[32],"emptyState":[32]},[[0,"openOptOutModal","onOpenOptOut"],[0,"closeOptOutModal","onCloseOptOut"],[0,"confirmOptOut","onConfirmOptOut"],[0,"challengeExpired","onChallengeExpired"],[8,"message","handleEvent"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"isOpen":["handleIsOpenChange"],"activeChallenge":["onActiveChallengeChanged"]}],[1,"casino-challenges-overlay-modal",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isOpen":[516,"is-open"],"reward":[513],"addition":[516],"handleClick":[16],"errored":[516],"orderNumber":[514,"order-number"],"isFreeSpinsGranted":[516,"is-free-spins-granted"],"bonusProgramGames":[16],"currentIndex":[32],"isMobile":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"bonusProgramGames":["handleBonusProgramGameChange"]}],[1,"casino-challenges-overlay-drawer-details",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"language":[513],"isMobile":[516,"is-mobile"],"isUnique":[516,"is-unique"],"swipped":[516],"progress":[514],"activeChallengesTabIndex":[513,"active-challenges-tab-index"],"detailsSubPageInfo":[16],"isOptedOut":[516,"is-opted-out"],"challengeGames":[16],"swipping":[32],"actionLoading":[32],"error":[32],"isChallengePaused":[32],"timeLeft":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"progress":["onSwipeChange"],"challenge":["onChallengeChange"]}],[0,"casino-challenge-opt-out-modal",{"language":[1],"isMobile":[4,"is-mobile"],"open":[4]}],[1,"casino-challenges-overlay-drawer-history",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isMobile":[516,"is-mobile"],"loading":[516],"hasMore":[516,"has-more"],"historyItems":[16],"openItems":[32],"pageSize":[32],"pageNumber":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"historyItems":["handlePlayerHistoryChange"]}],[1,"casino-challenges-overlay-slider",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isMobile":[516,"is-mobile"],"challenges":[16],"initialProgressId":[1,"initial-progress-id"],"activeTabIndex":[1,"active-tab-index"],"currentIndex":[32],"slideWidth":[32],"slideHeight":[32],"isOneSlide":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"currentIndex":["onCurrentIndexChange"],"challenges":["onChallengesChange"],"initialProgressId":["onInitialProgressIdChange"]}],[0,"casino-challenge-overlay-background",{"empty":[4]}],[1,"casino-challenges-claim-code",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"isMobile":[516,"is-mobile"],"loading":[32],"hasError":[32],"code":[32],"notificationMessage":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"casino-challenges-empty-state",{"header":[1],"description":[1],"isMobile":[516,"is-mobile"]}],[0,"casino-challenges-overlay-loader",{"fullSize":[4,"full-size"],"isMobile":[516,"is-mobile"]}],[0,"casino-challenges-overlay-tabs",{"language":[513],"isMobile":[516,"is-mobile"],"activeTabIndex":[514,"active-tab-index"],"activeTabHasNotification":[516,"active-tab-has-notification"],"pendingTabHasNotification":[516,"pending-tab-has-notification"],"enabledWidgetTabs":[16]}],[4,"swipe-up",{"isMobile":[516,"is-mobile"],"isOneSlider":[516,"is-one-slider"],"progress":[32]},null,{"isOneSlider":["onIsOneSliderChange"],"progress":["onSwipeChange"]}],[0,"casino-challenge-details-levels",{"challenge":[16],"language":[1],"isMobile":[4,"is-mobile"],"isChallengePaused":[4,"is-challenge-paused"],"isOptedOut":[4,"is-opted-out"],"open":[4]}],[0,"casino-challenge-details-events",{"challenge":[16],"language":[1],"isMobile":[4,"is-mobile"],"open":[4]}],[0,"casino-challenge-details-games",{"challenge":[16],"language":[1],"isMobile":[4,"is-mobile"],"games":[16]}],[0,"casino-challenge-details-progress-bar",{"challenge":[16],"language":[1],"isMobile":[4,"is-mobile"]}],[0,"casino-challenge-details-rules",{"challenge":[16],"language":[1],"isMobile":[4,"is-mobile"],"isOptedOut":[4,"is-opted-out"],"open":[4]}],[0,"casino-challenge-drawer-history-item",{"language":[513],"index":[514],"historyItem":[16],"itemRef":[16],"isOpen":[4,"is-open"],"isMobile":[4,"is-mobile"],"toggle":[16]}],[1,"casino-challenges-modal",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[516,"is-open"],"showWinAnimation":[516,"show-win-animation"],"showBackdrop":[516,"show-backdrop"],"showCloseButton":[516,"show-close-button"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"casino-challenges-overlay-card",{"challenge":[16],"index":[2],"arrLength":[2,"arr-length"],"currentIndex":[2,"current-index"],"language":[1],"isOptedOut":[4,"is-opted-out"],"slideWidth":[2,"slide-width"],"slideHeight":[2,"slide-height"],"timeLeft":[32]}],[4,"casino-challenge-expandable-paragraph",{"maxHeight":[2,"max-height"],"active":[4],"expanded":[32],"needsTruncation":[32]}],[0,"casino-challenge-level-progress-bar",{"height":[1],"active":[4],"value":[2]}]]]], options);
20
20
  });
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { C as CasinoChallengesOverlay } from './casino-challenges-overlay-d35935be.js';
1
+ export { C as CasinoChallengesOverlay } from './casino-challenges-overlay-1f8c3734.js';
2
2
  import './index-b4a452f5.js';