/* ═══════════════════════════════════════════════════════════════
   PREMIUM.CSS  —  Black & Gold redesign
   Loads after main.css and overrides all layout/visual styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --gold:        #c9a227;
  --gold-light:  #e8c14c;
  --gold-dim:    rgba(201,162,39,.18);
  --black:       #080808;
  --black-2:     #0f0f0f;
  --black-3:     #161616;
  --ink:         #f0ede8;
  --ink-dim:     #9a9080;
  --ink-faint:   rgba(240,237,232,.06);
  --border:      rgba(201,162,39,.14);
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   24px;

  /* header */
  --header-pad-y: 12px;
  --logo-size:    52px;
  --header-height: calc(var(--header-pad-y) * 2 + var(--logo-size));
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--black);
  color: var(--ink);
  margin: 0;
  overflow-x: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}

body { padding-top: var(--header-height); }

/* Remove Webflow's black wrapper backgrounds */
.walsh-background-black,
.walsh-background-black > div,
[style*="background-color: black"] {
  background: transparent !important;
}

/* ── Typography ── */
h1,h2,h3,h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

[hidden] { display: none !important; }

/* ════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(8,8,8,.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px) saturate(130%);
  transition: border-color .3s ease;
}

.nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--header-pad-y) 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}

.brand-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  object-fit: contain;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 15px; letter-spacing: 1.5px; color: var(--ink); font-family: 'Inter', sans-serif; }
.brand-text span   { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }

.nav-links {
  display: flex; align-items: center; gap: 6px;
}

.nav-links a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .3px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color .18s ease, background .18s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,.05); }

.nav-cta {
  margin-left: 4px;
  padding: 9px 18px !important;
  background: var(--gold) !important;
  color: #080808 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 999px !important;
  border: none !important;
  letter-spacing: .4px;
  box-shadow: 0 4px 20px rgba(201,162,39,.3) !important;
  transition: filter .18s ease, box-shadow .18s ease, transform .18s ease !important;
  animation: none !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 28px rgba(201,162,39,.45) !important;
  transform: translateY(-1px) !important;
}

/* Instagram icon button */
.nav-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .18s ease, border-color .18s ease;
}
.nav-social:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.nav-social-icon { width: 16px; height: 16px; filter: brightness(0) invert(1); }

/* Trophy shelf */
.nav-trophy { display: flex; align-items: center; gap: 6px; }
.nav-trophy:empty { display: none; }
.nav-trophy .mini { width: 22px; height: 22px; display: inline-flex; align-items: center; flex: 0 0 auto; }
.nav-trophy .mini svg { width: 100%; height: 100%; }
.nav-trophy .mini.added { animation: trophyPop .35s ease both; }
@keyframes trophyPop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
.nav-trophy .more { font-size: 11px; color: var(--gold); background: rgba(201,162,39,.12); border: 1px solid var(--border); padding: 2px 7px; border-radius: 999px; }
.trophy-reset { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: none; color: rgba(255,255,255,.45); cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; transition: color .15s, transform .15s; }
.trophy-reset:hover { color: #fff; transform: rotate(-30deg); }

/* Hamburger */
.hamburger {
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.hamburger span { width: 18px; height: 2px; background: var(--ink); display: block; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 860px) {
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    inset: calc(var(--header-height) + 8px) 12px auto 12px;
    flex-direction: column; align-items: stretch;
    background: rgba(10,10,10,.97);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px; gap: 4px;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-links a { padding: 12px 14px; }
  .nav.open .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav.open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .hamburger span:nth-child(2) { opacity: 0; }
  .nav.open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  :root { --header-pad-y: 10px; --logo-size: 42px; }
}

/* ════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════ */
.btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px;
  background: var(--gold);
  color: #080808;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .4px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 28px rgba(201,162,39,.35);
  transition: filter .18s ease, box-shadow .18s ease, transform .15s ease;
}
.btn-gold:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 36px rgba(201,162,39,.52);
  transform: translateY(-2px);
}

.btn-gold-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px;
  background: transparent;
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn-gold-outline:hover {
  background: var(--gold);
  color: #080808;
  box-shadow: 0 6px 24px rgba(201,162,39,.35);
}

.btn-text-link {
  color: var(--ink-dim);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: .2px;
  transition: color .18s ease;
  display: inline-flex; align-items: center;
}
.btn-text-link:hover { color: var(--gold); }

/* ── modal vbtn override ── */
.vbtn {
  display: inline-flex; align-items: center;
  padding: 11px 20px;
  background: var(--gold) !important;
  color: #080808 !important;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(201,162,39,.3);
  transition: filter .18s ease, transform .15s ease;
}
.vbtn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ════════════════════════════════════════
   LAYOUT HELPERS
   ════════════════════════════════════════ */
.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-header {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.section-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.section-title {
  font-size: clamp(32px, 4.5vw, 52px);
  color: var(--ink);
}
.section-title em {
  font-style: italic;
  color: var(--gold);
}

/* ════════════════════════════════════════
   HERO
   ════════════════════════════════════════ */
.hero {
  min-height: calc(100svh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 80px) 24px clamp(32px, 4vw, 60px);
}

/* subtle radial glow */
.hero::before {
  content: "";
  position: absolute;
  top: -10%; left: -5%;
  width: 60%; height: 80%;
  background: radial-gradient(ellipse, rgba(201,162,39,.05) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
}

.hero-title {
  font-size: clamp(52px, 7.5vw, 96px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -1px;
  color: var(--ink);
  margin: 0 0 20px;
}

.hero-accent {
  font-style: italic;
  display: block;
  line-height: 1.05;          /* room for descenders (g, y, p) */
  padding-bottom: 6px;        /* extra buffer so 'g' isn't clipped */
  background: linear-gradient(
    100deg,
    var(--gold) 0%,
    var(--gold-light) 30%,
    #fff8d6 50%,
    var(--gold-light) 70%,
    var(--gold) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldShimmer 4s linear infinite;
}
@keyframes goldShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 250% center; }
}

.hero-sub {
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 400px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ── Hero image stack ── */
.hero-media {
  position: relative;
}

.hero-img-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

.hero-img-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  transition: transform .3s ease;
}
.hero-img-card:hover { transform: scale(1.015); }
.hero-img-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hi-1 { grid-column: 1; grid-row: 1; aspect-ratio: 4/5; }
.hi-2 { grid-column: 2; grid-row: 1 / 3; aspect-ratio: 4/6; margin-top: 20px; }
.hi-3 { grid-column: 1; grid-row: 2; aspect-ratio: 4/4; }
.hi-4 { display: none; }

.hero-img-badge {
  position: absolute;
  bottom: -12px;
  left: -16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  letter-spacing: .3px;
  white-space: nowrap;
}
.badge-star { font-size: 14px; }

/* scroll hint chevrons */
.hero-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}
.hero-scroll-hint span {
  display: block;
  width: 10px; height: 10px;
  border-right: 2px solid rgba(201,162,39,.4);
  border-bottom: 2px solid rgba(201,162,39,.4);
  transform: rotate(45deg);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
.hero-scroll-hint span:nth-child(2) { animation-delay: .15s; }
.hero-scroll-hint span:nth-child(3) { animation-delay: .3s; }
@keyframes scrollPulse { 0%,100%{ opacity:.2 } 50%{ opacity:.8 } }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-title { font-size: clamp(44px, 10vw, 72px); }
  .hero-img-stack { max-width: 480px; margin: 0 auto; }
  .hero-img-badge { left: 0; }
}

/* ════════════════════════════════════════
   MAGIC TOYS ROW
   ════════════════════════════════════════ */
.magic-toys {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px 28px;
  flex-wrap: wrap;
}

#scatterBtn, #cardTrickBtn {
  position: static;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--black-3);
  border: 1px solid rgba(201,162,39,.25);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  white-space: nowrap;
}
#scatterBtn:hover, #cardTrickBtn:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(201,162,39,.2);
  transform: translateY(-2px);
}
#scatterBtn.scb-active {
  border-color: var(--gold);
  background: rgba(201,162,39,.08);
}

#oracleActionBtn {
  position: static;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 26px;
  background: linear-gradient(135deg, rgba(122,44,255,.14) 0%, rgba(80,20,200,.09) 100%);
  border: 1px solid rgba(122,44,255,.42);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer; text-align: left;
  transition: border-color .2s, box-shadow .2s, transform .2s, background .2s;
  white-space: nowrap;
  font-size: 14px;
}
#oracleActionBtn:hover {
  border-color: rgba(160,80,255,.75);
  box-shadow: 0 4px 28px rgba(122,44,255,.38), inset 0 0 0 1px rgba(160,80,255,.15);
  background: linear-gradient(135deg, rgba(122,44,255,.22) 0%, rgba(80,20,200,.16) 100%);
  transform: translateY(-3px);
}
.oab-label { display: flex; flex-direction: column; gap: 1px; }
.oab-main  { font-size: 14px; font-weight: 700; color: var(--ink); }
.oab-sub   { font-size: 11px; color: rgba(180,120,255,.85); letter-spacing: .03em; }

#bunnyBtn {
  position: static;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--black-3);
  border: 1px solid rgba(220,160,255,.3);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  white-space: nowrap;
}
#bunnyBtn:hover:not(:disabled) {
  border-color: rgba(220,160,255,.65);
  box-shadow: 0 4px 20px rgba(200,140,255,.22);
  transform: translateY(-2px);
}
#bunnyBtn:disabled {
  opacity: .55; cursor: default;
}

/* ════════════════════════════════════════
   SHOWS SECTION
   ════════════════════════════════════════ */
.shows {
  padding: clamp(64px, 9vw, 110px) 0;
  border-top: 1px solid rgba(201,162,39,.1);
  border-bottom: 1px solid rgba(201,162,39,.1);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,162,39,.06) 0%, transparent 60%);
}

.shows-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 720px) { .shows-grid { grid-template-columns: 1fr; } }

.show-card-new {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--black-2);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.show-card-new:hover {
  border-color: rgba(201,162,39,.3);
  box-shadow: 0 28px 72px rgba(0,0,0,.5), 0 0 0 1px rgba(201,162,39,.15);
  transform: translateY(-3px);
}
.show-card-new.featured {
  border-color: var(--border);
  background: linear-gradient(145deg, rgba(201,162,39,.07) 0%, var(--black-2) 60%);
}

.scn-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  display: inline-block;
  align-self: flex-start;
}
.featured .scn-label,
.featured-label {
  color: var(--gold) !important;
  border-color: var(--border) !important;
  background: rgba(201,162,39,.08);
}

.scn-title {
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ink);
}

.scn-body {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.65;
}

.scn-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.scn-list li {
  color: var(--ink-dim);
  font-size: 14px;
  padding-left: 18px;
  position: relative;
}
.scn-list li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* ════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════ */
.about {
  padding: clamp(64px, 9vw, 110px) 0;
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.about-body {
  color: var(--ink-dim);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.72;
  margin-top: 20px;
}

.about-video-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.about-reel {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  object-fit: cover;
  background: #000;
}

@media (max-width: 860px) {
  .about-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ════════════════════════════════════════
   REVIEWS
   ════════════════════════════════════════ */
.reviews {
  padding: clamp(64px, 9vw, 110px) 0;
  border-top: 1px solid rgba(255,255,255,.05);
  background: var(--black-2);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.review-card {
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: var(--radius);
  background: var(--black-3);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(16px);
  transition: box-shadow .25s ease, transform .25s ease;
}
.review-card.reveal {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease, box-shadow .25s ease;
}
.review-card:hover {
  box-shadow: 0 18px 52px rgba(0,0,0,.45), 0 0 0 1px rgba(201,162,39,.15);
}

.rc-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}

.rc-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), rgba(201,162,39,.3));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #080808;
  text-transform: uppercase; flex-shrink: 0;
}
.rc-avatar::after {
  content: attr(data-letter);
}

