/* ---------------- */
/*!----- GAMES ---- */
/* ---------------- */

/* Light styles only */

@media (prefers-color-scheme: dark)
{
    :root
    {
        --page-bg: var(--psd-lightest-gray);
        --page-bg-inverted: var(--black);
        --card-bg: var(--white);
        --form-bg: var(--white);
        --text: var(--screen-black);
        --text-inverted: var(--white);
        --subtle: var(--psd-dark-gray);
        --subtler: var(--psd-light-gray);
        --disabled: var(--psd-light-gray);
        --interactive: var(--muted-purple);
        --accent: var(--brand-yellow);
        --link: var(--purple);
        --bright: var(--purple);
        --negative: var(--red);
        --input-bg: var(--page-bg);
        --input-text: var(--text);
        --button-bg: var(--text);
        --button-text: var(--card-bg);
        --status-good: var(--muted-green);
        --status-alert: var(--orange);
        --status-bad: var(--negative);
    } 
}

:root
{
    --page-bg: var(--psd-lightest-gray);
    --text: var(--screen-black);
    --subtle: var(--psd-mid-gray);
    --subtler: rgba(0,0,0,.25);

    --gameBg: var(--page-bg);
    --gameTextOnBg: var(--text);
}

/* Games pages change iOS chrome via the page background color; this `::before` pseudo-element prevents that color from taking over the whole page. */
body
{
    position: relative;
    background: var(--gameBg) !important;
}

body::before
{
    background: var(--page-bg) !important;
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

/* Colors */

.game.card.textWhite { color: var(--white) }
.game.card.textBlack { color: var(--black) }

/* List Header */

#games .groupHeader
{
    margin-top: 1em;
    position: relative;
}

#games .groupHeader .groupHeaderIcon,
#games .groupHeader .groupHeaderImage,
#gamesTag .groupHeaderIcon,
#gamesTag .groupHeaderImage
{
    display: block;
    
    width: 100%;
    height: 10em;    
    max-width: 20em;
    max-height: 6em;
    
    margin-bottom: .5em;    
    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;

    color: transparent;
    text-indent: -9999px;
}
#games .groupHeader.art.text
{
    place-items: center;
}
#games .groupHeader.art.text .groupHeaderIcon
{
    width: 8em;
    height: 4.8em;
    background-size: contain;
}

#games .groupHeader p
{
    margin: 0;
    font-weight: 500;
    line-height: 1.22em;
}
#games .groupHeader.text p
{
    text-align: center;
    font-size: 1.2em;
}
#games .groupHeader.art.text p
{
    /* display: grid; */
    /* place-content: center; */
    text-align: left;
}

#games .groupHeader p a
{
    font-weight: 700;
    color: var(--groupFg);
}

#games .groupHeader.art.centered
{
    margin-bottom: 0;
}

#games .groupHeader.art.centered .groupHeaderIcon,
#games .groupHeader.art.centered .groupHeaderImage
{
    height: 6em;
    width: 100%;
}

#games .groupHeader.text.centered p
{
    text-align: center;
    margin: 1em auto;
    width: 80%;
}

/* Catalog header */

#games.catalog .groupHeader::before
{
    content: '';
    display: block;
    position: absolute;

    width: 2.3em;
    height: 2.3em;
    left: calc(50% + 3.3em);
    top: .5em;

    background-color: var(--brand-yellow);

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-image: url("../images/games/catalog-sparkles-animated2.bba2e4e5b68c.svg");

}

.gameHeader nav#breadcrumb,
#gameDetail #gameListing,
#gameDetail footer
{
    max-width: 90rem;
    margin: 0 auto;
}

.gameHeader nav#breadcrumb
{    
    margin: .5em auto .5em auto;
    
    font-size: .9em;
}

.gameHeader nav#breadcrumb ul,
.gameHeader nav#breadcrumb ul li
{
    list-style-type: none;
    display: inline-block;
    
    margin: 0;
    padding: 0;
    text-align: left;
    
    color: var(--gameTextOnBg);
}

.gameHeader nav#breadcrumb ul li.primary-category::before,
.gameHeader nav#breadcrumb ul li.secondary-category::before
{
    content: "";
    
    display: inline-block;
    width: .77em;
    height: .77em;    
            
    opacity: .4;
}

.gameHeader nav#breadcrumb ul li.primary-category::before
{    
    vertical-align: -.1em; 
    
    -webkit-mask-size: 80% 80%;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;    
    -webkit-mask-image: url("../images/nav-arrow-right.f4dc711826fb.svg");
    background-color: var(--gameTextOnBg);
}

.gameHeader nav#breadcrumb ul li.secondary-category::before
{
    content: '/';
    
    font-weight: 600;
    font-size: 1em;  
    text-align: center;
    color: var(--gameTextOnBg);
}

.gameHeader nav#breadcrumb ul li a
{
    text-decoration: none;
}

/* Featured In… */

/* 1.5 ratio version */
#gameLitingFeatuerdIn ul li.onepointfive {
    width: 8em;
    height: 4.8em;
}

#gameListingFeaturedIn ul,
#gameListingFeaturedIn ul li
{
    padding: 0;
    margin: 0;
    list-style-type: none;    
}
#gameListingFeaturedIn ul li
{
    display: inline-block;
    position: relative;
    
    width: 8em;
    height: 4.8em;
    margin-right: .5em;
    border-radius: 0.5em;
    
    color: transparent;
    text-indent: -9999px;
    
    background-color: var(--card-bg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
    #gameListingFeaturedIn ul li a,
    #gameListingFeaturedIn ul li::after
    {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    #gameListingFeaturedIn ul li::after
    {
        content: '';        
        border-radius: 0.5em;
        border: 0.15rem solid var(--subtler);
        pointer-events: none;
    }
    #gameListingFeaturedIn ul li:last-child
    {
        margin-right: 0;
    }

/* Develop for Catalog link */

#headerDevelop
{
    /* max-width: 80%; */
    margin-top: 3em;

    text-align: center;
    font-size: 1.1em;
}

.gameCard.skinny .gameCardImage,
.gameCard.wide.skinny .gameCardImage
{
    height: 12rem;    
}

/* Custom gameCards */

.gameCard.wide.season-one
{
    margin-top: 2em;
}

/* All Games Link */

#cardAllGames
{
    margin-top: 2em;
}
#cardAllGames .gameCardImage
{
    background-image: url("../images/games/gamegroups/all-games-wide-skinny.099e0acee323.png");
}

/* Card Tray */

section.cardTrayContainer
{
    position: relative;
    -webkit-user-select: none;
}

ul.cardTray
{
    max-width: unset;
    
    list-style: none;
    
    white-space: nowrap;
    overflow-x: scroll;
    
    padding: 1em;
    margin-left: -1em;
    margin-right: -1em;
    
    border: .1em solid var(--subtler);
    border-radius: 1em;
    
    background-color: var(--card-bg);
    
    -webkit-user-select: none;
}

ul.cardTray::-webkit-scrollbar
{
    height: 0;
}

ul.cardTray li
{
    display: inline-block;
    position: relative;
    
    width: 10em;
    height: 6em;
    margin-right: .5em;
    
    color: transparent;
    text-indent: -99999px;
}
    /* border */
    ul.cardTray li::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 0.5em;
        border: 0.15rem solid var(--subtler);
        pointer-events: none;
    }
    ul.cardTray li:last-child
    {
        margin-right: 0;
    }
ul.cardTray li img
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
        
    border-radius: .5em;
}

ul.cardTray .pagerNavigatorButton
{
    top: calc(50% - 1.25em);
}

ul.cardTray .pagerNavigatorButton.previous
{
    left: -4em;
}
ul.cardTray .pagerNavigatorButton.next
{
    right: -4em;
}

/* Paging */

.pager
{
    display: grid;
    position: relative;
    
    width: fit-content;
    margin: 0 auto;
    font-size: .8em;
    
    grid-template-columns: 2.5em fit-content(100%) 2.5em;
    column-gap: 1em;
}

.pager .current
{
    text-align: center;
    display: flex;
    align-items:center;
    padding-bottom: .15em;
}

.pagerNavigatorButton
{
    color: transparent;
    
    display: inline-block;
    /* position: absolute;    */
    width: 2.5em;
    height: 2.5em;
    border-radius: 1.25em;
        
    background: var(--card-bg);
    border: .1em solid var(--subtler);
    
    user-select: none;
    cursor: pointer;
}
    .pagerNavigatorButton::after
    {
        display: block;
        content: '';
        
        background-color: var(--text);
        -webkit-mask-size: 1.25em 1.25em;
        -webkit-mask-position: center center;
        -webkit-mask-repeat: no-repeat;
       
       /* position: absolute;  */
       position: relative;
       top: -2.5em;
       width: 2.5em;
       height: 2.5em;
       pointer-events: none;
    }
    
.pagerNavigatorButton.disabled
{
    visibility: hidden;
    /* opacity: .5; */
    /* cursor: default; */
}

.pagerNavigatorButton.previous
{
    /* left: 0; */
}
.pagerNavigatorButton.next
{
    /* right: 0; */
}

.pagerNavigatorButton.previous::after
{
    -webkit-mask-image: url("../images/pager-previous.4be1dfe061d5.svg");
    -webkit-mask-position: .45em center;
}
.pagerNavigatorButton.next::after
{
    -webkit-mask-image: url("../images/pager-next.13d7d9fbc38d.svg");
    -webkit-mask-position: .65em center;
}

.pagerNavigatorButton:active
{
    background-color: var(--subtler);
}


/* Catalog banner */



/* Global */

#gameDetail section,
#gameDetail section div,
#gameDetail section p,
#gameDetail section ul,
#gameDetail footer
{
    max-width: unset;
}

#gameDetail #gameListing,
#gameDetail footer
{
    max-width: 90rem;
    margin: 0 auto;
}

/* Outside links */

#gameListing a
{
    font-weight: 500;
    color: var(--gameFg);
}

#gameListing a.external:before
{
    content: '';
    width: 1em;
    height: 1em;
    display: inline-block;
    flex: 0 0 1em;
    position: relative;
    top: .125em;
    -webkit-mask-size: contain;
    -webkit-mask-position: 0% 50%;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--gameFg);
    -webkit-mask-image: url("../images/toolbar-icon-news.ef543d84bf45.svg");
}

#gameListing #gameListingMoreInfo li.link
{
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .5em;
}

#gameListing #gameListingMoreInfo a.external
{
    display: flex;
    flex-flow: row nowrap;
    align-items: start;
    justify-content: start;
    gap: .35em;
}

#gameListing ul+h3
{
    margin-top: 1.5em;
}

/* Website icons */
#gameListing a.external.support:before
{
    -webkit-mask-image: url("../images/thumbsup.03a03efa89dd.svg");
}
#gameListing a.external[href*="play.date/games"]:before
{
    -webkit-mask-image: url("../images/toolbar-icon-games-3.47d069316429.svg");
}
#gameListing a.external[href*="podcast.play.date"]:before
{
    -webkit-mask-image: url("../images/podcast.d15027d6a682.svg");
}
#gameListing a.external[href*="bsky.app"]:before
{
    -webkit-mask-image: url("../images/services/bluesky.ef0cb7f419cb.svg");
}
#gameListing a.external[href*="twitter.com"]:before,
#gameListing a.external[href*="x.com"]:before
{
    -webkit-mask-image: url("../images/services/x.9825308b8fa1.svg");
}

#gameListing a.external[href*="bandcamp.com"]:before,
#gameListing a.external[href*="soundcloud.com"]:before
{
    -webkit-mask-image: url("../images/album.3ebcec89d226.svg");
}
#gameListing a.external[href*="youtube.com"]:before,
#gameListing a.external[href*="youtu.be"]:before,
#gameListing a.external[href*="vimeo.com"]:before
{
    -webkit-mask-image: url("../images/video.e1bb86b643ac.svg");
}
#gameListing a.external[href*="blog"]:before,
#gameListing a.external[href*="devlog"]:before,
#gameListing a.external[href*="development-log"]:before
{
    -webkit-mask-image: url("../images/blog.bf407500771c.svg");
}
#gameListing a.external[href*="manual"]:before
{
    -webkit-mask-image: url("../images/game-manual.cd6d87a54784.svg");
}
#gameListing a.external[href*="discord.gg"]:before,
#gameListing a.external[href*="discord.com"]:before
{
    -webkit-mask-image: url("../images/services/discord.1669201d23bc.svg");
}
#gameListing a.external[href*="patreon.com"]:before
{
    -webkit-mask-image: url("../images/services/patreon.61ac01ccf611.svg");
}
#gameListing a.external[href*="itch.io"]:before
{
    -webkit-mask-image: url("../images/services/itchio.431dd759e379.svg");
}
#gameListing a.external[href*="github.com"]:before
{
    -webkit-mask-image: url("../images/services/github.8dcc6b5262f3.svg");
}
#gameListing a.external[href*="drive.google.com"]:before
{
    -webkit-mask-image: url("../images/services/google_drive.b067693478a5.svg");
}
#gameListing a.external[href*="instagram.com"]:before
{
    -webkit-mask-image: url("../images/services/instagram.81e0d8a058b2.svg");
}
#gameListing a.external[href*="#mastodon"]:before,
#gameListing a.external[href*="mastodon.social"]:before,
#gameListing a.external[href*="mastodon.cloud"]:before,
#gameListing a.external[href*="mstdn.social"]:before,
#gameListing a.external[href*="mastodon.online"]:before,
#gameListing a.external[href*="mastodon.world"]:before,
#gameListing a.external[href*="mas.to"]:before,
#gameListing a.external[href*="pdx.social"]:before,
#gameListing a.external[href*="xoxo.zone"]:before
{
    -webkit-mask-image: url("../images/services/mastodon.749d4e05fb05.svg");
}
#gameListing a.external[href*="cottonbureau.com"]:before,
#gameListing a.external[href*="play.date/shop"]:before
{
    -webkit-mask-image: url("../images/link-merch.d3209ab94467.svg");
}

/* Titles */

#gameListingTitle
{
    margin-left: 0;
    margin-right: 0;
    margin: 0;
}
#gameListingTitle a
{
    text-decoration: none;
}

#games h1
{
    content: "";
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 2em 0;
    padding: 4em 0 0 0;

    font-size: 1.5em;
    line-height: 1.2em;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text);

    background-size: 3.9em;
    background-position: 50% top;
    background-repeat: no-repeat;
}

a[href="#gamesFAQ"]
{
    font-size: .5em;
    opacity: .4;
}


/* Card Tray */

section.cardTrayContainer
{
    position: relative;
}

ul.cardTray
{
    max-width: unset;
    
    list-style: none;
    
    white-space: nowrap;
    overflow-x: scroll;
    
    padding: 1em;
    margin-left: -1em;
    margin-right: -1em;
    
    border: .1em solid var(--subtler);
    border-radius: 1em;
    
    background-color: var(--card-bg);
    
}

ul.cardTray li
{
    display: inline-block;
    position: relative;
    
    width: 10em;
    height: 6em;
    margin-right: .5em;
    
    color: transparent;
    text-indent: -99999px;
}
    /* border */
    ul.cardTray li::after {
        content: 'x';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 0.5em;
        border: 0.15rem solid var(--subtler);
        pointer-events: none;
    }
    ul.cardTray li:last-child
    {
        margin-right: 0;
    }
ul.cardTray li img
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
        
    border-radius: .5em;
}

