/* ---------------- */
/*!------ DEV ----- */
/* ---------------- */

:root
{
    --link: var(--blue);
    --button-bg: var(--blue);
    --button-text: var(--white);
}

p img
{
    width: auto;
}


/* Hero */

.card.hero
{
    content: "";
    display: grid;

    grid-template-columns: 1fr;
    grid-gap: 1em;

    margin-top: 0;
    padding: 1em 1.25em;

    font-size: 1em;
    font-weight: normal;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
}

.gluedToTop
{
    margin-top: 0;
    padding-top: 0;
}

.card.hero img
{
    width: 100%;
}

.card.hero .cardHeroImageBleed
{
    display: grid;
    align-content: center;
}

/* SDK Launch */

.card.hero.sdk
{
    background-color: var(--link);
    --text: var(--white);
    --button-bg: var(--brand-yellow);
    --button-text: var(--black);

    padding-right: 0;
    padding-top: .75em;
    padding-bottom: .25em;
}

.card.hero.sdk a,
.card.hero.sdk p,
.card.hero.sdk menu
{
    padding-right: 1.25em;
}

.card.hero a.titleLink
{
    font-size: 2em;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}
    .card.hero a.titleLink.image
    {
        text-indent: -9999px;
        color: transparent;
    }

.card.hero.sdk a::before
{
    border: 0.3rem solid var(--brand-yellow);
}

.card.hero.sdk menu.actions
{
    width: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
}

a#downloadSDKforWindows.action,
a#downloadSDKforLinux.action,
a#downloadSDKforMacOS.action,
a#SDKChangelog.action,
a#MirrorChangelog.action,
a#downloadSDKBetaforWindows.action,
a#downloadSDKBetaforLinux.action,
a#downloadSDKBetaforMacOS.action,
a#SDKBetaChangelog.action
{
    display: block;
    color: inherit;
    background: inherit;
    opacity: .7;
    font-size: 90%;
    line-height: 1.333em;
    font-weight: 500;
    margin: 0;
    text-align: left;
    text-decoration: underline;
    order: 1;
}
    a#downloadSDKforWindows.action:hover,
    a#downloadSDKforLinux.action:hover,
    a#downloadSDKforMacOS.action:hover,
    a#SDKChangelog.action,
    a#MirrorChangelog.action,
    a#downloadSDKBetaforWindows.action:hover,
    a#downloadSDKBetaforLinux.action:hover,
    a#downloadSDKBetaforMacOS.action:hover,
    a#SDKBetaChangelog.action
    {
        opacity: 1;
    }

a#downloadSDKforWindows span.actionInfo,
a#downloadSDKforLinux span.actionInfo,
a#downloadSDKforMacOS span.actionInfo,
a#downloadSDKBetaforWindows span.actionInfo,
a#downloadSDKBetaforLinux span.actionInfo,
a#downloadSDKBetaforMacOS span.actionInfo
{
    display: none;
}

/* Big button */
.os-win a#downloadSDKforWindows.action,
.os-linux a#downloadSDKforLinux.action,
.os-mac a#downloadSDKforMacOS.action,
.os-unknown a#downloadSDKforMacOS.action,
.os-win a#downloadSDKBetaforWindows.action,
.os-linux a#downloadSDKBetaforLinux.action,
.os-mac a#downloadSDKBetaforMacOS.action,
.os-unknown a#downloadSDKBetaforMacOS.action
{
    text-align: left;
    padding: .5em 1em;
    margin: .25em auto;
    width: 100%;
    background-color: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-size: 1em;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.0075em;
    border: 0;
    border-radius: 0.6rem;
    opacity: 1;
    order: unset;
}

.os-win a#downloadSDKforWindows span.actionInfo,
.os-linux a#downloadSDKforLinux span.actionInfo,
.os-mac a#downloadSDKforMacOS span.actionInfo,
.nojs a#downloadSDKforMacOS span.actionInfo,
.os-win a#downloadSDKBetaforWindows span.actionInfo,
.os-linux a#downloadSDKBetaforLinux span.actionInfo,
.os-mac a#downloadSDKBetaforMacOS span.actionInfo,
.nojs a#downloadSDKBetaforMacOS span.actionInfo
{
    display: inline-block;
}

a#SDKChangelog.action,
a#MirrorChangelog.action,
a#SDKBetaChangelog.action
{
    position: relative;
    left: -.1em;
    text-decoration: none;
}
    a#SDKChangelog:hover,
    a#MirrorChangelog:hover,
    a#SDKBetaChangelog:hover
    {
        text-decoration: underline;
    }
    a#SDKChangelog::before,
    a#MirrorChangelog::before,
    a#SDKBetaChangelog::before
    {
        content: '';
        display: inline-block;

        height: 1.1em;
        width: 1.1em;
        margin-right: .1em;
        vertical-align: -.18em;
        border: none;

        background-image: url("../images/new.057b0f9769c1.svg");
        background-size: contain;
        background-position: 50% 50%;
    }

/* BETA */

.card.hero#cardSDKBeta
{
    background-color: var(--red);
    --text: var(--white);
    --button-bg: var(--brand-yellow);
    --button-text: var(--black);

    padding-top: .75em;
    padding-bottom: .25em;
}

.card.hero#cardSDKBeta div.cardSDKDescription
{
    align-self: center;
}

.card.hero#cardSDKBeta .titleLink span
{
    background: var(--black);
    color: var(--white);
    padding: 0 .25em .125em .25em;
    border-radius: .3em;
}

.card.hero#cardSDKBeta p
{
    font-size: 0.8em;
}

.card.hero#cardSDKBeta p a
{
    color: inherit;
    opacity: 0.7;
}

.card.hero#cardSDKBeta .sdkLicenseWrapper
{
    justify-content: start;
    align-self: center;
}

