html#season[class^="season-two"]
{
	--accent: var(--brand-yellow);
	--subtler: var(--psd-dark-gray);
    --card-bg: var(--psd-darkest-gray);
}

#season .groupHeader .groupHeaderIcon
{
    width: 100%;
    height: 22rem;
    margin-top: 0;
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    
    text-indent: -9999px;
    color: transparent;
}

.sectionIntro
{
    font-size: 1.4em;
    text-align: center;
}

#season .groupHeader menu
{
    color: var(--subtle);
    font-weight: 500;
    margin: 0 auto 1em 0;
    padding: 0;
    list-style-type: none;
}
#season .groupHeader menu a
{
    display: inline-block;
    padding: .15em;   
}
#season .groupHeader menu .separator
{
    display: none;
}

#season .groupHeader a
{
    color: var(--accent);
    text-decoration: none;
}

#season .seasonBuy
{
	max-width: 100%;
}
	
#season .seasonBuy #gameListingBuy
{	
    max-width: 100% !important;
}

#season .seasonBuy #gameBuyConfirmContainer,
#season .seasonBuy #gameBuyConfirmContainer.confirming
{
    display: grid;
    margin-left: auto;
    margin-right: auto;
}

#season .gameBuyButton div.owned
{
    padding-left: 2em;
    padding-right: 2em;
    margin-top: 1em;
    
    background: linear-gradient(var(--accent), var(--text));
}
    #season .gameBuyButton div.owned.justPurchased
    {
        margin-bottom: 13em;
    }

#season .weeks
{
    padding-bottom: 1em;
}

#season .week 
{
	
	background: inherit;	
	padding: 2rem 0; 
}
	#season .week::after
    {
        content: '';
        display: block;
        height: .1em;
        width: 120%;
        margin: 10rem -10% 2rem -10%;
        
        background: var(--subtle);        
    }
    #season .week:last-child::after
    {
        display: none;
    }
	
	#season .week .title    
	{
		font-size: 1.6em;
		text-align: center;        
		
		margin: 5rem auto 5rem auto;
	}
	
#season .title .weekNumber
{
	display: block;
}
	#season .title .weekNumber::after
	{
		
	}
	
#season .title .weekDate
{
	color: var(--accent);
	
}

#season .sectionIntro h2.title
{
    font-size: 1.6em;
}


/* Wishlist Button */

#season #wishlist-button
{
    left: calc(50% - 10em) !important;
}

/* Season Two */

#season[class^="season-two"] .week .notes
/* Station Notes */
{
	margin-top: 2em;
	padding: 1em 1.2em 1em 1.2em;
	border-radius: 1em;
	
	--bg-color: #F5E7D1;
	--text: var(--black);
	
	background-color: var(--bg-color);
	color: var(--text);
	
	font-family: Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1em;
}

#season[class^="season-two"] .week .notes::before
{
    width: 10rem;
    height: 10rem;
    content: "";
    display: block;
    float: right;
    background-color: currentcolor;
    margin-left: 1rem;
    shape-outside: url("../images/season/station-logo-1.2ce46e6c1da4.svg");

    -webkit-mask-image: url("../images/season/station-logo-1.2ce46e6c1da4.svg");
    -webkit-mask-position: top left;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    
    mask-image: url("../images/season/station-logo-1.2ce46e6c1da4.svg");
    mask-position: top left;
    mask-repeat: no-repeat;
    mask-size: contain;
}

#season[class^="season-two"] .week .notes a
{
    text-decoration: none;
}

#season[class^="season-two"] .week .notes p
{
    margin: 0;
}

#season[class^="season-two"] .week .notes p:last-child
{
    margin: .25em 0 0 0;
}

#season[class^="season-two"] .week .notes h3
{
    display: block;
    margin: .2em 0 0 0;
    font-size: 1.3em;
    font-weight: 800;
    letter-spacing: -.02em;
}

#season[class^="season-two"] .week .notes h3::after
{
    content: "";
    display: block;
    height: .2em;
    width: calc(100% - 12rem);
    margin: .2em 0;
    border-bottom: .1em solid var(--black);
}

#season[class^="season-two"] .week .notes b	
{
    font-weight: 800;
    font-size: 1em;
    line-height: 1.5em;
    letter-spacing: -.025em;
    text-transform: uppercase;	
}

