/* FONT */
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 500; font-display: swap; src: url('/app/fonts/HhyaU5sn9vOmLzlnC_W6EQ.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 500; font-display: swap; src: url('/app/fonts/HhyaU5sn9vOmLzlmC_W6EQ.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 500; font-display: swap; src: url('/app/fonts/HhyaU5sn9vOmLzloC_U.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 700; font-display: swap; src: url('/app/fonts/HhyaU5sn9vOmLzlnC_W6EQ.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 700; font-display: swap; src: url('/app/fonts/HhyaU5sn9vOmLzlmC_W6EQ.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 700; font-display: swap; src: url('/app/fonts/HhyaU5sn9vOmLzloC_U.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 800; font-display: swap; src: url('/app/fonts/HhyaU5sn9vOmLzlnC_W6EQ.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 800; font-display: swap; src: url('/app/fonts/HhyaU5sn9vOmLzlmC_W6EQ.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 800; font-display: swap; src: url('/app/fonts/HhyaU5sn9vOmLzloC_U.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* VARIABLES */
:root {
	--font: 'Dosis', sans-serif;

	--app-header-height: 95px;
	--app-line-height: 5px;
	--game-header-height: 64px;
	--game-container-height: calc(100vh - var(--app-header-height) - var(--app-line-height) - var(--game-header-height));
}

/* GENERAL */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; scrollbar-width: thin; scrollbar-color: #a346ea #ffffff; }
body { background: #fff; font-family: var(--font); font-size: 16px; font-weight: 500; letter-spacing: 0.00938em; }
a { text-decoration: none; }
button, input, select { background: none; font-family: 'Dosis', sans-serif; font-size: inherit; outline: none; border: none; }
img { display: block; overflow-clip-margin: content-box; overflow: clip; }
a, button, input { -webkit-tap-highlight-color: transparent; }

/* SCROLL */
.desktop .__scroll:not(body) { scrollbar-color: #a346ea #ffffff; }
body.__scroll::-webkit-scrollbar, .desktop .__scroll::-webkit-scrollbar { width: 8px; }
body.__scroll::-webkit-scrollbar-track, .desktop .__scroll::-webkit-scrollbar-track { background: transparent; }
body.__scroll::-webkit-scrollbar-thumb, .desktop .__scroll::-webkit-scrollbar-thumb { background-image: linear-gradient(180deg, #6f10b6 0%, #a346ea 99%); }
body.__scroll::-webkit-scrollbar-thumb:hover, .desktop .__scroll::-webkit-scrollbar-thumb:hover { background: #a346ea; }

body.__overflow { overflow: hidden; scrollbar-gutter: stable; }
/*
body.desktop.__overflow { padding-right: 8px; }
*/
html { scrollbar-gutter: stable; }
body.__dark { background: rgb(42 39 56); }
.__dark *:not(.new, .header-search__headline, .search-categories__link, .mygames-empty__headline, .mygames-empty__info) { color: #fff!important; }
.__dark .new { border: 3px solid rgb(42 39 56); }
.__dark .header-field__more { background: #9b92ff; }
.__dark .game-container { background: #16141c; }
.__dark .svg__tools, .__dark .svg__option, .__dark .button-junior > .svg__junior { fill: #9b92ff; }
.__dark .section-about__text > p, .__dark .game-description > p { color: #b9b2db!important; }
.__dark .game-tag, .__dark .tag-box { background: #5c5772; }

@-moz-document url-prefix() {
    body {
        overflow-y: scroll;
    }
}

/* SVG */
.svg { fill-rule: evenodd; }
.svg__nav { width: 30px; height: 30px; fill: currentColor; }
.mobile .svg__menu-close { fill: #4d4d4d; width: 24px; height: 24px; }
.desktop .svg__nav { transition: transform .2s, opacity .3s; transform: scale(.3) translateY(-8px); opacity: 0; position: absolute; }
.desktop .header-nav__link:hover .svg__nav { transform: scale(1) translateY(-11px); opacity: 1; }
.mobile .svg__nav { width: 24px; height: 24px; }
.svg__junior { width: 58px; margin-bottom: 5px; }
.button-junior > .svg__junior, .svg__tools { fill: #9538db; position: relative; z-index: 2; transition: transform .2s; }
.button-junior.__on > .svg__junior { fill: #49d836; }
.desktop .button-junior.__off:hover > .svg__junior { fill: #49d836; }
.desktop .svg__tools { width: 30px; height: 30px; }
.mobile .svg__tools { width: 26px; height: 26px; }
.desktop .button-tools__circle:hover > .svg__tools { transform: scale(1.15); fill: #a346ea; }
.svg__prev, .svg__next { fill: #fff; width: 12px; transition: transform .3s; }
.svg__prev { margin-right: 2px; transform: scale(-1); }
.svg__next { margin-left: 2px; }
.svg__pagination-prev { fill: currentColor; width: 11px; margin-right: 2px; transform: scale(-1, 1); }
.svg__pagination-next { fill: currentColor; width: 11px; margin-left: 2px; }
.svg__popup-close { fill: #fff; width: 20px; }
.mobile .svg__exit { width: 7px; fill: #3d3c3e; transform: scale(-1); }
.svg__play { width: 24px; height: 24px; margin: -4px 0 0 5px; fill: #fff; display: inline-block; vertical-align: middle; }
.svg__option { fill: #9538db; position: relative; z-index: 2; transition: transform .3s; }
.desktop .svg__option { width: 25px; height: auto; }
.mobile .svg__option { width: 24px; height: 24px; fill: #717178; }
.svg__like { margin-top: -3px; }
.__selected .svg__like { fill: #49d836!important; }
.svg__dislike { margin-top: 5px; transform: scale(1, -1); }
.__selected .svg__dislike { fill: #fe7201!important; }
.__selected .svg__game-favorites { fill: #dd2b72!important; }
.game-options__button.__disabled .svg__option { opacity: .3; }
.desktop .game-options__button:hover .svg__option { fill: #bd86ff; }
.desktop .game-options__button:hover .svg__option:not(.svg__dislike) { transform: scale(1.1); }
.desktop .game-options__button:hover .svg__dislike { transform: scale(1.1, -1.1); }
.desktop .game-options__button:active .svg__option:not(.svg__dislike) { transform: scale(.9); transition: transform .2s; }
.desktop .game-options__button:active .svg__dislike { transform: scale(.9, -.9); transition: transform .2s; }
.desktop .svg__expand { width: 19px; }
.svg__mouse { height: 29px; fill: #ada2b9; }
.svg__gamepad { height: 32px; margin-top: -8px; fill: #ada2b9; }
.svg__data-close { fill: #2b2b2b; width: 22px; height: 22px; }
.svg__side-close { fill: #727474; width: 12px; margin-left: 2px; }
.svg__side-close-mobile { display: none; }
.desktop .side-close:hover .svg__side-close { fill: #fff; }
.svg__mygames-button { fill: currentColor; width: 24px; height: 24px; margin-right: 10px; margin-bottom: -1px; vertical-align: bottom; }
.svg__mygames-empty { fill: #dfdfdf; width: 82px; height: 82px; }
.svg__search-input { fill: #4a5b5c; width: 30px; height: 30px; }
.svg__search-category { fill: currentColor; width: 26px; height: 26px; margin-right: 4px; margin-bottom: -1px; vertical-align: bottom; }

/* ONHOVER */
.desktop .onhover__green:hover { color: #49d836; }
.desktop .onhover__pink:hover { color: #dd2b72; }
.desktop .onhover__blue:hover { color: #0278fd; }
.desktop .onhover__orange:hover { color: #fe7201; }
.desktop .onhover__turq:hover { color: #12d4c4; }
.desktop .onhover__yellow:hover { color: #f0af18; }
.desktop .onhover__purple:hover { color: #a346ea; }
.mobile .svg__purple { fill: #a346ea; }

/* ROOT */
#app-root { min-height: 100vh; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 3; }
#app-root.__cover { transition: opacity .5s; opacity: .5; pointer-events: none; }
#app-root.__cover::after { background-image: url(/app/images/loading_default.svg); background-position: center; background-repeat: no-repeat; width: 100vw; height: 100vh; position: fixed; z-index: 999; top: 0; left: 0; opacity: 0; pointer-events: none; content: ''; display: flex; animation: cover 1s infinite 1s; }

/* INNER */
.__inner, .desktop .__d-inner { margin-left: auto; margin-right: auto; }
.desktop .__inner, .desktop .__d-inner { width: 1720px; }
.mobile .__inner { width: 711px; }

/* AD SLIDER */
.ad-slider { background: #fff; width: 100%; padding: 7px 0; display: flex; justify-content: center; position: fixed; z-index: 900; bottom: 0; left: 0; box-shadow: 0 -3px 5px rgba(0, 0, 0, .1); }
.ad-slider__close { background: #fff; width: 26px; height: 24px; border-radius: 8px 8px 0 0; position: absolute; right: 8px; top: -24px; box-shadow: 0 -3px 5px rgba(0, 0, 0, .1); cursor: pointer; display: flex; justify-content: center; align-items: center; }
.ad-slider__svg { width: 14px; height: auto; opacity: .8; margin-top: 1px; }
.ad-slider__banner { width: 320px; height: 50px; overflow: hidden; }

/* ADUNIT */
.adunit { position: relative; }
.adunit::before { width: 100%; display: block; text-align: center; font-size: 12px; letter-spacing: 1px; position: absolute; top: -17px; left: 0; }
.__en .adunit::before { content: 'advertisement'; }
.__pl .adunit::before { content: 'reklama'; }
.ad-banner { width: inherit; height: inherit; overflow: hidden; }
.adunit.rect { width: 300px!important; height: 250px!important; margin-top: 0!important; }
.adunit.sky { width: 160px!important; height: 600px!important; margin: 0!important; position: sticky; top: 25px; align-self: start; z-index: 10; overflow: visible }

.game-ad { position: relative; }
.game-ad::before { width: 100%; display: block; text-align: center; color: #fff; font-size: 12px; letter-spacing: 1px; position: absolute; top: -17px; left: 0; content: 'advertisement'; }

.desktop .adunit { background: #f3f3f3; margin: 80px auto 0; box-sizing: content-box; }

.desktop .__game .adunit:first-of-type { margin-top: 40px; margin-bottom: 25px; }
.desktop .__game .adunit.adbottom { margin-top: 80px; }


.desktop .adunit, .desktop .ads_unit_horizontal { width: 970px; height: 250px; }
.desktop .section-browse .adunit, .desktop .section-game .adunit { margin: 0 auto 50px; }

/* HEADER */
#app-header { width: 100%; }
.desktop #app-header::before { background-image: url(/app/images/colorline3.svg); background-size: cover; width: 100%; height: var(--app-line-height); content: ''; display: block; }
.header-inner { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: relative; }
.desktop .header-inner { height: var(--app-header-height); }
.mobile .header-inner { height: 88px; }
.desktop .header-main { margin-left: 4px; display: flex; flex-direction: row; align-items: center; }
.mobile .header-menu { width: 30%; margin-left: 4px; display: flex; align-items: center; }
.mobile .button-menu { display: flex; }

/* LOGO */
.desktop .header-logo { width: 130px; margin-top: 25px; position: relative; transform-origin: 0 0; transform: scale(1.02); }
.desktop .header-logo .logo__img { width: 100%; position: relative; z-index: 3; transition: transform .3s; user-select: none; }
.desktop .header-logo:hover .logo__img { transform: translateY(8px); }
.desktop .header-logo:active .logo__img { transform: translateY(8px) scale(.8); }
.desktop .header-logo::before { background: #6c17a1; width: 66px; height: 66px; display: block; border-radius: 50%; content: ''; position: absolute; top: -21px; left: 29px; z-index: 1; transition: transform .5s; }

.desktop .header-logo::after { background-image: url(/app/images/toongo.svg); background-size: cover; background-position: 50% 50%; width: 46px; height: 46px; display: block; content: ''; position: absolute; top: -12px; left: 39px; z-index: 2; transition: transform .3s; }
.desktop .header-logo:hover::after { transform: translateY(-9px); }
.desktop .header-logo:active::after { transform: translateY(-3px); }

/* HEADER LOGO */
.logo-xmas { width: 130px; height: auto; aspect-ratio: 130 / 71; display: block; position: relative; }
.logo-xmas > span { background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; transition: transform .35s; }
.logo-xmas__toongo { background-image: url(/app/images/logo2/toongo.svg); }
.logo-xmas:hover .logo-xmas__toongo { transform: translateY(8px); }
.logo-xmas__mascot { background-image: url(/app/images/logo2/mascot.svg); }
.logo-xmas:hover .logo-xmas__mascot { transform: translateY(-7px); }
.logo-xmas__back { background-image: url(/app/images/logo2/back.svg); }

/* MOBILE LOGO */
.mobile .mobile-logo { width: 105px; display: block; }
.mobile .mobile-logo:active { animation: tap .3s; }
.mobile .logo__img { width: 100%; }

/* PUMPKIN */
.header-pumpkin { background: url(/app/images/pumpkin2.svg) center center no-repeat; background-size: contain; width: 36px; height: 36px; display: block;  }
.header-pumpkin:hover { animation: gelatine .5s; }

/* NAV */
.header-nav { margin-left: calc(100vw * .023); display: flex; flex-direction: row; }
.header-nav__link { margin: 0 25px; color: #6f10b6; display: flex; align-items: center; position: relative; }
.desktop .header-nav__link { flex-direction: column; justify-content: center; }
.nav-link__name { font-weight: 900; font-size: 1.22em; transition: transform .2s; transform: translateY(0); margin-bottom: 3px; }
.desktop .header-nav__link:hover .nav-link__name { transform: translateY(16px); }

/* APP MENU */
.mobile #app-menu:not(.__lightbox) { display: none; }
.mobile #app-menu.__lightbox { width: 100%; height: 100%; position: fixed; z-index: 999; top: 0; left: 0; display: block; }
.mobile .menu-container { background: #fff; width: 250px; height: 100%; position: absolute; z-index: 2; top: 0; left: 0; animation: menu .2s; }
.mobile .menu-header { height: 72px; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; }
.mobile .header-nav__link { margin: 0 18px 8px 18px; padding: 8px 10px; border: 1px solid #ebebeb; border-radius: 15px; }
.mobile .nav-link__name { margin-left: 10px; }

/* TOOLS */
.header-tools { display: flex; flex-direction: row; justify-content: end; align-items: center; }
.desktop .header-tools { margin-top: 5px; margin-right: 8px; }
.mobile .header-tools { width: 30%; margin-right: 4px; }

/* TOOLS BUTTON */
.header-tools__button { display: flex; position: relative; }
.desktop .header-tools__button { margin-left: 36px; cursor: pointer; }
.mobile .header-tools__button { margin-left: 24px; }
.button-fav__amount { background: #cc88ff; width: 20px; height: 20px; padding-bottom: 1px; display: block; position: absolute; z-index: 5; right: -15px; top: -15px; font-weight: 700; color: #fff; font-size: .85em; border-radius: 50px; display: flex; justify-content: center; align-items: center; transition: transform .2s; }
.desktop .button-fav:hover > .button-fav__amount { transform: translateY(4px); }

/* JUNIOR BUTTON */
.button-junior { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.button-junior__switch { width: 23px; height: 8px; padding: 1px; display: block; border-radius: 4px; }
.button-junior.__off > .button-junior__switch { background: #dcdcdc; }
.button-junior.__on > .button-junior__switch { background: #49D836; }
.button-junior__switch::after { background: #fff; width: 12px; height: 6px; display: block; content: ''; border-radius: 3px; transition: transform .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.button-junior.__off > .button-junior__switch::after { transform: translateX(0); }
.button-junior.__off:hover > .button-junior__switch::after { transform: translateX(9px); }
.button-junior.__on > .button-junior__switch::after { transform: translateX(9px); }

/* MAIN */
#app-main { width: 100%; position: relative; }
.desktop #app-main { min-height: calc(100vh - 349px); }
@keyframes cover { 0% { opacity: 1; } 100% { opacity: 1; } }
.mobile #app-main { min-height: calc(100vh - 274px); }
.__browse #app-main { display: flex; flex-direction: column; justify-content: space-between; }

/* SECTION FIELD */
.section-field { display: flex; flex-direction: column; justify-content: center }

/* HEADER FIELD */
.header-field { display: flex; flex-direction: row; align-items: center; }
.desktop .header-field { margin-top: 56px; padding-bottom: 18px; }
.mobile .header-field { height: 82px; padding-top: 15px; }
.header-field__headline { color: #6f10b6; font-weight: 900; }
.desktop .header-field__headline { font-size: 22px; }
.mobile .header-field__headline { font-size: 1.25em; }
.header-field__more { background: #ff940e; font-weight: 700; color: #fff; border-radius: 20px; }
.desktop .header-field__more { margin-top: 3px; margin-left: 15px; padding: 5px 18px 6px 18px; font-size: .95em; }
.mobile .header-field__more { margin-top: 2px; margin-left: 12px; padding: 4px 16px 5px 16px; font-size: .9em; }
.desktop button.header-field__more { cursor: pointer; }
.desktop .header-field__more:hover { background: #fe7201; }

/* SLIDER */
.mobile .slider-container { position: relative; user-select: none; }
.mobile .slider-wrapper { padding: 0 calc((100vw - 711px) / 2); overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.mobile .slider-wrapper::-webkit-scrollbar { display: none; }
.mobile .slider-content { width: max-content; }

/* GRID */
.grid { display: grid; grid-auto-flow: row; align-content: start; }
.grid:not(.slider-content) { max-width: 100%; }

/* EMPTY GRID */
.empty-line { width: 80vw; margin-left: 4px; color: #4f4f4f; font-size: 1.1em; }

/* GRID TYPES */
.desktop .grid-big { grid-template-columns: repeat(auto-fill, 415px); gap: 19px; margin-top: 20px; }
.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 270px); gap: 30px 19px; }
.desktop .grid-side { grid-template-columns: repeat(2, 270px); gap: 19px; position: relative; }
.desktop .grid-heroes { grid-template-columns: repeat(11, 133px); gap: 25px; }
.desktop .grid-heroes:not(.grid-fixed) { margin-top: 5px; }
.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 232px); row-gap: 15px; column-gap: 15px; }
.grid-tags-fixed { margin-top: 60px; }
.grid-fixed { margin-top: 80px; }
.mobile .__game .grid-fixed { margin-top: 35px; }
.desktop .__game .grid-fixed { margin-top: 45px; }

/* AD CONTAINER */
.desktop .ad-container { position: relative; overflow: visible }
.desktop .ad-container .grid-medium { width: 90%; gap: 24px; min-height: 600px; }
.ad-container__units { min-height: 600px; height: 100%; position: absolute; top: 0; right: 0; }

/* GRID ADUNIT */
.desktop .adunit-grid-1 { grid-column: 1 / -1; grid-row: 6; margin: 25px 0; display: flex; justify-content: center; }
.desktop .adunit-grid-1 .adunit { margin: 0!important; }

.mobile .adunit-grid-1 { grid-column: 1 / -1; grid-row: 6; margin: 25px 0; display: flex; justify-content: center; }
.mobile .adunit-grid-1 .adunit { margin: 0!important; }

.mobile .adunit-grid-2 { grid-column: 1 / -1; grid-row: 12; margin: 25px 0; display: flex; justify-content: center; }
.mobile .adunit-grid-2 .adunit { margin: 0!important; }

/* GRID MOBILE */
.mobile .grid-medium { grid-template-columns: repeat(auto-fill, 227px); gap: 15px; }
.mobile .grid-side { grid-template-columns: repeat(2, 227px); gap: 10px }
.mobile .grid-heroes { grid-template-columns: repeat(40, 109px); gap: 15px; scroll-snap-type: x mandatory; }
.mobile .grid-tags { grid-template-columns: repeat(auto-fill, 229px); gap: 12px; }
.mobile .grid-heroes:not(.grid-fixed) { margin-top: 10px; }
.mobile .grid-heroes.grid-fixed { margin-top: 60px; grid-template-columns: repeat(22, 109px); }

/* NEW SLIDER */
.desktop .slider-container { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; }
.desktop .slider-track { width: 1555px; overflow-x: auto; z-index: 1; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.desktop .slider-content {  margin-top: 14px!important; grid-template-columns: repeat(50, 133px); gap: 25px; grid-auto-flow: column; }
.desktop .slider-button { background: #9538db; width: 55px; height: 65px; margin-top: 12px; border-radius: 10px; display: flex; justify-content: center; align-items: center; transition: background .2s; }
.desktop .slider-button:not(.disabled) { cursor: pointer; }
.desktop .slider-button__svg { width: 14px; height: auto; fill: #fff; }
.desktop .slider-button.prev .slider-button__svg { transform: scale(-1, -1); }
.desktop .slider-button.next .slider-button__svg { transform: scale(1, -1); }
.desktop .slider-button.disabled { background: #f7f7f7; }
.desktop .slider-button.disabled .slider-button__svg { fill: silver; }

/* NEW */
.new { background: #fde802; padding: 5px 13px; color: #6c17a1; font-size: .9em; font-weight: 900; border-radius: 25px 0; display: block; position: absolute; z-index: 12; top: -7px; left: -7px; transition: transform .3s; border: 3px solid #fff; }
.desktop .thumb:hover .new { transform: translate3d(0, -4px, 0); }

/* THUMB */
.thumb { position: relative; }
.thumb.__hide { display: none; }

/* THUMB GAME */
.thumb-game { background: #f2f8ff; display: block; border-radius: 20px; overflow: hidden; position: relative; z-index: 2; }
.mobile .thumb-game { border-radius: 12px; }
/*.desktop .thumb-game { box-shadow: rgba(50, 50, 93, 0.05) 0px 6px 12px -2px, rgba(0, 0, 0, 0.1) 0px 3px 7px -3px; transition: transform .3s; }*/
.desktop .thumb-game { box-shadow: rgba(50,50,93,.08) 0 8px 15px -1px, rgba(0,0,0,.15) 0 4px 10px -5px; transition: transform .3s; transform: translate3d(0, 0, 0); }
.desktop .thumb:hover > .thumb-game { box-shadow: rgba(50,50,93,.2) 0 6px 12px -2px, rgba(0,0,0,.25) 0 3px 7px -3px; transform: translate3d(0, -4px, 0); }
.thumb-game__img { width: 100%; height: auto; }
/*
.desktop .thumb > .thumb-game > video { display: none; }
.desktop .thumb:hover > .thumb-game > video { background: transparent; aspect-ratio: 16/9; width: 100%; height: auto; position: absolute; z-index: 2; top: 0; left: 0; opacity: 0; display: block; pointer-events: none; animation: fadein .2s; animation-delay: .32s; animation-fill-mode: forwards; object-fit: cover; }
*/
.thumb-game__preview { width: 100%; height: 100%; display: block; overflow: hidden; position: absolute; z-index: 2; top: 0; left: 0; animation: fadein .25s; border-radius: inherit; }
.thumb-game__video { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

.desktop .thumb-game::after { background: linear-gradient(transparent 30%, rgb(108 23 161 / 20%) 60%, rgb(108 23 161 / 90%) 100%); width: 100%; height: 100%; position: absolute; z-index: 10; bottom: 0; left: 0; border-radius: 0 0 20px 20px; display: block; content: ''; opacity: 0; pointer-events: none; border-radius: 0 0 inherit inherit; transition: opacity .3s; }
.desktop .thumb:hover > .thumb-game::after { opacity: 1; }

.desktop .thumb-game__name { max-width: 95%; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: absolute; z-index: 11; left: 0; bottom: 0; color: #fff; font-weight: 600; transition: transform .3s; transform: translate3d(0, 4px, 0); opacity: 0; }
.desktop .title-size__big { padding: 10px 18px 11px 18px; font-size: 1.15em; }
.desktop .title-size__medium { padding: 8px 18px 9px 18px; font-size: 1.05em; }
/*
.desktop .thumb-game__name::before { background: #9538db url(/app/images/play.svg) center center no-repeat; background-size: 24px 16px; width: 44px; height: 100%; content: ''; display: block; position: absolute; left: 0; top: 0; border-radius: 0 20px 0 0; }
*/
.desktop .thumb:hover .thumb-game__name { transform: translate3d(0, 0, 0); opacity: 1; }


.mobile .thumb-game__name { display: none; }


/* THUMB EMPTY */
.thumb-empty { background: #f9f9f9; width: 100%; height: 100%; display: block; border-radius: 25px; overflow: hidden; }

/* HERO BGS */
.bcy > .thumb-hero { background: #fcf310!important; }
.bco > .thumb-hero { background: linear-gradient(180deg, rgba(255,223,201,1) 0%, rgba(250,174,124,1) 100%); }
.bcg > .thumb-hero { background: #c3ff65!important; }
.bcb > .thumb-hero { background: linear-gradient(0deg, rgba(123,246,250,1) 0%, rgba(199,253,255,1) 100%) }
.bcp > .thumb-hero { background: #ec9afe!important; }

/* HERO */
.hero { position: relative; }
.thumb-hero { padding-top: 100%; border-radius: 50%; transition: transform .3s; box-sizing: content-box; display: block; position: relative; }
.mobile .thumb-hero { padding-top: 100%; border: none; }
.thumb-hero__img { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; z-index: 2; overflow: hidden; border-radius: 0 0 48% 48%; }
.desktop .hero:hover > .thumb-hero { transform: translateY(-6px); }

/* TAG */
.tag { width: 100%; position: relative; }
.tag-box { background: #edf0f7; padding: 5px; display: flex; align-items: center; border-radius: 35px; transition: transform .3s; position: relative; z-index: 2; }
.desktop .tag:hover > .tag-box { background: #9538db; transform: translateY(-4px); }
.tag-box__img { width: 50px; height: auto; margin-right: 15px; border-radius: 50%; overflow: hidden; }
.tag-box__name { width: 65%; padding: 8px 0; color: #405766; font-size: 1.15em; line-height: 1em; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.desktop .tag:hover > .tag-box > .tag-box__name { color: #fff; }

/* HEADER BROWSE */
.header-browse { display: flex; }
.header-browse__headline { color: #6f10b6; font-weight: 900; }

.desktop .header-browse { padding-bottom: 30px; }
.desktop .header-browse__headline { font-size: 40px; }

.mobile .header-browse { height: 62px; }
.mobile .header-browse__headline { font-size: 1.9em; }

/* SECTION BROWSE */
.section-browse { margin-top: 20px; }

/* SECTION PAGE */
.section-page { margin-top: 20px; }

/* MORE */
.more { display: flex; justify-content: center; align-items: flex-end; }
.desktop .more { margin-top: 45px; }
.mobile .more { margin-top: 30px; }
.more-button { background: #9538db; padding: 12px 34px; color: #fff; font-size: 1.35em; font-weight: 900; border-radius: 25px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.mobile .more-button { padding: 10px 25px; font-size: 1.15em; border-radius: 20px; }
.desktop .more-button:hover { background: #a346ea; }
.more-button__raquo { margin: 4px 0 0 10px; font-weight: 700; transform: rotate(90deg); display: inline-block; }

/* PAGINATION */
#pagination { width: 100%; margin-top: 50px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.pagination__link { display: flex; justify-content: center; align-items: center; transition: background .25s; }
.pagination__page { background: #a64ce9; width: 50px; height: 50px; font-size: 18px; color: #fff; font-weight: 900; border-radius: 50%; box-sizing: content-box; }
.pagination__page:not(.selected):hover { background: #9641d6; }
.pagination__page.selected { background: none; border: 2px solid #a64ce9; color: #a64ce9; }
.pagination__nav { background: #a85ce1; width: 60px; height: 36px; border-radius: 20px; margin: 0 8px; }
.pagination__nav:hover { background: #9b52d3; }
.pagination__svg { fill: #fff; width: 21px; height: 21px; transition: transform .25s, opacity .25s; }
.pagination__svg.prev { transform: scale(-1, 1); }
.pagination__nav:hover .pagination__svg.prev { transform: scale(-1, 1) translateX(4px); }
.pagination__nav:hover .pagination__svg.next { transform: translateX(4px); }

/* HEADER ABOUT */
.header-about { display: flex; flex-direction: row; align-items: center; }
.header-about__headline { margin-left: 4px; color: #6f10b6; font-weight: 900; }
.desktop .header-about__headline { font-size: 1.8em; }
.mobile .header-about__headline { font-size: 1.4em; }

/* ABOUT */
.section-about { margin-top: 60px; }
.mobile .section-about.__short { position: relative; }
.section-about__text > p { margin: 20px 4px 0 4px; color: #4f4f4f; }
.desktop .section-about__text > p { font-size: 1.1em; line-height: 1.5em; }
.mobile .section-about__text > p { font-size: 1em; line-height: 1.6em; }
.section-about__text > h3 { margin: 20px 4px 0 4px; color: #1e1e1e; font-size: 1.2em; }


.section-about__text > ol { color: #4f4f4f; list-style-type: decimal; margin: 20px 4px 0 4px; }
.section-about__text > ol > li { color: #4f4f4f; padding-left: .3125rem; margin-left: 2.1875rem; font-size: 1.05em; line-height: 1.5em; }

.mobile .section-about.__short .section-about__text { height: 186px; overflow: hidden; position: relative; }
.section-about__text a { color: #126eea; font-weight: bold; }
.section-about__text a:hover { text-decoration: underline; }
.mobile .section-about__more { margin: 15px 0 0 4px; font-size: 1.1em; font-weight: 900; color: #616164; }
.mobile .section-about:not(.__short) .section-about__more { display: none; }

/* GAME */
.section-game { display: flex; flex-direction: column; align-items: center; }
/*
.desktop .game-content { background: #fff; display: flex; flex-direction: column; padding: 0 35px; margin-top: 40px; margin-bottom: 40px; padding-bottom: 30px; border-radius: 18px; }
*/
.mobile .game-content { display: flex; flex-direction: column; align-items: center; }
.desktop .section-game:not(.__resized) { opacity: 0; min-height: 100vh; }
.desktop .section-game.__resized { opacity: 1; }

.desktop .game-container { background: #2d1166; background-size: cover; width: 100%; min-height: var(--game-container-height); display: flex; justify-content: center; align-items: center; overflow: hidden; }
.desktop .game-container.resized { height: calc(100vh - var(--game-header-height)); }
.desktop .game-window { width: 100%; height: var(--game-container-height); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; box-shadow: 0 0 25px rgb(8 8 8 / 20%); }
.desktop .game-container.resized .game-window { height: calc(100vh - var(--game-header-height)); }
.desktop .__loaded .game-box { width: 100%; height: 100%; }
.desktop .__loading .game-box, .desktop .__preroll .game-box, .desktop .__splash .game-box { display: none; }
.desktop .game-window.__ultra .game-box { width: 100%; }


.desktop .game-window:not(.__splash, .__loading) .game-preloader { display: none; }
.desktop .game-preloader { background: #4a1f9b; width: 100%; height: 100%; position: relative; overflow: hidden; }
.desktop .game-splash { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 25px; align-items: center; justify-content: center; position: relative; z-index: 2; }
.desktop .game-splash__title { padding: 0 15px; font-size: 32px; line-height: 1.4; font-weight: 800; color: #fff; text-align: center; width: 100%; text-shadow: 0 3px 5px rgba(0, 0, 0, .3); }
.desktop .game-splash__thumb { width: 185px; height: auto; border-radius: 35px; box-shadow: 0 5px 8px rgba(0, 0, 0, .2); }
.desktop .game-splash__play { background-color: #168ff3; margin-top: 15px; height: 55px; padding: 0 40px; font-size: 21px; line-height: 1; color: #fff; font-weight: 800; border-radius: 25px; display: flex; align-items: center; gap: 12px; cursor: pointer; box-shadow: 0 5px 8px rgba(0, 0, 0, .2); text-shadow: 0 2px 2px rgba(0, 0, 0, .2); }
.desktop .game-splash__play:hover { animation: gelatine 0.5s; }
.desktop .game-splash__svg { fill: currentColor; fill-rule: evenodd; width: 30px; }
.desktop .game-window.__loading .game-splash__play { display: none; }
.desktop .game-splash__loading { background: url('/app/images/loading_color.svg') center center no-repeat; background-size: contain; width: 150px; height: 55px; margin-top: 15px; }
.desktop .game-window:not(.__loading) .game-splash__loading { display: none; }

@keyframes gelatine {
	from, to { transform: scale(1, 1); }
	25% { transform: scale(0.9, 1.1); }
	50% { transform: scale(1.1, 0.9); }
	75% { transform: scale(0.95, 1.05); }
  }




.game-preview { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.game-preview__video, .game-preview__image { height: 100%; width: 100%; object-fit: cover; opacity: .15; }
.game-preview::before { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 2; backdrop-filter: blur(6px); content: ''; }
.game-preview::after { background: linear-gradient(25deg, #f7e03bd4 0%, rgba(255, 255, 255, 0) 50%); width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 3; content: ''; }

/* GAME WINDOW */

.mobile .game-container { background: linear-gradient(0deg, rgba(112,43,153,1) 0%, rgba(60,13,88,1) 100%); display: flex; justify-content: space-evenly; align-items: center; overflow: hidden; width: 100vw; }

.mobile .game-wrapper { display: contents;}

.mobile .game-window { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; user-select: none; }
.mobile .game-wrapper:not(:fullscreen) .game-window { background: #4a106e; height: 300px; }


/* GAME COLUMN */
.desktop .game-column { display: flex; flex-direction: column; gap: 26px; }


/* GAME EXIT */
.game-exit { display: none; }
.mobile .game-wrapper:fullscreen .game-window.__loaded .game-exit { background: #fff; width: 42px; height: 36px; position: absolute; z-index: 999!important; left: 0; top: 15%; border-radius: 0 15px 15px 0; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); flex-flow: row; justify-content: center; align-items: center; display: flex; animation: fadein .3s; }
.mobile .game-exit::after { background: url('/app/images/toongo.svg'); background-size: contain; width: 18px; height: 18px; margin-left: 6px; margin-right: 3px; display: block; content: ''; }

/* GAME SPLASH */
/*
.desktop .game-splash { width: 100%; height: 100%; position: absolute; z-index: 4; top: 0; left: 0; display: none; overflow: hidden; }
*/
.section-game.__splash .game-splash, .mobile .game-splash { display: block; }
.mobile .game-wrapper:fullscreen .game-splash { display: none; }
.splash-content { width: 100%; height: 100%; position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; animation: timer .5s; }

/* GAME BADGE */
.desktop .game-splash__badge { width: 48px; height: auto; border-radius: 50%; box-shadow: 0 5px 10px rgba(0, 0, 0, .2); }
.mobile .game-splash__badge { width: 120px; height: 120px; margin-bottom: 20px; border-radius: 50%; box-shadow: 0 5px 10px rgba(0, 0, 0, .2); animation: gelatine .8s; transition: transform .3s; }

/* GAME START */
.game-splash__start { background: #1ebf42; height: 53px; padding: 0 30px; color: #fff; font-size: 1.3em; font-weight: 900; border-radius: 30px; transition: transform .2s ease-out, opacity .3s; white-space: nowrap; position: relative; z-index: 3; cursor: pointer; box-shadow: 0 5px 10px rgba(0, 0, 0, .2); }
.desktop .game-splash__start { transform: perspective(1px) translateZ(0px); }
.mobile .game-splash__start { height: 45px; padding: 2px 25px 2px 25px; font-size: 1.2em; border-radius: 25px; }
.mobile .section-game.__timer .game-splash__start { pointer-events: none; }
.desktop .game-splash__start:hover { background: #18ad38; transform: scale(1.1); }
.desktop .game-splash__start:active { transform: scale(.9); }
.desktop .start__continue { display: none; }
.mobile .game-window:not(.__loaded) .start__continue { display: none; }
.mobile .game-window.__loaded .start__play { display: none; }

/* GAME DESKTOP ONLY */
.desktop-only { width: 70%; text-align: center; color: #fff; }

/* GAME BG */
.game-splash__bg { width: auto; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; transform: scale(1.1); filter: blur(8px); opacity: .4; }
img.game-splash__bg { width: auto; height: 100%; aspect-ratio: 16/9; filter: blur(8px); }

/* GAME MOBILE */
.mobile .game-controls { display: none!important; }
.mobile .game-title { margin-top: 20px; margin-bottom: 25px; }
.mobile .game-title__headline { font-size: 1.9em; }
.mobile .options-button__votes { font-size: .8em; }
.mobile .button-fullscreen { display: none; }
.mobile .game-header__bottom { display: none; }
.mobile .game-description { margin-top: 10px; margin-bottom: 10px; padding: 0 15px; }
.mobile .game-description > p { font-size: 1em; line-height: 1.6em; }
.mobile .game-tag { padding: 4px 20px 4px 4px; }
.mobile .game-tag__img { width: 44px; }
.mobile .game-tag__name { font-size: 1em; }

/* GAME PREROLL */
.section-game.__preroll .game-preroll { width: 100%; height: 100%; position: absolute; z-index: 2; top: 0; left: 0; overflow: hidden; }
.section-game:not(.__preroll) .game-preroll { display: none; }
.mobile .game-wrapper:not(:fullscreen) .game-preroll { display: none; }

/* GAME IFRAME */
.game-iframe { background: #000; width: 100%; height: 100%; position: relative; border: 0; overflow: hidden; border: 0; }
.mobile .game-window:not(.__loaded) .game-iframe { display: none; }
/*
.desktop .game-wrapper { display: flex; align-items: flex-start; min-height: 610px; gap: calc(100vw * .04); }
.desktop .game-wrapper.__ultra .game-column { display: none!important; }

.desktop .game-embed { max-width: calc(100vw - 390px); height: calc(100vh - 230px); box-shadow: 0 0 30px rgba(0, 0, 0, .3); overflow: hidden; border-radius: 15px; }
.desktop .game-wrapper.__ultra .game-embed { max-width: 100%!important; }
.desktop .game-embed:fullscreen { width: 100%; height: 100%; border-radius: none; box-shadow: none; }
*/
.mobile .game-wrapper:not(:fullscreen) .game-iframe { display: none; }
.mobile .game-wrapper:fullscreen .game-window { width: 100%; height: 100%; position: relative; z-index: 1; }

/* GAME AD */
.desktop .game-ad__label { color: #b494c7; }
.mobile .game-ad__label { color: gray; }

.game-ad { display: flex; flex-direction: column; }
.game-ad__banner { background: rgba(0,0,0,.05); width: 300px; padding: 6px; border-radius: 10px; box-sizing: content-box; }
.game-ad__label { text-align: center; font-size: .95em; margin-top: 4px; }

.mobile .game-ad { display: none; }

.game-ad__banner.big { background: rgba(0,0,0,.05); width: 160px; height: 600px!important; }
.game-ad__label.rect { color: #9196a3; }

.mobile-game-ad { margin: 50px auto 0!important; }
/*
.mobile-game-ad__banner { background: rgba(0,0,0,.05); width: 320px; height: 50px!important; padding: 6px; border-radius: 10px; box-sizing: content-box; overflow: hidden; }
.mobile-game-ad__label { text-align: center; font-size: .95em; margin-bottom: 4px; color: #71757e; }
*/

.game-ad__horizontal { margin-top: 30px; display: flex; justify-content: center; position: relative; overflow: hidden; }
.game-ad__banner.horizontal { background: rgba(0,0,0,.05); width: 728px; height: 90px!important; }
.game-ad__label.horizontal { width: 18px; height: 18px; margin-top: -1px; transform: rotate(90deg); color: #9196a3; transform-origin: left; display: flex; align-items: end; margin-left: 15px; position: relative; }

/* GAME COLUMNS */
.desktop .game-columns { display: flex; gap: 50px; }
.game-description__header { width: 100%; display: flex; gap: 16px; display: flex; justify-content: space-between; }
.game-controls { display: flex; }

/* GAME HEADER */
.desktop .game-bar { background: #fff; width: 100%; height: var(--game-header-height); }
.desktop .game-header { height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-radius: 0 0 18px 18px; }
.mobile .game-header { width: 100%; box-sizing: content-box; }
.game-info { display: flex; position: relative; }

/* GAME TITLE */
.mobile .game-title { width: 100%; margin-bottom: 29px; }
.mobile .game-title__headline { width: 100%; color: #4f4f4f; font-size: 2.2em; font-weight: 900; text-align: center; }
.desktop .game-title { display: flex; gap: 15px; align-items: center; }
.desktop .game-title__name { color: #4f4f4f; font-size: 1.5em; font-weight: 900; margin-bottom: 2px; margin-right: 30px; }
/*
.game-title { width: 100%; }
*/
.game-description__headline { margin-bottom: 29px; margin-top: 2px; color: #4f4f4f; font-size: 1.9em; font-weight: 900; }

/* GAME OPTIONS */
.game-options { display: flex; flex-direction: row; gap: 30px; }
.mobile .game-options { background: #f7f8fb; width: 100%; margin-top: 8px; padding: 6px 10px 5px; border-radius: 20px; justify-content: center; }
.game-options__button { cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; }
.game-options__button.__disabled, .game-options__button:not(.button-favorites).__selected { cursor: default; pointer-events: none; }
.options-button__votes { margin-left: 10px; font-size: .9em; font-weight: 700;  vertical-align: super; }
.dislike__votes { display: none!important; }
.desktop .options-button__votes { color: #8d8299; }
.mobile .options-button__votes { color: #8a8a91; }
.tooltip-favorites__remove { display: none; }
.__selected .tooltip-favorites__remove { display: inline-block; }
.__selected .tooltip-favorites__add { display: none; }

/* GAME CONTROLS */
.section-game.__timer .game-controls { display: none; }
.section-game:not(.__timer) .game-controls { display: flex; }
.controls__line { height: 30px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.controls__line:not(:nth-child(1)) { margin-left: 4px; padding-left: 15px; border-left: 1px solid #eeebf1; }
.controls__element { height: 30px; margin-right: 12px; text-align: center; display: inline-flex; align-items: center; user-select: none; }
.controls__element i { background: #fff; color: #ada2b9; font-style: normal; text-transform: uppercase; text-align: center; font-weight: 900; display: inline-block; box-sizing: border-box; border: 1px solid #ada2b9; }
.controls__icon { height: 30px; display: flex; align-items: center; position: relative; user-select: none; }
.controls__element i.controls__key { height: 26px; line-height: 24px; padding: 0 9px; font-size: 11px; border-radius: 5px; display: flex; }
.controls__element b.controls__key { text-transform: none; padding: 0 8px; font-size: 18px; vertical-align: middle; display: inline-block; }
.controls__wasd { margin-top: 1px; height: 29px; overflow: hidden; }
.controls__wasd i { width: 14px; height: 14px; margin: 0 1px 1px 0; line-height: 12px; font-size: 9px; display: block; float: left; border-radius: 3px; }
.controls__wasd i:nth-child(1) { margin-left: 15px; }
.controls__wasd i:nth-child(2) { clear: both; }
.controls__cursors i.controls__cursor { position: relative; }
.controls__cursors i.controls__cursor::before { width: 0; height: 0; margin: 2px 0 0 5px; border-top: 4px solid transparent; border-bottom: 4px solid transparent;	border-left: 4px solid #ada2b9; display: block; content: ''; }
.controls__cursors i:nth-child(1) { transform: rotate(-90deg); }
.controls__cursors i:nth-child(2) { transform: rotate(-180deg); }
.controls__cursors i:nth-child(3) { transform: rotate(-270deg); }

/* GAME AD TIMER */
.section-game:not(.__timer) .game-timer { display: none; }
.section-game.__timer .game-timer { width: 100%; display: flex; align-items: center; animation: timer .3s; }
.section-game.__timer .timer-label { color: #ada2b9; font-weight: 900; font-size: 12px; text-transform: uppercase; }
.section-game.__timer .timer-bar { width: 256px; height: 12px; padding: 2px; margin: 0 10px; border: 1px solid #ada2b9; border-radius: 10px; overflow: hidden; }
.section-game.__timer .timer-bar__progress { background: #0278fd; width: 1%; height: 100%; border-radius: 5px; display: block; transition: 1s linear; }
.section-game.__timer .timer-seconds { color: #93889f; font-weight: 700; font-size: 13px; }


/* GAME DESCRIPTION */
.game-description-title { display: none; }
.desktop .game-description > p { margin-bottom: 30px; color: #4f4f4f; font-size: 1.1em; line-height: 1.5em; }
.game-description > h2, .game-description > h3 { color: #4f4f4f; font-size: 1.25em; font-weight: 800; margin-bottom: 15px; }
.mobile .game-description > p { width: 100%; margin: 0 auto 20px auto; color: #4f4f4f;  }

/* GAME COPY */
.game-copy { margin-top: 35px; }
.game-copy__element { color: #6a6a6a; font-size: .95em; line-height: 1.5em; display: block; }
.desktop .game-copy__element { font-size: .95em; }
.mobile .game-copy__element { font-size :.9em; }

/* GAME TAGS */
.game-tags { display: flex; flex-flow: row wrap; }
.desktop .game-tags { margin-top: 30px; gap: 12px; }
.mobile .game-tags { gap: 10px; justify-content: center; }

/* TAG */
.game-tag { background: #edf0f7; padding: 4px 20px 4px 4px; display: flex; align-items: center; border-radius: 35px; transition: transform .3s; }
.desktop .game-tag:hover { background: #9538db; transform: translateY(-4px); }
.game-tag__img { width: 44px; height: auto; margin-right: 10px; border-radius: 50%; overflow: hidden; }
.game-tag__name { color: #405766; font-size: 1.1em; font-weight: 900; }
.desktop .game-tag:hover > .game-tag__name { color: #fff; }


/* GAME LINE */
.game-line { width: 510px; height: 5px; margin: 45px auto 50px auto; position: relative; border-radius: 5px; overflow: hidden; }
.game-line::before { background-image: url(/app/images/colorline_short.svg); background-size: cover; background-position: 50% 50%; width: 101%; height: 5px; position: absolute; top: 0; left: -.5%; display: block; content: ''; }
.mobile .game-line { display: none; }

/* HEADER PAGE */
.header-page { display: flex; }
.desktop .header-page { height: 65px; }
.mobile .header-page { height: 54px; }
.header-page__headline { color: #4f4f4f; font-weight: 900; }
.desktop .header-page__headline { font-size: 2.2em; }
.mobile .header-page__headline { font-size: 1.9em; }

/* TEXT */
.page-text { color: #4f4f4f; display: flex; flex-flow: column; }
.page-text > h2 { margin-top: 30px; font-size: 1.3em; color: #6c17a1; font-weight: 900; }
.mobile .page-text > h2 { font-size: 1.2em; }
.page-text > h2:first-of-type { margin-top: 10px; }
.page-text > h3 { margin-top: 25px; font-size: 1.1em; font-weight: 900; }
.page-text > p, .page-text > ul { margin-top: 15px; }
.desktop .page-text > p, .desktop .page-text > ul { font-size: 1.1em; line-height: 1.5em; }
.mobile .page-text > p, .mobile .page-text > ul { font-size: 1.05em; line-height: 1.6em; }
.page-text > ul { margin-top: 20px; }
.page-text > ul > li { margin-left: 30px; }
.page-text > ul > li > ul > li { margin-left: 20px; }
.page-text a { color: #0278fd; font-weight: 700; }
.page-text a:hover { text-decoration: underline; }
.page-text a.external::after { background: url(/app/images/link_external.png); width: 10px; height: 10px; margin-left: 4px; margin-top: -1px; content: ''; display: inline-block; }
.page-text .button-privacy { background: #3b67e5; min-height: 36px; margin-bottom: 5px; padding: 6px 20px 7px; color: #fff; font-size: .95em; font-weight: 700; border-radius: 25px; cursor: pointer; }
.desktop .page-text .button-privacy:hover { background: #2b58da; }
.page-text .link-external { display: inline-block; }

/* ERROR */
.section-error { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; }
.header-error { padding-bottom: 20px; text-align: center; }
.header-error__headline { color: #6c17a1; font-size: 2.6em; font-weight: 900; }
.header-error__info { color: #454545; font-size: 1.1em; font-weight: 700; }
.header-error__more { background: #9538db; margin-top: 25px; padding: 8px 24px; color: #fff; font-size: 1.05em; font-weight: 900; border-radius: 20px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.header-error__more:hover { background: #a346ea; }

/* LIGHTBOX */
.__lightbox { width: 100%; height: 100%; display: flex; position: fixed; z-index: 990; inset: 0; }
.__lightbox .cover { background: rgba(0, 0, 0, .6); width: 100%; height: 100%; position: absolute; inset: 0; z-index: 1; animation: fadein .6s ease-out forwards; }

/* CONSENT */
#app-consent:not(.__lightbox) { display: none; }
#app-consent.__lightbox { justify-content: center; align-items: center; }
#app-consent.__lightbox .cover { animation: none; }
.consent-container { background: #fff; width: 586px; padding: 35px 50px 45px 50px; position: absolute; z-index: 2; border-radius: 30px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#app-consent.__lightbox .consent-container { animation: consent .5s; }
.consent-logo { pointer-events: none; user-select: none; }
.consent-header { margin: 20px 0 25px; font-weight: 900; font-size: 1.6em; }
.consent-info { font-size: 1.05em; text-align: center; line-height: 22px; margin-bottom: 25px; }
.consent-link { color: #3b67e5; }
.desktop .consent-link:hover { text-decoration: underline; }
.consent-button { background: #3b67e5; margin-top: 10px; padding: 10px 30px 11px 30px; font-size: 1.1em; color: #fff; font-weight: 700; border-radius: 30px; cursor: pointer; }
.desktop .consent-button:hover { background: #2b58da; }

/* USER DATA */
#app-data:not(.__lightbox) { display: none; }
#app-data.__lightbox { justify-content: center; align-items: center; user-select: none; }
.data-container { background: #fff; width: 90%; max-width: 410px; padding: 55px 35px 35px; position: absolute; z-index: 2; border-radius: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; animation: consent .3s; }
.data-close { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; top: 10px; right: 10px; cursor: pointer; }
.desktop .data-close:hover { background: #f8f8f8; }
.data-content { display: none; }
.data-content.__show { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; animation: slideup .2s; }
.data-header { text-align: center; font-weight: 700; font-size: 1.05em; }
.data-options { width: 100%; display: flex; flex-direction: column; gap: 10px;margin: 30px 0; }
.data-empty { display: none; }
.data-content.__empty .data-empty, .data-picked { width: 100%; background: #f5f5f5; padding: 25px 0; color: #565656; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 25px; }
.data-picked { margin: 30px 0; }

.data-button__option { display: none; }
.data-button__option.__show { background: #f5f5f5; width: 100%; height: 40px; padding: 0 17px; border-radius: 30px; color: #4d4d4d; font-weight: 700; text-align: left; position: relative; border: 1px solid #edeaea; cursor: pointer; display: block; }
.data-button__option.__show:hover { background: #f9f9f9; }
.data-button__option.__show::after { background: url(/app/images/data_delete.png); width: 16px; height: 19px; position: absolute; right: 17px; display: inline-block; content: ''; pointer-events: none; }
.data-button__options-cancel { background: #3b67e5; min-width: 100px; height: 38px; padding: 0 20px; border-radius: 30px; color: #fff; font-weight: 700; cursor: pointer; }
.desktop .data-button__options-cancel:hover { background: #2b58da; }

.data-confirm { display: flex; flex-direction: column;; }
.data-button__confirm-yes { background: #3b67e5; min-width: 150px; height: 38px; padding: 0 20px; border-radius: 30px; color: #fff; font-weight: 700; cursor: pointer; } 
.desktop .data-button__confirm-yes:hover { background: #2b58da; }
.data-button__confirm-no { background: none; min-width: 150px; height: 38px; padding: 0 20px;color: #3b67e5; font-weight: 700; cursor: pointer; } 
.desktop .data-button__confirm-no:hover { text-decoration: underline; }

.data-success__svg { width: 50px; height: 50px; }
.data-success__svg-circle { fill-opacity: 0; stroke: #219a00; stroke-width: 16px; transform-origin: center; transform: scale(0); animation: grow 1s cubic-bezier(.25, .25, .25, 1.25) forwards; }
.data-success__svg-tick { stroke-opacity: 0; stroke-dasharray: 29px; stroke-dashoffset: 29px; animation: draw .5s cubic-bezier(.25, .25, .25, 1) forwards; animation-delay: .6s }
.data-final { margin: 20px 0 30px; }

/* SIDE */
.side-container { position: absolute; z-index: 2; right: 0; top: 0; cursor: default; }
.__lightbox .side-container { animation: search .3s forwards; }
.__lightbox:not(.__show) .side-container { animation: search_hide .3s forwards; }
#app-mygames.__lightbox:not(.__show) .cover, #app-search.__lightbox:not(.__show) .cover { animation: fadeout .2s forwards; }
.side-content { background: #fff; width: 100%; height: 100vh; padding: 0 65px 55px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-gutter: stable; }

/* SIDE CLOSE */
.side-close { background: #fbfbfb; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; transform: translateX(-50%); border-radius: 50%; box-shadow: 0 3px 0 rgba(0, 0, 0, .1); cursor: pointer; border: 4px solid #fff; }
#app-mygames .side-close { top: 60px; }
#app-search .side-close { top: 64px; }
.desktop .side-close:hover { background: #a346ea; }

/* MYGAMES */
#app-mygames:not(.__lightbox) { display: none; }
.mygames-buttons { background: #fff; width: 100%; height: 56px; padding: 30px 0 20px; display: flex; overflow: hidden; position: sticky; top: 0; z-index: 90; box-sizing: content-box; border-left: 10px solid #fff; border-right: 10px solid #fff; margin-left: -10px; }
.mygames-button { background: #9538db; width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.2em; font-weight: 900; color: #fff; cursor: pointer; }

.mygames-button:first-of-type { border-radius: 15px 0 0 15px; }
.mygames-button:last-of-type { border-radius: 0 15px 15px 0; }

.mygames-button:hover { background: #a346ea; }
.mygames-button.__selected { background: #6c17a1; cursor: default; }
.mygames-content { min-height: 85%; margin-top: 10px; position: relative; display: none; }
.mygames-content.__selected { display: block; }
.mygames-empty { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; flex-direction: column; align-items: center; justify-content: center; }
.mygames-content.__empty .mygames-empty { display: flex; }
.mygames-empty__headline { margin: 20px 0 5px; font-size: 2.15em; font-weight: 900; color: #3f4549; }
.mygames-empty__info { font-size: 1.1em; color: #555c61; }
.mygames-loading { display: none; }
.mygames-content.__loading .mygames-loading { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; }
.mygames-content.__loading .mygames-loading::before { background: url(/app/images/loading_default.svg); background-size: contain; width: 50px; height: 50px; content: ''; display: block; }

/* SEARCH */
#app-search:not(.__lightbox) { display: none; }

/* SEARCH INPUT */
.search-input { height: 66px; margin-top: 30px; display: flex; border: 2px solid #d8f2f3; border-radius: 25px; }
.search-toongo { width: 12%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
.search-toongo::before { background-image: url(/app/images/toongo.svg); background-size: cover; width: 34px; height: 34px; display: block; content: ''; }
.search-toongo::after { background: #d8f2f3; width: 2px; height: 60%; content: ''; display: block; position: absolute; right: -1px; }
.search-phrase { width: 76%; padding-left: 17px; color: #4a5b5c; font-size: 1.3em; font-weight: 900; }
.search-phrase::placeholder { color: #c2c2c2; opacity: 1; }
.search-phrase::-ms-input-placeholder { color: #c2c2c2; }
.search-icon { width: 12%; display: flex; justify-content: center; align-items: center; }
#app-search.__results .search-icon { cursor: pointer; }
#app-search.__results .search-icon:hover { opacity: .8; }
#app-search:not(.__results) .search-icon__default { display: block; }
#app-search.__results .search-icon__default { display: none; }
#app-search:not(.__results) .search-icon__clear { display: none; }
.desktop #app-search.__results .search-icon__clear { display: block; }

/* SEARCH RESULTS */
.search-results { width: 100%; margin-top: 28px; }

/* SEARCH DEFAULT */
#app-search:not(.__results) .search-default { display: block; }
#app-search.__results .search-default { display: none; }

/* SEARCH DYNAMIC */
#app-search:not(.__results) .search-dynamic { display: none; }
#app-search.__results .search-dynamic { display: block; }

/* SEARCH EMPTY */
.search-empty { width: 100%; margin-top: 20px; color: #4a5b5c; font-size: 1.2em; text-align: center; position: absolute; }

/* SEARCH CATEGORIES */
.search-categories { height: 70px; display: flex; justify-content: center; align-items: center; }
.search-categories__link { margin: 0 20px; color: #6f10b6; font-size: 1.22em; font-weight: 900; }

/* SEARCH HEADER */
.header-search { height: 70px; display: flex; flex-direction: row; align-items: center; }
.header-search__headline { margin-left: 4px; color: #495354; font-size: 1.38em; font-weight: 900; }

/* POPUP */
#app-popup:not(.__show) { display: none; }
#app-popup.__show { position: fixed; bottom: 55px; right: 70px; z-index: 999; animation: popup .3s ease-out; }
.popup-lang { background: #fff; width: 260px; padding: 36px 32px 25px; border-radius: 30px; position: relative; display: flex; flex-direction: column; box-shadow: 0 0 30px rgba(0, 0, 0, .3); }
.popup-close { background: #fff; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; position: absolute; top: -10px; right: -10px; border-radius: 50%; }
.popup-close__timer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; border-radius: 50%; }
.popup-close__button { background: #9538db; width: 32px; height: 32px; border-radius: 50%; position: relative; z-index: 3; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.popup-close__button:hover { background: #a346ea; }
.popup-content { text-align: center; font-size: 1.05em; font-weight: 700; color: #252728; }
.popup-content > strong { color: #9538db; }
.popup-buttons { margin-top: 23px; display: flex; flex-direction: column; }
.popup-button { width: 100%; height: 38px; font-size: 1em; font-weight: 700; cursor: pointer; }
.popup-button__yes { background: #9538db; color: #fff; border-radius: 25px; }
.popup-button__yes:hover { background: #a346ea; }
.popup-button__no { color: #9538db; }
.popup-button__no:hover { text-decoration: underline; }
.popup-toongo { position: absolute; bottom: 0; right: 0; pointer-events: none; }
.popup-toongo::before { background-image: url('/app/images/comic.svg'); background-repeat: no-repeat; background-size: contain; width: 25px; height: 16px; display: block; content: ''; position: absolute; bottom: -16px; right: 85px; }
.popup-toongo__icon { background-image: url('/app/images/toongo.svg'); background-repeat: no-repeat; background-size: contain; width: 50px; height: 50px; position: absolute; bottom: -35px; right: 20px; animation: wobble 2s ease infinite; }

/* WIDGET */
#app-widget { position: fixed; top: 5px; right: 0; z-index: 999; overflow: hidden; border-radius: 0 0 0 5px; display: flex; opacity: 0; flex-direction: column; transition: opacity .1s; }
#app-widget:hover { opacity: 1; }
.widget-id { background: #fff; padding: 10px; font-size: 1em; color: #5328a5; font-weight: 800; display: flex; justify-content: center; align-items: center; }
.widget-link { background: #9538db; width: 60px; padding: 9px 0 10px 5px; color: #fff; font-weight: 800; font-size: .9em; text-align: center; display: block; user-select: none; }
.widget-link:hover { background: #a94cf0; }
.widget-link:first-of-type { border-bottom: 1px solid #7c22c0; }

/* FOOTER */
#app-footer { width: 100%; }
.desktop .footer-wrapper { margin-top: 70px; position: relative; z-index: 3; }
.mobile .footer-wrapper { padding: 40px 0 50px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.footer-inner { display: flex; }
.desktop .footer-inner { height: 148px; padding-bottom: 62px; flex-direction: row; justify-content: space-between; }
.mobile .footer-inner { flex-direction: column; align-items: center; }
.desktop .footer-line { width: 100%; height: 5px; position: relative; border-radius: 5px; overflow: hidden; }
.desktop .footer-line::before { background-image: url(/app/images/colorline3.svg); background-size: cover; background-position: 50% 50%; width: 101%; height: 5px; position: absolute; top: 0; left: -.5%; display: block; content: ''; }
.mobile .footer-line { display: none; }

/* FOOTER MAIN */
.footer-main { display: flex; align-items: center; flex-direction: row; }

/* FOOTER LOGO */
.desktop .footer-logo { width: 38px; }
.desktop .toongo-footer__img { width: 100%; pointer-events: none; }
.mobile .footer-logo { width: 35px; }
.mobile .toongo-footer__img { width: 100%; }

/* FOOTER COPY */
.footer-copy { margin-left: 12px; color: #5a5a5a; }
.desktop .footer-copy { font-size: 1.15em; }
.mobile .footer-copy { font-size: 1em; }

/* FOOTER NAV */
.footer-nav { display: flex; flex-flow: row wrap; align-items: center; }
.mobile .footer-nav { margin-top: 10px; text-align: center; justify-content: center; }
.footer-nav__link { color: #454545; }
.desktop .footer-nav__link { margin-left: 36px; font-size: 1.15em; font-weight: 700; }
.mobile .footer-nav__link { padding: 4px 12px; font-size: 1em; text-decoration: underline; }
.desktop button.footer-nav__link { cursor: pointer; }
.desktop .footer-nav__link:hover { color: #a346ea; }

/* FOOTER LANGUAGE */
.footer-nav__language { position: relative; }
.mobile .footer-nav__language { margin-top: 18px; flex: 100%; display: flex; justify-content: center; }
.desktop #app-root:not(.__error) .footer-nav__language { margin-left: 36px; }
#app-root.__error .footer-nav__language { display: none; }
.nav-language__switch { display: flex; align-items: center; box-sizing: content-box; }
.switch-container { position: absolute; z-index: 4; bottom: 56px; right: -4px; display: none; }
.mobile .switch-container { bottom: 51px; right: 50%; transform: translateX(50%); }
.switch-container::before { width: 100%; height: 30px; position: absolute; bottom: -30px; left: 0; display: block; content: ''; }
.switch-box { background: #fff; width: 200px; padding: 15px 0 15px 20px; display: flex; flex-direction: column; border-radius: 16px; }
.mobile .switch-box { padding: 15px 0 15px 20px; }
.switch-box::before { background: #73d5f2; width: calc(100% + 16px); height: calc(100% + 16px); position: absolute; z-index: -1; top: -8px; left: -8px; display: block; content: ''; opacity: .3; border-radius: 20px; }
.switch-box::after { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #73d5f2; display: block; content: ''; position: absolute; bottom: -16px; right: 12px; opacity: .3; }
.mobile .switch-box::after { right: 50%; transform: translateX(50%); }
.switch-box__link { padding: 5px 0; display: flex; align-items: center; animation: slideup .2s; }
.mobile .switch-box__link { padding: 2px 0; }
.switch-link__flag { margin-right: 8px; transform: scale(.8); }
.mobile .switch-link__flag { transform: scale(.75); }
.switch-link__label { font-weight: 700; color: #686868; }
.desktop .switch-link__label { font-size: 1.05em; }
.mobile .switch-link__label { font-size: .95em; }
.desktop .switch-box__link:hover .switch-link__label { color: #a346ea; }
.desktop .footer-nav__language:hover .switch-container, .footer-nav__language.__show .switch-container { display: block; }
.desktop .language-label { display: none; }
.mobile .language-label { margin-left: 10px; color: #454545; font-size: 1em; font-weight: 700; }

/* FLAG ICONS */
.flag-icon { background-size: cover; width: 33px; height: 33px; display: block; border-radius: 50%; }
.flag-de { background-image: url(/app/images/flag_de.png); }
.flag-en { background-image: url(/app/images/flag_en.png); }
.flag-es { background-image: url(/app/images/flag_es.png); }
.flag-fr { background-image: url(/app/images/flag_fr.png); }
.flag-it { background-image: url(/app/images/flag_it.png); }
.flag-nl { background-image: url(/app/images/flag_nl.png); }
.flag-pl { background-image: url(/app/images/flag_pl.png); }
.flag-pt { background-image: url(/app/images/flag_pt.png); }

/* TOOLTIP */
.mobile .tooltip { display: none; }
.desktop .tooltip { background: rgba(0, 0, 0, .8); padding: 8px 18px 7px 18px; color: #fdfdfd; font-size: 1em; font-weight: 900; white-space: nowrap; position: absolute; top: -48px; left: 50%; z-index: 99; border-radius: 15px; transform: translate(-50%, 0); pointer-events: none; display: none; }
.desktop .__tt:hover .tooltip { display: block; animation: tooltip .3s ease-in-out; }

/* MEDIA */

@media (max-width: 1820px) {

	:root {
		--app-header-height: 85px;
	}

	.desktop .__inner, .desktop .__d-inner { width: 1462px; }
	.desktop #app-root::before { height: 4px; }

	/* SVG */
	.svg__nav { width: 27px; height: 27px; }
	.desktop .header-nav__link:hover .svg__nav { transform: scale(1) translateY(-10px); }
	.desktop .header-nav__link:active .svg__nav { transform: scale(1) translateY(-8px); }
	.desktop .svg__tools { width: 28px; height: 28px; }
	.svg__junior { width: 53px; }
	.desktop .svg__option { width: 27px; height: 27px; }
	.desktop .svg__expand { width: 20px; }
	.svg__side-close { width: 11px; }
	.svg__mouse { height: 27px; }
	.svg__gamepad { height: 30px; margin-top: -7px; }
	.svg__mygames-button { width: 22px; height: 22px; }
	.svg__mygames-empty { width: 78px; height: 78px; }
	.svg__search-input { width: 26px; height: 26px; }
	.svg__search-category { width: 24px; height: 24px; }

	

	/* HEADER */
	.logo-xmas { width: 115px; }

	.desktop .header-logo { transform: scale(.88); margin-top: 28px; }
	.desktop .header-nav__link { margin: 0 23px; }
	.nav-link__name { font-size: 1.08em; }

	/* PUMPKIN */
	.header-pumpkin { width: 32px; height: 32px; }

	/* APP MAIN */
	.desktop #app-main { min-height: calc(100vh - 313px); }

	/* HEADER FIELD */
	/*
	.desktop .header-field { height: 78px; padding-top: 15px; }
	*/
	.desktop .header-field { margin-top: 45px; padding-bottom: 15px; }
	.desktop .header-field__headline { font-size: 1.22em; }
	.desktop .header-field__more { margin-top: 2px; padding: 4px 15px 5px 15px; font-size: .9em; }

	/* HEADER BROWSE */
	.desktop .header-browse { height: 70px; }
	.desktop .header-browse__headline { font-size: 2.1em; }

	/* HEADER PAGE */
	.desktop .header-page { height: 60px; }
	.desktop .header-page__headline { font-size: 2em; }

	/* GRID */
	.desktop .grid-big { grid-template-columns: repeat(auto-fill, 353px); gap: 16px; margin-top: 10px; }
	.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 230px); gap: 24px 16px; }
	.desktop .grid-side { grid-template-columns: repeat(2, 230px); gap: 14px; }
	
	.desktop .grid-heroes { grid-template-columns: repeat(auto-fill, 112px); gap: 23px; }
	
	.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 198px); gap: 12px; }
	.desktop .grid-tags-fixed { margin-top: 50px; }

	/* SLIDER */
	.desktop .slider-track { width: 1327px;}
	.desktop .slider-content {  margin-top: 14px!important; grid-template-columns: repeat(50, 112px)!important; gap: 23px; }
	.desktop .slider-button { width: 46px; height: 60px; }
	.desktop .slider-button__svg { width: 13px; }

	/* EMPTY LINE */
	.empty-line { font-size: 1em; }

	/* THUMBS */
	.desktop .thumb-game, .desktop .thumb-empty { border-radius: 16px; overflow: hidden; }
	.desktop .thumb-game::after {  border-radius: 0 0 16px 16px; }
	.desktop .thumb-game__name { padding: 6px 16px 7px 16px;  }
	.desktop .title-size__big { font-size: 1em; }
	.desktop .title-size__medium { font-size: .95em; }

	/* NEW ICON */
	.new { padding: 4px 12px; border-radius: 16px 0; }

	/* TAGS */
	.tag-box__img { width: 42px; }
	.tag-box__name { font-size: 1em; }

	/* MORE BUTTON */
	.more { margin-top: 36px; }
	.more-button { padding: 10px 30px; font-size: 1.2em; border-radius: 20px; }

	/* ABOUT */
	.desktop .section-about { margin-top: 60px; }
	.desktop .section-about__text > p { margin: 20px 4px 0 4px; font-size: 1em; line-height: 1.5em; }
	.desktop .header-about__headline { font-size: 1.6em; }

	/* GAME */

	/*
	.desktop .__game .grid-fixed { margin-top: 40px; }
	.desktop .game-ad { margin-top: 25px; }
	*/
	/*
	.desktop .game-embed { height: calc(100vh - 210px); }
	*/
	/*
	.desktop .game-header { min-width: 700px; height: 90px; padding: 0 10px; }
	*/

	.desktop .game-splash__thumb { width: 145px; border-radius: 25px; }
	.desktop .game-splash__title { font-size: 28px; }
	.desktop .game-splash__play { margin-top: 13px; height: 50px; padding: 0 35px; font-size: 19px; line-height: 22px; }
	.desktop .game-splash__svg {  width: 27px; }
	.desktop .game-splash__loading { height: 50px; }


	.desktop .game-splash__start { padding: 0 28px; height: 48px; font-size: 1.15em; }
	.desktop .game-title__headline { font-size: 2em; }
	.desktop .game-description > p { font-size: 1em; }
	.desktop .game-copy { margin-top: 25px; }
	.desktop .game-tags { margin-top: 25px; }

	/* CONTROLS */
	.controls__wasd i { width: 13px; height: 13px; }
	.controls__wasd i:nth-child(1) { margin-left: 14px; }

	/* TIMER */
	.section-game.__timer .timer-label { font-size: 11px; }
	.section-game.__timer .timer-seconds { font-size: 11px; }

	/* COPY */
	.desktop .game-copy__element { font-size: .9em; }

	/* GAME TAGS */
	.game-tag__img { width: 40px; }
	.game-tag__name { font-size: 1em; }

	/* PAGE */
	.header-page__headline { font-size: 2em; }
	.desktop .page-text > p, .desktop .page-text > ul { font-size: 1.05em; }

	/* ERROR */
	.header-error__headline { font-size: 2.4em; }
	.header-error__more { padding: 8px 22px; font-size: 1em; }

	/* CONSENT */
	.consent-container { width: 550px; padding: 30px 45px 40px 45px; border-radius: 25px; }
	.consent-header { margin: 20px 0 20px; font-size: 1.4em; }
	.consent-info { font-size: 1em; }
	.consent-button { margin-top: 5px; font-size: 1em; }

	/* DATA */
	.data-container { max-width: 400px; padding: 50px 30px 30px; border-radius: 25px; }

	/* SIDE */
	.side-content { padding: 0 45px 40px; }

	/* SIDE CLOSE */
	.side-close { width: 42px; height: 42px; }
	#app-mygames .side-close { top: 45px; }
	#app-search .side-close { top: 49px; }

	/* MYGAMES */
	.mygames-buttons { height: 48px; }
	.mygames-button { font-size: 1.05em; }
	.mygames-content { margin-top: 5px; }
	.mygames-empty__headline { margin: 15px 0 5px; font-size: 1.95em; }
	.mygames-empty__info { font-size: 1em; }

	/* SEARCH */
	.search-input { height: 60px; }
	.search-toongo::before { width: 30px; height: 30px; }
	.search-phrase { font-size: 1.15em; }
	.search-results { margin-top: 1.2vw; }
	.search-categories { height: 66px; }
	.search-categories__link { margin: 0 16px; font-size: 1.05em; }
	.header-search { height: 62px; }
	.header-search__headline { font-size: 1.2em; }

	/* POPUP */
	.popup-lang { width: 235px; padding: 35px 30px 25px; border-radius: 25px; }
	.popup-close { top: -10px; right: -10px; }
	.popup-content { font-size: 1em; }
	.popup-button { height: 34px; font-size: .95em; }
	.popup-toongo::before { width: 25px; height: 16px; bottom: -16px; right: 85px; }
	.popup-toongo__icon { width: 45px; height: 45px; bottom: -35px; right: 20px; }

	/* FOOTER */
	.desktop .footer-wrapper { margin-top: 64px; }
	.desktop .footer-inner { height: 130px; padding-bottom: 58px; }
	.desktop .footer-logo { width: 34px; }
	.desktop .footer-copy { font-size: 1.05em; }
	.desktop .footer-nav__link { font-size: 1.05em; }

	/* LANG SWITCH */
	.nav-language__switch { transform: scale(.95); }
	.switch-container { bottom: 54px; }
	.switch-box__link { padding: 3px 0; }
	.desktop .switch-link__label { font-size: .95em; }
	
	/* TOOLTIP */
	.desktop .tooltip {  font-size: .95em; }

}

@media (max-width: 1550px) {

	:root {
		--app-header-height: 80px;
		--game-header-height: 60px;
	}

	.desktop .__inner, .desktop .__d-inner { width: 1432px; }

	/* GRID */
	.desktop .grid-big { grid-template-columns: repeat(auto-fill, 347px); column-gap: 14px; }
	.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 227px); column-gap: 14px; row-gap: 18px; }
	.desktop .grid-side { grid-template-columns: repeat(2, 227px); column-gap: 14px; row-gap: 18px; }
	
	.desktop .grid-heroes { grid-template-columns: repeat(auto-fill, 112px); column-gap: 19px; }
	
	.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 194px); row-gap: 12px; column-gap: 12px; }
	.desktop .grid-tags-fixed { margin-top: 50px; }

	/* SLIDER */
	.desktop .slider-track { width: 1170px;}
	.desktop .slider-content {  margin-top: 14px!important; grid-template-columns: repeat(50, 99px)!important; gap: 20px; }
	.desktop .slider-button { width: 46px; height: 60px; }
	.desktop .slider-button__svg { width: 13px; }


	.desktop .svg__option { width: 24px; height: auto; }
	.desktop .svg__expand { width: 19px; }
	.desktop .game-title__name { font-size: 1.4em; }

	.desktop .game-splash__thumb { width: 125px; border-radius: 20px; }
	.desktop .game-splash__title { font-size: 25px; }
	.desktop .game-splash__play { margin-top: 10px; height: 46px; padding: 0 30px; font-size: 17px; line-height: 21px; }
	.desktop .game-splash__svg {  width: 24px; }
	.desktop .game-splash__loading { height: 46px; }

}

@media (max-width: 1466px) {

	/* INNER */
	.desktop .__inner, .desktop .__d-inner { width: 1290px; }

	/* SVG */
	.desktop .svg__junior { width: 50px; margin-bottom: 4px; }
	.desktop .svg__tools { width: 26px; height: 26px; }
	
	.desktop .ad-container .grid-medium { gap: 14px; }
	

	/* HEADER */
	.logo-xmas { width: 108px; }


	/* HEADER */
	
	
	.desktop .header-logo { transform: scale(.8); margin-top: 29px; }
	.desktop .header-logo:hover::before { transform: none; }
	.desktop .header-logo:hover::after { transform: none; }
	.desktop .header-logo:hover .logo__img { transform: none; }
	.desktop .header-nav__link { margin: 0 20px; }
	.desktop .nav-link__name { font-size: 1.02em; }


	/* PUMPKIN */
	.header-pumpkin { width: 30px; height: 30px; }

	/* HEADER FIELD */
	.desktop .header-field { margin-top: 38px; }
	.desktop .header-field__headline { font-size: 1.15em; }

	/* HEADER BROWSE */
	.desktop .header-browse { height: 64px; }
	.desktop .header-browse__headline { font-size: 2em; }

	/* GRID */
	.desktop .grid-big { grid-template-columns: repeat(auto-fill, 316px); gap: 8px; }
	.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 208px); gap: 16px 8px; }
	.desktop .grid-side { grid-template-columns: repeat(2, 208px); gap: 16px 8px; }
	.desktop .grid-heroes { grid-template-columns: repeat(auto-fill, 99px); gap: 20px;}
	.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 196px); gap: 12px; }
	.desktop .grid-tags-fixed { margin-top: 50px; }

	/* THUMB GAME */
	.desktop .thumb-game { border-radius: 14px; }
	.desktop .thumb:hover .thumb-game { transform: translate3d(0, 0, 0); }

	.desktop .thumb:hover .new { transform: none; }

	/* HERO */
	.desktop .hero:hover > .thumb-hero { transform: translateY(-2px); }

	/* TAG */
	.desktop .tag:hover > .tag-box { transform: none; }

	/* GAME */
	.desktop .game-container { gap: 40px; }
	.desktop .game-wrapper { width: 940px; }
	/*
	.desktop .game-ad__banner.big { width: 160px; }
	*/
	.desktop .game-ad { margin-top: 20px; }

	.desktop .adunit.sky { padding: 0; border-radius: 0; }
	
	.desktop .adunit, .desktop .ads_unit_horizontal { width: 970px; height: 100px; }
	

	/*
	.desktop .game-header { height: 68px; }
	.desktop .game-title__headline { font-size: 1.9em; }
	*/
	.desktop .grid-big { margin-top: 5px; }
	.desktop .section-browse { margin-top: 5px; }
	.desktop .section-page { margin-top: 5px; }
	/*
	.desktop .game-embed { max-width: calc(100vw - 260px); height: calc(100vh - 200px); }
	*/
	.desktop .game-tag:hover { transform: none; }

	/* MYGAMES */
	.desktop .mygames-buttons { padding-top: 15px; padding-bottom: 9px; height: 46px; }
	.desktop .mygames-content { margin-top: 7px; }

	/* FOOTER */
	.desktop .footer-copy { font-size: 1.02em; }
	.desktop .footer-nav__link { font-size: 1.02em; }


}

@media (max-width: 1390px) {

	/*
	.desktop .game-embed { max-width: calc(100vw - 260px); height: calc(100vh - 100px); }
	*/
	.game-ad__banner { padding: 0; border-radius: 0; }

	.desktop .game-wrapper { max-width: 900px; }

	.desktop .game-splash__badge { width: 40px; height: 40px; }
	.game-description__headline { margin-bottom: 22px; margin-top: 0; font-size: 1.8em; }

}

@media (max-width: 1300px) {

	.desktop .__inner, .desktop .__d-inner { width: 1200px; }

	/* GRID */
	.desktop .grid-big { grid-template-columns: repeat(auto-fill, 294px); }
	.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 193px); }
	.desktop .grid-side { grid-template-columns: repeat(2, 193px); }
	.desktop .grid-heroes { grid-template-columns: repeat(auto-fill, 92px); gap: 18px; }
	.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 186px); row-gap: 12px; column-gap: 12px; }
	.desktop .grid-tags-fixed { margin-top: 50px; }


	/* SLIDER */
	.desktop .slider-track { width: 1082px;}
	.desktop .slider-content {  margin-top: 14px!important; grid-template-columns: repeat(50, 92px)!important; gap: 18px; }
	.desktop .slider-button { width: 46px; height: 60px; }
	.desktop .slider-button__svg { width: 13px; }



	.desktop .game-splash__thumb { width: 110px; border-radius: 15px; }
	.desktop .game-splash__title { font-size: 25px; }
	.desktop .game-splash__play { margin-top: 10px; height: 46px; padding: 0 30px; font-size: 17px; line-height: 21px; }
	.desktop .game-splash__svg {  width: 24px; }
	.desktop .game-splash__loading { height: 46px; }

}

@media (max-width: 1200px) {

	.desktop .__inner, .desktop .__d-inner { width: 1020px; }
	.desktop .onhover__yellow { display: none; }

	/* GRID */
	.desktop .grid-big { grid-template-columns: repeat(auto-fill, 332px); column-gap: 12px; }
	.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 194px); column-gap: 12px; row-gap: 12px; }
	.desktop .grid-side { grid-template-columns: repeat(2, 224px); column-gap: 15px; row-gap: 15px; }
	.desktop .grid-heroes { grid-template-columns: repeat(auto-fill, 97px); column-gap: 18px; }
	.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 194px); row-gap: 12px; column-gap: 12px; }
	.desktop .grid-tags-fixed { margin-top: 50px; }
	.desktop .grid-fixed { margin-top: 70px; }

	.desktop .__main .grid-big .thumb:nth-of-type(4) { display: none; }
	.desktop .__main .grid-medium .thumb:nth-of-type(6) { display: none; }
	.desktop .grid-heroes .hero:nth-of-type(10), .desktop .grid-heroes .hero:nth-of-type(11) { display: none; }

	.desktop .__game .grid-medium .thumb:nth-of-type(16), .desktop .__game .grid-medium .thumb:nth-of-type(17), .desktop .__game .grid-medium .thumb:nth-of-type(18) { display: none; }

	.desktop .thumb:hover::before { border-radius: 15px; }
	.desktop .thumb-game { border-radius: 12px; }

	.desktop .game-wrapper { margin-bottom: 0px; }
	
	/*
	.desktop .game-embed { max-width: 90vw; max-height: calc(100vh - 199px); }
	*/
	.desktop .game-column { display: none; }

}

@media (max-width: 1100px) {

	.desktop .__inner, .desktop .__d-inner { width: 940px; }

	/* GRID */
	.desktop .grid-big { grid-template-columns: repeat(auto-fill, 305px); column-gap: 12px; }
	.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 178px); column-gap: 12px; row-gap: 12px; }
	.desktop .grid-side { grid-template-columns: repeat(2, 178px); column-gap: 12px; row-gap: 12px; }
	.desktop .grid-heroes { grid-template-columns: repeat(auto-fill, 88px); column-gap: 18px; }
	.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 178px); row-gap: 12px; column-gap: 12px; }
	.desktop .grid-tags-fixed { margin-top: 50px; }
	.desktop .grid-fixed { margin-top: 70px; }

	.desktop .thumb-game { border-radius: 12px; }

}

@media (max-width: 700px) {

	.desktop .__inner, .desktop .__d-inner { width: 1240px; }
	.desktop .header-nav { margin-left: 24px; }

	.desktop .grid-big { grid-template-columns: repeat(auto-fill, 318px); column-gap: 10px; }
	.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 213px); column-gap: 10px; row-gap: 16px; }
	.desktop .grid-side { grid-template-columns: repeat(2, 227px); column-gap: 14px; row-gap: 10px; }
	.desktop .grid-heroes { grid-template-columns: repeat(auto-fill, 107px); column-gap: 15px; }
	.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 194px); row-gap: 12px; column-gap: 12px; }
	.desktop .grid-tags-fixed { margin-top: 50px; }
	.desktop .grid-fixed { margin-top: 70px; }

	.desktop .thumb-game, .desktop .thumb-empty { border-radius: 15px; }
	.desktop .thumb:hover > .thumb-game { transform: translate3d(0, -6px, 0); }

	/* HERO */
	.desktop .hero:hover > .thumb-hero { transform: translateY(-6px); }


}

@media (max-width: 700px) {

	.desktop .__inner, .desktop .__d-inner { width: 96vw; }

	/* SVG */
	.desktop .header-nav__link:hover .svg__nav { transform: none; opacity: 0; }
	.svg__junior { width: 48px; }
	.desktop .button-junior > .svg__junior, .desktop .svg__tools { transition: transform .2s; }
	.desktop .svg__tools { width: 24px; height: 24px; }
	.desktop .button-tools__circle:hover > .svg__tools { transform: scale(1.1); }
	.desktop .svg__option { width: 23px; height: 23px; }
	.desktop .game-options__button:hover .svg__option:not(.svg__dislike) { transform: scale(1.1); }
	.desktop .game-options__button:hover .svg__dislike { transform: scale(1.1, -1.1); }
	.svg__side-close { width: 10px; }
	.svg__search-input { width: 24px; height: 24px; }
	.svg__search-category { margin-bottom: 2px; }
	.svg__data-close { width: 20px; height: 20px; }

	/* HEADER */
	.desktop .header-inner { height: 86px; padding-bottom: 5px; }
	.desktop .header-logo { transform: scale(.8); margin-top: 29px; }
	.desktop .header-nav { margin-left: 10px; }
	.desktop .header-nav__link { margin: 0 20px; }
	.nav-link__name { font-size: .95em; }
	.desktop .header-nav__link:hover .nav-link__name { transform: none; }
	.desktop .header-tools { margin-top: 6px; margin-right: 12px; }

	/* APP MAIN */
	.desktop #app-main { min-height: calc(100vh - 267px); }

	/* HEADER FIELD */
	.desktop .header-field { height: 68px; padding-top: 12px; }
	.desktop .header-field__headline { font-size: 1.1em; }
	.desktop .header-field__more { padding: 2px 16px 4px 16px; font-size: .85em; }

	/* HEADER BROWSE */
	.header-browse { height: 64px; }
	.header-browse__headline { font-size: 1.95em; }

	/* HEADER PAGE */
	.header-page { height: 56px; }
	.header-page__headline { font-size: 1.8em; }

	/* GRIDS */
	.desktop .grid-big { grid-template-columns: repeat(auto-fill, 23.4vw); column-gap: .8vw; }
	.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 15.33vw); column-gap: .8vw; row-gap: .8vw; }
	.desktop .grid-side { grid-template-columns: repeat(2, 15.16vw); column-gap: 1vw; row-gap: 1vw; }
	.desktop .grid-heroes { grid-template-columns: repeat(28, 7.54vw); }
	.desktop .grid-heroes.grid-fixed { grid-template-columns: repeat(11, 7.54vw); }
	.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 15.49vw); }
	.desktop .grid-fixed { margin-top: 60px; }

	/* THUMBS */
	.thumb-game, .thumb-empty { border-radius: 15px; }
	.desktop .thumb-game { box-shadow: none; }
	.desktop .thumb:hover > .thumb-game { transform: translate3d(0, -6px, 0); box-shadow: none; }
	.desktop .thumb-big .thumb-game__name { font-size: .95em; padding: 10px 16px; }
	.desktop .thumb-medium .thumb-game__name { font-size: .9em; padding: 8px 14px; }

	/* HERO */
	.desktop .hero:hover > .thumb-hero { transform: translateY(-6px); }

	/* TAG */
	.desktop .tag:hover > .tag-box { transform: translateY(-3px); }
	.tag-box__img { width: 36px; }
	.tag-box__name { font-size: 1em; }

	/* MORE BUTTON */
	.more-button { font-size: 1.05em; }

	/* ABOUT */
	.section-about { margin-top: 40px; }
	.section-about > p { font-size: 1em; line-height: 1.4em; }
	.header-about__headline { font-size: 1.6em; }

	/* GAME */
	.desktop .game-header { min-height: none; flex-direction: row-reverse; align-items: center; justify-content: space-between; }
	.game-header__top { margin-top: 0; }
	.game-header__bottom { margin-top: 0; }
	.desktop .game-title { display: none; }
	.game-window::after { width: 70px; height: 70px; }
	.desktop .game-splash__badge { width: 130px; height: 130px; }
	.desktop .game-splash__start { height: 43px; font-size: 1em; }
	.game-title__headline { font-size: 1.6em; }

	/* CONTROLS */
	.controls__wasd i { width: 12px; height: 12px; }
	.controls__wasd i:nth-child(1) { margin-left: 13px; }
	.controls__cursors i.controls__cursor::before { margin: 2px 0 0 4px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid #ada2b9; }
	.controls__icon > i.controls__key { height: 24px; line-height: 22px; }

	/* GAME DESCRIPTION */
	.desktop .game-description-title { display: block; margin-bottom: 15px; }
	.desktop .game-description__headline { text-align: center; font-weight: 900; font-size: 1.6em; color: #4f4f4f; }
	.game-description > p { font-size: .95em; line-height: normal; }

	/* GAME COPY */
	.game-copy { margin-top: 25px; }
	.game-copy__element { font-size: .85em; }

	/* GAME TAGS */
	.game-tags { margin-top: 20px; }
	.game-tag__img { width: 36px; }
	.game-tag__name { font-size: .95em; }

	/* GAME LINE */
	.game-line { margin: 30px 0 10px 0; }

	/* PAGE TEXT */
	.page-text > h2 { font-size: 1.1em; }
	.page-text > p, .page-text > ul { font-size: .9em; line-height: 1.6em; }

	/* CONSENT */
	.consent-container { width: 495px; padding: 30px 40px 40px 40px; border-radius: 20px; }
	.consent-header { font-size: 1.3em; }
	.consent-info { font-size: .95em; }
	.consent-button { font-size: .95em; }

	/* DATA */
	.data-container { max-width: 350px; padding: 48px 30px 30px; border-radius: 25px; }
	.data-close { width: 38px; height: 38px; top: 7px; right: 7px; }
	.data-header { font-size: .95em; }
	.data-options { margin: 25px 0; gap: 8px; }
	.data-picked { margin: 25px 0; padding: 20px 0; font-size: .95em; }
	.data-final { margin: 20px 0 25px; }
	.data-button__option.__show { height: 38px; font-size: .9em; }
	.data-button__option.__show::after { top: 8px; }
	.data-button__options-cancel, .data-button__confirm-yes, .data-button__confirm-no { height: 36px; font-size: .95em; }

	/* SIDE */
	.side-content { padding: 0 40px 30px; }

	/* SIDE CLOSE */
	.side-close { width: 38px; height: 38px; border: 3px solid #fff; }
	#app-mygames .side-close { top: 33px; }
	#app-search .side-close { top: 37px; }

	/* MYGAMES */
	.mygames-buttons { height: 44px; border-radius: 0; }
	.mygames-button { font-size: .95em; }
	.mygames-empty__headline { font-size: 1.6em; }

	/* SEARCH */
	.search-input { height: 52px; border-radius: 20px; }
	.search-toongo { width: 14%; }
	.search-toongo::before { width: 26px; height: 26px; }
	.search-phrase { width: 72%; font-size: 1.05em; }
	.search-icon { width: 14%; }
	.search-categories { height: 57px; }
	.search-categories__link { margin: 0 18px; font-size: .95em; display: flex; flex-direction: column; align-items: center; }
	.header-search { height: 52px; }
	.header-search__headline { font-size: 1.1em; }

	/* POPUP */
	.popup-lang { width: 225px; padding: 30px 30px 23px; }
	.popup-close {  width: 38px; height: 38px; top: -10px; right: -10px; }
	.popup-content { font-size: .95em; }
	.popup-buttons { margin-top: 18px; }
	.popup-button { height: 32px; font-size: .95em; }

	/* FOOTER */
	.desktop .footer-wrapper { margin-top: 62px; }
	.desktop .footer-inner { height: 110px; padding-bottom: 33px; }
	.desktop .footer-copy { font-size: .95em; margin-left: 10px; }
	.desktop .footer-nav__link { font-size: .95em; margin-left: 34px; }
	.desktop #app-root:not(.__error) .footer-nav__language { margin-left: 30px; }

	/* SWITCH BOX */
	.switch-box { padding: 15px 0 15px 20px; }

	/* TOOLTIP */
	.desktop .tooltip { padding: 5px 15px; font-size: .85em; }

}

@media (max-width: 700px) {

	/* HEADER */
	.desktop .header-inner { height: 84px; }
	.desktop .header-logo { transform: scale(.73); margin-top: 32px; }
	.desktop .header-nav { margin-left: 0; }


	/* SLIDER */
	.slider-button { width: 36px; height: 90px; margin-top: -45px; }


	/* TOOLTIP */
	.desktop .tooltip { top: -40px; }

}

@media (max-width: 700px) {

	/* GRIDS */
	.desktop .grid-big { grid-template-columns: repeat(8, 31.17vw); column-gap: 1.2vw; }
	.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 18.22vw); column-gap: 1.2vw; row-gap: 1.2vw; }
	.desktop .grid-side { grid-template-columns: repeat(2, 18.22vw); column-gap: 1.2vw; row-gap: 1.2vw; }
	.desktop .grid-heroes { grid-template-columns: repeat(28, 9.5vw); }
	.desktop .grid-heroes.grid-fixed { grid-template-columns: repeat(9, 9.5vw); }
	.desktop .desktop .grid-heroes.grid-fixed .hero:nth-child(10), .desktop .grid-heroes.grid-fixed .hero:nth-child(11) { display: none; }
	.desktop .grid-heroes.grid-fixed { grid-template-columns: repeat(11, 9.5vw); }
	.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 18.69vw); }

	/* MAIN GRID */
	.desktop .__main .grid-big .thumb:nth-of-type(4) { display: none; }
	.desktop .__main .grid-medium .thumb:nth-of-type(6) { display: none; }
	.desktop .grid-heroes .hero:nth-of-type(10), .desktop .grid-heroes .hero:nth-of-type(11) { display: none; }

	/* THUMBS */
	.thumb-game, .thumb-empty { border-radius: 15px; }
	.desktop .thumb-game, .desktop .thumb-empty { border: none; }
	.desktop .thumb::before { opacity: 0; }
	.desktop .thumb-big .thumb-game__name { padding: 7px 13px; font-size: 1em; }
	.desktop .thumb-medium .thumb-game__name { padding: 7px 13px; font-size: .9em; }

	/* GAME TAGS */
	.desktop .game-tag__img { width: 32px; }
	.desktop .game-tag__name { font-size: .9em; }

	/* SIDE */
	.side-content { padding: 0 35px 30px; }

}

/* MOBILE RESOLUTIONS */
@media (max-width: 700px) {

	.desktop .__inner, .desktop .__d-inner { min-width: 980px; }

	/* SVG */
	.mobile .svg__search-input { width: 24px; height: 24px; opacity: .3; }
	

	/* APP MAIN */
	.mobile #app-main { min-height: calc(100vh - 239px); }

	/* GRIDS DESKTOP */
	.desktop .grid-big { grid-template-columns: repeat(8, 318.6px); column-gap: 12px; }
	.desktop .grid-medium { grid-template-columns: repeat(auto-fill, 186.4px); column-gap: 12px; row-gap: 12px; }
	.desktop .slider-content.grid-medium { grid-template-columns: repeat(12, 186.4px); column-gap: 12px; }
	.desktop .grid-side { grid-template-columns: repeat(2, 186.4px); column-gap: 12px; }
	.desktop .grid-heroes { grid-template-columns: repeat(28, 97.27px); column-gap: 13px; }
	.desktop .grid-heroes.grid-fixed { grid-template-columns: repeat(9, 97.27px); }
	.desktop .grid-tags { grid-template-columns: repeat(auto-fill, 191.2px); column-gap: 6px; }

	/* THUMB */
	.thumb-empty, .thumb-game { border-radius: 12px; }

	/* MORE BUTTON */
	.more-button { padding: 8px 22px; font-size: 1em;  }

	/* PAGE */
	.page-text > p, .page-text > ul { line-height: 1.5em; font-size: .9em; }
	.page-text > h2 { margin-top: 26px; font-size: 1.05em; }

}

@media (max-width: 760px) {

	.mobile .__inner { width: 92.58vw; }

	/* MENU */
	.menu-header { height: 72px; }

	

	/* SLIDER */
	.mobile .slider-wrapper { padding: 0 calc((100vw - 92.58vw) / 2); }

	/* GRID */
	.mobile .grid-medium { grid-template-columns: repeat(auto-fill, 29.5vw); row-gap: 1.955vw; column-gap: 1.955vw; }
	.mobile .grid-side { grid-template-columns: repeat(2, 29.559vw); row-gap: 1.3vw; column-gap: 1.3vw; }
	.mobile .grid-heroes { grid-template-columns: repeat(40, 14.22vw); column-gap: 1.93vw; }
	.mobile .grid-heroes.grid-fixed { grid-template-columns: repeat(22, 14.22vw); }
	.mobile .grid-tags { grid-template-columns: repeat(auto-fill, 29.5vw); row-gap: 1.955vw; column-gap: 1.955vw; }

	/* CONSENT */
	.consent-container { width: 85%; max-width: 490px; }
	.consent-logo { width: 100px; height: auto; }
	.consent-header { margin: 15px 0 20px; }
	.consent-info { line-height: 20px; }
	.consent-button { padding: 9px 25px 10px 25px; }

}

@media (min-width: 741px) {

	/* tablet */

	.mobile .adunit { background: #f3f3f3; width: 640px!important; height: 100px!important; margin: 55px auto 10px; box-sizing: content-box; }
	.mobile .section-browse .adunit, .mobile .section-game .adunit { margin: 0 auto 30px; }
	.mobile .ads_unit_horizontal { width: 640px!important; height: 100px!important; }

}

@media (max-width: 740px) {

	/* smartphones */

	.mobile .adunit { background: #f3f3f3; width: 300px; height: 250px; margin: 45px auto 0; box-sizing: content-box; }
	.mobile .section-browse .adunit, .mobile .section-game .adunit { margin: 0 auto 30px; }
	.mobile .ads_unit_horizontal { width: 300px; height: 250px; }

}

@media (max-width: 550px) {

	/*
		mniejszy header
		mniejsze fonty
		mniejsze nagłówki
		ogólnie setup pod smartfony


		od tego miejsca grid jest fixed na 390 px
		poniżej tam 400 z hakiem już normalnie wymiary na vw

		od tego miejsca obowiązuje smartfonowe ostylowanie czcionek, przycisków itd

	*/

	.mobile .__inner { width: 390px; }

	/* SVG */
	.mobile .svg__tools { width: 27px; height: 27px; }
	.mobile .svg__side-close { display: none; }
	.mobile .svg__side-close-mobile { fill: #4d4d4d; width: 24px; height: 24px; display: block; }

	/* HEADER */
	.mobile .header-inner { height: 84px; }
	.mobile .mobile-logo { width: 98px; }

	/* TOOLS */
	.mobile .header-tools__button { margin-left: 28px; }
	
	/* HEADER FIELD */
	.mobile .header-field { height: 72px; padding-top: 12px; }
	.mobile .header-field__headline { margin-left: 0; font-size: 1.25em; }
	.mobile .header-field__more { margin-top: 1px; font-size: .9em; }

	/* SIDE */
	.mobile .side-container { width: 100%; }
	.mobile .side-content { padding: 0 calc((100vw - 390px) / 2) 70px; }
	.mobile .side-close { background: #fff; width: auto; height: auto; z-index: 10; left: auto; right: 1vw; box-shadow: none; border: none; }
	.mobile #app-mygames .side-close { top: 14px; z-index: 91; }
	.mobile #app-search .side-close { top: 46px; }

	.mygames-buttons { height: 44px; border-radius: 0; padding-top: 50px; }

	/* SEARCH */
	.mobile .search-input { height: 56px; border-radius: 15px; }
	.mobile .search-toongo { width: 18%; }
	.mobile .search-toongo::before { width: 28px; height: 28px; }
	.mobile .search-phrase { width: 100%; padding-left: 12px; font-size: 1.1em; }
	.mobile .search-icon { display: none; }
	.mobile .header-search { height: 56px; padding-top: 8px; }
	.mobile .header-search__headline { margin-left: 4px; font-size: 1.1em; }
	.mobile .search-results { margin-top: 20px; }
	.mobile .search-categories { height: 63px; margin-top: 20px; }
	.mobile .search-categories__link { margin: 0 13px; }
	.mobile .search-empty { font-size: 1em; }
	
	/* GRIDS */
	.mobile .grid-medium { grid-template-columns: repeat(auto-fill, 190px); gap: 10px; }
	.mobile .grid-side { grid-template-columns: repeat(2, 190px); gap: 10px; }
	.mobile .grid-heroes { grid-template-columns: repeat(40, 94px); column-gap: 15px; }
	.mobile .grid-heroes:not(.grid-fixed) { margin-top: 6px; }
	.mobile .grid-tags { grid-template-columns: repeat(auto-fill, 190px); gap: 10px; }
	.mobile .grid-heroes.grid-fixed { margin-top: 40px; grid-template-columns: repeat(22, 94px); }

	.mobile .slider-wrapper { padding: 0 calc((100vw - 390px) / 2); }

	/* MORE BUTTON */
	.more-button { padding: 8px 22px; font-size: 1em;  }

	/* THUMBS */
	.thumb-game, .thumb-empty { border-radius: 8px; }

	/* EMPTY LINE */
	.empty-line { margin-left: 4px; font-size: 1em; }

	/* TAG BOX */
	.tag-box { padding: 4px; }
	.tag-box__img { width: 42px; }
	.tag-box__name { font-size: 1em; }

	/* GAME */
	.mobile .game-container { width: 100vw; }
	.mobile .game-header { height: auto; justify-content: center; }
	.mobile .game-options { background: #f7f7f7; margin-top: 0; padding: 10px 10px 7px; border-radius: 0 0 20px 20px; }
	.mobile .game-title { margin-top: 20px; margin-bottom: 20px; }
	.mobile .game-title__headline { font-size: 1.7em; line-height: 1.2em; }
	.mobile .game-copy { margin-top: 20px; }

	/* PAGE */
	.mobile .page-text > p, .mobile .page-text > ul { font-size: .95em; }
	
	/* FOOTER */
	/*
	.mobile .footer-nav { width: 60%; grid-template-columns: repeat(1, 1fr); row-gap: 1.8vw; column-gap: 1.6vw; }
	*/
	

}

@media (max-width: 400px) {

	.mobile .__inner { width: 94vw; }

	/* GRIDS */
	.mobile .grid-medium { grid-template-columns: repeat(auto-fill, 45.75vw); row-gap: 2.5vw; column-gap: 2.5vw; }
	.mobile .grid-side { grid-template-columns: repeat(2, 45.75vw); row-gap: 2.5vw; column-gap: 2.5vw; }
	.mobile .grid-heroes { grid-template-columns: repeat(40, 23.5vw); column-gap: 3.5vw; }
	.mobile .grid-heroes:not(.grid-fixed) { margin-top: 6px; }
	.mobile .grid-tags { grid-template-columns: repeat(auto-fill, 45.75vw); row-gap: 2.5vw; column-gap: 2.5vw; }
	.mobile .grid-heroes.grid-fixed { margin-top: 40px; grid-template-columns: repeat(22, 23.5vw); }

	.mobile .slider-wrapper { padding: 0 3vw; }

	.mobile .side-content { padding: 0 3vw 70px; }

}

/* ANIMATIONS */
@keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fadeout {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes timer {
	0% { transform: translateY(10px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes tap {
	25% { transform: scale(.9); }
	100% { transform: scale(1); }
}

@keyframes popup {
	from { transform: translateY(150%); }
	to { transform: translateY(0); }
	80% { transform: translateY(-20px); }
}

@keyframes slideup {
	0% { transform: translateY(6px); }
	100% { transform: translateY(0); }
}

@keyframes consent {
	0% { transform: translateY(15px); opacity: 0; }
	50% { opacity: 1; }
	100% { transform: translateY(0); }
}

@keyframes gelatine {
	from, to { transform: scale(1, 1); }
	25% { transform: scale(0.9, 1.1); }
	50% { transform: scale(1.1, 0.9); }
	75% { transform: scale(0.95, 1.05); }
}

@keyframes search {
	0% { transform: translateX(100%); }
	100% { transform: translateX(0); }
}

@keyframes search_hide {
	0% { transform: translateX(0); }
	100% { transform: translateX(100%); }
}

@keyframes menu {
	0% { transform: translateX(-80%); }
	100% { transform: translateX(0); }
}

@keyframes tooltip {
	0% { transform: translate(-50%, 5px); }
	50% { transform: translate(-50%, -5px); }
	100% { transform: translate(-50%, 0); }
}

@keyframes grow {
    60% { transform: scale(.8); stroke-width: 4px; fill-opacity: 0; }
    100% { transform: scale(.9); stroke-width: 8px; fill-opacity: 1; fill: #219a00; }
}

@keyframes draw {
    0%, 100% { stroke-opacity: 1; }
    100% { stroke-dashoffset: 0; }
}

@keyframes wobble {
	0% { transform: translateY(0%); }
	15% { transform: translateY(-25%) rotate(-5deg); }
	30% { transform: translateY(20%) rotate(3deg); }
	45% { transform: translateY(-15%) rotate(-3deg); }
	60% { transform: translateY(10%) rotate(2deg); }
	75% { transform: translateY(-5%) rotate(-1deg); }
	100% { transform: translateY(0%); }
  }