:root {
  --disabled-color: #a5a5a5;
  --ui-bg: rgba(0, 101, 21, 0.56); /*rgba(0, 95, 20, 0.42);*/
  --ui-bg-hover: rgba(75, 224, 135, 0.6);
  --ui-gradient-hover: linear-gradient(45deg, var(--ui-bg), var(--ui-bg-hover));
  --fadeTime: .25s;
  --ui-shadow: #250000;
  --text-shadow: black;
  --border-highlight: rgb(251, 174, 34);
  --border-shadow: rgb(185, 87, 22);
  --regular-font: 'Asul', 'Song Myung', 'Material Icons', serif;
  /*--regular-font: 'Laila', 'Song Myung', 'Material Icons', serif;*/
  --fancy-font: 'Blackwood', 'Song Myung', 'Material Icons', serif;
  /*--fancy-font: 'UnifrakturCook', 'Song Myung', serif;*/
  --shadow: 
            0px 2px var(--text-shadow), 0px -2px var(--text-shadow), 2px 0px var(--text-shadow), -2px 0px var(--text-shadow), 2px 2px var(--text-shadow), 2px -2px var(--text-shadow), -2px 2px var(--text-shadow), -2px -2px var(--text-shadow), 4px 4px #081f00;
            /*0px  1px var(--text-shadow),
            0px -1px var(--text-shadow),
            1px  0px var(--text-shadow),
           -1px  0px var(--text-shadow),
            1px  1px var(--text-shadow),
            1px -1px var(--text-shadow),
           -1px  1px var(--text-shadow),
           -1px -1px var(--text-shadow),
            4px  4px #081f00
          ;*/
  --button-deco:
                 -10px -10px 0 -6px var(--border-highlight),
                  10px  10px 0 -6px var(--border-shadow);
  --sepia-blur: sepia(1) saturate(5) hue-rotate(355deg) blur(10px);
  --sepia-regular: sepia(1) saturate(5) hue-rotate(355deg);
  --gallery-locked: rgba(16, 16, 16, 0.88);
}

@font-face {
  font-family: 'Blackwood';
  src: url(./fnt/blackwood_castle.ttf);
}


body * {
  font-family: var(--regular-font);
}

.portrait-name-text {
  font-family: var(--fancy-font);
}

.hud-header {
  font-size: 3rem;
  padding-left: 2rem;
  text-shadow: var(--shadow);
  border-bottom: 3px solid var(--border-highlight);
  line-height: 4.3rem;
  box-shadow: 0px 3px 0px 0px var(--border-shadow),
              0px 0px 11px 8px var(--ui-shadow);
}

.main-hud-button {
  font-size: 3rem;
  text-shadow: var(--shadow);
}

.dialogue-box {
  position: absolute;
  z-index: 100;
  bottom: 0px;
  left: 0px;
  width: 1920px;
  height: 190px;
  background: var(--ui-bg);
  border-top: 3px solid var(--border-shadow);
  box-shadow: 0 -3px var(--border-highlight),
              0px 0px 11px 8px var(--ui-shadow);
}

.title .dialogue-box {
  height: 200px;
  border: none;
  background: none;
  box-shadow: none;
}

.diary .dialogue-box {
  bottom: auto;
  top: 150px;
  height: 840px;
  background: #46080880;
  border-bottom: 3px solid var(--border-highlight);
  box-shadow: 0 -3px var(--border-highlight), 0 3px var(--border-shadow), 0px 0px 11px 8px var(--ui-shadow);
}

.dialogue-text {
  font-size: 2.5rem;
  text-shadow: var(--shadow);
  line-height: 3.25rem;
  left: 450px;
  width: 1400px;
  top: 20px;
}

.koKO .title .dialogue-text,
.title .dialogue-text {
    font-family: var(--fancy-font);
    font-size: 7rem;
    left: 50px;
}

.diary .dialogue-text {
  left: 100px;
  width: 1720px;
  top: 60px;
}

.narrator .dialogue-text {
  left: 200px;
  width: 1530px;
}

.koKO .fx .dialogue-text,
.fx .dialogue-text {
  font-size: 4rem;
  line-height: 4.75rem
}

.portrait-name-body {
    bottom: 190px;
    left: 340px;
}

.portrait-name-text {
  font-size: 5rem;
  text-shadow: var(--shadow);
}

.main-hud-button.disabled {
  color: var(--disabled-color);
}

.main-hud-button .button-description {
  font-size: 2rem;
  width: 360px;
  right: 0;
  text-align: right;
  padding: 0 10px;
}

.option-body {
  border-top: 3px solid var(--border-shadow);
  border-left: 3px solid var(--border-shadow);
  border-right: 3px solid var(--border-highlight);
  border-bottom: 3px solid var(--border-highlight);
  box-shadow:
               3px  3px var(--border-shadow),
              -3px -3px var(--border-highlight),
               3px -3px var(--border-shadow),
              -3px  3px var(--border-shadow),
               5px  5px 11px var(--ui-shadow);
  bottom: 50px;
  right: 40px;
  width: 830px;
  top: auto;
  left: auto;
  animation: pop-up .25s ease-out;
}

.option-body ul {
  padding: 0;
}

.input-submit-button,
.option-body li,
.big-button {
  white-space: pre-line;
  font-size: 2.75rem;
  text-shadow: var(--shadow);
  padding: 10px;
  box-shadow: var(--button-deco);
}

