/* ===========================================================================
   exit.js's dialog.

   Its own stylesheet because it is loaded on two pages that disagree about
   almost everything — index.html inherits a content-box legacy sheet,
   present.css is border-box — so the box model is declared here and scoped to
   this subtree only, the same way #cs-warp and #dobby-layer do it.

   It reads as the page it is on: brass and IM Fell over the laboratory, glass
   and Sora over the deck.
   ========================================================================= */
#rd-exit,
#rd-exit *,
#rd-exit *::before,
#rd-exit *::after { box-sizing: border-box; }

#rd-exit {
  position: fixed;
  inset: 0;
  z-index: 100000;             /* above the elf, who is at 10000 */
  display: grid;
  grid-template-columns: minmax(0, 100%);
  place-items: center;
  padding: 1.2rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity .28s ease, visibility .28s;
}

#rd-exit.rd-exit-open { visibility: visible; opacity: 1; }

.rd-exit-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 12, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rd-exit-box {
  position: relative;
  width: min(26rem, 100%);
  padding: 1.7rem 1.5rem 1.5rem;
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(158deg, rgba(28, 32, 48, .96), rgba(12, 14, 24, .97));
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .16);
  transform: translateY(14px) scale(.97);
  transition: transform .34s cubic-bezier(.2, .9, .3, 1);
}
#rd-exit.rd-exit-open .rd-exit-box { transform: none; }

.rd-exit-eyebrow {
  margin: 0 0 .6rem;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(143, 211, 255, .8);
}

.rd-exit-title {
  margin: 0 0 .6rem;
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: #fff6e4;
}

.rd-exit-note {
  margin: 0 auto 1.3rem;
  max-width: 30ch;
  font-size: .93rem;
  line-height: 1.5;
  color: rgba(232, 236, 251, .68);
}

.rd-exit-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
}

.rd-exit-btn {
  padding: .68rem 1.15rem;
  font: inherit;
  font-family: ui-monospace, monospace;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: rgba(232, 236, 251, .85);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22,.9,.3,1), background .25s ease, border-color .25s ease;
}
.rd-exit-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1); }
.rd-exit-btn:focus-visible { outline: 2px solid #8fd3ff; outline-offset: 3px; }

/* "stay" is the safe answer, so it is the one that looks like the button */
.rd-exit-no {
  color: #08111d;
  font-weight: 600;
  border-color: transparent;
  background: linear-gradient(120deg, #8fd3ff, #b9a6ff);
  box-shadow: 0 10px 26px rgba(143, 211, 255, .28);
}

/* --- the laboratory wears brass ---------------------------------------- */
body:has(#hero-stage) .rd-exit-box {
  border-color: rgba(226, 189, 118, .3);
  background: linear-gradient(158deg, rgba(38, 28, 16, .96), rgba(16, 12, 8, .97));
}
body:has(#hero-stage) .rd-exit-eyebrow { color: rgba(226, 189, 118, .85); }
body:has(#hero-stage) .rd-exit-title { font-family: "IM Fell English", Georgia, serif; font-weight: 400; }
body:has(#hero-stage) .rd-exit-note { font-family: "IM Fell English", Georgia, serif; color: rgba(246, 236, 216, .72); }
body:has(#hero-stage) .rd-exit-no {
  background: linear-gradient(120deg, #e2bd76, #f0d9a4);
  box-shadow: 0 10px 26px rgba(226, 189, 118, .3);
}

@media (prefers-reduced-motion: reduce) {
  #rd-exit, .rd-exit-box, .rd-exit-btn { transition-duration: .01s; }
}