/* Accents identify a subject; neutral headings keep the page calm. */
:root {
  --people-start: #6bd8a6;
  --people-end: #65bded;
  --clubs-start: #e1a0cb;
  --clubs-end: #a698ec;
}
:root[data-theme="light"] {
  --people-start: #087d68;
  --people-end: #166cba;
  --clubs-start: #ad3f83;
  --clubs-end: #743f9f;
}
.text-events, .text-people, .text-clubs {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-events { background-image: linear-gradient(110deg, var(--accent-heading-start), var(--accent-heading-end)); }
.text-people { background-image: linear-gradient(110deg, var(--people-start), var(--people-end)); }
.text-clubs { background-image: linear-gradient(110deg, var(--clubs-start), var(--clubs-end)); }
.avatar--photo-community {
  background-image: url('../assets/profiles/bubble-05-20260907.webp');
  background-position: 50% 40%;
  border-color: color-mix(in srgb, var(--people-start) 35%, var(--surface));
}
#social .check-list svg { color: var(--people-start); }
.ticket-stage--phone {
  width: 100%;
  height: clamp(520px, 47vw, 680px);
  overflow: visible;
}
.ticket-phone-webgl { width: clamp(250px, 24vw, 300px); }
.club-phone-stage--focused {
  height: clamp(510px, 46vw, 650px);
  margin: 0;
}
.club-phone-stage--focused .club-phone-webgl--dashboard {
  top: 50%;
  width: clamp(250px, 24vw, 300px);
}
.club-screen-picker {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  margin: 0.5rem auto 0;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.club-screen-picker button {
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.club-screen-picker button[aria-pressed="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--clubs-start) 17%, var(--surface));
}
.club-screen-picker button:focus-visible { outline: 2px solid var(--clubs-start); outline-offset: 2px; }
@media (hover: hover) {
  .club-screen-picker button:hover { color: var(--text); background: var(--surface-soft); }
}
@media (max-width: 760px) {
  .ticket-stage--phone { height: 540px; }
  .ticket-phone-webgl { width: min(260px, 67vw); }
  .club-phone-stage--focused { height: 540px; margin: 0; }
  .club-phone-stage--focused .club-phone-webgl--dashboard { width: min(260px, 67vw); }
  .club-screen-picker { margin-top: 0.25rem; }
  .club-screen-picker button { font-size: 0.77rem; padding: 0.65rem 0.8rem; }
  .profile-card__header { gap: 0.6rem; }
  .profile-card__header span { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .club-screen-picker button { transition: none; }
}

.profile-card__badge { padding: 0.35rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }