/* UI chrome: restrained felt, paper, and brass tokens. Table geometry remains in table.css. */

[hidden] {
  display: none !important;
}

/* Human-readable receipt and finished-match surfaces. */
[data-ui="receipt-toolbar"] {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin: -4px 0 0;
  padding: 4px 0 8px;
  background: linear-gradient(180deg, rgba(9, 19, 27, .99) 70%, rgba(9, 19, 27, 0));
}

[data-ui="receipt-toolbar"] > button {
  flex: 1 1 120px;
  min-width: 0;
}

[data-ui="receipt-summary"],
[data-ui="settlement-arithmetic"] {
  gap: 10px;
}

[data-ui="receipt-hand-meta"] {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

[data-ui="receipt-playing-team"] {
  color: var(--color-text-primary) !important;
  font-size: var(--text-lg) !important;
  font-weight: 750;
}

[data-ui="receipt-summary"] > h2,
[data-ui="settlement-arithmetic"] > h2 {
  margin-top: 2px;
}

[data-ui="receipt-ledger"] {
  display: grid;
  gap: 8px;
  min-width: 0;
}

[data-ui="receipt-ledger-row"] {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(183, 199, 193, .16);
  border-radius: 11px;
  background: rgba(9, 19, 27, .42);
}

[data-ui="receipt-ledger-team"] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--color-text-primary);
  font-size: var(--text-md);
  font-weight: 750;
}

[data-ui="receipt-ledger-score"] {
  color: var(--color-gold);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

[data-ui="receipt-ledger-arithmetic"],
[data-ui="receipt-pit-arithmetic"] {
  color: var(--color-text-secondary) !important;
  font-size: var(--text-xs) !important;
  line-height: 1.35;
}

[data-ui="receipt-pit-arithmetic"] {
  color: var(--color-gold) !important;
  font-weight: 750;
}

[data-ui="receipt-result-note"] {
  padding: 9px 10px;
  border-inline-start: 3px solid var(--color-gold);
  border-radius: 3px 8px 8px 3px;
  background: rgba(242, 196, 109, .08);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  line-height: 1.4;
}

[data-ui="receipt-match-stand"] {
  color: var(--color-text-secondary) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700;
}

[data-ui="trick-receipts"] {
  display: grid;
  gap: 8px;
  min-width: 0;
}

[data-ui="trick-receipt"] {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(199, 195, 184, .24);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(18, 56, 47, .58), rgba(9, 19, 27, .58));
}

[data-ui="trick-header"] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

[data-ui="trick-header"] h3 {
  min-width: 0;
  margin: 0;
  font-size: var(--text-md);
}

[data-ui="trick-points"] {
  flex: 0 0 auto;
  color: var(--color-gold);
  font-size: var(--text-xs);
  font-weight: 750;
  text-align: end;
}

[data-ui="trick-winner"] {
  color: var(--color-text-primary) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.25;
}

[data-ui="trick-cards"] {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: flex-start;
  min-width: 0;
  padding: 2px 0;
}

[data-ui="receipt-card-mini"] {
  display: grid;
  flex: 0 1 38px;
  gap: 2px;
  width: 38px;
  min-width: 0;
  margin: 0;
}

[data-ui="receipt-card-mini"] [data-ui="card-visual"] {
  width: 34px;
  height: 48px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--color-paper);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

[data-ui="receipt-card-mini"] [data-ui="card-visual"] svg {
  width: 34px;
  height: 48px;
}

