@import url("https://use.typekit.net/sby8vln.css");

/* REMOVE BACKGROUND HAIR TIES */
#furkin-foyer .ff-hairtie {
  display: none !important;
}
/* ==========================================
   FURKIN HAUNTED HOUSE
========================================== */

#furkin-haunted-experience,
#furkin-haunted-experience * {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}


/* ==========================================
   SCENE 1 — EXTERIOR
========================================== */

#furkin-haunted-hero {
  position: relative;

  width: 100vw !important;
  max-width: none !important;

  height: 100vh;
  min-height: 650px;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  overflow: hidden;

  background: #111333;

  isolation: isolate;

  perspective: 1500px;
}


/* BACKGROUND */

#furkin-haunted-hero .fh-background {
  position: absolute;

  inset: -3%;

  z-index: 1;

  background-image:
    url("https://www.furkin.com/hubfs/FUR%20halloween%20background.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.03);

  transition:
    transform 3.8s cubic-bezier(.16,.8,.24,1),
    filter 2.5s ease;

  animation: fhHouseFlicker 7s infinite;
}


/* VIGNETTE */

#furkin-haunted-hero .fh-vignette {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    radial-gradient(
      circle at center,
      transparent 25%,
      rgba(8,9,31,.10) 58%,
      rgba(5,6,25,.58) 100%
    );
}
#furkin-haunted-hero::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 3;

  background: rgba(17, 19, 51, .22);

  pointer-events: none;
}
  #furkin-haunted-hero .fh-content {
  background: rgba(17, 19, 51, .42);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;

  padding: 28px 34px 24px;

  box-shadow:
    0 18px 45px rgba(0,0,0,.18);

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* COPY */

#furkin-haunted-hero .fh-content {
  position: absolute;

  z-index: 10;

  left: 50%;
  top: 50%;

  width: min(680px, 72vw);

  transform: translate(-50%, -50%);

  text-align: center;

  color: #fff;

  transition:
    opacity .8s ease,
    transform 1.1s ease;
}


#furkin-haunted-hero .fh-eyebrow {
  margin-bottom: 12px;

  font-family: "proxima-nova", sans-serif;

  font-size: 14px;

  font-weight: 800;

  letter-spacing: .22em;

  color: #f2d9ef;
}


#furkin-haunted-hero h1 {
  margin: 0;

  font-family: "rooney-sans", sans-serif;

  font-weight: 900;

  font-size: clamp(58px,5.4vw,92px);

  line-height: .84;

  letter-spacing: -.035em;

  color: #fff;

  text-shadow:
    0 4px 20px rgba(0,0,0,.3);
}


#furkin-haunted-hero .fh-subhead {
  max-width: 620px;

  margin: 22px auto 24px;

  font-family: "proxima-nova", sans-serif;

  font-size: clamp(17px,1.35vw,22px);

  line-height: 1.4;

  color: #fff;
}
/* ENTER BUTTON */

#furkin-haunted-hero .fh-enter {
  border: 2px solid #fff;

  background: #c656a1;

  color: #fff;

  border-radius: 999px;

  padding: 18px 29px;

  font-family: "proxima-nova", sans-serif;

  font-size: 15px;

  font-weight: 800;

  letter-spacing: .04em;

  cursor: pointer;

  box-shadow:
    0 8px 30px rgba(0,0,0,.22);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


#furkin-haunted-hero .fh-enter:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 38px rgba(0,0,0,.3);
}


#furkin-haunted-hero .fh-enter span {
  display: inline-block;

  margin-left: 8px;

  transition:
    transform .25s ease;
}


#furkin-haunted-hero .fh-enter:hover span {
  transform: translateX(5px);
}


#furkin-haunted-hero .fh-hint {
  margin-top: 12px;

  font-family: "proxima-nova", sans-serif;

  font-size: 14px;

  line-height: 1.35;

  opacity: .82;
}
/* ==========================================
   GATES
========================================== */

#furkin-haunted-hero .fh-gate-wrap {
  position: absolute;

  inset: 0;

  z-index: 6;

  pointer-events: none;

  transition:
    transform 2.5s cubic-bezier(.2,.7,.2,1),
    opacity 2.2s ease;
}


#furkin-haunted-hero .fh-gate-img {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  pointer-events: none;
}


#furkin-haunted-hero .fh-gate-left {
  transform-origin: left center;
}


#furkin-haunted-hero .fh-gate-right {
  transform-origin: right center;
}


/* ==========================================
   PILLARS
========================================== */

#furkin-haunted-hero .fh-pillar {
  position: absolute;

  bottom: 0;

  width: 5.8vw;

  min-width: 76px;

  max-width: 112px;

  height: 54%;

  z-index: 7;

  background:
    linear-gradient(
      90deg,
      #493f68,
      #81739a 45%,
      #4a3e62
    );

  border: 2px solid #28203b;

  box-shadow:
    0 0 35px rgba(0,0,0,.28);
}


#furkin-haunted-hero .fh-pillar-left {
  left: -1.2vw;
}


#furkin-haunted-hero .fh-pillar-right {
  right: -1.2vw;
}


#furkin-haunted-hero .fh-pillar-cap {
  position: absolute;

  left: 50%;

  top: -20px;

  width: 125%;

  height: 27px;

  transform: translateX(-50%);

  background: #75698e;

  border: 2px solid #322946;

  border-radius: 5px;
}


#furkin-haunted-hero .fh-pillar-light {
  position: absolute;

  top: 10%;

  left: 50%;

  width: 18px;

  height: 32px;

  transform: translateX(-50%);

  border-radius: 50% 50% 35% 35%;

  background: #ffc66d;

  box-shadow:
    0 0 14px #ffc66d,
    0 0 35px rgba(255,198,109,.65);

  animation:
    fhLantern 2.5s ease-in-out infinite alternate;
}


/* ==========================================
   FOG
========================================== */

#furkin-haunted-hero .fh-fog {
  position: absolute;

  left: -5%;

  bottom: -5%;

  width: 110%;

  height: auto;

  z-index: 8;

  pointer-events: none;

  opacity: .45;

  mix-blend-mode: screen;
}


#furkin-haunted-hero .fh-fog-one {
  animation:
    fhFogOne 11s ease-in-out infinite alternate;
}


#furkin-haunted-hero .fh-fog-two {
  opacity: .23;

  animation:
    fhFogTwo 14s ease-in-out infinite alternate;
}


/* ==========================================
   OPEN GATES
========================================== */

#furkin-haunted-hero.fh-open .fh-gate-left {
  transform:
    perspective(1300px)
    rotateY(-68deg)
    translateX(-7%);
}


#furkin-haunted-hero.fh-open .fh-gate-right {
  transform:
    perspective(1300px)
    rotateY(68deg)
    translateX(7%);
}
#furkin-haunted-hero.fh-open .fh-content {
  opacity: 0;

  transform:
    translate(-50%, -50%)
    translateY(-20px);

  pointer-events: none;
}
/* CAMERA PUSH */

#furkin-haunted-hero.fh-entering .fh-background {
  transform: scale(1.20);

  animation:
    fhHouseFlickerEntering 7s infinite;
}


#furkin-haunted-hero.fh-entering .fh-gate-left {
  transform:
    perspective(1300px)
    rotateY(-79deg)
    translateX(-15%);

  opacity: .15;
}


#furkin-haunted-hero.fh-entering .fh-gate-right {
  transform:
    perspective(1300px)
    rotateY(79deg)
    translateX(15%);

  opacity: .15;
}


/* ==========================================
   BLACKOUT TRANSITION
========================================== */

#furkin-haunted-hero .fh-blackout {
  position: absolute;

  inset: 0;

  z-index: 30;

  background: #09081a;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity .85s ease;
}


#furkin-haunted-hero.fh-black .fh-blackout {
  opacity: 1;
}
/* ==========================================
   SCENE 2 — FOYER
========================================== */

#furkin-foyer {
  position: relative;

  width: 100vw !important;
  max-width: none !important;

  /* Exact 16:9 canvas */
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;

  margin: 0 calc(50% - 50vw) !important;

  padding: 0 !important;

  overflow: hidden;

  background: #17112d;
}


/* FINISHED FOYER ART */

#furkin-foyer .ff-background {
  position: absolute;

  /* Fill the foyer edge-to-edge */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;

  margin: 0 !important;
  padding: 0 !important;

background-image:
  url("https://www.furkin.com/hubfs/foyer%20background-1.png");

  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;

  transform: scale(1.04);

  transition:
    opacity 1.2s ease,
    transform 1.5s cubic-bezier(.16,.8,.24,1);
}


/* FOYER REVEAL */

#furkin-foyer.ff-arrived .ff-background {
  opacity: 1;
  transform: scale(1);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

  #furkin-foyer {
    width: 100vw !important;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;

    margin: 0 calc(50% - 50vw) !important;
    padding: 0 !important;
  }

}
/* ==========================================
   FOYER — CLICKABLE DOORS
========================================== */

#furkin-foyer .ff-door {
  position: absolute;
  z-index: 10;

  border: 0;
  padding: 0;
  margin: 0;

  background: transparent;

  cursor: pointer;

  /* invisible by default */
  outline: none;

  /* gentle hover glow */
  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}


/* BEDROOM — FAR LEFT PINK DOOR */

#furkin-foyer .ff-door-bedroom {
  left: 0%;
  top: 18%;
  width: 12%;
  height: 72%;
}


/* KITCHEN — TEAL DOOR */

#furkin-foyer .ff-door-kitchen {
  left: 17%;
  top: 20%;
  width: 15%;
  height: 70%;
}


/* LIVING ROOM — PURPLE DOOR */

#furkin-foyer .ff-door-living {
  left: 68%;
  top: 20%;
  width: 15%;
  height: 70%;
}


/* MYSTERY ROOM — FAR RIGHT PINK DOOR */

#furkin-foyer .ff-door-mystery {
  left: 88%;
  top: 18%;
  width: 12%;
  height: 72%;
}


/* ==========================================
   HOVER GLOWS
========================================== */
/* ==========================================
   DOOR HOVER — INVISIBLE
========================================== */

#furkin-foyer .ff-door:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
/* KEYBOARD ACCESSIBILITY */

#furkin-foyer .ff-door:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}
/* ==========================================
   FURKIN ROTATE PHONE SCREEN
========================================== */

#furkin-rotate-phone {
  display: none !important;
}


/* JS adds this class ONLY on portrait phones */

body.furkin-phone-portrait #furkin-rotate-phone {
  position: fixed !important;
  inset: 0 !important;

  z-index: 999999 !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100dvh;

  padding: 32px;

  background:
    radial-gradient(
      circle at 50% 40%,
      #553268 0%,
      #2f1648 45%,
      #180c2b 100%
    );

  color: #fff;
  text-align: center;
}


body.furkin-phone-portrait #furkin-rotate-phone .frp-inner {
  width: 100%;
  max-width: 350px;
}


body.furkin-phone-portrait #furkin-rotate-phone .frp-phone {
  width: 72px;
  height: 112px;

  margin: 0 auto 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 4px solid #fff;
  border-radius: 15px;

  font: 700 40px "proxima-nova", sans-serif;

  animation: furkinRotatePhone 1.8s ease-in-out infinite;
}


body.furkin-phone-portrait #furkin-rotate-phone .frp-eyebrow {
  margin-bottom: 12px;

  font: 800 12px "proxima-nova", sans-serif;
  letter-spacing: .18em;

  color: #e7b9dd;
}


body.furkin-phone-portrait #furkin-rotate-phone .frp-title {
  margin-bottom: 18px;

  font-family: "rooney-sans", sans-serif;

  font-size: 40px;
  font-weight: 900;
  line-height: .95;

  color: #fff;
}


body.furkin-phone-portrait #furkin-rotate-phone .frp-copy {
  font: 17px/1.45 "proxima-nova", sans-serif;

  color: rgba(255,255,255,.9);
}


@keyframes furkinRotatePhone {

  0%,
  25% {
    transform: rotate(0deg);
  }

  60%,
  85% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(0deg);
  }

}
  /* ==========================================
   MOBILE LANDSCAPE — GATE FIX
   Desktop untouched
========================================== */

@media screen and (max-height: 767px) and (orientation: landscape) {

  #furkin-haunted-hero {
    height: 100svh !important;
    min-height: 0 !important;
  }

  /* Make gate artwork match the landscape scene */
  #furkin-haunted-hero .fh-gate-img {
    width: 100% !important;
    height: 100% !important;

    object-fit: fill !important;
    object-position: center !important;
  }

  /* Make sure nothing mobile-specific has disabled animation */
  #furkin-haunted-hero .fh-gate-wrap {
    display: block !important;
    visibility: visible !important;

    transition:
      transform 2.5s cubic-bezier(.2,.7,.2,1),
      opacity 2.2s ease !important;
  }

  /* LEFT GATE OPEN */
  #furkin-haunted-hero.fh-open .fh-gate-left {
    transform:
      perspective(1300px)
      rotateY(-68deg)
      translateX(-7%) !important;
  }

  /* RIGHT GATE OPEN */
  #furkin-haunted-hero.fh-open .fh-gate-right {
    transform:
      perspective(1300px)
      rotateY(68deg)
      translateX(7%) !important;
  }

  /* Continue opening during camera push */
  #furkin-haunted-hero.fh-entering .fh-gate-left {
    transform:
      perspective(1300px)
      rotateY(-79deg)
      translateX(-15%) !important;

    opacity: .15 !important;
  }

  #furkin-haunted-hero.fh-entering .fh-gate-right {
    transform:
      perspective(1300px)
      rotateY(79deg)
      translateX(15%) !important;

    opacity: .15 !important;
  }

}
/* ==========================================
   BEDROOM — BUDDY CASE FILE
   LAYOUT V2
========================================== */

#furkin-foyer .ff-story {
  position: absolute;
  inset: 0;
  z-index: 100;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background: #211337;

  transition:
    opacity .45s ease,
    visibility .45s ease;
}

#furkin-foyer .ff-story.ff-story-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ==========================================
   ROOM CANVAS
========================================== */

#furkin-foyer .ff-room-scene {
  position: absolute;
  inset: 0;

  overflow: hidden;

  display: grid;

  /* LEFT gets headline, RIGHT gets case file */
  grid-template-columns:
    minmax(340px, .88fr)
    minmax(500px, 1.12fr);

  align-items: center;

  gap: clamp(38px, 5vw, 90px);

  padding:
    clamp(65px, 6vh, 90px)
    clamp(60px, 7vw, 135px)
    clamp(35px, 4vh, 60px);

  background:
    radial-gradient(
      circle at 17% 35%,
      rgba(198,86,161,.22),
      transparent 33%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(65,192,189,.09),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #4a2055 0%,
      #35204e 37%,
      #24183e 68%,
      #18182e 100%
    );

  color: #fff;
}


/* SUBTLE WALLPAPER */

#furkin-foyer .ff-room-scene::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: .07;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 69px,
      rgba(255,255,255,.14) 70px,
      transparent 71px
    );
}


/* FLOOR SHADOW */

#furkin-foyer .ff-room-scene::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 16%;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(5,4,18,.28),
      transparent
    );
}


/* ==========================================
   BACK TO FOYER
========================================== */

#furkin-foyer .ff-story-close {
  position: absolute;

  top: 24px;
  left: 28px;

  z-index: 20;

  width: auto;
  height: auto;

  padding: 8px 12px;

  border: 0;
  border-radius: 999px;

  background: rgba(255,255,255,.07);

  color: rgba(255,255,255,.82);

  font-family: "proxima-nova", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

#furkin-foyer .ff-story-close span {
  display: inline-block;

  margin-right: 7px;

  font-size: 14px;

  transition: transform .2s ease;
}

#furkin-foyer .ff-story-close:hover {
  background: rgba(255,255,255,.13);
  color: #fff;
}

#furkin-foyer .ff-story-close:hover span {
  transform: translateX(-3px);
}


/* ==========================================
   LEFT COLUMN
========================================== */

#furkin-foyer .ff-case-intro {
  position: relative;

  z-index: 3;

  width: 100%;
  max-width: 560px;

  justify-self: end;

  opacity: 0;

  transform: translateX(-18px);

  transition:
    opacity .55s .08s ease,
    transform .65s .08s cubic-bezier(.16,.8,.24,1);
}

#furkin-foyer
.ff-story-open
.ff-case-intro {
  opacity: 1;
  transform: translateX(0);
}


/* ROOM LABEL */

#furkin-foyer .ff-room-label {
  margin-bottom: 10px;

  font-family: "proxima-nova", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;

  color: #e2b9da;
}


/* TRUE STORY STAMP */

#furkin-foyer .ff-case-stamp {
  display: inline-block;

  margin-bottom: 16px;

  padding: 6px 10px;

  border: 2px solid #41c0bd;
  border-radius: 4px;

  color: #65d0cd;

  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;

  transform: rotate(-2deg);
}