section.cardTrayContainer .pagerNavigatorButton
{
    color: transparent;
    text-indent: -99999px;
    
    display: inline-block;
    position: absolute;
    top: calc(50% - 1.25em);
    width: 2.5em;
    height: 2.5em;
    border-radius: 1.25em;
        
    background: var(--card-bg);
    border: .1em solid var(--subtler);
    
    user-select: none;
    cursor: pointer;
}
    section.cardTrayContainer .pagerNavigatorButton::after
    {
        display: block;
        content: '';
        
        background-color: var(--text);
        -webkit-mask-size: 1.25em 1.25em;
        -webkit-mask-position: center center;
        -webkit-mask-repeat: no-repeat;
       
       position: absolute; 
       top: 0;
       width: 2.5em;
       height: 2.5em;
    }

section.cardTrayContainer .pagerNavigatorButton.previous
{
    left: -4em;
}
section.cardTrayContainer .pagerNavigatorButton.next
{
    right: -4em;
}

section.cardTrayContainer .pagerNavigatorButton.previous::after
{
    -webkit-mask-image: url("../images/pager-previous.4be1dfe061d5.svg");
    -webkit-mask-position: .45em center;
}
section.cardTrayContainer .pagerNavigatorButton.next::after
{
    -webkit-mask-image: url("../images/pager-next.13d7d9fbc38d.svg");
    -webkit-mask-position: .65em center;
}

section.cardTrayContainer .pagerNavigatorButton:active
{
    background-color: var(--subtler);
}

/* ! Game Cards */

ul.gameCards
{
    display: block;
    list-style: none;
    padding: 0;
    margin-top: 0;
    display: grid;
    grid-template-columns: 38rem 38rem;
    grid-gap: 2rem 4rem;
}
ul.gameCards.small
{
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1em;
}

.gameCard
{
    transition: .2s all ease;
    position: relative;
}

.gameCardImage /* single card */
{
    display: grid;
    position: relative;

    height: 48rem;
    margin: 0 0 0.25em 0;
    padding: 0 .5em;
    border-radius: 0.5em;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 85%;
    background-color: var(--gameBg);
    color: transparent;
    
    text-indent: -9999px;
    text-align: center;
}

.gameCardImage.noAsset
{
    text-indent: unset;
    color: var(--gameTextOnBg);
    
    font-size: 1.5em;
    font-weight: bold;
    
    align-content: center;
    place-content: center;
}

/* border */
.gameCardImage::before
{
    content: ' ';
    position: absolute;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    border-radius: 0.5em;
    border: 0.1rem solid var(--subtler);
    pointer-events: none;

    transition: .2s all ease;
}

/* S2 hotfix */

.gameCard.two
{
    --gameFg: black !important;
}

/* CardTags, game cards with a corner tag/banner */

.cardTags
{
    display: inline-block;
    position: absolute;
    top: 0;
    width: 100%;
    
    cursor: pointer;
    
    transition: .25s all ease;
}

.cardTags div.cardTag
{
    display: inline-block;
    position: absolute;
    
    padding: .1em .3em .2em .3em;
    
    border-radius: .25em;
    border: .1em solid var(--page-bg);    
    
    text-indent: 0;
    font-size: 1.25em;
    font-weight: 600;
}

.cardTags div.cardTag.left
{
    left: -.35em;   
    transform: rotate(-10deg); 
}
.cardTags div.cardTag.right
{
    right: -.35em;    
    transform: rotate(10deg);
}

/* what to do when there's multiple cards */
.cardTags div.cardTag:first-child
{ top: 0; }
.cardTags div.cardTag.left:nth-child(2 of .left)
{ top: 1.7em; transform: rotate(-8deg); }
.cardTags div.cardTag.left:nth-child(3 of .left)
{ top: 3.4em; transform: rotate(-9deg); }
.cardTags div.cardTag.right:nth-child(2 of .right)
{ top: 1.7em; transform: rotate(-8deg); }
.cardTags div.cardTag.right:nth-child(3 of .right)
{ top: 3.4em; transform: rotate(-9deg); }

.cardTags div.cardTag em
{
    font-style: italic;
}

/* Free game */
.cardTags div.cardTag.free
{
    text-transform: uppercase;

    background: var(--purple);
    color: var(--white);
}

/* Game on sale */
.cardTags div.cardTag.sale
{ 
    display: grid;
    
    color: var(--black);
    
    text-align: center;
    text-transform: uppercase;

    top: -.5em;
    left: -.2em;
    padding: 0;
    
    border: 0;

    box-shadow: 0 .1em .2em rgba(0,0,0,.4);
}
    .cardTags div.cardTag.sale .prices
    {        
        padding: .1em .3em .2em .3em;
        border-radius: .25em .25em 0 0;
        background: var(--white);
    }
    .cardTags div.cardTag.sale s,
    .strickenthrough
    {
        position: relative;
        color: var(--psd-dark-gray);        
        text-decoration: none;
        font-size: .9em;
    }
        /* strikethrough */
        .cardTags div.cardTag.sale s::after,
        .strickenthrough::after
        {
            content: '';
            display: inline-block;
            position: absolute;
            left: -5%;
            top: .6em;
            
            width: 110%;
            border-bottom: .1em solid var(--red);
            transform: rotate(-25deg);
        }
    .cardTags div.cardTag.sale .percentOff
    {
        padding: .1em .3em .2em .3em;
        border-radius: 0 0 .25em .25em;
        font-size: .65em;
          
        background: var(--red);
        color: var(--white);
    }

/* tilt jauntily     */
.gameCards .gameCard:nth-child(1n) .cardTags div.cardTag.sale
{
    transform: rotate(-5deg) scale(1.2);
}
.gameCards .gameCard:nth-child(2n) .cardTags div.cardTag.sale
{
    transform: rotate(10deg) scale(1.2);
}
.gameCards .gameCard:nth-child(3n) .cardTags div.cardTag.sale
{
    transform: rotate(4deg) scale(1.2);
}

.gameBuyButton .buyAction + .cardTags
{
    position: absolute;
    top: -.7em;
    right: -1em;
    height: 1em;
}

.gameBuyButton .buyAction + .cardTags .sale
{    
    transform: rotate(10deg) scale(1.1);
}

/* Wishlist */
.cardTags div.cardTag.wishlistable
{
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 1em;
    line-height: 1.3em;
    
    padding: .1em .3em .1em .3em;

    background: var(--link);
    color: var(--white);
}
    .cardTags div.cardTag.wishlistable::after
    {
        content: '💛';
        display: inline-block;
        
        width: 1em;
        height: 1.3em;

        color: transparent;
        text-indent: -9999px;
        
        -webkit-mask-size: 90% 90%;
        -webkit-mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-image: url("../images/games/heart.ae8e7d131406.svg");
        background-color: var(--brand-yellow);
    }

/* unpublished game */

.cardTags div.cardTag.publishedStatus
{
    font-size: .9em;    
    color: var(--white);
    text-transform: uppercase;
    white-space: nowrap;
}
.cardTags div.cardTag.publishedStatus.unpublished
{
    background: var(--red);
}
.cardTags div.cardTag.publishedStatus.publishesOn {
    background: var(--green);
}

.preview-heading {
    padding: .1em;
}
.publish-alert {
    background: var(--orange);
    color: var(--white);
    padding: .1em .3em .2em .3em;
    border-radius: .25em;
}

/* Game group card */

.gameCard.gameGroup .gameCardImage
{
    box-shadow:
    .25em .25em 0 var(--gameBg50),
    .5em .5em 0 var(--gameBg25)
    ;
}

.gameCard.gameGroup .gameText
{
    padding-top: .4em; /* shift down to make room for the shadows */
}

/* Hover */

.gameCard:hover
{
    transform: translate(0, -0.1em) scale(1.01);
}
.gameCardImage:hover::before
{
    box-shadow: 0em .2em 1em var(--gameFg);
    border-color: var(--black);
    opacity: .6;
}

