.owner-tab-darkred { background: darkred; color: white; }
.owner-tab-gold { background: gold; color: black; }
.owner-tab-white { background: white; color: black; }
.owner-tab-darkgreen { background: darkgreen; color: white; }
.owner-tab-blue { background: blue; color: white; }
.owner-tab-indigo { background: indigo; color: white; }
.owner-tab-lightgrey { background: lightgrey; color: black; }

body {
  background: radial-gradient(circle at 30% 30%, #51758f 0%, #1b5383 40%, #08233a 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.hand {
  background: rgba(255,255,255,.12);
  border-radius: 16pt; padding: 12pt; box-shadow: 0 6pt 18pt rgba(0,0,0,.2);
}
.fake-guess-card {
    border: 1pt dashed lightgrey !important;
    background: #fff3;
    color: white;
}
.fake-guess-card:hover {
  background: #fff6;
}
.carousel-item > .card, .modal-content, #cardTypeModalCards > .card  {
  background: #19316b70;
  color: white;
}
#addCardBtn {
  background: #ffffff12;
  color: white;
}
#guessCardsHand {
  background: #1d4b6d;
  color: white;
  border-radius: 0;
}
.cards { display: flex; flex-wrap: wrap; gap: 10pt; }
.cl-card {
  width: 72pt;
  height: 102pt;
  border-radius: 8pt;
  font-size: 10pt;
  position: relative;
  display: grid;
  place-items: center;
  border: 1pt solid lightgrey;
  padding: 6pt;
  transition: 0.3s box-shadow, backround;
}
.big-cards > .cl-card {
  font-weight: 500; font-size: 12pt; padding: 6pt;
}
.sm-card {
  width: 1.25rem;
  height: 2.5rem;
}
.player-choice-card {
  width: 72pt;
  transition: 0.3s box-shadow, backround;
  box-shadow: 0 0 8pt grey;
}
.cl-card:hover, .cl-card:focus {
  border: 1pt solid lightgrey;
}
.cl-card:hover, .cl-card:focus, .player-choice-card:hover, .player-choice-card:focus, .player-choice-card:hover {
    box-shadow: 0 0 8pt yellow;
}
.cl-card[selected-player=true] {
  border: 2pt solid #8888 !important;
}
.cl-card[selected-player=false] {
  opacity: 0.7;
  transition: opacity 0.5s;
}
.modal {
  backdrop-filter: blur(10pt);
}

button[player-id] {
  box-shadow: 0 0 8pt grey;
}

[card-id]::before {
  filter: blur(2pt);
  content: '';
  z-index: -1;
  border-radius: 10pt;
  width: 78pt;
  height: 108pt;
  position: relative;
  top: -10pt;
  left: -10pt;
}

[card-id="0"] {
  background: url(./img/suspects.jpg);
  background-position: 2pt -2pt;
  background-size: 280%;
}
[card-id="1"] {
  background: url(./img/suspects.jpg);
  background-position: -130pt -107pt;
  background-size: 280%;
}
[card-id="2"] {
  background: url(./img/suspects.jpg);
  background-position: -64pt -2pt;
  background-size: 280%;
}
[card-id="3"] {
  background: url(./img/suspects.jpg);
  background-position: -64pt -106pt;
  background-size: 280%;
}
[card-id="4"] {
  background: url(./img/suspects.jpg);
  background-position: -130pt -3pt;
  background-size: 280%;
}
[card-id="5"] {
  background: url(./img/suspects.jpg);
  background-position: 1pt -106pt;
  background-size: 280%;
}

[card-id="6"] {
  background: url(./img/weapons.jpg);
  background-position: -68pt -2pt;
  background-size: 290%;
}
[card-id="7"] {
  background: url(./img/weapons.jpg);
  background-position: 3pt -1pt;
  background-size: 290%;
}
[card-id="8"] {
  background: url(./img/weapons.jpg);
  background-position: 2pt -106pt;
  background-size: 290%;
}
[card-id="9"] {
  background: url(./img/weapons.jpg);
  background-position: -136pt -105pt;
  background-size: 290%;
}
[card-id="10"] {
  background: url(./img/weapons.jpg);
  background-position: -69pt -106pt;
  background-size: 290%;
}
[card-id="11"] {
  background: url(./img/weapons.jpg);
  background-position: -136pt 1pt;
  background-size: 290%;
}

[card-id="12"] {
  background: url(./img/rooms.jpg);
  background-position: -205pt -2pt;
  background-size: 480%;
}
[card-id="13"] {
  background: url(./img/rooms.jpg);
  background-position: -271pt -1pt;
  background-size: 480%;
}
[card-id="14"] {
  background: url(./img/rooms.jpg);
  background-position: 0pt -106pt;
  background-size: 480%;
}
[card-id="15"] {
  background: url(./img/rooms.jpg);
  background-position: -136pt -2pt;
  background-size: 480%;
}
[card-id="16"] {
  background: url(./img/rooms.jpg);
  background-position: -68pt -107pt;
  background-size: 480%;
}
[card-id="17"] {
  background: url(./img/rooms.jpg);
  background-position: -136pt -107pt;
  background-size: 480%;
}
[card-id="18"] {
  background: url(./img/rooms.jpg);
  background-position: -68pt -2pt;
  background-size: 480%;
}
[card-id="19"] {
  background: url(./img/rooms.jpg);
  background-position: 0pt -2pt;
  background-size: 480%;
}
[card-id="20"] {
  background: url(./img/rooms.jpg);
  background-position: -205pt -107pt;
  background-size: 480%;
}