/* Optional account entry and authentication dialog. */

.account-home-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--party-line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(108, 229, 255, 0.09), rgba(255, 93, 145, 0.08)),
    rgba(10, 12, 27, 0.7);
}

.account-home-card strong {
  color: var(--party-cream);
  font-size: 1.05rem;
}

.account-home-card p:last-child {
  margin: 0.2rem 0 0;
  color: var(--party-muted);
  font-size: 0.88rem;
}

.account-home-actions,
.auth-switch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.account-home-actions button {
  min-height: 2.75rem;
}

.has-social-update {
  border-color: var(--party-pink) !important;
  box-shadow: 0 0 0 2px rgba(246, 79, 154, 0.18);
}

.auth-popup {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background: rgba(7, 8, 20, 0.82);
  backdrop-filter: blur(10px);
}

.auth-popup-panel {
  width: min(100%, 30rem);
  max-height: min(88dvh, 44rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--party-line);
  border-radius: 20px;
  background: rgba(18, 20, 46, 0.98);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.58);
  -webkit-overflow-scrolling: touch;
}

.auth-popup-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.auth-form,
.auth-account-panel {
  display: grid;
  gap: 0.8rem;
}

.auth-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--party-muted);
  font-weight: 700;
}

.auth-form input {
  width: 100%;
}

.auth-recovery-note,
.auth-account-panel p,
.auth-status {
  margin: 0;
  color: var(--party-muted);
  font-size: 0.88rem;
}

.auth-status {
  min-height: 1.2rem;
  color: #ffb5bd;
}

.auth-switch-actions button {
  flex: 1;
}

.profile-screen {
  position: fixed;
  inset: 0;
  z-index: 34;
  overflow: auto;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 18% 15%, rgba(246, 79, 154, 0.16), transparent 28rem),
    radial-gradient(circle at 82% 85%, rgba(56, 189, 248, 0.14), transparent 30rem),
    #080914;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.profile-shell {
  width: min(100%, 70rem);
  min-height: calc(100dvh - 2rem);
  margin: 0 auto;
  display: grid;
  align-content: start;
  gap: 1rem;
}

.profile-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  background: rgba(8, 9, 20, 0.92);
  backdrop-filter: blur(10px);
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.profile-preview,
.profile-content {
  border: 1px solid var(--party-line);
  border-radius: 22px;
  background: rgba(18, 20, 46, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.profile-preview {
  position: sticky;
  top: 6rem;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 1.25rem;
  text-align: center;
}

.profile-avatar-preview {
  width: min(13rem, 58vw);
  aspect-ratio: 1;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.3));
}

.profile-preview > strong {
  color: var(--party-cream);
  font-size: 1.35rem;
}

.profile-preview > span,
.profile-preview > p {
  margin: 0;
  color: var(--party-muted);
}