.gameCard:hover .cardTags
{
    transform: translate(0, -0.1em) scale(1.01);
}

.gameCard.small .gameCardImage,
.gameCardImage.fullsize
{
   background-size: cover;
   /* background-color: unset; */;
   aspect-radio: 5/3;
}


.gameCard.wide .gameCardImage
{
    /* background-color: unset; */
    background-size: cover;
    aspect-ratio: 10/3;
}

    .gameCardImageActual
    {
        width: 90%;
        height: 85%;
        background-color: red;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
    }

.gameCard.billboard,
.gameCard.wide
{
    grid-column: 1 / span 2;
}

.gameCard.wide .gameCardImage
{
    height: 24rem;
}

.gameCard.featureMore
{
    background-color: var(--white);
    color: var(--screen-white);
    padding: .5em 1.25em;
    border-radius: 0.1em;

    font-size: 4em;
    font-weight: 600;
}
.gameCard.featureMore p
{
    margin: 0;
}

/* Game text */

.gameCard .gameText
{
    text-align: center;
}

.gameCard h2 /* group, Made by */
{
    font-weight: 600;
    font-size: 1.25em;
    line-height: 1.1em;
    text-align: center;
    margin: 0 0 .5rem 0;
}

ul.gameCards .gameCard a
{
    color: var(--gameFg);
    text-decoration: none;
}
.gameCard h3
{
    font-weight: 400;
    /* font-size: 80%; */
    line-height: 1.1em;
    text-align: center;
    margin: 0rem;
}

/* Game Price in the layout */
.layoutPrice
{
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
}


/* Game Cards list */

ul.gameCards.list
{
    grid-template-columns: 1fr;
    grid-gap: .5em;
}

ul.gameCards.list li.gameCard
{
    display: grid;  
    grid-template-columns: 10em 1fr;
    column-gap: 1em;
    
    padding: .75em .75em .5em .75em;
    border-radius: 1em;
    
    background: var(--card-bg);
    
    cursor: pointer;
}

ul.gameCards.list li.gameCard:nth-child(odd)
{
    /* background: var(--card-bg); */
}

ul.gameCards.list a
{
    display: block;
}

ul.gameCards.list li.gameCard .gameCardImage
{
    width: 10em;
    height: 6em;
}

ul.gameCards.list li.gameCard .gameText
{    
    margin: 0;
}
ul.gameCards.list li.gameCard .gameText h2
{
    text-align: left;
    font-size: 1.5em;
}
ul.gameCards.list li.gameCard .gameText h3
{
    text-align: left;
    margin: .25em 0;
}

ul.gameCards.list li.gameCard.free .gameCardImage::after
{
    font-size: 1em;
    top: -.35em;
    left: -.65em;
}

ul.gameCards.list li.gameCard .gameText .gamePublishDate
{
    color: var(--subtler);
    font-size: .9em;
    margin-top: .5em;
}

/* Search result game cards */
.blockLink .gameTitle a::before
{
    content: ""; 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Tags */

/* Regular tags */

#gamesTag .groupHeaderIcon
{
    display: none !important;
}

/* Game Categories */

#gamesTag.tag .groupHeaderIcon
{
    display: block !important;
    position: relative;
    
    width: 10em;
    height: 6em;
    max-width: 10em !important;
    max-height: 6em  !important;
    margin-bottom: 1.5em;
    
    border-radius: .5em;
}

/* border */
#gamesTag.tag .groupHeaderIcon:after
{
    content: '';
    position: absolute;
    
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0.5em;
    border: 0.15rem solid var(--subtler);
}


#gamesTag.tag .groupHeader p
{
    display: none !important;
}

#gamesTag.tag-all .groupHeaderIcon,
.tag-all.card
{
 background-image: url("../images/games/gamegroups/category-web-all-games.fec1af09aa41.png");
}
#gamesTag.tag-on-sale .groupHeaderIcon,
.tag-on-sale.card
{
 background-image: url("../images/games/gamegroups/group-web-on-sale.1a8142939cfe.png");
}
#gamesTag.tag-quick-plays .groupHeaderIcon,
.tag-quick-plays.card
{
 background-image: url("../images/games/gamegroups/group-web-quick-plays.e82b608150a7.png");
}
#gamesTag.tag-staff-picks .groupHeaderIcon,
.tag-staff-picks.card
{
 background-image: url("../images/games/gamegroups/group-web-staff-picks.9b541ebf9729.png");
}        
#gamesTag.tag-action .groupHeaderIcon,
.tag-action.card
{
 background-image: url("../images/games/gamegroups/category-web-action.68879d3b609f.png");
}
#gamesTag.tag-adventure .groupHeaderIcon,
.tag-adventure.card
{
 background-image: url("../images/games/gamegroups/category-web-adventure.360770c206f2.png");
}
#gamesTag.tag-apps .groupHeaderIcon,
.tag-apps.card
{
 background-image: url("../images/games/gamegroups/category-web-apps.1612f846d4c4.png");
}
#gamesTag.tag-puzzle .groupHeaderIcon,
.tag-puzzle.card
{
 background-image: url("../images/games/gamegroups/category-web-puzzle.3a5df058f217.png");
}
#gamesTag.tag-racing .groupHeaderIcon,
.tag-racing.card
{
 background-image: url("../images/games/gamegroups/category-web-racing.7fd67c160a12.png");
}
#gamesTag.tag-rhythm .groupHeaderIcon,
.tag-rhythm.card
{
 background-image: url("../images/games/gamegroups/category-web-rhythm.3a7e137d353d.png");
}
#gamesTag.tag-rpg .groupHeaderIcon,
.tag-rpg.card
{
 background-image: url("../images/games/gamegroups/category-web-rpg.93fa52a830ae.png");
}
#gamesTag.tag-sports .groupHeaderIcon,
.tag-sports.card
{
 background-image: url("../images/games/gamegroups/category-web-sports.fe7c9d15f7cc.png");
}
#gamesTag.tag-strategy .groupHeaderIcon,
.tag-strategy.card
{
 background-image: url("../images/games/gamegroups/category-web-strategy.283a58b28f42.png");
}

/* !Games views */

#catalogFeatureTags,
#catalogFeatureTags #featureTagsList
{
    max-width: 120rem;
}
    #catalogFeatureTags #featureTagsList
    {
        margin: 1em 0;
        padding: 0;
        
        font-size: .9em;
        text-align: center;
    }
    #catalogFeatureTags #featureTagsList li
    {
        display: inline-block;
        list-style: none;
        
        border-radius: 1em;
        padding: .3em .75em .4em .75em;
        margin: .25em .1em;
        
        background: var(--white);
        
        transition: .2s all ease;
    }
        #catalogFeatureTags #featureTagsList li:hover
        {
            transform: translate(0, -0.07em) scale(1.05);
            box-shadow: 0em .1em .2em rgba(0,0,0,.1);
        }
    
    
    #catalogFeatureTags #featureTagsList li a
    {
        text-decoration: none;
        text-wrap: nowrap;
        color: var(--text);
    }
        #catalogFeatureTags #featureTagsList .newGames,
        #catalogFeatureTags #featureTagsList .newGames a
        {
            background-color: var(--purple);
            color: var(--white);
            font-weight: bold;
        }
        #catalogFeatureTags #featureTagsList .onSale,
        #catalogFeatureTags #featureTagsList .onSale a        
        {
            background-color: var(--red);
            color: var(--white);
            font-weight: bold;
        }


/* Game Listing */

/* Header */

#navbar,
.gameHeader
{
    background-color: var(--gameBg);
    --text: var(--gameTextOnBg);
}

#gameDetail #messages
{
    background-color: var(--gameBg);
    max-width: unset;
    margin: 0 auto;
    padding: 1em;
}

#season #messages
{
    background-color: var(--gameBg);
    max-width: unset;
    margin: 0 auto;
    padding: 1em;
}

#gameDetail li#nav-buy
{
    background-color: var(--text);
}

li#nav-buy.snappedWhite {
    color: var(--white);
}