/* HEADLINE */

#furkin-foyer .ff-case-intro h2 {
  margin: 0;

  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(43px, 4.1vw, 72px);

  line-height: .91;

  letter-spacing: -.035em;

  color: #fff;
}

#furkin-foyer .ff-case-intro h2 em {
  display: inline;

  color: #dc85c2;

  font-style: normal;
}


/* LEAD */

#furkin-foyer .ff-case-lead {
  max-width: 470px;

  margin: 20px 0 22px;

  font-family: "proxima-nova", sans-serif;
  font-size: clamp(14px,1.1vw,18px);
  line-height: 1.42;

  color: rgba(255,255,255,.84);
}


/* ==========================================
   EVIDENCE BOX
========================================== */

#furkin-foyer .ff-evidence {
  width: min(100%, 470px);

  padding: 15px 18px;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius: 13px;

  background:
    rgba(255,255,255,.055);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}

#furkin-foyer .ff-evidence-title {
  margin-bottom: 8px;

  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;

  color: #deb1d5;
}

#furkin-foyer .ff-evidence-row {
  display: grid;

  grid-template-columns: 30px 1fr;

  align-items: center;

  gap: 10px;

  padding: 5px 0;

  font-family: "proxima-nova", sans-serif;
  font-size: 11px;
  line-height: 1.25;

  color: rgba(255,255,255,.76);
}

#furkin-foyer .ff-evidence-row strong {
  display: block;

  margin-bottom: 1px;

  color: #fff;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .05em;

  text-transform: uppercase;
}

#furkin-foyer .ff-evidence-icon {
  width: 30px;

  font-size: 19px;

  text-align: center;
}


/* ==========================================
   RIGHT — CASE FILE
========================================== */

#furkin-foyer .ff-case-file {
  position: relative;

  z-index: 4;

  width: 100%;
  max-width: 650px;

  justify-self: start;

  padding:
    clamp(24px,2.3vw,38px)
    clamp(27px,2.8vw,44px);

  border:
    2px solid rgba(198,86,161,.52);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      #faf1f8 0%,
      #f1e4f1 100%
    );

  color: #38284d;

  box-shadow:
    0 26px 70px rgba(0,0,0,.34);

  opacity: 0;

  transform:
    translateX(22px)
    rotate(.5deg)
    scale(.98);

  transition:
    opacity .6s .13s ease,
    transform .7s .13s cubic-bezier(.16,.8,.24,1);
}

#furkin-foyer
.ff-story-open
.ff-case-file {
  opacity: 1;

  transform:
    translateX(0)
    rotate(-.25deg)
    scale(1);
}


/* CASE HEADER */

#furkin-foyer .ff-case-file-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 14px;
  padding-bottom: 11px;

  border-bottom:
    2px dashed rgba(75,52,105,.16);

  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;

  color: #a45e91;
}

#furkin-foyer .ff-case-number {
  opacity: .68;
}


/* ==========================================
   STORY COPY
========================================== */

#furkin-foyer .ff-case-copy {
  margin: 0;
}

#furkin-foyer .ff-case-copy p {
  margin: 0 0 8px;

  font-family: "proxima-nova", sans-serif;

  font-size:
    clamp(12px, .95vw, 15px);

  line-height: 1.38;

  color: #51445b;
}

#furkin-foyer .ff-case-copy strong {
  color: #4b3469;
}


/* ==========================================
   VERDICT
========================================== */

#furkin-foyer .ff-case-verdict {
  margin: 16px 0 9px;

  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;

  color: #c656a1;
}


/* ==========================================
   STATS
========================================== */

#furkin-foyer .ff-case-stats {
  display: grid;

  grid-template-columns:
    1fr
    1px
    1fr;

  align-items: center;

  padding: 12px 0;

  border-top:
    1px solid rgba(75,52,105,.12);

  border-bottom:
    1px solid rgba(75,52,105,.12);
}

#furkin-foyer .ff-case-stat {
  padding: 0 10px;

  text-align: center;
}

#furkin-foyer .ff-stat-number {
  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(34px, 3vw, 50px);

  line-height: .92;

  color: #c656a1;
}

#furkin-foyer .ff-stat-label {
  margin-top: 5px;

  font-family: "proxima-nova", sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.3;

  letter-spacing: .1em;

  color: #685872;
}

#furkin-foyer .ff-stat-divider {
  width: 1px;
  height: 46px;

  background:
    rgba(75,52,105,.16);
}


/* ==========================================
   HAPPY ENDING
========================================== */

#furkin-foyer .ff-happy-ending {
  display: grid;

  grid-template-columns: 18px 1fr;

  align-items: start;

  gap: 8px;

  margin-top: 12px;
}

#furkin-foyer .ff-ending-icon {
  color: #c656a1;

  font-size: 16px;
}

#furkin-foyer .ff-happy-ending p {
  margin: 0;

  font-family: "proxima-nova", sans-serif;
  font-size: 10px;
  line-height: 1.38;

  color: #665870;
}

#furkin-foyer .ff-happy-ending strong {
  color: #4b3469;
}


/* ==========================================
   CTA
========================================== */

#furkin-foyer .ff-story-cta {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 14px;

  padding: 11px 18px;

  border-radius: 999px;

  background: #c656a1;

  color: #fff !important;

  text-decoration: none !important;

  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;

  box-shadow:
    0 7px 18px rgba(198,86,161,.23);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

#furkin-foyer .ff-story-cta:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 23px rgba(198,86,161,.3);
}

#furkin-foyer .ff-story-cta span {
  font-size: 14px;
}


/* ==========================================
   HAIR TIE DETAILS
========================================== */

#furkin-foyer .ff-hairtie {
  position: absolute;

  z-index: 1;

  width: 37px;
  height: 37px;

  border:
    4px solid rgba(198,86,161,.28);

  border-radius: 50%;

  pointer-events: none;
}

#furkin-foyer .ff-hairtie-1 {
  top: 12%;
  left: 42%;
}

#furkin-foyer .ff-hairtie-2 {
  bottom: 8%;
  left: 7%;

  width: 25px;
  height: 25px;

  border-width: 3px;
}

#furkin-foyer .ff-hairtie-3 {
  top: 16%;
  right: 3%;

  width: 30px;
  height: 30px;

  border-color:
    rgba(65,192,189,.22);
}


/* ==========================================
   SHORTER LAPTOP / MOBILE LANDSCAPE
========================================== */

@media (max-height: 750px) {

  #furkin-foyer .ff-room-scene {
    padding:
      55px
      clamp(45px,6vw,105px)
      25px;

    gap: clamp(30px,4vw,65px);
  }

  #furkin-foyer .ff-case-intro h2 {
    font-size:
      clamp(37px,3.8vw,59px);
  }

  #furkin-foyer .ff-case-lead {
    margin: 13px 0 15px;

    font-size: 13px;
  }

  #furkin-foyer .ff-evidence {
    padding: 10px 14px;
  }

  #furkin-foyer .ff-evidence-row {
    padding: 3px 0;
  }

  #furkin-foyer .ff-case-file {
    padding: 19px 26px;
  }

  #furkin-foyer .ff-case-copy p {
    margin-bottom: 6px;

    font-size: 11px;
    line-height: 1.3;
  }

  #furkin-foyer .ff-case-verdict {
    margin-top: 11px;
  }

  #furkin-foyer .ff-case-stats {
    padding: 8px 0;
  }

  #furkin-foyer .ff-stat-number {
    font-size: 34px;
  }

  #furkin-foyer .ff-happy-ending {
    margin-top: 8px;
  }

  #furkin-foyer .ff-story-cta {
    margin-top: 9px;

    padding: 9px 15px;
  }

}
  /* ==========================================
   FIX FOYER CLICK LAYERS
========================================== */

/* Background stays behind everything */
#furkin-foyer .ff-background {
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Door hotspots sit directly above background */
#furkin-foyer .ff-door {
  position: absolute !important;
  z-index: 20 !important;

  display: block !important;

  background: transparent !important;
  border: 0 !important;

  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Story overlay sits above doors once opened */
#furkin-foyer .ff-story {
  z-index: 100 !important;
}
  /* ==========================================
   BEDROOM — FORCE CASE FILE POSITION
========================================== */

#furkin-foyer .ff-room-scene {
  display: block !important;
}

/* INTRO — upper left/center */
#furkin-foyer .ff-case-intro {
  position: absolute !important;

  left: 12% !important;
  top: 50% !important;

  width: 38% !important;
  max-width: 560px !important;

  transform: translateY(-50%) !important;
}

/* CASE FILE — right side, vertically centered */
#furkin-foyer .ff-case-file {
  position: absolute !important;

  right: 7% !important;
  top: 50% !important;
  left: auto !important;
  bottom: auto !important;

  width: 39% !important;
  max-width: 650px !important;

  margin: 0 !important;

  transform:
    translateY(-50%)
    rotate(-.25deg) !important;
}

/* Preserve opening animation */
#furkin-foyer .ff-story:not(.ff-story-open) .ff-case-file {
  opacity: 0 !important;

  transform:
    translateY(calc(-50% + 20px))
    rotate(.5deg)
    scale(.98) !important;
}

#furkin-foyer .ff-story.ff-story-open .ff-case-file {
  opacity: 1 !important;

  transform:
    translateY(-50%)
    rotate(-.25deg)
    scale(1) !important;
}
  /* ==========================================
   ROOM 02 — KITCHEN
   Davey vs. the Counter
========================================== */

/* Kitchen atmosphere */
#furkin-foyer .ff-kitchen-story .ff-room-scene {
  background:
    radial-gradient(
      circle at 17% 35%,
      rgba(65,192,189,.22),
      transparent 33%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(198,86,161,.10),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #17494d 0%,
      #1c3f48 38%,
      #253347 68%,
      #18182e 100%
    );
}


/* TRUE FURKIN STORY STAMP */
#furkin-foyer .ff-kitchen-story .ff-case-stamp {
  border-color: #41c0bd;
  color: #6ed9d6;
}


/* Headline accent */
#furkin-foyer .ff-kitchen-story .ff-case-intro h2 em {
  color: #64d0cd;
}


/* Case file border */
#furkin-foyer .ff-kitchen-story .ff-case-file {
  border-color: rgba(65,192,189,.65);
}


/* Case file labels */
#furkin-foyer .ff-kitchen-story .ff-case-file-top {
  color: #278f8d;
}


/* Furkin verdict */
#furkin-foyer .ff-kitchen-story .ff-case-verdict {
  color: #279f9c;
}


/* BIG NUMBERS */
#furkin-foyer .ff-kitchen-story .ff-stat-number {
  color: #279f9c;
}


/* Happy ending heart */
#furkin-foyer .ff-kitchen-story .ff-ending-icon {
  color: #279f9c;
}


/* CTA */
#furkin-foyer .ff-kitchen-story .ff-story-cta {
  background: #279f9c;

  box-shadow:
    0 7px 18px rgba(39,159,156,.24);
}

#furkin-foyer .ff-kitchen-story .ff-story-cta:hover {
  box-shadow:
    0 10px 23px rgba(39,159,156,.34);
}


/* Davey's $10K stat is longer than Buddy's */
#furkin-foyer .ff-kitchen-story .ff-case-stat:first-child .ff-stat-number {
  font-size: clamp(27px,2.5vw,42px);
  line-height: .88;
}


/* Make four evidence rows fit comfortably */
#furkin-foyer .ff-kitchen-story .ff-evidence-row {
  padding: 4px 0;
}


/* No floating decorations */
#furkin-foyer .ff-kitchen-story .ff-hairtie {
  display: none !important;
}
  /* ==========================================
   ROOM 03 — LIVING ROOM
   Teddy vs. 13 Inches of Plastic
========================================== */

/* Living Room atmosphere */
#furkin-foyer .ff-living-story .ff-room-scene {
  background:
    radial-gradient(
      circle at 17% 35%,
      rgba(176,132,214,.24),
      transparent 33%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(198,86,161,.11),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #45235c 0%,
      #37204f 38%,
      #29203f 68%,
      #18182e 100%
    );
}


/* TRUE FURKIN STORY stamp */
#furkin-foyer .ff-living-story .ff-case-stamp {
  border-color: #b58ad7;
  color: #d3b2eb;
}


/* Headline accent */
#furkin-foyer .ff-living-story .ff-case-intro h2 em {
  color: #c49ae3;
}


/* Case file border */
#furkin-foyer .ff-living-story .ff-case-file {
  border-color: rgba(181,138,215,.7);
}


/* Case file labels */
#furkin-foyer .ff-living-story .ff-case-file-top {
  color: #8e62af;
}


/* Furkin verdict */
#furkin-foyer .ff-living-story .ff-case-verdict {
  color: #9569b7;
}


/* Big numbers */
#furkin-foyer .ff-living-story .ff-stat-number {
  color: #9569b7;
}


/* Happy ending heart */
#furkin-foyer .ff-living-story .ff-ending-icon {
  color: #9569b7;
}


/* CTA */
#furkin-foyer .ff-living-story .ff-story-cta {
  background: #9569b7;

  box-shadow:
    0 7px 18px rgba(149,105,183,.25);
}

#furkin-foyer .ff-living-story .ff-story-cta:hover {
  box-shadow:
    0 10px 23px rgba(149,105,183,.36);
}


/* Four evidence rows */
#furkin-foyer .ff-living-story .ff-evidence-row {
  padding: 4px 0;
}


/* No random bedroom decorations */
#furkin-foyer .ff-living-story .ff-hairtie {
  display: none !important;
}
  /* ==========================================
   ROOM 04 — MYSTERY ROOM
   Sully's Mystery Limp
========================================== */

/* Mystery Room atmosphere */
#furkin-foyer .ff-mystery-story .ff-room-scene {
  background:
    radial-gradient(
      circle at 17% 35%,
      rgba(198,86,161,.28),
      transparent 33%
    ),
    radial-gradient(
      circle at 82% 72%,
      rgba(65,192,189,.10),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #542047 0%,
      #3f203f 38%,
      #2c1c3c 68%,
      #17172c 100%
    );
}


/* TRUE FURKIN STORY stamp */
#furkin-foyer .ff-mystery-story .ff-case-stamp {
  border-color: #c656a1;
  color: #e58ac5;
}


/* Headline accent */
#furkin-foyer .ff-mystery-story .ff-case-intro h2 em {
  color: #e18ac2;
}


/* Case file border */
#furkin-foyer .ff-mystery-story .ff-case-file {
  border-color: rgba(198,86,161,.7);
}


/* Case file labels */
#furkin-foyer .ff-mystery-story .ff-case-file-top {
  color: #a84d8c;
}


/* Furkin verdict */
#furkin-foyer .ff-mystery-story .ff-case-verdict {
  color: #c656a1;
}


/* Big numbers */
#furkin-foyer .ff-mystery-story .ff-stat-number {
  color: #c656a1;
}


/* Happy ending heart */
#furkin-foyer .ff-mystery-story .ff-ending-icon {
  color: #c656a1;
}


/* CTA */
#furkin-foyer .ff-mystery-story .ff-story-cta {
  background: #c656a1;

  box-shadow:
    0 7px 18px rgba(198,86,161,.25);
}

#furkin-foyer .ff-mystery-story .ff-story-cta:hover {
  box-shadow:
    0 10px 23px rgba(198,86,161,.36);
}


/* Four evidence rows */
#furkin-foyer .ff-mystery-story .ff-evidence-row {
  padding: 4px 0;
}


/* No floating decorations */
#furkin-foyer .ff-mystery-story .ff-hairtie {
  display: none !important;
}
 
 /* ==========================================
   FOYER — INTERACTIVE DOOR POLISH
========================================== */

/* Give our invisible hotspots somewhere to hold the label */
#furkin-foyer .ff-door {
  overflow: visible !important;
  transition:
    filter .25s ease,
    transform .25s ease !important;
}
/* ==========================================
   FOYER — FLOATING QUOTE CARD
   NO EXTRA PAGE HEIGHT
========================================== */

#furkin-foyer .ff-quote-reveal {
  position: absolute !important;

  /* Center it over the lower staircase / rug */
  left: 50% !important;
  top: 68% !important;
  bottom: auto !important;

  z-index: 50 !important;

  width: min(720px, 48%) !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translate(-50%, -50%)
    translateY(18px)
    scale(.96);

  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.16,.8,.24,1),
    visibility .4s ease;
}


/* SHOW AFTER FIRST STORY */
#furkin-foyer .ff-quote-reveal.ff-quote-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: none;

  transform:
    translate(-50%, -50%)
    translateY(0)
    scale(1);
}
#furkin-foyer .ff-quote-button,
#furkin-foyer .ff-progress-quote-link,
#furkin-foyer .ff-progress-close {
  pointer-events: auto;
}

