:root {
  color-scheme: dark;
  --gold: #d8aa74;
  --message-gold: #b84b5a;
  --ice-blue: #a9d8ff;
  --text: #d8aa74;
  font-family: Georgia, "Times New Roman", serif;
}

.screen,
.screen *,
img,
video {
  animation: none !important;
  transition: none !important;
  animation-delay: 0s !important;
  transition-delay: 0s !important;
  opacity: 1 !important;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #030303;
}

button,
input,
select,
textarea {
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  outline: 0 !important;
}

textarea {
  resize: none;
}

.screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: none;
  overflow: hidden;
  touch-action: pan-y;
  --stage-w: min(100vw, calc(100dvh * 0.5627990431));
  --stage-h: min(100dvh, calc(100vw * 1.7768331562));
  --stage-left: calc((100vw - var(--stage-w)) / 2);
  --stage-top: calc((100dvh - var(--stage-h)) / 2);
  background: #030303 var(--bg) center / contain no-repeat;
}

.screen.is-active {
  display: block;
}

.hit,
.cover-slot {
  position: absolute;
  z-index: 3;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  user-select: none;
}

.hit:focus,
.hit:focus-visible,
.hit:active,
.cover-slot:focus-within {
  outline: 0;
  border: 0;
  box-shadow: none;
}

.choice-hit.selected::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 82%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(50, 255, 114, 0.74), rgba(50, 255, 114, 0.34) 42%, rgba(50, 255, 114, 0.14) 66%, transparent 86%);
  filter: blur(10px);
  box-shadow: none;
  pointer-events: none;
}

.straight-hit.selected::after {
  left: 57%;
}

.bi-hit.selected::after {
  left: 43%;
}

.consent-box input:checked + span::after,
.self-video-hit.done::after {
  content: "✓";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: #32ff72;
  font: 800 clamp(18px, 2.7vh, 36px) system-ui, sans-serif;
  text-shadow: 0 0 8px rgba(50, 255, 114, 0.95), 0 0 18px rgba(50, 255, 114, 0.7);
  pointer-events: none;
}

.slot-text,
.identity-line input,
.identity-preview {
  position: absolute;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: 0;
  box-shadow: none;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow: 0 0 4px rgba(15, 6, 0, 0.9), 0 0 10px rgba(216, 170, 116, 0.28);
  caret-color: var(--gold);
}

.slot-text::placeholder,
.identity-line input::placeholder {
  color: var(--text);
  opacity: 0.95;
}

.hidden-input,
.cover-slot input {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0 !important;
  color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.cover-slot input::file-selector-button,
.cover-slot input::-webkit-file-upload-button {
  display: none;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.cover-slot img,
.cover-slot video,
.map-person > img,
.map-person > video,
.profile-view-slot > img,
.profile-view-slot > video {
  position: absolute;
  left: var(--media-left, 0);
  top: var(--media-top, 0);
  width: var(--media-width, 100%);
  height: var(--media-height, 100%);
  object-fit: cover;
  display: block;
  border-radius: var(--slot-radius, var(--photo-radius, 0));
}

.cover-slot-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(216, 168, 78, 0.9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.2vh, 34px);
  letter-spacing: 0;
  text-shadow: 0 0 4px rgba(15, 6, 0, 0.95), 0 0 12px rgba(216, 168, 78, 0.35);
  pointer-events: none;
}

.cover-slot.has-image .cover-slot-label {
  display: none;
}

.cover-slot.has-image {
  overflow: hidden;
}

.profile-list-slot {
  overflow: hidden;
}

.cover-slot,
.map-person,
.profile-view-slot,
.profile-list-slot {
  border-radius: var(--slot-radius, 14%);
}

.slot-debug .cover-slot,
.slot-debug .map-person,
.slot-debug .profile-view-slot,
.slot-debug .profile-list-slot {
  overflow: hidden;
  border: 1px solid rgba(169, 216, 255, 0.95);
  border-radius: var(--slot-radius, 16%);
  background: rgba(0, 0, 0, 0.08);
  cursor: move;
  touch-action: none;
  box-shadow:
    inset 0 0 0 1px rgba(217, 168, 78, 0.58),
    0 0 12px rgba(169, 216, 255, 0.45);
}

.slot-debug .cover-slot input {
  pointer-events: none;
}

.slot-debug .cover-slot::before,
.slot-debug .map-person::before,
.slot-debug .profile-view-slot::before,
.slot-debug .profile-list-slot::before {
  content: attr(data-slot-debug);
  position: absolute;
  left: 6px;
  top: 5px;
  z-index: 9;
  max-width: calc(100% - 12px);
  overflow: hidden;
  color: #a9d8ff;
  font: 700 9px Arial, sans-serif;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 5px #000, 0 0 9px #000;
  pointer-events: none;
}

.slot-debug .cover-slot::after,
.slot-debug .map-person::after,
.slot-debug .profile-view-slot::after,
.slot-debug .profile-list-slot::after {
  content: "";
  position: absolute;
  inset: 11%;
  z-index: 8;
  border: 1px dashed rgba(217, 168, 78, 0.88);
  border-radius: calc(var(--slot-radius, 16%) * 0.82);
  pointer-events: none;
}

.slot-debug-toolbar {
  position: fixed;
  z-index: 50;
  left: max(12px, calc(var(--stage-left) + (var(--stage-w) * 0.04)));
  top: max(12px, calc(var(--stage-top) + (var(--stage-h) * 0.035)));
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.slot-debug-toolbar button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(169, 216, 255, 0.75);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.76);
  color: #a9d8ff;
  font: 700 11px Arial, sans-serif;
  letter-spacing: 0;
  box-shadow: 0 0 12px rgba(169, 216, 255, 0.25);
}

.map-person .profile-photo,
.profile-view-slot .profile-photo,
.profile-list-slot .profile-photo {
  position: absolute;
  display: block;
  object-fit: cover;
  pointer-events: none;
  filter: saturate(0.92) contrast(1.04);
}

.profile-list-slot .profile-photo {
  left: var(--media-left, 0);
  top: var(--media-top, 0);
  width: var(--media-width, 100%);
  height: var(--media-height, 100%);
  border-radius: var(--slot-radius, var(--photo-radius, 12%));
}

.map-person .profile-photo,
.profile-view-slot .profile-photo {
  left: var(--media-left, 0);
  top: var(--media-top, 0);
  width: var(--media-width, 100%);
  height: var(--media-height, 100%);
  border-radius: var(--slot-radius, var(--photo-radius, 10%));
}

.profile-action-menu {
  position: fixed;
  z-index: 70;
  display: none;
  inset: 0;
  pointer-events: none;
}

.profile-action-menu.open {
  display: block;
}

.profile-action-menu button {
  position: fixed;
  top: calc(var(--stage-top) + (var(--stage-h) * 0.118));
  width: calc(var(--stage-w) * 0.22);
  height: calc(var(--stage-h) * 0.05);
  border-radius: 8px;
  font: 800 clamp(10px, 1.35vh, 15px) Arial, sans-serif;
  letter-spacing: 0;
  text-shadow: 0 0 5px #000, 0 0 10px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.profile-action-menu button[data-profile-collection-action="desires"] {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.12));
  border: 1px solid rgba(95, 255, 138, 0.58);
  background: linear-gradient(180deg, rgba(95, 255, 138, 0.24), rgba(6, 35, 20, 0.46));
  color: rgba(188, 255, 205, 0.96);
  box-shadow: inset 0 0 14px rgba(95, 255, 138, 0.14), 0 0 12px rgba(95, 255, 138, 0.28);
}

