/**
 * ===========================
 * General Styling
 * ===========================
**/

/* General Style */
body {
}

/* Simple Button styles*/
button {
}

/* Simple Button Style on Hover */
button:hover {
}

/* General Styling for Menu Screens */
[data-screen] {
}

/**
 * ===========================
 * Main Menu Styling
 * ===========================
**/

/* Main Menu Styling */
[data-screen="main"] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 100%;
  height: 100%;
  background-image: url(../assets/gallery/16.webp);
  background-color: initial;
}

/* Main Menu Buttons Styling */
[data-screen="main"] button {
  min-width: 10vw;
  border: 0.125em solid #ffa6c9;
  cursor: pointer;
}
[data-screen="main"] button:hover {
  color: #ffffff;
  background-color: #ffa6c940;
}

/**
 * ===========================
 * Save and Load Menus Styling
 * ===========================
**/

/* Slots Style */
[data-component="save-slot"] figure {
}

/* Slot's Image Style */
[data-component="save-slot"] img {
}

/* Slots Title Style */
[data-component="save-slot"] figcaption {
}

/* Slots Delete Button Style */
[data-component="save-slot"] button {
}

/**
 * ===========================
 * Game Elements Styling
 * ===========================
**/

/* Choice Buttons style */
[data-component="choice-container"] button {
}

/* Choice Button Style on Hover */
[data-component="choice-container"] button:hover {
}

/* Text Box styling */
[data-component="text-box"] {
  min-height: 15%;
  max-height: 15%;
}

/* Character Name Style */
[data-ui="who"] {
}

[data-ui="gallery"] > figure {
  color: #ffffff;
}

/* Style for Centered Text */
[data-component="centered-dialog"] {
  color: #ffffff;
}

/* Character Images Styles */
[data-screen="game"] [data-character] {
}

/* Other Images Styles */
[data-screen="game"] [data-image] {
}

[data-screen="language-selection"] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 100%;
  height: 100%;
  background-image: url(../assets/gallery/102.webp);
  background-color: initial;
}

visual-novel {
  background: black;
}
/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/

/* These styles are applied to the Mobile version of the Quick Menu */

/* Quick Menu Style */
[data-component="quick-menu"] {
  background-color: rgba(0, 0, 0, 0.6);
  max-width: calc(max(50%, 1000px));
  align-self: center;
}

/* Quick Menu Buttons Style */
[data-component="quick-menu"] span {
}

/* Quick Menu Buttons Style on Hover */
[data-component="quick-menu"] span:hover {
}

/* Quick Menu Buttons Icon Style */
[data-component="quick-menu"] > span > .fa {
}

/**
 * ===========================
 * Range Styling
 * ===========================
**/

/* Use the background property to set a color for these */
input[type="range"]:focus::-webkit-slider-runnable-track {
}

input[type="range"]::-webkit-slider-runnable-track {
}

input[type="range"]:focus::-ms-fill-upper {
}

input[type="range"]:focus::-ms-fill-lower {
}

input[type="range"]::-moz-range-track {
}

input[type="range"]::-ms-fill-lower {
}

input[type="range"]::-ms-fill-upper {
}

/** Medium Screens, Phablets (601px) **/
@media screen and (min-width: 37.56255em) {
  /* Styles for the desktop version of the Quick Menu */

  /* Quick Menu Style */
  [data-component="quick-menu"] {
  }

  /* Quick Menu Buttons Style */
  [data-component="quick-menu"] span {
  }

  /* Quick Menu Buttons Style on Hover */
  [data-component="quick-menu"] span:hover {
  }
}

/** Medium Devices, Tablets (992px)**/
@media screen and (min-width: 62em) {
}

/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
@media screen and (min-width: 75em) {
}

/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
@media screen and (min-width: 120em) {
}

/** Retina Screen , Large Devices, Wide Screens(2560px) **/
@media screen and (min-width: 160em) {
}

