/* Design round 1: the table. Loaded after round6.css; every rule here is about playing a board.
   Motion stays at or under 250 ms and stops under reduced motion (round6.css switches all animation off then). */

/* ---------- the bar: who is here and the controls; board facts in small chips ---------- */
.table-page .tablebar { gap: 8px 16px; padding-block: 2px 10px; }
.table-page .tb-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.table-page .tb-title h1 { font-size: 1.25rem; white-space: nowrap; }
.table-page .tb-meta { gap: 4px; }
.table-page .tb-meta .chip { padding: 2px 9px; font-size: .78rem; }
.table-page .tb-side { gap: 6px 10px; }
.table-page .watchers { gap: 5px; font-size: .85rem; }
.table-page .watchers .why { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.table-page .table-view-controls .btn { min-height: 38px; }

/* ---------- the pool: the board's facts sit on the table, where your eyes already are ---------- */
.pool { position: relative; }
.pool-badges { position: absolute; inset: 12px 14px auto 14px; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; pointer-events: none; z-index: 3; }
.pool-badges > * { pointer-events: auto; }
.pool-badges > .tricks-badge:only-child { margin-left: auto; }
.board-badge { display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px 5px 5px; border-radius: 18px; border: 0;
  background: var(--glass); color: var(--ink); box-shadow: var(--shadow); font: inherit; text-align: left; max-width: 100%; }
button.board-badge { cursor: pointer; min-height: 44px; }
.board-badge .bb-big { flex: none; min-width: 46px; height: 46px; padding: 0 6px; display: grid; place-items: center; border-radius: 13px;
  background: var(--surface); font-family: var(--f-card); font-weight: 850; font-size: 1.4rem; line-height: 1; color: var(--ink); }
.board-badge .bb-big .s-S, .board-badge .bb-big .s-H, .board-badge .bb-big .s-D, .board-badge .bb-big .s-C { font-size: 1.15em; }
.board-badge .bb-text { display: grid; line-height: 1.2; font-size: .8rem; color: var(--ink-2); min-width: 0; }
.board-badge .bb-text b { font-size: .95rem; color: var(--ink); white-space: nowrap; }
.board-badge .bb-text .vul { color: var(--vul); font-weight: 750; }
.board-badge .bb-more { font-size: .8rem; color: var(--ink-2); margin-left: -2px; }
/* Fast: the drawn trump suit is the main fact of the deal, so it is the biggest thing on the table's edge. */
.board-badge.fast { padding-right: 16px; }
.board-badge.fast .bb-big { min-width: 58px; height: 58px; font-size: 2.3rem; border-radius: 16px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sun) 70%, transparent); }
.board-badge.fast .bb-big.nt { font-size: 1.35rem; color: var(--primary); }
.board-badge.fast .bb-text b { font-size: 1.02rem; }
.board-badge.auction-badge { padding: 7px 13px; }
@media (min-width: 601px) { .board-badge.auction-badge { display: none; } }

.tricks-badge { display: inline-flex; gap: 6px; }
.tricks-badge .tk { display: inline-grid; grid-template-columns: auto auto; grid-template-areas: "lbl lbl" "n of"; align-items: baseline;
  justify-content: center; column-gap: 2px; min-width: 58px; padding: 4px 10px 5px; border-radius: 15px; background: var(--glass); box-shadow: var(--shadow); }
.tricks-badge .lbl { grid-area: lbl; font-size: .68rem; font-weight: 800; letter-spacing: .05em; color: var(--ink-2); text-align: center; }
.tricks-badge b { grid-area: n; font-family: var(--f-card); font-size: 1.4rem; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ink); }
.tricks-badge .of { grid-area: of; font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.tricks-badge .tk.decl { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent), var(--shadow); }
.tricks-badge .tk.made { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); }

