/* Monopoly SCSS */
/* Created by Ceri Woolway beginning October 2020 */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap");
#about-close,
.property-portfolio-title,
.full-portfolio-item,
#testing-close,
#bottom-bar form *,
#music *:not([disabled="true"]),
.player-summary-header .player-token-icon {
  cursor: pointer; }

/* @font-face kit by Fonts2u (https://fonts2u.com) */
@font-face {
  font-family: "Kabel-Heavy";
  src: url("fonts/Kabel-Heavy.eot?") format("eot"), url("fonts/Kabel-Heavy.woff") format("woff"), url("fonts/Kabel-Heavy.ttf") format("truetype"), url("fonts/Kabel-Heavy.svg#Kabel-Heavy") format("svg");
  font-weight: normal;
  font-style: normal; }

body {
  font-family: 'Kabel-Heavy', Poppins, sans-serif;
  font-size: 24px;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  background: #d5e8d4;
  overflow-x: hidden;
  box-sizing: border-box; }

main {
  padding: 15px;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  min-height: calc(100vh - 45px);
  display: grid;
  grid-template-columns: 275px 1fr min-content;
  grid-template-rows: 160px 1fr;
  gap: 20px 20px;
  grid-template-areas: "bank centre-panel right-panel"
 "feed centre-panel right-panel";
  align-items: start; }

@media (max-width: 1400px) {
  main {
    grid-template-columns: 225px 1fr;
    grid-template-rows: 112px 1fr auto;
    grid-template-areas: "bank centre-panel"
 "feed centre-panel"
 "right-panel right-panel"; } }

@media (max-width: 925px) {
  main {
    grid-template-columns: 215px 1fr;
    grid-template-rows: 112px min-content min-content;
    grid-template-areas: "bank feed"
 "centre-panel centre-panel"
 "right-panel right-panel"; } }

@media (max-width: 550px) {
  main {
    grid-template-columns: auto;
    grid-template-rows: min-content min-content 193px min-content;
    grid-template-areas: "centre-panel"
 "right-panel"
 "feed"
 "bank"; } }

main > div {
  min-height: 100%; }

button {
  padding: 10px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  border: none;
  font-weight: bold;
  font-family: 'Kabel-Heavy', sans-serif;
  font-size: 0.6em;
  cursor: pointer;
  border: none;
  border-radius: 0;
  transition: background-color 0.3s; }
  button:hover {
    background-color: #222; }

*:focus {
  outline: none; }

/* width */
::-webkit-scrollbar {
  width: 10px; }

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; }

/* Handle */
::-webkit-scrollbar-thumb {
  background: #d5e8d4; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b5d6b3; }

.smallText {
  font-size: 0.7em; }

[best-token-colour="light"] {
  color: #fff; }

/* BOTTOM BAR ----------------------------------------------------------------*/
#bottom-bar {
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 99; }
  #bottom-bar > *:not(#testing-panel) {
    font-size: 18px;
    display: flex;
    align-items: center;
    margin: 0 5px; }
  #bottom-bar input[type="checkbox"] {
    position: relative; }
    #bottom-bar input[type="checkbox"]:before {
      content: '';
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      border: 1px solid #000;
      background: #fff; }
    #bottom-bar input[type="checkbox"][checked="true"]:before {
      background: #fff url("images/tick.svg") center no-repeat;
      background-size: contain; }
  #bottom-bar > form label {
    padding-left: 10px; }

#play-time {
  display: flex;
  align-items: center;
  min-width: 200px;
  padding: 5px; }
  #play-time * {
    margin-right: 6px; }

/* MUSIC ---------------------------------------------------------------------*/
#music input {
  margin-left: 10px; }

/* SAVE INDICATOR ------------------------------------------------------------*/
#save-block {
  background: #fff;
  position: relative; }
  #save-block > div,
  #save-block button {
    padding: 4px 10px;
    transition: opacity 0.3s; }

#save-indicator {
  display: flex;
  align-items: center;
  width: auto;
  opacity: 0;
  z-index: 101;
  pointer-events: none; }
  #save-indicator img {
    margin-right: 10px;
    animation: saveAnimation 1.5s linear infinite; }

@keyframes saveAnimation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

#save-button {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  font-size: 18px;
  background: #fff;
  color: #000;
  transition: 0.3s;
  display: flex;
  align-items: center; }
  #save-button img {
    margin-right: 10px; }
  #save-button:hover {
    background-color: #eee; }

/* ABOUT -------------------------------------------------------------------- */
#about-link {
  padding: 5px 40px 5px 10px;
  background: #000 url("images/about/question-mark.svg") calc(100% - 5px) center no-repeat;
  background-size: 25px;
  color: #fff;
  font-size: 18px;
  cursor: pointer; }

#about {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  background: #d5e8d4;
  color: #000;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  transition: 0.3s;
  overflow-y: scroll; }
  #about > div {
    padding: 30px;
    max-width: 500px; }

#about-close {
  width: 35px;
  height: 35px;
  top: 10px;
  right: 10px;
  position: absolute; }

body[about-panel="true"] #about {
  opacity: 1;
  pointer-events: all; }

body[about-panel="true"] {
  height: 100vh;
  overflow: hidden; }

body:not([about-panel="true"]) #about {
  opacity: 0;
  pointer-events: none; }

#about a {
  color: #db0926;
  text-decoration: none;
  transition: 0.2s; }

#about a:hover {
  color: #aa071e; }

.contact-links a {
  min-height: 40px;
  display: flex;
  align-items: center;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 32px;
  padding-left: 40px; }

/* PLAYER CREATOR ----------------------------------------------------------- */
#new-player-overlay {
  background: #d5e8d4 url("images/city.svg") center bottom no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 30px;
  flex-direction: column; }

#new-player-overlay h1,
.new-game-dice-roll h2 {
  background: #db0926;
  color: #fff;
  padding: 10px 20px;
  border: 10px solid #fff;
  text-shadow: 3px 3px 0 black;
  width: 650px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 -10px 20px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  float: none;
  margin: 0 auto 20px; }

#begin-game,
.new-game-dice-roll button {
  background: #db0926;
  margin-top: 20px;
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: 0.8em;
  transition: 0.2s; }
  #begin-game:hover,
  .new-game-dice-roll button:hover {
    background: #c30822; }

#player-creator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: rgba(213, 232, 212, 0.9);
  border-radius: 10px; }
  #player-creator > div {
    animation: zoomIn 0.5s both; }
  #player-creator > div:nth-child(2) {
    animation-delay: 0.2s; }
  #player-creator > div:last-child.add-player-button {
    animation-delay: 0.4s; }

.player-creation-panel {
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  margin: 10px;
  min-width: 200px;
  animation: zoomIn 0.5s both;
  position: relative;
  z-index: 2; }
  .player-creation-panel h2 {
    font-size: 1em;
    margin-bottom: 10px; }
  .player-creation-panel input[type="text"] {
    text-align: center;
    border: none;
    border-bottom: 1px solid #000;
    padding: 10px 0; }
  .player-creation-panel ::placeholder {
    font-style: italic; }

.add-player-button {
  background: #b5d6b3;
  border-radius: 10px;
  align-self: stretch;
  min-width: 150px;
  padding: 20px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #60875E;
  animation: zoomIn 0.5s both; }
  .add-player-button img {
    margin-top: 15px;
    width: 35px; }

.player-creation-panel input[type="color"] {
  width: 25px;
  height: 29px;
  border: none;
  position: absolute;
  left: calc(50% - 36px);
  bottom: -7px;
  background: none;
  padding: 0; }
  .player-creation-panel input[type="color"]:after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("images/paintbrush.svg") center no-repeat;
    background-size: 70%;
    position: absolute; }
  .player-creation-panel input[type="color"][best-token-colour="light"]:after {
    background-image: url("images/paintbrush-light.svg"); }

.flyover {
  width: 55px;
  height: 55px;
  background: url("images/plane.svg") center no-repeat;
  background-size: contain;
  animation-name: flyoverAnimationLeftToRight;
  animation-duration: 45s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  position: absolute;
  bottom: 25vh; }

@keyframes flyoverAnimationLeftToRight {
  from {
    left: -100px; }
  to {
    left: 5000px; } }

@keyframes flyoverAnimationRightToLeft {
  from {
    right: -100px; }
  to {
    right: 5000px; } }

#new-player-overlay .flyover:nth-child(6n-5) {
  background-image: url("images/plane-2.svg");
  animation-name: flyoverAnimationRightToLeft;
  animation-duration: 60s;
  animation-delay: 2s;
  width: 50px;
  bottom: 30vh; }

#new-player-overlay .flyover:nth-child(6n-4) {
  background-image: url("images/helicopter.svg");
  animation-duration: 75s;
  animation-delay: 4s;
  width: 30px;
  bottom: 33vh; }

#new-player-overlay .flyover:nth-child(6n-3) {
  background-image: url("images/plane-2.svg");
  width: 30px;
  bottom: 40vh;
  animation-name: flyoverAnimationRightToLeft;
  animation-delay: 20s;
  animation-duration: 50s; }

#new-player-overlay .flyover:nth-child(6n-2) {
  animation-delay: 30s; }

#new-player-overlay .flyover:nth-child(6n) {
  background-image: url("images/plane-2.svg");
  animation-name: flyoverAnimationRightToLeft;
  animation-delay: 30s;
  animation-duration: 60s;
  width: 40px;
  bottom: 45vh; }

/* TOKEN SELECTOR ----------------------------------------------------------- */
.token-selector {
  position: relative;
  margin: 15px 0; }

