/* Ultimate Texas Hold'em: a rich green felt, the dealer's two cards at the
   top, five community-card slots in the middle and six seats with trips,
   ante, blind and play circles. Loaded after kit.css. */

.kt-uth {
  --felt: #114d36;
  --felt-hi: #1e7352;
  --felt-deep: #072b1e;
  --pw: clamp(38px, 4vw, 54px);
}

.board-area {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.board-slots,
#board-cards {
  display: flex;
  gap: 6px;
}

#board-cards {
  position: absolute;
  inset: 0;
  justify-content: flex-start;
}

#board-cards .pc + .pc {
  margin-left: 0;
}

.board-slots i {
  width: var(--pw);
  aspect-ratio: 100 / 140;
  border: 1.5px dashed rgba(244, 222, 160, 0.3);
  border-radius: 7%;
}

.uth-felt .k-print {
  top: 39.5%;
}

.uth-felt .felt-msg {
  top: 53%;
}

@media (min-width: 761px) {
  .uth-felt .seat {
    width: min(15.5%, 170px);
  }
}

.uth-felt .hand {
  min-height: calc(var(--pw) * 1.4);
}

.uth-felt .seat[data-kind="you"] .hand .pc + .pc {
  margin-left: 4px;
}

.uth-felt .hand .pc + .pc {
  margin-left: calc(var(--pw) * -0.3);
}

.uth-felt .circles {
  gap: 4px;
}

.uth-felt .circle {
  width: 36px;
  height: 36px;
}

.uth-felt .c-label {
  font-size: 7px;
  letter-spacing: 0.04em;
}

.uth-felt .c-trips {
  border-color: rgba(246, 215, 125, 0.75);
}

.uth-felt .c-play {
  border-style: dashed;
}

.ab-side .spot-name {
  font-size: 13px;
}

@media (max-width: 760px) {
  .kt-uth {
    --pw: 34px;
  }

  .board-area {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    order: 2;
  }

  .uth-felt .k-print {
    order: 3;
  }

  .uth-felt .circles {
    display: grid;
    grid-template-columns: repeat(2, 30px);
    gap: 3px;
  }

  .uth-felt .circle {
    width: 30px;
    height: 30px;
  }

  .uth-felt .c-label {
    font-size: 6px;
  }

  .uth-felt .kchip {
    min-width: 20px;
    height: 20px;
    font-size: 8.5px;
  }
}