/* ============================================================================
   Belote: the table. Loaded after game.css (Chkobba's shell: frames, pills, cards,
   overlays, themes) and replaces its board with a four-seat table: your partner
   across, the opponents left and right, the trick in the middle, your hand at the
   bottom with the bidding panel above it on your turn. Phone first; no sideways
   scroll down to 320 px.
   ========================================================================== */
:root { --tw: clamp(54px, 6.6vw, 86px); }

.suit-sym { font-family: var(--font-ui); font-weight: 700; color: var(--text); }
.suit-sym.red { color: #ff6b5f; }
.plate .suit-sym, .badge.gold .suit-sym { color: #1a1408; }
.plate .suit-sym.red, .badge.gold .suit-sym.red { color: #c0281f; }

/* a readable corner on overlapped photo cards (the scan's own index is small there) */
.card__idx { position: absolute; left: 0; top: 0; z-index: 2; display: none; flex-direction: column; align-items: center; gap: 1px; min-width: 30%;
  padding: 3px 2px 4px; color: var(--suit-color); background: var(--card-face); border-bottom-right-radius: 7px; }
.card__idx b { font-family: var(--font-num); font-weight: 800; font-size: calc(var(--card-w) * .3); line-height: .95; letter-spacing: -.03em; }
.card__idx .pip { position: static; transform: none; width: calc(var(--card-w) * .22); height: calc(var(--card-w) * .22); }

/* ---- the board: partner on top, opponents at the sides, the trick, my hand ---- */
#game-view #game-board {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top top top" "left table right" "hand hand hand";
  column-gap: 10px; row-gap: 4px; align-content: stretch; padding: 4px 10px 8px; min-height: 0; height: 100%;
}
#seat-top { grid-area: top; display: flex; justify-content: center; }
#seat-left { grid-area: left; display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
#seat-right { grid-area: right; display: flex; justify-content: flex-start; align-items: center; min-width: 0; }
#game-view #table-area { grid-area: table; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 0; padding: 0; }
#game-view #hand-area { grid-area: hand; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 6px; padding-top: 2px; min-width: 0; }

/* the seats */
.opp.seat { position: relative; min-width: 0; padding: 7px 10px; gap: 8px; }
.opp.seat.side { flex-direction: column; text-align: center; padding: 8px 8px; gap: 4px; max-width: 150px; }
.opp.seat .meta { align-items: flex-start; min-width: 0; }
.opp.seat.side .meta { align-items: center; }
.opp.seat .name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp.seat .backs .card-back.mini { width: 18px; height: 26px; margin-left: -11px; }
.opp.seat .backs .card-back.mini:first-child { margin-left: 0; }
.opp.seat .backs { min-height: 26px; }
.seat-badges { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; min-height: 0; }
.seat-badges:empty { display: none; }
.chipd { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--plate); color: var(--plate-ink); font-family: var(--font-display); font-size: 10px; font-weight: 700; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.badge .num { font-family: var(--font-num); }
.badge .x, .hud-contract .x { color: var(--mult); font-family: var(--font-num); }
.opp.seat.controlled { box-shadow: inset 0 0 0 2px var(--green), 0 var(--drop) 0 var(--drop-color); }
.opp .ctrl { font-size: 9px; background: var(--green); color: #fff; padding: 1px 4px; border-radius: 4px; }
.opp .spy { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; font-family: var(--font-num); font-size: 11px; max-width: 140px; }
.opp .spy span { background: var(--card-face); color: var(--card-ink); padding: 0 3px; border-radius: 3px; }
.opp .spy .suit-sym { color: var(--card-ink); } .opp .spy .suit-sym.red { color: var(--card-red); }

/* a seat's last call in the auction */
.bubble { position: absolute; z-index: 6; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; padding: 3px 9px 4px; border-radius: 999px;
  background: var(--plate); color: var(--plate-ink); box-shadow: 0 3px 0 rgba(0,0,0,.4); animation: framePop .3s var(--spring); }
.bubble.pass { background: var(--panel-hi); color: var(--text-dim); }
.bubble.contre { background: var(--mult); color: #fff; }
.bubble.bid { background: var(--gold); color: #1a1408; }
.bubble .suit-sym { color: inherit; }
.bubble.bid .suit-sym.red, .bubble .suit-sym.red { color: #c0281f; }
.bubble.contre .suit-sym { color: #fff; }

/* ---- the trick: four places round the middle ---- */
#trick-zone { --card-w: var(--tw); --card-h: calc(var(--tw) * 1.42); position: relative; width: calc(var(--tw) * 3.1); height: calc(var(--tw) * 1.42 * 2.25); flex: none; }
#trick-zone .tz { position: absolute; width: var(--card-w); height: var(--card-h); }
#trick-zone .tz[data-pos="top"] { left: 50%; top: 0; transform: translateX(-50%); }
#trick-zone .tz[data-pos="bottom"] { left: 50%; bottom: 0; transform: translateX(-50%); }
#trick-zone .tz[data-pos="left"] { left: 0; top: 50%; transform: translateY(-50%) rotate(-6deg); }
#trick-zone .tz[data-pos="right"] { right: 0; top: 50%; transform: translateY(-50%) rotate(6deg); }
#trick-zone .tz .card { --card-w: var(--tw); }
#trick-zone .card.winning .card__inner { box-shadow: var(--card-shadow), 0 0 0 3px var(--gold), var(--glow-gold); }
#center-info { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 1; }
#center-info .card { --card-w: calc(var(--tw) * .92); }
#center-info .card.turned { transform: rotate(-4deg); }
.center-label { font-family: var(--font-display); text-transform: var(--ui-case); letter-spacing: var(--ui-tracking); font-size: 11px; color: var(--text-dim); white-space: nowrap; text-align: center; }
.center-bid { font-family: var(--font-display); font-size: clamp(18px, 3.4vw, 28px); padding: 6px 12px; border-radius: var(--radius-sm); background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px var(--gold); white-space: nowrap; text-align: center; }
.center-bid small { display: block; font-size: 11px; color: var(--text-dim); font-family: var(--font-ui); }
.center-trump { font-size: calc(var(--tw) * .9); line-height: 1; opacity: .22; }
#center-info .deal-deck { --card-w: calc(var(--tw) * .8); visibility: visible !important; }
#game-view #table-msg { min-height: 1.2em; font-size: 12px; }
#game-view #fx-table { inset: 0; }

/* trumps glow a little; the cards you may not play now are dimmed */
.card.is-trump .card__inner { box-shadow: var(--card-shadow), 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent); }
#hand-cards .card.unplayable { filter: brightness(.55) saturate(.6); }
#hand-cards .card.unplayable:hover { --lift-now: 0px; --scale: 1; }
#hand-cards .card.refused { animation: refuse .35s ease-in-out; }
@keyframes refuse { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---- my hand: one row, overlapping on small screens ---- */
#hand-info { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 26px; }
#player-label { font-family: var(--font-display); text-transform: var(--ui-case); letter-spacing: var(--ui-tracking); font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
#player-label .me-name { color: var(--text); }
#player-label .me-tricks b { color: var(--gold); font-family: var(--font-num); }
#btn-last-trick { padding: 5px 10px 6px; font-size: 11px; }
#game-view #hand-cards { gap: 8px; padding-top: 14px; flex-wrap: nowrap; justify-content: center; max-width: 100%; }
#game-view #hand-cards .card { flex: none; }

/* ---- the bidding panel ---- */
#bid-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(0,0,0,.38); box-shadow: inset 0 0 0 2px var(--gold); max-width: 100%; animation: framePop .3s var(--spring); }
#bid-panel[hidden] { display: none; }
.bid-title { font-family: var(--font-display); text-transform: var(--ui-case); letter-spacing: var(--ui-tracking); font-size: 13px; color: var(--text-dim); }
.bid-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bid-row .pill { min-height: 40px; }
.bid-row .pill.val { min-width: 48px; padding: 6px 9px; }
.bid-row .pill.suit { min-width: 48px; font-size: 22px; padding: 4px 10px; }
.bid-row .pill.on { background: var(--gold); color: #1a1408; box-shadow: 0 var(--drop) 0 var(--drop-color); }
.bid-row .pill.on .suit-sym { color: #1a1408; } .bid-row .pill.on .suit-sym.red { color: #b3241c; }
.bid-row .pill.gold .suit-sym { color: #1a1408; } .bid-row .pill.gold .suit-sym.red { color: #b3241c; }

/* ---- HUD: the contract box ---- */
.hud-contract .val { font-family: var(--font-display); font-size: 18px; white-space: nowrap; }
.hud-contract .val small { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); }
.hud-contract .val .num { font-family: var(--font-num); }

/* ---- the last trick ---- */
.trick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trick-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border-radius: var(--radius-sm); }
.trick-cell .card { --card-w: clamp(54px, 15vw, 90px); }
.trick-cell.won { background: rgba(230,184,76,.14); box-shadow: inset 0 0 0 2px var(--gold); }
.trick-who { font-size: 12px; text-align: center; color: var(--text-dim); overflow-wrap: anywhere; }
.trick-who small { color: var(--text-mut); }
.trick-pts { text-align: center; margin-top: 10px; color: var(--text-dim); font-size: 14px; }

/* ---- end of deal ---- */
.cer-head { flex-wrap: wrap; gap: 8px; }
.cer-contract { font-family: var(--font-display); font-size: 15px; }
.cer-contract small { color: var(--text-dim); font-family: var(--font-ui); }
.cer-line .fill { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.cer-line .fill .note { font-family: var(--font-ui); font-size: 10px; color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); letter-spacing: .04em; text-transform: none; }
.cer-box .sub { display: block; font-size: 11px; opacity: .8; margin-top: 3px; }
.cer-line.strong .cer-box { font-size: 32px; }
.cer-verdict { position: relative; text-align: center; min-height: 34px; margin-top: 12px; font-family: var(--font-display); font-size: 22px; text-transform: var(--ui-case); letter-spacing: var(--ui-tracking); display: flex; align-items: center; justify-content: center; gap: 10px; }
.cer-verdict .who { font-size: 14px; color: var(--text-dim); }
.cer-verdict.made .term b { color: var(--green); }
.cer-verdict.down .term b, .cer-verdict .x { color: var(--mult); }
.cer-verdict.tie .term b { color: var(--gold); }
.cer-verdict > :not(.fire) { position: relative; z-index: 1; }

/* the score sheet */
.sheet { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.sheet th { font-family: var(--font-display); font-size: 11px; color: var(--text-dim); text-align: left; padding: 4px; letter-spacing: .08em; }
.sheet td { padding: 5px 4px; border-top: 1px solid var(--panel-rim); }
.sheet td.num, .sheet th:nth-child(n+3) { text-align: right; }
.sheet small { color: var(--text-dim); }

/* the waiting room's rules line */
.w-rules { text-align: center; color: var(--text-dim); font-size: 13px; margin: -4px 0 12px; letter-spacing: .04em; }
.rules-sub { display: block; font-family: var(--font-ui); font-size: 14px; text-transform: none; letter-spacing: 0; margin-top: 6px; color: color-mix(in srgb, var(--plate-ink) 75%, transparent); }
#rules-text { line-height: 1.5; font-size: 15px; }

/* ============================================================================
   PHONES
   ========================================================================== */
@media (max-width: 640px) {
  :root { --tw: clamp(46px, min(16vw, 9.5vh), 72px); }
  #game-view #game-board { column-gap: 4px; padding: 2px 6px 6px; }
  .opp.seat { padding: 5px 8px; gap: 6px; }
  .opp.seat .av { width: 26px; height: 26px; font-size: 10px; }
  .opp.seat .name { font-size: 12px; max-width: 120px; }
  .opp.seat.side { padding: 6px 4px; max-width: 76px; }
  .opp.seat.side .name { max-width: 68px; font-size: 11px; }
  .opp.seat.side .backs .card-back.mini { width: 14px; height: 20px; margin-left: -10px; }
  .opp.seat.side .backs .card-back.mini:first-child { margin-left: 0; }
  .opp.seat .badge { font-size: 9px; padding: 2px 4px 3px; }
  .bubble { font-size: 11px; padding: 2px 7px 3px; }
  /* eight cards in one row: they overlap */
  #game-view #hand-cards { --card-w: min(68px, calc((100vw - 24px) / 5.9)); gap: 0; padding-top: 12px; }
  #game-view #hand-cards .card + .card { margin-left: calc(var(--card-w) * -.3); }
  html[data-cards="photo"] #game-view #hand-cards .card__idx { display: flex; }
  #game-view #emote-bar { display: none; }
  .bid-row .pill { min-height: 38px; font-size: 12px; }
  .bid-row .pill.val { min-width: 42px; padding: 5px 7px; }
  .bid-row .pill.suit { min-width: 44px; font-size: 20px; }
  .hud-contract .val { font-size: 15px; }
  #game-view .hud-contract { padding: 5px 8px; }
  .trick-grid { gap: 4px; }
  .cer-line.strong .cer-box { font-size: 24px; }
}
@media (max-width: 360px) {
  :root { --tw: 44px; }
  .opp.seat.side { max-width: 66px; }
  .opp.seat.side .name { max-width: 60px; }
  #game-view .hud-team .lbl { max-width: 5em; }
}
/* a short landscape screen: smaller cards, the bidding panel beside the hand */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --tw: 44px; }
  #game-view #hand-cards { --card-w: 52px; padding-top: 8px; }
  #game-view #hand-cards .card + .card { margin-left: -10px; }
  #game-view #hand-area { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
  #game-view #emote-bar { display: none; }
  .opp.seat .backs .card-back.mini { width: 14px; height: 20px; }
}

/* the auction's call tags: smaller than the scoring tags */
.fx-tag.call { font-size: 13px; padding: 3px 8px 4px; }
.fx-tag.call.pass { background: var(--panel-hi); color: var(--text-dim); }

/* phones: one HUD row (scores, contract, menu), the turn line under it */
@media (max-width: 640px) {
  #game-view[data-hud] #hud { flex-wrap: wrap; row-gap: 2px; }
  #game-view .hud-spacer { display: none; }
  #game-view .hud-turn { order: 5; flex-basis: 100%; padding: 0 2px 2px; }
  #game-view .hud-contract { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; }
  #game-view .hud-contract .lbl { display: none; }
  #game-view .hud-contract .val { overflow: hidden; text-overflow: ellipsis; }
  #game-view .hud-gear { margin-left: auto; width: 40px; height: 40px; }
}
@media (max-width: 380px) {
  #game-view .hud-contract .val small { display: none; }
}

/* a card in flight never draws over an open dialog (the last trick, the menu) */
body:has(.overlay.open:not(#ov-ceremony)) .card.flying, body:has(.overlay.open:not(#ov-ceremony)) .card-back.flying { visibility: hidden; }