/* ==========================================
   CARD
========================================== */

#furkin-foyer .ff-quote-inner {
  position: relative;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;

  gap: 24px;

  padding: 18px 24px;

  border:
    1.5px solid rgba(198,86,161,.75);

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(38,20,57,.97),
      rgba(49,24,66,.97)
    );

  box-shadow:
    0 18px 45px rgba(8,4,18,.48),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(9px);
}


/* top accent */
#furkin-foyer .ff-quote-inner::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 12%;
  right: 12%;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #c656a1,
      #41c0bd,
      #c656a1,
      transparent
    );
}


/* little ghost */
#furkin-foyer .ff-quote-inner::after {
  content: "👻";

  position: absolute;

  left: 50%;
  top: 0;

  transform:
    translate(-50%, -62%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border:
    1.5px solid rgba(198,86,161,.7);

  border-bottom: 0;

  border-radius:
    50% 50% 0 0;

  background: #29163e;

  font-size: 21px;

  pointer-events: none;
}


/* ==========================================
   COPY
========================================== */

#furkin-foyer .ff-quote-copy {
  min-width: 0;
}


#furkin-foyer .ff-quote-eyebrow {
  margin-bottom: 5px;

  font-family: "proxima-nova", sans-serif;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .18em;

  color: #66d1ce;
}


#furkin-foyer .ff-quote-headline {
  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(17px, 1.4vw, 24px);

  line-height: 1;

  letter-spacing: -.02em;

  color: #fff;
}


#furkin-foyer .ff-quote-headline em {
  color: #df83bf;
  font-style: normal;
}


#furkin-foyer .ff-quote-subcopy {
  margin-top: 6px;

  font-family: "proxima-nova", sans-serif;

  font-size:
    clamp(8px, .62vw, 10px);

  line-height: 1.3;

  color:
    rgba(255,255,255,.68);
}


/* ==========================================
   CTA
========================================== */

#furkin-foyer .ff-quote-action {
  display: flex;
  flex-direction: column;
  align-items: center;

  flex-shrink: 0;
}


#furkin-foyer .ff-quote-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 11px 17px;

  border-radius: 999px;

  background: #c656a1;

  color: #fff !important;

  text-decoration: none !important;

  font-family: "proxima-nova", sans-serif;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .08em;

  white-space: nowrap;

  box-shadow:
    0 7px 18px rgba(198,86,161,.3);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


#furkin-foyer .ff-quote-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 22px rgba(198,86,161,.4);
}


#furkin-foyer .ff-quote-button span {
  font-size: 13px;
}


#furkin-foyer .ff-quote-keep-looking {
  margin-top: 5px;

  font-family: "proxima-nova", sans-serif;

  font-size: 7px;

  color:
    rgba(255,255,255,.48);
}
#furkin-foyer .ff-quote-inner {
  position: relative;
}

#furkin-foyer .ff-progress-close {
  position: absolute;

  top: 8px;
  right: 10px;

  width: 28px;
  height: 28px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: rgba(255,255,255,.08);
  color: #fff;

  font-family: "proxima-nova", Arial, sans-serif;
  font-size: 18px;
  line-height: 1;

  cursor: pointer;

  z-index: 5;
}

#furkin-foyer .ff-progress-close:hover {
  background: rgba(255,255,255,.15);
}

#furkin-foyer .ff-progress-quote-link {
  margin-top: 8px;

  font-family: "proxima-nova", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;

  color: rgba(255,255,255,.72) !important;

  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ==========================================
   LANDSCAPE PHONE
========================================== */

@media screen and (max-height: 767px) and (orientation: landscape) {

  #furkin-foyer .ff-quote-reveal {
    top: 67% !important;

    width:
      min(650px, 50%) !important;
  }

  #furkin-foyer .ff-quote-inner {
    gap: 16px;

    padding:
      12px 18px;
  }

  #furkin-foyer .ff-quote-headline {
    font-size:
      clamp(14px, 1.35vw, 20px);
  }

  #furkin-foyer .ff-quote-subcopy {
    margin-top: 4px;
    font-size: 8px;
  }

  #furkin-foyer .ff-quote-button {
    padding:
      9px 14px;

    font-size: 7px;
  }

  #furkin-foyer .ff-quote-inner::after {
    width: 32px;
    height: 32px;

    font-size: 17px;
  }

}
/* ==========================================
   CARD
========================================== */

#furkin-foyer .ff-quote-inner {
  position: relative;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;

  gap: clamp(24px, 3vw, 50px);

  padding:
    clamp(18px, 1.7vw, 27px)
    clamp(24px, 2.4vw, 38px);

  border:
    1.5px solid rgba(198,86,161,.7);

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(38,20,57,.97) 0%,
      rgba(48,24,65,.97) 55%,
      rgba(39,23,57,.97) 100%
    );

  box-shadow:
    0 20px 45px rgba(10,5,20,.42),
    0 0 28px rgba(198,86,161,.08),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(8px);
}


/* tiny teal/pink top detail */
#furkin-foyer .ff-quote-inner::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 12%;
  right: 12%;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #c656a1,
      #41c0bd,
      #c656a1,
      transparent
    );

  opacity: .85;
}


/* ==========================================
   LITTLE GHOST TAB
========================================== */

#furkin-foyer .ff-quote-inner::after {
  content: "👻";

  position: absolute;

  left: 50%;
  top: 0;

  transform:
    translate(-50%, -62%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border:
    1.5px solid rgba(198,86,161,.7);

  border-bottom: 0;

  border-radius:
    50% 50% 0 0;

  background:
    #29163e;

  font-size: 25px;

  line-height: 1;

  pointer-events: none;
}


/* ==========================================
   LEFT COPY
========================================== */

#furkin-foyer .ff-quote-copy {
  min-width: 0;
}


#furkin-foyer .ff-quote-eyebrow {
  margin-bottom: 7px;

  font-family: "proxima-nova", sans-serif;

  font-size:
    clamp(7px, .6vw, 9px);

  font-weight: 900;

  letter-spacing: .2em;

  color: #66d1ce;
}


#furkin-foyer .ff-quote-headline {
  margin: 0;

  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(20px, 1.75vw, 29px);

  line-height: 1;

  letter-spacing: -.025em;

  color: #fff;
}


#furkin-foyer .ff-quote-headline em {
  color: #df83bf;
  font-style: normal;
}


#furkin-foyer .ff-quote-subcopy {
  margin-top: 8px;

  max-width: 560px;

  font-family: "proxima-nova", sans-serif;

  font-size:
    clamp(9px, .7vw, 12px);

  line-height: 1.35;

  color:
    rgba(255,255,255,.72);
}


/* ==========================================
   RIGHT CTA
========================================== */

#furkin-foyer .ff-quote-action {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 205px;

  text-align: center;
}


#furkin-foyer .ff-quote-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-width: 205px;

  padding:
    14px 22px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #c656a1,
      #db65b0
    );

  color: #fff !important;

  text-decoration: none !important;

  font-family: "proxima-nova", sans-serif;

  font-size:
    9px;

  font-weight: 900;

  letter-spacing: .08em;

  white-space: nowrap;

  box-shadow:
    0 8px 20px
    rgba(198,86,161,.28);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


#furkin-foyer .ff-quote-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 12px 26px
    rgba(198,86,161,.38);
}


#furkin-foyer .ff-quote-button span {
  font-size: 14px;

  transition:
    transform .2s ease;
}


#furkin-foyer .ff-quote-button:hover span {
  transform:
    translateX(3px);
}


#furkin-foyer .ff-quote-keep-looking {
  margin-top: 7px;

  font-family: "proxima-nova", sans-serif;

  font-size:
    7px;

  color:
    rgba(255,255,255,.52);
}


/* ==========================================
   SHORTER SCREENS
========================================== */

@media (max-height: 750px) {

  #furkin-foyer .ff-quote-reveal {
    bottom: 2% !important;

    width:
      min(850px, 64%) !important;
  }

  #furkin-foyer .ff-quote-inner {
    padding:
      14px 24px;
  }

  #furkin-foyer .ff-quote-headline {
    font-size:
      clamp(17px, 1.5vw, 24px);
  }

  #furkin-foyer .ff-quote-subcopy {
    margin-top: 5px;
  }

  #furkin-foyer .ff-quote-inner::after {
    width: 40px;
    height: 40px;

    font-size: 21px;
  }

}


/* ==========================================
   FOYER — CASE INVESTIGATED LABELS
========================================== */

#furkin-foyer .ff-door {
  overflow: visible !important;
}


/* LABEL */
#furkin-foyer .ff-door::after {
  content: "CASE INVESTIGATED ✓" !important;

  position: absolute !important;

  left: 50% !important;
  bottom: 18% !important;

  z-index: 999 !important;

  display: block !important;

  width: max-content !important;

  padding: 7px 10px !important;

  border: 1px solid rgba(255,255,255,.45) !important;
  border-radius: 999px !important;

  background: rgba(27,17,43,.94) !important;

  color: #fff !important;

  font-family: "proxima-nova", sans-serif !important;
  font-size: 7px !important;
  font-weight: 900 !important;

  line-height: 1 !important;
  letter-spacing: .1em !important;

  white-space: nowrap !important;

  opacity: 0 !important;
  visibility: hidden !important;

  transform:
    translate(-50%, 5px)
    rotate(-2deg) !important;

  transition:
    opacity .3s ease,
    transform .3s ease !important;

  pointer-events: none !important;

  box-shadow:
    0 5px 14px rgba(0,0,0,.3) !important;
}


/* SHOW AFTER VISITING */
#furkin-foyer .ff-door.ff-investigated::after {
  opacity: 1 !important;
  visibility: visible !important;

  transform:
    translate(-50%, 0)
    rotate(-2deg) !important;
}


/* BEDROOM */
#furkin-foyer .ff-door-bedroom.ff-investigated::after {
  border-color: #c656a1 !important;
  color: #f1b7dd !important;
}


/* KITCHEN */
#furkin-foyer .ff-door-kitchen.ff-investigated::after {
  border-color: #41c0bd !important;
  color: #83ddda !important;
}


/* LIVING ROOM */
#furkin-foyer .ff-door-living.ff-investigated::after {
  border-color: #b58ad7 !important;
  color: #dabcf0 !important;
}


/* MYSTERY ROOM */
#furkin-foyer .ff-door-mystery.ff-investigated::after {
  border-color: #c656a1 !important;
  color: #f1b7dd !important;
}
 /* ==========================================
   FOYER — MOVE QUOTE CTA UP
========================================== */

#furkin-foyer .ff-quote-reveal {
  bottom: 8% !important;
}


/* SHORT LANDSCAPE SCREENS */
@media screen and (max-height: 750px) and (orientation: landscape) {

  #furkin-foyer .ff-quote-reveal {
    bottom: 7% !important;
  }

}
/* ==========================================
   BUDDY — INTERACTIVE INVESTIGATION
========================================== */


/* ------------------------------------------
   STAGE 1 — INVESTIGATION
------------------------------------------ */

#furkin-foyer .ff-bedroom-story .ff-investigation-stage {
  position: absolute;
  inset: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;

  gap: 6%;

  padding:
    6% 10%
    5%;

  z-index: 5;

  opacity: 1;

  transform: translateX(0);

  transition:
    transform .75s cubic-bezier(.16,.8,.24,1),
    opacity .55s ease;
}


/* spooky room lighting */

#furkin-foyer .ff-bedroom-story .ff-room-scene {
  background:
    radial-gradient(
      circle at 18% 38%,
      rgba(198,86,161,.25),
      transparent 32%
    ),
    radial-gradient(
      circle at 78% 38%,
      rgba(65,192,189,.10),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #4a2055 0%,
      #35204e 38%,
      #24183e 70%,
      #151429 100%
    );
}


/* ------------------------------------------
   LEFT — CASE INTRO
------------------------------------------ */

#furkin-foyer
.ff-bedroom-story
.ff-investigation-clues {

  position: relative;

  width: 100%;
  max-width: 560px;

  z-index: 3;
}


#furkin-foyer
.ff-bedroom-story
.ff-investigation-clues h2 {

  margin: 0;

  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(38px, 3.6vw, 64px);

  line-height: .91;

  letter-spacing: -.035em;

  color: #fff;
}


#furkin-foyer
.ff-bedroom-story
.ff-investigation-clues h2 em {

  color: #df83bf;

  font-style: normal;
}


#furkin-foyer
.ff-bedroom-story
.ff-investigation-lead {

  margin:
    14px 0
    17px;

  font-family: "proxima-nova", sans-serif;

  font-size:
    clamp(12px, 1vw, 16px);

  font-weight: 700;

  color:
    rgba(255,255,255,.78);
}


/* ------------------------------------------
   CLUE BOARD
------------------------------------------ */

#furkin-foyer
.ff-bedroom-story
.ff-clue-board {

  position: relative;

  width: 100%;

  padding:
    15px 18px;

  border:
    1px solid rgba(255,255,255,.16);

  border-radius: 14px;

  background:
    rgba(20,12,37,.38);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.05);

  backdrop-filter:
    blur(5px);
}


#furkin-foyer
.ff-bedroom-story
.ff-clue-board-title {

  margin-bottom: 9px;

  font-family: "proxima-nova", sans-serif;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .17em;

  color: #df83bf;
}


#furkin-foyer
.ff-bedroom-story
.ff-clue {

  display: grid;

  grid-template-columns:
    32px 1fr;

  align-items: center;

  gap: 10px;

  padding:
    6px 0;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


#furkin-foyer
.ff-bedroom-story
.ff-clue:last-child {

  border-bottom: 0;
}


#furkin-foyer
.ff-bedroom-story
.ff-clue-number {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  border:
    1px solid rgba(198,86,161,.65);

  border-radius: 50%;

  font-family: "proxima-nova", sans-serif;

  font-size: 8px;

  font-weight: 900;

  color: #f1b7dd;

  background:
    rgba(198,86,161,.11);
}


#furkin-foyer
.ff-bedroom-story
.ff-clue-copy {

  font-family: "proxima-nova", sans-serif;

  font-size:
    clamp(9px, .75vw, 12px);

  line-height: 1.25;

  color:
    rgba(255,255,255,.73);
}


#furkin-foyer
.ff-bedroom-story
.ff-clue-copy strong {

  display: block;

  margin-bottom: 1px;

  font-size: 8px;

  letter-spacing: .11em;

  color: #fff;
}


/* ==========================================
   RIGHT — MAKE YOUR CALL
========================================== */

#furkin-foyer
.ff-bedroom-story
.ff-investigation-question {

  position: relative;

  width: 100%;
  max-width: 510px;

  padding:
    clamp(22px,2vw,32px);

  border:
    1.5px solid
    rgba(65,192,189,.55);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(29,21,48,.96),
      rgba(37,24,54,.96)
    );

  box-shadow:
    0 24px 65px
    rgba(0,0,0,.34);

  color: #fff;
}


#furkin-foyer
.ff-bedroom-story
.ff-question-kicker {

  font-family: "proxima-nova", sans-serif;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .2em;

  color: #66d1ce;
}


#furkin-foyer
.ff-bedroom-story
.ff-question-icon {

  position: absolute;

  right: 24px;
  top: 20px;

  font-size:
    clamp(22px,2vw,31px);

  opacity: .78;
}


#furkin-foyer
.ff-bedroom-story
.ff-investigation-question h3 {

  margin:
    13px 0 9px;

  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(28px,2.6vw,45px);

  line-height: .94;

  letter-spacing: -.025em;

  color: #fff;
}


#furkin-foyer
.ff-bedroom-story
.ff-investigation-question h3 em {

  color: #df83bf;

  font-style: normal;
}


#furkin-foyer
.ff-bedroom-story
.ff-question-copy {

  margin:
    0 0 15px;

  font-family: "proxima-nova", sans-serif;

  font-size:
    clamp(10px,.8vw,13px);

  line-height: 1.35;

  color:
    rgba(255,255,255,.66);
}


/* ==========================================
   ANSWERS
========================================== */

#furkin-foyer
.ff-bedroom-story
.ff-answer-list {

  display: grid;

  gap: 8px;
}