.rc-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.rc-name { font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; }
.rc-name:hover { color: var(--gold); }
.rc-source { font-size: 12px; color: var(--ink-dim); }
.rc-source a { color: var(--gold); text-decoration: none; }
.rc-source a:hover { text-decoration: underline; }

.rc-stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; margin-left: auto; }
.rc-heart { margin-left: auto; color: var(--gold); font-size: 16px; }

.rc-quote { font-style: italic; font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 8px; opacity: .85; }
.rc-body { color: var(--ink-dim); font-size: 15px; line-height: 1.55; }

/* ════════════════════════════════════════
   FOOTER CTA SECTION
   ════════════════════════════════════════ */
.footer-cta-section {
  padding: clamp(64px, 9vw, 110px) 0;
  border-top: 1px solid rgba(201,162,39,.12);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(201,162,39,.07) 0%, transparent 60%);
}

.footer-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.footer-cta-heading {
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.08;
  color: var(--ink);
}

/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
.site-footer-new {
  border-top: 1px solid rgba(255,255,255,.07);
  background: var(--black);
}

.footer-inner {
  padding: clamp(40px, 5vw, 64px) 24px 32px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: start;
}

.footer-logo { width: 80px; height: auto; margin-bottom: 14px; display: block; }
.footer-tagline { font-size: 14px; color: var(--ink-dim); line-height: 1.6; margin-bottom: 18px; }

.footer-social-row { display: flex; gap: 10px; margin-bottom: 18px; }
.footer-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  transition: border-color .18s ease, background .18s ease;
}
.footer-social-icon:hover { border-color: var(--border); background: rgba(201,162,39,.08); }
.footer-social-icon img { width: 16px; height: 16px; filter: brightness(0) invert(1); }

.gs-badge-link { display: inline-flex; opacity: .75; transition: opacity .18s ease; }
.gs-badge-link:hover { opacity: 1; }
.gs-badge { width: 160px; height: auto; display: block; }

.footer-col-heading { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; font-family: 'Inter', sans-serif; }
.footer-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-contact-list li, .footer-contact-list a { font-size: 14px; color: var(--ink-dim); text-decoration: none; }
.footer-contact-list a:hover { color: var(--gold); }

.footer-bottom-bar {
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
  padding: 16px 24px;
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .3px;
}

@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   SHOW CHOOSER MODAL (reskinned gold)
   ════════════════════════════════════════ */
.show-overlay {
  position: fixed; inset: 0;
  height: 100dvh;
  z-index: 2200;
  display: grid; place-items: center;
  background: rgba(4,4,4,.85);
  backdrop-filter: blur(10px);
}
.show-overlay[hidden] { display: none; }

.show-modal {
  width: min(860px, calc(100vw - 24px));
  max-height: min(92vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--radius-lg);
  background: var(--black-2);
  border: 1px solid var(--border);
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(201,162,39,.1);
  position: relative;
  color: var(--ink);
}
.show-modal::after { content:""; display:block; height:max(14px,env(safe-area-inset-bottom)); }

.show-close {
  position: sticky; top: 6px; right: 6px;
  margin-left: auto; z-index: 1;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.show-close:hover { background: rgba(255,255,255,.13); }

.show-modal-title { font-size: clamp(20px, 3vw, 26px); margin-bottom: 16px; }

.show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .show-grid { grid-template-columns: 1fr; } }

.show-card {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--black-3);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .18s;
}
.show-card:hover { border-color: var(--border); }
.show-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.show-card h4 { font-size: clamp(16px, 2.2vw, 20px); }
.chip { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); background: rgba(201,162,39,.1); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; }
.chip.alt { color: var(--ink-dim); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.show-copy { color: var(--ink-dim); font-size: 14px; line-height: 1.55; margin: 0; }
.show-list { margin: 0; padding-left: 16px; color: var(--ink-dim); font-size: 13px; }
.show-list li { margin: 5px 0; }
.show-cta-row { margin-top: 4px; }

/* ════════════════════════════════════════
   DIVIDER  (remove old Webflow one)
   ════════════════════════════════════════ */
.divider { display: none; }

/* ════════════════════════════════════════
   SCROLL PROGRESS BAR
   ════════════════════════════════════════ */
#scrollBar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 8px rgba(201,162,39,.6);
  z-index: 9999; pointer-events: none; border-radius: 0 2px 2px 0;
}

/* ════════════════════════════════════════
   MAGIC CANVAS / CURSOR (keep working)
   ════════════════════════════════════════ */
#magicCanvas {
  position: fixed; inset: 0; z-index: 500;
  pointer-events: none; mix-blend-mode: screen; opacity: .85;
}

.magic-cursor-on, .magic-cursor-on * {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" overflow="visible"><line x1="10" y1="10" x2="50" y2="50" stroke="%23d8b4fe" stroke-width="4" stroke-linecap="round"/><line x1="38" y1="38" x2="50" y2="50" stroke="%237c3aed" stroke-width="6" stroke-linecap="round"/><circle cx="10" cy="10" r="11" fill="%23fbbf24" opacity="0.18"/><circle cx="10" cy="10" r="5" fill="%23fef08a"/></svg>') 10 10, crosshair !important;
}

.magic-cursor {
  position: fixed; z-index: 999999; pointer-events: none;
  width: 56px; height: 56px; will-change: transform;
  transition: opacity .2s ease, filter .18s ease;
  filter: drop-shadow(0 0 5px rgba(201,162,39,.7)) drop-shadow(0 0 12px rgba(201,162,39,.4));
}
.magic-cursor.over { filter: drop-shadow(0 0 8px rgba(201,162,39,1)) drop-shadow(0 0 18px rgba(201,162,39,.65)); }
.magic-cursor.down { filter: drop-shadow(0 0 14px rgba(201,162,39,1)) drop-shadow(0 0 28px rgba(201,162,39,.85)) brightness(1.6); }

.cursor-trail {
  position: fixed; border-radius: 50%; pointer-events: none;
  z-index: 999998; mix-blend-mode: screen;
  transform: translate(-50%,-50%);
  animation: trailFade .58s ease-out forwards;
}
@keyframes trailFade {
  0%  { opacity: .8; transform: translate(-50%,-50%) scale(1); }
  100%{ opacity: 0;  transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.12); }
}

#cursorLight {
  position: fixed; top: 0; left: 0; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.07) 0%, transparent 70%);
  pointer-events: none; z-index: 498; mix-blend-mode: screen; will-change: transform;
}

/* ════════════════════════════════════════
   CARD SUITS (floating bg elements)
   ════════════════════════════════════════ */
.card-suit {
  position: fixed; pointer-events: none; z-index: 499;
  opacity: 0; user-select: none; mix-blend-mode: screen;
  animation: suitDrift var(--dur,18s) var(--del,0s) ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes suitDrift {
  0%   { transform:translate(0,0) rotate(0deg); opacity:0; }
  12%  { opacity:var(--mop,.04); }
  50%  { transform:translate(var(--dx,24px),var(--dy,-60px)) rotate(var(--rot,14deg)); opacity:var(--mop,.04); }
  88%  { opacity:var(--mop,.04); }
  100% { transform:translate(0,0) rotate(0deg); opacity:0; }
}

/* entrance animation: disable on hero to avoid magic.js hiding elements */
.magic-entrance .entrance-el { opacity: 1 !important; transform: none !important; }

/* ════════════════════════════════════════
   PHYSICS CARDS (scatter)
   ════════════════════════════════════════ */
.sc-card {
  position: fixed; top: 0; left: 0; width: 72px; height: 106px; border-radius: 8px;
  background: #f9f7ff; border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  cursor: grab; user-select: none; z-index: 1198; will-change: transform; touch-action: none;
}
.sc-card:active { cursor: grabbing; }
.sc-tl { position: absolute; top: 5px; left: 6px; font-size: 10px; font-weight: 900; line-height: 1.15; text-align: center; }
.sc-br { position: absolute; bottom: 5px; right: 6px; font-size: 10px; font-weight: 900; line-height: 1.15; text-align: center; transform: rotate(180deg); }
.sc-c { font-size: 30px; line-height: 1; }

/* ════════════════════════════════════════
   CARD TRICK OVERLAY
   ════════════════════════════════════════ */
#cardTrickOverlay {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
  background: rgba(4,4,14,.95);
  backdrop-filter: blur(16px) saturate(130%);
}
#cardTrickOverlay[hidden] { display: none; }
.ct-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 52px 24px 40px; width: min(540px,96vw); }
.ct-x { position: absolute; top: 0; right: 0; width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--ink); cursor: pointer; font-size: 13px; transition: background .15s; }
.ct-x:hover { background: rgba(255,255,255,.12); }
.ct-heading { font-family: 'Fraunces',serif; font-size: clamp(20px,3vw,28px); color: var(--ink); margin: 0; text-align: center; transition: opacity .3s ease; }
.ct-fan { position: relative; width: min(400px,90vw); height: 160px; display: flex; justify-content: center; align-items: flex-end; }
.ct-card { position: absolute; bottom: 0; left: 50%; width: 80px; height: 118px; transform-origin: bottom center; transform: translateX(-50%) rotate(var(--a)) translateY(var(--ty)); cursor: pointer; opacity: 0; }
.ct-card.ct-deal { animation: ctDealIn .55s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes ctDealIn { from{ opacity:0;transform:translateX(-50%) translateY(72px) scale(.7) rotate(0deg);} to{opacity:1;transform:translateX(-50%) translateY(var(--ty)) rotate(var(--a));} }
.ct-card.ct-chosen { z-index:10; transition:transform .4s cubic-bezier(.22,1,.36,1); transform:translateX(-50%) rotate(0deg) translateY(-8px) !important; }
.ct-card.ct-away { transition:transform .38s ease, opacity .38s ease; opacity:0 !important; transform:translateX(-50%) rotate(calc(var(--a)*3)) translateY(-70px) scale(.5) !important; }
.ct-lift { width:100%;height:100%;transition:transform .18s ease; }
.ct-inner { width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.22,1,.36,1); }
.ct-card.ct-flipped .ct-inner { transform:rotateY(180deg); }
.ct-back,.ct-front { position:absolute;inset:0;border-radius:9px;backface-visibility:hidden;box-shadow:0 10px 30px rgba(0,0,0,.6); }
.ct-back { background:linear-gradient(145deg,#1a0800,#0a0800);border:1.5px solid rgba(201,162,39,.3);display:flex;align-items:center;justify-content:center; }
.ct-back-grid { width:58px;height:90px;border-radius:5px;border:1.5px solid rgba(201,162,39,.28);background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(201,162,39,.08) 5px,rgba(201,162,39,.08) 6px),repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(201,162,39,.06) 5px,rgba(201,162,39,.06) 6px); }
.ct-front { background:#f9f7ff;border:1px solid rgba(0,0,0,.08);transform:rotateY(180deg);display:flex;align-items:center;justify-content:center; }
.ct-corner { position:absolute;font-size:11px;font-weight:900;line-height:1.15;text-align:center; }
.ct-tl{top:5px;left:6px;} .ct-br{bottom:5px;right:6px;transform:rotate(180deg);} .ct-suit-c{font-size:36px;line-height:1;}
#ctReveal { text-align:center;animation:ctRevealFade .5s cubic-bezier(.22,1,.36,1); }
#ctReveal[hidden]{display:none;}
@keyframes ctRevealFade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.ct-reveal-head{font-family:'Fraunces',serif;font-size:clamp(22px,3.5vw,32px);color:var(--ink);margin:0 0 8px;}
.ct-reveal-sub{color:var(--ink-dim);margin:0 0 20px;font-size:15px;}
.ct-book-btn{cursor:pointer;border:0;font-weight:700;font-size:15px;}
@media(max-width:480px){.ct-card{width:62px;height:92px;}.ct-fan{height:130px;}.ct-suit-c{font-size:28px;}.ct-back-grid{width:44px;height:70px;}}

/* ════════════════════════════════════════
   REVIEWS (under construction) MODAL
   ════════════════════════════════════════ */
.review-overlay { position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(4,4,4,.82);backdrop-filter:blur(8px); }
.review-overlay[hidden]{display:none;}
.review-modal { width:min(600px,calc(100vw - 28px));max-height:min(88vh,500px);overflow:auto;position:relative;padding:24px;border-radius:var(--radius-lg);background:var(--black-2);border:1px solid var(--border);box-shadow:0 40px 100px rgba(0,0,0,.7); }
.review-close { position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.review-title{margin:0 0 8px;color:var(--ink);font-size:clamp(20px,3.4vw,26px);}
.review-sub{margin:0 0 20px;color:var(--ink-dim);font-size:15px;}
.review-actions{display:flex;gap:12px;flex-wrap:wrap;}
.rv-cards { display:flex; flex-direction:column; gap:16px; }
.rv-card { padding:18px; border-radius:var(--radius); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); }
.rv-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.rv-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#7a2cff,#4a1ab0); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:15px; flex-shrink:0; }
.rv-meta { flex:1; display:flex; flex-direction:column; gap:2px; }
.rv-name { font-size:14px; font-weight:700; color:var(--ink); }
.rv-date { font-size:12px; color:var(--ink-dim); }
.rv-stars { color:#f5c518; font-size:15px; letter-spacing:1px; }
.rv-headline { margin:0 0 7px; font-weight:700; font-size:15px; color:var(--ink); }
.rv-body { margin:0 0 10px; font-size:14px; color:var(--ink-dim); line-height:1.6; }
.rv-hired { margin:0; font-size:12px; color:rgba(201,162,39,.7); }
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;cursor:pointer;color:#080808;text-decoration:none;background:var(--gold);border:none;font-weight:700;box-shadow:0 4px 18px rgba(201,162,39,.3);}
.btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:var(--ink);}

/* ════════════════════════════════════════
   BUNNY GAME (styles required by inline JS)
   ════════════════════════════════════════ */
#bunnyField { position:fixed;inset:0;z-index:1100;pointer-events:none; }
.bun { position:absolute;width:64px;height:64px;will-change:transform;pointer-events:auto; }
.bun .svg { filter:drop-shadow(0 6px 14px rgba(201,162,39,.25)) drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.bun .shadow { position:absolute;left:8px;right:8px;bottom:-4px;height:10px;background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));filter:blur(2px);border-radius:50%;opacity:.55;transform-origin:center; }
.bun.hop .shadow{transform:scale(.75);opacity:.7;}
.bun.flip .svg{transform:scaleX(-1);}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.bun.idle .svg{animation:breathe 2.6s ease-in-out infinite;}
.sparkle{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,.1) 70%);mix-blend-mode:screen;pointer-events:none;animation:sparkleUp .6s ease-out forwards;}
@keyframes sparkleUp{0%{transform:translate(0,0) scale(.6);opacity:.9;}100%{transform:translate(-6px,-24px) scale(1.1);opacity:0;}}
.hat-back,.hat-front{position:absolute;width:72px;height:54px;pointer-events:none;transform-origin:center bottom;opacity:0;}
.hat-back.show,.hat-front.show{opacity:1;transition:opacity .12s ease;}
.hat-back .brim{width:100%;height:16px;border-radius:999px;background:#222;box-shadow:0 2px 6px rgba(0,0,0,.45);}
.hat-back .body{width:70%;height:32px;margin:0 auto;border-radius:8px 8px 2px 2px;background:linear-gradient(to bottom,#444 0%,#111 100%);transform:translateY(-2px);}
.hat-back .band{width:70%;height:8px;margin:-14px auto 0;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--gold-light));box-shadow:0 0 6px rgba(201,162,39,.5);}
.hat-front .lip{position:absolute;left:0;right:0;top:6px;height:14px;border-radius:999px;background:#191919;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 4px 10px rgba(0,0,0,.55);opacity:.98;}
.smoke{position:absolute;width:40px;height:20px;border-radius:70%;background:radial-gradient(circle,rgba(210,210,210,.85),rgba(210,210,210,0) 60%);filter:blur(1px);opacity:.9;animation:puff 700ms ease-out forwards;}
@keyframes puff{0%{transform:translate(0,0) scale(.6);opacity:.85;}100%{transform:translate(var(--dx,0px),-36px) scale(1.9);opacity:0;}}
.spark{position:absolute;width:4px;height:4px;border-radius:50%;background:linear-gradient(90deg,var(--gold),var(--gold-light));box-shadow:0 0 8px rgba(201,162,39,.6);opacity:.95;animation:sparkUp 560ms ease-out forwards;}
@keyframes sparkUp{to{transform:translate(var(--sx,0px),var(--sy,-80px)) scale(.6);opacity:0;}}
.bunny-hint{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1300;background:rgba(8,8,8,.95);border:1px solid var(--border);border-radius:999px;padding:11px 20px;color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;backdrop-filter:blur(10px);box-shadow:0 4px 24px rgba(0,0,0,.5);pointer-events:auto;cursor:pointer;opacity:0;transition:opacity .45s ease;max-width:88vw;white-space:normal;text-align:center;}
.bunny-hint--show{opacity:1;}
.bunny-trophy-pill{display:none;}
@media(max-width:900px){
  .bunny-trophy-pill{display:flex;align-items:center;gap:6px;position:fixed;bottom:80px;right:16px;z-index:1250;background:rgba(8,8,8,.9);border:1px solid var(--border);border-radius:999px;padding:6px 12px 6px 8px;font-size:13px;font-weight:700;color:var(--ink);backdrop-filter:blur(10px);box-shadow:0 2px 16px rgba(201,162,39,.25);transition:opacity .25s ease;}
  .bunny-trophy-pill[hidden]{display:none !important;}
  .bunny-trophy-pill svg{width:20px;height:20px;}
}

/* ════════════════════════════════════════
   CONFETTI + TOUCH SPARK
   ════════════════════════════════════════ */
.confetti-piece{position:fixed;z-index:9998;pointer-events:none;will-change:transform,opacity;animation:confettiFall linear forwards;}
@keyframes confettiFall{from{transform:translateY(0) rotateX(0) rotateZ(0);opacity:1;}80%{opacity:.9;}to{transform:translateY(105vh) rotateX(var(--rx,720deg)) rotateZ(var(--rz,360deg));opacity:0;}}
.touch-spark{position:fixed;border-radius:50%;pointer-events:none;z-index:999997;mix-blend-mode:screen;transform:translate(-50%,-50%);animation:touchSparkFly ease-out forwards;}
@keyframes touchSparkFly{from{transform:translate(-50%,-50%) scale(1.3);opacity:.95;}to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(0);opacity:0;}}

/* ════════════════════════════════════════
   ORACLE TRIGGER BUTTON (in About)
   ════════════════════════════════════════ */
.oracle-trigger-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 20px; margin-top: 28px;
  border-radius: var(--radius); border: 1px solid rgba(201,162,39,.22);
  background: rgba(201,162,39,.05); cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s, transform .2s; color: var(--ink);
}
.oracle-trigger-btn:hover { border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.09); transform: translateY(-2px); }
.otb-icon { font-size: 26px; flex-shrink: 0; }
.otb-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.otb-text strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.otb-text span { font-size: 12px; color: var(--ink-dim); }
.otb-arrow { color: var(--gold); font-size: 18px; flex-shrink: 0; }

/* ════════════════════════════════════════
   ORACLE DOOR
   ════════════════════════════════════════ */
.oracle-door-section {
  padding: clamp(48px,7vw,90px) 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  border-top: 1px solid rgba(201,162,39,.08);
  border-bottom: 1px solid rgba(201,162,39,.08);
}

.oracle-door-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}

/* ── The door itself ── */
.oracle-door {
  position: relative;
  width: 160px;
  cursor: pointer;
  user-select: none;
  transition: transform .22s ease;
}
.oracle-door:hover:not(.od-occupied) { transform: translateY(-5px); }

/* Glowing room interior — revealed when panels open */
.od-interior {
  position: absolute;
  left: 16px; right: 16px; top: 42px; bottom: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(160,60,255,.9) 0%, rgba(80,20,200,.7) 40%, rgba(20,5,60,.95) 100%);
  border-radius: 2px;
  animation: interiorBreathe 3s ease-in-out infinite;
}
@keyframes interiorBreathe {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.3); }
}
.od-occupied .od-interior {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(200,60,30,.85) 0%, rgba(120,25,10,.7) 40%, rgba(20,5,5,.95) 100%);
  animation: interiorOccBreathe 1.4s ease-in-out infinite;
}
@keyframes interiorOccBreathe {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.5); }
}

/* Stone arch frame */
.od-arch {
  position: absolute;
  top: 0; left: 0; right: 0; height: 50px;
  background: linear-gradient(180deg, #100c1e 0%, #0d0918 100%);
  border: 2px solid rgba(201,162,39,.45);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  /* Keystone gem at top */
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 6px;
  z-index: 3;
}
.od-arch::before {
  content: '✦';
  font-size: 10px;
  color: rgba(201,162,39,.7);
  line-height: 1;
}
/* Frame sides */
.od-arch::after {
  content: '';
  position: absolute;
  top: 44px; left: -2px; right: -2px; height: 10px;
  background: linear-gradient(180deg, #100c1e 0%, #0c0916 100%);
  border-left: 2px solid rgba(201,162,39,.45);
  border-right: 2px solid rgba(201,162,39,.45);
}

/* Door panels */
.od-panel {
  position: absolute;
  top: 54px; bottom: 0; width: 50%;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0) 0px, rgba(255,255,255,0) 38px,
      rgba(255,255,255,.025) 40px, rgba(255,255,255,0) 42px),
    linear-gradient(160deg, #1a0f32 0%, #120928 45%, #0c0620 100%);
  border: 1px solid rgba(201,162,39,.25);
  z-index: 4;
  transition: transform 1.4s cubic-bezier(.25,0,.15,1);
}
.od-panel-l {
  left: 0;
  transform-origin: left center;
  border-right: 1px solid rgba(201,162,39,.18);
}
.od-panel-r {
  right: 0;
  transform-origin: right center;
  border-left: none;
}

/* Two raised panel insets (upper + lower) like a real door */
.od-panel-inset {
  position: absolute;
  left: 8px; right: 8px; top: 12px; height: 56px;
  border: 1px solid rgba(201,162,39,.18);
  border-radius: 2px;
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.4);
}
/* Second lower panel */
.od-panel-inset::after {
  content: '';
  position: absolute; top: 70px; left: 0; right: 0; height: 80px;
  border: 1px solid rgba(201,162,39,.14);
  border-radius: 2px;
  background: rgba(255,255,255,.015);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.3);
}

/* Hinges */
.od-hinge {
  position: absolute; right: -5px;
  width: 10px; height: 22px;
  background: linear-gradient(90deg, rgba(180,148,40,.7), rgba(220,185,55,.9), rgba(160,130,35,.7));
  border-radius: 2px;
  z-index: 5;
  box-shadow: 1px 0 4px rgba(0,0,0,.5);
}
.od-panel-r .od-hinge { right: auto; left: -5px; }
.od-hinge-t { top: 18px; }
.od-hinge-b { bottom: 18px; }

/* Door knob */
.od-knob {
  position: absolute; left: 10px; top: 46%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,240,150,1) 0%, rgba(210,170,35,.95) 40%, rgba(140,100,15,.85) 100%);
  box-shadow: 0 0 10px rgba(210,170,35,.6), inset 0 1px 2px rgba(255,255,200,.5), 0 2px 4px rgba(0,0,0,.5);
  z-index: 5;
}
/* Keyhole below knob */
.od-knob::after {
  content: '';
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 8px;
  background: rgba(0,0,0,.7);
  border-radius: 50% 50% 2px 2px;
  box-shadow: 0 3px 0 rgba(0,0,0,.5);
}

