:root {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#242b30;
  background:#f4f6f6;
  font-synthesis:none;
  letter-spacing:0;
  color-scheme:light;
  --green:#1c6657;
  --red:#b72e46;
  --muted:#697579;
  --border:#d9e1e1
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,input,select {
  font:inherit
}

button,select,input[type=checkbox] {
  cursor:pointer
}

button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:5px;
  background:#fff;
  color:inherit;
  font-weight:600;
  padding:9px 13px;
  touch-action:manipulation
}

button:hover:not(:disabled) {
  background:#edf3f1;
  border-color:#8aa69d
}

button:disabled {
  cursor:default;
  opacity:.4
}

button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible {
  outline:3px solid #dba944;
  outline-offset:3px
}

button img {
  width:18px;
  height:18px
}

button.primary {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}

button.primary:hover {
  background:#124c40
}

button.primary img {
  filter:brightness(0) invert(1)
}

[hidden] {
  display:none!important
}

.app-header {
  background:#fff;
  border-bottom:1px solid var(--border)
}

.header-inner {
  max-width:1240px;
  margin:auto;
  min-height:68px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
  gap:6px 16px
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:23px;
  font-weight:750;
  color:var(--green);
  white-space:nowrap;
  text-decoration:none
}

.brand span {
  border-left:1px solid var(--border);
  padding-left:15px;
  margin-left:6px;
  color:var(--muted);
  font-size:14px;
  font-weight:500
}

.connection {
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  margin-left:auto;
  white-space:nowrap;
  gap:7px
}

.connection::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d2a449
}

.connection.ready::before {
  background:#358c65
}

.connection.failed::before {
  background:var(--red)
}

main {
  max-width:1240px;
  margin:auto;
  padding:0 24px 36px
}

.settings-bar {
  display:flex;
  align-items:end;
  gap:12px;
  flex-wrap:wrap;
  padding:20px 0;
  border-bottom:1px solid var(--border)
}

.settings-bar label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:11px;
  font-weight:650;
  color:var(--muted)
}

input[type=number],select {
  border:1px solid #cbd6d4;
  border-radius:5px;
  background:#fff;
  padding:8px 10px;
  color:#293d38;
  min-height:40px;
  max-width:100%;
  font-size:13px
}

#seed {
  width:113px
}

#settings .icon-button {
  min-height:40px;
  height:40px;
  margin-left:-8px
}

.check-label,#settings .check-label {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:500;
  min-height:40px;
  color:#425450
}

input[type=checkbox] {
  accent-color:var(--green);
  width:16px;
  height:16px;
  flex:none
}

.workspace {
  display:grid;
  grid-template-columns:minmax(0,1fr) 316px;
  gap:28px;
  padding-top:18px
}

.table-column,.auction-column {
  min-width:0
}

.board-status {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:40px;
  font-size:13px;
  padding:0 0 10px
}

.board-status>div {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap
}

#board-label {
  font-weight:650
}

#vulnerability {
  color:var(--muted);
  font-size:11px
}

#contract {
  font-size:15px;
  color:var(--green);
  text-align:right
}

.table-surface {
  background:#206958;
  color:#fff;
  border:1px solid #155344;
  border-radius:8px;
  display:grid;
  grid-template-columns:minmax(100px,1fr) minmax(200px,1.25fr) minmax(100px,1fr);
  grid-template-rows:minmax(112px,auto) minmax(240px,auto) minmax(118px,auto);
  grid-template-areas:"north north north" "west center east" "south south south";
  gap:12px 8px;
  padding:22px 18px 18px;
  min-height:538px;
  box-shadow:inset 0 0 0 5px #ffffff05
}

.north {
  grid-area:north
}

.west {
  grid-area:west
}

.east {
  grid-area:east
}

.south {
  grid-area:south
}

.hand {
  min-width:0;
  align-self:center
}

.north,.south {
  text-align:center;
  max-width:100%
}

.hand-title {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  font-size:12px;
  color:#d2e5df;
  min-height:20px
}

