/* Play Hearts with friends (play/hearts.html). The table, seats and cards are
   the practice game's (.h-table, .h-seat, .gcard in brand.css); this adds only
   the panels around them: opening and joining a table, the lobby, the scores. */

.pt-panel { padding: 20px 22px; margin-bottom: 18px; }
.pt-panel h2 { margin-top: 0; font-size: 22px; }
.pt-sub { font-size: 15px; margin: 18px 0 6px; }

.pt-form label { display: block; font-weight: 700; margin: 12px 0 6px; }
.pt-form input[type=text] {
  font: inherit; width: 100%; max-width: 320px; padding: 9px 12px;
  border: 1.5px solid var(--line-firm); border-radius: 9px; background: var(--surface); color: var(--text);
}
.pt-form fieldset { border: 0; padding: 0; margin: 16px 0 6px; }
.pt-form legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.pt-form .pt-radio { display: inline-flex; align-items: center; gap: 6px; margin: 4px 18px 4px 0; font-weight: 400; }
.pt-hint { color: var(--muted); font-size: 14px; margin: 6px 0 14px; }
.pt-inline { margin: 0; }

.pt-invite { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.pt-invite input {
  flex: 1 1 200px; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1.5px solid var(--line-firm); border-radius: 9px; background: var(--surface-2); color: var(--text);
}
.pt-invite .btn { font-size: 14px; padding: 8px 16px; }

.pt-seats { list-style: none; padding: 0; margin: 0 0 12px; }
.pt-seats li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.pt-empty { color: var(--muted); }
.pt-tag {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; margin-left: 6px;
  border-radius: 999px; border: 1px solid var(--line-firm); color: var(--muted);
}
.pt-tag--off { border-style: dashed; }

.pt-status.pt-error { border-left-color: #C0272D; }

.pt-away { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; margin-bottom: 14px;
           border-left: 4px solid var(--accent); }
.pt-away p { margin: 0; flex: 1 1 260px; }

.pt-seatnote, .pt-clock { display: block; font-size: 12px; }
.pt-clock { font-weight: 700; color: var(--accent); }

.pt-between, .pt-over { padding: 14px 18px; margin-top: 6px; }
.pt-between h3, .pt-over h3 { margin: 0 0 8px; font-size: 18px; }
.pt-dealscores, .pt-scores { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px; }
.pt-dealscores th, .pt-dealscores td, .pt-scores th, .pt-scores td {
  padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--line);
}
.pt-dealscores th:first-child, .pt-scores th:first-child, .pt-scores td:first-child { text-align: left; }
.pt-dealscores th, .pt-scores th { text-transform: none; letter-spacing: 0; font-size: 13px; overflow-wrap: normal; word-break: normal; hyphens: none; }
.pt-total-row td { font-weight: 700; border-bottom: 0; }
.pt-standings { margin: 0 0 10px; padding-left: 22px; }

.pt-news { padding-left: 18px; margin: 0 0 12px; font-size: 14px; }
.pt-news li { margin-bottom: 4px; }
.pt-how { padding-left: 18px; font-size: 14px; }
.pt-how li { margin-bottom: 6px; }

/* The side panel holds the invite and scores, so on a phone it follows the board instead of sitting beside it. */
@media (max-width: 900px) {
  .pt-side { position: static; max-height: none; }
}