.profile-action-menu button[data-profile-collection-action="blackbook"] {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.66));
  border: 1px solid rgba(255, 88, 88, 0.62);
  background: linear-gradient(180deg, rgba(255, 88, 88, 0.24), rgba(48, 9, 9, 0.48));
  color: rgba(255, 205, 205, 0.98);
  box-shadow: inset 0 0 14px rgba(255, 88, 88, 0.14), 0 0 12px rgba(255, 88, 88, 0.27);
}

.profile-action-menu button:active {
  transform: scale(0.98);
}

/* Entrance */
.guys-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.068));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.664));
  width: calc(var(--stage-w) * 0.38);
  height: calc(var(--stage-h) * 0.088);
  z-index: 90;
  pointer-events: auto;
}

.girls-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.515));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.664));
  width: calc(var(--stage-w) * 0.41);
  height: calc(var(--stage-h) * 0.088);
  z-index: 90;
  pointer-events: auto;
}

/* Filters */
.straight-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.085));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.296));
  width: calc(var(--stage-w) * 0.24);
  height: calc(var(--stage-h) * 0.106);
}

.gay-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.376));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.296));
  width: calc(var(--stage-w) * 0.248);
  height: calc(var(--stage-h) * 0.106);
}

.bi-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.67));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.296));
  width: calc(var(--stage-w) * 0.24);
  height: calc(var(--stage-h) * 0.106);
}

.custom-tags-slot {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.245));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.525));
  width: calc(var(--stage-w) * 0.51);
  height: calc(var(--stage-h) * 0.27);
  resize: none;
  overflow: hidden;
  font-size: clamp(18px, 2.15vh, 30px);
  line-height: 1.45;
  text-transform: none;
  text-align: center;
}

.custom-tags-slot::-webkit-resizer {
  display: none;
}

.filter-next {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.23));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.88));
  width: calc(var(--stage-w) * 0.54);
  height: calc(var(--stage-h) * 0.072);
}

/* Consent */
.consent-box {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.665));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.203));
  width: calc(var(--stage-w) * 0.075);
  height: calc(var(--stage-h) * 0.046);
}

.consent-box span {
  position: absolute;
  inset: 0;
}

.consent-box input:checked + span::after {
  font-size: clamp(16px, 2.1vh, 30px);
  transform: translate(-50%, -53%);
}

.self-video-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.245));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.303));
  width: calc(var(--stage-w) * 0.51);
  height: calc(var(--stage-h) * 0.062);
}

.self-video-hit.done::after {
  display: none;
}

.self-video-preview {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.128));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.415));
  width: calc(var(--stage-w) * 0.744);
  height: calc(var(--stage-h) * 0.515);
  display: none;
  object-fit: cover;
  border: 0;
  background: transparent;
  box-shadow: none;
  z-index: 2;
  pointer-events: none;
}

.self-video-preview.ready {
  display: block;
}

.consent-next {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.2));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.91));
  width: calc(var(--stage-w) * 0.6);
  height: calc(var(--stage-h) * 0.07);
}

/* Account */
.phone-slot,
.login-password-slot,
.create-password-slot,
.identity-slot {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.183));
  width: calc(var(--stage-w) * 0.634);
  height: calc(var(--stage-h) * 0.064);
  font-size: clamp(17px, 2.05vh, 30px);
  line-height: calc(var(--stage-h) * 0.064);
  text-align: center;
}

.phone-slot {
  top: calc(var(--stage-top) + (var(--stage-h) * 0.205));
}

.login-password-slot {
  top: calc(var(--stage-top) + (var(--stage-h) * 0.386));
}

.identity-slot {
  top: calc(var(--stage-top) + (var(--stage-h) * 0.565));
}

.identity-line input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  text-transform: none;
  text-align: center;
  border: 0;
  background: transparent;
  outline: 0;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
  caret-color: transparent;
  z-index: 2;
}

.identity-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  text-transform: none;
  white-space: nowrap;
  font-size: 0.86em;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  font-variant-ligatures: none;
}

.create-password-slot {
  top: calc(var(--stage-top) + (var(--stage-h) * 0.746));
}

.account-next {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.35));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.897));
  width: calc(var(--stage-w) * 0.3);
  height: calc(var(--stage-h) * 0.058);
}

.loose-status {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.14));
  right: calc(var(--stage-left) + (var(--stage-w) * 0.14));
  bottom: calc(var(--stage-top) + (var(--stage-h) * 0.012));
  margin: 0;
  color: var(--gold);
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 12px;
}

/* Sign in / sign up choice */
.signin-choice-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.128));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.286));
  width: calc(var(--stage-w) * 0.744);
  height: calc(var(--stage-h) * 0.158);
}

.signup-choice-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.128));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.585));
  width: calc(var(--stage-w) * 0.744);
  height: calc(var(--stage-h) * 0.158);
}

/* Sign in */
.signin-login-slot,
.signin-password-slot {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.13));
  width: calc(var(--stage-w) * 0.74);
  height: calc(var(--stage-h) * 0.142);
  line-height: calc(var(--stage-h) * 0.142);
  text-align: center;
  font-size: clamp(20px, 2.55vh, 40px);
  text-transform: none;
}

.signin-login-slot {
  top: calc(var(--stage-top) + (var(--stage-h) * 0.276));
}

.signin-password-slot {
  top: calc(var(--stage-top) + (var(--stage-h) * 0.55));
}

.forgot-password-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.25));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.718));
  width: calc(var(--stage-w) * 0.5);
  height: calc(var(--stage-h) * 0.065);
}

.signin-enter-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.235));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.815));
  width: calc(var(--stage-w) * 0.53);
  height: calc(var(--stage-h) * 0.079);
}

.signin-status {
  bottom: calc(var(--stage-top) + (var(--stage-h) * 0.04));
}

/* Dashboard */
.dash-myself {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.38));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.458));
  width: calc(var(--stage-w) * 0.25);
  height: calc(var(--stage-h) * 0.122);
}

.dash-travels {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.36));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.15));
  width: calc(var(--stage-w) * 0.28);
  height: calc(var(--stage-h) * 0.16);
}

.dash-description {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.035));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.328));
  width: calc(var(--stage-w) * 0.275);
  height: calc(var(--stage-h) * 0.16);
}

.dash-blackbook {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.685));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.328));
  width: calc(var(--stage-w) * 0.275);
  height: calc(var(--stage-h) * 0.16);
}

.dash-club {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.035));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6));
  width: calc(var(--stage-w) * 0.285);
  height: calc(var(--stage-h) * 0.18);
}

.dash-map {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.68));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6));
  width: calc(var(--stage-w) * 0.285);
  height: calc(var(--stage-h) * 0.18);
}

.dash-desires {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.36));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.74));
  width: calc(var(--stage-w) * 0.29);
  height: calc(var(--stage-h) * 0.17);
}

.dash-conversations {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.755));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.805));
  width: calc(var(--stage-w) * 0.205);
  height: calc(var(--stage-h) * 0.135);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
}

.dash-conversations::before,
.dash-conversations::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dash-conversations[data-unread]::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 46%;
  top: 80%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid rgba(164, 255, 184, 0.7) !important;
  background: rgba(92, 255, 128, 0.78) !important;
  box-shadow: 0 0 7px rgba(92, 255, 128, 0.62), 0 0 14px rgba(92, 255, 128, 0.18) !important;
}