.north .hand-title,.south .hand-title {
  justify-content:center
}

.hand-title strong {
  font-size:13px;
  color:#fff
}

.dealer-label { font-size:11px; }

.role {
  font-size:10px;
  padding:2px 5px;
  border:1px solid #ffffff3b;
  border-radius:3px
}

.turn-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#f3c85b;
  flex:none
}

.hand-cards {
  --card-width:50px;
  --card-step:26px;
  --card-height:72px;
  --card-font:22px;
  display:flex;
  flex-wrap:nowrap;
  gap:6px 10px;
  align-items:flex-start;
  justify-content:center;
  min-width:0
}

.suit-group {
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  padding:3px 0 5px
}

.suit-group::-webkit-scrollbar,.auction-call-tray::-webkit-scrollbar {
  display:none
}

.suit-cards {
  display:grid;
  grid-template-columns:repeat(var(--cards),var(--card-step));
  padding-right:calc(var(--card-width) - var(--card-step));
  width:max-content
}

.suit-group:focus-visible { outline:2px solid #f0c875; outline-offset:1px; }

.suit-cards .playing-card {
  width:var(--card-width);
  height:var(--card-height);
  min-height:var(--card-height);
  align-items:flex-start;
  padding-left:2px;
  font-size:var(--card-font);
  line-height:1.2
}

.suit-cards .playing-card.playable:hover {
  transform:none;
  position:relative;
  z-index:1
}

.suit-cards .playing-card img {
  width:18px;
  height:18px
}

.suit-void {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:var(--card-width);
  height:var(--card-height);
  color:#d2e5df;
  font-size:12px
}

.suit-void img {
  width:13px;
  height:13px;
  filter:brightness(0) invert(1)
}

.playing-card {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#25343b;
  border:1px solid #e1e6e3;
  border-radius:4px;
  width:35px;
  height:53px;
  min-height:53px;
  padding:4px 0;
  gap:1px;
  flex:none;
  font-size:17px;
  line-height:20px;
  font-weight:750;
  box-shadow:0 2px 1px #102c2820
}

.playing-card img {
  width:16px;
  height:16px
}

.playing-card.red,.card-inline.red {
  color:var(--red)
}

.playing-card.red img,.card-inline.red img {
  filter:invert(25%) sepia(72%) saturate(1673%) hue-rotate(324deg) brightness(86%) contrast(94%)
}

button.playing-card:disabled {
  opacity:.58
}

span.playing-card {
  opacity:1
}

.playing-card.playable {
  cursor:pointer;
  background:#fff0bf
}

.playing-card.playable:hover {
  transform:translateY(-4px);
  background:#ffe3a0
}

.playing-card.suggested {
  outline:3px solid #fff;
  outline-offset:3px
}

.side-cards {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0
}

.east {
  justify-self:end;
  width:100%;
  padding-left:10px
}

.backs {
  display:flex;
  gap:0;
  justify-content:center;
  align-items:center;
  min-height:53px
}

.back-card {
  width:34px;
  height:49px;
  border-radius:4px;
  border:2px solid #d4e0df;
  background-color:#344b68;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,#ffffff12 4px,#ffffff12 5px);
  margin-left:-22px;
  box-shadow:0 2px 3px #13362c35
}

.back-card:first-child {
  margin-left:0
}

.back-count {
  margin-left:10px;
  color:#d1e4df;
  font-size:11px;
  white-space:nowrap
}

.west .backs,.east .backs {
  justify-content:flex-start;
  flex-wrap:wrap
}

.table-center {
  grid-area:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0
}

.trick-grid {
  display:grid;
  grid-template-columns:55px 55px 55px;
  grid-template-rows:repeat(3,56px);
  gap:8px;
  grid-template-areas:". north ." "west . east" ". south .";
  align-items:center;
  justify-items:center;
  min-height:180px
}

.trick-slot {
  width:49px;
  height:64px;
  border:1px dashed #ffffff30;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center
}

.trick-slot[data-seat=North] {
  grid-area:north
}

.trick-slot[data-seat=South] {
  grid-area:south
}

.trick-slot[data-seat=East] {
  grid-area:east
}

.trick-slot[data-seat=West] {
  grid-area:west
}

.trick-slot .playing-card {
  width:47px;
  height:64px;
  font-size:21px
}

.table-message {
  font-size:12px;
  text-align:center;
  color:#e2eee7;
  line-height:1.5;
  min-height:36px;
  max-width:210px
}

.table-action {
  background:#f4f4e9;
  color:#254f44;
  font-size:12px;
  min-height:36px;
  padding:6px 10px
}

.table-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:45px;
  color:var(--muted);
  font-size:11px
}

