/* Gin Rummy screen (ui/ginrummy.js). Every class starts with gr-. */
.gr-board { padding: .75rem .9rem; }
.gr-row { padding: .35rem .5rem; border-radius: 10px; border: 2px solid transparent; }
.gr-row + .gr-row { margin-top: .35rem; }
.gr-row.gr-turn { border-color: var(--gold); }
.gr-row.gr-you { background: rgba(227, 179, 65, .14); }
.gr-name { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .45rem; margin-bottom: .3rem; }
.gr-who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 10rem; }
.gr-tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .05rem .45rem;
  border-radius: 999px; background: var(--gold); color: #1b1b1b; }
.gr-pts { margin-left: auto; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.gr-bar { position: relative; height: .8rem; border-radius: 999px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.gr-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--gold), #f3d27a); border-radius: 999px; transition: width .4s ease; }
.gr-you .gr-fill { background: linear-gradient(90deg, #4fbf7f, var(--good)); }
.gr-note { margin: .4rem 0 0; }

.gr-table { padding: .75rem .9rem; }
.gr-piles { display: flex; justify-content: center; gap: 1.25rem; }
.gr-pile { display: grid; justify-items: center; gap: .2rem; min-width: 6rem; padding: .5rem .6rem; border-radius: 14px;
  background: rgba(0, 0, 0, .2); border: 2px solid var(--line); color: #fff; font: inherit; }
button.gr-pile { cursor: pointer; }
.gr-pile.gr-can { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 179, 65, .25); }
.gr-pile:disabled { opacity: .5; cursor: not-allowed; }
.gr-pile-label { font-weight: 700; font-size: .95rem; }
.gr-pile-count { font-size: .8rem; color: var(--muted); }
.gr-empty { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 4.8rem; border-radius: 8px;
  border: 2px dashed var(--line); color: var(--muted); font-size: .8rem; }

.gr-mine { padding: .75rem .5rem; }
.gr-h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: 1.05rem; margin: 0 .4rem .4rem; }
.gr-dw { font-size: .95rem; font-weight: 700; color: var(--bad); }
.gr-dw.gr-low { color: var(--good); }
.gr-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.gr-meld, .gr-dead { display: flex; gap: .2rem; padding: .55rem .3rem .3rem; border-radius: 12px; }
.gr-meld { background: rgba(126, 226, 164, .16); border: 2px solid rgba(126, 226, 164, .55); }
.gr-dead { background: rgba(192, 38, 45, .16); border: 2px dashed var(--bad); flex-wrap: wrap; justify-content: center; }
.gr-legend { text-align: center; margin: .45rem 0 0; }
.gr-hint { text-align: center; margin: .4rem 0 0; }
.gr-can-knock { color: var(--good); font-weight: 700; }
.gr-mine .card.gr-new { box-shadow: 0 0 0 3px var(--good), 0 2px 6px rgba(0, 0, 0, .35); }
.gr-mine .card.gr-knockable::after { content: 'K'; position: absolute; top: .2rem; right: .25rem; font-size: .62rem; font-weight: 800;
  color: #1b1b1b; background: var(--good); border-radius: 4px; padding: 0 .2rem; line-height: 1.3; }
@media (max-width: 420px) {
  .gr-mine .card { width: 2.75rem; height: 4rem; }
  .gr-mine .card .corner { font-size: .85rem; }
  .gr-mine .card .pip { font-size: 1.3rem; }
  .gr-hand { gap: .35rem; }
}

.gr-result { padding: .75rem .9rem; }
.gr-res-text { font-weight: 700; color: var(--gold); }
.gr-res-hand { padding: .55rem 0; border-top: 1px solid var(--line); }
.gr-res-title { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0 0 .4rem; font-size: 1rem; }
.gr-yours .gr-res-title { color: var(--gold); }
.gr-res-dw { margin-left: auto; font-size: .9rem; color: var(--muted); }
.gr-small { justify-content: flex-start; gap: .35rem; }
.gr-small .gr-meld, .gr-small .gr-dead { padding: .3rem .25rem; gap: .15rem; }
.gr-laid { margin: .35rem 0 0; color: var(--good); }
.gr-totals { width: 100%; border-collapse: collapse; margin: .6rem 0 .2rem; font-variant-numeric: tabular-nums; }
.gr-totals th, .gr-totals td { padding: .3rem .4rem; text-align: right; border-bottom: 1px solid var(--line); }
.gr-totals th:first-child { text-align: left; font-weight: 600; color: var(--muted); }
.gr-totals thead th { color: #fff; }
.gr-total-row th, .gr-total-row td { font-weight: 800; color: #fff; border-bottom: 0; }