.conversation-list {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.08));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.105));
  width: calc(var(--stage-w) * 0.84);
  height: calc(var(--stage-h) * 0.745);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: calc(var(--stage-h) * 0.018);
  overflow-y: auto;
  scrollbar-width: none;
}

.conversation-list::-webkit-scrollbar {
  display: none;
}

.conversation-row {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--stage-w) * 0.2) 1fr auto;
  align-items: center;
  gap: calc(var(--stage-w) * 0.035);
  min-height: calc(var(--stage-h) * 0.12);
  padding: calc(var(--stage-h) * 0.012) calc(var(--stage-w) * 0.025);
  border: 1px solid rgba(216, 170, 116, 0.34);
  border-radius: calc(var(--stage-w) * 0.04);
  background: linear-gradient(135deg, rgba(10, 12, 14, 0.66), rgba(10, 6, 8, 0.52));
  color: var(--text);
  backdrop-filter: blur(8px);
}

.conversation-row img {
  width: calc(var(--stage-w) * 0.18);
  height: calc(var(--stage-w) * 0.18);
  border-radius: 18%;
  object-fit: cover;
  border: 1px solid rgba(216, 170, 116, 0.62);
}

.conversation-copy {
  min-width: 0;
  display: grid;
  gap: calc(var(--stage-h) * 0.005);
  text-align: left;
}

.conversation-copy strong {
  color: var(--message-gold);
  font: 800 clamp(18px, 2.6vh, 30px) Georgia, "Times New Roman", serif;
}

.conversation-copy small,
.conversation-row time {
  color: rgba(242, 238, 230, 0.62);
  font: 700 clamp(11px, 1.35vh, 16px) Georgia, "Times New Roman", serif;
}

.conversation-row.unread {
  border-color: rgba(184, 75, 90, 0.82);
  background: linear-gradient(135deg, rgba(28, 10, 14, 0.76), rgba(6, 10, 10, 0.6));
  box-shadow: 0 0 14px rgba(184, 75, 90, 0.24), inset 0 0 14px rgba(169, 216, 255, 0.07);
}

.conversation-row.unread img {
  border-color: rgba(184, 75, 90, 0.9);
  box-shadow: 0 0 12px rgba(184, 75, 90, 0.45);
}

.conversation-row.unread .conversation-copy strong,
.conversation-row.unread .conversation-copy small,
.conversation-row.unread time {
  color: var(--message-gold);
}

.conversation-row.unread::after {
  content: attr(data-unread);
  position: absolute;
  right: calc(var(--stage-w) * 0.018);
  top: calc(var(--stage-h) * 0.008);
  min-width: calc(var(--stage-w) * 0.055);
  height: calc(var(--stage-w) * 0.055);
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(184, 75, 90, 0.85);
  background: rgba(4, 6, 8, 0.78);
  color: var(--message-gold);
  font: 800 clamp(10px, 1.45vh, 15px) Georgia, "Times New Roman", serif;
}


.club-thread {
  position: fixed;
  z-index: 5;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.135));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.49));
  width: calc(var(--stage-w) * 0.73);
  height: calc(var(--stage-h) * 0.31);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: calc(var(--stage-h) * 0.016) calc(var(--stage-w) * 0.035);
  pointer-events: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.club-thread::-webkit-scrollbar {
  display: none;
}

.club-message {
  max-width: 78%;
  width: fit-content;
  padding: 8px 11px;
  border: 1px solid rgba(216, 170, 116, 0.32);
  border-radius: 14px;
  background: rgba(4, 5, 7, 0.58);
  color: #f1eee6;
  font: 400 clamp(13px, 1.62vh, 19px) "Trebuchet MS", Arial, sans-serif;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-shadow: 0 0 5px #000, 0 0 10px rgba(0, 0, 0, 0.74);
  box-shadow: inset 0 0 10px rgba(255, 238, 192, 0.05), 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.club-message.received {
  align-self: flex-start;
  border-top-left-radius: 6px;
}

.club-message.sent {
  align-self: flex-end;
  border-top-right-radius: 6px;
  border-color: rgba(169, 216, 255, 0.34);
  background: rgba(6, 16, 24, 0.62);
}

.screen.girls-club .club-thread {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.135));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.49));
  width: calc(var(--stage-w) * 0.73);
  height: calc(var(--stage-h) * 0.31);
}

.club-debug-toolbar {
  position: fixed;
  z-index: 20;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.05));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.045));
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.club-debug-toolbar button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(169, 216, 255, 0.75);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #a9d8ff;
  font: 700 11px Arial, sans-serif;
  letter-spacing: 0;
  box-shadow: 0 0 12px rgba(169, 216, 255, 0.25);
}

.gent-line {
  color: #f1eee6;
}

.gent-line:nth-child(odd) {
  color: #b9875b;
}

.girl-line {
  color: #f4f1ea;
}

.girl-line:nth-child(even) {
  color: #9ed4ff;
}

.club-box-1 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.4547));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.2861));
  width: calc(var(--stage-w) * 0.0879);
  height: calc(var(--stage-h) * 0.0845);
}

.club-box-2 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.2936));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4565));
  width: calc(var(--stage-w) * 0.3935);
  height: calc(var(--stage-h) * 0.0647);
}

.club-box-3 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.2088));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.5261));
  width: calc(var(--stage-w) * 0.2461);
  height: calc(var(--stage-h) * 0.0484);
}

.club-box-4 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.5409));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.5261));
  width: calc(var(--stage-w) * 0.2526);
  height: calc(var(--stage-h) * 0.0399);
}

.club-box-5 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.4547));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.5736));
  width: calc(var(--stage-w) * 0.08);
  height: calc(var(--stage-h) * 0.0914);
}

.club-box-6 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3303));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.7251));
  width: calc(var(--stage-w) * 0.3379);
  height: calc(var(--stage-h) * 0.0472);
}

.club-box-7 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3672));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.666));
  width: calc(var(--stage-w) * 0.255);
  height: calc(var(--stage-h) * 0.0568);
}

.club-box-8 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.372));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.3722));
  width: calc(var(--stage-w) * 0.2404);
  height: calc(var(--stage-h) * 0.0367);
}

.screen.girls-club .club-box {
  font-size: clamp(12px, 1.65vh, 19px);
}

.screen.girls-club .club-box-1 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.2756));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4501));
  width: calc(var(--stage-w) * 0.46);
  height: calc(var(--stage-h) * 0.034);
}

.screen.girls-club .club-box-2 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.2723));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4526));
  width: calc(var(--stage-w) * 0.4681);
  height: calc(var(--stage-h) * 0.0312);
}

.screen.girls-club .club-box-3 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1939));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.5175));
  width: calc(var(--stage-w) * 0.6033);
  height: calc(var(--stage-h) * 0.0316);
}

.screen.girls-club .club-box-4 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.191));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4864));
  width: calc(var(--stage-w) * 0.6317);
  height: calc(var(--stage-h) * 0.0299);
}

.screen.girls-club .club-box-5 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3837));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.5497));
  width: calc(var(--stage-w) * 0.2117);
  height: calc(var(--stage-h) * 0.0285);
}

.screen.girls-club .club-box-6 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3038));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.7083));
  width: calc(var(--stage-w) * 0.3951);
  height: calc(var(--stage-h) * 0.0433);
}

