@charset "UTF-8";

#credits #logo-panic::after
{
  -webkit-mask-image: url(/img/panic-interlaced.svg);
}

#credits #logo-panic::after
{
  background: var(--text);
}

#credits #logo-panic::before
{
  background: var(--background);
}

#credits::before
{
  display: none;
}

#platform-chooser-wrapper
{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  margin: 0 auto;
  width: 100%;
  padding: 1rem;
  align-items: center;
  justify-content: center
}

[data-platform="color"] #platform-chooser-wrapper
{
  --text: #000000;
  --background: #FFFFF0;
}

#platform-chooser
{

  display: flex;
  gap: .25em;
  margin: 0 auto;
  background: var(--text);
  color: var(--background);
  padding: 0.25em .5em;
  border-radius: 1em;
  margin: 0 auto;
  font-size: 2.4rem;
  cursor: pointer;
  border: 0.125em solid var(--background)
}

#platform-status
{
  width: 1.75em;
  background: var(--background);
  color: var(--text);
  border-radius: 1em;
  position: relative;
}

#platform-status::after
{
  content: "";
  width: .75em;
  height: .75em;
  position: absolute;
  left: .125em;
  top: .125em;
  border-radius:100%;
  background: var(--text);
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  transition-property: left;
}

[data-platform="color"] #platform-status::after
{
  left: .875em;
}

[data-platform="peedee"] #platform-status::after
{
  left: .125em;
}

#platform-color,
#platform-peedee
{
  font-weight: 600;
  text-transform: uppercase;
}

/* [data-platform="peedee"] #platform-color,
[data-platform="color"] #platform-peedee
{
  color: inherit;
} */

[data-platform="color"] #platform-color,
[data-platform="peedee"] #platform-peedee
{
  color: var(--activeColor);
}

[data-platform="color"]
{
  --activeColor: #7FBFAA;
}

[data-platform="peedee"]
{
  --activeColor: #ffc833;
}

#credits
{
  --text: #312f28;
  --background: #b1afa8;
  padding-top: 1em;
}

[data-platform="color"] #credits
{
  --background: #000000;
  --text: #FFFFF0;
}

.color-only,
.playdate-only,
[data-platform="color"] .peedee-only,
[data-platform="peedee"] .color-only
{
  display: none;
}

[data-platform="color"] .color-only,
[data-platform="peedee"] .peedee-only
{

  display: contents;
}


#credits header
{
  padding: 5rem;
}

#credits #blippo
{
  -webkit-mask-image: url('/img/blippo-logo.svg');
  -webkit-mask-size: contain;
  height: 30rem;
}

#credits #main
{
  grid-template-columns: auto;
}

#credits section
{
  line-height: 1.3;
  max-width: 90rem;
  margin: 1em 0;
}

#credits h2
{
  text-transform: uppercase;
  text-align: center;
  margin: .5em 0 .5em 0;
}

#credits h3
{
  text-transform: uppercase;
  margin: 1em 0 .5em 0;
  font-weight: bold;
}

#credits ul
{
  list-style: none;
}

#credits section a
{
  text-decoration: underline;
}

#credits header
{
  padding: 0;
  margin: 0;
  font-size: 1em;
  max-height: unset;
}

#credits header::before
{
  display:none;
}

#credits h2
{
  font-size: 1em;
  margin: 2em;
}

#credits h1
{
  font-size: 1em;
  margin: 4em 0 0 0;
}

#credits section
{
  margin: 0 auto;
}

.credits
{
  text-align: center;
  margin: 4em 0;
  font-size: .8em;
}

.credits .group
{
  margin: 4em 0;
}

.credits dt,
.credits dd
{
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  margin: 0;
}

.credits dt
{
  font-weight: 400;
  text-transform: none;
}

.credits .group .title
{
  text-transform: uppercase;
  grid-column: 1 / span 2;
  margin: 1em auto;
}

.credits dt.title,
.credits dd
{
  font-weight: 700;
}

.credits #filmed-on-location dd
{
  font-weight: 400;
}

.credits #filmed-on-location dt.title
{
  font-weight: 400;
  margin-bottom: 0;
}


.columns
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  justify-content: center;
  gap: 0 1em;
}

.columns dd+dt,
.columns dl dl dt,
.columns dd+dt+dd,