/* Decorative name plate on right panel */
.od-panel-r::after {
  content: 'XIII';
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 3px;
  color: rgba(201,162,39,.55);
  font-family: 'Fraunces', serif;
  font-style: italic;
  text-shadow: 0 0 6px rgba(201,162,39,.3);
}

/* Bottom threshold / step */
.oracle-door::after {
  content: '';
  position: absolute; bottom: -8px; left: -10px; right: -10px; height: 10px;
  background: linear-gradient(180deg, rgba(80,60,20,.6) 0%, rgba(40,30,10,.8) 100%);
  border-radius: 0 0 4px 4px;
  border: 1px solid rgba(201,162,39,.25);
  border-top: none;
  z-index: 5;
}

/* Status indicator light */
.od-light {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(60,210,100,.85);
  box-shadow: 0 0 6px rgba(60,210,100,.7), 0 0 14px rgba(40,180,80,.4);
  z-index: 10;
  transition: background .5s, box-shadow .5s;
}
.od-occupied .od-light {
  background: rgba(230,60,40,.95);
  box-shadow: 0 0 8px rgba(230,60,40,.9), 0 0 22px rgba(200,30,20,.55);
  animation: redLightPulse .9s ease-in-out infinite;
}
@keyframes redLightPulse {
  0%,100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%     { opacity: .7; transform: translateX(-50%) scale(1.3); }
}

/* Floor mist */
.od-mist {
  position: absolute; bottom: -10px; left: -30%; right: -30%; height: 28px;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(120,40,220,.45) 0%, transparent 100%);
  filter: blur(10px); pointer-events: none; z-index: 6;
}
.od-occupied .od-mist {
  background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(200,40,20,.35) 0%, transparent 100%);
}

/* ── States ── */

/* Opening: panels swing back */
.od-opening .od-panel-l { transform: perspective(500px) rotateY(-115deg); }
.od-opening .od-panel-r { transform: perspective(500px) rotateY(115deg); }

/* Occupied: jiggle on click */
@keyframes doorJiggle {
  0%,100% { transform: rotate(0) translateX(0); }
  12%  { transform: rotate(-.8deg) translateX(-6px); }
  26%  { transform: rotate(.7deg)  translateX(5px); }
  40%  { transform: rotate(-.6deg) translateX(-4px); }
  55%  { transform: rotate(.5deg)  translateX(3px); }
  70%  { transform: rotate(-.3deg) translateX(-2px); }
  85%  { transform: rotate(.2deg)  translateX(1px); }
}
.od-jiggle { animation: doorJiggle .55s ease; }

/* ── Labels ── */
.od-labels { text-align: center; }
.od-title {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(18px,3.5vw,24px);
  color: rgba(235,215,255,.95);
  text-shadow: 0 0 22px rgba(180,100,255,.35);
  margin: 0 0 6px;
  transition: color .4s ease;
}
.od-occupied ~ .od-labels .od-title,
.oracle-door-wrap:has(.od-occupied) .od-title {
  color: rgba(255,160,140,.9);
  text-shadow: 0 0 22px rgba(220,60,30,.35);
}
.od-sub {
  font-size: 12px; color: rgba(160,130,210,.65);
  letter-spacing: .04em; margin: 0;
  transition: color .4s ease;
}

/* The door needs a defined height so panels fill it */
.oracle-door { height: 220px; }

/* ════════════════════════════════════════
   ORACLE OVERLAY + FOG
   ════════════════════════════════════════ */
.oracle-overlay {
  position: fixed; inset: 0; z-index: 3800;
  display: flex; align-items: center; justify-content: center;
  background: #07050f;
  overflow: hidden;
}
.oracle-overlay[hidden] { display: none; }
.oracle-overlay:not([hidden]) { animation: overlayFadeIn .5s ease forwards; }
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.oracle-close {
  position: fixed; top: 18px; right: 18px; z-index: 3810;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.5); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.oracle-close:hover { background: rgba(255,255,255,.1); color: var(--ink); }

/* Fog blobs */
.oracle-fog {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.fog-blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0;
  animation: fogDrift ease-in-out infinite;
}
.fb1 { width: 380px; height: 260px; background: #3d1a7a; top: -5%; left: -8%;  animation-duration: 14s; animation-delay: 0s; }
.fb2 { width: 300px; height: 220px; background: #1a0d4a; top: 55%; right: -5%; animation-duration: 18s; animation-delay: -5s; }
.fb3 { width: 420px; height: 200px; background: #2a1060; top: 30%; left: 30%;  animation-duration: 22s; animation-delay: -9s; }
.fb4 { width: 260px; height: 240px; background: #0d0830; bottom: -5%; left: 20%; animation-duration: 16s; animation-delay: -3s; }
.fb5 { width: 200px; height: 180px; background: #4a1e0a; top: 5%; right: 15%;  animation-duration: 20s; animation-delay: -7s; }
@keyframes fogDrift {
  0%   { opacity: 0;    transform: translate(0,0) scale(1); }
  15%  { opacity: .18; }
  50%  { opacity: .22;  transform: translate(24px,-18px) scale(1.08); }
  85%  { opacity: .18; }
  100% { opacity: 0;    transform: translate(0,0) scale(1); }
}

/* ════════════════════════════════════════
   FORTUNE TELLER BOOTH
   ════════════════════════════════════════ */
.oracle-booth {
  position: relative; z-index: 1;
  width: min(460px, calc(100vw - 20px));
  display: flex; flex-direction: column;
}

.booth-crown {
  background: linear-gradient(180deg, #1e0b06 0%, #130705 100%);
  border: 2px solid rgba(201,162,39,.55);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 12px 24px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  box-shadow: 0 -6px 28px rgba(201,162,39,.12), inset 0 1px 0 rgba(255,220,100,.08);
}
.booth-crown-bar {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.65), transparent);
}
.booth-crown-title {
  font-size: 15px; font-weight: 900; letter-spacing: 7px; text-transform: uppercase;
  color: var(--gold); font-family: 'Inter', sans-serif;
  text-shadow: 0 0 18px rgba(201,162,39,.45), 0 0 40px rgba(201,162,39,.2);
}
.booth-crown-title span { font-size: 9px; opacity: .6; }

.booth-window {
  background: #03020a;
  border-left: 2px solid rgba(201,162,39,.55);
  border-right: 2px solid rgba(201,162,39,.55);
  height: 390px;
  position: relative;
  overflow: hidden;
  /* Inner frame — makes the window look recessed into the booth */
  box-shadow:
    inset 3px 0 12px rgba(0,0,0,.7),
    inset -3px 0 12px rgba(0,0,0,.7),
    inset 0 4px 20px rgba(0,0,0,.5);
}
/* Corner ornament accents on the window frame */
.booth-window::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(201,162,39,.08);
  pointer-events: none; z-index: 10;
}
.booth-window::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 100%);
  pointer-events: none; z-index: 10;
}

.booth-bg-scene {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}

.oracle-screen {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center;
  padding: 0 24px 26px;
}
.oracle-screen[hidden] { display: none !important; }

#oracleCategoryScreen, #oracleIntro, #oracleGame {
  background: linear-gradient(0deg,
    rgba(4,3,12,.97) 0%, rgba(4,3,12,.93) 28%,
    rgba(4,3,12,.65) 52%, rgba(4,3,12,.15) 72%, transparent 100%);
}
#oracleAwakening { background: transparent; padding-bottom: 14px; }
#oracleOccupiedScreen {
  justify-content: center; text-align: center;
  background: linear-gradient(0deg, rgba(4,3,12,.96) 0%, rgba(4,3,12,.7) 60%, transparent 100%);
  padding: 24px;
  gap: 10px;
}
/* ── Oracle waiting pill ── */
.oracle-wait-pill {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  z-index: 4000;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px;
  background: rgba(18,8,36,.95);
  border: 1px solid rgba(160,80,255,.4);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(160,80,255,.1) inset;
  backdrop-filter: blur(12px);
  transition: transform .4s cubic-bezier(.2,.8,.3,1), border-color .4s ease, box-shadow .4s ease;
  white-space: nowrap;
}
.oracle-wait-pill.owp-visible { transform: translateX(-50%) translateY(0); }
.oracle-wait-pill.owp-ready {
  border-color: rgba(201,162,39,.6);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(201,162,39,.18);
  animation: pillReadyPulse 1.8s ease-in-out infinite;
}
@keyframes pillReadyPulse {
  0%,100% { box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(201,162,39,.18); }
  50%     { box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 40px rgba(201,162,39,.35); }
}
.owp-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: rgba(160,80,255,.8);
  animation: occPulse 1.6s ease-in-out infinite;
}
.owp-ready .owp-dot { background: var(--gold); }
.owp-text {
  font-size: 13px; font-weight: 600; color: rgba(220,195,255,.9);
  letter-spacing: .02em;
}
.owp-ready .owp-text { color: var(--gold); }
.owp-dismiss {
  background: none; border: none; color: rgba(180,150,220,.5);
  cursor: pointer; font-size: 15px; padding: 0 0 0 4px; line-height: 1;
  transition: color .15s;
}
.owp-dismiss:hover { color: rgba(220,190,255,.8); }

.occupied-title {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(18px, 4vw, 24px);
  color: rgba(238,215,255,.95);
  text-shadow: 0 0 20px rgba(190,100,255,.5);
  margin: 0;
}
.occupied-step {
  font-size: 13px; color: rgba(180,130,255,.8);
  letter-spacing: .04em; margin: 0;
  min-height: 18px; transition: opacity .4s ease;
}
.occupied-sub {
  font-size: 12px; color: rgba(150,110,200,.6);
  line-height: 1.6; margin: 4px 0 0;
}
.occupied-indicator {
  display: flex; gap: 8px; justify-content: center; margin-top: 6px;
}
.occ-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(160,80,255,.5);
  animation: occPulse 1.6s ease-in-out infinite;
}
.occ-dot:nth-child(2) { animation-delay: .3s; }
.occ-dot:nth-child(3) { animation-delay: .6s; }
@keyframes occPulse {
  0%,100% { opacity: .4; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.35); background: rgba(200,130,255,.9); }
}
#oracleWrongScreen { background: rgba(4,3,12,.88); justify-content: center; }
#oracleIntro { justify-content: center; text-align: center; padding-bottom: 0; }

.booth-prompt {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(17px, 3vw, 21px); color: var(--ink);
  margin: 0 0 7px; line-height: 1.4;
}
.booth-sub {
  font-size: 13px; color: var(--ink-dim); margin: 0; letter-spacing: .3px;
}
.oracle-begin { min-width: 200px; }

/* ── Category Picker ── */
#oracleCategoryScreen {
  justify-content: flex-end;
  padding-bottom: 22px;
}
#oracleCategoryScreen .booth-prompt {
  font-size: clamp(16px, 3.5vw, 20px);
  color: rgba(235,220,255,.9);
  text-shadow: 0 0 20px rgba(190,140,255,.4);
  margin-bottom: 16px;
}
.oracle-categories {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}
.oracle-cat-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 5px;
  padding: 14px 8px 16px;
  background: rgba(90,30,150,.08);
  border: 1px solid rgba(180,130,255,.22);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .18s, box-shadow .25s;
  font-family: inherit;
  position: relative; overflow: hidden;
}
.oracle-cat-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(180,100,255,.18) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.oracle-cat-btn:hover { background: rgba(120,50,200,.16); border-color: rgba(210,165,255,.55); transform: translateY(-3px); box-shadow: 0 6px 24px rgba(150,60,255,.22), 0 0 0 1px rgba(200,150,255,.12); }
.oracle-cat-btn:hover::before { opacity: 1; }
.oracle-cat-btn:active { transform: translateY(-1px); }
.cat-icon { font-size: 24px; line-height: 1; filter: drop-shadow(0 0 6px rgba(200,150,255,.5)); }
.cat-label {
  font-family: 'Fraunces', serif;
  font-size: 14px; font-style: italic;
  color: rgba(220,195,255,.95);
  margin: 0;
  text-shadow: 0 0 14px rgba(190,130,255,.4);
}
.cat-sub {
  font-size: 10px; color: rgba(175,155,210,.75);
  letter-spacing: .25px; line-height: 1.35;
  text-align: center;
}