/* ---------- seats: names in full, whose turn at a glance, clocks quiet until they matter ---------- */
/* Seats sit above the trick's dashed oval, which can reach into their row on narrow tables. */
.pool .seatbox { position: relative; z-index: 2; }
.plate .who, .plate .who .linkish { overflow: visible; text-overflow: clip; max-width: none; }
.plate .tclock:empty { display: none; }
.plate .bankbit { white-space: nowrap; }
.plate .bankbit.low { color: var(--vul); font-weight: 800; }
.seatbox.turn .plate { outline: 3px solid var(--sun); outline-offset: 2px;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--sun) 28%, transparent), var(--shadow); }
.seatbox > .status { box-shadow: var(--shadow); }
.seatbox > .status.mine { background: var(--primary); color: var(--on-primary); }

/* ---------- your cards: the playable ones lift to the touch; the others step back while you choose ---------- */
button.card.playable { transition: transform .12s ease-out, box-shadow .12s ease-out; }
button.card.playable:hover, button.card.playable:focus-visible { transform: translateY(-9px); box-shadow: 0 10px 18px rgba(14, 42, 59, .24); z-index: 2; }
:root:not([data-card-style="high-contrast"]) .dock.turn:has(button.card.playable) button.card:disabled,
:root:not([data-card-style="high-contrast"]) .dummy:has(button.card.playable) button.card:disabled { filter: saturate(.6) brightness(.9); }

