@everymatrix/casino-play-random-game 1.36.1 → 1.37.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 (10) hide show
  1. package/dist/casino-play-random-game/casino-play-random-game.esm.js +1 -1
  2. package/dist/casino-play-random-game/p-a6bd2dc8.entry.js +1 -0
  3. package/dist/cjs/casino-play-random-game.cjs.entry.js +2 -2
  4. package/dist/collection/components/casino-play-random-game/casino-play-random-game.css +112 -84
  5. package/dist/collection/components/casino-play-random-game/casino-play-random-game.js +3 -3
  6. package/dist/components/casino-play-random-game.js +2 -2
  7. package/dist/esm/casino-play-random-game.entry.js +2 -2
  8. package/package.json +1 -1
  9. package/dist/casino-play-random-game/p-f75784e9.entry.js +0 -1
  10. /package/dist/types/Users/{adrian.pripon/Documents/Work → sebastian.strulea/Documents/work}/widgets-stencil/packages/casino-play-random-game/.stencil/packages/casino-play-random-game/stencil.config.d.ts +0 -0
package/dist/casino-play-random-game/casino-play-random-game.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as i,b as n}from"./p-0f38b3f8.js";(()=>{const n=import.meta.url,a={};return""!==n&&(a.resourcesUrl=new URL(".",n).href),i(a)})().then((i=>n([["p-f75784e9",[[1,"casino-play-random-game",{endpoint:[513],datasource:[513],language:[513],specificCategory:[513,"specific-category"],iconVisible:[513,"icon-visible"],iconVisibleOnAnim:[513,"icon-visible-on-anim"],launchByGameCard:[513,"launch-by-game-card"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],gamesToShow:[32],selectedGame:[32],animationDone:[32],animationStarted:[32]}]]]],i)));
1
+ import{p as i,b as n}from"./p-0f38b3f8.js";(()=>{const n=import.meta.url,a={};return""!==n&&(a.resourcesUrl=new URL(".",n).href),i(a)})().then((i=>n([["p-a6bd2dc8",[[1,"casino-play-random-game",{endpoint:[513],datasource:[513],language:[513],specificCategory:[513,"specific-category"],iconVisible:[513,"icon-visible"],iconVisibleOnAnim:[513,"icon-visible-on-anim"],launchByGameCard:[513,"launch-by-game-card"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],gamesToShow:[32],selectedGame:[32],animationDone:[32],animationStarted:[32]}]]]],i)));
package/dist/casino-play-random-game/p-a6bd2dc8.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as n,h as a,g as e}from"./p-0f38b3f8.js";const t={en:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},ro:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},fr:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},hr:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},hu:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},tr:{error:"Hata",randomGameLoading:"Yükleniyor...",playRandomGame:"Rasgele bir oyun oyna",playNowRandomGame:"Şimdi Oyna",spinRandomGame:"DEĞİŞTİR"}},i=n=>new Promise((a=>{fetch(n).then((n=>n.json())).then((n=>{Object.keys(n).forEach((a=>{a in t||(t[a]={});for(let e in n[a])t[a][e]=n[a][e]})),a(!0)}))})),o=(n,a,e)=>{let i=t[void 0!==a?a:"en"][n];if(void 0!==e)for(const[n,a]of Object.entries(e.values)){const e=new RegExp(`{${n}}`,"g");i=i.replace(e,a)}return i},r=class{constructor(a){n(this,a),this.language="en",this.specificCategory="",this.iconVisible="",this.iconVisibleOnAnim="",this.launchByGameCard="",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.hasErrors=!1,this.limitStylingAppends=!1,this.isLoading=!0,this.selectedGame=null,this.animationDone=!1,this.animationStarted=!1,this.animation=null,this.selectedGameIndex=null,this.selectedGameEl=null,this.iconVisibility=null,this.shuffle=n=>{let a,e=n.length;for(;0!==e;)a=Math.floor(Math.random()*e),e--,[n[e],n[a]]=[n[a],n[e]];return n},this.setClientStyling=()=>{let n=document.createElement("style");n.innerHTML=this.clientStyling,this.host.shadowRoot.prepend(n)},this.setClientStylingURL=()=>{let n=new URL(this.clientStylingUrl),a=document.createElement("style");fetch(n.href).then((n=>n.text())).then((n=>{a.innerHTML=n,this.clientStyling=n,setTimeout((()=>{this.host.shadowRoot.prepend(a)}),1)}))}}watchEndpoint(n,a){n&&n!=a&&this.endpoint&&this.fetchGameList()}handleNewTranslations(){this.isLoading=!0,i(this.translationUrl).then((()=>{this.isLoading=!1}))}connectedCallback(){this.iconVisibility="true"===this.iconVisible}componentWillLoad(){if(this.translationUrl.length>2&&i(this.translationUrl),this.endpoint&&this.language&&this.datasource)return this.fetchGameList()}componentDidLoad(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}fetchGameList(){let n=new URL(`${this.endpoint}/v1/casino/games`);return n.searchParams.append("platform",(()=>{let n=window.navigator.userAgent;return n.toLowerCase().match(/android/i)?"Android":n.toLowerCase().match(/iphone/i)?"iPhone":n.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})()),n.searchParams.append("datasource",this.datasource),n.searchParams.append("fields","gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"),n.searchParams.append("expand","vendor"),n.searchParams.append("pagination","offset=0,limit=423"),n.searchParams.append("language",this.language),this.specificCategory&&n.searchParams.append("filter",`categories(id=${this.specificCategory})`),new Promise(((a,e)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{this.gamesToShow=this.setUpGames(null==n?void 0:n.items),a(!0)})).catch((n=>{console.error(n),this.hasErrors=!0,e(n)})).finally((()=>{this.isLoading=!1}))}))}setUpGames(n){const a=this.shuffle(n).slice(0,40);return a.concat(a)}selectRandomGame(){const n=this.gamesToShow.length/2;this.selectedGameIndex=Math.floor(Math.random()*(n-3)),this.selectedGameIndex+=n,this.selectedGameEl=this.gameContainer.children[this.selectedGameIndex]}playRandomGame(){this.animateGames(),"function"==typeof gtag&&gtag("event","PlayRandomGame",{context:"CasinoPlayRandomGame"})}respin(){this.animateGames(),"function"==typeof gtag&&gtag("event","RespinRandomGame",{context:"CasinoPlayRandomGame"})}animateGames(){this.iconVisibility="true"===this.iconVisibleOnAnim,this.animationStarted=!0,this.animationDone=!1,this.animation&&this.animation.cancel(),this.selectedGameEl&&(this.selectedGameEl.classList.remove("TheRandomGame"),this.selectedGame=null,this.selectedGameIndex=null),this.selectRandomGame();const n=window.getComputedStyle(this.gameContainer).getPropertyValue("gap"),a=parseInt(n,10),e=this.selectedGameEl.offsetWidth;this.animation=this.gameContainer.animate([{transform:"translateX(0px)",scale:1},{scale:.75},{transform:`translateX(-${(e+a)*this.selectedGameIndex+e/2-this.gameContainer.offsetWidth/2}px)`,scale:1}],{duration:3e3,easing:"cubic-bezier(0.5, 0, 0.5, 1.2)",fill:"forwards"}),this.animation.onfinish=()=>{this.animationDone=!0,this.selectedGameEl.classList.add("TheRandomGame"),this.selectedGame=this.gamesToShow[this.selectedGameIndex]}}playGame(){this.selectedGame&&(window.postMessage({type:"PlayRandomGame",gameId:this.selectedGame.id,launchUrl:this.selectedGame.launchUrl,gameName:this.selectedGame.name,subVendor:this.selectedGame.subVendor},window.location.href),"function"==typeof gtag&&gtag("event","OpenRandomGame",{context:"CasinoPlayRandomGame"}))}showGameInfo(){window.postMessage({type:"InfoRandomGame",gameId:this.selectedGame.id,launchUrl:this.selectedGame.launchUrl,gameName:this.selectedGame.name,subVendor:this.selectedGame.subVendor},window.location.href),"function"==typeof gtag&&gtag("event","OpenRandomGameInfo",{context:"CasinoPlayRandomGame"})}renderGameDetails(){return a("div",{class:"RandomButtonsWrapper"},a("div",{class:"RandomGameDetails"},a("span",{class:"RandomGameTitle"},this.selectedGame.name),a("span",{class:"RandomGameInfo",onClick:()=>this.showGameInfo()},"i")),a("div",{class:"RandomButtons"},a("button",{class:"RandomButton On",onClick:()=>this.respin()},o("spinRandomGame",this.language)),!this.launchByGameCard&&a("button",{class:"RandomButton On",onClick:()=>this.playGame()},o("playNowRandomGame",this.language))))}render(){return this.hasErrors?a("div",{class:"RandomGameError"},a("div",{class:"Title"},o("error",this.language))):this.isLoading?a("div",{class:"RandomGameLoading"},a("div",{class:"Title"},o("randomGameLoading",this.language))):this.isLoading?void 0:a("div",{class:"RandomGameWrapper"},a("div",{class:"GameContainerGradient"}),a("div",{class:"GamesContainer",ref:n=>this.gameContainer=n},this.gamesToShow&&this.gamesToShow.map(((n,e)=>a("div",{class:"RandomGameCard",key:e,onClick:"true"===this.launchByGameCard?()=>this.playGame():null},a("div",{class:"RandomGameVendor"},n.vendor.name),a("img",{class:"RandomGameImage",src:n.thumbnail,alt:n.name,title:n.name}),this.selectedGame&&this.selectedGameIndex===e&&this.renderGameDetails())))),a("div",{class:"ButtonWrapper "+(this.animationDone?"HideAnimation":"")},a("div",{class:"ButtonContainer"},this.iconVisibility&&a("div",{class:"ButtonIcon "+(this.animationStarted?"Flip":"")},a("div",{class:"QustionMark"},"?"),a("div",{class:"HexagonMarkShadow"}),a("div",{class:"HexagonMark"})),!this.animationStarted&&a("div",{class:"RandomButton "+(this.animationStarted?"HideAnimation":""),onClick:()=>this.playRandomGame()},o("playRandomGame",this.language)))))}get host(){return e(this)}static get watchers(){return{endpoint:["watchEndpoint"],datasource:["watchEndpoint"],language:["watchEndpoint"],translationUrl:["handleNewTranslations"]}}};r.style=":host {\n display: block;\n font-family: inherit;\n}\n\n.RandomGameWrapper {\n width: 100%;\n height: var(--emw--size-4x-medium, 700px);\n overflow: hidden;\n background: transparent;\n position: relative;\n}\n\n.GameContainerGradient {\n position: absolute;\n top: 10%;\n left: -5px;\n width: 100vw;\n height: 80%;\n background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.5) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.5) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n pointer-events: none;\n z-index: 1;\n filter: blur(10px);\n}\n\n.GamesContainer {\n display: flex;\n height: var(--emw--size-4x-medium, 600px);\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n align-content: flex-start;\n gap: var(--emw--spacing-large, 20px);\n}\n\n.RandomGameCard {\n position: relative;\n width: var(--emw--size-3x-medium, 300px);\n height: var(--emw--size-4x-medium, 420px);\n border-radius: var(--emw--border-radius-large, 20px);\n top: 8%;\n filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n position: absolute;\n font-size: var(--emw--font-size-x-small, 12px);\n bottom: var(--emw--spacing-small-minus, 10px);\n left: var(--emw--spacing-small-minus, 10px);\n color: var(--emw--color-typography, #FFFFFF);\n}\n\n.TheRandomGame {\n animation-name: ZoomFadeIn;\n animation-duration: 0.5s;\n animation-fill-mode: forwards;\n -webkit-animation-name: ZoomFadeIn;\n -webkit-animation-duration: 0.5s;\n -webkit-animation-fill-mode: forwards;\n opacity: 1;\n cursor: pointer;\n filter: blur(0);\n}\n\n.RandomGameImage {\n width: inherit;\n height: inherit;\n object-fit: cover;\n border-radius: var(--emw--border-radius-large, 20px);\n}\n\n.RandomGameDetails {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: var(--emw--color-typography, #FFFFFF);\n font-size: var(--emw--font-size-small, 14px);\n width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n}\n.RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: var(--emw--spacing-medium, 16px);\n height: var(--emw--spacing-medium, 16px);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-normal, 400);\n border: solid 1px var(--emw--color-typography, #FFFFFF);\n text-align: center;\n margin: var(--emw--spacing-2x-small, 4px) 0;\n line-height: 14px;\n cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n background: var(--emw--color-primary, #4bd004);\n color: var(--emw--color-typography, #FFFFFF);\n border: none;\n border-radius: var(--emw--border-radius-medium, 5px);\n width: 200px;\n height: 40px;\n font-size: var(--emw--font-size-small, 14px);\n cursor: pointer;\n}\n\n.ButtonWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 100;\n}\n\n.ButtonContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n position: relative;\n}\n\n.ButtonIcon {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--emw--spacing-2x-small, 5px);\n}\n\n.QustionMark {\n position: absolute;\n font-family: sans-serif;\n font-size: 120px;\n font-weight: 900;\n color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);\n text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);\n left: 50%;\n top: -20%;\n transform: translateX(-50%);\n z-index: 10;\n}\n\n.HexagonMarkShadow {\n width: 100px;\n height: 115px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMark {\n position: absolute;\n width: var(--emw--size-medium, 90px);\n height: 105px;\n background: linear-gradient(to bottom, color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 20%) 0%, var(--emw--categories-color-secondary, var(--emw--color-secondary, #eeac4a)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: var(--emw--spacing-2x-small, 5px);\n width: 100%;\n position: relative;\n z-index: 10;\n}\n\n.RandomButton {\n font-size: var(--emw--font-size-large, 20px);\n text-transform: uppercase;\n width: max-content;\n border-radius: var(--emw--button-border-radius, 50px);\n padding: var(--emw--spacing-large, 20px) var(--emw--spacing-2x-large, 40px);\n border: solid 3px var(--emw--button-border-color, #063B17);\n color: var(--emw--button-text-color, #FFFFFF);\n opacity: 1;\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E), black 30%), var(--emw--color-primary, #22B04E));\n background-size: 300% 100%;\n cursor: pointer;\n position: relative;\n z-index: 10;\n}\n.RandomButton:hover {\n opacity: 0.8;\n}\n\n.HideAnimation {\n filter: blur(5px);\n animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n animation-name: Flip, Blur;\n animation-duration: 0.75s, 3s;\n animation-iteration-count: infinite, 1;\n -webkit-animation-name: Flip, Blur;\n -webkit-animation-duration: 0.75s, 3s;\n -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n 0% {\n background-position: 0% 50%;\n }\n 33% {\n background-position: 100% 50%;\n }\n 66% {\n background-position: 200% 50%;\n }\n 100% {\n background-position: 300% 50%;\n }\n}\n@keyframes ZoomFadeIn {\n 0% {\n transform: scale(0.2) translateY(0);\n filter: blur(5px);\n opacity: 0.3;\n }\n 50% {\n transform: scale(1.1) translateY(-30px);\n filter: blur(2px);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1) translateY(-30px);\n filter: blur(0px);\n opacity: 1;\n }\n}\n@keyframes AnimateButton {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n}\n@keyframes Flip {\n 0% {\n transform: rotateY(0deg);\n }\n 50% {\n transform: rotateY(180deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n@keyframes Blur {\n 0% {\n filter: blur(0);\n }\n 50% {\n filter: blur(1px);\n }\n 100% {\n filter: blur(3px);\n }\n}\n@container (max-width: 475px) {\n .GamesContainer {\n height: inherit;\n gap: var(--emw--spacing-2x-small, 5px);\n }\n\n .RandomGameWrapper {\n width: 100%;\n height: 300px;\n overflow: hidden;\n background: transparent;\n position: relative;\n }\n\n .GameContainerGradient {\n position: absolute;\n top: 10%;\n left: -5px;\n width: 100vw;\n height: 80%;\n background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.2) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.2) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n pointer-events: none;\n z-index: 1;\n filter: blur(5px);\n }\n\n .RandomGameCard {\n width: 100px;\n height: 150px;\n top: 0%;\n border-radius: var(--emw--border-radius-medium, 4px);\n filter: blur(5px);\n }\n\n .RandomGameImage {\n width: 102px;\n height: inherit;\n top: 0%;\n }\n\n .RandomGameDetails {\n font-size: 14px;\n width: 100%;\n }\n .RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n width: 75%;\n }\n .RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 14px;\n }\n .RandomGameDetails .RandomGamePlay {\n background: var(--emw--color-primary, #52d004);\n color: var(--emw--color-typography, #FFFFFF);\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n }\n\n .RandomGameCard .RandomGameVendor {\n font-size: var(--emw--font-size-x-small, 12px);\n bottom: 5px;\n right: 5px;\n }\n\n .RandomButtons {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .RandomButton {\n font-size: var(--emw--font-size-x-small, 12px);\n padding: 10px 15px;\n border: solid 1px var(--emw--button-border-color, #063B17);\n }\n\n .QustionMark {\n font-size: 100px;\n font-weight: 700;\n }\n\n .HexagonMarkShadow {\n width: 80px;\n height: 95px;\n }\n\n .HexagonMark {\n width: 70px;\n height: 85px;\n }\n}";export{r as casino_play_random_game}
package/dist/cjs/casino-play-random-game.cjs.entry.js CHANGED
@@ -92,7 +92,7 @@ const translate = (key, customLang, values) => {
92
92
  return translation;
93
93
  };
