html {
  height: -webkit-fill-available;
}

body {
  background: black;
  text-align: center;
  --ally-color: royalblue;
  --ally-color-dark: #2f4ba1;
  --ally-color-selection: rgba(65,105,225,0.25);
  --foe-color: crimson;
  --foe-color-dark: #9c0e2b;
  --border-color: lightgrey;
  --inactive-color: dimgrey;
  --highlight-color: gold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  padding: 8px;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 396px;
  width: 100%;
  max-width: 450px;
  height: 100%;
  overflow-y: hidden;
}

#game, #feed, #area, #shop, #craft, #inventory, #bestiary, #save, #description, #allyDetails {
  border: 1px dashed var(--border-color);
}

#game, #feed, #equipment, #gambits, #area, #shop, #craft, #inventory, #bestiary, #save, #description, #skills, #allyDetails {
  min-height: 28px;
  text-align: left;
  color: white;
}

#game, #feed, #equipment, #gambits, #area, #shop, #craft, #inventory, #bestiary, #save, #menu, #description, #skills, #allyDetails {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#game, #feed, #menu {
  margin-bottom: 4px;
}

#save, #feed, #description {
  padding: 8px;
}

#game, #feed, #equipment, #gambits, #area, #shop, #craft, #inventory, #bestiary, #save, #description, #menu, #skills, #allyDetails, #dialogue, button, input {
  font-size: 16px;
  font-family: Arial;
}

#area, #shop, #craft, #inventory, #bestiary, #gambits, #skills, #allyDetails {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#gambits, #shop, #craft, #inventory, #skills, #allyDetails {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#area, #bestiary {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

#description {
  margin-top: 4px;
  width: 100%;
}

button, input {
  color: black;
  background-color: white;
  border-radius: 4px;
  border: none;
  display: inline-block;
  text-decoration: none;
  padding: 4px 8px;
}

