/* messenger - DMC 3 mission title font USED FOR HEADER */
@font-face {
    font-family: 'Messenger';
    src: url('/fonts/MessengerW00Regular.ttf');
}

/* new cinema - DMC5 subtitles font USED FOR BODY TEXT */
@font-face {
  font-family: 'New Cinema';
  src: url('/fonts/FOT-NewCinemaAStd-D.otf');
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}


/* 3D in front */
canvas {
  display: block;
  position: absolute;
  z-index: 2;
  background-color: transparent;
  pointer-events: none;
}

/* bg images in the back */
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
  z-index: 0;
  pointer-events: none;
  will-change: opacity;
}

.background-image.active {
  opacity: 1;
  pointer-events: auto;
}

/* floor png - set in front of bg image and at the bottom of screen so 3D models standing on it/walking on it */
.floor-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.floor-image {
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* text box for each section - should keep text in box and be scrollable */
.text-container {
  position: absolute;
  bottom: 40%;
  left: 30%;
  width: 40%;
  max-height: 50vh;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.7);
  font-family: 'New Cinema';
  color: white;
  border-radius: 5px;
  overflow-y: auto;
  z-index: 10;
  user-select: text;
  cursor: pointer;
  transition: box-shadow 0.3s ease, z-index 0.3s ease;
}

/* header diff text */
.text-container h1 {
  text-align: center;
  font-family: 'Messenger';
  font-style: italic;
}

/* office text - moved to the right, inline style wasnt working in html */
.text-container.office-text {
  left: 55%;
  bottom: 40%;
  width: 40%;
  height: 45%;
}

.text-container:focus,
.text-container.active {
  z-index: 100;
  box-shadow: 0 0 10px rgba(133, 0, 0, 0.5);
  outline: none;
}

.text-container::-webkit-scrollbar {
  width: 8px;
}

.text-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.text-container::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.2);
}

/* browsers without `::-webkit-scrollbar-*` support */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #6d7c77 #cfd7c7;
    }
}

/* speech bubbles for NPCs */
.speech-bubble {
    position: absolute;
    background-color: rgb(56, 0, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 10px;
    font-family: 'New Cinema';
    max-width: 300px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 20;
}

.speech-bubble.active {
    opacity: 1;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: rgba(56, 0, 0, 0.9) transparent;
}

#bgMusic {
  display: none;
}

.interactive-bg-1 { background-image: url('/shrine/dmcassets/entry.png'); opacity: 1; }
.interactive-bg-2 { background-image: url('/shrine/dmcassets/office.png'); }
.npc-bg-1 { background-image: url('/shrine/dmcassets/DemonStairway.jpg'); }
.npc-bg-2 { background-image: url('/shrine/dmcassets/DemonPlateau.jpg'); }
.npc-bg-3 { background-image: url('/shrine/dmcassets/CorruptedAmpitheatre.jpg'); }
.npc-bg-4 { background-image: url('/shrine/dmcassets/CorruptedLibrary.jpg'); }
.npc-bg-5 { background-image: url('/shrine/dmcassets/CorruptedStreet.jpg'); }
.npc-bg-6 { background-image: url('/shrine/dmcassets/DemonNest.jpg'); }