94
94
 
95
- const casinoPlayRandomGameCss = ":host {\n display: block;\n font-family: inherit;\n}\n\n.RandomGameWrapper {\n width: 100%;\n overflow: hidden;\n background: transparent;\n position: relative;\n}\n\n.GameContainerGradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.5) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.5) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);\n pointer-events: none;\n z-index: 1;\n}\n\n.GamesContainer {\n display: flex;\n height: 330px;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n align-content: flex-start;\n gap: 20px;\n}\n\n.RandomGameCard {\n position: relative;\n width: 256px;\n height: 170px;\n border-radius: 5px;\n filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n position: absolute;\n font-size: 12px;\n bottom: 10px;\n left: 10px;\n color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.TheRandomGame {\n animation-name: ZoomFadeIn;\n animation-duration: 0.5s;\n animation-fill-mode: forwards;\n -webkit-animation-name: ZoomFadeIn;\n -webkit-animation-duration: 0.5s;\n -webkit-animation-fill-mode: forwards;\n opacity: 1;\n cursor: pointer;\n filter: blur(0);\n}\n\n.RandomGameImage {\n width: 256px;\n height: 170px;\n}\n\n.RandomGameDetails {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));\n font-size: 14px;\n width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n}\n.RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 12px;\n font-weight: 400;\n border: solid 1px var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));\n text-align: center;\n margin: 4px 0;\n line-height: 14px;\n cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n}\n\n.ButtonWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.ButtonContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n}\n\n.ButtonIcon {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n}\n\n.QustionMark {\n position: relative;\n font-size: 80px;\n font-weight: 700;\n color: var(--emfe-w-color-white, #FFFFFF);\n z-index: 5;\n bottom: 20px;\n text-shadow: 0px 4px 0px var(--emfe-w-color-black, #000000);\n}\n\n.HexagonMark {\n position: absolute;\n width: 70px;\n height: 85px;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMarkBorder {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n top: 5px;\n left: 5px;\n width: 60px;\n height: 75px;\n background: linear-gradient(180deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n}\n\n.RandomButton {\n font-size: 18px;\n text-transform: uppercase;\n width: max-content;\n border-radius: 5px;\n padding: 5px 25px;\n border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n opacity: 1;\n text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));\n background-size: 300% 100%;\n cursor: pointer;\n}\n.RandomButton:hover {\n opacity: 0.8;\n}\n\n.HideAnimation {\n filter: blur(5px);\n animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n animation-name: Flip, Blur;\n animation-duration: 0.75s, 3s;\n animation-iteration-count: infinite, 1;\n -webkit-animation-name: Flip, Blur;\n -webkit-animation-duration: 0.75s, 3s;\n -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n 0% {\n background-position: 0% 50%;\n }\n 33% {\n background-position: 100% 50%;\n }\n 66% {\n background-position: 200% 50%;\n }\n 100% {\n background-position: 300% 50%;\n }\n}\n@keyframes ZoomFadeIn {\n 0% {\n transform: scale(0.2) translateY(0);\n filter: blur(5px);\n opacity: 0.3;\n }\n 50% {\n transform: scale(1.1) translateY(-30px);\n filter: blur(2px);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1) translateY(-30px);\n filter: blur(0px);\n opacity: 1;\n }\n}\n@keyframes AnimateButton {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n}\n@keyframes Flip {\n 0% {\n transform: rotateY(0deg);\n }\n 50% {\n transform: rotateY(180deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n@keyframes Blur {\n 0% {\n filter: blur(0);\n }\n 50% {\n filter: blur(1px);\n }\n 100% {\n filter: blur(3px);\n }\n}\n@container (max-width: 475px) {\n .GameContainerGradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.2) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.2) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);\n pointer-events: none;\n z-index: 1;\n }\n\n .RandomGameCard {\n width: 102px;\n height: 146px;\n border-radius: 5px;\n filter: blur(5px);\n }\n\n .RandomGameImage {\n width: 102px;\n height: 146px;\n }\n\n .RandomGameDetails {\n font-size: 14px;\n width: 100%;\n }\n .RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n width: 75%;\n }\n .RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 12px;\n line-height: 14px;\n }\n .RandomGameDetails .RandomGamePlay {\n background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n }\n\n .RandomGameCard .RandomGameVendor {\n font-size: 12px;\n bottom: 5px;\n right: 5px;\n }\n\n .RandomButtons {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .RandomButton {\n font-size: 18px;\n text-transform: uppercase;\n width: max-content;\n border-radius: 5px;\n padding: 5px 25px;\n border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n opacity: 1;\n text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));\n background-size: 300% 100%;\n cursor: pointer;\n }\n .RandomButton:hover {\n opacity: 0.8;\n }\n}";
95
+ const casinoPlayRandomGameCss = ":host {\n display: block;\n font-family: inherit;\n}\n\n.RandomGameWrapper {\n width: 100%;\n height: var(--emw--size-4x-medium, 700px);\n overflow: hidden;\n background: transparent;\n position: relative;\n}\n\n.GameContainerGradient {\n position: absolute;\n top: 10%;\n left: -5px;\n width: 100vw;\n height: 80%;\n background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.5) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.5) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n pointer-events: none;\n z-index: 1;\n filter: blur(10px);\n}\n\n.GamesContainer {\n display: flex;\n height: var(--emw--size-4x-medium, 600px);\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n align-content: flex-start;\n gap: var(--emw--spacing-large, 20px);\n}\n\n.RandomGameCard {\n position: relative;\n width: var(--emw--size-3x-medium, 300px);\n height: var(--emw--size-4x-medium, 420px);\n border-radius: var(--emw--border-radius-large, 20px);\n top: 8%;\n filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n position: absolute;\n font-size: var(--emw--font-size-x-small, 12px);\n bottom: var(--emw--spacing-small-minus, 10px);\n left: var(--emw--spacing-small-minus, 10px);\n color: var(--emw--color-typography, #FFFFFF);\n}\n\n.TheRandomGame {\n animation-name: ZoomFadeIn;\n animation-duration: 0.5s;\n animation-fill-mode: forwards;\n -webkit-animation-name: ZoomFadeIn;\n -webkit-animation-duration: 0.5s;\n -webkit-animation-fill-mode: forwards;\n opacity: 1;\n cursor: pointer;\n filter: blur(0);\n}\n\n.RandomGameImage {\n width: inherit;\n height: inherit;\n object-fit: cover;\n border-radius: var(--emw--border-radius-large, 20px);\n}\n\n.RandomGameDetails {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: var(--emw--color-typography, #FFFFFF);\n font-size: var(--emw--font-size-small, 14px);\n width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n}\n.RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: var(--emw--spacing-medium, 16px);\n height: var(--emw--spacing-medium, 16px);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-normal, 400);\n border: solid 1px var(--emw--color-typography, #FFFFFF);\n text-align: center;\n margin: var(--emw--spacing-2x-small, 4px) 0;\n line-height: 14px;\n cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n background: var(--emw--color-primary, #4bd004);\n color: var(--emw--color-typography, #FFFFFF);\n border: none;\n border-radius: var(--emw--border-radius-medium, 5px);\n width: 200px;\n height: 40px;\n font-size: var(--emw--font-size-small, 14px);\n cursor: pointer;\n}\n\n.ButtonWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 100;\n}\n\n.ButtonContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n position: relative;\n}\n\n.ButtonIcon {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--emw--spacing-2x-small, 5px);\n}\n\n.QustionMark {\n position: absolute;\n font-family: sans-serif;\n font-size: 120px;\n font-weight: 900;\n color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);\n text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);\n left: 50%;\n top: -20%;\n transform: translateX(-50%);\n z-index: 10;\n}\n\n.HexagonMarkShadow {\n width: 100px;\n height: 115px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMark {\n position: absolute;\n width: var(--emw--size-medium, 90px);\n height: 105px;\n background: linear-gradient(to bottom, color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 20%) 0%, var(--emw--categories-color-secondary, var(--emw--color-secondary, #eeac4a)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: var(--emw--spacing-2x-small, 5px);\n width: 100%;\n position: relative;\n z-index: 10;\n}\n\n.RandomButton {\n font-size: var(--emw--font-size-large, 20px);\n text-transform: uppercase;\n width: max-content;\n border-radius: var(--emw--button-border-radius, 50px);\n padding: var(--emw--spacing-large, 20px) var(--emw--spacing-2x-large, 40px);\n border: solid 3px var(--emw--button-border-color, #063B17);\n color: var(--emw--button-text-color, #FFFFFF);\n opacity: 1;\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E), black 30%), var(--emw--color-primary, #22B04E));\n background-size: 300% 100%;\n cursor: pointer;\n position: relative;\n z-index: 10;\n}\n.RandomButton:hover {\n opacity: 0.8;\n}\n\n.HideAnimation {\n filter: blur(5px);\n animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n animation-name: Flip, Blur;\n animation-duration: 0.75s, 3s;\n animation-iteration-count: infinite, 1;\n -webkit-animation-name: Flip, Blur;\n -webkit-animation-duration: 0.75s, 3s;\n -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n 0% {\n background-position: 0% 50%;\n }\n 33% {\n background-position: 100% 50%;\n }\n 66% {\n background-position: 200% 50%;\n }\n 100% {\n background-position: 300% 50%;\n }\n}\n@keyframes ZoomFadeIn {\n 0% {\n transform: scale(0.2) translateY(0);\n filter: blur(5px);\n opacity: 0.3;\n }\n 50% {\n transform: scale(1.1) translateY(-30px);\n filter: blur(2px);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1) translateY(-30px);\n filter: blur(0px);\n opacity: 1;\n }\n}\n@keyframes AnimateButton {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n}\n@keyframes Flip {\n 0% {\n transform: rotateY(0deg);\n }\n 50% {\n transform: rotateY(180deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n@keyframes Blur {\n 0% {\n filter: blur(0);\n }\n 50% {\n filter: blur(1px);\n }\n 100% {\n filter: blur(3px);\n }\n}\n@container (max-width: 475px) {\n .GamesContainer {\n height: inherit;\n gap: var(--emw--spacing-2x-small, 5px);\n }\n\n .RandomGameWrapper {\n width: 100%;\n height: 300px;\n overflow: hidden;\n background: transparent;\n position: relative;\n }\n\n .GameContainerGradient {\n position: absolute;\n top: 10%;\n left: -5px;\n width: 100vw;\n height: 80%;\n background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.2) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.2) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n pointer-events: none;\n z-index: 1;\n filter: blur(5px);\n }\n\n .RandomGameCard {\n width: 100px;\n height: 150px;\n top: 0%;\n border-radius: var(--emw--border-radius-medium, 4px);\n filter: blur(5px);\n }\n\n .RandomGameImage {\n width: 102px;\n height: inherit;\n top: 0%;\n }\n\n .RandomGameDetails {\n font-size: 14px;\n width: 100%;\n }\n .RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n width: 75%;\n }\n .RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 14px;\n }\n .RandomGameDetails .RandomGamePlay {\n background: var(--emw--color-primary, #52d004);\n color: var(--emw--color-typography, #FFFFFF);\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n }\n\n .RandomGameCard .RandomGameVendor {\n font-size: var(--emw--font-size-x-small, 12px);\n bottom: 5px;\n right: 5px;\n }\n\n .RandomButtons {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .RandomButton {\n font-size: var(--emw--font-size-x-small, 12px);\n padding: 10px 15px;\n border: solid 1px var(--emw--button-border-color, #063B17);\n }\n\n .QustionMark {\n font-size: 100px;\n font-weight: 700;\n }\n\n .HexagonMarkShadow {\n width: 80px;\n height: 95px;\n }\n\n .HexagonMark {\n width: 70px;\n height: 85px;\n }\n}";
96
96
 
