body:has(.table-focus, .game-interlude) {
  background: #171c1a;
  color: #e2e9e4;
}

main:has(.table-focus),
main.game-interlude {
  width: min(1360px, 100%);
  padding: 12px;
}

.table-focus,
.game-interlude > .screen {
  color: #e2e9e4;
  background: #183e33;
  border: 1px solid #496457;
  border-radius: 8px;
  padding: 16px;
  gap: 14px;
  min-height: calc(100svh - 24px);
  align-content: start;
  letter-spacing: 0;
}

/* The same table palette carries through local, online and trial game phases. */
.table-focus,
.game-interlude {
  --surface: #24352d;
  --surface-2: #263b31;
  --text: #e2e9e4;
  --muted: #c2cdc6;
  --line: #587064;
  --shadow: none;
}

:is(.table-focus, .game-interlude) .card {
  --text: #1f2a2e;
  --muted: #667176;
  --surface: #fffdf8;
  --surface-2: #ece8dd;
  --line: #d7d1c3;
}

.game-interlude > .screen {
  width: 100%;
  margin: 0;
  align-content: center;
  justify-items: center;
  gap: 24px;
  padding: 32px 24px;
  outline: 0;
  box-shadow: none;
  text-align: center;
}

.game-interlude h1 {
  max-width: 720px;
  margin: 0;
  font: 600 28px/1.25 system-ui, sans-serif;
  overflow-wrap: anywhere;
}