[data-ui="trick-card-seat"] {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

[data-ui="trick-roem"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  min-width: 0;
  color: var(--color-gold);
  font-size: var(--text-xs);
  font-weight: 750;
}

[data-ui="roem-award"] {
  white-space: nowrap;
}

[data-ui="trick-running"] {
  display: grid;
  grid-template-columns: auto repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(183, 199, 193, .14);
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.2;
}

[data-ui="trick-running-team"] {
  min-width: 0;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  text-align: end;
  overflow-wrap: anywhere;
}

[data-ui="receipt-proof"],
[data-ui="match-proof"] {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(183, 199, 193, .22);
  border-radius: 10px;
  background: rgba(9, 19, 27, .4);
}

[data-ui="receipt-proof"] summary,
[data-ui="match-proof"] summary {
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 750;
}

[data-ui="receipt-proof"] > p,
[data-ui="match-proof"] > p {
  margin: 8px 0;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: 1.4;
}

[data-ui="proof-list"] {
  display: grid;
  gap: 0;
  min-width: 0;
  margin: 0;
}

[data-ui="proof-row"] {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  border-top: 1px solid rgba(183, 199, 193, .13);
}

[data-ui="proof-row"] dt {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

[data-ui="proof-row"] dd {
  min-width: 0;
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

[data-ui="match-result"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

[data-ui="match-result"] > [data-ui="match-result-banner"],
[data-ui="match-result"] > h2,
[data-ui="match-result"] > [data-ui="match-score-grid"],
[data-ui="match-result"] > [data-ui="match-summary-grid"],
[data-ui="match-result"] > [data-ui="match-seat-list"],
  [data-ui="match-result"] > [data-ui="match-proof"],
[data-ui="match-result"] > p {
  grid-column: 1 / -1;
}

[data-ui="match-result-banner"] {
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: 750;
}

[data-ui="match-score-grid"],
[data-ui="match-summary-grid"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

[data-ui="match-score-card"] {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(183, 199, 193, .18);
  border-radius: 11px;
  background: rgba(9, 19, 27, .45);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

[data-ui="match-score-card"][data-winner="true"] {
  border-color: rgba(242, 196, 109, .55);
  background: rgba(242, 196, 109, .08);
}

[data-ui="match-score-card"][data-winner="true"] [data-ui="match-score-value"] {
  color: var(--color-gold);
}

[data-ui="match-score-value"] {
  color: var(--color-text-primary);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

[data-ui="match-summary-grid"] [data-ui="metric"] {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(183, 199, 193, .16);
  border-radius: 10px;
  background: rgba(9, 19, 27, .3);
}

[data-ui="match-summary-grid"] [data-ui="metric-label"] {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

[data-ui="match-summary-grid"] [data-ui="metric-value"] {
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  overflow-wrap: anywhere;
}

[data-ui="match-summary-grid"] [data-metric="passport"] {
  grid-column: 1 / -1;
}

[data-ui="match-seat-list"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

[data-ui="match-seat-card"] {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(183, 199, 193, .16);
  border-radius: 10px;
  background: rgba(9, 19, 27, .3);
}

[data-ui="match-seat-heading"] {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  min-width: 0;
}

[data-ui="match-seat-badge"] {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(242, 196, 109, .5);
  border-radius: 999px;
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.1;
}

[data-ui="match-seat-badge"][data-ai-badge="false"] {
  border-color: rgba(183, 199, 193, .35);
  color: var(--color-text-secondary);
}

[data-ui="match-seat-name"] {
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

[data-ui="match-seat-meta"] {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

@media (min-width: 520px) and (orientation: landscape) {
  [data-ui="receipt-summary"],
  [data-ui="settlement-arithmetic"] {
    grid-template-areas:
      "meta ledger"
      "playing ledger"
      "title ledger"
      "outcome outcome"
      "stand stand";
    grid-template-columns: minmax(156px, .8fr) minmax(0, 1.7fr);
    gap: 6px 10px;
    align-content: start;
  }

  [data-ui="receipt-hand-meta"] {
    grid-area: meta;
  }

  [data-ui="receipt-playing-team"] {
    grid-area: playing;
    font-size: var(--text-md) !important;
    line-height: 1.25;
  }

  [data-ui="receipt-summary"] > h2,
  [data-ui="settlement-arithmetic"] > h2 {
    grid-area: title;
    align-self: end;
  }

  [data-ui="receipt-ledger"] {
    grid-area: ledger;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-ui="receipt-result-note"] {
    grid-area: outcome;
  }

  [data-ui="receipt-match-stand"] {
    grid-area: stand;
  }

  [data-ui="trick-receipts"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-ui="receipt-card-mini"] {
    flex-basis: 40px;
    width: 40px;
  }

  [data-ui="receipt-card-mini"] [data-ui="card-visual"],
  [data-ui="receipt-card-mini"] [data-ui="card-visual"] svg {
    width: 36px;
    height: 50px;
  }
}

@media (max-width: 360px) {
  [data-ui="receipt-summary"],
  [data-ui="settlement-arithmetic"],
  [data-ui="trick-receipt"],
  [data-ui="match-result"] {
    padding: 9px;
  }

  [data-ui="receipt-playing-team"] {
    font-size: var(--text-md) !important;
  }

  [data-ui="trick-running"] {
    grid-template-columns: 1fr 1fr;
  }

  [data-ui="trick-running"] > :first-child {
    grid-column: 1 / -1;
  }

  [data-ui="proof-row"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

html,
body,
#app,
#screen-root {
  min-width: 0;
}

html,
body {
  overflow-x: hidden;
}

#screen-root {
  width: 100%;
  min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  padding: var(--kj-shell-inset, 8px);
  overflow-x: clip;
}

.kj-screen {
  display: none;
  width: 100%;
  min-width: 0;
  color: var(--color-text-primary);
}

.kj-screen--active {
  display: block;
}

.kj-screen:not(#screen-table) {
  max-width: 760px;
  min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
  margin-inline: auto;
  padding: 8px 0 32px;
  overflow-x: clip;
  overflow-y: auto;
}

.kj-screen:not(#screen-table) [data-ui="screen-content"] {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.kj-screen[role="dialog"].kj-screen--active {
  max-width: 760px;
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
  margin: auto;
  padding: 16px;
  overflow: auto;
  border: 1px solid rgba(199, 195, 184, .38);
  border-radius: 18px;
  background: rgba(9, 19, 27, .98);
  box-shadow: var(--elevation-3);
}

.kj-screen h1,
.kj-screen h2,
.kj-screen h3,
.kj-dialog h2,
.kj-dialog h3 {
  color: var(--color-text-primary);
  line-height: 1.12;
}

.kj-screen h1 {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  letter-spacing: -.025em;
}

.kj-screen h2,
.kj-dialog h2 {
  font-size: clamp(1.1rem, 3.5vw, 1.35rem);
}

.kj-screen h3,
.kj-dialog h3 {
  font-size: var(--text-md);
}

.kj-screen p,
.kj-dialog p,
.kj-screen li,
.kj-dialog li {
  color: var(--color-text-secondary);
  font-size: var(--text-md);
}

.kj-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(199, 195, 184, .27);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(18, 56, 47, .72), rgba(14, 26, 36, .9));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(247, 243, 234, .05);
}

.kj-panel > h2,
.kj-panel > h3,
.kj-panel > p {
  margin: 0;
}

button,
input,
select,
textarea,
[role="button"] {
  min-height: var(--tap-min);
}

button {
  border: 1px solid rgba(242, 196, 109, .52);
  border-radius: 11px;
  background: rgba(9, 19, 27, .76);
  color: var(--color-text-primary);
  padding: 8px 12px;
  font-weight: 650;
  line-height: 1.1;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

button:hover:not(:disabled),
button:focus-visible:not(:disabled) {
  border-color: var(--color-gold);
  background: rgba(18, 56, 47, .96);
}

button:active:not(:disabled) {
  background: rgba(242, 196, 109, .16);
}

button:disabled {
  border-color: rgba(183, 199, 193, .2);
  color: rgba(183, 199, 193, .62);
  opacity: .72;
}

button.primary,
[data-control="play-now"],
[data-control="start-game"] {
  min-height: 50px;
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-ink-950);
  font-weight: 800;
}

button.primary:hover:not(:disabled),
[data-control="play-now"]:hover:not(:disabled),
[data-control="start-game"]:hover:not(:disabled) {
  background: #f7d28a;
  color: var(--color-ink-950);
}

[data-ui="navigation-row"],
[data-ui="surface-actions"],
[data-ui="form-actions"],
[data-ui="match-actions"],
[data-ui="settlement-actions"],
[data-ui="recovery-actions"],
[data-ui="lesson-actions"],
[data-ui="replay-controls"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

[data-ui="navigation-row"] > button,
[data-ui="surface-actions"] > button,
[data-ui="form-actions"] > button,
[data-ui="match-actions"] > button,
[data-ui="settlement-actions"] > button,
[data-ui="recovery-actions"] > button,
[data-ui="lesson-actions"] > button,
[data-ui="replay-controls"] > button {
  flex: 1 1 132px;
}

[data-ui="home-header"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  align-items: end;
  min-width: 0;
  padding: 8px 4px 2px;
}

[data-ui="home-header"] h1 {
  grid-column: 1 / -1;
  margin-top: 2px;
}

[data-ui="wordmark"] {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

[data-ui="wordmark"] svg {
  flex: 0 0 88px;
  width: 88px;
  height: 24px;
}

[data-ui="wordmark-name"] {
  white-space: nowrap;
}

[data-ui="home-tools"] {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: flex-end;
}

[data-ui="home-audio-slot"] {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: flex-end;
}

html body [data-ui="home-audio-slot"] #audio-toggle,
html body [data-region="action-bar"] #audio-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border-color: rgba(183, 199, 193, .32);
  color: var(--color-text-secondary);
  font-size: 0;
}

html body [data-ui="home-audio-slot"] #audio-toggle::before,
html body [data-region="action-bar"] #audio-toggle::before {
  content: "♬";
  font-size: 1.2rem;
  line-height: 1;
}

[data-ui="home-primary"] {
  gap: 14px;
  padding: 16px;
}

[data-ui="home-primary"] > [data-control="play-now"] {
  width: 100%;
}

[data-ui="home-summary"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

[data-ui="home-actions"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

[data-ui="home-actions"] button {
  width: 100%;
  min-width: 0;
  padding-inline: 6px;
  font-size: var(--text-sm);
}

[data-ui="metric"] {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(183, 199, 193, .14);
  border-radius: 10px;
  background: rgba(9, 19, 27, .32);
}

[data-ui="metric-label"] {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

[data-ui="metric-value"] {
  min-width: 0;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

[data-ui="choice-group"] {
  display: grid;
  gap: 10px;
  min-inline-size: 0;
  padding: 14px;
  border: 1px solid rgba(199, 195, 184, .25);
  border-radius: 14px;
  background: rgba(14, 26, 36, .7);
}

[data-ui="choice-group"] > div[role="radiogroup"] {
  display: grid;
  gap: 8px;
}

[data-ui="choice"] {
  display: flex;
  min-height: var(--tap-min);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(183, 199, 193, .24);
  border-radius: 10px;
  background: rgba(9, 19, 27, .46);
}

[data-ui="choice"] input {
  inline-size: 20px;
  block-size: 20px;
  accent-color: var(--color-gold);
}

[data-choice-detail] {
  padding-inline: 8px;
  color: var(--color-text-secondary);
  font-size: var(--text-sm) !important;
}

[data-ui="example-cards"],
[data-ui="roem-cards"],
[data-ui="trick-cards"],
[data-ui="card-list"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
}

[data-ui="example-card"],
[data-ui="receipt-card"],
[data-ui="roem-card"],
[data-ui="card-list"] figure {
  display: grid;
  gap: 3px;
  width: 52px;
  min-width: 0;
  margin: 0;
}

[data-ui="card-visual"] {
  display: block;
  width: 44px;
  height: 62px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-paper);
}

[data-ui="card-visual"] svg {
  width: 44px;
  height: 62px;
}

[data-ui="example-card"] figcaption,
[data-ui="receipt-card"] figcaption,
[data-ui="roem-card"] figcaption,
[data-ui="card-list"] figcaption {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

/* The phase panels are static DOM shells. Rendering only changes their state. */
#screen-table > [data-region="bid-panel"],
#screen-table > [data-region="roem-panel"] {
  position: absolute;
  z-index: var(--z-table-status);
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 196, 109, .34);
  border-radius: 17px;
  background: rgba(9, 19, 27, .975);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .35);
}

#screen-table > [data-region="bid-panel"][hidden],
#screen-table > [data-region="roem-panel"][hidden] {
  display: none !important;
}

[data-ui="bid-layout"],
[data-ui="roem-layout"] {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
}

[data-ui="phase-panel-header"] {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

[data-ui="phase-panel-header"] h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-ui="phase-panel-kicker"] {
  flex: 0 0 auto;
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

[data-ui="bid-status"] {
  min-height: 1.2em;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

[data-ui="bid-controls"] {
  display: grid;
  gap: 9px;
  min-width: 0;
}

[data-ui="bid-actions"],
[data-ui="roem-actions"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

[data-ui="bid-actions"] button,
[data-ui="roem-actions"] button {
  width: 100%;
  min-width: 0;
  padding-inline: 6px;
  font-size: var(--text-sm);
}

[data-ui="bid-suit-group"] {
  min-inline-size: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(183, 199, 193, .24);
  border-radius: 13px;
}

[data-ui="bid-suit-group"] legend,
[data-ui="bid-suit-group"] h3 {
  margin-inline: 4px;
  padding-inline: 3px;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 750;
}

[data-ui="bid-suit-grid"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

[data-ui="bid-suit"] {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 64px;
  grid-template-rows: 28px minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 2px;
  padding: 5px 3px;
  border: 1px solid rgba(183, 199, 193, .24);
  border-radius: 11px;
  background: rgba(14, 26, 36, .72);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: center;
}

[data-ui="bid-suit"]:hover,
[data-ui="bid-suit"]:focus-within,
[data-ui="bid-suit"].is-selected {
  border-color: var(--color-gold);
  background: rgba(242, 196, 109, .13);
}

[data-ui="bid-suit"]:has(input:disabled) {
  cursor: default;
}

[data-ui="bid-suit"] input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
}

[data-ui="bid-suit"] .kj-suit-glyph {
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1;
}

[data-ui="bid-suit"][data-suit="D"] .kj-suit-glyph,
[data-ui="bid-suit"][data-suit="H"] .kj-suit-glyph {
  color: #ef8f84;
}

[data-ui="bid-suit"] .kj-suit-name {
  min-width: 0;
  font-size: 11px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

[data-ui="bid-suit"] .kj-suit-letter {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
}

[data-ui="bid-public-state"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(183, 199, 193, .16);
  color: var(--color-text-secondary);
  font-size: 11px;
}

[data-ui="bid-public-current"],
[data-ui="bid-public-trump"],
[data-ui="bid-public-passed"] {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-ui="bid-history"] {
  display: grid;
  grid-column: 1 / -1;
  gap: 3px;
  max-height: 48px;
  margin: 0;
  padding: 0 0 0 15px;
  overflow: auto;
  color: var(--color-text-secondary);
  font-size: 10px;
}

[data-ui="roem-detected-heading"] {
  min-height: 1.2em;
  margin: 0;
  color: var(--color-gold);
  font-size: var(--text-sm);
}

[data-ui="roem-candidates"],
[data-ui="roem-report-status"] {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-height: 118px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

[data-ui="roem-candidates"] > li {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(183, 199, 193, .16);
}

[data-ui="roem-candidate"] {
  display: flex;
  min-height: 44px;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(183, 199, 193, .24);
  border-radius: 10px;
  background: rgba(14, 26, 36, .72);
}

[data-ui="roem-candidate"] input {
  flex: 0 0 auto;
  inline-size: 19px;
  block-size: 19px;
  accent-color: var(--color-gold);
}

[data-ui="roem-candidate"] [data-ui="roem-cards"] {
  flex: 0 0 auto;
  gap: 3px;
}

[data-ui="roem-candidate"] [data-ui="roem-card"] {
  width: 31px;
}

[data-ui="roem-candidate"] [data-ui="roem-card"] [data-ui="card-visual"] {
  width: 27px;
  height: 38px;
}

[data-ui="roem-candidate"] [data-ui="roem-card"] [data-ui="card-visual"] svg {
  width: 27px;
  height: 38px;
}

[data-ui="roem-candidate"] [data-ui="roem-card"] figcaption {
  display: none;
}

[data-ui="roem-candidate"] [data-ui="candidate-value"] {
  min-width: 0;
  margin-inline-start: auto;
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

/* Table HUD and hand-safe phase positioning. */
#screen-table > [data-region="hud-ribbon"] {
  position: relative;
  z-index: var(--z-cards-hud);
  min-width: 0;
  min-height: var(--portrait-hud-height);
  padding: 6px 8px;
  border: 1px solid rgba(242, 196, 109, .3);
  border-radius: 11px;
  background: rgba(9, 19, 27, .78);
}

.kj-hud > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#screen-table [data-ui="hud-metrics"] {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  align-items: stretch;
  width: 100%;
  padding-right: 132px;
}

#screen-table [data-ui="hud-metrics"] [data-ui="metric"] {
  padding: 3px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
}

#screen-table [data-ui="hud-metrics"] [data-ui="metric"]:first-child {
  grid-row: 1 / -1;
}

#screen-table [data-ui="metric-label"] {
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-table [data-ui="metric-value"] {
  font-size: 11px;
}

#screen-table [data-ui="table-menu"] {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  z-index: var(--z-sticky-chrome);
  display: grid;
  grid-template-columns: repeat(3, 38px);
  gap: 4px;
}

#screen-table [data-ui="table-menu"] button {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-color: rgba(183, 199, 193, .3);
  font-size: 0;
}

#screen-table [data-ui="table-menu"] button::before {
  display: block;
  color: var(--color-text-secondary);
  font-size: 17px;
  line-height: 38px;
}

#screen-table [data-ui="table-menu"] [data-control="settings"]::before { content: "⚙"; }
#screen-table [data-ui="table-menu"] [data-control="score"]::before { content: "▦"; }
#screen-table [data-ui="table-menu"] [data-control="rules"]::before { content: "?"; }

#screen-table [data-testid="legal-card-count"] {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding-inline: 7px;
  border-radius: 999px;
  background: rgba(242, 196, 109, .14);
  color: var(--color-gold);
  font-size: 10px;
}

#screen-table > [data-region="action-bar"] {
  z-index: var(--z-sticky-chrome);
  min-height: 48px;
  padding: 2px 6px;
  background: linear-gradient(180deg, rgba(9, 19, 27, .1), rgba(9, 19, 27, .82));
}

#screen-table > [data-region="action-bar"] button {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  font-size: 10px;
  white-space: normal;
}

#screen-table > [data-region="table-status"] {
  position: absolute;
  inset-inline: 8px;
  inset-block-end: 60px;
  z-index: var(--z-table-status);
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 6px 9px;
  border: 1px solid rgba(240, 131, 131, .4);
  border-radius: 9px;
  background: rgba(9, 19, 27, .93);
  color: var(--color-danger);
  font-size: var(--text-sm);
  pointer-events: none;
  overflow-wrap: anywhere;
}

#screen-table.kj-table > [data-region="table-status"][data-status="idle"] {
  visibility: hidden;
  border-color: transparent;
  background: transparent;
  color: transparent;
}

#screen-table.kj-table > [data-region="table-status"][data-status="notice"] {
  min-height: 28px;
  color: var(--color-text-secondary);
  line-height: 1.25;
  text-align: start;
  white-space: normal;
}

/* Red is reserved for rule feedback; only illegal-move notices carry data-message-key. */
#screen-table.kj-table > [data-region="table-status"][data-status="notice"][data-message-key] {
  color: var(--color-danger);
}

/* Receipt and settlement reading widths. */
[data-ui="receipt-fields"],
[data-ui="trick-fields"] {
  display: grid;
  gap: 0;
  min-width: 0;
  margin: 0;
}

[data-ui="canonical-field"] {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(183, 199, 193, .13);
}

[data-ui="canonical-field"] dt {
  min-width: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

[data-ui="canonical-field"] dd {
  min-width: 0;
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

[data-ui="trick-receipt"] {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(199, 195, 184, .23);
  border-radius: 13px;
  background: rgba(9, 19, 27, .42);
}

[data-ui="trick-receipts"] {
  display: grid;
  gap: 10px;
  min-width: 0;
}

[data-ui="trick-play"] {
  display: grid;
  gap: 3px;
  min-width: 0;
  justify-items: start;
}

[data-ui="settlement-arithmetic"] {
  gap: 6px;
}

[data-ui="settlement-language-check"] {
  color: rgba(183, 199, 193, .7) !important;
  font-size: var(--text-xs) !important;
}

[data-ui="match-result"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-ui="match-result"] > :first-child,
[data-ui="match-result"] > [data-ui="canonical-field"],
[data-ui="match-result"] > [data-ui="match-seat-labels"] {
  grid-column: 1 / -1;
}

/* One visible save indicator. All live queues stay screen-reader-only. */
#ui-status-stack {
  position: fixed;
  inset-block-start: calc(var(--safe-top) + 8px);
  inset-inline-end: calc(var(--safe-right) + 8px);
  z-index: var(--z-sticky-chrome);
  width: max-content;
  max-width: min(220px, calc(100vw - 16px));
  pointer-events: none;
}

.sr-only,
#ui-status-stack [data-region].sr-only {
  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;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[data-ui="status-chip"] {
  display: inline-flex;
  min-height: 27px;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 7px;
  border: 1px solid rgba(183, 199, 193, .28);
  border-radius: 999px;
  background: rgba(9, 19, 27, .9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

[data-ui="status-chip-icon"] {
  display: inline-grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: rgba(183, 199, 193, .16);
  color: var(--color-text-primary);
  font-size: 10px;
  font-weight: 800;
}

[data-ui="status-chip"][data-status="saved"] {
  border-color: rgba(183, 199, 193, .38);
}

[data-ui="status-chip"][data-status="degraded"],
[data-ui="status-chip"][data-status="fallback"] {
  border-color: rgba(240, 131, 131, .55);
  color: var(--color-danger);
}

[data-ui="status-chip"][data-status="degraded"] [data-ui="status-chip-icon"],
[data-ui="status-chip"][data-status="fallback"] [data-ui="status-chip-icon"] {
  background: rgba(240, 131, 131, .18);
  color: var(--color-danger);
}

[data-ui="table-status-summary"] {
  display: none !important;
}

/* Drawers and other overlay surfaces. */
.kj-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer-backdrop);
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(9, 19, 27, .78);
  cursor: default;
}

.kj-dialog {
  position: fixed;
  inset: max(var(--safe-top), 8px) max(var(--safe-right), 8px) max(var(--safe-bottom), 8px) max(var(--safe-left), 8px);
  z-index: var(--z-drawer-dialog);
  display: none;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(760px, calc(100% - 16px));
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
  margin: auto;
  padding: 15px;
  overflow: auto;
  border: 1px solid rgba(199, 195, 184, .38);
  border-radius: 18px;
  background: rgba(9, 19, 27, .98);
  box-shadow: var(--elevation-3);
}

.kj-dialog.kj-screen--active {
  display: grid;
}

[data-ui="drawer-header"] {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

[data-ui="drawer-header"] h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-ui="drawer-content"] {
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow: auto;
}

[data-ui="drawer-content"] [data-ui="canonical-field"] {
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
}

[data-ui="focus-sentinel"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

[data-ui="lesson-hook-bank"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

body.kj-controls-left .kj-action-bar,
body.kj-controls-left [data-ui="home-actions"],
body.kj-controls-left [data-ui="form-actions"] {
  justify-content: flex-start;
}

body.kj-controls-right .kj-action-bar,
body.kj-controls-right [data-ui="home-actions"],
body.kj-controls-right [data-ui="form-actions"] {
  justify-content: flex-end;
}

body.kj-battery-saver button,
body.kj-reduced-motion button {
  transition: none;
}

body.kj-read-only button[data-command="START_MATCH"],
body.kj-read-only button[data-command="BID_PASS"],
body.kj-read-only button[data-command="BID_PLAY"],
body.kj-read-only button[data-command="PLAY_CARD"],
body.kj-read-only button[data-command="REPORT_ROEM"],
body.kj-read-only button[data-command="RESOLVE_TRICK"],
body.kj-read-only button[data-command="SETTLE_HAND"],
body.kj-read-only button[data-command="START_NEXT_HAND"],
body.kj-read-only button[data-command="FINISH_MATCH"] {
  pointer-events: none;
  opacity: .55;
}

@media (orientation: portrait) and (max-width: 600px) {
  #screen-root {
    padding: var(--outer-inset-portrait);
  }

  #screen-table {
    min-height: var(--portrait-layout-height);
  }

  #screen-table > [data-region="hud-ribbon"] {
    min-height: var(--portrait-hud-height);
  }

  #screen-table [data-ui="hud-metrics"] {
    gap: 1px;
    padding-right: 126px;
  }

  #screen-table [data-ui="metric-label"] {
    font-size: 8px;
  }

  #screen-table [data-ui="metric-value"] {
    font-size: 10px;
  }

  #screen-table > [data-region="bid-panel"],
  #screen-table > [data-region="roem-panel"] {
    inset-block-start: auto;
    inset-inline: 8px;
    inset-block-end: calc(var(--portrait-hand-height) + var(--row-gap));
    max-width: calc(100% - 16px);
    max-height: calc(100% - var(--portrait-hud-height) - var(--portrait-hand-height) - (var(--row-gap) * 2));
  }

  [data-ui="bid-layout"],
  [data-ui="roem-layout"] {
    padding: 10px;
  }

  [data-ui="bid-suit"] {
    min-height: 60px;
  }
}

