/* Level 09: true blackout background and independent illustrated PNG assets. */
#level09Screen .l9-room {
  background-image: url("assets/level09/cafe-night-blackout.png");
  background-position: center;
  background-size: cover;
}

#level09Screen .l9-darkness {
  background: radial-gradient(circle 90px at var(--light-x) var(--light-y),
    rgba(5, 13, 20, .03) 0 54%,
    rgba(2, 7, 13, .55) 76%,
    rgba(0, 3, 8, .96) 100%);
}

#level09Screen .l9-items-layer {
  mask-image: radial-gradient(circle 90px at var(--light-x) var(--light-y), #000 0 72%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle 90px at var(--light-x) var(--light-y), #000 0 72%, transparent 100%);
}

#level09Screen .l9-item,
#level09Screen .l9-clue {
  background: transparent;
  border: 0;
  padding: 0;
}

#level09Screen .l9-item img,
#level09Screen .l9-clue img,
#level09Screen .l9-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

#level09Screen .l9-item {
  width: 62px;
  height: 62px;
}

#level09Screen .l9-item.unsafe {
  filter: drop-shadow(0 4px 4px #000) saturate(.78);
}

#level09Screen .l9-clue {
  width: 58px;
  height: 58px;
  opacity: .78;
}

#level09Screen .l9-clue.manager-photo { width: 48px; height: 58px; }
#level09Screen .l9-clue.apron-shadow { width: 48px; height: 62px; }
#level09Screen .l9-clue.pumpkin-prop { width: 52px; height: 52px; }
#level09Screen .l9-clue.cat-shadow { width: 64px; height: 52px; }
#level09Screen .l9-clue.spider-prop { width: 54px; height: 92px; opacity: 1; filter: brightness(1.35) drop-shadow(0 3px 5px #000); }
#level09Screen .l9-clue.cat-shadow img { filter: drop-shadow(0 0 7px #f7b53c); }

#level09Screen .l9-items-layer.scare-active {
  mask-image: radial-gradient(circle 220px at var(--light-x) var(--light-y), #000 0 92%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle 220px at var(--light-x) var(--light-y), #000 0 92%, transparent 100%);
}

#level09Screen .l9-items-layer.scare-active .l9-item,
#level09Screen .l9-items-layer.scare-active .l9-clue:not(.scare-now) {
  opacity: 0;
}

#level09Screen .l9-clue.scare-now {
  z-index: 9;
  opacity: 1;
  animation: l9-one-time-scare .9s cubic-bezier(.18,.8,.2,1) both;
  transform-origin: center;
}

@keyframes l9-one-time-scare {
  0% { transform: scale(.9); filter: brightness(.75); }
  24% { transform: scale(3.35) rotate(-3deg); filter: brightness(1.45) drop-shadow(0 12px 20px #000); }
  58% { transform: scale(2.75) rotate(2deg); filter: brightness(1.2) drop-shadow(0 10px 16px #000); }
  100% { transform: scale(1); }
}

#level09Screen .l9-slot {
  min-width: 0;
  gap: 1px;
}

#level09Screen .l9-slot img {
  width: 43px;
  height: 43px;
  filter: grayscale(1) brightness(.55);
}

#level09Screen .l9-slot.found img {
  filter: none;
}

@media (max-width: 390px), (max-height: 700px) {
  #level09Screen .l9-item { width: 60px; height: 60px; }
  #level09Screen .l9-clue:not(.scare-now) { transform: scale(.88); transform-origin: top left; }
  #level09Screen .l9-slot img { width: 36px; height: 36px; }
}