@charset "UTF-8";

:root
{
  --sans-serif: 'Avenir Next', sans-serif;

  --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;

  --background: var(--bgblue);
  --text: var(--black);
  --subtle: var(--lighterblue);
  --interactive: var(--brightblue);

  --padding: 4rem;
}

@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;
}

/* *,
*: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(--background);
}

body
{
  background-color: var(--background);
  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: url('/img/town-bg.png');
    background-size: 200rem;
    background-position: center top;
    background-repeat: no-repeat;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

#main
{
  margin: 0 auto 2em auto;
  background: var(--offwhite);
}

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


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

  background-image: linear-gradient(var(--lightblue), var(--lightblue)), linear-gradient(var(--white), var(--white));
  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: url("/img/title-art.png");
}

#tagline
{
  position: relative;
  text-align: center;
  color: var(--brown);
  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: white;
}

#trailer iframe
{
  transition: 1000ms all ease;
  background: #fff;
  overflow: hidden;
  object-fit: fill;
}

#trailer.poster iframe
{
  opacity: 0;
}

#trailer.poster,
#trailer.loading
{
  background-image: url("/img/poster-image.png");
}

#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(--background);
}

/* @supports (background-image: url("image.webp"))
{
  #trailer.poster,
  #trailer.loading
  {
    background-image: url("/img/poster_image.webp");
  }
}

@supports (background-image: url("image.avif"))
{
  #trailer.poster,
  #trailer.loading
  {
    background-image: url("/img/poster_image.avif");
  }
} */

.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(--darkestblue);
    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(--darkblue);
  }

.widget::before
{
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -.35em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.pixel-lantern::before { background-image: url('/img/pixel-lantern.png'); }
.pixel-wrench-sword::before { background-image: url('/img/pixel-wrench-sword.png'); }
.pixel-ratcheteer::before { background-image: url('/img/pixel-ratcheteer.png'); margin-right: .2em; }
.pixel-power::before { background-image: url('/img/pixel-key-power.png'); }
.pixel-water::before { background-image: url('/img/pixel-key-water.png'); }
.pixel-cryo::before { background-image: url('/img/pixel-key-cryo.png'); }
.pixel-winter::before { background-image: url('/img/pixel-snowman.png');width: 1.3em; height: 1.3em }
.pixel-snow::before { background-image: url('/img/pixel-snowcean.png'); }

.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.2em;
}

.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(--brightblue);
  --keyColor2: var(--keyColor);
  background-color: var(--white);
  color: var(--keyColor);

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

  transition: transform .2s ease;
}

.list-item.platform a::before,
.list-item.platform span::before
{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background: var(--keyColor);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
  .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.wishlist a
  {
    background-color: var(--keyColor2);
    color: var(--white);
  }
  .list-item.platform.steam.wishlist a:hover
  {
    --keyColor2: var(--darkblue);
    color: var(--white);
  }
  .list-item.platform.steam.wishlist a::before
  {
    background-color: var(--white);
  }

.list-item.platform.steam a::before
  {
    -webkit-mask-image: url("/img/platform-logo-steam.svg");
  }

.list-item.platform.switch a,
.list-item.platform.switch span
{
  --keyColor: var(--red);
  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.switch span::after
  {
    content: 'Coming Soon!';
    display: block;
    position: absolute;
    bottom: -.75em;
    right: -1.2em;
    padding: .2em .5em;
    
    background: var(--keyColor);
    color: var(--white);
    font-size: .7em;
    text-transform: uppercase;
    transform: rotate(-5deg);
  }

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

/* 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: linear-gradient(90deg, var(--green), var(--lightblue), var(--lightpurple), var(--red), var(--lighterbrown));
  -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;
}

.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(--white);
  color: var(--text);
  width: 14em;
  border-radius: 0.5em 0 0 0.5em;
  border: .2em solid var(--lightestblue);
  border-right: 0;
}

.control-group.button button
{
    background-color: var(--brown);
    border: .2em solid var(--lightestblue);
    color: #fff;
    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(--brown);
}

#screenshots
{
  background: var(--lightestblue);
  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(--lighterblue) .25em .25em 0;
  transition: all .2s ease;
}

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


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

  color: var(--subtle);
}

#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(--subtle);
  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;
}

/* 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 white;
    /* border: .5em solid var(--background); */
    box-shadow: var(--background) .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);
  }
  
  .list-item.platform.switch span::after
  {
    bottom: -1em;
    right: -1.5em;
  }
}