@import url("content.css");

body {
  background-image: url(../images/bg-sint.jpg);
  background-repeat: no-repeat;
  background-position: bottom -10vh right -20vh;
/*  background-size: cover;*/
  background-size: auto 115vh;
  background-attachment: fixed;
  transition: 2s background;
}
body.game-started {
  /*background-image: url(../images/bg2-dark.jpg);
  transition: 3s background;*/
  background-position: bottom -15vh right -15vh;
}

h1 {
  margin: 0;
  color: #fff;
  /*color: #2196f3;
  background-color: rgba(255,255,255,.5);
  padding: 0 1em;*/
  text-align: center;
  text-shadow: 0 0 10px rgba(0,0,0,.5);
}

.content {
  padding: 1em;
}

.title {
  font-size: clamp(1.5rem, -0.5rem + 8vw, 4rem);
  /*color: #98adce;*/
  transition: 3s color;
}

.game-started .title {
  /*color: #244a6f;
  text-shadow: none;*/
  margin-top: .5em;
  margin-bottom: 1em;
  padding: 0 1em;
}

.game-started #askForName {
  display: none !important;
}

.connection-error #askForName,
.connection-error .active-clients,
.connection-error .current-turn,
.connection-error .waiting,
.connection-error .play-options,
.connection-error #askForOpponent {
  display: none !important;
}


.topbuttons {
  display: flex;
}
.topbuttons .btn {
  background-color: #009dc8;
}
.btn--install-pwa {
/*  margin-top: 2em;*/
}
/* Hide PWA install button, if it already is installed */
.pwa-is-installed .btn--install-pwa,
.game-started .btn--install-pwa {
  display: none;
}
/* Hide PWA install button and logout button, if the game is started */
.game-started .topbuttons {
  display: none;
}


/*
 * Score
 */

.title {
  position: relative;
}
.title::before {
  position: absolute;
  content: "";
  opacity: 0;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  right: -0.25em;
  /*top: 0;*/
  top: -.5em;
  border-radius: 50%;
  background-color: #2196f3;
  color: #fff;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: .75em;
  font-weight: bold;
  transform: scale(.2);
}
.game-started .title[data-score]::before {
  content: attr(data-score);
  opacity: 1;
  transform: scale(1);
  transition: .2s opacity, .2s transform;
}



/*
 * Gift
 */

.title::after {
  position: absolute;
  content: "";
  opacity: 0;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  left: -0.25em;
  /*top: 0;*/
  top: -.5em;
  border-radius: 50%;
  background-color: #76c70a;
  /*background-color: #FFC107;
  filter: hue-rotate(380deg);*/
  color: #fff;
  text-align: center;
  font-size: .75em;
  font-weight: bold;
  transform: scale(.2);
  background-image: url(../images/gift.svg);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}
.game-started .title[data-gift='1']::after,
.game-started .title[data-gift='2']::after {
  /*content: "\1F381";*/
  opacity: 1;
  transform: scale(1);
  transition: .2s opacity, .2s transform;
}


.msg {
  font-size: 1.2em;
  margin: .5em 1em;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(0,0,0,.5);
}

@keyframes waiting-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes waiting-rotate-reverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

.waiting {
  position: relative;
  height: 60vw;
}
.waiting__item {
  position: absolute;
  width: 35vw;
  height: 35vw;
  margin: 0 auto;
  background: url(../images/schuimpje1.png) no-repeat;
  background-size: cover;
  animation: 1s waiting-rotate infinite;
  /*transform-origin: 50% 51%;*/
}
.waiting__item:nth-child(1) {
  left: 10vw;
  top: 25vw;
}
.waiting__item:nth-child(3) {
  right: 10vw;
  top: 25vw;
  background-image: url(../images/schuimpje2.png);
}
.waiting__item:nth-child(2) {
  animation: 1s waiting-rotate-reverse infinite;
  left: 28vw;
  background-image: url(../images/schuimpje3.png);
}


.qrcode-bar {
  display: flex;
  flex-flow: row wrap;
  box-shadow: 0 .5em 1em rgba(0,0,0,.5);
  margin-bottom: 1em;
  padding: 1em 0;
  background-color: #fff;
  border-radius: 0 0 1em 1em;
}
.game-started .qrcode-bar {
  display: none;
}
.qrcode-bar #qrcode {
  flex: 1 1 calc(40% - 2em);
  padding: 0 1em;
  min-width: 100px;
  max-width: 250px;
}
.qrcode-bar #qrcode img {
  width: 100%;
  height: auto;
}
.qrcode-bar #qrcode canvas {
  width: 100%;
}
.qrcode-bar__content {
  flex: 1 1 calc(60% - 2em);
  padding: 0 1em;
}
.qrcode-bar__content h2 {
  line-height: 1.2;
  font-size: 1.2em;
}