97
97
  const CasinoPlayRandomGame = class {
98
98
  constructor(hostRef) {
@@ -330,7 +330,7 @@ const CasinoPlayRandomGame = class {
330
330
  return (index.h("div", { class: "RandomGameLoading" }, index.h("div", { class: "Title" }, translate('randomGameLoading', this.language))));
331
331
  }
332
332
  if (!this.isLoading) {
333
- return index.h("div", { class: "RandomGameWrapper" }, index.h("div", { class: 'GameContainerGradient' }), index.h("div", { class: 'GamesContainer', ref: (el) => this.gameContainer = el }, this.gamesToShow && this.gamesToShow.map((game, index$1) => (index.h("div", { class: 'RandomGameCard', key: index$1, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : null }, index.h("div", { class: "RandomGameVendor" }, game.vendor.name), index.h("img", { class: 'RandomGameImage', src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index$1 && this.renderGameDetails())))), index.h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, index.h("div", { class: "ButtonContainer" }, this.iconVisibility && index.h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, index.h("div", { class: `QustionMark ${this.animationStarted ? 'Flip' : ''}` }, "?"), index.h("div", { class: "HexagonMark" }, index.h("div", { class: "HexagonMarkBorder" }))), !this.animationStarted && index.h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))));
333
+ return index.h("div", { class: "RandomGameWrapper" }, index.h("div", { class: 'GameContainerGradient' }), index.h("div", { class: 'GamesContainer', ref: (el) => this.gameContainer = el }, this.gamesToShow && this.gamesToShow.map((game, index$1) => (index.h("div", { class: 'RandomGameCard', key: index$1, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : null }, index.h("div", { class: "RandomGameVendor" }, game.vendor.name), index.h("img", { class: 'RandomGameImage', src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index$1 && this.renderGameDetails())))), index.h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, index.h("div", { class: "ButtonContainer" }, this.iconVisibility && index.h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, index.h("div", { class: "QustionMark" }, "?"), index.h("div", { class: "HexagonMarkShadow" }), index.h("div", { class: "HexagonMark" })), !this.animationStarted && index.h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))));
334
334
  }
335
335
  }
336
336
  get host() { return index.getElement(this); }
package/dist/collection/components/casino-play-random-game/casino-play-random-game.css CHANGED
@@ -5,6 +5,7 @@
5
5
 