.available-token-choices {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
  background: #dbdbdb;
  border-radius: 10px;
  position: absolute;
  top: calc(100% + 10px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
  .available-token-choices:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 15px 15px;
    border-color: transparent transparent #dbdbdb transparent;
    position: absolute;
    top: -15px;
    left: calc(50% - 15px); }

.token-option,
.token-selector-chosen-indicator {
  width: 70px;
  height: 70px; }

.token-selector-chosen-indicator {
  float: none;
  margin: 0 auto;
  position: relative;
  border: 1px solid #dbdbdb;
  border-radius: 50%;
  background-size: 50px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer; }
  .token-selector-chosen-indicator:after {
    content: '';
    width: 25px;
    height: 25px;
    background: #dbdbdb url("images/pen.svg") center no-repeat;
    background-size: 15px;
    border-radius: 50%;
    position: absolute;
    right: -6px;
    bottom: -6px;
    transition: 0.2s; }
  .token-selector-chosen-indicator:hover:after {
    background-color: #b5b5b5; }

.available-token-choices .token-option {
  width: 40px;
  height: 40px;
  margin: 4px;
  border: 1px solid transparent;
  border-radius: 50%;
  background-size: 35px;
  background-position: center;
  background-repeat: no-repeat; }

.available-token-choices .token-option:hover {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }

.player-token-icon[token="dog"],
.saved-game-summary .token[token="dog"],
.bankruptcy-title .token[token="dog"],
.options-panel-owner .token[token="dog"],
.token-option-dog,
.token-selector-chosen-indicator[chosentoken="dog"] {
  background-image: url("images/tokens/dog.svg"); }

.player-token-icon[token="dog"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="dog"],
.saved-game-summary [best-token-colour="light"] .token[token="dog"],
.token-selector-chosen-indicator[chosentoken="dog"][best-token-colour="light"] {
  background-image: url("images/tokens/dog-light.svg"); }

.player-token-icon[token="iron"],
.saved-game-summary .token[token="iron"],
.bankruptcy-title .token[token="iron"],
.options-panel-owner .token[token="iron"],
.token-option-iron,
.token-selector-chosen-indicator[chosentoken="iron"] {
  background-image: url("images/tokens/iron.svg"); }

.player-token-icon[token="iron"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="iron"],
.saved-game-summary [best-token-colour="light"] .token[token="iron"],
.token-selector-chosen-indicator[chosentoken="iron"][best-token-colour="light"] {
  background-image: url("images/tokens/iron-light.svg"); }

.player-token-icon[token="thimble"],
.saved-game-summary .token[token="thimble"],
.bankruptcy-title .token[token="thimble"],
.options-panel-owner .token[token="thimble"],
.token-option-thimble,
.token-selector-chosen-indicator[chosentoken="thimble"] {
  background-image: url("images/tokens/thimble.svg"); }

.player-token-icon[token="thimble"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="thimble"],
.saved-game-summary [best-token-colour="light"] .token[token="thimble"],
.token-selector-chosen-indicator[chosentoken="thimble"][best-token-colour="light"] {
  background-image: url("images/tokens/thimble-light.svg"); }

.player-token-icon[token="car"],
.saved-game-summary .token[token="car"],
.bankruptcy-title .token[token="car"],
.options-panel-owner .token[token="car"],
.token-option-car,
.token-selector-chosen-indicator[chosentoken="car"] {
  background-image: url("images/tokens/car.svg"); }

.player-token-icon[token="car"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="car"],
.saved-game-summary [best-token-colour="light"] .token[token="car"],
.token-selector-chosen-indicator[chosentoken="car"][best-token-colour="light"] {
  background-image: url("images/tokens/car-light.svg"); }

.player-token-icon[token="battleship"],
.saved-game-summary .token[token="battleship"],
.bankruptcy-title .token[token="battleship"],
.options-panel-owner .token[token="battleship"],
.token-option-battleship,
.token-selector-chosen-indicator[chosentoken="battleship"] {
  background-image: url("images/tokens/battleship.svg"); }

.player-token-icon[token="battleship"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="battleship"],
.saved-game-summary [best-token-colour="light"] .token[token="battleship"],
.token-selector-chosen-indicator[chosentoken="battleship"][best-token-colour="light"] {
  background-image: url("images/tokens/battleship-light.svg"); }

.player-token-icon[token="hat"],
.saved-game-summary .token[token="hat"],
.bankruptcy-title .token[token="hat"],
.options-panel-owner .token[token="hat"],
.token-option-hat,
.token-selector-chosen-indicator[chosentoken="hat"] {
  background-image: url("images/tokens/hat.svg"); }

.player-token-icon[token="hat"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="hat"],
.saved-game-summary [best-token-colour="light"] .token[token="hat"],
.token-selector-chosen-indicator[chosentoken="hat"][best-token-colour="light"] {
  background-image: url("images/tokens/hat-light.svg"); }

.player-token-icon[token="penguin"],
.saved-game-summary .token[token="penguin"],
.bankruptcy-title .token[token="penguin"],
.options-panel-owner .token[token="penguin"],
.token-option-penguin,
.token-selector-chosen-indicator[chosentoken="penguin"] {
  background-image: url("images/tokens/penguin.svg"); }

.player-token-icon[token="penguin"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="penguin"],
.saved-game-summary [best-token-colour="light"] .token[token="penguin"],
.token-selector-chosen-indicator[chosentoken="penguin"][best-token-colour="light"] {
  background-image: url("images/tokens/penguin-light.svg"); }

.player-token-icon[token="dinosaur"],
.saved-game-summary .token[token="dinosaur"],
.bankruptcy-title .token[token="dinosaur"],
.options-panel-owner .token[token="dinosaur"],
.token-option-dinosaur,
.token-selector-chosen-indicator[chosentoken="dinosaur"] {
  background-image: url("images/tokens/dinosaur.svg"); }

.player-token-icon[token="dinosaur"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="dinosaur"],
.saved-game-summary [best-token-colour="light"] .token[token="dinosaur"],
.token-selector-chosen-indicator[chosentoken="dinosaur"][best-token-colour="light"] {
  background-image: url("images/tokens/dinosaur-light.svg"); }

.player-token-icon[token="cat"],
.saved-game-summary .token[token="cat"],
.bankruptcy-title .token[token="cat"],
.options-panel-owner .token[token="cat"],
.token-option-cat,
.token-selector-chosen-indicator[chosentoken="cat"] {
  background-image: url("images/tokens/cat.svg"); }

.player-token-icon[token="cat"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="cat"],
.saved-game-summary [best-token-colour="light"] .token[token="cat"],
.token-selector-chosen-indicator[chosentoken="cat"][best-token-colour="light"] {
  background-image: url("images/tokens/cat-light.svg"); }

.player-token-icon[token="ducky"],
.saved-game-summary .token[token="ducky"],
.bankruptcy-title .token[token="ducky"],
.options-panel-owner .token[token="ducky"],
.token-option-ducky,
.token-selector-chosen-indicator[chosentoken="ducky"] {
  background-image: url("images/tokens/ducky.svg"); }

.player-token-icon[token="ducky"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="ducky"],
.saved-game-summary [best-token-colour="light"] .token[token="ducky"],
.token-selector-chosen-indicator[chosentoken="ducky"][best-token-colour="light"] {
  background-image: url("images/tokens/ducky-light.svg"); }

.player-token-icon[token="thimble"],
.saved-game-summary .token[token="thimble"],
.bankruptcy-title .token[token="thimble"],
.options-panel-owner .token[token="thimble"],
.token-option-thimble,
.token-selector-chosen-indicator[chosentoken="thimble"] {
  background-image: url("images/tokens/thimble.svg"); }

.player-token-icon[token="thimble"][best-token-colour="light"],
.options-panel-owner[best-token-colour="light"] .token[token="thimble"],
.saved-game-summary [best-token-colour="light"] .token[token="thimble"],
.token-selector-chosen-indicator[chosentoken="thimble"][best-token-colour="light"] {
  background-image: url("images/tokens/thimble-light.svg"); }

/* NEW GAME DICE ROLL ------------------------------------------------------- */
.new-game-dice-roll {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 102;
  background: #d5e8d4 url("images/dice-screen-background.svg") right center no-repeat;
  background-size: auto 75vh;
  color: #000;
  padding: 30px;
  text-align: center;
  overflow: auto;
  transition: 0.5s; }
  .new-game-dice-roll > * {
    animation: fadeIn 0.5s linear both; }
  .new-game-dice-roll h2, .new-game-dice-roll h3 {
    text-transform: uppercase; }
  .new-game-dice-roll .winner-annoucement {
    font-size: 30px;
    margin: 20px 0;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center; }

.dice-roll-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .dice-roll-container > div {
    flex-basis: 250px; }

.new-player-dice-roll {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto 50px 50px auto;
  text-align: center;
  margin: 10px;
  transition: 0.3s; }
  .new-player-dice-roll img {
    max-width: 72px;
    grid-row: 1 / 1;
    grid-column: 1 / 5;
    float: none;
    margin: 0 auto 10px;
    border: 1px solid #dbdbdb;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 50%; }
  .new-player-dice-roll h3 {
    margin: 0 0 20px;
    font-size: 1em;
    grid-row: 2 / 2;
    grid-column: 1 / 5; }
  .new-player-dice-roll .dice-container {
    grid-row: 3 / 4;
    grid-column: 1 / 5;
    display: flex;
    align-items: center;
    justify-content: center; }
    .new-player-dice-roll .dice-container span:not(.dice) {
      padding: 0 10px; }
  .new-player-dice-roll .dice {
    display: inline-block; }
  .new-player-dice-roll .total {
    min-width: 40px;
    font-size: 1.7em;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 !important; }
  .new-player-dice-roll.losing-dice-roll {
    opacity: 0.15; }
  .new-player-dice-roll.winning-dice-roll {
    background: #0aa959;
    color: #fff; }

/* SAVED GAME SCREEN  ------------------------------------------------------- */
.saved-game-found {
  width: 100%; }
  .saved-game-found button {
    margin: 3px;
    min-width: 280px; }

.saved-game-summary {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }

.saved-game-summary > div {
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: min-content min-content min-content;
  gap: 0 20px;
  grid-template-areas: "token name"
 "token money"
 "token properties";
  text-align: left;
  margin: 3px;
  padding: 10px;
  flex-basis: 260px; }
  .saved-game-summary > div .token {
    grid-area: token;
    width: auto;
    height: auto;
    background-position: center; }
  .saved-game-summary > div > div:not(.name) {
    font-size: 18px; }
  .saved-game-summary > div .name {
    grid-area: name; }
  .saved-game-summary > div .money {
    grid-area: money; }
  .saved-game-summary > div .properties {
    grid-area: properties; }

button.load-saved-game {
  background-image: url("images/button-icons/save.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 50px; }

button.start-new-game {
  background-image: url("images/button-icons/start-new-game.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 50px; }

/* BOARD -------------------------------------------------------------------- */
#board-container {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: centre-panel; }

#board {
  border: 3px solid #000;
  grid-area: centre-panel;
  max-width: 896px;
  box-sizing: border-box; }

#board > div[area][name]:not(.token) {
  position: relative; }

.property,
.station,
.utility {
  cursor: pointer; }

#board > div[position] > div {
  pointer-events: none; }

#board > .property,
#board > .community-chest,
#board > .special,
#board > .station,
#board > .chance,
#board > .utility {
  text-align: center;
  font-size: 10px;
  min-height: 50px; }

#board div[name="long"] .property-nickname {
  display: none; }

#board div[name="short"] .property-name {
  display: none; }

#board[size="mini"] .property-price {
  display: none; }

#board[size="super-mini"] {
  width: 100%; }
  #board[size="super-mini"] .space {
    font-size: 12px; }
  #board[size="super-mini"] .property-price,
  #board[size="super-mini"] .property-name,
  #board[size="super-mini"] .space-label {
    display: none; }

#board:not([size="super-mini"]) > .tooltipped .tooltip-window {
  display: none; }

#board:not([size="super-mini"]) .property-initials {
  display: none; }

#board > div .property-name {
  max-width: 100%;
  overflow: hidden;
  padding: 2px; }

#board > div[position="0"] {
  grid-area: position-0; }

#board > div[position="1"] {
  grid-area: position-1; }