li#nav-buy.snappedBlack {
    color: var(--black);
}

li#nav-buy.snappedWhite:before {
    background-color: var(--white);
}

li#nav-buy.snappedBlack:before {
    background-color: var(--black);
}

.gameHeader
{
    padding: .75em 0 .5em 0;
}

.gameHeader img
{
    display: block;
    max-width: 100rem;
    max-height: 60rem;
    margin: 0 auto;
}

#gameListing
{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1em;
    padding: 1em 0;
}

#gameListingBody>section,
#gameListingMeta>section,
#gameListingBody>div
{
    width: 100%;
    max-width: 90rem;
}

#gameListingBody,
#gameListingMeta
{
    display: contents;
}

#gameListingTitle
{
    order: 1;
}

#gameListingAuthor
{
    order: 2;
    padding: 0;
    margin: 0 auto;
    align-self: start;
    /* height: auto; */
    display: inline-block;
}
#gameListingAuthor h2+h2
{
    margin-top: .5em;
}

/* Game Notes */

.gameNote
{   
    font-weight: 600;
    text-align: left;
}

/* Game note on Group page */

.gameCards .gameNote
{
    margin: -.5em 0 .5em 0;
}
    .gameCards .gameNote p
    {
        margin-bottom: 0;
    }

/* Staff Notes */

.gameNote.staff
{
    border: .1em dotted var(--purple);
    text-align: left;
}

/* Icon */
.gameNote.staff em::before
{
    content: '';
    position: absolute;
    width: 1.7em;
    height: 1.7em;
    left: -1.9em;
    top: -.3em;
    background: url("../images/staff-note.2a2dad595fb4.svg") no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.gameNote.staff em,
#gameListingBody .gameNote.staff em
{
    position: relative;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 600;
    color: var(--purple);
}



.gameCards .gameNote.staff
{    
    padding: 0 .4em .5em .9em;
    border-width: 0 .1em .1em .1em;
    border-radius: 0 0 .4em .4em;
}
    /* Staff note on Game page */
    #gameListingBody .gameNote.staff
    {
        margin: 0 0 .5em -.9em;
        padding: 0 0 .5em .9em;
        
        border-width: 0 0 .1em .1em;
        border-radius: 0 0 0 .4em;
    }

/* Group Notes */

.gameNote.group
{
    text-align: center;
}
    .gameNote.group p
    {
        margin-top: .75em;
    }

.gameBuyButton
{
    order: 3;
    margin-bottom: 2em;
}

#gameListingDescription
{
    order: 4;
}

#gameListingScreenshots
{
    order: 5;
}

#gameListingCredits
{
    order: 6;
}

#gameListingMoreInfo
{
    order: 7;
}

#gameListingFeaturedIn
{
    order: 8;
}

#gameListingSmallPrint
{
    order: 10;
}

#gameListingScoreboards
{
    order: 9;
}

#gameListing h1
{
    font-size: 2.5em;
    line-height: .9em;
    letter-spacing: -0.03em;
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.3em 0;
}

#gameListing h1 img /* title image */
{
    display: block;
    max-width: 90%;
    max-height: 4em;
    height: auto;
    margin: 0 auto;
}

#gameListing h2
{
    font-size: 1em;
    font-weight: 600;
    text-align: left;
    margin: 0;
    padding: 0;
}

#gameListingBody h3
{
    margin: 0.5em 0 1em 0;
}

#gameListing #gameListingAuthor h2
{
    text-align: center;
    max-width: unset;
}

#gameListingBody em
{
    font-weight: normal;
    font-style: italic;
}

#gameListingTitle h1
{
    line-height: 1em;
    margin: 0;
}
#gameListingAuthor h2
{
    line-height: 1;
}

#gameListingDescription p,
#gameListingDescription span,
#gameListingDescription ul,
#gameListingCredits p,
#gameListingMoreInfo p,
#gameListingSmallPrint
{
    line-height: 1.5em;
}

#gameListingDescription p:first-child
{
    margin-top: 0;
}
#gameListingDescription p:last-child
{
    margin-bottom: 0;
}

/* Markdown-styled fields */

.markdown blockquote
{
    padding: .5em 1em;
    margin: 1em 0;
    background: var(--card-bg);
    border: .1em solid var(--gameBg);
    border-radius: .25em;
}

.markdown blockquote:first-child,
.markdown blockquote:last-child
{
    margin: 0em;
}

.markdown code
{
    font-size: 0.8em;
    font-weight: 600;
}

.markdown ol
{
    padding: 0 0 0 1.5em;
    margin: 0;
}
.markdown ol li
{
    margin-bottom: .25em;
}

.markdown p img
{
    max-width: 100%;
}

#gameListingCredits ul
{
    list-style: square;
    padding-left: 1em;
    margin: 0;
}
    #gameListingCredits ul li
    {
        margin-bottom: .25em;
    }

#gameListingMoreInfo ul
{
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Buy */

#gameBuyConfirmContainer,
#gameBuyConfirmContainer div
{
    position: relative;
    max-width: unset;
    margin: 0;
}
#gameBuyConfirmContainer
{
    background: rgba(255,255,255,0);
    margin: 0em auto -11em auto;    
    border-radius: 2em;
    padding: .5em;
}
#unavailableContainer
{
    padding: .5em 0;    
}

#gameBuyConfirmContainer.noPayment
{
    margin: 0em -.5em 0 -1em;
}

#gameBuyConfirmContainer div.gameBuyDisclosures
{
    display: block;
    margin: .25em 1.8em .25em 0;
    margin: .25em 0;

    text-align: center;
    font-size: 85%;

    color: var(--subtler);
}

#gameBuyConfirmContainer div.gameBuyDiscountDisclosure
{
    margin-top: .5em;
    color: var(--text);
    font-weight: 500;
    line-height: 1.4em;
}
    #gameBuyConfirmContainer div.gameBuyDiscountDisclosure time
    {
        background-color: var(--card-bg);
        padding: .05em .4em .1em .4em;
        border-radius: .5em;
        font-size: .9em;
        font-family: mono, monospace;
    }

    #gameBuyConfirmContainer div.gameBuyDiscountDisclosure time.expired {
        color: var(--readable-red);
    }

/* Animation */

#gameBuyConfirmContainer,
#gameBuyConfirmContainer #gameBuyConfirmInfo
{
    transition-duration: .3s;
    transition-timing-function: ease;
    transition-property: opacity, background, transform;
}

#gameBuyConfirmContainer.confirming
{
    background: rgba(255,255,255,1);

    margin-bottom: -11em;

    box-shadow: 0 0 1em rgba(0,0,0,.3);

    transform: translateY(-10em);
}

#gameBuyConfirmContainer.noHeader.confirming
{
    transform: translateY(-.5em);
}

#gameBuyConfirmContainer .bigButton.confirming
{
    background-image: linear-gradient(
        130deg,
        rgba(255,255,255, .15) 0%,
        rgba(255,255,255, .07) 5%,
        rgba(255,255,255, .00) 6%,
        rgba(255,255,255, .00) 10%,
        rgba(255,255,255, .20) 20%,
        rgba(255,255,255, .00) 30%,
        rgba(255,255,255, .13) 40%,
        rgba(255,255,255, .20) 42%,
        rgba(255,255,255, .00) 55%,
        rgba(255,255,255, .00) 100%
    );

    animation: buttonShine 5s infinite;
    background-position: 1% 0;
    background-size: 200% 200%;
    animation-timing-function: ease-in-out;
    animation-direction: alternate-reverse;
}
@keyframes buttonShine
{
  0%   { background-position: 1% 0; }
  100% { background-position: 100% 0; }
}

/* Style dialog */

#gameBuyConfirmContainer .paymentCard
{
    width: 14em;
    height: 9em;
    margin: 1.5em auto 1em auto;
    padding-top: 3em;
}

#gameBuyConfirmContainer #gameBuyConfirmInfo
{
    opacity: 0;
}

#gameBuyConfirmContainer {
    pointer-events: none;
}

