/* Page base — same palette family as your corridors */
:root{
  --bg: #120d1c;
  --ink: #e0d6f2;
  --lavender: #a78bfa;
  --lavender-2: #c4b5fd;
  --panel-line: rgba(167,139,250,0.28);
  --panel-line-strong: rgba(196,181,253,0.45);
  --panel-bg: rgba(255,255,255,0.04);
}

html,body{
  background:#120d1c;
  color:var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  line-height:1.65;
  margin:0;
}

/* faint “rails” like your other corridors */
.rails{position:fixed;top:110px;bottom:110px;width:2px;background:radial-gradient(closest-side,rgba(165,139,250,.25),transparent 70%);pointer-events:none;z-index:0;opacity:.6}
.rails--left{left:84px}
.rails--right{right:84px}

/* nav */
.bts-nav{
  display:flex;gap:.6rem;justify-content:center;
  padding:1.1rem .75rem .6rem;
  position:sticky;top:0;backdrop-filter:blur(6px);
  background:linear-gradient(180deg,rgba(18,13,28,.72),rgba(18,13,28,.35) 60%,transparent);
  z-index:5;
}
.bts-btn{
  color:#f5e8ff;text-decoration:none;font-weight:700;
  background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.35);
  padding:.5rem .85rem;border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  transition:.18s ease;
}
.bts-btn:hover{transform:translateY(-1px);background:rgba(196,181,253,.18);border-color:var(--panel-line-strong)}

/* header */
.bts-header{max-width:1000px;margin:0 auto 1rem;padding:0 1.5rem; position:relative;z-index:1}
.bts-header h1{margin:.2rem 0 .4rem;color:#f1ccff;text-shadow:0 0 16px rgba(167,139,250,.35)}
.bts-header p{max-width:860px}

/* frames & panels share the same bubble frame */
.bts-frame,.bts-panel{
  margin:2rem auto; padding:1.25rem 1.5rem; max-width:1000px;
  background:var(--panel-bg);
  border:1px solid var(--panel-line); border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  position:relative; z-index:1;
}
.bts-frame:hover,.bts-panel:hover{transform:translateY(-2px);background:rgba(255,255,255,.055);border-color:var(--panel-line-strong);box-shadow:0 10px 28px rgba(0,0,0,.42)}
.bts-frame h2{margin-top:.2rem}

/* quotes */
.bts-frame blockquote{
  margin:1.5em auto; padding:1em 1.5em; max-width:700px;
  font-style:italic; font-size:1.05em; line-height:1.6; color:#e0dfff;
  background:rgba(255,255,255,.05); border-left:4px solid var(--lavender); border-radius:6px;
}
.bts-frame blockquote:hover{
  background:rgba(167,139,250,.12); border-left-color:var(--lavender-2);
  transform:translateX(4px); transition:all .25s ease-in-out; box-shadow:0 0 12px rgba(167,139,250,.25);
}

/* images inside panels */
.bts-panel img{display:block;width:100%;border-radius:12px;box-shadow:0 3px 14px rgba(0,0,0,.35)}
.bts-panel figcaption{margin-top:.6rem;font-size:.92rem;color:#dcd7ff;font-style:italic;opacity:.9}

/* Only the panel right after Frame 4 shows the time badge */
.bts-panel::after{content:none}
#frame-4 + .bts-panel::after{
  content:"3:47 AM";
  position:absolute; top:12px; right:12px;
  padding:4px 8px; font-size:.8rem; letter-spacing:.03em;
  background:rgba(0,0,0,.55); color:#f5f3ff; border:1px solid rgba(255,255,255,.18);
  border-radius:6px; backdrop-filter:blur(2px);
}

/* outro uses same bubble style; nothing extra needed */

/* center helper */
.center{text-align:center}

/* back-to-top fab */
.top-fab{
  position:fixed; right:18px; bottom:20px; z-index:6;
  width:40px; height:40px; border-radius:999px; cursor:pointer;
  color:#0d0d0d; font-weight:800; border:none;
  background: radial-gradient(80% 80% at 30% 25%, #ffd2ff, #b077ff 80%);
  box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 20px rgba(176,119,255,.35);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.top-fab:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.5), 0 0 26px rgba(176,119,255,.45)}
@media (max-width:720px){ .rails{display:none} }

.frame {
  background: rgba(30, 20, 40, 0.7);
  border: 1px solid rgba(200, 150, 255, 0.2);
  border-radius: 10px;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 0 10px rgba(180, 120, 255, 0.15);
}

.frame h3 {
  color: #ffb3ff;
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
}

.frame blockquote {
  font-style: italic;
  color: #ccccff;
  margin-top: 1.2rem;
  border-left: 3px solid #cc99ff;
  padding-left: 1rem;
  opacity: 0.9;
}