.oracle-qcount {
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(150,90,220,.7);
  margin: 0 0 12px;
}
.oracle-question {
  font-family: 'Fraunces', serif;
  font-size: clamp(17px, 3vw, 22px); font-style: italic;
  color: var(--ink); line-height: 1.5;
  margin: 0 0 22px; min-height: 54px;
}
.oracle-answers { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.oracle-btn {
  padding: 10px 22px; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 700; border: 1px solid;
  transition: background .15s, transform .12s;
}
.oracle-btn:hover { transform: translateY(-1px); }
.oracle-yes  { background: rgba(201,162,39,.1); border-color: rgba(201,162,39,.3);  color: var(--gold); }
.oracle-yes:hover  { background: rgba(201,162,39,.2); }
.oracle-no   { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); color: var(--ink); }
.oracle-no:hover   { background: rgba(255,255,255,.1); }
.oracle-idk  { background: rgba(130,80,200,.07); border-color: rgba(130,80,200,.2); color: rgba(190,155,240,.8); }
.oracle-idk:hover  { background: rgba(130,80,200,.14); }

/* ── Awakening status text ── */
.awk-status {
  color: rgba(215,180,255,.82);
  font-family: 'Fraunces', serif;
  font-size: 13px; font-style: italic;
  text-align: center; letter-spacing: .07em;
  min-height: 20px;
  transition: opacity .3s ease;
  text-shadow: 0 0 12px rgba(180,120,255,.4);
}

/* ════════════════════════════════════════
   ZOLTAR BACKGROUND SCENE
   ════════════════════════════════════════ */

.bbs-drape {
  position: absolute; inset: 0;
  background:
    /* Candlelight warm glow from left sconce */
    radial-gradient(ellipse 35% 55% at 6% 22%, rgba(255,160,40,.14) 0%, transparent 100%),
    /* Candlelight warm glow from right sconce */
    radial-gradient(ellipse 35% 55% at 94% 22%, rgba(255,150,35,.12) 0%, transparent 100%),
    /* Vertical velvet fabric folds — subtle */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0px, rgba(0,0,0,0) 28px,
      rgba(0,0,0,.06) 30px, rgba(255,255,255,.012) 31px,
      rgba(0,0,0,0) 33px),
    /* Overhead light source suggesting a lamp above */
    radial-gradient(ellipse 60% 30% at 50% -5%, rgba(140,60,220,.28) 0%, transparent 100%),
    /* Corner vignettes for depth */
    radial-gradient(ellipse 55% 70% at 0% 100%, rgba(0,0,0,.55) 0%, transparent 70%),
    radial-gradient(ellipse 55% 70% at 100% 100%, rgba(0,0,0,.55) 0%, transparent 70%),
    /* Rich dark base — deep burgundy-indigo */
    linear-gradient(175deg, #120820 0%, #0d0618 28%, #08040f 55%, #050210 80%, #030108 100%);
}
#boothBgScene.awakening .bbs-drape {
  animation: drapeEnergize 2.5s ease-in-out infinite;
}
@keyframes drapeEnergize {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.6) saturate(1.8) hue-rotate(15deg); }
}

.bbs-sconce {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
}
.bbs-sc-l { left: 10px; top: 44px; }
.bbs-sc-r { right: 10px; top: 44px; }
.bbs-sconce-arm {
  width: 28px; height: 4px;
  background: linear-gradient(90deg,
    rgba(90,70,20,.6) 0%, rgba(180,148,55,.95) 35%,
    rgba(220,185,70,1) 60%, rgba(170,135,45,.85) 100%);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.6), 0 0 8px rgba(200,160,40,.12);
}
/* Drip cup under the arm */
.bbs-sconce-arm::after {
  content: '';
  position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 6px;
  background: linear-gradient(180deg, rgba(180,148,55,.9), rgba(120,90,25,.7));
  border-radius: 0 0 5px 5px;
}
.bbs-bulb {
  width: 13px; height: 28px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,255,240,1) 0%, rgba(255,235,120,.98) 12%,
      rgba(255,185,45,.9) 38%, rgba(240,130,20,.7) 65%, rgba(180,60,5,.35) 88%, transparent 100%);
  clip-path: polygon(30% 100%, 70% 100%, 82% 55%, 68% 18%, 50% 0%, 32% 18%, 18% 55%);
  margin-top: 1px;
  box-shadow:
    0 0 10px rgba(255,220,80,.9),
    0 0 24px rgba(255,170,30,.65),
    0 0 52px rgba(240,130,10,.38),
    0 0 90px rgba(200,90,5,.18);
  animation: flameFlicker 1.7s ease-in-out infinite;
}
.bbs-sc-r .bbs-bulb { animation-delay: .6s; }
@keyframes flameFlicker {
  0%,100% { transform: scaleX(1) scaleY(1) rotate(0deg); opacity: .9; }
  22%  { transform: scaleX(.86) scaleY(1.07) rotate(-2deg); opacity: 1; }
  48%  { transform: scaleX(1.07) scaleY(.94) rotate(1.5deg); opacity: .85; }
  74%  { transform: scaleX(.92) scaleY(1.05) rotate(-1deg); opacity: .95; }
}
#boothBgScene.awakening .bbs-bulb {
  animation: flameRage 1s ease-in-out infinite;
  box-shadow:
    0 0 20px rgba(255,220,60,.9),
    0 0 50px rgba(255,160,20,.7),
    0 0 100px rgba(230,120,10,.5);
}
@keyframes flameRage {
  0%,100% { transform: scaleX(1) scaleY(1.05); opacity: 1; }
  25%  { transform: scaleX(.78) scaleY(1.18) rotate(-3deg); }
  55%  { transform: scaleX(1.12) scaleY(.9) rotate(2.5deg); }
  80%  { transform: scaleX(.85) scaleY(1.12) rotate(-2deg); }
}

.bbs-zoltar {
  position: absolute; top: 6px; left: 50%;
  width: 250px;
  display: flex; flex-direction: column; align-items: center;
  z-index: 2;
  /* Default: hidden until oracle opens */
  opacity: 0;
  transform: translateX(-50%) translateY(35px) scale(.86);
  filter: blur(10px) brightness(.15);
}

/* ── Booth entrance: elements materialize sequentially ── */

/* Drapes do a subtle unfurl when scene starts */
#boothBgScene.emerging .bbs-drape {
  animation: drapeReveal 1.8s ease-out forwards, drapeEnergize 2.5s ease-in-out 1.8s infinite;
}
@keyframes drapeReveal {
  0%   { opacity: 0; transform: scaleY(.92) translateY(-8px); }
  100% { opacity: 1; transform: scaleY(1)   translateY(0); }
}

/* Sconces flicker on like candles catching */
#boothBgScene.emerging .bbs-bulb {
  animation: candleFlicker 2.2s ease forwards;
  animation-delay: .4s;
}
@keyframes candleFlicker {
  0%   { opacity: 0; box-shadow: none; }
  15%  { opacity: .9; }
  25%  { opacity: .2; }
  38%  { opacity: .85; }
  50%  { opacity: .3; }
  62%  { opacity: .95; }
  75%  { opacity: .5; }
  88%  { opacity: 1; }
  100% { opacity: 1; box-shadow: 0 -6px 14px rgba(255,200,100,.8), 0 -12px 28px rgba(255,160,60,.5); }
}

/* Crystal ball fades in from void — like fog clearing */
#boothBgScene.emerging .bbs-crystal-wrap {
  animation: crystalMaterialize 3s ease-out forwards;
  animation-delay: .8s;
}
@keyframes crystalMaterialize {
  0%   { opacity: 0; filter: blur(12px) brightness(.2); transform: scale(.88); }
  40%  { opacity: .5; filter: blur(5px)  brightness(.6); }
  70%  { opacity: .85; filter: blur(1px)  brightness(.9); }
  100% { opacity: 1; filter: blur(0)    brightness(1);  transform: scale(1); }
}

/* Crystal starts dark and empty */
.bbs-crystal-wrap {
  opacity: 0;
}
#boothBgScene.emerged .bbs-crystal-wrap,
#boothBgScene.awakening .bbs-crystal-wrap {
  opacity: 1;
}

/* ── Emergence ── */
#boothBgScene.emerging .bbs-zoltar {
  animation: zoltarEmerge 5s cubic-bezier(.1,.9,.25,1) forwards;
}
@keyframes zoltarEmerge {
  0%   { opacity: 0;   filter: blur(14px) brightness(.08); transform: translateX(-50%) translateY(42px) scale(.82); }
  12%  { opacity: .06; filter: blur(12px) brightness(.15); transform: translateX(-50%) translateY(34px) scale(.86); }
  28%  { opacity: .22; filter: blur(9px)  brightness(.3);  transform: translateX(-50%) translateY(22px) scale(.90); }
  48%  { opacity: .5;  filter: blur(5px)  brightness(.55); transform: translateX(-50%) translateY(12px) scale(.94); }
  68%  { opacity: .76; filter: blur(2px)  brightness(.78); transform: translateX(-50%) translateY(4px)  scale(.98); }
  85%  { opacity: .92; filter: blur(.6px) brightness(.94); transform: translateX(-50%) translateY(1px)  scale(.998); }
  100% { opacity: 1;   filter: blur(0)    brightness(1);   transform: translateX(-50%) translateY(0)    scale(1); }
}

/* Eyes glow and appear early — like something watching through the dark */
#boothBgScene.emerging .bbs-eye {
  animation: eyesPeekThrough 5s ease-out forwards;
  background: rgba(200,150,60,.75);
  box-shadow: 0 0 7px rgba(255,180,50,.7), 0 0 18px rgba(255,140,30,.45), 0 0 40px rgba(230,110,10,.25);
}
@keyframes eyesPeekThrough {
  0%   { opacity: 0;   transform: scale(.3); }
  14%  { opacity: .85; transform: scale(1.4); }
  35%  { opacity: .9;  transform: scale(1.15); }
  70%  { opacity: .88; transform: scale(1.05); }
  100% { opacity: .9;  transform: scale(1); background: rgba(8,3,2,.96); box-shadow: 0 0 6px rgba(220,160,50,.35); }
}

/* Violet aura pulses as figure materializes */
#boothBgScene.emerging .bbs-zoltar::after {
  content: '';
  position: absolute; inset: -30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(190,130,255,.5), transparent 68%);
  animation: figureAura 5s ease-out forwards;
  pointer-events: none; z-index: -1;
}
@keyframes figureAura {
  0%   { opacity: 0; transform: scale(.4); }
  22%  { opacity: .85; transform: scale(.9); }
  55%  { opacity: .65; transform: scale(1.1); }
  80%  { opacity: .3; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.45); }
}