#gameBuyConfirmContainer.confirming #gameBuyConfirmInfo
{
    opacity: 1;
    pointer-events: all;
}

#gameBuyConfirmContainer .paymentCard .cardLastFour
{
    font-size: 1.05em;
}
#gameBuyConfirmContainer .paymentCard .cardExpiration
{
    font-size: 100%;
}

#gameBuyConfirmContainer #gameBuyConfirmMessage
{
    margin: 0;
    text-align: center;
    font-weight: 600;
    font-size: 1.2em;
    line-height: 1.1em;
}

#gameBuyConfirmContainer #gameBuyConfirmMessage #gameBuyConfirmChangePayment
{
    font-size: 70%;
    font-weight: 400;
    color: var(--subtle);
}

/* Meta */

ul.metaInfo
{
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5em;
}
ul.metaInfo li
{
    list-style: none;
    display: flex;
    flex-flow: row nowrap;
    gap: .5em;
    align-items: start;
    justify-content: start;
}
ul.metaInfo li:before
{
    content: '';
    width: 1.5em;
    height: 1.5em;
    position: relative;
    display: inline-block;
    flex: 0 0 1.5em;
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--subtle);

}
ul.metaInfo li.metaBuildFilesize:before
{
    -webkit-mask-image: url("../images/tech-storage.5cbe1f3751f7.svg");
}
ul.metaInfo li.metaPublishedDates:before,
ul.metaInfo li.metaDate:before
{
    -webkit-mask-image: url("../images/calendar.1c8836bff0b0.svg");
    width: 1.4em;
    height: 1.4em;
}
ul.metaInfo li.metaRating:before
{
    -webkit-mask-image: url("../images/appropriate.bbf3aee3db93.svg");
}
ul.metaInfo li.metaAccessibility:before
{
    -webkit-mask-image: url("../images/accessibility.b54ad77fc2bc.svg");
}

ul.metaInfo li.aiDisclosure.ai:before
{
    -webkit-mask-image: url("../images/ai.79add9f6b5e8.svg");
}
ul.metaInfo li.aiDisclosure.noai:before
{
    -webkit-mask-image: url("../images/quill.3458b673bb19.svg");
}
ul.metaInfo li.aiDisclosure.unsure_ai:before
{
    -webkit-mask-image: url("../images/form_mixed.83c3f2ffa2b4.svg");
}


.gameBuyButton
{
    display: grid;
    align-content: center;
}

#gameListingBuy
{
    position: relative;
    max-width: 100rem !important;
    z-index: 10;
    /* outline:1px solid blue; */
}

.gameBuyButton>a,
.gameBuyButton>a.bigButton,
.gameBuyButton div.owned,
.gameBuyButton div.unavailable,
.gameBuyButton div.comingSoon,
.gameBuyButton .bigButton,
.gameBuyButton a.bigButton,
#gameListingBuy .bigButton,
#gameListingGet .bigButton
{
    pointer-events: all;
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 0.5em;
    justify-content: space-evenly;
    align-items: center;
    z-index: 1000;

    /* width: 80%; */
    max-width: 75rem;
    border-radius: 2em;
    padding: .3em 1em .5em 1em;
    margin: 0 auto;

    text-decoration: none;

    background: var(--button-bg);
    background: var(--gameFg);
    color: var(--button-text);
    color: var(--gameTextOnFg);
}

#gameListingGet .bigButton
{
    margin-bottom: 1.5em;
}

.gameBuyButton a.inProgress
{
    background-image: url("../images/progress-background2.c91bb3da3dd2.svg");
    background-position: 1% 0;

    animation: buttonInProgress 3s infinite;
    animation-timing-function: linear;
}
@keyframes buttonInProgress
{
  0%   { background-position: 1% 0; }
  100% { background-position: 100% 0; }
}

.gameBuyButton div.owned::before
{
    content: "";
    position: absolute;
    display: inline-block;

    top: .2em;
    left: .2em;
    z-index: -1;
    width: calc(100% - .4em);
    height: calc(100% - .4em);

    border-radius: 2em;
    background: var(--page-bg);
}

/* Wishlist */

#wishlist-label
{
    position: absolute;
    opacity: 0;
    
    top: .5em;
    left: -4.5em;
    width: 6em;
    
    color: var(--gameFg);
    
    font-size: .8em;
    font-weight: 600;
    text-transform: uppercase;
    
    transform: translate(-.5em, .8em) rotate(-10deg);
    -webkit-user-select: none;
    cursor: default;
}

