/* Flat, large-index cards with horizontal suit rows, as on a bridge table. */
.table-room{height:calc(100dvh - 122px);min-height:778px}
.table-room:before{inset:17% 10% 18%;border-radius:12px;background:rgba(4,62,39,.14);box-shadow:none;border-color:rgba(255,255,255,.08)}
.playing-card,.dummy-table-card,.review-card,.played-card{box-sizing:border-box;border:1px solid #202020;border-radius:3px;background:#fff;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.2);font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.035em}
.playing-card.red,.dummy-table-card.red,.review-card.red,.played-card.red{color:#b21f2c;border-color:#932f3b}
.card-corner{line-height:.88;letter-spacing:-.04em}
.card-corner.top{top:7px;left:4px}
.card-corner .card-suit{font-size:1.08em;line-height:1;letter-spacing:0}
.card-corner.bottom{right:5px;bottom:5px;transform:none}
.hand .card-corner.bottom,.dummy-table-hand .card-corner.bottom,.review-hand .card-corner.bottom{display:none}

/* A generous exposed index keeps a full thirteen-card hand easy to scan. */
.hand{bottom:18px;padding-left:0;align-items:flex-end}
.playing-card{flex:0 0 78px;width:78px;height:110px;margin-left:-32px;transition:transform .12s ease}
.playing-card:first-child{margin-left:0}
.playing-card .card-corner{font-size:38px}
.playing-card:hover,.playing-card:focus-visible{z-index:12;transform:translateY(-7px);outline:3px solid #ffd04c;outline-offset:1px}
.playing-card.view-only:hover,.playing-card.view-only:focus{transform:none;outline:none}
.south,.table-room.reviewing .south{bottom:150px;padding:6px 12px}
.south strong{font-size:.95rem;line-height:1.2}
.south small{display:block;font-size:.75rem;line-height:1.25}
.viewer-position{bottom:146px;left:14px}
.table-room.watching .viewer-position{top:18px;right:18px;bottom:auto;left:auto;max-width:calc(50% - 122px)}

.dummy-table-hand,.review-hand{width:max-content;max-width:calc(100% - 28px);padding:28px 8px 8px;gap:0;border-radius:4px;background:rgba(3,32,27,.35);box-shadow:none}
.dummy-table-label,.review-label{top:7px;font-size:.75rem;line-height:1.2;letter-spacing:.02em}
.dummy-table-card,.review-card{flex:0 0 70px;width:70px;height:100px;min-height:100px;margin-left:-28px}
.dummy-table-label+.dummy-table-card,.review-label+.review-card{margin-left:0}
.dummy-table-card .card-corner,.review-card .card-corner{font-size:32px}
.dummy-table-hand.table-hand-north,.review-north{top:124px;left:50%;right:auto;width:max-content;transform:translateX(-50%)}
.dummy-table-hand.table-hand-south,.review-south{bottom:18px;right:50%;left:auto;width:max-content;transform:translateX(50%)}

/* Side hands keep suits together. A very long suit wraps after five cards. */
.dummy-table-hand.table-hand-west,.dummy-table-hand.table-hand-east,.review-west,.review-east{top:318px;bottom:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:5px;width:min(250px,29%);max-width:none;padding:28px 8px 8px;transform:none}
.dummy-table-hand.table-hand-west,.review-west{left:14px;right:auto}
.dummy-table-hand.table-hand-east,.review-east{right:14px;left:auto}
.card-suit-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 64px;grid-auto-rows:70px;row-gap:5px;width:100%;min-width:0}
.table-hand-west .dummy-table-card,.table-hand-east .dummy-table-card,.review-west .review-card,.review-east .review-card{flex:none;min-height:70px;width:64px;height:70px;margin:0;overflow:visible}
.table-hand-west .dummy-table-card .card-corner,.table-hand-east .dummy-table-card .card-corner,.review-west .review-card .card-corner,.review-east .review-card .card-corner{font-size:30px}
.table-hand-west .card-corner.top,.table-hand-east .card-corner.top,.review-west .card-corner.top,.review-east .card-corner.top{top:5px;left:3px}
/* A six-card or longer suit can create a fifth row; keep every index visible. */
:is(.table-hand-west,.table-hand-east,.review-west,.review-east):has(.card-suit-row>:nth-child(6)){padding-top:20px;gap:3px}
:is(.table-hand-west,.table-hand-east,.review-west,.review-east):has(.card-suit-row>:nth-child(6)) :is(.dummy-table-label,.review-label){top:3px;font-size:.65rem;line-height:1.2}
:is(.table-hand-west,.table-hand-east,.review-west,.review-east):has(.card-suit-row>:nth-child(6)) .card-suit-row{grid-auto-rows:58px;row-gap:3px}
:is(.table-hand-west,.table-hand-east,.review-west,.review-east):has(.card-suit-row>:nth-child(6)) :is(.dummy-table-card,.review-card){height:58px;min-height:58px}
:is(.table-hand-west,.table-hand-east,.review-west,.review-east):has(.card-suit-row>:nth-child(6)) .card-corner{font-size:28px}
:is(.table-hand-west,.table-hand-east,.review-west,.review-east):has(.card-suit-row>:nth-child(6)) .card-corner.top{top:1px}
.west,.east,.table-room.reviewing .west,.table-room.reviewing .east{top:264px;width:min(250px,29%);padding:9px 12px;border-radius:4px;transform:none}
.west strong,.east strong{font-size:.95rem;line-height:1.25}
.west small,.east small{display:block;font-size:.75rem;line-height:1.25}
.west{left:14px}.east{right:14px}
.dummy-table-card.playable:hover,.dummy-table-card.playable:focus-visible{z-index:12;outline:3px solid #ffd04c;outline-offset:1px}

/* Trick cards retain both upright indices, like the cards in the reference. */
.played-card{width:102px;height:144px;border-width:2px;z-index:4}
.played-card .card-corner{font-size:40px}
.played-card .card-corner.top{top:5px;left:5px}
.played-card .card-corner.bottom{right:5px;bottom:5px}
.card-n{top:calc(50% - 134px);left:calc(50% - 51px);transform:none}
.card-e{top:calc(50% - 50px);left:calc(50% + 8px);transform:none}
.card-s{top:calc(50% + 40px);left:calc(50% - 51px);transform:none}
.card-w{top:calc(50% - 50px);left:calc(50% - 110px);transform:none}
.table-complete-actions{width:min(270px,32%)}

@media(max-width:1100px){
  .table-room,.table-room.reviewing{min-height:778px}
  .review-west,.review-east{top:318px;bottom:auto}
  .review-west{left:14px}.review-east{right:14px}
  .dummy-table-hand.table-hand-west{left:14px}.dummy-table-hand.table-hand-east{right:14px}
  .table-room.reviewing .west,.table-room.reviewing .east{width:min(250px,29%)}
}

/* Hidden hands stay hidden regardless of their positional layout selectors. */
#dummy-table-hand[hidden],#review-hands[hidden],#next-board-table[hidden]{display:none}