/* Card table styles (used with puzzle.css for the top bar, buttons and dialog). */
.ct-bar {
  max-width: 760px; margin: 8px auto; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.ct-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ct-btns button, .ct-btns select {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer;
}
.ct-btns .primary { background: var(--accent); border-color: var(--accent); }
.ct-stats { display: flex; gap: 12px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ct-stats #ct-time { color: var(--ink); font-weight: 800; }
.ct-board {
  position: relative;
  max-width: 760px;
  height: max(440px, calc(100vh - 130px));
  height: max(440px, calc(100dvh - 130px));
  margin: 0 auto;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--felt) 80%, #fff 20%), var(--felt) 70%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.35);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ct-rules { max-width: 760px; margin: 24px auto 0; }

.slot, .card { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .09); }
.slot {
  border: 2px dashed rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.35); font-weight: 800; font-size: calc(var(--cw) * .32);
}
.slot-stock { cursor: pointer; }
.card { transition: transform .18s ease; cursor: pointer; will-change: transform; }
.card.dragging { transition: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.card .face, .card .back { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; }
.card .face {
  display: none; background: #fffdf7; color: #1d1b2e; box-shadow: 0 1px 2px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.18); font-weight: 800;
}
.card.red .face { color: #d7263d; }
.card.up .face { display: block; }
.card.up .back { display: none; }
.card .back {
  border: 3px solid #fffdf7;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
  background:
    radial-gradient(circle at 50% 50%, #ffd23f 0 12%, transparent 13%),
    repeating-linear-gradient(45deg, #3a24a8 0 6px, #2a1a85 6px 12px);
}
.card .idx { position: absolute; top: 4%; left: 7%; font-size: calc(var(--cw) * .2); line-height: 1; text-align: center; }
.card .idx.br { top: auto; left: auto; bottom: 4%; right: 7%; transform: rotate(180deg); }
.card .pip {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cw) * .5);
}
.card .pip.court {
  font-size: calc(var(--cw) * .42); flex-direction: column; line-height: 1;
  margin: 22% 18%; border-radius: 6px; background: color-mix(in srgb, currentColor 10%, transparent);
}
.card .pip.court small { font-size: .55em; }
.card.nope { animation: shake .2s 2; }
.ct-board.won .card { animation: hop .6s ease-in-out infinite alternate; }
.ct-board.won .card:nth-child(3n) { animation-delay: .15s; }
.ct-board.won .card:nth-child(3n+1) { animation-delay: .3s; }
@keyframes hop { to { translate: 0 -8px; } }
@media (max-width: 420px) {
  .card .idx { font-size: calc(var(--cw) * .24); }
  .card .pip { font-size: calc(var(--cw) * .44); top: 18%; }
}