#board > div[position="2"] {
  grid-area: position-2; }

#board > div[position="3"] {
  grid-area: position-3; }

#board > div[position="4"] {
  grid-area: position-4; }

#board > div[position="5"] {
  grid-area: position-5; }

#board > div[position="6"] {
  grid-area: position-6; }

#board > div[position="7"] {
  grid-area: position-7; }

#board > div[position="8"] {
  grid-area: position-8; }

#board > div[position="9"] {
  grid-area: position-9; }

#board > div[position="10"] {
  grid-area: position-10; }

#board > div[position="11"] {
  grid-area: position-11; }

#board > div[position="12"] {
  grid-area: position-12; }

#board > div[position="13"] {
  grid-area: position-13; }

#board > div[position="14"] {
  grid-area: position-14; }

#board > div[position="15"] {
  grid-area: position-15; }

#board > div[position="16"] {
  grid-area: position-16; }

#board > div[position="17"] {
  grid-area: position-17; }

#board > div[position="18"] {
  grid-area: position-18; }

#board > div[position="19"] {
  grid-area: position-19; }

#board > div[position="20"] {
  grid-area: position-20; }

#board > div[position="21"] {
  grid-area: position-21; }

#board > div[position="22"] {
  grid-area: position-22; }

#board > div[position="23"] {
  grid-area: position-23; }

#board > div[position="24"] {
  grid-area: position-24; }

#board > div[position="25"] {
  grid-area: position-25; }

#board > div[position="26"] {
  grid-area: position-26; }

#board > div[position="27"] {
  grid-area: position-27; }

#board > div[position="28"] {
  grid-area: position-28; }

#board > div[position="29"] {
  grid-area: position-29; }

#board > div[position="30"] {
  grid-area: position-30; }

#board > div[position="31"] {
  grid-area: position-31; }

#board > div[position="32"] {
  grid-area: position-32; }

#board > div[position="33"] {
  grid-area: position-33; }

#board > div[position="34"] {
  grid-area: position-34; }

#board > div[position="35"] {
  grid-area: position-35; }

#board > div[position="36"] {
  grid-area: position-36; }

#board > div[position="37"] {
  grid-area: position-37; }

#board > div[position="38"] {
  grid-area: position-38; }

#board > div[position="39"] {
  grid-area: position-39; }

#board > div[position="40"] {
  grid-area: position-40; }

#board > div[position] {
  font-size: 10px;
  position: relative; }

#board {
  display: grid;
  grid-template-columns: 80px repeat(9, minmax(0, 1fr)) 80px;
  grid-template-rows: 80px repeat(9, minmax(0, 1fr)) 80px;
  gap: 3px 3px;
  background: #000;
  grid-template-areas: "position-20 position-21 position-22 position-23 position-24 position-25 position-26 position-27 position-28 position-29 position-30"
 "position-19 board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre position-31"
 "position-18 board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre position-32"
 "position-17 board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre position-33"
 "position-16 board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre position-34"
 "position-15 board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre position-35"
 "position-14 board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre position-36"
 "position-13 board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre position-37"
 "position-12 board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre position-38"
 "position-11 board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre board-centre position-39"
 "position-10 position-9 position-8 position-7 position-6 position-5 position-4 position-3 position-2 position-1 position-0"; }

#board > div:not(.token) {
  background-color: #d5e8d4; }

@media (max-width: 1400px) {
  #board > div[position] {
    min-height: 40px; } }

@media (max-width: 925px) {
  #board {
    grid-template-columns: 55px repeat(9, minmax(0, 1fr)) 55px; }
  #board > div[position] {
    min-height: 30px; } }

/* Normal property -----------------------------------------------------------*/
.property {
  position: relative;
  padding-top: 20px !important;
  text-align: center; }
  .property:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    border-bottom: 3px solid #000; }

.property.brown:before {
  background: #824c26; }

.property.lightblue:before {
  background: #99d1f4; }

.property.pink:before {
  background: #d52788; }

.property.orange:before {
  background: #f1970b; }

.property.red:before {
  background: #db0926; }

.property.yellow:before {
  background: #e9ed38; }

.property.green:before {
  background: #0aa959; }

.property.darkblue:before {
  background: #3e64ad; }

.property-price {
  font-size: 14px;
  pointer-events: none; }

.row > div:not(.property) .property-house-display {
  display: none; }

.property-house-display {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  display: flex;
  height: 25px;
  z-index: 10; }
  .property-house-display > div {
    background: url("images/house-on-property.svg") center no-repeat;
    background-size: contain;
    height: 20px;
    width: 20px;
    transform: scale(0);
    transition: 0.3s; }
  .property-house-display > div:last-child {
    position: absolute;
    top: 0;
    left: calc(50% - 10px);
    background-image: url("images/hotel-on-property.svg"); }

#board > div.property[houses="1"] .property-house-display > div:nth-child(-n+1) {
  transform: scale(1); }

#board > div.property[houses="2"] .property-house-display > div:nth-child(-n+2) {
  transform: scale(1); }

#board > div.property[houses="3"] .property-house-display > div:nth-child(-n+3) {
  transform: scale(1); }

#board > div.property[houses="4"] .property-house-display > div:nth-child(-n+4) {
  transform: scale(1); }

#board > div.property[houses="5"] .property-house-display > div:nth-child(-n+4) {
  transform: scale(0); }

#board > div.property[houses="5"] .property-house-display > div:nth-child(n+5) {
  transform: scale(1); }

/* Property ownership tags ---------------------------------------------------*/
.ownership-tag {
  position: absolute;
  bottom: -12%;
  left: 0;
  right: 0;
  pointer-events: none;
  display: none; }

.ownership-tag svg {
  width: 20px; }

.ownership-tag polygon {
  stroke: #000;
  stroke-width: 3px;
  transition: 0.3s; }

#board > div > .ownership-tag {
  top: unset;
  bottom: -12%;
  transform: rotate(180deg); }

#board > div[area="north"] .ownership-tag {
  transform: rotate(180deg); }

#board > div[area="west"] .ownership-tag {
  transform: rotate(-90deg) translateY(14px);
  transform-origin: left bottom;
  bottom: 0; }

#board > div[area="east"] .ownership-tag {
  transform: rotate(90deg) translateY(14px);
  transform-origin: right bottom;
  bottom: 0; }

#board > div[area="south"] .ownership-tag {
  transform: rotate(180deg); }

/* Mortgaged property --------------------------------------------------------*/
#board > .space,
.full-portfolio-item {
  position: relative; }
  #board > .space:after,
  .full-portfolio-item:after {
    content: '';
    width: 25px;
    height: 25px;
    background: url("images/mortgaged.svg") center no-repeat;
    background-size: contain;
    position: absolute;
    top: -7px;
    left: calc(50% - 10px);
    transition: 0.3s;
    transform: scale(0);
    pointer-events: none;
    z-index: 2; }

.full-portfolio-item[mortgaged="true"]:after,
#board > div[mortgaged="true"]:after {
  transform: scale(1); }

.full-portfolio-item[mortgaged="true"]:after {
  left: 0; }

/* Special property ----------------------------------------------------------*/
/*.community-chest{
    background: $lightgreen url('images/community-chest.svg') center no-repeat;
    background-position: center bottom;
    background-size: 50px;
}

.station{
    background: $lightgreen url('images/station.svg') center calc(100% - 2px) no-repeat;
    background-size: 40px;
}

.chance{
    background: $lightgreen url('images/chance.svg') center calc(100% - 6px) no-repeat;
    background-size: 50px;
}*/
/*#board > div img{
    max-width: 25px;
    max-height: 100%;
    margin: 2px 0;
    //display: none;
}

#board > div.card img{
    max-width: 40px;
} 

#board > div.station img{
    max-width: 30px;
}

#board > .space{
    &.card,
    &.station,
    &.utility{

        & > div{
            padding: 3px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }

    }
}*/
#board > .space.card > div, #board > .space.station > div, #board > .space.utility > div, #board > .space.tax > div {
  padding: 4px;
  box-sizing: border-box; }

.space-image {
  width: 100%; }

#income-tax .space-image {
  background-size: 20px !important; }

#board > div.card > div,
#board > div.utility > div,
#board > div.station > div,
#board > div.tax > div {
  display: grid; }

#board:not([size="super-mini"]) > div.card > div {
  grid-template-rows: min-content auto;
  gap: 3px 0; }

#board[size="super-mini"] .card .property-initials {
  display: none; }

@media (max-width: 450px) {
  .property-initials {
    display: none; } }

#board:not([size="super-mini"]) > div.utility > div,
#board:not([size="super-mini"]) > div.station > div,
#board:not([size="super-mini"]) > div.tax > div {
  grid-template-rows: min-content auto min-content;
  gap: 3px 0; }

#board[size="super-mini"] .space.tax > div {
  grid-template-rows: min-content auto; }

#go {
  background: #d5e8d4 url("images/go.svg") center no-repeat;
  background-size: contain;
  color: transparent; }

#free-parking {
  background: #d5e8d4 url("images/free-parking.svg") center no-repeat;
  background-size: contain;
  color: transparent; }

#go-to-jail {
  background: #d5e8d4 url("images/go-to-jail.svg") center no-repeat;
  background-size: contain;
  color: transparent; }

/*#electric-company{
    background: $lightgreen url('images/electric-company.svg') center 60% no-repeat;
    background-size: 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#water-works{
    background: $lightgreen url('images/water-works.svg') center 60% no-repeat;
    background-size: 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#super-tax{
    background: $lightgreen url('images/super-tax.svg') center no-repeat;
    background-size: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#income-tax{
    background: $lightgreen url('images/income-tax.svg') center no-repeat;
    background-size: 22%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}*/
/* Currency symbol -----------------------------------------------------------*/
.currencySymbol {
  display: inline-block;
  font-size: 80%;
  transform: rotate(180deg) translateY(5%);
  margin-top: -10%; }

.money-text {
  display: inline-block; }

/* Board centre (turn indicator and dice -------------------------------------*/
#board-centre {
  grid-area: board-centre;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  #board-centre > div {
    border: 3px solid #000;
    padding: 10px; }

#turn-indicator {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center; }
  #turn-indicator .player-token-icon {
    width: 45px;
    height: 45px;
    background-size: contain;
    background-position: center center;
    margin-right: 5px; }

.dice {
  width: 35px;
  height: 35px;
  background: #fff;
  border: 3px solid #000;
  border-radius: 5px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat; }

.dice-roll-1,
.dice[roll="1"] {
  background-image: url("images/dice-1.svg"); }

.dice-roll-2,
.dice[roll="2"] {
  background-image: url("images/dice-2.svg"); }

.dice-roll-3,
.dice[roll="3"] {
  background-image: url("images/dice-3.svg"); }

.dice-roll-4,
.dice[roll="4"] {
  background-image: url("images/dice-4.svg"); }

.dice-roll-5,
.dice[roll="5"] {
  background-image: url("images/dice-5.svg"); }