button {
  cursor: pointer;
  margin-left: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

button.highlight {
  background-color: var(--highlight-color);
}

button:not(:disabled):active {
  background-color: var(--border-color);
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover {
    background-color: var(--border-color);
  }
}

button:disabled {
  cursor: default;
  background-color: var(--inactive-color);
}

input:focus, button:focus, select:focus {
  outline: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' width='20px' height='20px'><path d='M0 0h24v24H0z' fill='none'/><path d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 50%;
  border: none;
}

select:disabled {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' width='20px' height='20px'><path d='M0 0h24v24H0z' fill='none'/><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/></svg>");
  opacity: 1;
  color: black;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

.icon-accessory, .icon-armour, .icon-elements, .icon-healing,
.icon-ingredient, .icon-item, .icon-weapon,
.icon-regenerating, .icon-poisoned, .icon-fast, .icon-slow,
.icon-protected, .icon-vulnerable, .icon-strong, .icon-weak,
.icon-angel, .icon-fumble {
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

.icon-accessory, .icon-armour, .icon-elements, .icon-healing,
.icon-ingredient, .icon-item, .icon-weapon {
  width: 34px;
  min-height: 26px;
  max-height: 100%;
}

.icon-accessory {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35.29' fill='black' width='20px' height='20px'><path d='M17.5,0C9.07,0,0,2.35,0,7.5c0,4.34,6.44,6.68,13.5,7.32v-4C7.14,10.18,4.06,8.18,4,7.5S8.41,4,17.5,4,30.93,6.68,31,7.5s-3.14,2.68-9.5,3.31v4c7.06-.64,13.5-3,13.5-7.32C35,2.35,25.93,0,17.5,0Z'/><path d='M27,24a1,1,0,0,0-.81-.68l-5.35-.77L18.4,17.67a1,1,0,0,0-1.8,0l-.33.68-2.06,4.18-5.35.77A1,1,0,0,0,8.3,25l3.88,3.77-.92,5.34a1,1,0,0,0,.4,1,1,1,0,0,0,.59.2.93.93,0,0,0,.46-.12l4.79-2.52,4.79,2.52a1,1,0,0,0,1.05-.08,1,1,0,0,0,.4-1l-.92-5.34L26.7,25A1,1,0,0,0,27,24Z'/><path d='M19.5,15.9V10.79a2,2,0,0,0-4,0V15.9a3.07,3.07,0,0,1,4,0Z'/></svg>");
}

.icon-armour {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30.29 35' fill='black' width='20px' height='20px'><path d='M4,9.3v4.81A17.31,17.31,0,0,0,12.56,29l2.58,1.51L17.72,29a17.32,17.32,0,0,0,8.57-14.91V9.3l-11.15-5Z'/><path d='M29.7,6.45,15.55.09a1,1,0,0,0-.82,0L.59,6.45A1,1,0,0,0,0,7.36v6.75A21.33,21.33,0,0,0,10.55,32.48l4.09,2.38a.9.9,0,0,0,.5.14.94.94,0,0,0,.51-.14l4.09-2.38A21.35,21.35,0,0,0,30.29,14.11V7.36A1,1,0,0,0,29.7,6.45Zm-1.41,7.66a19.34,19.34,0,0,1-9.56,16.64l-3.59,2.09-3.58-2.09A19.32,19.32,0,0,1,2,14.11V8L15.14,2.1,28.29,8Z'/></svg>");
}

.icon-elements {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29.34 35' fill='black' width='20px' height='20px'><path d='M22.47,6.34a1,1,0,0,0-1.1-.24,1,1,0,0,0-.63.92v9.57a2.66,2.66,0,0,1-2.4,2.73,2.44,2.44,0,0,1-1.88-.69,2.49,2.49,0,0,1-.79-1.84,8.34,8.34,0,0,1,1.39-3.31l.48-.88A9.94,9.94,0,0,0,15.33.25,1,1,0,0,0,14.12.16C13.55.54,0,9.54,0,20.33a14.67,14.67,0,0,0,29.34,0C29.34,15.84,27,11.14,22.47,6.34Z'/></svg>");
}

.icon-healing {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 32.34' fill='black' width='20px' height='20px'><path d='M24.14,0A10.81,10.81,0,0,0,17.5,2.28,10.85,10.85,0,0,0,0,10.86C0,23,15.87,31.73,16.55,32.1a2,2,0,0,0,1.9,0C19.13,31.73,35,23,35,10.86A10.87,10.87,0,0,0,24.14,0ZM22.5,18.67H20v2.5a2.5,2.5,0,0,1-5,0v-2.5H12.5a2.5,2.5,0,0,1,0-5H15v-2.5a2.5,2.5,0,0,1,5,0v2.5h2.5a2.5,2.5,0,0,1,0,5Z'/></svg>");
}

.icon-ingredient {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 34' fill='black' width='20px' height='20px'><path d='M33,14.35H2a2.11,2.11,0,0,0-2,2.5A18.27,18.27,0,0,0,10.5,30v2a2,2,0,0,0,2,2h10a2,2,0,0,0,2-2V30A18.27,18.27,0,0,0,35,16.85,2.11,2.11,0,0,0,33,14.35Z'/><path d='M31.94,7.24a3,3,0,1,0-4.88-3.48l-6.14,8.59H28.3Z'/><polygon points='10.5 11 12.06 7.06 16 5.5 12.06 3.94 10.5 0 8.94 3.94 5 5.5 8.94 7.06 10.5 11'/></svg>");
}

.icon-item {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.74 32.74' fill='black' width='20px' height='20px'><path d='M28.93,10.55A13,13,0,0,0,14.79,7.72L9.13,2.06l.35-.35A1,1,0,0,0,8.07.29L7,1.35H7L1.35,7h0L.29,8.07A1,1,0,1,0,1.71,9.48l.35-.35,5.66,5.66a13,13,0,1,0,21.21-4.24Zm-3.22,8.19-2.26,2.2L24,24.05a1,1,0,0,1-.4,1,1,1,0,0,1-.59.19,1,1,0,0,1-.46-.12l-2.79-1.46L17,25.1a1,1,0,0,1-.47.12,1.06,1.06,0,0,1-.59-.19,1,1,0,0,1-.39-1L16,20.94l-2.26-2.2A1,1,0,0,1,14.32,17l3.13-.45,1.39-2.83a1,1,0,0,1,.9-.56,1,1,0,0,1,.89.56L22,16.58l3.12.45a1,1,0,0,1,.56,1.71Z'/></svg>");
}

.icon-weapon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='black' width='20px' height='20px'><path d='M22.78,5,9.93,17.81l2.92,2.92L25,8.59A1,1,0,0,1,26.41,10L14.27,22.15l2.92,2.92L30.05,12.22C35.06,7.21,35,0,35,0S27.79-.06,22.78,5Z'/><path d='M3.84,26.8A4.11,4.11,0,1,0,7,33.8,4.15,4.15,0,0,0,8.2,31.16L10,29.42,5.58,25.05Z'/><path d='M7,17.83a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41l2.91,2.91L7,23.64,11.36,28l1.49-1.49,2.91,2.91a1,1,0,0,0,.71.29,1,1,0,0,0,.7-1.71Z'/></svg>");
}

.statuses {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.icon-regenerating, .icon-poisoned, .icon-fast, .icon-slow,
.icon-protected, .icon-vulnerable, .icon-strong, .icon-weak,
.icon-angel, .icon-fumble {
  width: 20px;
  height: 20px;
  margin: 4px 4px 4px 0;
}

.icon-regenerating {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='royalblue' width='20px' height='20px'><path d='M23,27,23,35,31,35,31,27,35,27,27,19,19,27,23,27Z'/><path d='M19,28.5a1.51,1.51,0,0,1-1.39-.93,1.5,1.5,0,0,1,.33-1.63l8-8a1.5,1.5,0,0,1,2.12,0l2.24,2.23C33,17.09,35,13.57,35,10c0-5.51-4-10-9-10a9.12,9.12,0,0,0-8.5,6.72A9.12,9.12,0,0,0,9,0C4,0,0,4.47,0,10,0,20.52,17.5,30.5,17.5,30.5s1.28-.73,3.14-2Z'/></svg>");
}

.icon-poisoned {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='crimson' width='20px' height='20px'><path d='M31,27,31,19,23,19,23,27,19,27,27,35,35,27,31,27Z'/><path d='M17.94,28.06a1.5,1.5,0,0,1-.33-1.63A1.51,1.51,0,0,1,19,25.5h2.5V19A1.5,1.5,0,0,1,23,17.5h8a1.52,1.52,0,0,1,1,.43A14.11,14.11,0,0,0,35,10c0-5.51-4-10-9-10a9.12,9.12,0,0,0-8.5,6.72A9.12,9.12,0,0,0,9,0C4,0,0,4.47,0,10,0,20.52,17.5,30.5,17.5,30.5s.69-.39,1.78-1.1Z'/></svg>");
}

.icon-fast {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='royalblue' width='20px' height='20px'><path d='M23,27,23,35,31,35,31,27,35,27,27,19,19,27,23,27Z'/><path d='M21.5,31.43a14.56,14.56,0,1,1,10-10.09l2.37,2.38A17.49,17.49,0,1,0,17.5,35a17.59,17.59,0,0,0,4-.48Z'/><path d='M17.5,5A1.5,1.5,0,0,0,16,6.5V16.88l-5.06,5.06a1.49,1.49,0,0,0,0,2.12,1.5,1.5,0,0,0,2.12,0l5.5-5.5a1.51,1.51,0,0,0,.33-.49v0A1.46,1.46,0,0,0,19,17.5V6.5A1.5,1.5,0,0,0,17.5,5Z'/></svg>");
}

.icon-slow {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='crimson' width='20px' height='20px'><path d='M31,27,31,19,23,19,23,27,19,27,27,35,35,27,31,27Z'/><path d='M21.34,31.47A14.71,14.71,0,0,1,17.5,32,14.5,14.5,0,1,1,32,17.5c0,.13,0,.25,0,.37A1.49,1.49,0,0,1,32.5,19v6.5h.55a17.57,17.57,0,1,0-9.33,8.34Z'/><path d='M17.5,5A1.5,1.5,0,0,0,16,6.5V16.88l-5.06,5.06a1.49,1.49,0,0,0,0,2.12,1.5,1.5,0,0,0,2.12,0l5.5-5.5a1.51,1.51,0,0,0,.33-.49v0A1.46,1.46,0,0,0,19,17.5V6.5A1.5,1.5,0,0,0,17.5,5Z'/></svg>");
}

.icon-protected {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.64 35' fill='royalblue' width='20px' height='20px'><path d='M16.64,28.5a1.5,1.5,0,0,1-1.06-2.56l8-8a1.53,1.53,0,0,1,1.06-.44,1.49,1.49,0,0,1,1.06.44l.12.11a17.26,17.26,0,0,0,.47-3.94V9.3l-11.15-5L4,9.3v4.81A17.31,17.31,0,0,0,12.56,29l2.58,1.51L17.72,29c.29-.16.56-.34.83-.52Z'/><path d='M19.14,30.49l-.41.26-3.59,2.09-3.58-2.09A19.32,19.32,0,0,1,2,14.11V8L15.14,2.1,28.29,8v6.1a19.22,19.22,0,0,1-.84,5.57L29,21.26a21.22,21.22,0,0,0,1.26-7.15V7.36a1,1,0,0,0-.59-.91L15.55.09a1,1,0,0,0-.82,0L.59,6.45A1,1,0,0,0,0,7.36v6.75A21.33,21.33,0,0,0,10.55,32.48l4.09,2.38a.9.9,0,0,0,.5.14.94.94,0,0,0,.51-.14l3.49-2Z'/><path d='M20.64,27,20.64,35,28.64,35,28.64,27,32.64,27,24.64,19,16.64,27,20.64,27Z'/></svg>");
}

.icon-vulnerable {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.64 35' fill='crimson' width='20px' height='20px'><path d='M15.58,28.06a1.5,1.5,0,0,1,1.06-2.56h2.5V19a1.5,1.5,0,0,1,1.5-1.5H26a17.32,17.32,0,0,0,.34-3.39V9.3l-11.15-5L4,9.3v4.81A17.31,17.31,0,0,0,12.56,29l2.58,1.51L17,29.46Z'/><path d='M18.44,30.92l-3.3,1.92-3.58-2.09A19.32,19.32,0,0,1,2,14.11V8L15.14,2.1,28.29,8v6.1A19.09,19.09,0,0,1,28,17.5h.67a1.49,1.49,0,0,1,1.25.67,21.09,21.09,0,0,0,.4-4.06V7.36a1,1,0,0,0-.59-.91L15.55.09a1,1,0,0,0-.82,0L.59,6.45A1,1,0,0,0,0,7.36v6.75A21.33,21.33,0,0,0,10.55,32.48l4.09,2.38a.9.9,0,0,0,.5.14.94.94,0,0,0,.51-.14l4.09-2.38.16-.1Z'/><path d='M28.64,27,28.64,19,20.64,19,20.64,27,16.64,27,24.64,35,32.64,27,28.64,27Z'/></svg>");
}

.icon-strong {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='royalblue' width='20px' height='20px'><path d='M22.78,5,9.93,17.81l2.92,2.92L25,8.59A1,1,0,0,1,26.41,10L14.27,22.15l2.92,2.92L30.05,12.22C35.06,7.21,35,0,35,0S27.79-.06,22.78,5Z'/><path d='M3.84,26.8A4.11,4.11,0,1,0,7,33.8,4.15,4.15,0,0,0,8.2,31.16L10,29.42,5.58,25.05Z'/><path d='M7,17.83a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41l2.91,2.91L7,23.64,11.36,28l1.49-1.49,2.91,2.91a1,1,0,0,0,.71.29,1,1,0,0,0,.7-1.71Z'/><path d='M23,27,23,35,31,35,31,27,35,27,27,19,19,27,23,27Z'/></svg>");
}

.icon-weak {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='crimson' width='20px' height='20px'><path d='M21.5,19A1.5,1.5,0,0,1,23,17.5h1.77l5.28-5.28C35.06,7.21,35,0,35,0S27.79-.06,22.78,5L9.93,17.81l2.92,2.92L25,8.59A1,1,0,0,1,26.41,10L14.27,22.15l2.92,2.92,4.31-4.3Z'/><path d='M3.84,26.8A4.11,4.11,0,1,0,7,33.8,4.15,4.15,0,0,0,8.2,31.16L10,29.42,5.58,25.05Z'/><path d='M7,17.83a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41l2.91,2.91L7,23.64,11.36,28l1.49-1.49,2.91,2.91a1,1,0,0,0,.71.29,1,1,0,0,0,.7-1.71Z'/><path d='M31,27,31,19,23,19,23,27,19,27,27,35,35,27,31,27Z'/></svg>");
}

.icon-angel {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='royalblue' width='20px' height='20px'><path d='M30,5.5c0-3-5.6-5.5-12.5-5.5S5,2.46,5,5.5,10.6,11,17.5,11,30,8.54,30,5.5ZM17.5,8C12,8,8.75,6.33,8.07,5.5,8.75,4.67,12,3,17.5,3s8.75,1.67,9.43,2.5C26.25,6.33,23,8,17.5,8Z'/><path d='M35,10v0c-8,1.43-14.66,3.33-15.41,12.17L19.35,25l-.24,2.86-.25,2.85L18.5,35l.47-.08a5.51,5.51,0,0,0,4.29-4.71,10.74,10.74,0,0,1,2.36-.78,6.39,6.39,0,0,0,4.64-5.35.65.65,0,0,0,0-.14,7.21,7.21,0,0,1-3,1.69,11.6,11.6,0,0,0-3.72,1.55,6.59,6.59,0,0,1,3.73-2.43,5.84,5.84,0,0,0,.66-.24h0l.32-.13a6.45,6.45,0,0,0,3.61-5v-.15a7.23,7.23,0,0,1-3,1.7,11.06,11.06,0,0,0-5,2.21s1.08-2.4,5-3.09a5.35,5.35,0,0,0,.67-.24l.32-.13a6.42,6.42,0,0,0,3.6-5v-.15a7.28,7.28,0,0,1-3.06,1.71,11.37,11.37,0,0,0-6.16,2.86s.75-2.37,6.16-3.74a5.13,5.13,0,0,0,.72-.25l-.05,0A6.4,6.4,0,0,0,35,10Z'/><path d='M15.89,27.88,15.65,25l-.24-2.85C14.66,13.33,8,11.43,0,10v0a6.4,6.4,0,0,0,4,5.11l0,0a5.13,5.13,0,0,0,.72.25c5.41,1.37,6.16,3.74,6.16,3.74a11.37,11.37,0,0,0-6.16-2.86,7.28,7.28,0,0,1-3.06-1.71v.15a6.42,6.42,0,0,0,3.6,5l.32.13a5.35,5.35,0,0,0,.67.24c3.89.69,5,3.09,5,3.09a11.06,11.06,0,0,0-5-2.21,7.23,7.23,0,0,1-3-1.7v.15a6.45,6.45,0,0,0,3.61,5l.32.13h0a5.84,5.84,0,0,0,.66.24,6.59,6.59,0,0,1,3.73,2.43,11.6,11.6,0,0,0-3.72-1.55,7.21,7.21,0,0,1-3-1.69.65.65,0,0,0,0,.14,6.39,6.39,0,0,0,4.64,5.35,10.74,10.74,0,0,1,2.36.78A5.51,5.51,0,0,0,16,34.92l.47.08-.36-4.27Z'/></svg>");
}

.icon-fumble {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='crimson' width='20px' height='20px'><path d='M2.5,35,12.5,33.5,5.5,29.5,2.5,35Z'/><path d='M3.77,19.36,0,25.5,6.55,26.47,3.77,19.36Z'/><path d='M28,34.5,34,34.5,35,29.5,28,34.5Z'/><path d='M29.87,10.55a11.72,11.72,0,0,0-1.13-1v6.82L21.5,19.56l-2,5v-6l5-4L21.56,6.78a12.84,12.84,0,0,0-5.83.94L10.08,2.06l.35-.35A1,1,0,0,0,9,.29L8,1.35H8L2.3,7h0L1.24,8.07a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0L3,9.13l5.66,5.66a13,13,0,1,0,21.21-4.24Z'/></svg>");
}

#feed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc( calc(20px * 3) + 10px);
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 10px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#feed * {
  width: 100%;
  height: 20px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#feed *:last-child {
  height: 12px;
}

#feed::-webkit-scrollbar {
  width: 8px;
}

#feed::-webkit-scrollbar-thumb {
  background: var(--border-color);
}

