/* Gin Rummy. Cards are the shared `card-` rules in cards.css; `gr-` rules are
   this game's. Phone first: your hand is shown as the melds the game found
   (each its own little group) and what is left over, wrapping on a 390 px
   screen; the stock and discards sit by the other player; the Discard and
   Knock buttons stick above the Rules/Chat bar. */
@import url("cards.css");

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

/* The hand before this one, kept in view through the next; and where the
   final score came from. */
.gr-recap, .gr-final { margin: 0; font-size: 0.9rem; line-height: 1.35; }
.gr-recap { padding: 0.3rem 0.6rem; background: var(--paper-2); border-left: 4px solid var(--line); border-radius: 0.3rem; }
.gr-final { font-weight: 600; margin-top: -0.3rem; }

/* How a hand ended, first on the page: one big word and the sums. */
.gr-news {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.8rem;
  color: #fff; background: var(--felt-dark); border-radius: var(--radius);
}
.gr-news.gin { background: #2b6e3f; box-shadow: inset 0 0 0 3px var(--gr-gold); }
.gr-news.undercut { background: #b8321f; }
.gr-news.void { background: #6b6157; }
.gr-news-word {
  flex: none; font-size: 1.9rem; line-height: 1.1; font-weight: 900; letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.25);
}
.gr-news.gin .gr-news-word { color: var(--gr-gold); }
.gr-news-detail { min-width: 0; font-size: 0.9rem; line-height: 1.3; }

/* ---- The table: the other player, the stock and the discards ---- */
.gr-table {
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; padding: 0.7rem 0.8rem;
  background: var(--felt); color: var(--felt-ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.gr-seats { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.gr-seat {
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.3rem 0.5rem;
  border: 2px solid transparent; border-radius: var(--radius);
}
.gr-turn { border-color: var(--accent); background: rgb(0 0 0 / 0.15); }
.gr-name { font-weight: 700; overflow-wrap: anywhere; }
.gr-meta { font-size: 0.85rem; opacity: 0.9; }
.gr-total { font-size: 0.9rem; font-weight: 700; }

.gr-piles { display: flex; gap: 0.9rem; align-items: flex-start; }
.gr-pile {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0; margin: 0;
  background: none; border: 0; font: inherit; color: inherit; touch-action: manipulation;
}
button.gr-pile { cursor: pointer; }
/* The pile you may draw from rings in the accent colour. */
button.gr-pile .card, button.gr-pile .gr-stock-card .card { outline: 3px solid var(--accent); outline-offset: 1px; }
.gr-stock-card { position: relative; display: block; }
.gr-pile-action { font-weight: 800; font-size: 0.95rem; color: var(--gr-gold); }
.gr-discard-area { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.gr-pass { min-height: 2.5rem; padding: 0.3rem 1.2rem; }

.gr-last { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

/* ---- Hands: melds, then what is left over ---- */
.gr-me, .gr-reveal {
  padding: 0.7rem 0.6rem 0.8rem; background: var(--felt); color: var(--felt-ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.gr-me-head { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; margin-bottom: 0.3rem; }
.gr-me-title { font-weight: 700; }
.gr-count { font-weight: 700; color: var(--gr-gold); }
.gr-tag {
  font-size: 0.8rem; font-weight: 800; padding: 0 0.5rem; color: var(--ink); background: var(--gr-gold);
  border-radius: 999px;
}
.gr-knocker { box-shadow: 0 0 0 3px var(--gr-gold), var(--shadow); }

.gr-hand {
  --card-w: 3.4rem; --step: calc(var(--card-w) * 0.5);
  display: flex; flex-wrap: wrap; gap: 0.7rem 0.6rem; padding-top: 0.6rem;
}
.gr-hand .card { --card-w: inherit; }
.gr-group { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.25rem 0.4rem 0.4rem; border-radius: 0.7rem; }
.gr-meld { background: rgb(255 255 255 / 0.14); }
.gr-dead { border: 2px dashed rgb(255 255 255 / 0.4); }
.gr-caption { font-size: 0.72rem; line-height: 1.2; opacity: 0.9; }
.gr-fan { display: flex; padding-top: 0.15rem; }
/* Room above a hand's cards for the one lifted to be discarded. */
.gr-me .gr-fan { padding-top: 0.9rem; }

/* With room, a hand is laid out nearly flat. The strips overlap only as much
   as the width asks: the container is the hand's row, and `spread` in the
   renderer says how many groups share it and how many cards overlap. The
   least is the phone's half overlap, so a tight row never gets tighter. */
@media (min-width: 40rem) {
  .gr-hand { container-type: inline-size; }
  .gr-fan {
    --step: clamp(
      calc(var(--card-w) * 0.5),
      calc((100cqw - 0.2rem - var(--groups) * (var(--card-w) + 1.1rem) - (var(--groups) - 1) * 0.6rem) / var(--overlapping)),
      calc(var(--card-w) * 1.08));
  }
}

.gr-card { transition: transform 0.12s ease; }
.gr-selected { transform: translateY(-0.8rem); }
.gr-selected .card { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.gr-new .card { box-shadow: 0 0 0 2px var(--gr-gold), var(--shadow); }
.gr-still .card { filter: brightness(0.8); }
/* On a lay-off: the card went onto the knocker's meld. */
.gr-laid-card .card { box-shadow: 0 0 0 3px var(--gr-gold), var(--shadow); }
.gr-laid { margin: 0.4rem 0 0; font-size: 0.85rem; }

.gr-reveal .gr-hand { --card-w: 2.7rem; }
.gr-reveal { padding-bottom: 0.6rem; }

/* ---- Discard and Knock stick above the Rules/Chat bar, like Battleship's Fire ---- */
.gr-dock {
  position: sticky; bottom: calc(var(--gn-bar, 3.25rem) + 0.35rem); z-index: 5; display: flex; gap: 0.6rem; max-width: 28rem;
  padding: 0.3rem 0; background: var(--paper);
}
body.gn-chat-open .gr-dock { bottom: calc(var(--gn-sheet) + 0.3rem); }
body.gn-rulebook-open .gr-dock { bottom: calc(var(--gn-rulebook-sheet) + 0.3rem); }
@media (min-width: 60rem) {
  .gr-dock { bottom: 0.5rem; }
  body.gn-chat-open .gr-dock, body.gn-rulebook-open .gr-dock { bottom: 0.5rem; }
}
.gr-dock .gn-button { flex: 1; min-height: 3rem; font-size: 1.1rem; font-weight: 800; }
.gr-knock-button { background: var(--good); border-color: var(--good); color: #fff; }
.gr-knock-button:hover { background: var(--good); filter: brightness(0.93); }
.gr-aim {
  flex: 1; margin: 0; min-height: 3rem; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--ink-soft); border: 2px dashed var(--line); border-radius: var(--radius);
}

/* ---- Every discard so far ---- */
.gr-log summary { cursor: pointer; padding: 0.4rem 0; color: var(--ink-soft); }
.gr-log-cards { display: flex; flex-wrap: wrap; gap: 0.25rem; padding-bottom: 0.4rem; }
.gr-log-cards .card { --card-w: 2.3rem; }
.gr-log-cards .card-corner { top: 0.1rem; left: 0.15rem; }
.gr-log-cards .card-pip { display: none; }

/* ---- Scores ---- */
.gr-scores { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.gr-scores th, .gr-scores td { padding: 0.2rem 0.5rem; text-align: right; }
.gr-scores caption { text-align: left; padding: 0 0.5rem 0.2rem; font-size: 0.85rem; color: var(--ink-soft); }
.gr-scores .gr-how { font-size: 0.85rem; }
.gr-scores thead th { border-bottom: 2px solid var(--line); }
.gr-scores th:first-child, .gr-scores .gr-how { text-align: left; color: var(--ink-soft); font-weight: 600; }
.gr-scores tfoot th, .gr-scores tfoot td { border-top: 2px solid var(--line); font-weight: 700; color: var(--ink); }

.gr-config { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; margin-bottom: 0.6rem; }
.gr-config label { display: block; padding: 0.15rem 0; }

/* A hand's banner pops in once; see `PlayOnce`, which marks `.gr`. */
@media (prefers-reduced-motion: no-preference) {
  .gr.gn-fresh .gr-news { animation: gr-pop 0.6s cubic-bezier(.3, 1.5, .5, 1) calc(0s - var(--played, 0s)) both; }
}
@keyframes gr-pop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 30rem) {
  .gr-hand { --card-w: 3.2rem; }
  .gr-reveal .gr-hand { --card-w: 2.5rem; }
  .gr-table .card { --card-w: 3.2rem; }
}