@charset "UTF-8";


* {-webkit-font-smoothing: antialiased;}

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Medium.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Demi.ttf");
  font-weight: 600;
}

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Bold.ttf");
  font-weight: 900;
}


@media only screen and (orientation:portrait){
  #wrapper { display:none; }
  #warning-message {display:block;}
}
@media only screen and (orientation:landscape){
  #warning-message { display:none; }
}

.icon_rotate {
  position: absolute;
  filter: invert(1);
  top: 26vh;
  left: 5vh;
}

:root {
    --aspect-ratio: calc(16/9);
    --game-width: calc(100vh * var(--aspect-ratio));
    --outline:
        2px 0px 0 black,
        1px 1px 0 black,
        0px 2px 0 black,
       -1px 1px 0 black,
       -1px 0px 0 black,
      -1px -1px 0 black,
       0px -1px 0 black,
       1px -1px 0 black;
}

.talking {
  filter: brightness(1.2)
}

.sprites img {
  user-select: none;
  pointer-events: none;
}

.scene_effects {
  user-select: none;
  pointer-events: none;
}

.background {
  user-select: none;
  pointer-events: none;
}

.full-window {
    position: absolute;
    height: 100vh;
    width: var(--game-width);
}

body {
  -webkit-font-smoothing: antialiased;
    background-color: #29292e;
    margin: 0px;
    left:0;
    right:0;
    margin: auto;
    font-family: Avenir Next;
    user-select: none;
    overflow-x: hidden;
    /*     left: 50%;  /* center game window */
    /*     transform: translate(-50%, 0); */
}


.main-menu {
  display: none;
  overflow: hidden;
}

.game-menus {
    /*background-color: wheat;*/
}

.select-type-of-ui {
    position: absolute;
    left: 30vh;
}

.ui_item {
    display: none;
}

.active {
    display: block !important;
}

/* .active_menu {
    display: flex !important;
} */

.close-menu {
    background-image: url(../../static/images/interface/close.png);
    height: 6vh;
    background-repeat: no-repeat;
    width: 6vh;
    position: absolute;
    background-size: 40%;
    background-position: 47%;
    border-left: 0.1vh solid #6C6C6C;
    right: 0;
    cursor: pointer;
}

.close_game_menu {
    border-left: 0.0vh solid #6C6C6C;

    background-size: 40%;
  margin-top: 0.3vh;
}


.hide_spinner {
    display: none;
}

.overlay, .overlay_hidden, .inventory_overlay {
    transition: 0.35s;
    z-index: 1;
    visibility: hidden;
    opacity: 0.0;
    background-color: #00000060;
    position: absolute;
}

.hidden {
    display: none;
}


.dialog {
  transition: 0.7s ease;
  position: absolute;
  height: 83px;
  height: 11vh;
  width: 1167px;
  padding: 2vh 1vh;
  /* margin: auto; */
  /* border: 2px solid #00000045; */
  width: 118vh;
  /* background-color: rgb(255 255 255 / 35%); */
  /* display: none; */
  margin-left: auto;
  background: rgba(71, 71, 87, 0.4);
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 4vh;
  cursor: pointer;
  /* border-radius: 0.5vh; */
}

.name {
  font-weight: 400;
  color: white;
  font-size: 3vh;
  margin-top: -7.4vh;
  position: absolute;
  /* text-shadow: var(--outline); */
  left: 2.8vh;
  color: #FFFFFF;

/* 04 dp */
  text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.text {
  font-weight: 400;
  color: white;
  font-size: 3.5vh;
  font-size: 2.9vh;
  /* display: none; */
  margin-top: -0vh;
  margin-left: 2vh;
  font-weight: 600;
  line-height: 4vh;
  width: 91vh;
  text-shadow: 0px 6px 10px rgb(0 0 0 / 33%), 0px 1px 18px rgb(0 0 0 / 29%), 0px 3px 5px rgb(0 0 0 / 48%);
}
.blackout_all_game {
  visibility: hidden;
  opacity: 0;
  transition: 0.5s linear;
  z-index: 300500;
  background-color: black;
}

.active_blackout {
  visibility: visible;
  opacity: 1;
}

.choices {display: flex;position: absolute;flex-direction: column;bottom: 25vh;justify-content: center;margin-left: calc(1/2 *(var(--game-width) - 75vh));}

.choice-button {width: 75vh;background-color: rgba(71, 71, 87, 0.54);margin-bottom: 2vh;font-size: 2.4vh;text-align: center;cursor: pointer;padding: 1vh;/* border-radius: 0.5vh; */transition: 0.5s;box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1), 0px 2px 2px 0px rgba(0, 0, 0, 0.07), 0px 3px 1px -2px rgba(0, 0, 0, 0.06);color: white;/* border: 0.2vh solid rgba(0, 0, 0, 0.45); */text-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2);}

