/* ABCPLAY · poker/table-v11.css
 * Texas Hold’em: spillets layout, kort, knapper og skærmstørrelser. Regler længere nede kan overstyre tidligere regler.
 * .navn vælger en CSS-klasse; #navn vælger et HTML-id.
 * @media tilpasser udseendet til bestemte skærmstørrelser.
 */

/* ABCPLAY Poker v10: one layout stylesheet for both game modes. */
main {
  max-width: 1320px;
}
.poker-table-shell,
#table .poker-table-shell {
  width: 100%;
  margin: 16px auto 25px;
  padding: 0;
  overflow: visible;
}
.poker-felt,
#table .poker-felt {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.82 / 1;
  padding: 0;
  overflow: hidden;
  border: clamp(12px, 2.4vw, 27px) solid #302b29;
  border-radius: 49% / 46%;
  background: radial-gradient(ellipse at 50% 48%, #31875b, #176440 70%, #104831);
  box-shadow:
    inset 0 0 0 4px #aa8250,
    inset 0 0 45px #062d20,
    0 12px 26px #0007;
  isolation: isolate;
}
.poker-felt:before {
  content: "ABCPLAY  ·  TEXAS HOLD’EM";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(11px, 2vw, 24px);
  letter-spacing: 0.15em;
  font-weight: 900;
  color: #ffffff10;
  white-space: nowrap;
  pointer-events: none;
}
.opponents,
#table .poker-players {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.opponents .poker-seat,
#table .poker-players .seat,
.hero-seat,
#table .my-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  max-width: none;
  width: 120px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  flex: none;
  pointer-events: none;
  text-align: center;
}
.opponents .poker-seat,
#table .poker-players .seat {
  left: var(--seat-x, 50%);
  top: var(--seat-y, 20%);
  transform: translate(-50%, -50%);
}
.opponents .poker-seat:nth-child(1):last-child {
  --seat-x: 50%;
  --seat-y: 19%;
}
.opponents .poker-seat:nth-child(1):nth-last-child(2) {
  --seat-x: 26%;
  --seat-y: 24%;
}
.opponents .poker-seat:nth-child(2):last-child {
  --seat-x: 74%;
  --seat-y: 24%;
}
.opponents .poker-seat:nth-child(1):nth-last-child(3) {
  --seat-x: 23%;
  --seat-y: 28%;
}
.opponents .poker-seat:nth-child(2):nth-last-child(2) {
  --seat-x: 50%;
  --seat-y: 18%;
}
.opponents .poker-seat:nth-child(3):last-child {
  --seat-x: 77%;
  --seat-y: 28%;
}
.opponents .poker-seat b,
#table .poker-players .seat strong,
.hero-seat b,
#table .my-seat h3 {
  order: 5;
  display: block;
  margin: 2px 0 0;
  padding: 2px 6px;
  border-radius: 8px;
  background: #0c3024d9;
  color: #ffe8b2;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.opponents .poker-seat .hand,
