/* Shared game UX polish: consistent controls, status hierarchy and small-screen ergonomics. */
.game-status-announcer { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.wz, .wz * { box-sizing: border-box; }
.wz { width: min(100%, 980px); }
.wz-top { min-width: 0; }
.wz-top > .row { gap: 6px; }
.wz-top .btn { min-width: 40px; min-height: 40px; }
.wz-status { line-height: 1.35; }
.wz-status > span { min-width: 0; }
.wz-status.mine { border: 1px solid rgba(242, 193, 78, .42); }
.wz-status:not(.mine) { border: 1px solid var(--panel-line); }
.bidbox, .pk-raise, .pk-result, .tm-ready, .tm-starvote { box-sizing: border-box; }
.bidbtn, .suitbtn, .pk-size, .pk-step, .pk-btns .btn, .tm-actions .btn { min-height: 44px; }
button:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.pt-seat { min-width: 0; }
.hand, .tm-hand { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.score-wrap { max-width: 100%; overscroll-behavior-x: contain; }
.score { min-width: max-content; }
.tm-status { min-height: 42px; margin-top: 6px; display: grid; gap: 2px; justify-items: center; }
.tm-actions { display: flex; gap: 8px; }
.tm-actions .tm-play { flex: 1; }
.pk-btns .btn { min-width: 0; }
.pk-sizes { flex-wrap: wrap; }
.pk-size { min-width: 54px; }
@media (max-width: 600px) {
  .wz { gap: 7px; padding-inline: max(8px, env(safe-area-inset-left)); }
  .wz-top { display: flex; flex-wrap: wrap; gap: 6px; }
  .wz-round { flex: 1 1 auto; }
  .wz-top > .row { flex: 1 0 100%; width: 100%; justify-content: flex-end; }
  .wz-trump { flex: 1 1 120px; max-width: none; margin: 0; }
  .wz-round b { font-size: 18px; }
  .wz-top .btn { min-height: 42px; }
  .wz-status { align-items: center; min-height: 44px; padding: 8px 10px; font-size: 14px; }
  .hand-in, .tm-hand-in { justify-content: flex-start; }
  .t29-strip { gap: 6px; }
  .tbox { padding: 7px 8px; }
  .tbox b { font-size: 19px; }
  .tbox small { font-size: 10px; }
  .bidinfo { max-width: 84px; font-size: 11px; }
  .pk-actions { padding-bottom: max(2px, env(safe-area-inset-bottom)); }
  .pk-btns { grid-template-columns: .9fr 1.1fr 1.3fr; gap: 6px; }
  .pk-btns .btn { min-height: 48px; padding-inline: 6px; font-size: 14px; }
  .tm-actions { width: 100%; }
  .tm-actions .btn { min-height: 48px; }
}
@media (max-width: 380px) {
  .wz-top .btn { min-width: 36px; padding-inline: 8px; }
  .wz-top .btn.small { font-size: 12px; }
  .tbox b { font-size: 17px; }
  .pk-size { min-width: 46px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pseat.turn .av, .ct-timer.warn { animation: none; }
}

/* Keep the right-hand player seat inside the viewport on very narrow phones. */
@media (max-width: 380px) {
  .pt-seat[style*="left:87%"] { transform: translate(-65%, -50%); }
  .pt-seat { width: 76px; }
  .plate { max-width: 76px; }
}


/* Secondary reference material stays below the live play area, collapsed by default. */
.game-supporting-details { display: grid; gap: 8px; margin: 14px 0 22px; }
.game-info-panel { border: 1px solid var(--panel-line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.game-info-panel summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 13px; cursor: pointer; font-weight: 700; }
.game-info-panel summary span { color: var(--muted); font-size: 11px; font-weight: 500; }
.game-info-panel ol, .game-info-panel p { margin: 0; padding: 0 14px 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.game-info-panel ol { padding-left: 32px; }
.game-info-panel li { padding: 3px 0; }

/* One compact toolbar for every game: title on the left; chat, reactions, "more" menu and leave on the right. */
.wz-top, .ludo-tools { position: relative; }
.wz-top { flex-wrap: nowrap; gap: 8px; }
.wz-top > .row, .ludo-tools { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.wz-top .row .btn.small, .ludo-tools .btn.small { flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 4px 8px; justify-content: center; }
.tb-more-wrap { position: relative; }
.tb-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 190px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--panel-line); border-radius: 14px; background: #11261e; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.tb-pop[hidden] { display: none; }
.tb-pop .btn.small { width: 100%; min-height: 44px; justify-content: flex-start; gap: 10px; padding: 8px 12px; border-color: transparent; font-size: 14px; }
.tb-pop .sound-btn::after { content: attr(aria-label); font-size: 14px; }
.pk-blinds { min-width: 0; white-space: nowrap; }
@media (max-width: 520px) {
  .wz-top { gap: 6px; }
  .wz-top > .row { flex: 0 0 auto; width: auto; }
  .wz-round { flex: 1 1 auto; min-width: 0; }
  .wz-round b { font-size: 17px; }
  .pk-blinds .label, .pk-blinds small { display: none; }
}

/* Short phones (about 640px tall): the table gives up height so the table, your hand and the main buttons all fit on one screen. */
@media (max-width: 520px) and (max-height: 700px) {
  .pt { --pt-min: 236px; }
  .wz:has(.wz-bids) .pt:has(.pt-corner) { --pt-min:286px; } /* the trump corner needs the extra room */
  .tm .pt { --pt-min: 212px; }
  .wz:has(.t29-strip):has(.bidbox) .pt { --pt-min: 214px; } /* bidding in 29: the bid grid needs the room */
  .tm-status, .wz-status { padding-block: 6px; }
  /* your turn to bid or bet: the panel already says what to do, so its status line and the bet-size chips give way */
  .wz-status:has(+ .bidbox), .wz-status:has(+ .pk-raise) { display: none; }
  .pk-sizes { display: none; }
  .bidbox { padding: 8px 10px; gap: 6px; }
  .wz { gap: 4px; }
  .t29-strip > * { padding-block: 4px; }
  .tbox { grid-auto-flow: column; justify-content: space-between; align-items: baseline; padding: 4px 10px; }
  .bidgrid { gap: 4px; }
  .bidgrid .bidbtn { flex: 1 1 36px; min-width: 36px; padding-inline: 0; }
  .t29-strip .label, .t29-strip small { font-size: 11px; }
  .tm-status-guidance { line-height: 1.3; font-size: 13px; }
}

/* Soft, consistent feel: the same easing on every game control, gentle press feedback, nothing jumps. */
.wz .btn, .ludo .btn, .tm .btn, .bidbtn, .suitbtn, .pk-size, .pk-step { transition: transform .12s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.wz .btn:active:not(:disabled), .ludo .btn:active:not(:disabled), .tm .btn:active:not(:disabled), .bidbtn:active:not(:disabled), .suitbtn:active:not(:disabled) { transform: scale(.97); }
.wz-status, .tm-status, .ludo-dice-panel { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.hand .card, .tm-hand .tcard { transition: transform .18s ease, box-shadow .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .wz .btn, .ludo .btn, .tm .btn, .bidbtn, .suitbtn, .pk-size, .pk-step, .wz-status, .tm-status, .ludo-dice-panel, .hand .card, .tm-hand .tcard { transition: none; }
  .wz .btn:active, .ludo .btn:active, .tm .btn:active { transform: none; }
}


/* A long game name never runs under the toolbar buttons. */
.wz-top .wz-round { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A crown marks who is ahead (most books, furthest along, most progress), the same cue Wizard and 29 give with "Leading". */
.crown { font-size: .95em; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* Table voice chat: microphone and speaker buttons, a little mic next to people in voice, a ring round whoever is talking. */
.vc-btn { position: relative; }
.vc-btn.on { border-color: #43c07a; background: rgba(67, 192, 122, .18); }
.vc-btn.muted { opacity: .8; }
.vc-btn.muted::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: #ff8a7a; border-radius: 2px; transform: rotate(-35deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.wz-top .row, .ludo-tools { gap: 4px; }
@media (max-width: 400px) { .wz-top .row .btn.small, .ludo-tools .btn.small { min-width: 38px; padding-inline: 5px; } .wz-top .wz-round .label { display: none; } }

[data-voice]::before { content: '🎙️'; position: absolute; z-index: 3; top: -4px; right: -4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #1b3a2b; font-size: 11px; line-height: 1; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); pointer-events: none; }
[data-voice="muted"]::before { content: '🔇'; background: #3a2323; }
.pseat[data-voice]::before { top: 18px; right: 6px; }
.seat[data-vid], .ludo-player[data-vid], .sl-players li[data-vid], .pr-players li[data-vid] { position: relative; }
.pseat.speaking .av, .pseat.speaking .avatar { box-shadow: 0 0 0 3px #43c07a, 0 0 16px 4px rgba(67, 192, 122, .7); }
.seat.speaking .avatar, .ludo-player.speaking, .sl-players li.speaking, .pr-players li.speaking { box-shadow: 0 0 0 2px #43c07a, 0 0 12px 2px rgba(67, 192, 122, .6); }
@media (prefers-reduced-motion: no-preference) { .speaking { transition: box-shadow .15s ease; } }