.profile-rank {
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(108, 229, 255, 0.3);
  border-radius: 999px;
  background: rgba(108, 229, 255, 0.09);
  color: var(--party-cyan) !important;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-admin-badge {
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(246, 79, 154, 0.5);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(246, 79, 154, 0.2), rgba(139, 92, 246, 0.2));
  color: #ffc2df !important;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-content,
.profile-editor {
  display: grid;
  gap: 1rem;
}

.profile-content {
  padding: 1rem;
}

.profile-search {
  display: grid;
  gap: 0.35rem;
}

.profile-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.profile-search-results,
.profile-social-section > div {
  display: grid;
  gap: 0.55rem;
  max-height: min(22rem, 42dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.profile-search-results:empty {
  display: none;
}

.profile-search-results > p,
.profile-social-section > div > p {
  margin: 0;
  padding: 0.75rem;
  border: 1px dashed var(--party-line);
  border-radius: 12px;
  color: var(--party-muted);
}

.profile-relationship-actions,
.profile-social-dashboard {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid rgba(108, 229, 255, 0.24);
  border-radius: 16px;
  background: rgba(108, 229, 255, 0.055);
}

.profile-relationship-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.profile-relationship-actions button {
  flex: 1 1 10rem;
}

.profile-relationship-status {
  margin: 0;
  color: var(--party-muted);
}

.profile-social-dashboard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.profile-social-dashboard h3,
.profile-social-dashboard h4,
.profile-social-dashboard p {
  margin: 0;
}

.profile-social-dashboard > header > strong {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(246, 79, 154, 0.14);
  color: var(--party-pink);
  white-space: nowrap;
}

.profile-social-section {
  display: grid;
  gap: 0.45rem;
}

.profile-social-section h4 {
  color: var(--party-cream);
}

.profile-social-player {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem;
  border: 1px solid var(--party-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.profile-social-identity {
  min-width: 0;
  min-height: 3rem;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.2rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.profile-social-identity:hover,
.profile-social-identity:focus-visible {
  transform: none;
  background: rgba(108, 229, 255, 0.07);
}

.profile-social-identity > span,
.profile-social-identity > span > span {
  min-width: 0;
}

.profile-social-identity strong,
.profile-social-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-social-identity small {
  margin-top: 0.1rem;
  color: var(--party-muted);
}

.profile-social-avatar {
  width: 2.6rem;
  height: 2.6rem;
}

.profile-social-player > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.profile-social-player > div button {
  min-height: 2.65rem;
  padding: 0.5rem 0.7rem;
}

.profile-social-secondary {
  padding-top: 0.25rem;
  border-top: 1px solid var(--party-line);
}

.profile-social-secondary > summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  color: var(--party-muted);
  cursor: pointer;
  font-weight: 800;
}

.profile-social-secondary[open] {
  display: grid;
  gap: 0.75rem;
}

.profile-editor > label {
  display: grid;
  gap: 0.35rem;
  color: var(--party-muted);
  font-weight: 800;
}

.profile-editor input,
.profile-editor textarea,
.profile-editor select,
.profile-search input {
  width: 100%;
}

.profile-editor textarea {
  resize: vertical;
}

.avatar-editor,
.avatar-options {
  display: grid;
  gap: 0.8rem;
}

.avatar-options fieldset {
  min-width: 0;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--party-line);
  border-radius: 14px;
}

.avatar-options legend {
  padding: 0 0.35rem;
  color: var(--party-cream);
  font-weight: 900;
}

.avatar-option-row,
.avatar-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.avatar-color-row {
  margin-top: 0.55rem;
}

.avatar-part-button {
  min-height: 2.65rem;
  padding: 0.55rem 0.75rem;
}

.avatar-part-button[aria-pressed="true"] {
  border-color: var(--party-cyan);
  background: rgba(108, 229, 255, 0.13);
}

.avatar-color-button {
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
}

.avatar-color-button[aria-pressed="true"] {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px var(--party-cyan);
}

.avatar-color-violet { background: #8b5cf6; }
.avatar-color-blue { background: #38bdf8; }
.avatar-color-pink { background: #f64f9a; }
.avatar-color-green { background: #65d68a; }
.avatar-color-orange { background: #ffad4d; }
.avatar-color-ink { background: #11152c; }
.avatar-color-navy { background: #24345d; }
.avatar-color-plum { background: #4b234f; }

.profile-status {
  min-height: 1.3rem;
  margin: 0;
  color: #ffb5bd;
}

.profile-statistics {
  display: grid;
  gap: 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--party-line);
}

.profile-statistics > header,
.profile-rank-progress > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.profile-statistics > header h3,
.profile-statistics > header p,
.profile-mode-statistics h3,
.profile-history h3 {
  margin: 0;
}

.profile-statistics > header > strong {
  color: var(--party-cyan);
}

.profile-rank-progress {
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem;
  border: 1px solid rgba(108, 229, 255, 0.25);
  border-radius: 14px;
  background: rgba(108, 229, 255, 0.07);
}

.profile-rank-progress span,
.profile-records span,
.profile-mode-statistics span,
.profile-history span,
.profile-history p,
.profile-private-statistics {
  color: var(--party-muted);
  font-size: 0.84rem;
}

.profile-progress-track {
  height: 0.65rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.profile-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--party-cyan), var(--party-pink));
  transition: width 240ms ease;
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.profile-stat-grid > div,
.profile-records > div,
.profile-mode-statistics > div,
.profile-history article {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem;
  border: 1px solid var(--party-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.profile-stat-grid strong {
  color: var(--party-cream);
  font-size: 1.25rem;
}

.profile-stat-grid span {
  color: var(--party-muted);
  font-size: 0.72rem;
}

.profile-records {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.profile-mode-statistics,
.profile-history,
.profile-mode-statistics > div,
.profile-history > div {
  display: grid;
  gap: 0.55rem;
}

.profile-history > div {
  max-height: min(24rem, 48dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.profile-private-statistics {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--party-line);
  border-radius: 14px;
  text-align: center;
}

.public-rooms-screen {
  position: fixed;
  inset: 0;
  z-index: 34;
  overflow-y: auto;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 15% 15%, rgba(108, 229, 255, 0.14), transparent 28rem),
    radial-gradient(circle at 85% 85%, rgba(246, 79, 154, 0.13), transparent 30rem),
    #080914;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.public-rooms-shell {
  width: min(100%, 64rem);
  min-height: calc(100dvh - 2rem);
  margin: 0 auto;
  display: grid;
  align-content: start;
  gap: 1rem;
}

.public-rooms-header,
.public-room-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.public-rooms-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.8rem 0;
  background: rgba(8, 9, 20, 0.94);
  backdrop-filter: blur(10px);
}

.public-rooms-header h2,
.public-rooms-header p,
.public-room-toolbar p {
  margin: 0;
}

.public-rooms-header > div > p:last-child,
.public-room-toolbar p {
  color: var(--party-muted);
}

.public-room-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--party-line);
  border-radius: 16px;
  background: rgba(18, 20, 46, 0.92);
}

.public-room-filters label {
  display: grid;
  gap: 0.35rem;
  color: var(--party-muted);
  font-weight: 800;
}

.public-room-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.public-room-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--party-line);
  border-radius: 16px;
  background: rgba(18, 20, 46, 0.94);
}

.public-room-host-avatar {
  width: 3.5rem;
  aspect-ratio: 1;
}

.public-room-host-avatar > svg {
  width: 100%;
  height: 100%;
}

.public-room-copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.public-room-copy strong {
  color: var(--party-cream);
}

.public-room-copy span {
  overflow: hidden;
  color: var(--party-muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-room-copy .public-room-participation {
  color: var(--party-cyan);
  font-weight: 900;
}

.public-rooms-more {
  justify-self: center;
}

.profile-report-form,
.moderation-content,
.moderation-report-list,
.moderation-report-card,
.moderation-admin-tools form,
.moderation-audit > div {
  display: grid;
  gap: 0.75rem;
}

.profile-report-form {
  padding: 0.9rem;
  border: 1px solid rgba(246, 79, 154, 0.35);
  border-radius: 16px;
  background: rgba(246, 79, 154, 0.07);
}

.profile-report-form h3,
.profile-report-form p {
  margin: 0;
}

.profile-report-form label,
.moderation-toolbar label,
.moderation-admin-tools label {
  display: grid;
  gap: 0.35rem;
  color: var(--party-muted);
  font-weight: 800;
}

.profile-report-form > div:last-child,
.moderation-report-actions,
.moderation-admin-tools form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.moderation-shell {
  width: min(100%, 68rem);
}

.moderation-content {
  padding: 0.25rem;
}

.moderation-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.moderation-toolbar label {
  flex: 1 1 14rem;
}

.moderation-report-list {
  max-height: min(42rem, 62dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.moderation-report-card,
.moderation-admin-tools,
.moderation-audit {
  padding: 0.9rem;
  border: 1px solid var(--party-line);
  border-radius: 16px;
  background: rgba(18, 20, 46, 0.94);
}

.moderation-report-card > div:first-child {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}

.moderation-report-card p {
  margin: 0;
  color: var(--party-muted);
}

.moderation-report-card small {
  color: var(--party-cyan);
}

.moderation-report-card textarea {
  width: 100%;
}

.moderation-report-actions button,
.profile-report-form button,
.moderation-admin-tools button {
  min-height: 2.9rem;
}

.moderation-admin-tools summary,
.moderation-audit summary {
  min-height: 2.8rem;
  cursor: pointer;
  font-weight: 900;
}

.moderation-audit > div {
  max-height: 18rem;
  overflow-y: auto;
}

.moderation-audit p {
  margin: 0;
  padding: 0.65rem;
  border-bottom: 1px solid var(--party-line);
  color: var(--party-muted);
}

.account-security-shell {
  width: min(100%, 60rem);
}

.account-security-content,
.account-security-card,
.account-security-card form,
.account-session-list,
.account-security-events {
  display: grid;
  gap: 0.75rem;
}

.account-security-content {
  padding: 0.25rem;
}

.account-security-card {
  padding: 1rem;
  border: 1px solid var(--party-line);
  border-radius: 18px;
  background: rgba(18, 20, 46, 0.94);
}

.account-security-card h3,
.account-security-card p {
  margin: 0;
}

.account-security-card > div:first-child {
  display: grid;
  gap: 0.3rem;
}

.account-security-card label {
  display: grid;
  gap: 0.35rem;
  color: var(--party-muted);
  font-weight: 800;
}

.account-session-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--party-line);
  border-radius: 14px;
  background: rgba(9, 10, 23, 0.6);
}

.account-session-list article > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.account-session-list small,
.account-security-events p {
  color: var(--party-muted);
}

.account-security-events {
  max-height: 18rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.account-security-events p {
  margin: 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--party-line);
}

.account-danger-zone {
  border-color: rgba(255, 79, 139, 0.5);
}

#accountDeletionStatus {
  margin: 0;
  color: #ff9fbd;
  font-weight: 700;
}

#accountDeletionStatus:empty {
  display: none;
}