/* Card table for 29, Donkey, Court Piece and Mendikot (builds on the game styles in style.css) */
.ct-table { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(260px, 2.4fr) minmax(90px, 1fr); grid-template-rows: auto 1fr auto;
  grid-template-areas: ". north ." "west center east" "you you you"; min-height: 560px; gap: 6px; }
.ct-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ct-north { grid-area: north; }
.ct-west { grid-area: west; align-self: center; }
.ct-east { grid-area: east; align-self: center; }
.ct-seat .player-tag { padding-right: 12px; }
.ct-badge { font-size: .72rem; color: #f2d58a; font-weight: 700; white-space: nowrap; }
.ct-badge:empty { display: none; }
.ct-seat.active .player-tag { border-color: rgb(242 213 138 / .6); box-shadow: 0 0 0 4px rgb(242 213 138 / .14), 0 0 24px rgb(242 213 138 / .25); }
.ct-backs { --cw: 34px; position: relative; display: flex; justify-content: center; min-height: 52px; padding: 4px 14px 0 0; }
.ct-backs .card { margin-left: -26px; transform: translateY(var(--y)) rotate(var(--a)); transform-origin: 50% 120%; }
.ct-backs .card:first-child { margin-left: 0; }
.ct-count { position: absolute; right: -2px; bottom: -6px; background: linear-gradient(180deg, #f2d58a, #c39233); color: #2a1f08; font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; }
.ct-safe { font-weight: 800; color: #b5f0cf; background: rgb(46 160 105 / .3); padding: 4px 12px; border-radius: 999px; font-size: .85rem; }
.ct-seat .bubble { left: 50%; top: -10px; transform: translate(-50%, 6px) scale(.95); }
.ct-seat .bubble.show:not(:empty) { transform: translate(-50%, -100%); }

.ct-center { grid-area: center; position: relative; min-height: 250px; --cw: 66px; }
.ct-slot { position: absolute; left: 50%; top: 50%; width: var(--cw); height: calc(var(--cw) * 1.4); }
.ct-slot-south { transform: translate(-50%, 2%); }
.ct-slot-north { transform: translate(-50%, -102%); }
.ct-slot-west { transform: translate(-150%, -50%); }
.ct-slot-east { transform: translate(50%, -50%); }
.ct-slot .card { box-shadow: 0 6px 16px rgb(0 0 0 / .4); }
.ct-slot.win .card { box-shadow: 0 0 0 3px #f2d58a, 0 0 26px rgb(242 213 138 / .7); }
.ct-in { animation: ctIn .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes ctIn { from { opacity: 0; transform: scale(.7) translateY(20px); } }
.ct-out { transition: transform .28s ease-in, opacity .28s ease-in; opacity: 0; }
.ct-out.to-south { transform: translateY(180px) scale(.5); }
.ct-out.to-north { transform: translateY(-180px) scale(.5); }
.ct-out.to-west { transform: translateX(-200px) scale(.5); }
.ct-out.to-east { transform: translateX(200px) scale(.5); }
.ct-out.to-away { transform: scale(.4) rotate(20deg); }
.ct-trump { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgb(0 0 0 / .25); border: 1px solid rgb(242 213 138 / .3); border-radius: 14px; padding: 6px 12px; }
.ct-trump:empty { display: none; }
.ct-trump span:first-child { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #cbbf9f; }
.ct-trump small { font-size: .66rem; color: #cbbf9f; }
.ct-suit { font-size: 1.6rem; line-height: 1; color: #fff; }
.ct-suit.red { color: #ff8a80; }
.ct-btn .ct-suit { font-size: 1.1rem; }
.ct-btn .ct-suit:not(.red) { color: #17201c; }
.ct-hidden-trump { font: 700 1.4rem var(--display); color: #f2d58a; line-height: 1; }
.ct-info { position: absolute; right: 0; top: 0; text-align: right; font-size: .82rem; color: #e2dccb; background: rgb(0 0 0 / .22); padding: 6px 12px; border-radius: 12px; line-height: 1.45; }
.ct-info:empty { display: none; }
.ct-info b { color: #f2d58a; }

.ct-you { grid-area: you; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ct-you .status.turn { border-color: rgb(242 213 138 / .6); box-shadow: 0 0 0 4px rgb(242 213 138 / .14); }
.ct-you-say { left: 50%; top: -30px; transform: translateX(-50%); }
.ct-hand { --cw: 70px; display: flex; justify-content: center; padding: 14px 0 6px; min-height: calc(var(--cw) * 1.4 + 24px); max-width: 100%; }
.ct-card { --ov: calc(var(--cw) * -.42); background: none; border: 0; padding: 0; margin-left: var(--ov); cursor: pointer; transition: translate .14s, filter .14s; border-radius: 10px; }
.ct-card:first-child { margin-left: 0; }
.ct-card:disabled { cursor: default; }
.ct-card.playable:hover, .ct-card.playable:focus-visible { translate: 0 -16px; }
.ct-card.playable .card { box-shadow: 0 0 0 2px rgb(111 224 168 / .85), 0 6px 14px rgb(0 0 0 / .35); }
.ct-hand:has(.playable) .ct-card:disabled .card { filter: brightness(.62) saturate(.6); }
.ct-card.is-trump .card::after { content: "T"; position: absolute; right: 4px; top: 4px; font: 800 .6rem var(--font); color: #2a1f08; background: #f2d58a; border-radius: 4px; padding: 0 3px; }
.ct-card:focus-visible { outline: 3px solid #f2d58a; outline-offset: 2px; }
.ct-mine { font-size: .82rem; color: #f2d58a; font-weight: 700; min-height: 1.2em; }
.ct-panel { background: rgb(0 0 0 / .3); border: 1px solid rgb(242 213 138 / .35); padding: 10px; border-radius: 16px; max-width: 560px; }
.ct-panel[hidden] { display: none; }
.ct-bids { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ct-btn { font: 700 .95rem var(--font); min-width: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid #b8892c; background: linear-gradient(180deg, #f2d58a, #c39233); color: #2a1f08; cursor: pointer; }
.ct-btn:hover { filter: brightness(1.06); }
.ct-btn.pass { background: rgb(255 255 255 / .1); color: #f4efe3; border-color: rgb(255 255 255 / .25); }
.ct-btn.suit { background: #fbf7ee; border-color: #ddd3bf; display: inline-flex; align-items: center; gap: 6px; }
.ct-intro { color: var(--muted); font-size: .95rem; margin: 0 0 16px; }
.ct-order { margin: 6px 0 0; padding-left: 1.4em; }
.ct-order li { margin: 3px 0; }
.ct-order .donkey { color: var(--bad, #c3312a); font-weight: 700; }
.ct-score-line { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px; background: var(--surface-2); border-radius: 12px; }
.ct-score-line b { color: var(--gold); font-size: 1.1rem; }
.ct-score-line .muted { color: var(--muted); }

/* Directory */
.ct-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 8px 0 28px; }
.ct-dir .tile .tag.new { background: var(--ok-soft, #def3e8); color: var(--ok, #1f7a50); }

@media (max-width: 760px) {
  .ct-table { grid-template-columns: 64px 1fr 64px; min-height: 600px; gap: 4px; }
  .ct-backs { --cw: 22px; min-height: 36px; padding-right: 10px; }
  .ct-backs .card { margin-left: -18px; }
  .ct-west .ct-backs .card, .ct-east .ct-backs .card { margin-left: -19px; }
  .ct-west .player-tag, .ct-east .player-tag { flex-direction: column; gap: 2px; padding: 5px; border-radius: 16px; text-align: center; }
  .ct-west .pname small, .ct-east .pname small { display: none; }
  .ct-badge { font-size: .62rem; white-space: normal; }
  .ct-seat .player-tag .avatar { width: 30px; height: 30px; }
  .ct-center { --cw: 50px; min-height: 210px; }
  .ct-info { font-size: .7rem; padding: 4px 8px; top: auto; bottom: -4px; right: 50%; transform: translateX(50%); text-align: center; white-space: nowrap; }
  .ct-center { padding-bottom: 28px; }
  .ct-trump { padding: 4px 8px; }
  .ct-hand { --cw: min(15.5vw, 62px); }
  .ct-card { --ov: calc(var(--cw) * -.5); }
  .ct-hand:has(.ct-card:nth-child(11)) .ct-card { --ov: calc(var(--cw) * -.62); }
  .ct-card.playable:hover { translate: 0 -10px; }
}