.columns dd+div>dt,
.columns dd+div>dt+dd,

.columns div+dt,
.columns div+dt+dd
{
  margin-top: 1em;
}

.columns dt
{
  grid-column: 1;
  text-align: right;
  justify-self: end;
  grid-row: auto / span 2;
}

.columns dd
{
  grid-column: 2;
  text-align: left;
  justify-self: start;
  font-weight: 700;
}

.columns dl dt
{
  text-align: left;
}

.columns dl dt
{
  font-weight: bold;
}

.columns dl dd+dt+dd
{
  margin-top: 0;
}


.columns dl dd dt
{
  font-weight: normal;
}

.role
{
  display: block;
  font-size: .675em;
}

.group.show
{
  margin: 8em 0;
}

.group.show::before
{
  content: "";
  height: 30rem;
  width: 60rem;
  display: block;
  position: relative;
  margin: 0 auto 0 auto;

  background: var(--text);
  -webkit-mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}


#bliptionary::before { -webkit-mask-image: url("/img/show-logos/bliptionary.png"); margin-top: -3rem;}
#boredome::before { -webkit-mask-image: url("/img/show-logos/boredome.svg"); margin-top: -6.5rem; }
#brain-drain::before { -webkit-mask-image: url("/img/show-logos/brain-drain.svg"); margin-top: 0rem;}
#bushwalker::before { -webkit-mask-image: url("/img/show-logos/bushwalker.png"); margin-top: -12rem; }
#cathode-confessions::before { -webkit-mask-image: url("/img/show-logos/cathode-confessions.svg"); margin-top: -11rem;}
#clone-trois::before { -webkit-mask-image: url("/img/show-logos/clone-trois.svg"); margin-top: 0rem; }
#confetti-cowboys::before { -webkit-mask-image: url("/img/show-logos/confetti-cowboys-1.svg"); margin-top: 0rem; }
#countertop::before { -webkit-mask-image: url("/img/show-logos/countertop.svg"); margin-top: -23rem; }
#cubis::before { -webkit-mask-image: url("/img/show-logos/cubis.svg"); margin-top: 0rem; }
#do-you-party::before { -webkit-mask-image: url("/img/show-logos/do-you-party.svg"); margin-top: -23.5rem; }
#electronic-program-guide::before { -webkit-mask-image: url("/img/show-logos/electronic-program-guide.svg"); margin-top: 0rem; }
#exquisite-telethon::before { -webkit-mask-image: url("/img/show-logos/exquisite-telethon.svg"); margin-top: -19rem; }
#femtofax::before { -webkit-mask-image: url("/img/show-logos/femtofax.svg"); margin-top: -17rem; }
#fetch::before { -webkit-mask-image: url("/img/show-logos/fetch.svg"); margin-top: -4.5rem; }
#lens-on-life::before { -webkit-mask-image: url("/img/show-logos/lens-on-life.svg"); margin-top: 0rem;}
#lets-tique::before { -webkit-mask-image: url("/img/show-logos/lets-tique-1.svg"); margin-top: 0rem; }
#look-alive::before { -webkit-mask-image: url("/img/show-logos/look-alive.svg"); margin-top: 0rem; }
#movie-maniacs::before { -webkit-mask-image: url("/img/show-logos/movie-maniacs-1.svg"); margin-top: -24rem; margin-bottom: -1rem;}
#nocturnal-transmissions::before { -webkit-mask-image: url("/img/show-logos/nocturnal-transmissions.svg"); margin-top: -16rem; }
#party-music-nonstop::before { -webkit-mask-image: url("/img/show-logos/party-music-nonstop.svg"); margin-top: 0rem; }
#psychic-weather::before { -webkit-mask-image: url("/img/show-logos/psychic-weather-1.svg"); margin-top: 0rem; }
#quizzards::before { -webkit-mask-image: url("/img/show-logos/quizzards.svg"); margin-top: -9rem; }
#realms-beyond::before { -webkit-mask-image: url("/img/show-logos/realms-beyond.svg"); margin-top: 0rem; }
#rubber-report::before { -webkit-mask-image: url("/img/show-logos/rubber-report-1.png"); margin-top: -4rem; margin-bottom: -4rem;}
#skywave-diaries::before { -webkit-mask-image: url("/img/show-logos/skywave-diaries.svg"); margin-top: 0rem; }
#small-talk::before { -webkit-mask-image: url("/img/show-logos/small-talk.svg"); margin-top: -3rem; right: -13rem;}
#snacks-come-alive::before { -webkit-mask-image: url("/img/show-logos/snacks-come-alive.svg"); margin-top: -23rem;}
#squish-tussle::before { -webkit-mask-image: url("/img/show-logos/squish-tussle.svg"); right: -3rem; }
#state-of-the-state::before { -webkit-mask-image: url("/img/show-logos/state-of-the-state-1.svg"); }
#system-ident::before { -webkit-mask-image: url("/img/show-logos/system-ident.svg"); right: -4rem;}
#subroutines::before { -webkit-mask-image: url("/img/show-logos/subroutines.svg");  margin-top: -13rem; }
#subspace-lunchbox::before { -webkit-mask-image: url("/img/show-logos/subspace-lunchbox.svg");  margin-top: -12rem;}
#tales-from-the-tube::before { -webkit-mask-image: url("/img/show-logos/tales-from-the-tube.svg");  margin-top: -2.5rem;}
#tantric-computing::before { -webkit-mask-image: url("/img/show-logos/tantric-computing.svg");  margin-top: -1rem; }
#total-calm::before { -webkit-mask-image: url("/img/show-logos/total-calm.svg"); margin-top: -5.5rem; }
#video-cola::before { -webkit-mask-image: url("/img/show-logos/video-cola.svg"); }
#wake-up-universe::before { -webkit-mask-image: url("/img/show-logos/wake-up-universe.svg"); }
#werfs-tavern::before { -webkit-mask-image: url("/img/show-logos/werfs-tavern.svg"); }