#wishlist-button
{
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    top: 1.3em;
    left: -2em;
    
    color: transparent;
    text-indent: -9999px;
    
    -webkit-mask-size: 90% 90%;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url("../images/games/heart-outlined.35453a418365.svg");
    background-color: var(--subtler);
}
#wishlist-button::before
{
    content: "Wishlisted!";
    display: block;
}

    #wishlist-button.wishlisted,
    #wishlist-button.justWishlisted
    {
        -webkit-mask-image: url("../images/games/heart.ae8e7d131406.svg");
        background: var(--gameFg);
    }
    #wishlist-button.justWishlisted,
    #wishlist-button.justUnwishlisted
    {
        animation: wishlistHeartReaction .3s;
        animation-timing-function: ease-in-out;
    }
    #wishlist-button.justUnwishlisted
    {        
        animation-direction: reverse;   
        background: var(--subtler);
    }
    
    /* "Wishlisted" label */
    
    #wishlist-button.justWishlisted+#wishlist-label
    {
        opacity: 1;
        animation: wishlistLabelReaction 1s;
        animation-timing-function: linear;
    }
    #wishlist-button.wishlisted+#wishlist-label
    {
        opacity: 0;
    }
    
    @keyframes wishlistHeartReaction
    {
        0% {
            transform: scale(1) rotate(-10deg);
            opacity: .2;
        }
        70% {
            transform: scale(1.3)  rotate(5deg);
            opacity: .9;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    @keyframes wishlistLabelReaction
    {
        0% {
            transform: translate(-.5em, .8em) rotate(0deg);
            opacity: 0;
        }
        17% {
            transform: translate(-.5em, .2em) rotate(-15deg);
            opacity: 1;
        }
        90% {
            transform: translate(-.5em, 0) rotate(-20deg);
            opacity: 1;
        }
        100% {
            transform: translate(-.5em, -.2em) rotate(-20deg);
            opacity: 0;
        }
    }



/* Game not available */

.gameBuyButton div.unavailable,
.gameBuyButton div.comingSoon
{
    grid-template-columns: 1fr;    
    padding: .7em 1.5em;
    
    text-align: center;
    
    background-color: var(--white);
    border: .2em solid var(--subtler);
}

.gameBuyButton div.unavailable
{
    color: var(--subtle);
}

/* Game coming soon */

.gameBuyButton div.comingSoon
{
    font-size: 1.3em;
    font-weight: 600;
    line-height: .5em;
    border-color: var(--gameFg);
    color: var(--gameFg);
}

.gameBuyButton div.comingSoonDate
{
    text-align: center;
    margin: .5em auto;
}

.gameBuyButton div.comingSoonDate span
{
    white-space: nowrap;
}

/* Game already owned */

.gameBuyButton div.owned
{
    grid-template-columns: 1fr;
    padding-top: .4em;
    padding-bottom: .6em;

    background: linear-gradient(var(--gameBg), var(--accent));
    color: var(--text);

    text-align: center;
}    

/* No Payment */

.noPaymentHint
{
    padding: 1em 1em 0 1em;
    font-size: 80%;
    text-align: center;
    color: var(--subtle);
}

/* Shift vertically buttons with no confirm form */
#gameBuyConfirmContainer div.owned
{
    margin-bottom: 10.6em;
}
#gameBuyConfirmContainer.noPayment div.owned
{
    margin-bottom: 0;
}

#gameInstallHintButton
{
    display: none;
}
.gameInstallHint
{
    position: relative;
    margin-top: -10em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    z-index: 9999;

    max-width: 20em;

    padding: .75em 1em;
    border-radius: .5em;

    background: var(--white);
    box-shadow: 0 0 1em rgba(0,0,0,.3);

    font-size: 85%;

    animation: bubbleHover 1.8s;
    animation-timing-function: ease-out;
}
@keyframes bubbleHover
{
  0%   {
      top: 1.5em;
      transform: scale(.95);
  }
  80%  {
      transform: scale(1);
  }
  100% {
      top: 0em;
      transform: scale(1);
  }
}
.gameInstallHint::after
{
    content: "";
    display: block;
    position: absolute;
    z-index: -1;

    bottom: -1.9em;
    left: calc(50% - 1em);
    width: 0;
    height: 0;

    border-top: 1em solid var(--white);
    border-bottom: 1em solid transparent;
    border-right: 1em solid transparent;
    border-left: 1em solid transparent;
}
#gameListing .gameInstallHint a
{
    color: var(--purple);
}
#gameInstallHintButton:checked+.gameInstallHint
{
    display: none;
}

.gameBuyButton .buyAction
{
    font-weight: 600;
    font-size: 1.75em;
    white-space: nowrap;
}

.gameBuyButton .price
{
    font-size: 1.75em;
    text-align: right;
}

.gameBuyButton .discountedPrice
{
    font-size: inherit;
    text-align: right;
}

/* Free game */

.gameBuyButton a.bigButton.free,
#gameListingBuy .bigButton.free,
#gameListingGet .bigButton.free 
{
    padding: .3em .6em .3em 1.5em;
}

.gameBuyButton .price span.free
{
    display: inline-block;

    border-radius: 1em;
    padding: 0 .5em 0.08em .5em;
    margin-bottom: .15em;

    text-transform: uppercase;
    font-size: 85%;
    font-weight: 700;

    background: var(--gameTextOnFg);
    color: var(--gameFg);
}


.gameBuyButton div.owned .currentPrice
{
    color: var(--subtle);
    font-size: 80%;
}

#gameListingMeta .gameBuyButton.specialCategoryBranding
{
    margin-top: 0;
    width: 100%;
}

#gameListingMeta .gameBuyButton.specialCategoryBranding a
{
    width: 100%;
    height: 12rem;
    height: 4em;
    border-radius: 0;
    padding: 0;

    color: transparent;
    text-indent: -9999px;

    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
    #gameListingMeta .gameBuyButton.specialCategoryBranding .buyAction
    {
        color: transparent;
        text-indent: -9999px;
    }

/* Included in a Season */

#gameListingMeta .gameBuyButton.specialCategoryBranding.season a
{
    display: block;
    background-position: center;
    margin-top: 1em;
    margin-bottom: 1em;
}
    #gameListingMeta .gameBuyButton.specialCategoryBranding.season a::before,
    #gameListingMeta .gameBuyButton.specialCategoryBranding.season a::after
    {        
        color: var(--text);
        display: block;
        width: 100%;
        position: absolute;
        
        font-size: 0.7em;
        font-weight: 600;
        text-align: center;
        text-indent: 0px;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    
    #gameListingMeta .gameBuyButton.specialCategoryBranding.season a::before
    {
        content: 'included in';
        top: -1.5em;
    }

#gameListingMeta .gameBuyButton.specialCategoryBranding.season-one a
{
    background-image: url("../images/games/buy-season-one.ebb3b74663df.svg");
}
#gameListingMeta .gameBuyButton.specialCategoryBranding.season-two a
{
    background-image: url("../images/games/buy-season-two.f5b6165f585b.svg");
    margin-bottom: 1.5em;
}
    #gameListingMeta .gameBuyButton.specialCategoryBranding.season-two a::before
    {
        content: 'also available in the';
    }
    #gameListingMeta .gameBuyButton.specialCategoryBranding.season-two a::after
    {
        content: 'bundle of 12 games';
        bottom: -1.5em;
    }

.gameBuyButton .buyError
{
    margin-top: 1em;
    padding: .4em .25em .6em 1.8em;
    border-radius: .4em;
    font-weight: 500;
    /* color: var(--negative); */
    text-indent: -1.4em;

    background-color: var(--negative);
    color: var(--button-text);
    animation-name: shake;
    animation-duration: .3s;
    animation-iteration-count: 3;
    animation-timing-function: ease;

    z-index: 99999;
}
.gameBuyButton .buyError::before
{
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .15em;
    vertical-align: -.15em;
    background-color: var(--button-text);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top right;
    -webkit-mask-size: 1em 1em;
    -webkit-mask-image: url("../images/message-error.21ba62491c2b.svg");
}
.gameBuyButton .buyError a
{
    text-decoration: underline;
    color: var(--button-text);
}

@keyframes shake
{
    0% {
        -webkit-transform: rotate(-1deg) scale(1);
    }
    10% {
        -webkit-transform: rotate(.3deg) scale(1.01);
    }
    20% {
        -webkit-transform: rotate(-.85deg) scale(1.02);
    }
    40% {
        -webkit-transform: rotate(1.1deg) scale(1.01);
    }
    60% {
        -webkit-transform: rotate(-.9deg) scale(1.01);
    }
    80% {
        -webkit-transform: rotate(1.3deg) scale(1.03);
    }

    100% {
        -webkit-transform: rotate(-1deg) scale(1);
    }
}

/* Scoreboards */

#gameListingScoreboards
{
    order: 9;
}

.scoreboard
{
    display: block;
    font-size: 0.825em;
    margin: 0 0.75em 0 0;
}

#gameListingScoreboards dl
{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    margin: 0;
    padding: 0;
}

#gameListingScoreboards h4 /* board title */
{
    display: inline-block;

    border-radius: .25em;
    padding: .1em .4em .125em .4em;
    margin: 1.5em 0 .5em 0;
    border: .1em solid var(--gameFg);

    font-weight: normal;
}
    #gameListingScoreboards h3+h4
    {
        margin-top: 0;
    }

#gameListingScoreboards dl dt.index
{
  display: grid;
  align-items: center;
  align-content: center;
  justify-items: center;

  font-size: 1.1em;
  font-family: mono, monospace;
  font-weight: 400;
  text-align: center;
  letter-spacing: -.07em;

  width: 1em;
  height: 1em;
  margin: .1em .3em .2em 0;
  border-radius: 1em;
  padding-right: .07em;

  background: var(--gameFg);
  color: var(--gameTextOnFg);
}
#gameListingScoreboards dl dt span
{
    font-size: 60%;
}

#gameListingScoreboards dd
{
    /* height: 1em; */
    height: 100%;
    margin: 0;
}

#gameListingScoreboards dd.username,
#gameListingScoreboards dd.score
{
    display: flex;
    flex: 1 1 auto;
}

#gameListingScoreboards dd.username::after,
#gameListingScoreboards dd.score::before
{
    content: '';
    position: relative;
    flex-grow: 1;
    top: -.425em;
    margin: 0 .1em;

    border-bottom: dotted .1em var(--subtler);
}

#gameListingScoreboards dd.username::after,
{
    margin-right: .0125em;
}

#gameListingScoreboards dd.score::before
{
    margin-left: 0;
}

#gameListingScoreboards dd.score
{
    font-weight: 600;
    text-align: right;
    align-self: end;
    font-family: monospace;
}

#gameListingScoreboards dl dt.noScore
{
    background: var(--subtle);
}
#gameListingScoreboards dd.noScore
{
    color: var(--subtle);
}

/* Collapsing */



#gameListingScoreboards details[open] summary {
    display: none;
}

#gameListingScoreboards details summary::-webkit-details-marker {
    display:none;
}

#gameListingScoreboards details > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 500;
    padding-left: 1.4em;
    color: var(--gameFg);
}

#gameListingScoreboards details {
    grid-column-start: 1;
    grid-column-end: 4;
    margin: 0;
    padding: 0;
}

