body {
  background: #d8bb7e url(bg.jpg) fixed 50% 50%;
  background-size: cover;
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  height: 100%;
  margin: 0;
  padding: 0;
}

form {
  margin-block-end: 1em;
}

.fcol {
  display: flex;
  flex-direction: column;
}
.filler {
  flex: 1;
}

/* Modal dialogs. */
#modal-shade {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 98;
}
body:not(.modal) #modal-shade {
  display: none;
}
body:not(.modal) #modal {
  display: none;
}
body.modal {
  height: 100%;
  overflow: hidden;
}

#modal {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}

#modal p {
  font-weight: bold;
}

#modal > * {
  margin: 1ex;
}

#modal button {
  width: 18em;
}

#modal button.die {
  background: none;
  border: 0;
  height: 45px;
  padding: 0;
  width: 45px;
}

/* Messages. */
#messages {
  bottom: 0;
  margin: 1ex;
  opacity: 0.8;
  position: fixed;
  right: 0;
  width: 500px;
  z-index: 5;
}
#messages .alert {
  animation: 7s ease-out;
  animation-name: message;
}
@keyframes message {
    0% { opacity: 1.0; }
   90% { opacity: 1.0; }
  100% { opacity: 0.0; }
}

/********************************* Sections ***********************************/

body:not(#connecting) section#connecting,
body:not(#error) section#error,
body:not(#entry) section#entry,
body:not(#lobby) section#lobby,
body:not(#game) section#game
{
  display: none;
}

/********************************** Loading ***********************************/

section#connecting {
  margin: auto;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/*********************************** Error ************************************/

section#error {
  margin: 20%;
}

/*********************************** Entry ************************************/

section#entry {
  margin: 1em auto auto auto;
  width: 519px;
}

section#entry table {
  background: transparent;
}
section#entry table th,
section#entry table td
{
  border: none;
  margin: 2px 0;
  padding: 4px 0;
}

section#entry button {
  width: 100%;
}

section#entry cite {
  display: block;
  font-size: 0.9em;
  margin-top: 1.5rem;
}

/*********************************** Lobby ************************************/

section#lobby {
  margin: 1em auto;
  max-width: 1000px;
  min-width: 500px;
  padding: 0 20px;
  text-align: center;
}

section#lobby ul.players {
  list-style: none;
  padding: 0;
}

section#lobby ul.players li {
  display: inline-block;
}

section#lobby .alert {
  margin: auto;
  width: 600px;
}

section#lobby form .alert {
  margin-bottom: 1em;
}

section#lobby > .alert {
  margin: 1em auto;
}

section#lobby .alert a {
  font-weight: normal;
  text-decoration: underline;
}

/************************************ Game ************************************/

/* Buttons. */
section#game button {
  display: inline-block;
  visibility: hidden;
}

section#game player.me button {
  visibility: visible;
}

section#game player button[data="-1"] { left: 0; }
section#game player button[data="+1"] { right: 0; }

section#game button[data=another-game] {
  visibility: visible;
}

/* Players. */
section#game #players {
  text-align: center;
}
section#game #players * {
  vertical-align: top;
}

section#game #players player {
  border-radius: 6px;
  box-shadow: 5px 5px 40px #555;
  display: inline-block;
  height: 330px;
  margin: 10px;
  position: relative;
  text-align: left;
  width: 500px;
}
section#game #players player.active {
  box-shadow: 0 0 17px #2c3;
}

section#game #players player p {
  font-size: 16px;
  font-weight: bold;
  margin: 6px 6px 0 12px;
}

section#game #players player .health p,
section#game #players player .arrows p
{
  margin: 0;
  text-align: center;
}

section#game #players player.ghost {
  background: url(/static/ghost.png) no-repeat bottom right;
}
section#game #players player.ghost .health,
section#game #players player.ghost .arrows,
section#game #players player.ghost button[data=perish]
{
  display: none;
}

/* Perish button. */
section#game player button[data=perish] {
  color: #111111;
  background: linear-gradient(to right, #111111 50%, #cfcfcf 50%) bottom right;
  background-size: 200% 100%;
  opacity: 0.7;
  position: absolute;
  bottom: 8px;
  right: 8px;
  transition:
      background-position 0s,
      color               0s;
  z-index: 10;
}

section#game player button[data=perish]:active {
  background-position: bottom left;
  color: #cfcfcf;
  transition:
      background-position 0.75s linear,
      color               0.75s linear;
}

section#game player.out button[data=perish],
section#game player.ghost button[data=perish]
{
  visibility: hidden;
}

/* Cards. */
section#game player card {
  box-shadow: 0 0 7px black;
  position: relative;
  z-index: 1;
}

section#game player card:not(:hover) .peek,
section#game player card[face-up] .peek
{
  display: none;
}
section#game player card .peek {
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
}

/* Cards' layout. */
section#game player {
  position: relative;
}
section#game player .hand {
  display: inline-block;
  margin-bottom: 88px;
}
section#game player .hand > card:hover {
  z-index: 5 !important;
}
section#game player .hand > card.char {
  margin-top: 12px;
  z-index: 2;
}
section#game player .hand > card.role {
  left: 38px;
  position: absolute;
  top: 50px;
  z-index: 1;
}
section#game player.ghost .hand > card.role {
  z-index: 3;
}
section#game player.out .hand > card.role {
  transform: rotate(90deg);
  z-index: 3;
}

/* Health and Arrows common. */
section#game player .health,
section#game player .arrows
{
  display: inline-block;
  margin-left: 12px;
  position: relative;
  width: 90px;
  height: 300px;
  z-index: 1;
}

section#game player .health button,
section#game player .arrows button
{
  position: absolute;
  top: 26px;
  width: 38px;
}

/* Health. */
section#game player .health .bullet {
  display: inline-block;
  position: absolute;
  visibility: hidden;
}
section#game player .health .bullet1 {
  background: url(bullets-1.png);
  height: 60px;
  margin: 0 15px;
  width: 60px;
}
section#game player .health .bullet3 {
  background: url(bullets-3.png);
  height: 80px;
  margin: 0 5px;
  width: 80px;
}

/* Arrows. */
section#game .arrow {
  background: url(arrow.png);
  height: 32px;
  position: absolute;
  visibility: hidden;
  width: 90px;
}

/***** Shared area. *****/

section#game #shared {
  display: flex;
  flex-direction: row;
  min-height: 100px;
}
section#game #shared .arrows {
  height: 100px;
  position: relative;
  width: 270px;
}
section#game #shared .arrows .arrow {
  top: 36px;
}

section#game #dice table {
  background: transparent;
  margin: 10px 0;
}
section#game #dice th,
section#game #dice td
{
  border: none;
  height: 50px;
  margin: 0;
  padding: 0 3px;
}
section#game #dice td[rowspan] {
  height: 100px;
  vertical-align: top;
}
section#game.my-turn #dice td[rowspan] {
  cursor: pointer;
}
section#game.my-turn #dice button {
  visibility: visible;
  margin-left: 20px;
  width: 70px;
}

section#game #dice td[rowspan].reroll die {
  margin-top: 48px;
}