/* ---------- the trick: a card travels in from its player; a won trick gathers toward the winner ---------- */
.trick .tc.just-played.n { animation: tc-from-n .22s cubic-bezier(.2, .7, .3, 1) both; }
.trick .tc.just-played.s { animation: tc-from-s .22s cubic-bezier(.2, .7, .3, 1) both; }
.trick .tc.just-played.w { animation: tc-from-w .22s cubic-bezier(.2, .7, .3, 1) both; }
.trick .tc.just-played.e { animation: tc-from-e .22s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes tc-from-n { from { transform: translateY(-46px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tc-from-s { from { transform: translateY(46px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tc-from-w { from { transform: translateX(-46px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tc-from-e { from { transform: translateX(46px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
/* At rest, a finished trick sits gathered on the winning side; the last card plays in first, then they gather. */
.trick.won-n .tc.last { --gx: 0px; --gy: -26px; }
.trick.won-s .tc.last { --gx: 0px; --gy: 26px; }
.trick.won-w .tc.last { --gx: -34px; --gy: 0px; }
.trick.won-e .tc.last { --gx: 34px; --gy: 0px; }
.trick .tc.last { transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(.9); opacity: .5; }
.trick.trick-won .tc.last:not(.just-played) { animation: tc-gather .24s ease-in .24s both; }
.trick.trick-won .tc.last.just-played { animation: tc-arrive-gather .48s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes tc-gather { from { transform: none; opacity: 1; } to { transform: translate(var(--gx), var(--gy)) scale(.9); opacity: .5; } }
@keyframes tc-arrive-gather { 0% { transform: scale(.94); opacity: 0; } 46% { transform: none; opacity: 1; }
  100% { transform: translate(var(--gx), var(--gy)) scale(.9); opacity: .5; } }
.trick.trick-won .won { animation: trick-winner .24s ease-out .24s both; }
.board-arrival .dock .card { animation-duration: .24s; }
.result-hero.board-finished { animation-duration: .25s; }

/* the opening lead: the leader's slot breathes no extra words; the badge already says who leads */
.trick .tc.slot { border-color: color-mix(in srgb, var(--sun) 80%, var(--ink-2)); }

/* ---------- the end of a board: the result and the score, calmly ---------- */
.result-hero .score.up { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ok) 55%, transparent); }
.result-hero .score.down { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--coral) 60%, transparent); }

/* ---------- the auction raft ---------- */
.raft .auction td.now span { border-color: var(--sun); background: color-mix(in srgb, var(--sun) 22%, transparent); }

/* ---------- a claim is offered late and stays folded until wanted ---------- */
.claim-panel > summary { cursor: pointer; font-weight: 750; min-height: 40px; display: flex; align-items: center; }
.claim-panel[open] > summary { margin-bottom: 4px; }

/* ---------- phones ---------- */
@media (max-width: 600px) {
  /* Two bar rows at most: the board button, play-again and leave; then the view controls and table chat. */
  .table-page .tb-title { flex: 0 0 auto; }
  .table-page .info-btn { flex: none; }
  .table-page .ib-text { overflow: visible; }
  .table-page .tb-side > .sheet-btns, .table-page .tablebar:not(:has(.contract)) .tb-side > .sheet-btns { order: 3; margin-left: auto; }
  .table-page .tb-side > .leave { margin-left: auto; }
  .table-page .side .note.waiting { display: none; }
  .table-page .leave-note { display: none; }
  .say .kind { display: none; }
  .table-page .table-view-controls { flex-wrap: nowrap; }
  .table-page .table-view-controls .btn { padding-inline: 9px; font-size: .84rem; }
  /* The badges become the table's first row, above the seats. */
  .pool-badges { position: static; grid-area: badges; padding: 0 0 2px; }
  .pool.seated.phase-play, .pool.seated.phase-auction { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "badges badges" "top top" "left right" "mid mid"; }
  .pool:not(.seated) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "badges badges" "top top" "left right" "mid mid" "bottom bottom"; }
  .board-badge { gap: 7px; padding: 4px 10px 4px 4px; border-radius: 15px; }
  .board-badge .bb-big { min-width: 38px; height: 38px; font-size: 1.15rem; border-radius: 11px; }
  .board-badge.fast .bb-big { min-width: 46px; height: 46px; font-size: 1.8rem; }
  .board-badge .bb-text { font-size: .74rem; }
  .board-badge .bb-text b { font-size: .86rem; }
  .tricks-badge { gap: 4px; }
  .tricks-badge .tk { min-width: 48px; padding: 3px 8px 4px; border-radius: 13px; }
  .tricks-badge b { font-size: 1.15rem; }
  /* Seats during the auction: who is who and whose call it is, without the card fans. */
  .pool.seated.phase-auction .seatbox { display: grid; }
  .pool.seated.phase-auction .seatbox .fan { display: none; }
  .pool.seated.phase-auction .raft h2 { display: none; }
  /* Names wrap instead of being cut. */
  .table-page .plate { max-width: 100%; }
  .table-page .plate .who { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; font-size: .86rem; }
  .table-page .plate .who .linkish { white-space: normal; text-align: left; min-height: 0; margin-block: 0; display: inline; }
  .table-page .seatbox .platewrap { max-width: 100%; }
  .table-page .seatbox > .status { white-space: nowrap; }
  .table-page .plate .tclock { white-space: normal; }
  .unacc .lbl { white-space: nowrap; }
  .table-page .plate .played-chip-wrap { white-space: nowrap; }
  .trick.won-n .tc.last { --gy: -16px; } .trick.won-s .tc.last { --gy: 16px; }
  .trick.won-w .tc.last { --gx: -22px; } .trick.won-e .tc.last { --gx: 22px; }
}
@media (max-width: 360px) {
  .pool-badges > .board-badge { flex: 0 1 auto; min-width: 0; }
  .board-badge .bb-text b { white-space: normal; }
  .board-badge.fast .bb-big { min-width: 42px; height: 42px; font-size: 1.6rem; }
  .table-page .table-view-controls .btn { padding-inline: 6px; font-size: .76rem; }
  .board-badge .bb-text span { display: none; }
}
@media (max-height: 550px) and (orientation: landscape) {
  /* A phone on its side: the table grows to fit its seats instead of spilling over the hand. */
  .on-table .pool { height: auto; }
  .pool.seated.phase-play, .pool.seated.phase-auction { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top top" "left right" "mid mid"; }
  .pool.seated .seatbox .fan { display: none; }
  .table-page .trick { min-height: 150px; }
  .pool:not(.seated) .seatbox .fan { display: none; }
  .table-page .plate .who { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
  .table-page .plate .who .linkish { white-space: normal; text-align: left; min-height: 0; margin-block: 0; display: inline; }
  .dock-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pool-badges { inset: 6px 8px auto 8px; }
  .board-badge .bb-big { min-width: 34px; height: 34px; font-size: 1.05rem; }
  .board-badge.fast .bb-big { min-width: 40px; height: 40px; font-size: 1.5rem; }
  .tricks-badge b { font-size: 1.05rem; }
}