/** 4k Screens, Large Devices, Wide Screens (3840px) **/
@media screen and (min-width: 240em) {
}

/** 5k Screens, Large Devices, Wide Screens (5000px) **/
@media screen and (min-width: 312.5em) {
}

/** 8k Screens, Large Devices, Wide Screens (8000px) **/
@media screen and (min-width: 500em) {
}

.left_80 {
  left: -80% !important;
}

.left_70 {
  left: -70% !important;
}

.left_60 {
  left: -60% !important;
}

.left_50 {
  left: -50% !important;
}

.left_45 {
  left: -45% !important;
}

.left_40 {
  left: -40% !important;
}

.left_30 {
  left: -30% !important;
}

.left_20 {
  left: -20% !important;
}

.left_15 {
  left: -15% !important;
}

.left_10 {
  left: -10% !important;
}

.right_10 {
  left: 10% !important;
}

.right_15 {
  left: 15% !important;
}

.right_20 {
  left: 20% !important;
}

.right_30 {
  left: 30% !important;
}

.right_40 {
  left: 40% !important;
}

.right_45 {
  left: 45% !important;
}

.right_50 {
  left: 50% !important;
}

.right_60 {
  left: 60% !important;
}

.right_70 {
  left: 70% !important;
}

.right_80 {
  left: 80% !important;
}

.closeup {
  max-height: 100% !important;
  height: 100% !important;
}

.trinket {
  height: 20vh !important;
  max-width: 20vw !important;
  max-height: 20vh !important;
  top: 30vh !important;
  border-radius: 20%;
  border: 2px solid gold;
}

.trinket_medium {
  height: 30vh !important;
  max-width: 30vw !important;
  max-height: 30vh !important;
  top: 20vh !important;
  border-radius: 20%;
  border: 2px solid rgb(248, 136, 211);
}

.trinket_big {
  height: 50vh !important;
  max-width: 50vw !important;
  max-height: 50vh !important;
  top: 20vh !important;
  border-radius: 20%;
  border: 2px solid rgb(252, 56, 56);
}

.thought {
  max-width: 20vw !important;
  max-height: 20vh !important;
  top: 30vh !important;
  border-radius: 20%;
  border: 2px solid rgb(248, 136, 211);
}

.food_row_0 {
  max-width: 17vw !important;
  max-height: 17vh !important;
  top: -75vh !important;
  border-radius: 20%;
  border: 2px solid #ffa5a5;
}

.food_row_1 {
  max-width: 17vw !important;
  max-height: 17vh !important;
  top: -55vh !important;
  border-radius: 20%;
  border: 2px solid #ffa5a5;
}

.food_row_2 {
  max-width: 17vw !important;
  max-height: 17vh !important;
  top: -35vh !important;
  border-radius: 20%;
  border: 2px solid #ffa5a5;
}

.food_row_3 {
  max-width: 17vw !important;
  max-height: 17vh !important;
  top: -15vh !important;
  border-radius: 20%;
  border: 2px solid #ffa5a5;
}

.food_row_4 {
  max-width: 17vw !important;
  max-height: 17vh !important;
  top: 5vh !important;
  border-radius: 20%;
  border: 2px solid #ffa5a5;
}

.food_row_5 {
  max-width: 17vw !important;
  max-height: 17vh !important;
  top: 25vh !important;
  border-radius: 20%;
  border: 2px solid #ffa5a5;
}

.food_row_6 {
  max-width: 17vw !important;
  max-height: 17vh !important;
  top: 45vh !important;
  border-radius: 20%;
  border: 2px solid #ffa5a5;
}

.spike_row_med {
  max-width: 18vw !important;
  max-height: 18vh !important;
  top: 25vh !important;
  border-radius: 20%;
  border: 2px solid rgba(20, 0, 51);
}

.spike_row_low {
  max-width: 18vw !important;
  max-height: 18vh !important;
  top: 50vh !important;
  border-radius: 20%;
  border: 2px solid rgb(20, 0, 51);
}

