/* Hearts. Cards are the shared `card-` rules in cards.css; `hs-` rules are
   this game's. A trick's cards sit by the seat that played them; the hand is
   grouped by suit and fanned so thirteen cards stay tappable on a 390 px phone. */
@import url("cards.css");

.hs { display: flex; flex-direction: column; gap: 0.9rem; }

/* ---- The table: seats around the middle ---- */
.hs-table {
  display: grid; gap: 0.4rem; padding: 0.6rem; justify-items: center; align-items: start;
  background: var(--felt); color: var(--felt-ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hs-n4 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: ". top ." "left mid right" ". me .";
}
.hs-n3 {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left right" "mid mid" "me me";
}
.hs-slot0 { grid-area: me; } .hs-slot1 { grid-area: left; } .hs-slot2 { grid-area: top; } .hs-slot3 { grid-area: right; }
.hs-n3 .hs-slot2 { grid-area: right; }
.hs-mid { grid-area: mid; display: flex; flex-direction: column; align-items: center; align-self: center;
  gap: 0.1rem; font-size: 0.85rem; text-align: center; opacity: 0.9; }
.hs-n3 .hs-mid { flex-direction: row; gap: 0.8rem; }

.hs-seat {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; width: 100%;
  padding: 0.35rem 0.2rem; border: 2px solid transparent; border-radius: var(--radius); text-align: center;
}
.hs-name { font-weight: 700; overflow-wrap: anywhere; }
.hs-meta { font-size: 0.8rem; opacity: 0.85; }
.hs-turn { border-color: var(--accent); background: rgb(0 0 0 / 0.15); }
/* A finished trick waiting to be led over: its cards stay for a look, the
   losers dimmed and the winning card ringed in gold, and the status line says
   who took it. The seat of the winner is the next to lead, so its border is
   the turn's, not a second sign. */
.hs-done .card { opacity: 0.6; filter: saturate(0.6); }
.hs-done.hs-took .card { opacity: 1; filter: none; box-shadow: 0 0 0 3px var(--sol-hint, #f5d36b), var(--shadow); }

/* The queen of spades landing: her card flashes and pulses, once, for the
   page she arrived on (`gn-news`, `PlayOnce`), with the sting (`Hearts.sting`).
   Only for people who haven't asked for less motion; the status line and the
   seat's "Q♠" say it for everyone else. */
.hs-queen { display: contents; }
@media (prefers-reduced-motion: no-preference) {
  .hs-queen.gn-news .card { animation: hs-sting 1.4s ease-out calc(0s - var(--played, 0s)); }
}
@keyframes hs-sting {
  0%, 30%, 60% { transform: scale(1.25); opacity: 1; filter: none; box-shadow: 0 0 0 4px #b3261e, 0 0 1.4rem 0.5rem #e0412f; }
  15%, 45%, 75% { transform: scale(1.1); opacity: 1; filter: none; box-shadow: 0 0 0 4px #fff, 0 0 1.4rem 0.5rem #7a1f8c; }
  100% { transform: none; }
}
.hs-empty { opacity: 0.6; border-style: dashed; border-color: rgb(255 255 255 / 0.4); }
/* The whole seat is already dimmed: its label (`gn-vacant`) only slants. */
.hs-empty .gn-vacant { opacity: 1; }
.hs-total { font-size: 0.85rem; font-weight: 700; }
.hs-won { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem 0.3rem; font-size: 0.8rem; font-weight: 600; }
.hs-won > :first-child { flex-basis: 100%; }
.hs-won-hearts, .hs-won-queen { font-weight: 700; }
.hs-won-hearts { color: #ffb4a8; }
.hs-won-queen { color: #fff; background: rgb(0 0 0 / 0.35); border-radius: 0.4rem; padding: 0 0.3rem; }

.hs-table .card, .hs-slot-empty { --card-w: 3rem; }
.hs-table .card-corner { top: 0.15rem; left: 0.2rem; }
.hs-slot-empty {
  display: block; width: var(--card-w); aspect-ratio: 5 / 7; box-sizing: border-box;
  border: 2px dashed rgb(255 255 255 / 0.25); border-radius: calc(var(--radius) * 0.7);
}

/* ---- My hand ---- */
.hs-me {
  padding: 0.7rem 0.6rem 0.8rem; background: var(--felt); color: var(--felt-ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.hs-me-head { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; margin-bottom: 0.3rem; }
.hs-me-title { font-weight: 700; }
.hs-received { font-size: 0.85rem; opacity: 0.9; }

/* One suit per group; groups wrap, so a hand is two or three short fans on a
   phone and one row on a desktop. Each card shows half its width (a corner
   with the rank and suit) and the last card of a group shows all of it. */
.hs-hand { display: flex; flex-wrap: wrap; gap: 0.9rem 0.8rem; padding-top: 0.9rem; }
.hs-group { display: flex; max-width: 100%; }
/* A suit too long for the row (a dozen spades) closes up rather than spill:
   the strips shrink, the last card keeps its width. */
.hs-group .card-strip { flex: 0 1 var(--step); min-width: 0; }
.hs-group .card-strip:last-child { flex: none; }
.hs-hand { --card-w: 3.6rem; }
.hs-hand .card { --card-w: inherit; }
.hs-hand { --step: calc(var(--card-w) * 0.5); }
.hs-card { transition: transform 0.12s ease; }
.hs-still .card { filter: brightness(0.8); }
.hs-new .card { box-shadow: 0 0 0 2px #f5d36b, var(--shadow); }
.hs-chosen { transform: translateY(-0.9rem); }
.hs-chosen .card { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
/* Before anything is picked up to play, nothing is dimmed: only on your turn. */
.hs-me:not(:has(button.hs-card)) .hs-still .card { filter: none; }

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

/* The three cards I've handed over, set apart from the hand and not raised. */
.hs-passed { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed rgb(255 255 255 / 0.35); }
.hs-passed-label { font-size: 0.85rem; opacity: 0.9; }
.hs-passed-cards { display: flex; gap: 0.3rem; }
.hs-passed .card { --card-w: 2.6rem; opacity: 0.85; }
.hs-passed .card-corner { top: 0.1rem; left: 0.15rem; }

/* ---- Scores ---- */
.hs-to100 { margin: 0 0 0.3rem; font-size: 0.92rem; font-weight: 600; }
.hs-scores { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.hs-scores th, .hs-scores td { padding: 0.2rem 0.5rem; text-align: right; }
.hs-scores thead th { border-bottom: 2px solid var(--line); }
.hs-scores th:first-child { text-align: left; color: var(--ink-soft); font-weight: 600; }
.hs-scores tfoot th, .hs-scores tfoot td { border-top: 2px solid var(--line); font-weight: 700; color: var(--ink); }
.hs-live { color: var(--ink-soft); font-style: italic; }
.hs-scores .hs-moon { font-weight: 700; }
.hs-moons { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }

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

@media (max-width: 30rem) {
  /* More of each card shows on a phone, and so more to press: a half-width
     strip was 27 px and Carol pressed the 10 meaning the 9 (028). */
  .hs-hand { --card-w: 3.4rem; --step: calc(var(--card-w) * 0.66); }
  .hs-table .card, .hs-slot-empty { --card-w: 2.7rem; }
}