/* Boardwalk Lights — full-bleed 3D spark ride. PF only. Never booth/port 6000. */

#cabinet-marquee.pf-mq-root {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #07040c;
}
#cabinet-marquee .interior-sky,
#cabinet-marquee .interior-room::before,
#cabinet-marquee .interior-room::after {
  display: none;
}
#cabinet-marquee .pf-mq-viewport {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  touch-action: none;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(240, 180, 80, 0.16), transparent 48%),
    #1a0c12;
}
#marqueeCanvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  background: #07040c;
  pointer-events: auto;
}
#marqueeCard.is-playing #marqueeCanvas { cursor: grab; }
#marqueeCard.is-playing #marqueeCanvas.is-dragging { cursor: grabbing; }

#cabinet-marquee .interior-stage {
  perspective: none;
  height: 100vh;
  height: 100dvh;
}
#cabinet-marquee .interior-stage .attraction-card,
#cabinet-marquee .marquee-card {
  position: absolute;
  inset: 0;
  z-index: 3;
  touch-action: none;
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  animation: none;
  overflow: hidden;
  pointer-events: none;
}
#cabinet-marquee .marquee-card.has-focus::after { display: none; }

#cabinet-marquee .pf-mq-dock,
#cabinet-marquee .pf-mq-dock *,
#cabinet-marquee .vendor-result,
#cabinet-marquee #marqueeGo,
#cabinet-marquee #marqueeChallenge,
#cabinet-marquee .interior-back {
  pointer-events: auto;
}

#cabinet-marquee .pf-mq-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 4, 12, 0.55) 0%, transparent 18%, transparent 72%, rgba(7, 4, 12, 0.72) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(7, 4, 12, 0.45) 100%);
}

#cabinet-marquee .pf-mq-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.7rem 1rem 0;
  pointer-events: none;
  background: none;
  border: 0;
}
#cabinet-marquee .pf-mq-header .interior-back { pointer-events: auto; }
#cabinet-marquee .pf-mq-titles {
  text-shadow: 0 1px 0 #1a0c08, 0 0 14px rgba(0, 0, 0, 0.85);
}
#cabinet-marquee .pf-mq-titles h1 {
  margin: 0.1rem 0 0;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  color: #f0d09a;
}
#cabinet-marquee .pf-mq-blurb {
  max-width: 36rem;
  margin: 0.2rem 0 0;
  color: #e8c4a0;
  font-size: 0.88rem;
}

.pf-mq-art-keep {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.marquee-rk-hud {
  position: absolute;
  top: 4.6rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 5;
  font: 700 0.78rem/1.2 Georgia, serif;
  letter-spacing: 0.14em;
  color: #f0d09a;
  text-shadow: 0 1px 0 #1a0c08, 0 0 12px #000;
  pointer-events: none;
}

.pf-mq-playhud {
  position: absolute;
  top: 6.1rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 1px 0 #1a0c08, 0 0 12px #000;
}
.pf-mq-word {
  margin: 0;
  font: 700 1.45rem/1.1 Georgia, serif;
  letter-spacing: 0.28em;
  color: #fff4c8;
}
.pf-mq-word .is-done { color: rgba(240, 208, 154, 0.35); }
.pf-mq-word .is-next { color: #ffe08a; text-shadow: 0 0 12px rgba(255, 210, 90, 0.9); }
.pf-mq-hint {
  margin: 0.25rem 0 0;
  font: 0.8rem/1.3 Georgia, serif;
  color: #e8c4a0;
}

.pf-mq-howto {
  position: absolute;
  left: 0.85rem;
  bottom: 5.4rem;
  z-index: 5;
  padding: 0.55rem 0.7rem;
  max-width: 16.5rem;
  border: 1px solid rgba(240, 208, 154, 0.38);
  border-radius: 10px;
  background: rgba(10, 6, 12, 0.72);
  color: #f0d09a;
  pointer-events: none;
}
.pf-mq-howto-title {
  margin: 0 0 0.3rem;
  font: 700 0.68rem/1 Georgia, serif;
  letter-spacing: 0.16em;
}
.pf-mq-howto ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-mq-howto li {
  margin: 0.18rem 0 0;
  font: 0.78rem/1.35 Georgia, serif;
  color: #e8c4a0;
}
.pf-mq-howto b { color: #ffe08a; }

.marquee-card.is-playing .pf-mq-howto {
  opacity: 0.88;
}

.pf-mq-keys {
  position: absolute;
  left: 50%;
  bottom: 1.15rem;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 0.55rem;
  pointer-events: none;
}
.pf-mq-keys span {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 208, 154, 0.4);
  background: rgba(10, 6, 12, 0.7);
  color: #f0d09a;
  font: 700 0.68rem/1 Georgia, serif;
  letter-spacing: 0.08em;
}
.pf-mq-keys .gold { color: #1a1008; background: #ffe08a; border-color: #f0d09a; }
.pf-mq-keys .ice { color: #072028; background: #8ee8ff; border-color: #8ee8ff; }

.pf-mq-pips {
  position: absolute;
  right: 1rem;
  bottom: 5.5rem;
  z-index: 5;
}

.pf-mq-status {
  position: absolute;
  left: 50%;
  bottom: 3.15rem;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  max-width: 90%;
  text-align: center;
  text-shadow: 0 1px 0 #1a0c08;
  pointer-events: none;
}

.pf-mq-dock {
  position: absolute;
  right: 0.8rem;
  top: 4.6rem;
  z-index: 6;
  width: min(22rem, calc(100vw - 1.6rem));
  padding: 0.75rem 0.85rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(240, 208, 154, 0.35);
  background: rgba(10, 6, 12, 0.78);
  color: #f0d09a;
}
.marquee-card.is-playing .pf-mq-dock { display: none; }

.pf-mq-dock .barker-call { margin: 0.45rem 0 0.55rem; }
.pf-mq-dock .ticket-button { width: 100%; }

.marquee-card.is-playing .vendor-vestibule-only,
.marquee-card.is-result .vendor-vestibule-only { display: none; }
.marquee-card .vendor-play-only { display: none; }
.marquee-card.is-playing .vendor-play-only { display: block; }
.marquee-card.is-playing .pf-mq-keys { display: flex; }

.marquee-card.is-playing #marqueeGo { display: none; }

@media (max-width: 820px) {
  .pf-mq-dock {
    top: auto;
    bottom: 0.6rem;
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
  }
  .pf-mq-howto { display: none; }
  .marquee-card.is-playing .pf-mq-howto { display: block; bottom: 4.6rem; max-width: 14rem; }
  .pf-mq-word { font-size: 1.05rem; letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  #marqueeCanvas { cursor: default; }
}