/* ============================================================
   Cát Tê — bố cục bàn chơi (bản chỉnh)
   ============================================================ */

.table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* đấu trường ở giữa */
.arena {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}

/* vòng đánh ở giữa */
.trick {
  display: grid;
  grid-template-columns: 66px 74px 66px;
  grid-template-rows: 70px 84px 70px;
  gap: 4px;
  place-items: center;
  align-content: center;
}
.slot { display: grid; place-items: center; }
.slot--top { grid-area: 1 / 2; }
.slot--left { grid-area: 2 / 1; }
.slot--center { grid-area: 2 / 2; }
.slot--right { grid-area: 2 / 3; }
.slot--you { grid-area: 3 / 2; }

/* ghế hai bên */
.seat--left,
.seat--right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 5px;
  width: 66px;
  z-index: 2;
}
.seat--left { left: 0; align-items: flex-start; }
.seat--right { right: 0; align-items: flex-end; }

.seat--left .seat__info,
.seat--right .seat__info {
  flex-direction: column;
  gap: 2px;
  padding: 5px 7px;
  border-radius: 10px;
}
.seat--left .seat__name,
.seat--right .seat__name { font-size: 10.5px; }
.seat--left .seat__tricks,
.seat--right .seat__tricks { gap: 2px; }
.seat--left .seat__tricks .dot,
.seat--right .seat__tricks .dot { width: 5px; height: 5px; }

.seat--left .seat__hand,
.seat--right .seat__hand {
  display: grid;
  grid-template-columns: repeat(3, 13px);
  gap: 2px;
  justify-content: start;
}
.seat--right .seat__hand { justify-content: end; }

/* ghế trên */
.seat--top { justify-content: center; }
.seat--top .seat__hand { display: flex; gap: 2px; }

/* lá đã đánh nhỏ hơn một chút cho vừa khung */
.trick .card { width: 50px; height: 70px; }
.trick .card__rank { font-size: 13px; }
.trick .card__suit { font-size: 10px; top: 17px; }
.trick .card__big { font-size: 22px; }

/* tay bài của mình */
.hand-wrap { padding: 0 var(--s3) 2px; }
.hand { min-height: 86px; }
.hand .card { width: 50px; height: 72px; }

/* chân trang gọn hơn */
.foot { min-height: 42px; }
.foot .btn { height: 38px; padding: 0 14px; font-size: 13px; }

@media (max-height: 700px) {
  .trick { grid-template-columns: 58px 64px 58px; grid-template-rows: 60px 74px 60px; }
  .trick .card { width: 44px; height: 62px; }
  .trick .card__big { font-size: 18px; }
  .trick .card__rank { font-size: 11px; }
  .seat--left, .seat--right { width: 58px; }
  .seat--left .seat__hand, .seat--right .seat__hand { grid-template-columns: repeat(3, 11px); }
  .seat__hand .mini { width: 11px; height: 16px; }
  .hand .card { width: 44px; height: 64px; }
  .hand { min-height: 76px; gap: 3px; }
  .round-badge { padding: 6px 9px; }
  .round-badge__n { font-size: 18px; }
  .round-badge__t { font-size: 9px; }
}

@media (max-height: 620px) {
  .trick { grid-template-columns: 50px 56px 50px; grid-template-rows: 52px 66px 52px; }
  .trick .card { width: 40px; height: 56px; }
  .hand .card { width: 40px; height: 58px; }
  .hand { min-height: 66px; }
  .brand__name { display: none; }
}


/* tay bai nam ngay tren chieu */
.hand-wrap {
  margin-top: auto;
  padding: 4px 0 0;
}
.table .hand { justify-content: center; }


/* hoa van giua chieu */
.arena__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%);
  color: rgba(228, 184, 118, .5);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.arena__mark svg { width: 100%; height: 100%; display: block; }


/* hộp thoại cao hơn màn hình thì cuộn được */
.modal {
  align-items: flex-start;
  overflow: auto;
  padding: 12px;
}
.modal .result-card {
  margin: auto;
  max-height: calc(100vh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}