@charset "UTF-8";

@font-face
{
  font-family: 'averia';
  src: url('/fonts/averia_serif_libre-light.woff2') format('woff2'),
    url('/fonts/averia_serif_libre-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root
{
  --sans-serif: 'Avenir Next', sans-serif;
  --padding: 4rem;
}

body
{

  --bgblue: #00004e;
  --darkestblue: #000052;
  --darkblue: #003680;
  --brightblue: #0852ff;
  --lightblue: #006bff;
  --lighterblue: #529aff;
  --lightestblue: #b6d4ff;

  --purple: #412094;
  --lightpurple: #5c1cff;

  --red: #e0410e;
  --brown: #4d2e1c;
  --lightbrown: #975e2f;
  --lighterbrown: #e08230;
  --peach: #e0a070;

  --darkyellow: #deac00;
  --brightyellow: #ffcd00;
  --lightyellow: #ffde4a;

  --green: #008600;

  --offwhite: #f6ffff;
  --lightgray: #f4efea;
  --white: #fff;
  --black: #000;
}

body.palette-color
{
    --page-bg: var(--bgblue);
    --text: var(--black);
    --subtle: var(--lighterblue);
    --interactive: var(--brightblue);
    --strong: var(--darkestblue);

    --content-bg: var(--offwhite);
    --content-shadow: var(--darkestblue);

    --input-bg: var(--white);
    --input-border: var(--lightestblue);
    --input-placeholder: var(--lightestblue);
    --button-bg: var(--brown);
    --button-border: var(--brown);
    --button-text: var(--white);

    --screenshot-background: var(--lightestblue);
    --screenshot-shadow: var(--lightestblue);

    --tagline: var(--brown);
    --rainbow: linear-gradient(90deg, var(--green), var(--lightblue), var(--lightpurple), var(--red), var(--lighterbrown));
    --footer-color: var(--subtle);

    --platform-color-steam: var(--darkblue);
    --platform-color-switch: var(--red);
    --platform-color-mas: var(--lightblue);
    --platform-color-itchio: var(--green);

    --title-bg: linear-gradient(var(--lightblue), var(--lightblue)), linear-gradient(var(--white), var(--white));
    --img-page-bg: url("/img/town-color.png");
    --img-title: url("/img/title-art-color.png");
    --img-items: url('/img/items-color.png');
	--img-poster-image: url('/img/poster-image-out-color.png');
}

body.palette-peasoup
{
  --white: #8cad28;
  --light: #6c9421;
  --dark: #426b29;
  --black: #214231;

  --page-bg: var(--black);
  --text: var(--black);
  --subtle: var(--light);
  --strong: var(--dark);
  --interactive: var(--dark);

  --content-bg: var(--white);
  --content-shadow: var(--black);

  --input-bg: var(--white);
  --input-border: var(--light);
  --input-placeholder: var(--black);
  --button-bg: var(--black);
  --button-border: var(--black);
  --button-text: var(--white);

  --screenshot-background: var(--white);
  --screenshot-shadow: var(--light);

  --tagline: var(--dark);
  --rainbow: linear-gradient(var(--black), var(--black));
  --footer-color: var(--light);

  --platform-color-steam: var(--dark);
  --platform-color-switch: var(--dark);
  --platform-color-mas: var(--dark);
  --platform-color-itchio: var(--dark);

  --title-bg: linear-gradient(var(--black), var(--black));
  --img-page-bg: url("/img/town-peasoup.png");
  --img-title: url("/img/title-art-peasoup.png");
  --img-items: url('/img/items-peasoup.png');
  --img-poster-image: url('/img/poster-image-out-peasoup.png');

}

body.palette-playdate
{
  --black: #322f28;
  --white: #b1aea5;

  --page-bg: var(--black);
  --text: var(--black);
  --subtle: var(--black);
  --strong: var(--black);
  --interactive: var(--black);
  --tagline: var(--black);

  --rainbow: linear-gradient(var(--black), var(--black));

  --content-bg: var(--white);
  --content-shadow: var(--black);
  --input-bg: var(--white);
  --input-border: var(--black);
  --input-placeholder: var(--black);
  --button-bg: var(--black);
  --button-border: var(--black);
  --button-text: var(--white);

  --screenshot-background: var(--white);
  --screenshot-shadow: var(--black);
  --footer-color: var(--white);

  --platform-color-steam: var(--black);
  --platform-color-switch: var(--black);
  --platform-color-mas: var(--black);
  --platform-color-itchio: var(--black);

  --title-bg: linear-gradient(var(--black), var(--black));
  --img-page-bg: url("/img/town-playdate.png");
  --img-title: url("/img/title-art-playdate.png");
  --img-items: url('/img/items-playdate.png');
  --img-poster-image: url('/img/poster-image-out-playdate.png');

}

body.palette-bw
{
  --black: #000;
  --white: #fff;

  --page-bg: var(--black);
  --text: var(--black);
  --subtle: var(--black);
  --strong: var(--black);
  --interactive: var(--black);
  --tagline: var(--black);

  --rainbow: linear-gradient(var(--black), var(--black));

  --content-bg: var(--white);
  --content-shadow: var(--black);
  --input-bg: var(--white);
  --input-border: var(--black);
  --input-placeholder: var(--black);
  --button-bg: var(--black);
  --button-border: var(--black);
  --button-text: var(--white);

  --screenshot-background: var(--white);
  --screenshot-shadow: var(--black);
  --footer-color: var(--white);

  --platform-color-steam: var(--black);
  --platform-color-switch: var(--black);
  --platform-color-mas: var(--black);
  --platform-color-itchio: var(--black);

  --title-bg: linear-gradient(var(--black), var(--black));
  --img-page-bg: url("/img/town-bw.png");
  --img-title: url("/img/title-art-bw.png");
  --img-items: url('/img/items-bw.png');
  --img-poster-image: url('/img/poster-image-out-bw.png');

}

/* *,
*:before,
*:after
{
  box-sizing: border-box;
} */

html, body
{
  margin: 0;
  padding: 0;
}

html
{
  font-size: 1vw;
  scrollbar-gutter: stable;
}

body
{
  font-size: 3.6rem;
}

/* Base sizes */

@media (min-width: 640px)
{
  body
  {
    font-size: 2rem;
  }
}

@media (min-width: 1000px)
{
  html
  {
    font-size: 10px;
  }
}

html
{
  background: var(--page-bg);
}

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

  font-family: var(--sans-serif);
  font-weight: 500;
}

a
{
  /* text-decoration: none; */
  color: var(--interactive);
}

a:hover
{
  text-decoration: underline;
}

#container
{
    /* position: absolute; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 100%;

    background-image: var(--img-page-bg);
    background-size: 200rem;
    background-position: center top;
    background-repeat: no-repeat;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

#main
{
  margin: .5em auto 2em auto;
  background: var(--content-bg);
}

#header,
#header .title
{
  margin: 0;
  padding: 0;
  position: relative;
}
  #header a
  {
    text-decoration: none;
  }


#header .title
{
  height: calc(100rem * 0.5805);
  margin-bottom: .5em;

  background-image: var(--title-bg);
  background-size: 100% 50%, 100% 50%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 50%;

  font-size: 1em;
  color: transparent;
}

#header .title::before
{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  padding-top: 1em;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: var(--img-title);
}

#tagline
{
  position: relative;
  text-align: center;
  color: var(--tagline);
  font-weight: bold;

  font-size: .85em;
  line-height: 1.2em;
  width: 45rem;
  left: 37rem;
  top: -8.5rem;
  /* outline: 1px solid red; */
}

#content
{
  margin-top: -4rem;
}

#trailerContainer
{
  padding: 0 var(--padding);
}

#trailer
{
  margin: 2em auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  width: calc(100vw);
  height: calc(56.25vw);
  max-width: 80rem;
  max-height: 45rem;
  border-radius: 0.5em;
  cursor: pointer;
  color: transparent;
  background-color: var(--page-bg);
}

#trailer iframe
{
  transition: 1000ms all ease;
  background: var(--white);
  overflow: hidden;
  object-fit: fill;
}

#trailer.poster iframe
{
  opacity: 0;
}

#trailer.poster,
#trailer.loading
{
  background-image: var(--img-poster-image);
}

#trailer.loading
{
  animation-name: pulse;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}

#trailer.playing
{
  animation-name: none;
}

@keyframes pulse
{
  from { opacity: 1; }
  50% { opacity: 0.35; }
  to { opacity: 1; }
}

#trailer.playing iframe
{
  opacity: 1;
}

#container
{
  position: relative;
  margin: 0;
  background-color: var(--page-bg);
}

.text
{
  max-width: 58em;
  margin: 0 auto;
  padding: 0 calc(var(--padding) * 2);

  font-size: 1.2em;
  line-height: 1.5;
  font-weight: 500;
}
  .text strong
  {
    color: var(--strong);
    text-wrap: nowrap;
  }
  .text.bigger,
  .text .bigger
  {
    font-size: 1.3em;
    line-height: 1.3em;
    font-weight: bold;
    text-align: center;
  }
  .text.bigger strong,
  .text .bigger strong
  {
    color: var(--strong);
  }
  .text.biggest,
  .text .biggest
  {
    font-size: 1.5em;
    line-height: 1.25em;
    font-weight: bold;
    text-align: center;
  }

.widget::before
{
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: -.3em;
  margin-right: .1em;

  background-image: var(--img-items);
  background-repeat: no-repeat;
  background-size: 128px;
  background-position: 0 0;

  image-rendering: crisp-edges;
  image-rendering: pixelated;
  /* outline: 1px solid red; */
}

.item-power::before {
  background-position: calc(2 * -32px) calc(1 * -32px);
}
.item-lantern::before {
  background-position: calc(1 * -32px) 0;
  vertical-align: -.4em;
}
.item-wrench-sword::before {
  background-position: 0 0;
  vertical-align: -.4em;
}
.item-ratcheteer::before {
  background-position: 0 calc(1 * -32px);
  margin-left: .3em;
}
.item-water::before {
  background-position: calc(3 * -32px) 0;
  vertical-align: -.4em;
}
.item-cryo::before {
  background-position: calc(1 * -32px) calc(1 * -32px);
}
.item-winter::before {
  background-position: calc(3 * -32px) calc(1 * -32px);
  vertical-align: -.2em;
  margin-right: .25em;
}
.item-snow::before {
  background-position: calc(2 * -32px) 0;
  vertical-align: -.4em;
  margin-right: .3em;
}

.list.platforms
{
  display: flex;
  flex-flow: row wrap;
  gap: .75em;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0 var(--padding);
  font-size: 1.15em;
  margin: auto;

}

.list-item.platform
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-item.platform a,
.list-item.platform span
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .35em .5em;
  width: 100%;
  max-width: 70%;

  --keyColor: var(--platform-color-steam);
  --keyColor2: var(--keyColor);
  background-color: var(--keyColor);
  color: var(--white);

  text-decoration: none;
  font-weight: 600;
  border-radius: .5em;
  border: .15em solid var(--keyColor2);

  transition: transform .2s ease;
}