.base-loadSlot,
.base-saveSlot {
  padding: 1rem;
  text-shadow: var(--shadow);
  box-shadow: var(--button-deco);
  line-height: 3rem;
}

.gallery-item {
  box-shadow: var(--button-deco),
              10px 10px 7px var(--ui-shadow);
}
.gallery-item:hover {
  box-shadow: var(--button-deco),
              0 0 0 8px var(--ui-bg-hover),
              10px 10px 7px var(--ui-shadow);
}

.gallery-item.locked,
.gallery-item.locked:hover {
 box-shadow: 0 0 0 6px black;
}

.gallery-button {
  background-size: contain;
  box-shadow: 
             -10px  10px 0 -6px var(--border-highlight),
              10px -10px 0 -6px var(--border-shadow),
              10px 10px 7px var(--ui-shadow);
}

.gallery-button.base-label {
  filter: brightness(0);
  box-shadow: 0 0 0 6px black;
  background-color: transparent;
}

.input-submit-button:hover,
.option-body li:hover,
.base-button:hover,
.base-loadSlot:hover,
.base-saveSlot:hover {
  background: var(--ui-gradient-hover);
}

.gallery-button:hover {
  background-size: contain;
  background-color: var(--ui-bg-hover);
}

.base-loadSlot.empty-slot,
.base-loadSlot:hover.empty-slot {
  background: #273a30;
  cursor: auto;
  box-shadow: none;
  opacity: .5;
}

.dialogue-layer.wait-for-click::after {
  font-size: 3rem;
  right: 5px;
  bottom: -15px;
  content: "\eb4c";
  text-shadow: var(--shadow);
  animation-name: blink;
  animation-duration: .75s; /*2s;*/
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}

.diary.dialogue-layer.wait-for-click::after {
  bottom: 85px;
}

.portrait-body {
  bottom: 0;
  left: 0;
}

.portrait-picture {
    height: 375px;
    width: 355px;
    filter: drop-shadow(5px 0px 0 white)
            drop-shadow(-5px 0px 0 white)
            drop-shadow(0px -5px 0 white)
            drop-shadow(5px 5px 4px var(--ui-shadow));
}

.slots-container {
  border-top: solid 4px var(--border-highlight);
  border-bottom: solid 4px var(--border-shadow);
}

.save-screen-container {
  animation: fade-in .25s ease-out;
  background-color: black;
}

.save-screen-cover {
  background: black;
  background-image: url(./bg/inn.jpg);
  filter: var(--sepia-blur);
  /*border: 3px solid var(--border-shadow);*/
  /*border-bottom-color: var(--border-highlight);*/
  /*border-right-color: var(--border-highlight);*/
}

.save-screen-title {
  font-family: var(--fancy-font);
  font-size: 5rem;
  padding-left: 3rem;
  text-shadow: var(--shadow);
  background: none;
}


.input-box.name-input {
  animation: pop-up .25s ease-out;
  background: transparent;
  top: 20px;
  left: auto;
  right: 0;
  width: 1400px;
}

.name-input .input-title {
  text-shadow: var(--shadow);
  font-size: 6rem;
  font-family: var(--fancy-font);
}

.name-input input {
  margin-top: 220px;
  font-size: 6rem;
  box-shadow: var(--button-deco), 20px 20px 40px var(--ui-shadow);
  border: 0;
  background-color: #052506;
}

.name-input .input-submit-button {
  font-size: 4rem;
  margin-top: 260px;
  box-shadow: var(--button-deco), 20px 20px 40px var(--ui-shadow);
}

.game-app.fadeOut .room-background,
.game-app.fadeOut .cast-container {
  opacity: 0;
  transition: opacity linear var(--fadeTime);
}
.game-app.fadeIn .room-background,
.game-app.fadeIn .cast-container {
  opacity: 1;
  transition: opacity linear var(--fadeTime);
}


.game-app.splash,
.game-app.collide {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

.game-app.collideDelay {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  animation-delay: 1s;
}

.game-app.gallery-effect .full-body-character {
  filter: drop-shadow(5px 5px 4px var(--ui-shadow));
}
.game-app.gallery-effect-flip .full-body-character {
  filter: drop-shadow(-5px 5px 4px var(--ui-shadow));
}

.label-credits {
    white-space: pre;
    text-align: center;
    text-shadow: var(--shadow);
    font-size: 2rem;
    box-shadow: var(--button-deco);
    line-height: 3rem;
}


.koKO .dialogue-text {
  font-size: 2.25rem;
  line-height: 2.75rem;
  top: 10px;
}


@keyframes shake {
  10%, 90% {transform: translate(-4px, 0);}
  20%, 80% {transform: translate(6px, 0);}
  30%, 50%, 70% {transform: translate(-8px, 0);}
  40%, 60% {transform: translate(8px, 0);}
}

@keyframes blink {
  from {color: var(--border-highlight);}
  to {color: var(--border-shadow);}
/*  0% {opacity: 0.5; color: var(--border-highlight);}
  25% {opacity: 1; color: var(--border-highlight);}
  50% {opacity: 0.5; color: var(--border-shadow);}
  100% {opacity: 1; color: var(--border-shadow);}*/
}

@keyframes fade-in {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes pop-down {
  from {
    opacity: 0;
    transform: translate(0, -100%);
    transform-origin: 0% 0%;
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
    transform-origin: 0% 0%;
  }
}

@keyframes pop-up {
  from {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: 100% 100%;
  }
  to {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 100% 100%;
  }
}