.remove {
  -webkit-animation-name: remove;
          animation-name: remove;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  overflow: hidden;
}

@-webkit-keyframes remove {
  from {
    opacity: 1;
    max-height: 20px;
  }
  to {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes remove {
  from {
    opacity: 1;
    max-height: 20px;
  }
  to {
    opacity: 0;
    max-height: 0;
  }
}

.foe-color {
  color: var(--foe-color);
}

.ally-color {
  color: var(--ally-color);
}

.highlight-color {
  color: var(--highlight-color);
}

#game {
  display: block;
  width: 100%;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#game > div {
  padding: 4px 8px;
}

#game > div:first-child {
  padding-top: 8px;
}

#game > div:last-child {
  padding-bottom: 8px;
}

#allies, #foes, #info {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  overflow: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#allies, #foes {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#info {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#foes {
  min-height: 91px;
}

.ally, .foe {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: calc( calc( 100% - 16px) / 3);
  min-height: 28px;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

.ally .info, .foe .info {
  padding: 4px 8px;
}

.ally .info {
  border-bottom: 1px dashed var(--ally-color);
}

.foe .info {
  border-bottom: 1px dashed var(--foe-color);
}

.ally .unlock {
  padding: 4px 8px 6px;
}

.actionBar, .hpBar {
  width: 100%;
  height: 16px;
}

.ally .hpBar {
  background: var(--ally-color);
}

.foe .hpBar {
  background: var(--foe-color);
}

.ally .actionBar {
  background: var(--ally-color-dark);
}

.foe .actionBar {
  background: var(--foe-color-dark);
}

.ally .hpBar, .ally .actionBar, .ally .info, .ally .unlock {
  pointer-events: none;
}

.ally:not(:first-child), .foe:not(:first-child) {
  margin-left: 8px;
}

.ally {
  border: 1px dashed var(--ally-color);
  cursor: pointer;
}

.ally:active {
  background-color: var(--ally-color-selection);
}

@media (hover: hover) and (pointer: fine) {
  .ally:hover {
    background-color: var(--ally-color-selection);
  }
}

.ally.selected {
  background-color: var(--ally-color-selection);
}

.ally span.name {
  color: var(--ally-color);
}

.foe {
  border: 1px dashed var(--foe-color);
}

.foe span.name {
  color: var(--foe-color);
}

.barLabel {
  float: left;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
}

#menu, .subMenu, .filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#menu {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-radius: 4px;
}