/* ── Emerged: normal breathing ── */
#boothBgScene.emerged .bbs-zoltar {
  opacity: 1;
  filter: blur(0) brightness(1);
  transform: translateX(-50%);
  animation: zoltarBreathe 5.5s ease-in-out infinite;
}
@keyframes zoltarBreathe {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

/* ── Awakening: levitation overrides breathing ── */
#boothBgScene.awakening .bbs-zoltar {
  opacity: 1;
  filter: blur(0) brightness(1);
  animation: zoltarLevitate 2.2s ease-in-out infinite;
}
@keyframes zoltarLevitate {
  0%,100% { transform: translateX(-50%) translateY(0) scale(1); }
  40% { transform: translateX(-50%) translateY(-14px) scale(1.025); }
  80% { transform: translateX(-50%) translateY(-10px) scale(1.015); }
}
.bbs-turban {
  width: 78px; height: 52px;
  background:
    /* Fabric fold highlights */
    repeating-linear-gradient(162deg,
      transparent 0px, transparent 10px,
      rgba(255,240,100,.08) 11px, transparent 13px),
    /* Light catching top of turban */
    radial-gradient(ellipse 55% 35% at 50% 8%, rgba(255,245,160,.45) 0%, transparent 100%),
    /* Deep shadow on sides */
    radial-gradient(ellipse 30% 80% at 5% 60%, rgba(60,35,5,.6) 0%, transparent 100%),
    radial-gradient(ellipse 30% 80% at 95% 60%, rgba(50,28,4,.55) 0%, transparent 100%),
    /* Base rich gold */
    linear-gradient(145deg, #c89a10 0%, #e8c020 18%, #f5d840 32%, #d4a818 52%, #a07810 72%, #6a4e08 100%);
  border-radius: 52% 52% 16% 16% / 74% 74% 26% 26%;
  position: relative;
  box-shadow:
    0 6px 18px rgba(0,0,0,.65),
    inset 0 -4px 10px rgba(0,0,0,.35),
    inset 0 4px 8px rgba(255,240,130,.18),
    0 0 28px rgba(180,130,20,.12);
}
/* Wrap band across the turban */
.bbs-turban::after {
  content: '';
  position: absolute; bottom: 7px; left: 6%; right: 6%; height: 9px;
  background: linear-gradient(90deg,
    rgba(100,68,8,.8) 0%, rgba(140,100,15,.65) 20%,
    rgba(160,118,18,.7) 50%, rgba(140,100,15,.65) 80%, rgba(100,68,8,.8) 100%);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4), inset 0 1px rgba(220,180,60,.2);
}
.bbs-feather {
  position: absolute; top: -30px; left: 52%;
  transform: translateX(-50%) rotate(-6deg);
  width: 6px; height: 34px;
  background: linear-gradient(180deg, rgba(235,60,60,1) 0%, rgba(180,25,80,.95) 45%, rgba(110,18,40,.85) 75%, rgba(75,30,10,.7) 100%);
  border-radius: 4px 4px 1px 1px;
  box-shadow: 0 0 6px rgba(200,30,60,.35);
}
.bbs-feather::before {
  content: '';
  position: absolute; top: -9px; left: -5px;
  width: 16px; height: 14px;
  background: radial-gradient(ellipse, rgba(235,55,55,.85) 0%, rgba(180,20,60,.5) 60%, transparent 100%);
  border-radius: 50%; filter: blur(3px);
}
/* Feather quill end */
.bbs-feather::after {
  content: '';
  position: absolute; top: 12px; left: -3px;
  width: 12px; height: 18px;
  background: rgba(160,18,55,.2);
  border-radius: 50%; filter: blur(4px);
}
.bbs-jewel {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,200,200,1) 0%, rgba(240,80,80,.95) 25%,
      rgba(200,30,30,.9) 55%, rgba(140,10,10,.85) 100%);
  box-shadow:
    0 0 6px rgba(240,60,60,.8),
    0 0 16px rgba(200,30,30,.55),
    0 0 30px rgba(160,15,15,.3),
    inset 0 1px 3px rgba(255,220,220,.4);
}
.bbs-head {
  width: 62px; height: 68px; margin-top: -8px;
  background:
    /* cheek highlight left — candlelight catching the face */
    radial-gradient(ellipse 35% 30% at 22% 42%, rgba(220,170,100,.55) 0%, transparent 100%),
    /* deep shadow right side — opposite the light */
    radial-gradient(ellipse 40% 60% at 90% 55%, rgba(30,15,5,.7) 0%, transparent 100%),
    /* under-eye sockets — ominous hollows */
    radial-gradient(ellipse 60% 20% at 50% 38%, rgba(40,20,8,.45) 0%, transparent 100%),
    /* base skin — darker, more aged */
    radial-gradient(ellipse at 40% 28%, rgba(185,130,72,.95) 0%, rgba(148,95,48,.96) 42%, rgba(98,58,26,.98) 78%, rgba(60,30,10,1) 100%);
  border-radius: 46% 46% 38% 38%;
  position: relative;
  box-shadow:
    0 6px 18px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.4),
    inset 0 -8px 14px rgba(0,0,0,.4),
    inset 0 3px 6px rgba(220,170,90,.12);
}
/* Nose shadow — dark vertical ridge in lower face */
.bbs-head::before {
  content: '';
  position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 11px;
  background: linear-gradient(180deg, rgba(40,18,5,.0) 0%, rgba(40,18,5,.55) 55%, rgba(60,25,8,.7) 100%);
  border-radius: 50% 50% 40% 40%;
  filter: blur(1.5px);
}
/* Chin shadow + jaw definition */
.bbs-head::after {
  content: '';
  position: absolute; bottom: 0; left: 10%; right: 10%; height: 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(20,8,2,.6) 100%);
  border-radius: 0 0 40% 40%;
}
.bbs-eyes {
  position: absolute; top: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 12px;
}
/* Eye socket — dark hollow around the eye */
.bbs-eye {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(35,12,4,.7), rgba(8,3,2,.98) 55%);
  box-shadow:
    0 0 0 3px rgba(30,12,4,.5),
    0 0 8px rgba(0,0,0,.8),
    0 0 4px rgba(180,100,25,.22),
    inset 0 1px 2px rgba(150,80,20,.15);
  animation: bbsEyeIdle 4.5s ease-in-out infinite;
}
.bbs-eye:last-child { animation-delay: .7s; }
@keyframes bbsEyeIdle { 0%,80%,100%{opacity:.92;transform:scale(1)} 86%{opacity:.04;transform:scale(.55)} }
#boothBgScene.awakening .bbs-eye {
  animation: bbsEyeBlaze .85s ease-in-out infinite;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,220,.9), rgba(255,240,100,.85));
  box-shadow:
    0 0 5px #fff,
    0 0 16px rgba(255,245,120,1),
    0 0 36px rgba(255,210,50,.95),
    0 0 70px rgba(255,180,20,.75),
    0 0 140px rgba(255,140,0,.45);
}
#boothBgScene.awakening .bbs-eye:last-child { animation-delay: .3s; }
@keyframes bbsEyeBlaze {
  0%,100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(2); opacity: 1; }
}
.bbs-beard {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 24px;
  background:
    linear-gradient(165deg, rgba(70,48,20,.95) 0%, rgba(52,35,14,.88) 40%, rgba(35,22,8,.75) 100%);
  clip-path: polygon(18% 0%, 82% 0%, 92% 38%, 68% 78%, 55% 100%, 45% 100%, 32% 78%, 8% 38%);
  /* Beard highlight — slight grey streak */
  box-shadow: inset 0 0 6px rgba(120,95,50,.3), inset 2px 0 4px rgba(160,130,60,.12);
}
.bbs-body {
  width: 250px; height: 180px; margin-top: -8px;
  background:
    /* Fabric fold highlights — cloth catching candlelight */
    repeating-linear-gradient(172deg,
      transparent 0px, transparent 18px,
      rgba(255,255,255,.025) 20px, transparent 22px),
    /* Shoulder gold trim glow */
    radial-gradient(ellipse 85% 18% at 50% 2%, rgba(210,165,40,.55) 0%, transparent 100%),
    /* Left side shadow (away from candle) */
    radial-gradient(ellipse 35% 90% at 0% 50%, rgba(0,0,0,.55) 0%, transparent 100%),
    /* Right candlelight catch */
    radial-gradient(ellipse 25% 50% at 95% 30%, rgba(255,150,30,.08) 0%, transparent 100%),
    /* Center chest highlight */
    radial-gradient(ellipse 30% 35% at 50% 15%, rgba(80,30,120,.35) 0%, transparent 100%),
    /* Base robe — deep jewel tones */
    linear-gradient(165deg,
      #c8900e 0%, #e8aa18 4%, #b88010 8%,   /* gold shoulder left */
      #7a1218 11%, #921822 14%,              /* crimson collar */
      #2e0e50 20%, #220a40 36%, #180638 55%, /* deep violet robe */
      #0e0428 72%, #080218 88%, #040110 100%);
  clip-path: polygon(27% 0%, 73% 0%, 90% 14%, 100% 100%, 0% 100%, 10% 14%);
  position: relative;
  box-shadow:
    0 10px 35px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.3),
    inset 0 2px 6px rgba(220,170,60,.12);
}
/* Gold shoulder trim line */
.bbs-body::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 28px;
  background: linear-gradient(180deg,
    rgba(220,175,45,.65) 0%, rgba(200,155,35,.4) 40%, transparent 100%);
  clip-path: polygon(27% 0%, 73% 0%, 84% 100%, 16% 100%);
}
/* Center chest decorative line */
.bbs-body::after {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 60%;
  background: linear-gradient(180deg, rgba(200,160,40,.55) 0%, transparent 100%);
  filter: blur(.5px);
}
.bbs-medallion {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,248,200,1) 0%, rgba(255,220,80,.96) 18%,
      rgba(210,165,30,.9) 45%, rgba(155,110,15,.85) 75%, rgba(100,65,5,.8) 100%);
  box-shadow:
    0 0 8px rgba(240,200,50,.7),
    0 0 20px rgba(210,165,30,.5),
    0 0 38px rgba(180,130,15,.25),
    inset 0 1px 3px rgba(255,250,200,.5),
    inset 0 -1px 2px rgba(80,45,5,.4);
}
.bbs-crystal-wrap {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 36px;
  display: flex; flex-direction: column; align-items: center; z-index: 4;
  overflow: visible;
}
.bbs-crystal-rays {
  position: absolute; top: 50%; left: 50%;
  width: 340px; height: 340px; margin: -170px 0 0 -170px;
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,  rgba(255,110,190,.22) 14deg, transparent 28deg,
    transparent 55deg,  rgba(255,90,175,.16) 69deg, transparent 83deg,
    transparent 110deg, rgba(255,110,190,.22) 124deg, transparent 138deg,
    transparent 165deg, rgba(255,90,175,.16) 179deg, transparent 193deg,
    transparent 220deg, rgba(255,110,190,.22) 234deg, transparent 248deg,
    transparent 275deg, rgba(255,90,175,.16) 289deg, transparent 303deg,
    transparent 330deg, rgba(255,110,190,.18) 344deg, transparent 358deg
  );
  pointer-events: none; z-index: -1;
  transition: opacity 1.2s ease;
}
#boothBgScene.awakening .bbs-crystal-rays {
  opacity: 1;
  animation: raysRotate 10s linear infinite;
}
@keyframes raysRotate { to { transform: rotate(360deg); } }