.list-item.platform a
{
  cursor: pointer;
}

.list-item.platform span
{
  background-color: var(--white);
  color: var(--keyColor);
}

.list-item.platform a::before,
.list-item.platform span::before
{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background: var(--white);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.list-item.platform span::before
{
  background: var(--keyColor2);

}
  .list-item.platform a:hover
  {
    background-color: var(--keyColor2);
    color: var(--white);
    transform: translateY(-.125em);
  }
  .list-item.platform a:hover::before
  {
    background-color: var(--white);
  }

.list-item.platform
{
  flex: 100%;
}

.list-item.platform.steam a,
  .list-item.platform.steam span
  {
    --keyColor: var(--platform-color-steam);
    position: relative;
  }
    .list-item.platform.steam a::before,
    .list-item.platform.steam span::before
    {
      -webkit-mask-image: url("/img/platform-logo-steam.svg");
    }

.list-item.platform.switch a,
.list-item.platform.switch span
{
  --keyColor: var(--platform-color-switch);
  position: relative;
}
  .list-item.platform.switch a::before,
  .list-item.platform.switch span::before
  {
    -webkit-mask-image: url("/img/platform-logo-switch.svg");
    width: 1.4em;
    height: 1.4em;
  }
  .list-item.platform.wishlist a::after,
  .list-item.platform.preorder a::after,
  .list-item.platform span::after
  {
    content: 'SOON';
    display: block;
    position: absolute;
    top: -1em;
    right: -1em;
    padding: .2em .5em;

    background: var(--keyColor);
    color: var(--white);
    font-size: .7em;
    border-radius: 0.5em;
    text-transform: uppercase;
    transform: rotate(5deg);
  }

  .list-item.platform.wishlist a::after,
  .list-item.platform.preorder a::after
  {
    content: 'Wishlist now';
    background: var(--white);
    color: var(--keyColor);
    border: .15em solid;
    transform: rotate(-5deg);
    top: -1.25em;
    left: -1.25em;
    right: unset;
  }

  .list-item.platform.preorder a::after
  {
    content: 'Preorder';
  }


.list-item.platform.playdate a
{
  gap: .125em;
}
.list-item.platform.playdate a::before
{
  -webkit-mask-image: url("/img/platform-logo-playdate.svg");
  width: 2.2em;
}

.list-item.platform.mas a,
.list-item.platform.mas span
{
  --keyColor: var(--platform-color-mas);
  position: relative;
}

.list-item.platform.mas a::before,
.list-item.platform.mas span::before
{
  -webkit-mask-image: url("/img/platform-logo-mas.svg");
  width: 1.15em;
}

.list-item.platform.itchio a,
.list-item.platform.itchio span
{
  --keyColor: var(--platform-color-itchio);
  position: relative;
}

.list-item.platform.itchio a::before,
.list-item.platform.itchio span::before
{
  -webkit-mask-image: url("/img/platform-logo-itchio.svg");
  width: 1.5em;
}

/* Press Kit */

.textPage section
{
  padding: calc(var(--padding));
}

.textPage h2
{
  text-align: center;
  color: var(--darkblue);
}

.textPage dt
{
  font-weight: bold;
  margin-top: 2em;
  margin-bottom: 1em;
}

.textPage ul li
{
  margin-left: 0;
}

.textPage li,
.textPage dd,
.textPage details
{
  margin-bottom: .75em;
}

.textPage dd ul
{
  margin-top: 1em;
}

.textPage .art dd img
{
  width: 100%;
  max-width: 100%;
  margin: 1em 0;
}
  .textPage .art dd img.smaller
  {
    width: 50%;
    max-width: 30rem;
  }

@keyframes pulse
{
  from { opacity: 1; }
  50% { opacity: 0.35; }
  to { opacity: 1; }
}

#trailer.playing iframe
{
  opacity: 1;
}

.hidden
{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}
.centered
{
  text-align: center;
}

.rainbow
{
  white-space: nowrap;
  background: var(--rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Form & email */

section#mailingList
{
  margin: .5em auto 0 auto;
  padding-bottom: 2em;
}


#elist_form
{

  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: .5em 0;
}

.control-group input,
.control-group button
{

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
  background: transparent;
  border: 0;
}

input:focus-visible,
select:focus-visible,
button:focus-visible
{
  outline: 0px;
}

.control-group.email,
.control-group.button
{
  flex: 0 0 auto;
}

.meta
{
  text-align: center;
  font-size: .8em;
  flex: 0 0 100%;
}

.meta
{
  opacity: 0;
  transition-duration: 350ms;
  transition-timing-function: ease;
  transition-property: opacity;
}

.meta.success,
.meta.error
{
  opacity: 1;
}

.control-group input
{
  padding: .5em 1em;
  background: var(--input-bg);
  color: var(--text);
  width: 14em;
  border-radius: 0.5em 0 0 0.5em;
  border: .2em solid var(--input-border);
  border-right: 0;
}
  .control-group input::placeholder
  {
    color: var(--subtle);
  }

.control-group.button button
{
    background-color: var(--button-bg);
    border: .2em solid var(--input-border);
    color: var(--button-text);
    text-decoration: none;
    text-shadow: none;
    padding: .5em 2em;
    cursor: pointer;
    width: 100%;
    border-radius: 0 0.5em 0.5em 0;
    border: .2em solid var(--button-border);
}

#screenshots
{
  background: var(--screenshot-bg);
  padding: 2em 0;
  margin: 2em 0 0 0;
}

#screenshots ul
{
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--padding);
  flex-flow: row wrap;
  justify-content: center;
}

#screenshots ul li
{
  margin: 0;
  position: relative;
  --screenshot-width: calc(90rem - (var(--padding) / 2));
  width: var(--screenshot-width);
  height: calc(var(--screenshot-width) * .625);
}

#screenshots li a
{
  cursor: pointer;

}

#screenshots img
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 0.25em;
  -webkit-object-fit: cover;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  z-index: 100;

  box-shadow: var(--screenshot-shadow) .25em .25em 0;
  transition: all .2s ease;
  filter: var(--screenshot-filter);
}

  #screenshots img:hover
  {
    transform: translateY(-.125em);
    box-shadow: var(--screenshot-shadow) .5em .5em 0;
  }


#footer
{
  padding-bottom: 2em;
  margin: 0 auto;
  max-width: 80%;

  color: var(--footer-color);
}

#footer nav
{
  text-align: center;
}

#footer p
{
  text-align: center;
}
#footer a
{
  color: inherit;
}

.logos
{
  margin: 2em auto;
  display: flex;
  justify-content: center;
  align-content: center;
}

.logos a
{
  position: absolute;
  color: transparent;
  width: 100%;
  height: 100%;
}

.logos .logo
{
  position: relative;
  height: 8em;
  width: 8em;
  margin: 0;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--footer-color);
  color: transparent;
}