6
6
  .RandomGameWrapper {
7
7
  width: 100%;
8
+ height: var(--emw--size-4x-medium, 700px);
8
9
  overflow: hidden;
9
10
  background: transparent;
10
11
  position: relative;
@@ -12,39 +13,41 @@
12
13
 
13
14
  .GameContainerGradient {
14
15
  position: absolute;
15
- top: 0;
16
- left: 0;
16
+ top: 10%;
17
+ left: -5px;
17
18
  width: 100vw;
18
- height: 100%;
19
- background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.5) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.5) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);
19
+ height: 80%;
20
+ background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.5) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.5) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);
20
21
  pointer-events: none;
21
22
  z-index: 1;
23
+ filter: blur(10px);
22
24
  }
23
25
 
24
26
  .GamesContainer {
25
27
  display: flex;
26
- height: 330px;
28
+ height: var(--emw--size-4x-medium, 600px);
27
29
  flex-direction: row;
28
30
  flex-wrap: nowrap;
29
31
  justify-content: flex-start;
30
32
  align-items: center;
31
33
  align-content: flex-start;
32
- gap: 20px;
34
+ gap: var(--emw--spacing-large, 20px);
33
35
  }
34
36
 
35
37
  .RandomGameCard {
36
38
  position: relative;
37
- width: 256px;
38
- height: 170px;
39
- border-radius: 5px;
39
+ width: var(--emw--size-3x-medium, 300px);
40
+ height: var(--emw--size-4x-medium, 420px);
41
+ border-radius: var(--emw--border-radius-large, 20px);
42
+ top: 8%;
40
43
  filter: blur(5px);
41
44
  }
42
45
  .RandomGameCard .RandomGameVendor {
43
46
  position: absolute;
44
- font-size: 12px;
45
- bottom: 10px;
46
- left: 10px;
47
- color: var(--emfe-w-color-white, #FFFFFF);
47
+ font-size: var(--emw--font-size-x-small, 12px);
48
+ bottom: var(--emw--spacing-small-minus, 10px);
49
+ left: var(--emw--spacing-small-minus, 10px);
50
+ color: var(--emw--color-typography, #FFFFFF);
48
51
  }
49
52
 
50
53
  .TheRandomGame {
@@ -60,8 +63,10 @@
60
63
  }
61
64
 
62
65
  .RandomGameImage {
63
- width: 256px;
64
- height: 170px;
66
+ width: inherit;
67
+ height: inherit;
68
+ object-fit: cover;
69
+ border-radius: var(--emw--border-radius-large, 20px);
65
70
  }
66
71
 
67
72
  .RandomGameDetails {
@@ -69,8 +74,8 @@
69
74
  flex-direction: row;
70
75
  justify-content: space-between;
71
76
  align-items: center;
72
- color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
73
- font-size: 14px;
77
+ color: var(--emw--color-typography, #FFFFFF);
78
+ font-size: var(--emw--font-size-small, 14px);
74
79
  width: 100%;
75
80
  }
76
81
  .RandomGameDetails .RandomGameTitle {
@@ -78,24 +83,24 @@
78
83
  }
79
84
  .RandomGameDetails .RandomGameInfo {
80
85
  border-radius: 50%;
81
- width: 16px;
82
- height: 16px;
83
- font-size: 12px;
84
- font-weight: 400;
85
- border: solid 1px var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
86
+ width: var(--emw--spacing-medium, 16px);
87
+ height: var(--emw--spacing-medium, 16px);
88
+ font-size: var(--emw--font-size-x-small, 12px);
89
+ font-weight: var(--emw--font-weight-normal, 400);
90
+ border: solid 1px var(--emw--color-typography, #FFFFFF);
86
91
  text-align: center;
87
- margin: 4px 0;
92
+ margin: var(--emw--spacing-2x-small, 4px) 0;
88
93
  line-height: 14px;
89
94
  cursor: pointer;
90
95
  }
91
96
  .RandomGameDetails .RandomGamePlay {
92
- background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
93
- color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
97
+ background: var(--emw--color-primary, #4bd004);
98
+ color: var(--emw--color-typography, #FFFFFF);
94
99
  border: none;
95
- border-radius: 5px;
100
+ border-radius: var(--emw--border-radius-medium, 5px);
96
101
  width: 200px;
97
102
  height: 40px;
98
- font-size: 14px;
103
+ font-size: var(--emw--font-size-small, 14px);
99
104
  cursor: pointer;
100
105
  }
101
106
 
@@ -104,6 +109,7 @@
104
109
  top: 50%;
105
110
  left: 50%;
106
111
  transform: translate(-50%, -50%);
112
+ z-index: 100;
107
113
  }
108
114
 
109
115
  .ButtonContainer {
@@ -113,6 +119,7 @@
113
119
  align-items: center;
114
120
  gap: 10px;
115
121
  width: 100%;
122
+ position: relative;
116
123
  }
117
124
 
118
125
  .ButtonIcon {
@@ -120,37 +127,37 @@
120
127
  flex-direction: column;
121
128
  justify-content: center;
122
129
  align-items: center;
123
- gap: 5px;
130
+ gap: var(--emw--spacing-2x-small, 5px);
124
131
  }
125
132
 
126
133
  .QustionMark {
127
- position: relative;
128
- font-size: 80px;
129
- font-weight: 700;
130
- color: var(--emfe-w-color-white, #FFFFFF);
131
- z-index: 5;
132
- bottom: 20px;
133
- text-shadow: 0px 4px 0px var(--emfe-w-color-black, #000000);
134
- }
135
-
136
- .HexagonMark {
137
134
  position: absolute;
138
- width: 70px;
139
- height: 85px;
140
- background: linear-gradient(90deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);
141
- clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
135
+ font-family: sans-serif;
136
+ font-size: 120px;
137
+ font-weight: 900;
138
+ color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);
139
+ text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);
140
+ left: 50%;
141
+ top: -20%;
142
+ transform: translateX(-50%);
143
+ z-index: 10;
142
144
  }
143
145
 
144
- .HexagonMarkBorder {
145
- position: relative;
146
+ .HexagonMarkShadow {
147
+ width: 100px;
148
+ height: 115px;
146
149
  display: flex;
147
150
  justify-content: center;
148
151
  align-items: center;
149
- top: 5px;
150
- left: 5px;
151
- width: 60px;
152
- height: 75px;
153
- background: linear-gradient(180deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);
152
+ background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);
153
+ clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
154
+ }
155
+
156
+ .HexagonMark {
157
+ position: absolute;
158
+ width: var(--emw--size-medium, 90px);
159
+ height: 105px;
160
+ background: linear-gradient(to bottom, color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 20%) 0%, var(--emw--categories-color-secondary, var(--emw--color-secondary, #eeac4a)) 100%);
154
161
  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
155
162
  }
156
163
 
@@ -159,24 +166,27 @@
159
166
  flex-direction: row;
160
167
  justify-content: center;
161
168
  align-items: center;
162
- gap: 5px;
169
+ gap: var(--emw--spacing-2x-small, 5px);
163
170
  width: 100%;
171
+ position: relative;
172
+ z-index: 10;
164
173
  }
165
174
 
166
175
  .RandomButton {
167
- font-size: 18px;
176
+ font-size: var(--emw--font-size-large, 20px);
168
177
  text-transform: uppercase;
169
178
  width: max-content;
170
- border-radius: 5px;
171
- padding: 5px 25px;
172
- border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
173
- color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
179
+ border-radius: var(--emw--button-border-radius, 50px);
180
+ padding: var(--emw--spacing-large, 20px) var(--emw--spacing-2x-large, 40px);
181
+ border: solid 3px var(--emw--button-border-color, #063B17);
182
+ color: var(--emw--button-text-color, #FFFFFF);
174
183
  opacity: 1;
175
- text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);
176
184
  animation: ButtonEffect 3s linear infinite;
177
- background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));
185
+ background-image: linear-gradient(to right, var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E), black 30%), var(--emw--color-primary, #22B04E));
178
186
  background-size: 300% 100%;
179
187
  cursor: pointer;
188
+ position: relative;
189
+ z-index: 10;
180
190
  }
181
191
  .RandomButton:hover {
182
192
  opacity: 0.8;
@@ -262,27 +272,43 @@
262
272
  }
263
273
  }
264
274
  @container (max-width: 475px) {
275
+ .GamesContainer {
276
+ height: inherit;
277
+ gap: var(--emw--spacing-2x-small, 5px);
278
+ }
279
+
280
+ .RandomGameWrapper {
281
+ width: 100%;
282
+ height: 300px;
283
+ overflow: hidden;
284
+ background: transparent;
285
+ position: relative;
286
+ }
287
+
265
288
  .GameContainerGradient {
266
289
  position: absolute;
267
- top: 0;
268
- left: 0;
290
+ top: 10%;
291
+ left: -5px;
269
292
  width: 100vw;
270
- height: 100%;
271
- background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.2) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.2) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);
293
+ height: 80%;
294
+ background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.2) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.2) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);
272
295
  pointer-events: none;
273
296
  z-index: 1;
297
+ filter: blur(5px);
274
298
  }
275
299
 
276
300
  .RandomGameCard {
277
- width: 102px;
278
- height: 146px;
279
- border-radius: 5px;
301
+ width: 100px;
302
+ height: 150px;
303
+ top: 0%;
304
+ border-radius: var(--emw--border-radius-medium, 4px);
280
305
  filter: blur(5px);
281
306
  }
282
307
 
283
308
  .RandomGameImage {
284
309
  width: 102px;
285
- height: 146px;
310
+ height: inherit;
311
+ top: 0%;
286
312
  }
287
313
 
288
314
  .RandomGameDetails {
@@ -297,12 +323,12 @@
297
323
  border-radius: 50%;
298
324
  width: 16px;
299
325
  height: 16px;
300
- font-size: 12px;
326
+ font-size: var(--emw--font-size-x-small, 12px);
301
327
  line-height: 14px;
302
328
  }
303
329
  .RandomGameDetails .RandomGamePlay {
304
- background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
305
- color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
330
+ background: var(--emw--color-primary, #52d004);
331
+ color: var(--emw--color-typography, #FFFFFF);
306
332
  border: none;
307
333
  border-radius: 5px;
308
334
  width: 200px;
@@ -312,7 +338,7 @@
312
338
  }
313
339
 
314
340
  .RandomGameCard .RandomGameVendor {
315
- font-size: 12px;
341
+ font-size: var(--emw--font-size-x-small, 12px);
316
342
  bottom: 5px;
317
343
  right: 5px;
318
344
  }
@@ -327,21 +353,23 @@
327
353
  }
328
354
 
329
355
  .RandomButton {
330
- font-size: 18px;
331
- text-transform: uppercase;
332
- width: max-content;
333
- border-radius: 5px;
334
- padding: 5px 25px;
335
- border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
336
- color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
337
- opacity: 1;
338
- text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);
339
- animation: ButtonEffect 3s linear infinite;
340
- background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));
341
- background-size: 300% 100%;
342
- cursor: pointer;
356
+ font-size: var(--emw--font-size-x-small, 12px);
357
+ padding: 10px 15px;
358
+ border: solid 1px var(--emw--button-border-color, #063B17);
359
+ }
360
+
361
+ .QustionMark {
362
+ font-size: 100px;
363
+ font-weight: 700;
343
364
  }
