/* ========== TRUMP PICKER ========== */
.trump-inspector-picker {
  display: grid;
  /* Four equal columns (F-005): 1fr alone sized each by its longest word. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.trump-inspect-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 4px 12px;
  border-radius: 14px;
  min-width: 0;
  border: 1px solid var(--panel-border);
  background: #fbfbf8;
  color: #151515;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  min-height: 44px;
}

.trump-inspect-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px var(--gold), 0 10px 20px rgba(0, 0, 0, 0.35);
}

.trump-inspect-btn:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  cursor: not-allowed;
}

.trump-inspect-symbol {
  font-size: 2.2rem;
  line-height: 1;
}

.trump-inspect-btn.red-suit:not(:disabled) .trump-inspect-symbol { color: #c62828; }
body.four-color-deck .trump-inspect-btn.suit-C:not(:disabled) .trump-inspect-symbol { color: #1b7a2b; }
body.four-color-deck .trump-inspect-btn.suit-D:not(:disabled) .trump-inspect-symbol { color: #1565c0; }

.trump-inspect-name {
  font-weight: 700;
  font-size: 0.85rem;
}
/* An iPad upright (F-005): the panel is zoomed 1.25× in a narrow felt, so
   one step smaller keeps "Diamonds" inside its quarter (15 px on screen). */
body.upright-big .trump-inspect-name { font-size: 0.72rem; }
body.upright-big .trump-panel { padding-inline: 16px; }
body.upright-big .trump-inspector-picker { gap: 8px; }
body.upright-big .trump-inspect-btn { padding-inline: 2px; }

.trump-inspect-stats {
  font-size: 0.72rem;
  opacity: 0.75;
}
/* "3 cards · no K+Q" wraps only at the "·" (F-005), never inside "K+Q". */
.trump-inspect-stats > span { white-space: nowrap; }

/* ========== BID PROGRESS (trick play) ========== */
.bid-progress {
  width: min(340px, 100%);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(8, 22, 14, 0.72);
  border: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bid-progress-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Wraps as whole phrases ("needs 12 more" drops to its own line), never mid-phrase. */
.bid-progress-text > span { white-space: nowrap; }
.bid-progress-text > span:last-child { color: var(--gold-strong); }

.bid-progress-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.bid-progress-bar-bg {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.bid-progress-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}

.bid-progress-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--text, #f4efe0);
  opacity: 0.7;
}
.bid-progress-green { background: var(--good); }
.bid-progress-yellow,
.bid-progress-gold { background: var(--gold); }
.bid-progress-team { background: var(--text-dim); }
.bid-progress-red { background: var(--bad); }

/* Build 28 (ISSUES row 84): the same numbers as one compact line, in place of the bars where the
   center is short of room (a phone on its side, css/game-table.css). Never under 11 px. */
.bid-progress-line {
  display: none;
  margin: 0;
  max-width: 100%;
  text-align: center;
  font-size: max(0.75rem, 11px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  text-wrap: balance;
}

/* One row per team; the second sits under a hairline. */
.bp-row { display: flex; flex-direction: column; gap: 4px; }
.bp-row + .bp-row { padding-top: 6px; border-top: 1px solid var(--panel-border); }
.bid-progress-sub { display: flex; justify-content: space-between; gap: 8px; }
/* The 20-trick-point minimum each team needs, as a small chip. */
.bp-twenty {
  flex: none;
  white-space: nowrap;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bp-twenty.is-done { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }

/* ========== MELD MATRIX TABLE (meld guide) ========== */
.meld-matrix-table {
  width: 100%;
  border-collapse: collapse;
}

.meld-matrix-table th,
.meld-matrix-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.meld-matrix-table th {
  color: var(--gold);
  font-weight: bold;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.8rem;
}

.meld-matrix-table td:first-child {
  text-align: left;
  font-weight: 500;
}

.meld-matrix-table td:not(:first-child) {
  color: var(--gold-strong);
  font-weight: bold;
}

@media (max-width: 600px), (max-height: 500px) {
  .trump-inspector-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A phone on its side (N-004): the four suits in one row of shorter
   buttons, so the whole picker and Confirm fit the short felt (a 2×2 grid
   put Spades and Hearts above it). */
@media (max-height: 500px) and (orientation: landscape) {
  .trump-inspector-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .trump-panel { width: min(520px, 100%); }
  .trump-inspect-btn { padding: 6px 4px 5px; gap: 1px; }
  .trump-inspect-symbol { font-size: 1.6rem; }
  .trump-confirm { margin-top: 8px; }
  /* Folded (fitCenter's fit-compact, N-004): each suit's symbol beside its
     name with the count under both, a one-line title, and a 44 px Confirm,
     so title, suits, and Confirm all fit the short felt unscrolled. */
  .trump-panel.fit-compact { padding-block: 5px; }
  .trump-panel.fit-compact .panel-title { font-size: 1rem; line-height: 1.2; }
  .trump-panel.fit-compact .trump-inspect-btn {
    display: grid; grid-template-columns: auto auto; grid-template-areas: "sym name" "stats stats";
    justify-content: center; align-items: center; column-gap: 5px; row-gap: 0; padding: 3px 6px;
  }
  .trump-panel.fit-compact .trump-inspect-symbol { grid-area: sym; font-size: 1.15rem; }
  .trump-panel.fit-compact .trump-inspect-name { grid-area: name; }
  .trump-panel.fit-compact .trump-inspect-stats { grid-area: stats; }
  .trump-panel.fit-compact .trump-confirm { margin-top: 2px; min-height: 44px; }
}

/* ========== MELD ON THE TABLE (docs/MELD_UI.md, render/meld.js) ========== */
/* Phones upright: during the meld the side seats join the top row, so the
   board has the felt's whole width (a 170 px column used to clip it). */
@media (max-width: 600px) and (min-height: 501px) {
  .game-table.phase-meld {
    grid-template-areas:
      "left top right"
      "center center center"
      ".    bottom .";
  }
  .game-table.phase-meld .player-left,
  .game-table.phase-meld .player-right { align-self: start; }
}

.center-panel.meld-board { width: min(760px, 100%); gap: 10px; }
/* Build 25: who won and trump stacked at the left, the chart link at the
   right: one slim row (it was a centered title, the trump line and the link
   on three; the 44 px link target sets the row's height). */
.meld-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow link" "trump link";
  justify-items: start;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  text-align: left;
}
.meld-board-head .panel-eyebrow { grid-area: eyebrow; line-height: 1.3; text-align: left; }
.meld-board-head .meld-board-trump { grid-area: trump; margin: 0; font-size: 1.05rem; }
.meld-board-head .meld-chart-link { grid-area: link; display: inline-flex; align-items: center; margin: 0; font-size: 0.78rem; min-height: 44px; padding-inline: 4px; }
/* The bar under the list: who is still to confirm on the left, Confirm Meld
   at the right, 48 px tall (Forfeit and Misdeal wrap to a row of their own). */
.meld-board .meld-actions { justify-content: flex-end; align-items: center; gap: 6px 8px; }
.meld-board .meld-actions .btn { width: auto; flex: 0 1 auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.meld-board .meld-actions .btn.meld-confirm { min-height: 48px; margin-left: auto; }
.meld-board .meld-actions .meld-waiting { flex: 1 1 96px; align-self: center; margin: 0; text-align: left; }
.meld-team { gap: 6px; padding: 8px 10px 10px; }
.meld-team-head { align-items: center; gap: 8px; }
.meld-team-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.meld-team-tag {
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: var(--text-micro, 0.6875rem);
  letter-spacing: 0.06em;
}
.meld-team-total { font-size: 1.45rem; font-weight: 800; }
.meld-team-status { font-size: 0.78rem; font-weight: 600; line-height: 1.3; margin-top: -2px; }
.meld-team-status.tone-gold { color: var(--gold-strong); }
.meld-team-status.tone-good { color: var(--good); }
.meld-team-status.tone-bad { color: var(--bad); }
.meld-team-status.tone-dim { color: var(--text-dim); }

/* One seat's card. */
.meld-seat {
  border-radius: 12px;
  padding: 6px 9px 7px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.meld-seat-head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
}
button.meld-seat-head { cursor: pointer; }
button.meld-seat-head:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.meld-seat-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  color: #10241a;
  background: var(--team-ew);
}
.meld-seat.team-ns .meld-seat-avatar { background: var(--team-ns); }
.meld-seat-name { font-weight: 700; font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meld-seat-ready { color: var(--good); font-weight: 800; }
.meld-seat-total {
  margin-left: auto;
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.meld-seat.is-empty .meld-seat-total { color: var(--text-dim); }

.meld-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* A narrow card: title and points, the card faces under them. A wide one
   (a phone's full width, a roomy column): title | faces | points. */
.meld-seat { container-type: inline-size; }
.meld-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title score" "cards cards";
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
}
.meld-group-title { grid-area: title; }
.meld-group-cards { grid-area: cards; }
.meld-group-score { grid-area: score; }
@container (min-width: 250px) {
  .meld-group {
    grid-template-columns: minmax(5.6em, max-content) minmax(0, 1fr) auto;
    grid-template-areas: "title cards score";
  }
}
/* A wide card with a long meld: two columns of combinations. */
@container (min-width: 500px) {
  .meld-groups:has(> .meld-group:nth-child(5)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 20px;
  }
  .meld-groups > .meld-group.is-hidden { grid-column: 1 / -1; }
}
.meld-group-title { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.meld-group-cards { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.meld-group-score {
  margin-left: auto;
  min-width: 1.6em;
  text-align: right;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--gold-strong);
  font-variant-numeric: tabular-nums;
}
.meld-chip { min-width: 26px; padding: 1px 4px; font-size: 0.82rem; line-height: 1.35; border-radius: 4px; }
.meld-chip.is-played { opacity: 0.38; text-decoration: line-through; box-shadow: none; }
/* Part of your own meld the table doesn't see. */
.meld-group.is-private { opacity: 0.62; }
.meld-group.is-private .meld-group-title::before { content: '\1F441\FE0E\00a0'; }
.meld-group.is-hidden,
.meld-group.is-none {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--text-dim);
}
.meld-group.is-hidden,
.meld-group.is-none { display: block; }
.meld-group.is-hidden { padding: 2px 8px; border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 8px; align-self: flex-start; }
.meld-private-note { font-size: 0.7rem; color: var(--text-dim); line-height: 1.3; }

/* Folded (fitCenter adds fit-compact when room is short): the labels on
   one or two lines beside the name; tap to open. */
.meld-seat-summary {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-dim);
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meld-board.fit-compact .meld-seat:not(.is-open) .meld-groups,
.meld-board.fit-compact .meld-seat:not(.is-open) .meld-private-note { display: none; }
.meld-board.fit-compact .meld-seat:not(.is-open) .meld-seat-summary { display: -webkit-box; }
.meld-board.fit-compact .meld-seat:not(.is-open) .meld-seat-name { flex: none; max-width: 40%; }
.meld-board.fit-compact .meld-seat:not(.is-open) .meld-seat-total { margin-left: 0; font-size: 1.1rem; }
.meld-board.fit-compact .meld-seat:not(.is-open) button.meld-seat-head::after {
  content: '\25B8';
  color: var(--text-dim);
  font-size: 0.8rem;
}
.meld-board.fit-compact .meld-seat.is-open { border-color: rgba(227, 181, 74, 0.4); }
.meld-board.fit-compact { gap: 6px; }
.meld-board.fit-compact .meld-teams { gap: 6px; }
.meld-board.fit-compact .meld-team { gap: 4px; padding: 6px 8px 8px; }
/* Last step before scaling: a long meld shows its four best combinations
   (cards and all) and a Show All button for the rest. */
.meld-seat-more { display: none; align-self: flex-start; }
.meld-board.fit-more .meld-seat.is-open .meld-group:nth-child(n+5):not(.is-hidden) { display: none; }
.meld-board.fit-more .meld-seat.is-open .meld-seat-more { display: inline-flex; }

/* The smallest phones: one team at a time, with its total on a tab. */
.meld-pages { display: none; gap: 6px; }
.meld-board.fit-paged .meld-pages { display: flex; }
.meld-board.fit-paged .meld-team:not(.is-page) { display: none; }
.meld-board.fit-paged .meld-waiting,
.meld-board.fit-paged .meld-team-head { display: none; }
.meld-page-name { display: inline-flex; align-items: center; gap: 6px; }
.meld-page-tab {
  flex: 1 1 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.meld-page-tab[data-team="NS"] .meld-page-name { color: var(--team-ns); }
.meld-page-tab[data-team="EW"] .meld-page-name { color: var(--team-ew); }
.meld-page-total { color: var(--text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.meld-page-tab.is-on { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); }
.meld-page-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Short phones: the side seats drop their avatars during the meld. */
@media (max-width: 600px) and (max-height: 700px) {
  .game-table.phase-meld .player-left .seat-avatar,
  .game-table.phase-meld .player-right .seat-avatar { display: none; }
}

/* Phones: the teams stack. */
@media (max-width: 600px) {
  .meld-board { padding: 10px 10px 8px; gap: 8px; }
}

/* Large text (the website's Easy view). */
body.easy-view .meld-group-title { font-size: 0.95rem; }
body.easy-view .meld-chip { font-size: 0.85rem; }
body.easy-view .meld-seat-name { font-size: 1.05rem; }

/* Your hand: a card that is part of your meld (meld and tricks). */
.hand .card.in-meld::before {
  content: 'M';
  position: absolute;
  left: 3px;
  bottom: 3px;
  z-index: 3;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--gold);
  color: #1a1a1a;
  /* Never under the 11 px floor; 13% of the card on bigger cards, as the
     app's (HandView: max(11, card width × 0.13)). */
  font: 800 max(11px, calc(var(--card-width, 60px) * 0.13))/1.3 system-ui, sans-serif;
  pointer-events: none;
}

/* Trick play: a seat's meld beside its plate. */
.meld-peek {
  position: fixed;
  z-index: var(--z-panel);
  padding: 10px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100dvh - 16px);
  overflow: auto;
}
.meld-peek .meld-seat { background: none; border: 0; padding: 0; }
.meld-peek.is-sheet { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.meld-peek .meld-seat-head { padding-right: 36px; }
.meld-peek-played { font-size: 0.74rem; color: var(--text-dim); }
.meld-peek-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
}
.game-table.phase-tricking .seat-plate { cursor: pointer; }

/* Hand summary: one meld line per seat. */
.meld-summary { margin-top: 12px; text-align: left; }
.meld-summary-title { margin: 0 0 6px; font-size: 0.78rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
/* One line per player (render/meld.js): name and total; open, the combinations. */
.meld-summary-line {
  display: block;
  font-size: 0.82rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.meld-summary-line > summary.meld-summary-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 0;
  list-style: none;
}
.meld-summary-head::-webkit-details-marker { display: none; }
.meld-summary-head::after { content: "\25B8"; margin-left: auto; color: var(--text-dim); }
.meld-summary-line[open] > .meld-summary-head::after { content: "\25BE"; }
.meld-summary-line > .meld-summary-parts { display: block; padding: 0 0 6px; }
.meld-summary-name { min-width: 3.5em; }
.meld-summary-name { font-weight: 700; }
.meld-summary-line.team-ns .meld-summary-name { color: var(--team-ns); }
.meld-summary-line.team-ew .meld-summary-name { color: var(--team-ew); }
.meld-summary-total { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.meld-summary-parts { color: var(--text-dim); min-width: 0; overflow-wrap: anywhere; }

/* Wide screens: the side seats join the top row during the meld and the
   board takes the felt's width, the four seats side by side (half the
   height of two stacked per team: short laptop windows keep full size). */
@media (min-width: 1000px) {
  .game-table.phase-meld {
    grid-template-areas:
      "left top right"
      "center center center"
      ".    bottom .";
  }
  /* (grid-area: the seats stay on their own template areas, the top row here
     and the middle row in the 1440 px template below. A short wide window
     also matches the phone-on-its-side rules (game-table.css) that span the
     seats down the felt and cap them to it, which would put them over the
     board; naming the area again takes only the area's rows back and leaves
     the template to place them, and no cap, as before build 26. Not
     "grid-row: 1": that put them in the top row at 1440 px too.) */
  .game-table.phase-meld .player-left { grid-area: left; max-height: none; justify-self: start; align-self: center; }
  .game-table.phase-meld .player-right { grid-area: right; max-height: none; justify-self: end; align-self: center; }
  .center-panel.meld-board { width: min(1120px, 100%); }
  .meld-board .meld-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .meld-board .meld-team > .meld-team-head,
  .meld-board .meld-team > .meld-team-status { grid-column: 1 / -1; }
  .meld-board .meld-team > .meld-seat { align-self: start; }
  /* Folded: the open seat takes the team's width, the other a line under it. */
  .meld-board.fit-compact .meld-team > .meld-seat { grid-column: 1 / -1; }
}

/* Wide desktop windows (mouse, 1440 px and up): the board fits between the
   side seats, so they stay where they sit for the whole hand instead of
   jumping to the top row for the meld (review N-012). Touch screens and
   narrower windows keep the top-row rule below. */
@media (min-width: 1440px) and (hover: hover) and (pointer: fine) {
  .game-table.phase-meld {
    grid-template-areas:
      ".    top    ."
      "left center right"
      ".    bottom .";
    /* The seats keep their place but give the board the width it had in
       the top-row layout (side tracks shrink to the plates). */
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .game-table.phase-meld .player-left,
  .game-table.phase-meld .player-right { justify-self: center; align-self: center; }
}

/* Larger Text on a phone held upright (200%, as the app at the
   accessibility sizes, docs/TABLE_LAYOUT.md "Fit rules" 2): the suits are
   one column of full-width rows, each the suit beside its name (44 px
   tall at least), scrolling over Confirm. */
@media (orientation: portrait) and (max-width: 600px) {
  /* The side seats join the top row (as the app's at those sizes), so the
     rows have the felt's whole width. */
  .game-table.phase-declaring:has(.center-zone.is-large-text .trump-inspector-picker) {
    grid-template-areas:
      "left top right"
      "center center center"
      "bottom bottom bottom";
    /* The side plates take the room either side of the partner's, so a
       name is never broken mid-word ("Mat / t"). */
    grid-template-columns: max-content minmax(0, 1fr) max-content;
  }
  .game-table.phase-declaring:has(.center-zone.is-large-text .trump-inspector-picker) .player-top { min-width: 0; max-width: 100%; }
  /* Three plates in one row at 200%: the avatars give way (as the meld's
     on short phones), so the partner's tag is never cut. */
  .game-table.phase-declaring:has(.center-zone.is-large-text .trump-inspector-picker) :is(.player-left, .player-top, .player-right) .seat-avatar { display: none; }
  .game-table.phase-declaring:has(.center-zone.is-large-text .trump-inspector-picker) .player-left,
  .game-table.phase-declaring:has(.center-zone.is-large-text .trump-inspector-picker) .player-right { align-self: start; }
  .center-zone.is-large-text .trump-inspector-picker { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .center-zone.is-large-text .trump-inspect-btn {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    text-align: start;
  }
  .center-zone.is-large-text .trump-inspect-symbol { font-size: 1.6rem; flex: none; }
  .center-zone.is-large-text .trump-inspect-name { font-size: 1rem; }
  .center-zone.is-large-text .trump-inspect-stats { margin-inline-start: auto; font-size: 0.85rem; }
}