/* Per-game results card on phones (public/results-card.js): full-screen, above the lobby, under toasts. */
.results-card { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 32px 24px; background: radial-gradient(ellipse at 50% 110%, var(--surface) 0%, var(--bg) 65%);
  cursor: pointer; animation: results-card-in 0.5s var(--ease, ease) both; }
.results-card.out { animation: results-card-out 0.4s var(--ease, ease) both; pointer-events: none; }
.results-card-inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center;
  gap: 24px; text-align: center; }
.results-card-game { margin: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); }
.results-card-winner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.results-card-trophy { font-size: 64px; line-height: 1; }
.results-card-winner-name { font-size: clamp(34px, 10vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05;
  max-width: 100%; overflow-wrap: anywhere; }
.results-card-winner-pts { font-size: clamp(40px, 12vw, 64px); font-weight: 800; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; background: var(--grad, var(--accent)); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.results-card-winner.me .results-card-winner-name::after { content: ' (you)'; color: var(--muted); font-size: 0.5em; }
.results-card-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.results-card-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; border-radius: 16px;
  background: var(--surface); font-size: 18px; font-weight: 600; animation: results-card-in 0.6s var(--ease, ease) both; }
.results-card-row:nth-child(2) { animation-delay: 0.08s; }
.results-card-row:nth-child(3) { animation-delay: 0.16s; }
.results-card-row:nth-child(4) { animation-delay: 0.24s; }
.results-card-row.me { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); outline: 2px solid var(--accent); }
.results-card-emoji { font-size: 22px; line-height: 1; }
.results-card-name { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results-card-pts { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.results-card-row.me .results-card-pts { color: var(--accent); }
.results-card-photo { display: inline-block; border-radius: 50%; object-fit: cover; flex: none; vertical-align: middle;
  background: var(--surface); }
.results-card-emoji-photo { width: 32px; height: 32px; }
.results-card-winner-emoji-photo { width: 1.1em; height: 1.1em; }
.results-card-none { margin: 0; font-size: clamp(26px, 7vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.results-card-hint { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

@keyframes results-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes results-card-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .results-card, .results-card.out, .results-card-row { animation: none; } }