.lobby
  .centurion-title
    text-align: center

    font-size: 2.5rem
    min-height: inherit

    .text
      padding: 0 2rem

    .beer
      animation-fill-mode: forwards

      &.connecting
        animation: spin 0.4s ease-in-out 25

      @keyframes spin
        100%
          transform: rotate(-360deg)

    .beer-flipped
      transform: scaleX(-1)
      display: inline-block

  .lobby-connecting
    margin: 2em 0 0 0
    text-align: center

  .hints
    margin: 1rem 0 0 0
    font-size: 1.5rem
    text-align: center

  .lobby-info
    text-align: center

  .control
    font-size: 1.3rem
    margin: 2em 1em 2em 1em
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)

  .lobby-options-or
    display: inline-block
    position: relative

    margin: 16px 0
    color: #888

    &:before, &:after
      content: ''
      width: 1px
      height: 6px
      position: absolute
      left: 50%
      margin-left: 0.1px
      background: #bbb

    &:before
      bottom: 100%

    &:after
      top: 100%