/* Euchre's table, on the card room's felt (../cards/cards.css) and its
   table styles (../cards/themes.css): only what the card room doesn't
   already draw. No colors of its own; everything comes from the style's
   tokens, so it reads in all nine.

   Steadiness first, as in Contract Rummy: the table fills the window, the
   bottom panel and your hand never change size, and everything that comes and
   goes (bids, banners, tags) appears in space already set aside for it or
   floats over the table, so nothing you might be about to click moves. */

.felt.euchre { position: relative; height: calc(100dvh - 2 * var(--frame)); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.felt.euchre.docked { grid-template-columns: minmax(0, 1fr) 300px; }
.euchre .tablemain { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.euchre .logdock { min-height: 0; display: flex; flex-direction: column; }
.euchre .logdock:empty { display: none; }
.euchre .logdock .gamelog { flex: 1; }
.euchre .gamelog.drawer {
  position: absolute; z-index: 30; right: 14px; top: 64px; bottom: 230px; width: min(340px, calc(100% - 28px));
  box-shadow: -10px 10px 30px rgba(0, 0, 0, .35);
}
.euchre .logbtn.on { background: var(--pick-tint); box-shadow: var(--pick-ring); }

/* suits on a little card face, so their color reads in every table style */
.sg, .roundel { background: var(--card); border-radius: 6px; font-weight: 800; line-height: 1; }
/* (a block trimmed to the cap height and baseline, centered, so "J♠" sits in the middle of its face in any face; house.css, "fine details") */
.sg { display: inline-block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; min-width: 1.45em; height: 1.45em; margin-right: .1em; font-size: .95em; vertical-align: -.2em; }
.su-s, .su-c { color: var(--suit-s); }
.su-h, .su-d { color: var(--suit-h); }
.roundel { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: var(--card-edge); font-size: 28px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
/* (a suit in a roundel is a drawing, in the middle by its own outline: cards/kit/suits.js) */
.roundel .suiticon { display: block; width: .72em; height: .72em; fill: currentColor; }
.roundel.none { background: transparent; color: var(--soft); border: 2px solid var(--soft); box-shadow: none; font-size: 24px; }
/* (its ? in the ring's middle in any face: a block trimmed to the cap height and baseline, centered; house.css, "fine details") */
.roundel.none { display: block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; }

/* ── the stage: the rail, and the table beside it ───────────────────── */
.euchre .stage { flex: 1; min-height: 0; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 12px; }
.euchre .rail { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden auto; scrollbar-width: thin; padding: 2px; }
.euchre .rail > section { background: var(--panel); border: var(--panel-edge); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; flex: none; }
.euchre .rail .rtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--t-note); }
.euchre .rail .rtext .soft { line-height: 1.3; }

/* the score to ten, for both teams */
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; }
.srow .steam { display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.2; }
.srow .steam b { font-size: var(--t-label); }
.srow .steam .soft { font-size: var(--t-note); }
.srow .steam b { flex: none; }
.srow .steam .soft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.srow .spts small { font: 600 13px var(--ui-font); color: var(--soft); margin-left: 1px; }
.rtricks .thead { display: flex; justify-content: space-between; align-items: baseline; }
.srow .spts { line-height: 1; }
.srow .meter { grid-column: 1 / -1; }
.meter { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 18%, transparent); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }

/* trump, big once it's called */
.euchre .rail .rtrump { flex-direction: row; align-items: center; gap: 10px; }
.rtrump .tname { font: var(--display-weight) 20px/1.15 var(--display); }
.rtrump.set { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, var(--panel)); }
.alonetag { color: var(--turn); }
.rtricks .trow, .hs-tricks .trow { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.rtricks .trow b { min-width: 3.2em; font-size: var(--t-note); }
.rtricks .need { font-size: var(--t-note); font-weight: 600; color: var(--ink); }
.rtricks .tcount { min-width: 1ch; text-align: right; }
.pips { display: flex; gap: 5px; }
.pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); opacity: .6; }
.pips i.won { background: var(--ink); opacity: 1; }
.euchre .rail .rturned { flex-direction: row; align-items: center; gap: 8px; font-size: var(--t-note); line-height: 1.3; }
.rturned .sg.chip { flex: none; padding: 0 4px; font-size: .9em; margin: 0; }

