:root
{
    --page-bg: var(--psd-dark-gray);
    --text: var(--screen-black);

    --accent: var(--brand-yellow);
    --interactive: var(--purple);
    --barely-subtle: var(--psd-dark-gray);
    --mildly-subtle: var(--psd-darkest-gray);
    --subtle: var(--psd-mid-gray);
    --subtler: var(--screen-white);

    --negative: var(--red);
    --neutral: var(--blue);
    --positive: var(--green);
    --important: var(--purple);

    --subtle-negative: var(--muted-red);
    --subtle-neutral: var(--muted-blue);
    --subtle-positive: var(--muted-green);
    --subtle-important: var(--muted-purple);
}

html#frontpage
{
  background: linear-gradient(var(--purple) 0%, var(--purple) 50%, var(--psd-dark-gray) 50%, var(--psd-dark-gray) 100%);
  color: var(--white);
  overflow-x: hidden;
}

.section--white,
.section--black,
.section--gray,
.section--yellow,
.section--purple,
.section--aqua,
.section--darkgray
{
    background-color: var(--page-bg);
    color: var(--text);
}

#navbar
{
    --page-bg: transparent;
    --text: var(--white);
}

#navbar.scrolled
{
    --page-bg: var(--psd-dark-gray);
    --text: var(--white);
}

html[data-color="white"],
#navbar.scrolled[data-color="white"],
.section--white
{
    --page-bg: var(--psd-lightest-gray);
    --text: var(--screen-black);
}

html[data-color="black"],
#navbar.scrolled[data-color="black"],
.section--black
{
    --page-bg: var(--black);
    --text: var(--white);
}

html[data-color="gray"],
#navbar.scrolled[data-color="gray"],
.section--gray
{
    --page-bg: var(--psd-dark-gray);
    --text: var(--white);
}

html[data-color="yellow"],
#navbar.scrolled[data-color="yellow"],
.section--yellow
{
    --page-bg: var(--brand-yellow);
    --text: var(--screen-black);
    --button-bg: var(--purple);
    --button-text: var(--white);
}

html[data-color="purple"],
#navbar.scrolled[data-color="purple"],
.section--purple
{
    --page-bg: var(--purple);
    --text: var(--white);
    --button-bg: var(--brand-yellow);
    --button-text: var(--black);
}

html[data-color="aqua"],
#navbar.scrolled[data-color="aqua"],
.section--aqua
{
    --page-bg: var(--aqua);
    --text: var(--white);
    --button-bg: var(--brand-yellow);
    --button-text: var(--black);
}

html[data-color="darkgray"],
#navbar.scrolled[data-color="darkgray"],
.section--darkgray
{
    --page-bg: var(--psd-darkest-gray);
    --text: var(--white);
}

html#frontpage body
{
    overflow-x: hidden;
}

body.nojs figure.video,
html#frontpage body.nojs #no-spoilers
{
    display: none !important;
}

.centered
{
    text-align: center;
}

/* ---------------- */
/*!---- HEADER ---- */
/* ---------------- */

#frontpage header
{
    margin: 0 auto;
    background-size: cover;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    padding-bottom: 5rem;
    position: relative;
    z-index: 1;
}

