/*
  Overriding or expanding novel's default styles
*/

.novel-page {
  font: 20px Courier;
  font-weight: 700;
}

.novel-passage-cursive {
  font-style: italic;
}

.novel-character {
  width: 384px;
  height: 384px;
}

.novel-textbox {
  font: 28px NovelFont;
}

.novel-label {
  font: 20px NovelFont;
  height: 24px;
  padding: 4px 0 6px;
}

.novel-messages {
  max-width: 620px;
}

.novel-message-smiling {
  color: lightgreen;
}

.novel-message-victory {
  color: pink;
}

.novel-select-option {
  font: 24px NovelFont;
}

.novel-label-of-Raven {
  color: rgb(143, 182, 255);
}

.novel-label-of-Kestrel {
  color: rgb(255, 128, 111);
}

.novel-textbox-of-Raven {
  color: rgb(196, 227, 239);
}

.novel-textbox-of-Kestrel {
  color: rgb(243, 202, 184);
}

.novel-textbox-of-Innkeeper {
  color: rgb(200, 200, 200);
}

.novel-textbox-note {
  color: rgb(200, 200, 200);
}

/*
  Other styles
*/

body {
  background-color: #222;
}

#container {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#game {
  position: relative;
  background-color: #777;
  min-width: 1280px;
  min-height: 800px;
}

.screen {
  position: absolute;
  inset: 0;
  transition: opacity 1s ease;
  background-size: contain;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.clickable {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  border-radius: 50%;
  /* border: 1px solid #00f; */
}

.novel-watched {
  cursor: pointer;
}

.novel-watched::after {
  content: '';
  width: min(65%, 150px);
  height: min(65%, 150px);
  border-radius: 50%;
  transition: all 0.5s ease;
  transition-property: width, height, backdrop-filter, opacity;
}

.novel-watched:hover::after {
  width: min(100%, 200px);
  height: min(100%, 200px);
  backdrop-filter: brightness(1.5) contrast(1.2);
}

@keyframes highlight {
  0% { backdrop-filter: brightness(1) contrast(1); }
  40% { backdrop-filter: brightness(1.5) contrast(1.2); }
  80% { backdrop-filter: brightness(1) contrast(1); }
}

.novel-watched:not(:hover)::after {
  animation-name: highlight;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-delay: 0.5s;
}

.novel-watched-clicked::after,
.novel-watched-clicked-other::after {
  opacity: 0;
}

/*
  Fonts
*/

@font-face {
	font-family: NovelFont;
	src: url('./font/Inglobal-Bold.ttf');
}