#table .poker-players .seat .hand,
.hero-seat .hand,
#table .my-seat #mine {
  order: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 0;
  height: auto;
  margin: 0;
  max-width: none;
  width: auto;
}
.opponents .poker-seat .card,
#table .poker-players .seat .card,
.hero-seat .card,
#table .my-seat .card {
  flex: none;
  transform: none;
  margin: 0;
  padding: 3px;
  width: 46px;
  height: 67px;
  font-size: 12px;
}
.opponents .poker-seat .card .suit,
#table .poker-players .seat .card .suit,
.hero-seat .card .suit,
#table .my-seat .card .suit {
  font-size: 23px;
}
.opponents .poker-seat .seat-stack,
#table .poker-players .seat .seat-stack,
.hero-seat .seat-stack,
#table .my-seat .my-stack {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 0;
  margin: 0;
}
.opponents .poker-seat .seat-bet,
#table .poker-players .seat .seat-bet,
.hero-seat .seat-bet {
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 0;
  margin: 0;
  font-size: 10px;
  color: #ffe4a5;
}
.opponents .poker-seat .chip-stack,
#table .poker-players .seat .chip-stack,
.hero-seat .chip-stack,
#table .my-seat .chip-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 11px;
  white-space: nowrap;
}
.opponents .poker-seat .chip-discs,
#table .poker-players .seat .chip-discs,
.hero-seat .chip-discs,
#table .my-seat .chip-discs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  height: 28px;
  padding: 7px 2px 0 7px;
  overflow: hidden;
  transform: none;
}
.opponents .poker-seat .poker-chip,
#table .poker-players .seat .poker-chip,
.hero-seat .poker-chip,
#table .my-seat .poker-chip {
  width: 17px;
  height: 17px;
  margin: -7px 0 0 -5px;
  border-width: 2px;
}
.opponents .poker-seat .chip-value,
#table .poker-players .seat .chip-value,
.hero-seat .chip-value,
#table .my-seat .chip-value {
  font-size: 11px;
  line-height: 1.25;
  min-width: 0;
  margin: 0;
  color: #ffe6a4;
  text-align: center;
}
.opponents .poker-seat.folded,
#table .poker-players .seat.folded {
  opacity: 0.48;
}
#table .poker-players .seat.is-me {
  display: none;
}
#table .poker-players .seat.active strong {
  outline: 2px solid #f1d58f;
}
.hero-seat,
#table .my-seat {
  left: 50%;
  top: auto;
  bottom: 3%;
  transform: translateX(-50%);
  width: 140px;
  z-index: 4;
}
.hero-seat .card,
#table .my-seat .card {
  width: 52px;
  height: 76px;
  font-size: 14px;
}
.hero-seat .card .suit,
#table .my-seat .card .suit {
  font-size: 26px;
}
.table-center,
#table .table-center {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  width: 62%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  z-index: 2;
  pointer-events: none;
}
.table-center .table-street {
  font-size: 13px;
}
.table-center .community-cards,
#table .table-center .community-cards {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 0;
  height: auto;
  width: auto;
  margin: 0;
}
.table-center .community-cards .card,
#table .table-center .community-cards .card {
  width: clamp(38px, 5vw, 66px);
  height: clamp(56px, 7.3vw, 95px);
  font-size: 16px;
  transform: none;
  margin: 0;
  flex: none;
}
.table-center .community-cards .card .suit,
#table .table-center .community-cards .card .suit {
  font-size: 26px;
}
.table-center .table-pot,
#table .table-center .table-pot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 6px 13px;
  pointer-events: auto;
}
.table-center .table-pot .chip-stack {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-direction: row;
}
#table #mine {
  min-height: 0;
}
#table .seat .seat-bet .bet-dot {
  display: none;
}
/* Tilpasning til skærmstørrelse eller skærmretning. */
@media (max-width: 850px) {
  .poker-felt,
  #table .poker-felt {
    aspect-ratio: 1.42 / 1;
  }
  .opponents .poker-seat,
  #table .poker-players .seat {
    width: 95px;
  }
  .opponents .poker-seat .card,
  #table .poker-players .seat .card {
    width: 36px;
    height: 54px;
    font-size: 10px;
  }
  .opponents .poker-seat .card .suit,
  #table .poker-players .seat .card .suit {
    font-size: 19px;
  }
  .table-center,
  #table .table-center {
    top: 53%;
    width: 76%;
  }
}
/* Tilpasning til skærmstørrelse eller skærmretning. */
@media (max-width: 550px) {
  .poker-felt,
  #table .poker-felt {
    aspect-ratio: 1 / 1.2;
    border-width: 11px;
    border-radius: 39% / 27%;
  }
  .opponents .poker-seat,
  #table .poker-players .seat {
    width: 69px;
    gap: 1px;
  }
  .opponents .poker-seat .card,
  #table .poker-players .seat .card {
    width: 26px;
    height: 39px;
    font-size: 9px;
    padding: 1px;
    border-width: 1px;
  }
  .opponents .poker-seat .card .suit,
  #table .poker-players .seat .card .suit {
    font-size: 14px;
  }
  .opponents .poker-seat b,
  #table .poker-players .seat strong,
  .hero-seat b,
  #table .my-seat h3 {
    font-size: 9px;
    padding: 2px 3px;
  }
  .hero-seat,
  #table .my-seat {
    bottom: 1%;
    width: 100px;
  }
  .hero-seat .card,
  #table .my-seat .card {
    width: 35px;
    height: 51px;
    font-size: 10px;
  }
  .table-center,
  #table .table-center {
    top: 53%;
    width: 92%;
  }
  .table-center .community-cards .card,
  #table .table-center .community-cards .card {
    width: clamp(28px, 8.5vw, 40px);
    height: clamp(43px, 12vw, 60px);
    font-size: 10px;
  }
  .table-center .community-cards .card .suit {
    font-size: 18px;
  }
}