344
- .RandomButton:hover {
345
- opacity: 0.8;
365
+
366
+ .HexagonMarkShadow {
367
+ width: 80px;
368
+ height: 95px;
369
+ }
370
+
371
+ .HexagonMark {
372
+ width: 70px;
373
+ height: 85px;
346
374
  }
347
375
  }
package/dist/collection/components/casino-play-random-game/casino-play-random-game.js CHANGED
@@ -253,9 +253,9 @@ export class CasinoPlayRandomGame {
253
253
  h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` },
254
254
  h("div", { class: "ButtonContainer" },
255
255
  this.iconVisibility && h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` },
256
- h("div", { class: `QustionMark ${this.animationStarted ? 'Flip' : ''}` }, "?"),
257
- h("div", { class: "HexagonMark" },
258
- h("div", { class: "HexagonMarkBorder" }))),
256
+ h("div", { class: "QustionMark" }, "?"),
257
+ h("div", { class: "HexagonMarkShadow" }),
258
+ h("div", { class: "HexagonMark" })),
259
259
  !this.animationStarted && h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))));
260
260
  }
261
261
  }
package/dist/components/casino-play-random-game.js CHANGED
@@ -88,7 +88,7 @@ const translate = (key, customLang, values) => {
88
88
  return translation;
89
89
  };
90
90
 
91
- const casinoPlayRandomGameCss = ":host {\n display: block;\n font-family: inherit;\n}\n\n.RandomGameWrapper {\n width: 100%;\n overflow: hidden;\n background: transparent;\n position: relative;\n}\n\n.GameContainerGradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.5) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.5) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);\n pointer-events: none;\n z-index: 1;\n}\n\n.GamesContainer {\n display: flex;\n height: 330px;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n align-content: flex-start;\n gap: 20px;\n}\n\n.RandomGameCard {\n position: relative;\n width: 256px;\n height: 170px;\n border-radius: 5px;\n filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n position: absolute;\n font-size: 12px;\n bottom: 10px;\n left: 10px;\n color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.TheRandomGame {\n animation-name: ZoomFadeIn;\n animation-duration: 0.5s;\n animation-fill-mode: forwards;\n -webkit-animation-name: ZoomFadeIn;\n -webkit-animation-duration: 0.5s;\n -webkit-animation-fill-mode: forwards;\n opacity: 1;\n cursor: pointer;\n filter: blur(0);\n}\n\n.RandomGameImage {\n width: 256px;\n height: 170px;\n}\n\n.RandomGameDetails {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));\n font-size: 14px;\n width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n}\n.RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 12px;\n font-weight: 400;\n border: solid 1px var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));\n text-align: center;\n margin: 4px 0;\n line-height: 14px;\n cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n}\n\n.ButtonWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.ButtonContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n}\n\n.ButtonIcon {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n}\n\n.QustionMark {\n position: relative;\n font-size: 80px;\n font-weight: 700;\n color: var(--emfe-w-color-white, #FFFFFF);\n z-index: 5;\n bottom: 20px;\n text-shadow: 0px 4px 0px var(--emfe-w-color-black, #000000);\n}\n\n.HexagonMark {\n position: absolute;\n width: 70px;\n height: 85px;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMarkBorder {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n top: 5px;\n left: 5px;\n width: 60px;\n height: 75px;\n background: linear-gradient(180deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n}\n\n.RandomButton {\n font-size: 18px;\n text-transform: uppercase;\n width: max-content;\n border-radius: 5px;\n padding: 5px 25px;\n border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n opacity: 1;\n text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));\n background-size: 300% 100%;\n cursor: pointer;\n}\n.RandomButton:hover {\n opacity: 0.8;\n}\n\n.HideAnimation {\n filter: blur(5px);\n animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n animation-name: Flip, Blur;\n animation-duration: 0.75s, 3s;\n animation-iteration-count: infinite, 1;\n -webkit-animation-name: Flip, Blur;\n -webkit-animation-duration: 0.75s, 3s;\n -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n 0% {\n background-position: 0% 50%;\n }\n 33% {\n background-position: 100% 50%;\n }\n 66% {\n background-position: 200% 50%;\n }\n 100% {\n background-position: 300% 50%;\n }\n}\n@keyframes ZoomFadeIn {\n 0% {\n transform: scale(0.2) translateY(0);\n filter: blur(5px);\n opacity: 0.3;\n }\n 50% {\n transform: scale(1.1) translateY(-30px);\n filter: blur(2px);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1) translateY(-30px);\n filter: blur(0px);\n opacity: 1;\n }\n}\n@keyframes AnimateButton {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n}\n@keyframes Flip {\n 0% {\n transform: rotateY(0deg);\n }\n 50% {\n transform: rotateY(180deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n@keyframes Blur {\n 0% {\n filter: blur(0);\n }\n 50% {\n filter: blur(1px);\n }\n 100% {\n filter: blur(3px);\n }\n}\n@container (max-width: 475px) {\n .GameContainerGradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.2) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.2) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);\n pointer-events: none;\n z-index: 1;\n }\n\n .RandomGameCard {\n width: 102px;\n height: 146px;\n border-radius: 5px;\n filter: blur(5px);\n }\n\n .RandomGameImage {\n width: 102px;\n height: 146px;\n }\n\n .RandomGameDetails {\n font-size: 14px;\n width: 100%;\n }\n .RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n width: 75%;\n }\n .RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 12px;\n line-height: 14px;\n }\n .RandomGameDetails .RandomGamePlay {\n background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n }\n\n .RandomGameCard .RandomGameVendor {\n font-size: 12px;\n bottom: 5px;\n right: 5px;\n }\n\n .RandomButtons {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .RandomButton {\n font-size: 18px;\n text-transform: uppercase;\n width: max-content;\n border-radius: 5px;\n padding: 5px 25px;\n border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n opacity: 1;\n text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));\n background-size: 300% 100%;\n cursor: pointer;\n }\n .RandomButton:hover {\n opacity: 0.8;\n }\n}";
91
+ const casinoPlayRandomGameCss = ":host {\n display: block;\n font-family: inherit;\n}\n\n.RandomGameWrapper {\n width: 100%;\n height: var(--emw--size-4x-medium, 700px);\n overflow: hidden;\n background: transparent;\n position: relative;\n}\n\n.GameContainerGradient {\n position: absolute;\n top: 10%;\n left: -5px;\n width: 100vw;\n height: 80%;\n background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.5) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.5) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n pointer-events: none;\n z-index: 1;\n filter: blur(10px);\n}\n\n.GamesContainer {\n display: flex;\n height: var(--emw--size-4x-medium, 600px);\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n align-content: flex-start;\n gap: var(--emw--spacing-large, 20px);\n}\n\n.RandomGameCard {\n position: relative;\n width: var(--emw--size-3x-medium, 300px);\n height: var(--emw--size-4x-medium, 420px);\n border-radius: var(--emw--border-radius-large, 20px);\n top: 8%;\n filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n position: absolute;\n font-size: var(--emw--font-size-x-small, 12px);\n bottom: var(--emw--spacing-small-minus, 10px);\n left: var(--emw--spacing-small-minus, 10px);\n color: var(--emw--color-typography, #FFFFFF);\n}\n\n.TheRandomGame {\n animation-name: ZoomFadeIn;\n animation-duration: 0.5s;\n animation-fill-mode: forwards;\n -webkit-animation-name: ZoomFadeIn;\n -webkit-animation-duration: 0.5s;\n -webkit-animation-fill-mode: forwards;\n opacity: 1;\n cursor: pointer;\n filter: blur(0);\n}\n\n.RandomGameImage {\n width: inherit;\n height: inherit;\n object-fit: cover;\n border-radius: var(--emw--border-radius-large, 20px);\n}\n\n.RandomGameDetails {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: var(--emw--color-typography, #FFFFFF);\n font-size: var(--emw--font-size-small, 14px);\n width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n}\n.RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: var(--emw--spacing-medium, 16px);\n height: var(--emw--spacing-medium, 16px);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-normal, 400);\n border: solid 1px var(--emw--color-typography, #FFFFFF);\n text-align: center;\n margin: var(--emw--spacing-2x-small, 4px) 0;\n line-height: 14px;\n cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n background: var(--emw--color-primary, #4bd004);\n color: var(--emw--color-typography, #FFFFFF);\n border: none;\n border-radius: var(--emw--border-radius-medium, 5px);\n width: 200px;\n height: 40px;\n font-size: var(--emw--font-size-small, 14px);\n cursor: pointer;\n}\n\n.ButtonWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 100;\n}\n\n.ButtonContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n position: relative;\n}\n\n.ButtonIcon {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--emw--spacing-2x-small, 5px);\n}\n\n.QustionMark {\n position: absolute;\n font-family: sans-serif;\n font-size: 120px;\n font-weight: 900;\n color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);\n text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);\n left: 50%;\n top: -20%;\n transform: translateX(-50%);\n z-index: 10;\n}\n\n.HexagonMarkShadow {\n width: 100px;\n height: 115px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMark {\n position: absolute;\n width: var(--emw--size-medium, 90px);\n height: 105px;\n background: linear-gradient(to bottom, color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 20%) 0%, var(--emw--categories-color-secondary, var(--emw--color-secondary, #eeac4a)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: var(--emw--spacing-2x-small, 5px);\n width: 100%;\n position: relative;\n z-index: 10;\n}\n\n.RandomButton {\n font-size: var(--emw--font-size-large, 20px);\n text-transform: uppercase;\n width: max-content;\n border-radius: var(--emw--button-border-radius, 50px);\n padding: var(--emw--spacing-large, 20px) var(--emw--spacing-2x-large, 40px);\n border: solid 3px var(--emw--button-border-color, #063B17);\n color: var(--emw--button-text-color, #FFFFFF);\n opacity: 1;\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E), black 30%), var(--emw--color-primary, #22B04E));\n background-size: 300% 100%;\n cursor: pointer;\n position: relative;\n z-index: 10;\n}\n.RandomButton:hover {\n opacity: 0.8;\n}\n\n.HideAnimation {\n filter: blur(5px);\n animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n animation-name: Flip, Blur;\n animation-duration: 0.75s, 3s;\n animation-iteration-count: infinite, 1;\n -webkit-animation-name: Flip, Blur;\n -webkit-animation-duration: 0.75s, 3s;\n -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n 0% {\n background-position: 0% 50%;\n }\n 33% {\n background-position: 100% 50%;\n }\n 66% {\n background-position: 200% 50%;\n }\n 100% {\n background-position: 300% 50%;\n }\n}\n@keyframes ZoomFadeIn {\n 0% {\n transform: scale(0.2) translateY(0);\n filter: blur(5px);\n opacity: 0.3;\n }\n 50% {\n transform: scale(1.1) translateY(-30px);\n filter: blur(2px);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1) translateY(-30px);\n filter: blur(0px);\n opacity: 1;\n }\n}\n@keyframes AnimateButton {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n}\n@keyframes Flip {\n 0% {\n transform: rotateY(0deg);\n }\n 50% {\n transform: rotateY(180deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n@keyframes Blur {\n 0% {\n filter: blur(0);\n }\n 50% {\n filter: blur(1px);\n }\n 100% {\n filter: blur(3px);\n }\n}\n@container (max-width: 475px) {\n .GamesContainer {\n height: inherit;\n gap: var(--emw--spacing-2x-small, 5px);\n }\n\n .RandomGameWrapper {\n width: 100%;\n height: 300px;\n overflow: hidden;\n background: transparent;\n position: relative;\n }\n\n .GameContainerGradient {\n position: absolute;\n top: 10%;\n left: -5px;\n width: 100vw;\n height: 80%;\n background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.2) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.2) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n pointer-events: none;\n z-index: 1;\n filter: blur(5px);\n }\n\n .RandomGameCard {\n width: 100px;\n height: 150px;\n top: 0%;\n border-radius: var(--emw--border-radius-medium, 4px);\n filter: blur(5px);\n }\n\n .RandomGameImage {\n width: 102px;\n height: inherit;\n top: 0%;\n }\n\n .RandomGameDetails {\n font-size: 14px;\n width: 100%;\n }\n .RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n width: 75%;\n }\n .RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 14px;\n }\n .RandomGameDetails .RandomGamePlay {\n background: var(--emw--color-primary, #52d004);\n color: var(--emw--color-typography, #FFFFFF);\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n }\n\n .RandomGameCard .RandomGameVendor {\n font-size: var(--emw--font-size-x-small, 12px);\n bottom: 5px;\n right: 5px;\n }\n\n .RandomButtons {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .RandomButton {\n font-size: var(--emw--font-size-x-small, 12px);\n padding: 10px 15px;\n border: solid 1px var(--emw--button-border-color, #063B17);\n }\n\n .QustionMark {\n font-size: 100px;\n font-weight: 700;\n }\n\n .HexagonMarkShadow {\n width: 80px;\n height: 95px;\n }\n\n .HexagonMark {\n width: 70px;\n height: 85px;\n }\n}";
92
92
 