#furkin-foyer
.ff-bedroom-story
.ff-answer {

  display: grid;

  grid-template-columns:
    34px 1fr;

  align-items: center;

  gap: 10px;

  width: 100%;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius: 11px;

  background:
    rgba(255,255,255,.055);

  color: #fff;

  text-align: left;

  cursor: pointer;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


#furkin-foyer
.ff-bedroom-story
.ff-answer:hover {

  transform:
    translateX(4px);

  border-color:
    rgba(65,192,189,.62);

  background:
    rgba(65,192,189,.10);

  box-shadow:
    0 0 18px
    rgba(65,192,189,.08);
}


#furkin-foyer
.ff-bedroom-story
.ff-answer-letter {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border:
    1px solid
    rgba(198,86,161,.7);

  border-radius: 50%;

  background:
    rgba(198,86,161,.12);

  font-family: "proxima-nova", sans-serif;

  font-size: 9px;

  font-weight: 900;

  color: #f1b7dd;
}


#furkin-foyer
.ff-bedroom-story
.ff-answer-text {

  font-family: "proxima-nova", sans-serif;

  font-size:
    clamp(10px,.78vw,13px);

  font-weight: 700;
}


/* WRONG ANSWER */

#furkin-foyer
.ff-bedroom-story
.ff-answer.ff-wrong {

  animation:
    ffWrongAnswer .38s ease;

  border-color:
    rgba(198,86,161,.8);

  background:
    rgba(198,86,161,.12);
}


@keyframes ffWrongAnswer {

  0%,
  100% {
    transform:
      translateX(0);
  }

  25% {
    transform:
      translateX(-5px);
  }

  75% {
    transform:
      translateX(5px);
  }

}


/* CORRECT ANSWER */

#furkin-foyer
.ff-bedroom-story
.ff-answer.ff-correct {

  border-color:
    #41c0bd;

  background:
    rgba(65,192,189,.16);

  box-shadow:
    0 0 22px
    rgba(65,192,189,.13);
}


/* ==========================================
   CASE CRACKED RESULT
========================================== */

#furkin-foyer
.ff-bedroom-story
.ff-answer-result {

  max-height: 0;

  margin-top: 0;

  overflow: hidden;

  opacity: 0;

  transform:
    translateY(8px);

  transition:
    max-height .5s ease,
    opacity .4s ease,
    transform .4s ease,
    margin .4s ease;
}


#furkin-foyer
.ff-bedroom-story
.ff-investigation-question.ff-solved
.ff-answer-result {

  max-height: 220px;

  margin-top: 15px;

  opacity: 1;

  transform:
    translateY(0);
}


#furkin-foyer
.ff-bedroom-story
.ff-answer-result-label {

  margin-bottom: 3px;

  font-family: "proxima-nova", sans-serif;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .17em;

  color: #66d1ce;
}


#furkin-foyer
.ff-bedroom-story
.ff-answer-result-title {

  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(20px,1.8vw,29px);

  color: #fff;
}


#furkin-foyer
.ff-bedroom-story
.ff-answer-result p {

  margin:
    5px 0 11px;

  font-family: "proxima-nova", sans-serif;

  font-size:
    clamp(9px,.7vw,11px);

  line-height: 1.35;

  color:
    rgba(255,255,255,.72);
}


#furkin-foyer
.ff-bedroom-story
.ff-answer-result strong {

  color: #fff;
}


/* NO ARROW. PROMISE. */

#furkin-foyer
.ff-bedroom-story
.ff-open-case-file {

  padding:
    10px 17px;

  border: 0;

  border-radius:
    999px;

  background:
    #c656a1;

  color: #fff;

  font-family: "proxima-nova", sans-serif;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .08em;

  cursor: pointer;

  box-shadow:
    0 7px 18px
    rgba(198,86,161,.26);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


#furkin-foyer
.ff-bedroom-story
.ff-open-case-file:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 24px
    rgba(198,86,161,.36);
}


/* ==========================================
   STAGE 2 — CASE REVEAL
========================================== */

#furkin-foyer
.ff-bedroom-story
.ff-case-reveal-stage {

  position: absolute;

  inset: 0;

  z-index: 4;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateX(28%);

  transition:
    transform .8s cubic-bezier(.16,.8,.24,1),
    opacity .55s ease,
    visibility .55s ease;
}


/* left reveal copy */

#furkin-foyer
.ff-bedroom-story
.ff-case-reveal-heading {

  position: absolute;

  left: 12%;
  top: 50%;

  width: 34%;

  transform:
    translateY(-50%);

  color: #fff;
}


#furkin-foyer
.ff-bedroom-story
.ff-case-reveal-heading h2 {

  margin: 0;

  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(43px,4vw,70px);

  line-height: .9;

  color: #fff;
}


#furkin-foyer
.ff-bedroom-story
.ff-case-reveal-heading h2 em {

  color: #df83bf;

  font-style: normal;
}


#furkin-foyer
.ff-bedroom-story
.ff-case-reveal-heading p {

  max-width: 390px;

  margin-top: 17px;

  font-family: "proxima-nova", sans-serif;

  font-size:
    clamp(12px,1vw,16px);

  line-height: 1.4;

  color:
    rgba(255,255,255,.76);
}


/* IMPORTANT:
   Buddy's case file keeps the same existing
   right-side positioning */

#furkin-foyer
.ff-bedroom-story
.ff-case-reveal-stage
.ff-case-file {

  position: absolute !important;

  right: 7% !important;
  left: auto !important;

  top: 50% !important;

  width: 39% !important;
  max-width: 650px !important;

  opacity: 1 !important;

  transform:
    translateY(-50%)
    rotate(-.25deg) !important;
}


/* ==========================================
   PAN / TRANSITION
========================================== */

#furkin-foyer
.ff-bedroom-story.ff-case-revealed
.ff-investigation-stage {

  opacity: 0;

  pointer-events: none;

  transform:
    translateX(-28%);
}


#furkin-foyer
.ff-bedroom-story.ff-case-revealed
.ff-case-reveal-stage {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateX(0);
}


/* ==========================================
   SHORT LANDSCAPE SCREENS
========================================== */

@media screen and (max-height: 750px) and (orientation: landscape) {

  #furkin-foyer
  .ff-bedroom-story
  .ff-investigation-stage {

    padding:
      9% 9%
      4%;

    gap: 5%;
  }


  #furkin-foyer
  .ff-bedroom-story
  .ff-investigation-clues h2 {

    font-size:
      clamp(31px,3.2vw,48px);
  }


  #furkin-foyer
  .ff-bedroom-story
  .ff-investigation-lead {

    margin:
      8px 0 10px;
  }


  #furkin-foyer
  .ff-bedroom-story
  .ff-clue {

    padding:
      3px 0;
  }


  #furkin-foyer
  .ff-bedroom-story
  .ff-investigation-question {

    padding:
      16px 19px;
  }


  #furkin-foyer
  .ff-bedroom-story
  .ff-investigation-question h3 {

    margin:
      8px 0 6px;

    font-size:
      clamp(23px,2.3vw,34px);
  }


  #furkin-foyer
  .ff-bedroom-story
  .ff-question-copy {

    margin-bottom:
      9px;
  }


  #furkin-foyer
  .ff-bedroom-story
  .ff-answer-list {

    gap: 5px;
  }


  #furkin-foyer
  .ff-bedroom-story
  .ff-answer {

    padding:
      7px 10px;
  }


  #furkin-foyer
  .ff-bedroom-story
  .ff-investigation-question.ff-solved
  .ff-answer-result {

    margin-top:
      8px;
  }

}
  /* ==========================================
   DAVEY — INTERACTIVE KITCHEN
========================================== */

/* Use Buddy's investigation framework */
#furkin-foyer .ff-kitchen-story .ff-investigation-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 6%;
  padding:
    6% 10%
    5%;
  z-index: 5;
  opacity: 1;
  transform: translateX(0);
  transition:
    transform .75s cubic-bezier(.16,.8,.24,1),
    opacity .55s ease;
}

#furkin-foyer .ff-kitchen-story .ff-investigation-clues {
  position: relative;
  width: 100%;
  max-width: 560px;
  z-index: 3;
}

#furkin-foyer .ff-kitchen-story .ff-investigation-clues h2 {
  margin: 0;
  font-family: "rooney-sans", sans-serif;
  font-size: clamp(38px,3.6vw,64px);
  line-height: .91;
  letter-spacing: -.035em;
  color: #fff;
}

#furkin-foyer .ff-kitchen-story .ff-investigation-clues h2 em {
  color: #64d0cd;
  font-style: normal;
}

#furkin-foyer .ff-kitchen-story .ff-investigation-lead {
  margin: 14px 0 17px;
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(12px,1vw,16px);
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
}


/* CLUE BOARD */

#furkin-foyer .ff-kitchen-story .ff-clue-board {
  position: relative;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(10,31,34,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(5px);
}

#furkin-foyer .ff-kitchen-story .ff-clue-board-title {
  margin-bottom: 9px;
  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
  color: #64d0cd;
}

#furkin-foyer .ff-kitchen-story .ff-clue {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

#furkin-foyer .ff-kitchen-story .ff-clue:last-child {
  border-bottom: 0;
}

#furkin-foyer .ff-kitchen-story .ff-clue-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(65,192,189,.7);
  border-radius: 50%;
  font-family: "proxima-nova", sans-serif;
  font-size: 8px;
  font-weight: 900;
  color: #83ddda;
  background: rgba(65,192,189,.11);
}

#furkin-foyer .ff-kitchen-story .ff-clue-copy {
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(9px,.75vw,12px);
  line-height: 1.25;
  color: rgba(255,255,255,.73);
}

#furkin-foyer .ff-kitchen-story .ff-clue-copy strong {
  display: block;
  margin-bottom: 1px;
  font-size: 8px;
  letter-spacing: .11em;
  color: #fff;
}


/* QUESTION CARD */

#furkin-foyer .ff-kitchen-story .ff-investigation-question {
  position: relative;
  width: 100%;
  max-width: 510px;
  padding: clamp(22px,2vw,32px);
  border: 1.5px solid rgba(65,192,189,.6);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(13,48,52,.97),
      rgba(24,43,53,.97)
    );
  box-shadow: 0 24px 65px rgba(0,0,0,.34);
  color: #fff;
}

#furkin-foyer .ff-kitchen-story .ff-question-kicker {
  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #83ddda;
}

#furkin-foyer .ff-kitchen-story .ff-question-icon {
  position: absolute;
  right: 24px;
  top: 20px;
  font-size: clamp(22px,2vw,31px);
  opacity: .78;
}

#furkin-foyer .ff-kitchen-story .ff-investigation-question h3 {
  margin: 13px 0 9px;
  font-family: "rooney-sans", sans-serif;
  font-size: clamp(28px,2.6vw,45px);
  line-height: .94;
  letter-spacing: -.025em;
  color: #fff;
}

#furkin-foyer .ff-kitchen-story .ff-investigation-question h3 em {
  color: #64d0cd;
  font-style: normal;
}

#furkin-foyer .ff-kitchen-story .ff-question-copy {
  margin: 0 0 15px;
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(10px,.8vw,13px);
  line-height: 1.35;
  color: rgba(255,255,255,.66);
}


/* ANSWERS */

#furkin-foyer .ff-kitchen-story .ff-answer-list {
  display: grid;
  gap: 8px;
}

#furkin-foyer .ff-kitchen-story .ff-answer {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

#furkin-foyer .ff-kitchen-story .ff-answer:hover {
  transform: translateX(4px);
  border-color: rgba(65,192,189,.68);
  background: rgba(65,192,189,.10);
  box-shadow: 0 0 18px rgba(65,192,189,.08);
}

#furkin-foyer .ff-kitchen-story .ff-answer-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(65,192,189,.7);
  border-radius: 50%;
  background: rgba(65,192,189,.12);
  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  color: #83ddda;
}

#furkin-foyer .ff-kitchen-story .ff-answer-text {
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(10px,.78vw,13px);
  font-weight: 700;
}

#furkin-foyer .ff-kitchen-story .ff-answer.ff-wrong {
  animation: ffWrongAnswer .38s ease;
  border-color: rgba(198,86,161,.8);
  background: rgba(198,86,161,.12);
}

#furkin-foyer .ff-kitchen-story .ff-answer.ff-correct {
  border-color: #41c0bd;
  background: rgba(65,192,189,.18);
  box-shadow: 0 0 22px rgba(65,192,189,.14);
}


/* RESULT */

#furkin-foyer .ff-kitchen-story .ff-answer-result {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    max-height .5s ease,
    opacity .4s ease,
    transform .4s ease,
    margin .4s ease;
}

#furkin-foyer
.ff-kitchen-story
.ff-investigation-question.ff-solved
.ff-answer-result {
  max-height: 240px;
  margin-top: 15px;
  opacity: 1;
  transform: translateY(0);
}

#furkin-foyer .ff-kitchen-story .ff-answer-result-label {
  margin-bottom: 3px;
  font-family: "proxima-nova", sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .17em;
  color: #83ddda;
}

#furkin-foyer .ff-kitchen-story .ff-answer-result-title {
  font-family: "rooney-sans", sans-serif;
  font-size: clamp(17px,1.55vw,25px);
  line-height: 1;
  color: #fff;
}

#furkin-foyer .ff-kitchen-story .ff-answer-result p {
  margin: 5px 0 11px;
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(9px,.7vw,11px);
  line-height: 1.35;
  color: rgba(255,255,255,.72);
}

#furkin-foyer .ff-kitchen-story .ff-answer-result strong {
  color: #fff;
}

#furkin-foyer .ff-kitchen-story .ff-open-case-file {
  padding: 10px 17px;
  border: 0;
  border-radius: 999px;
  background: #279f9c;
  color: #fff;
  font-family: "proxima-nova", sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(39,159,156,.28);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

#furkin-foyer .ff-kitchen-story .ff-open-case-file:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(39,159,156,.38);
}


/* CASE REVEAL */

#furkin-foyer .ff-kitchen-story .ff-case-reveal-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(28%);
  transition:
    transform .8s cubic-bezier(.16,.8,.24,1),
    opacity .55s ease,
    visibility .55s ease;
}

#furkin-foyer .ff-kitchen-story .ff-case-reveal-heading {
  position: absolute;
  left: 12%;
  top: 50%;
  width: 34%;
  transform: translateY(-50%);
  color: #fff;
}

#furkin-foyer .ff-kitchen-story .ff-case-reveal-heading h2 {
  margin: 0;
  font-family: "rooney-sans", sans-serif;
  font-size: clamp(43px,4vw,70px);
  line-height: .9;
  color: #fff;
}

#furkin-foyer .ff-kitchen-story .ff-case-reveal-heading h2 em {
  color: #64d0cd;
  font-style: normal;
}

#furkin-foyer .ff-kitchen-story .ff-case-reveal-heading p {
  max-width: 390px;
  margin-top: 17px;
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(12px,1vw,16px);
  line-height: 1.4;
  color: rgba(255,255,255,.76);
}

#furkin-foyer
.ff-kitchen-story
.ff-case-reveal-stage
.ff-case-file {
  position: absolute !important;
  right: 7% !important;
  left: auto !important;
  top: 50% !important;
  width: 39% !important;
  max-width: 650px !important;
  opacity: 1 !important;
  transform:
    translateY(-50%)
    rotate(-.25deg) !important;
}


/* PAN */

#furkin-foyer
.ff-kitchen-story.ff-case-revealed
.ff-investigation-stage {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-28%);
}

#furkin-foyer
.ff-kitchen-story.ff-case-revealed
.ff-case-reveal-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}


/* SHORT LANDSCAPE */

@media screen and (max-height:750px) and (orientation:landscape) {

  #furkin-foyer .ff-kitchen-story .ff-investigation-stage {
    padding: 9% 9% 4%;
    gap: 5%;
  }

  #furkin-foyer .ff-kitchen-story .ff-investigation-clues h2 {
    font-size: clamp(31px,3.2vw,48px);
  }

  #furkin-foyer .ff-kitchen-story .ff-investigation-lead {
    margin: 8px 0 10px;
  }

  #furkin-foyer .ff-kitchen-story .ff-clue {
    padding: 3px 0;
  }

  #furkin-foyer .ff-kitchen-story .ff-investigation-question {
    padding: 16px 19px;
  }

  #furkin-foyer .ff-kitchen-story .ff-investigation-question h3 {
    margin: 8px 0 6px;
    font-size: clamp(23px,2.3vw,34px);
  }

  #furkin-foyer .ff-kitchen-story .ff-question-copy {
    margin-bottom: 9px;
  }

  #furkin-foyer .ff-kitchen-story .ff-answer-list {
    gap: 5px;
  }

  #furkin-foyer .ff-kitchen-story .ff-answer {
    padding: 7px 10px;
  }

  #furkin-foyer
  .ff-kitchen-story
  .ff-investigation-question.ff-solved
  .ff-answer-result {
    margin-top: 8px;
  }
}
  /* ==========================================
   TEDDY — INTERACTIVE LIVING ROOM
========================================== */

#furkin-foyer .ff-living-story .ff-investigation-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 6%;
  padding:
    6% 10%
    5%;
  z-index: 5;
  opacity: 1;
  transform: translateX(0);
  transition:
    transform .75s cubic-bezier(.16,.8,.24,1),
    opacity .55s ease;
}