/* ABCPLAY v11: kort og jetonbeholdning side om side. */
.opponents .poker-seat .seat-main,
.hero-seat .seat-main,
#table .poker-players .seat .seat-main,
#table .my-seat .seat-main {
  order: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
.opponents .poker-seat .seat-main .hand,
.hero-seat .seat-main .hand,
#table .poker-players .seat .seat-main .hand,
#table .my-seat .seat-main .hand {
  order: 0;
  flex: none;
}
.opponents .poker-seat .seat-main .seat-stack,
.hero-seat .seat-main .seat-stack,
#table .poker-players .seat .seat-main .seat-stack,
#table .my-seat .seat-main .my-stack {
  order: 0;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-width: 44px;
}
/* Kun en lille, overskuelig stak; beholdningen vises ved siden af. */
.opponents .poker-seat .seat-main .chip-stack,
.hero-seat .seat-main .chip-stack,
#table .poker-players .seat .seat-main .chip-stack,
#table .my-seat .seat-main .chip-stack {
  flex-direction: column;
  gap: 3px;
}
.opponents .poker-seat .seat-main .chip-discs,
.hero-seat .seat-main .chip-discs,
#table .poker-players .seat .seat-main .chip-discs,
#table .my-seat .seat-main .chip-discs {
  width: 35px;
  min-width: 35px;
  max-width: 35px;
  height: 29px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 0 0 0 6px;
  overflow: visible;
}
.opponents .poker-seat .seat-main .poker-chip,
.hero-seat .seat-main .poker-chip,
#table .poker-players .seat .seat-main .poker-chip,
#table .my-seat .seat-main .poker-chip {
  display: none;
}
.opponents .poker-seat .seat-main .poker-chip:nth-child(-n + 3),
.hero-seat .seat-main .poker-chip:nth-child(-n + 3),
#table .poker-players .seat .seat-main .poker-chip:nth-child(-n + 3),
#table .my-seat .seat-main .poker-chip:nth-child(-n + 3) {
  display: inline-block;
  margin: 0 0 0 -5px;
  width: 20px;
  height: 20px;
}
.opponents .poker-seat .seat-main .chip-value,
.hero-seat .seat-main .chip-value,
#table .poker-players .seat .seat-main .chip-value,
#table .my-seat .seat-main .chip-value {
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
/* Indsatser er et enkelt tal i stedet for endnu en stor stak. */
.opponents .poker-seat .seat-bet .chip-discs,
.hero-seat .seat-bet .chip-discs {
  display: none;
}
.opponents .poker-seat .seat-bet .chip-stack,
.hero-seat .seat-bet .chip-stack {
  display: inline-flex;
  flex-direction: row;
}
.opponents .poker-seat .seat-bet,
.hero-seat .seat-bet {
  order: 3;
  flex-direction: row;
  gap: 4px;
  font-size: 11px;
}
#table .poker-players .seat .seat-bet {
  order: 3;
  font-size: 11px;
}
/* Tilpasning til skærmstørrelse eller skærmretning. */
@media (max-width: 850px) {
  .opponents .poker-seat .seat-main,
  .hero-seat .seat-main,
  #table .poker-players .seat .seat-main,
  #table .my-seat .seat-main {
    gap: 4px;
  }
  .opponents .poker-seat .seat-main .seat-stack,
  #table .poker-players .seat .seat-main .seat-stack {
    min-width: 32px;
  }
  .opponents .poker-seat .seat-main .chip-value,
  #table .poker-players .seat .seat-main .chip-value {
    font-size: 10px;
  }
}
/* Tilpasning til skærmstørrelse eller skærmretning. */
@media (max-width: 550px) {
  .opponents .poker-seat .seat-main .chip-discs,
  #table .poker-players .seat .seat-main .chip-discs {
    display: none;
  }
  .opponents .poker-seat .seat-main .seat-stack,
  #table .poker-players .seat .seat-main .seat-stack {
    min-width: 24px;
  }
  .opponents .poker-seat .seat-main .chip-value,
  #table .poker-players .seat .seat-main .chip-value {
    font-size: 9px;
  }
}