93
93
  const CasinoPlayRandomGame$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
94
94
  constructor() {
@@ -328,7 +328,7 @@ const CasinoPlayRandomGame$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
328
328
  return (h("div", { class: "RandomGameLoading" }, h("div", { class: "Title" }, translate('randomGameLoading', this.language))));
329
329
  }
330
330
  if (!this.isLoading) {
331
- return h("div", { class: "RandomGameWrapper" }, h("div", { class: 'GameContainerGradient' }), h("div", { class: 'GamesContainer', ref: (el) => this.gameContainer = el }, this.gamesToShow && this.gamesToShow.map((game, index) => (h("div", { class: 'RandomGameCard', key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : null }, h("div", { class: "RandomGameVendor" }, game.vendor.name), h("img", { class: 'RandomGameImage', src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index && this.renderGameDetails())))), h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, h("div", { class: "ButtonContainer" }, this.iconVisibility && h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, h("div", { class: `QustionMark ${this.animationStarted ? 'Flip' : ''}` }, "?"), h("div", { class: "HexagonMark" }, h("div", { class: "HexagonMarkBorder" }))), !this.animationStarted && h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))));
331
+ return h("div", { class: "RandomGameWrapper" }, h("div", { class: 'GameContainerGradient' }), h("div", { class: 'GamesContainer', ref: (el) => this.gameContainer = el }, this.gamesToShow && this.gamesToShow.map((game, index) => (h("div", { class: 'RandomGameCard', key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : null }, h("div", { class: "RandomGameVendor" }, game.vendor.name), h("img", { class: 'RandomGameImage', src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index && this.renderGameDetails())))), h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, h("div", { class: "ButtonContainer" }, this.iconVisibility && h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, h("div", { class: "QustionMark" }, "?"), h("div", { class: "HexagonMarkShadow" }), h("div", { class: "HexagonMark" })), !this.animationStarted && h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))));
332
332
  }
333
333
  }
334
334
  get host() { return this; }
package/dist/esm/casino-play-random-game.entry.js CHANGED
@@ -88,7 +88,7 @@ const translate = (key, customLang, values) => {
88
88
  return translation;
89
89
  };
90
90
 
