// Place all the styles related to the Game#show method here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

//#game-component
  flex-grow: 3
  background: hotpink

.players
  display: inline-block
  width: 40%

//// New Game#new

.simple_form
  background: green
  padding: 5vmin
  outline: 2px solid black
  label
    font-size: 4vmin
    display: block
  input.string
    font-size: 6vmin
    margin-bottom: 2vmin
  input.btn
    font-size: 4vmin

//// Show Game#show

button,
input[type=submit]
  font-size: 4vmin

#table-component,
#game-component-container-container
  display: flex
  flex-direction: column
  flex: 1 1 auto
  align-self: stretch
  #game-component-container
    flex: 1 1 auto
    display: flex

#game-component
  flex: 1 1 auto
  flex-direction: column
  align-self: stretch
  display: flex
  h1
    font-size: 4vmin
  #game-controls
    display: flex
    flex-direction: row
    margin-bottom: 5vh
    align-self: stretch
    align-items: flex-start
  div
    flex: 1 1 auto
  #start
    align-self: flex-end
    text-align: right
  .player-list
    display: flex

  .player
    background: green
    padding: 2vmin
    outline: 2px solid black
    position: relative
    &.has-control
      background: lightgreen

#playerList
  display: flex
  flex-direction: row
  flex-wrap: wrap
  align-items: flex-start
  text-align: center
  #top
    flex: 0 0 100%
    display: flex
    .player
      flex: 1 1 auto
  #mid
    flex: 0 0 100%
    align-self: center
    align-items: flex-start
    display: flex
    .player
      flex: 1 1 auto
      .email
        //position: absolute
        //background: green
      &:first-of-type
        .email
          //left: -18.5vmin
          //transform: rotate(-90deg)
      &:last-of-type
        .email
          //transform: rotate(90deg)
          //right: -17vmin
    #play-to-beat
      flex: 1 1 auto
  #bot
    flex: 0 0 100%
    align-self: flex-end

////// Cards to beat

ol#cards-to-beat
  //display: flex
  flex-wrap: wrap
  text-align: center
  li
    position: relative
    margin-left: -21vmin
    // Don't offset first card
    &:first-of-type
      margin-left: -4vmin
    flex: 1 1 auto
    //flex: 1 1 auto
    text-align: center
    display: inline-block
  img
    width: 16vmin
    border: 1px solid black
    border-radius: .3vmin


////// Inventory

.player
  &.taking-turn
    font-weight: bold
    box-shadow: 0px 0px .5vmin 1vmin inset rgba(white,0.2)
  ul#inventory
    display: flex
    flex-wrap: wrap
    text-align: left
  li
    margin-left: -21vmin
    // Don't offset first card
    &:first-of-type
      // margin-left: 0
      margin-left: -4vmin
    flex: 1 1 auto
  input[type="checkbox"]
    // Capybara test requires visible checkbox
    // visibility: hidden
    opacity: .000001
    position: absolute
    &:checked ~ img
      box-shadow: 0px 0px 2px 5px #05adff, inset 0 0 2px 3px #056dff
      margin-top: -2vmin
  img
    width: 26vmin
    border: 1px solid black
    border-radius: 1.2vmin
    transition: margin-top ease-out .10s

#mid
  ul#inventory
    margin-left: 8vmin
    li
      margin-left: -8vmin
      // Don't offset first card
      &:first-of-type
        // margin-left: -0vmin
      img
        width: 16vmin

  .inventory
    text-align: left

.inventory
  text-align: center
  img
    width: 6vmin
    border: 2px solid black
    border-radius: .3vmin
    margin-left: -2vmin
    // Don't offset first card
    &:first-of-type
      // margin-left: 0vmin