/* read-only spectator page */
.view-mode #sitenav { display: none; }
.viewer { max-width: 60rem; margin: 0 auto; padding: var(--space-lg, 1.5rem); }
.viewer-head { text-align: center; margin-bottom: var(--space-lg, 1.5rem); }
.viewer-meta { color: var(--muted, #888); }
.vmatch { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin: .25rem 0; }
/* dark arena card so the near-white names inherit legibly (matches the app theme) */
.vslot { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; background: var(--raised, #262b34); color: var(--text, #f4f4f6); border: 1px solid var(--line, #373d48); border-radius: .5rem; }
.viewer .bname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vslot.winner { border-color: var(--brand, #F89F1F); outline: 2px solid var(--brand, #F89F1F); }
.vmatch.islive .vslot { box-shadow: inset 0 0 0 2px var(--brand, #F89F1F); }
.viewer .bscore { margin-left: auto; font-weight: 800; color: var(--text, #f4f4f6); font-variant-numeric: tabular-nums; }
.vslot.winner .bscore { color: var(--brand, #F89F1F); }
.viewer.reconnecting::after { content: "reconnecting…"; position: fixed; bottom: .5rem; right: .5rem; font-size: .75rem; color: var(--muted, #888); }

/* share panel (Show tab) + open-by-link (dashboard) */
.sharehead { margin-top: var(--space-md, 1rem); }
.sharepanel { display: grid; gap: .5rem; }
.sharerow { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.sharerow-warn .sharelabel { color: var(--brand, #DF39BC); font-weight: 700; }
.sharelabel { flex: 0 0 auto; font-size: .8rem; }
.shareurl { flex: 1 1 auto; min-width: 0; font-size: .8rem; }
/* on phones, stack label over the url + copy so the long "crew only" edit
   label can't push the row (and the page) wider than the viewport */
@media (max-width: 720px) {
  .sharelabel { flex-basis: 100%; }
}
.openbylink { display: flex; gap: .5rem; margin: var(--space-md, 1rem) 0; }
.openbylink input { flex: 1 1 auto; }

/* Sign-in form: stack email / password / button vertically (scoped to the auth
   page so the shared .openbylink row layout elsewhere is unaffected). */
.authpage .openbylink { flex-direction: column; align-items: stretch; max-width: 22rem; }
.authpage .openbylink input,
.authpage .openbylink button { flex: 0 0 auto; width: 100%; }

/* dashboard search: the box lives in a shared shell above #dash-results so it is
   present on both the empty and populated dashboard. */
.dashtools { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin: var(--space-md) 0; }
.dashtools .openbylink { margin: 0; flex: 1 1 18rem; }
.dash-search { flex: 1 1 14rem; }
.searchhint { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-sm); }
.cloudbadge {
  margin-left: auto; flex: 0 0 auto;
  padding: 5px 12px; border-radius: var(--radius); border: 1px solid var(--line);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

/* vanity slug editor — the readable name shared across all three links */
.slugrow { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding-bottom: .5rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line, #373d48); }
.slugrow .sharelabel { flex-basis: 100%; }
.slugprefix { color: var(--muted, #888); font-size: .8rem; }
.slugfield {
  flex: 1 1 8rem; min-width: 0; font-size: .8rem;
  padding: .35rem .5rem; border-radius: var(--radius, 4px);
  background: var(--raised, #262b34); color: var(--text, #f4f4f6);
  border: 1px solid var(--line, #373d48);
}
.slugfield:focus-visible { outline: 2px solid var(--brand, #F89F1F); outline-offset: 1px; }
.slughint { flex-basis: 100%; font-size: .72rem; color: var(--muted, #888); }