#logo-panic
{
  -webkit-mask-image: url("/img/logo-panic.png");
}

#viewer
{
  width: 100vw;
  height: 100vh;
  display: grid;
  place-content: center;
  background: rgba(0,0,0,0.75);
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: 250ms opacity ease;
  z-index: 1000;
}

#viewer #image
{
  display: block;
  width: 100vw;
  height: 62.5vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 100rem;
  max-height: 62.5rem;
  transform: scale(0);
  transition: 500ms transform ease;
  cursor: pointer;
  z-index: 10000;
}

#viewer
{
  width: 100vw;
  height: 100vh;
  display: grid;
  place-content: center;
  background: rgba(0,0,0,0.75);
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: 250ms opacity ease;
  z-index: 1000;
}

#viewer #image
{
  display: block;
  width: 100vw;
  height: 62.5vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 128rem;
  max-height: 80rem;
  transform: scale(0);
  transition: 500ms transform ease;
  cursor: pointer;
  z-index: 10000
}

#zoomedImage
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

body.viewer
{
  overflow: hidden;
  pointer-events: none;
}

body.viewer #viewer
{
  opacity: 1;
  pointer-events: all;
}

body.viewer #viewer #image
{
  transform: scale(1);
}

body.viewer #viewer #image
{
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}


.hidden
{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

#paletteSwitcherContainer
{
  position: fixed;
  bottom: .5em;
  right: .5em;
  z-index: 10000;
  /* outline: 1px solid red; */
}

#paletteSwitcher
{
  appearance: none;
  background: var(--input-bg);
  color: var(--input-color);
  padding: .25em 2em .25em .5em;
  border-radius: .5em;
  border: .15em solid var(--input-border);

  font-family: 'Avenir Next';
  font-weight: bold;
  font-size: .75em;
}

#paletteSwitcherDisclosure
{
  display: block;
  position: absolute;
  width: .5em;
  height: .5em;
  right: .5em;
  top: .55em;

  background-color: var(--subtle);
  -webkit-mask-image: url('/img/disclosure-arrow.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;

  pointer-events: none;
  user-select: none;
}

/* Desktop width */

@media (min-width: 640px)
{
  html
  {
   padding: 2em auto;
  }

  #container
  {
    padding-top: 2em;
  }

  #main
  {
    position: relative;
    max-width: 90rem;

    border-radius: 1.1em;
    border: .15em solid var(--white);
    /* border: .5em solid var(--page-bg); */
    box-shadow: var(--content-shadow) .5em .5em 0;
  }

  #header .title
  {
    height: calc(90rem * 0.5576);
    border-radius: 1em 1em 0 0;
    margin-bottom: 0;
  }
    #header .title::before
    {
      top: -1em;
    }

  #tagline
  {
    font-size: 1em;
    line-height: 1.3em;
    width: 42rem;
    left: 33rem;
    top: -8rem;
  }

  .list-item.platform
  {
    flex: revert; /* undo wide button on desktop */
  }
    .list-item.platform a,
    .list-item.platform span
    {
      max-width: 100%;
    }

  #screenshots ul
  {
    gap: calc(var(--padding) / 2);
  }

  #screenshots ul li
  {
    --screenshot-width: calc(((90rem - (var(--padding) / 2)) / 2) - var(--padding));
  }

  .textPage section
  {
    padding: calc(var(--padding) * 2);
  }

}