.trick-totals {
  display:flex;
  gap:9px;
  align-items:center;
  color:#566260;
  font-size:12px
}

.trick-totals strong {
  color:#283d36;
  font-size:20px;
  min-width:22px;
  text-align:center
}

.action-bar {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 0;
  border-top:1px solid var(--border)
}

.tools {
  display:flex;
  gap:6px
}

.icon-button {
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:10px;
  flex:none
}

.reveal-label {
  margin-left:auto
}

.auction-column {
  border-left:1px solid var(--border);
  padding-left:24px
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:40px
}

.section-heading h1,.section-heading h2 {
  font-size:14px;
  font-weight:650;
  margin:0
}

.section-heading>span {
  font-size:11px;
  color:var(--muted)
}

.auction-scroll {
  max-height:232px;
  overflow:auto;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  scrollbar-width:thin
}

#auction {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:13px
}

#auction th {
  font-size:11px;
  color:#78837f;
  font-weight:500;
  padding:11px 2px;
  background:#f4f6f6;
  position:sticky;
  top:0
}

#auction th:last-child {
  color:var(--green);
  font-weight:700
}

#auction td {
  height:36px;
  text-align:center;
  border-top:1px solid #e6ebea;
  padding:4px 2px
}

#auction td:last-child {
  background:#eaf0ed
}

#auction td.current {
  box-shadow:inset 0 -2px #d2aa4a
}

#auction .red {
  color:var(--red)
}

#auction td[data-coverage-kind] {
  text-decoration:underline dotted #99701c;
  text-underline-offset:5px;
  cursor:help
}

#board-auction {
  width:100%;
  max-width:320px
}

#board-auction:empty {
  display:none
}

#board-auction .section-heading>span {
  color:#d2e5df
}

#board-auction .auction-scroll {
  display:none
}

.auction-directions {
  display:none
}

#board-auction .auction-directions {
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
  grid-template-areas:"north north north" "west . east" "south south south";
  gap:10px 6px;
  padding:8px 0
}

body[data-phase=complete] #board-auction .auction-directions,body[data-phase=passed_out] #board-auction .auction-directions {
  grid-template-columns:44px minmax(0,1fr) 44px;
  grid-template-areas:"north north north" "west result east" "south south south"
}

.board-result {
  grid-area:result;
  align-self:center;
  min-width:0;
  text-align:center;
  overflow-wrap:anywhere
}

.board-result h2 {
  margin:0 0 8px;
  font-size:18px;
  line-height:1.25;
  color:#fff
}

.board-result p {
  margin:0;
  color:#e2eee7;
  font-size:12px;
  line-height:1.5
}

.auction-seat {
  min-width:0
}

.auction-north { grid-area:north }
.auction-south { grid-area:south }
.auction-west { grid-area:west }
.auction-east { grid-area:east }

.auction-call-tray {
  display:flex;
  align-items:center;
  gap:4px;
  height:42px;
  margin:0;
  padding:2px;
  list-style:none;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none
}

.auction-call-tray:focus-visible {
  outline:2px solid #f0c875;
  outline-offset:1px
}

.auction-call-tray::before,.auction-call-tray::after {
  content:"";
  margin:auto
}

.auction-west .auction-call-tray,.auction-east .auction-call-tray {
  flex-direction:column;
  height:122px;
  overflow-x:hidden;
  overflow-y:auto
}

