/* Mesa e baralho AR. Somente apresentação; mãos e regras ficam no servidor. */
.ar-pro-table {
  position: relative;
  isolation: isolate;
  border: 12px solid #151b19;
  border-radius: 46px;
  outline: 1px solid #687365;
  background-color: #104733;
  background-image:
    repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #00000007 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 35%, #236b4f 0%, #12513a 44%, #0a3527 100%);
  box-shadow: inset 0 0 0 2px #d5c28b88, inset 0 0 0 6px #061c1788,
    inset 0 0 65px #021e19a6, 0 2px 0 2px #313b34, 0 20px 38px #0005;
  overflow: hidden;
}
.ar-pro-table::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid #e4d3a63b;
  border-radius: 25px;
  pointer-events: none;
  z-index: 0;
}
.ar-pro-table::after {
  content: "";
  position: absolute;
  width: min(55%, 290px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url('/assets/ar-mark-felt.svg') center / contain no-repeat;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}
.ar-pro-table > * { position: relative; z-index: 1; }
.ar-pro-table .felt-texture { display: none; }
.felt-table.ar-pro-table { padding: 24px; border-radius: 38px; }
.ar-pro-table .center-piles {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  align-content: center;
  gap: 18px 18px;
  padding: 12px 0;
}
.ar-pro-table .team-zone {
  background: #061f189c;
  border-color: #c5d5be38;
  box-shadow: inset 0 1px 0 #ffffff08;
}
.ar-pro-table .meld-group { background: #c6dbc00d; border-color: #c6dbc033; }
.ar-pro-table .pile-label, .ar-pro-table .pile-count { color: #f0e8cc; }
.ar-pro-table .player-seat { background: #082c21cc; }
.table.ar-pro-table { padding: 26px 28px 30px; min-height: 320px; border-radius: 46px; }
.ar-pro-table #table-hint, .ar-pro-table .vira-zone small { color: #d8e8cf; }
.ar-pro-table .eyebrow { color: #f2d99e; }
.ar-pro-table #manilha, .ar-pro-table #event { color: #ffdb99; }
.ar-pro-table .play-slot .who { color: #f8edd7; font-size: 13px; }
.ar-custom-back.ar-custom-back {
  background: #174d7a url('/assets/ar-card-back-blue.svg') center / 100% 100% no-repeat;
  border: 0;
  padding: 0;
  color: transparent;
  border-radius: 8px;
  box-shadow: 0 3px 2px #0002, 0 7px 14px #0004;
}
.ar-custom-back.ar-back-red { background-image: url('/assets/ar-card-back-red.svg'); background-color: #9c293b; }
.ar-custom-back.ar-back-blue { background-image: url('/assets/ar-card-back-blue.svg'); }
.ar-custom-back > * { visibility: hidden; }
.ar-custom-back.playing-card { width: 65px; height: 91px; }
.ar-custom-back.preview-card, .ar-custom-back.big-card { aspect-ratio: 5 / 7; height: auto; }
.ar-pro-table .card-stack { isolation: isolate; }
.ar-pro-table .card-stack::after {
  z-index: -1;
  inset: 5px -4px -4px 4px;
  background: #eee2c5;
  box-shadow: 2px 2px 0 #aeb6a3;
}
@media (max-width: 700px) {
  .felt-table.ar-pro-table, .table.ar-pro-table { padding: 17px 10px 22px; border-width: 7px; border-radius: 28px; }
  .ar-pro-table::before { inset: 7px; border-radius: 17px; }
  .ar-pro-table .center-piles { gap: 13px 22px; padding: 8px 0 16px; }
  .ar-custom-back.playing-card { width: 56px; height: 78px; }
  .table.ar-pro-table .play-slot .who { font-size: 12px; }
}
@media (min-width: 1200px) {
  .tv-mode .table.ar-pro-table { min-height: 430px; padding-top: 30px; }
}

/* Mesa vinho aprovada: tampo oval, borda preta e AR somente como marca d’água. */
.felt-table.ar-pro-table,
.table.ar-pro-table {
  border: 23px solid #17181c;
  border-radius: 185px / 135px;
  outline: 1px solid #555256;
  background-color: #741e30;
  background-image:
    url('/assets/ar-felt-pattern.svg'),
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 44%, #9c3547 0%, #7b2437 48%, #4b0e21 100%);
  background-size: 240px 240px, auto, auto;
  box-shadow:
    0 0 0 2px #080a0c,
    0 4px 0 3px #2b292d,
    0 22px 40px #0007,
    inset 0 0 0 2px #bd8c7766,
    inset 0 10px 24px #1e031952,
    inset 0 -10px 28px #1e031978;
  padding: 32px 36px 36px;
}
.ar-pro-table::before {
  inset: 16px;
  border: 1px solid #f4c6b62b;
  border-radius: 150px / 100px;
}
.ar-pro-table::after { opacity: .095; width: min(48%, 275px); }
.ar-pro-table .team-zone {
  padding: 18px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.ar-pro-table .team-title { padding-bottom: 10px; border-bottom: 1px solid #efd9cf26; }
.ar-pro-table .team-points,
.ar-pro-table .melds > p { color: #ead1cd; }
.ar-pro-table .meld-group { background: #2b071b33; border-color: #eac1b333; }
.ar-pro-table .meld-group.selected { border-color: #f1d995; background: #f1d99512; }
.ar-pro-table .player-seat { background: #2c0c19b8; border-color: #f3d2c33b; color: #f6e9d8; }
.ar-pro-table .player-seat .seat-round { background: #f1c6ba18; }
.ar-pro-table .player-seat .seat-cards { color: #e6c8c0; }
.ar-pro-table .player-seat.active { border-color: #f0d08c; box-shadow: 0 0 0 2px #f0d08c; }
.ar-pro-table .center-piles { gap: 18px 18px; }
.ar-pro-table .pile-label { font-size: 11px; letter-spacing: .14em; }
.ar-pro-table .pile-label,
.ar-pro-table .pile-count,
.ar-pro-table #table-hint,
.ar-pro-table .vira-zone small { color: #f4e2d2; }
.ar-pro-table .play-slot .who { color: #f7e8d8; }
.table.ar-pro-table { min-height: 360px; padding: 40px 40px 36px; }
.table.ar-pro-table .vira-zone { margin-bottom: 20px; }
.table.ar-pro-table #table-cards { gap: 22px; }
@media (min-width: 1500px) {
  .felt-table.ar-pro-table { padding-left: 62px; padding-right: 62px; }
  .tv-mode .table.ar-pro-table { min-height: 470px; padding-top: 54px; }
}
@media (max-width: 1000px) {
  .felt-table.ar-pro-table,
  .table.ar-pro-table { border-radius: 75px / 65px; padding: 26px 20px; border-width: 17px; }
  .ar-pro-table::before { inset: 12px; border-radius: 47px; }
}
@media (max-width: 700px) {
  .felt-table.ar-pro-table,
  .table.ar-pro-table { border-radius: 34px; padding: 20px 10px 24px; border-width: 11px; }
  .ar-pro-table::before { inset: 7px; border-radius: 20px; }
  .ar-pro-table::after { width: min(64%, 235px); }
  .ar-pro-table .team-zone { padding: 12px 6px; }
  .ar-pro-table .center-piles { gap: 12px 19px; }
  .ar-pro-table .pile-label { font-size: 9px; }
  .table.ar-pro-table { min-height: 345px; }
  .table.ar-pro-table #table-cards { gap: 12px; }
}