#season[class^="season-two"] .week .notes i,
#season[class^="season-two"] .week .notes em
{
    padding: .15em .35em;
    margin: 0 .2em 0 0;
            
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    
    font-style: normal;
    font-weight: 700;
    line-height: 2;
}
#season[class^="season-two"] .week .notes i
{
    background-image: url("../images/tv.6464ef7cd529.svg");
    color: var(--bg-color);
}
#season[class^="season-two"] .week .notes em
{            
    background-image: url("../images/tv-outlined.67a2436b382a.svg");            
}
#season[class^="season-two"] .week .notes em:after
{
    content: 'BW';
    display: inline-block;
    color: var(--text);
    letter-spacing: -.05em;
    transform: scaleX(.85);
    font-size: .95em;
}
    
#season[class^="season-two"] .week .notes .h4
{
	padding: .1em 0;
	
	border-bottom-left-radius: .5em .3em;
	border-bottom-right-radius: .5em .3em;
	border-top-left-radius: .5em .3em;
	border-top-right-radius: .5em .3em;
	
	color: var(--bg-color);
	background-color: var(--text);
	font-weight: bold;
}

.seasonShowcase,
.seasonRemainingGames,
.stationCard
{    
    padding: 1em 0 2em 0;
}

/* station */

.stationCard
{
    max-width: 100%;
    --bg-color: var(--white);
    --text: var(--black);
    --gameFg: var(--text);
    
    background-color: var(--bg-color);
    color: var(--text);
    margin-bottom: 3em;
}

/* Showcase */

.seasonShowcase
{
    max-width: 100%;
    border: .1em solid var(--accent);
    background: var(--card-bg);
    border-width: .1em 0 .1em 0;
    margin-bottom: 4em;
}

/* Season Three */

html#season.season-three
{
    --subtle: var(--text);
}

html#season.season-three .groupHeader.art .groupHeaderIcon
{
    height: 26rem;
    margin: 2em auto;
}

/* Remaining games */

.seasonRemainingGames .gameCard .gameTitle a
{
    color: var(--text);
}
.seasonRemainingGames .gameDeveloper
{
    color: var(--subtle);
}

.seasonRemainingGames .gameCard.wide h2,
.seasonRemainingGames .gameCard.wide h3
{
    font-size: 1em;
}

.seasonRemainingGames .gameCard:hover
{
    transform: none;
}
.seasonRemainingGames .gameCardImage:hover::before
{
    
}
.seasonRemainingGames .gameCard:hover .cardTags
{
    transform: none;
}

/* Notes */

#season .seasonNotes
{
    margin-top: 0em;   
    color: var(--subtle);   
}

#season footer ul.panic::before
{
    background-color: var(--subtle);
}

ul.metaInfo li.metaTVBW::before
{
    mask-image: url("../images/tv-outlined.67a2436b382a.svg");
}

/* Scaling */

@media screen and (min-width: 670px)
{
	#season .groupHeader .groupHeaderIcon
    {
        width: 100%;
        height: 16rem;
        margin-top: 1em;
    }
    
    #season .groupHeader p
    {
        margin: 1em auto .5em auto;
    }
    
    #season .groupHeader menu
    {
        color: var(--subtle);
        font-weight: 500;
        margin: 0 auto;
    }
    
    #season .groupHeader menu a
    {
        padding: .25em;    
    }
    
    #season .groupHeader menu .separator
    {
        display: inline-block;
    }
	
	#season .week .title,
    #season .stationCard .title,
    #season .seasonShowcase .title,
    #season .seasonRemainingGames .title
	{
		font-size: 2em;		
		margin: 3rem auto 3rem auto;
	}
    
    .stationCard
    {
        max-width: 90rem;
        border-radius: .5em;
        border-width: .1em;        
    }
    
    .seasonShowcase
    {
        max-width: 100rem;
        position: relative;
        
        border-radius: .5em;
        border-width: .1em;
        background: var(--bg-color);
    }
        .seasonShowcase::before
        {
            content: '';
            position: absolute;
            
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            box-shadow: 0 0 2em var(--accent);
            opacity: .5;
        }
	
	#season .title .weekNumber
	{
		display: inline;
	}
		#season .title .weekNumber::after
		{
			content: ' •';
            color: var(--subtle);
		}
		
	#season .title .weekDate
	{
		color: var(--accent);		
	}

	#season[class^="season-two"] .week .notes h3
	{
		margin: .2em .5em .2em 0;		
        letter-spacing: -.05em;
    
    }
    #season[class^="season-two"] .week .notes
    {
        padding: 1em 1.2em;
    }
    
    #season[class^="season-two"] .week .notes::before
    {
        width: 12rem;
        height: 12rem;
    }
    
    #season[class^="season-two"] .week .notes h3::after
    {
        width: calc(100% - 12rem);
    }
}