.game-interlude .eyebrow { margin: 0; color: #dfbb6b; letter-spacing: 0; }
.game-interlude .review-message {
  width: min(720px, 100%);
  max-width: 720px;
  padding: 18px 0;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.game-interlude .actions { width: min(560px, 100%); justify-content: center; }
.game-interlude .actions > :is(button, .button) { flex: 1 1 200px; }
.game-interlude :is(button, .button) { max-width: 100%; min-height: 44px; border-radius: 4px; white-space: normal; overflow-wrap: anywhere; }
.game-interlude .screen > button { width: min(360px, 100%); }
.game-interlude button.secondary { background: #263b31; color: #e2e9e4; border-color: #758479; }
.game-interlude :is(button, a, input):focus-visible { outline: 2px solid #f4d17c; outline-offset: 4px; }
.game-interlude button:disabled { opacity: 0.5; }
.game-interlude .pause-toggle { width: min(560px, 100%); text-align: left; }
.game-interlude input[type="checkbox"] { accent-color: #dfbb6b; }
.game-interlude .handoff #show-hand { min-width: 0; background: var(--accent); border-color: #758479; }
.game-interlude .handoff-privacy { color: var(--muted); }
.game-interlude .handoff-card-backs i {
  background: url("../../assets/cards/back-royal-v2.jpg") center / cover;
  border: 1px solid #dfbb6b;
  border-radius: 4px;
}
.game-interlude .hero-art img { border-radius: 4px; box-shadow: none; }
.game-interlude .exchange-reveal-fan { padding-block: 20px; }
.game-interlude .exchange-reveal-fan.is-exchange-revealing { padding-bottom: 66px; }

.table-focus .local-action-zone > .local-action-panel:not(.local-hand-panel) {
  color: var(--text);
  background: transparent;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 20px 0;
}
.table-focus .local-action-panel h2 { font: 600 20px/1.3 system-ui, sans-serif; }
.table-focus .completed-tricks { background: transparent; color: var(--text); border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0; }
.table-focus .completed-tricks li { background: var(--surface); border-radius: 4px; }
.table-focus .completed-trick-cards > span { background: #fffdf8; color: #1f2a2e; border-color: #d7d1c3; }
.table-focus .local-trick { border-color: var(--line); border-radius: 4px; }
.table-focus .local-trick .eyebrow { color: #dfbb6b; }
:is(.table-focus, .game-interlude) .trick-winner { border-bottom-color: #dfbb6b; }
:is(.table-focus, .game-interlude) .trick-winner .trick-play-status { color: #dfbb6b; }
.table-focus .score-breakdown > span { background: var(--surface); }
.table-focus .score-event-log li > b { color: #9fe0c2; }
:is(.table-focus, .game-interlude) .card-label { display: inline-block; background: #fffdf8; padding: 2px 5px; border-radius: 3px; }
:is(.table-focus, .game-interlude) .card-label.red { color: #b42318; }
:is(.table-focus, .game-interlude) .card-label.black { color: #111827; }
:is(.table-focus, .game-interlude) a:not(.button) { color: #dfbb6b; }
:is(.table-focus, .game-interlude) a.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; min-height: 44px; border: 1px solid #758479; border-radius: 4px; background: #263b31; color: #e2e9e4; font-weight: 700; text-decoration: none; }
.table-focus .local-table:has(.round-result-panel) > .completed-tricks { display: none; }
body[data-demo] .demo-navigation { position: static; }

.open-exchange-dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100svh - 24px); margin: auto; padding: 24px; overflow-y: auto; background: #183e33; color: #e2e9e4; border: 1px solid #dfbb6b; border-radius: 8px; }
.open-exchange-dialog::backdrop { background: #000a; }
.open-exchange-dialog h2 { font: 600 24px/1.3 system-ui, sans-serif; margin: 0 0 16px; }
.open-exchange-dialog p { line-height: 1.6; margin-bottom: 16px; }
.open-exchange-dialog .actions { margin-top: 20px; }
.open-exchange-dialog .actions button { flex: 1 1 180px; min-height: 44px; white-space: normal; }
.open-exchange-dialog button.secondary { background: #263b31; color: #e2e9e4; border-color: #758479; }
.open-exchange-dialog button:focus-visible { outline: 2px solid #f4d17c; outline-offset: 3px; }
.open-card-hand .trick-card-face { width: 150px; height: 210px; min-height: 210px; flex: 0 0 150px; }

.table-focus .eyebrow,
.table-focus small {
  letter-spacing: 0;
}

.table-focus .local-game-header,
.table-focus .online-game-header {
  padding: 0 0 12px;
  border-bottom: 1px solid #587064;
  align-items: center;
}

.table-focus .local-game-header h1,
.table-focus .online-game-header h1 {
  font: 600 18px/1.3 system-ui, sans-serif;
}

.table-focus header .eyebrow {
  color: #b4c5bb;
  font-size: 11px;
  margin-bottom: 4px;
}

.hud-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.hud-detail-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d0dcd4;
  font-size: 12px;
  cursor: pointer;
  min-height: 44px;
}

.hud-detail-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #dfbb6b;
}

.table-focus .local-table,
.table-focus .online-table {
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  border-radius: 0;
}

.table-focus .scoreboard,
.table-focus .player-rail {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.table-focus .score,
.table-focus .table-player {
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #23332d;
  color: #e2e9e4;
  border: 1px solid #526359;
  box-shadow: none;
  outline: 0;
  transform: none;
}

.table-focus .score.active,
.table-focus .table-player.active {
  color: #e2e9e4;
  border-color: #dfbb6b;
  background: #303c2d;
  box-shadow: inset 3px 0 #dfbb6b;
}

.table-focus .local-player-token,
.table-focus .player-token {
  width: 28px;
  font-size: 12px;
  border-width: 1px;
  box-shadow: none;
}

.table-focus .local-player-copy strong,
.table-focus .player-details strong { font-size: 13px; }
.table-focus .local-player-copy small,
.table-focus .player-details small { color: #c2cdc6; }
.table-focus .score.active .local-player-copy small { color: #c2cdc6; }
.table-focus .local-player-score,
.table-focus .player-score { font: 600 20px/1.1 system-ui, sans-serif; }

.table-focus .local-action-zone {
  min-height: 420px;
  padding: 36px 0 12px;
  align-items: end;
}

.table-focus .local-action-zone > .local-hand-panel,
.table-focus .online-hand {
  width: 100%;
  color: #e2e9e4;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 0 0;
  position: relative;
  bottom: auto;
}

.table-focus .local-hand-heading,
.table-focus .online-hand-heading {
  border-top: 1px solid #587064;
  padding-top: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.table-focus .local-hand-heading h2,
.table-focus .online-hand-heading h2 {
  font: 500 15px/1.4 system-ui, sans-serif;
}

.table-focus .hand-tools { gap: 6px; justify-content: center; width: 100%; flex-wrap: nowrap; margin: 8px auto 0; }
.table-focus .hand-tools > button { font-size: 12px; min-height: 40px; padding: 8px 12px; }
.table-focus button.secondary,
.table-focus .icon-button {
  color: #e2e9e4;
  background: #263b31;
  border-color: #758479;
  border-radius: 4px;
}

.table-focus button:focus-visible,
.table-focus summary:focus-visible,
.table-focus input:focus-visible { outline: 2px solid #f4d17c; outline-offset: 4px; }
.table-focus button:disabled:not(.card) { opacity: 0.5; }
.table-focus .hand .card:disabled:not(.exchange-concealed-card) { cursor: default; }
.table-focus .local-hand-panel > .actions { display: flex; justify-content: center; flex-wrap: wrap; }
.table-focus .local-hand-panel > .actions button { min-width: 140px; flex: 0 1 180px; }
.table-focus .local-hand-panel > p { font-size: 13px; margin: 0; }
.table-focus .hand { padding-block: 26px 16px; }

.table-focus .online-action-panel {
  border-radius: 4px;
  background: #24352d;
  color: #e2e9e4;
  border: 1px solid #65766a;
  box-shadow: none;
}
.table-focus .online-action-panel p { color: #ced8d0; }
.table-focus .online-action-zone { order: 0; }
.table-focus .table-felt { min-height: 180px; border-color: #537561; }
.table-focus .table-mark { opacity: 0.35; }
.table-focus .table-status { background: #263b31; font-size: 12px; }
.table-focus .turn-pill { background: #263b31; border-radius: 4px; font-size: 12px; white-space: normal; }
.table-focus .turn-pill.is-yours { background: #dfbb6b; color: #1c2c23; }
.table-focus .online-tools { color: #ced8d0; }
.table-focus .local-trick { background: transparent; color: #e2e9e4; }
.table-focus .rule-help { font-size: 13px; }
.table-focus .hud-selection-count { padding: 0; background: none; border: 0; color: #c2cdc6; font-size: 12px; }
.table-focus .online-hand-heading > div:first-child { display: flex; align-items: center; gap: 12px; }
.table-focus > .history,
.table-focus .context,
.table-focus .status-feed,
.table-focus .game-journal { color: var(--text); }

.table-focus:not(.hud-details) .side-info,
.table-focus:not(.hud-details) > .history,
.table-focus:not(.hud-details) .game-journal,
.table-focus:not(.hud-details) .rule-help:not(.hud-selection-count),
.table-focus:not(.hud-details) .hand-tools-hint,
.table-focus:not(.hud-details) .card-count,
.table-focus:not(.hud-details) .table-empty,
.table-focus:not(.hud-details) .online-action-panel.waiting p {
  display: none;
}

@media (min-width: 621px) and (max-height: 800px) {
  .table-focus.online-game { gap: 8px; }
  .table-focus .table-felt { min-height: 100px; }
  .table-focus .online-card-fan .card { width: min(135px, calc((100% - 40px) / 5)); flex-basis: 135px; }
  .table-focus .online-card-fan { padding-block: 20px 8px; }
}

@media (max-width: 620px) {
  main:has(.table-focus), main.game-interlude { padding: 0; }
  .game-interlude > .screen { min-height: calc(100svh - 120px); padding: 28px 16px; border: 0; border-radius: 0; gap: 20px; }
  .game-interlude h1 { font-size: 24px; }
  .game-interlude .review-message { font-size: 16px; }
  .game-interlude .actions { gap: 8px; }
  .game-interlude .exchange-reveal-fan .card { width: min(86px, 23%); min-width: 0; flex: 0 0 min(86px, 23%); }
  .table-focus { min-height: 100svh; padding: 8px 10px; border: 0; border-radius: 0; gap: 8px; }
  .hud-controls { gap: 6px; }
  .table-focus .local-game-header h1,
  .table-focus .online-game-header h1 { font-size: 15px; }
  .table-focus .local-game-header,
  .table-focus .online-game-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-bottom: 6px; }
  .table-focus .turn-pill { display: none; }
  .table-focus .scoreboard,
  .table-focus .player-rail { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  .table-focus .local-player-token,
  .table-focus .player-token { display: none; }
  .table-focus .score,
  .table-focus .table-player { grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; padding: 5px 7px; }
  .table-focus .local-player-score,
  .table-focus .player-score { font-size: 17px; }
  .table-focus .local-player-score small { display: none; }
  .table-focus .local-player-copy strong,
  .table-focus .player-details strong { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  .table-focus .local-action-zone { min-height: 0; padding: 0; }
  .table-focus .table-felt { min-height: 90px; }
  .table-focus .local-table,
  .table-focus .online-table { gap: 8px; }
  .table-focus .online-hand,
  .table-focus .local-action-zone > .local-hand-panel { padding-top: 4px; gap: 8px; }
  .table-focus .local-hand-heading,
  .table-focus .online-hand-heading { padding-top: 6px; margin-bottom: 0; gap: 6px; }
  .table-focus .hand { padding-block: 14px 10px; }
  .table-focus .online-card-fan { padding-block: 10px 6px; }
  .table-focus .local-card-fan .card,
  .table-focus .online-card-fan .card { width: min(86px, 23%); min-width: 0; flex: 0 0 min(86px, 23%); }
  .table-focus .hand-tools { width: 100%; justify-content: center; flex-wrap: nowrap; }
  .table-focus .hand-tools > button { flex: 1 1 auto; min-height: 44px; padding-inline: 8px; }
  .table-focus .online-action-panel.compact-action { grid-template-columns: auto minmax(0, 1fr); padding: 8px; gap: 6px; }
  .table-focus .online-action-panel.compact-action h2 { font-size: 14px; }
  .table-focus .online-action-panel.compact-action p { font-size: 12px; text-align: right; }
  .table-focus .online-action-panel.compact-action .actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .table-focus .online-action-panel.compact-action .actions button { min-height: 44px; }
  .table-focus .local-hand-panel > .actions { flex-wrap: nowrap; gap: 8px; }
  .table-focus .local-hand-panel > .actions button { min-width: 0; flex: 1 1 0; padding-inline: 8px; }
}