.auction-west .auction-call,.auction-east .auction-call {
  max-width:100%
}

.auction-call {
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:34px;
  border:1px solid #dae5df;
  border-radius:3px;
  background:#fff;
  color:#25343b;
  font-size:13px;
  font-weight:650
}

.auction-call.red {
  color:var(--red)
}

.auction-call.latest {
  background:#fff0bf
}

.auction-call[data-coverage-kind] {
  text-decoration:underline dotted #99701c;
  text-underline-offset:4px;
  cursor:help
}

.coverage-history {
  padding-top:12px;
  font-size:12px
}

.coverage-history summary {
  color:#6d551b;
  cursor:pointer;
  font-weight:650;
  padding:4px 0
}

.coverage-history ol {
  list-style:none;
  margin:8px 0 0;
  padding:0;
  max-height:250px;
  overflow-y:auto;
  scrollbar-width:thin
}

.coverage-history li,.coverage-notes p {
  display:flex;
  flex-direction:column;
  gap:4px;
  border-left:2px solid #cba956;
  padding:0 0 0 9px;
  margin:0 0 12px;
  font-size:11px;
  line-height:1.55;
  overflow-wrap:anywhere
}

.coverage-history strong,.coverage-notes strong {
  color:#6b5016;
  font-size:11px
}

.coverage-history span,.coverage-notes span {
  color:#59645f
}

.coverage-notes {
  margin-top:12px
}

.coverage-notes p:last-child {
  margin-bottom:0
}

.coverage-inline {
  display:block;
  margin-top:6px;
  color:#76591b
}

.bidding-section button[data-coverage-kind] {
  border-bottom-color:#b1862f;
  border-bottom-width:2px
}

.bidding-section {
  padding:0;
  width:100%;
  max-width:400px;
  color:#25343b
}

.bidding-section .section-heading {
  min-height:40px
}

.level-selector {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:3px;
  margin:7px 0 10px
}

.level-selector button {
  padding:5px 0;
  min-height:36px;
  font-size:13px;
  background:#fff;
  border-color:var(--border);
  color:#25343b
}

.level-selector button[aria-pressed=true] {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}

.strain-selector {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px
}

.strain-selector button {
  min-width:0;
  min-height:48px;
  padding:5px 1px;
  gap:4px;
  font-size:16px
}

.strain-selector img {
  width:15px;
  height:15px
}

.strain-selector .red {
  color:var(--red)
}

.strain-selector .red img {
  filter:invert(25%) sepia(72%) saturate(1673%) hue-rotate(324deg) brightness(86%) contrast(94%)
}

.special-calls {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:5px;
  margin-top:7px
}

.special-calls button {
  font-size:12px;
  min-width:0;
  padding:8px 2px
}

.special-calls button:first-child {
  color:var(--green);
  border-color:#a8c5b8;
  background:#eaf2ee
}

.turn-section {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:17px 0;
  font-size:13px;
  color:#355a4d
}

.turn-section #search-status {
  font-size:11px;
  line-height:1.5;
  color:var(--muted)
}

.turn-section .primary {
  align-self:flex-start;
  margin-top:5px
}

.history-section {
  border-top:1px solid var(--border);
  padding-top:9px
}

#history {
  list-style:none;
  max-height:260px;
  overflow-y:auto;
  padding:0;
  margin:4px 0;
  font-size:12px;
  scrollbar-width:thin
}

#history li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  border-bottom:1px solid #e2e8e5;
  padding:8px 0;
  min-height:34px
}

#history li>span:first-child {
  width:18px;
  color:var(--muted);
  flex:none
}

.card-inline {
  display:inline-flex;
  align-items:center;
  gap:1px;
  white-space:nowrap
}

.card-inline img {
  width:12px;
  height:12px
}

.card-inline small {
  font-size:9px;
  color:var(--muted);
  margin-right:2px
}

.hint-panel,.result-panel {
  padding:14px 0;
  border-top:1px solid var(--border);
  font-size:13px;
  line-height:1.6
}