#menu button {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

#menu button:first-child {
  border-radius: 4px 0 0 4px;
}

#menu button:last-child {
  border-radius: 0 4px 4px 0;
}

#menu button, .subMenu button, .filter button {
  margin: 0;
  border-radius: 0;
}

#menu button.selected, .subMenu button:disabled, .filter button:disabled {
  background-color: var(--ally-color);
}

.menuHolder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.subMenu {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.subMenu button:last-child {
  border-radius: 0 0 4px 0;
}

.filter {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.filter button:first-child {
  border-radius: 0 0 0 4px;
}

.subMenu button, .filter button {
  min-width: 34px;
}

#equipment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#equipment .col {
  width: calc( calc(100% / 3) * 2);
  display: inline-block;
}

#equipment .col:first-child {
  padding: 8px;
  border-right: 1px dashed var(--border-color);
  width: calc(100% / 3);
}

.equipment, .progress {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  width: 100%;
}

.equipment, .progressInfo {
  padding: 8px;
}

.stat, .slot {
  width: 100%;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.stat:nth-child(4) {
  display: inline-block;
}

.stat .label {
  height: 22px;
}

.stat:nth-child(4) div div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.slot {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: var(--border-color);
  border-radius: 4px;
  color: black;
  height: 27px;
}

.slot:not(:first-child) {
  margin-top: 4px;
}

.slot:not(:last-child) {
  margin-bottom: 4px;
}

.slot div:nth-child(2) {
  padding: 4px 8px;
  line-height: 19px;
}

.slot select {
  height: 100%;
  width: 90%;
  padding: 4px;
  padding-right: 20px;
  font-size: 16px;
  border: none;
  border-radius: 0 4px 4px 0;
}

.slot select:hover, .slot select:focus {
  background-color: white;
}

.progress {
  border-top: 1px dashed var(--border-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.barHolder {
  width: 100%;
  height: 16px;
  border-top: 1px dashed var(--border-color);
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

.xpBar {
  width: 100%;
  height: 16px;
  background: var(--ally-color);
}

.progressInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.progressInfo div {
  display: inline-block;
  width: 100%;
}

.progressInfo div div {
  width: calc( calc(100% / 3) * 2);
  vertical-align: middle;
}

.progressInfo div div:last-child {
  text-align: right;
  width: calc(100% / 3);
}

#skills {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
}

#skills .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

#skills .item * {
  pointer-events: none;
}

#skills .item * button {
  pointer-events: auto;
}

#skills .item:active:not(.title) {
  background-color: var(--ally-color-selection);
}