#furkin-foyer .ff-living-story .ff-investigation-clues {
  position: relative;
  width: 100%;
  max-width: 560px;
  z-index: 3;
}

#furkin-foyer .ff-living-story .ff-investigation-clues h2 {
  margin: 0;
  font-family: "rooney-sans", sans-serif;
  font-size: clamp(38px,3.6vw,64px);
  line-height: .91;
  letter-spacing: -.035em;
  color: #fff;
}

#furkin-foyer .ff-living-story .ff-investigation-clues h2 em {
  color: #c49ae3;
  font-style: normal;
}

#furkin-foyer .ff-living-story .ff-investigation-lead {
  margin: 14px 0 17px;
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(12px,1vw,16px);
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
}


/* CLUE BOARD */

#furkin-foyer .ff-living-story .ff-clue-board {
  position: relative;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(29,16,43,.43);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(5px);
}

#furkin-foyer .ff-living-story .ff-clue-board-title {
  margin-bottom: 9px;
  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
  color: #d3b2eb;
}

#furkin-foyer .ff-living-story .ff-clue {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

#furkin-foyer .ff-living-story .ff-clue:last-child {
  border-bottom: 0;
}

#furkin-foyer .ff-living-story .ff-clue-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(181,138,215,.72);
  border-radius: 50%;
  font-family: "proxima-nova", sans-serif;
  font-size: 8px;
  font-weight: 900;
  color: #dabcf0;
  background: rgba(181,138,215,.12);
}

#furkin-foyer .ff-living-story .ff-clue-copy {
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(9px,.75vw,12px);
  line-height: 1.25;
  color: rgba(255,255,255,.73);
}

#furkin-foyer .ff-living-story .ff-clue-copy strong {
  display: block;
  margin-bottom: 1px;
  font-size: 8px;
  letter-spacing: .11em;
  color: #fff;
}


/* QUESTION */

#furkin-foyer .ff-living-story .ff-investigation-question {
  position: relative;
  width: 100%;
  max-width: 510px;
  padding: clamp(22px,2vw,32px);
  border: 1.5px solid rgba(181,138,215,.62);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(48,26,67,.97),
      rgba(35,24,53,.97)
    );
  box-shadow: 0 24px 65px rgba(0,0,0,.34);
  color: #fff;
}

#furkin-foyer .ff-living-story .ff-question-kicker {
  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #d3b2eb;
}

#furkin-foyer .ff-living-story .ff-question-icon {
  position: absolute;
  right: 24px;
  top: 20px;
  font-size: clamp(22px,2vw,31px);
  opacity: .78;
}

#furkin-foyer .ff-living-story .ff-investigation-question h3 {
  margin: 13px 0 9px;
  font-family: "rooney-sans", sans-serif;
  font-size: clamp(28px,2.6vw,45px);
  line-height: .94;
  letter-spacing: -.025em;
  color: #fff;
}

#furkin-foyer .ff-living-story .ff-investigation-question h3 em {
  color: #c49ae3;
  font-style: normal;
}

#furkin-foyer .ff-living-story .ff-question-copy {
  margin: 0 0 15px;
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(10px,.8vw,13px);
  line-height: 1.35;
  color: rgba(255,255,255,.66);
}


/* ANSWERS */

#furkin-foyer .ff-living-story .ff-answer-list {
  display: grid;
  gap: 8px;
}

#furkin-foyer .ff-living-story .ff-answer {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

#furkin-foyer .ff-living-story .ff-answer:hover {
  transform: translateX(4px);
  border-color: rgba(181,138,215,.72);
  background: rgba(181,138,215,.11);
  box-shadow: 0 0 18px rgba(181,138,215,.09);
}

#furkin-foyer .ff-living-story .ff-answer-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(181,138,215,.72);
  border-radius: 50%;
  background: rgba(181,138,215,.12);
  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;
  color: #dabcf0;
}

#furkin-foyer .ff-living-story .ff-answer-text {
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(10px,.78vw,13px);
  font-weight: 700;
}

#furkin-foyer .ff-living-story .ff-answer.ff-wrong {
  animation: ffWrongAnswer .38s ease;
  border-color: rgba(198,86,161,.8);
  background: rgba(198,86,161,.12);
}

#furkin-foyer .ff-living-story .ff-answer.ff-correct {
  border-color: #b58ad7;
  background: rgba(181,138,215,.18);
  box-shadow: 0 0 22px rgba(181,138,215,.15);
}


/* RESULT */

#furkin-foyer .ff-living-story .ff-answer-result {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    max-height .5s ease,
    opacity .4s ease,
    transform .4s ease,
    margin .4s ease;
}

#furkin-foyer
.ff-living-story
.ff-investigation-question.ff-solved
.ff-answer-result {
  max-height: 240px;
  margin-top: 15px;
  opacity: 1;
  transform: translateY(0);
}

#furkin-foyer .ff-living-story .ff-answer-result-label {
  margin-bottom: 3px;
  font-family: "proxima-nova", sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .17em;
  color: #d3b2eb;
}

#furkin-foyer .ff-living-story .ff-answer-result-title {
  font-family: "rooney-sans", sans-serif;
  font-size: clamp(18px,1.6vw,26px);
  line-height: 1;
  color: #fff;
}

#furkin-foyer .ff-living-story .ff-answer-result p {
  margin: 5px 0 11px;
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(9px,.7vw,11px);
  line-height: 1.35;
  color: rgba(255,255,255,.72);
}

#furkin-foyer .ff-living-story .ff-answer-result strong {
  color: #fff;
}

#furkin-foyer .ff-living-story .ff-open-case-file {
  padding: 10px 17px;
  border: 0;
  border-radius: 999px;
  background: #9569b7;
  color: #fff;
  font-family: "proxima-nova", sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(149,105,183,.28);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

#furkin-foyer .ff-living-story .ff-open-case-file:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(149,105,183,.38);
}


/* CASE REVEAL */

#furkin-foyer .ff-living-story .ff-case-reveal-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(28%);
  transition:
    transform .8s cubic-bezier(.16,.8,.24,1),
    opacity .55s ease,
    visibility .55s ease;
}

#furkin-foyer .ff-living-story .ff-case-reveal-heading {
  position: absolute;
  left: 12%;
  top: 50%;
  width: 34%;
  transform: translateY(-50%);
  color: #fff;
}

#furkin-foyer .ff-living-story .ff-case-reveal-heading h2 {
  margin: 0;
  font-family: "rooney-sans", sans-serif;
  font-size: clamp(43px,4vw,70px);
  line-height: .9;
  color: #fff;
}

#furkin-foyer .ff-living-story .ff-case-reveal-heading h2 em {
  color: #c49ae3;
  font-style: normal;
}

#furkin-foyer .ff-living-story .ff-case-reveal-heading p {
  max-width: 390px;
  margin-top: 17px;
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(12px,1vw,16px);
  line-height: 1.4;
  color: rgba(255,255,255,.76);
}

#furkin-foyer
.ff-living-story
.ff-case-reveal-stage
.ff-case-file {
  position: absolute !important;
  right: 7% !important;
  left: auto !important;
  top: 50% !important;
  width: 39% !important;
  max-width: 650px !important;
  opacity: 1 !important;
  transform:
    translateY(-50%)
    rotate(-.25deg) !important;
}


/* PAN */

#furkin-foyer
.ff-living-story.ff-case-revealed
.ff-investigation-stage {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-28%);
}

#furkin-foyer
.ff-living-story.ff-case-revealed
.ff-case-reveal-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}


/* SHORT LANDSCAPE */

@media screen and (max-height:750px) and (orientation:landscape) {

  #furkin-foyer .ff-living-story .ff-investigation-stage {
    padding: 9% 9% 4%;
    gap: 5%;
  }

  #furkin-foyer .ff-living-story .ff-investigation-clues h2 {
    font-size: clamp(31px,3.2vw,48px);
  }

  #furkin-foyer .ff-living-story .ff-investigation-lead {
    margin: 8px 0 10px;
  }

  #furkin-foyer .ff-living-story .ff-clue {
    padding: 3px 0;
  }

  #furkin-foyer .ff-living-story .ff-investigation-question {
    padding: 16px 19px;
  }

  #furkin-foyer .ff-living-story .ff-investigation-question h3 {
    margin: 8px 0 6px;
    font-size: clamp(23px,2.3vw,34px);
  }

  #furkin-foyer .ff-living-story .ff-question-copy {
    margin-bottom: 9px;
  }

  #furkin-foyer .ff-living-story .ff-answer-list {
    gap: 5px;
  }

  #furkin-foyer .ff-living-story .ff-answer {
    padding: 7px 10px;
  }

  #furkin-foyer
  .ff-living-story
  .ff-investigation-question.ff-solved
  .ff-answer-result {
    margin-top: 8px;
  }
}
/* ==========================================
   CLOSED ROOMS CAN NEVER BLOCK THE FOYER
========================================== */

#furkin-foyer .ff-story:not(.ff-story-open),
#furkin-foyer .ff-story:not(.ff-story-open) *,
#furkin-foyer .ff-story:not(.ff-story-open)::before,
#furkin-foyer .ff-story:not(.ff-story-open)::after {
  pointer-events: none !important;
}

#furkin-foyer .ff-story:not(.ff-story-open) .ff-case-reveal-stage {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
  /* ==========================================
   ROOM 04 — SULLY INTERACTIVE MYSTERY
========================================== */

/* Mystery atmosphere */
#furkin-foyer .ff-mystery-story .ff-room-scene {
  background:
    radial-gradient(
      circle at 18% 36%,
      rgba(198,86,161,.28),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 68%,
      rgba(65,192,189,.12),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #542047 0%,
      #3d1e43 38%,
      #291a3d 68%,
      #161629 100%
    ) !important;
}


/* ==========================================
   INVESTIGATION LAYOUT
========================================== */

#furkin-foyer .ff-mystery-story .ff-investigation-stage {
  position: absolute;
  inset: 0;

  z-index: 5;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;

  gap: 6%;

  padding:
    6% 10%
    5%;

  color: #fff;

  transition:
    transform .65s cubic-bezier(.16,.8,.24,1),
    opacity .45s ease;
}


/* LEFT */

#furkin-foyer .ff-mystery-story .ff-investigation-clues {
  min-width: 0;
}

#furkin-foyer .ff-mystery-story .ff-investigation-clues h2 {
  margin: 0;

  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(38px,3.7vw,66px);

  line-height: .92;

  letter-spacing: -.035em;

  color: #fff;
}

#furkin-foyer .ff-mystery-story .ff-investigation-clues h2 em {
  color: #e58ac5;
  font-style: normal;
}


/* ==========================================
   CLUE BOARD
========================================== */

#furkin-foyer .ff-mystery-story .ff-clue-board {
  width: min(100%,470px);

  margin-top: 18px;
  padding: 15px 18px;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius: 14px;

  background:
    rgba(255,255,255,.055);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

#furkin-foyer .ff-mystery-story .ff-clue-board-title {
  margin-bottom: 8px;

  font-family: "proxima-nova", sans-serif;
  font-size: 9px;
  font-weight: 900;

  letter-spacing: .18em;

  color: #e58ac5;
}

#furkin-foyer .ff-mystery-story .ff-clue-item {
  display: grid;

  grid-template-columns:
    30px 1fr;

  gap: 10px;

  align-items: center;

  padding: 5px 0;

  font-family: "proxima-nova", sans-serif;
  font-size: 14px;
  line-height: 1.25;

  color:
    rgba(255,255,255,.76);
}

#furkin-foyer .ff-mystery-story .ff-clue-item strong {
  display: block;

  margin-bottom: 1px;

  color: #fff;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .08em;
}

#furkin-foyer .ff-mystery-story .ff-clue-number {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  border:
    1px solid rgba(229,138,197,.55);

  border-radius: 50%;

  color: #f0add7;

  font-family: "proxima-nova", sans-serif;
  font-size: 8px;
  font-weight: 900;
}


/* ==========================================
   QUESTION CARD
========================================== */

#furkin-foyer .ff-mystery-story .ff-question-card {
  width: 100%;
  max-width: 520px;

  margin-left: auto;

  padding:
    clamp(23px,2.4vw,36px);

  border:
    2px solid rgba(198,86,161,.55);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      #faf1f8,
      #eee2f0
    );

  color: #38284d;

  box-shadow:
    0 26px 70px rgba(0,0,0,.34);

  transform: rotate(.35deg);
}

#furkin-foyer .ff-mystery-story .ff-question-kicker {
  font-family: "proxima-nova", sans-serif;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .18em;

  color: #c656a1;
}

#furkin-foyer .ff-mystery-story .ff-question-icon {
  margin: 12px 0 4px;

  font-size: 32px;
}

#furkin-foyer .ff-mystery-story .ff-question-card h3 {
  margin: 0;

  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(25px,2.4vw,39px);

  line-height: .98;

  color: #4b3469;
}

#furkin-foyer .ff-mystery-story .ff-question-copy {
  margin:
    10px 0 16px;

  font-family: "proxima-nova", sans-serif;

  font-size: 12px;
  line-height: 1.35;

  color: #665870;
}


/* ==========================================
   ANSWERS
========================================== */

#furkin-foyer .ff-mystery-story .ff-answer-list {
  display: grid;
  gap: 8px;
}

#furkin-foyer .ff-mystery-story .ff-answer {
  display: grid;

  grid-template-columns:
    30px 1fr;

  align-items: center;

  gap: 10px;

  width: 100%;

  padding: 10px 12px;

  border:
    1px solid rgba(75,52,105,.16);

  border-radius: 11px;

  background:
    rgba(255,255,255,.7);

  color: #51445b;

  text-align: left;

  font-family: "proxima-nova", sans-serif;
  font-size: 10px;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

#furkin-foyer .ff-mystery-story .ff-answer:hover {
  transform:
    translateX(3px);

  border-color:
    rgba(198,86,161,.55);

  background: #fff;
}

#furkin-foyer .ff-mystery-story .ff-answer-letter {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  border-radius: 50%;

  background: #4b3469;

  color: #fff;

  font-size: 9px;
  font-weight: 900;
}


/* CORRECT */

#furkin-foyer .ff-mystery-story .ff-answer.ff-correct {
  border-color: #41c0bd;

  background:
    rgba(65,192,189,.12);
}


/* WRONG SHAKE */

#furkin-foyer .ff-mystery-story .ff-answer.ff-wrong {
  animation:
    ffMysteryWrong .35s ease;
}

@keyframes ffMysteryWrong {

  0%,
  100% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(-5px);
  }

  65% {
    transform: translateX(5px);
  }

}


/* ==========================================
   CORRECT RESULT
========================================== */

#furkin-foyer .ff-mystery-story .ff-answer-result {
  display: none;

  margin-top: 17px;

  padding-top: 15px;

  border-top:
    1px dashed rgba(75,52,105,.2);
}

#furkin-foyer
.ff-mystery-story
.ff-investigation-question.ff-solved
.ff-answer-list {
  display: none;
}

#furkin-foyer
.ff-mystery-story
.ff-investigation-question.ff-solved
.ff-answer-result {
  display: block;
}

#furkin-foyer .ff-mystery-story .ff-result-stamp {
  display: inline-block;

  margin-bottom: 8px;

  padding: 5px 8px;

  border:
    2px solid #41c0bd;

  border-radius: 4px;

  color: #278f8d;

  font-family: "proxima-nova", sans-serif;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .13em;

  transform: rotate(-2deg);
}

#furkin-foyer .ff-mystery-story .ff-result-headline {
  font-family: "rooney-sans", sans-serif;

  font-size:
    clamp(24px,2.1vw,34px);

  line-height: 1;

  color: #c656a1;
}

#furkin-foyer .ff-mystery-story .ff-answer-result p {
  margin: 9px 0 13px;

  font-family: "proxima-nova", sans-serif;

  font-size: 11px;
  line-height: 1.4;

  color: #665870;
}


/* ==========================================
   OPEN CASE FILE
========================================== */

#furkin-foyer .ff-mystery-story .ff-open-case-file {
  padding: 11px 18px;

  border: 0;
  border-radius: 999px;

  background: #c656a1;

  color: #fff;

  font-family: "proxima-nova", sans-serif;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .09em;

  cursor: pointer;

  box-shadow:
    0 7px 18px rgba(198,86,161,.25);
}


/* ==========================================
   CASE REVEAL
========================================== */

#furkin-foyer .ff-mystery-story .ff-case-reveal-stage {
  position: absolute;
  inset: 0;

  z-index: 6;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .5s ease,
    transform .65s cubic-bezier(.16,.8,.24,1);

  transform:
    translateX(8%);
}

#furkin-foyer
.ff-mystery-story.ff-case-revealed
.ff-investigation-stage {
  opacity: 0;

  pointer-events: none;

  transform:
    translateX(-8%);
}