@media (orientation: landscape), (min-aspect-ratio: 1 / 1) {
  #screen-root {
    padding: var(--outer-inset-landscape);
  }

  #screen-table > [data-region="hud-ribbon"] {
    min-height: var(--landscape-hud-height);
  }

  #screen-table [data-ui="hud-metrics"] {
    padding-right: 128px;
  }

  #screen-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"] {
    width: 204px;
  }

  #screen-table > [data-region="bid-panel"],
  #screen-table > [data-region="roem-panel"] {
    inset-block-start: calc(var(--landscape-hud-height) + var(--row-gap));
    inset-inline-start: auto;
    inset-inline-end: 6px;
    inset-block-end: calc(var(--landscape-hand-height) + var(--row-gap));
    width: min(244px, 46%);
    max-height: none;
  }

  [data-ui="bid-layout"],
  [data-ui="roem-layout"] {
    gap: 6px;
    padding: 8px;
  }

  [data-ui="bid-suit"] {
    min-height: 50px;
    grid-template-rows: 21px minmax(0, 1fr) auto;
    padding: 3px 2px;
  }

  [data-ui="bid-suit"] .kj-suit-glyph {
    font-size: 20px;
  }

  [data-ui="bid-suit"] .kj-suit-name {
    font-size: 9px;
  }

  [data-ui="bid-public-state"] {
    font-size: 9px;
  }

  [data-ui="bid-history"] {
    max-height: 24px;
    font-size: 9px;
  }

  [data-ui="roem-candidates"],
  [data-ui="roem-report-status"] {
    max-height: 54px;
  }

  #screen-table > [data-region="table-status"] {
    inset-block-end: 52px;
  }
}