91
- const casinoPlayRandomGameCss = ":host {\n display: block;\n font-family: inherit;\n}\n\n.RandomGameWrapper {\n width: 100%;\n overflow: hidden;\n background: transparent;\n position: relative;\n}\n\n.GameContainerGradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.5) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.5) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);\n pointer-events: none;\n z-index: 1;\n}\n\n.GamesContainer {\n display: flex;\n height: 330px;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n align-content: flex-start;\n gap: 20px;\n}\n\n.RandomGameCard {\n position: relative;\n width: 256px;\n height: 170px;\n border-radius: 5px;\n filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n position: absolute;\n font-size: 12px;\n bottom: 10px;\n left: 10px;\n color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.TheRandomGame {\n animation-name: ZoomFadeIn;\n animation-duration: 0.5s;\n animation-fill-mode: forwards;\n -webkit-animation-name: ZoomFadeIn;\n -webkit-animation-duration: 0.5s;\n -webkit-animation-fill-mode: forwards;\n opacity: 1;\n cursor: pointer;\n filter: blur(0);\n}\n\n.RandomGameImage {\n width: 256px;\n height: 170px;\n}\n\n.RandomGameDetails {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));\n font-size: 14px;\n width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n}\n.RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 12px;\n font-weight: 400;\n border: solid 1px var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));\n text-align: center;\n margin: 4px 0;\n line-height: 14px;\n cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n}\n\n.ButtonWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.ButtonContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n}\n\n.ButtonIcon {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n}\n\n.QustionMark {\n position: relative;\n font-size: 80px;\n font-weight: 700;\n color: var(--emfe-w-color-white, #FFFFFF);\n z-index: 5;\n bottom: 20px;\n text-shadow: 0px 4px 0px var(--emfe-w-color-black, #000000);\n}\n\n.HexagonMark {\n position: absolute;\n width: 70px;\n height: 85px;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMarkBorder {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n top: 5px;\n left: 5px;\n width: 60px;\n height: 75px;\n background: linear-gradient(180deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n}\n\n.RandomButton {\n font-size: 18px;\n text-transform: uppercase;\n width: max-content;\n border-radius: 5px;\n padding: 5px 25px;\n border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n opacity: 1;\n text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));\n background-size: 300% 100%;\n cursor: pointer;\n}\n.RandomButton:hover {\n opacity: 0.8;\n}\n\n.HideAnimation {\n filter: blur(5px);\n animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n animation-name: Flip, Blur;\n animation-duration: 0.75s, 3s;\n animation-iteration-count: infinite, 1;\n -webkit-animation-name: Flip, Blur;\n -webkit-animation-duration: 0.75s, 3s;\n -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n 0% {\n background-position: 0% 50%;\n }\n 33% {\n background-position: 100% 50%;\n }\n 66% {\n background-position: 200% 50%;\n }\n 100% {\n background-position: 300% 50%;\n }\n}\n@keyframes ZoomFadeIn {\n 0% {\n transform: scale(0.2) translateY(0);\n filter: blur(5px);\n opacity: 0.3;\n }\n 50% {\n transform: scale(1.1) translateY(-30px);\n filter: blur(2px);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1) translateY(-30px);\n filter: blur(0px);\n opacity: 1;\n }\n}\n@keyframes AnimateButton {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n}\n@keyframes Flip {\n 0% {\n transform: rotateY(0deg);\n }\n 50% {\n transform: rotateY(180deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n@keyframes Blur {\n 0% {\n filter: blur(0);\n }\n 50% {\n filter: blur(1px);\n }\n 100% {\n filter: blur(3px);\n }\n}\n@container (max-width: 475px) {\n .GameContainerGradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.2) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.2) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);\n pointer-events: none;\n z-index: 1;\n }\n\n .RandomGameCard {\n width: 102px;\n height: 146px;\n border-radius: 5px;\n filter: blur(5px);\n }\n\n .RandomGameImage {\n width: 102px;\n height: 146px;\n }\n\n .RandomGameDetails {\n font-size: 14px;\n width: 100%;\n }\n .RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n width: 75%;\n }\n .RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 12px;\n line-height: 14px;\n }\n .RandomGameDetails .RandomGamePlay {\n background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n }\n\n .RandomGameCard .RandomGameVendor {\n font-size: 12px;\n bottom: 5px;\n right: 5px;\n }\n\n .RandomButtons {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .RandomButton {\n font-size: 18px;\n text-transform: uppercase;\n width: max-content;\n border-radius: 5px;\n padding: 5px 25px;\n border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n opacity: 1;\n text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));\n background-size: 300% 100%;\n cursor: pointer;\n }\n .RandomButton:hover {\n opacity: 0.8;\n }\n}";
91
+ const casinoPlayRandomGameCss = ":host {\n display: block;\n font-family: inherit;\n}\n\n.RandomGameWrapper {\n width: 100%;\n height: var(--emw--size-4x-medium, 700px);\n overflow: hidden;\n background: transparent;\n position: relative;\n}\n\n.GameContainerGradient {\n position: absolute;\n top: 10%;\n left: -5px;\n width: 100vw;\n height: 80%;\n background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.5) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.5) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n pointer-events: none;\n z-index: 1;\n filter: blur(10px);\n}\n\n.GamesContainer {\n display: flex;\n height: var(--emw--size-4x-medium, 600px);\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n align-content: flex-start;\n gap: var(--emw--spacing-large, 20px);\n}\n\n.RandomGameCard {\n position: relative;\n width: var(--emw--size-3x-medium, 300px);\n height: var(--emw--size-4x-medium, 420px);\n border-radius: var(--emw--border-radius-large, 20px);\n top: 8%;\n filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n position: absolute;\n font-size: var(--emw--font-size-x-small, 12px);\n bottom: var(--emw--spacing-small-minus, 10px);\n left: var(--emw--spacing-small-minus, 10px);\n color: var(--emw--color-typography, #FFFFFF);\n}\n\n.TheRandomGame {\n animation-name: ZoomFadeIn;\n animation-duration: 0.5s;\n animation-fill-mode: forwards;\n -webkit-animation-name: ZoomFadeIn;\n -webkit-animation-duration: 0.5s;\n -webkit-animation-fill-mode: forwards;\n opacity: 1;\n cursor: pointer;\n filter: blur(0);\n}\n\n.RandomGameImage {\n width: inherit;\n height: inherit;\n object-fit: cover;\n border-radius: var(--emw--border-radius-large, 20px);\n}\n\n.RandomGameDetails {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: var(--emw--color-typography, #FFFFFF);\n font-size: var(--emw--font-size-small, 14px);\n width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n}\n.RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: var(--emw--spacing-medium, 16px);\n height: var(--emw--spacing-medium, 16px);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-normal, 400);\n border: solid 1px var(--emw--color-typography, #FFFFFF);\n text-align: center;\n margin: var(--emw--spacing-2x-small, 4px) 0;\n line-height: 14px;\n cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n background: var(--emw--color-primary, #4bd004);\n color: var(--emw--color-typography, #FFFFFF);\n border: none;\n border-radius: var(--emw--border-radius-medium, 5px);\n width: 200px;\n height: 40px;\n font-size: var(--emw--font-size-small, 14px);\n cursor: pointer;\n}\n\n.ButtonWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 100;\n}\n\n.ButtonContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n position: relative;\n}\n\n.ButtonIcon {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--emw--spacing-2x-small, 5px);\n}\n\n.QustionMark {\n position: absolute;\n font-family: sans-serif;\n font-size: 120px;\n font-weight: 900;\n color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);\n text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);\n left: 50%;\n top: -20%;\n transform: translateX(-50%);\n z-index: 10;\n}\n\n.HexagonMarkShadow {\n width: 100px;\n height: 115px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMark {\n position: absolute;\n width: var(--emw--size-medium, 90px);\n height: 105px;\n background: linear-gradient(to bottom, color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 20%) 0%, var(--emw--categories-color-secondary, var(--emw--color-secondary, #eeac4a)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: var(--emw--spacing-2x-small, 5px);\n width: 100%;\n position: relative;\n z-index: 10;\n}\n\n.RandomButton {\n font-size: var(--emw--font-size-large, 20px);\n text-transform: uppercase;\n width: max-content;\n border-radius: var(--emw--button-border-radius, 50px);\n padding: var(--emw--spacing-large, 20px) var(--emw--spacing-2x-large, 40px);\n border: solid 3px var(--emw--button-border-color, #063B17);\n color: var(--emw--button-text-color, #FFFFFF);\n opacity: 1;\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E), black 30%), var(--emw--color-primary, #22B04E));\n background-size: 300% 100%;\n cursor: pointer;\n position: relative;\n z-index: 10;\n}\n.RandomButton:hover {\n opacity: 0.8;\n}\n\n.HideAnimation {\n filter: blur(5px);\n animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n animation-name: Flip, Blur;\n animation-duration: 0.75s, 3s;\n animation-iteration-count: infinite, 1;\n -webkit-animation-name: Flip, Blur;\n -webkit-animation-duration: 0.75s, 3s;\n -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n 0% {\n background-position: 0% 50%;\n }\n 33% {\n background-position: 100% 50%;\n }\n 66% {\n background-position: 200% 50%;\n }\n 100% {\n background-position: 300% 50%;\n }\n}\n@keyframes ZoomFadeIn {\n 0% {\n transform: scale(0.2) translateY(0);\n filter: blur(5px);\n opacity: 0.3;\n }\n 50% {\n transform: scale(1.1) translateY(-30px);\n filter: blur(2px);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1) translateY(-30px);\n filter: blur(0px);\n opacity: 1;\n }\n}\n@keyframes AnimateButton {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n}\n@keyframes Flip {\n 0% {\n transform: rotateY(0deg);\n }\n 50% {\n transform: rotateY(180deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n@keyframes Blur {\n 0% {\n filter: blur(0);\n }\n 50% {\n filter: blur(1px);\n }\n 100% {\n filter: blur(3px);\n }\n}\n@container (max-width: 475px) {\n .GamesContainer {\n height: inherit;\n gap: var(--emw--spacing-2x-small, 5px);\n }\n\n .RandomGameWrapper {\n width: 100%;\n height: 300px;\n overflow: hidden;\n background: transparent;\n position: relative;\n }\n\n .GameContainerGradient {\n position: absolute;\n top: 10%;\n left: -5px;\n width: 100vw;\n height: 80%;\n background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.2) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.2) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n pointer-events: none;\n z-index: 1;\n filter: blur(5px);\n }\n\n .RandomGameCard {\n width: 100px;\n height: 150px;\n top: 0%;\n border-radius: var(--emw--border-radius-medium, 4px);\n filter: blur(5px);\n }\n\n .RandomGameImage {\n width: 102px;\n height: inherit;\n top: 0%;\n }\n\n .RandomGameDetails {\n font-size: 14px;\n width: 100%;\n }\n .RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n width: 75%;\n }\n .RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 14px;\n }\n .RandomGameDetails .RandomGamePlay {\n background: var(--emw--color-primary, #52d004);\n color: var(--emw--color-typography, #FFFFFF);\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n }\n\n .RandomGameCard .RandomGameVendor {\n font-size: var(--emw--font-size-x-small, 12px);\n bottom: 5px;\n right: 5px;\n }\n\n .RandomButtons {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .RandomButton {\n font-size: var(--emw--font-size-x-small, 12px);\n padding: 10px 15px;\n border: solid 1px var(--emw--button-border-color, #063B17);\n }\n\n .QustionMark {\n font-size: 100px;\n font-weight: 700;\n }\n\n .HexagonMarkShadow {\n width: 80px;\n height: 95px;\n }\n\n .HexagonMark {\n width: 70px;\n height: 85px;\n }\n}";
92
92
 
93
93
  const CasinoPlayRandomGame = class {
94
94
  constructor(hostRef) {
@@ -326,7 +326,7 @@ const CasinoPlayRandomGame = class {
326
326
  return (h("div", { class: "RandomGameLoading" }, h("div", { class: "Title" }, translate('randomGameLoading', this.language))));
327
327
  }
328
328
  if (!this.isLoading) {
329
- return h("div", { class: "RandomGameWrapper" }, h("div", { class: 'GameContainerGradient' }), h("div", { class: 'GamesContainer', ref: (el) => this.gameContainer = el }, this.gamesToShow && this.gamesToShow.map((game, index) => (h("div", { class: 'RandomGameCard', key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : null }, h("div", { class: "RandomGameVendor" }, game.vendor.name), h("img", { class: 'RandomGameImage', src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index && this.renderGameDetails())))), h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, h("div", { class: "ButtonContainer" }, this.iconVisibility && h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, h("div", { class: `QustionMark ${this.animationStarted ? 'Flip' : ''}` }, "?"), h("div", { class: "HexagonMark" }, h("div", { class: "HexagonMarkBorder" }))), !this.animationStarted && h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))));
329
+ return h("div", { class: "RandomGameWrapper" }, h("div", { class: 'GameContainerGradient' }), h("div", { class: 'GamesContainer', ref: (el) => this.gameContainer = el }, this.gamesToShow && this.gamesToShow.map((game, index) => (h("div", { class: 'RandomGameCard', key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : null }, h("div", { class: "RandomGameVendor" }, game.vendor.name), h("img", { class: 'RandomGameImage', src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index && this.renderGameDetails())))), h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, h("div", { class: "ButtonContainer" }, this.iconVisibility && h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, h("div", { class: "QustionMark" }, "?"), h("div", { class: "HexagonMarkShadow" }), h("div", { class: "HexagonMark" })), !this.animationStarted && h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))));
330
330
  }
331
331
  }