#furkin-foyer
.ff-mystery-story.ff-case-revealed
.ff-case-reveal-stage {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateX(0);
}


/* Sully case-file colours */

#furkin-foyer
.ff-mystery-story
.ff-case-file {
  border-color:
    rgba(198,86,161,.7);
}

#furkin-foyer
.ff-mystery-story
.ff-case-file-top {
  color: #a84d8c;
}

#furkin-foyer
.ff-mystery-story
.ff-case-verdict {
  color: #c656a1;
}

#furkin-foyer
.ff-mystery-story
.ff-stat-number {
  color: #c656a1;
}

#furkin-foyer
.ff-mystery-story
.ff-ending-icon {
  color: #c656a1;
}

#furkin-foyer
.ff-mystery-story
.ff-story-cta {
  background: #c656a1;
}


/* ==========================================
   SHORT LANDSCAPE SCREENS
========================================== */

@media screen and (max-height: 750px) {

  #furkin-foyer
  .ff-mystery-story
  .ff-investigation-stage {
    padding:
      8% 9%
      4%;

    gap: 6%;
  }

  #furkin-foyer
  .ff-mystery-story
  .ff-clue-board {
    margin-top: 10px;

    padding: 10px 14px;
  }

  #furkin-foyer
  .ff-mystery-story
  .ff-clue-item {
    padding: 3px 0;
  }

  #furkin-foyer
  .ff-mystery-story
  .ff-question-card {
    padding: 18px 22px;
  }

}


/* ==========================================================
   FURKIN HAUNTED HOUSE — FINAL STAGE/FIT FIX
   ========================================================== */

/* Keep the foyer completely out of page flow until our own
   controlled stage state says it is time to show it. */
body:not([data-furkin-stage="foyer"]) #furkin-foyer {
  display: none !important;
}

body[data-furkin-stage="foyer"] #furkin-foyer {
  display: block !important;
}

body[data-furkin-stage="foyer"] #furkin-haunted-hero {
  display: none !important;
}

@media screen and (max-width: 950px) and (orientation: landscape) and (max-height: 767px) {

  .nav__wrapper {
    display: none !important;
  }

  #furkin-haunted-hero {
    min-height: 0 !important;
    overflow: hidden !important;
  }

 #furkin-haunted-hero .fh-content {
  left: 50% !important;
  top: 50% !important;

  width: min(560px, 70vw) !important;

  transform:
    translate(-50%, -50%) !important;

  text-align: center !important;
}
  #furkin-haunted-hero .fh-eyebrow {
    margin-bottom: 6px !important;
    font-size: 9px !important;
    letter-spacing: .18em !important;
  }

  #furkin-haunted-hero h1 {
    font-size: clamp(40px, 12.5vh, 54px) !important;
    line-height: .84 !important;
  }

 #furkin-haunted-hero .fh-subhead {
  max-width: 500px !important;

  margin:
    10px auto 12px !important;

  font-size:
    clamp(12px, 3.4vh, 15px) !important;

  line-height: 1.3 !important;
}
  #furkin-haunted-hero .fh-enter {
    padding: 10px 18px !important;
    font-size: 10px !important;
  }

 #furkin-haunted-hero .fh-hint {
  margin-top: 7px !important;

  font-size: 11px !important;

  line-height: 1.3 !important;
}

  body[data-furkin-stage="foyer"] #furkin-foyer {
    transform-origin: top center !important;
    will-change: transform;
  }

  body[data-furkin-stage="foyer"] {
    background: #17112d !important;
  }
}



/* ==========================================================
   FURKIN — MOBILE LANDSCAPE POLISH
   Compact quote card + keep Back to Foyer off the case file.
   Placed LAST so it wins over the older duplicate rules.
   ========================================================== */
@media screen and (max-width: 950px) and (orientation: landscape) and (max-height: 767px) {

  /* ---------- BACK TO FOYER ---------- */
  #furkin-foyer .ff-story-close {
    top: 8px !important;
    left: 10px !important;

    width: auto !important;
    height: auto !important;

    padding: 5px 8px !important;

    border-radius: 999px !important;

    background: rgba(20, 11, 35, .78) !important;
    backdrop-filter: blur(6px);

    font-size: 0 !important;
    line-height: 1 !important;

    z-index: 200 !important;
  }

  #furkin-foyer .ff-story-close span {
    margin-right: 4px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  #furkin-foyer .ff-story-close::after {
    content: "FOYER";

    font-family: "proxima-nova", sans-serif;
    font-size: 7px;
    font-weight: 900;
    line-height: 1;

    letter-spacing: .09em;

    color: rgba(255,255,255,.9);
  }


  /* ---------- QUOTE CARD ---------- */
  #furkin-foyer .ff-quote-reveal {
    top: 69% !important;
    bottom: auto !important;

    width: min(420px, 43%) !important;
  }

  #furkin-foyer .ff-quote-inner {
    grid-template-columns: minmax(0, 1fr) auto !important;

    gap: 9px !important;

    padding: 8px 10px !important;

    border-radius: 12px !important;
  }

  #furkin-foyer .ff-quote-inner::after {
    width: 24px !important;
    height: 24px !important;

    font-size: 12px !important;
  }

  #furkin-foyer .ff-quote-eyebrow {
    margin-bottom: 2px !important;

    font-size: 5.5px !important;
    letter-spacing: .14em !important;
  }

  #furkin-foyer .ff-quote-headline {
    font-size: clamp(10px, 1.15vw, 14px) !important;
    line-height: 1 !important;
  }

  #furkin-foyer .ff-quote-subcopy {
    margin-top: 3px !important;

    max-width: 260px !important;

    font-size: 6px !important;
    line-height: 1.2 !important;
  }

  #furkin-foyer .ff-quote-action {
    min-width: 112px !important;
  }

  #furkin-foyer .ff-quote-button {
    min-width: 112px !important;

    gap: 5px !important;

    padding: 7px 9px !important;

    font-size: 6px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  #furkin-foyer .ff-quote-button span {
    font-size: 9px !important;
  }

  /* This extra line is cute on desktop but costs too much height on phone. */
  #furkin-foyer .ff-quote-keep-looking {
    display: none !important;
  }
}



/* ==========================================================
   FURKIN — PHONE LANDSCAPE CASE FIX V2
   - desktop is excluded by max-width
   - real Back to Foyer text is visible
   - case file is compact enough to stay inside the scene
   - quote card stays compact
   ========================================================== */
@media screen and (max-width: 950px) and (orientation: landscape) and (max-height: 767px) {

  /* ----- BACK TO FOYER: keep the REAL button text ----- */
  #furkin-foyer .ff-story-close {
    top: 7px !important;
    left: 8px !important;

    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    height: auto !important;

    padding: 5px 8px !important;

    border-radius: 999px !important;

    background: rgba(20, 11, 35, .88) !important;
    color: #fff !important;

    font-family: "proxima-nova", sans-serif !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;

    white-space: nowrap !important;

    z-index: 500 !important;
  }

  #furkin-foyer .ff-story-close span {
    display: inline-block !important;
    margin-right: 4px !important;

    font-size: 10px !important;
    line-height: 1 !important;
  }

  /* Kill the temporary pseudo-label from the previous version. */
  #furkin-foyer .ff-story-close::after {
    content: none !important;
    display: none !important;
  }


  /* ----- CASE FILE: make the revealed card genuinely fit ----- */
  #furkin-foyer .ff-story.ff-case-revealed .ff-case-reveal-stage .ff-case-file,
  #furkin-foyer .ff-mystery-story.ff-case-revealed .ff-case-reveal-stage .ff-case-file {
    top: 50% !important;
    right: 5% !important;

    width: 41% !important;
    max-width: none !important;

    padding: 10px 13px !important;

    border-radius: 12px !important;

    transform:
      translateY(-50%)
      rotate(-.2deg) !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-case-file-top {
    gap: 7px !important;

    margin-bottom: 5px !important;
    padding-bottom: 4px !important;

    font-size: 6px !important;
    letter-spacing: .10em !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-case-copy p {
    margin-bottom: 3px !important;

    font-size: 7.5px !important;
    line-height: 1.16 !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-case-verdict {
    margin: 5px 0 3px !important;

    font-size: 6px !important;
    letter-spacing: .11em !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-case-stats {
    padding: 3px 0 !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-case-stat {
    padding: 0 5px !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-stat-number {
    font-size: 21px !important;
    line-height: .9 !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-stat-label {
    margin-top: 2px !important;

    font-size: 5.5px !important;
    line-height: 1.12 !important;
    letter-spacing: .07em !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-stat-divider {
    height: 25px !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-happy-ending {
    grid-template-columns: 11px 1fr !important;

    gap: 4px !important;

    margin-top: 4px !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-ending-icon {
    font-size: 10px !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-happy-ending p {
    font-size: 6.5px !important;
    line-height: 1.14 !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-story-cta {
    margin-top: 5px !important;

    padding: 5px 8px !important;

    font-size: 5.5px !important;
    line-height: 1 !important;
  }


  /* ----- LEFT CASE-REVEAL HEADING: keep it comfortably inside ----- */
  #furkin-foyer .ff-story.ff-case-revealed .ff-case-reveal-heading,
  #furkin-foyer .ff-mystery-story.ff-case-revealed .ff-case-intro {
    top: 50% !important;
  }

  #furkin-foyer .ff-story.ff-case-revealed .ff-case-reveal-heading h2,
  #furkin-foyer .ff-mystery-story.ff-case-revealed .ff-case-intro h2 {
    font-size: clamp(24px, 3.1vw, 36px) !important;
  }


  /* ----- QUOTE CARD ----- */
  #furkin-foyer .ff-quote-reveal {
    top: 70% !important;
    bottom: auto !important;

    width: min(390px, 40%) !important;
  }

  #furkin-foyer .ff-quote-inner {
    gap: 7px !important;

    padding: 7px 9px !important;

    border-radius: 11px !important;
  }

  #furkin-foyer .ff-quote-headline {
    font-size: clamp(9px, 1.05vw, 12px) !important;
  }

  #furkin-foyer .ff-quote-subcopy {
    font-size: 5.5px !important;
    line-height: 1.16 !important;
  }

  #furkin-foyer .ff-quote-action,
  #furkin-foyer .ff-quote-button {
    min-width: 100px !important;
  }

  #furkin-foyer .ff-quote-button {
    padding: 6px 8px !important;

    font-size: 5.5px !important;
  }
}



/* ==========================================================
   FURKIN — PHONE LANDSCAPE ROOM FIT V3
   The first investigation/result screen is still taller than
   the room canvas after "Case Cracked", so scale ONLY that
   stage as one unit. Back button + foyer + case reveal stay
   untouched.
   ========================================================== */
@media screen and (max-width: 950px) and (orientation: landscape) and (max-height: 767px) {

  /* Before OPEN THE CASE FILE is clicked, shrink the entire
     investigation stage uniformly so the fourth clue/result/CTA
     cannot fall below the bottom edge. */
  #furkin-foyer .ff-story.ff-story-open:not(.ff-case-revealed) .ff-investigation-stage {
    transform:
      translateY(-1.5%)
      scale(.86) !important;

    transform-origin: center center !important;
  }

  /* Give the expanded correct-answer result less vertical appetite. */
  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-question.ff-solved
  .ff-answer-result {
    margin-top: 5px !important;
    max-height: 150px !important;
  }

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-answer-result p {
    margin: 3px 0 6px !important;
    line-height: 1.2 !important;
  }

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-open-case-file {
    padding: 6px 10px !important;
    font-size: 6px !important;
    line-height: 1 !important;
  }
}



/* ==========================================================
   FURKIN — PHONE LANDSCAPE ROOM FIT V4
   Some rooms (especially Teddy/Living Room) are taller than
   Buddy even before the answer result opens. Give ALL room
   investigation stages a little more breathing room.
   ========================================================== */
@media screen and (max-width: 950px) and (orientation: landscape) and (max-height: 767px) {

  /* Override V3's .86 fit. This applies only while the room is
     in the investigation/question state, NOT the case-file reveal. */
  #furkin-foyer .ff-story.ff-story-open:not(.ff-case-revealed) .ff-investigation-stage {
    transform:
      translateY(-4%)
      scale(.78) !important;

    transform-origin: center center !important;
  }

  /* A little less vertical padding inside the two-column stage
     helps the taller room copy/evidence boards fit consistently. */
  #furkin-foyer .ff-story.ff-story-open:not(.ff-case-revealed) .ff-investigation-stage {
    padding-top: 5% !important;
    padding-bottom: 3% !important;
  }

  /* Keep solved/result states from re-expanding beyond the canvas. */
  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-question.ff-solved
  .ff-answer-result {
    margin-top: 4px !important;
    max-height: 135px !important;
  }

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-answer-result p {
    margin: 2px 0 5px !important;
    line-height: 1.16 !important;
  }

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-open-case-file {
    margin-top: 3px !important;
    padding: 5px 9px !important;
    font-size: 5.5px !important;
  }
}




/* ==========================================
   CASE FILE — PAPER-CLIPPED PET PHOTOS
========================================== */

#furkin-foyer .ff-case-pet-photo {
  position: absolute !important;

  top: 48px !important;
  right: 30px !important;

  width: 185px !important;
  height: 205px !important;

  padding: 9px 9px 24px !important;

  background: #fff !important;

  border: 1px solid rgba(60,40,70,.10) !important;

  box-shadow:
    0 12px 28px rgba(38,22,48,.22) !important;

  z-index: 8 !important;

  box-sizing: border-box !important;
}

#furkin-foyer .ff-case-pet-photo img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;
}


/* PAPER CLIP */

#furkin-foyer .ff-paperclip {
  position: absolute !important;
  top: -18px !important;
  right: 18px !important;

  width: 17px !important;
  height: 50px !important;

  border: 2.5px solid #777 !important;
  border-radius: 10px !important;

  transform: rotate(11deg) !important;
  z-index: 10 !important;

  box-sizing: border-box !important;

  box-shadow:
    1px 1px 2px rgba(0,0,0,.12) !important;
}
#furkin-foyer .ff-paperclip::after {
  content: "" !important;
  position: absolute !important;

  top: 5px !important;
  left: 4px !important;

  width: 6px !important;
  height: 34px !important;

  border: 1.5px solid #aaa !important;
  border-radius: 7px !important;

  box-sizing: border-box !important;
}
/* INDIVIDUAL PHOTO ANGLES */

#furkin-foyer .ff-bedroom-story .ff-case-pet-photo {
  transform: rotate(-3deg) !important;
}

#furkin-foyer .ff-kitchen-story .ff-case-pet-photo {
  transform: rotate(2.5deg) !important;
}

#furkin-foyer .ff-living-story .ff-case-pet-photo {
  transform: rotate(-2deg) !important;
}

#furkin-foyer .ff-mystery-story .ff-case-pet-photo {
  transform: rotate(3deg) !important;
}
  /* Let the opening story copy wrap around the clipped photo */

#furkin-foyer .ff-case-file .ff-case-copy {
  padding-right: 150px;
}

/* Everything after the opening story section gets the full width */

#furkin-foyer .ff-case-file .ff-case-verdict,
#furkin-foyer .ff-case-file .ff-case-stats,
#furkin-foyer .ff-case-file .ff-happy-ending,
#furkin-foyer .ff-case-file .ff-story-cta {
  position: relative;
  z-index: 2;
}
  /* Keep case copy clear of the pet photo */
#furkin-foyer .ff-case-file .ff-case-copy {
  padding-right: 215px !important;
  min-height: 205px !important;
  box-sizing: border-box !important;

  }
  /* ==========================================
   FINAL TYPOGRAPHY POLISH
========================================== */

/* HERO CTA — REMOVE ARROW */
#furkin-haunted-hero .fh-enter span {
  display: none !important;
}

#furkin-haunted-hero .fh-enter {
  gap: 0 !important;
}


/* ==========================================
   CASE ROOMS — MAKE SUPPORTING COPY EASIER TO READ
========================================== */

/* Intro copy */
#furkin-foyer .ff-investigation-lead,
#furkin-foyer .ff-case-lead {
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.45 !important;
}

/* Evidence / clue copy */
#furkin-foyer .ff-clue-copy,
#furkin-foyer .ff-evidence-row {
  font-size: clamp(12px, .9vw, 15px) !important;
  line-height: 1.4 !important;
}

/* Evidence labels */
#furkin-foyer .ff-clue-copy strong,
#furkin-foyer .ff-evidence-row strong {
  font-size: 10px !important;
}

/* Question supporting copy */
#furkin-foyer .ff-question-copy {
  font-size: clamp(13px, .95vw, 16px) !important;
  line-height: 1.45 !important;
}