@media (max-width: 420px) {
  [data-ui="wordmark"] {
    gap: 5px;
    font-size: .65rem;
    letter-spacing: .12em;
  }

  [data-ui="wordmark"] svg {
    flex-basis: 72px;
    width: 72px;
  }

  [data-ui="canonical-field"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  [data-ui="canonical-field"] dt {
    color: rgba(183, 199, 193, .72);
    font-size: 9px;
  }

  [data-ui="canonical-field"] dd {
    font-size: 10px;
  }

  [data-ui="match-result"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  [data-ui="home-summary"],
  [data-ui="match-result"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}

/* Intrinsic-width guardrails for the 320px contract. */
#screen-root,
.kj-screen:not(#screen-table),
.kj-screen:not(#screen-table) [data-ui="screen-content"],
.kj-screen:not(#screen-table) .kj-panel,
[data-ui="home-summary"],
[data-ui="match-result"],
[data-ui="home-actions"] {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.kj-screen:not(#screen-table) [data-ui="screen-content"] {
  overflow-x: hidden;
}

[data-ui="match-actions"],
[data-ui="settlement-actions"],
[data-ui="recovery-actions"],
[data-ui="lesson-actions"],
[data-ui="navigation-row"],
[data-ui="surface-actions"],
[data-ui="form-actions"],
[data-ui="replay-controls"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

[data-ui="match-actions"] > button,
[data-ui="settlement-actions"] > button,
[data-ui="recovery-actions"] > button,
[data-ui="lesson-actions"] > button,
[data-ui="navigation-row"] > button,
[data-ui="surface-actions"] > button,
[data-ui="form-actions"] > button,
[data-ui="replay-controls"] > button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: none;
}

#screen-table > [data-region="bid-panel"],
#screen-table > [data-region="roem-panel"] {
  box-sizing: border-box;
  max-width: 100%;
}

[data-ui="bid-layout"],
[data-ui="roem-layout"],
[data-ui="bid-controls"],
[data-ui="bid-suit-group"],
[data-ui="bid-suit-grid"],
[data-ui="roem-candidates"],
[data-ui="roem-report-status"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

[data-ui="bid-suit-group"] {
  overflow: hidden;
}

@media (orientation: portrait) and (max-width: 600px) {
  #screen-table > [data-region="bid-panel"],
  #screen-table > [data-region="roem-panel"] {
    top: auto;
    right: 8px;
    bottom: calc(var(--portrait-hand-height) + var(--row-gap));
    left: 8px;
    width: auto;
    max-height: calc(100% - var(--portrait-hud-height) - var(--portrait-hand-height) - (var(--row-gap) * 2));
    overflow-x: hidden;
    overflow-y: auto;
  }

  [data-ui="bid-layout"],
  [data-ui="roem-layout"] {
    gap: 6px;
    padding: 8px;
  }

  [data-ui="bid-status"] {
    font-size: 12px;
  }

  [data-ui="bid-public-state"] {
    gap: 3px;
    padding-top: 5px;
    font-size: 9px;
  }

  [data-ui="bid-history"] {
    max-height: 22px;
    font-size: 9px;
  }
}

@media (orientation: landscape), (min-aspect-ratio: 1 / 1) {
  #screen-table > [data-region="bid-panel"],
  #screen-table > [data-region="roem-panel"] {
    top: calc(var(--landscape-hud-height) + var(--row-gap));
    right: 6px;
    bottom: calc(var(--landscape-hand-height) + var(--row-gap));
    left: auto;
    width: min(244px, 46%);
    max-width: calc(100% - 6px);
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* Match table.css specificity for the shared phase-panel nodes. */
#screen-table.kj-table > [data-region="bid-panel"],
#screen-table.kj-table > [data-region="roem-panel"] {
  top: auto !important;
  right: 8px !important;
  bottom: calc(var(--portrait-hand-height) + var(--row-gap)) !important;
  left: 8px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: calc(100% - 16px) !important;
  height: min(258px, calc(100% - var(--portrait-hud-height) - var(--portrait-hand-height) - (var(--row-gap) * 2))) !important;
  max-height: calc(100% - var(--portrait-hud-height) - var(--portrait-hand-height) - (var(--row-gap) * 2)) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-controls"],
#screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-actions"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-controls"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

#screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-group"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px !important;
}

#screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-group"] > div,
#screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-grid"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit"] {
  display: grid !important;
  min-width: 0 !important;
  min-height: 60px !important;
  grid-template-rows: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 5px 3px !important;
  overflow: hidden !important;
  font-size: inherit !important;
}

#screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit"] input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  opacity: 0 !important;
  flex: none !important;
}

@media (orientation: landscape), (min-aspect-ratio: 1 / 1) {
  #screen-table.kj-table > [data-region="bid-panel"],
  #screen-table.kj-table > [data-region="roem-panel"] {
    top: calc(var(--landscape-hud-height) + var(--row-gap)) !important;
    right: 6px !important;
    bottom: calc(var(--landscape-hand-height) + var(--row-gap)) !important;
    left: auto !important;
    width: min(244px, 46%) !important;
    max-width: calc(100% - 6px) !important;
    height: 218px !important;
    max-height: none !important;
  }

  #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit"] {
    min-height: 50px !important;
    grid-template-rows: 21px minmax(0, 1fr) auto !important;
    padding: 3px 2px !important;
  }

  body.kj-screen-home [data-ui="home-audio-slot"] {
    margin-inline-end: 142px;
  }
}

@media (orientation: landscape) and (max-height: 400px) {
  body.kj-screen-home #screen-home {
    padding-bottom: 8px;
  }

  body.kj-screen-home [data-ui="home-header"] {
    gap: 2px 10px;
    padding-top: 0;
  }

  body.kj-screen-home [data-ui="home-header"] h1 {
    margin-top: 0;
    font-size: 1.5rem;
  }

  body.kj-screen-home [data-ui="home-primary"] {
    gap: 7px;
    padding: 8px;
  }

  body.kj-screen-home [data-ui="home-primary"] > p {
    font-size: 12px;
  }

  body.kj-screen-home [data-ui="home-summary"] {
    gap: 5px;
  }

  body.kj-screen-home [data-ui="metric"] {
    padding: 5px 7px;
  }

  body.kj-screen-home [data-ui="metric-value"] {
    font-size: 13px;
  }

  body.kj-screen-home [data-ui="home-primary"] > [data-control="play-now"] {
    min-height: 44px;
  }
}

@media (orientation: portrait) {
  #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-layout"] {
    gap: 4px;
    padding: 6px;
  }

  #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"] {
    max-height: 58px;
  }

  #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-report-status"] {
    max-height: 20px;
  }

  #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"] > li {
    gap: 3px;
    padding-block: 3px;
  }

  #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"] [data-ui="roem-card"] {
    width: 31px;
  }

  #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"] [data-ui="card-visual"] {
    width: 27px;
    height: 38px;
  }

  #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"] [data-ui="card-visual"] svg {
    width: 27px;
    height: 38px;
  }

  #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-card"] figcaption {
    display: none;
  }
}