.hint-panel strong {
  display:block;
  color:#244e42;
  margin-bottom:4px
}

.result-panel h2 {
  font-size:20px;
  margin:0 0 5px
}

.result-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.review-panel {
  border-top:1px solid var(--border);
  padding:16px 0;
  font-size:13px;
  line-height:1.6;
  min-width:0
}

.review-panel h2 {
  font-size:18px;
  margin:0 0 12px
}

.review-panel summary {
  cursor:pointer;
  font-weight:600;
  padding:8px 0
}

.review-panel p {
  margin:6px 0;
  overflow-wrap:anywhere
}

.review-scope,.review-comparison {
  color:var(--muted)
}

.review-comparison {
  display:block
}

.bid-review,.trick-review {
  list-style:none;
  padding:0;
  margin:0
}

.bid-review li,.trick-review li {
  border-top:1px solid var(--border);
  padding:12px 0
}

.review-cards {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  padding:6px 0
}

.review-opportunity {
  color:#795617
}

.dd-section {
  border-top:1px solid var(--border);
  padding-top:10px;
  margin-top:16px;
  min-width:0
}

.dd-section .icon-button {
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  padding:7px
}

.dd-scope,.dd-status {
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  margin:8px 0;
  overflow-wrap:anywhere
}

#dd-table,#best-contracts-table,#best-sd-table {
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  font-size:12px
}

#dd-table th,#dd-table td,#best-contracts-table th,#best-contracts-table td,#best-sd-table th,#best-sd-table td {
  padding:8px 1px;
  text-align:center;
  border-bottom:1px solid var(--border);
  height:44px
}

#dd-table th:first-child,#best-contracts-table th:first-child,#best-sd-table th:first-child {
  text-align:left;
  width:25%;
  font-size:11px
}

#best-contracts-table td,#best-sd-table td {
  overflow-wrap:anywhere;
  font-weight:600
}

.analysis-progress { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; }
#best-contracts > .section-heading { min-height: 28px; }
.analysis-progress .dd-status { margin: 4px 0; }
.analysis-progress .icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }
#best-contracts-table th,#best-contracts-table td,#best-sd-table th,#best-sd-table td { height: 34px; padding: 5px 3px; }
.estimate-details { margin-top: 8px; font-size: 11px; }
.estimate-details summary { cursor: pointer; color: var(--green); }
.estimate-details h3 { margin: 10px 0 3px; font-size: 11px; }
.estimate-details p { margin: 4px 0; }
.analysis-tabs { display: flex; border-bottom: 1px solid var(--border); margin-top: 12px; }
.analysis-tabs [role=tab] {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  white-space: normal;
}
.analysis-tabs [aria-selected=true] { color: var(--green); border-bottom-color: var(--green); background: #eaf0ed; }
.estimated-contract,.estimated-score { display: block; line-height:20px; white-space:nowrap; }
.estimated-contract small { display: inline-block; margin-left: 4px; font-size: 10px; font-weight: 400; color: var(--muted); }

#dd-table th[aria-label=Diamonds],#dd-table th[aria-label=Hearts] {
  color:var(--red)
}

#dd-table td[data-tricks] {
  font-size:15px;
  font-weight:650;
  color:var(--green)
}

.contract-analysis-label {
  font-size:14px;
  font-weight:650;
  margin:8px 0;
  overflow-wrap:anywhere
}

#contract-estimates {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  margin:10px 0
}

#contract-estimates dt,#contract-estimates dd {
  margin:0;
  padding:8px 0;
  border-bottom:1px solid var(--border);
  min-width:0;
  overflow-wrap:anywhere
}

#contract-estimates dt {
  font-size:12px;
  line-height:1.5;
  padding-right:8px
}

#contract-estimates dd strong {
  display:block;
  font-size:15px;
  font-weight:650
}

.analysis-leads {
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  padding-top:6px
}

.analysis-leads .card-inline {
  flex:none;
  padding:2px 4px;
  border-radius:3px
}

