/* Live tables grid: cards with a mini table that shows the game as it is played (home page and game lobbies). */

.tgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 14px;
  min-width: 0;
}
.tgrid:empty { display: none; }

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)), var(--panel);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.tcard:hover, .tcard:focus-within { border-color: rgba(201, 169, 97, 0.5); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.tcard.busy { opacity: 0.6; pointer-events: none; }

.tc-head { padding: 12px 14px 0; min-width: 0; }
.tc-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tc-title b { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tc-title .badge-real { margin-left: 0; flex: none; }
.tc-sub { display: flex; gap: 8px; align-items: baseline; margin-top: 2px; font-size: 11.5px; color: var(--text-dim); min-width: 0; }
.tc-sub span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-stake { color: var(--gold-soft); font-weight: 750; font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }

.tc-body {
  padding: 18px 12px 14px; container-type: inline-size; flex: 1;
  display: flex; align-items: center; justify-content: center; min-height: 250px;
  background: radial-gradient(ellipse at 50% 55%, rgba(201, 169, 97, 0.045), transparent 72%);
}

.tc-foot { border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px 12px; }
.tc-seats { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.tc-watch { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tc-cta { margin-left: auto; max-width: 100%; }
.tc-cta .btn { min-height: 32px; height: auto; padding: 7px 12px; font-size: 12.5px; line-height: 1.2; white-space: normal; text-align: center; }
.tc-cta .btn-ghost { border: 1px solid var(--line-strong); color: var(--text-dim); }
.tc-cta .btn-row { border: 1px solid var(--line-strong); color: var(--text); background: transparent; }
.tcard:hover .tc-cta .btn, .tcard:focus-within .tc-cta .btn { border-color: var(--gold); color: var(--gold-soft); }
.tc-cta .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tc-cta [aria-disabled="true"] { opacity: 0.6; cursor: default; }

.seat-dots { display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 88px; }
.seat-dots i { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--line-field); }
.seat-dots i.on { background: var(--green-bright); border-color: var(--green-bright); }

.tcard.live-skeleton { min-height: 250px; padding: 14px; gap: 12px; cursor: default; }
.tcard.live-skeleton .sk { height: 16px; }
.tcard.live-skeleton .sk.tall { height: 130px; }

/* ---- mini table: shared ---- */
.mt { --mt-rim: #ff405c33; position: relative; width: 100%; font-size: clamp(8.5px, 3.4cqw, 11px); color: var(--text); line-height: 1.2; }
/* Pulse the whole rim's opacity; keep the masked gradient static so many
   mini tables do not regenerate it on every animation frame. */
.mt-rim-glow {
  position: absolute; inset: -2px; border: 2px solid transparent; border-radius: inherit;
  pointer-events: none; animation: mt-rim-pulse 3s ease-in-out infinite;
}
.mt-rim-glow::before {
  content: ""; position: absolute; inset: -2px; border: 2px solid #ff405c; border-radius: inherit;
  box-shadow: 0 0 13px #ff204d99, 0 0 4px #ff405ccc, inset 0 0 7px #ff204d66;
  opacity: 1;
}
/* Mask out the centre: only the thin rim carries the static red / pearl glint.
   The prefixed mask keeps the same ring in Safari; without masks, the glow remains. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .mt-rim-glow::after {
    content: ""; position: absolute; inset: -2px; padding: 3px; border-radius: inherit;
    background: conic-gradient(from 0deg, transparent 0deg 130deg,
      #d90e31 190deg, #ff405c 230deg, #fff1f4 250deg, #ff657a 263deg, transparent 295deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}
.mt-felt > .mt-rim-glow { inset: -10px; }
.mt-chinese .mt-rim-glow { border-radius: 38px; }
.bg-board > .mt-rim-glow { inset: -7px; border-radius: 7px; }
.mt-poker { color: #f4f4f6; }
.mt-nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.mt-avatar { display: block; width: 2.4em; height: 2.4em; flex: none; border-radius: 50%; object-fit: cover; }
.mt-last { display: block; min-height: 1.3em; text-align: center; color: var(--text-dim); font-size: 0.95em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; padding: 0 4px; }
.mt-card {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  width: 1.9em; height: 2.7em; padding: 0.25em 0.2em; flex: none;
  border-radius: 3px; background: linear-gradient(155deg, #fff, #f6f6fb 45%, #dcdce8);
  color: #0d0d13; font-size: 1em; font-weight: 800; line-height: 1;
  box-shadow: 0 3px 6px #0008, inset 0 0 0 1px #ffffffcc;
}
.mt-card.red { color: #e60b23; }
.mt-card i { position: absolute; right: 0.12em; bottom: 0.1em; font-style: normal; font-size: 1.35em; }
.mt-card.blank { background: #ffffff03; box-shadow: inset 0 1px 3px #0006; border: 1px dashed #ffffff26; }
.mt-card.back {
  background: repeating-linear-gradient(45deg, #ffffff17 0 2px, transparent 2px 4px), linear-gradient(160deg, #d42b2b, #a01414 45%, #5e0808);
  border: 1px solid #f3f3f8; box-shadow: 0 2px 4px #0008;
}
.mt-card.back::after { content: ""; position: absolute; inset: 13%; border: 1px solid #ffffff66; border-radius: 1px; }

/* ---- poker ---- */
.mt-poker { aspect-ratio: 1.45; max-width: 380px; }
.mt-felt {
  position: absolute; inset: 13% 7%; border-radius: 999px;
  background: var(--table-felt-surface);
  box-shadow: inset 0 0 0 1px #c9a96157, inset 0 0 22px #000b,
    0 0 0 2px #0d0e12, 0 0 0 3px #c9a96138, 0 0 0 8px #16171c,
    0 0 0 10px var(--mt-rim), 0 0 0 12px #0a0b0e, 0 12px 22px #000b;
}
.mt-felt::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0.06;
  background-image: var(--table-felt-pattern); background-size: 24px 24px;
}
.mt-felt::after {
  content: ""; position: absolute; inset: 16% 32%; opacity: 0.14;
  background: url("/assets/logo-flat.webp") center / contain no-repeat; filter: saturate(0.5);
}
.mt-poker .mt-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56%; display: flex; flex-direction: column; align-items: center; gap: 0.35em; z-index: 1; }
.mt-pot { padding: 0.1em 0.7em; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #e9f3ee; white-space: nowrap; }
.mt-pot b { color: #e3c98d; font-variant-numeric: tabular-nums; display: inline-block; }
.mt-board { display: flex; gap: 0.25em; }
.mt-board.hidden { opacity: 0.35; }
.mt-poker .mt-last { color: #c8c6c1; background: transparent; width: 100%; }
.mt-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 22%; z-index: 2; }
.mt-chair {
  display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%;
  border: 1.5px solid #b49c67; background: radial-gradient(circle at 40% 25%, #56535a, #25242c 65%, #14141a);
  color: #f3e5c4; font-style: normal; font-weight: 750; box-sizing: border-box;
  box-shadow: inset 0 1px 3px #ffffff26, 0 3px 7px #000b;
}
.mt-seat.free .mt-chair { border: 1px dashed #b49c6766; background: #121217b3; width: 2.2em; height: 2.2em; box-shadow: inset 0 2px 5px #0008; }
.mt-chair .mt-avatar { width: 100%; height: 100%; }
.mt-seat .mt-nm, .mt-seat .mt-stack { background: rgba(0, 0, 0, 0.62); color: #f4f4f6; padding: 0 0.4em; border-radius: 3px; font-size: 0.92em; }
.mt-seat .mt-stack { color: #e3c98d; font-variant-numeric: tabular-nums; margin-top: 1px; }
.mt-seat .mt-nm:empty, .mt-seat .mt-stack:empty { display: none; }
.mt-seat.folded { opacity: 0.62; }
.mt-seat.folded .mt-chair { border-color: rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.45); }
.mt-seat.allin .mt-chair { border-color: var(--red-bright); background: var(--red-deep); }
.mt-badge { position: absolute; top: -0.9em; font-style: normal; font-size: 0.82em; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; background: var(--red); color: #fff; padding: 0 0.45em; border-radius: 3px; white-space: nowrap; }
.mt-badge.dim { background: #555; }
.mt-seat.turn .mt-chair { border-color: var(--gold); animation: mt-ring 1.4s ease-in-out infinite; }
.mt-d { position: absolute; top: -0.2em; right: 18%; width: 1.7em; height: 1.7em; border-radius: 50%; background: #fff; color: #111; font-size: 0.85em; font-weight: 900; display: grid; place-items: center; border: 1.5px solid var(--gold); }

/* ---- chinese poker ---- */
.mt-chinese {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center;
  gap: 0.8em; min-height: 218px; padding: 26px 10px; color: #f4f4f6;
  --text: #f4f4f6; --text-dim: #b9b7bf; --text-mute: #a09ca5;
}
.mt-chinese > .mt-felt { inset: 5% 2%; border-radius: 28px; z-index: -1; }
.mt-chinese > .mt-felt::after { inset: 12% 34%; }
.mt-chinese .mt-last { color: #b9b7bf; }
.mt-cps { display: flex; gap: 6px; align-items: stretch; }
.mt-cp { flex: 1 1 0; min-width: 0; padding: 0.5em; border-radius: 8px; background: linear-gradient(150deg, #27272db3, #08080cc9); border: 1px solid #c9a96133; box-shadow: 0 4px 8px #0006; display: flex; flex-direction: column; gap: 0.35em; }
.mt-cp.turn { border-color: var(--gold); animation: mt-ring 1.4s ease-in-out infinite; }
.mt-cp.fouled { opacity: 0.6; }
.mt-cp.free { align-items: center; justify-content: center; border-style: dashed; color: var(--text-mute); min-height: 7em; }
.mt-cp-head { display: flex; justify-content: space-between; gap: 0.4em; align-items: center; flex-wrap: wrap; }
.mt-cp-head .mt-nm { color: var(--text); order: 1; flex: 1 1 100%; min-width: 0; }
.mt-cp-head .mt-score { margin-left: auto; }
.mt-score { color: var(--gold-soft); font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 3px; padding: 0 2px; }
.mt-crow { display: flex; gap: 2px; justify-content: center; }
.mt-chinese .mt-card { flex: 1 1 0; min-width: 0; max-width: 1.75em; width: auto; height: 2.3em; font-size: 0.85em; }
.mt-chinese .mt-card i { display: none; }
.mt-chinese .mt-card.red { color: #c8102e; }

/* ---- boards (chess, checkers) ---- */
.mt-chess, .mt-checkers, .mt-backgammon { display: flex; flex-direction: column; align-items: center; gap: 0.5em; }
.mt-players { display: flex; justify-content: space-between; gap: 0.6em; width: 100%; }
.mt-pl { display: inline-flex; align-items: center; gap: 0.4em; min-width: 0; color: var(--text-dim); }
.mt-pl i { width: 0.9em; height: 0.9em; border-radius: 50%; flex: none; border: 1.5px solid var(--line-field); }
.mt-pl.w i { background: #f6f6fa; }
.mt-pl.b i { background: #14141a; }
.mt-pl.turn { color: var(--text); }
.mt-pl.turn i { border-color: var(--gold); animation: mt-ring 1.4s ease-in-out infinite; }
/* These textures and piece atlases are rendered from the same GLBs as the game.
   Only DOM positions change during live updates; no per-card WebGL context. */
.mt-board-frame {
  position: relative; width: min(100%, 82cqw, 280px); aspect-ratio: 1;
  background: #28282b url("/assets/mini-tables/chess-board.webp") center / 100% 100%;
  border-radius: 3px; box-shadow: 0 0 0 2px var(--mt-rim), 0 10px 18px #0007, 0 1px 0 #ffffff12;
}
.mt-checkers .mt-board-frame { background-image: url("/assets/mini-tables/checkers-board.webp"); }
.mt-grid {
  position: absolute; inset: 6.498%; display: grid; grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
}
.mt-checkers .mt-grid { inset: 5.685%; }
.mt .sq { position: relative; display: grid; place-items: center; background-size: 100% 100%; }
.mt-chess .sq.lt { background-image: url("/assets/mini-tables/chess-light.webp"); }
.mt-chess .sq.dk { background-image: url("/assets/mini-tables/chess-dark.webp"); }
.mt-checkers .sq.lt { background-image: url("/assets/mini-tables/checkers-light.webp"); }
.mt-checkers .sq.dk { background-image: url("/assets/mini-tables/checkers-dark.webp"); }
.mt .sq.last::after { content: ""; position: absolute; inset: 0; background: #e7bb4d55; box-shadow: inset 0 0 0 1px #ffe09a80; pointer-events: none; }
.mt .sq.last { animation: mt-square 1s ease-out; }
.mt .pc {
  position: absolute; width: 150%; height: 180%; bottom: -5%; z-index: 1;
  background: url("/assets/mini-tables/chess-pieces.webp") 0 0 / 600% 200% no-repeat;
  pointer-events: none; filter: drop-shadow(0 2px 1px #0006);
}
.mt .pc.b { background-position-y: 100%; }
.mt .pc[data-piece="p"] { background-position-x: 0%; }
.mt .pc[data-piece="r"] { background-position-x: 20%; }
.mt .pc[data-piece="n"] { background-position-x: 40%; }
.mt .pc[data-piece="b"] { background-position-x: 60%; }
.mt .pc[data-piece="q"] { background-position-x: 80%; }
.mt .pc[data-piece="k"] { background-position-x: 100%; }
.mt .ck {
  position: absolute; width: 110%; height: 110%; bottom: 0; z-index: 1;
  background: url("/assets/mini-tables/checkers-pieces.webp") 0 0 / 400% 100% no-repeat;
  pointer-events: none;
}
.mt .ck.w.king { background-position-x: 33.333%; }
.mt .ck.b { background-position-x: 66.667%; }
.mt .ck.b.king { background-position-x: 100%; }
/* International draughts has 10x10 cells, with the same wood and pieces. */
.mt-board-frame[data-size="10"] { background-image: none; background-color: #ae8553; border: 7px ridge #a77e4e; }
.mt-board-frame[data-size="10"] > .mt-rim-glow { inset: -9px; }
.mt-board-frame[data-size="10"] .mt-grid { inset: 0; }

/* ---- backgammon ---- */
.bg-board {
  position: relative; display: grid; grid-template-columns: 1fr 6px 1fr; grid-template-rows: 1fr 1fr;
  width: min(100%, 88cqw, 310px); aspect-ratio: 1.293;
  background: #202127 url("/assets/mini-tables/backgammon-board.webp") center / 100% 100%;
  border: 5px solid #17171c; outline: 2px solid var(--mt-rim); border-radius: 5px;
  box-shadow: inset 0 0 0 1px #c9a96159, 0 10px 22px #0009;
}
.bg-board > :nth-child(1) { grid-area: 1 / 1; }
.bg-board > :nth-child(2) { grid-area: 1 / 3; }
.bg-board > :nth-child(3) { grid-area: 1 / 2 / 3 / 3; }
.bg-board > :nth-child(4) { grid-area: 2 / 1; }
.bg-board > :nth-child(5) { grid-area: 2 / 3; }
.bg-half { display: grid; grid-template-columns: repeat(6, 1fr); min-height: 0; }
.bg-pt { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 1px 0; overflow: hidden; }
.bg-half.bot .bg-pt { flex-direction: column-reverse; }
.bg-ch { position: relative; z-index: 1; width: 86%; max-width: 19px; aspect-ratio: 1; border-radius: 50%; margin: 0.5px 0; box-shadow: inset 0 0 0 1px #ffffff40, inset 0 -2px 2px #0005, 0 2px 2px #000b; }
.bg-ch.w { background: radial-gradient(circle at 35% 30%, #fff, #e4e0d5 65%, #a9a49c); }
.bg-ch.b { background: radial-gradient(circle at 35% 30%, #4a4a52, #0e0e12); border: 1px solid #777; }
.bg-pt b { position: relative; z-index: 1; font-size: 0.8em; color: #fff; text-shadow: 0 0 2px #000; }
.bg-bar { display: grid; place-items: center; background: #17171c; box-shadow: 0 0 0 1px #c9a96133; }
.bg-barbox { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.85em; }
.mt-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; width: 100%; }
.mt-foot .mt-last { flex: 1; }
.mt-dice { display: inline-flex; gap: 3px; min-width: 3.6em; }
.die {
  text-decoration: none; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 1px; padding: 3px; width: 2em; height: 2em; border-radius: 4px;
  background: linear-gradient(145deg, #fff, #e3dfd4); color: #14141a;
  box-shadow: inset 0 -1px 2px #0004, 0 2px 4px #0006;
}
.die i { border-radius: 50%; aspect-ratio: 1; }
.die .pip { background: #202127; box-shadow: inset 0 1px 1px #0008; }
.mt-off { color: var(--text-mute); min-width: 3.6em; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- change animations ---- */
@keyframes mt-rim-pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes mt-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.7); } 50% { box-shadow: 0 0 0 4px rgba(201, 169, 97, 0); } }
@keyframes mt-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); color: #fff; } 100% { transform: scale(1); } }
@keyframes mt-deal { from { transform: translateY(-10px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mt-flash { 0% { background: rgba(201, 169, 97, 0.55); } 100% { background: transparent; } }
@keyframes mt-square { 0% { filter: brightness(1.6); } 100% { filter: none; } }
.mt-pot.bump b { animation: mt-bump 0.8s ease-out; }
.mt-card.fresh { animation: mt-deal 0.6s ease-out; }
.mt-last.flash, .mt-score.flash { animation: mt-flash 0.9s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .tcard, .mt-rim-glow, .mt-seat.turn .mt-chair, .mt-cp.turn, .mt-pl.turn i, .mt-pot.bump b, .mt-card.fresh, .mt-last.flash, .mt-score.flash, .sq.last { animation: none; transition: none; }
  .mt-rim-glow::after { display: none; }
}

@media (max-width: 560px) {
  .tgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ---- light theme: the table itself stays dark, only the frame follows the theme ---- */
:root[data-theme="light"] .tcard { background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45)), var(--panel); }
:root[data-theme="light"] .mt-pl { color: var(--text-dim); }
:root[data-theme="light"] .mt-card.blank { border-color: #ffffff38; }
:root[data-theme="light"] .mt-board.hidden { opacity: 0.6; }
:root[data-theme="light"] .mt-cp.free { color: #b9b7bf; }

.mt-clock { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 0.95em; }
.mt-pl.turn .mt-clock { color: var(--text); font-weight: 700; }
.mt-pl { flex: 1 1 0; }
.mt-pl:last-child { justify-content: flex-end; flex-direction: row-reverse; }
.mt-badge.act { background: rgba(0, 0, 0, 0.7); color: #e9f3ee; border: 1px solid rgba(255, 255, 255, 0.25); text-transform: capitalize; }
.mt-badge.fantasy { position: static; align-self: center; background: var(--purple); }
.mt-last.flash { color: var(--text); }