.bbs-crystal {
  width: 94px; height: 94px; border-radius: 50%;
  background:
    /* Primary specular highlight — sharp glass reflection */
    radial-gradient(ellipse 28% 18% at 34% 22%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.1) 60%, transparent 100%),
    /* Secondary soft highlight */
    radial-gradient(ellipse 16% 10% at 62% 32%, rgba(255,255,255,.38) 0%, transparent 100%),
    /* Interior nebula depth — layered */
    radial-gradient(circle at 45% 55%, rgba(180,60,240,.85) 0%, rgba(100,20,200,.7) 30%, rgba(50,5,130,.6) 60%, rgba(10,2,40,.85) 100%),
    /* Bottom reflection — glass resting on table picks up light */
    radial-gradient(ellipse 70% 30% at 50% 95%, rgba(150,80,220,.35) 0%, transparent 100%);
  box-shadow:
    /* Outer glow — purple-violet */
    0 0 28px rgba(180,60,240,.65),
    0 0 58px rgba(140,30,210,.42),
    0 0 100px rgba(100,15,180,.25),
    /* Cast shadow below */
    0 18px 30px rgba(0,0,0,.6),
    /* Inner glass depth */
    inset 0 0 20px rgba(80,0,160,.55),
    inset 0 4px 12px rgba(200,120,255,.15);
  animation: bbsCrystalPulse 3.5s ease-in-out infinite;
  position: relative; overflow: hidden;
}
.bbs-crystal-shine {
  position: absolute; top: 14px; left: 18px;
  width: 26px; height: 13px;
  background: linear-gradient(130deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 60%, transparent 100%);
  border-radius: 50%; transform: rotate(-32deg); filter: blur(1.5px);
}
.bbs-crystal-shine::after {
  content: '';
  position: absolute; top: 18px; left: -3px;
  width: 12px; height: 6px;
  background: rgba(255,255,255,.28);
  border-radius: 50%; filter: blur(1.5px);
}
/* Edge rim light — glass edge catches ambient light */
.bbs-crystal-swirl {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0%, rgba(200,140,255,.1) 15%, transparent 30%,
      transparent 55%, rgba(160,80,255,.08) 70%, transparent 85%);
  animation: bbsCrystalSpin 11s linear infinite;
}
.bbs-crystal-swirl2 {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, transparent 0%, rgba(140,60,255,.12) 20%, transparent 42%);
  animation: bbsCrystalSpin 18s linear infinite reverse;
}
@keyframes bbsCrystalPulse {
  0%,100% {
    box-shadow: 0 0 30px rgba(255,100,165,.78), 0 0 60px rgba(240,60,135,.5), 0 0 100px rgba(200,40,115,.32);
  }
  50% {
    box-shadow: 0 0 50px rgba(255,140,190,.95), 0 0 90px rgba(252,85,158,.68), 0 0 145px rgba(220,50,135,.48);
  }
}
@keyframes bbsCrystalSpin { to { transform: rotate(360deg); } }
#boothBgScene.awakening .bbs-crystal {
  animation: bbsCrystalRage 1.3s ease-in-out infinite;
}
@keyframes bbsCrystalRage {
  0%,100% {
    transform: scale(1);
    box-shadow: 0 0 55px rgba(255,120,185,.95), 0 0 110px rgba(255,80,160,.75), 0 0 180px rgba(230,45,140,.55), 0 0 260px rgba(190,20,120,.3);
    filter: brightness(1.3) saturate(1.6);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 90px rgba(255,160,210,1), 0 0 170px rgba(255,110,185,.95), 0 0 260px rgba(245,65,155,.75), 0 0 380px rgba(210,35,140,.5);
    filter: brightness(2.2) saturate(2.5);
  }
}
.bbs-crystal-stand {
  width: 40px; height: 14px;
  background: linear-gradient(180deg, rgba(110,55,155,.78) 0%, rgba(60,22,90,.58) 100%);
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
.bbs-table {
  position: absolute; bottom: 0; left: 0; right: 0; height: 36px; z-index: 3;
  background:
    /* Velvet cloth surface */
    linear-gradient(180deg, rgba(40,18,70,.92) 0%, rgba(28,10,50,.96) 40%, rgba(16,6,30,.98) 100%);
  border-top: 1px solid rgba(150,100,220,.22);
  /* Wood edge below the cloth */
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(180,130,255,.08),
    0 -1px 0 rgba(80,40,130,.3);
  display: flex; align-items: center; justify-content: space-between; padding: 0 18px;
}
.bbs-card {
  width: 24px; height: 36px;
  background: linear-gradient(155deg, rgba(22,35,105,.95) 0%, rgba(14,24,78,.92) 60%, rgba(8,14,50,.88) 100%);
  border-radius: 3px;
  border: 1px solid rgba(90,118,210,.3);
  position: relative; top: -16px;
  box-shadow:
    2px 3px 8px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(160,180,255,.1);
}
.bbs-card {
  width: 28px; height: 40px;
  background: linear-gradient(145deg, rgba(28,46,128,.9) 0%, rgba(18,32,98,.85) 100%);
  border-radius: 3px; border: 1px solid rgba(100,130,220,.25);
  position: relative; top: -14px;
  box-shadow: 2px 2px 6px rgba(0,0,0,.5);
}
.bbs-card::after {
  content: '✦'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: rgba(180,200,255,.35);
}
.bbs-card-l { transform: rotate(-8deg); }
.bbs-card-r { transform: rotate(7deg); }
.bbs-mist {
  position: absolute; bottom: 0; z-index: 5;
  width: 150%; left: -25%; height: 50px;
  background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(110,50,195,.28) 0%, transparent 70%);
  border-radius: 50%; filter: blur(12px);
  animation: bbsMist 8s ease-in-out infinite;
}
.bbs-mi2 { animation-delay: 2.6s; animation-duration: 10s; opacity: .65; background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(80,30,160,.22) 0%, transparent 70%); }
.bbs-mi3 { animation-delay: 5.2s; animation-duration: 13s; opacity: .45; width: 120%; left: -10%; background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(40,60,180,.18) 0%, transparent 70%); }
.bbs-mi4 { animation-delay: 1.1s; animation-duration: 9.5s; opacity: .5; width: 90%; left: 5%; height: 38px; background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(130,40,200,.2) 0%, transparent 70%); }
.bbs-mi5 { animation-delay: 3.9s; animation-duration: 11.5s; opacity: .35; width: 80%; left: 10%; background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(60,40,160,.18) 0%, transparent 70%); }
@keyframes bbsMist { 0%,100%{transform:scaleX(1) translateY(0)} 50%{transform:scaleX(1.12) translateY(-8px)} }
#boothBgScene.awakening .bbs-mist {
  animation: mistRage 1.9s ease-in-out infinite !important;
  background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(160,60,240,.55) 0%, transparent 72%) !important;
  filter: blur(14px);
}
@keyframes mistRage {
  0%,100% { height: 90px; opacity: .95; transform: scaleX(1.4) translateY(-18px); }
  50% { height: 140px; opacity: 1; transform: scaleX(1.65) translateY(-48px); }
}

/* ── Lightning flash overlay ── */
.bbs-lightning {
  position: absolute; inset: 0; z-index: 9;
  pointer-events: none; opacity: 0; background: transparent;
}
#boothBgScene.awakening .bbs-lightning {
  animation: lightningStrike 4.2s ease-in-out infinite;
}
@keyframes lightningStrike {
  0%,100% { opacity: 0; background: transparent; }
  4%  { opacity: 1; background: rgba(150,70,255,.52); }
  6%  { opacity: .1; }
  8%  { opacity: .8; background: rgba(190,110,255,.38); }
  10% { opacity: 0; }
  52% { opacity: 0; }
  54% { opacity: .9; background: rgba(130,50,230,.45); }
  56% { opacity: .05; }
  57% { opacity: .6; background: rgba(170,90,255,.3); }
  59% { opacity: 0; }
}

/* ── Pre-guess: Oracle about to reveal — maximum theatrics ── */
#boothBgScene.pre-guess .bbs-zoltar {
  opacity: 1; filter: blur(0) brightness(1.6);
  animation: zoltarPreGuess 2.5s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes zoltarPreGuess {
  0%   { transform: translateX(-50%) translateY(0px)   scale(1);    filter: brightness(1.1); }
  28%  { transform: translateX(-50%) translateY(-24px) scale(1.07); filter: brightness(1.8); }
  60%  { transform: translateX(-50%) translateY(-20px) scale(1.08) rotate(-2deg); filter: brightness(2.2); }
  80%  { transform: translateX(-50%) translateY(-22px) scale(1.08) rotate(1.5deg); filter: brightness(2); }
  100% { transform: translateX(-50%) translateY(-16px) scale(1.06); filter: brightness(1.7); }
}
#boothBgScene.pre-guess .bbs-eye {
  animation: eyePreGuess .38s ease-in-out infinite;
  background: #fff !important;
  box-shadow:
    0 0 8px 4px #fff,
    0 0 26px 12px rgba(255,240,120,1),
    0 0 60px 24px rgba(255,160,0,.95),
    0 0 120px 48px rgba(255,80,0,.7) !important;
}
@keyframes eyePreGuess {
  0%,100% { transform: scale(1.9);  opacity: 1; }
  50%     { transform: scale(2.6);  opacity: .8; }
}
#boothBgScene.pre-guess .bbs-eye:last-child { animation-delay: .11s; }
#boothBgScene.pre-guess .bbs-mist {
  animation: mistPreGuess .95s ease-in-out infinite !important;
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(210,70,255,.9) 0%, transparent 72%) !important;
}
@keyframes mistPreGuess {
  0%,100% { transform: scaleX(1.15) translateY(0);    opacity: .95; }
  50%     { transform: scaleX(1.45) translateY(-90px); opacity: 1; }
}
#boothBgScene.pre-guess .bbs-crystal {
  animation: crystalPreGuess .75s ease-in-out infinite;
}
@keyframes crystalPreGuess {
  0%,100% { filter: brightness(2.5) saturate(2.5); }
  50%     { filter: brightness(4.2) saturate(3.2) hue-rotate(18deg); }
}
#boothBgScene.pre-guess .bbs-crystal-rays {
  opacity: 1;
  animation: raysPreGuess .55s linear infinite;
}
@keyframes raysPreGuess { to { transform: rotate(360deg); } }
#boothBgScene.pre-guess .bbs-lightning {
  animation: lightningFrenzy .32s steps(1) infinite;
}
@keyframes lightningFrenzy {
  0%,100% { opacity: 0; background: transparent; }
  38%     { opacity: .75; background: linear-gradient(180deg, transparent 15%, rgba(200,110,255,.28) 100%); }
}
#boothBgScene.pre-guess .bbs-drape {
  animation: drapePreGuess 1.4s ease-in-out infinite;
}
@keyframes drapePreGuess {
  0%,100% { filter: brightness(1.6); }
  50%     { filter: brightness(2.4) saturate(1.6); }
}
#boothBgScene.pre-guess .bbs-bulb {
  animation: flameRage .5s ease-in-out infinite;
  box-shadow:
    0 -6px 20px rgba(255,200,100,1),
    0 -12px 40px rgba(255,160,60,.9),
    0 -20px 80px rgba(255,100,0,.7) !important;
}

/* ── Floating energy particles ── */
.bbs-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none; z-index: 6;
  background: radial-gradient(circle, rgba(255,210,255,.98), rgba(210,80,255,.75));
  box-shadow: 0 0 10px rgba(255,160,255,.85), 0 0 24px rgba(200,70,255,.6);
}
@keyframes particleRise {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: .45; }
  100% { transform: translateY(-300px) translateX(var(--dx, 0px)) scale(.08); opacity: 0; }
}

/* ── Signal bars (connection strength indicator) ── */
.awk-signal-bars {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  justify-content: center;
  height: 28px;
  margin-bottom: 18px;
}
.awk-bar {
  width: 9px;
  border-radius: 3px 3px 2px 2px;
  background: rgba(122,44,255,.15);
  border: 1px solid rgba(122,44,255,.25);
  transition: background .6s ease, box-shadow .6s ease, border-color .6s ease;
}
.awk-bar:nth-child(1) { height: 30%; }
.awk-bar:nth-child(2) { height: 52%; }
.awk-bar:nth-child(3) { height: 76%; }
.awk-bar:nth-child(4) { height: 100%; }
.awk-bar.lit {
  background: linear-gradient(180deg, rgba(200,140,255,1) 0%, rgba(130,50,255,.85) 100%);
  border-color: rgba(200,140,255,.6);
  box-shadow: 0 0 8px rgba(180,100,255,.7), 0 0 20px rgba(140,60,255,.4);
  animation: barPulse 2s ease-in-out infinite;
}
@keyframes barPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .7; }
}

/* ── Intro connection row ── */
.awk-conn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  opacity: 0;
  animation: fadeInUp .8s ease 1.5s forwards;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.awk-conn-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(160,100,255,.7);
  animation: connDotPulse 1.4s ease-in-out infinite;
}
@keyframes connDotPulse {
  0%,100% { transform: scale(1);   opacity: .6; }
  50%     { transform: scale(1.5); opacity: 1;  }
}
.awk-conn-label {
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(180,130,255,.65);
  font-style: italic;
}