/* Multiple choice answers */
#furkin-foyer .ff-answer-text,
#furkin-foyer .ff-answer > span:not(.ff-answer-letter) {
  font-size: clamp(13px, .95vw, 16px) !important;
  line-height: 1.3 !important;
}

/* Official case file body copy */
#furkin-foyer .ff-case-copy p {
  font-size: clamp(13px, .92vw, 16px) !important;
  line-height: 1.45 !important;
}

/* Happy ending copy */
#furkin-foyer .ff-happy-ending p {
  font-size: clamp(12px, .85vw, 15px) !important;
  line-height: 1.45 !important;
}


/* ==========================================
   QUOTE REVEAL — BALANCED VERSION
========================================== */

#furkin-foyer .ff-quote-inner {
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, .8fr) !important;
  gap: 28px !important;
  padding: 22px 28px !important;
}

/* Left copy */
#furkin-foyer .ff-quote-copy {
  max-width: 640px !important;
}

#furkin-foyer .ff-quote-eyebrow {
  font-size: 9px !important;
  letter-spacing: .18em !important;
}

#furkin-foyer .ff-quote-headline {
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.02em !important;
  max-width: 600px !important;
}

#furkin-foyer .ff-quote-subcopy {
  margin-top: 9px !important;
  max-width: 560px !important;
  font-size: clamp(11px, .82vw, 13px) !important;
  line-height: 1.4 !important;
}

/* Right CTA */
#furkin-foyer .ff-quote-action {
  min-width: 220px !important;
}

#furkin-foyer .ff-quote-button {
  font-size: 12px !important;
  padding: 14px 22px !important;
}

#furkin-foyer .ff-quote-keep-looking {
  margin-top: 8px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  opacity: .75 !important;
}
/* ==========================================
   RESTORE HERO ANIMATIONS
========================================== */

/* HOUSE / WINDOW FLICKER */
@keyframes fhHouseFlicker {
  0%, 18%, 22%, 24%, 55%, 100% {
    filter: brightness(1);
  }

  20%, 23% {
    filter: brightness(.72);
  }

  70% {
    filter: brightness(.94);
  }
}

@keyframes fhHouseFlickerEntering {
  0%, 18%, 22%, 24%, 55%, 100% {
    filter: brightness(1);
  }

  20%, 23% {
    filter: brightness(.68);
  }

  70% {
    filter: brightness(.92);
  }
}


/* PILLAR LIGHT FLICKER */
@keyframes fhLantern {
  0% {
    opacity: .78;
    transform: translateX(-50%) scale(.96);
    box-shadow:
      0 0 10px #ffc66d,
      0 0 24px rgba(255,198,109,.48);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.06);
    box-shadow:
      0 0 18px #ffc66d,
      0 0 42px rgba(255,198,109,.78);
  }

  100% {
    opacity: .86;
    transform: translateX(-50%) scale(1);
    box-shadow:
      0 0 13px #ffc66d,
      0 0 32px rgba(255,198,109,.62);
  }
}


/* FOG DRIFT */
@keyframes fhFogOne {
  0% {
    transform: translateX(-4%) translateY(0) scale(1.03);
  }

  100% {
    transform: translateX(4%) translateY(-2%) scale(1.08);
  }
}

@keyframes fhFogTwo {
  0% {
    transform: translateX(5%) translateY(1%) scale(1.06);
  }

  100% {
    transform: translateX(-5%) translateY(-1%) scale(1.1);
  }
}
 /* ==========================================
   CASE STORY READABILITY POLISH
========================================== */

/* 01 / 02 / 03 / 04 clue numbers */
#furkin-foyer .ff-clue-number {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;

  font-size: 10px !important;
  line-height: 1 !important;
}

/* RESULT / REVEAL COPY */
#furkin-foyer .ff-answer-result p {
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin: 7px 0 13px !important;
}

/* FOUND IT / CASE CRACKED result headline */
#furkin-foyer .ff-answer-result-title,
#furkin-foyer .ff-result-headline {
  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1.05 !important;
}

/* OPEN THE CASE FILE */
#furkin-foyer .ff-open-case-file {
  padding: 12px 19px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
}

/* Happy ending copy */
#furkin-foyer .ff-happy-ending p {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* READ ___ FULL STORY */
#furkin-foyer .ff-story-cta {
  margin-top: 12px !important;
  padding: 12px 19px !important;

  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
}

/* ==========================================
   STRONGER CASE READABILITY
========================================== */

/* 01 / 02 / 03 / 04 */
#furkin-foyer .ff-clue-number {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  font-size: 12px !important;
  font-weight: 900 !important;
}

/* RESULT / REVEAL BODY COPY */
#furkin-foyer .ff-answer-result p {
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin: 9px 0 16px !important;
}

/* OPEN THE CASE FILE */
#furkin-foyer .ff-open-case-file {
  padding: 14px 24px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
}

/* HAPPY ENDING COPY */
#furkin-foyer .ff-happy-ending p {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* READ ___ FULL STORY */
#furkin-foyer .ff-story-cta {
  margin-top: 14px !important;
  padding: 14px 24px !important;

  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
}
#furkin-foyer .ff-room-complete-actions {
  margin-top: 16px;
  text-align: center;
}

#furkin-foyer .ff-room-complete-label {
  margin-bottom: 5px;

  font-family: "proxima-nova", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;

  letter-spacing: .09em;

  color: #c656a1;
}

#furkin-foyer .ff-room-complete-help {
  margin-bottom: 12px;

  font-family: "proxima-nova", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;

  color: #5d4a66;
}

#furkin-foyer .ff-room-complete-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 13px 20px;

  border: 0;
  border-radius: 999px;

  background: #c656a1;
  color: #fff;

  font-family: "proxima-nova", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;

  letter-spacing: .05em;

  cursor: pointer;

  box-shadow: 0 7px 18px rgba(198,86,161,.24);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

#furkin-foyer .ff-room-complete-back:hover {
  transform: translateY(-2px);

  box-shadow: 0 10px 23px rgba(198,86,161,.32);
}

/* Full story is now secondary */
#furkin-foyer .ff-room-complete-actions .ff-story-cta {
  display: block !important;

  width: fit-content;

  margin: 10px auto 0 !important;
  padding: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  color: #765f82 !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;

  text-decoration: underline !important;
  text-underline-offset: 3px;
}

#furkin-foyer .ff-room-complete-actions .ff-story-cta:hover {
  transform: none !important;
  box-shadow: none !important;

  color: #c656a1 !important;
}
  @media screen and (max-width: 950px)
       and (orientation: landscape)
       and (max-height: 767px) {

  #furkin-foyer .ff-room-complete-back {
    padding: 8px 12px !important;

    font-size: 9px !important;
    line-height: 1.15 !important;

    letter-spacing: .03em !important;

    max-width: 240px;

    white-space: normal;

    text-align: center;
  }

}
/* STOP SHORT-SCREEN CSS FROM SHRINKING THESE */
@media screen and (max-height: 750px) {

  #furkin-foyer .ff-open-case-file {
    padding: 12px 20px !important;
    font-size: 11px !important;
  }

  #furkin-foyer .ff-happy-ending p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  #furkin-foyer .ff-story-cta {
    margin-top: 10px !important;
    padding: 12px 20px !important;
    font-size: 11px !important;
  }
}
  /* ==========================================
   MOBILE QUOTE CARD FIX
========================================== */

@media screen and (max-width: 950px) and (orientation: landscape) {

  #furkin-foyer .ff-quote-reveal {
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 72% !important;
    max-width: 620px !important;

    top: auto !important;
    bottom: 4% !important;
  }

  #furkin-foyer .ff-quote-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;

    gap: 14px !important;

    padding: 10px 14px !important;
  }

  #furkin-foyer .ff-quote-copy {
    min-width: 0 !important;
  }

  #furkin-foyer .ff-quote-headline {
    font-size: 15px !important;
    line-height: 1.05 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #furkin-foyer .ff-quote-subcopy {
    margin-top: 4px !important;

    font-size: 9px !important;
    line-height: 1.3 !important;

    max-width: 330px !important;
  }

  #furkin-foyer .ff-quote-action {
    min-width: 150px !important;
  }

  #furkin-foyer .ff-quote-button {
    min-width: 150px !important;

    padding: 10px 14px !important;

    font-size: 9px !important;

    white-space: nowrap !important;
  }

  #furkin-foyer .ff-quote-keep-looking {
    display: none !important;
  }
}
  /* ==========================================================
   FINAL MOBILE LANDSCAPE POLISH
   ========================================================== */

@media screen and (max-width: 950px)
       and (orientation: landscape)
       and (max-height: 767px) {

  /* ------------------------------------------
     BACK TO FOYER
     Move it safely inside the scene
  ------------------------------------------ */

  #furkin-foyer .ff-story-close {
    top: 22px !important;
    left: 22px !important;

    display: inline-flex !important;
    align-items: center !important;

    padding: 8px 12px !important;

    background: rgba(24, 13, 40, .9) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;

    color: #fff !important;

    font-family: "proxima-nova", sans-serif !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;

    white-space: nowrap !important;

    z-index: 999 !important;

    box-shadow: 0 5px 15px rgba(0,0,0,.18) !important;
  }

  #furkin-foyer .ff-story-close span {
    margin-right: 6px !important;

    font-size: 12px !important;
    line-height: 1 !important;
  }


  /* ------------------------------------------
     NORMAL INVESTIGATION SCREEN
  ------------------------------------------ */

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-stage {
    transform:
      translateY(-3%)
      scale(.78) !important;

    transform-origin: center center !important;
  }


  /* ------------------------------------------
     AFTER AN ANSWER IS CORRECT
     Give result + CTA more bottom room
  ------------------------------------------ */

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-question.ff-solved {
    transform: translateY(-3%) !important;
  }

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-question.ff-solved
  .ff-answer-result {
    margin-top: 4px !important;

    max-height: none !important;

    padding-bottom: 8px !important;
  }

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-question.ff-solved
  .ff-answer-result p {
    margin: 4px 0 8px !important;
  }

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-question.ff-solved
  .ff-open-case-file {
    display: inline-flex !important;

    margin-top: 2px !important;

    padding: 10px 16px !important;

    font-size: 9px !important;
    line-height: 1 !important;
  }


  /* ------------------------------------------
     SULLY'S WHITE QUESTION CARD
     Needs a little extra breathing room
  ------------------------------------------ */

  #furkin-foyer
  .ff-mystery-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-stage {
    transform:
      translateY(-5%)
      scale(.76) !important;
  }
}
  /* ==========================================================
   FINAL MOBILE LANDSCAPE CLEANUP
   ========================================================== */

@media screen and (max-width: 950px)
       and (orientation: landscape)
       and (max-height: 767px) {

  /* ------------------------------------------
     BACK TO FOYER — MOVE TO BOTTOM LEFT
  ------------------------------------------ */

  #furkin-foyer .ff-story-close {
    top: auto !important;
    bottom: 14px !important;
    left: 16px !important;

    display: inline-flex !important;
    align-items: center !important;

    padding: 7px 11px !important;

    background: rgba(24, 13, 40, .9) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;

    color: #fff !important;

    font-family: "proxima-nova", sans-serif !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;

    white-space: nowrap !important;

    z-index: 999 !important;
  }

  #furkin-foyer .ff-story-close span {
    margin-right: 5px !important;
    font-size: 11px !important;
  }


  /* ------------------------------------------
     INVESTIGATION SCREEN
     pull whole layout up + shrink slightly more
  ------------------------------------------ */

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-stage {
    transform:
      translateY(-6%)
      scale(.74) !important;

    transform-origin: center center !important;

    padding-top: 3% !important;
    padding-bottom: 2% !important;
  }


  /* ------------------------------------------
     CLUE BOARDS
     reduce vertical appetite slightly
  ------------------------------------------ */

  #furkin-foyer .ff-clue-board {
    margin-top: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #furkin-foyer .ff-clue,
  #furkin-foyer .ff-clue-item {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }


  /* ------------------------------------------
     SOLVED / ANSWER RESULT
     make sure bottom CTA stays visible
  ------------------------------------------ */

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-question.ff-solved {
    transform: translateY(-4%) !important;
  }

  #furkin-foyer
  .ff-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-question.ff-solved
  .ff-answer-result {
    max-height: none !important;
    overflow: visible !important;

    margin-top: 3px !important;
    padding-bottom: 6px !important;
  }


  /* ------------------------------------------
     CASE FILE — SMALLER PET PHOTO
  ------------------------------------------ */

  #furkin-foyer
  .ff-story.ff-case-revealed
  .ff-case-pet-photo {
    width: 135px !important;
    height: 150px !important;

    top: 42px !important;
    right: 18px !important;

    padding: 7px 7px 18px !important;
  }

  /* Give copy room beside smaller photo */
  #furkin-foyer
  .ff-story.ff-case-revealed
  .ff-case-file
  .ff-case-copy {
    padding-right: 150px !important;
    min-height: 155px !important;
  }


  /* ------------------------------------------
     CASE FILE CARD
     slightly more compact overall
  ------------------------------------------ */

  #furkin-foyer
  .ff-story.ff-case-revealed
  .ff-case-reveal-stage
  .ff-case-file {
    width: 40% !important;
    right: 4% !important;

    padding: 9px 11px !important;
  }


  /* ------------------------------------------
     SULLY / MYSTERY ROOM
     slightly tighter than the others
  ------------------------------------------ */

  #furkin-foyer
  .ff-mystery-story.ff-story-open:not(.ff-case-revealed)
  .ff-investigation-stage {
    transform:
      translateY(-7%)
      scale(.72) !important;
  }
}
 /* ==========================================================
   FOYER INSTRUCTION POP-UP
========================================================== */

#furkin-foyer .ff-foyer-intro {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1000 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#furkin-foyer.ff-arrived .ff-foyer-intro {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#furkin-foyer .ff-foyer-intro.ff-intro-dismissed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#furkin-foyer .ff-foyer-intro-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: rgba(12, 8, 28, .72);
  backdrop-filter: blur(3px);
}

#furkin-foyer .ff-foyer-intro-card {
  position: relative;
  z-index: 2;

  width: min(620px, 72%);
  padding: 34px 40px;

  border: 1.5px solid rgba(198,86,161,.75);
  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(49, 24, 67, .98),
      rgba(28, 19, 48, .98)
    );

  box-shadow:
    0 28px 80px rgba(0,0,0,.45);

  text-align: center;
  color: #fff;
}

#furkin-foyer .ff-foyer-intro-eyebrow {
  margin-bottom: 10px;

  font-family: "proxima-nova", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;

  color: #65d0cd;
}

#furkin-foyer .ff-foyer-intro-card h2 {
  margin: 0;

  font-family: "rooney-sans", sans-serif;
  font-size: clamp(36px, 3.6vw, 58px);
  line-height: .95;
  letter-spacing: -.03em;

  color: #fff;
}

#furkin-foyer .ff-foyer-intro-card h2 em {
  color: #df83bf;
  font-style: normal;
}

#furkin-foyer .ff-foyer-intro-copy {
  max-width: 500px;
  margin: 18px auto 16px;

  font-family: "proxima-nova", sans-serif;
  font-size: 14px;
  line-height: 1.45;

  color: rgba(255,255,255,.82);
}

#furkin-foyer .ff-foyer-intro-instruction {
  display: flex;
  align-items: center;
  gap: 12px;

  max-width: 500px;
  margin: 0 auto 20px;
  padding: 13px 16px;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;

  background: rgba(255,255,255,.06);

  text-align: left;
}

#furkin-foyer .ff-foyer-intro-icon {
  flex-shrink: 0;
  font-size: 26px;
}

#furkin-foyer .ff-foyer-intro-instruction p {
  margin: 0;

  font-family: "proxima-nova", sans-serif;
  font-size: 13px;
  line-height: 1.4;

  color: rgba(255,255,255,.88);
}

#furkin-foyer .ff-foyer-intro-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 13px 22px;

  border: 0;
  border-radius: 999px;

  background: #c656a1;
  color: #fff;

  font-family: "proxima-nova", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;

  cursor: pointer;
}

#furkin-foyer .ff-foyer-intro-hint {
  margin-top: 8px;

  font-family: "proxima-nova", sans-serif;
  font-size: 14px;

  color: rgba(255,255,255,.5);
}