#skills .item div:first-child {
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
}

#skills .item div:not(:first-child) {
  text-align: right;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#skills .item.title div:nth-child(2) {
  text-align: center;
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
}

#skills .item.title div:not(:nth-child(2)) {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
}

.gambits {
  padding-left: 8px;
}

.gambit, .setAction {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 27px;
  padding: 0;
  background-color: var(--border-color);
  border-radius: 4px;
  color: black;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.setAction {
  width: calc(100% - 16px);
}

.gambit {
  margin-top: 4px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.gambit * {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.gambit:not(:last-child) {
  margin-bottom: 4px;
}

.gambit:last-child {
  margin-bottom: 8px;
}

.gambit.inactive {
  background-color: var(--inactive-color);
}

.gambit .grab {
  cursor: -webkit-grab;
  cursor: grab;
}

.material-icons {
  font-size: 27px;
}

.gambit button, .setAction button {
  height: 100%;
  padding: 4px 8px;
  margin: 0;
  vertical-align: top;
}

.gambit button {
  width: 34px;
  border-radius: 4px 0 0 4px;
}

.setAction {
  margin: 8px 8px 0 8px;
}

.setAction button:first-child {
  width: 100%;
}

.setAction button:not(:first-child) {
  padding: 0 3px;
  font-size: 24px;
  border-radius: 0;
}

.setAction button.close {
  border-radius: 0 4px 4px 0;
  float: right;
}

.gambit select, .setAction select {
  height: 100%;
  padding: 4px;
  font-size: 16px;
  border: none;
}

.gambit button, .gambit select:hover, .gambit select:focus, .setAction select:not(:disabled):hover, .setAction select:not(:disabled):focus {
  background-color: white;
}

.gambit.inactive select {
  background-color: var(--inactive-color);
}

.gambit button:active, .gambit.inactive button:active, .gambit.inactive select:active {
  background-color: var(--border-color);
}

@media (hover: hover) and (pointer: fine) {
  .gambit button:hover, .gambit.inactive button:hover, .gambit.inactive select:hover {
    background-color: var(--border-color);
  }
}

.setAction select {
  padding-right: 20px;
}

.setAction select[name="action"] {
  border-radius: 4px 0 0 4px;
  padding-left: 8px;
}

.setAction select[name="action"]:disabled {
  width: auto;
}

.gambit select[name="target"] {
  width: 80px;
}

.gambit select[name="condition"] {
  width: 140px;
}

.gambit select[name="action"] {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.gambit.over {
  opacity: 0.5;
}

.item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 8px 0;
  margin-left: 8px;
  min-height: 26px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.item:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.item.title {
  color: var(--ally-color);
  margin: 0px;
  padding: 8px;
}

.item div {
  display: inline-block;
}

.itemList, .gambits {
  min-height: 42px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.itemList::-webkit-scrollbar, .gambits::-webkit-scrollbar {
  width: 8px;
}

.itemList::-webkit-scrollbar-thumb, .gambits::-webkit-scrollbar-thumb {
  background: var(--border-color);
}

#area .item.desc, #bestiary .item.inset {
  padding-left: 8px;
  margin-top: 4px;
}

#area .item.desc:not(:last-child), #bestiary .item.inset:not(:last-child) {
  margin-bottom: 4px;
}

#area .item.break, #bestiary .item.break {
  margin-top: 16px;
}

#area button:disabled, #bestiary button:disabled {
  background: var(--ally-color);
}

#area button, #bestiary button {
  margin: 0;
  width: 100%;
  text-align: left;
}