/* ── Awakening status text ── */
.awk-status {
  color: rgba(238,215,255,.98);
  font-family: 'Fraunces', serif;
  font-size: clamp(15px, 3.8vw, 21px);
  font-style: italic;
  text-align: center;
  letter-spacing: .09em;
  min-height: 32px;
  transition: opacity .35s ease;
  text-shadow:
    0 0 12px rgba(215,160,255,.9),
    0 0 32px rgba(190,100,255,.7),
    0 0 75px rgba(155,55,230,.45),
    0 0 130px rgba(120,30,200,.25);
  animation: awkPulse 3s ease-in-out infinite;
}
@keyframes awkPulse {
  0%,100% { letter-spacing: .09em; }
  50% { letter-spacing: .13em; }
}
.awk-substatus {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .07em;
  color: rgba(180,140,255,.55);
  font-style: italic;
  text-align: center;
  transition: opacity .45s ease;
  min-height: 18px;
}

/* ── Intro think screen ── */
#oracleIntro .booth-prompt {
  font-size: clamp(18px, 4vw, 24px);
  color: rgba(242,234,255,.96);
  text-shadow: 0 0 25px rgba(185,140,255,.45), 0 0 60px rgba(150,80,255,.2);
  transition: opacity .45s ease;
  margin: 0 0 14px;
  line-height: 1.5;
}
#oracleIntro .booth-sub {
  font-size: 13px;
  color: rgba(185,165,225,.8);
  transition: opacity .45s ease;
}

.oracle-thinking { display: flex; gap: 7px; align-items: center; padding: 12px 0; }
.oracle-thinking span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(150,90,220,.55);
  animation: thinkBounce 1.2s ease-in-out infinite;
}
.oracle-thinking span:nth-child(2) { animation-delay: .16s; }
.oracle-thinking span:nth-child(3) { animation-delay: .32s; }
@keyframes thinkBounce {
  0%,80%,100% { transform: scale(.6); opacity: .35; }
  40%          { transform: scale(1.25); opacity: 1; }
}

.oracle-wrong-msg {
  font-size: clamp(14px, 2.2vw, 16px); color: var(--ink-dim);
  line-height: 1.7; margin: 0 0 24px;
}

/* Paper slot */
.booth-slot {
  background: #0e0a08;
  border-left: 1.5px solid rgba(201,162,39,.35);
  border-right: 1.5px solid rgba(201,162,39,.35);
  height: 16px;
  display: flex; align-items: center; padding: 0 12px;
}
.booth-slot-slit {
  width: 100%; height: 4px;
  background: #000;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(201,162,39,.08);
}

/* ════════════════════════════════════════
   RECEIPT PAPER
   ════════════════════════════════════════ */
.oracle-paper {
  max-height: 0;
  overflow: hidden;
  border-left: 1.5px solid rgba(201,162,39,.3);
  border-right: 1.5px solid rgba(201,162,39,.3);
  border-bottom: 1.5px solid rgba(201,162,39,.3);
  border-radius: 0 0 6px 6px;
}

.paper-perforation {
  height: 10px;
  background:
    radial-gradient(circle at 50% 50%, #07050f 5px, #f5eed8 5px) repeat-x;
  background-size: 18px 10px;
  background-color: #f5eed8;
}

.paper-body {
  background: #f5eed8;
  padding: 20px 24px 22px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}

.paper-eyebrow {
  font-size: 9px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: #8a6a2a;
  margin: 0 0 14px; font-family: 'Inter', sans-serif;
}
.paper-name {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(28px, 6vw, 44px);
  color: #1a0f02; line-height: 1.1;
  margin: 0 0 16px; min-height: 48px;
  letter-spacing: -0.5px;
}
.paper-rule {
  width: 80%; height: 1px; margin: 0 0 16px;
  background: repeating-linear-gradient(90deg, #c9a22760 0px, #c9a22760 4px, transparent 4px, transparent 8px);
}
.paper-actions {
  display: flex; gap: 14px; align-items: center;
  opacity: 0; flex-wrap: wrap; justify-content: center;
}
.paper-btn-replay {
  background: #1a0f02; color: #f5eed8; border: none;
  padding: 9px 22px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; font-family: 'Inter', sans-serif;
  transition: opacity .15s;
}
.paper-btn-replay:hover { opacity: .8; }
.paper-btn-wrong {
  background: none; border: none; color: #8a6a2a;
  font-size: 12px; font-family: 'Inter', sans-serif;
  cursor: pointer; text-decoration: underline; padding: 0;
}
.paper-btn-wrong:hover { color: #1a0f02; }

/* ════════════════════════════════════════
   FOLLOW ALONG — GALLERY + SOCIAL CARDS
   ════════════════════════════════════════ */
.follow-along {
  padding: clamp(56px, 8vw, 100px) 0 clamp(40px, 6vw, 72px);
  background: var(--black-2);
  border-top: 1px solid rgba(255,255,255,.05);
}

/* Photo strip */
.gallery-strip {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 32px 0 36px;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip.dragging { cursor: grabbing; }

.gallery-track {
  display: flex;
  gap: 12px;
  padding: 8px max(24px, calc((100vw - 1200px) / 2));
  width: max-content;
}

.gallery-item {
  flex-shrink: 0;
  width: clamp(200px, 26vw, 300px);
  height: clamp(270px, 35vw, 400px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  background: var(--black-3);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 45%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.gallery-item:hover {
  border-color: rgba(201,162,39,.28);
  transform: translateY(-4px) scale(1.013);
  box-shadow: 0 20px 48px rgba(0,0,0,.55);
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block; pointer-events: none;
}

/* Social platform cards */
.social-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 580px) {
  .social-cards { grid-template-columns: 1fr; }
}

.social-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  background: var(--black-3);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.social-card:hover {
  border-color: var(--border);
  background: rgba(201,162,39,.04);
  transform: translateY(-2px);
}

.sc-icon-wrap {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-icon-ig {
  background: rgba(201,162,39,.1);
  border: 1px solid rgba(201,162,39,.22);
}
.sc-icon-yt {
  background: rgba(255,48,48,.1);
  border: 1px solid rgba(255,48,48,.22);
}
.sc-platform-icon {
  width: 22px; height: 22px;
  filter: brightness(0) invert(1);
}

.sc-text { flex: 1; min-width: 0; }
.sc-handle { font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 3px; }
.sc-desc { font-size: 12px; color: var(--ink-dim); margin: 0; line-height: 1.4; }

.sc-cta {
  font-size: 13px; font-weight: 700;
  color: var(--gold); flex-shrink: 0; letter-spacing: .3px;
  white-space: nowrap;
}

/* Lightbox */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 3500;
  background: rgba(0,0,0,.95);
  backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-overlay[hidden] { display: none; }

.lb-img-wrap {
  max-width: min(820px, 92vw);
  max-height: 90vh;
  display: flex; align-items: center; justify-content: center;
}
#lbImg {
  max-width: 100%; max-height: 88vh;
  border-radius: var(--radius);
  box-shadow: 0 40px 120px rgba(0,0,0,.9);
  display: block;
}

.lb-close {
  position: fixed; top: 20px; right: 20px;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  color: var(--ink); cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 3501;
}
.lb-close:hover { background: rgba(255,255,255,.16); }

.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--ink); cursor: pointer;
  font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 3501;
}
.lb-nav:hover { background: rgba(255,255,255,.16); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (max-width: 500px) {
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
}

/* ════════════════════════════════════════
   ILLUSION EASTER EGG
   ════════════════════════════════════════ */
.illusion-trigger {
  background: none; border: none; cursor: pointer;
  color: rgba(201,162,39,.13); font-size: 10px;
  padding: 0 3px; line-height: 1; vertical-align: middle;
  transition: color .4s ease;
}
.illusion-trigger:hover { color: rgba(201,162,39,.55); }

.illusion-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(14px);
}
.illusion-overlay[hidden] { display: none; }

.illusion-warn-box {
  width: min(460px, calc(100vw - 40px));
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 40px 100px rgba(0,0,0,.85);
  color: var(--ink);
}
.iw-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin: 0 0 10px;
}
.iw-title { font-size: clamp(18px,3vw,23px); margin: 0 0 14px; }
.iw-body { color: var(--ink-dim); font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.iw-body strong { color: var(--ink); }
.iw-note { color: var(--ink-dim); font-size: 12px; line-height: 1.5; opacity: .65; margin: 0 0 22px; }
.iw-actions { display: flex; align-items: center; gap: 18px; }

#illusionCanvas {
  width: min(700px, 90vmin);
  height: min(700px, 90vmin);
  border-radius: 50%;
  display: block;
  cursor: default;
  box-shadow: 0 0 80px rgba(0,0,0,.9);
}

.illusion-exit {
  position: fixed; top: 20px; right: 20px;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.07);
  color: var(--ink); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 4001;
}
.illusion-exit:hover { background: rgba(255,255,255,.15); }

.illusion-end-screen {
  position: fixed; inset: 0; z-index: 4002;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.88);
  text-align: center;
  gap: 0;
}
.illusion-end-screen[hidden] { display: none; }

.ie-big {
  font-family: 'Fraunces', serif;
  font-size: clamp(40px, 8vw, 80px);
  color: var(--ink); margin: 0 0 14px; line-height: 1.1;
}
.ie-sub {
  color: var(--ink-dim); font-size: clamp(15px, 2.2vw, 20px);
  margin: 0 0 36px;
}
.ie-close { min-width: 140px; }

/* ════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  #magicCanvas,.card-suit,.cursor-trail,.magic-cursor{display:none !important;}
  .magic-cursor-on *{cursor:auto !important;}
  .magic-entrance .entrance-el,.magic-entrance .entrance-el.entrance-in{opacity:1 !important;transform:none !important;transition:none !important;}
  .nav-cta{animation:none !important;}
  #cursorLight,#scrollBar{display:none !important;}
  .magic-toys{display:none !important;}
  #bunnyField{display:none;}
  .hero-scroll-hint{display:none;}
  .marquee-strip{display:none;}
  .hero-accent{animation:none;}
  .illusion-trigger{display:none;}
}

/* ════════════════════════════════════════
   MARQUEE TICKER STRIP
   ════════════════════════════════════════ */
.marquee-strip {
  overflow: hidden;
  border-top: 1px solid rgba(201,162,39,.12);
  border-bottom: 1px solid rgba(201,162,39,.12);
  padding: 13px 0;
  background: rgba(201,162,39,.025);
  /* prevent any horizontal scroll from widening the page */
  width: 100%;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: marqueeScroll 18s linear infinite;
  will-change: transform;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-item {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0 28px;
  transition: color .2s ease;
}
.marquee-item:hover { color: var(--ink); }

.marquee-gem {
  color: var(--gold);
  font-size: 10px;
  opacity: .7;
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════ */
.sr {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .75s cubic-bezier(.22,1,.36,1),
    transform .75s cubic-bezier(.22,1,.36,1);
}
.sr.sr-visible {
  opacity: 1;
  transform: none;
}

/* stagger children inside a container */
.sr-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .65s cubic-bezier(.22,1,.36,1),
    transform .65s cubic-bezier(.22,1,.36,1);
}
.sr-stagger.sr-visible > *:nth-child(1) { transition-delay: 0s;    opacity: 1; transform: none; }
.sr-stagger.sr-visible > *:nth-child(2) { transition-delay: .12s;  opacity: 1; transform: none; }
.sr-stagger.sr-visible > *:nth-child(3) { transition-delay: .24s;  opacity: 1; transform: none; }
.sr-stagger.sr-visible > *:nth-child(4) { transition-delay: .36s;  opacity: 1; transform: none; }