.dice-roll-6,
.dice[roll="6"] {
  background-image: url("images/dice-6.svg"); }

#doubles {
  font-size: 0.85em;
  grid-area: doubles-indicator;
  text-transform: uppercase; }

#dice-roll {
  display: grid;
  grid-template-columns: 35px 1fr 35px 1fr 1fr;
  grid-template-rows: min-content min-content;
  gap: 0px 0px;
  grid-template-areas: "dice-1 plus dice-2 equals result"
 "doubles-indicator doubles-indicator doubles-indicator doubles-indicator doubles-indicator";
  padding-top: 20px;
  gap: 15px 0px; }
  #dice-roll span:not(#doubles) {
    margin: 7px; }
  #dice-roll #dice-total {
    font-weight: bold;
    font-size: 1.2em; }

.double1 .dice {
  background-color: #e9ed38; }

.double2 .dice {
  background-color: #f1970b; }

.double3 .dice,
.failed-jail-roll .dice {
  background-color: #db0926; }

.successful-jail-roll .dice {
  background-color: #0aa959; }

/* Player tokens -------------------------------------------------------------*/
#board > .token {
  transform: translate(-24px, -14px);
  width: 0;
  height: 0; }

.token {
  width: 46px;
  height: 28px;
  z-index: 2;
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: 7px -2px;
  pointer-events: none; }
  .token:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 28px;
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: 7px -2px; }
  .token .token-background {
    content: '';
    width: 46px;
    height: 28px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    mix-blend-mode: color;
    border-radius: 25px;
    border: 2px solid #000; }

.token.dog:before {
  background-image: url("images/tokens/dog.svg"); }

.token.dog[best-token-colour="light"]:before {
  background-image: url("images/tokens/dog-light.svg"); }

.token.iron:before {
  background-image: url("images/tokens/iron.svg"); }

.token.iron[best-token-colour="light"]:before {
  background-image: url("images/tokens/iron-light.svg"); }

.token.thimble:before {
  background-image: url("images/tokens/thimble.svg"); }

.token.thimble[best-token-colour="light"]:before {
  background-image: url("images/tokens/thimble-light.svg"); }

.token.car:before {
  background-image: url("images/tokens/car.svg"); }

.token.car[best-token-colour="light"]:before {
  background-image: url("images/tokens/car-light.svg"); }

.token.battleship:before {
  background-image: url("images/tokens/battleship.svg"); }

.token.battleship[best-token-colour="light"]:before {
  background-image: url("images/tokens/battleship-light.svg"); }

.token.hat:before {
  background-image: url("images/tokens/hat.svg"); }

.token.hat[best-token-colour="light"]:before {
  background-image: url("images/tokens/hat-light.svg"); }

.token.penguin:before {
  background-image: url("images/tokens/penguin.svg"); }

.token.penguin[best-token-colour="light"]:before {
  background-image: url("images/tokens/penguin-light.svg"); }

.token.dinosaur:before {
  background-image: url("images/tokens/dinosaur.svg"); }

.token.dinosaur[best-token-colour="light"]:before {
  background-image: url("images/tokens/dinosaur-light.svg"); }

.token.cat:before {
  background-image: url("images/tokens/cat.svg"); }

.token.cat[best-token-colour="light"]:before {
  background-image: url("images/tokens/cat-light.svg"); }

.token.ducky:before {
  background-image: url("images/tokens/ducky.svg"); }

.token.ducky[best-token-colour="light"]:before {
  background-image: url("images/tokens/ducky-light.svg"); }

.token.thimble:before {
  background-image: url("images/tokens/thimble.svg"); }

.token.thimble[best-token-colour="light"]:before {
  background-image: url("images/tokens/thimble-light.svg"); }

#board > .token[position="10"][jail="false"] {
  position: relative;
  z-index: 3; }

/* Popup ---------------------------------------------------------------------*/
#popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100; }

#popup-inner {
  background: #fff;
  border: 3px solid #000;
  width: 900px;
  max-width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  max-height: calc(100vh - 30px);
  overflow-y: auto; }

#popup-message {
  padding: 20px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }

#popup-close {
  width: 35px;
  position: absolute;
  top: 1px;
  right: 3px;
  z-index: 2;
  cursor: pointer; }

body:not(.popup-open) #popup {
  display: none; }

body[close-popup="false"] #popup-close {
  display: none; }

#popup-title {
  background: #000;
  color: #fff;
  font-size: 26px;
  text-transform: uppercase;
  padding: 5px;
  letter-spacing: 1px; }

/* Warning -------------------------------------------------------------------*/
#warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 102;
  text-align: center;
  animation: warningAnimation 4s infinite;
  transition: 0.2s; }
  #warning button + button {
    margin-left: 5px; }

@keyframes warningAnimation {
  0% {
    background: rgba(219, 9, 38, 0); }
  50% {
    background: rgba(219, 9, 38, 0.8); }
  100% {
    background: rgba(219, 9, 38, 0); } }

#warning-inner {
  width: 500px;
  border: 3px solid #db0926;
  background: #fff;
  position: relative;
  box-shadow: 0 0 20px #000; }

#warning-close {
  width: 35px;
  position: absolute;
  top: 4px;
  right: 2px;
  z-index: 2; }

#warning-icon {
  background: #db0926;
  padding: 10px; }
  #warning-icon img {
    width: 50px; }

#warning-title {
  background: #db0926;
  color: #fff;
  padding: 5px;
  font-size: 30px;
  text-transform: uppercase; }

#warning-message {
  padding: 20px;
  background: #db0926;
  color: #fff; }

body:not(.warning-open) #warning {
  display: none; }

/* Jail  ---------------------------------------------------------------------*/
#jail-overlay {
  pointer-events: none;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99; }
  #jail-overlay:before {
    background: rgba(0, 0, 255, 0.4);
    animation-delay: 0.5s; }
  #jail-overlay:after {
    background: rgba(255, 0, 0, 0.4); }
  #jail-overlay:before, #jail-overlay:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    animation-name: jailAnimation;
    animation-duration: 1.5s;
    animation-iteration-count: infinite; }

.bars {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3; }

.bars:first-child {
  background: url("images/jail-bars-1.png");
  animation: slideDown 0.6s both; }

.bars:last-child {
  background: url("images/jail-bars-2.png");
  animation: slideUp 0.6s both; }

.jailAnimation #jail-overlay {
  display: block;
  animation: fadeOut 0.7s;
  animation-delay: 2.3s; }

.jailAnimation #token {
  animation: jailTokenAnimation 1s; }

@keyframes jailAnimation {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes jailTokenAnimation {
  from {
    transform: scale(3); }
  to {
    transform: scale(1); } }

/* Player summary  -----------------------------------------------------------*/
#player-summary {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
  grid-area: right-panel;
  flex-wrap: wrap; }
  #player-summary h2 {
    margin: 0;
    font-size: 1em;
    text-transform: uppercase;
    max-width: 200px; }
  #player-summary > div {
    flex-shrink: 1;
    flex-basis: 200px;
    padding: 10px;
    min-width: 200px; }

@media (max-width: 1400px) {
  #player-summary {
    flex-direction: row; } }

.player-summary-header {
  display: grid;
  grid-template-columns: 35px auto;
  grid-template-rows: auto auto;
  text-align: left;
  grid-column-gap: 10px;
  border: 3px solid #000;
  padding: 5px 10px;
  overflow: hidden; }
  .player-summary-header .player-token-icon {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    grid-row: 1 / span 2;
    position: relative;
    height: 50px;
    background-size: contain;
    top: 50%;
    margin-top: -25px;
    position: relative; }
    .player-summary-header .player-token-icon:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: url("images/player-summary-jail-overlay.svg") center no-repeat;
      background-size: contain;
      background-position: 0 -50px;
      transition: 0.4s; }
  .player-summary-header[best-token-colour="light"] {
    color: #fff; }

#player-summary > div[inJail="true"] .player-token-icon:after {
  background-position: 0 0; }

.player-token-icon[token="dog"] {
  background-image: url("images/tokens/dog.svg"); }

[best-token-colour="light"] .player-token-icon[token="dog"] {
  background-image: url("images/tokens/dog-light.svg"); }

.player-token-icon[token="iron"] {
  background-image: url("images/tokens/iron.svg"); }

[best-token-colour="light"] .player-token-icon[token="iron"] {
  background-image: url("images/tokens/iron-light.svg"); }

.player-token-icon[token="thimble"] {
  background-image: url("images/tokens/thimble.svg"); }

[best-token-colour="light"] .player-token-icon[token="thimble"] {
  background-image: url("images/tokens/thimble-light.svg"); }

.player-token-icon[token="car"] {
  background-image: url("images/tokens/car.svg"); }

[best-token-colour="light"] .player-token-icon[token="car"] {
  background-image: url("images/tokens/car-light.svg"); }

.player-token-icon[token="battleship"] {
  background-image: url("images/tokens/battleship.svg"); }

[best-token-colour="light"] .player-token-icon[token="battleship"] {
  background-image: url("images/tokens/battleship-light.svg"); }

.player-token-icon[token="hat"] {
  background-image: url("images/tokens/hat.svg"); }

[best-token-colour="light"] .player-token-icon[token="hat"] {
  background-image: url("images/tokens/hat-light.svg"); }

.player-token-icon[token="penguin"] {
  background-image: url("images/tokens/penguin.svg"); }

[best-token-colour="light"] .player-token-icon[token="penguin"] {
  background-image: url("images/tokens/penguin-light.svg"); }

.player-token-icon[token="dinosaur"] {
  background-image: url("images/tokens/dinosaur.svg"); }

[best-token-colour="light"] .player-token-icon[token="dinosaur"] {
  background-image: url("images/tokens/dinosaur-light.svg"); }

.player-token-icon[token="cat"] {
  background-image: url("images/tokens/cat.svg"); }

[best-token-colour="light"] .player-token-icon[token="cat"] {
  background-image: url("images/tokens/cat-light.svg"); }

.player-token-icon[token="ducky"] {
  background-image: url("images/tokens/ducky.svg"); }

[best-token-colour="light"] .player-token-icon[token="ducky"] {
  background-image: url("images/tokens/ducky-light.svg"); }

.player-token-icon[token="thimble"] {
  background-image: url("images/tokens/thimble.svg"); }

[best-token-colour="light"] .player-token-icon[token="thimble"] {
  background-image: url("images/tokens/thimble-light.svg"); }

.good-change {
  animation: goodChangeAnimation 1s ease-in-out;
  transform-origin: left center; }

.bad-change {
  animation: badChangeAnimation 1s ease-in-out;
  transform-origin: left center; }

.spin-change {
  animation: spinAnimation 0.7s ease-in-out;
  transform-origin: center center; }

.property-portfolio-title {
  background: #000;
  color: white;
  text-transform: uppercase;
  font-size: 0.6em;
  display: block;
  padding: 5px; }