@media screen and (max-width: 950px)
       and (orientation: landscape)
       and (max-height: 767px) {

  #furkin-foyer .ff-foyer-intro-card {
    width: min(500px, 68%);
    padding: 18px 22px;
  }

  #furkin-foyer .ff-foyer-intro-card h2 {
    font-size: 30px;
  }

  #furkin-foyer .ff-foyer-intro-copy {
    margin: 10px auto;
    font-size: 9px;
  }

  #furkin-foyer .ff-foyer-intro-instruction {
    margin-bottom: 10px;
    padding: 8px 10px;
  }

  #furkin-foyer .ff-foyer-intro-instruction p {
    font-size: 8px;
  }

  #furkin-foyer .ff-foyer-intro-icon {
    font-size: 18px;
  }

  #furkin-foyer .ff-foyer-intro-button {
    padding: 8px 13px;
    font-size: 7px;
  }

  #furkin-foyer .ff-foyer-intro-hint {
    font-size: 11px;
  }
} 
 #furkin-foyer .ff-foyer-helper {
  position: absolute;

  left: 50%;
  bottom: 7%;

  z-index: 15;

  transform: translateX(-50%);

  width: max-content;
  max-width: 70%;

  padding: 10px 18px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;

  background: rgba(24,13,40,.78);

  color: #fff;

  font-family: "proxima-nova", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.35;

  text-align: center;

  box-shadow: 0 8px 24px rgba(0,0,0,.22);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  pointer-events: none;
} 
/* ==========================================================
   SHARED ROOM INVESTIGATION SYSTEM
   Used by Rooms 01–04 so future room updates only require
   swapping the pet image + evidence emoji/content in HTML.
   ========================================================== */

/* Keep the question interaction high in the room instead of vertically centered. */
#furkin-foyer .ff-story .ff-investigation-question {
  align-self: start;
  margin-top: 7%;
}

/* Evidence header: title/instruction left, small pet photo right. */
#furkin-foyer .ff-story .ff-evidence-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: start;
  gap: 14px;
  margin-bottom: 8px;
}

#furkin-foyer .ff-story .ff-evidence-heading {
  min-width: 0;
}

#furkin-foyer .ff-story .ff-clue-board-title {
  margin-bottom: 4px;
  font-family: "rooney-sans", sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
}

#furkin-foyer .ff-story .ff-evidence-help {
  max-width: 320px;
  font-family: "proxima-nova", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255,255,255,.66);
}

/* Small visual tie-in to the pet — never allowed to expand with the source image. */
#furkin-foyer .ff-story .ff-investigation-pet-thumb {
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  text-align: center;
  transform: rotate(2deg);
}

#furkin-foyer .ff-story .ff-investigation-pet-thumb img {
  display: block;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 4px;
  object-fit: cover;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(0,0,0,.25);
}

#furkin-foyer .ff-story .ff-investigation-pet-thumb span {
  display: block;
  margin-top: 3px;
  font-family: "proxima-nova", sans-serif;
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .12em;
  color: rgba(255,255,255,.58);
}

/* Evidence uses visual icons/emojis instead of another set of numbers. */
#furkin-foyer .ff-story .ff-clue-number {
  width: 30px;
  height: 30px;
  min-width: 30px;
  font-size: 14px;
  line-height: 1;
}

/* Mobile landscape: same system, scaled down as a unit. */
@media screen and (max-width: 950px)
       and (orientation: landscape)
       and (max-height: 767px) {

  #furkin-foyer .ff-story .ff-investigation-question {
    margin-top: 4%;
  }

  #furkin-foyer .ff-story .ff-evidence-top {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    margin-bottom: 4px;
  }

  #furkin-foyer .ff-story .ff-clue-board-title {
    font-size: 11px;
  }

  #furkin-foyer .ff-story .ff-evidence-help {
    font-size: 10px;
  }

  #furkin-foyer .ff-story .ff-investigation-pet-thumb {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
  }

  #furkin-foyer .ff-story .ff-investigation-pet-thumb img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 3px;
  }

  #furkin-foyer .ff-story .ff-investigation-pet-thumb span {
    font-size: 4.5px;
  }

  #furkin-foyer .ff-story .ff-clue-number {
    width: 25px;
    height: 25px;
    min-width: 25px;
  	Font-size: 11px;
         }
         }
/* ==========================================
   FURKIN HAUNTED HOUSE — COMPLETION MODAL
========================================== */

#ff-completion-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  box-sizing: border-box;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

#ff-completion-modal.ff-completion-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ==========================================
   BACKDROP
========================================== */

#ff-completion-modal .ff-completion-backdrop {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(53,16,90,.35),
      rgba(18,4,29,.93) 72%
    );

  backdrop-filter: blur(8px);
}


/* ==========================================
   CARD
========================================== */

#ff-completion-modal .ff-completion-card {
  position: relative;
  z-index: 2;

  width: min(620px, 100%);
  max-height: calc(100vh - 48px);

  padding:
    clamp(44px, 6vw, 64px)
    clamp(24px, 5vw, 52px)
    clamp(32px, 5vw, 48px);

  box-sizing: border-box;

  text-align: center;

  background:
    linear-gradient(
      155deg,
      #35105a 0%,
      #250638 52%,
      #17031f 100%
    );

  border:
    1px solid rgba(255,255,255,.15);

  border-radius: 30px;

  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 0 50px rgba(198,86,161,.18);
overflow-x: hidden;
overflow-y: auto;

-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;

  transform: translateY(18px) scale(.97);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1);
}
#ff-completion-modal .ff-completion-card::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
#ff-completion-modal.ff-completion-visible
.ff-completion-card {
  transform: translateY(0) scale(1);
}


/* ==========================================
   CLOSE
========================================== */

#ff-completion-modal .ff-completion-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 10;

  width: 38px;
  height: 38px;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius: 50%;

  background:
    rgba(255,255,255,.08);

  color: #ffffff;

  font-family:
    "proxima-nova",
    Arial,
    sans-serif;

  font-size: 24px;
  line-height: 1;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .2s ease;
}

#ff-completion-modal
.ff-completion-close:hover {
  background:
    rgba(255,255,255,.15);

  transform: scale(1.05);
}


/* ==========================================
   DECORATIVE GLOW
========================================== */

#ff-completion-modal .ff-completion-glow {
  position: absolute;

  width: 240px;
  height: 240px;

  border-radius: 50%;

  filter: blur(70px);

  pointer-events: none;
}

#ff-completion-modal
.ff-completion-glow-one {
  top: -110px;
  left: -80px;

  background:
    rgba(198,86,161,.32);
}

#ff-completion-modal
.ff-completion-glow-two {
  right: -100px;
  bottom: -120px;

  background:
    rgba(65,192,189,.24);
}


/* ==========================================
   SPOOKY DECOR
========================================== */

#ff-completion-modal .ff-completion-decor {
  position: absolute;
  z-index: 1;

  pointer-events: none;

  user-select: none;
}

#ff-completion-modal
.ff-completion-bat-one {
  top: 24px;
  left: 30px;

  font-size: 24px;

  transform: rotate(-14deg);
}

#ff-completion-modal
.ff-completion-bat-two {
  top: 74px;
  right: 58px;

  font-size: 16px;

  transform: rotate(13deg);
}

#ff-completion-modal
.ff-completion-ghost {
  right: 28px;
  bottom: 24px;

  font-size: 34px;

  transform: rotate(8deg);
}


/* ==========================================
   CONTENT
========================================== */

#ff-completion-modal
.ff-completion-content {
  position: relative;
  z-index: 3;
}


/* ==========================================
   EYEBROW
========================================== */

#ff-completion-modal
.ff-completion-eyebrow {
  display: inline-block;

  margin-bottom: 18px;

  padding: 8px 13px;

  border:
    1px solid rgba(246,191,0,.4);

  border-radius: 999px;

  background:
    rgba(246,191,0,.09);

  color: #f6bf00;

  font-family:
    "proxima-nova",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;

  text-transform: uppercase;
}


/* ==========================================
   HEADLINE
========================================== */

#ff-completion-modal h2 {
  margin: 0 auto 18px;

  color: #ffffff;

  font-family:
    "rooney-web",
    "rooney",
    Georgia,
    serif;

  font-size:
    clamp(38px, 6vw, 58px);

  line-height: 1.02;

  letter-spacing: -.03em;
}

#ff-completion-modal h2 em {
  color: #f2d9ef;

  font-style: normal;
}


/* ==========================================
   COPY
========================================== */

#ff-completion-modal
.ff-completion-copy {
  max-width: 470px;

  margin: 0 auto 26px;

  color:
    rgba(255,255,255,.84);

  font-family:
    "proxima-nova",
    Arial,
    sans-serif;

  font-size: 18px;
  line-height: 1.55;
}


/* ==========================================
   PRIZE BLOCK
========================================== */

#ff-completion-modal
.ff-completion-prize {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  max-width: 480px;

  margin: 0 auto 28px;

  padding: 18px 20px;

  box-sizing: border-box;

  text-align: left;

  background:
    rgba(255,255,255,.07);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius: 18px;
}

#ff-completion-modal
.ff-completion-prize-icon {
  flex: 0 0 auto;

  font-size: 28px;
  line-height: 1;
}

#ff-completion-modal
.ff-completion-prize strong {
  display: block;

  margin-bottom: 4px;

  color: #ffffff;

  font-family:
    "proxima-nova",
    Arial,
    sans-serif;

  font-size: 16px;
  font-weight: 800;
}

#ff-completion-modal
.ff-completion-prize p {
  margin: 0;

  color:
    rgba(255,255,255,.74);

  font-family:
    "proxima-nova",
    Arial,
    sans-serif;

  font-size: 14px;
  line-height: 1.45;
}


/* ==========================================
   CTAS
========================================== */

#ff-completion-modal
.ff-completion-actions {
  display: flex;
  flex-direction: column;

  gap: 12px;

  max-width: 390px;

  margin: 0 auto;
}

#ff-completion-modal
.ff-completion-cta {
  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding: 14px 22px;

  box-sizing: border-box;

  border-radius: 999px;

  font-family:
    "proxima-nova",
    Arial,
    sans-serif;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;

  text-decoration: none !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

#ff-completion-modal
.ff-completion-cta:hover {
  transform:
    translateY(-2px);
}


/* PRIMARY */

#ff-completion-modal
.ff-completion-cta-primary {
  background: #f6bf00;

  color:
    #35105a !important;

  box-shadow:
    0 10px 28px
    rgba(246,191,0,.22);
}

#ff-completion-modal
.ff-completion-cta-primary:hover {
  box-shadow:
    0 13px 34px
    rgba(246,191,0,.3);
}


/* SECONDARY */

#ff-completion-modal
.ff-completion-cta-secondary {
  background: transparent;

  color:
    #ffffff !important;

  border:
    1px solid
    rgba(255,255,255,.38);
}

#ff-completion-modal
.ff-completion-cta-secondary:hover {
  background:
    rgba(255,255,255,.08);
}


/* ==========================================
   NOTE
========================================== */

#ff-completion-modal
.ff-completion-note {
  margin-top: 14px;

  color:
    rgba(255,255,255,.45);

  font-family:
    "proxima-nova",
    Arial,
    sans-serif;

  font-size: 13px;
  line-height: 1.4;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

  #ff-completion-modal {
    padding: 12px;

    align-items: flex-start;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
  }

  #ff-completion-modal
  .ff-completion-card {
    width: 100%;

    max-height:
      calc(100dvh - 24px);

    margin: auto 0;

    padding:
      46px 18px
      28px;

    border-radius: 22px;

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
  }

  #ff-completion-modal h2 {
    font-size:
      clamp(32px, 9vw, 44px);
  }

  #ff-completion-modal
  .ff-completion-copy {
    margin-bottom: 20px;

    font-size: 15px;
    line-height: 1.45;
  }

  #ff-completion-modal
  .ff-completion-prize {
    margin-bottom: 20px;

    padding: 14px;
  }

  #ff-completion-modal
  .ff-completion-actions {
    gap: 10px;
  }

  #ff-completion-modal
  .ff-completion-cta {
    min-height: 48px;

    padding: 12px 18px;
  }

}


/* ==========================================
   MOBILE LANDSCAPE / SHORT SCREENS
========================================== */

@media (max-width: 900px) and (max-height: 500px) {

  #ff-completion-modal {
    padding: 8px;

    align-items: flex-start;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
  }

  #ff-completion-modal
  .ff-completion-card {
    width:
      min(620px, 96%);

    max-height: none;

    margin: 8px auto;

    padding:
      34px 24px
      24px;

    overflow: visible;
  }

  #ff-completion-modal
  .ff-completion-eyebrow {
    margin-bottom: 10px;

    padding: 6px 10px;

    font-size: 11px;
  }

  #ff-completion-modal h2 {
    margin-bottom: 10px;

    font-size: 34px;
    line-height: 1;
  }

  #ff-completion-modal
  .ff-completion-copy {
    margin-bottom: 14px;

    font-size: 14px;
    line-height: 1.35;
  }

  #ff-completion-modal
  .ff-completion-prize {
    margin-bottom: 14px;

    padding: 11px 14px;
  }

  #ff-completion-modal
  .ff-completion-prize-icon {
    font-size: 22px;
  }

  #ff-completion-modal
  .ff-completion-prize strong {
    font-size: 14px;
  }

  #ff-completion-modal
  .ff-completion-prize p {
    font-size: 12px;
  }

  #ff-completion-modal
  .ff-completion-actions {
    flex-direction: row;

    max-width: 480px;
  }

  #ff-completion-modal
  .ff-completion-cta {
    flex: 1;

    min-height: 44px;

    padding: 10px 14px;

    font-size: 11px;
  }

  #ff-completion-modal
  .ff-completion-note {
    margin-top: 8px;

    font-size: 11px;
  }

}}
  /* ==========================================
   FLOATING BACK TO FOYER
========================================== */

#ff-floating-back {
  position: fixed !important;

  top: 18px !important;
  left: 18px !important;

  z-index: 999999 !important;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 12px;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;

  background: rgba(24,13,40,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: rgba(255,255,255,.85);

  font-family: "proxima-nova", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .2s ease,
    background .2s ease,
    color .2s ease;
}

#ff-floating-back.ff-floating-back-visible {
  opacity: .72;
  visibility: visible;
  pointer-events: auto;
}

#ff-floating-back:hover {
  opacity: 1;
  background: rgba(24,13,40,.78);
  color: #fff;
}

#ff-floating-back .ff-floating-back-arrow {
  font-size: 13px;
  line-height: 1;
}
  @media screen and (max-width: 950px)
       and (orientation: landscape)
       and (max-height: 767px) {

  #ff-floating-back {
    top: 8px !important;
    left: 8px !important;

    padding: 6px 9px;

    font-size: 8px;

    background: rgba(24,13,40,.4);
  }

  #ff-floating-back .ff-floating-back-arrow {
    font-size: 10px;
  }

}
  /* ==========================================
   FLOATING BACK TO FOYER — FINAL OVERRIDE
========================================== */

#ff-floating-back {
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;

  z-index: 9999999 !important;

  display: none !important;

  align-items: center !important;
  gap: 6px !important;

  padding: 8px 12px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;

  background: rgba(24,13,40,.55) !important;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  color: rgba(255,255,255,.9) !important;

  font-family: "proxima-nova", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .05em !important;

  cursor: pointer !important;
}

#ff-floating-back.ff-floating-back-visible {
  display: inline-flex !important;
  opacity: .72 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#ff-floating-back:hover {
  opacity: 1 !important;
  background: rgba(24,13,40,.82) !important;
}

#ff-floating-back .ff-floating-back-arrow {
  font-size: 13px !important;
  line-height: 1 !important;
}

@media screen and (max-width: 950px)
       and (orientation: landscape)
       and (max-height: 767px) {

  #ff-floating-back {
    top: 8px !important;
    left: 8px !important;

    padding: 6px 9px !important;

    font-size: 8px !important;
  }

  #ff-floating-back .ff-floating-back-arrow {
    font-size: 10px !important;
  }

}
  /* ==========================================
   BACK TO FOYER — ALWAYS VISIBLE IN ROOM
========================================== */

#furkin-foyer .ff-story.ff-story-open .ff-story-close {
  position: fixed !important;

  top: 195px !important;
  left: 18px !important;

  z-index: 999999 !important;

  background: rgba(24,13,40,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  color: rgba(255,255,255,.88) !important;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: .78;

  transition:
    opacity .2s ease,
    background .2s ease;
}

#furkin-foyer .ff-story.ff-story-open .ff-story-close:hover {
  opacity: 1;

  background: rgba(24,13,40,.8) !important;
}
  @media screen and (max-width: 950px)
       and (orientation: landscape)
       and (max-height: 767px) {

 #furkin-foyer .ff-story.ff-story-open .ff-story-close {
  top: auto !important;
  bottom: 12px !important;
  left: 10px !important;

  padding: 6px 9px !important;

  font-size: 8px !important;
}
}
/* FOYER INTRO — GIVEAWAY SUBHEAD */

#furkin-foyer .ff-foyer-intro-giveaway {
  font-family: "proxima-nova", sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  text-align: center;
  margin: 12px auto 18px;
}
/* PROGRESS POP-UP — YELLOW QUOTE LINK */

#furkin-foyer #ff-quote-reveal a {
  color: #f6bf00 !important;
}