.screen.girls-club .club-box-7 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3142));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.624));
  width: calc(var(--stage-w) * 0.38);
  height: calc(var(--stage-h) * 0.041);
}

.screen.girls-club .club-box-8 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3019));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6667));
  width: calc(var(--stage-w) * 0.40);
  height: calc(var(--stage-h) * 0.041);
}

.screen.girls-club .club-box-9 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3075));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6215));
  width: calc(var(--stage-w) * 0.3845);
  height: calc(var(--stage-h) * 0.0442);
}

.screen.girls-club .club-box-10 {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3185));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.7551));
  width: calc(var(--stage-w) * 0.36);
  height: calc(var(--stage-h) * 0.041);
}

.club-composer {
  position: fixed;
  z-index: 6;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.135));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.902));
  width: calc(var(--stage-w) * 0.73);
  height: calc(var(--stage-h) * 0.052);
  display: grid;
  grid-template-columns: 1fr calc(var(--stage-w) * 0.11);
  gap: calc(var(--stage-w) * 0.016);
  pointer-events: auto;
}

.club-composer textarea {
  resize: none;
  border: 1px solid rgba(216, 170, 116, 0.35);
  border-radius: calc(var(--stage-w) * 0.028);
  background: rgba(5, 6, 8, 0.48);
  color: #f1eee6;
  outline: 0;
  padding: calc(var(--stage-h) * 0.008) calc(var(--stage-w) * 0.024);
  font: 400 clamp(16px, 1.6vh, 19px) "Trebuchet MS", Arial, sans-serif;
}

.club-composer button {
  border: 1px solid rgba(216, 170, 116, 0.55);
  border-radius: 999px;
  background: rgba(5, 6, 8, 0.54);
  color: var(--ice-blue);
}

.club-composer[data-state="sending"] button {
  border-color: rgba(169, 216, 255, 0.78);
  box-shadow: 0 0 10px rgba(169, 216, 255, 0.26);
}

.club-composer[data-state="sent"] button {
  border-color: rgba(92, 255, 147, 0.72);
  color: #8effb7;
}

.club-composer[data-state="error"] textarea,
.club-composer[data-state="error"] button {
  border-color: rgba(255, 92, 92, 0.78);
  box-shadow: 0 0 10px rgba(255, 92, 92, 0.22);
}

.club-composer button::before {
  content: ">";
  font: 400 clamp(20px, 3vh, 34px) "Trebuchet MS", Arial, sans-serif;
}

.back-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.04));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.035));
  width: calc(var(--stage-w) * 0.3);
  height: calc(var(--stage-h) * 0.09);
}

/* Profile-grid cover receivers */
.profile-top,
.bb-top,
.desire-top {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3919));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.0725));
  width: calc(var(--stage-w) * 0.2135);
  height: calc(var(--stage-h) * 0.1538);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 13%;
}

.profile-left-one,
.bb-left-one,
.desire-left-one {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1115));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.1911));
  width: calc(var(--stage-w) * 0.2115);
  height: calc(var(--stage-h) * 0.1469);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 13%;
}

.profile-right-one,
.bb-right-one,
.desire-right-one {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.675));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.1895));
  width: calc(var(--stage-w) * 0.2161);
  height: calc(var(--stage-h) * 0.1496);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 13%;
}

.profile-main,
.bb-center,
.desire-center {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3706));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4332));
  width: calc(var(--stage-w) * 0.2589);
  height: calc(var(--stage-h) * 0.1413);
  --slot-radius: 12%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 10%;
}

.profile-left-two,
.bb-left-two,
.desire-left-two {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.0418));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4318));
  width: calc(var(--stage-w) * 0.2157);
  height: calc(var(--stage-h) * 0.1432);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 13%;
}

.profile-right-two,
.bb-right-two,
.desire-right-two {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.74));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4313));
  width: calc(var(--stage-w) * 0.2158);
  height: calc(var(--stage-h) * 0.141);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 13%;
}

.profile-left-three,
.bb-left-three,
.desire-left-three {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1086));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6674));
  width: calc(var(--stage-w) * 0.214);
  height: calc(var(--stage-h) * 0.1331);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 13%;
}

.profile-right-three,
.bb-right-three,
.desire-right-three {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.6741));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6682));
  width: calc(var(--stage-w) * 0.2151);
  height: calc(var(--stage-h) * 0.1343);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 13%;
}

.profile-bottom,
.bb-bottom,
.desire-bottom {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3939));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.7437));
  width: calc(var(--stage-w) * 0.2136);
  height: calc(var(--stage-h) * 0.1475);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 13%;
}

.screen[data-screen="myself"] .profile-top {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3981));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.0772));
  width: calc(var(--stage-w) * 0.2038);
  height: calc(var(--stage-h) * 0.1545);
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="myself"] .profile-left-one {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1136));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.1898));
  width: calc(var(--stage-w) * 0.2038);
  height: calc(var(--stage-h) * 0.1521);
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="myself"] .profile-right-one {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.6815));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.1904));
  width: calc(var(--stage-w) * 0.2017);
  height: calc(var(--stage-h) * 0.1515);
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="myself"] .profile-main {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3726));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4347));
  width: calc(var(--stage-w) * 0.2516);
  height: calc(var(--stage-h) * 0.1503);
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="myself"] .profile-left-two {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.0446));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4347));
  width: calc(var(--stage-w) * 0.2028);
  height: calc(var(--stage-h) * 0.1503);
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="myself"] .profile-right-two {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.7484));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4341));
  width: calc(var(--stage-w) * 0.2059);
  height: calc(var(--stage-h) * 0.1509);
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="myself"] .profile-left-three {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1136));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6683));
  width: calc(var(--stage-w) * 0.2038);
  height: calc(var(--stage-h) * 0.1473);
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="myself"] .profile-right-three {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.6794));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6683));
  width: calc(var(--stage-w) * 0.2028);
  height: calc(var(--stage-h) * 0.1473);
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="myself"] .profile-bottom {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3992));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.7491));
  width: calc(var(--stage-w) * 0.2017);
  height: calc(var(--stage-h) * 0.1521);
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="myself"] .cover-slot,
.screen[data-screen="desires"] .profile-list-slot,
.screen[data-screen="blackbook"] .profile-list-slot {
  overflow: hidden !important;
  clip-path: inset(0 round var(--slot-radius, 14%));
}

.screen[data-screen="desires"] .desire-top,
.screen[data-screen="blackbook"] .bb-top {
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="desires"] .desire-top {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3985));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.0743));
  width: calc(var(--stage-w) * 0.204);
  height: calc(var(--stage-h) * 0.1569);
}

.screen[data-screen="blackbook"] .bb-top {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.39));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.0748));
  width: calc(var(--stage-w) * 0.2189);
  height: calc(var(--stage-h) * 0.161);
}

.screen[data-screen="desires"] .desire-center,
.screen[data-screen="blackbook"] .bb-center {
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="desires"] .desire-center {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3698));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4359));
  width: calc(var(--stage-w) * 0.2572);
  height: calc(var(--stage-h) * 0.1491);
}

.screen[data-screen="blackbook"] .bb-center {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.373));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4327));
  width: calc(var(--stage-w) * 0.2582);
  height: calc(var(--stage-h) * 0.1544);
}