.property-portfolio {
  border: 3px solid #000;
  padding: 10px;
  background: #fff;
  min-height: 55px;
  box-sizing: border-box; }

.property-portfolio > .property-icon {
  cursor: pointer; }

.property-icon {
  width: 15px !important;
  height: 15px !important;
  border-radius: 50%;
  border: 2px solid #000;
  display: inline-block;
  margin: 2px;
  flex-basis: 15px;
  flex-shrink: 0; }

.property-icon.brown {
  background: #824c26; }

.property-icon.lightblue {
  background: #99d1f4; }

.property-icon.pink {
  background: #d52788; }

.property-icon.orange {
  background: #f1970b; }

.property-icon.red {
  background: #db0926; }

.property-icon.yellow {
  background: #e9ed38; }

.property-icon.green {
  background: #0aa959; }

.property-icon.darkblue {
  background: #3e64ad; }

.property-icon.train-station,
.property-icon.utility {
  border: none;
  border-radius: 0;
  background-size: contain !important; }

.property-icon.train-station {
  background: url("images/station.svg") center no-repeat; }

.property-icon.electric-company {
  background: url("images/electric-company.svg") center no-repeat; }

.property-icon.water-works {
  background: url("images/water-works.svg") center no-repeat; }

#board > #jail > div {
  background: #d5e8d4 url("images/jail.svg") right top no-repeat;
  background-size: contain;
  color: transparent;
  display: grid;
  grid-template-columns: 1fr 2.8fr;
  grid-template-rows: 2.8fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "just-visiting in-jail"
 "just-visiting ."; }

.in-jail {
  grid-area: in-jail; }

.just-visiting {
  grid-area: just-visiting; }

.player-cards {
  background: #fff;
  border: 3px solid #000;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  transition: height 0.4s; }

.player-cards[cards="false"] {
  border: none;
  height: 0; }

.player-card-icon {
  width: 25px;
  height: 25px;
  background: url("images/feed-icons/get-out-card.svg") center no-repeat;
  background-size: contain;
  margin: 10px 5px;
  transition: 0.2s; }

.player-card-icon.zoomOut {
  animation: zoomOut 1s both; }

.individual-player-summary {
  transition: 0.5s;
  max-height: 700px; }

/* Full portfolio view  ------------------------------------------------------*/
.full-portfolio {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%; }

.full-portfolio-item {
  display: flex;
  align-items: center;
  width: 360px;
  transition: 0.2s;
  flex-wrap: wrap;
  margin-bottom: 5px;
  padding: 5px; }
  .full-portfolio-item > div {
    margin: 0 0 0 10px; }
  .full-portfolio-item .portfolio-item-value {
    color: #999;
    white-space: nowrap;
    font-size: 0.8em;
    text-align: left;
    width: 100%;
    margin-left: 40px;
    grid-area: value; }
  .full-portfolio-item .property-name {
    flex-grow: 1;
    text-align: left; }

.full-portfolio-item .property-icon + div {
  margin-right: 10px; }

.full-portfolio-house,
.full-portfolio-hotel {
  width: 25px;
  height: 25px;
  background: url("images/house-icon.svg") center no-repeat;
  background-size: contain; }

.full-portfolio-hotel {
  background-image: url("images/hotel-icon.svg"); }

.full-portfolio .portfolio-divider {
  width: 100%;
  border-top: 1px solid #ebebeb;
  margin: 10px 0; }

/* Player action buttons  ----------------------------------------------------*/
.player-action-button {
  display: none; }

.current-player-summary .player-action-button {
  display: initial; }

body[dice-roll-available="false"] .roll-dice-button,
body[end-turn-available="false"] .end-turn-button {
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }

.roll-dice-button {
  background-image: url("images/button-icons/roll-dice.svg");
  background-size: auto 40px;
  background-position: center 10px;
  background-repeat: no-repeat;
  padding-top: 60px; }

.initiate-trade {
  background-image: url("images/button-icons/trade.svg");
  background-size: auto 40px;
  background-position: center 10px;
  background-repeat: no-repeat;
  padding-top: 60px; }

body[get-out-of-jail="true"] .initiate-trade {
  width: 100%;
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 50px;
  padding-top: 10px; }

.end-turn-button {
  width: 100%; }

body[get-out-of-jail="false"] .get-out-50-button,
body[get-out-of-jail="false"] .roll-doubles-for-jail,
body[get-out-of-jail="false"] .card-out-of-jail-button {
  display: none !important; }

.roll-doubles-for-jail,
.get-out-50-button {
  max-width: 50%;
  background-size: auto 40px;
  background-position: center 10px;
  background-repeat: no-repeat;
  padding-top: 60px;
  min-height: 140px;
  float: left; }

body[get-out-of-jail="true"] .current-player-summary .get-out-50-button,
body[get-out-of-jail="true"] .current-player-summary .roll-doubles-for-jail {
  display: initial !important; }

body[get-out-of-jail="true"] .current-player-summary .roll-dice-button {
  display: none; }

body[get-out-of-jail="true"][roll-doubles-for-jail="false"] .current-player-summary .roll-doubles-for-jail {
  pointer-events: none;
  display: initial;
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }

body[card-out-of-jail="false"] .card-out-of-jail-button {
  display: none; }

.get-out-50-button {
  background-image: url("images/button-icons/get-out-50.svg"); }

.roll-doubles-for-jail {
  background-image: url("images/button-icons/doubles.svg"); }

.card-out-of-jail-button {
  background-color: #0aa959;
  background-image: url("images/button-icons/get-out-card.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 50px; }

.get-out-50-button,
.roll-doubles-for-jail {
  background-color: #c40821; }

/* Property overview  --------------------------------------------------------*/
.property-overview {
  max-width: 294px;
  float: none;
  margin: 0 auto;
  padding: 10px 20px; }

.property-overview-title {
  margin-bottom: 20px; }

.property-overview-color .property-overview-title {
  margin-bottom: 0; }

.property-overview-title {
  font-weight: bold;
  text-transform: uppercase;
  font-family: Montserrat, sans-serif; }

.title-deed {
  font-size: 0.7em; }

.property-overview-color {
  padding: 20px;
  border: 2px solid #000;
  min-width: 250px; }

.property-overview .price {
  background: #000;
  color: #fff;
  padding: 5px; }

.property-overview-color.brown {
  background: #824c26; }

.property-overview-color.lightblue {
  background: #99d1f4; }

.property-overview-color.pink {
  background: #d52788; }

.property-overview-color.orange {
  background: #f1970b; }

.property-overview-color.red {
  background: #db0926; }

.property-overview-color.yellow {
  background: #e9ed38; }

.property-overview-color.green {
  background: #0aa959; }

.property-overview-color.darkblue {
  background: #3e64ad; }

.property-overview-house-icon {
  background: url("images/house-icon.svg") center no-repeat;
  background-size: contain;
  padding: 0 9px;
  color: #fff;
  display: inline-block;
  text-align: center;
  min-width: 14px; }

.property-overview table {
  float: none;
  margin: auto; }
  .property-overview table tr td:last-child {
    text-align: right;
    width: 80px; }
  .property-overview table tr td:first-child {
    text-align: left;
    min-width: 200px; }
  .property-overview table tr:last-child .property-overview-house-icon {
    background-image: url("images/hotel-icon.svg"); }

.back-button {
  width: 35px;
  height: 35px;
  background: url("images/back.svg") center no-repeat;
  background-size: contain;
  position: absolute;
  top: 54px;
  right: 10px; }

.rent-table,
.house-price-table {
  width: 100%;
  max-width: 300px; }

.rent-table tr:last-child .property-overview-house-icon {
  color: transparent; }

/* Utility and station property overviews --------- */
.card-icon {
  height: 110px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 20px; }
  .card-icon.card-icon-Electric-Company {
    background-image: url("images/electric-company.svg"); }
  .card-icon.card-icon-Water-Works {
    background-image: url("images/water-works.svg"); }
  .card-icon.card-icon-station {
    background-image: url("images/station.svg"); }

/* Property overview  --------------------------------------------------------*/
.colour-set-button {
  background-image: url("images/button-icons/manage-colour-set.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 50px; }

.house-building-panel .button-panel {
  display: flex;
  flex-direction: column; }
  .house-building-panel .button-panel button {
    width: 100%; }

.build-house-button {
  background-image: url("images/button-icons/build-house.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 50px; }

.sell-house-button {
  background-image: url("images/button-icons/sell-house.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 50px; }

body[build-hotel="false"] .house-visual-display[houses="4"] + .button-panel .build-house-button,
body[build-house="false"] .build-house-button,
.house-visual-display[houses="0"] + .button-panel .sell-house-button,
body[build-house="false"] .colour-set-button,
.disabled-button {
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }

body[mortgage-property="false"] .property-options .mortgage-button,
body[unmortgage-property="false"] .property-options .unmortgage-button {
  display: none; }

.property-options .buy-property {
  background-image: url("images/button-icons/buy-property.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 50px; }

.property-options .auction-property {
  background-image: url("images/button-icons/auction.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 50px; }

.mortgage-button,
.unmortgage-button {
  background-image: url("images/button-icons/mortgage.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 45px; }
  .mortgage-button .money-text,
  .unmortgage-button .money-text {
    font-size: 1.05em; }

.unmortgage-button {
  background-image: url("images/button-icons/unmortgage.svg"); }

.house-visual-display[houses="5"] + .button-panel {
  /* If we have the maximum number of buildings, this is the definitive rule.
       we do not care whether there are still hotels in the bank */ }
  .house-visual-display[houses="5"] + .button-panel .build-house-button {
    background-color: #ccc;
    color: #8f8f8f;
    pointer-events: none; }
  .house-visual-display[houses="5"] + .button-panel .sell-house-button .sell-house {
    display: none; }
  .house-visual-display[houses="5"] + .button-panel .build-house-button .max-buildings-reached {
    display: block !important; }
  .house-visual-display[houses="5"] + .button-panel .build-house-button span:not(.max-buildings-reached) {
    display: none !important; }

.house-visual-display:not([houses="5"]) + .button-panel .build-house-button .build-hotel,
.house-visual-display:not([houses="5"]) + .button-panel .sell-house-button .sell-hotel,
.house-visual-display:not([houses="5"]) + .button-panel .build-house-button .max-buildings-reached {
  display: none; }

.house-visual-display[houses="4"] + .button-panel .build-house-button .build-hotel {
  display: block; }

.house-visual-display[houses="4"] + .button-panel .build-house-button .build-house {
  display: none; }

.no-more-houses-in-bank,
.no-more-hotels-in-bank,
.not-enough-money {
  display: none; }

body[build-house="none-left"] .house-visual-display:not([houses="4"]) + .button-panel .build-house-button {
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }
  body[build-house="none-left"] .house-visual-display:not([houses="4"]) + .button-panel .build-house-button span:not(.no-more-houses-in-bank) {
    display: none; }
  body[build-house="none-left"] .house-visual-display:not([houses="4"]) + .button-panel .build-house-button .no-more-houses-in-bank {
    display: block; }

body[build-hotel="true"] .house-visual-display[houses="4"] + .button-panel .build-house-button span:not(.build-hotel) {
  display: none; }

body[build-hotel="true"] .house-visual-display[houses="4"] + .button-panel .build-house-button .build-hotel {
  display: block; }

body[build-hotel="none-left"] .house-visual-display[houses="4"] + .button-panel .build-house-button {
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }
  body[build-hotel="none-left"] .house-visual-display[houses="4"] + .button-panel .build-house-button span:not(.no-more-hotels-in-bank) {
    display: none; }
  body[build-hotel="none-left"] .house-visual-display[houses="4"] + .button-panel .build-house-button .no-more-hotels-in-bank {
    display: block; }

body[build-house="not-enough-money"] .build-house-button {
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }

body[build-house="not-enough-money"] .build-house-button span:not(.not-enough-money) {
  display: none !important; }

body[build-house="not-enough-money"] .not-enough-money {
  display: block; }

body[build-hotel="not-enough-money"] .build-hotel-button {
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }

body[build-hotel="not-enough-money"] .build-hotel-button span:not(.not-enough-money) {
  display: none !important; }

body[build-hotel="not-enough-money"] .not-enough-money {
  display: block; }

.house-visual-display {
  height: 35px;
  margin: 10px 0; }

.house-visual-display[houses="0"] {
  background: url("images/house-visual-display-0.svg") center no-repeat;
  background-size: contain; }

.house-visual-display[houses="1"] {
  background: url("images/house-visual-display-1.svg") center no-repeat;
  background-size: contain; }

.house-visual-display[houses="2"] {
  background: url("images/house-visual-display-2.svg") center no-repeat;
  background-size: contain; }

.house-visual-display[houses="3"] {
  background: url("images/house-visual-display-3.svg") center no-repeat;
  background-size: contain; }

.house-visual-display[houses="4"] {
  background: url("images/house-visual-display-4.svg") center no-repeat;
  background-size: contain; }

.house-visual-display[houses="5"] {
  background: url("images/house-visual-display-5.svg") center no-repeat;
  background-size: contain; }

.colour-set-overview {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap; }
  .colour-set-overview .property-overview-color {
    min-width: 170px;
    font-size: 14px; }
  .colour-set-overview .property-overview table tr td:first-child {
    min-width: 135px; }
  .colour-set-overview table {
    font-size: 80%; }

body[build-house="false"] .house-visual-display:not([houses="4"]) + .build-house-button {
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }

body[build-hotel="false"] .house-visual-display[houses="4"] + .build-house-button {
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }

/* Owner details  ------------------------------------------------------------*/
.options-panel-owner {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center; }

.options-panel-owner .token {
  position: relative;
  margin-bottom: 10px; }

.options-panel-owner[best-token-colour="light"] {
  color: #fff; }

.property-overview-options {
  background: #ececec;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto auto;
  grid-template-areas: "owner property-options"
 "owner message"
 "owner message";
  margin-top: 20px; }

.options-panel-owner {
  grid-area: owner;
  padding: 10px;
  border-right: 3px solid #fff; }

.property-overview-options.single-item {
  grid-template-columns: 100%; }
  .property-overview-options.single-item .options-panel-owner {
    border: none; }

.utility-message,
.station-message,
.mortgage-message {
  grid-area: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px; }

.station-message + .mortgage-message {
  padding-top: 0; }

.property-options {
  grid-area: property-options;
  padding: 10px; }
  .property-options button {
    margin: 5px; }

.property-options {
  display: flex;
  justify-content: center;
  align-items: center; }

/* Bank  ---------------------------------------------------------------------*/
#bank {
  border: 3px solid #000;
  background: #fff;
  margin-bottom: 10px;
  grid-area: bank; }

#bank-content {
  min-height: 115px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }

/*
#bank-content > div{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}*/
#bank-title {
  background: #000 url("images/bank.svg") 10px center no-repeat;
  background-size: 20px;
  padding: 5px;
  color: #fff; }

.bank-house-icon,
.bank-hotel-icon {
  width: 20px;
  height: 20px;
  background: url("images/house-icon.svg") center no-repeat;
  background-size: contain;
  margin: 1px;
  float: left; }

@media (max-width: 1400px) {
  .bank-house-icon,
  .bank-hotel-icon {
    width: 15px;
    height: 15px; }
  #bank,
  #bank-content {
    min-height: unset; } }

.bank-hotel-icon {
  background-image: url("images/hotel-icon.svg"); }

/* Chance and community chest card window ------------------------------------*/
.card-message {
  min-height: 300px;
  padding: 30px 50% 30px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #dbdbdb;
  font-size: 1.3em;
  background: url("images/card-images/+.svg") calc(100% - 30px) center no-repeat;
  background-size: 33% auto; }

.card-message[type="-"] {
  background-image: url("images/card-images/-.svg"); }

.card-message[type="repairs"] {
  background-image: url("images/card-images/repairs.svg"); }

.card-message[type="move"] {
  background-image: url("images/card-images/move.svg"); }

.card-message[type="exchange"] {
  background-image: url("images/card-images/exchange.svg"); }

.card-message[type="go-to-jail"] {
  background-image: url("images/card-images/go-to-jail.svg"); }

.card-message[type="getout"] {
  background-image: url("images/card-images/getout.svg"); }

/* Trade summary window  -----------------------------------------------------*/
.trade-summary-window .player-identity,
.trade-negotiations-window .player-identity {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: auto;
  gap: 0px 15px;
  border: 3px solid #000;
  grid-template-areas: "Icon Name Money"; }
  .trade-summary-window .player-identity h2,
  .trade-negotiations-window .player-identity h2 {
    text-align: center !important; }
  .trade-summary-window .player-identity .player-token-icon,
  .trade-negotiations-window .player-identity .player-token-icon {
    grid-area: Icon;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain; }
  .trade-summary-window .player-identity .money,
  .trade-negotiations-window .player-identity .money {
    grid-area: Money;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end; }
    .trade-summary-window .player-identity .money .currencySymbol,
    .trade-negotiations-window .player-identity .money .currencySymbol {
      margin-top: 5px; }
  .trade-summary-window .player-identity h2, .trade-summary-window .player-identity h3,
  .trade-negotiations-window .player-identity h2,
  .trade-negotiations-window .player-identity h3 {
    grid-area: Name;
    margin: 0;
    text-align: left; }
  .trade-summary-window .player-identity + h3,
  .trade-negotiations-window .player-identity + h3 {
    font-size: 18px;
    padding: 4px 20px;
    margin: 0;
    background: #000;
    color: #fff; }

.trade-summary-window .portfolio-divider,
.trade-negotiations-window .portfolio-divider {
  display: none; }

.trade-summary-window {
  /* Current player */
  /* Other players */ }
  .trade-summary-window button {
    background-image: url("images/button-icons/trade.svg");
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 27px;
    padding-left: 50px; }
  .trade-summary-window .player-cards {
    padding: 0;
    border: none;
    background: none; }
  .trade-summary-window .current-player-summary .player-identity {
    padding: 10px 20px; }
  .trade-summary-window .current-player-summary .full-portfolio {
    justify-content: space-between; }
  .trade-summary-window .current-player-portfolio .player-cards {
    justify-content: flex-start; }
  .trade-summary-window .portfolio-item-value {
    display: none; }
  .trade-summary-window .full-portfolio-item {
    width: 100%;
    cursor: initial; }
  .trade-summary-window .other-player-summary .property-name {
    width: calc(100% - 50px); }
  .trade-summary-window .other-player-summary .property-name + .full-portfolio-house,
  .trade-summary-window .other-player-summary .property-name + .full-portfolio-hotel {
    margin-left: 40px; }
  .trade-summary-window .other-player-summary .full-portfolio-house,
  .trade-summary-window .other-player-summary .full-portfolio-hotel {
    width: 15px;
    height: 15px; }
  .trade-summary-window > div:first-child .current-player-portfolio {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    padding: 10px;
    background: #d5e8d4;
    border: 3px solid #000; }
    .trade-summary-window > div:first-child .current-player-portfolio .full-portfolio:before {
      display: none; }
    .trade-summary-window > div:first-child .current-player-portfolio .full-portfolio-item {
      width: calc(50% - 20px);
      min-width: 360px; }
  .trade-summary-window > div:first-child .full-portfolio-item {
    width: 258px; }
  .trade-summary-window .other-player-summaries {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    .trade-summary-window .other-player-summaries > div {
      border: 3px solid #000;
      flex-basis: 220px;
      margin: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
    .trade-summary-window .other-player-summaries .player-identity {
      grid-template-columns: 50px auto;
      grid-template-rows: auto auto;
      grid-template-areas: "Icon Name"
 "Icon Money";
      border: none;
      border-bottom: 3px solid #000;
      padding: 4px 20px; }
      .trade-summary-window .other-player-summaries .player-identity .money {
        justify-content: flex-start; }
      .trade-summary-window .other-player-summaries .player-identity + .full-portfolio {
        padding-top: 10px; }
    .trade-summary-window .other-player-summaries h3 {
      margin: 0; }
    .trade-summary-window .other-player-summaries :before {
      display: none; }

/* Trade negotiations window -------------------------------------------------*/
.trade-negotiations-window {
  /*.player-token-icon{
        height: 50px;
        float: none;
        margin: 0 auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }*/ }
  .trade-negotiations-window.too-short-for-rent-tables .rent-table-window {
    display: none; }
  .trade-negotiations-window[trade-status="proposed"] .trade-negotiation-summaries {
    pointer-events: none; }
  .trade-negotiations-window .trade-negotiation-summaries {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
    .trade-negotiations-window .trade-negotiation-summaries > div {
      flex-basis: calc(50% - 20px);
      width: calc(50% - 20px);
      min-width: 360px; }
    .trade-negotiations-window .trade-negotiation-summaries h2, .trade-negotiations-window .trade-negotiation-summaries h3 {
      text-align: center; }
    .trade-negotiations-window .trade-negotiation-summaries .player-identity {
      padding: 10px; }
  .trade-negotiations-window h2, .trade-negotiations-window h3 {
    margin: 0; }
  .trade-negotiations-window .current-player-summary h3 {
    display: none; }
  .trade-negotiations-window h3 {
    font-size: 1.5em; }
  .trade-negotiations-window .full-portfolio:before {
    display: none; }
  .trade-negotiations-window .summary {
    margin-top: 20px; }
  .trade-negotiations-window .player-cards {
    border: none; }
  .trade-negotiations-window .trade-button {
    display: none; }
  .trade-negotiations-window[trade-status="counter-in-progress"] .accept-trade,
  .trade-negotiations-window[trade-status="counter-in-progress"] .make-counter-offer,
  .trade-negotiations-window[trade-status="unproposed"] button:not(.propose-trade),
  .trade-negotiations-window[trade-status="proposed"] button.propose-trade {
    display: none; }
  .trade-negotiations-window .full-portfolio-item {
    position: relative; }
  .trade-negotiations-window .full-portfolio-item .rent-table-window {
    position: absolute;
    transform: scale(0.7);
    transform-origin: center top;
    top: calc(100% + 15px);
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
    z-index: 2; }
    .trade-negotiations-window .full-portfolio-item .rent-table-window:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 20px 15px 20px;
      border-color: transparent transparent #cccccc transparent;
      bottom: 100%;
      left: calc(50% - 20px);
      z-index: 2; }
  .trade-negotiations-window .full-portfolio-item:hover,
  .trade-negotiations-window .player-card-icon:hover {
    background-color: #d5e8d4; }
    .trade-negotiations-window .full-portfolio-item:hover .rent-table-window,
    .trade-negotiations-window .player-card-icon:hover .rent-table-window {
      opacity: 1; }
  .trade-negotiations-window [proposed="true"] {
    position: relative; }
  .trade-negotiations-window [proposed="true"]:not(.money-proposal-container):before {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    top: 0;
    background: url("images/tick.svg") center no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 3; }
  .trade-negotiations-window .money-proposal-container {
    margin-top: 15px;
    margin-bottom: 20px; }
  .trade-negotiations-window input.money-proposal {
    max-width: 80px;
    color: #0aa959;
    font-weight: bold;
    font-size: 0.7em;
    border: none;
    border-bottom: 1px solid #ccc; }
    .trade-negotiations-window input.money-proposal::placeholder {
      font-weight: normal; }
  .trade-negotiations-window input.money-proposal:invalid {
    color: #db0926; }
  .trade-negotiations-window .money-proposal-container[bankruptcy-in-progress="true"] {
    opacity: 0.1; }

/* Trade buttons styling -----------------------------------------------------*/
.trade-negotiations-window button {
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 50px;
  margin: 5px; }
  .trade-negotiations-window button.propose-trade {
    background-image: url("images/button-icons/propose-trade.svg"); }
  .trade-negotiations-window button.accept-trade {
    background-image: url("images/button-icons/trade.svg"); }
  .trade-negotiations-window button.make-counter-offer {
    background-image: url("images/button-icons/counter-offer.svg"); }
  .trade-negotiations-window button.reject-trade {
    background-image: url("images/button-icons/reject-trade.svg"); }

/* Trade mortgage warning ----------------------------------------------------*/
.trade-mortgage-entry {
  display: flex;
  align-items: center;
  margin-bottom: 5px; }
  .trade-mortgage-entry .property-name {
    flex-grow: 1;
    text-align: left; }
  .trade-mortgage-entry .property-icon {
    margin-right: 10px; }
  .trade-mortgage-entry button {
    min-width: 240px;
    margin-left: 5px; }

.trade-mortage-warning .trade-mortgage-list {
  margin-top: 40px; }

.trade-mortage-warning .player-name {
  text-align: left;
  display: flex;
  align-items: center;
  font-size: 1.5em;
  border: 3px solid #000;
  padding: 5px;
  margin-bottom: 15px; }

.trade-mortage-warning .player-token-icon {
  width: 50px;
  height: 40px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 20px; }

/* Feed  ---------------------------------------------------------------------*/
#feed {
  background: #fff;
  color: #000;
  position: relative;
  border: 3px solid #000;
  box-sizing: border-box;
  grid-area: feed;
  height: calc(100vh - 270px); }

#feed-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  background: #000;
  color: #fff; }

#feed-content {
  max-height: calc(100% - 38px);
  overflow-y: auto;
  box-sizing: border-box; }

#feed-content > div {
  padding: 10px 10px 10px 60px;
  font-size: 0.8em;
  background-position: 17px center, 10px center;
  background-size: 28px, 42px;
  background-repeat: no-repeat;
  text-align: left;
  min-height: 42px;
  position: relative;
  display: flex;
  align-items: center; }

@media (max-width: 1400px) {
  #feed {
    height: calc(100vh - 300px); }
  #feed-content > div {
    background-size: 18px, 32px;
    padding-left: 50px;
    font-size: 0.7em; } }

@media (max-width: 925px) {
  #feed {
    height: 100%; }
  #feed-title {
    font-size: 15px; }
  #feed-content > div {
    min-height: 28px;
    padding-top: 5px;
    padding-bottom: 5px; } }

#feed-content > div:first-child {
  animation: slideInFromLeft 0.3s linear;
  animation-iteration-count: 1; }

/* Feed icons ----------------------------------------------------------------*/
.money-plus {
  background-image: url("images/feed-icons/money-plus.svg"), url("images/feed-icons/feed-circle.svg"); }

.money-minus {
  background-image: url("images/feed-icons/money-minus.svg"), url("images/feed-icons/feed-circle.svg"); }

.get-out-card {
  background-image: url("images/feed-icons/get-out-card.svg"), url("images/feed-icons/feed-circle.svg"); }

.go-to-jail {
  background-image: url("images/feed-icons/go-to-jail.svg"), url("images/feed-icons/feed-circle.svg"); }

.advance {
  background-image: url("images/feed-icons/advance.svg"), url("images/feed-icons/feed-circle.svg"); }

.failed-jail-roll {
  background-image: url("images/feed-icons/failed-jail-roll.svg"), url("images/feed-icons/feed-circle.svg"); }

.go-back {
  background-image: url("images/feed-icons/go-back.svg"), url("images/feed-icons/feed-circle.svg"); }

.doubles {
  background-image: url("images/feed-icons/doubles.svg"), url("images/feed-icons/feed-circle.svg"); }

.doubles-2nd {
  background-image: url("images/feed-icons/doubles-2nd.svg"), url("images/feed-icons/feed-circle.svg"); }

.out-of-jail {
  background-image: url("images/feed-icons/out-of-jail.svg"), url("images/feed-icons/feed-circle.svg"); }

.rent {
  background-image: url("images/feed-icons/rent.svg"), url("images/feed-icons/feed-circle.svg"); }

.doubles-out-of-jail {
  background-image: url("images/feed-icons/doubles-out-of-jail.svg"), url("images/feed-icons/feed-circle.svg"); }

.buy-property {
  background-image: url("images/feed-icons/buy-property.svg"), url("images/feed-icons/feed-circle.svg"); }

.auction {
  background-image: url("images/feed-icons/auction.svg"), url("images/feed-icons/feed-circle.svg"); }

.exchange {
  background-image: url("images/feed-icons/exchange.svg"), url("images/feed-icons/feed-circle.svg"); }

.repairs {
  background-image: url("images/feed-icons/repairs.svg"), url("images/feed-icons/feed-circle.svg"); }

.mortgage {
  background-image: url("images/feed-icons/mortgage.svg"), url("images/feed-icons/feed-circle.svg"); }

.land-on-mortgaged {
  background-image: url("images/feed-icons/land-on-mortgaged.svg"), url("images/feed-icons/feed-circle.svg"); }

.trade-accepted {
  background-image: url("images/feed-icons/trade-accepted.svg"), url("images/feed-icons/feed-circle.svg"); }

.trade-rejected {
  background-image: url("images/feed-icons/trade-rejected.svg"), url("images/feed-icons/feed-circle.svg"); }

.construction {
  background-image: url("images/feed-icons/construction.svg"), url("images/feed-icons/feed-circle.svg"); }

.bankrupt {
  background-image: url("images/feed-icons/bankrupt.svg"), url("images/feed-icons/feed-circle.svg"); }

.save {
  background-image: url("images/feed-icons/save-game.svg"), url("images/feed-icons/feed-circle.svg"); }

/* Auction panel  ------------------------------------------------------------*/
.auction-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 20px;
  grid-template-areas: "rent-table bid-options"; }
  .auction-screen .auction-rent-table {
    grid-area: rent-table; }
  .auction-screen .auction-bidding-area {
    max-width: 400px;
    grid-area: bid-options; }

.auction-heading {
  background: #000 url("images/auction-white.svg") 10px center no-repeat;
  background-size: 40px;
  color: #fff;
  text-transform: uppercase;
  padding: 10px;
  margin: 0; }

.player-bid-interface {
  transition: 0.3s;
  display: grid;
  grid-template-columns: 50px 50px 75px 130px;
  grid-template-rows: auto auto;
  grid-row-gap: 10px;
  grid-column-gap: 5px;
  background: #f0f0f0;
  padding: 10px;
  margin-top: 10px; }
  .player-bid-interface.abstained-from-bidding {
    opacity: 0.15;
    pointer-events: none; }
  .player-bid-interface h3 {
    grid-column: 2 / 4;
    grid-row: 1 / 1;
    margin: 10px 0 10px 10px;
    text-align: left;
    text-transform: uppercase;
    font-size: 22px;
    overflow: hidden; }
  .player-bid-interface .bid-input {
    grid-column: 1 / 3;
    grid-row: 2 / 2;
    font-weight: bold; }
  .player-bid-interface .bid-input input {
    font-family: 'Kabel-Heavy', sans-serif;
    font-size: 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box; }
  .player-bid-interface button {
    grid-column: 3 / 3;
    grid-row: 2 / 2; }
  .player-bid-interface button.abstain-button {
    grid-column: 4 / 4; }
  .player-bid-interface .player-token-icon {
    border-radius: 50%;
    background-size: 36px;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #d3d3d3;
    height: 48px; }
  .player-bid-interface .player-money {
    padding: 9px 0;
    text-align: right;
    grid-column: 4 / 4;
    grid-row: 1 / 1; }

.player-bid-interface.current-winner button {
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }

.current-bid-container {
  background: #d5e8d4;
  padding: 10px;
  border: 3px solid #000; }

.current-bid-heading {
  font-size: 1em;
  margin: 0; }

.current-bid-amount {
  font-size: 30px; }

.auction-screen input:invalid {
  background: #db0926;
  color: #fff; }

.auction-screen input:invalid + button {
  background-color: #ccc;
  color: #8f8f8f;
  pointer-events: none; }

.player-bid-interface.current-winner {
  background: #0aa959;
  color: #fff; }

.bid-button {
  background-image: url("images/button-icons/bid.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 40px; }

.abstain-button {
  background-image: url("images/button-icons/exit.svg");
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 27px;
  padding-left: 40px; }

/* Bankruptcy ----------------------------------------------------------------*/
#bankruptcy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100; }

#bankruptcy-inner {
  background: #fff;
  border: 3px solid #000;
  border-color: #db0926;
  width: 800px;
  max-width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  max-height: calc(100vh - 30px);
  overflow-y: auto; }

/* Title -----------------------------*/
#bankruptcy-title > div {
  background: #db0926;
  color: #fff;
  padding: 5px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center; }

#bankruptcy-title h2 {
  font-size: 26px;
  text-transform: uppercase;
  padding: 5px;
  letter-spacing: 1px;
  margin: 0; }

#bankruptcy-title .token {
  position: relative;
  float: left;
  margin: -6px 20px 0 0; }

body.popup-open #bankruptcy,
body[bankruptcy-proceedings="false"] #bankruptcy {
  display: none; }

#bankruptcy-message {
  padding: 20px;
  display: grid;
  grid-template-columns: 7fr 10fr;
  gap: 20px 10px;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "Description Description"
 "Financial Worth"
 "Functions Functions"
 "Button Button"; }

.bankruptcy-description {
  grid-area: Description;
  font-size: 1.3em; }

.bankruptcy-financial-details {
  border: 1px solid #ccc;
  padding: 20px;
  grid-area: Financial; }
  .bankruptcy-financial-details .amount-to-raise-display {
    transform-origin: center; }

.bankruptcy-worth-details {
  grid-area: Worth;
  padding: 12px; }
  .bankruptcy-worth-details[abletoraise="true"] {
    background: #0aa959;
    color: #fff; }
  .bankruptcy-worth-details[abletoraise="false"] {
    background: #db0926;
    color: #fff; }

#bankruptcy-message .full-portfolio {
  grid-area: Functions; }
  #bankruptcy-message .full-portfolio .full-portfolio-item {
    width: 100%; }
  #bankruptcy-message .full-portfolio .property-name {
    white-space: normal; }
  #bankruptcy-message .full-portfolio .house-visual-display {
    height: 26px;
    width: 110px; }
  #bankruptcy-message .full-portfolio .full-portfolio-house,
  #bankruptcy-message .full-portfolio .full-portfolio-hotel {
    display: none; }
  #bankruptcy-message .full-portfolio [group="utility"] .sell-house-button,
  #bankruptcy-message .full-portfolio [group="utility"] .house-visual-display,
  #bankruptcy-message .full-portfolio [group="train-station"] .sell-house-button,
  #bankruptcy-message .full-portfolio [group="train-station"] .house-visual-display {
    display: none; }

#bankruptcy-message .full-portfolio-item {
  display: grid;
  grid-template-columns: 19px 1fr min-content min-content 270px;
  grid-template-rows: 1fr;
  gap: 0px 10px;
  grid-template-areas: "icon name houses value buttons"; }
  #bankruptcy-message .full-portfolio-item .button-panel {
    grid-area: buttons; }
    #bankruptcy-message .full-portfolio-item .button-panel button {
      width: 100%; }
  #bankruptcy-message .full-portfolio-item .house-visual-display:not([houses="0"]) + .button-panel .mortgage-button {
    display: none; }
  #bankruptcy-message .full-portfolio-item .house-visual-display[houses="undefined"] + .button-panel .mortgage-button {
    display: block; }
  #bankruptcy-message .full-portfolio-item .house-visual-display[houses="0"] + .button-panel .sell-house-button {
    display: none; }
  #bankruptcy-message .full-portfolio-item .portfolio-item-value {
    margin-left: 10px; }
  #bankruptcy-message .full-portfolio-item[mortgageable="false"] .mortgage-button {
    background-color: #ccc;
    color: #8f8f8f;
    pointer-events: none; }

/* Mortgages after bankruptcy ------------------------------------------------*/
.bankruptcy-mortgage-table > div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: 1fr;
  gap: 0px 5px;
  grid-template-areas: "property-name keep-mortgage-button unmortgage-button";
  padding: 5px 0;
  margin: 5px 0;
  border-bottom: 1px solid #ccc; }
  .bankruptcy-mortgage-table > div:first-child {
    border-top: 1px solid #ccc; }

.bankruptcy-mortgage-table .unmortgage-button {
  grid-area: unmortgage-button;
  min-width: 190px; }

.bankruptcy-mortgage-table .keep-mortgage-button {
  grid-area: keep-mortgage-button;
  min-width: 190px; }

.bankruptcy-mortgage-table .property-name {
  grid-area: property-name;
  display: flex;
  align-items: center; }

/*
#popup-message{
    padding: 20px;
}

#popup-close{
    width: 35px;
    position: absolute;
    top: 1px;
    right: 3px;
    z-index: 2;
}

body:not(.popup-open) #popup{
    display: none;
}

#popup-message{
    min-height: 100px;
}

body[close-popup="false"] #popup-close{
    display: none;
}

#popup-title{
    background: #000;
    color: #fff;
    font-size: 26px;
    text-transform: uppercase;
    padding: 5px;
    letter-spacing: 1px;
}
*/
/* Player removal ------------------------------------------------------------*/
.individual-player-summary.bankrupt,
.token.bankrupt {
  animation: zoomOut 0.5s both;
  max-height: 0;
  padding: 0 !important; }

/* Testing panel -------------------------------------------------------------*/
#testing-panel {
  padding: 20px;
  background: #000;
  color: #fff;
  width: 100%;
  transition: margin 0.5s;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start; }

body[testing-panel="false"] #testing-panel {
  display: none;
  margin-bottom: -100%; }

#testing-toggle-panel {
  justify-content: space-around;
  display: flex; }

#testing-panel > * {
  margin: 20px;
  text-align: center; }

#testing-panel button {
  background: #db0926;
  border: 2px solid #fff;
  padding: 3px 7px; }

#testing-panel input {
  line-height: 21px; }

.testing-panel-title {
  text-transform: uppercase;
  background: #db0926;
  padding: 5px 10px;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
  .testing-panel-title img {
    margin-right: 15px; }

.save-button {
  display: flex;
  align-items: center;
  font-size: initial; }
  .save-button img {
    margin-right: 10px; }

/* Dice -----------------------------------*/
#fake-dice-panel {
  max-width: 280px; }

#fake-dice-roll-dice-panel > div {
  padding: 5px;
  border: 2px solid #fff;
  border-radius: 5px;
  width: 27px;
  height: 27px;
  text-align: center;
  transition: 0.2s;
  cursor: pointer;
  display: inline-block;
  margin: 5px 0 0; }
  #fake-dice-roll-dice-panel > div:hover {
    background: rgba(255, 255, 255, 0.2); }

/* Money, buildings-----------------------*/
#buildings-test form,
#fake-player-money form {
  margin-top: 3px;
  text-align: left; }

#buildings-test input,
#fake-player-money input {
  width: 70px;
  float: right;
  margin-left: 10px; }

/* Saving -------------------------------*/
#test-save {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 280px; }

/* Closing -----------------------------*/
#testing-close {
  display: flex;
  align-items: center; }
  #testing-close img {
    margin-right: 20px; }

/* TOOLTIPS ----------------------------------------------------------------- */
/* The item which has a tooltip applied to it */
.tooltipped {
  position: relative; }

.tooltip-window {
  background: #000;
  color: #fff;
  position: absolute;
  top: calc(100% + 15px);
  left: 50%;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 100px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.2; }
  .tooltip-window:before {
    content: '';
    position: absolute;
    left: calc(50% - 8px);
    bottom: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 7px 8px;
    border-color: transparent transparent #000000 transparent; }

.tooltipped:hover .tooltip-window {
  opacity: 1; }

.tooltip-window.warning {
  background: #db0926; }
  .tooltip-window.warning:before {
    border-color: transparent transparent #db0926 transparent; }

/* CONFETTI ----------------------------------------------------------------- */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  pointer-events: none;
  transition: 1s; }

.confetti-container .particle {
  animation-name: particleAnimation;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  position: absolute; }

.particle > div {
  background: #3e64ad;
  width: 100%;
  height: 100%; }

.confetti-container .particle > div:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.2), transparent); }

@keyframes particleAnimation {
  0% {
    top: -50px; }
  100% {
    top: 2500px; } }

.particle > div {
  animation-name: particleRotation;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 5s; }

@keyframes particleRotation {
  from {
    transform: rotate3d(1, 1, 1, 0deg); }
  to {
    transform: rotate3d(1, 1, 1, 360deg); } }

.confetti-container .particle:nth-child(8n - 7) > div {
  background: #824c26; }

.confetti-container .particle:nth-child(8n - 6) > div {
  background: #99d1f4; }

.confetti-container .particle:nth-child(8n - 5) > div {
  background: #d52788; }

.confetti-container .particle:nth-child(8n - 4) > div {
  background: #f1970b; }

.confetti-container .particle:nth-child(8n - 3) > div {
  background: #db0926; }

.confetti-container .particle:nth-child(8n - 2) > div {
  background: #e9ed38; }

.confetti-container .particle:nth-child(8n - 1) > div {
  background: #0aa959; }

.confetti-container .particle:nth-child(8n) > div {
  background: #f1970b; }

/* Stars */
.confetti-container .particle:nth-child(3n) {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* Pentagons */
.confetti-container .particle:nth-child(7n) {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }

/* Circles */
.confetti-container .particle:nth-child(6n) {
  clip-path: circle(50% at 50% 50%); }

/* Rhombus */
.confetti-container .particle:nth-child(9n) {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

.confetti-container .particle:nth-child(5n - 4) {
  animation-duration: 40s; }

.confetti-container .particle:nth-child(5n - 3) {
  animation-duration: 35s; }

.confetti-container .particle:nth-child(5n - 2) {
  animation-duration: 30s; }

.confetti-container .particle:nth-child(5n - 1) {
  animation-duration: 25s; }

.confetti-container .particle:nth-child(5n - 4) {
  animation-duration: 20s; }

/* Winner screen -------------------------------------------------------------*/
#winner-screen {
  position: fixed;
  background: #d5e8d4;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  text-align: center;
  display: none;
  opacity: 0;
  transition: 0.4s; }

#winning-bunting {
  text-align: left; }
  #winning-bunting img {
    max-width: 750px; }
  #winning-bunting img:nth-child(2) {
    position: absolute;
    right: 0;
    top: 0; }

body.winner #winner-screen {
  display: block;
  opacity: 1; }

body.winner #winning-bunting img {
  animation: slideDown 0.7s ease-out both; }

body.winner #winning-bunting img:last-child {
  animation-delay: 0.3s; }

#game-stats {
  display: flex;
  align-items: center;
  justify-content: center; }
  #game-stats h3 {
    margin: 5px 0; }
  #game-stats > div {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 5px; }

#winner-screen-content {
  padding: 30px; }

.social-media-sharing {
  margin-top: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; }
  .social-media-sharing img {
    margin-right: 10px; }
  .social-media-sharing > span {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0 5px 25px; }

/* General purpose animations ------------------------------------------------*/
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes zoomIn {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }

@keyframes zoomOut {
  from {
    transform: scale(1); }
  to {
    transform: scale(0); } }

@keyframes goodChangeAnimation {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.75);
    color: #0aa959; }
  100% {
    transform: scale(1); } }

@keyframes badChangeAnimation {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.75);
    color: #db0926; }
  100% {
    transform: scale(1); } }

@keyframes spinAnimation {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes slideDown {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0); } }

@keyframes slideUp {
  from {
    transform: translateY(100%); }
  to {
    transform: translateY(0); } }

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%); }
  to {
    transform: translateX(0); } }