body {
  background: #19061e url(/static/apk/assets/background.png);
  background-size: cover;
  color: white;
  font-family: sans-serif;
  height: 100%;
  margin: 20px 0;
  min-height: 90%;
  padding: 0;
  width: 100%;
}

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

big {
  font-size: 1.8rem;
  font-weight: bold;
}

button#open-settings {
  font-size: 30px;
  height: auto;
  padding: 4px 8px;
  position: absolute;
  right: 8px;
  top: 8px;
}

/* Messages. */
#messages {
  bottom: -16px;
  margin: 1ex;
  position: fixed;
  right: 0;
  max-width: 66%;
  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(#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: 10vh auto auto auto;
  width: 519px;
}

section#entry button {
  width: 100%;
}

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

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

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

section#game card, section#game card-back {
  margin: 20px;
}

section#game .players img.token {
  height: 60px;
  position: absolute;
  width: 60px;
  z-index: 5;
}

section#game .timer {
  margin: 10px 0;
}

/* Game subsections */

section#game:not(.lobby) .in-lobby,
section#game:not(.pick-word) .in-pick-word,
section#game:not(.wait-word) .in-wait-word,
section#game:not(.see-magic-word) .in-see-magic-word,
section#game:not(.daytime) .in-daytime,
section#game:not(.daytime-mayor) .in-daytime-mayor,
section#game:not(.vote-for-seer) .in-vote-for-seer,
section#game:not(.vote-for-wolf) .in-vote-for-wolf,
section#game:not(.finished) .in-finished
{
  display: none;
}

/* Lobby */

section#game.lobby .in-lobby button {
  width: 200px;
}

section#game #settings {
  display: none;
  left: 0;
  margin: 60px auto;
  position: absolute;
  right: 0;
  text-align: left;
  top: 0;
  width: 800px;
  z-index: 99;
}
section#game #settings .container {
  margin-bottom: 20px;
}
section#game #settings .wordlists {
  width: auto;  /* based on the <col> settings */
}
section#game #settings .switch {
  margin: 0;
}
section#game #settings .timer {
  text-align: center;
}
section#game #settings .timer label {
  margin: 0 10px;
  padding: 0 20px;
}

/* Picking a word */

section#game .in-pick-word ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
section#game .in-pick-word li {
  margin: 20px;
}
section#game .in-pick-word button {
  height: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Daytime/questions phase; mayor specific */

section#game .in-daytime-mayor ul.answers {
  display: table;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  width: 100%;
}
section#game .in-daytime-mayor ul.answers:not(.enabled) {
  opacity: 0.4;
}
section#game .in-daytime-mayor ul.answers li {
  display: table-cell;
  position: relative;
}

section#game .in-daytime-mayor ul.answers .counter {
  bottom: -1.5em;
  position: absolute;
}

section#game .in-daytime-mayor ul.answers li[data=maybe] .counter {
  left: 0;
  width: 100%;
}

section#game .in-daytime-mayor ul.answers li[data=yes] .counter {
  left: 0;
  width: 200%;
}

/* Daytime/questions phase; all villagers */

section#game .in-daytime form#ask {
  display: flex;
  margin: auto;
  max-width: 500px;
}
section#game .in-daytime form#ask input {
  flex-grow: 1;
  margin-right: 8px;
}

section#game .in-daytime > * {
  margin: 15px 0;
}

section#game .in-daytime .q-and-a {
  background-color: #eaeaea;
  border: 1px solid #7e7e7e;
  border-radius: 0.4rem;
  color: #404040;
  list-style: none;
  padding: 0;
}
section#game .in-daytime .q-and-a li + li {
  border-top: 1px solid #aeaeae;
}
section#game .in-daytime .q-and-a li {
  display: flex;
  align-items: center;
}
section#game .in-daytime .q-and-a li * {
  padding: 6px;
  text-align: left;
}
section#game .in-daytime .q-and-a li span + span {
  flex-grow: 1;
  padding-left: 12px;
}
section#game .in-daytime .q-and-a li img {
  height: 60px;
  width: 60px;
}

/* Voting phases. */

section#game .reveal-magic-word {
  display: none;
}
section#game.vote-for-seer .reveal-magic-word,
section#game.vote-for-wolf .reveal-magic-word,
section#game.finished .reveal-magic-word
{
  display: block;
  margin: auto;
  width: 30em;
}

section#game.vote-for-seer .players.need-vote card.mayor:not(.me),
section#game.vote-for-seer .players.need-vote card-back
{
  cursor: pointer;
}

section#game.vote-for-wolf .players.need-vote card.mayor:not(.me),
section#game.vote-for-wolf .players.need-vote card-back
{
  cursor: pointer;
}


section#game .your-vote,
section#game .wait-vote
{
  display: none;
}

/* Round finished. */

section#game.finished .mayor-identity {
  display: none;
}