/* PROSPER public event page — layout on top of the shared design system
   (styles.css). Same ice palette, glass cards and pills; nothing here
   restyles existing components. */

.event-page { max-width: 1100px; margin: 0 auto; }
.event-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.event-title { margin: 0; }
.event-meta { color: var(--muted, #9fb4cc); margin-top: 0.4rem; }
.event-desc { max-width: 70ch; }
.event-subhead { margin: 1.4rem 0 0.6rem; font-family: var(--font-ui); }
.event-rules { white-space: pre-wrap; max-width: 75ch; }
.event-facts { margin-top: 1rem; }
.event-bracket-meta { color: var(--muted, #9fb4cc); }

.etabs { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 1.4rem 0 1.1rem; }
.etab {
  font: inherit; font-family: var(--font-ui); font-weight: 600; cursor: pointer;
  color: var(--ink, #e8f1fb); background: rgba(10, 18, 34, 0.55);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.45rem 1rem;
}
.etab:hover { border-color: var(--ice-mid, #6ea8e8); }
.etab.is-active { background: rgba(110, 190, 255, 0.16); border-color: var(--ice-bright, #a9d6ff); color: var(--ice-bright, #a9d6ff); }

.ematch-grid { align-items: start; }
.ematch-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; font-family: var(--font-ui); font-size: 0.85rem; color: var(--muted, #9fb4cc); }
.ematch-team { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: 6px; }
.ematch-team.is-winner { background: rgba(110, 190, 255, 0.14); color: var(--ice-bright, #a9d6ff); font-weight: 600; }
.ematch-score { font-variant-numeric: tabular-nums; }
.ematch-notes { font-size: 0.82rem; color: var(--muted, #9fb4cc); margin: 0.45rem 0 0; }

.team-roster-label { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted, #9fb4cc); margin-bottom: 0.3rem; }
.team-roster { margin: 0; padding-left: 1.1rem; }
.team-roster li { margin: 0.15rem 0; }

.etable { width: 100%; border-collapse: collapse; }
.etable th, .etable td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line-soft); }
.etable th { font-family: var(--font-ui); font-size: 0.82rem; color: var(--muted, #9fb4cc); }
.etable td.is-winner { color: var(--ice-bright, #a9d6ff); font-weight: 600; }

/* Team registration form (design/08 R4). Global label/input/button styles
   already cover the fields; this only lays out the picker lists. */
.event-register { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.event-register h2 { margin: 0 0 0.4rem; }
.register-results, .register-picked { list-style: none; margin: 0.4rem 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.register-results li, .register-picked li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(10, 18, 34, 0.55); }
.event-register .btn-small { padding: 0.34rem 0.8rem; font-size: 0.8rem; flex-shrink: 0; }
.register-results li.muted, .register-picked li.muted { display: block; border: none; background: none; padding-left: 0; }

/* Roster entry pictures (design/09). */
.team-roster-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: -5px; margin-right: 0.4rem; }
.team-roster-avatar-symbol { display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; line-height: 1; }