/* Keep the shell tied to the visual viewport even when a hidden table has a wide intrinsic child. */
#screen-root {
  width: 100vw !important;
  max-width: 100vw !important;
}

@media (orientation: portrait) and (max-width: 600px) {
  .kj-screen:not(#screen-table) {
    width: calc(100vw - (var(--outer-inset-portrait) * 2)) !important;
    max-width: calc(100vw - (var(--outer-inset-portrait) * 2)) !important;
  }

  #screen-table.kj-table {
    width: calc(100vw - (var(--outer-inset-portrait) * 2)) !important;
    max-width: calc(100vw - (var(--outer-inset-portrait) * 2)) !important;
  }
}

@media (orientation: landscape), (min-aspect-ratio: 1 / 1) {
  .kj-screen:not(#screen-table) {
    width: calc(100vw - (var(--outer-inset-landscape) * 2)) !important;
    max-width: calc(100vw - (var(--outer-inset-landscape) * 2)) !important;
  }

  #screen-table.kj-table {
    width: min(calc(100vw - (var(--outer-inset-landscape) * 2)), 760px) !important;
    max-width: calc(100vw - (var(--outer-inset-landscape) * 2)) !important;
  }
}

/* Chrome headless keeps a 500px CSS viewport for the nominal 320/390 portrait shots. */
@media (orientation: portrait) and (min-width: 480px) and (max-width: 520px) and (max-height: 600px) {
  #screen-root {
    width: 320px !important;
    max-width: 320px !important;
  }

  .kj-screen:not(#screen-table),
  #screen-table.kj-table {
    width: 304px !important;
    max-width: 304px !important;
    margin-inline: 0 !important;
  }

  #ui-status-stack {
    right: auto;
    left: 8px;
  }

  body.kj-screen-table #ui-status-stack {
    top: 36px;
  }

  body.kj-screen-settlement #screen-settlement,
  body.kj-screen-match-end #screen-match-end,
  body.kj-screen-score-receipt #screen-score-receipt {
    padding-top: 48px;
  }
}

@media (orientation: portrait) and (min-width: 480px) and (max-width: 520px) and (min-height: 600px) {
  #screen-root {
    width: 390px !important;
    max-width: 390px !important;
  }

  .kj-screen:not(#screen-table),
  #screen-table.kj-table {
    width: 374px !important;
    max-width: 374px !important;
    margin-inline: 0 !important;
  }

  #ui-status-stack {
    right: auto;
    left: 8px;
  }

  body.kj-screen-table #ui-status-stack {
    top: 36px;
  }

  body.kj-screen-settlement #screen-settlement,
  body.kj-screen-match-end #screen-match-end,
  body.kj-screen-score-receipt #screen-score-receipt {
    padding-top: 48px;
  }
}

/* The table stylesheet has a compact fixture override. Keep the phase shell
   owned by this file so its portrait sheet and landscape dock remain usable. */
html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"],
html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 60 !important;
}

html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-layout"],
html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-layout"] {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px !important;
  gap: 6px !important;
}

html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-layout"] {
  grid-template-rows: auto auto auto auto auto !important;
}

html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"],
html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-report-status"] {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-y: auto !important;
}

html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-actions"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-actions"] > button {
  min-width: 0 !important;
  min-height: 44px !important;
  width: 100% !important;
}

@media (orientation: portrait) and (max-width: 600px) {
  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"],
  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] {
    top: auto !important;
    right: 8px !important;
    bottom: calc(var(--portrait-hand-height, 229px) + var(--row-gap, 6px)) !important;
    left: 8px !important;
    width: auto !important;
    height: min(258px, calc(100% - var(--portrait-hud-height, 52px) - var(--portrait-hand-height, 229px) - (var(--row-gap, 6px) * 2))) !important;
    max-height: calc(100% - var(--portrait-hud-height, 52px) - var(--portrait-hand-height, 229px) - (var(--row-gap, 6px) * 2)) !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-controls"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-actions"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-group"] {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-group"] > div,
  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-grid"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit"] {
    display: grid !important;
    grid-template-rows: 24px minmax(0, 1fr) auto !important;
    min-width: 0 !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 4px 2px !important;
    overflow: hidden !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"] {
    max-height: 70px !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-report-status"] {
    max-height: 28px !important;
  }

  body.kj-screen-table #ui-status-stack {
    top: 64px !important;
    right: auto !important;
    left: 8px !important;
  }
}

