/* Hearts table (ui/hearts.js). Builds on styles.css; every class here starts with ht-. */
.ht-seats .ht-line { display: block; line-height: 1.35; }
.ht-status { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .6rem; color: var(--muted); }
.ht-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }
.ht-badge.on { background: var(--red); }
.ht-empty { margin: .5rem 0; min-height: 2rem; }
.ht-trick { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: .25rem 0 .5rem; min-height: 6.4rem; }
.ht-play { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; max-width: 4.6rem; }
.ht-play figcaption { max-width: 4.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: var(--muted); }
.ht-winning .card { outline: 3px solid var(--gold); outline-offset: 1px; }
.ht-winning figcaption { color: #fff; font-weight: 700; }
.ht-high { display: block; font-size: .75rem; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ht-last { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .5rem; }
.ht-small { gap: .4rem; margin: .35rem 0 0; }
.ht-small .ht-play { max-width: 3.4rem; }
.ht-small figcaption { font-size: .75rem; max-width: 3.4rem; }
.ht-got { margin: .5rem 0; padding: .5rem .6rem; border-radius: 12px; background: rgba(227, 179, 65, .14); }
.ht-mine { margin-bottom: 1rem; }
.ht-mine h3 { margin-top: .25rem; }
.ht-hand { gap: .3rem; }
.ht-moon { font-weight: 700; color: var(--gold); }
.ht-scores { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .2rem; }
.ht-scores li { display: flex; justify-content: space-between; gap: .75rem; padding: .2rem 0; border-bottom: 1px solid var(--line); }
@media (max-width: 380px) {
  .ht-hand .card { width: 3.1rem; height: 4.4rem; }
}