/* Overlay that rides on top of the donor experience.
   It never touches a node the bundle's React owns — it measures them and sits beside
   them. Moving a React-owned node works right up until React inserts a sibling and
   throws on a node it can no longer find.

   Units are rem on purpose: the shell's html font-size is fluid
   (clamp(5px, min(.520833vw, .925926vh), 1000px)), so rem tracks the donor's own
   scaling at every viewport instead of drifting away from it. */

#rs-shell {
  position: fixed;
  inset: 0;
  /* above the reader: the brand bar has to stay visible while the reader is open */
  z-index: 9600;
  pointer-events: none;
  font-family: Baloo2, ui-sans-serif, system-ui, sans-serif;
  color: var(--color-beige-dark, #ffebbc);

  /* set from JS after measuring the donor's own controls */
  --rs-top: 2rem;
  --rs-right: 12rem;
  --rs-brand-top: 2rem;
  --rs-brand-left: 2rem;
  --rs-ball: 5.6rem;
}

/* ------------------------------------------------------------------ header */
/* The header follows the donor's controls in, because it belongs to the ride. */

.rs-header {
  position: absolute;
  top: var(--rs-top);
  right: var(--rs-right);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#rs-shell[data-ready='1'] .rs-header {
  opacity: 1;
}

.rs-btn,
.rs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.2rem solid currentColor;
  border-radius: 10rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.rs-btn {
  height: 4.4rem;
  padding: 0 2rem;
  font-size: 1.75rem;
  line-height: 1;
}

.rs-icon {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
}

.rs-icon svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: currentColor;
  display: block;
}

.rs-btn:hover,
.rs-icon:hover {
  background: var(--color-beige-dark, #ffebbc);
  color: #000;
  text-shadow: none;
}

.rs-btn.rs-primary {
  background: var(--color-beige-dark, #ffebbc);
  color: #000;
  text-shadow: none;
}

.rs-btn.rs-primary:hover {
  background: var(--color-beige, #fff6df);
}

/* an address is not a word — uppercasing hex makes it harder to read, not louder */
.rs-btn[data-state='connected'] {
  background: transparent;
  color: var(--color-beige-dark, #ffebbc);
  text-shadow: 0 0 1px #000;
  text-transform: none;
  letter-spacing: 0.02em;
}

.rs-btn[data-busy='1'] {
  opacity: 0.55;
  pointer-events: none;
}

/* quieter than the two calls to action beside it */
.rs-btn.rs-ghost {
  opacity: 0.8;
}

.rs-btn.rs-ghost:hover {
  opacity: 1;
}

/* the X mark stays on screen before its link exists, so the row never changes shape */
.rs-icon[data-empty='1'] {
  cursor: default;
  opacity: 0.55;
}

.rs-icon[data-empty='1']:hover {
  background: transparent;
  color: inherit;
}

/* ------------------------------------------------------------- brand bar */
/* Ball, contract and the X mark. This one is never gated on anything: it is the row
   a visitor has to be able to see at any moment, including while the ride loads and
   while the reader is open. */

.rs-brand {
  position: absolute;
  top: var(--rs-brand-top);
  left: var(--rs-brand-left);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  pointer-events: auto;
  z-index: 2;
}

.rs-ball {
  display: block;
  width: var(--rs-ball);
  height: var(--rs-ball);
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease;
}

.rs-ball img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.rs-ball:hover {
  transform: scale(1.08);
}

.rs-ca-label {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  text-shadow: 0 0 1px #000;
}

.rs-ca-value {
  display: inline-flex;
  align-items: center;
  height: 3.6rem;
  padding: 0 1.4rem;
  border: 0.2rem solid currentColor;
  border-radius: 10rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.rs-ca-value:hover {
  background: var(--color-beige-dark, #ffebbc);
  color: #000;
  text-shadow: none;
}

.rs-ca-value[data-empty='0'] {
  text-transform: none;
  letter-spacing: 0.02em;
}

.rs-ca-value[data-empty='1'] {
  cursor: default;
}

.rs-ca-value[data-empty='1']:hover {
  background: transparent;
  color: inherit;
  text-shadow: 0 0 1px #000;
}

.rs-brand .rs-icon {
  width: 3.6rem;
  height: 3.6rem;
}

.rs-brand .rs-icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

.rs-copied {
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s ease;
  text-shadow: 0 0 1px #000;
}

.rs-copied[data-on='1'] {
  opacity: 0.85;
}

.rs-hidden {
  display: none !important;
}

/* the reader takes the screen, but the brand bar stays where it is */
html.rc-open .rs-header,
html.rc-open .the-nav,
html.rc-open .cta-scroll,
html.rc-open .scrollbar,
html.rc-open .credits-button,
html.rc-open .mute-button,
html.rc-open .fullscreen-button {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease-in-out;
}

/* our own ball replaces the donor's, which fades in late and cannot be clicked */
.nose-logo {
  display: none !important;
}

/* over the reader's paper the bar needs the reader's ink, not the sky's beige */
html.rc-open .rs-brand {
  color: #1b1a17;
}

html.rc-open .rs-ca-label,
html.rc-open .rs-ca-value,
html.rc-open .rs-copied {
  text-shadow: none;
}

html.rc-open .rs-ca-value {
  box-shadow: none;
}

html.rc-open .rs-ca-value:hover,
html.rc-open .rs-brand .rs-icon:hover {
  background: #1b1a17;
  color: #efe7d3;
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 767px) {
  #rs-shell {
    --rs-ball: 3.6rem;
  }

  .rs-header {
    gap: 0.8rem;
  }

  .rs-btn {
    height: 3.4rem;
    padding: 0 1.2rem;
    font-size: 1.35rem;
    border-width: 0.15rem;
  }

  .rs-icon {
    width: 3.4rem;
    height: 3.4rem;
    border-width: 0.15rem;
  }

  .rs-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .rs-brand {
    gap: 0.7rem;
  }

  .rs-ca-label {
    font-size: 1.2rem;
  }

  .rs-ca-value {
    height: 2.8rem;
    padding: 0 1rem;
    font-size: 1.2rem;
    border-width: 0.15rem;
  }

  .rs-brand .rs-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-width: 0.15rem;
  }

  .rs-brand .rs-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .rs-copied {
    display: none;
  }
}

/* the panel's logo may be a square on a solid background; rounding lets it read as a
   mark against the scene rather than a pasted tile */
.rs-ball img {
  border-radius: 24%;
}

/* The ride's own mute control is a thin animated squiggle that reads as decoration.
   It stays in the DOM because it owns the state and this shell clicks it, but it is not
   what a visitor should be looking for. */
.mute-button {
  opacity: 0 !important;
  pointer-events: none !important;
}

.rs-sound svg {
  fill: none;
  stroke: currentColor;
}

.rs-sound[data-muted='1'] {
  opacity: 0.65;
}