332
332
  get host() { return getElement(this); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-play-random-game",
3
- "version": "1.36.1",
3
+ "version": "1.37.2",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
package/dist/casino-play-random-game/p-f75784e9.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as n,h as a,g as e}from"./p-0f38b3f8.js";const o={en:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},ro:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},fr:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},hr:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},hu:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},tr:{error:"Hata",randomGameLoading:"Yükleniyor...",playRandomGame:"Rasgele bir oyun oyna",playNowRandomGame:"Şimdi Oyna",spinRandomGame:"DEĞİŞTİR"}},t=n=>new Promise((a=>{fetch(n).then((n=>n.json())).then((n=>{Object.keys(n).forEach((a=>{a in o||(o[a]={});for(let e in n[a])o[a][e]=n[a][e]})),a(!0)}))})),i=(n,a,e)=>{let t=o[void 0!==a?a:"en"][n];if(void 0!==e)for(const[n,a]of Object.entries(e.values)){const e=new RegExp(`{${n}}`,"g");t=t.replace(e,a)}return t},r=class{constructor(a){n(this,a),this.language="en",this.specificCategory="",this.iconVisible="",this.iconVisibleOnAnim="",this.launchByGameCard="",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.hasErrors=!1,this.limitStylingAppends=!1,this.isLoading=!0,this.selectedGame=null,this.animationDone=!1,this.animationStarted=!1,this.animation=null,this.selectedGameIndex=null,this.selectedGameEl=null,this.iconVisibility=null,this.shuffle=n=>{let a,e=n.length;for(;0!==e;)a=Math.floor(Math.random()*e),e--,[n[e],n[a]]=[n[a],n[e]];return n},this.setClientStyling=()=>{let n=document.createElement("style");n.innerHTML=this.clientStyling,this.host.shadowRoot.prepend(n)},this.setClientStylingURL=()=>{let n=new URL(this.clientStylingUrl),a=document.createElement("style");fetch(n.href).then((n=>n.text())).then((n=>{a.innerHTML=n,this.clientStyling=n,setTimeout((()=>{this.host.shadowRoot.prepend(a)}),1)}))}}watchEndpoint(n,a){n&&n!=a&&this.endpoint&&this.fetchGameList()}handleNewTranslations(){this.isLoading=!0,t(this.translationUrl).then((()=>{this.isLoading=!1}))}connectedCallback(){this.iconVisibility="true"===this.iconVisible}componentWillLoad(){if(this.translationUrl.length>2&&t(this.translationUrl),this.endpoint&&this.language&&this.datasource)return this.fetchGameList()}componentDidLoad(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}fetchGameList(){let n=new URL(`${this.endpoint}/v1/casino/games`);return n.searchParams.append("platform",(()=>{let n=window.navigator.userAgent;return n.toLowerCase().match(/android/i)?"Android":n.toLowerCase().match(/iphone/i)?"iPhone":n.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})()),n.searchParams.append("datasource",this.datasource),n.searchParams.append("fields","gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"),n.searchParams.append("expand","vendor"),n.searchParams.append("pagination","offset=0,limit=423"),n.searchParams.append("language",this.language),this.specificCategory&&n.searchParams.append("filter",`categories(id=${this.specificCategory})`),new Promise(((a,e)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{this.gamesToShow=this.setUpGames(null==n?void 0:n.items),a(!0)})).catch((n=>{console.error(n),this.hasErrors=!0,e(n)})).finally((()=>{this.isLoading=!1}))}))}setUpGames(n){const a=this.shuffle(n).slice(0,40);return a.concat(a)}selectRandomGame(){const n=this.gamesToShow.length/2;this.selectedGameIndex=Math.floor(Math.random()*(n-3)),this.selectedGameIndex+=n,this.selectedGameEl=this.gameContainer.children[this.selectedGameIndex]}playRandomGame(){this.animateGames(),"function"==typeof gtag&&gtag("event","PlayRandomGame",{context:"CasinoPlayRandomGame"})}respin(){this.animateGames(),"function"==typeof gtag&&gtag("event","RespinRandomGame",{context:"CasinoPlayRandomGame"})}animateGames(){this.iconVisibility="true"===this.iconVisibleOnAnim,this.animationStarted=!0,this.animationDone=!1,this.animation&&this.animation.cancel(),this.selectedGameEl&&(this.selectedGameEl.classList.remove("TheRandomGame"),this.selectedGame=null,this.selectedGameIndex=null),this.selectRandomGame();const n=window.getComputedStyle(this.gameContainer).getPropertyValue("gap"),a=parseInt(n,10),e=this.selectedGameEl.offsetWidth;this.animation=this.gameContainer.animate([{transform:"translateX(0px)",scale:1},{scale:.75},{transform:`translateX(-${(e+a)*this.selectedGameIndex+e/2-this.gameContainer.offsetWidth/2}px)`,scale:1}],{duration:3e3,easing:"cubic-bezier(0.5, 0, 0.5, 1.2)",fill:"forwards"}),this.animation.onfinish=()=>{this.animationDone=!0,this.selectedGameEl.classList.add("TheRandomGame"),this.selectedGame=this.gamesToShow[this.selectedGameIndex]}}playGame(){this.selectedGame&&(window.postMessage({type:"PlayRandomGame",gameId:this.selectedGame.id,launchUrl:this.selectedGame.launchUrl,gameName:this.selectedGame.name,subVendor:this.selectedGame.subVendor},window.location.href),"function"==typeof gtag&&gtag("event","OpenRandomGame",{context:"CasinoPlayRandomGame"}))}showGameInfo(){window.postMessage({type:"InfoRandomGame",gameId:this.selectedGame.id,launchUrl:this.selectedGame.launchUrl,gameName:this.selectedGame.name,subVendor:this.selectedGame.subVendor},window.location.href),"function"==typeof gtag&&gtag("event","OpenRandomGameInfo",{context:"CasinoPlayRandomGame"})}renderGameDetails(){return a("div",{class:"RandomButtonsWrapper"},a("div",{class:"RandomGameDetails"},a("span",{class:"RandomGameTitle"},this.selectedGame.name),a("span",{class:"RandomGameInfo",onClick:()=>this.showGameInfo()},"i")),a("div",{class:"RandomButtons"},a("button",{class:"RandomButton On",onClick:()=>this.respin()},i("spinRandomGame",this.language)),!this.launchByGameCard&&a("button",{class:"RandomButton On",onClick:()=>this.playGame()},i("playNowRandomGame",this.language))))}render(){return this.hasErrors?a("div",{class:"RandomGameError"},a("div",{class:"Title"},i("error",this.language))):this.isLoading?a("div",{class:"RandomGameLoading"},a("div",{class:"Title"},i("randomGameLoading",this.language))):this.isLoading?void 0:a("div",{class:"RandomGameWrapper"},a("div",{class:"GameContainerGradient"}),a("div",{class:"GamesContainer",ref:n=>this.gameContainer=n},this.gamesToShow&&this.gamesToShow.map(((n,e)=>a("div",{class:"RandomGameCard",key:e,onClick:"true"===this.launchByGameCard?()=>this.playGame():null},a("div",{class:"RandomGameVendor"},n.vendor.name),a("img",{class:"RandomGameImage",src:n.thumbnail,alt:n.name,title:n.name}),this.selectedGame&&this.selectedGameIndex===e&&this.renderGameDetails())))),a("div",{class:"ButtonWrapper "+(this.animationDone?"HideAnimation":"")},a("div",{class:"ButtonContainer"},this.iconVisibility&&a("div",{class:"ButtonIcon "+(this.animationStarted?"Flip":"")},a("div",{class:"QustionMark "+(this.animationStarted?"Flip":"")},"?"),a("div",{class:"HexagonMark"},a("div",{class:"HexagonMarkBorder"}))),!this.animationStarted&&a("div",{class:"RandomButton "+(this.animationStarted?"HideAnimation":""),onClick:()=>this.playRandomGame()},i("playRandomGame",this.language)))))}get host(){return e(this)}static get watchers(){return{endpoint:["watchEndpoint"],datasource:["watchEndpoint"],language:["watchEndpoint"],translationUrl:["handleNewTranslations"]}}};r.style=":host {\n display: block;\n font-family: inherit;\n}\n\n.RandomGameWrapper {\n width: 100%;\n overflow: hidden;\n background: transparent;\n position: relative;\n}\n\n.GameContainerGradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.5) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.5) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);\n pointer-events: none;\n z-index: 1;\n}\n\n.GamesContainer {\n display: flex;\n height: 330px;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n align-content: flex-start;\n gap: 20px;\n}\n\n.RandomGameCard {\n position: relative;\n width: 256px;\n height: 170px;\n border-radius: 5px;\n filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n position: absolute;\n font-size: 12px;\n bottom: 10px;\n left: 10px;\n color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.TheRandomGame {\n animation-name: ZoomFadeIn;\n animation-duration: 0.5s;\n animation-fill-mode: forwards;\n -webkit-animation-name: ZoomFadeIn;\n -webkit-animation-duration: 0.5s;\n -webkit-animation-fill-mode: forwards;\n opacity: 1;\n cursor: pointer;\n filter: blur(0);\n}\n\n.RandomGameImage {\n width: 256px;\n height: 170px;\n}\n\n.RandomGameDetails {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));\n font-size: 14px;\n width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n}\n.RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 12px;\n font-weight: 400;\n border: solid 1px var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));\n text-align: center;\n margin: 4px 0;\n line-height: 14px;\n cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n}\n\n.ButtonWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.ButtonContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n}\n\n.ButtonIcon {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n}\n\n.QustionMark {\n position: relative;\n font-size: 80px;\n font-weight: 700;\n color: var(--emfe-w-color-white, #FFFFFF);\n z-index: 5;\n bottom: 20px;\n text-shadow: 0px 4px 0px var(--emfe-w-color-black, #000000);\n}\n\n.HexagonMark {\n position: absolute;\n width: 70px;\n height: 85px;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMarkBorder {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n top: 5px;\n left: 5px;\n width: 60px;\n height: 75px;\n background: linear-gradient(180deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n}\n\n.RandomButton {\n font-size: 18px;\n text-transform: uppercase;\n width: max-content;\n border-radius: 5px;\n padding: 5px 25px;\n border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n opacity: 1;\n text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));\n background-size: 300% 100%;\n cursor: pointer;\n}\n.RandomButton:hover {\n opacity: 0.8;\n}\n\n.HideAnimation {\n filter: blur(5px);\n animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n animation-name: Flip, Blur;\n animation-duration: 0.75s, 3s;\n animation-iteration-count: infinite, 1;\n -webkit-animation-name: Flip, Blur;\n -webkit-animation-duration: 0.75s, 3s;\n -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n 0% {\n background-position: 0% 50%;\n }\n 33% {\n background-position: 100% 50%;\n }\n 66% {\n background-position: 200% 50%;\n }\n 100% {\n background-position: 300% 50%;\n }\n}\n@keyframes ZoomFadeIn {\n 0% {\n transform: scale(0.2) translateY(0);\n filter: blur(5px);\n opacity: 0.3;\n }\n 50% {\n transform: scale(1.1) translateY(-30px);\n filter: blur(2px);\n opacity: 0.7;\n }\n 100% {\n transform: scale(1) translateY(-30px);\n filter: blur(0px);\n opacity: 1;\n }\n}\n@keyframes AnimateButton {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n}\n@keyframes Flip {\n 0% {\n transform: rotateY(0deg);\n }\n 50% {\n transform: rotateY(180deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n@keyframes Blur {\n 0% {\n filter: blur(0);\n }\n 50% {\n filter: blur(1px);\n }\n 100% {\n filter: blur(3px);\n }\n}\n@container (max-width: 475px) {\n .GameContainerGradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.2) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.2) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);\n pointer-events: none;\n z-index: 1;\n }\n\n .RandomGameCard {\n width: 102px;\n height: 146px;\n border-radius: 5px;\n filter: blur(5px);\n }\n\n .RandomGameImage {\n width: 102px;\n height: 146px;\n }\n\n .RandomGameDetails {\n font-size: 14px;\n width: 100%;\n }\n .RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n width: 75%;\n }\n .RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 12px;\n line-height: 14px;\n }\n .RandomGameDetails .RandomGamePlay {\n background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n }\n\n .RandomGameCard .RandomGameVendor {\n font-size: 12px;\n bottom: 5px;\n right: 5px;\n }\n\n .RandomButtons {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .RandomButton {\n font-size: 18px;\n text-transform: uppercase;\n width: max-content;\n border-radius: 5px;\n padding: 5px 25px;\n border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n opacity: 1;\n text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));\n background-size: 300% 100%;\n cursor: pointer;\n }\n .RandomButton:hover {\n opacity: 0.8;\n }\n}";export{r as casino_play_random_game}