:root {
  --dialogue-font: 'Playpen Sans', 'Material Symbols Rounded', serif;
  --ui-bg: linear-gradient(45deg, #0e1a37d9, #0c3b6f85);
  --border-color: #ff7d2f;
  --border-style: solid 4px var(--border-color);
  --border-style-thin: solid 2px var(--border-color);
  --text-shadow-color: black;
  --text-shadow: 2px 2px var(--text-shadow-color), -2px -2px var(--text-shadow-color), 2px -2px var(--text-shadow-color), -2px 2px var(--text-shadow-color), 0 2px var(--text-shadow-color), 0 -2px var(--text-shadow-color), 2px 0 var(--text-shadow-color), -2px 0 var(--text-shadow-color);

  --empty-bar-color: #000000cc;
  --base-hp-color: #355729;
  --base-sed-color: #a9389a;
}

body * {
  font-family: var(--dialogue-font);
  font-size: 40px;
}

.input-submit-button,
.base-button,
.portrait-name-text {
    font-variant: small-caps;
    font-weight: 700;
    font-size: 40px;
    text-shadow: var(--text-shadow);
}

.logo-button {
  border: var(--border-style);
  border-right: none;
}

.main-hud-button {
  font-weight: normal;
  border-bottom: var(--border-style);
  border-left: var(--border-style);
}

.main-hud-button.first-button {
  border-bottom-left-radius: 25px;
}

.main-hud-button.disabled {
  color: #ccc;
}

.button-description {
    font-variant: small-caps;
    font-weight: 700;
    right: 5px;
    bottom: -40px;
    font-size: 30px;
    color: white;
    width: 250px;
    text-align: right;
}

.game-data-label {
  border-bottom: var(--border-style);
  padding-left: 20px;
  font-variant: small-caps;
  font-weight: 700;
  text-shadow: var(--text-shadow);
}

.portrait-name-text {
  padding-left: 150px;
  padding-right: 30px;
}

 .portrait-name-body {
    left: 70px;
    /* background: #470b0bd6; */
    border: none;
    bottom: 190px;
    border-radius: 0;
    /* bottom: 212px;
    background: var(--ui-bg);
    border: var(--border-style);
    padding: 0 40px;
    text-align: left;
    height: 70px;
    border-radius: 20px 20px 0 0; */
 }

 .portrait-name-body::before {
  background: #470b0bd6;
  content: " ";
  height: 100%;
  width: 100%;
  transform: skew(190deg, 0deg);
  position: absolute;
  top: 0;
  z-index: -1;
  box-shadow: 15px 10px 11px #00000080;
 }

 .combat-layer .combat-text,
.dialogue-box {
  background: var(--ui-bg);
  border: var(--border-style);
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 50px 0 0 0;
  border-bottom: 0;
}

.dialogue-box .dialogue-text {
  color: white;
  text-shadow: var(--text-shadow);
  font-weight: 600;
  left: 230px;
  top: 20px;
  width: 1610px;
}

.narrator_l .dialogue-box,
.narrator .dialogue-box {
  background: #d35517ba;
  border: 4px solid var(--border-color);
  border-radius: 0;
  bottom: 150px;
  left: auto;
  right: -4px;
  width: 960px;
  box-shadow: 15px 20px 21px #000000;
}
.narrator_l .dialogue-box {
  right: auto;
  left: -4px;
  bottom: 460px;
}

.narrator_l .portrait-name-body,
.narrator .portrait-name-body {
  display: none;
}
.narrator_l .dialogue-text,
.narrator .dialogue-text {
    left: 50px;
    width: 820px;
}

.hero_t .dialogue-text,
.main_t .dialogue-text {
  font-style: italic;
}
.dialogue-layer.hero_t .dialogue-text::before,
.dialogue-layer.main_t .dialogue-text::before {
    content: "«";    /* "“"; */
}
.dialogue-layer.hero_t .dialogue-text::after,
.dialogue-layer.main_t .dialogue-text::after {
    content: "»";    /* "”"; */
}

.portrait-body {
  bottom: 0;
  left: 0;
  width: 260px;
  height: 350px;
  z-index: 160;
}

.game-shield {
  z-index: 4;
}
.dialogue-layer.wait-for-click::after {
  content: "\f5dd";
  bottom: 0;
  text-shadow: var(--text-shadow);
  animation: bounce 1.5s infinite;
}

/* .narrator.dialogue-layer.wait-for-click::after {
    bottom: 150px;
    right: 10px;
}
.narrator_l.dialogue-layer.wait-for-click::after {
    bottom: 460px;
    right: 980px;
} */

.option-body {
    background: var(--ui-bg);
    width: 920px;
    left: auto;
    right: 50px;
    border: var(--border-style);
    top: auto;
    bottom: 0;
    border-bottom: none;
}
.option-title {
    font-variant: small-caps;
    font-weight: 700;
    margin: 20px 20px 0 40px;
    text-shadow: var(--text-shadow);
}
.option-body li {
    margin: 10px 0;
    padding: 5px 50px;
    border: var(--border-style);
    font-variant: small-caps;
    font-weight: 700;
    text-align: left;
    text-shadow: var(--text-shadow);
}

/* Save Screen */
.save-screen-container {
    z-index: 500;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(152deg, #000000, #133e81);
}

.gallery-title {
    font-variant: small-caps;
    font-weight: 700;
    font-size: 60px;
    padding-left: 40px;
    border-bottom: var(--border-style);
    background: transparent;
    padding-top: 20px;
}

.base-deleteSlot,
.base-saveSlot,
.base-loadSlot {
  font-variant: small-caps;
  font-weight: 700;
  font-size: 30px;
  padding: 10px;
  border: var(--border-style);
  border-radius: 20px;
  box-shadow: black 10px 10px 10px;
}
.save-time-stamp {
  font-size: 20px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
}

.base-deleteSlot.empty-slot, 
.base-loadSlot.empty-slot {
  cursor: auto;
  border-color: grey;
  background-color: grey;
}

.credits-label.base-logView {
    overflow-y: scroll;
    position: absolute;
}

.log-action {
    border-top: 1px solid white;
    margin: 15px 0px;
}

.log-action.choice-action span::after {
  content: ">>>";
}

.log-actor {
    display: inline-block;
    font-variant: small-caps;
    font-weight: 700;
    text-align: right;
    width: 240px;
    vertical-align: top;
}
.log-dialogue {
    display: inline-block;
    padding-left: 30px;
    width: 1180px;
}

  /* Inputs */
.input-box {
  top: 200px;
  left: 880px;
  width: 1100px;
  background: var(--ui-bg);
  /* background: linear-gradient(102deg, #4349ff, #2a83af); */
  height: 430px;
  box-shadow: 15px 5px 16px black;
  border: 5px solid var(--border-color);
  border-radius: 20px;
}

.input-box .input-title {
  text-shadow: var(--text-shadow);
  font-weight: 700;
  font-variant: small-caps;
  border-bottom: 5px solid var(--border-color);
}
.input-box input {
    /* border-color: black;
    background: white;
    color: black; */
    font-weight: 700;
    width: 850px;
}

.input-submit-button {
    border: 5px solid var(--border-color);
    margin-top: 40px;
    margin-right: -30px;
    width: 450px;
}
  
/* Combat */
.combat-layer .combat-text {
  position: absolute;
  height: 150px;
  padding: 0 80px 0 70px;
  white-space: pre-line;
  border-radius: 0;
  text-shadow: var(--text-shadow);
}

.player-name.combat-label,
.enemy-name.combat-label {
  background: transparent;
  font-variant: small-caps;
  font-weight: 700;
  text-shadow: var(--text-shadow);
}
.enemy-name.combat-label {
  text-align: right;
}

.base-progressBar .progress-description {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  padding-left: 20px;
  margin-top: -3px;
}

.enemy-hp,
.player-hp {
  border-top: var(--border-style-thin);
}
.player-hp,
.player-experience,
.player-seduction {
  background: none;
  background-color: var(--empty-bar-color);
  border-bottom: var(--border-style-thin);
  border-right: var(--border-style);
}
.player-seduction-hud {
  background: none;
  background-color: var(--empty-bar-color);
  border: var(--border-style-thin);
  border-right: none;
  border-left: var(--border-style);
}
.enemy-hp,
.enemy-seduction {
  border-bottom: var(--border-style-thin);
  border-left: var(--border-style);
}
.enemy-hp .progressBar-progress,
.enemy-seduction .progressBar-progress {
  background: none;
  background-color: var(--empty-bar-color);
}

.enemy-hp,
.player-hp .progressBar-progress {
  background: none;
  background-color: var(--base-hp-color);
}
.enemy-seduction,
.player-seduction-hud .progressBar-progress,
.player-seduction .progressBar-progress {
  background: none;
  background-color: var(--base-sed-color);
}

.combat-button {
  border: var(--border-style);
  border-radius: 20px;
  box-shadow: 5px 5px 10px black;
  padding-top: 12px;
}


/* Combat Anims */

.enemy-hit .cast-container .enemy_h {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

.enemy-evade .cast-container .enemy_h {
  animation: miss 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

.player-seduced .cast-container .hero {
  animation: seduce-zoomIn 0.82s cubic-bezier(.36,.07,.19,.97) both,
              seduce-hue 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
.enemy-seduced .cast-container .enemy_h {
  animation: seduce-zoomOut 0.82s cubic-bezier(.36,.07,.19,.97) both,
              seduce-hue 0.82s cubic-bezier(.36,.07,.19,.97) both;
}






@keyframes bounce {
  0% {bottom: 0px; color: #852d04;}
  50% {bottom: 10px; color: #f7ad3e;}
  100% {bottom: 0px; color: #852d04;}
}

@keyframes miss {
  50% {transform: translate(100px, 0);}
}

@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 seduce-hue {
  50% {filter: sepia(1) saturate(4) hue-rotate(-95deg);}
}
@keyframes seduce-zoomOut {
  50% {transform: scale(.9,.9);}
}
@keyframes seduce-zoomIn {
  50% {transform: scale(1.1,1.1);}
}