@charset "UTF-8";
html, body, div#app, main, div.page, div.view, div.panel, article {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.edit.view {
  margin: 0;
  padding: 0;
}
.edit.view > nav {
  display: flex;
  flex-direction: row;
  border-bottom: 6px double;
}
.edit.view > nav > a, .edit.view > nav button {
  display: block;
  box-sizing: border-box;
  padding: 0.5em 1em;
  margin: 0;
  border: none;
  background: none;
  text-decoration: none;
  color: black;
}
.edit.view > nav > a:not(:first-child), .edit.view > nav button:not(:first-child) {
  border-left: 1px solid black;
}
.edit.view > nav > a:hover, .edit.view > nav button:hover {
  background: #eee;
}
.edit.view > ul.panels {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
}
.edit.view > ul.panels > li {
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  width: 30em;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.edit.view > ul.panels > li > form.main {
  overflow-y: auto;
}
.edit.view > ul.panels > li > * {
  padding: 0 0.5em;
}
.edit.view > ul.panels > li > header {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5em;
  background: #eee;
  border-bottom: #ddd 1px solid;
}
.edit.view > ul.panels > li > header > button, .edit.view > ul.panels > li > header > a {
  border: none;
  text-decoration: none;
  background: none;
}
.edit.view > ul.panels > li > header > button:hover, .edit.view > ul.panels > li > header > a:hover {
  background: rgba(0, 0, 0, 0.1);
}
.edit.view > ul.panels > li > header > button > span, .edit.view > ul.panels > li > header > a > span {
  display: none;
}
.edit.view > ul.panels > li > header > h1, .edit.view > ul.panels > li > header > h2, .edit.view > ul.panels > li > header > h3 {
  width: 100%;
  margin: 0;
}
.edit.view > ul.panels > li > form.search {
  width: 100%;
  display: flex;
  margin-bottom: 0.5em;
}
.edit.view > ul.panels > li > form.search > label {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.edit.view > ul.panels > li > form.search > label > input {
  width: 100%;
}
.edit.view > ul.panels > li > ul.search {
  margin-bottom: 0.5em;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  height: 100%;
  overflow: auto;
}
.edit.view > ul.panels > li > ul.search > li {
  display: flex;
}
.edit.view > ul.panels > li > ul.search > li:hover {
  background: #eee;
  font-weight: bold;
}
.edit.view > ul.panels > li > ul.search > li button {
  border: none;
  background: none;
  font-weight: inherit;
}
.edit.view > ul.panels > li > ul.search > li button.main {
  text-align: left;
  width: 100%;
}

button > img {
  max-width: 100%;
  max-height: 10em;
}

.edit.view > ul.panels > li.EventCardsPanelData, .edit.view > ul.panels > li.ResourceCardsPanelData {
  width: 18em;
}

div.menu.view {
  display: flex;
  flex-direction: row-reverse;
  text-align: center;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-image: url(../graphics/menu/background-01.png);
  background-size: cover;
  font-size: 1.5rem;
  position: relative;
  z-index: 0;
}
div.menu.view:has(button.start) {
  place-content: center;
  place-items: center;
}
div.menu.view:has(button.start) button.start {
  font-size: 1.75em;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  text-shadow: white 2px 2px 1px, white -2px 2px 1px, white 2px -2px 1px, white -2px -2px 1px;
}
div.menu.view:has(button.start) button.start:hover {
  font-size: 1.9em;
}
div.menu.view:before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(35%, -40%);
  content: "";
  background-image: url(../graphics/menu/player.png);
  background-size: contain;
  width: 90em;
  height: 90em;
  display: block;
  z-index: -1;
}
div.menu.view .panel {
  width: 16em;
  display: flex;
  flex-direction: column;
  color: white;
  margin-top: 3.5em;
  margin-right: 4em;
}
div.menu.view .panel h1, div.menu.view .panel h2, div.menu.view .panel h3 {
  font-size: 2.5rem;
  color: inherit;
  margin-bottom: 1em;
}
div.menu.view nav {
  display: flex;
  flex-direction: column;
  place-items: center;
  place-content: center;
}
div.menu.view nav > button, div.menu.view nav a {
  border: none;
  background: none;
  text-decoration: none;
  box-sizing: border-box;
  padding: 0.25em 0.5em;
  color: inherit;
  text-align: right;
}
div.menu.view nav > button:hover, div.menu.view nav a:hover {
  font-weight: bolder;
}
div.menu.view nav > button:hover:before, div.menu.view nav a:hover:before {
  content: "> ";
}
div.menu.view nav > button:hover:after, div.menu.view nav a:hover:after {
  content: " <";
}

div.settings.view {
  display: flex;
  flex-direction: row;
  text-align: center;
  place-content: center;
  background-image: url(../graphics/menu/background-01.png);
  background-size: cover;
}
div.settings.view .panel {
  margin-top: 2em;
  width: 26em;
  display: flex;
  flex-direction: column;
  place-items: center;
}
div.settings.view .panel header {
  display: flex;
  flex-direction: row;
  place-items: center;
}
div.settings.view .panel header h1, div.settings.view .panel header h2, div.settings.view .panel header h3 {
  margin: 0;
}
div.settings.view .panel header .return {
  color: inherit;
  font-size: 2em;
  text-decoration: none;
}
div.settings.view .panel header .return > span {
  display: none;
}
div.settings.view .panel label {
  padding: 0.5em 1em;
  background-color: white;
  border-radius: 0.5em;
  width: 25em;
  text-align: left;
  box-shadow: black 1px 1px 2px;
}
div.settings.view .panel label:hover {
  box-shadow: black 2px 2px 4px;
}
div.settings.view .panel label > span.label {
  width: 100%;
  font-weight: 100;
}

div.play.view {
  background-color: #eee;
  display: flex;
  flex-direction: column;
}
div.play.view button {
  background: white;
  border-radius: 0.5em;
  border: 1px solid black;
}
div.play.view button:hover {
  background-color: #eee;
}
div.play.view > div.preview {
  background-color: none;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  height: calc(100% - 8em);
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
  transform-origin: 0 0;
  box-sizing: border-box;
  align-items: center;
}
div.play.view > div.preview > .inner {
  flex-shrink: 0;
  position: relative;
  transform-origin: center;
}
div.play.view > p {
  text-align: center;
}
div.play.view > ul {
  display: flex;
  flex-direction: row;
  place-content: center;
  place-items: center;
  list-style: none;
  padding: 0;
  gap: 0.5em;
  flex-wrap: wrap;
}
div.play.view > ul > li > button {
  display: block;
  width: 6em;
  height: 6em;
}
div.play.view button.selected {
  background: #cad5ff;
}
div.play.view a.menu, div.play.view button.menu {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5em 1em;
  border-radius: 0.5em;
  color: white;
  z-index: 999;
}
div.play.view a.menu:after, div.play.view button.menu:after {
  content: "☰";
}
div.play.view a.menu:hover, div.play.view button.menu:hover {
  font-weight: bolder;
  background: rgba(0, 0, 0, 0.4);
}
div.play.view a.menu > span, div.play.view button.menu > span {
  display: none;
}
div.play.view > div.text {
  width: 40em;
  margin: auto;
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 0.5em 1em;
}
div.play.view > div.text button {
  color: inherit;
  padding: 0.5em 1em;
  height: auto;
  position: absolute;
  right: -2em;
  color: black;
  bottom: 0;
}

div:has(> div.DeckSelectionState) > .preview > .inner {
  background-image: url(../graphics/play/CardSelectionRoom.png);
  background-size: cover;
  background-position: center;
}
div:has(> div.DeckSelectionState) > .preview > .inner:after {
  content: " ";
  display: block;
  height: 20em;
  width: 20em;
  position: absolute;
  left: 45%;
  top: 30%;
  background-image: url(../graphics/play/scenes/player.png);
  background-size: cover;
  background-position: center;
}

div:has(> div.intro01.ManualState) > .preview > .inner {
  background-image: url(../graphics/play/IntroScene.png);
  background-size: cover;
  background-position: center;
}

div.edit.view {
  display: flex;
  flex-direction: column;
}
div.edit.view > nav {
  flex-shrink: 0;
}

label {
  margin-top: 0.5em;
  display: flex;
  flex-direction: row;
}
label > span.label {
  width: 5em;
}
label > span.label.main {
  width: auto;
}

ul.tags {
  margin-bottom: 0.5em;
}
ul.tags > li {
  display: flex;
  width: 100%;
}
ul.tags > li > input {
  width: 100%;
}

button.return:before,
a.return:before {
  content: "◀";
  margin-right: 0.3em;
}

button.close:before,
a.close:before {
  content: "✕";
  margin-right: 0.3em;
}

ul.next > li {
  display: flex;
  flex-direction: row;
}
ul.next > li > label {
  width: 100%;
}
ul.next > li > label > .label {
  width: 100%;
}
ul.next > li > label > input {
  width: 3.2em;
}

li:has(> form > div > .delete:hover),
li:has(> .delete:hover) {
  background: #fbb;
}

div > form > label.preview {
  display: flex;
  flex-direction: column;
}

div.preview {
  position: relative;
  background: #eee;
  margin: 0.5em;
  margin-left: 4em;
  padding: 0;
  width: 16em;
  height: 9em;
  overflow: hidden;
  list-style: none;
}
div.preview > .inner {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  width: 1280px;
  height: 720px;
}
div.preview > .inner > img {
  position: absolute;
}
div.preview > img {
  position: absolute;
}