.screen[data-screen="desires"] .desire-left-one,
.screen[data-screen="blackbook"] .bb-left-one {
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="desires"] .desire-left-one {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1126));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.191));
  width: calc(var(--stage-w) * 0.2062);
  height: calc(var(--stage-h) * 0.1515);
}

.screen[data-screen="blackbook"] .bb-left-one {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1063));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.1867));
  width: calc(var(--stage-w) * 0.2189);
  height: calc(var(--stage-h) * 0.1586);
}

.screen[data-screen="desires"] .desire-right-one,
.screen[data-screen="blackbook"] .bb-right-one {
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="desires"] .desire-right-one {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.6801));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.191));
  width: calc(var(--stage-w) * 0.2051);
  height: calc(var(--stage-h) * 0.1515);
}

.screen[data-screen="blackbook"] .bb-right-one {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.6716));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.1867));
  width: calc(var(--stage-w) * 0.2189);
  height: calc(var(--stage-h) * 0.1586);
}

.screen[data-screen="desires"] .desire-left-two,
.screen[data-screen="blackbook"] .bb-left-two {
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="desires"] .desire-left-two {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.0436));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4359));
  width: calc(var(--stage-w) * 0.2062);
  height: calc(var(--stage-h) * 0.1485);
}

.screen[data-screen="blackbook"] .bb-left-two {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.034));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4309));
  width: calc(var(--stage-w) * 0.2221);
  height: calc(var(--stage-h) * 0.158);
}

.screen[data-screen="desires"] .desire-right-two,
.screen[data-screen="blackbook"] .bb-right-two {
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="desires"] .desire-right-two {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.746));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4359));
  width: calc(var(--stage-w) * 0.2104);
  height: calc(var(--stage-h) * 0.1485);
}

.screen[data-screen="blackbook"] .bb-right-two {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.7396));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4309));
  width: calc(var(--stage-w) * 0.2232);
  height: calc(var(--stage-h) * 0.1574);
}

.screen[data-screen="desires"] .desire-left-three,
.screen[data-screen="blackbook"] .bb-left-three {
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="desires"] .desire-left-three {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1126));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6695));
  width: calc(var(--stage-w) * 0.2062);
  height: calc(var(--stage-h) * 0.1455);
}

.screen[data-screen="blackbook"] .bb-left-three {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1052));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6643));
  width: calc(var(--stage-w) * 0.22);
  height: calc(var(--stage-h) * 0.1538);
}

.screen[data-screen="desires"] .desire-right-three,
.screen[data-screen="blackbook"] .bb-right-three {
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="desires"] .desire-right-three {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.6791));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6695));
  width: calc(var(--stage-w) * 0.2051);
  height: calc(var(--stage-h) * 0.1455);
}

.screen[data-screen="blackbook"] .bb-right-three {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.6695));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6643));
  width: calc(var(--stage-w) * 0.221);
  height: calc(var(--stage-h) * 0.1544);
}

.screen[data-screen="desires"] .desire-bottom,
.screen[data-screen="blackbook"] .bb-bottom {
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
}

.screen[data-screen="desires"] .desire-bottom {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3985));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.7491));
  width: calc(var(--stage-w) * 0.204);
  height: calc(var(--stage-h) * 0.1515);
}

.screen[data-screen="blackbook"] .bb-bottom {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3911));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.7451));
  width: calc(var(--stage-w) * 0.2168);
  height: calc(var(--stage-h) * 0.1586);
}

/* Description */
.screen[data-screen="description"] .profile-save-button {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.425));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.018));
  width: calc(var(--stage-w) * 0.15);
  height: calc(var(--stage-h) * 0.026);
  border: 1px solid rgba(216, 170, 116, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 238, 192, 0.18), rgba(18, 12, 8, 0.42));
  color: var(--gold);
  font: 800 clamp(11px, 1.24vh, 17px) Georgia, "Times New Roman", serif;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 0 4px rgba(15, 6, 0, 0.92), 0 0 10px rgba(216, 170, 116, 0.38);
  box-shadow: inset 0 0 10px rgba(255, 238, 192, 0.12), 0 0 12px rgba(216, 170, 116, 0.18);
  z-index: 7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.screen[data-screen="description"] .profile-save-button:active {
  transform: translateY(1px);
}

.screen[data-screen="description"] .profile-save-button[data-state="saved"] {
  border-color: rgba(92, 255, 147, 0.72);
  color: #8effb7;
  box-shadow: inset 0 0 10px rgba(92, 255, 147, 0.13), 0 0 12px rgba(92, 255, 147, 0.2);
}

.screen[data-screen="description"] .profile-save-button[data-state="error"] {
  border-color: rgba(255, 92, 92, 0.72);
  color: #ff9a9a;
  box-shadow: inset 0 0 10px rgba(255, 92, 92, 0.13), 0 0 12px rgba(255, 92, 92, 0.2);
}

.profile-display-name {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.202));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.116));
  width: calc(var(--stage-w) * 0.596);
  height: calc(var(--stage-h) * 0.058);
  line-height: calc(var(--stage-h) * 0.058);
  text-align: center;
  font-size: clamp(18px, 2.15vh, 32px);
  text-transform: none;
}

.description-bio {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.19));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.257));
  width: calc(var(--stage-w) * 0.62);
  height: calc(var(--stage-h) * 0.268);
  resize: none;
  overflow: hidden;
  font-size: clamp(15px, 1.78vh, 25px);
  line-height: 1.35;
  text-align: center;
  text-transform: none;
}

.profile-tags {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.215));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.493));
  width: calc(var(--stage-w) * 0.57);
  min-height: calc(var(--stage-h) * 0.032);
  color: var(--gold);
  font-size: clamp(12px, 1.42vh, 20px);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 0 4px rgba(15, 6, 0, 0.9), 0 0 10px rgba(216, 170, 116, 0.28);
  pointer-events: none;
  z-index: 4;
}

.profile-select-field {
  position: fixed;
  z-index: 3;
  display: block;
}

.profile-control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  outline: 0;
  box-shadow: none;
  text-align: center;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.profile-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(15, 6, 0, 0.9), 0 0 10px rgba(216, 170, 116, 0.28);
  pointer-events: none;
  z-index: 1;
}

.profile-menu {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: min(100%, 220px);
  max-height: 116px;
  display: none;
  transform: translateX(-50%);
  overflow: auto;
  padding: 4px;
  border: 1px solid rgba(216, 170, 116, 0.65);
  background: rgba(3, 3, 3, 0.94);
  box-shadow: 0 0 14px rgba(216, 170, 116, 0.28);
  z-index: 12;
  -webkit-overflow-scrolling: touch;
}

.profile-age .profile-menu {
  top: calc(100% + 4px);
  bottom: auto;
}

.profile-select-field.open .profile-menu {
  display: grid;
  gap: 2px;
}

.profile-menu button {
  min-height: 24px;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: 700 clamp(10px, 1.1vh, 15px) Georgia, "Times New Roman", serif;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(15, 6, 0, 0.9), 0 0 8px rgba(216, 170, 116, 0.22);
  cursor: pointer;
}

.profile-menu button:active {
  background: rgba(216, 170, 116, 0.16);
}

.profile-age {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.175));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.585));
  width: calc(var(--stage-w) * 0.295);
  height: calc(var(--stage-h) * 0.047);
  font-size: clamp(12px, 1.35vh, 18px);
}

.profile-position {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.688));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.585));
  width: calc(var(--stage-w) * 0.255);
  height: calc(var(--stage-h) * 0.047);
  font-size: clamp(11px, 1.2vh, 17px);
}

