html { font-size: 16px; }

body {
    background: #02061e;
    --planet-size: 200px;
    --ufo-width: 80px;
    --ufo-height: 40px;
    --ad-support-size: 32px;
    --ad-support-border-width: 4px;
    --ad-support-after-width: 197px;
    --ad-support-after-height: 93px;
    --ad-support-after-left: -90px;
    --ad-support-after-bottom: 40px;
    --ad-support-before-height: 100px;
    --ad-support-before-left: 9px;
    --ad-support-before-bottom: 28px;
    --ad-hidden-right: -79px;
    --ad-hidden-height: calc(var(--ad-support-after-height)/3);
    --ad-hidden-base-bottom: calc(var(--ad-support-after-bottom) + var(--ad-support-border-width));
    --item-limit: 400px;
    --item-width: 60px;
    --item-height: 100px;
    --human-animation-duration: 15s;
    --rocket-animation-duration: 12s;
    --orbit-ad-duration: 60s;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: Consolas, monaco, monospace;
    color: #eee;
  }

  * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    
    body { -webkit-tap-highlight-color: transparent; }

  .center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
  }

  .planet {
    width: var(--planet-size);
    height:  var(--planet-size);
    font-size: var(--planet-size);
    line-height: var(--planet-size);
  }

  .ad-support {
    --orbit-from: 0deg;
    width: var(--ad-support-size);
    height: var(--ad-support-size);
    animation: orbit-ad var(--orbit-ad-duration) linear infinite reverse;
  }

  .ad-support::after {
    content: '';
    width: var(--ad-support-after-width);
    height: var(--ad-support-after-height);
    display: block;
    position: absolute;
    left: var(--ad-support-after-left);
    bottom: var(--ad-support-after-bottom);
    border: var(--ad-support-border-width) solid #fff;
    background-color: #fff;
    background-size: cover;
    background-image: url('./assets/ads.min.png');
    animation: flicker linear infinite 2s;
  }

  .hidding-ad {
    width: var(--ad-support-after-width);
    height: var(--ad-hidden-height);
    display: block;
    position: absolute;
    right: var(--ad-hidden-right);
    bottom: var(--ad-hidden-base-bottom);
    background: #000;
    z-index: 1;
    transition: width 500ms ease-in;
    display: none;
  }

  .hidding-ad+.hidding-ad {
    bottom: calc(var(--ad-hidden-base-bottom) + var(--ad-hidden-height));
  }

  .hidding-ad+.hidding-ad+.hidding-ad {
    bottom: calc(var(--ad-hidden-base-bottom) + var(--ad-hidden-height)*2);
  }

  .ad-support.on > .hidding-ad {
    display: block;
  }

  .ad-support.on.level1 > .hidding-ad:last-of-type,
  .ad-support.on.level2 > .hidding-ad:nth-of-type(2),
  .ad-support.on.level3 > .hidding-ad:first-of-type {
    width: 0;
  }

  .ad-support::before {
    content: '';
    width: var(--ad-support-border-width);
    height: var(--ad-support-before-height);
    display: block;
    position: absolute;
    left: var(--ad-support-before-left);
    bottom: var(--ad-support-before-bottom);
    background-color: #fff;
  }

  .ad-support.on::after {
    background-position-y: calc(var(--ad-support-after-height) * -1);
    animation: none;
  } 

  .ad-support+.ad-support.on::after {
    background-position-y: calc(var(--ad-support-after-height) * -2);
  } 

  .ad-support+.ad-support+.ad-support.on::after {
    background-position-y: calc(var(--ad-support-after-height) * -3);
  } 


  .ad-support+.ad-support {
    --orbit-from: 120deg;
  }

  .ad-support+.ad-support+.ad-support {
    --orbit-from: 240deg;
  }

  .ufo {
    --orbit-from: 0deg;
    --orbit-to: 360deg;
    width:  var(--ufo-width);
    height: var(--ufo-height);
    font-size: var(--ufo-height);
    line-height: var(--ufo-height);

    animation: orbit 6s linear infinite;
  }

  .ufo-emoji {
    transform: rotate(90deg);
    display: block;
  }

  .ufo-translate {
    transform: translateX(calc(var(--planet-size)/2 + var(--ufo-width)/2));
    display:  block;
    transition: transform 1s ease-in-out;
  }

  .limit {
    width:  calc(var(--item-limit) * 2);
    height: calc(var(--item-limit) * 2);
    border-radius: 50%;
    border: 1px solid currentColor;
    animation: rainbow 120s linear infinite;
  }

  #background {
    background: #02061e;
    width: 100%;
    height: auto;
  }

  .item-scale {
    display: block;
    width: var(--item-width);
    height: var(--item-height);
    text-align: center;
    transform: scale(0);
    animation: grow calc(var(--human-animation-duration)/2) linear 1 forwards;
  }

  .item-scale.rocket {
    animation: grow calc(var(--rocket-animation-duration)/2) linear 1 forwards;
  }

  .item-translate {
    transform: translateY(0);
    animation: fly var(--human-animation-duration) ease-in 1 forwards;
  }

  .item-scale.rocket,.item-translate.rocket {
    animation-duration: var(--rocket-animation-duration);
  }

  .rocket-image {
    transform: rotate(-45deg);
    filter: drop-shadow(1px 0 10px red);
  }

  .money {
    animation: float 5s ease-in-out infinite;
  }

  .money .transform {
    transition: all 300ms;
  }

  .money.absorbed .transform {
    transform: scale(0) translateY(-80px);
    opacity: 0;
  }

  #title-screen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2rem;
    flex-direction: column;
    transition: transform 1s;
  }

  .started #title-screen {
    transform: translateX(-100vw);
  }

  .subtitle {
    font-size: 2rem;
    animation: blink 1.2s infinite;
  }

  .subtitle .start-mobile { display: none; }

  @media (pointer:coarse) {
    .subtitle .start-desktop {
      display: none;
    }

    .subtitle .start-mobile {
      display: block;
    }
  }

  #container {
    position: fixed;
    visibility: hidden;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100vw);
    transition: transform 1s;
  }

  .started #container {
    visibility: visible;
    transform: translateX(0);
  }

  .end #container {
    visibility: visible;
    transform: translateY(-200vh);
  }
  
  #score-container, #lives-container {
    position: fixed;
    left: 20px;
    top: 20px;
    font-size: 2rem;
    word-spacing: -10px;
    text-align: left;
    z-index: 3;
    transform: translateX(-100vw);
    transition: transform 333ms ease-in;
  }

  .started #score-container, .started #lives-container {
    transform: translateX(0);
  }

  .end #lives-container {
    transform: translateX(-100vw);
  }

  #score-container {
    width: 0;
    height: 0;
    white-space: nowrap;
    display: flex;
    transition: all 333ms ease-in-out;
    transition-delay: font-size 100ms;
  }

  .end #score-container {
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    font-size: 2.5rem;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  #lives-container {
    top: auto;
    bottom: 20px;
  }

  .score-delta {
    font-size: 1.4rem;
    position: fixed;
    z-index: 2;
    animation: vanish 1s ease-out forwards;
  }

  #gameover, #gameover-reason, #gameover-subtitle {
    width: 100%;
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    transition: all 333ms ease-in-out;
    z-index: 4;
  }

  #gameover {
    transform: translateY(-100vh);
    font-size: 4rem;
    top: 20vh;
    text-transform: uppercase;
  }

  #gameover-reason {
    transform: translateY(100vh);
    font-size: 2.5rem;
    top: 33vh;
  }

  #gameover-subtitle {
    transform: translateY(100vh);
    bottom: 20vh;
  }

  .end #gameover, .end #gameover-reason, .end #gameover-subtitle {
    transform: translateY(0);
  }

  #dialogs-container {
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 30vh;
    padding: 0 16px;
    max-width: 40vw;
    background: rgba(0,0,0,.8);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    border: 2px solid #eee;
    transform-origin: center;
    transition: transform 300ms;
    transform: scale(0);
    z-index: 9;
  }

  #dialog-character {
    flex-shrink: 0;
    background: #e3e3e3;
    margin-right: 16px;
    border-radius: 50%;
    padding: 4px;
  }

  @keyframes orbit {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }


  @keyframes orbit-ad {
    from {
      transform: rotate(var(--orbit-from)) translateY(calc(var(--item-limit) * -1));
    }

    to {
      transform: rotate(calc(var(--orbit-from) + 360deg)) translateY(calc(var(--item-limit) * -1));
    }
  }


  @keyframes grow {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }

  @keyframes fly {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(var(--item-limit) * -1));
    }
  }

  @keyframes vanish {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(-40px);
      opacity: 0;
    }
  }

  @keyframes fly-away {
    from {
      transform: translateY(calc(var(--item-limit) * -1));
      opacity: 1;
    }
    to {
      transform: translateY(-9999px);
      opacity: 0;
    }
  }

  @keyframes rainbow {
    0% {
      color: white;
    }
    12.5% {
      color: pink;
    }
    25% {
      color: purple;
    }
    35.5% {
      color: blue;
    }
    50% {
      color: aqua;
    }
    62.5% {
      color: green;
    }
    75% {
      color: yellow;
    }
    87.5% {
      color: orange;
    }
    100% {
      color: red;
    }
  }

  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes blink {
    0%{     opacity: 1;    }
    49%{    opacity: 1; }
    60%{    opacity: 0; }
    99%{    opacity: 0;  }
    100%{   opacity: 1;    }
  }

  @keyframes flicker {
    75% {
      background-color: #fff;
    }
    76% {
      background-color: rgb(0, 162,323);
    }
    77% {
      background-color: #fff;
    }
    78% {
      background-color: #fff;
    }
    79% {
      background-color: rgb(0, 162,323);
    }
    80% {
      background-color: #fff;
    }
    90% {
      background-color: rgb(0, 162,323);
    }
    90.5% {
      background-color: #fff;
    }
  }

  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, -1px, -1px);
    }
    
    20%, 80% {
      transform: translate3d(2px, 2px, 2px);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, -4px, -4px);
    }
  
    40%, 60% {
      transform: translate3d(4px, 4px, 4px);
    }
  }

  @media (max-width: 800px),(max-height: 800px) {
    html { font-size: 10px; }

    body {
      --planet-size: 100px;
      --ufo-width: 40px;
      --ufo-height: 20px;
      --item-limit: 200px;
      --item-width: 30px;
      --item-height: 50px;
      --ad-support-size: 16px;
      --ad-support-border-width: 2px;
      --ad-support-after-width: 98.5px;
      --ad-support-after-height: 46.5px;
      --ad-support-after-left: -45px;
      --ad-support-after-bottom: 20px;
      --ad-support-before-height: 50px;
      --ad-support-before-left: 4.5px;
      --ad-support-before-bottom: 14px;
      --ad-hidden-right: -39.5px;
    }
  }