#gameListingSmallPrint
{
    font-size: 0.8em;
    margin-top: 2em;
}

#gameListingScoreboards h3
{
    margin: .5em 0 0 0;
}

/* Screenshots */

#gameListingScreenshots ul
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    list-style: none;
    padding: 0;
    margin: 0;
}

#gameListingScreenshots li
{
    max-width: 100%;
    position: relative;
    display: grid;
}
    #gameListingScreenshots li img
    {
        max-width: 100%;
        height: auto;
        position: relative;
    }
    #gameListingScreenshots li::after
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #948a78;
        opacity: 34%;
        pointer-events: none;
    }

#lightbox input
{
    position: absolute;
    display: none;
    color: transparent;
    pointer-events: none;
    opacity: 0;
}

#gameListingScreenshots label
{
    display: grid;
    place-items: center;
    border: 0.2rem solid black;
    background-color: black;
    /* border-radius: .4rem; */
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
    transition-property: background-color;
    cursor: pointer;
}

#lightbox
{
}

#lightbox input+label.screenshot-container
{
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 999999;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    display: grid;
    place-content: center;
    transition: opacity 250ms ease;
    transition-delay: 100ms;
}

#lightbox input+label>div.screenshot::after
{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #948a78;
    opacity: 34%;
    left: 0;
    top: 0;
}

#lightbox input:checked+label.screenshot-container
{
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
    transition-delay: 100ms;
}

#lightbox input+label>div.screenshot
{
    transform: scale(0);
    transform-origin: center;
    transition: transform 250ms ease;
    transition-delay: 100ms;

    background-color: black;
    border: .5em solid black;
    border-radius: 0.4em;
    position: relative;
    display: grid;
    box-shadow: rgba(0,0,0,.5) 0 0 10em;
}

#lightbox input:checked+label>div.screenshot
{
    transform: scale(1);
    transition-delay: 100ms;
}

#lightbox label.screenshot-container img
{
    width: 100rem;
    max-width: 800px;
    height: auto;
    pointer-events: none;
}

#gamesCatalogLink
{
    text-align: center;
}
#gamesCatalogLink a
{
    display: inline-block;

    margin: 2em auto 1em auto;
    padding: .4em 1.5em .5em 1.5em;
    border-radius: 2em;
    background: var(--white);

    text-decoration: none;
    font-weight: 600;
    font-size: .8em;
}

/* ! Outside stores */

.outside-store-link
{
    margin: 3em auto;   
    
    background-size: contain;
    background-repeat: no-repeat;
}
    .outside-store-link,
    .outside-store-link *
    {
        text-decoration: none !important;
    }    
    .outside-store-link em
    {
        display: inline-block;
        background: var(--brand-yellow);
        color: var(--card-bg);
        border-radius: .5em;
        width: 1em;
        height: 1em;
        line-height: .8em;
        text-align: center;
    }
    
    .outside-store-link.s2
    {
        --text: var(--white);
        color: var(--text);
        font-size: 1.2em;
        line-height: 1.3;
        
        padding-right: 12em; 
        padding-left: 2em; 
        margin-bottom: 5em;
        
        background-image: url("../images/games/shop-outside-store-link-cb-2.94f2273597b1.png");
        background-size: 8em;
        background-position: right -.5em;
            
    }
    .outside-store-link.s2 strong
    {
        color: var(--brand-yellow);
    }


/* Footer */

footer ul:before
{
    background-color: var(--subtle);
}

footer li
{
    font-size: .65em;
    color: var(--subtle);
}

/* Responsive Scaling */
@media screen and (min-width: 240px)
{
    ul.gameCards
    {
        display: block;
    }

    ul.gameCards>li
    {
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 670px)
{

    #gamesFeaturesTop
    {
        padding-top: 1em;
    }

    #games h1
    {
        margin: 0 0 2em 0;
        padding: 0 0 0 5em;

        font-size: 1.5em;
        font-weight: 600;

        background-size: 3.9em;
        background-position: left 50%;
    }
    
    #catalogFeatureTags #featureTagsList
    {
        margin: 1em 0 0 0;
    }

    ul.gameCards
    {
        display: grid;
    }

    ul.gameCards>li
    {
        margin-bottom: 0;
    }

    .gameCardImage
    {
        height: 22.8rem;
    }
    .gameCardImage.fullsize
    {
        height: 48rem;
    }
    .wide .gameCardImage
    {
        height: 24rem;
    }

    .gameCard.billboard h2,
    .gameCard.billboard h3,
    .gameCard.wide h2,
    .gameCard.wide h3
    {
        display: inline;
        font-size: 1.5em;
    }

    .gameHeader
    {
        /* padding: 1.5em 0; */
    }
    .gameHeader img
    {
        max-width: 80rem;
        max-height: 40rem;
    }

    #gameListing
    {
        grid-template-columns: 2fr 1fr;
        column-gap: 2em;
    }
    
    #gameListingBody,
    #gameListingMeta
    {
        display: grid;
        row-gap: 1em;
        place-content: start;
    }
    
    #gameListingBody
    {
        grid-column: 1;
    }
    
    #gameListingMeta
    {
        grid-column: 2;
    }

    .gameBuyButton>a,
    .gameBuyButton div.owned,
    .gameBuyButton div.unavailable,
    .gameBuyButton div.comingSoon,
    .gameBuyButton .bigButton
    {
        max-width: 100%;
    }

    #gameListing h1
    {
        text-align: left;
    }

    #gameListing h1 img /* title image */
    {
        margin: 0;
    }

    #gameListingAuthor
    {
        margin: 0;
    }

    #gameListing #gameListingAuthor h2
    {
        text-align: left;
    }

    .gameBuyButton
    {
        margin-bottom: unset;
    }
    
    #gameBuyConfirmContainer
    {
        border-radius: 2em;
        margin: 0em 0 -14em 0;  
        padding: 1em;      
    }        
    #unavailableContainer
    {
        padding: 1em 0em;   
    }

    #gameBuyConfirmContainer.confirming
    {
        margin: 0em 0 -14em 0;
        transform: translateY(-15em);
    }

    .gameBuyButton.specialCategoryBranding a
    {
        height: 8.525rem;
    }
    
    #wishlist-button
    {        
        top: 1.75em;
        left: -2em;
    }

    #gameListingScreenshots ul
    {
        display: block;
    }
    #gameListingScreenshots li
    {
        margin-bottom: 1em;
    }

    #gameListingScoreboards
    {
        /* margin-top: 1.5em; */
    }

    #gamesCatalogLink a
    {
        font-size: 1.2em;
    }

}

@media screen and (min-width: 800px)
{
    #lightbox input+label.screenshot-container
    {
        image-rendering: pixelated;
        image-rendering: crisp-edges;
    }
}


@media screen and (max-width: 670px)
{
    section.cardTrayContainer
    {
        max-width: unset;
    }
    ul.cardTray
    {
        
        padding: 1em;
        margin-left: 0;
        margin-right: 0;
        
        border: none;
        border-top: .1em solid var(--subtler);
        border-bottom: .1em solid var(--subtler);
        border-radius: 0;
    }
    
    section.cardTrayContainer .pagerNavigatorButton
    {
        top: -3em;
    }
    
    section.cardTrayContainer .pagerNavigatorButton.previous
    {
        left: .5em;
    }
    section.cardTrayContainer .pagerNavigatorButton.next
    {
        right: .5em;
    }
}