.analysis-leads .opening-lead {
  background:#fff0bf
}

.result-panel p {
  color:var(--muted);
  margin:0 0 12px
}

.result-panel button {
  font-size:12px
}

.error-banner {
  margin-top:14px;
  padding:12px;
  background:#fcecef;
  color:#982c41;
  border-left:3px solid #b93f58;
  font-size:13px
}

.empty-hand {
  color:#bcdbcf;
  font-size:12px
}

body[data-phase=auction] .table-surface,body[data-phase=contract] .table-surface,body[data-phase=passed_out] .table-surface,body[data-phase=complete] .table-surface {
  grid-template-columns:minmax(70px,1fr) minmax(240px,1.8fr) minmax(70px,1fr);
  grid-template-rows:minmax(88px,auto) minmax(170px,auto) minmax(108px,auto);
  min-height:448px
}

body[data-phase=auction] .trick-grid,body[data-phase=contract] .trick-grid,body[data-phase=passed_out] .trick-grid,body[data-phase=complete] .trick-grid {
  display:none
}

@media(min-width:1300px) {
  .workspace {
    gap:36px
  }
  .table-surface {
    padding-left:24px;
    padding-right:24px
  }
}

@media(max-width:940px) {
  .workspace {
    grid-template-columns:minmax(0,1fr) 270px;
    gap:18px
  }
  .auction-column {
    padding-left:16px
  }
  .table-surface {
    grid-template-columns:minmax(75px,1fr) 175px minmax(75px,1fr);
    padding:16px 12px
  }
  .playing-card {
    width:31px
  }
  .settings-bar {
    gap:9px
  }
  .header-inner,main {
    padding-left:16px;
    padding-right:16px
  }
  .hand-cards {
    --card-width:42px;
    --card-step:21px;
    --card-height:64px;
    --card-font:20px;
    gap:6px
  }
}

@media(max-width:740px) {
  .workspace {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    padding-top:12px
  }
  .auction-column {
    border-left:0;
    border-top:1px solid var(--border);
    padding:8px 0 0;
    display:block
  }
  .turn-section {
    grid-column:1;
    padding:12px 0
  }
  .history-section {
    grid-column:1/-1
  }
  .table-surface {
    min-height:430px;
    grid-template-rows:minmax(80px,auto) minmax(174px,auto) minmax(80px,auto);
    padding:14px 12px;
    gap:8px
  }
  .header-inner {
    min-height:57px
  }
  .settings-bar {
    padding:14px 0;
    gap:8px
  }
  .settings-bar label {
    font-size:10px
  }
  .settings-bar .check-label {
    flex-basis:auto
  }
  .brand {
    font-size:21px
  }
  .brand span {
    font-size:12px
  }
  .connection {
    font-size:10px
  }
  .table-footer {
    min-height:40px
  }
  .hand-title {
    margin-bottom:6px
  }
  .table-center {
    gap:5px
  }
  .table-message {
    min-height:28px
  }
  .playing-card {
    width:32px;
    height:48px;
    min-height:48px;
    font-size:16px
  }
  body[data-phase=auction] .table-surface,body[data-phase=contract] .table-surface,body[data-phase=passed_out] .table-surface,body[data-phase=complete] .table-surface {
    min-height:288px;
    grid-template-columns:minmax(48px,1fr) minmax(152px,1.5fr) minmax(48px,1fr);
    grid-template-rows:auto minmax(140px,auto) auto
  }
  body[data-phase=auction] .east,body[data-phase=contract] .east,body[data-phase=passed_out] .east,body[data-phase=complete] .east {
    padding-left:0
  }
  body[data-phase=auction] .hand {
    padding-top:4px;
    padding-bottom:4px
  }
  .north .backs {
    min-height:32px
  }
  .north .back-card {
    height:31px;
    width:25px;
    margin-left:-17px
  }
  .north .back-card:first-child {
    margin-left:0
  }
  .table-status {
    font-size:12px
  }
}

