/* Our Rummy - warm ivory lobby, forest green table.
   Phone first. Every status carries text or shape, never colour alone. */

:root {
  --ivory: #F6F3EB;
  --surface: #FFFDF8;
  --forest: #164B3B;
  --forest-deep: #0E3328;
  --ink: #20372E;
  --muted: #52665C;
  --border: #D8DFD4;
  --gold: #C8A85B;
  --red-suit: #B32936;
  --black-suit: #172A24;
  --danger: #8C2F26;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 2px 8px rgba(22, 75, 59, 0.10);
  --shadow-lift: 0 6px 16px rgba(22, 75, 59, 0.20);
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Card faces are size-critical, so the layout keeps a predictable base and the
   player scales it deliberately with "Bigger text" in the Menu, which also
   widens the cards themselves. */
body { -webkit-text-size-adjust: 100%; }
:root { --ts: 1; }
html[data-text="large"] { --ts: 1.15; }
html[data-text="larger"] { --ts: 1.32; }

.app {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--forest);
  color: var(--surface);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: 12px; top: 12px; z-index: 40; }

/* The hidden attribute is how every view and phase action is switched off, so
   it must beat the display rules below (.view, .btn, .row, grids). The file
   input stays reachable through .visually-hidden, which never sets hidden. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 2px;
}

/* --- type --------------------------------------------------------------- */

.display {
  font-family: var(--serif);
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1.15;
  margin: 4px 0 12px;
  font-weight: 600;
}
.section-title {
  font-family: var(--serif);
  font-size: 21px;
  margin: 24px 0 12px;
  font-weight: 600;
}
.card-panel > .section-title:first-child { margin-top: 0; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 0;
}
.lede { color: var(--muted); font-size: 17px; margin: 0 0 8px; }
.hint { color: var(--muted); font-size: 15px; margin: 4px 0; }
.form-error {
  color: var(--danger);
  background: #FBEFEE;
  border: 1px solid #E7C7C3;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0;
  font-size: 16px;
}

/* --- layout blocks ------------------------------------------------------ */

.view { display: block; }
.card-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.narrow { max-width: 460px; margin-inline: auto; }
.stack > * + * { margin-top: 18px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }

.lobby-head {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.lobby-grid { display: grid; gap: 0; }

/* --- forms and buttons -------------------------------------------------- */

.field { border: 0; padding: 0; margin: 0; display: block; }
.field-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
input[type="text"], input[type="password"] {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  font-size: 18px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
}
input:focus { border-color: var(--forest); }
.code-input {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: var(--serif);
  font-size: 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 12px 20px;
  font: inherit;
  font-size: calc(17px * var(--ts));
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  text-align: center;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--forest); color: #FFFDF8; width: 100%; }
.btn-primary:hover:not(:disabled) { background: var(--forest-deep); }
.btn-secondary { background: var(--surface); color: var(--forest); border-color: var(--forest); width: 100%; }
.btn-gold { background: var(--gold); color: #2B2109; border-color: #A98A3F; width: 100%; }
.btn-quiet { border-color: var(--border); color: var(--ink); min-height: 48px; font-size: 16px; }
.btn-tiny { min-height: 44px; padding: 6px 12px; font-size: 14px; border-color: rgba(255,253,248,0.4); background: transparent; color: #FFFDF8; }
.file-btn { position: relative; }
.photo-preview { width: 56px; height: 56px; flex: 0 0 auto; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }

/* An honest note: a loopback preview is not a service relatives can reach. */
.preview-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px dashed #A98A3F;
  border-radius: var(--radius-sm);
  background: #FFFBF0;
  color: #4A3A12;
  font-size: 15px;
  line-height: 1.45;
}

.choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.choice {
  min-width: 60px;
  min-height: 54px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.choice[aria-pressed="true"] {
  background: var(--forest);
  color: #FFFDF8;
  border-color: var(--forest);
}

/* --- avatars ------------------------------------------------------------ */

.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--forest);
  color: #FFFDF8;
  font-family: var(--serif);
  font-size: 20px;
  overflow: hidden;
  flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-art { display: block; width: 100%; height: 100%; }
.avatar-empty {
  background: transparent;
  border: 2px dashed var(--border);
  color: var(--muted);
  font-size: 22px;
}

/* Sixteen faces: a four-wide grid so the whole set is visible without
   scrolling on a phone, and every face is a comfortable tap target. */
.avatar-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 340px;
}
.avatar-choice {
  position: relative;
  border: 3px solid transparent;
  background: none;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
  justify-self: center;
}
.avatar-choice .avatar { width: 56px; height: 56px; }
.avatar-choice[aria-pressed="true"] { border-color: var(--gold); }
.avatar-choice[aria-pressed="true"]::after {
  content: '✓';
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: #3A2D08;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
@media (min-width: 560px) {
  .avatar-choices { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 620px; }
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  min-height: 54px;
}
.profile-chip-text { display: flex; flex-direction: column; align-items: flex-start; }
.profile-chip-name { font-weight: 600; font-size: 17px; }
.profile-chip-action { font-size: 14px; color: var(--muted); }

/* --- lists -------------------------------------------------------------- */

.seat-list { list-style: none; padding: 0; margin: 0; }
.seat-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.seat-list li:last-child { border-bottom: 0; }
.seat-name { font-weight: 600; }
.seat-note { color: var(--muted); font-size: 15px; }
.seat-open .seat-name { color: var(--muted); font-weight: 500; font-style: italic; }
.tag {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--muted);
}
.tag-host { border-color: var(--gold); color: #6B5316; }
.tag-bot { border-color: #7FA6C8; color: #26567C; }

.scoreboard table, .history table { width: 100%; border-collapse: collapse; font-size: 16px; }
.scoreboard th, .history th { text-align: left; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 6px; }
.scoreboard td, .history td { padding: 8px 0; border-top: 1px solid var(--border); }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.empty-state { color: var(--muted); font-size: 16px; margin: 0; }

.code-display {
  font-family: var(--serif);
  letter-spacing: 0.18em;
  font-size: 1em;
}
.code-display.small { font-size: 15px; letter-spacing: 0.14em; }

/* --- table view --------------------------------------------------------- */

.table-view { padding-bottom: 210px; }

.table-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--forest);
  color: #FFFDF8;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.brand { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.table-meta { font-size: 14px; color: #D7E5DD; }
.table-head .btn-tiny { margin-left: auto; }

.table-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.rules-list { margin: 0 0 12px; padding-left: 20px; color: var(--muted); font-size: 16px; }
.rules-list li { margin-bottom: 6px; }

.opponents { display: grid; gap: 8px; margin-bottom: 14px; }
.opponent {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.opponent.is-turn { border-color: var(--gold); border-width: 2px; background: #FFFBF0; }
.opponent-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.seat-list li { flex-wrap: wrap; }
.seat-list .seat-name { min-width: 0; overflow-wrap: anywhere; }
.opponent-name { font-weight: 600; }
.opponent-status { font-size: calc(14px * var(--ts)); color: var(--muted); }
.opponent-status.playing { color: #6B5316; font-weight: 700; }
.opponent-cards { margin-left: auto; font-size: calc(15px * var(--ts)); color: var(--muted); white-space: nowrap; }

.center-table {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
  background: var(--forest);
  border-radius: var(--radius);
  padding: 16px 12px;
  margin-bottom: 14px;
}
.pile {
  flex: 1 1 0;
  max-width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  color: #FFFDF8;
  font: inherit;
  cursor: pointer;
}
.pile-static { cursor: default; }
/* Not a control: no card frame, so nobody taps it waiting for something. */
.pile-static .pile-art { border-style: dotted; border-width: 1px; background-image: none; }
.pile .pile-art { transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease; }
.pile.is-live .pile-art { border-color: var(--gold); animation: pile-breathe 2.4s ease-in-out infinite; }
.pile.is-drop:not([aria-disabled="true"]) .pile-art { border-style: dashed; }
.pile.drop-ready .pile-art {
  border-color: var(--gold);
  border-style: solid;
  background-color: rgba(203,187,138,0.32);
  transform: scale(1.1);
}
@keyframes pile-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(203,187,138,0.55); }
  50% { box-shadow: 0 0 0 7px rgba(203,187,138,0); }
}

/* Dim only the furniture. The exposed discard is the card every player studies
   while waiting for their turn; it stays at full contrast. */
.pile[aria-disabled="true"] { cursor: not-allowed; }
.pile[aria-disabled="true"] .pile-label,
.pile[aria-disabled="true"] .pile-art:not(:has(.card)) { opacity: 0.6; }
.pile:not(.pile-static):hover:not([aria-disabled="true"]) { border-color: var(--gold); }
.pile-label { font-size: calc(15px * var(--ts)); font-weight: 600; }
.pile-note { font-size: calc(14px * var(--ts)); color: #D9EAE2; text-align: center; }
.pile-art {
  width: 62px; height: 86px;
  border-radius: 10px;
  background: #0E3328;
  border: 2px solid #CBBB8A;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(45deg, rgba(203,187,138,0.22) 0 5px, transparent 5px 10px);
}
.pile-art.empty { background: rgba(255,253,248,0.10); border-style: dashed; background-image: none; }
.pile-art .card { width: 100%; height: 100%; }
.pile .pile-art.small-wild { width: 48px; height: 68px; }

/* --- compact phone table ------------------------------------------------ */

/* At 390x844 the header, vertically stacked opponent cards and the centre
   piles filled almost the whole first screen and pushed the hand under the
   fixed action bar. On phones the chrome tightens and opponents sit in one
   side-by-side row (three still fit as concise tiles) so the first hand rows
   are visible without scrolling. Type sizes and tap targets are unchanged. */
@media (max-width: 559px) {
  /* The phone table. Every pixel of chrome here is a pixel of hand nobody can
     see, so each rule below is declared exactly once and earns its space. */
  .app { padding: 14px 12px 32px; }
  .table-head { padding: 8px 12px; margin-bottom: 10px; gap: 8px; flex-wrap: nowrap; }
  .brand { font-size: 16px; white-space: nowrap; }
  .table-meta { white-space: nowrap; }
  .phone-hide { display: none; }
  .table-panel { padding: 12px; margin-bottom: 12px; }

  /* Opponents: one compact tile each, side by side. "Waiting" and the computer
     tag say nothing the waiting room did not already say, so only "Playing now"
     and "Away" earn their line. */
  .opponents {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    margin-bottom: 8px;
  }
  .opponent {
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    padding: 6px 10px;
  }
  .opponent .avatar { width: 28px; height: 28px; font-size: 14px; }
  .opponent-main { flex: 1 1 60px; }
  .opponent-name {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .opponent-status { font-size: calc(14px * var(--ts)); }
  .opponent-status:not(.playing):not(.away) { display: none; }
  .opponent-cards { font-size: calc(14px * var(--ts)); margin-left: 0; }
  .opponent .tag { font-size: 12px; padding: 1px 8px; }
  .opponent .tag-bot { display: none; }

  /* Centre piles: the card faces keep their size - the discard is the card
     everybody studies - and the surrounding padding gives way instead. */
  .center-table { padding: 6px 6px 8px; gap: 6px; margin-bottom: 8px; }
  .pile { padding: 2px 2px 0; gap: 2px; }
  .pile-art { width: 46px; height: 64px; }
  .pile .pile-art.small-wild { width: 40px; height: 56px; }
  .pile-label { font-size: calc(14px * var(--ts)); }
  /* Let the note wrap rather than clip: a centred nowrap line loses characters
     off BOTH ends once the text size is turned up. */
  .pile-note {
    font-size: calc(13px * var(--ts));
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .instruction { margin: 8px 0; padding: 6px 12px; line-height: 1.22; }

  .hand-area { padding: 10px; }
  .hand-head .section-title { font-size: 17px; margin: 0 0 4px; }
  .hand-count { font-size: calc(14px * var(--ts)); }

  /* Action bar: the helpers are smaller, the two real moves keep full targets. */
  .action-bar { padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); gap: 5px; }
  .action-row { gap: 6px; }
  .action-row:first-child .btn { min-height: 44px; padding: 4px 10px; font-size: calc(15px * var(--ts)); }
  .action-row:last-child .btn { min-height: 48px; padding: 6px 10px; font-size: calc(16px * var(--ts)); }
  .table-view { padding-bottom: 164px; }
}

/* --- playing cards ------------------------------------------------------ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid #C9D2C8;
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 4px 2px;
  font-family: var(--serif);
  color: var(--black-suit);
  aspect-ratio: 5 / 7;
  min-width: 0;
  overflow: hidden;
}
.card.red { color: var(--red-suit); }
.card-rank { font-size: calc(clamp(19px, 5.6vw, 24px) * var(--ts)); font-weight: 700; line-height: 1; }
.card-suit { font-size: calc(clamp(21px, 6.2vw, 27px) * var(--ts)); line-height: 1; }
.card-foot { font-size: calc(13px * var(--ts)); line-height: 1; opacity: 1; color: inherit; }
.card.joker .card-rank { font-size: calc(clamp(13px, 3.6vw, 16px) * var(--ts)); }
.card.is-wild::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold);
  border-radius: 8px;
  pointer-events: none;
}

/* A card in the air: pinned over the page, never in the way of a pointer.
   These rules must stay after `.card` - that rule sets position: relative and
   would otherwise win on source order and drop the card back into the flow. */
.card-ghost {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  transform-origin: top left;
  box-shadow: 0 14px 26px rgba(20, 40, 32, 0.3);
}
.card-ghost.is-dragging { box-shadow: 0 20px 34px rgba(20, 40, 32, 0.36); }

.hand-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.hand-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hand-head .section-title { margin: 0 0 10px; }
.hand-count { font-family: var(--sans); font-size: 15px; color: var(--muted); font-weight: 500; }
/* Five columns on a phone: seven would leave ~39-43px cards, below a
   comfortable tap target. Five keeps every card at least 44px, and 48px or
   more on the common 360-430px widths. */
/* One dense grid - a phone has no room to give every suggested group its own
   row. Grouping is carried by the bar under each card instead, so the cards
   stay as large as they were. */
.hand {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.spare-label {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: calc(14px * var(--ts));
  font-weight: 600;
  color: #8A6A2F;
}
html[data-text="larger"] .hand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 440px) {
  .hand { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  html[data-text="large"] .hand { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html[data-text="larger"] .hand { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 560px) {
  .hand { grid-template-columns: repeat(7, minmax(0, 72px)); gap: 8px; justify-content: start; }
}

.hand .card {
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 120ms ease, box-shadow 120ms ease;
}
/* A card you may throw is a card you may pick up: it must not scroll the page
   out from under the drag. Cards you cannot throw keep normal scrolling. */
/* pan-y, not none: a card you can throw must still let you scroll your own
   hand past it. The drag needs 14px of mostly-sideways intent to start. */
.hand .card.can-drag { touch-action: pan-y; cursor: grab; }
.hand .card.can-drag:active { cursor: grabbing; }
.hand .card.is-flying { visibility: hidden; }
.hand .card.just-arrived {
  box-shadow: 0 0 0 3px var(--gold), var(--shadow-lift);
  animation: card-arrived 2.4s ease-out;
}
@keyframes card-arrived {
  0% { box-shadow: 0 0 0 6px rgba(203,187,138,0.9), var(--shadow-lift); }
  70% { box-shadow: 0 0 0 3px var(--gold), var(--shadow-lift); }
  100% { box-shadow: var(--shadow); }
}
.hand .card[aria-pressed="true"] {
  transform: translateY(-8px) rotate(0deg);
  border: 2px solid var(--forest);
  box-shadow: var(--shadow-lift);
}
.hand .card[aria-pressed="true"] .card-foot::after { content: ' ✓'; }
/* The suggested arrangement: a solid bar means "these belong together", and
   the two tints alternate so one group does not run into the next. Spare cards
   are dashed - the ones to look at when you need something to throw. */
.hand .card.band-a { border-bottom: 5px solid var(--forest); }
.hand .card.band-b { border-bottom: 5px solid #9A7B22; }
.hand .card.band-spare { border-bottom: 5px dashed #B9B2A4; }
.hand .card.grouped { border-bottom: 4px solid var(--forest); }
.hand .card.loose { border-bottom: 4px dotted var(--muted); }

.instruction.is-aside { background: #FBF2DA; border-left-color: var(--gold); }
.instruction {
  font-size: calc(18px * var(--ts));
  font-weight: 600;
  margin: 12px 0;
  padding: 12px 14px;
  background: #EDF2EC;
  border-left: 5px solid var(--forest);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.feedback {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 16px;
}
.feedback ul { margin: 8px 0 0; padding-left: 20px; }
.feedback .good::before { content: '✓ '; }
.feedback .bad::before { content: '• '; }
.feedback .bad { color: var(--danger); }

.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  z-index: 20;
}
.action-row { display: flex; gap: 8px; }
.action-row .btn { flex: 1 1 0; }
@media (min-width: 760px) {
  .action-bar { max-width: 760px; margin: 0 auto; border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--border); }
}

.result-sheet {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 32, 0.55);
  overflow-y: auto;
  padding: 20px 16px 40px;
  z-index: 30;
}
.result-sheet .card-panel { max-width: 620px; margin: 20px auto; }
.result-groups { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; }
.result-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: var(--ivory);
}
.result-group-label { font-size: calc(14px * var(--ts)); color: var(--muted); display: block; margin-bottom: 6px; }
/* A large unmatched hand must wrap instead of running off the screen. */
.mini-cards { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-cards .card { width: 40px; height: 56px; aspect-ratio: auto; }
.result-player { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.result-player h3 { font-family: var(--serif); font-size: 19px; margin: 0 0 4px; }
.points-note { font-size: 14px; color: var(--muted); }

.banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FBF2DA;
  border-bottom: 1px solid var(--gold);
  color: #5B4711;
  padding: 10px 16px;
  font-size: 16px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .hand .card { transform: none; }
  .hand .card[aria-pressed="true"] { transform: none; }
  .pile.drop-ready .pile-art { transform: none; }
}