.profile-height {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.205));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.656));
  width: calc(var(--stage-w) * 0.265);
  height: calc(var(--stage-h) * 0.043);
  font-size: clamp(12px, 1.35vh, 18px);
}

.profile-weight {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.688));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.656));
  width: calc(var(--stage-w) * 0.255);
  height: calc(var(--stage-h) * 0.043);
  font-size: clamp(12px, 1.35vh, 18px);
}

.profile-ethnicity,
.profile-relationship,
.profile-looking,
.profile-body-type {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.288));
  width: calc(var(--stage-w) * 0.655);
  height: calc(var(--stage-h) * 0.044);
  font-size: clamp(11px, 1.22vh, 17px);
}

.profile-ethnicity {
  top: calc(var(--stage-top) + (var(--stage-h) * 0.724));
}

.profile-relationship {
  top: calc(var(--stage-top) + (var(--stage-h) * 0.791));
}

.profile-looking {
  top: calc(var(--stage-top) + (var(--stage-h) * 0.859));
}

.profile-body-type {
  top: calc(var(--stage-top) + (var(--stage-h) * 0.927));
}

.desire-back {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.04));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.035));
  width: calc(var(--stage-w) * 0.3);
  height: calc(var(--stage-h) * 0.09);
}

.desire-edit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.68));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.035));
  width: calc(var(--stage-w) * 0.28);
  height: calc(var(--stage-h) * 0.09);
}

/* Travels */
.travel-back-hit {
  position: fixed;
  left: 0;
  top: 0;
  width: max(calc(var(--stage-w) * 0.34), 96px);
  height: max(calc(var(--stage-h) * 0.18), 96px);
  z-index: 20;
}

.travel-field {
  position: fixed;
  z-index: 3;
}

.travel-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  outline: 0;
  box-shadow: none;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.travel-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(15, 6, 0, 0.9), 0 0 10px rgba(216, 170, 116, 0.28);
  pointer-events: none;
}

.travel-destination {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.215));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.228));
  width: calc(var(--stage-w) * 0.57);
  height: calc(var(--stage-h) * 0.027);
  font-size: clamp(14px, 1.52vh, 23px);
}

.travel-arrival {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.19));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.311));
  width: calc(var(--stage-w) * 0.265);
  height: calc(var(--stage-h) * 0.026);
  font-size: clamp(12px, 1.34vh, 20px);
}

.travel-departure {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.545));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.311));
  width: calc(var(--stage-w) * 0.265);
  height: calc(var(--stage-h) * 0.026);
  font-size: clamp(12px, 1.34vh, 20px);
}

.travel-set {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.37));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.362));
  width: calc(var(--stage-w) * 0.26);
  height: calc(var(--stage-h) * 0.046);
}

.traveler-feed {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.69));
  width: calc(var(--stage-w) * 0.8);
  height: calc(var(--stage-h) * 0.21);
  display: grid;
  align-content: start;
  gap: 7px;
  overflow-y: auto;
  padding: 4px 8px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(15, 6, 0, 0.92), 0 0 10px rgba(216, 170, 116, 0.24);
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 170, 116, 0.45) transparent;
  -webkit-overflow-scrolling: touch;
  z-index: 4;
}

.traveler-feed::-webkit-scrollbar {
  width: 4px;
}

.traveler-feed::-webkit-scrollbar-thumb {
  background: rgba(216, 170, 116, 0.45);
  border-radius: 999px;
}

.travel-trip {
  display: grid;
  gap: 2px;
  min-height: 38px;
  padding: 5px 8px;
  border: 1px solid rgba(216, 170, 116, 0.28);
  border-radius: 8px;
  background: rgba(7, 5, 4, 0.26);
}

.travel-trip strong {
  overflow: hidden;
  color: var(--gold);
  font-size: clamp(12px, 1.34vh, 19px);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.travel-trip span {
  overflow: hidden;
  color: rgba(255, 229, 175, 0.86);
  font-size: clamp(10px, 1.12vh, 15px);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-load {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.33));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.41));
  width: calc(var(--stage-w) * 0.34);
  height: calc(var(--stage-h) * 0.18);
}

.map-person {
  position: fixed;
}

.presence-slot::after {
  content: "";
  position: absolute;
  inset: -1%;
  display: none;
  border: max(1px, calc(var(--stage-w) * 0.0026)) solid transparent;
  border-radius: var(--slot-radius, 14%);
  pointer-events: none;
}

.profile-list-slot[data-profile-id]::after {
  content: "";
  position: absolute;
  inset: -1%;
  display: none;
  border: max(1px, calc(var(--stage-w) * 0.0026)) solid rgba(37, 255, 91, 0.46);
  border-radius: var(--slot-radius, 14%);
  box-shadow: 0 0 8px rgba(37, 255, 91, 0.28), inset 0 0 5px rgba(37, 255, 91, 0.14);
  pointer-events: none;
}

.slot-debug .presence-slot::after,
.slot-debug .profile-list-slot[data-profile-id]::after {
  content: "";
  position: absolute;
  inset: 11%;
  z-index: 8;
  border: 1px dashed rgba(217, 168, 78, 0.88);
  border-radius: calc(var(--slot-radius, 16%) * 0.82);
  background: transparent;
  filter: none;
  box-shadow: none;
  pointer-events: none;
}

.profile-list-slot[data-presence="offline"]::after {
  border-color: rgba(222, 37, 44, 0.46);
  box-shadow: 0 0 8px rgba(222, 37, 44, 0.24), inset 0 0 5px rgba(222, 37, 44, 0.12);
}

.presence-slot[data-presence="online"]::after {
  display: block;
  border-color: rgba(37, 255, 91, 0.46);
  box-shadow: 0 0 8px rgba(37, 255, 91, 0.28), inset 0 0 5px rgba(37, 255, 91, 0.14);
}

.presence-slot[data-presence="offline"]::after {
  display: block;
  border-color: rgba(222, 37, 44, 0.46);
  box-shadow: 0 0 8px rgba(222, 37, 44, 0.24), inset 0 0 5px rgba(222, 37, 44, 0.12);
}

.map-top {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3919));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.0725));
  width: calc(var(--stage-w) * 0.2135);
  height: calc(var(--stage-h) * 0.1538);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 12%;
}

.map-left-one {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1115));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.1911));
  width: calc(var(--stage-w) * 0.2115);
  height: calc(var(--stage-h) * 0.1469);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 12%;
}

.map-right-one {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.675));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.1895));
  width: calc(var(--stage-w) * 0.2161);
  height: calc(var(--stage-h) * 0.1496);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 12%;
}

.map-center {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3706));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4332));
  width: calc(var(--stage-w) * 0.2589);
  height: calc(var(--stage-h) * 0.1413);
  --slot-radius: 12%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 8%;
}

.map-left-two {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.0418));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4318));
  width: calc(var(--stage-w) * 0.2157);
  height: calc(var(--stage-h) * 0.1432);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 12%;
}

.map-right-two {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.74));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.4313));
  width: calc(var(--stage-w) * 0.2158);
  height: calc(var(--stage-h) * 0.141);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 12%;
}

.map-left-three {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.1086));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6674));
  width: calc(var(--stage-w) * 0.214);
  height: calc(var(--stage-h) * 0.1331);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 12%;
}