@media(max-width:480px) {
  .header-inner,main {
    padding-left:12px;
    padding-right:12px
  }
  .brand span {
    margin-left:0;
    padding-left:10px
  }
  .settings-bar {
    gap:8px 6px
  }
  #seed {
    width:86px
  }
  #mode {
    width:124px
  }
  .system-setting {
    flex-basis:100%;
    min-width:0
  }
  #system {
    width:100%
  }
  #samples {
    max-width:164px
  }
  input[type=number],select {
    font-size:12px;
    padding:7px 6px
  }
  .workspace {
    gap:12px
  }
  .table-surface {
    grid-template-columns:minmax(60px,1fr) 159px minmax(60px,1fr);
    padding:12px 9px;
    gap:8px 3px
  }
  .trick-grid {
    grid-template-columns:47px 47px 47px;
    gap:6px
  }
  .trick-slot {
    width:44px
  }
  .trick-slot .playing-card {
    width:42px
  }
  .hand-title {
    gap:4px;
    flex-wrap:wrap
  }
  .hand-title strong {
    font-size:11px
  }
  .hand-title .role {
    font-size:9px;
    padding:1px 3px
  }
  .hand-cards {
    --card-width:40px;
    --card-step:18px;
    --card-height:62px;
    --card-font:19px;
    gap:3px
  }
  .side-cards { gap:0; }
  .suit-cards .playing-card img { width:16px; height:16px; }
  .playing-card {
    width:29px;
    height:46px;
    min-height:46px;
    font-size:15px
  }
  .playing-card img {
    width:14px;
    height:14px
  }
  .east {
    padding-left:4px
  }
  .board-result h2 { font-size:15px; }
  .board-result p { font-size:11px; }
  body[data-phase=complete] #board-auction .auction-directions,body[data-phase=passed_out] #board-auction .auction-directions {
    grid-template-columns:36px minmax(0,1fr) 36px
  }
  body[data-phase=complete] :is(.auction-west,.auction-east) .auction-call,body[data-phase=passed_out] :is(.auction-west,.auction-east) .auction-call {
    width:32px;
    font-size:12px
  }
  .back-card {
    width:26px;
    height:39px;
    margin-left:-20px
  }
  .back-count {
    font-size:10px;
    margin-left:6px
  }
  .west .backs,.east .backs {
    flex-wrap:wrap
  }
  .hand-evaluation {
    font-size:10px
  }
  .table-footer {
    gap:4px;
    font-size:10px
  }
  .trick-totals {
    gap:6px;
    font-size:10px
  }
  .trick-totals strong {
    font-size:18px;
    min-width:15px
  }
  .action-bar {
    gap:8px
  }
  .action-bar .primary {
    font-size:12px;
    padding:8px 10px
  }
  .tools {
    gap:4px
  }
  .icon-button {
    width:38px;
    min-width:38px;
    height:40px;
    min-height:40px;
    padding:8px
  }
  .reveal-label {
    font-size:11px;
    gap:4px;
    margin-left:0
  }
  .auction-column {
    display:flex;
    flex-direction:column;
    gap:0
  }
  .auction-scroll {
    max-height:145px
  }
  .level-selector {
    margin:4px 0 7px
  }
  .section-heading {
    min-height:34px
  }
  .strain-selector button {
    min-height:43px
  }
  .special-calls button {
    min-height:39px
  }
  .turn-section {
    padding:9px 0
  }
  .auction-section .section-heading {
    margin-top:5px
  }
  .board-status {
    padding-bottom:8px;
    gap:8px;
    font-size:12px
  }
  #contract {
    font-size:13px
  }
  #vulnerability {
    font-size:10px
  }
  .table-message {
    font-size:11px
  }
  #history {
    max-height:210px
  }
}

@media(max-width:380px) {
  .hand-cards { --card-width:34px; --card-step:14px; --card-height:60px; --card-font:18px; gap:2px; }
  .side-cards { gap:0; }
  .suit-cards .playing-card img { width:12px; height:15px; }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important
  }
  .playing-card.playable:hover {
    transform:none
  }
}