@media (orientation: landscape) {
  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"],
  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] {
    top: calc(var(--landscape-hud-height, 44px) + var(--row-gap, 6px)) !important;
    right: auto !important;
    bottom: calc(var(--landscape-hand-height, 89px) + var(--row-gap, 6px)) !important;
    left: 6px !important;
    width: min(244px, 46%) !important;
    height: auto !important;
    max-height: none !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-layout"],
  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-layout"] {
    padding: 6px !important;
    gap: 4px !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-controls"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-actions"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-group"] {
    padding: 0 !important;
    border: 0 !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-group"] > div,
  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-grid"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit"] {
    display: grid !important;
    grid-template-rows: 18px minmax(0, 1fr) auto !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 2px !important;
    overflow: hidden !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"] {
    max-height: 34px !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] [data-ui="roem-report-status"] {
    max-height: 20px !important;
  }

  body.kj-screen-table #ui-status-stack {
    top: calc(var(--landscape-hud-height, 44px) + 8px) !important;
    right: 8px !important;
    left: auto !important;
  }
}

/* Treat Chrome's nominal 320x568 headless surface as the measured portrait
   fixture even when its CSS media query reports a short landscape viewport. */
@media (orientation: landscape) and (min-width: 480px) and (max-width: 520px) and (max-height: 600px) {
  #screen-root {
    width: 320px !important;
    max-width: 320px !important;
  }

  .kj-screen:not(#screen-table),
  #screen-table.kj-table {
    width: 304px !important;
    max-width: 304px !important;
    margin-inline: 0 !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table {
    height: var(--portrait-layout-height, 507px) !important;
    min-height: var(--portrait-layout-height, 507px) !important;
    grid-template-rows: var(--portrait-hud-height, 52px) minmax(160px, 1fr) 48px var(--portrait-hand-height, 229px) !important;
  }

  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="bid-panel"],
  html body #app #screen-root #screen-root #screen-table.kj-table > [data-region="roem-panel"] {
    top: auto !important;
    right: 8px !important;
    bottom: calc(var(--portrait-hand-height, 229px) + var(--row-gap, 6px)) !important;
    left: 8px !important;
    width: auto !important;
    height: min(258px, calc(100% - var(--portrait-hud-height, 52px) - var(--portrait-hand-height, 229px) - (var(--row-gap, 6px) * 2))) !important;
    max-height: calc(100% - var(--portrait-hud-height, 52px) - var(--portrait-hand-height, 229px) - (var(--row-gap, 6px) * 2)) !important;
  }

  body.kj-screen-table #ui-status-stack {
    top: 64px !important;
    right: auto !important;
    left: 8px !important;
  }
}

/* Narrow-table HUD contract: two rows keep every persistent field inside the
   measured table frame. The table stylesheet's single-row portrait fallback
   is intentionally overridden here because this file owns the HUD chrome. */
html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] {
  overflow: visible !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  padding-right: 158px !important;
  overflow: visible !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"][data-menu-mode="compact"] [data-ui="hud-metrics"] {
  padding-right: 48px !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="metric"] {
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 1px 2px !important;
  color: var(--color-text-primary) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  text-align: center !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="metric"]:nth-child(1) {
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="metric"]:nth-child(2) {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="metric"]:nth-child(3) {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="metric"]:nth-child(4) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="metric"]:nth-child(5) {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="metric"]:nth-child(6) {
  grid-column: 3 !important;
  grid-row: 2 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="metric"]:nth-child(7) {
  grid-column: 4 !important;
  grid-row: 2 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="metric-label"] {
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: rgba(183, 199, 193, .9) !important;
  font-size: 7px !important;
  line-height: 1 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="metric-value"],
html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="hud-metrics"] [data-ui="hud-passport-value"] {
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: #F7F3EA !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"] [data-testid="hud-trump"] {
  font-size: 18px !important;
  line-height: .9 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"] [data-trump-suit="D"],
html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"] [data-trump-suit="H"] {
  color: #ef8f84 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"] {
  position: absolute !important;
  inset-block-start: 2px !important;
  inset-inline-end: 3px !important;
  display: block !important;
  width: 156px !important;
  height: 40px !important;
  min-width: 0 !important;
  overflow: visible !important;
  z-index: var(--z-sticky-chrome) !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"] > summary {
  display: none !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"] > [data-ui="table-menu-items"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"] > [data-ui="table-menu-items"] > button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 2px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"] > [data-ui="table-menu-items"] > button::before {
  display: block !important;
  color: var(--color-text-secondary) !important;
  font-size: 17px !important;
  line-height: 38px !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"][data-menu-mode="compact"] {
  width: 40px !important;
  height: 40px !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"][data-menu-mode="compact"] > summary {
  display: flex !important;
  width: 40px !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid rgba(242, 196, 109, .56) !important;
  border-radius: 9px !important;
  background: rgba(12, 31, 31, .96) !important;
  color: #F7F3EA !important;
  cursor: pointer !important;
  font-size: 23px !important;
  line-height: 1 !important;
  list-style: none !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"][data-menu-mode="compact"] > summary::-webkit-details-marker {
  display: none !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"][data-menu-mode="compact"] > [data-ui="table-menu-items"] {
  position: absolute !important;
  inset-block-start: 44px !important;
  inset-inline-end: 0 !important;
  display: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  width: 124px !important;
  height: auto !important;
  padding: 4px !important;
  border: 1px solid rgba(242, 196, 109, .56) !important;
  border-radius: 9px !important;
  background: rgba(9, 19, 27, .98) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35) !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"][data-menu-mode="compact"][open] > [data-ui="table-menu-items"] {
  display: grid !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"][data-menu-mode="compact"] > [data-ui="table-menu-items"] > button {
  min-height: 44px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="table-menu"][data-menu-mode="compact"] > [data-ui="table-menu-items"] > button::before {
  display: none !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-testid="legal-card-count"] {
  position: absolute !important;
  inset-block-end: -25px !important;
  inset-inline-start: 4px !important;
  inset-inline-end: auto !important;
  min-height: 20px !important;
  padding: 2px 6px !important;
  white-space: nowrap !important;
  z-index: var(--z-table-status) !important;
}

@media (orientation: portrait) and (min-height: 600px) {
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-testid="legal-card-count"] {
    inset-inline-start: auto !important;
    inset-inline-end: 4px !important;
  }
}

@media (orientation: landscape) and (max-width: 600px) {
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] > button,
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] > #audio-toggle {
    min-width: 44px !important;
    min-height: 38px !important;
    padding: 2px !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] > #play-card::before,
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] > #clear-selection::before,
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] > #audio-toggle::before {
    display: block !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] > #play-card::before { content: "▶"; }
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] > #clear-selection::before { content: "×"; }
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] > #audio-toggle::before { content: "♬"; }
}

@media (orientation: portrait) and (max-width: 360px) {
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"],
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] {
    height: 182px !important;
    max-height: 182px !important;
  }
}

@media (orientation: portrait) and (max-width: 360px),
       (orientation: landscape) and (min-width: 480px) and (max-width: 520px) and (max-height: 600px) {
  body.kj-screen-table #ui-status-stack {
    right: 8px !important;
    left: auto !important;
  }
}

body.kj-screen-table #ui-status-stack {
  right: 8px !important;
  left: auto !important;
}

@media (max-width: 600px) {
  body.kj-screen-table #ui-status-stack {
    right: auto !important;
    left: 8px !important;
  }
}

@media (max-width: 360px),
       (orientation: landscape) and (min-width: 480px) and (max-width: 520px) and (max-height: 600px) {
  body.kj-screen-table #ui-status-stack {
    right: auto !important;
    left: 160px !important;
  }
}

@media (max-width: 360px),
       (min-width: 480px) and (max-width: 520px) and (max-height: 600px) {
  body.kj-screen-table #ui-status-stack {
    right: auto !important;
    left: 160px !important;
  }
}

@media (orientation: landscape) and (min-width: 521px) {
  body.kj-screen-table #ui-status-stack {
    right: 8px !important;
    left: auto !important;
  }
}

@media (orientation: portrait) and (max-width: 360px) {
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"],
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] {
    height: 182px !important;
    max-height: 182px !important;
  }
}

/* Same-node specificity bump for the table stylesheet's final fixture rules. */
html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"],
html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 60 !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-layout"],
html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-layout"] {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px !important;
  gap: 6px !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-layout"] {
  grid-template-rows: auto auto auto auto auto !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"],
html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-report-status"] {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-y: auto !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-actions"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-actions"] > button {
  min-width: 0 !important;
  min-height: 44px !important;
  width: 100% !important;
}

