.game-badge {
        width: fit-content;
        border-radius: 20px;
        padding: var(--gff-badge-padding, 3px 8px 2px);
        display: flex;
        align-items: center;
        font-size: 10px;
        line-height: 140%;
        font-weight: 700;
        margin-bottom: 3px;
        background-blend-mode: multiply;
        background-color: var(--gff-badge-bg-color, rgb(211, 238, 227));
        color: var(--gff-badge-txt-color, rgb(0, 55, 79));
    }
    
    .game-badge__icon {
        margin-right: 5px;
    }
    
    .game-badge__pill * {
        padding: 0;
        margin: 0;
    }
    .touch-target {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        background-color: var(--gff-touch-target-bg-color);
        border-radius: 24px;
        z-index: 2;
        position: relative;
        text-decoration: none;
    }

    .game-info__more .touch-target {
        background-color: var(--gff-touch-target-bg-color-overlay);
    }

    .game-info__close .touch-target {
        background-color: var(--gff-touch-target-bg-color-close);
    }

    .favourite-action__icon {
        display: flex;
        justify-content: center;
        background-image: var(--gff-favourite-inactive-image);
        background-repeat: no-repeat;
        background-position: center center;
        width: 10px;
        height: 9px;
        transition: transform 0.2s cubic-bezier(.47,1.64,.41,.8);
    }

    .favourite-action-icon--small-animation {
        transform: scale(0.9);
    }

    .favourite-action-icon--big-animation {
        transform: scale(2);
    }

    .favourite-action__icon.favourite-action__icon--active {
        background-image: var(--gff-favourite-active-image);
        width: 16px;
        height: 14px;
        margin-top: 1px;
    }
    
    .touch-target .touch-target__action {
        position: absolute;
        height: 40px;
        width: 40px;
        border: 0;
        background-color: transparent;
        cursor: pointer;
    }
    
    .touch-target.touch-target--themed span {
        color: var(--gff-touch-target-txt-color);
        font-size: 19px;
    }
    
    .touch-target.touch-target--themed path {
        fill: var(--gff-touch-target-txt-color);
    }
    
    .touch-target.touch-target--themed:hover path {
        fill: var(--gff-touch-target-txt-color-hover);
    }

    .game-info__close .touch-target.touch-target--themed path {
        fill: var(--gff-touch-target-txt-color-close);
    }

    .game-info__close .touch-target.touch-target--themed:hover path {
        fill: var(--gff-touch-target-txt-color-close-hover);
    }

    .game-info__more .touch-target.touch-target--themed path {
        fill: var(--gff-touch-target-txt-color-overlay);
    }
    
    .game-info__more .touch-target.touch-target--themed:hover path {
        fill: var(--gff-touch-target-txt-color-overlay-hover);
    }
    .game-tile-context-menu {
                display: none;
                box-sizing: border-box;
                z-index: 3;
                padding: 12px;
                font-size: 14px;
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
                background: var(--gff-overlay-bg-color);
                background-blend-mode: multiply;
                content: '';
                transition: top 0.3s ease-out;
            }

            .game-tile-context-menu--close {
                top: 100%;
            }

            .game-tile-context-menu--active {
                display: flex;
            }

            .game-tile-context-menu--open {
                top: 0;
            }

            .game-tile-context-menu > div {
                z-index: 1;
            }
            
            .game-tile-context-menu,
            .game-tile-context-menu__header,
            .game-tile-context-menu__footer {
                justify-content: space-between;
            }
            
            .game-tile-context-menu__header,
            .game-tile-context-menu__footer {
                align-items: center;
            }
            
            .game-tile-context-menu__header__game-icon,
            .game-tile-context-menu__header__game-icon img {
                width: 44px;
                height: 44px;
            }
                        
            .game-info--subscript {
                font-size: 10px;
                line-height: 140%;
            }
            
            .game-tile-context-menu__body {
                flex: 1;
                padding-top: 8px;
            }
                        
            .game-info__name,
            .game-tile-context-menu,
            .game-tile-context-menu__body,
            .game-tile-stats-container__stat {
                flex-direction: column;
            }

            .game-info__name {
                font-size: 12px;
                color: var(--gff-overlay-game-title-text-color);
                max-width: var(--gff-overlay-game-info-name-max-width);
            }
            
            .game-info__name span {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
            
            .game-info__name,
            .game-tile-context-menu__body,
            .game-tile-context-menu__header,
            .game-tile-context-menu__footer,
            .game-tile-stats-container,
            .game-tile-stats-container__stat {
                display: flex;
            }
            
            .game-tile-stats-container {
                padding: 4px 0;
                border-top: var(--gff-overlay-stat-border, solid 1px #fff);
                line-height: 19.6px;
            }
            
            .game-tile-stats-container__stat {
                padding-right: 10px;
                border-right: var(--gff-overlay-stat-border, solid 1px #fff);
                margin-right: 10px;
            }
            
            .game-tile-stats-container__stat:last-child {
                border-right: 0;
                margin-right: 0;
            }

            .play-button {
                background: var(--gff-button-bg-color);
                color: var(--gff-button-txt-color);
                border-radius: var(--gff-button-radius);
                border: var(--gff-button-border);
                cursor: pointer;
                padding: 7px 12px;
                font-size: 12px;
                font-weight: 700;
                height: 30px;
                text-transform: var(--gff-button-transform);
                text-decoration: none;
                box-sizing: border-box;
            }

            .play-button:hover,
            .play-button:active,
            .play-button:focus {
                background: var(--gff-button-bg-color-hover);
                border-width: var(--gff-button-border-width--hover);
            }

            .skeleton {
                height: 8px;
                border-radius: 2px;
                background: var(--gff-skeleton-bg, #00648F);
                background-size: 200% 100%;
                margin-bottom: 6px;
                animation: 1.5s shine linear infinite;
            }

            .skeleton--tall {
                height: 14px;
            }

            .skeleton:last-child { margin-bottom: 0; }

            .skeleton--sml {
                width: 40px;
            }
            
            .skeleton--md {
                width: 60px;
            }

            .skeleton--lrg {
                width: 80px;
            }
    
            .game-info--subscript {
                color: var(--gff-overlay-stat-title-text-color) 
            }

            @keyframes shine {
                to {
                    background-position-x: -200%;
                }
            }
            .game-badge {
                background: var(--gff-badge-jackpot-bg-color);
                border-radius: 4px;
                padding: var(--gff-jackpot-badge-padding, 4px 8px 3px);
            }

            .game-badge__text {
                color: var(--gff-badge-jackpot-txt-color);
                font-size: 12px;
            }
            .game-info-active-players {
            font-size: 10px;
            font-weight: 400;
            line-height: 14px;
            text-align: left;
            color: var(--gff-game-info-dealer-name-color);
            display: block;
        }
        .game-badge {
            background: var(--gff-badge-blackjack-bg-color);
            padding: 5px 8px;
            border-radius: 24px;
            margin-bottom: 5px;
          }

          .game-blackjack-icon {
            margin-right: 4px;
            display: flex;
            align-items: center;
          }
          
          .game-blackjack-seats-available {
            font-size: 10px;
            font-weight: 700;
            line-height: 14px;
            text-align: left;
            color: var(--gff-badge-blackjack-txt-color);
          }
          .game-info-dealer {
            font-size: 10px;
            font-weight: 400;
            line-height: 14px;
            text-align: left;
            color: var(--gff-game-info-dealer-name-color);
            display: block;
        }

        /* 
        :host {
            container-type: inline-size;
            container-name: baccarat-badges;
            display: block;
        }

        .game-baccarat-wrapper {
            margin-bottom: 5px;
            display: flex;
            justify-content: flex-start;
        }

        .game-baccarat-badges {
            width: 24px;
            height: 24px;
            border-radius: 24px;
            background-color: rgba(0, 0, 0, 0.8);
            font-size: 12px;
            place-content: center;
            font-weight: 700;
            text-align: center;
            margin: 0 2px 2px 0;
            display: none;
        }

        .badge-tie {
            color: #008D3B;
        }

        .badge-bank {
            color: #EE0000;
        }
        .badge-tiger {
            color: #ffb22f;
        }

        .badge-player {
            color: #1A6FFF;
        }

        .badge-tie-first {
            color: #FFF;
            background-color: rgba(0, 141, 59, 0.7);
        }

        .badge-bank-first {
            color: #FFF;
            background-color: rgba(238, 0, 0, 0.7);
        }

        .badge-player-first {
            color: #FFF;
            background-color: rgba(0, 77, 209, 0.7);
        }
            
        .badge-tiger-first{
            color: #FFF;
            background-color: #ffb22f;
        }

        .game-baccarat-badges:nth-child(-n+4) {
            display: grid;
        }

        @container baccarat-badges (min-width: 131px) {
            .game-baccarat-badges:nth-child(-n+5) {
                display: grid;
            }
        }

        @container baccarat-badges (min-width: 156px) {
            .game-baccarat-badges:nth-child(-n+6) {
                display: grid;
            }
        }

        @container baccarat-badges (min-width: 181px) {
            .game-baccarat-badges:nth-child(-n+7) {
                display: grid;
            }
        }

        @container baccarat-badges (min-width: 206px) {
            .game-baccarat-badges:nth-child(-n+8) {
                display: grid;
            }
        }

        @container baccarat-badges (min-width: 231px) {
            .game-baccarat-badges:nth-child(-n+9) {
                display: grid;
            }
        }

        @container baccarat-badges (min-width: 256px) {
            .game-baccarat-badges:nth-child(-n+10) {
                display: grid;
            }
        }
        */


        /* game-roulette-wrapper */
        /* 
        :host {
            container-type: inline-size;
            container-name: roulette-badges;
            display: block;
        }
            
        .game-roulette-wrapper {
            margin-bottom: 5px;
            display: flex;
        }

        .game-roulette-badges {
            width: 24px;
            height: 24px;
            border-radius: 24px;
            font-size: 10px;
            line-height: 14px;
            display: none;
            place-content: center;
            font-weight: 700;
            text-align: center;
            margin: 0 2px 2px 0;
            color: #FFF;
        }

        .game-roulette-badges:nth-child(-n+4) {
            display: grid;
        }

        @container roulette-badges (min-width: 131px) {
            .game-roulette-badges:nth-child(-n+5) {
                display: grid;
            }
        }

        @container roulette-badges (min-width: 156px) {
            .game-roulette-badges:nth-child(-n+6) {
                display: grid;
            }
        }

        @container roulette-badges (min-width: 181px) {
            .game-roulette-badges:nth-child(-n+7) {
                display: grid;
            }
        }

        @container roulette-badges (min-width: 206px) {
            .game-roulette-badges:nth-child(-n+8) {
                display: grid;
            }
        }

        @container roulette-badges (min-width: 231px) {
            .game-roulette-badges:nth-child(-n+9) {
                display: grid;
            }
        }

        @container roulette-badges (min-width: 256px) {
            .game-roulette-badges:nth-child(-n+10) {
                display: grid;
            }
        }

        .game-roulette-badges.red {
            background-color: #EB003C;
        }
        
        .game-roulette-badges.black {
            background-color: #000000;
        }
        
        .game-roulette-badges.green {
            background-color: #008A16;
        }
        */



        /*  */
        .game-item {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-color: var(--gff-game-tile-bg-color);
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        height: 100%;
        flex-direction: column;
        border-radius: var(--gff-game-tile-border-radius);
        overflow: hidden;
        position: relative;
        font-size: 14px;
        line-height: 140%;
        border: var(--gff-game-tile-border);
        box-sizing: border-box;
    }

    .game-item * {
        font-family: var(--gff-game-tile-font);
    }

    .game-item * {
        letter-spacing: 0;
    }

    .game-item:hover .game-item-foreground-container {
        top: var(--gff-game-tile-fg-animation-jump);
    }

    .game-item:hover .game-item-foreground-container.overlay-active {
        top: 0;
    }

    .game-item-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
    
    .game-item-foreground-container {
        position: absolute;
        top: 0;
        left: 0;
        transition: top .2s ease-in-out 0s;
    }

    .game-item-foreground-container,
    .game-item-foreground-position {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .game-item-foreground-container .game-item-foreground-position {
        height: 100%;
        width: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        position: absolute;
        transform-origin: right top;
        transition: all 0.3s ease-in-out 0s, filter 0.6s ease 0.3s, backdrop-filter 0s ease 0.3s;
    }

    .game-item-foreground-container.overlay-active .game-item-foreground-position {
        z-index: 100;
        width: 45px;
        height: 45px;
        transition: all 0.3s ease-in-out 0s, filter 0.3s ease-in-out 0s, backdrop-filter 0s ease-out 0s;
    }

    .game-item-maintenance .game-item-foreground-position {
        backdrop-filter: var(--gff-game-tile-maintenance-backdrop-filter, brightness(0.75));
        filter: var(--gff-game-tile-maintenance-filter, brightness(0.5));
    }
    
    .game-item-foreground-position,
    .game-item-foreground {
        aspect-ratio: var(--gff-game-tile-aspect-ratio, 1 / 1);
        object-fit: contain;
    }
    
    .game-item-foreground {
        border-radius: var(--gff-game-tile-fg-image-radius);
        background: var(--gff-game-tile-fg-image-bg);
        width: auto;
        height: auto;
        max-width: 70%;
        max-height: 70%;
        padding: 3px;
    }

    .game-item-foreground-container.overlay-active .game-item-foreground-position .game-item-foreground {
        padding: 1px;
    }
    
    .game-badges-holder {
        width: 100%;
    }
    
    .game-info__more a {
        font-weight: bold;
        color: #fff;
        text-decoration: none;
    }
    
    .game-item__footer {
        background: var(--gff-game-tile-footer-gradient);
        background-blend-mode: multiply;
        color: var(--gff-game-tile-footer-text);
    }

    .game-item__decorations {
        padding: 12px 12px 0 12px;
    }

    .game-action {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
    }
    
    .game-action-maintenance {
        cursor: default;
    }
    
    .game-item,
    .game-info,
    .game-item__decorations {
        display: flex;
        justify-content: space-between;
    }
    
    .game-info {
        align-items: flex-end;
        padding: 8px 12px 12px;
    }
    
    .game-item__footer .game-item__decorations { padding-bottom: 0; }
    
    .game-info__name { 
        padding-right: 10px;
        overflow: hidden;
    }