#askForName .holidayers {
  margin: 1em 0;
}
#askForName .holidayer {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 calc((100% / 4) - (2 * var(--padding)));
}
#askForName .holidayer:nth-child(1) {
  margin-left: calc(100% / 4 / 2);
}
#askForName .holidayer:nth-child(8) {
  margin-left: calc(100% / 4 / 2);
}
#askForName .holidayer {
  opacity: 1;
  cursor: pointer;
}
#askForName .holidayer--connected:not(.holidayer--selected) {
  /* Hide connected holidayers */
  /*display: none;*/
  opacity: .5;
  pointer-events: none;
}
#askForName .holidayer--selected img {
  box-shadow: 0 0 0 5px #2196f3;
  background: #ffffff66;
}



#askForOpponent .holidayers {
  /*margin: 0;
  padding: 1em 0;*/
  margin: 0 -1em;
  padding: 1em 1em;
  flex-flow: row;
  overflow: auto;
  scroll-snap-type: x mandatory;
}
#askForOpponent .holidayer {
  /*flex: 0 0 calc((100% / 3.5) - (2 * var(--padding)));*/
  flex: 1 0 calc((100% / 3.5) - (2 * var(--padding)));
  max-width: calc((100% / 2) - (2 * var(--padding)));
  scroll-snap-align: center;
}
#askForOpponent .holidayer {
  opacity: 1;
  cursor: pointer;
}
#askForOpponent .holidayer:not(.holidayer--connected),
#askForOpponent .holidayer[data-gift='2'],
#askForOpponent .holidayer--self {
  /* Hide not-connected holidayers, players with kept gifts and yourself */
  display: none;
}
#askForOpponent[data-cmd="givegift"] .holidayer[data-gift="1"],
#askForOpponent[data-cmd="givegift"] .holidayer[data-gift="2"],
#askForOpponent[data-cmd="stealgift"] .holidayer:not([data-gift="1"]),
#askForOpponent[data-cmd="switchgift"] .holidayer:not([data-gift="1"]) {
  /* Hide holidayers without gifts when stealing or switching */
  display: none;
}

#askForOpponent[data-selectFirstName="1"] .holidayers {
  overflow: hidden;

  .holidayer {
    flex: 1 0 100%;
    margin-left: 50%;
    margin-right: 100%;
  }
  .holidayer::before {
    font-size: 5vw;
  }
}

#askForOpponent .holidayer--selected img {
  box-shadow: 0 0 0 5px #2196f3;
}

/* Score */
#askForOpponent .holidayer {
  position: relative;
}
#askForOpponent .holidayer::before {
  position: absolute;
  content: "";
  opacity: 0;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  right: -0.25em;
  bottom: -0.5em;
  border-radius: 50%;
  background-color: #2196f3cc;
  color: #fff;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 3.5vw;
  font-weight: bold;
  transform: scale(.2);
  z-index: 20;
}
#askForOpponent .holidayer[data-score]::before {
  content: attr(data-score);
  opacity: 1;
  transform: scale(1);
  transition: .2s opacity, .2s transform;
}





h2.current-turn {
  margin: .5em 0;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,.5);
}

.active-clients {
  display: flex;
  justify-content: center;
}
.active-client {
  width: 40vw;
  height: 40vw;
  background: rgba(255,255,255,.5);
  background-size: cover;
  border-radius: 50%;
  line-height: 40vw;
  font-size: 5vw;
  margin: 0 .5em;
  box-shadow: 0 0 2em #fff;
}



.play-options {
  display: flex;
  flex-flow: column;
}
.play-options .btn {
  position: relative;
  margin: .5em 0;
}
.play-options .btn[data-min-points]:before,
.play-options .btn[data-plus-points]:before {
  position: absolute;
  opacity: 1;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  right: -0.75em;
  top: -.75em;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
}
.play-options .btn[data-min-points]:before {
  content: "\2212" attr(data-min-points);
  background-color: #f44336;
}
.play-options .btn[data-plus-points]:before {
  content: "+" attr(data-plus-points);
  background-color: #4caf50;
}
.play-options .btn[disabled] {
  background-color: #bad80a66;
  color: #ffffffdd;
  order: 2;
}

.play-options .btn[data-cmd="pass"][data-countdown]:after {
  content: " (" attr(data-countdown) ")";
  margin-left: 4px;
  opacity: .8;
}