/* Shared table shell. Builds on styles.css and page.css: same felt, rail, fonts, card and lime accent. */
/* The only new values: the four-colour deck's club and diamond inks, matching tools/four-color.mjs. */
:root{--card-club:#1d7a46;--card-diamond:#1f5fae}

/* Seat ring: positions come from src/table/seats.js as --x (0–100%) and --y (0–34). */
#players.seat-ring{position:absolute;inset:0 var(--space-6);pointer-events:none}
#players.seat-ring .ring-seat{left:var(--x);top:calc(18px + var(--y) * 5px);transform:translateX(calc(-1 * var(--x)));width:min(260px,calc(100% / var(--others)));pointer-events:auto}
#players.seat-ring.compact .ring-seat{grid-template-columns:auto auto;grid-template-areas:"name name" "avatar score" "detail detail";justify-content:center;justify-items:center;column-gap:var(--space-2);row-gap:var(--space-1);padding:var(--space-2);width:min(150px,calc(100% / var(--others)))}
#players.seat-ring.compact .player-score small{display:none}
/* Compact seats keep the whole status for screen readers (.sr-only) and show the seat note on one line where there is room. */
#players.seat-ring.compact .player small.seat-note{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:11px;color:var(--muted)}
#players.seat-ring.compact .player-detail{min-width:0;max-width:100%;justify-self:stretch;text-align:center}
#players.seat-ring.compact .mini-backs.compact{justify-content:center}
#players.seat-ring.compact .player-score{font-size:16px}
.mini-backs.compact{align-items:center;gap:var(--space-1);padding:0;margin-top:var(--space-1)}
.mini-backs.compact i{margin:0}
.mini-backs.compact span{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.felt.crowded .table-center{margin-top:200px}
.player.partner{border-style:dashed;border-color:var(--line-strong)}
.partner-tag{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}

/* Centre and controls the game fills. */
.deal-panel{display:flex;justify-content:center;gap:var(--space-2);flex-wrap:wrap}
.game-centre{display:flex;justify-content:center;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-3)}
.game-centre:empty{display:none}
.table-cards{display:flex;justify-content:center;gap:var(--space-1);flex-wrap:wrap}
.table-cards .card{width:56px;height:80px;box-shadow:none}
.table-label{display:block;color:var(--muted);font-size:12px;margin-top:var(--space-1)}
.hand-actions .game-actions{display:contents}
.game button[aria-disabled="true"]:not(.card){opacity:.45;cursor:not-allowed}
.move-bar{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap}
.move-bar button:not(.primary){min-width:56px;background:var(--ink-soft)}
.chat-line{display:block;margin:var(--space-1) auto 0;max-width:640px;background:none;border:0;color:var(--muted);font-size:13px;font-weight:400}

/* Hand states: illegal cards dim and say why; a picked card is lifted with a dashed ring. */
.hand .card.unplayable{filter:brightness(.62);cursor:not-allowed}
.hand .card.picked{translate:0 -12px;outline:3px dashed var(--lime);outline-offset:1px;z-index:3}
.hand .card.hinted{translate:0 -8px;outline:3px solid var(--lime);outline-offset:2px;z-index:3}
.coach-target{outline:3px dashed var(--lime);outline-offset:4px}
.empty-hand{margin:auto;color:var(--muted);font-size:13px}
.four-color .card.suit-0{color:var(--card-club)}
.four-color .card.suit-1{color:var(--card-diamond)}

/* Results, review and statistics. */
.result-actions{display:flex;justify-content:center;gap:var(--space-2);flex-wrap:wrap}
.score-scroll .empty-row{text-align:center;color:var(--muted)}
.review-list{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-2)}
.review-list li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--line);color:var(--paper);font-size:14px}
.review-cards{display:flex;gap:var(--space-1);flex-wrap:wrap;justify-content:flex-end}
.review-cards .card,.table-cards.compact .card{width:36px;height:50px;border-radius:4px;box-shadow:none}
.review-cards .card-face,.table-cards.compact .card-face{display:none}
.review-cards .compact-index,.table-cards.compact .compact-index{display:block}
.review-cards .corner,.table-cards.compact .corner{font-size:13px;left:4px;top:4px}
.stats-list{margin:var(--space-4) 0;display:grid}
.stats-list div{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.stats-list dt{color:var(--muted);font-size:15px}
.stats-list dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}

/* Options dialog: grouped, scrollable on short screens. */
#options-dialog{max-height:calc(100dvh - var(--space-8));overflow:auto}
dialog fieldset{border:0;border-top:1px solid var(--line);margin:var(--space-4) 0 0;padding:var(--space-2) 0 0}
dialog legend{font-family:var(--display);font-weight:700;color:var(--paper);padding:0 var(--space-2) 0 0}
dialog .option-note{font-size:13px;margin:var(--space-1) 0 0}
input[type=range]{width:100%;accent-color:var(--lime);min-height:44px}

/* 768–1099 px: side seats stay out of the centre's band (a quarter of the ring at most), and the score sits under the
   status so names are not cut ("Rowan", five seats) and the score never covers the status. */
@media(min-width:768px) and (max-width:1099px){
 #players.seat-ring:not(.compact) .ring-seat{width:min(260px,calc(100% / var(--others)),25%);grid-template-columns:40px minmax(0,1fr);grid-template-areas:"avatar name" "avatar detail" "avatar score";row-gap:2px;column-gap:var(--space-2)}
 #players.seat-ring:not(.compact) .ring-seat .player-name{max-width:100%}
 #players.seat-ring:not(.compact) .ring-seat small{white-space:normal}
 #players.seat-ring:not(.compact) .ring-seat .player-score{font-size:16px;justify-self:start}
 #players.seat-ring:not(.compact) .ring-seat .player-score small{display:inline;margin-left:4px}
}
/* Set by the shell (clearSeats, from 768 px): how far the seat tiles above the centre reach into it; 0 when they clear it. */
@media(min-width:768px){.table-center{padding-top:var(--seat-clear,0px)}}

/* Larger cards (Options): the hand only; table cards keep their size so the centre still fits. */
body.large-cards .hand .card{width:calc(var(--card-width) * 1.25);height:calc(var(--card-height) * 1.25)}
body.large-cards .hand-wrap{min-height:164px}

@media(max-width:767px){
 #players.seat-ring{inset:0 var(--space-2)}
 .felt.crowded .table-center{margin-top:240px}
 #players.seat-ring .ring-seat,#players.seat-ring.compact .ring-seat{top:112px;width:min(130px,calc(100% / var(--others)))}
 #players.seat-ring.compact .ring-seat{padding:var(--space-1)}
 #players.seat-ring.compact .player strong{max-width:100%}
 #players.seat-ring.compact .player small.seat-note{display:none}
 #players.seat-ring.compact .mini-backs.compact{display:flex}
 #players.seat-ring.compact .avatar{width:24px;height:24px}
 .table-cards .card{width:44px;height:62px}
 .review-list li{flex-wrap:wrap}
}