/* Shanghai. Cards are the shared `card-` rules in cards.css; `sh-` rules are
   this game's. Up to eight players, and the phone is the hard case: each
   player is one short line, the piles and buying share one row, your hand
   comes before the melds on the table (which grow all deal), and the
   Discard and Go down buttons stick above the Rules/Chat bar. */
@import url("cards.css");

.sh {
  --sh-gold: #f5d36b;
  width: min(48rem, 100%);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.sh .status { margin: 0; }

.sh-contract { margin: 0; font-size: 0.95rem; line-height: 1.3; }

/* How a deal ended: a short headline and the detail. */
.sh-news {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; padding: 0.5rem 0.8rem;
  color: #fff; background: var(--felt-dark); border-radius: var(--radius);
}
.sh-news-word { font-size: 1.5rem; line-height: 1.15; font-weight: 900; color: var(--sh-gold); }
.sh-news-detail { font-size: 0.9rem; line-height: 1.3; }

/* ---- The felt: the stock, the discard, buying, and the last moves ---- */
.sh-felt {
  display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.7rem;
  background: var(--felt); color: var(--felt-ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.sh-piles { display: flex; align-items: flex-start; gap: 0.7rem; }
.sh-pile {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem; flex: none; padding: 0; margin: 0;
  background: none; border: 0; font: inherit; color: inherit; touch-action: manipulation;
}
.sh-pile .card { --card-w: 3.2rem; }
button.sh-pile { cursor: pointer; }
button.sh-pile .card { outline: 3px solid var(--accent); outline-offset: 1px; }
.sh-stock-card { position: relative; display: block; }
.sh-stock-card .card-count { font-size: 0.95rem; min-width: 1.8rem; padding: 0 0.35rem; }
.sh-pile-action { font-weight: 800; font-size: 0.9rem; color: var(--sh-gold); }
.sh-beside, .sh-buying { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; }
.sh-beside { flex: 1; }
.sh-offer { margin: 0; font-size: 0.9rem; line-height: 1.3; }
.sh-buy { min-height: 2.6rem; }
.sh-cost { margin: 0; font-size: 0.8rem; line-height: 1.3; opacity: 0.92; }
.sh-last { margin: 0; font-size: 0.85rem; line-height: 1.3; opacity: 0.92; }

/* ---- One short line a player ---- */
/* The lines share their columns (a subgrid), each as wide as its widest
   entry, so the numbers line up and none wraps. */
.sh-players {
  list-style: none; margin: 0; padding: 0.2rem 0;
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, max-content);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.sh-player {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
  column-gap: 0.7rem; padding: 0.12rem 0.6rem; font-size: 0.9rem; line-height: 1.35; white-space: nowrap;
  border-left: 4px solid transparent;
}
.sh-turn { border-left-color: var(--accent); background: var(--paper-2); font-weight: 700; }
.sh-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-cards, .sh-buys { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sh-score { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-tags { display: flex; gap: 0.25rem; }
.sh-tag { font-size: 0.72rem; font-weight: 800; padding: 0 0.4rem; border-radius: 999px; white-space: nowrap; }
.sh-down { background: var(--good); color: #fff; }
.sh-asks { background: var(--sh-gold); color: var(--ink); }

/* ---- Your hand ---- */
.sh-me {
  padding: 0.6rem 0.6rem 0.7rem; background: var(--felt); color: var(--felt-ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.sh-me-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.sh-me-title { font-weight: 700; }
.sh-sort { display: inline-flex; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 999px; overflow: hidden; }
.sh-sort-button {
  font: inherit; font-size: 0.8rem; padding: 0.2rem 0.65rem; min-height: 2rem; border: 0; cursor: pointer;
  background: transparent; color: inherit;
}
.sh-sort-button[aria-pressed="true"] { background: var(--felt-ink); color: var(--felt-dark); font-weight: 700; }
.sh-arrange { margin-top: 0.7rem; }

.sh-hand {
  --card-w: 3.4rem; --step: calc(var(--card-w) * 0.52);
  display: flex; flex-wrap: wrap; gap: 0.6rem 0.55rem; padding-top: 1rem;
}
.sh-hand .card { --card-w: inherit; }
.sh-group { display: flex; max-width: 100%; }
.sh-group .card-strip { flex: 0 1 var(--step); min-width: 0; }
.sh-group .card-strip:last-child { flex: none; }
.sh-card { transition: transform 0.12s ease; }
.sh-picked { transform: translateY(-0.8rem); }
.sh-picked .card { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
/* The picked card is a box of two buttons: the card, and Discard over its
   lower edge. It sits above its neighbours, which cover the strip's right. */
.sh-pickbox { z-index: 3; }
.sh-pickface {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.sh-pickface:hover .card, .sh-pickface:focus-visible .card { border-color: var(--accent); }
.sh-pickface:focus-visible { outline: none; }
.sh-discard {
  position: absolute; left: 0; bottom: -0.7rem; z-index: 4; min-width: max(100%, 3.6rem); min-height: 2.75rem;
  padding: 0 0.3rem; font: inherit; font-size: 0.78rem; font-weight: 800; white-space: nowrap; cursor: pointer;
  color: var(--accent-ink); background: var(--accent); border: 2px solid var(--felt-ink); border-radius: 0.6rem;
  box-shadow: var(--shadow); touch-action: manipulation;
}
.sh-new .card { box-shadow: 0 0 0 2px var(--sh-gold), var(--shadow); }

/* The joker: its own face, so it's never read as a jack. */
.sh-joker { color: #7a3fa0; background: linear-gradient(160deg, #fff 55%, #f3e9fb); }
.sh-joker .card-corner .gn-icon { width: 0.9em; height: 0.9em; }
.sh-joker-word {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 0.5rem;
  font-size: calc(var(--card-w) * 0.2); font-weight: 900; letter-spacing: 0.02em; writing-mode: vertical-rl;
}

/* ---- Making up the melds: a slot each, the one being filled ringed ---- */
.sh-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.sh-slot {
  flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.35rem 0.5rem 0.5rem;
  border: 2px dashed rgb(255 255 255 / 0.45); border-radius: 0.7rem;
}
.sh-filling { border: 2px solid var(--accent); background: rgb(0 0 0 / 0.15); }
.sh-good { border-style: solid; border-color: var(--sh-gold); }
.sh-filling.sh-good { border-color: var(--accent); }
.sh-slot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; }
.sh-slot-name {
  font: inherit; font-weight: 800; padding: 0; border: 0; background: none; color: inherit;
}
button.sh-slot-name { text-decoration: underline; cursor: pointer; min-height: 2rem; }
.sh-slot-note { font-size: 0.8rem; line-height: 1.25; opacity: 0.95; }
.sh-good .sh-slot-note { color: var(--sh-gold); font-weight: 700; }
.sh-slot-cards { --card-w: 2.6rem; --step: calc(var(--card-w) * 0.55); display: flex; min-height: calc(2.6rem * 7 / 5); }
.sh-slot-cards .card { --card-w: inherit; }
.sh-joker-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.85rem; }
.sh-joker-choice [aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sh-why { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--sh-gold); }

/* ---- Go down, and what to do next, stick above the Rules/Chat bar (as Gin Rummy's) ---- */
.sh-dock {
  position: sticky; bottom: calc(var(--gn-bar, 3.25rem) + 0.35rem); z-index: 5; display: flex; gap: 0.6rem; max-width: 30rem;
  padding: 0.3rem 0; background: var(--paper);
}
body.gn-chat-open .sh-dock { bottom: calc(var(--gn-sheet) + 0.3rem); }
body.gn-rulebook-open .sh-dock { bottom: calc(var(--gn-rulebook-sheet) + 0.3rem); }
@media (min-width: 60rem) {
  .sh-dock { bottom: 0.5rem; }
  body.gn-chat-open .sh-dock, body.gn-rulebook-open .sh-dock { bottom: 0.5rem; }
}
/* The line on my turn stays under the hand: the Discard is on the card. */
.sh-hint { position: static; padding: 0; }
.sh-dock .gn-button, .sh-unlit, .sh-aim { flex: 1; min-height: 3rem; font-size: 1.05rem; font-weight: 800; }
.sh-unlit, .sh-aim {
  margin: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-soft); border: 2px dashed var(--line); border-radius: var(--radius);
}
.sh-aim { font-weight: 600; }

/* ---- The melds on the table, under whoever laid them ---- */
.sh-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0.4rem; }
.sh-owner {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem;
  background: var(--felt); color: var(--felt-ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.sh-owner-name { flex: none; width: 4.2rem; margin: 0; font-size: 0.85rem; font-weight: 700; overflow-wrap: anywhere; }
.sh-owner-melds { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; }
.sh-meld-box { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.sh-meld {
  --card-w: 2.3rem; --step: calc(var(--card-w) * 0.45);
  display: block; padding: 0.15rem; margin: 0; border: 2px solid transparent; border-radius: 0.5rem;
  background: none; font: inherit; color: inherit;
}
.sh-meld .card { --card-w: inherit; }
.sh-meld .card-corner { top: 0.1rem; left: 0.15rem; }
.sh-fan { display: flex; }
/* A meld your picked card goes on. */
.sh-takes { border-color: var(--accent); background: rgb(0 0 0 / 0.18); }
button.sh-takes { cursor: pointer; }
.sh-meld-action { font-size: 0.8rem; min-height: 2.2rem; padding: 0.15rem 0.6rem; }
.sh-swap { background: var(--sh-gold); border-color: var(--sh-gold); color: var(--ink); }

/* ---- A deal's end: everyone's hand and what it cost ---- */
.sh-reveal { display: flex; flex-direction: column; gap: 0.3rem; }
.sh-reveal-head { margin: 0; font-weight: 700; }
.sh-last-deal { padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.sh-last-deal .sh-reveal-head { font-weight: 600; font-size: 0.9rem; }
.sh-hands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sh-hand-row {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 0.5rem;
  padding: 0.2rem 0.4rem; border-radius: 0.4rem;
}
.sh-went-out { background: var(--paper-2); font-weight: 700; }
.sh-left { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.sh-left .card { --card-w: 1.9rem; }
.sh-left .card-corner { top: 0.05rem; left: 0.1rem; }
.sh-left .card-pip, .sh-left .sh-joker-word, .sh-meld .sh-joker-word { display: none; }
.sh-points { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- This deal so far: opens at its newest line (see `MoveLog`) ---- */
.sh-log {
  display: flex; flex-direction: column-reverse; max-height: 8rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.sh-log ol { margin: 0; padding: 0.35rem 0.7rem; list-style: none; font-size: 0.85rem; line-height: 1.4; }

/* ---- Scores ---- */
.sh-scores { border-collapse: collapse; width: auto; min-width: min(100%, 22rem); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sh-scores caption { text-align: left; padding: 0 0.4rem 0.2rem; color: var(--ink-soft); }
.sh-scores th, .sh-scores td { padding: 0.15rem 0.35rem; text-align: right; }
.sh-scores tbody th { text-align: left; font-weight: 600; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-scores thead th { border-bottom: 2px solid var(--line); color: var(--ink-soft); }
.sh-values { margin: 0.3rem 0.4rem 0; font-size: 0.8rem; color: var(--ink-soft); }
.sh-total { font-weight: 800; }
.sh-leader { background: var(--paper-2); }

@media (max-width: 30rem) {
  .sh-player { column-gap: 0.45rem; padding: 0.1rem 0.45rem; font-size: 0.85rem; }
  .sh-hand { --card-w: 3.1rem; }
  .sh-pile .card { --card-w: 2.9rem; }
  .sh-meld { --card-w: 2.1rem; }
}