:root {
  --dialogue-font: 'Milonga', 'Material Symbols Outlined', serif;
  --ui-shadow: 7px 7px 12px #19102b80;
  --ui-bg-texture: url(./ui/texture.png);
  --ui-bg-color: rgba(98,4,42,.7);
  --ui-bg-color-solid: rgba(98,4,42,.9);
  --ui-bg-color-hover: rgba(151,44,94,.7);
  --ui-boder-color: #fff;
  --ui-border-style: var(--ui-boder-color) 10px double;
  --text-shadow: 2px 2px black, -2px -2px black, 2px -2px black, -2px 2px black, 0 2px black, 0 -2px black, 2px 0 black, -2px 0 black;
}

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

.game-shield {
  z-index: 4;
}

/* Name input */
.input-box.name-input {
  background-image: var(--ui-bg-texture);
  background-color: var(--ui-bg-color);
  border: var(--ui-border-style);
  font-size: 40px;
  box-shadow: var(--ui-shadow);
  text-shadow: var(--text-shadow);
  padding: 5px;
  left: 560px;
  top: 100px;
  width: 1310px;
  border-radius: 50px;
  height: 470px;
}  

.input-title {
  padding: 40px;
}

.input-box.name-input input {
  background: var(--ui-bg-color-solid);
  width: 1200px;
  margin-left: 40px;
}

.input-box.name-input .input-submit-button {
  right: 45px;
  bottom: 40px;
  height: 100px;
  padding: 15px;
}

/* Button */
.input-submit-button,
.option-body li,
.base-button {
  background-image: var(--ui-bg-texture);
  background-color: var(--ui-bg-color);
  border: var(--ui-border-style);
  font-size: 40px;
  box-shadow: var(--ui-shadow);
  text-shadow: var(--text-shadow);
  padding: 5px;
}

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

.logo-button {
  border-right: none;
}

.logo-button .button-description {
  bottom: -60px;
}

/* Main Hud */
.hud-layer * {
  z-index: 5;
}

.button-description {
  right: 0;
  font-size: 30px;
  width: 250px;
  text-align: right;
  margin: 5px;
  color: var(--ui-boder-color);
}

.status-bar {
  background-image: var(--ui-bg-texture);
  background-color: var(--ui-bg-color);
  box-shadow: var(--ui-shadow);
}

.main-hud-button {
  font-size: 45px;
  text-shadow: var(--text-shadow);
  background: transparent;
  border: none;
  box-shadow: none;
}
.input-submit-button:hover,
.main-hud-button:hover {
  background: var(--ui-bg-color-hover);
}

.main-hud-button.disabled {
  color: rgba(255, 255, 255, 0.514);
}

/* Dialog Box */

.dialogue-layer.wait-for-click {
  z-index: 4;
}

.inline-text-icon {
  display: inline-block;
  width: 46px;
  height: 50px;
  vertical-align: top;
  margin: 0 5px;
  /* border: 2px solid black;
  border-radius: 11px; */
}

.dialogue-box {
  background-image: var(--ui-bg-texture);
  background-color: var(--ui-bg-color);
  border: var(--ui-border-style);
  border-radius: 60px 60px 0 0;
  border-bottom: 0;
  bottom: 0;
  left: 0;
  width: 1920px;
}

.dialogue-text {
  font-size: 40px;
  text-shadow: var(--text-shadow);
}

