.at-observatory {
  --dusk-gold: #eac890;
  --dusk-cream: #fff0d3;
  --dusk-edge: #b99a6466;
  --dusk-glass: #0b1220f2;
}

.pack-trigger-caption {
  position: absolute;
  top: calc(100% + clamp(8px, 2dvh, 20px));
  left: 50%;
  translate: -50% 0;
}

.vault-docks {
  position: absolute;
  z-index: 4;
  bottom: calc(clamp(12px, 2.2vh, 24px) + env(safe-area-inset-bottom));
  left: calc(clamp(12px, 2.5vw, 42px) + env(safe-area-inset-left));
  display: flex;
  gap: 7px;
}
.rewards-dock {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 5px 9px;
  border: 1px solid var(--dusk-edge);
  border-radius: 7px;
  color: var(--dusk-cream);
  background: var(--dusk-glass);
  text-align: left;
}
.rewards-dock:hover, .rewards-dock:focus-visible {
  border-color: var(--dusk-gold);
  background: #191d28;
}
.rewards-dock-emblem {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #a88a514d;
  border-radius: 4px;
  color: var(--dusk-gold);
  background: #c69c5d18;
}
.rewards-dock strong, .rewards-dock small { display: block; white-space: nowrap; }
.rewards-dock strong { font-size: 12px; }
.rewards-dock small { color: #d5c19d; font-size: 10px; }
.rewards-dock-arrow { width: 13px; height: 13px; margin-left: 4px; color: var(--dusk-gold); }
.contact-dock { grid-template-columns: auto 1fr; }
.at-observatory .corner-nav { border-color: var(--dusk-edge); background: var(--dusk-glass); }

.rewards-dialog {
  --reward-border: #ad905954;
  --reward-gold: #eac890;
  --reward-cream: #fff0d3;
  width: min(calc(100% - 30px), 496px);
  max-height: min(calc(100dvh - 24px), 700px);
  border-color: #a98c58;
  border-radius: 9px;
  color: #e7dfd2;
  background: #101827;
  box-shadow: 0 24px 65px #02050dd9;
}
.rewards-dialog::backdrop { background: #030710b8; }
.rewards-dialog .dialog-shell { max-height: inherit; }
.rewards-dialog .dialog-header {
  min-height: 100px;
  align-items: flex-end;
  padding: 16px 20px;
  border-color: var(--reward-border);
  background: linear-gradient(90deg, #070d19e6, #070d1940), linear-gradient(0deg, #0c1221f5, transparent 75%),
    url('/assets/dusk-observatory.webp') 50% 42% / cover;
}
.rewards-dialog .dialog-header h2 { color: var(--reward-cream); font: 700 clamp(23px, 4.8vw, 31px)/1.1 var(--serif); }
.rewards-dialog .dialog-header .icon-button {
  align-self: flex-start;
  width: 36px;
  height: 36px;
  color: var(--reward-cream);
  border-color: var(--reward-border);
  background: #0b101be6;
}
.rewards-dialog .dialog-header .icon-button:hover { border-color: var(--reward-gold); }
.rewards-dialog .dialog-content { padding: 0; }
.rewards-content { padding: 0 20px 20px; }
.rewards-list { margin: 0; padding: 0; list-style: none; }
.rewards-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding-block: 11px;
  border-bottom: 1px solid #8d7e6133;
}
.reward-emblem {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--reward-border);
  border-radius: 5px;
  color: var(--reward-gold);
  background: #cba76912;
}
.reward-copy strong { color: var(--reward-cream); font-size: 14px; }
.reward-copy p { margin-top: 2px; color: #c7c3bd; font-size: 12px; }
.reward-amount { display: flex; align-items: baseline; gap: 4px; color: var(--reward-gold); white-space: nowrap; }
.reward-amount strong { font: 700 23px/1 var(--serif); }
.reward-amount span { font-size: 11px; }

.invite-box {
  display: grid;
  gap: 8px;
  margin-top: 15px;
  padding: 12px;
  border: 1px solid var(--reward-border);
  border-radius: 6px;
  background: #0b1220;
}
.invite-box p { color: #cec5b4; font-size: 12px; }
.invite-label { color: var(--reward-cream); font-weight: 650; }
.invite-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.invite-controls input {
  min-width: 0;
  min-height: 44px;
  padding-inline: 9px;
  border: 1px solid #a98e5d6b;
  border-radius: 5px;
  color: #efdec0;
  background: #161e2d;
  font-size: 14px;
  text-overflow: ellipsis;
}
.rewards-primary {
  min-height: 44px;
  justify-self: start;
  border-color: #edc587;
  border-radius: 5px;
  color: #2c1b0d;
  background: #e4be83;
}
.rewards-primary:hover { background: #ffdfaa; }
.invite-status:empty { display: none; }
.invite-box .invite-status { color: var(--reward-gold); }

.contact-dialog {
  border-color: #aa8a556f;
  background: #101827;
}
.contact-dialog .dialog-header { border-color: #aa8a5540; }
.contact-dialog .dialog-header h2 { color: #fff0d3; font: 700 20px/1.2 var(--serif); }
.contact-reward {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 9px 11px;
  border: 1px solid #b99a6452;
  border-radius: 6px;
  color: #f1d7a4;
  background: #cba76915;
  font-size: 13px;
}
.contact-form textarea {
  width: 100%;
  min-height: 112px;
  max-height: 36dvh;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid #364668;
  border-radius: 6px;
  color: var(--text);
  background: #0b1220;
  font: 16px/1.5 var(--font);
}
.contact-form textarea:focus-visible { outline: 2px solid #ebc78e; outline-offset: 2px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-actions button { min-height: 44px; }
.contact-actions button:disabled { opacity: .62; }

@media (max-width: 740px), (orientation: landscape) and (max-height: 490px) {
  .vault-docks { flex-direction: column; align-items: flex-start; }
  .contact-dock { order: -1; }
}

@media (max-width: 740px) and (max-height: 560px) and (orientation: portrait) {
  .vault-workspace .vault-lobby {
    --pack-center: 36%;
    --pack-size: min(38vw, 22dvh);
  }
}

@media (max-width: 540px) {
  .rewards-dock { grid-template-columns: auto 1fr; min-height: 50px; gap: 6px; }
  .rewards-dock-arrow { display: none; }
  .rewards-dialog {
    width: min(100%, 496px);
    margin-inline: auto;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
  }
  .rewards-dialog .dialog-header {
    min-height: 86px;
    padding: 13px 16px;
    background: linear-gradient(90deg, #070d19e6, #070d1933), linear-gradient(0deg, #0c1221d9, transparent 75%),
      url('/assets/dusk-observatory-mobile.webp') 50% 43% / cover;
  }
  .rewards-content { padding: 0 14px 14px; }
  .reward-amount strong { font-size: 21px; }
}
@media (max-width: 360px) {
  .rewards-dock { padding-inline: 6px; }
  .rewards-dock-emblem { width: 23px; height: 29px; }
  .rewards-dock-emblem svg { width: 14px; height: 14px; }
  .rewards-dock strong { font-size: 11px; }
  .rewards-dock small { font-size: 9px; }
  .at-observatory .corner-nav a { gap: 5px; padding-inline: 7px; font-size: 11px; }
  .at-observatory .corner-nav a svg { width: 14px; height: 14px; }
  .rewards-list li { gap: 8px; }
  .reward-emblem { width: 30px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .rewards-dock, .rewards-dialog button { transition: none; }
}