.card.hero#cardSDKBeta .sdkLicenseWrapper menu.actions
{
    width: 100%;
}


/* Pulp */

section.full
{
    max-width: 100%;
}

section.devTools.pulp
{        
    --card-bg: var(--muted-green);
    --page-bg: var(--muted-light-green);
    --text: var(--black);
    --accent: var(--brand-yellow);    
    background-color: var(--muted-light-green);    
    padding: 4em 0 2em 0;
}

.card.hero.pulp
{
    background-color: var(--muted-green);    

}
.card.hero.pulp a.titleLink
{
    font-size: 2.5em;
    display: block;
    background-image: url("../images/dev-pulp-logo-standalone.fcec668bcc52.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.card.hero.pulp a::before
{
  border: 0.3rem solid var(--green);
}


/* Dev promo, general-purpose */

.card.hero.devPromo1
{
    width: 100%;
    height: 30rem;
    margin: 2rem 0 2rem 0;
    font-size: 0;
    color: transparent;

    background-image: url("../images/Dev-promo-graphic-1.474ae478028c.png");
    background-size: contain;
    background-position: 50% 50%;

}

section h2
{
  font-size: 2em;
  line-height: 1.1em;
  font-weight: 700;
  letter-spacing: -0.0075em;
  text-align: center;
  width: 100%;
}

dd
{
    margin-left: 0;
    margin-bottom: 2em;
}

/* Promo codes table, general-purpose */

.card table
{
   border-spacing: 1em;
}


/* Internal nav */

#dev nav.internal-nav #devSubmenuCatalog
{
    position: relative;
    display: inline-block;
}
#dev nav.internal-nav #devSubmenuCatalog::after
{
    content: '';
    display: block;
    position: absolute;
    top: -.4em;
    right: 0;
    width: 1.25em;
    height: 1.25em;
    -webkit-mask-size: contain;
    -webkit-mask-position: right center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url("../images/dev/catalog/catalog-sparkles1.8ff166b52534.svg");
    background-color: var(--link);
}

#dev nav.internal-nav #devSubmenuCatalog.here::after
{
    top: -.9em;
    right: -.5em;
}

#dev nav.internal-nav li
{
    font-size: .88em;
}

.pushDown
{
    margin-top: 2em !important;
}

/* Mirror */

#mirror
{
    /* --page-bg:  */
}

#mirror h1
{
    color: transparent;
    text-indent: -99999px;

    height: 6em;
    margin: 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../images/mirror-title-light.bf4c8ae9f79a.svg");
}
    @media (prefers-color-scheme: dark)
    {
        #mirror h1
        {
            background-image: url("../images/mirror-title-dark.bbd4cd7535c6.svg");
        }
    }

#mirror h2
{
    margin: 0 0 .75em 0;
}

#mirrorHero
{
    max-width: 100%;
    border-radius: .3em;
    margin: 1em 0;
}

#mirrorLinks ul
{
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em 0;

    display: grid;
    column-gap: 1em;
    row-gap: .25em;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
}
#mirrorLinks ul li
{
    display: inline-block;
    /* border: 2px solid red; */
    margin: 0;
    padding: 0;
    text-align: center;
}

#mirrorLinks .action#MirrorChangelog
{
    text-align: center;
    display: block;
}

.nojs     #downloadMirrorForMacOS,
.os-mac     #downloadMirrorForMacOS,
.os-win #downloadMirrorForWindows,
.os-linux   #downloadMirrorForDebian,
.os-linux   #downloadMirrorForRedHat
{
    grid-column: 1 / span 2;
    order: 1;
    padding-bottom: 1em;
    text-align: center;
}
    .nojs     #downloadMirrorForMacOS a,
    .os-mac     #downloadMirrorForMacOS a,
    .os-win #downloadMirrorForWindows a,
    .os-linux   #downloadMirrorForDebian a,
    .os-linux   #downloadMirrorForRedHat a
    {
        padding: 0.2em 0.75em 0.3em 0.75em;
        margin-bottom: .5em;
        border-radius: 1em;

        white-space: nowrap;
        font-size: 150%;
        font-weight: 700;
        text-decoration: none;

        background: var(--link);
        color: var(--button-text);
    }
    .nojs     #downloadMirrorForMacOS a::before,
    .os-mac     #downloadMirrorForMacOS a::before,
    .os-win #downloadMirrorForWindows a::before,
    .os-linux   #downloadMirrorForDebian a::before,
    .os-linux   #downloadMirrorForRedHat a::before
    {
        content: "Download for ";
    }
    .nojs     #downloadMirrorForMacOS a:hover,
    .os-mac     #downloadMirrorForMacOS a:hover,
    .os-win #downloadMirrorForWindows a:hover,
    .os-linux   #downloadMirrorForDebian a:hover,
    .os-linux   #downloadMirrorForRedHat a:hover
    {
        background: var(--tomato-red);
        color: var(--white);
    }

    /* Alignments */
    .os-win     #downloadMirrorForMacOS,
    .os-win     #downloadMirrorForDebian,
    .os-win     #downloadMirrorForRedHat,
    .os-linux   #downloadMirrorForMacOS,
    .os-linux   #downloadMirrorForWindows,
    .os-mac     #downloadMirrorForDebian,
    .os-mac     #downloadMirrorForRedHat,
    .os-mac     #downloadMirrorForWindows
    {
        text-align: center;
    }

#downloadMirrorForMacOS,
#downloadMirrorForWindows,
#downloadMirrorForDebian,
#downloadMirrorForRedHat
{
    color: var(--subtle);
    font-size: 100%;
    line-height: 1.5em;
    font-weight: normal;

    grid-column: 1 / span 2;
    order: 2;
    align-content: right;
}
    #downloadMirrorForMacOS a:hover,
    #downloadMirrorForWindows a:hover,
    #downloadMirrorForDebian a:hover,
    #downloadMirrorForRedHat a:hover
    {
        color: var(--link);
    }
    
    #downloadMirrorForMacOS::after
    {
        content: " (.zip)";
    }
    #downloadMirrorForWindows::after
    {
        content: " (.exe)";
    }
    
    #downloadMirrorForDebian::after,
    .os-linux #downloadMirrorForDebian a::after
    {
        content: " (.deb)";
    }
    
    #downloadMirrorForRedHat::after,
    .os-linux #downloadMirrorForRedHat a::after
    {
        content: " (.rpm)";
    }
    
    .nojs #downloadMirrorForMacOS::after,
    .os-mac #downloadMirrorForMacOS::after,
    .os-win #downloadMirrorForWindows::after,
    .os-linux #downloadMirrorForDebian::after,
    .os-linux #downloadMirrorForRedHat::after
    {
        content: "";
    }
    
    #mirror ul.columns
    {
        list-style: none;
        padding: 0;
        margin-top: 0;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 3em;
        place-items: center;
    }
    #mirror ul.columns li a
    {
        text-decoration: none;
        color: var(--text);
        font-weight: 700;
        font-size: 125%;
    }

    #mirror ul.columns li
    {

    }

    #mirrorMore
    {
        margin: 1em 0 3em 0;
    }

    #mirror ul.columns li a:before
    {
        display: block;
        width: 100%;
        content: "";
        position: relative;
        background-color: var(--link);
        -webkit-mask-size: contain;
        -webkit-mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        height: 2em;
        margin-bottom: 0.5em;
    }
        #mirror ul.columns li #mirrorArticle:before
        {
            -webkit-mask-image: url("../images/article.f0bfeb2025de.svg");
        }
        #mirror ul.columns li #mirrorVideo:before
        {
            -webkit-mask-image: url("../images/play.cef285e23997.svg");
        }

#mirrorChangelog h2
{
    text-align: left;
    border-bottom: 0.1rem solid;
    margin-bottom: 0 !important;
}

#mirrorChangelog h2+p
{
    margin: 0.5em 0;
    text-align: right;    
}


/* ! Cards */

ul.cards
{
    list-style: none;
    padding: 0;
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
}

ul.cards>li /* single card */
{
    display: grid;
    padding: 1em 1.25em;
    border-radius: 1rem;
    background-color: var(--card-bg);
    position: relative;
}

.cards .card.wide
{
    grid-column: 1 / span 2;
}

#catalogDevSetup ul.cards
{
    grid-template-columns: auto;
}

ul.cards li#cardSDK h3::before
{
    background-image: url("../images/playdate-sdk.5f8c8fec6ec7.svg")
}

ul.cards>li h3
{
    margin: 0;
    font-size: 1.5em;
    line-height: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

ul.cards>li h3 + p
{
    margin-top: .5em;
}

ul.cards>li h3.noIcon
{
    display: block;
}
ul.cards>li h3.noIcon::before
{
    display: none;
}

#cardMirror ul
{
    display: flex;
    flex-direction: column;
}

#cardMirror ul li
{
    /* display: contents; */
}

.cards .card > *
{
    width: 100%;
}

  ul.cards>li h3::before
  {
    content: '';
    display: inline-block;
    vertical-align: -.4em;
    margin-right: .4em;
    width: 1.5em;
    height: 1.5em;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }

  ul.cards li#cardInsidePlaydate .featureLink
  {
    display: block;
    
    text-transform: inherit;
    font-size: 120%;
    line-height: 1.5em;
  }
    ul.cards li#cardInsidePlaydate .featureLink em
    {
        display: block;
        font-weight: normal;
        color: var(--subtle);
        font-size: 83%;
    }
    ul.cards li#cardInsidePlaydate .featureLink::after
    {
        display: none;
    }

  ul.cards li#cardInsidePlaydate h3::before
  {
    background-image: url("../images/ip-favicon-effects.75e209559617.png")
  }

  ul.cards li#cardCaps h3::before
  {
    background-image: url("../images/dev-section-caps.55ca50857263.svg")
  }

  ul.cards li#cardPulp h3::before
  {
    background-image: url("../images/dev-section-pulp.661ab11b81f3.png")
  }

  ul.cards li#cardMirror h3::before
    {
      background-image: url("../images/dev-playdate-mirror.3cbe0fa52f06.svg")
    }

  ul.cards li#cardDevBadges h3::before
  {
    background-image: url("../images/dev-badges.a5ae7ef7adcc.svg");
  }

/*     Nova */

    ul.cards li#cardNova a::before
    {
      border-color: #ff034a;
    }
    @supports (color: color(display-p3 1 1 1 / 1))
    {
        ul.cards li#cardNova a::before
        {
            border-color: color(display-p3 1 0.012 0.29);
        }
    }

    ul.cards li#cardNova h3
    {
        text-transform: lowercase;
        font-size: 2.1em;
        margin-top: -0.15em;
        color: #ff034a;
    }
    @supports (color: color(display-p3 1 1 1 / 1))
    {
       ul.cards li#cardNova h3
       {
           color: color(display-p3 1 0.012 0.29);
       }
    }

    ul.cards li#cardNova h3::before
    {
      background-image: url("../images/nova-icon.b80ea9657cef.png");
      width: 1.05em;
      height: 1.05em;
      margin-right: 0.275em;
      margin-top: 0.15em;
    }

    ul.cards #cardNova .featureLink:hover
    {
        background-color: #ff034a;
        color: white;
    }
    @supports (color: color(display-p3 1 1 1 / 1))
    {
        ul.cards #cardNova .featureLink:hover
        {
            background-color: color(display-p3 1 0.012 0.29);
        }
    }

    ul.cards #cardNova p a
    {
        font-weight: 600;
        color: #ff034a;
    }
    @supports (color: color(display-p3 1 1 1 / 1))
    {
        ul.cards #cardNova p a
        {
            color: color(display-p3 1 0.012 0.29);
        }
    }

  ul.cards li#cardDevForum h3::before
  {
    background-image: url("../images/dev-section-forum.c8669fccd393.svg");
    width: 1.9em;
    margin-right: .1em;
  }

  ul.cards li#cardPulpBugReport h3
  {
/*       font-size: 1.4em; */
  }
  ul.cards li#cardPulpBugReport h3::before
    {
      background-image: url("../images/pulp-bug-report.85fb90053061.svg");
      width: 1.5em;
      margin-right: .3em;
    }

  ul.cards li#cardDiscord h3::before
  {
    background-image: url("../images/dev-discord-logo.1563a3d153d6.svg");
/*       margin-right: .1em; */
  }

  ul.cards li#cardSDKBugReport h3::before
    {
      background-image: url("../images/dev-bugreport.32e56066bd9d.svg");
    }

  ul.cards li#cardDesigningForPlaydate h3
  {

  }

  ul.cards li#cardDesigningForPlaydate h3::before
  {
      background-image: url("../images/dev-designing-for-playdate.63a43bad1457.svg");
  }
  
  ul.cards li#cardDevLinks h3::before
    {
        background-image: url("../images/dev-section-links.54a881fdc03b.svg");
        background-size: 1.3em;
    }
    
    ul.cards li#cardSwift h3::before
    {
        background-image: url("../images/dev/links/swift.69a620fb0585.svg?p3");
        /* background-size: 1.3em; */
    }

  /* Skinny, wide card */
  ul.cards  li.card.cardBanner
  {
      padding-top: .25em;
      padding-bottom: .25em;
  }

  li.card.cardBanner
  {
      padding-left: 4.5em;
      background-size: 2.5em;
      background-position: 1.25em 50%;
      background-repeat: no-repeat;
  }

  ul.cards li ul
  {
    list-style: none;
    padding: 0;
    align-self: end;
  }

  ul.cards li li
  {
    background: none;
    border-radius: 0;
    padding: 0;
    font-weight: 700;
  }

  ul.cards li a
  {
      color:var(--bright);
  }

  ul.cards li.wholeCardLink p
  {
      position: unset;
  }

  ul.cards li.wholeCardLink a::before
  {
      -webkit-box-sizing: border-box;
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      display: inline-block;
      top: 0;
      left: 0;
      z-index: 10;
      border-radius: 1rem;
      border: 0.3rem solid var(--accent);
      transition: 250ms ease-in-out opacity;
      opacity: 0;
  }

  ul.cards li.wholeCardLink a:hover::before
  {
      opacity: 1;
  }

  html#dev #elist_form
  {
      padding: 3rem 4rem;
      border: 0.3rem solid var(--accent);
      border-radius: 0.5em;
      background-color: var(--card-bg);
      margin-bottom: 6rem;
  }

  html#dev div.control-group label
  {
      color: var(--subtle);
  }

  html#dev #elist_submit
  {
      background-color: var(--accent);
      color: var(--text);
  }


/* Actions */

.card menu.actions
{
    width: 100%;
}
.card menu.actions .action
{
    margin: .25em auto;
    width: 100%;
    text-align: center;
}

menu.actions .actionSubtle
{
    display: block;
    color: inherit;
    opacity: .7;
    font-size: 75%;
    line-height: 1.333em;
    font-weight: 500;
}

/* Pulp Landing Page */

html#pulp_landing
{
    --page-bg: var(--muted-green);
/*     --text: var(--screen-black); */
    --text: rgba(0,0,0,.8);
    --card-bg: var(--white);
}

    html#pulp_landing #pulpLandingHeader
    {
        text-align: center;
    }

    html#pulp_landing h1
    {
        color: transparent;
        text-indent: -99999px;

        height: 4em;
        margin-top: 3em 0 2em 0;

        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("../images/pulp-logo-big.773ddb6ad10d.svg");
    }

    html#pulp_landing h2
    {
        text-align: center;
        font-size: 2em;
        letter-spacing: -0.0125em;
    }

    html#pulp_landing .go_button
    {
      display: inline-block;
      margin: .5em auto 1.5em auto;
      padding: 0.15em 1em 0.25em 1.15em;
      border-radius: 1em;

      font-size: 2em;
      font-weight: 700;
      letter-spacing: -0.0075em;
      text-decoration: none;

      background-color: var(--white);
      color: var(--text);
    }
        html#pulp_landing .go_button::after
        {
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: -.18em;
            -webkit-mask-size: contain;
            -webkit-mask-position: 0% 50%;
            -webkit-mask-repeat: no-repeat;
            background-color: var(--text);
            -webkit-mask-image: url("../images/pulp-pencil.a588efbcfa3a.svg");
        }

    html#pulp_landing ul.columns
    {
        list-style: none;
        padding: 0;
        margin-top: 0;
        display: grid;
        grid-template-columns: 1fr;
    }

    html#pulp_landing ul.columns li
    {
        display: grid;
        grid-template-rows: 46rem auto;
        grid-gap: 1em;
        margin-bottom: 1em;
        position: relative;
    }

    html#pulp_landing ul.columns li::before
    {
        content: "";
        display: block;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    html#pulp_landing ul.columns li:nth-child(1)::before
    {
        background-image: url("../images/dev/pulp/pulp-landing-shot-1.ab80c01231d5.png");
    }
    html#pulp_landing ul.columns li:nth-child(2)::before
    {
        background-image: url("../images/dev/pulp/pulp-landing-shot-2.ee30614d213b.png");
    }
    html#pulp_landing ul.columns li:nth-child(3)::before
    {
        background-image: url("../images/dev/pulp/pulp-landing-shot-4.a025f0427246.png");
    }
    
    html#pulp_landing #bitsyCredit
    {
        display: block;
        text-align: center;
    }

    @media (min-width: 860px)
    {
        html#pulp_landing ul.columns li
        {
            grid-template-rows: auto;
            grid-template-columns: 48rem auto;
            margin-bottom: 2em;
        }
        
        html#pulp_landing ul.columns li:nth-child(1)::before { background-position: left center; }
        html#pulp_landing ul.columns li:nth-child(2)::before { background-position: right center; }
        html#pulp_landing ul.columns li:nth-child(3)::before { background-position: left center; }

        html#pulp_landing ul.columns li:nth-child(2)
        {
            grid-template-columns: auto 48rem;
        }

        html#pulp_landing ul.columns li:nth-child(2) p
        {
            order: 1;
        }

        html#pulp_landing ul.columns li:nth-child(2)::before
        {
            order: 2;
        }

    }



/* Catalog */

#catalog-dev h1
{
    margin-top: 0em;
    font-size: 2.5em;
}

#catalog-dev h1::before
{
    content: "";
    display: block;
    width: 100%;
    height: 2.5em;
    margin-bottom: .25em;
    margin-top: .5em;

    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url("../images/dev/catalog/catalog-dev-title.2e81be57ac29.svg");
    background-color: var(--text);
}

#catalog-dev #catalogDevSetup menu
{
    align-self: end;
    width: 100%;
}

#catalog-dev #catalogDevSetup menu.actions a.action
{
    font-size: 1.25em;
}


.catalog_dev .intro h1
{
    margin: .5em 0;
}

.catalog_dev h1.decorated
{
    position: relative;
}
.catalog_dev h1.decorated::before,
.catalog_dev h1.decorated::after
{
    content: "";
    display: inline-block;
    position: absolute;
    background-color: var(--link);

    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
}

#catalog_assets h1::before
{
    top: -.6em;
    left: -3em;
    width: 100%;
    height: 1.2em;

    -webkit-mask-image: url("../images/dev/catalog/catalog-assets-header-1.02eeb633a85a.svg");
}
#catalog_assets h1
{
    margin-top: 1em;
}
#catalog_assets h1::after
{
    top: .57em;
    left: 3em;
    width: 100%;
    height: 1.2em;

    -webkit-mask-image: url("../images/dev/catalog/catalog-assets-header-2.64d966c1a4ac.svg");
}

#catalogAssetList
{
    line-height: 1.3;
}

#catalogDeveloperPromoCodes dl
{
    grid-template-columns: 3fr 1fr;
}

/* Game Links */

input.titleurlwidget[id$="_0"]
{
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
input.titleurlwidget[id$="_1"]
{
    margin-top: 0;
    border-top-width: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
input.titleurlwidget+hr
{
    display: none;
}

/* Your Games */

#yourGames ul
{
    padding-bottom: .5em;
}

#yourGames h2
{
    margin-bottom: .75em;
}

#yourGames .gameCard h2
{
    margin-bottom: 0;
}

.yourGameIntroBanner
{
    text-align: center;
}
.yourGameIntroBanner img
{
    max-width: 100%;
    border-radius: 0.5em;
}
.yourGameIntroBanner.twoThirdsSize img
{
    max-width: 66%;
}

/* Page Toolbar */

.pageToolbar
{
    z-index: 101009;
    position: fixed;

    width: 100%;
    max-width: 100vw;
    bottom: 0;
    right: 0;
    left: 0;
    padding: .75em .5em;

    font-size: .8em;
    background-color: var(--card-bg);
    border-top: 0.2rem solid var(--screen-black);
}



.pageToolbar form
{
    max-width: 100%;
}

.pageToolbar ul
{
    list-style: none;
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr;
}


.pageToolbar a.btn,
.pageToolbar select
{
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-size: 1em;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.0075em;
    border: 0;
    border-radius: 0.6rem;
    padding: 0.1em 1em 0.25em 1em;
    white-space: nowrap;
}

.pageToolbar button,
.pageToolbar input[type="submit"],
.pageToolbar a.btn,
.pageToolbar select
{
    background-color: var(--text-inverted);
    color: var(--text);
    
    border: solid .1em var(--text);    
    margin-top: 0;
    margin-bottom: 0;
}

.pageToolbar button.btn-primary,
.pageToolbar input[type="submit"].btn-primary,
.pageToolbar a.btn.btn-primary
{
    background-color: var(--text);
    color: var(--text-inverted);
}

.pageToolbar div.submit-button,
.pageToolbar div.buttonHolder
{
    font-size: 1.5em;
    /* text-align: right; */
    margin-top: 0;
}


.pageToolbar li,
.pageToolbar p
{
    display: block;
    font-weight: normal;
    font-size: 1em;
    align-self: center;
}
.pageToolbar li.adminToolbarButtons
{
    align-self: start;
    text-align: right;
    padding: 0;
    margin: 1em 0 0 0;
}

.pageToolbar.error .error
{
    display: inline-block;
    font-weight: 600;
    color: var(--status-bad);
    cursor: pointer;
    text-decoration: underline;
}

.pageToolbar.error .error::before
{
    display: inline-block;
    content: ' ';
    width: 1.2em;
    height: 1.2em;
    margin-right: .2em;
    vertical-align: -.05em;
    -webkit-mask-size: contain;
    -webkit-mask-position: 0% 50%;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--status-bad);
    -webkit-mask-image: url("../images/message-alert.4b9c3a60201b.svg");
}

.pageToolbar .subtle
{
    color: var(--text);
    opacity: .5;
}

.adminToolbarButtons form
{
    display: flex;
    column-gap: .5em;
}

.CatalogToolbarCheckbox
{
    white-space: nowrap;
    padding-top: .1em;
}
.CatalogToolbarCheckbox label
{
    vertical-align: .25em;
}


.selectWithGoButtonContainer
{
    display: flex;
}
.selectWithGoButtonContainer select
{
    display: inline-block;
    
    margin: 0;
    padding: .1em 1.5em .25em .5em;
    
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;    
    
    text-align: left;
}
.selectContainer
{
    /* display: flex; */
    position: relative;
}
/* .selectContainer::before
{
    content: "";
    position: absolute;
    
    width: .7em;
    height: .7em;
    top: .55em;
    right: 0.85rem;
    z-index: 10;
    outline: 1px solid red;
    pointer-events: none;
    
    background-color: var(--text);
    -webkit-mask-image: url("../images/disclosure-arrow.8072b36ce8c4.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
} */


.selectWithGoButtonContainer a.btn,
.selectWithGoButtonContainer button,
.selectWithGoButtonContainer input[type="submit"]
{
    display: inline-block;
    
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}



/* Preview */

.pageToolbar.preview p
{
    text-align: center;
    font-weight: 600;
    font-size: 1.5em;
    margin: 0;
    padding: 0;
}

/* Admin */

.pageToolbar li.toolbarText
{
    font-weight: 600;
}

.pageToolbar.icon .toolbarText::before,
.pageToolbar.icon .gameIdentifier::before
{
    content: ' ';
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
    vertical-align: -.35em;
    margin-right: .5em;
    -webkit-mask-size: contain;
    -webkit-mask-position: 0% 50%;
    -webkit-mask-repeat: no-repeat;
}

.pageToolbar.icon.admin .toolbarText::before
{
    background-color: var(--status-bad);
    -webkit-mask-image: url("../images/admin.faa7582f4617.svg");
}

.pageToolbar.icon.preview .toolbarText::before
{
    background-color: var(--button-bg);
    -webkit-mask-image: url("../images/preview.9584a34a9722.svg");
    margin-right: .25em;
}


/* Figures */


figure.illustration
{
    display: block;
    margin: 0 auto;
}
figure.illustration img
{
    position: inherit;
    height: auto;
    width: auto;
    max-width: 50rem;

    display: block;
    margin: 0 auto;
}
figure.illustration figcaption
{
    font-size: 90%;
    text-align: center;
    margin: .5em 0 1.5em 0;
    color: var(--subtle);
}
figure.illustration.outlined img
{
    border: .1em solid var(--subtle);
}

    #catalogAssetList dd.assetDescription.file,
    #catalogAssetList .assetDescription .assetsScreenshotFigure
    {
        background: var(--card-bg);
        color: var(--text);
    
        padding: 1em;
        border-radius: 0.5em;
    }

    .assetDescription figure.illustration
    {
        display: block;
        margin: 0 0 .5em 0;
    }
    .assetDescription figure.illustration img
    {
        margin: 0;
        max-width: 80%;
        background-color: var(--psd-lightest-gray);
        /* padding: .25em; */
    }
    .assetDescription figure.illustration.example::after
    {
        display: block;
        content: 'Example image';
        font-size: 70%;
        color: var(--subtle);
    }
    .assetDescription figure.current-image::after
    {
        display: block;
        content: 'Current image';
        font-size: 70%;
        color: var(--subtle);
    }
    
    #catalogAssetList .assetDescription .assetsScreenshotFigure
    {
        margin-bottom: 1em;
    }
    
    #catalogAssetList .assetsScreenshot hr
    {
        display: none;
    }
    
    #catalogAssetList .assetDescription .assetsScreenshotFigure
    {
        disp
    }
    
#catalogAssetList dl
{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: .25em;

    padding: 1em 0;
    margin: 0;

    border-bottom: .05em solid var(--subtle);
}
#catalogAssetList dt,
#catalogAssetList dd
{
    padding: 0;
    margin: 0;
}

.assetTitle
{
    font-size: 1em;
    position: relative;
}

.assetRequired.required
{
    text-align: right;
}
    .assetRequired.required span
    {
        display: inline-block;
        padding: .15em .35em;
        border-radius: .25em;

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

        font-size: 80%;
        font-weight: 600;
        text-transform: uppercase;
    }

.assetDescription .assetSpecs
{
    font-weight: 500;
    margin: .25em 0 0 0;
    padding: 0;
}

#catalogAssetList .assetTitle,
#catalogAssetList .assetRequired
{
    /* padding-top: .1em; */
}

code
{
    font-size: 0.8em;
}

#catalogAssetList code
{
    padding: 0 .5em;
    margin: 0 .15em;

    border-radius: .25em;

    background: var(--card-bg);
}

#catalogAssetList .identifyIllustrationDetail
{
    position: absolute;
    left: -2em;
    display: inline-block;

    border-radius: 1em;
    border: .2em solid white;
    margin-right: .3em;
    width: 1.75em;
    height: 1.75em;
    /* padding: 0 .5em; */

    background: var(--purple);
    color: white;

    text-align: center;
    font-weight: 700;
    font-size: 80%;
}

#catalogAssetList .colorSwatch
{
    position: absolute;
    left: -2em;
    top: .1em;
    display: inline-block;

    border-radius: .2em;
    border: .1em solid var(--card-bg);
    box-shadow: inset 0 0 .05em .05em rgba(0,0,0,.1);

    margin-right: .3em;
    width: 1.25em;
    height: 1.25em;
}

#catalogAssetList dl[id*="price"] input,
#catalogAssetList dl[id*="price"] select
{
    width: 50%;
}

/* Catalog asset upload form */

#catalogAssetList label
{
    color: var(--text);
}

#catalogAssetList textarea
{
    width: 100%;
    font-size: 75%;
    resize: vertical;
}

.uploadForm input[type="file"]
{
    line-height: 1em;
}
.uploadForm input::file-selector-button
{
    background-color: var(--link);
    color: var(--button-text);
    padding: 0.2em .5em;
    margin-right: 1em;
    border: none;
    border-radius: .2em;
    font-size: 80%;
}
.uploadForm input::file-selector-button:active
{
    background-color: var(--text);
}

.uploadForm div.color-picker.controls div.checkbox label
{
    display: grid;
    grid-template-columns: 2em auto;
    column-gap: .5em;
}

.uploadForm input[type="color"] {
    -webkit-appearance: none;

    border-radius: .3em;
    border: .15em solid var(--card-bg);

    padding: 0;
    width: 2em;
    height: 2em;
}
.uploadForm input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.uploadForm input[type="color"]::-webkit-color-swatch {
    border: none;
    box-shadow: inset 0 0 .05em .05em rgba(0,0,0,.5);
    border-radius: .2em;
}

.uploadForm input.color-input-hex
{
    width: 6em;
    margin-top: 0;
    font-family: monospace;
}

.uploadForm .help-block
{
    font-size: .8em;
}

#catalogAssetList dl.error dt label
{
    background: var(--status-bad);
    color: var(--button-text);
    border-radius: .25em;
    padding: .2em .5em;
}

#catalogAssetList div.control-group::last-child dl
{
    border: 0;
}

div.discount-option-radio label {
    display: inline;
}

div.discount-option-radio input {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 100%;
}

.discountselect div {
    display: flex;
}

.discountselect input::after
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: .5em;
  width: .5em;
  transform: translate(-50%, -50%);
  background-color: var(--black);
  opacity: 0;
  border-radius: 100%;
}

.discountselect input:checked::after
{
  opacity: 1;
}

.discountselect input
{
  border-radius: 100%;
}

.clearable-file-input
{
    display: grid;
    grid-template-columns: 1.25em 1fr;
    column-gap: .5em;
    align-items: center;

    margin-bottom: 1em;
}
div.control-group .clearable-file-input label
{
    height: 1.25em;
    margin-bottom: 0;
}

#catalogAssetList .clearable-file-input
{
    margin-top: .5em;
    margin-bottom: 0;
}

#catalogAssetList input[type="checkbox"]
{
    position: relative;
    width: 1.25em;
    height: 1.25em;
}
#catalogAssetList input[type="checkbox"]:checked,
.CatalogToolbarCheckbox input[type="checkbox"]:checked
{
    background-color: var(--button-bg);
    border-color: var(--button-bg);
}
#catalogAssetList input[type="checkbox"]:checked::after,
.CatalogToolbarCheckbox input[type="checkbox"]:checked::after
{
    position: absolute;
    top: 0.025em;
    left: 0.025em;
    content: " ";
    width: 1em;
    height: 1em;
    background-color: var(--button-text);
    -webkit-mask-size: 90% 90%;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url("../images/checkmark.a3cbcd8cf946.svg");
}

#catalogAssetList .characterCounter
{
    display: block;
    position: relative;
    top: -1em;
    margin-bottom: -1em;
    font-size: 80%;
    text-align: right;
    color: var(--subtle);
}
#catalogAssetList .characterCounter.maxed
{
    color: var(--negative);
}

#adminToolbar input[type="checkbox"]
{
    display: inline-block;
    position: relative;
    width: 1.25em;
    height: 1.25em;
    margin-bottom: 0;
}

#catalogAssetList input[type="file"]
{
    margin-bottom: 0;
}

.uploadForm div.submit-button button,
.uploadForm div.submit-button input
{
    font-size: 2em;
    background-color: var(--link);
}

/* Onboarding */

#devOnboardingLandingSeason
{
    --card-bg: var(--black);
    --text: var(--white); 
    --button-bg: var(--brand-yellow);
    --button-text: var(--black);
}

#catalogDevSetup #devOnboardingLandingSeason h3:before {
    background-image: url("../images/games/icon-season-light.92a0fa155ba7.svg");
}

#catalogDevSetup #devOnboardingLandingCatalog
{
    --card-bg: var(--brand-yellow);
    --text: var(--black); 
    --button-bg: var(--black);
}
    #catalogDevSetup #devOnboardingLandingCatalog h3:before {
    background-image: url("../images/games/catalog-icon-white.ff03241b896b.svg");
}

@media (min-width: 670px)
{
    #devLinks dl:before
    {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    #devLinks dl
    {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto 1fr;

        margin: .75em auto 1.5em auto;
    }

    #devLinks dt
    {
        grid-column: 2;
        grid-row: 1;
    }

    #devLinks dd
    {
        grid-column: 2;
        grid-row: 2;
    }

    #devLinks dd.devLinkImage
    {
        grid-column: 3;
        grid-row: 1 / span 2;
        width: 7em;
        justify-items: end;
        align-items: start;
    }
    
    ul.cards li#cardInsidePlaydate .featureLink:hover em
    {
        color: var(--text);
    }    
    
    ul.cards li#cardInsidePlaydate .featureLink em
    {
        display: inline;        
    }
    ul.cards li#cardInsidePlaydate .featureLink::after
    {
        display: block;
        float: right;
    }

    #mirrorLinks
    {
        width: 50%;
    }
}

/* SDK License Agreement and mailing list */
div.sdkLicenseWrapper
{
    position: relative;
    display: grid;
    place-items: center;
    row-gap: 0.5em;
}

div.sdkLicenseWrapper label,
div.sdkLicenseWrapper input
{
    font-size: 0.8em;
    order: 2;
    justify-self: start;
}

div.sdkLicenseWrapper label a
{
    padding-right: 0 !important;
    color: inherit;
    opacity: 0.7;
}

div.sdkLicenseWrapper input#sdkLicenseAgreement,
div.sdkLicenseWrapper input#sdkMailingList
{
    order: 1;
    align-self: stretch;
}

div.sdkLicenseWrapper #sdkLicenseAgreementLabel,
div.sdkLicenseWrapper #sdkMailingListLabel
{
    order: 2;
}

div.sdkLicenseWrapper div.sdkMailingListEmail
{
    order: 3;
    grid-row: 2;
    grid-column: 2;
    margin: 0;
}

div.sdkMailingListEmail input
{
    background-color: inherit;
    color: inherit;
    border-color: var(--text);
    opacity: 0.4;
    filter: saturate(.5);
    pointer-events: none;
    transition: 250ms ease-in-out opacity;
    transition-property: opacity, filter;
    margin-bottom: 0;
}

input#sdkMailingList:checked+div.sdkMailingListEmail>input
{
    opacity: 1;
    pointer-events: all;
    filter: saturate(1);
}


div.sdkMailingListEmail input::placeholder
{
    color: inherit;
    opacity: 0.6;
}

div.sdkMailingListEmail label
{
    position: absolute;
    font-size: 0;
    transform: translateX(-100vw);
    visibility: hidden;
    pointer-events: none;
}

div#sdkDownloadFields,
div#sdkBetaDownloadFields,
div#sdkMailingListFields,
#cardSDK div.sdkLicenseWrapper
{
    display: grid;
    grid-template-columns: 1em 1fr;
    align-items: start;
    row-gap: 0.5em;
    margin-left: 0;
    margin-right: auto;
    grid-column: 1 / span 2;
}

#cardSDK div.sdkLicenseWrapper menu.actions,
#cardSDK div.sdkLicenseWrapper div#sdkMailingListFields
{
    grid-column: 1 / span 2;
}

div.sdkLicenseWrapper input#sdkLicenseAgreement,
div.sdkLicenseWrapper input#sdkBetaLicenseAgreement
{
    order: 1;
}

div#sdkMailingListFields
{
    order: 2;
}

div.sdkLicenseWrapper menu.actions
{
    order: 3;
    grid-row: unset;
    grid-column: 1 / span 2;
    transition: 250ms ease-in-out opacity;
    transition-property: opacity, filter;
}

#sdkLicenseAgreement+menu.actions .action:not(.alwaysUsable),
#sdkBetaLicenseAgreement+menu.actions .action:not(.alwaysUsable)
{
    pointer-events: none;
    filter: saturate(.5);
    opacity: 0.4;
}

#sdkLicenseAgreement:checked+menu.actions .action,
#sdkBetaLicenseAgreement:checked+menu.actions .action
{
    opacity: 1;
    filter: saturate(1);
    pointer-events: all;
}

/* SDK License */

#sdkLicense h1,
#sdkLicense h1
{
    margin: 1em 0 .5em 0;
}

#sdkLicense h3,
#sdkLicense h1+p
{
    color: var(--subtle);
    margin: 0;
    font-weight: 500;
    font-style: normal;
    font-size: 1.17em;
}

#sdkLicense h2
{
    text-align: left;
    font-size: 1.25em;
    margin: 3rem 0 1rem 0;
}

#sdkLicense ul li,
#sdkLicense ol li
{
    margin-bottom: .25em;
}

.management-table th {
    text-align: center;
}

.management-table tr {
    text-align: center;
}

.management-table thead {
    border-bottom: 1px solid black;
}

.management-table {
    table-layout: auto;
}

.management-table
{
    border-collapse: collapse;
}
    
.management-table th
{
    font-size: 0.75em;
    text-align: left;
}

.management-table th.money
{
    text-align: right;
}

.management-table td
{
    font-size: 0.75em;
    padding: 5px 0px;
    text-align: left;
}

.management-table td.money {
    text-align: right;
}

.management-table thead {
    border-bottom: 1px solid black;
}

.management-table:not(.season-data) tr:nth-of-type(even) {
    background-color: rgb(237 238 242);
}

.management-table.season-data tr:not(.subrow) {
    border-top: 1px solid var(--subtle);
    /* border-bottom: 1px solid var(--subtle); */
}

.management-table.season-data .sumrow {
    background-color: rgb(237 238 242);
}

.management-table.season-data .subrow {
    background-color: white;
    font-size: 80%;
}



/* Responsive Scaling */
@media screen and (min-width: 240px)
{
    ul.cards
    {
        display: block;
    }

    ul.cards>li
    {
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 670px)
{
    main
    {
        font-size: 0.75em;
    }

    ul.cards
    {
        display: grid;
    }

    ul.cards>li
    {
        margin-bottom: 0;
    }

    .card.hero
    {
        grid-template-columns: 3fr 4fr;
        grid-gap: 1em;
    }

    .card.hero.sdk a,
    .card.hero.sdk p,
    .card.hero.sdk menu
    {
        padding-right: 0;
    }

    .card#cardPulp.hero
    {
        grid-template-columns: 2fr 5fr;
    }

    /* Actions in a desktop card are left-aligned */

    .card menu.actions
    {
        width: auto;
        text-align: left;
    }
    .card menu.actions .action
    {
        margin: .25em 0;
        width: auto;
    }


    #mirror h1
    {
        margin: 1em 0 0 0;
    }

    #mirror h2
    {
        margin: 1em auto 1em auto;
    }

    #mirror ul.columns
    {
        grid-template-columns: 1fr 1fr;
        column-gap: 2em;
        row-gap: 0;
    }
    #mirror ul.columns li
    {
        width: 80%;
        text-align: center;
    }

    #catalogAssetList dl
    {
        display: grid;
        grid-template-columns: 2fr 5fr 1fr;
        column-gap: 1em;
        row-gap: 0;
        padding: 1em 0;
    }

    .pageToolbar ul
    {
        grid-template-columns: auto min-content;
    }
    .pageToolbar a
    {
        white-space: nowrap;
    }
    .pageToolbar div.submit-button,
    .pageToolbar div.buttonHolder
    {
        text-align: center;
    }
    .pageToolbar li.adminToolbarButtons
    {
        margin: 0;
    }

}

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

}