.map-right-three {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.6741));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.6682));
  width: calc(var(--stage-w) * 0.2151);
  height: calc(var(--stage-h) * 0.1343);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 12%;
}

.map-bottom {
  left: calc(var(--stage-left) + (var(--stage-w) * 0.3939));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.7437));
  width: calc(var(--stage-w) * 0.2136);
  height: calc(var(--stage-h) * 0.1475);
  --slot-radius: 17%;
  --media-left: 0%;
  --media-top: 0%;
  --media-width: 100%;
  --media-height: 100%;
  --photo-radius: 12%;
}

.person-card {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.13));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.032));
  width: calc(var(--stage-w) * 0.74);
  height: calc(var(--stage-h) * 0.05);
  z-index: 6;
  color: var(--gold);
  text-align: center;
  pointer-events: none;
}

.person-card img {
  display: none;
}

.person-card div {
  position: static;
  width: 100%;
  text-align: center;
  font: 700 clamp(16px, 2.6vh, 28px) Georgia, "Times New Roman", serif;
  color: var(--gold);
  text-shadow: 0 0 4px #000, 0 0 10px rgba(216, 170, 116, 0.35);
}

.message-header div {
  font: 700 clamp(14px, 2vh, 26px) Georgia, "Times New Roman", serif;
  color: var(--message-gold);
  text-shadow: 0 0 4px #000, 0 0 10px rgba(184, 75, 90, 0.34);
}

.person-message-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.28));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.91));
  width: calc(var(--stage-w) * 0.18);
  height: calc(var(--stage-h) * 0.08);
}

.person-description-hit {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.54));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.91));
  width: calc(var(--stage-w) * 0.18);
  height: calc(var(--stage-h) * 0.08);
}

.person-message-hit::before,
.person-description-hit::before {
  content: "";
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(216, 170, 116, 0.8);
  border-radius: 999px;
  background: rgba(3, 3, 3, 0.45);
  box-shadow: 0 0 8px rgba(216, 170, 116, 0.25);
}

.person-message-hit::after {
  content: "";
  position: absolute;
  left: 32%;
  top: 34%;
  width: 36%;
  height: 24%;
  border: 1px solid var(--gold);
  border-radius: 18% 18% 22% 22%;
  background:
    linear-gradient(32deg, transparent 47%, rgba(216, 170, 116, 0.9) 49%, rgba(216, 170, 116, 0.9) 51%, transparent 53%),
    linear-gradient(148deg, transparent 47%, rgba(216, 170, 116, 0.9) 49%, rgba(216, 170, 116, 0.9) 51%, transparent 53%);
  box-shadow: 0 0 6px rgba(216, 170, 116, 0.5);
}

.person-message-hit[data-unread]::before {
  border-color: rgba(184, 75, 90, 0.9);
  box-shadow: 0 0 10px rgba(184, 75, 90, 0.55), inset 0 0 12px rgba(184, 75, 90, 0.18);
}

.person-message-hit[data-unread] .unused {
  display: none;
}

.person-message-hit[data-unread]::after {
  border-color: var(--ice-blue);
  box-shadow: 0 0 8px rgba(169, 216, 255, 0.68);
}

.person-message-hit[data-unread] {
  color: var(--message-gold);
}

.person-message-hit[data-unread]::marker {
  content: "";
}

.person-message-hit[data-unread]::before {
  content: attr(data-unread);
  display: grid;
  place-items: center;
  color: var(--message-gold);
  font: 800 clamp(11px, 1.8vh, 18px) Georgia, "Times New Roman", serif;
  text-shadow: 0 0 5px #000, 0 0 8px rgba(184, 75, 90, 0.6);
}

.person-description-hit::after {
  content: "i";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  font: 700 clamp(18px, 3.2vh, 34px) Georgia, "Times New Roman", serif;
  text-shadow: 0 0 6px rgba(216, 170, 116, 0.5);
}

.message-header {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.08));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.055));
  width: calc(var(--stage-w) * 0.72);
  height: calc(var(--stage-h) * 0.09);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: calc(var(--stage-w) * 0.04);
  padding: 0 calc(var(--stage-w) * 0.04);
  pointer-events: none;
}

.message-header img {
  width: calc(var(--stage-w) * 0.115);
  height: calc(var(--stage-w) * 0.115);
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(216, 170, 116, 0.78);
}

.message-actions {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.79));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.058));
  width: calc(var(--stage-w) * 0.14);
  min-height: calc(var(--stage-h) * 0.06);
  z-index: 9;
}

.message-menu-button,
.message-tool,
.message-send,
.message-menu button {
  border: 1px solid rgba(184, 75, 90, 0.68);
  background: rgba(6, 8, 10, 0.34);
  color: var(--message-gold);
  box-shadow:
    inset 0 0 10px rgba(169, 216, 255, 0.08),
    0 0 14px rgba(184, 75, 90, 0.16);
  -webkit-tap-highlight-color: transparent;
}

.message-menu-button {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(var(--stage-w) * 0.09);
  height: calc(var(--stage-w) * 0.09);
  border-radius: 50%;
}

.message-menu-button::before,
.message-menu-button::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 44%;
  transform: translateX(-50%);
  border-top: 2px solid var(--ice-blue);
  filter: drop-shadow(0 0 4px rgba(169, 216, 255, 0.62));
}

.message-menu-button::before {
  top: 35%;
  box-shadow: 0 calc(var(--stage-w) * 0.014) 0 var(--ice-blue), 0 calc(var(--stage-w) * 0.028) 0 var(--ice-blue);
}

.message-menu-button::after {
  top: 66%;
  width: 18%;
  opacity: 0.9;
}

.message-menu {
  position: absolute;
  right: 0;
  top: calc(var(--stage-w) * 0.105);
  display: none;
  width: calc(var(--stage-w) * 0.31);
  padding: calc(var(--stage-w) * 0.018);
  border: 1px solid rgba(169, 216, 255, 0.26);
  border-radius: calc(var(--stage-w) * 0.035);
  background: rgba(3, 5, 7, 0.58);
  box-shadow:
    inset 0 0 18px rgba(169, 216, 255, 0.08),
    0 0 18px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(11px);
}

.message-actions.open .message-menu {
  display: grid;
  gap: calc(var(--stage-h) * 0.008);
}

.message-menu button {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--stage-w) * 0.05) 1fr;
  align-items: center;
  gap: calc(var(--stage-w) * 0.018);
  min-height: calc(var(--stage-h) * 0.042);
  padding: 0 calc(var(--stage-w) * 0.025);
  border-radius: calc(var(--stage-w) * 0.025);
  text-align: left;
  font: 700 clamp(10px, 1.45vh, 16px) Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

.message-menu button span {
  width: calc(var(--stage-w) * 0.04);
  height: calc(var(--stage-w) * 0.04);
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.message-menu button[data-message-action="block"] span::before,
.message-menu button[data-message-action="spam"] span::before {
  content: "";
  position: absolute;
  width: calc(var(--stage-w) * 0.036);
  transform: translate(1px, calc(var(--stage-w) * 0.018)) rotate(-35deg);
  border-top: 1px solid currentColor;
}

.message-menu button[data-message-action="report"] span {
  border-radius: 24% 24% 50% 50%;
}

.message-menu button[data-message-action="spam"] {
  color: var(--ice-blue);
}

.message-thread {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.08));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.17));
  width: calc(var(--stage-w) * 0.84);
  height: calc(var(--stage-h) * 0.59);
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(var(--stage-h) * 0.014);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  padding: calc(var(--stage-h) * 0.006) 0 calc(var(--stage-h) * 0.018);
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.message-thread::-webkit-scrollbar {
  display: none;
}