.portrait-body {
  bottom: 10px;
  left: 15px;
  border: 5px solid white;
  border-radius: 50px;
  box-shadow: var(--ui-shadow);
  background: linear-gradient(45deg, #5d5f0a, #5c8fc5);
}

.portrait-picture {
  height: 213px;
  width: 190px;
}

.portrait-name-body {
  background: rgb(109 0 0);
  padding: 10px 40px;
  border: white 10px double;
  transform: rotate(-3deg);
  box-shadow: 5px 5px 9px #120212;
  bottom: 175px;
  left: 150px;
}

.msg .dialogue-box {
  background: transparent;
  border: none;
}

.msg .dialogue-text {
  font-size: 80px;
  top: -600px;
}

.narrator .dialogue-text {
  left: 50px;
  width: 1780px;
}

.think .dialogue-text {
  font-style: italic;
}


.creature .portrait-name-body,
.unknown .portrait-body,
.msg .portrait-body,
.msg .portrait-name-body,
.narrator .portrait-body,
.narrator .portrait-name-body {
  display: none;  
}


.dialogue-layer.wait-for-click::after {
  content: "\eb3b";
  color: white;
  text-shadow: var(--text-shadow);
  font-size: 50px;
  bottom: 15px;
  right: 30px;
  animation: spin 4s linear infinite;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  text-align: center;
}
/* CG Custom Dialogues */
[class*="idris_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="idris_sex"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="dave_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="dave_sex"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="chris_bj"].room-background ~ .dialogue-layer .portrait-body,
[class*="chris_bj"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="ethan_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="ethan_sex"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="miles_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="miles_sex"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="archer_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="archer_sex"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="duncan_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="duncan_sex"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="russell_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="russell_sex"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="monster_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="monster_sex"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="fred_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="fred_sex"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="nick_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="nick_sex"].room-background ~ .dialogue-layer .portrait-name-body,
[class*="samar_sex"].room-background ~ .dialogue-layer .portrait-body,
[class*="samar_sex"].room-background ~ .dialogue-layer .portrait-name-body {
  display: none;  
}

[class*="idris_sex"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="idris_sex"].room-background ~ .dialogue-layer.unknown .dialogue-box,
[class*="idris_sex"].room-background ~ .dialogue-layer.idris .dialogue-box,
[class*="dave_sex"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="dave_sex"].room-background ~ .dialogue-layer.dave .dialogue-box,
[class*="chris_bj"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="chris_bj"].room-background ~ .dialogue-layer.think .dialogue-box,
[class*="chris_bj"].room-background ~ .dialogue-layer.unknown .dialogue-box,
[class*="ethan_sex"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="ethan_sex"].room-background ~ .dialogue-layer.ethan .dialogue-box,
[class*="miles_sex"].room-background ~ .dialogue-layer.duncan .dialogue-box,
[class*="miles_sex"].room-background ~ .dialogue-layer.miles .dialogue-box,
[class*="archer_sex"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="archer_sex"].room-background ~ .dialogue-layer.archer .dialogue-box,
[class*="duncan_sex"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="duncan_sex"].room-background ~ .dialogue-layer.duncan .dialogue-box,
[class*="russell_sex"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="russell_sex"].room-background ~ .dialogue-layer.russell .dialogue-box,
[class*="monster_sex"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="monster_sex"].room-background ~ .dialogue-layer.creature .dialogue-box,
[class*="fred_sex"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="fred_sex"].room-background ~ .dialogue-layer.fred .dialogue-box,
[class*="nick_sex"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="nick_sex"].room-background ~ .dialogue-layer.nick .dialogue-box,
[class*="samar_sex"].room-background ~ .dialogue-layer .dialogue-box {
  width: 630px;
  border: 5px solid white;
  border-radius: 50px;
}

[class*="idris_sex"].room-background ~ .dialogue-layer.main .dialogue-text,
[class*="idris_sex"].room-background ~ .dialogue-layer.unknown .dialogue-text,
[class*="idris_sex"].room-background ~ .dialogue-layer.idris .dialogue-text,
[class*="dave_sex"].room-background ~ .dialogue-layer.main .dialogue-text,
[class*="dave_sex"].room-background ~ .dialogue-layer.dave .dialogue-text,
[class*="chris_bj"].room-background ~ .dialogue-layer.main .dialogue-text,
[class*="chris_bj"].room-background ~ .dialogue-layer.think .dialogue-text,
[class*="chris_bj"].room-background ~ .dialogue-layer.unknown .dialogue-text,
[class*="ethan_sex"].room-background ~ .dialogue-layer.main .dialogue-text,
[class*="ethan_sex"].room-background ~ .dialogue-layer.ethan .dialogue-text,
[class*="miles_sex"].room-background ~ .dialogue-layer.duncan .dialogue-text,
[class*="miles_sex"].room-background ~ .dialogue-layer.miles .dialogue-text,
[class*="archer_sex"].room-background ~ .dialogue-layer.main .dialogue-text,
[class*="archer_sex"].room-background ~ .dialogue-layer.archer .dialogue-text,
[class*="duncan_sex"].room-background ~ .dialogue-layer.main .dialogue-text,
[class*="duncan_sex"].room-background ~ .dialogue-layer.duncan .dialogue-text,
[class*="russell_sex"].room-background ~ .dialogue-layer.main .dialogue-text,
[class*="russell_sex"].room-background ~ .dialogue-layer.russell .dialogue-text,
[class*="monster_sex"].room-background ~ .dialogue-layer.main .dialogue-text,
[class*="monster_sex"].room-background ~ .dialogue-layer.creature .dialogue-text,
[class*="fred_sex"].room-background ~ .dialogue-layer.main .dialogue-text,
[class*="fred_sex"].room-background ~ .dialogue-layer.fred .dialogue-text,
[class*="nick_sex"].room-background ~ .dialogue-layer.main .dialogue-text,
[class*="nick_sex"].room-background ~ .dialogue-layer.nick .dialogue-text,
[class*="samar_sex"].room-background ~ .dialogue-layer .dialogue-text {
  left: 30px;
  width: 570px;
  top: 30px;
}

[class*="monster_sex"].room-background ~ .dialogue-layer.creature .dialogue-box {
  left: 40;
  bottom: 760;
}


[class*="nick_sex"].room-background ~ .dialogue-layer.main .dialogue-box,
[class*="samar_sex"].room-background ~ .dialogue-layer.main .dialogue-box {
  left: 40px;
  bottom: 490px;  
}

[class*="fred_sex"].room-background ~ .dialogue-layer.fred .dialogue-box {
  left: 40px;
  bottom: 70px;
}

[class*="monster_sex"].room-background ~ .dialogue-layer.main .dialogue-box {
  left: 1260;
  bottom: 100;
}

[class*="samar_sex"].room-background ~ .dialogue-layer.samar .dialogue-box {
  left: 1260px;
  bottom: 250px;
}

[class*="nick_sex"].room-background ~ .dialogue-layer.nick .dialogue-box {
  left: 1250px;
  bottom: 510px;
}

[class*="fred_sex"].room-background ~ .dialogue-layer.main .dialogue-box {
  left: 1250px;
  bottom: 750px;
}

[class*="russell_sex"].room-background ~ .dialogue-layer.russell .dialogue-box {
  left: 10px;
  bottom: 770px;
}
[class*="russell_sex"].room-background ~ .dialogue-layer.main .dialogue-box {
  left: 10px;
  bottom: 20px;
}

[class*="duncan_sex"].room-background ~ .dialogue-layer.duncan .dialogue-box {
  bottom: 760px;
  left: 860px;
}

[class*="duncan_sex"].room-background ~  .dialogue-layer.main .dialogue-box {
  bottom: 430px;
  left: 1210px;
}

[class*="archer_sex"].room-background ~ .dialogue-layer.archer .dialogue-box {
  bottom: 770px;
  left: 800px;
}
[class*="archer_sex"].room-background ~  .dialogue-layer.main .dialogue-box {
  bottom: 160px;
  left: 1260px;
}
[class*="archer_sex_02"].room-background ~ .dialogue-layer.archer .dialogue-box,
[class*="archer_sex_02"].room-background ~  .dialogue-layer.main .dialogue-box {
  left: 30px;
}

[class*="miles_sex"].room-background ~ .dialogue-layer.duncan .dialogue-box {
  bottom: 760px;
  left: 480px;
}

[class*="miles_sex"].room-background ~ .dialogue-layer.miles .dialogue-box {
  bottom: 680px;
  left: 700px;
}

[class*="ethan_sex"].room-background ~ .dialogue-layer.ethan .dialogue-box {
  bottom: 760px;
  left: 70px;
}
[class*="ethan_sex"].room-background ~ .dialogue-layer.main .dialogue-box {
  bottom: 450px;
  left: 70px;
}


[class*="dave_sex"].room-background ~ .dialogue-layer.dave .dialogue-box {
  bottom: 450;
  left: 70px;
}
[class*="dave_sex"].room-background ~ .dialogue-layer.main .dialogue-box {
  bottom: 90px;
  left: 200px;
}

[class*="idris_sex"].room-background ~ .dialogue-layer.unknown .dialogue-box,
[class*="idris_sex"].room-background ~ .dialogue-layer.idris .dialogue-box {
  bottom: 750;
  left: 1270px;
}
[class*="idris_sex"].room-background ~ .dialogue-layer.main .dialogue-box {
  bottom: 390px;
  left: 30px;
}

[class*="chris_bj"].room-background ~ .dialogue-layer.unknown .dialogue-box {
  bottom: 760px;
  left: 30px;
}

[class*="chris_bj"].room-background ~ .dialogue-layer.think .dialogue-box,
[class*="chris_bj"].room-background ~ .dialogue-layer.main .dialogue-box {
  bottom: 10px;
  left: 1170px;
}

/* Option */
.option-body {
  background-image: var(--ui-bg-texture);
  background-color: var(--ui-bg-color);
  border: var(--ui-border-style);
  top: auto;
  bottom: 0px;
  border-radius: 60px 60px 0 0;
  padding: 10px 10px 10px 280px;
  left: 0px;
  width: 1920px;
  box-shadow: var(--ui-shadow);
  min-height: 20%;
  border-bottom: none;
}
.option-body::before {
  content: " ";
  height: 213px;
  width: 190px;
  position: absolute;
  left: 60px;
  top: 0px;
}

.option-title {
  font-size: 40px;
  text-shadow: var(--text-shadow);
  margin: 10px 70px 0 70px;
}

.option-body ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.option-body li {
  text-align: left;
  margin: 10px;
  padding-left: 30px;
  width: 700px;
  display: inline-block;
}

.mateChoice .option-body li {
  width: 490px;
}

/* End text */
.game-shield.end-game::before {
  content: "The End.";
  font-size: 80px;
  text-shadow: var(--text-shadow);
  position: absolute;
  bottom: 50px;
  left: 50px;
}

/* Naughty/Nice Progress bar */
.nice-progress {
  border: 2px white solid;
  background: url(ui/bar.png);
}
.base-progressBar .progressBar-progress {
  background: url(ui/bar.png);
  background-position-y: -40px;
}

/* Save Screen */
.save-screen-container {
  position: absolute;
  z-index: 500;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.save-screen-container * {
  z-index: 500;
}

.base-loadSlot,
.base-saveSlot {
  padding: 15px;
  background-image: var(--ui-bg-texture);
  background-color: var(--ui-bg-color);
  border: var(--ui-border-style);
  text-shadow: var(--text-shadow);
  box-shadow: var(--ui-shadow);
  font-size: 35px;
}

.base-loadSlot:hover,
.base-saveSlot:hover {
  background-color: var(--ui-bg-color-hover);
}

.save-time-stamp {
  cursor: pointer;
  font-size: 21px;
  text-align: right;
  padding-top: 25px;
}

.base-loadSlot.empty-slot {
  background: var(--gallery-locked);
  cursor: auto;
}

.base-loadSlot.empty-slot .save-time-stamp {
  cursor: auto;
}

/* Gallery */

.gallery-title {
  font-size: 90px;
  padding-left: 105px;
  text-shadow: var(--text-shadow);
  background: transparent;
}

.base-button.gallery-menu {
  text-align: left;
  padding: 80px 0 0 185px;
}
.gallery-item,
.base-button.gallery-menu {
  box-shadow: 15px 15px 22px #07030a;
}

.base-button.gallery-menu.disabled,
.gallery-item.locked {
  background: url(ui/locked.jpg);
  border: 4px solid white;
}
.base-button.gallery-menu::after {
  position: absolute;
  content: " ";
  height: 213px;
  width: 190px;
  left: -10px;
  top: 0;
}
.base-button.gallery-menu.disabled::after {
  display: none;
}

.base-button.gallery-menu.disabled:hover {
  cursor: auto;
}
.gallery-item {
  margin: 0;
  border: 4px solid white;
}

/* Log */
.base-logView {
  position: absolute;
  background: var(--ui-bg-color-solid);
  padding: 20px;
  overflow-y: scroll;
}

.log-action {
  border-bottom: 1px solid white;
  padding: 10px 0;
}

.log-action .log-actor,
.log-action .log-dialogue {
  display: inline-block;
}

.choice-action .log-actor::before {
  font-size: 22px;
  content: ">>>"
}

.log-actor {
  margin-right: 20px;
  width: 220px;
  text-align: right;
  vertical-align: top;
}

.log-actor span {
  position: relative;
  font-size: 22px;
}

.think .log-dialogue {
  font-style: italic;
}

.log-actor span::after {
  content: " ";
  width: 35px;
  height: 38px;
  left: -40px;
  position: absolute;
  top: -5px;
}

.log-dialogue {
  width: 1100px;
  font-size: 30px;
}
.log-dialogue * {
  font-size: 30px;
}

.log-dialogue .inline-text-icon {
  width: 35px;
  height: 38px;
}

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

/* Animations */

@keyframes spin {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.5);
  }
  75% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.5);
  }
}

@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);}
}