#area .item, #bestiary .item {
  padding: 0;
  margin: 8px;
  margin-right: 0;
  min-height: auto;
}

#area .item:not(:last-child), #bestiary .item:not(:last-child) {
  border: none;
}

#area .itemList, #bestiary .itemList {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: calc(calc(100% -16px) / 2);
  display: inline-block;
  vertical-align: top;
  min-height: 76px;
}

#area .itemList:first-child, #bestiary .itemList:first-child {
  border-right: 1px dashed var(--border-color);
}

#bestiary .item.table {
  display: block;
}

#bestiary .item.table .row {
  width: 100%;
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid var(--border-color);
}

#bestiary .item.table .row:not(:last-child) {
  border-bottom: none;
}

#bestiary .item.table .row:first-child {
  border: none;
}

#bestiary .item.table .cell {
  width: calc( calc(100% -8px) / 4);
  text-align: center;
  padding: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: middle;
}

#bestiary .item.table .cell:first-child {
  width: calc( calc(100% -8px) / 4 * 2);
  text-align: left;
}

#shop .item div:not(:first-child) {
  text-align: right;
  width: calc( calc( 100% / 9 ) * 2);
}

#shop .item div:first-child {
  width: calc( calc( 100% / 9 ) * 3);
}

#craft .item, #craft .item.title {
  padding-top: 0;
  padding-bottom: 0;
}