/* ── the table: a plate per seat round the trick ────────────────────── */
.euchre .etable {
  --tw: calc(var(--cw) * .84);
  position: relative; min-height: 0; min-width: 0; display: grid; align-items: center; justify-items: center; gap: 4px 10px;
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 4px;
}
.eseat {
  --seat: var(--ink); position: relative; width: clamp(136px, 100%, 212px); min-height: 66px; padding: 6px 10px 6px 12px; display: flex; flex-direction: column; gap: 4px;
  border-radius: 12px; background: var(--panel); border: var(--panel-edge); border-left: 5px solid var(--seat);
}
.eseat.top { grid-column: 2; grid-row: 1; }
.eseat.left { grid-column: 1; grid-row: 2; }
.eseat.right { grid-column: 3; grid-row: 2; }
.eseat.bottom { grid-column: 2; grid-row: 3; }
.eseat.me { background: color-mix(in srgb, var(--ink) 9%, var(--panel)); }
.eseat.turn { outline: 3px solid var(--turn); outline-offset: 2px; }
.eseat.sitting .ehead, .eseat.sitting .ecards { opacity: .5; }
.eseat.away .ehead { opacity: .6; }
.eseat .ehead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eseat .face { position: relative; flex: none; width: 26px; height: 26px; display: block; }
.eseat .face > .seatmark { display: block; width: 100%; height: 100%; overflow: visible; }
.eseat .dealer { position: absolute; right: -7px; bottom: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); color: var(--room); font: 800 12px/15px var(--ui-font); text-align: center; box-shadow: 0 0 0 2px var(--room); }
.eseat .ename { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.eseat .youmark { font-weight: 400; color: var(--soft); font-size: 13px; }
.eseat .ecards { display: flex; height: 18px; padding-left: 4px; margin-left: auto; flex: none; }
.miniback { width: 12px; height: 18px; margin-left: -4px; border-radius: 3px; background: var(--back-pattern), var(--back); border: 1.5px solid var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.eseat .etags { display: flex; flex-wrap: wrap; gap: 3px 4px; min-height: 20px; align-content: flex-start; }
.etag { font: 700 12px/1.2 var(--ui-font); letter-spacing: .03em; padding: 2px 7px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.etag.maker { background: var(--ink); color: var(--room); border-color: var(--ink); }
.etag.alone { background: var(--turn); color: var(--turn-ink); border-color: var(--turn); }
.etag.out { color: var(--soft); }
.etag.ready { color: var(--good); }

/* the trick: a cross, each card on its player's side of the middle */
.trickbox { position: relative; grid-column: 2; grid-row: 2; width: calc(var(--tw) * 4.4); height: calc(var(--tw) * 3.2); }
.trickbox .card { --cw: var(--tw); }
.tslot { position: absolute; display: flex; align-items: center; justify-content: center; }
.tslot.top { top: 0; left: 50%; transform: translateX(-50%); }
.tslot.bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.tslot.left { left: 0; top: 50%; width: calc(50% - var(--tw) * .55); transform: translateY(-50%); justify-content: flex-end; }
.tslot.right { right: 0; top: 50%; width: calc(50% - var(--tw) * .55); transform: translateY(-50%); justify-content: flex-start; }
.tslot .tcard { box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.tslot.winning .tcard { outline: 3px solid var(--good); outline-offset: 2px; }
.tslot.won .tcard { outline: 3px solid var(--turn); outline-offset: 2px; }
/* a card on its way to the trick keeps its place, unseen, until it lands
   (table.js playCue); a new hand's cards and the card turned up, until the
   deal's done (dealCue) */
.tcard.landing, .felt.dealing .tmid .card, .felt.dealing .hand .card, .felt.lifting .tmid .card { visibility: hidden; }
/* what a player said in the bidding, where their card will go */
.bubble { max-width: 100%; padding: 3px 10px; border-radius: 99px; text-align: center; font: 700 13px/1.25 var(--ui-font); background: var(--sheet); color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent); }
.bubble.pass { color: var(--soft); font-weight: 600; border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.bubble.bid { border-color: var(--ink); }
/* the turned card, in the middle while the bidding goes on */
.tmid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tmid .card { --cw: calc(var(--tw) * 1.05); }
.midnote { font: 700 12px/1.2 var(--ui-font); color: var(--soft); text-align: center; white-space: nowrap; }
.downcard { position: relative; }
.downcard .card { opacity: .5; filter: grayscale(.6); }

/* ── banners: the house's (house/toast.js), over the middle of the table,
   never in the way; Euchre's words and colors on them ─────────────────── */
.house-banner .eubanner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.house-banner .splashtitle { font: var(--display-weight) 44px/1.05 var(--display); color: var(--turn); }
.house-banner .splashsub { font: var(--t-note)/1.35 var(--ui-font); color: var(--ink); white-space: normal; max-width: 24em; }
.house-banner.eu-alone, .house-banner.eu-march, .house-banner.eu-win { border: 3px solid var(--turn); }
.house-banner.eu-euchre { border: 3px solid var(--bad); }
.house-banner.eu-euchre .splashtitle { color: var(--bad); }
.house-banner.eu-win .splashtitle { font-size: 54px; }

/* ── your hand ──────────────────────────────────────────────────────── */
.euchre .handwrap { flex: none; min-width: 0; }
/* the card room's hand (cards/kit/hand.js): snapped together, trump first;
   the cards you can play lift and the rest dim (the helper) */
.euchre .hand { padding: 24px 8px 8px; min-height: calc(var(--cw) * 1.4 + 36px); border-radius: 12px; transition: box-shadow var(--m-quick, 150ms), background-color var(--m-quick, 150ms); }
.euchre .hand.active .card.pick { cursor: pointer; }
.euchre .hand .card.legal { transform: translateY(-10px); }
.euchre .hand .card.legal:hover { transform: translateY(-16px); }
.euchre .hand .card.illegal { filter: brightness(.62) saturate(.6); }
.euchre .hand.active .card.illegal { cursor: not-allowed; }
.felt.mineturn .euchre .hand.active, .felt.euchre.mineturn .hand.active { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--turn) 75%, transparent); background-color: color-mix(in srgb, var(--turn) 8%, transparent); }
/* the left bower counts as trump: a small tag on it, once trump is named */
.card.lb::after {
  content: 'LEFT'; position: absolute; left: 6%; bottom: 6%; padding: 1px 5px; border-radius: 99px; pointer-events: none;
  font: 800 calc(var(--cw) * .15)/1.3 var(--ui-font); letter-spacing: .04em; background: var(--suit-s); color: var(--card);
}
.trickbox .card.lb::after { content: 'L'; padding: 0 5px; font-size: max(9px, calc(var(--cw) * .2)); }

/* ── the bottom panel: status, and the moves, always the same size ──── */
.euchre .dock {
  flex: none; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; container-type: inline-size;
  border-radius: 14px; background: var(--panel); border: 2px solid transparent; transition: border-color .2s, background-color .2s;
}
.euchre .dock.yours { border-color: var(--turn); background: color-mix(in srgb, var(--turn) 9%, var(--panel)); }
.euchre .status { min-width: 0; }
.euchre .saybox { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.euchre .sayline { min-height: 2.9em; display: flex; align-items: flex-start; gap: 10px; }
.euchre .say { margin: 0; font-size: var(--t-body); line-height: 1.45; min-width: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.euchre .say b { color: var(--turn); }
.partnercue { flex: none; margin-top: 2px; padding: 1px 10px; border-radius: 99px; border: 1.5px solid var(--good); color: var(--good); font: 700 var(--t-note)/1.4 var(--ui-font); white-space: nowrap; }
.euchre .controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* (after the moves in the page, for the keyboard; drawn before them) */
.euchre .toolrow { display: flex; gap: 14px; align-items: center; min-width: 0; order: -1; }
/* (as tall as Go alone, so it coming and going moves nothing) */
.euchre .toolrow { min-height: var(--tool-h); }
.euchre .tgroup { display: flex; align-items: center; gap: var(--s2, 8px); }
.euchre .sortlabel { font-size: var(--t-note); }
/* (on the narrowest phones the row of Sort, Suit, My order and Go alone is wider than the gutters leave: the switch says what it sorts, as in Rummy) */
@media (max-width: 400px) { .euchre .sortlabel { display: none; } }
/* four places for moves, the safe one always last: a hidden one keeps its place */
.euchre .actions { display: grid; grid-template-columns: repeat(4, 184px); gap: 8px; margin-left: auto; flex: none; }
/* each move has its own column, so the longest label ("Pick a card to discard") can
   take the room of the empty places beside it without anything else shifting */
.euchre .actions > :nth-child(1) { grid-area: 1 / 1; }
.euchre .actions > :nth-child(2) { grid-area: 1 / 2; }
.euchre .actions > :nth-child(3) { grid-area: 1 / 3; }
.euchre .actions > :nth-child(4) { grid-area: 1 / 4; }
.euchre .actions > .wide { grid-area: 1 / 2 / 2 / 5; }
.euchre .act { width: 100%; min-width: 0; padding-inline: 10px; }
.euchre .act .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.euchre .act .sg { min-width: 1.4em; height: 1.4em; border-radius: 5px; }
.euchre .tool { min-height: var(--tool-h); font-size: var(--t-small); padding: 4px 12px; white-space: nowrap; }
.alonebtn { gap: 8px; }
.alonebtn .box { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 4px; font-size: 13px; line-height: 1; }
.alonebtn.on { background: var(--pick-tint); box-shadow: var(--pick-ring); font-weight: var(--pick-weight); }
.alonebtn[disabled] { border-style: solid; background: var(--pick-tint); color: var(--ink); opacity: .85; }
.euchre .btn.slot.act.confirm, .euchre .btn.slot.act.confirm.alt { background: var(--btn2); color: var(--btn2-ink); border: 2.5px solid var(--confirm, var(--bad)); }
@container (max-width: 1000px) { .euchre .actions { grid-template-columns: repeat(4, 150px); } }
@container (max-width: 760px) { .euchre .actions { grid-template-columns: repeat(4, 124px); } }

/* ── sheets: the hand's summary, the scores ─────────────────────────── */
/* at the end of a hand or the game, the house's result sheet (house/end.js),
   its summary and table read left to right */
.house-scrim-result .house-sheet.eu-result { --house-sheet-width: 560px; }
.house-result .scoresheet { align-self: stretch; text-align: left; min-width: 0; }
.house-result .house-post:empty { display: none; }
.scroll { overflow-x: auto; }
.scoresheet .legend { font-size: var(--t-note); margin: 0 0 8px; }
.handsum { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: var(--panel-edge); border-radius: 12px; background: var(--panel); }
.handsum .hs-called { display: flex; align-items: center; gap: 12px; }
.handsum .hs-called > div:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.handsum .hs-tricks { display: flex; flex-direction: column; gap: 6px; }
.handsum .trow b { flex: 0 0 5.5em; }
.handsum .trow .soft { flex: 0 0 5em; text-align: right; font-size: var(--t-note); }
.handsum .trow .pips { flex: 1; }
.handsum .hs-points { margin: 0; font-size: var(--t-body); }
.bigscore { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 4px; }
.bigscore .bs { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 8px; }
.bigscore .bs b { font: 800 40px/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.bigscore .bs .meter { grid-column: 1 / -1; }
.bigscore .bs.them b { color: var(--soft); }
table.scores { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }
table.scores th, table.scores td { padding: 6px 7px; text-align: right; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); white-space: nowrap; }
table.scores .left { text-align: left; }
table.scores .now { background: color-mix(in srgb, var(--ink) 7%, transparent); }
table.scores tfoot th, table.scores tfoot td { font-weight: 800; border-bottom: 0; }
table.contracts td:nth-child(2), table.contracts th:nth-child(2) { text-align: left; white-space: normal; }
.rulesheet ul, .rulesheet ol { padding-left: 1.2em; }
/* the host's "Start without waiting" waits a moment before it can be pressed */
.later { animation: later 0s 1s both; }
@keyframes later { from { visibility: hidden; } to { visibility: visible; } }

/* ── the waiting room: who's partnered with whom ────────────────────── */
.partnernote { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.partnernote .setting { margin-bottom: var(--s1); }
.partners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.partners .team { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: var(--panel-edge); border-radius: 10px; min-width: 0; }
.partners .team.mine { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.partners .pair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; }
.partners .pn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.partners .pn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9em; }
.partners .pn .face { display: block; width: 22px; height: 22px; flex: none; }
.partners .pn .face > .seatmark { display: block; width: 100%; height: 100%; }
.partners .pn.open .face { border: 1.5px solid var(--soft); border-radius: 50%; }
.partners .amp { color: var(--soft); }
.partnernote .pfoot { margin: 0; font-size: var(--t-note); }

/* ── smaller windows ────────────────────────────────────────────────── */
@media (max-width: 1000px), (max-height: 640px) {
  .euchre .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .euchre .rail { flex-direction: row; overflow: visible; padding: 0; }
  .euchre .rail > section { flex: 1 1 0; min-width: 0; padding: 6px 8px; }
  .euchre .rail .rturned { display: none; }
  .euchre .rail .rtrump { gap: 8px; }
  .roundel { width: 40px; height: 40px; font-size: 24px; }
  .rtrump .tname { font-size: 18px; }
  .srow .steam .soft { display: none; }
  .euchre .rtext .soft { display: none; }
  .pips i { width: 11px; height: 11px; }
}
@media (max-width: 760px) {
  .euchre .etable { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2px 6px; }
  .eseat { padding: 4px 6px 4px 8px; min-height: 66px; gap: 2px; border-left-width: 4px; }
  .eseat .ename { font-size: 13px; }
  .eseat .youmark { display: none; }
  .eseat .face { width: 22px; height: 22px; }
  .eseat .ehead { gap: 5px; }
  .etag { padding: 1px 5px; }
  .euchre .actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .felt.euchre { height: 100dvh; gap: 0; }
  .euchre .tablemain { gap: 6px; }
  .felt.euchre .bar .tools { display: none; }
  .felt.euchre .bar .more { display: inline-flex; min-width: 44px; }
  /* the rail is three small panels in a row: the suit says trump, so its words go */
  .euchre .rail .rtrump .rtext, .euchre .rail .rtricks .kicker, .euchre .rail .rtricks .thead { display: none; }
  .euchre .rail .rtrump { flex-direction: row; justify-content: center; }
  .euchre .rail > section { flex-direction: column; justify-content: center; }
  .euchre .rail .rscore { flex: 1.4 1 0; }
  .euchre .rail .rtricks { flex: 1.2 1 0; }
  .rtricks .trow { gap: 6px; }
  .rtricks .trow b { min-width: 0; font-size: 13px; }
  .pips { gap: 3px; }
  /* (the count says it: the pips give way to it) */
  .euchre .rail .rtricks .pips { display: none; }
  .srow .steam b { font-size: 14px; }
  /* a seat beside the table is narrow: its mark, and how many cards, as a number */
  .eseat .ecards .miniback:not(:first-child) { display: none; }
  .eseat .ecards::after { content: '×' attr(data-count); font: 700 12px/18px var(--ui-font); margin-left: 3px; }
  .eseat.left .ename, .eseat.right .ename { white-space: normal; overflow-wrap: anywhere; }
  .eseat.left .ehead, .eseat.right .ehead { flex-wrap: wrap; row-gap: 2px; }
  .eseat.left .ecards, .eseat.right .ecards { margin-left: 0; }
  .euchre .eseat.left, .euchre .eseat.right { width: 100%; }
  .eseat .etags .etag:not(.dealer):not(.maker):not(.alone) { display: none; }
  .euchre .hand { padding: 20px 2px 6px; min-height: calc(var(--cw) * 1.4 + 30px); }
  .euchre .dock { padding: 8px; gap: 6px; }
  .euchre .controls { flex-direction: column; align-items: stretch; gap: 6px; }
  .euchre .toolrow { order: 0; }
  /* (it keeps the height of a move when there are none, so the hand doesn't jump when your call comes) */
  .euchre .actions { width: 100%; margin-left: 0; display: flex; gap: 6px; min-height: 44px; }
  .euchre .actions .btn.slot { flex: 1 1 0; padding-inline: 4px; font-size: 14px; }
  .euchre .actions .btn.slot.hide { display: none; }
  /* three suits and Pass in a row: the suits are just their marks */
  .euchre .actions .btn.slot.suitbtn:not(.onlycall) .sname { display: none; }
  .euchre .actions .btn.slot:not(.suitbtn) { flex-grow: 1.8; }
  .eseat .face { margin-right: 4px; }
  .euchre .say { font-size: 14px; }
  .euchre .sayline { flex-direction: column; gap: 4px; min-height: calc(2 * 1.45 * 14px + 28px); }
  .partnercue { align-self: flex-start; margin: 0; font-size: 13px; }
  .euchre .gamelog.drawer { right: 10px; width: calc(100% - 20px); }
  .bigscore .bs b { font-size: 32px; }
  .house-banner .splashtitle { font-size: 34px; }
  .house-banner.eu-win .splashtitle { font-size: 40px; }
  .partners { grid-template-columns: 1fr; }
  .bar .more { min-height: 44px; min-width: 44px; }
  table.scores th, table.scores td { padding: 6px 4px; font-size: 13px; }
}
/* the narrowest phones: the tricks panel is ~85px, so its label and five pips
   have to share it without touching */
@media (max-width: 360px) {
  .rtricks .trow { gap: 3px; }
  .rtricks .trow b { font-size: 12px; }
  .pips { gap: 2px; }
  .pips i { width: 8px; height: 8px; }
}
/* short phones (an iPhone SE, 320×568): smaller cards, plates one
   line high, so the trick still fits between them */
@media (max-width: 640px) and (max-height: 700px) {
  body { --cw: 40px; }
  .euchre .etable { --tw: calc(var(--cw) * .8); }
  .euchre .sayline { min-height: calc(2 * 1.45 * 14px + 26px); }
  .eseat { min-height: 0; padding-block: 3px; }
  .eseat .etags { min-height: 0; }
  .eseat.top .etags:empty, .eseat.bottom .etags:empty { display: none; }
  /* (the seats across and below keep to one line, a tag such as Called beside the name, so the trick has the row between them) */
  .eseat.top, .eseat.bottom { flex-direction: row; align-items: center; gap: 6px; }
  .eseat.top .ehead, .eseat.bottom .ehead { flex: 1; min-width: 0; }
  /* (no room for the turned card's note between the seats: the dock's line says the same, "Call diamonds and Fern picks up the J♦") */
  .midnote { display: none; }
  /* (just the height of the top and bottom cards: a seat's tags, Called, still clear the top one's word) */
  .trickbox { height: calc(var(--tw) * 2.8); }
  .euchre .hand { padding-top: 14px; min-height: calc(var(--cw) * 1.4 + 22px); }
  .euchre .rail > section { padding-block: 4px; }
  .roundel { width: 34px; height: 34px; font-size: 20px; }
}
/* phones on their side: everything one line high, so the table, your
   hand and your moves all fit; the log is in the menu */
@media (max-height: 520px) {
  body { --cw: 40px; }
  #app { padding: 0; }
  .felt.euchre { height: 100dvh; padding: 4px max(8px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); border: 0; border-radius: 0; gap: 0; }
  .euchre .tablemain { gap: 3px; }
  .felt.euchre .bar .tools { display: none; }
  .felt.euchre .bar .more { display: inline-flex; min-height: 30px; }
  .euchre .bar .title { font-size: 14px; }
  .euchre .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 3px; }
  .euchre .rail { flex-direction: row; overflow: visible; padding: 0; gap: 4px; }
  .euchre .rail > section { flex: 1 1 auto; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 1px 8px; min-height: 0; }
  .rtrump .roundel { box-shadow: none; }
  .euchre .rail .rturned, .rscore .meter, .rtricks .thead, .rtrump .rtext { display: none; }
  .rscore .srow { display: flex; align-items: baseline; gap: 6px; }
  .srow .spts { font-size: 18px; }
  .rtricks .trow { gap: 4px; }
  .roundel { width: 26px; height: 26px; font-size: 16px; }
  .euchre .etable { --tw: calc(var(--cw) * .62); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2px 6px; padding: 0; }
  .eseat { width: auto; max-width: 100%; min-height: 0; padding: 2px 8px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 2px 8px; border-left-width: 4px; }
  .eseat .ecards, .eseat .youmark { display: none; }
  .eseat .ename { font-size: 13px; }
  .eseat .face { width: 20px; height: 20px; }
  .eseat .etags { min-height: 0; }
  .eseat .etags .etag:not(.isdealer):not(.maker):not(.alone):not(.out) { display: none; }
  .trickbox { height: calc(var(--tw) * 3.4); }
  /* (the trick is small here: a seat's word keeps to one line, smaller, and a side one runs outward rather than squeezing into its slot and under the top one) */
  .bubble { max-width: none; white-space: nowrap; font-size: 12px; padding: 1px 7px; }
  .euchre .hand { padding: 12px 4px 4px; min-height: calc(var(--cw) * 1.4 + 18px); }
  .euchre .toolrow .sorters { display: none; }
  .euchre .dock { padding: 3px 8px 4px; gap: 2px; }
  .euchre .sayline { min-height: 1.45em; gap: 8px; }
  .euchre .say { -webkit-line-clamp: 1; font-size: 13px; }
  .partnercue { margin: 0; font-size: 12px; padding: 0 8px; }
  .euchre .controls { gap: 6px; }
  .euchre .actions { grid-template-columns: repeat(4, 112px); gap: 4px; }
  .euchre .tool, .euchre .act { min-height: 34px; font-size: 13px; padding-block: 2px; }
  .euchre .toolrow { min-height: 34px; }
  .euchre .dock kbd { display: none; }
  .house-banner .splashtitle { font-size: 28px; }
  .house-banner.eu-win .splashtitle { font-size: 32px; }
}
@media (pointer: coarse) {
  .euchre .tool, .euchre .act, .euchre .toolrow { min-height: 44px; }
  .felt.euchre .bar .btn { min-height: 44px; }
}
/* (phones on their side: 38px, so the table keeps its room) */
@media (pointer: coarse) and (max-height: 520px) {
  .euchre .tool, .euchre .act, .euchre .toolrow { min-height: 36px; }
  .felt.euchre .bar .btn { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .card.arrive { animation: none; }
  .euchre .dock, .euchre .hand, .euchre .hand .card { transition: none; }
}

/* ── the front door: six table settings still fit 1280×800 ──────────── */
/* (the room's column and panels; the bots' side a little wider, beside
   the friends' on a wide screen and over it on a narrow one) */
@media (min-width: 900px) {
  .lobby:has(.choices) .choices { grid-template-columns: 2fr 1fr; }
}
/* Three to a row, each a label and hint over its choice, so the lobby needs
   no scrolling in the house's page skeleton (docs/design-system.md, "The
   lobby fits 1280×800"); one to a row on a phone. */
.lobby .choice > .bots > .bots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s3); }
.lobby .choice > .bots > .bots > .setting { flex-direction: column; align-items: stretch; gap: var(--s1); }
.lobby .choice > .bots > .bots > .setting > div:first-child { flex: none; }
.lobby .choice > .bots > .bots > .setting .seg { display: grid; }
.lobby .choice > .bots > .bots > .setting .seg button { min-width: 0; min-height: 32px; padding-block: 3px; }
@media (pointer: coarse) { .lobby .choice > .bots > .bots > .setting .seg button { min-height: 44px; } }
/* (one to a row wherever the bots' panel is half a window: under 900px it shares the row with the friends', so three would be cramped) */
@media (max-width: 899px) {
  .lobby .choice > .bots > .bots { grid-template-columns: 1fr; }
}
/* (the narrowest phones: "Hand 3 · ♠ trump", so the bar's title isn't cut short) */
@media (max-width: 360px) { .euchre .title .suitword { display: none; } }