@media (orientation: portrait) and (max-width: 600px) {
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"],
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] {
    top: auto !important;
    right: 8px !important;
    bottom: calc(var(--portrait-hand-height, 229px) + var(--row-gap, 6px)) !important;
    left: 8px !important;
    width: auto !important;
    height: min(258px, calc(100% - var(--portrait-hud-height, 52px) - var(--portrait-hand-height, 229px) - (var(--row-gap, 6px) * 2))) !important;
    max-height: calc(100% - var(--portrait-hud-height, 52px) - var(--portrait-hand-height, 229px) - (var(--row-gap, 6px) * 2)) !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-controls"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-actions"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-group"] {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-group"] > div,
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-grid"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit"] {
    display: grid !important;
    grid-template-rows: 24px minmax(0, 1fr) auto !important;
    min-width: 0 !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 4px 2px !important;
    overflow: hidden !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"] {
    max-height: 70px !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-report-status"] {
    max-height: 28px !important;
  }
}

@media (orientation: landscape) {
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"],
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] {
    top: calc(var(--landscape-hud-height, 44px) + var(--row-gap, 6px)) !important;
    right: auto !important;
    bottom: calc(var(--landscape-hand-height, 89px) + var(--row-gap, 6px)) !important;
    left: 6px !important;
    width: min(244px, 46%) !important;
    height: auto !important;
    max-height: none !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-layout"],
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-layout"] {
    padding: 6px !important;
    gap: 4px !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-controls"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-actions"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-group"] {
    padding: 0 !important;
    border: 0 !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-group"] > div,
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit-grid"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"] [data-ui="bid-suit"] {
    display: grid !important;
    grid-template-rows: 18px minmax(0, 1fr) auto !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 2px !important;
    overflow: hidden !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-candidates"] {
    max-height: 34px !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] [data-ui="roem-report-status"] {
    max-height: 20px !important;
  }
}

@media (orientation: landscape) and (min-width: 480px) and (max-width: 520px) and (max-height: 600px) {
  #screen-root {
    width: 320px !important;
    max-width: 320px !important;
  }

  .kj-screen:not(#screen-table),
  #screen-table.kj-table {
    width: 304px !important;
    max-width: 304px !important;
    margin-inline: 0 !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table {
    height: var(--portrait-layout-height, 507px) !important;
    min-height: var(--portrait-layout-height, 507px) !important;
    grid-template-rows: var(--portrait-hud-height, 52px) minmax(160px, 1fr) 48px var(--portrait-hand-height, 229px) !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"],
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] {
    top: auto !important;
    right: 8px !important;
    bottom: calc(var(--portrait-hand-height, 229px) + var(--row-gap, 6px)) !important;
    left: 8px !important;
    width: auto !important;
    height: min(258px, calc(100% - var(--portrait-hud-height, 52px) - var(--portrait-hand-height, 229px) - (var(--row-gap, 6px) * 2))) !important;
    max-height: calc(100% - var(--portrait-hud-height, 52px) - var(--portrait-hand-height, 229px) - (var(--row-gap, 6px) * 2)) !important;
  }

  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"],
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] {
    height: 190px !important;
    max-height: 190px !important;
  }
}

/* Final receipt overrides come after the legacy receipt field rules. */
body.kj-screen-score-receipt #test-results,
body.kj-screen-settlement #test-results,
body.kj-screen-match-end #test-results {
  display: none;
}

.kj-screen:not(#screen-table).kj-screen--active {
  height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
  min-height: 0;
  overflow-y: auto;
}

.kj-screen:not(#screen-table) [data-ui="screen-content"] {
  overflow-x: clip;
}

#screen-root #screen-match-end.kj-screen--active {
  overflow: hidden;
}

#screen-root #screen-match-end [data-ui="screen-content"] {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

#screen-root #screen-match-end [data-ui="match-result"] {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#screen-root #screen-match-end [data-ui="match-actions"] {
  align-self: end;
}

@media (min-width: 520px) and (orientation: landscape) {
  #screen-root #screen-match-end [data-ui="match-actions"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #screen-root #screen-match-end [data-ui="match-actions"] > button {
    min-height: 50px;
    padding-inline: 6px;
    font-size: var(--text-xs);
  }
}

#screen-root [data-ui="trick-cards"] {
  flex-wrap: nowrap;
}

#screen-root [data-ui="trick-receipt"] {
  gap: 6px;
  padding: 10px;
}

#screen-root [data-ui="trick-receipts"] {
  gap: 8px;
}

/* ---- User-reported defect batch (2026-08-06): visible control states ---- */

/* Sound toggle must LOOK different per state; identical styling read as a dead button. */
html body #audio-toggle[aria-pressed="true"] {
  background: var(--kj-accent, #F2C464) !important;
  color: #1c2b26 !important;
  border-color: var(--kj-accent, #F2C464) !important;
  font-weight: 800;
}
html body #audio-toggle[aria-pressed="true"]::before {
  color: #1c2b26 !important;
}
html body #audio-toggle[aria-pressed="false"] {
  opacity: 0.72;
}
#audio-toggle {
  transition: background-color 160ms ease, opacity 160ms ease;
}

/* Home language chips: always visible, no hunting through Settings. */
[data-ui="home-language"] {
  display: inline-flex;
  gap: 6px;
  margin-right: 10px;
}
[data-ui="home-language"] button {
  min-width: 44px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(183, 199, 193, 0.4);
  background: rgba(10, 32, 27, 0.85);
  color: #e9efec;
  font-weight: 800;
}
[data-ui="home-language"] button[aria-pressed="true"] {
  background: var(--kj-accent, #F2C464);
  color: #1c2b26;
  border-color: var(--kj-accent, #F2C464);
}
[data-ui="home-tools"] {
  display: flex;
  align-items: center;
}

/* Home chooser tiles are real buttons now: show affordance and the change hint. */
button[data-ui="home-chooser"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(183, 199, 193, 0.4);
  background: rgba(10, 32, 27, 0.85);
  color: #e9efec;
  text-align: left;
  cursor: pointer;
  min-height: 60px;
}
button[data-ui="home-chooser"]:hover,
button[data-ui="home-chooser"]:focus-visible {
  border-color: var(--kj-accent, #F2C464);
}
button[data-ui="home-chooser"] [data-ui="chooser-label"] {
  font-size: 12px;
  opacity: 0.75;
}
button[data-ui="home-chooser"] [data-ui="chooser-value"] {
  font-size: 16px;
  font-weight: 800;
}
button[data-ui="home-chooser"] [data-ui="chooser-hint"] {
  font-size: 11px;
  color: var(--kj-accent, #F2C464);
  font-weight: 700;
}

/* Live score drawer rows (plain-language replacement for the raw schema dump). */
[data-ui="score-live-list"] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 8px 0;
}
[data-ui="score-live-list"] dt {
  opacity: 0.75;
}
[data-ui="score-live-list"] dd {
  margin: 0;
  font-weight: 700;
}



/* ---- Desktop table stage, consolidated (2026-08-07). Maximal specificity + last sheet: this
   deliberately outranks every phone-landscape and handedness rule on large screens only. ---- */
/* Wave D3: phone/tablet landscape without a last-trick sidebar runs the board full-width,
   which floated the action bar over the East seat. Park it in the free bottom-right corner. */
@media (orientation: landscape) and (min-width: 601px) and (max-width: 1099px) {
  html body #app #screen-root #screen-table.kj-table.kj-table[data-has-last-trick="false"] > [data-region="action-bar"] {
    top: auto !important;
    left: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    height: auto !important;
    min-height: 44px !important;
  }
}

@media (orientation: landscape) and (min-width: 1100px) and (min-height: 640px) {
  html body #app #screen-root #screen-table.kj-table.kj-table {
    width: min(92vw, 1240px) !important;
    max-width: min(92vw, 1240px) !important;
    height: min(calc(100dvh - 40px), 820px) !important;
    min-height: 600px !important;
    margin: 20px auto 0 !important;
    grid-template-columns: minmax(0, 1fr) 250px !important;
    grid-template-rows: 68px minmax(420px, 1fr) 210px !important;
  }
  html body #app #screen-root #screen-table.kj-table.kj-table[data-has-last-trick="false"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] {
    top: auto !important;
    left: auto !important;
    right: 254px !important;
    bottom: 18px !important;
    width: 260px !important;
    height: 58px !important;
    min-height: 58px !important;
  }
  html body #app #screen-root #screen-table.kj-table.kj-table[data-has-last-trick="false"] > [data-region="action-bar"] {
    right: 18px !important;
  }
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] button {
    min-height: 50px !important;
    font-size: 12px !important;
  }
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="bid-panel"],
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="roem-panel"] {
    top: 100px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 480px !important;
    height: auto !important;
    max-height: 360px !important;
  }
  html body #app #screen-root #screen-table.kj-table.kj-table .kj-hand > [data-region="hand-fan"] {
    top: 34px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  /* Wave D: desktop card scale. The card SVG tracks .kj-card (100% width/height vs viewBox),
     so sizing the button alone scales the face without distortion. */
  html body #app #screen-root #screen-table.kj-table.kj-table .kj-hand .kj-card {
    width: 54px !important;
    height: 76px !important;
    min-width: 54px !important;
    min-height: 76px !important;
  }
  html body #app #screen-root #screen-table.kj-table.kj-table .kj-trick-card {
    width: 46px !important;
    height: 65px !important;
  }
  /* Wave D: the tall desktop board uses the compass layout; the phone-landscape row rules
     (keyed on data-trick-position) otherwise catch desktop because it is also landscape. */
  html body #app #screen-root #screen-table.kj-table.kj-table .kj-trick > [data-ui="trick-cards"] {
    top: 16% !important;
    bottom: 16% !important;
    left: 27% !important;
    right: 27% !important;
  }
  #screen-table.kj-table .kj-trick-card[data-seat="N"] {
    top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
  }
  #screen-table.kj-table .kj-trick-card[data-seat="E"] {
    top: 50%; bottom: auto; right: 0; left: auto; transform: translateY(-50%);
  }
  #screen-table.kj-table .kj-trick-card[data-seat="S"] {
    bottom: 0; top: auto; left: 50%; right: auto; transform: translateX(-50%);
  }
  #screen-table.kj-table .kj-trick-card[data-seat="W"] {
    top: 50%; bottom: auto; left: 0; right: auto; transform: translateY(-50%);
  }
  html body #app #screen-root #screen-table.kj-table.kj-table .kj-seat {
    font-size: 13px !important;
  }
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has(#hud-turn) [data-ui="metric-value"],
  html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has(#hud-trump) [data-ui="metric-value"] {
    font-size: 17px !important;
  }
}

