* {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  background-color: rgb(18, 153, 0);
}

#debug {
  position: absolute;
  bottom: 0;
  z-index: 999;
}

#spielfeld {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr;
  grid-row-gap: 40px;
  height: 100%;
}

#player {
  width: 98%;
  height: 200px;
  margin: auto;
  display: grid;
  grid-column-gap: 5px;
  grid-template-columns: repeat(2, 1fr);
}

.player {
  box-sizing: border-box;
  border-style: none solid solid solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#player1 {
  width: 95%;
  margin: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-style: solid solid none solid;
}
.playername {
  text-align: center;
  font-weight: bold;
}

.pile {
  width: 95%;
  margin: auto;
  height: 160px;
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  grid-column-gap: 2px;
}
.pileslot {
  width: 110px;
  border: 1px solid #000;
  background-color: #fff !important;
  border-radius: 10px;
}

.pileslot:nth-child(0) {
  border: 0;
}

#mainstock_pile {
  width: 500px;
  height: 200px;
  display: grid;
  margin: auto;
  grid-template-columns: repeat(4, 1fr);
}
.mainstock_pile {
  width: 110px;
  height: 160px;
  border: 1px solid #000;
  background-color: #fff;
  border-radius: 10px;
}

.card_outer {
  height: 100%;
  width: 100%;
  background-color: #fff;
  position: absolute;
}
.card_tri {
  position: absolute;
  height: 140px;
  width: 90px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}
.card_color_green {
  background: linear-gradient(
    45deg,
    #63b846 20%,
    white 20%,
    white 80%,
    #63b846 80%,
    white 80%,
    #63b846 80%
  );
}
.card_color_red {
  background: linear-gradient(
    45deg,
    #d41389 20%,
    white 20%,
    white 80%,
    #d41389 80%,
    white 80%,
    #d41389 80%
  );
}
.card_color_blue {
  background: linear-gradient(
    45deg,
    #27388b 20%,
    white 20%,
    white 80%,
    #27388b 80%,
    white 80%,
    #27388b 80%
  );
}
.green {
  color: #63b846;
}
.red {
  color: #d41389;
}
.blue {
  color: #27388b;
}
.card_color_joker {
  background: linear-gradient(
    45deg,
    #27388b 6.66%,
    #63b846 6.66%,
    #63b846 13.33%,
    #d41389 13.33%,
    #d41389 20%,
    white 20%,
    white 80%,
    #d41389 80%,
    #d41389 86.66%,
    #63b846 86.66%,
    #63b846 93.33%,
    #27388b 93.33%
  );
}
.card_number {
  position: absolute;
  font-size: 18pt;
  font-weight: bold;
  background-color: #fff;
}
.card_number_middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30pt;
  font-weight: bold;
  background-color: #fff;
}
.card_number_1 {
  top: 10px;
  left: 10px;
}
.card_number_2 {
  bottom: 10px;
  right: 10px;
}
.card_border {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px solid #000;
  border-radius: 10px;
}
.card_number_joker_middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14pt;
  width: 100%;
  background-color: #fff;
  text-align: center;
  font-weight: bold;
}
.card_number_joker_1 {
  top: 28%;
  left: 50%;
  transform: translate(-50%, -28%);
}
.card_number_joker_2 {
  top: 75%;
  left: 50%;
  transform: translate(-50%, -75%);
}

*[draggable=true] {
  cursor: move;
}
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

.over {
  border: 2px dashed #000;
}

.mainstock_pile * {
  pointer-events: none;
}