.credits#logos
{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: .5em;
  margin: 4em 0;
}

.credits#logos a
{
  flex: 1 1 12rem;
  color: transparent;
  background: var(--text);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  display: block;
  outline: 1px solid red;
  height: 12rem;
  width: 12rem;
}

.credits#logos a#yacht-logo
{
  -webkit-mask-image: url("/img/dev-logo-yacht.svg");
}

.credits#logos a#telefantasy-logo
{
  width: 36rem;
  flex: 1 1 36rem;
  -webkit-mask-image: url("/img/dev-logo-telefantasy.svg");
}

.credits#logos a#panic-logo
{
  -webkit-mask-image: url("/img/dev-logo-panic.svg");
}

.credits#logos a#dustin-logo
{
  -webkit-mask-image: url("/img/dev-logo-dustin.svg");
}

.credits#logos a#noblerobot-logo
{
  -webkit-mask-image: url("/img/dev-logo-noblerobot.png");
}

#credits #blippo
{
  height: 80rem;
  color: transparent;

  background: var(--text);
  -webkit-mask-image: url('/img/show-logos/blippo-top.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

#alt-logo
{
  height: 30rem;
  color: transparent;

  background: var(--text);
  -webkit-mask-image: url('/img/show-logos/blippo-alt.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* EPG Theme */

#epg-theme-player
{
  position: fixed;
  z-index: 1020;
  bottom: 1rem;
  right: 1rem;
}

/* Audio player */
#epg-theme-controls
{
    position: relative;
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
    user-select: none;
    opacity: 0.25;

    transition: 1s opacity ease;
}

#epg-theme-controls.ready
{
    opacity: 1;
    z-index: 1020;
}

#epg-theme-controls::before,
#epg-theme-controls::after
{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#epg-theme-controls::before
{
  background-color: var(--background);
  border-radius: 100%;
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
}

#epg-theme-controls::after
{
    background-color: var(--activeColor);
    background-color: var(--text);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;

    -webkit-mask-image: url('/img/play.svg');
}

#epg-theme-controls.playing::after
{
    -webkit-mask-image: url('/img/pause.svg');
}

#splash
{
  position: fixed;
  background: transparent;
  color: var(--text);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 102030;
  pointer-events: none;
  opacity: 0;
}

#splash::before
{
  content: "";
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  background: var(--background);
  opacity: 90%;
  z-index: 102030;
}

[data-splash="true"]
{
  overflow: clip;
}

[data-splash="true"] #splash
{
  pointer-events: all;
  opacity: 1;
  cursor: pointer;
}

#splash-content
{
  font-size: 2.6em;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  position: relative;
  z-index: 102030;
}