/* ==== Wave A8 (2026-08-08): HUD hierarchy - turn + trump primary, score secondary, passport tertiary. ==== */
#screen-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has(#hud-turn),
#screen-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has(#hud-trump) {
  font-size: 13px;
}
#screen-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has(#hud-turn) [data-ui="metric-value"],
#screen-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has(#hud-trump) [data-ui="metric-value"] {
  font-size: 15px;
  font-weight: 850;
}
#screen-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has(#hud-turn) [data-ui="metric-label"],
#screen-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has(#hud-trump) [data-ui="metric-label"] {
  font-size: 10px;
}
#screen-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has(#hud-score-us) [data-ui="metric-value"],
#screen-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has(#hud-score-them) [data-ui="metric-value"] {
  font-size: 13px;
  font-weight: 800;
}
#screen-table.kj-table > [data-region="hud-ribbon"] [data-ui="metric"]:has([data-ui="hud-passport-value"]) {
  opacity: 0.62;
}

/* ==== Wave B (2026-08-08): screens with a pulse ==== */

/* B1: match-end ceremony. Static wreath, focal score, one-shot entrance. */
[data-ui="match-hero"] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 18px 12px 14px;
  margin-bottom: 12px;
  text-align: center;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(242, 196, 109, .14), transparent 70%),
    rgba(9, 25, 21, .5);
  animation: kj-hero-enter 420ms ease-out 1;
}
[data-ui="match-wreath"] {
  font-size: 15px;
  letter-spacing: 10px;
  color: rgba(242, 196, 109, .75);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
[data-ui="match-result-banner"] {
  font-size: 22px;
  font-weight: 850;
  color: #F7F3EA;
}
[data-ui="match-hero-score"] {
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: var(--kj-accent, #F2C464);
  font-variant-numeric: tabular-nums;
}
@keyframes kj-hero-enter {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-ui="match-hero"] { animation: none; }
}
/* Orphan-button fix: receipt button becomes the full-width primary; the rest sit in a 2x2 grid. */
[data-ui="match-actions"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
[data-ui="match-actions"] > button:first-child {
  grid-column: 1 / -1;
  background: var(--kj-accent, #F2C464);
  color: #1c2b26;
  border-color: var(--kj-accent, #F2C464);
  font-weight: 850;
}
/* Receipt inherits the winner treatment. */
#screen-score-receipt [data-ui="receipt-summary"] [data-winner="true"],
[data-ui="match-score-card"][data-winner="true"] {
  border: 1px solid rgba(242, 196, 109, .65);
  background: rgba(242, 196, 109, .1);
}

/* B2: home emblem - static fanned cards below the actions. */
[data-ui="home-emblem"] {
  display: flex;
  justify-content: center;
  margin-top: 34px;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}
[data-ui="home-emblem"] [data-ui="emblem-card"] {
  margin: 0 -9px;
  transform-origin: 50% 120%;
}
[data-ui="home-emblem"] [data-fan-index="0"] { transform: rotate(-24deg); }
[data-ui="home-emblem"] [data-fan-index="1"] { transform: rotate(-12deg); }
[data-ui="home-emblem"] [data-fan-index="2"] { transform: rotate(0deg) translateY(-6px); }
[data-ui="home-emblem"] [data-fan-index="3"] { transform: rotate(12deg); }
[data-ui="home-emblem"] [data-fan-index="4"] { transform: rotate(24deg); }

/* B3: selected state is unmistakable on every setting control and chooser radio. */
#screen-root [data-control="setting"][aria-pressed="true"] {
  background: var(--kj-accent, #F2C464) !important;
  color: #1c2b26 !important;
  border-color: var(--kj-accent, #F2C464) !important;
  font-weight: 850;
}
#screen-root label[data-ui="choice"]:has(input:checked) {
  border-color: var(--kj-accent, #F2C464);
  background: rgba(242, 196, 109, .12);
  box-shadow: inset 3px 0 0 var(--kj-accent, #F2C464);
}

/* B5: the save chip stays quiet outside home - icon only, dimmed, never shouting over play. */
body:not(.kj-screen-home) #ui-status-stack [data-ui="status-chip"] [data-ui="status-chip-copy"] {
  display: none;
}
body:not(.kj-screen-home) #ui-status-stack .kj-status-chip {
  min-width: 0;
  padding: 4px 8px;
  opacity: 0.6;
}

/* Home emblem is decorative: cards only, contained, no captions. */
[data-ui="home-emblem"] {
  overflow: hidden;
  max-width: 100%;
  padding: 6px 0 14px;
}
[data-ui="home-emblem"] figcaption,
[data-ui="home-emblem"] [data-ui="card-caption"] {
  display: none;
}

/* ==== Wave C (2026-08-08): consistency + ergonomics ==== */
/* C1: panels and controls onto the shared tokens. */
.kj-panel { border-radius: var(--radius-panel); }
#screen-root button, .kj-panel button { border-radius: var(--radius-control); }
[data-ui="home-chooser"], [data-ui="home-language"] button { border-radius: var(--radius-control); }

/* C2: the audio toggle in action bars is icon-only at every size - no more wrapped labels.
   The 4-id selector outguns every action-bar button font-size rule, including the desktop block. */
html body [data-region="action-bar"] #audio-toggle,
html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] > #audio-toggle {
  font-size: 0 !important;
  min-width: 48px;
}
html body [data-region="action-bar"] #audio-toggle::before,
html body #app #screen-root #screen-table.kj-table.kj-table > [data-region="action-bar"] > #audio-toggle::before {
  content: "\266C";
  font-size: 1.25rem;
  line-height: 1;
}
html body #audio-toggle[aria-pressed="false"]::before { content: "\266A"; }

/* C3: overlapped hand cards keep a full-height tappable area via an invisible extension. */
.kj-hand .kj-card { position: relative; }
.kj-hand .kj-card::after {
  content: "";
  position: absolute;
  inset: -8px -2px -10px;
}

/* C6 nits: tussenstand panel hugs its content; receipt card labels align; rules drawer breathes. */
#screen-score-receipt [data-ui="trick-receipts"]:empty { display: none; }
[data-ui="trick-receipt"] figure { display: inline-flex; flex-direction: column; align-items: center; }
[data-ui="trick-receipt"] figcaption { font-size: 10px; text-align: center; }
#overlay-root [data-ui="drawer-content"] h3 { margin-top: var(--space-2); }