#craft .item.title div.col, #craft .item div.col:first-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#craft .item div.col {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: calc( calc( 100% / 7 ) * 1);
  padding: 8px;
  min-height: 42px;
}

#craft .item div.col:nth-child(2) {
  border-right: 1px dashed var(--border-color);
  border-left: 1px dashed var(--border-color);
  width: calc( calc( calc( 100% / 7 ) * 3) + 5px);
}

#craft .item div:last-child {
  text-align: right;
}

#craft .item div.col:first-child {
  padding-left: 0;
  width: calc( calc( calc( 100% / 7 ) * 3) - 5px);
}

#craft .item div.col:last-child {
  padding-right: 0;
}

#craft .item div.col div.lineItem {
  width: 100%;
}

#craft .item div.col div.lineItem button {
  margin: 0;
}

#craft .item div.col div.lineItem div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: middle;
}

#craft .item div.col div.lineItem div:first-child {
  text-align: left;
  width: calc( calc( 100% / 3 ) * 2);
}

#craft .item div.col div.lineItem div:last-child {
  width: calc( calc( 100% / 3 ) * 1);
}

#craft .item div.col div.lineItem div:only-child {
  width: 100%;
  text-align: right;
}

#inventory .item div:not(:first-child) {
  text-align: right;
  width: calc( calc( 100% / 6 ) * 2);
}

