:root {
  --default-poker-width: 90px;
  --default-poker-height: 60px;
  --default-poker-font-size: 30px;
}

.poker {
  --poker-width: var(--default-poker-width);
  --poker-height: var(--default-poker-height);
  --poker-font-size: var(--default-poker-font-size);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--poker-width);
  height: var(--poker-height);
  cursor: pointer;
  font-size: var(--poker-font-size);
}
.has-card {
  background-color: #ffffff;
}

.poker.disabled * {
  color: var(--bs-light) !important;
}

.poker.disabled {
  background: var(--disabled-color);
  cursor: not-allowed;
  color: var(--bs-light) !important;
}

.poker.active {
  background: rgb(var(--bs-warning-rgb));
}

.poker.has-card.active:hover {
  background: rgb(var(--bs-danger-rgb), 0.5); /* 紅色背景表示刪除 */
  color: #fff; /* 字體白色更醒目 */
}

/* 可加 X 標記 */
.poker.has-card.active:hover::after {
  font-family: "bootstrap-icons"; /* 使用 Bootstrap Icons 字體 */
  content: "\F622"; /* bi-x 的 unicode */
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 1.2em;
  color: #fff;
}

.poker-note {
  --poker-note-font-size: var(--default-poker-font-size);
  font-size: var(--poker-note-font-size);
}

.cards-responsive .poker {
  --poker-width: calc(var(--default-poker-width) * 0.45);
  --poker-height: calc(var(--default-poker-height) * 0.45);
  --poker-font-size: calc(var(--default-poker-font-size) * 0.45);
}

.cards-responsive .poker-note {
  --poker-note-font-size: calc(var(--default-poker-font-size) * 0.45);
}

@media (min-width: 414px) {
  .cards-responsive .poker {
    --poker-width: calc(var(--default-poker-width) * 0.525);
    --poker-height: calc(var(--default-poker-height) * 0.525);
    --poker-font-size: calc(var(--default-poker-font-size) * 0.525);
  }
  .cards-responsive .poker-note {
    --poker-note-font-size: calc(var(--default-poker-font-size) * 0.525);
  }
}
@media (min-width: 576px) {
  .cards-responsive .poker {
    --poker-width: calc(var(--default-poker-width) * 0.7);
    --poker-height: calc(var(--default-poker-height) * 0.7);
    --poker-font-size: calc(var(--default-poker-font-size) * 0.7);
  }
  .cards-responsive .poker-note {
    --poker-note-font-size: calc(var(--default-poker-font-size) * 0.7);
  }
}
@media (min-width: 768px) {
  .cards-responsive .poker {
    --poker-width: calc(var(--default-poker-width) * 0.55);
    --poker-height: calc(var(--default-poker-height) * 0.55);
    --poker-font-size: calc(var(--default-poker-font-size) * 0.55);
  }
  .cards-responsive .poker-note {
    --poker-note-font-size: calc(var(--default-poker-font-size) * 0.55);
  }
}

@media (min-width: 992px) {
  .cards-responsive .poker {
    --poker-width: calc(var(--default-poker-width) * 0.75);
    --poker-height: calc(var(--default-poker-height) * 0.75);
    --poker-font-size: calc(var(--default-poker-font-size) * 0.75);
  }

  .cards-responsive .poker-note {
    --poker-note-font-size: calc(var(--default-poker-font-size) * 0.75);
  }
}
@media (min-width: 1200px) {
  .poker-responsive .poker {
    --poker-width: calc(var(--default-poker-width) * 0.9);
    --poker-height: calc(var(--default-poker-height) * 0.9);
    --poker-font-size: calc(var(--default-poker-font-size) * 0.9);
  }
  .cards-responsive .poker-note {
    --poker-note-font-size: calc(var(--default-poker-font-size) * 0.9);
  }
}
@media (min-width: 1400px) {
  .cards-responsive .poker {
    --poker-width: var(--default-poker-width);
    --poker-height: var(--default-poker-height);
    --poker-font-size: var(--default-poker-font-size);
  }
  .cards-responsive .poker-note {
    --poker-note-font-size: var(--default-poker-font-size);
  }
}