.choice-button:hover {/* width: 80vh; */transform: scale(1.05);filter: brightness(1.2);box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);}
.disappear  {
    animation: disappearing .5s;
    animation-fill-mode: both
}


.disappear_slow  {
    animation: disappearing 1s;
    animation-fill-mode: both
}


.disappear_delay  {
    animation: disappearing .5s;
    animation-fill-mode: both;
    animation-delay: .25s;
}

@keyframes disappearing {
    from {
        opacity:1
    }
    to {
        opacity:0
    }
}

.blackout {
  transition: 0.5s;
  background-color: black;
  opacity: 0;
}

.lightning {
  transition: 0.5s;
  background-color: white;
  opacity: 0;
}

.pink {
  transition: 0.5s;
  background-color: #ff4cc4;
  opacity: 0;
}

.active_effect {
  opacity: 1;
}

.new_sprite {
  animation: appearing .5s;
  animation-fill-mode: both
}

.new_sprite_delay {
  animation: appearing .5s;
  animation-fill-mode: both;
  animation-delay: .25s;
}

.hidden_sprite {
  opacity: 0;
}


@keyframes appearing {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}

.new_sprite_disappear {
  animation: appearing .5s;
  animation-fill-mode: both;
}

.interactive_object {
  opacity: 1.0;
  transition: 0.5s;
  position: absolute;
  cursor: pointer;
}

.unscalable_object {
  opacity: 1.0;
  transition: 0.5s;
  position: absolute;
  cursor: pointer;
}

.unscalable_object:hover {
  filter: brightness(1.2);
}

.interactive_object:hover {
  filter: brightness(1.2);
  transform: scale(1.15);
}

.hide_interactive {
  opacity: 0.0;
}

.menu {
  visibility: hidden;
  opacity: 0.0;
}

.game {
  visibility: hidden;
  opacity: 0.0;
  overflow: hidden;
}

.skip_intro {
  visibility: hidden;
  opacity: 0.0;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  width: 15vh;
  position: absolute;
  font-weight: 600;
  padding: 1vh;
  bottom: 4vh;
  right: 5vh;
  font-size: 2.5vh;
  border-radius: 1vh;
  border: #f9ffbd3b 0.3vh solid;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.skip_intro:hover {
  background-position: right center;
  width: 18vh;
}

.tabcontent, .char_tabcontent, .info_tabcontent  {
  /* flex-grow: 1; */
}

.tabcontent.visible, .char_tabcontent.visible, .info_tabcontent.visible  {
  visibility: visible;
}

.tabcontent.hidden, .char_tabcontent.hidden, .info_tabcontent.hidden {
  display: none !important;
  visibility: collapse;
}


.tablinks, .char_tablinks, .info_tablinks {
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  /* font-size: 18px; */
  font-size: 1.9vh;
  /* line-height: 25px; */
  line-height: 2.7vh;
  color: rgba(255, 255, 255, 0.8);
  background: none;
  border: none;
  /* padding: 15px 30px; */
  padding: 1.5vh 3.2vh;
}

.tablinks.active_link, .char_tablinks.active_link, .info_tablinks.active_link {
  color: white;
  background-size: contain;
  background-position: bottom -5.2vh left 0;
  background-image: linear-gradient(90.09deg, #FBA262 -5.72%, #F96F74 100.31%);
  background-repeat: no-repeat;
  transition: 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05);
}


.tab, .char_tab, .info_tab {
  margin: auto;
  width: max-content;
}