#inventory .item div:first-child, #inventory .item div:last-child {
  width: calc( calc( 100% / 6 ) * 3);
}

#description {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#description div {
  height: 22px;
}

#description div:first-child {
  color: var(--ally-color);
}

#description div:last-child {
  height: auto;
}

.desc * {
  pointer-events: none;
}

.desc * button {
  pointer-events: auto;
}

.desc:active:not(.title) {
  background-color: var(--ally-color-selection);
}

@media (hover: hover) and (pointer: fine) {
  .desc:hover {
    background-color: var(--ally-color-selection);
  }
}

.btnHolder {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  float: right;
}

.inputHolder {
  display: block;
  overflow: hidden;
}

#save input {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#outputxt {
  padding-top: 8px;
}

#dialogue {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.75);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#dialogue .content {
  border: 1px solid var(--border-color);
  background-color: black;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#dialogue .content .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: start;
          flex-direction: start;
  height: 26px;
  margin-top: 8px;
}

#dialogue .content .row button {
  font-size: 24px;
  padding: 0 3px;
  height: 100%;
}

#game.hidden, #feed.hidden, #equipment.hidden, #gambits.hidden, #area.hidden, #shop.hidden, #craft.hidden, #inventory.hidden, #bestiary.hidden, #save.hidden, #menu.hidden, #description.hidden, #skills.hidden, #allyDetails.hidden {
  display: none;
}
/*# sourceMappingURL=index.css.map */