text-box[mode="nvl"] {
  height: calc(100% - 2.5rem);
}

text-box[mode="adv"] {
  background-color: rgba(0, 0, 0, 0.6);
  max-width: calc(max(50%, 1000px));
  align-self: center;
}

.tight_choice > div > button {
  margin: 0.2em !important;
}

.tight_long_choice {
  width: 100% !important;
}

.standing_on_text_bar {
  bottom: calc(15% + 25px) !important;
}

.invisible {
  display: none;
}

.halftransparent {
  opacity: 0.7;
}

.in_front_of_effect {
  z-index: 3;
}

.theater_char {
  z-index: 4;
}

.theater_bg {
  height: 90vh;
  max-width: 90vw;
  opacity: 0.7 !important;
  border-radius: 50%;
}

.tall {
  max-height: 100vh !important;
  height: 100vh !important;
}

.taller {
  max-height: 90vh !important;
  height: 90vh !important;
}

.boulder {
  max-width: 20vw !important;
  max-height: 20vh !important;
  top: 55vh !important;
}

.slime {
  bottom: 20% !important;
  max-height: 25vh !important;
}

/* UI */
[data-component="loading-screen"] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 100%;
  height: 100%;
  background-image: url(../assets/gallery/51.webp);
  background-color: initial;
}

[data-component="loading-screen"] > div {
  width: 100%;
  background-color: #ffffff90;
}

[data-component="save-screen"],
[data-component="load-screen"] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 100%;
  height: 100%;
  background-image: url(../assets/gallery/69.webp);
  background-color: initial;
}

[data-component="settings-screen"] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 100%;
  height: 100%;
  background-image: url(../assets/gallery/71.webp);
  background-color: initial;
}

[data-component="help-screen"] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 100%;
  height: 100%;
  background-image: url(../assets/gallery/46.webp);
  background-color: initial;
}

[data-content="help"] {
  background-color: #ffffff90;
}

[data-component="gallery-screen"] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 100%;
  height: 100%;
  background-image: url(../assets/gallery/107.webp);
  background-color: initial;
}

[data-component="about-screen"] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 100%;
  height: 100%;
  background-image: url(../assets/gallery/52.webp);
  background-color: initial;
}

[data-content="audio-settings"] {
  display: none;
}

.about_content {
  text-align: left;
  background-color: #ffffff90;
  margin: 2vh 15vw;
  padding: 2rem;
}

quick-menu > button {
  color: hsla(0, 0%, 100%, 0.15);
}

.eula_nvl {
  overflow-x: visible;
}

.centered_dark {
  color: #000;
}

.contact_url {
  color: #ffa500;
}

.shield_0 {
  max-width: 80vw !important;
  height: 75vh !important;
  top: 20vh !important;
}

.shield_1 {
  max-width: 40vw !important;
  max-height: 40vh !important;
  top: -20vh !important;
  left: -20vw !important;
}

.shield_2 {
  max-width: 80vw !important;
  height: 75vh !important;
  top: 20vh !important;
}

.shield_3 {
  max-width: 25vw !important;
  max-height: 25vh !important;
  top: 20vh !important;
}

.achievement_bg {
  text-align: left;
}

.achievement_title {
  color: #dddddd;
  font-size: 1rem;
}

.achievement_content {
  font-size: 1.5rem;
}

