@font-face
  font-family: 'BungeeFont'
  font-weight: normal
  font-style: normal
  

=inset($position: absolute)
  position: $position
  top: 0
  left: 0
  width: 100%
  height: 100%

*
  &,
  &:before,
  &:after
    -webkit-user-select: none
    -moz-user-select: none
    user-select: none
    box-sizing: border-box
    cursor: inherit
    margin: 0
    padding: 0
    outline: none
    font-size: inherit
    font-family: inherit
    font-weight: inherit
    font-style: inherit
    text-transform: uppercase

  &:focus
    outline: none

html
  -webkit-tap-highlight-color: transparent
  -webkit-text-size-adjust: 100%
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  -ms-text-size-adjust: 100%
  -webkit-text-size-adjust: 100%
  overflow: hidden
  height: 100%

body
  font-family: 'BungeeFont', sans-serif
  font-weight: normal
  font-style: normal
  line-height: 1
  cursor: default
  overflow: hidden
  height: 100%
  font-size: 5rem

.icon
  display: inline-block
  font-size: inherit
  overflow: visible
  vertical-align: -0.125em
  preserveAspectRatio: none
  
.range
  position: relative
  width: 14em
  z-index: 1
  opacity: 0

  &:not(:last-child)
    margin-bottom: 2em

  &__label
    position: relative
    font-size: 0.9em
    line-height: 0.75em
    padding-bottom: 0.5em
    z-index: 2

  &__track
    position: relative
    height: 1em
    margin-left: 0.5em
    margin-right: 0.5em
    z-index: 3

    &-line
      position: absolute
      background: rgba(#000, 0.2)
      height: 2px
      top: 50%
      margin-top: -1px
      left: -0.5em
      right: -0.5em
      transform-origin: left center

  &__handle
    position: absolute
    width: 0
    height: 0
    top: 50%
    left: 0
    cursor: pointer
    z-index: 1

    div
      transition: background 500ms ease
      position: absolute
      left: 0
      top: 0
      width: 0.9em
      height: 0.9em
      border-radius: 0.2em
      margin-left: -0.45em
      margin-top: -0.45em
      background: #41aac8
      border-bottom: 2px solid rgba(#000, 0.2)

      .range.is-active &
        transform: scale(1.25)

    &:after
      content: ''
      position: absolute
      left: 0
      top: 0
      width: 3em
      height: 3em
      margin-left: -1.5em
      margin-top: -1.5em

  &__list
    display: flex
    flex-flow: row nowrap
    justify-content: space-between
    position: relative
    padding-top: 0.5em
    font-size: 0.55em
    color: rgba(#000, 0.5)
    z-index: 1

  &--type
    &-color
      &:not(:last-child)
        margin-bottom: 1em

      .range
        &__list
          display: none

        &__handle
          > div
            background: currentColor !important

        &__track
          &-line
            background: transparent

            &:after
              +inset
              content: ''
              opacity: 0.5

  &--color
    &-hue
      .range
        &__handle
          color: red

        &__track
          color: red

          &-line
            &:after
              background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)
              

    &-saturation
      .range
        &__handle
          color: red

        &__track
          color: red

          &-line
            &:after
              background: linear-gradient(to right, gray, currentColor)

    &-lightness
      .range
        &__handle
          color: red

        &__track
          color: red

          &-line
            &:after
              background: linear-gradient(to right, black, currentColor, white)

.stats
  position: relative
  width: 14em
  z-index: 1
  display: flex
  justify-content: space-between
  opacity: 0

  &:not(:last-child)
    margin-bottom: 1.5em

  > i
    display: block
    color: rgba(#000, 0.5)
    font-size: 0.9em

  > b
    display: block
    font-size: 0.9em

    > i
      font-size: 0.75em

  &[name="worst-time"]
    display: none

.text
  position: absolute
  left: 0
  right: 0
  text-align: center
  line-height: 0.75
  perspective: 100rem
  opacity: 0

  i
    display: inline-block
    opacity: 0
    white-space: pre-wrap

  &--title
    bottom: 75%
    font-size: 4.4em
    height: 1.2em

    span
      display: block

      &:first-child
        font-size: 0.5em
        margin-bottom: 0.2em

  &--note
    top: 87%
    font-size: 1em

  &--timer
    bottom: 78%
    font-size: 3.5em
    line-height: 1

  &--complete,
  &--best-time
    font-size: 1.5em
    top: 83%
    line-height: 1em

.btn
  -webkit-appearance: none
  -moz-appearance: none
  appearance: none
  background-color: transparent
  border-radius: 0
  border-width: 0
  position: absolute
  pointer-events: none
  font-size: 1.2em
  color: rgba(#000, 0.25)
  opacity: 0

  &:after
    position: absolute
    content: ''
    width: 3em
    height: 3em
    left: 50%
    top: 50%
    margin-left: -1.5em
    margin-top: -1.5em
    border-radius: 100%

  &--bl
    bottom: 0.8em
    left: 0.8em

  &--br
    bottom: 0.8em
    right: 0.8em

  &--bc
    bottom: 0.8em
    left: calc(50% - 0.5em)

  svg 
    display: block

  &--cancel
    display: none !important
.ui
  pointer-events: none
  color: #070d15

  &,
  &__background,
  &__game,
  &__texts,
  &__prefs,
  &__theme,
  &__stats,
  &__buttons
    +inset
    overflow: hidden

  &__background
    z-index: 1
    transition: background 500ms ease
    background: #d1d5db

    &:after
      +inset
      content: ''
      background-image: linear-gradient(to bottom, rgba(#fff, 1) 50%, rgba(#fff, 0) 100%)

  &__game
    pointer-events: all
    z-index: 2

    canvas
      display: block
      width: 100%
      height: 100%

  &__texts
    z-index: 3

  &__prefs,
  &__stats,
  &__theme
    display: flex
    flex-flow: column nowrap
    justify-content: center
    align-items: center
    overflow: hidden
    z-index: 4

  &__theme
    padding-top: 15em

  &__buttons
    z-index: 5