/* body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: transparent;
  }
  
  .canvas {
    position: relative;
    width: 1920px;
    height: 1080px;
  }
  
  .player {
    position: absolute;
    width: 148px;
    height: 163px;
  }
  
  .photo {
    position: absolute;
    top: 0;
    left: 4px;
    width: 140px;
    height: 156px;
    background: #d9d9d9;
    border-radius: 4px;

    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    box-shadow: 0px -70px 25px -40px rgba(0, 0, 0, 0.8) inset, 0px -100px 50px -40px rgba(0, 0, 0, 0.5) inset;
    transition: all 1s;
  }

  
  .gradient {
    position: absolute;
    top: 0;
    left: 4px;
    width: 140px;
    height: 156px;
    border-radius: 4px;
    pointer-events: none;
  }
  
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 148px;
    height: 24px;
    border-radius: 3px;
    display: flex;
    align-items: center;
  }
  
  .num {
    width: 23px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
  }
  
  .name {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 300;
    color: #fff;
  }
  
  .icon {
    position: absolute;
    top: 93px;
    left: 56px;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .status {
    position: absolute;
    top: 0px;
    left: 15px;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: #EDEFE2;
    border-radius: 50%;
    display: none;
  } */

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  background: transparent;
}

.pairing-screen {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
}

.pairing-card {
  background: rgba(16, 16, 16, 0.82);
  color: #fff;
  text-align: center;
  padding: 24px 28px;
  border-radius: 14px;
}

.pairing-card h1 {
  margin: 0 0 8px;
  font-size: 56px;
  letter-spacing: 8px;
}

.pairing-label {
  margin: 0 0 10px;
  opacity: 0.8;
}

.pairing-help {
  margin: 0;
  font-size: 14px;
}

.pairing-help a {
  color: #fff;
  text-decoration: underline;
}

.canvas {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
}

.overlay-source {
  position: absolute;
  z-index: 5;
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  backdrop-filter: blur(3px);
}

.source-banner {
  top: 20px;
  left: 16px;
  background: rgba(0, 0, 0, 0.5);
}

.source-alert {
  top: 20px;
  right: 16px;
  background: rgba(207, 0, 0, 0.8);
  max-width: 420px;
  white-space: pre-wrap;
}

.source-lower-third {
  left: 16px;
  bottom: 196px;
  background: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}

.source-club-logo {
  top: 20px;
  left: 16px;
  width: 120px;
  height: 120px;
  border: 2px solid #fff;
  padding: 6px;
  background: rgba(0, 0, 0, 0.45);
}

#club-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.source-night-actions {
  top: 20px;
  right: 16px;
  background: rgba(207, 0, 0, 0.8);
  max-width: 420px;
}

.source-game-info {
  left: 16px;
  bottom: 196px;
  background: rgba(0, 0, 0, 0.65);
}

.players {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.players.mode-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.players.mode-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.players.mode-14 {
  grid-template-columns: repeat(14, minmax(0, 1fr));
}

.players.mode-15 {
  grid-template-columns: repeat(15, minmax(0, 1fr));
}

.hidden {
  display: none !important;
}

.player {
  width: 100%;
  aspect-ratio: 9 / 10;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  font-size: clamp(10px, 1vw, 14px);
}

.photo {
  position: absolute;
  width: 90%;
  margin: 0 5%;
  inset: 0;
  background: #d9d9d9 no-repeat center / cover;
  background-image: url("images/unknown-person.svg");
  border-radius: inherit;
  box-shadow: 0 -25% 20% -10% rgba(0, 0, 0, 0.8) inset, 0 -40% 30% -15% rgba(0, 0, 0, 0.5) inset;
}

.gradient,
.icon,
.status {
  position: absolute;
}

.gradient {
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  width: 90%;
  margin: 0 5%;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 18%;
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  box-sizing: border-box;
}

.num {
  width: 2em;
  text-align: center;
  font-size: 1em;
  font-weight: 600;
  color: #fff;
}

.name {
  flex: 1;
  text-align: center;
  font-size: 0.9em;
  color: #fff;
}

.icon {
  bottom: 25%;
  left: 50%;
  width: 20%;
  aspect-ratio: 1/1;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.status {
  top: 5%;
  left: 5%;
  width: 20%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #edefe2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: none;
}

  /* Градиенты и цвета по ролям */
  
  /* мирный */
  .player .gradient {
    background: linear-gradient(180deg, rgba(255,26,85,0.27) 17%, rgba(255,26,85,1) 100%);
  }
  .player .footer {
    background: #ff1a55;
  }
  
  /* маниак */
  .maniac .gradient {
    background: linear-gradient(180deg, rgba(73,32,176,0.27) 17%, rgba(73,32,176,1) 100%);
  }
  .maniac .footer {
    background: #4920b0;
  }
  .maniac .icon {
    background-image: url("images/knife.svg");
  }
  
  /* шериф */
  .sheriff .gradient {
    background: linear-gradient(180deg, rgba(241,131,49,0.27) 17%, rgba(241,131,49,1) 100%);
  }
  .sheriff .footer {
    background: #f18331;
  }
  .sheriff .icon {
    background-image: url("images/sher.svg");
  }
  
  /* доктор */
  .doctor .gradient {
    background: linear-gradient(180deg, rgba(1,247,240,0.28) 17%, rgba(1,247,240,1) 100%);
  }
  .doctor .footer {
    background: #01f7f0;
  }
  .doctor .icon {
    background-image: url("images/doc.svg");
  }
  
  /* красотка */
  .babe .gradient {
    background: linear-gradient(180deg, rgba(210,146,255,0.27) 17%, rgba(210,146,255,1) 100%);
  }
  .babe .footer {
    background: #d292ff;
  }
  .babe .icon {
    background-image: url("images/love.svg");
  }
  
  /* дон / мафия черный */
  .don .gradient,
  .mafia .gradient {
    background: linear-gradient(180deg, rgba(63,63,63,0.27) 17%, rgba(63,63,63,1) 100%);
  }
  .don .footer,
  .mafia .footer {
    background: #3f3f3f;
  }

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

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

  /* камикадзе */
  .kamikadze .gradient {
    background: linear-gradient(180deg, rgba(210,146,255,0.27) 17%, rgba(210,146,255,1) 100%);
  }
  .kamikadze .footer {
    background: #d292ff;
  }
  .kamikadze .icon {
    background-image: url("images/kamikadze.svg");
  }

  /* сапёр */
  .sapper .gradient {
    background: linear-gradient(180deg, rgba(129, 0, 0, 0.27) 17%, rgba(129,0,0,1) 100%);
  }
  .sapper .footer {
    background: #790000;
  }
  .sapper .icon {
    background-image: url("images/sapper.svg");
  }
  

  /* умер */

  .dead {
    margin-bottom: 0px;
  }

  .dead .photo {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  
  /* убитый игрок */
  .killed .gradient,
  .voted .gradient,
  .deleted .gradient {
    background: linear-gradient(180deg, rgba(201,201,201,0.27) 17%, rgba(201,201,201,1) 100%);
  }
  .killed .footer,
  .voted .footer,
  .deleted .footer {
    background: #dcdcdc;
  }
  
  .killed .status {
    background-image: url("images/shot.svg");
    display: block;
  }

  .voted .status {
    background-image: url("images/vote.svg");
    display: block;
  }

  .deleted .status {
    background-image: url("images/cross.svg");
    display: block;
  }