#frontpage header::before
{
  content: "";
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  width: 110rem;
  height: 110rem;
  background-image: radial-gradient(rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: -1;
}

#frontpage header p
{
    font-size: 2em;
    font-weight: 700;
    line-height: 1.1em;
    max-width: 110rem;
    margin: 2rem auto 0 auto;
    padding: 0 0.5em;
    text-align: center;
}

h1#logotype
{
    height: 40rem;
    font-size: 0;
    line-height: 0;
    padding: 0;
    color: transparent;
    position: relative;
    margin: 5rem auto;

    background-image: url("../images/logo.28192db8adaf.svg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}

#frontpage #main
{
    margin-top: 0;
}

div#button-order
{
    position: relative;
    margin: 6rem auto 1.5rem auto;
    text-align: center;
}

div#button-order a
{
    text-decoration: none;
    display: inline-block;

    padding: 0.1em 0.5em 0.3em 0.5em;
    border-radius: 3em;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;

    cursor: pointer;

    font-size: 1.78em;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 .02em .04em rgba(0,0,0,.4);

    color: var(--white);
    background-color: var(--purple);
    background-image: linear-gradient(#9400ff, #5c00ff);

    box-shadow:
        inset 0 0.05em 0.05em rgba(255,255,255,0.6),  /* top highlight */
        inset 0 -0.05em 0.08em rgba(0,0,0,.5),		  /* bottom inner shadow  */
        inset 0 -0.01em 0.5em rgba(255,255,255,0.3),  /* bottom underlight  */
        0 .05em .1em rgba(0,0,0,.4);				  /* cast shadow */
}

div#button-order a:active
{
    padding: .15em 0.5em .25em 0.5em;
    background-image: linear-gradient(#4a00d1, #7800ff);

    box-shadow:
        inset 0 0.05em 0.15em rgba(0,0,0,.5),  		/* top shadow */
        inset 0 -0.03em 0.03em rgba(255,255,255,0.6),  /* bottom highlight  */
        0 .05em .2em rgba(0,0,0,.2);   				/* cast shadow */
}

body.prepre div#button-order a,
body.prepre div#button-order a:active
{
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  background: transparent;
  padding: 0.1em 0.5em 0.3em 0.5em;
  color: var(--white);
  border: 0.1em solid;
  opacity: 0.75;
}

div.infobox
{
    display: grid;
    place-items: center;
    max-width: 80rem;
    margin: 0 auto;
    top: 12rem;
    position: relative;
    z-index: 10;
    border-radius: 1em;
    border: 0.6rem solid var(--white);
}

.section--yellow,
.section--purple,
.section--aqua,
.section--darkgray
{
    padding: 2rem 0;
}

#video1,
#video2
{
  display: none;
}

/* Lazy Image Loading */
.lazy,
.lazy::before,
.lazy::after,
.lazy .game-image
{
    background-image: none !important;
}

section#the_idea
{
    margin-bottom: 15rem;
}

#clouds
{
    position: relative;
    color: var(--white);
    padding: 0;
    margin: 12rem auto;
    padding: 0;
    width: 60rem;
    display: grid;
    place-items: center;
}

#clouds blockquote
{
    position: relative;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    /* text-indent: -.95ex; */
    display: grid;
    place-items: center;
    z-index: 2;
    border-radius: 50%;
    background: var(--psd-dark-gray);
    font-weight: 700;
    line-height: 1.3;
    font-size: .85em;
}

#clouds:before,
#clouds:after,
.cloudbit
{
    position: absolute;
    border-radius: 50%;
    background: var(--psd-dark-gray);
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-name: blobble;
    transform: scale(1,1);
    z-index: 1;
}

#clouds:before,
#clouds:after
{
    content: "";
    display: block;
}

#clouds:before
{
    left: 31rem;
    top: -17rem;
    width: 3rem;
    height: 3rem;
    animation-duration: 3s;
    animation-delay: .22s;
}

#clouds:after
{
    left: 34rem;
    top: -14rem;
    width: 4.125rem;
    height: 4.125rem;
    animation-delay: 0.57s;
}

.cloudbit
{
  width: 20rem;
  height: 16rem;

}

/* a - - - - */
/* - - - - - */
.cloudbit.a
{
    left: -8rem;
    top: -6rem;
    animation-duration: 3.5s;
    animation-delay: 0s;
}

/* - b - - - */
/* - - - - -  */
.cloudbit.b
{
    left: 3rem;
    top: -8rem;
    animation-delay: 1s;
}

/* - - c - - */
/* - - - - -  */
.cloudbit.c
{
    left: 18rem;
    top: -10rem;
    animation-delay: .2s;

}

/* - - - d - */
/* - - - - -  */
.cloudbit.d
{
    left: 33rem;
    top: -8rem;
    animation-duration: 4.5s;
    animation-delay: .66s;
}
/* - - - - e */
/* - - - - -  */
.cloudbit.e
{
    left: 44rem;
    top: -6rem;
    animation-delay: .81s;
}

/* - - - - - */
/* f - - - -  */
.cloudbit.f
{
    left: -8rem;
    bottom: -6rem;
    animation-delay: .31s;

}

/* - - - - - */
/* - g - - - */
.cloudbit.g
{
    left: 3rem;
    bottom: -7rem;
    animation-duration: 5s;
    animation-delay: .92s;

}

/* - - - - - */
/* - - h - -  */
.cloudbit.h
{
    left: 18rem;
    bottom: -8rem;
    animation-delay: .12s;
}

/* - - - - - */
/* - - - i -  */
.cloudbit.i
{
    left: 33rem;
    bottom: -9rem;
    animation-delay: .7s;
}

/* - - - - - */
/* - - - - j  */
.cloudbit.j
{
    left: 44rem;
    bottom: -6rem;
    animation-delay: .18s;
}

@keyframes blobble
{
    0% { transform: scale(1,1); }
    30% { transform: scale(1.05, .97); }
    70% { transform: scale(.99, 1.03);}
    100% { transform: scale(1.03, .99);}
}

figure.video
{
    background: linear-gradient(to right, #090d61, #010537);
}

/* ---------------- */
/*!---- YELLOW ---- */
/* ---------------- */

figure#open-device
{
  background-size: contain;
  height: 64rem;
  width: calc(64rem * 0.832579186);
  background-image: url("../images/playdate-layers.7d726433fd74.png");
  margin: auto;
  margin-top: -14rem;
  margin-right: -32rem;
  float: right;
}

#frontpage a[href="https://teenage.engineering/"]
{
    text-decoration: none;
}

#frontpage a[href="https://teenage.engineering/"]:before
{
    display: inline-block;
    position: relative;
    top: 0.15em;
    height: 1em;
    width: 2em;
    margin-right: 0.25em;
    background-image: url("../images/te-logo.512dd696843b.svg");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: contain;
    content: "";
}

figure#hand
{
  background-size: 100rem;
  height: 100rem;
  width: 100rem;
  background-image: url("../images/Playdate-in-hand1.70225f47634a.png");
  background-position: 100% 50%;
  position: relative;
  margin: -8rem auto -32rem auto;
  left: 10rem;
}

figure#hand::after
{
  background-image: url("../images/Playdate-in-hand1-thumb.72ee478488c6.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  width: 6rem;
  height: 3rem;
  position: absolute;
  top: 43.1rem;
  left: 15.6rem;
}

img#playdate-in-hand-screen
{
  display: block;
  width: 27rem;
  height: 16.2rem;
  position: absolute;
  transform: rotate(-27.625deg);
  left: 10.975rem;
  top: 23.825rem;
  mix-blend-mode: multiply;
}

section#the_season
{
  max-width: 107rem;
}

div#no-spoilers
{
    margin: 1em auto;
    padding: 0;
    position: relative;
}

div#no-spoilers > *:before
{
    content: "";
    display: block;
    position: absolute;
    top: 25%;
    left: 0;
    width: 0;
    height: 0;
    border-top: 0.25em solid transparent;
    border-right: 2em solid transparent;
    border-bottom: 1em solid var(--white);
    border-left: 2em solid transparent;
    z-index: -1;

    transform: rotate(-10deg) skewX(-45deg) translateY(-50%) translateX(-50%);
}

div#no-spoilers > *
{
    position: relative;
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: 1rem;
    display: inline-block;
    background-color: var(--white);
    font-family: inherit;
    font-size: inherit;
    z-index: 3;
    cursor: pointer;
}
div#no-spoilers em {
    font-style: normal;
    text-decoration: underline;
}

ul#gamelist
{
    display: grid;
    position: relative;
    align-items: center;
    justify-items: center;
    padding: 0;
    list-style: none;
    margin: 2rem auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
    pointer-events: all;
    position: relative;
    max-width: 107rem;
}

ul#gamelist.hidden
{
    pointer-events: none;
    height: 40rem;
    overflow: hidden;
    position: relative;
}

ul#gamelist.hidden::after
{
  width: 100%;
  height: 40rem;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(255, 200, 51, 0) 0%, rgba(255, 200, 51, 0) 30%, var(--brand-yellow) 95%, var(--brand-yellow) 100%);
  z-index: 1000;
}

ul#gamelist li
{
    display: block;
    padding: 0;
    position: relative;
    width: 35rem;
    height: 15.5rem;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: perspective(80rem);
}

ul#gamelist li div.game-card
{
    position: absolute;

    top: 0;
    left: 0;
    width: 35rem;
    height: 15.5rem;
    border-radius: 0.1em;
    /* box-shadow: 0 0 1rem rgba(0,0,0,0.25); */
    /* filter: drop-shadow(0 0 1rem rgba(0,0,0,0.25)); */
}

ul#gamelist li div.game-card-shine
{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 35rem;
  height: 15.5rem;
  z-index: 99;

}

div.game-card div.game-image,
div.game-card dl
{
    position: absolute;
    border-radius: 0.1em;
    border: 1px solid var(--screen-black);
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

div.game-card div.game-image
{
    background: var(--psd-light-gray);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0% -20rem, 0% 0%;
    background-image: url("../images/gamecards/gamecard-mystery-2.5a81dca37939.png");
    margin: 0;
    padding: 0;
    transition: background-position 250ms ease-in-out;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

ul#gamelist.hidden .game-image
{
    background-position: 0% 0%, 0% 0%;
}

div.game-card dl
{
    transform: rotateY(180deg);
    background: var(--psd-light-gray);
    color: var(--screen-black);
    padding: 0.7em 1em 0.5em 1em;
    font-size: 0.65em;
}

div.game-card dt
{
    font-weight: 800;
    font-size: 1.3em;
    line-height: 1em;
}

div.game-card dd
{
    padding: 0;
    margin-left: 0;
    margin-top: 0.15em;
}

div.game-card dd.game-author
{
    /* font-style: italic; */
}
div.game-card dd.game-author:before
{
  content: 'by ';
}

div.game-card dd.game-summary
{
  display: none;
}

.game-card-skew-container,
.game-card-flip-container,
div.game-card dl
{
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: no-preference) {
    .game-card-skew-container
    {
        transition: transform 150ms ease-in-out;
    }
    .game-card-flip-container
    {
        transition: transform 300ms ease-in-out;
    }
    div.game-card dl
    {
        transition-property: backface-visibility;
        transition-duration: 150ms;
        transition-timing-function: ease-in-out;
        transition-delay: 300ms;
    }
}

ul#gamelist[data-flipped="game-1-flip-container"] li#game-1 .game-card-flip-container,
ul#gamelist[data-flipped="game-2-flip-container"] li#game-2 .game-card-flip-container,
ul#gamelist[data-flipped="game-3-flip-container"] li#game-3 .game-card-flip-container,
ul#gamelist[data-flipped="game-4-flip-container"] li#game-4 .game-card-flip-container,
ul#gamelist[data-flipped="game-5-flip-container"] li#game-5 .game-card-flip-container,
ul#gamelist[data-flipped="game-6-flip-container"] li#game-6 .game-card-flip-container,
ul#gamelist[data-flipped="game-7-flip-container"] li#game-7 .game-card-flip-container,
ul#gamelist[data-flipped="game-8-flip-container"] li#game-8 .game-card-flip-container,
ul#gamelist[data-flipped="game-9-flip-container"] li#game-9 .game-card-flip-container,
ul#gamelist[data-flipped="game-10-flip-container"] li#game-10 .game-card-flip-container,
ul#gamelist[data-flipped="game-11-flip-container"] li#game-11 .game-card-flip-container,
ul#gamelist[data-flipped="game-12-flip-container"] li#game-12 .game-card-flip-container,
ul#gamelist[data-flipped="game-13-flip-container"] li#game-13 .game-card-flip-container,
ul#gamelist[data-flipped="game-14-flip-container"] li#game-14 .game-card-flip-container,
ul#gamelist[data-flipped="game-15-flip-container"] li#game-15 .game-card-flip-container,
ul#gamelist[data-flipped="game-16-flip-container"] li#game-16 .game-card-flip-container,
ul#gamelist[data-flipped="game-17-flip-container"] li#game-17 .game-card-flip-container,
ul#gamelist[data-flipped="game-18-flip-container"] li#game-18 .game-card-flip-container,
ul#gamelist[data-flipped="game-19-flip-container"] li#game-19 .game-card-flip-container,
ul#gamelist[data-flipped="game-20-flip-container"] li#game-20 .game-card-flip-container,
ul#gamelist[data-flipped="game-21-flip-container"] li#game-21 .game-card-flip-container,
ul#gamelist[data-flipped="game-22-flip-container"] li#game-22 .game-card-flip-container,
ul#gamelist[data-flipped="game-23-flip-container"] li#game-23 .game-card-flip-container,
ul#gamelist[data-flipped="game-24-flip-container"] li#game-24 .game-card-flip-container
{
    transform: rotateY(180deg);
}

ul#gamelist[data-flipped="game-1-flip-container"] li#game-1 div.game-card dl,
ul#gamelist[data-flipped="game-2-flip-container"] li#game-2 div.game-card dl,
ul#gamelist[data-flipped="game-3-flip-container"] li#game-3 div.game-card dl,
ul#gamelist[data-flipped="game-4-flip-container"] li#game-4 div.game-card dl,
ul#gamelist[data-flipped="game-5-flip-container"] li#game-5 div.game-card dl,
ul#gamelist[data-flipped="game-6-flip-container"] li#game-6 div.game-card dl,
ul#gamelist[data-flipped="game-7-flip-container"] li#game-7 div.game-card dl,
ul#gamelist[data-flipped="game-8-flip-container"] li#game-8 div.game-card dl,
ul#gamelist[data-flipped="game-9-flip-container"] li#game-9 div.game-card dl,
ul#gamelist[data-flipped="game-10-flip-container"] li#game-10 div.game-card dl,
ul#gamelist[data-flipped="game-11-flip-container"] li#game-11 div.game-card dl,
ul#gamelist[data-flipped="game-12-flip-container"] li#game-12 div.game-card dl,
ul#gamelist[data-flipped="game-13-flip-container"] li#game-13 div.game-card dl,
ul#gamelist[data-flipped="game-14-flip-container"] li#game-14 div.game-card dl,
ul#gamelist[data-flipped="game-15-flip-container"] li#game-15 div.game-card dl,
ul#gamelist[data-flipped="game-16-flip-container"] li#game-16 div.game-card dl,
ul#gamelist[data-flipped="game-17-flip-container"] li#game-17 div.game-card dl,
ul#gamelist[data-flipped="game-18-flip-container"] li#game-18 div.game-card dl,
ul#gamelist[data-flipped="game-19-flip-container"] li#game-19 div.game-card dl,
ul#gamelist[data-flipped="game-20-flip-container"] li#game-20 div.game-card dl,
ul#gamelist[data-flipped="game-21-flip-container"] li#game-21 div.game-card dl,
ul#gamelist[data-flipped="game-22-flip-container"] li#game-22 div.game-card dl,
ul#gamelist[data-flipped="game-23-flip-container"] li#game-23 div.game-card dl,
ul#gamelist[data-flipped="game-24-flip-container"] li#game-24 div.game-card dl
{
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

li#game-1  .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-1-casual_birder.3ff02c752168.png"); }
li#game-2  .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-2-crankins_time_travel_adventure.379ed55389f9.png"); }
li#game-3  .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-3-demon_quest_85.b777a3aac2a7.png"); }
li#game-4  .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-4-echoic_memory.24ddebe98ce9.png"); }
li#game-5  .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-5-executive_golf_dx.282763a1ec5f.png"); }
li#game-6  .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-6-flipper_lifter.af9469d17082.png"); }
li#game-7  .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-7-forrest_byrnes_up_in_smoke.5b942733e2db.png"); }
li#game-8  .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-8-hyper_meteor.a9454f1038fd.png"); }
li#game-9  .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-9-lost_your_marbles.2e7ee1b5ca8a.png"); }
li#game-10 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-10-omaze.633591d62b93.png"); }
li#game-11 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-11-pick_pack_pup.ac87d3b6c7ee.png"); }
li#game-12 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-12-questy_chess.f31bf5aaa506.png"); }
li#game-13 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-13-ratcheteer.94e35b469fa5.png"); }
li#game-14 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-14-sasquatchers.e0517ee5c689.png"); }
li#game-15 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-15-saturday_edition.e5e4f19bbcc3.png"); }
li#game-16 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-16-snak.daaf7207cf67.png"); }
li#game-17 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-17-spellcorked.9f438dc1a8f7.png"); }
li#game-18 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-18-whitewater_wipeout.9456a513ecf4.png"); }
li#game-19 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-19-zipper.a93adfcc228c.png"); }
li#game-20 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-20-boogie_loops.b3b536818d9d.png"); }
li#game-21 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-21-battleship_godios.9b9d05a63e0d.png"); }
li#game-22 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-22-b360.906c41eb025f.png"); }
li#game-23 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-23-inventory-hero.3af1b6056ec0.png"); }
li#game-24 .game-image { background-image: url("../images/gamecards/gamecard-21.7d383a283fe4.png"), url("../images/gamecards/gamecard-24-star-sled.bae81dc93e47.png"); }



/* SDK */

figure#devtools
{
    background-image: url("../images/devtools-screenshots.39d1689b7a5f.png");
    background-size: cover;
    height: 36.31rem;
    margin: 4rem auto;
    max-width: 80rem;
}

div.button#developer
{
    display: block;
    width: fit-content;
    margin: 0 auto;    
    color: var(--white);
    background-color: var(--screen-black);
}

/* Mirror */

section#mirror
{
    margin-bottom: 3em;
}

figure#mirror
{
    background-image: url("../images/frontpage-mirror.1144bb9c8bbb.png");
    background-size: contain;
    height: 36.31rem;
    margin: 5rem auto;
    max-width: 80rem;
}

/* ---------------- */
/*!---- PURPLE ---- */
/* ---------------- */

#playdate-stereo-dock h2,
#and-playdate-cover h2
{
    position: relative;
    clear: both;
}

#playdate-stereo-dock h2 span,
#and-playdate-cover h2 span
{
    background-image: url("../images/violator.518eb48245e3.svg");
    color: var(--aqua);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    width: 3.75em;
    height: 3.75em;
    font-size: 0.195em;
    line-height: 3.75em;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-15deg);
    position: absolute;
    left: -4.25em;
    top: .75em;
}

#and-playdate-cover h2 span
{
  transform: rotate(15deg);
}

@media screen and (min-width: 620px)
{
   #playdate-stereo-dock h2 span,
   #and-playdate-cover h2 span
    {
        font-size: 0.275em;

        left: -4.25em;
        top: 0.125em;
    }
}

figure#playdate-turned
{
  background-size: contain;
  height: 36rem;
  width: 36rem;
  background-image: url("../images/playdate-turned.bd5ee5b6e5be.png");
  background-position: 50% 50%;
  position: relative;
  margin-right: 2rem;
  margin-bottom: 4rem;
  float: left;
  perspective: 36rem;
}

figure#playdate-cover
{
  background-size: contain;
  width: 80rem;
  height: calc(80rem * 0.425239234);
  background-image: url("../images/products/playdate-cover-aqua.1f6e3419c7ad.png"), url("../images/products/playdate-cover-closed.9b1e4ae064fb.png");
  background-position: 33rem 0rem, 3rem 2rem;
  background-size: 40rem auto, 37rem auto;
  position: relative;
  margin: 0 auto 2rem auto;
}

/* --------------- */
/*!---- SPECS ---- */
/* --------------- */

div#specs
{
    font-size: 1em;
    text-shadow: .1em .1em 0em var(--psd-darkest-gray);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0;
    margin: 4rem auto;
    max-width: 90rem;
    position: relative;
}

div#specs::before,
div#specs::after
{
    content: "";
    position: absolute;
    height: 25em;
    width: 25em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 0;
}
div#specs::before { left: -90rem; }
div#specs::after { right: -110rem; }

div#specs::before
{
    background-image: url("../images/tech-blueprint-front.bd9599f4c360.png");
}

div#specs::after
{
    background-image: url("../images/tech-blueprint-side.c7b6d87687d5.png");
}

div.spec
{
    display: inline-grid;
    grid-template-columns: 2fr 3fr;

    align-items: center;
    margin: 0.5em auto;
    position: relative;
    width: 22.5em;
}

div.spec h3
{
    align-self: center;
    line-height: 2em;
    justify-self: flex-end;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;

    color: var(--screen-white);
    font-weight: 400;
    font-size: 1em;
}

div.spec h3:after
{
    display: block;
    width: 2em;
    height: 2em;
    margin: 0 1em;
    position: relative;
    -webkit-mask-image: url();
    -webkit-mask-size: contain;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--brand-yellow);
    content: "";
}

div.spec ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    justify-self: stretch;
    font-weight: 700;
}

div.spec#battery h3:after { -webkit-mask-image: url("../images/tech-battery.bae8a54c49a7.svg"); }
div.spec#cpu h3:after { -webkit-mask-image: url("../images/tech-cpu.733dadb458b1.svg"); }
div.spec#storage h3:after { -webkit-mask-image: url("../images/tech-storage.5cbe1f3751f7.svg"); }
div.spec#size h3:after { -webkit-mask-image: url("../images/tech-size.c0de3a96c2e0.svg"); }
div.spec#included h3:after { -webkit-mask-image: url("../images/tech-extra.174e5fc18956.svg"); }
div.spec#wireless h3:after { -webkit-mask-image: url("../images/tech-wireless.38dc724cebd1.svg"); }
div.spec#sound h3:after { -webkit-mask-image: url("../images/tech-sound.9bf8d6c27afa.svg"); }
div.spec#display h3:after { -webkit-mask-image: url("../images/tech-screen.befeb27f6422.svg"); }
div.spec#inputs h3:after { -webkit-mask-image: url("../images/tech-input.44ef521cb329.svg"); }
div.spec#cost h3:after { -webkit-mask-image: url("../images/tech-price.b7e58915e8f8.svg"); }

div.spec#battery
{
    order: 1;
    left: 3.5em;
}

div.spec#cpu
{
    order: 3;
    left: 3.5em;
}

div.spec#storage
{
    order: 5;
    top: -0.5em;
    left: 3.5em;
}

div.spec#size
{
    order: 7;
    top: -1.5em;
    left: 3.5em;
}

div.spec#included
{
    order: 9;
    top: -2em;
    left: 3.5em;
}

div.spec#wireless
{
    order: 2;
}

div.spec#sound
{
    order: 4;
}

div.spec#display
{
    order: 6;
    top: -0.5em;
}
div.spec#inputs
{
    order: 8;
    top: -1.5em;
}
div.spec#cost
{
    order: 10;
    top: -2em;
}

/* ----------------- */
/*!---- GALLERY ---- */
/* ----------------- */

figure.gallery
{
    display: grid;
    grid-template-columns: 30rem 30rem 30rem;
    grid-template-rows: 25rem 25rem;
    grid-gap: 5rem;
    place-items: center;
    max-width: 100rem;
    margin: 0 auto;
}

figure.gallery img
{
    position: relative;
    width: 30rem;
    height: 25rem;
    cursor: zoom-in;
}

span.panic:before
{
    display: inline-block;
    position: relative;
    top: 0.25em;
    height: 1.25em;
    width: 1.25em;
    margin-right: 0.25em;
    -webkit-mask-image: url("../images/panic.ff1f61679ac9.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    content: "";
    background-color: white;
}

/* ----------------- */
/*!---- LIGHTBOX --- */
/* ----------------- */

#lightbox
{
  position: fixed;
  z-index: 101020;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10rem;
  background: rgba(0, 0, 0, 0.8);

  opacity: 1;
  transition: opacity 200ms ease;
  pointer-events: all;
}

#lightbox div {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

  /* when hidden… */

  #lightbox[aria-hidden="true"]
  {
    pointer-events: none;
    opacity: 0;
    cursor: auto;
  }

#lightbox nav {
  position: absolute;
  top: 2rem; right: 2rem; bottom: 2rem; left: 2rem;
}
#lightbox[aria-hidden="true"] nav {
    display: none;
}

#lightbox [data-lightbox-action]
{
  opacity: 0.5;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 3em;
  border: none;
  cursor: pointer;
  outline: none;
}
#lightbox [data-lightbox-action]:focus
{
  opacity: 1;
}
#lightbox [data-lightbox-action="previous"],
#lightbox [data-lightbox-action="next"]
{
  position: absolute;
  top: 6em;
  bottom: 0;
  width: 50%;
}
#lightbox [data-lightbox-action="previous"]
{
  left: 0;
  background-position: 0 center;
}
#lightbox [data-lightbox-action="next"]
{
  right: 0;
  background-position: center right 0;
}
#lightbox [data-lightbox-action="close"]
{
  z-index: 100;
  position: absolute;
  top: 1em; right: 1em;
  height: 3em;
  width: 3em;
  background-image: url("../images/lightbox-close.6b918775aea2.svg");
  background-position: center center;
  background-size: 75%;
}
#lightbox [data-lightbox-action="close"]:focus
{
  background-image: url("../images/lightbox-close-focus.5c1cc2f59dab.svg");
}
.overflow-hidden
{
  overflow: hidden;
}
@media screen and (min-width: 670px) {
  #lightbox [data-lightbox-action="previous"]
  {
    background-image: url("../images/lightbox-prev.abf77eae665f.svg");
  }
  #lightbox [data-lightbox-action="previous"]:focus
  {
    background-image: url("../images/lightbox-prev-focus.18974d1b8f67.svg");
  }
  #lightbox [data-lightbox-action="next"]
  {
    background-image: url("../images/lightbox-next.02f94877517b.svg");
  }
  #lightbox [data-lightbox-action="next"]:focus
  {
    background-image: url("../images/lightbox-next-focus.057c43b05bf8.svg");
  }
}

/* --------------- */
/*!---- WEBGL ---- */
/* --------------- */

#device,
#device-demo
{
    max-width: 110rem;
    height: 100rem;
    margin: 0 auto;
    position: relative;
}

#device::after,
#device::before
{
    content: "";
    height: 100%;
    width: 15%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
}

#device::before
{
    left: 0;
}

#device::after
{
    right: 0;
}

body.loaded #intro-canvas,
body.loaded #game-canvas
{
    cursor: grab;
}

#device
{
    background-image: none;
    background-position: center center;
    background-size: auto;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 300ms;
    transition-timing-function: linear;
    margin: -12rem auto -20rem auto;
}

body.loaded #device
{
    background-image: none;
    opacity: 1;
}

body #device
{
    background-image: url("../images/nowebgl-device.ad6b6e50dbd0.png");
    background-size: 60rem;
    background-position: calc(50% + 2.3rem) calc(50% + 0.25rem);
    background-repeat: no-repeat;
    opacity: 1;
    cursor: default;
}

figure#device-demo
{
    margin: -14rem auto -16rem;
    position: relative;
    z-index: 3;
}

button#muteButton,
button#gameButton
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    position: absolute;
    border: 0;
    cursor: pointer;
}

button#muteButton
{
    top: 14rem;
    left: 8rem;
    color: transparent;
    background-color: var(--red);
    -webkit-mask-image: url("../images/VolumeOff.0239d636d609.svg");
    -webkit-mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    width: 8rem;
    height: 8rem;
}

button#muteButton.on
{
    -webkit-mask-image: url("../images/VolumeLow.a8390f097ddf.svg");
    -webkit-mask-position: 1rem 0;
    background-color: var(--screen-black);
    animation-name: pulse;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

button#gameButton
{
    display:none;
}

body.paused button#gameButton
{
    display:block;
    position: absolute;
    top: 40rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.35em;
    font-weight: 700;
    padding: 0.25em 0.5em 0.35em 0.5em;
    background: var(--purple);
    border-radius: 1em;
    border: 1rem solid transparent;
    color: var(--white);
    box-shadow: 0 0 5rem rgba(0,0,0,0.5);
    transition: 250ms ease-in-out border;
}

body.paused button#gameButton:hover
{
    border: 1rem solid var(--white);
}

@keyframes pulse
{
    from { opacity: 1; }
    to { opacity: 0.5; }
}

figure#device-demo
{
    background-image: url("../images/nowebgl-demo2.ffd651921de6.png"), radial-gradient(rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 70rem, 110rem;
    background-position: 60% 50%, 50% 50%;
    background-repeat: no-repeat;
    opacity: 1;
}

body.loaded figure#device-demo
{
  background-size: 0, 110rem;
}

.button
{
    background-color: var(--button-bg);
    color: var(--button-text);
}

.button.noIcon
{
    display: inline-block;    
    border-radius: 1em;
    color: var(--button-text);
    background-color: var(--button-bg);
    padding: 0.25em 0.7em 0.35em 0.7em;
    text-align: center;
    margin: 2rem auto;   
}
.button.noIcon a:before
{
    display: none;
}

.button.center
{
    display: block;
}
.button.black
{
    background-color: var(--black);
}
.button.yellow
{
    background-color: var(--brand-yellow);
    color: var(--black);
}
.button.screenBlack
{
    background-color: var(--screen-black);
}
div.button.noIcon a:before
{
    display: none;
}
.button.big
{
    font-size: 1.25em;
}

div.button#credits-button
{
    text-align: left;
    color: var(--screen-black);
    background-color: var(--screen-white);
}

div.button#credits-button a
{
    font-weight: 400;
}

div.button#orderStatus,
div.button#help-button
{
    color: var(--white);
    background-color: var(--purple);
    font-size: 1.4em;
}

div.button a:before
{
    content: "";
    width: 1em;
    height: 1em;
    display: inline-block;
    position: relative;
    top: 0.15em;
    margin-right: 0.25em;
    -webkit-mask-image: url();
    -webkit-mask-size: 1em;
    -webkit-mask-position: 0% 50%;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--white);
}

div.button#developer a:before
{
    background-color: var(--white);
    -webkit-mask-image: url("../images/toolbar-icon-dev.facb0dc49bac.svg");
}


div.button#mirrorButton a:before
{
    background-color: var(--white);
    -webkit-mask-image: url("../images/mirror-glyph.f1b6f3818960.svg");
}

div.button#credits-button a:before
{
    display: none;
}

div.button#orderStatus a:before,
div.button#help-button a:before
{
    background-color: var(--white);
    -webkit-mask-image: url("../images/toolbar-icon-help.b1ee519a9db6.svg");
}

form#elist_form
{
    --input-bg: var(--psd-lightest-gray);
    --input-text: var(--screen-black);
}

section#get-alerted form#elist_form div
{
    margin-left: 0;
    margin-right: 0;
}

form#elist_form div.control-group label
{
    color: var(--screen-white);
}

form#elist_form div.labeled-text input
{
    color: var(--screen-black);
}

button#elist_submit
{
    color: var(--screen-black);
    background-color: var(--brand-yellow);
}

footer
{
  --page-bg: var(--purple);
  --text: var(--white);
  --link: var(--brand-yellow);

  background-color: var(--page-bg);
  color: var(--text);

  margin: 6rem auto 0 auto;
  padding-bottom: 6rem;
  text-align: center;
  position: relative;
}

footer::before
{
    content: "";
    /* outline: 1px solid red; */
    display: block;
    height: 60rem;
    width: 110rem;
    background-image: url("../images/footer.c1b8013f1eb3.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

footer ul.panic
{
    max-width: unset;
}

footer ul.panic::before
{
    content: "";
    display: block;
    height: 10rem;
    width: 10rem;
    -webkit-mask-image: url("../images/panic.ff1f61679ac9.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: var(--text);
    margin: 2rem auto;
}

footer li a[href="https://panic.com/"]::before
{
    -webkit-mask: none;
    position: absolute;
    display: inline-block;
}


/* Responsive Scaling */
@media screen and (min-width: 240px)
{

    body
    {
        padding-top: 0;
    }

    header
    {
        padding-top: 18rem;
    }

    div.infobox
    {
        top: 18rem;
    }

    ul#gamelist
    {
        grid-template-columns: 1fr;
        grid-gap: 2rem;
    }

    ul#gamelist li,
    ul#gamelist li div.game-card,
    ul#gamelist li dl
    {
        width: 84rem;
        height: 37.2rem;
    }

    ul#gamelist li div.game-card dl
    {
        max-width: unset;
        font-size: 1.15em;
    }

    div.game-card div.game-image
    {
        background-position: 0% -50rem, 0% 0%
    }

    div#specs { grid-template-columns: 1fr; left: 0;}
    div.spec { position: static; }
    div#specs::before { left: -90rem; }
    div#specs::after { right: -110rem; }
}

@media screen and (min-width: 670px)
{
    body
    {
        padding-top: 0;
    }

    header
    {
        padding-top: 12rem;
    }

    div.infobox
    {
        top: 12rem;
    }

    ul#gamelist
    {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1rem;
    }

    ul#gamelist li,
    ul#gamelist li div.game-card,
    ul#gamelist li div.game-card dl
    {
        width: 35rem;
        height: 15.5rem;
    }

    ul#gamelist li div.game-card dl
    {
        font-size: 0.65em;
    }

    div.game-card div.game-image
    {
        background-position: 0% -20rem, 0% 0%
    }

    div#specs { font-size: 0.75em; grid-template-columns: 2fr 3fr; left: -8em; }
    div#specs, div.spec { position: relative; }
    div#specs::before { left: -43rem; }
    div#specs::after { right: -78rem; }
}

/* Catalog */

#catalogSectionContainer
{
    padding: 3rem 0;    
}

section#catalog h2#catalogTitle
{
    color: transparent;
    text-indent: -99999px;
    
    background-image: url("../images/games/catalog-banner-logo-may2023.d08a55a9e501.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    
    height: 2.75em;
    width: 6em;
}

div.button#catalogGo a
{
    color: white;
}

div.button#catalogGo a:before
{
    background-color: var(--white);
    -webkit-mask-image: url("../images/link-download.20852e7b2421.svg");
}

#catalogCarousel
{
    position: relative;
    /* outline: 1px solid red; */
    margin: 2em 0;
}

#catalogCarouselLink
{
    display: block;
    margin: 0 auto;
    opacity: 1;
    color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 0;
}

#catalogCarouselLink::after
{
    content: '';
    position: absolute;
    width: 100%;   
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 999;
}

#catalogCarousel::before,
#catalogCarousel::after
{          
    display: block;
    content: '';
    height: 6em;
    width: 200vw;
    
    background-repeat: repeat-x;
    background-size: auto 6em;
    background-position: 0;  
    
    animation: catalogGamesBannerScroll 40s infinite;
    animation-timing-function: linear;
    
    animation-play-state: paused;

    transform: translateX(0);
    cursor-events: none;
}

#catalogCarousel[data-animate="true"]::before,
#catalogCarousel[data-animate="true"]::after
{
    animation-play-state: running;
}

@media (prefers-reduced-motion)
{
    #catalogCarousel[data-animate="true"]::before,
    #catalogCarousel[data-animate="true"]::after
    {
        animation-play-state: paused;
    }
}

#catalogCarousel::before
{
    background-image: url("../images/frontpage-catalog-games-banner-bottom.5a6f8599d516.png");
        
    animation-direction: alternate;
} 
#catalogCarousel::after
{                
    background-image: url("../images/frontpage-catalog-games-banner-top.740eae7a4db2.png");
    margin-top: .5em;
    
    animation-direction: alternate-reverse;
}

@keyframes catalogGamesBannerScroll
{
  0%   { transform: translateX(0rem); }
  100% { transform: translateX(-100rem); }
}


/* S2 */

/* Catalog */

#s2SectionContainer
{
    padding: 3rem 0 5rem 0;    
}

section#s2 h2#s2Title
{
    color: transparent;
    text-indent: -99999px;
    
    background-image: url("../images/season/s2-logo2.69638c554e88.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    
    height: 4em;
    width: 10em;
}

div.button#s2Go a:before
{
    background-color: var(--black);
    -webkit-mask-size: contain;
    -webkit-mask-image: url("../images/toolbar-icon-shop.0ed32500dd3b.svg");
}

figure#s2Promo1
{
    background-image: url("../images/season/s2-promo-1.1ba498316d61.png");
    background-size: contain;
    margin: 4rem auto;
    width: 100%;
    height: 32rem;
    max-width: 80rem;
}


/* Stop scaling */
@media screen and (min-width: 1100px)
{

}