/* Shared first-party install UI for the app and its standalone guide pages. */
html[data-pwa-installed] [data-pwa-install],
html[data-pwa-installed] .pwa-settings-reminders {
  display: none !important;
}
.pwa-installed-note {
  display: none;
}
html[data-pwa-installed] .pwa-installed-note {
  display: block;
  color: #d7fa87;
}
.pwa-install-chip {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 65;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #ffffff30;
  border-radius: 100px;
  background: #11121ded;
  color: #d9d5e6;
  box-shadow: 0 4px 18px #0003;
  font:
    500 12px/1.4 "Manrope",
    system-ui,
    sans-serif;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
body:has(.room-shell) .pwa-install-chip {
  bottom: calc(92px + env(safe-area-inset-bottom));
}
body:has(.keyboard-open) .pwa-install-chip {
  visibility: hidden;
}
body:has(
    .club-landing,
    .pwa-install-banner,
    .rr-workspace,
    .rr-entry,
    .room-shell,
    .room-opening,
    .help-page,
    .legal-page,
    .recovery-card
  )
  .pwa-install-chip {
  display: none;
}
.pwa-install-chip > span {
  color: #d7fa87;
  font-size: 17px;
}
.pwa-install-chip:hover {
  border-color: #d7fa87a0;
  color: #fff;
}
.pwa-install-chip:focus-visible,
.pwa-dialog button:focus-visible,
.pwa-dialog input:focus-visible,
.pwa-install-banner button:focus-visible {
  outline: 2px solid #d7fa87;
  outline-offset: 4px;
}
.pwa-dialog {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(
    100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid #ffffff25;
  border-radius: 20px;
  background: #11121d;
  color: #f3efff;
  box-shadow: 0 32px 100px #0008;
  font:
    400 14px/1.5 "Manrope",
    system-ui,
    sans-serif;
  color-scheme: dark;
}
.pwa-dialog[open] {
  animation: pwa-enter 250ms ease-out;
}
.pwa-dialog::backdrop {
  background: #090712b8;
  backdrop-filter: blur(7px);
}
.pwa-dialog *,
.pwa-install-banner * {
  box-sizing: border-box;
}
.pwa-dialog button {
  cursor: pointer;
  font: inherit;
}
.pwa-dialog .pwa-close {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #ffffff25;
  border-radius: 50%;
  background: #11121d99;
  color: #e6e1f2;
  font-size: 24px;
  line-height: 1;
}
.pwa-art {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 32px 24px 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 25%, #9a65ff45, transparent 65%),
    linear-gradient(130deg, #57f0e508, #11121d);
}
.pwa-app-icon {
  padding: 8px;
  background: #ffffff08;
  border: 1px solid #ffffff20;
  border-radius: 27px;
  box-shadow: 0 12px 36px #0004;
  transform: rotate(-7deg);
}
.pwa-app-icon img {
  display: block;
  border-radius: 21px;
}
.pwa-orbit {
  position: absolute;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #ffffff20;
  border-radius: 13px;
  background: #29263b;
}
.pwa-orbit-one {
  left: 21%;
  top: 43px;
  color: #57f0e5;
  transform: rotate(-16deg);
  font-size: 23px;
}
.pwa-orbit-two {
  right: 20%;
  top: 83px;
  color: #d7fa87;
  transform: rotate(12deg);
  font-size: 24px;
}
.pwa-art-caption {
  margin-top: 20px;
  color: #c9c6d7;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.19em;
}
.pwa-dialog-content {
  padding: 12px 28px 24px;
}
.pwa-eyebrow {
  color: #c5b0ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}
.pwa-dialog h2 {
  margin: 9px 0 12px;
  font-size: clamp(30px, 7vw, 38px);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 1.12;
}
.pwa-dialog h2 em {
  color: #d7fa87;
  font-style: normal;
}
.pwa-dialog p {
  margin: 0;
  color: #c9c6d7;
  font-size: 13px;
  line-height: 1.65;
}
.pwa-benefits {
  display: grid;
  gap: 13px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}
.pwa-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pwa-benefits li > span {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border: 1px solid #ffffff15;
  border-radius: 10px;
  color: #c5b0ed;
  background: #ffffff05;
  font-size: 20px;
}
.pwa-benefits strong,
.pwa-benefits small {
  display: block;
}
.pwa-benefits strong {
  font-size: 12px;
  font-weight: 650;
}
.pwa-benefits small {
  margin-top: 2px;
  color: #b8b3c8;
  font-size: 11px;
}
.pwa-dialog .pwa-instructions {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #57f0e530;
  border-radius: 12px;
  background: #57f0e508;
  color: #e2e9e8;
}
.pwa-dialog .pwa-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: #d7fa87;
  color: #11121d;
  font-weight: 750;
  box-shadow: 0 5px 25px #d7fa8715;
}
.pwa-dialog .pwa-primary:hover {
  background: #e7ffb3;
}
.pwa-dialog .pwa-primary:disabled {
  opacity: 0.65;
  cursor: progress;
}
.pwa-dialog .pwa-later {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #c9c6d7;
  font-size: 12px;
}
.pwa-opt-out {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  color: #b8b3c8;
  font-size: 11px;
  cursor: pointer;
}
.pwa-opt-out input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #d7fa87;
}
.pwa-footnote {
  display: block;
  margin-top: 12px;
  text-align: center;
  color: #aaa8bb;
  font-size: 10px;
}
.pwa-install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1080px, calc(100% - 48px));
  margin: 40px auto;
  padding: 28px 32px;
  border: 1px solid #9a65ff40;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 0 50%, #9a65ff18, transparent 65%), #11121d;
  color: #f3efff;
  font-family: "Manrope", system-ui, sans-serif;
}
.pwa-install-banner-copy {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pwa-install-banner img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 17px;
  transform: rotate(-6deg);
}
.pwa-install-banner h2 {
  margin: 5px 0 7px;
  font-size: clamp(20px, 4vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.pwa-install-banner p {
  margin: 0;
  max-width: 490px;
  color: #c9c6d7;
  font-size: 13px;
  line-height: 1.6;
}
.pwa-install-banner button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid #d7fa8760;
  border-radius: 100px;
  background: #d7fa87;
  color: #11121d;
  font:
    700 13px/1.4 "Manrope",
    system-ui,
    sans-serif;
  cursor: pointer;
}
.pwa-settings {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid #ffffff20;
}
.pwa-settings > p {
  margin: 5px 0 12px;
  color: #c9c6d7;
  font-size: 12px;
}
.pwa-settings .pwa-settings-reminders {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}
.pwa-settings-reminders > span {
  display: grid;
  gap: 4px;
}
.pwa-settings-reminders small {
  font-size: 11px;
  color: #c9c6d7;
}
.pwa-settings-reminders input {
  accent-color: #d7fa87;
}
.pwa-settings .pwa-settings-reminders input {
  appearance: none;
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid #ffffff40;
  border-radius: 20px;
  background: #ffffff10;
  cursor: pointer;
}
.pwa-settings .pwa-settings-reminders input::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c9c6d7;
}
.pwa-settings .pwa-settings-reminders input:checked {
  background: #d7fa87;
  border-color: #d7fa87;
}
.pwa-settings .pwa-settings-reminders input:checked::after {
  transform: translateX(14px);
  background: #11121d;
}
.pwa-settings .pwa-settings-reminders input:focus-visible {
  outline: 2px solid #d7fa87;
  outline-offset: 4px;
}
@keyframes pwa-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  .pwa-install-chip {
    min-height: 40px;
    font-size: 11px;
    padding: 6px 11px;
  }
  .pwa-install-banner {
    flex-direction: column;
    align-items: stretch;
    width: calc(100% - 32px);
    padding: 24px;
    gap: 20px;
  }
  .pwa-install-banner-copy {
    align-items: flex-start;
    gap: 14px;
  }
  .pwa-install-banner img {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }
  .pwa-dialog-content {
    padding: 10px 22px 20px;
  }
}
@media (max-height: 740px) {
  .pwa-art {
    padding-top: 18px;
    padding-bottom: 10px;
  }
  .pwa-app-icon img {
    width: 56px;
    height: 56px;
  }
  .pwa-art-caption {
    margin-top: 12px;
  }
  .pwa-benefits {
    margin: 16px 0;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-dialog[open] {
    animation: none;
  }
}
.pwa-offline {
  margin: 0;
  min-height: 100dvh;
  padding: max(32px, env(safe-area-inset-top)) 20px
    max(32px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 15%, #9a65ff20, transparent 65%), #11121d;
  color: #f3efff;
  font:
    400 14px/1.6 "Manrope",
    system-ui,
    sans-serif;
  color-scheme: dark;
}
.pwa-offline-card {
  width: min(420px, 100%);
}
.pwa-offline-card > img {
  display: block;
  margin-bottom: 24px;
  border-radius: 19px;
}
.pwa-offline h1 {
  margin: 12px 0 20px;
  font-size: clamp(36px, 10vw, 52px);
  letter-spacing: -0.05em;
  line-height: 1.1;
}
.pwa-offline p {
  color: #c9c6d7;
}
.pwa-offline button {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 24px 0;
  border: none;
  border-radius: 10px;
  background: #d7fa87;
  color: #11121d;
  font:
    700 14px "Manrope",
    system-ui,
    sans-serif;
  cursor: pointer;
}
.pwa-offline a {
  color: #c5b0ed;
}
.pwa-offline h2 {
  font-size: 16px;
  margin-top: 30px;
}
.pwa-offline ul {
  display: grid;
  gap: 8px;
  margin-bottom: 28px;
  padding: 0;
  list-style: none;
}
.pwa-offline li a {
  display: block;
  overflow-wrap: anywhere;
  padding: 12px 16px;
  border: 1px solid #ffffff25;
  border-radius: 12px;
  text-decoration: none;
}
.pwa-offline :focus-visible {
  outline: 2px solid #d7fa87;
  outline-offset: 4px;
}