.achievement_bronze {
  background: linear-gradient(to right, #cd7f32 0%, #b06929 100%);
}

.achievement_silver {
  background: linear-gradient(to right, #c0c0c0 0%, #808080 100%);
}

.achievement_gold {
  background: linear-gradient(to right, #ffd700 0%, #daa520 100%);
}

.achievement_platinum {
  background-image: linear-gradient(
    105.5deg,
    rgba(31, 212, 248, 1) 11%,
    rgba(218, 15, 183, 1) 74.9%
  );
}

.achievement_orange {
  background-image: linear-gradient(
    109.6deg,
    rgba(255, 174, 0, 1) 11.2%,
    rgba(255, 0, 0, 1) 100.2%
  );
}

.achievement_purple {
  background-color: #21d4fd;
  background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
}

.achievement_purple_dark {
  background: #c33764;
  background: -webkit-linear-gradient(to right, #1d2671, #c33764);
  background: linear-gradient(to right, #1d2671, #c33764);
}

.achievement_blue {
  background: #0575e6;
  background: -webkit-linear-gradient(to right, #021b79, #0575e6);
  background: linear-gradient(to right, #021b79, #0575e6);
}

.achievement_green_yellow {
  color: #000000;
  background: #dce35b;
  background: -webkit-linear-gradient(to right, #45b649, #dce35b);
  background: linear-gradient(to right, #45b649, #dce35b);
}

.achievement_pink {
  /**/
  background: #ee0979;
  background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);
  background: linear-gradient(to right, #ff6a00, #ee0979);
}
.achievement_green {
  color: #000000;
  background: #a8ff78; /**/
  background: -webkit-linear-gradient(to right, #78ffd6, #a8ff78);
  background: linear-gradient(to right, #78ffd6, #a8ff78);
}

.view_full {
  height: 100vh;
  border-radius: 1%;
}

.full_overlay {
  height: 100vh;
  max-width: 100vw;
}

/* tail touch */

:root {
  --clr-neon: hsl(317 100% 54%);
  --clr-bg: hsl(317 100% 50%);
}

.tail_touch_0 {
}

.tail_touch_1 {
  border: 2px solid deeppink;
}

.tail_touch_2 {
  background: deeppink;
  font-style: italic;
}

.tail_touch_2:hover {
  background: #ee0979;
  background: -webkit-linear-gradient(to right, #ff93a2, #ee0979);
  background: linear-gradient(to right, #ff93a2, #ee0979);
}

.tail_touch_3 {
  background-color: #ffffff20;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: var(--clr-neon);
  border: var(--clr-neon) 0.125em solid;
  padding: 0.25em 1em;
  border-radius: 0.25em;
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
  box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
  position: relative;
}

.tail_touch_3::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 2em 0.5em var(--clr-neon);
  opacity: 0;
  background-color: var(--clr-neon);
  z-index: -1;
  transition: opacity 100ms linear;
}

.tail_touch_3:hover,
.tail_touch_3:focus {
  color: var(--clr-bg);
  text-shadow: none;
}

.tail_touch_3:hover::before,
.tail_touch_3:focus::before {
  opacity: 1;
}
.tail_touch_3:hover::after,
.tail_touch_3:focus::after {
  opacity: 1;
}

.tail_touch_4 {
  font-size: 2.5rem;
  background-color: #ffffff20;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: var(--clr-neon);
  border: var(--clr-neon) 0.125em solid;
  padding: 0.25em 1em;
  border-radius: 0.25em;
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
  box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
  position: relative;
}

.tail_touch_4::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 2em 0.5em var(--clr-neon);
  opacity: 0;
  background-color: var(--clr-neon);
  z-index: -1;
  transition: opacity 100ms linear;
}

.tail_touch_4:hover,
.tail_touch_4:focus {
  color: var(--clr-bg);
  text-shadow: none;
}

.tail_touch_4:hover::before,
.tail_touch_4:focus::before {
  opacity: 1;
}
.tail_touch_4:hover::after,
.tail_touch_4:focus::after {
  opacity: 1;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.tail_touch_5 {
  font-weight: bold;
  text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #221155 0%,
    #11bb44 25%,
    #ff2266 65%,
    #fff000 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  border: 0.25rem solid white;
}

.tail_touch_6 {
}

.logo_text {
  font-size: 2rem;
  text-align: center;
  color: #a0f5ff;
  text-shadow: 0px 0px 10px #000000;
  letter-spacing: 0.2rem;
  margin: 2rem;
  user-select: none;
}