.message-bubble,
.message-media-preview,
.message-location-share {
  max-width: 74%;
  border-radius: calc(var(--stage-w) * 0.035);
  background:
    linear-gradient(135deg, rgba(169, 216, 255, 0.075), rgba(184, 75, 90, 0.075)),
    rgba(4, 6, 8, 0.34);
  box-shadow:
    inset 0 0 18px rgba(169, 216, 255, 0.06),
    0 0 12px rgba(184, 75, 90, 0.14);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.message-bubble,
.message-location-share {
  padding: calc(var(--stage-h) * 0.012) calc(var(--stage-w) * 0.035);
  font: 700 clamp(15px, 2.05vh, 24px) Georgia, "Times New Roman", serif;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.message-bubble.sent {
  align-self: flex-end;
  border: 1px solid rgba(184, 75, 90, 0.42);
  color: var(--message-gold);
  text-shadow: 0 0 4px #000, 0 0 9px rgba(184, 75, 90, 0.28);
}

.message-bubble.received {
  align-self: flex-start;
  border: 1px solid rgba(107, 151, 122, 0.48);
  color: #8fb395;
  text-shadow: 0 0 4px #000, 0 0 9px rgba(107, 151, 122, 0.26);
}

.message-meta {
  margin-top: calc(var(--stage-h) * 0.005);
  color: rgba(242, 238, 230, 0.72);
  font: 700 clamp(9px, 1.12vh, 14px) Georgia, "Times New Roman", serif;
  line-height: 1;
  text-align: right;
  text-transform: lowercase;
}

.message-bubble.received .message-meta {
  text-align: left;
}

.message-location-share {
  color: var(--ice-blue);
  border-color: rgba(169, 216, 255, 0.45);
}

.message-media-preview {
  width: calc(var(--stage-w) * 0.38);
  height: calc(var(--stage-w) * 0.38);
  overflow: hidden;
}

.message-media-preview img,
.message-media-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.message-composer {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.075));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.805));
  width: calc(var(--stage-w) * 0.85);
  min-height: calc(var(--stage-h) * 0.105);
  z-index: 8;
  display: grid;
  grid-template-rows: calc(var(--stage-h) * 0.043) calc(var(--stage-h) * 0.041);
  gap: calc(var(--stage-h) * 0.008);
  padding: calc(var(--stage-h) * 0.008) calc(var(--stage-w) * 0.022);
  border: 1px solid rgba(169, 216, 255, 0.22);
  border-radius: calc(var(--stage-w) * 0.032);
  background:
    linear-gradient(135deg, rgba(169, 216, 255, 0.07), rgba(184, 75, 90, 0.055)),
    rgba(2, 4, 6, 0.38);
  box-shadow:
    inset 0 0 22px rgba(169, 216, 255, 0.06),
    inset 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 18px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(12px);
}

#messageText {
  width: 100%;
  height: calc(var(--stage-h) * 0.043);
  border: 0;
  background: transparent;
  color: #f2eee6;
  caret-color: var(--ice-blue);
  padding: calc(var(--stage-h) * 0.004) calc(var(--stage-w) * 0.02);
  font: 700 clamp(15px, 2.05vh, 24px) Georgia, "Times New Roman", serif;
  line-height: 1.2;
  text-shadow: 0 0 4px #000, 0 0 9px rgba(184, 75, 90, 0.24);
}

.message-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--stage-w) * 0.035);
}

.message-tool,
.message-send {
  position: relative;
  width: calc(var(--stage-w) * 0.096);
  height: calc(var(--stage-w) * 0.072);
  border-radius: calc(var(--stage-w) * 0.023);
}

.message-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.message-media-tool::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 25%;
  width: 52%;
  height: 44%;
  border: 1px solid var(--ice-blue);
  border-radius: 12%;
  box-shadow:
    0 0 7px rgba(169, 216, 255, 0.38),
    calc(var(--stage-w) * 0.016) calc(var(--stage-w) * -0.012) 0 -1px rgba(6, 8, 10, 0.95),
    calc(var(--stage-w) * 0.016) calc(var(--stage-w) * -0.012) 0 0 rgba(184, 75, 90, 0.72);
}

.message-media-tool::after {
  content: "";
  position: absolute;
  left: 29%;
  top: 49%;
  width: 34%;
  height: 16%;
  background:
    linear-gradient(135deg, transparent 48%, var(--message-gold) 50%, transparent 54%),
    linear-gradient(45deg, transparent 45%, var(--message-gold) 48%, transparent 52%);
  filter: drop-shadow(0 0 5px rgba(184, 75, 90, 0.48));
}

.message-location-tool::before {
  content: "";
  position: absolute;
  left: 35%;
  top: 22%;
  width: 30%;
  height: 42%;
  border: 1px solid var(--ice-blue);
  border-radius: 55% 55% 55% 0;
  transform: rotate(-45deg);
  box-shadow: 0 0 7px rgba(169, 216, 255, 0.48);
}

.message-location-tool::after {
  content: "";
  position: absolute;
  left: 46%;
  top: 36%;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  background: var(--message-gold);
  box-shadow: 0 0 6px rgba(184, 75, 90, 0.6);
}

.message-send {
  margin-left: auto;
  border-radius: 50%;
}

.message-send::before {
  content: "";
  position: absolute;
  left: 29%;
  top: 27%;
  width: 42%;
  height: 42%;
  border-top: 2px solid var(--ice-blue);
  border-right: 2px solid var(--ice-blue);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 5px rgba(169, 216, 255, 0.6));
}

.message-send::after {
  content: "";
  position: absolute;
  left: 25%;
  top: 48%;
  width: 43%;
  border-top: 2px solid var(--ice-blue);
  filter: drop-shadow(0 0 5px rgba(169, 216, 255, 0.6));
}

.photo-viewer-screen {
  background: transparent;
}

.photo-viewer-close {
  position: fixed;
  inset: 0;
  z-index: 4;
  cursor: pointer;
}

#profileViewerPhoto {
  position: fixed;
  left: calc(var(--stage-left) + (var(--stage-w) * 0.045));
  top: calc(var(--stage-top) + (var(--stage-h) * 0.05));
  width: calc(var(--stage-w) * 0.91);
  height: calc(var(--stage-h) * 0.9);
  z-index: 3;
  object-fit: contain;
  border-radius: 3%;
  box-shadow: 0 0 22px rgba(216, 170, 116, 0.22);
  pointer-events: none;
}

.cover-slot.has-image,
.map-person,
.profile-view-slot,
.profile-list-slot {
  overflow: hidden !important;
}

.cover-slot > img,
.cover-slot > video,
.map-person > img,
.map-person > video,
.map-person > .profile-photo,
.profile-view-slot > img,
.profile-view-slot > video,
.profile-view-slot > .profile-photo,
.profile-list-slot > img,
.profile-list-slot > video,
.profile-list-slot > .profile-photo {
  position: absolute !important;
  left: var(--media-left, 0) !important;
  top: var(--media-top, 0) !important;
  width: var(--media-width, 100%) !important;
  height: var(--media-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: var(--media-width, 100%) !important;
  min-height: var(--media-height, 100%) !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: var(--slot-radius, 14%) !important;
}