label.svelte-tcfv5u {
  display: block;
  color: #ccc;
}

label[separate].svelte-tcfv5u {
  line-height: 175%;
}

.inputBox.svelte-tcfv5u label:where(.svelte-tcfv5u) {
  font-size: 75%;
  padding-left: 5px;
}

select.svelte-tcfv5u {
  width: 100%;
  border: none;
  border-bottom: 2px solid grey;
  background-color: #222;
  color: #ffffff;
}

select[disabled].svelte-tcfv5u {
  background: unset;
}

select.svelte-tcfv5u:focus {
  border-color: lightgrey;
  outline: none;
  transition: border-color 0.2s ease-out;
  will-change: border-color;
}

select.default.svelte-tcfv5u {
  color: grey;
}
.token.svelte-1b8zlps {
  position: absolute;
  left: calc((var(--col) - var(--size) / 2) * 78px);
  top: calc((var(--row) - var(--size) / 2) * 78px);
  width: calc(var(--size) * 74px);
  height: calc(var(--size) * 74px);
  border-radius: 50%;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
  visibility: hidden;
  transition: all var(--timestep) linear;
}

.token.selected.svelte-1b8zlps {
  box-shadow: 0 0 30px 10px white;
  border-radius: 50%;
}

.token.move.svelte-1b8zlps {
  transition: all 1s linear;
}

.token.fade.svelte-1b8zlps {
  transition: opacity 2s;
  opacity: 0;
}

.token.visible.svelte-1b8zlps {
  visibility: visible;
}

.token.greyed.svelte-1b8zlps {
  filter: brightness(0.7) saturate(0%);
}

.token.svelte-1b8zlps > :where(.svelte-1b8zlps) {
  pointer-events: none;
}

.token.svelte-1b8zlps .portrait:where(.svelte-1b8zlps) {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(var(--size) * 74px - 10px);
  height: calc(var(--size) * 74px - 10px);
  clip-path: circle(50% at 50% 50%);
}

.token.svelte-1b8zlps .affiliation:where(.svelte-1b8zlps) {
  width: calc(var(--size) * 74px);
  height: calc(var(--size) * 74px);
  border-radius: 50%;
  display: flex;
  flex-flow: column-reverse nowrap;
  background: linear-gradient(330deg, var(--secondary-color), var(--primary-color), var(--primary-color), white);
}

.token.svelte-1b8zlps .damage:where(.svelte-1b8zlps) {
  width: calc(var(--size) * 74px);
  height: calc(var(--size) * 74px);
  border-radius: 50%;
  position: absolute;
}

.token.svelte-1b8zlps .name-background-clip:where(.svelte-1b8zlps) {
  width: 100%;
  height: 18px;
  overflow: hidden;
  position: relative;
  background: transparent;
}

.token.svelte-1b8zlps .name-background:where(.svelte-1b8zlps) {
  width: calc(var(--size) * 74px - 2px);
  height: calc(var(--size) * 74px - 2px);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 0.5px;
  background: linear-gradient(330deg, var(--secondary-color), var(--primary-color), var(--primary-color), white);
}

.token.svelte-1b8zlps .name-label:where(.svelte-1b8zlps) {
  display: inline-block;
  padding-top: calc(14px + 74px * (var(--size) - 1));
  width: calc(var(--size) * 74px - 2px);
  height: calc(var(--size) * 74px / 2);
  border-radius: 0 0 calc(var(--size) * 74px * 4) calc(var(--size) * 74px * 4);
  margin-top: 36px;
  background: linear-gradient(90deg, transparent 10%, var(--secondary-color), transparent 90%);
  /* background: grey */
}

.token.svelte-1b8zlps .name-text:where(.svelte-1b8zlps) {
  font-size: 14px;
  text-align: center;
  /* text-shadow: 1px 1px 3px white, 1px 1px 3px white color: black */
}

.affil-fellow.svelte-1b8zlps {
  --primary-color:	#0000ff;
  --secondary-color:	#000080;
}

.affil-friend.svelte-1b8zlps {
  --primary-color:	#1f991f;
  --secondary-color:	#136613;
}

.affil-neutral.svelte-1b8zlps {
  --primary-color:	#999999;
  --secondary-color:	#666666;
}

.affil-neutral.rank1.svelte-1b8zlps {
  --primary-color:	#999;
  --secondary-color:	#660;
}

.affil-neutral.rank2.svelte-1b8zlps {
  --primary-color:	#777;
  --secondary-color:	#421;
}

.affil-neutral.rank3.svelte-1b8zlps {
  --primary-color:	#555;
  --secondary-color:	#211;
}

.affil-enemy.rank1.svelte-1b8zlps {
  --primary-color:	#e6e60b;
  --secondary-color:	#686800;
}

.affil-enemy.rank2.svelte-1b8zlps {
  --primary-color:	#e6780b;
  --secondary-color:	#663b0f;
}

.affil-enemy.rank3.svelte-1b8zlps {
  --primary-color:	#cc1414;
  --secondary-color:	#660a0a;
}

.affil-enemy.rank.svelte-1b8zlps {
  --primary-color:	#7e17e6;
  --secondary-color:	#460d80;
}

.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) {
  position: absolute;
  left: -15px;
  top: 30px;
  width: 40px;
  height: 56px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) img:where(.svelte-1b8zlps) {
  filter: drop-shadow(0 0 2px black);
  color: red;
}

.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) .wounds:where(.svelte-1b8zlps),
.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) .injurs:where(.svelte-1b8zlps) {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
}

.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) .wounds:where(.svelte-1b8zlps) {
  margin-top: 3px;
  margin-left: 10px;
}

.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) .wound.lower:where(.svelte-1b8zlps) {
  transform: translateY(10px);
}

.wound.svelte-1b8zlps {
  fill: red;
}

.wound.treated.svelte-1b8zlps {
  fill: lightgray;
  stroke: red;
  stroke-width: 2px;
}

.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) .injur-s:where(.svelte-1b8zlps) {
  width: 14.75px;
  height: 14px;
}

.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) .injur-m:where(.svelte-1b8zlps) {
  width: 23.75px;
  height: 15.25px;
}

.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) .injur-l:where(.svelte-1b8zlps) {
  width: 31px;
  height: 17.5px;
}

.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) .injur-xl:where(.svelte-1b8zlps) {
  width: 39.5px;
  height: 20px;
}

.token.svelte-1b8zlps .damSymbol:where(.svelte-1b8zlps) .dam:where(.svelte-1b8zlps) {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}

.orientation.svelte-1b8zlps {
  position: absolute;
  width: calc(var(--size) * 74px);
  height: calc(var(--size) * 74px);
  rotate: calc(var(--orientation) * 1rad);
  left: 0;
  top: 0;
}

.activity.svelte-1b8zlps {
  position: absolute;
  width: calc(max(var(--success), 1) * 34px);
  height: calc(max(var(--success), 1) * 34px);
  translate: calc(var(--size) * 20px + 8px) calc(var(--success) * -8px - 16px);
  filter: drop-shadow(0 0 2px black);
}

.activity.state.svelte-1b8zlps {
  right: -4px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  translate: none;
}

.token.svelte-1b8zlps .orientationImg:where(.svelte-1b8zlps) {
  position: relative;
  width: calc(var(--size) * 74px);
  height: calc(var(--size) * 74px);
  /*transform: rotate(calc(var(--orientation) * 1rad))*/
}

.currentChar.svelte-1b8zlps {
  --visrange: 100	/* no restriction */;
}

.currentChar.svelte-1b8zlps:after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--visrange) * 74px + 30px);
  top: calc(-1 * var(--visrange) * 74px + 30px);
  width: calc(2 * var(--visrange) * 74px);
  height: calc(2 * var(--visrange) * 74px);
  border-radius: 100%;
  box-shadow: 0 0 0 8000px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/**** effects ****/
.effectPopup.svelte-1b8zlps {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 70%;
  visibility: unset;
  text-align: center;
}

.showEffect.svelte-1b8zlps {
  animation-duration: 1s;
  animation-name: svelte-1b8zlps-popup;
  animation-fill-mode: forwards;
}

@keyframes svelte-1b8zlps-popup {
  from {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
  to {
    visibility: hidden;
  }
}
.effectImage.svelte-1b8zlps {
  position: relative;
  left: -16px;
  top: -8px;
  width: 100px;
}

.effectText.svelte-1b8zlps {
  position: absolute;
  top: 10px;
  left: 0;
  width: 80px;
  font-size: large;
  font-weight: bold;
}

.areaEffect.svelte-1b8zlps {
  position: absolute;
  border-radius: 50%;
  opacity: 70%;
}
#pinch-zoom.svelte-1cd2q40 {
  grid-area: main;
  position: relative;
  scrollbar-width: none;
  user-select: none;
  -webkit-user-select: none;
}

#pinch-zoom.svelte-1cd2q40::-webkit-scrollbar {
  display: none;
}

#pinch-zoom.svelte-1cd2q40 > :where(.svelte-1cd2q40) :where(.svelte-1cd2q40):not(.token) {
  /*pointer-events: none*/
}

#pinch-zoom.marking.svelte-1cd2q40 {
  cursor: crosshair;
}

#mapImg.svelte-1cd2q40 {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  touch-action: none;
}

#positions.svelte-1cd2q40 {
  position: absolute;
  bottom: 4px;
  left: calc(var(--panel-width) + 16px);
  width: 248px;
  padding: 8px;
  background: black;
  opacity: 50%;
}
#positions.svelte-1cd2q40 p:where(.svelte-1cd2q40) {
  font-weight: bolder;
}
#positions.svelte-1cd2q40 button:where(.svelte-1cd2q40) {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background-color: rgb(13, 137, 137);
  filter: saturate(0);
}
#positions.svelte-1cd2q40 button.marking:where(.svelte-1cd2q40) {
  filter: saturate(1);
}
#positions.svelte-1cd2q40 button.marked:where(.svelte-1cd2q40) {
  filter: saturate(1) brightness(3);
}
#positions.svelte-1cd2q40 button:where(.svelte-1cd2q40) img:where(.svelte-1cd2q40) {
  width: 100%;
  filter: invert(1);
}
#positions.svelte-1cd2q40 .mapSelect-box:where(.svelte-1cd2q40) {
  display: flex;
  gap: 1em;
}

#effectsLayer.svelte-1cd2q40 {
  display: inline-block;
  position: absolute;
  opacity: 50%;
  background-color: yellow;
  border-radius: 50%;
}
/* (unused) #effectsLayer pinch-zoom {
  display: block;
  position: relative;
}*/

.layer.svelte-1cd2q40 {
  position: absolute;
}

.nopinch.svelte-1cd2q40 {
  pointer-events: none;
}

.miniButton.svelte-1cd2q40 {
  height: 24px;
  width: 30px;
  top: 6px;
}

#crossMark.svelte-1cd2q40 {
  position: absolute;
  width: 80px;
  height: 80px;
  animation: svelte-1cd2q40-colorCycle 1s linear 5 alternate;
  translate: -50% -50%;
}

@keyframes svelte-1cd2q40-colorCycle {
  from {
    color: white;
  }
  to {
    color: black;
  }
}
svg.svelte-1cd2q40 {
  position: absolute;
  pointer-events: none;
}

.arrow.svelte-1cd2q40 {
  marker-end: url(#arrowhead);
}

#arrowhead.svelte-1cd2q40 {
  fill: black;
}

.aimArea.svelte-1cd2q40 {
  position: absolute;
  opacity: 50%;
  background: yellow;
  border-radius: 50%;
}
h2.svelte-1fv031u {
  margin: 0;
}

button.svelte-1fv031u {
  background: none;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0.5em;
}

button[aria-expanded=true].svelte-1fv031u .vert:where(.svelte-1fv031u) {
  display: none;
}

button.svelte-1fv031u:focus svg:where(.svelte-1fv031u) {
  outline: 2px solid grey;
}

/* (unused) button [aria-expanded=true] rect {
  fill: grey;
}*/

svg.svelte-1fv031u {
  height: 0.7em;
  width: 0.7em;
}
/* (unused) .overview {
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
}*/

.groupBox.svelte-ogfn2v {
  display: flex;
  flex-wrap: wrap;
}
.advtCard.svelte-1i9p12f {
  width: 420px;
  border: grey 1px;
  border-radius: 4px;
  background-color: #333;
  margin: 8px;
}
.advtCard.svelte-1i9p12f h4:where(.svelte-1i9p12f) {
  margin: 8px 0 4px 0;
}
.advtCard.svelte-1i9p12f p:where(.svelte-1i9p12f) {
  padding: 0 0 8px 0;
}

.contentBox.svelte-1i9p12f {
  display: grid;
  grid-template-columns: 148px 28ch;
  column-gap: 8px;
}

.mapImg.svelte-1i9p12f {
  width: 128px;
  height: 128px;
  justify-self: center;
  /*object-fit: contain*/
}

.descript.svelte-1i9p12f {
  margin: 12px;
}
/* (unused) .close {
  float: right;
  width: 24px;
  right: 0;
  top: -16px;
}*/

/* (unused) dialog {
  min-width: 300px;
  min-height: 200px;
  background-color: darkgrey;
}*/

/* (unused) dialog fieldset {
  display: grid;
  grid-template-columns: 8ch auto;
  background-color: #222;
}*/

/* (unused) .buttonBar {
  margin: 8px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}*/

/* (unused) .miniButton {
  width: 138px;
  height: auto;
}*/

/* (unused) .miniButton img {
  width: 48px;
}*/

/* (unused) .miniButton span {
  position: relative;
  top: -16px;
}*/

.difficulty.svelte-lx9ip9 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  row-gap: 8px;
}

.difficulty.svelte-lx9ip9 span:where(.svelte-lx9ip9) {
  font-weight: bold;
  font-size: large;
}
a.svelte-grd1o {
  font-style: italic;
}
label.svelte-1wrjywa {
  display: block;
  color: #dddddd;
}

label[type=number].svelte-1wrjywa {
  width: 4ch;
  text-align: center;
  color: #aaa;
}

label[separate].svelte-1wrjywa {
  line-height: 175%;
}

.inputBox.svelte-1wrjywa label:where(.svelte-1wrjywa) {
  font-size: 75%;
  padding-left: 5px;
}

input.svelte-1wrjywa {
  width: 100%;
  border: none;
  border-bottom: 2px solid #867D7D;
  background-color: #222222;
  text-align: inherit;
}

input[type=number].svelte-1wrjywa {
  width: 100%;
  text-align: center;
  justify-self: center;
  /* max-width: 200px */
}

input[disabled].svelte-1wrjywa {
  background: unset;
  color: white;
}

input.svelte-1wrjywa:focus {
  border-color: #dddddd;
  outline: none;
  transition: border-color 0.2s ease-out;
  will-change: border-color;
}
/* (unused) .panel {
  grid-area: panel;
}*/
/* (unused) .panel h3 {
  margin-block: 1.3em 0.2em;
}*/

article.svelte-jwhve4 {
  grid-area: main;
}

#generalBox.svelte-jwhve4,
#featuredBox.svelte-jwhve4,
#adventureSect.svelte-jwhve4 {
  margin-right: 35px;
}

#nameBox.svelte-jwhve4 {
  width: 640px;
  margin: 0 auto 2em auto;
  font-size: larger;
  text-align: center;
}

.flexLayout.svelte-jwhve4 {
  display: flex;
  flex-wrap: wrap;
}

#generalBox.svelte-jwhve4 {
  min-width: 400px;
  width: min-content;
}

#generalBox.svelte-jwhve4 form:where(.svelte-jwhve4) {
  display: grid;
  grid-template-columns: 12ch auto;
  justify-items: flex-start;
}

#featuredBox.svelte-jwhve4 label:where(.svelte-jwhve4) {
  display: block;
}

#teaserBox.svelte-jwhve4 textarea:where(.svelte-jwhve4) {
  display: block;
  justify-self: stretch;
  margin: 4px 20px 4px 4px;
  resize: vertical;
}

#teaserBox.svelte-jwhve4 button:where(.svelte-jwhve4) {
  margin: 8px;
}

.teaser-text.svelte-jwhve4 {
  min-width: 100px;
}

.featuredContent.svelte-jwhve4 {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

.mapImg.svelte-jwhve4 {
  max-width: 400px;
  max-height: 400px;
}

.emptyBox.svelte-jwhve4 {
  width: 200px;
  height: 200px;
  background: #373535;
  border: #867D7D 1px solid;
}

input[type=file].svelte-jwhve4 {
  display: none;
}

label.svelte-jwhve4 {
  color: lightgrey;
}
/* (unused) #overview .panel {
  display: none;
}*/

#advtStructure.svelte-jxe2rd {
  height: 100%;
}

#sections-table.svelte-jxe2rd {
  background-color: #222222;
  border-radius: 15px 15px 0 0;
}

.sections-grid.svelte-jxe2rd {
  display: grid;
  grid-template-columns: 10ch 32ch 160px 1fr 2fr;
  row-gap: 16px;
}
.sections-grid.svelte-jxe2rd .grid-header:where(.svelte-jxe2rd) {
  border-bottom: 1px solid #514545;
  background-color: #053737;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}
.sections-grid.svelte-jxe2rd .grid-header:where(.svelte-jxe2rd):first-of-type {
  border-radius: 15px 0 0 0;
}
.sections-grid.svelte-jxe2rd .grid-header:where(.svelte-jxe2rd):last-of-type {
  border-radius: 0 15px 0 0;
}
/* (unused) .sections-grid .grid-content {
  height: calc(100% - 60px);
}*/

.section-row.svelte-jxe2rd {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  background-color: #333333;
  border-radius: 8px;
  padding: 8px;
}

button.section.svelte-jxe2rd {
  background-color: #94790A;
  color: white;
  font-weight: bold;
  padding: 5px 10px;
}

button.started.svelte-jxe2rd {
  background-color: darkgray;
}

figure.svelte-jxe2rd {
  display: inline-block;
}

.site.svelte-jxe2rd {
  justify-self: center;
}

.site.svelte-jxe2rd img:where(.svelte-jxe2rd) {
  max-width: 128px;
}

.dropzone.svelte-jxe2rd {
  width: 128px;
  height: auto;
}

.dropzone.svelte-jxe2rd:hover {
  filter: brightness(1.5);
}

.selectable.svelte-jxe2rd:hover {
  background-color: #303030;
  filter: brightness(1.5);
}

.image.svelte-jxe2rd {
  max-width: 64px;
  max-height: 64px;
  padding: 2px;
}
.image.exhibited.svelte-jxe2rd {
  border: rgb(13, 137, 137) 1px solid;
  border-radius: 4px;
}

menu.svelte-jxe2rd {
  border-radius: 15px;
  padding: 20px;
  background-color: #4A3C05;
}
menu.svelte-jxe2rd li:where(.svelte-jxe2rd) {
  position: relative;
  background-color: #6F5B08;
}
.fa-map.svelte-109l1lx {
  margin: 1em auto 2em auto;
}

.sitesGrid.svelte-109l1lx {
  display: grid;
  grid-template-columns: 140px auto;
  grid-row-gap: 16px;
}

h4.svelte-109l1lx {
  margin: 0;
}

img.svelte-109l1lx {
  height: 112px;
}
tr.svelte-alrch td:where(.svelte-alrch):focus {
  background: black;
  color: #ffffff;
}
.juxta.svelte-yey5w7 {
  display: flex;
}

#nameBox.svelte-yey5w7 {
  width: 640px;
  margin: 0 0 2em 0;
  font-size: larger;
}

.flexLayout.svelte-yey5w7 {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

#siteBox.svelte-yey5w7 img:where(.svelte-yey5w7) {
  max-width: 400px;
  max-height: 400px;
}

#plotBox.svelte-yey5w7 {
  width: min(70vw, 620px);
}

#plot.svelte-yey5w7 {
  width: 100%;
  min-height: 480px;
  field-sizing: content;
  resize: none;
  margin: 8px;
  background: #222;
  border: gray solid 1px;
  font-size: large;
  line-height: 1.3em;
}

#plotBox.svelte-yey5w7 button:where(.svelte-yey5w7) {
  margin: 0 0 0 auto;
}

#siteBox.svelte-yey5w7 {
  width: max(278px, 25%);
}

#siteBox.svelte-yey5w7 button:where(.svelte-yey5w7) {
  width: fit-content;
  height: fit-content;
}

#siteBox.svelte-yey5w7 img:where(.svelte-yey5w7) {
  min-width: 256px;
}

#generalBox.svelte-yey5w7 {
  position: relative;
}

#imagesBox.svelte-yey5w7 {
  flex: 1;
}

.imagesForm.svelte-yey5w7 {
  display: flex;
  margin: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.image.svelte-yey5w7 {
  position: relative;
}
.image.svelte-yey5w7 h3:where(.svelte-yey5w7) {
  margin: 0.5em;
}
.image.svelte-yey5w7 .delete:where(.svelte-yey5w7) {
  position: absolute;
  right: 4px;
  top: 38px;
}
.image.svelte-yey5w7 img:where(.svelte-yey5w7) {
  min-width: 128px;
  min-height: 128px;
  max-width: 256px;
  max-height: 256px;
  display: block;
  margin: 0 auto;
}
.image.svelte-yey5w7 img.exhibited:where(.svelte-yey5w7) {
  border: rgb(13, 137, 137) 1px solid;
  border-radius: 4px;
}

.upload.svelte-yey5w7 {
  align-self: center;
}
.upload.svelte-yey5w7 label:where(.svelte-yey5w7) {
  height: 100%;
}

#exhibit-details.svelte-yey5w7 {
  padding: 8px;
  overflow: hidden;
}

.empty-exhibit.svelte-yey5w7 {
  background: #373535;
  width: 128px;
}

#delete-section.svelte-yey5w7 {
  width: 112px;
  height: 48px;
  white-space: normal;
}
.floatingBox.svelte-1lzuemw {
  position: absolute;
  left: 8px;
  width: 260px;
  z-index: 10;
  background: #222;
  border: white 1px solid;
}

.floatingBox.svelte-1lzuemw button:where(.svelte-1lzuemw) {
  background-color: grey;
}

.layerBox.svelte-1lzuemw {
  position: absolute;
  z-index: 10;
  right: 8px;
  height: 128px;
}

.layerBox.svelte-1lzuemw img:where(.svelte-1lzuemw) {
  max-width: 120px;
  max-height: 96px;
  margin: 8px;
}

.datatable.svelte-1lzuemw {
  margin: 8px;
  width: 256px;
  display: grid;
  grid-template-columns: 5ch 4ch 11ch 12ch;
  column-gap: 8px;
  align-content: center;
}

.datatable.svelte-1lzuemw p:where(.svelte-1lzuemw) {
  margin: 3px;
  padding: 0;
}

.dummyToken.svelte-1lzuemw {
  position: absolute;
  left: 50%;
  top: 50%;
  --visrange: 100	/* no restriction */;
}

.dummyToken.svelte-1lzuemw:after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--visrange) * 74px + 30px);
  top: calc(-1 * var(--visrange) * 74px + 30px);
  width: calc(2 * var(--visrange) * 74px);
  height: calc(2 * var(--visrange) * 74px);
  border-radius: 100%;
  box-shadow: 0 0 0 8000px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.siteCard.svelte-1l90j57 {
  width: 250px;
  border: grey 1px;
  border-radius: 4px;
  background-color: #333;
  margin: 6px;
}

.siteCard.maponly.svelte-1l90j57 {
  width: 163px;
}

/* (unused) .siteCard h4 {
  margin: 8px 0 4px 0;
}*/

.siteCard.svelte-1l90j57 p:where(.svelte-1l90j57) {
  padding: 0 0 8px 0;
}

figure.svelte-1l90j57 {
  justify-self: center;
  margin: max(6%, 8px);
  /*object-fit: contain*/
}

figure.svelte-1l90j57 img:where(.svelte-1l90j57) {
  width: 100%;
  height: 128px;
  object-fit: contain;
}

figcaption.svelte-1l90j57 {
  color: darkgrey;
  text-align: right;
}

.description.svelte-1l90j57 {
  margin: 12px;
}
.content.svelte-1a0i0b9 {
  display: flex;
  flex-wrap: wrap;
}

/* (unused) .nameBox {
  width: 640px;
  margin: 0 auto 2em auto;
  font-size: larger;
  text-align: center;
}*/

.imagesForm.svelte-1a0i0b9 {
  display: flex;
  flex-wrap: wrap;
  margin: 16px;
}

.image.svelte-1a0i0b9 {
  position: relative;
}

.image.svelte-1a0i0b9 .delete:where(.svelte-1a0i0b9) {
  position: absolute;
  right: 0;
  top: 0;
}

.image.svelte-1a0i0b9 img:where(.svelte-1a0i0b9) {
  min-width: 128px;
  min-height: 128px;
  max-width: 256px;
  max-height: 256px;
  display: block;
  margin: 0 auto;
}

.image.svelte-1a0i0b9 input[type=text]:where(.svelte-1a0i0b9) {
  border: none;
  margin: 4px 1ch;
  text-align: center;
}
/* (unused) .tab-container {
  height: 35px;
  overflow: hidden;
}*/

/* (unused) .tab-container.high {
  height: 65px;
}*/

/* (unused) .tab-layout {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  list-style-type: none;
  margin-block: 0;
  padding-inline: 0;
  border-bottom: 3px solid #085252;
  position: relative;
  gap: 5px;
  margin-top: 50px;
}*/

/* (unused) .tab-item {
  padding: 5px 15px 10px 15px;
  flex: 1;
  border-radius: 10px 10px 0 0;
  text-align: center;
  cursor: pointer;
  transition: 0.5s;
  color: white;
  background-color: #222222;
  filter: drop-shadow(0 0 2px black);
  height: 70px;
  min-width: 100px;
  margin-top: -45px;
  position: relative;
}*/

/* (unused) .tab-item:hover {
  filter: brightness(100%);
  background-color: #0D8989;
}*/

/* (unused) .tab-item.selected {
  background-color: #373535;
  font-weight: 600;
}*/

/* (unused) .tab-item.selected:hover {
  filter: none;
  background-color: #085252;
}*/

/* (unused) .tab-page {
  background-color: #373535;
}*/

/* (unused) .button-box {
  margin: 24px;
  display: flex;
  justify-content: center;
}*/
#obstaclesPage.svelte-28zvxf {
  overflow: unset;
}

canvas.svelte-28zvxf {
  position: absolute;
  left: 420px;
  top: 0;
  width: 800px;
  height: 100%;
  z-index: 10;
}
.card.svelte-8bf2l8 {
  position: relative;
  width: 360px;
  margin: 4px;
  padding: 4px;
  border: 2px solid black;
  display: grid;
  grid-template-columns: 64px repeat(4, 1fr);
  column-gap: 2ch;
}

.Character.svelte-8bf2l8 {
  background-color: #222;
}

.Variant.svelte-8bf2l8 {
  background-color: #111;
}

.CharacterSnippet.svelte-8bf2l8 {
  background-color: #000;
}

.icon.svelte-8bf2l8 {
  justify-self: center;
  align-self: center;
}

figure.svelte-8bf2l8 img:where(.svelte-8bf2l8) {
  pointer-events: auto;
  width: 64px;
  height: 64px;
}

.appear-attribs.svelte-8bf2l8 {
  grid-column: 1/span 5;
  margin: 8px;
  display: grid;
  grid-template-columns: 8ch 1fr 8ch 2fr;
}
.grade.svelte-17k16bk {
  text-align: center;
}

.weight.svelte-17k16bk {
  width: 8ch;
}

.greyed.svelte-17k16bk {
  color: grey;
}

.rightAlign.svelte-17k16bk {
  padding: 0 8px;
  text-align: right;
}
h3.svelte-1gpzlwi {
  margin-block: 1.3em 0.2em;
}
.upperBox.svelte-jg7jxn {
  display: flex;
}

figure.svelte-jg7jxn {
  display: inline-block;
  margin: 16px;
}

figure.svelte-jg7jxn img:where(.svelte-jg7jxn) {
  width: 64px;
  height: 64px;
}

/* (unused) figcaption {
  text-align: center;
}*/

.general.svelte-jg7jxn {
  display: grid;
  grid-template-columns: 128px repeat(3, minmax(100px, 200px));
  gap: 8px;
}

.portrait.svelte-jg7jxn {
  grid-area: 1/1/span 3;
  align-self: end;
  justify-self: end;
  margin: 0;
}

.portrait.svelte-jg7jxn img:where(.svelte-jg7jxn) {
  width: 120px;
  height: 120px;
}

h2.svelte-jg7jxn {
  white-space: nowrap;
}

.subgrid.svelte-jg7jxn {
  display: flex;
  justify-content: space-evenly;
  gap: 1ch;
}

button.svelte-jg7jxn {
  height: 32px;
  align-self: center;
}

.datagrid.svelte-jg7jxn {
  display: flex;
}

fieldset.svelte-jg7jxn {
  margin: 4px;
  display: grid;
  align-content: start;
  gap: 4px 2ch;
}

fieldset.profics.svelte-jg7jxn {
  grid-template-columns: auto 4ch;
}

fieldset.two-columned.svelte-jg7jxn {
  grid-template-columns: 12ch 4ch;
}

fieldset.three-columned.svelte-jg7jxn {
  grid-template-columns: 6ch repeat(2, 4ch);
}

/* (unused) fieldset.five-columned {
  grid-template-columns: 4ch 2ch 4ch 2ch 5ch;
}*/

fieldset.weapons.svelte-jg7jxn {
  grid-template-columns: 8ch auto 2ch;
}

/* (unused) span {
  line-height: 175%;
}*/

/* (unused) fieldset label.long {
  grid-column: 1/span 2;
}*/

/* (unused) fieldset input {
  width: 4ch;
}*/

h4.svelte-jg7jxn {
  grid-column: span 2;
}

.buttonBar.svelte-jg7jxn button:where(.svelte-jg7jxn) {
  margin: 1em;
  width: 120px;
  height: unset;
}

/* (unused) button.variant {
  display: block;
  background-color: darkgrey;
}*/

button.separate.svelte-jg7jxn {
  display: block;
  margin-top: 4em;
  background-color: darkorange;
}

.delete.svelte-jg7jxn {
  font-size: 20px;
  color: var(--color-grey);
}
.deployList.svelte-29ylkl {
  display: grid;
  grid-template-columns: 3ch 1fr 1fr 1fr 2fr;
  grid-gap: 8px;
}

.floatingBox.svelte-29ylkl {
  position: absolute;
  left: 8px;
  width: 260px;
  z-index: 10;
  background: #222;
  border: white 1px solid;
}

.floatingBox.svelte-29ylkl button:where(.svelte-29ylkl) {
  background-color: grey;
}

.layerBox.svelte-29ylkl {
  position: absolute;
  z-index: 10;
  right: 8px;
  height: 128px;
}

.layerBox.svelte-29ylkl img:where(.svelte-29ylkl) {
  max-width: 120px;
  max-height: 96px;
  margin: 8px;
}

.datatable.svelte-29ylkl {
  margin: 8px;
  width: 256px;
  display: grid;
  grid-template-columns: 5ch 4ch 11ch 12ch;
  column-gap: 8px;
  align-content: center;
}

.datatable.svelte-29ylkl p:where(.svelte-29ylkl) {
  margin: 3px;
  padding: 0;
}

.dummyToken.svelte-29ylkl {
  position: absolute;
  left: 50%;
  top: 50%;
  --visrange: 100	/* no restriction */;
}

.dummyToken.svelte-29ylkl:after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--visrange) * 74px + 30px);
  top: calc(-1 * var(--visrange) * 74px + 30px);
  width: calc(2 * var(--visrange) * 74px);
  height: calc(2 * var(--visrange) * 74px);
  border-radius: 100%;
  box-shadow: 0 0 0 8000px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

dialog.svelte-29ylkl {
  max-width: 80%;
  max-height: 80%;
  background-color: #000000;
}
#prepare.svelte-1v5i8zg {
  display: grid;
  grid-template-columns: var(--menu-width) fit-content(calc(var(--panel-width) - var(--menu-width))) auto;
  grid-template-rows: 51px 51px auto fit-content(30px);
  grid-template-areas: "... ... pnav" "... ... head" "panel panel main" "... ... foot";
}

/* (unused) header h1 {
  margin: 0;
  text-align: center;
}*/

.pnav.svelte-1v5i8zg {
  position: relative;
  z-index: 10;
  background-color: #053737;
  padding: 8px;
  display: flex;
  gap: 16px;
}
.pnav.svelte-1v5i8zg button.back:where(.svelte-1v5i8zg) {
  margin-right: 10px;
}
h1.svelte-1q4w0bp {
  margin-left: 9em;
}

.heroes-box.svelte-1q4w0bp {
  display: flex;
  flex-wrap: wrap;
  padding: 32px;
  gap: 16px;
  justify-content: space-evenly;
}

.hero-card.svelte-1q4w0bp {
  display: grid;
  grid-template-columns: 140px repeat(2, minmax(128px, 256px)) 8ch;
  padding: 16px;
  gap: 8px;
  background-color: #333333;
}

figure.svelte-1q4w0bp {
  display: inline-block;
  margin: 16px;
}

/* (unused) figcaption {
  text-align: center;
}*/

.portrait.svelte-1q4w0bp {
  grid-area: 1/1/span 3;
  align-self: end;
  justify-self: end;
  margin: 0;
}

.portrait.svelte-1q4w0bp img:where(.svelte-1q4w0bp) {
  width: 128px;
  height: 128px;
  margin: 12px;
}

/* (unused) button {
  display: inline-block;
}*/

/* (unused) button.terminate {
  float: right;
}*/
label.svelte-afhbd7 {
  display: block;
  color: #dddddd;
}

label[type=number].svelte-afhbd7 {
  width: 4ch;
  text-align: center;
  color: #aaa;
}

label[separate].svelte-afhbd7 {
  line-height: 175%;
}

.outputBox.svelte-afhbd7 {
  display: flex;
  flex-direction: column;
}
.outputBox.svelte-afhbd7 label:where(.svelte-afhbd7) {
  font-size: 75%;
  padding-left: 5px;
}

.output.svelte-afhbd7 {
  width: 100%;
  min-height: 27px;
  padding-top: 5px;
  border: none;
  border-bottom: 2px solid #867D7D;
  background-color: #222222;
  text-align: inherit;
  background: unset;
  color: white;
}
.output.number.svelte-afhbd7 {
  width: 100%;
  text-align: center;
  justify-self: center;
  /* max-width: 200px */
}
h1.svelte-153r7ys {
  margin: 1.2em;
}

.roles.svelte-153r7ys {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.archetypes-box.svelte-153r7ys {
  display: flex;
  flex-wrap: wrap;
  padding: 32px;
  gap: 16px;
  justify-content: space-evenly;
}

.archetype-card.svelte-153r7ys {
  position: relative;
  width: 100%;
  padding: 16px;
  display: grid;
  grid-template-columns: 140px 16ch auto;
  gap: 8px;
  background-color: #333333;
}

figure.svelte-153r7ys {
  display: inline-block;
  margin: 16px;
}

/* (unused) figcaption {
  text-align: center;
}*/

.portrait.svelte-153r7ys {
  grid-area: 1/1/span 4;
  align-self: end;
  justify-self: end;
  margin: 0;
}

.portrait.svelte-153r7ys img:where(.svelte-153r7ys) {
  width: 128px;
  margin: 12px;
}
h1.svelte-7h0e5d {
  margin-left: 9em;
}

/*** character banner ***/
.bannerBox.svelte-7h0e5d {
  position: relative;
  left: var(--menu-width);
  height: 140px;
}

.bannerBox.svelte-7h0e5d img:where(.svelte-7h0e5d) {
  width: 640px;
  height: 140px;
}

#char-name.svelte-7h0e5d {
  position: absolute;
  left: 80px;
  top: 18px;
  color: black;
  font-family: Tahoma, sans-serif;
  font-size: 48pt;
  font-weight: bolder;
}

#char-level.svelte-7h0e5d {
  position: absolute;
  left: 476px;
  top: 40px;
  width: 2ch;
  text-align: center;
  color: black;
  font-family: Tahoma, sans-serif;
  font-size: 40pt;
  font-weight: bold;
}

/*** description fields ***/
.upperBox.svelte-7h0e5d {
  display: flex;
}

figure.svelte-7h0e5d {
  display: inline-block;
  margin: 16px;
}

figure.svelte-7h0e5d img:where(.svelte-7h0e5d) {
  width: 64px;
  height: 64px;
}

/* (unused) figcaption {
  text-align: center;
}*/

.general.svelte-7h0e5d {
  display: grid;
  grid-template-columns: 224px repeat(2, minmax(128px, 256px)) 8ch;
  gap: 8px;
}

.portrait.svelte-7h0e5d {
  grid-area: 1/1/span 4;
  align-self: end;
  justify-self: end;
  margin: 0;
}

.portrait.svelte-7h0e5d img:where(.svelte-7h0e5d) {
  width: 200px;
  height: 200px;
  margin: 12px;
}

/* (unused) h2 {
  white-space: nowrap;
}*/

/* (unused) .subgrid {
  display: flex;
  justify-content: space-evenly;
  gap: 1ch;
}*/

/* (unused) button {
  height: 32px;
  align-self: center;
}*/

/* (unused) .datagrid {
  display: flex;
}*/

/* (unused) fieldset {
  margin: 4px;
  display: grid;
  align-content: start;
  gap: 4px 2ch;
}*/

/* (unused) fieldset.skills {
  grid-template-columns: auto 4ch;
}*/

/* (unused) fieldset.two-columned {
  grid-template-columns: 12ch 4ch;
}*/

/* (unused) fieldset.three-columned {
  grid-template-columns: 6ch repeat(2, 4ch);
}*/

/* (unused) fieldset.five-columned {
  grid-template-columns: 4ch 2ch 4ch 2ch 5ch;
}*/

/* (unused) span {
  line-height: 175%;
}*/

/* (unused) fieldset label.long {
  grid-column: 1/span 2;
}*/

/* (unused) fieldset input {
  width: 4ch;
}*/

/* (unused) h4 {
  grid-column: span 2;
}*/

.textbox.svelte-7h0e5d label:where(.svelte-7h0e5d) {
  vertical-align: top;
}

.textbox.svelte-7h0e5d textarea:where(.svelte-7h0e5d) {
  display: block;
  margin: 16px 2ch;
  width: 800px;
}
h1.svelte-3ku42c {
  margin-left: 9em;
}

.traitsBox.svelte-3ku42c {
  margin: 0 0 16px 16px;
  width: 85%;
  display: grid;
  grid-template-columns: 16ch 6ch 5ch auto;
  gap: 0.5ch 2ch;
}
.traitsBox.svelte-3ku42c b:where(.svelte-3ku42c) {
  margin-bottom: 12px;
  border-bottom: grey solid 1px;
  text-align: center;
}
.traitsBox.svelte-3ku42c span:where(.svelte-3ku42c) {
  padding-top: 5px;
}
/* (unused) ul li {
  padding: 4px 0;
}*/

.overview.svelte-t3njks {
  margin: 1ch;
  background-color: darkslategrey;
  padding: 8px;
}

.upgrade-message.svelte-t3njks {
  margin: 1ch;
  text-align: center;
  font-weight: bold;
}

#experience.svelte-t3njks {
  display: grid;
  grid-template-columns: auto 6ch;
  column-gap: 2ch;
}

.button-box.svelte-t3njks {
  margin: 12px 0;
  display: flex;
  justify-content: space-around;
}

/* (unused) .upgrades {
  display: grid;
  margin: 2ch;
  grid-template-columns: auto 4ch 3ch 7ch;
}*/

/* (unused) .upgrades span {
  margin-top: 5px;
}*/

/* (unused) .cash, .outfit {
  display: grid;
  margin: 2ch;
  grid-template-columns: 1fr 6ch 6ch;
  column-gap: 2ch;
  font-weight: bold;
  font-size: large;
}*/

/* (unused) .outfit {
  grid-template-columns: 1fr 1fr 1fr;
}*/

/* (unused) .equipment {
  display: grid;
  margin: 2ch;
  grid-template-columns: 1fr 2fr;
}*/

/* (unused) .manage-gear {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2ch;
}*/
h1.svelte-eqdnvu {
  margin-left: 9em;
}

.profics-table.svelte-eqdnvu {
  margin: 0 0 16px 16px;
  display: grid;
  grid-template-columns: 16ch 6ch 2fr 5ch 4ch 6ch 7ch 1fr;
  gap: 0.5ch 2ch;
}
.profics-table.upgrading.svelte-eqdnvu {
  grid-template-columns: 16ch 6ch 1fr 5ch 1ch 3ch 6ch 4ch 6ch 7ch auto;
}
.profics-table.svelte-eqdnvu span:where(.svelte-eqdnvu) {
  padding-top: 6px;
}
.profics-table.svelte-eqdnvu .centred:where(.svelte-eqdnvu) {
  text-align: center;
}

b.svelte-eqdnvu {
  margin-bottom: 12px;
  border-bottom: grey solid 1px;
  text-align: center;
}

.cost.svelte-eqdnvu {
  text-align: center;
  font-size: small;
  padding-top: 7px;
}

.spent.svelte-eqdnvu {
  text-align: right;
  font-size: small;
  padding-top: 7px;
}

.total.svelte-eqdnvu {
  text-align: center;
  padding: 6px 0 0 0;
  font-weight: bold;
  border-bottom: 2px solid grey;
  background-color: #111;
}

.domains.svelte-eqdnvu {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.domain-block.svelte-eqdnvu {
  margin-bottom: 8px;
}

.abilities-box.svelte-eqdnvu {
  grid-column: 1/-1;
  margin: 0 1em 1em 1em;
  padding: 0.5em;
  border: inset grey;
}

.powers-box.svelte-eqdnvu {
  display: flex;
  flex-direction: column;
}
.powers-box.svelte-eqdnvu li:where(.svelte-eqdnvu) {
  margin-bottom: 8px;
}

.talents.svelte-eqdnvu {
  display: flex;
  flex-flow: row wrap;
}

.powers.svelte-eqdnvu {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  accent-color: #0D8989;
}

input[type=checkbox].svelte-eqdnvu {
  margin-right: 12px;
}
input[type=checkbox].svelte-eqdnvu:disabled:checked {
  outline: 2px solid #0D8989;
}

.ability.svelte-eqdnvu {
  margin: 4px;
  border: 1px solid #867D7D;
  border-radius: 8px;
  padding: 4px 8px;
  background-color: #222222;
}
.ability.svelte-eqdnvu label:where(.svelte-eqdnvu) {
  color: hsl(var(--hue), 100%, 75%);
}
.ability.svelte-eqdnvu:not(.learned) {
  border: none;
}
.ability.learned.svelte-eqdnvu {
  background-color: #333333;
}
.ability.disabled.svelte-eqdnvu:not(.learned) {
  filter: grayscale(1) brightness(0.5);
}
.ability.hurt.svelte-eqdnvu {
  --hue: 0;
}
.ability.harm.svelte-eqdnvu {
  --hue: 28;
}
.ability.nerf.svelte-eqdnvu {
  --hue: 56;
}
.ability.heal.svelte-eqdnvu {
  --hue: 120;
}
.ability.save.svelte-eqdnvu {
  --hue: 150;
}
.ability.buff.svelte-eqdnvu {
  --hue: 180;
}
.ability.abil.svelte-eqdnvu {
  --hue: 240;
}
.ability.envm.svelte-eqdnvu {
  --hue: 270;
}
.ability.move.svelte-eqdnvu {
  --hue: 300;
}
.ability.chrg.svelte-eqdnvu {
  --hue: 330;
}

dialog.svelte-eqdnvu {
  font-size: large;
  left: -25%;
}
dialog.svelte-eqdnvu .realms:where(.svelte-eqdnvu) {
  display: flex;
}
dialog.svelte-eqdnvu .realm:where(.svelte-eqdnvu) h2:where(.svelte-eqdnvu) {
  text-align: center;
}
dialog.svelte-eqdnvu .close:where(.svelte-eqdnvu) {
  position: absolute;
  right: 0;
  top: 0;
  float: right;
  font-size: larger;
  color: lightgray;
}
dialog.svelte-eqdnvu .close:where(.svelte-eqdnvu):hover {
  color: lightcoral;
}
#equipment.svelte-6116mk {
  border: 1px solid grey;
}

/* (unused) ul li {
  padding: 4px 0;
}*/

/* (unused) .overview {
  margin: 1ch;
  background-color: darkslategrey;
}*/

/* (unused) .upgrade-message {
  margin: 2ch;
  text-align: center;
  font-weight: bold;
}*/

/* (unused) #experience {
  display: grid;
  grid-template-columns: auto 6ch 3ch 6ch;
  column-gap: 2ch;
}*/

/* (unused) .button-box {
  margin: 12px 0;
  display: flex;
  justify-content: space-around;
}*/

/* (unused) .upgrades {
  display: grid;
  margin: 2ch;
  grid-template-columns: auto 4ch 3ch 7ch;
}*/

/* (unused) .upgrades span {
  margin-top: 5px;
}*/

.cash.svelte-6116mk, .outfit.svelte-6116mk {
  display: grid;
  margin: 2ch;
  grid-template-columns: 1fr 6ch 6ch;
  column-gap: 2ch;
  font-weight: bold;
  font-size: large;
}

.outfit.svelte-6116mk {
  grid-template-columns: 1fr 1fr 1fr;
}

.equipment.svelte-6116mk {
  display: grid;
  margin: 2ch;
  grid-template-columns: 1fr 2fr;
}

.manage-gear.svelte-6116mk {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2ch;
}
h1.svelte-1sabi2 {
  margin-left: 9em;
}

/* (unused) .flexBox {
  display: grid;
  grid-template-columns: 360px auto;
  gap: 1em;
}*/
/* (unused) .flexBox.tableOnly {
  grid-template-columns: 0 auto;
}*/

/* (unused) .equipment {
  max-width: 380px;
  flex-shrink: 1;
}*/

.storages.svelte-1sabi2 {
  min-width: 1024px;
  flex-shrink: 3;
}

/* (unused) .gearTable {
  height: 100%;
  width: 100%;
}*/

.grade.svelte-1sabi2 {
  text-align: center;
}

.weight.svelte-1sabi2 {
  width: 8ch;
}

.greyed.svelte-1sabi2 {
  color: grey;
}

.rightAlign.svelte-1sabi2 {
  padding: 0 8px;
  text-align: right;
}
h1.svelte-ub0w0n {
  margin-left: 9em;
}

.games-list.svelte-ub0w0n {
  margin: 16px;
  display: grid;
  grid-template-columns: 5ch 2fr 1fr 12ch 10ch 4ch;
  gap: 0.5ch 2ch;
}

/* (unused) .content {
  height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: none;
  grid-auto-rows: minmax(36px, max-content);
}*/

b.svelte-ub0w0n {
  margin: 0 0 12px 0;
  border-bottom: grey solid 1px;
  text-align: center;
}

span.svelte-ub0w0n {
  align-self: center;
}
#actionCard.svelte-1f7ywc6 {
  position: relative;
  width: 400px;
  overflow: auto;
  font-family: "EB Garamond", serif;
  color: black;
  padding: 8px;
  break-inside: avoid;
}

.background.svelte-1f7ywc6 {
  border-radius: 12px;
}

.close.svelte-1f7ywc6 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close.svelte-1f7ywc6:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.actionName.svelte-1f7ywc6 {
  margin: 0;
  padding: 0.5em;
  font-size: 150%;
}

.actionName.active.svelte-1f7ywc6 {
  font-style: normal;
  text-decoration: none;
}

.actionName.proactive.svelte-1f7ywc6 {
  font-style: italic;
  text-decoration: none;
}

.actionName.reactive.svelte-1f7ywc6 {
  font-style: normal;
  text-decoration: underline;
}

.actionName.ultimative.svelte-1f7ywc6 {
  font-style: italic;
  text-decoration: underline;
}

.domainsymbol.svelte-1f7ywc6 {
  position: absolute;
  right: 8px;
  top: 8px;
  display: inline-block;
  height: 4em;
  width: 4em;
  box-sizing: border-box;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.inner.svelte-1f7ywc6 {
  margin: 0 1em;
  padding: 4px;
}

.powerHeader.svelte-1f7ywc6 {
  display: grid;
  grid-template-columns: 8ch auto;
  padding: 8px;
  font-weight: bolder;
}

.powerCoding.svelte-1f7ywc6 {
  white-space: pre-line;
}

.descript.svelte-1f7ywc6 {
  margin: 4px;
  max-height: 40vh;
  overflow-y: auto;
}

/* (unused) #abstractInput {
  margin: 8px 15px 0 15px;
  width: calc(100% - 30px);
}*/

.cardFooter.svelte-1f7ywc6 {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 0.5em 0.5em;
  font-size: 150%;
}

.powerExecution.svelte-1f7ywc6 {
  flex: 1;
  text-align: left;
  text-transform: capitalize;
  font-weight: bold;
}

.powerExertion.svelte-1f7ywc6 {
  flex: 1;
  text-align: center;
  font-weight: bold;
}

.powerTerm.svelte-1f7ywc6 {
  flex: 1;
  text-align: right;
  font-weight: bold;
}

.powerTyped_progressiv.svelte-1f7ywc6 {
  background: linear-gradient(to top, white 0%, lightgray 100%) !important;
}
.skill-card.svelte-1c9wv0n {
  flex: none;
  width: 540px;
  user-select: none;
}

.outer-box.svelte-1c9wv0n {
  position: relative;
  width: 540px;
  min-height: 540px;
  background: #e8e7e3 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 5px);
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.2), inset 0 0 90px rgba(60, 60, 55, 0.1);
  display: flex;
}

.left-rail.svelte-1c9wv0n {
  flex: none;
  width: 84px;
  border-right: 1px solid #bcbcb6;
  background: #dedcd7;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 0;
  position: relative;
}

.cat-icon-box.svelte-1c9wv0n {
  width: 44px;
  height: 44px;
  border: 1px solid #57574f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.cat-icon.svelte-1c9wv0n {
  width: 15px;
  height: 15px;
  border: 1.5px solid #2b2b27;
  transform: rotate(45deg);
}

.cat-label.svelte-1c9wv0n {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  color: #56564f;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.content-box.svelte-1c9wv0n {
  flex: 1;
  position: relative;
  box-sizing: border-box;
  padding: 44px 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* (unused) .innter-box {
  position: absolute;
  inset: 14px;
  border: 1px solid #c8c7c2;
  pointer-events: none;
}*/

.name.svelte-1c9wv0n {
  z-index: 1;
  margin: 8px 0 0;
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.04;
  color: #1f1f1c;
  letter-spacing: 0.01em;
}

.divider.svelte-1c9wv0n {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 16px;
  z-index: 1;
}

.descript.svelte-1c9wv0n {
  z-index: 1;
  margin: 0;
  font-family: "EB Garamond", serif;
  font-size: 17.5px;
  line-height: 1.6;
  color: #33332e;
  max-width: 340px;
  text-wrap: pretty;
}

/* (unused) #descript {
  width: 100%;
  height: 100%;
}*/

.related-box.svelte-1c9wv0n {
  z-index: 1;
  width: 100%;
  margin-top: 24px;
}

.related-header.svelte-1c9wv0n {
  font-family: "Cinzel", serif;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: #6f6f69;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.related-links.svelte-1c9wv0n {
  display: flex;
  justify-content: center;
  gap: 8px 22px;
  flex-wrap: wrap;
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 16px;
  color: #3d3d38;
  cursor: pointer;
}
.help.svelte-uk4sc5 {
  position: relative;
  height: 99%;
}

.close.svelte-uk4sc5 {
  position: absolute;
  right: 16px;
  top: 8px;
  font-size: larger;
  color: lightgray;
  z-index: 10;
}

.close.svelte-uk4sc5:hover {
  color: lightcoral;
}

.action-card.svelte-uk4sc5 {
  align-self: center;
  justify-self: center;
}

.documentation.svelte-uk4sc5 {
  margin: 8px;
  border: solid gray;
  border-radius: 14px;
  padding: 8px;
  display: grid;
  grid-template-rows: auto auto 64px;
  flex-direction: column;
  background-color: #dddddd;
  color: #000000;
  font-size: larger;
}
.documentation.svelte-uk4sc5 .doc-text:where(.svelte-uk4sc5) {
  overflow-y: auto;
  scrollbar-width: none;
}
.documentation.svelte-uk4sc5 .doc-text:where(.svelte-uk4sc5)::-webkit-scrollbar {
  display: none;
}

.doc-nav.svelte-uk4sc5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding-inline: 0;
}
#manage.svelte-1d8t6ey {
  --panel-width: 380px;
  display: grid;
  grid-gap: 12px;
  grid-template-columns: var(--menu-width) fit-content(calc(var(--panel-width) - var(--menu-width))) 2fr var(--help-width);
  grid-template-rows: 51px 51px auto fit-content(30px);
  grid-template-areas: "... pnav pnav ..." "... head head help" "panel panel main help" "... ... foot ...";
}
@media (width <= 1000px) {
  #manage.svelte-1d8t6ey {
    --help-width: 200px;
  }
}

.pnav.svelte-1d8t6ey {
  grid-area: pnav;
  background-color: #053737;
  padding: 8px;
  display: flex;
  gap: 8px;
  justify-content: left;
}
.pnav.svelte-1d8t6ey button.back:where(.svelte-1d8t6ey) {
  margin-right: 16px;
}

#help.svelte-1d8t6ey {
  grid-area: help;
}

/* (unused) .select {
  grid-area: select;
  margin-left: var(--menu-width);
}*/

/* (unused) header {
  display: grid;
  grid-template-columns: 655px 300px;
  position: unset;
  width: unset;
  height: 200px;
  overflow: hidden;
}*/

/* (unused) .heroSelect {
  position: absolute;
  top: 120px;
  left: 16px;
  display: flex;
  gap: 1em;
}*/
#tales.svelte-kuikg9 {
  display: contents;
}

.games-list.svelte-kuikg9 {
  margin: 16px;
  display: grid;
  grid-template-columns: 4ch 2fr 2fr 1fr 12ch;
  gap: 0.5ch 2ch;
}

.content.svelte-kuikg9 {
  height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: none;
  grid-auto-rows: minmax(36px, max-content);
}

b.svelte-kuikg9 {
  margin: 0 0 12px 0;
  border-bottom: grey solid 1px;
  text-align: center;
}

span.svelte-kuikg9 {
  align-self: center;
}

    h1.svelte-a8mrkc {
        margin: 0.5em;
	}


	.gameCard.svelte-a8mrkc {
        border: 1px solid grey;
        border-radius: 4px;
        background-color: #c60;
        margin: 8px;
	}

	.gameCard.running.svelte-a8mrkc {
        background-color: #040; }

  .gameCard.svelte-a8mrkc h3:where(.svelte-a8mrkc) {
      margin: 2ch  }

	.gameInfo.svelte-a8mrkc {
        display: grid;
        grid-template-columns: 8ch auto;
        column-gap: 8px;
	}

  .gameInfo.svelte-a8mrkc h4:where(.svelte-a8mrkc) {
    margin: 8px 0 4px 0;    }
  .gameInfo.svelte-a8mrkc p:where(.svelte-a8mrkc) {
    margin: 2px 0 4px 0;    }

	.contentBox.svelte-a8mrkc {
        display: grid;
        grid-template-columns: 148px 28ch;
        column-gap: 8px;
	}

	.mapImg.svelte-a8mrkc {
        width: 128px;
        height: 128px;
        justify-self: center;
        /*object-fit: contain;*/
	}

    .descript.svelte-a8mrkc {
        margin: 12px;
    }

    button.svelte-a8mrkc {
        background-color: darkgrey;
        border: black 1px solid;
        margin: 0 2.0em 0.5em 2.0em;
    }


#narrate.svelte-1a6xopo {
  display: grid;
  grid-template-columns: 380px auto;
  grid-template-rows: 51px 51px auto fit-content(30px);
  grid-template-areas: "... nav-page" "... head-module" "panel main" "... foot";
}
#option-dialog.svelte-195mobt {
  position: absolute;
  overflow: hidden;
  font-family: "EB Garamond", serif;
  color: black;
  margin: 8px;
  break-inside: avoid;
}

.close.svelte-195mobt {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close.svelte-195mobt:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* (unused) .actionName {
  margin: 0;
  padding: 0.5em;
  font-size: 150%;
}*/

/* (unused) .actionName.active {
  font-style: normal;
  text-decoration: none;
}*/

/* (unused) .actionName.proactive {
  font-style: italic;
  text-decoration: none;
}*/

/* (unused) .actionName.reactive {
  font-style: normal;
  text-decoration: underline;
}*/

/* (unused) .actionName.ultimative {
  font-style: italic;
  text-decoration: underline;
}*/

/* (unused) .domainsymbol {
  position: absolute;
  right: 8px;
  top: 8px;
  display: inline-block;
  height: 4em;
  width: 4em;
  box-sizing: border-box;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}*/

/* (unused) .inner {
  margin: 0 1em;
  padding: 4px;
}*/

/* (unused) .powerHeader {
  display: grid;
  grid-template-columns: 8ch auto;
  padding: 8px;
  font-weight: bolder;
}*/

/* (unused) .powerCoding {
  white-space: pre-line;
}*/

/* (unused) .descript {
  margin: 4px;
}*/

#abstractInput.svelte-195mobt {
  margin: 8px 15px 12px 15px;
  width: calc(100% - 30px);
}

.cardFooter.svelte-195mobt {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 0.5em 0.5em;
  font-size: 150%;
}

#abilityFooter.svelte-195mobt {
  position: absolute;
  bottom: 48px;
  width: 80px;
  left: 4px;
  display: flex;
  flex-wrap: wrap;
}

/* (unused) .powerExecution {
  flex: 1;
  text-align: left;
  text-transform: capitalize;
  font-weight: bold;
}*/

/* (unused) .powerExertion {
  flex: 1;
  text-align: center;
  font-weight: bold;
}*/

/* (unused) .powerTerm {
  flex: 1;
  text-align: center;
  font-weight: bold;
}*/

/* (unused) .powerTyped_progressiv {
  background: linear-gradient(to top, white 0%, lightgray 100%) !important;
}*/

.d100.svelte-195mobt {
  position: absolute;
  right: 8px;
  bottom: 4px;
}
select.svelte-xhr4p8:invalid {
  color: grey;
}

select.svelte-xhr4p8 option:where(.svelte-xhr4p8) {
  color: #ffffff;
}
.rollBox.svelte-17vxjnc {
  position: absolute;
  left: 20px;
  top: 5px;
  width: 80px;
}

.rollBox.svelte-17vxjnc img:where(.svelte-17vxjnc) {
  width: 100%;
}

.roll.svelte-17vxjnc {
  position: absolute;
  left: 12px;
  top: 9px;
  color: black;
  font-size: 20pt;
  font-weight: bold;
  letter-spacing: 0.9em;
  opacity: 75%;
}
.roll.tight.svelte-17vxjnc {
  letter-spacing: 0.2ch;
}

.locked.svelte-17vxjnc {
  pointer-events: none;
}

#submitBtn.svelte-17vxjnc {
  width: 100%;
  height: 32px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.amends.svelte-17vxjnc {
  position: absolute;
  right: 4px;
  top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.dur.svelte-17vxjnc {
  width: 2em;
  margin-right: 4px;
  text-align: right;
}

#evaluation.svelte-17vxjnc {
  display: grid;
  grid-template-columns: repeat(4, 3ch 1ch);
  justify-content: space-around;
  justify-items: center;
}

#evaluation.svelte-17vxjnc span:where(.svelte-17vxjnc) {
  align-self: center;
}

#inflicts.svelte-17vxjnc {
  display: grid;
  justify-content: center;
  grid-gap: 5px;
  margin: 5px;
  grid-template-columns: 4ch 1fr 4ch;
}

.miniButton.svelte-17vxjnc img:where(.svelte-17vxjnc) {
  width: 100%;
  margin-top: 2px;
}

.progress.svelte-17vxjnc {
  display: flex;
  flex-flow: row nowrap;
  gap: 5px;
  padding: 10px 0;
}

.progress-bar.svelte-17vxjnc {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.progress-indicator.svelte-17vxjnc,
.progress-bar-background.svelte-17vxjnc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-indicator.svelte-17vxjnc {
  z-index: 1;
}

.progress-bar-background.svelte-17vxjnc {
  background: #514545;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}
button.review.svelte-69mhak {
  width: 40%;
  margin: 0 16px;
}

button.react.svelte-69mhak {
  background-color: grey;
  width: calc(100% - 16px);
  height: 32px;
  margin: 8px;
}

img.svelte-69mhak {
  width: 100%;
}

#evaluation.svelte-69mhak {
  display: grid;
  grid-template-columns: repeat(4, 3ch 1ch);
  justify-content: space-around;
  justify-items: center;
}

#evaluation.svelte-69mhak span:where(.svelte-69mhak) {
  align-self: center;
}

#conc_rolled.svelte-69mhak {
  display: inline-block;
  width: calc(100% - 48px);
}
.activityarea.svelte-7q1l15 {
  position: relative;
  border-radius: 10px;
  border: 2px solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 6px;
  break-inside: avoid;
}

.actdata.svelte-7q1l15 {
  display: grid;
  justify-content: center;
  grid-gap: 5px;
  margin: 5px;
  font-size: 1.2em;
}

/* (unused) .masterView .actdata {
  grid-template-columns: 3fr 2fr 4ch;
}*/

/* (unused) .playerView .actdata {
  grid-template-columns: 3fr 2fr;
}*/

.close.svelte-7q1l15 {
  float: right;
  right: 8px;
  top: 8px;
  width: 16px;
  height: 16px;
}

label.svelte-7q1l15 {
  margin: 8px;
}
/* (unused) #risk {
  width: auto;
}*/

/* (unused) #skillPopup {
  position: fixed;
  z-index: 10;
  width: 320px;
  height: 180px;
  top: calc(50% - 90px);
  left: calc(50% - 160px);
  background: hsl(150, 100%, 10%);
  padding: 0.5em;
}*/

/* (unused) #skillPopup .close,
#actionCard .close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}*/

/* (unused) #skillPopup .close:hover,
#skillPopup .close:focus,
#actionCard .close:hover,
#actionCard .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}*/

/* (unused) #skillDiceContainer,
#abilityButtonBox {
  display: flex;
  justify-content: space-between;
  padding: 16px 16px;
}*/
.abil.svelte-1xx3yw3 {
  font-style: italic;
}

#risk.svelte-1xx3yw3 {
  width: auto;
}

#skillPopup.svelte-1xx3yw3 {
  position: fixed;
  z-index: 10;
  width: 320px;
  height: 180px;
  top: calc(50% - 90px);
  left: calc(50% - 160px);
  background: hsl(150, 100%, 10%);
  padding: 0.5em;
}

/* (unused) #skillPopup .close,
#actionCard .close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}*/

/* (unused) #skillPopup .close:hover,
#skillPopup .close:focus,
#actionCard .close:hover,
#actionCard .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}*/

#skillDiceContainer.svelte-1xx3yw3,
#abilityButtonBox.svelte-1xx3yw3 {
  display: flex;
  justify-content: space-between;
  padding: 16px 16px;
}
.outfits.svelte-1vbzqpf {
  padding: 8px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  color: black;
  font-weight: bold;
}
.panel.svelte-1upxbqu {
  display: block;
  border: none;
  margin: 0;
  padding: 0;
}

.panel.svelte-1upxbqu input:where(.svelte-1upxbqu), .panel.svelte-1upxbqu select:where(.svelte-1upxbqu) {
  background-color: black;
}

.gridded.svelte-1upxbqu {
  display: grid;
  grid-template-columns: 3ch 8ch auto 3ch;
  grid-gap: 5px;
  margin: 5px;
  /*font-size: 1.2em*/
}

.position.svelte-1upxbqu {
  display: grid;
  grid-template-columns: 8ch 6ch 6ch 8ch 3ch;
  grid-gap: 5px;
  margin: 5px;
  /*font-size: 1.2em*/
}

.occurrence.svelte-1upxbqu {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 44px;
  grid-gap: 8px;
  width: 386px;
  margin: 6px;
}

.buttonBar.svelte-1upxbqu {
  display: flex;
  justify-content: space-around;
}

button.svelte-1upxbqu {
  background-color: darkgrey;
}

button.svelte-1upxbqu img:where(.svelte-1upxbqu) {
  width: 100%;
}
.controllerPanel.svelte-eje2my {
  flex: 0 0 420px;
  position: relative;
  overflow: auto;
  scrollbar-width: none;
  background: black url("/images/background-light.png");
}
.controllerPanel.masterView.svelte-eje2my {
  --topPadding: 72px;
}
.controllerPanel.playerView.svelte-eje2my {
  flex: 0 0 380px;
  --topPadding: 0px;
}

.role.svelte-eje2my {
  position: relative;
  left: var(--menu-width);
  width: calc(var(--panel-width) - var(--menu-width));
  text-align: center;
}
.role.svelte-eje2my h3:where(.svelte-eje2my) {
  width: 60%;
  font-size: x-large;
  font-weight: bolder;
}
.role.svelte-eje2my img:where(.svelte-eje2my) {
  position: absolute;
  width: 48px;
  right: 4px;
  top: -10px;
}

#charInfo.svelte-eje2my {
  position: relative;
  height: 145px;
  background: #222222 url("/images/background-noise.png");
}

/* (unused) #charName {
  width: 100%;
  margin: 0;
  text-align: center;
}*/

#charCanvas.svelte-eje2my {
  position: absolute;
  top: 12px;
  left: calc(50% - 48px);
  height: 96px;
  width: 96px;
}

#charPortrait.svelte-eje2my {
  position: absolute;
  top: 20px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background: rgb(60, 60, 60);
  border-radius: 50%;
}

#life.svelte-eje2my {
  position: absolute;
  top: 90px;
  left: 132px;
  width: 2ch;
  /*background-color: green*/
  text-align: center;
}

#focus.svelte-eje2my {
  position: absolute;
  top: 90px;
  right: 132px;
  width: 2ch;
  /*background-color: dodgerblue*/
  text-align: center;
}

#missile.svelte-eje2my {
  position: absolute;
  top: 110px;
  left: 192px;
  width: 28px;
  rotate: 45deg;
}

.playerView.svelte-eje2my #missile:where(.svelte-eje2my) {
  left: 174px;
}

.gauge.svelte-eje2my {
  /*cx: 48px*/
  /*cy: 48px*/
  /*r:  44px*/
  transition: 0.35s stroke-dashoffset;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  fill: none;
}

#healthGauge.svelte-eje2my {
  stroke: green;
  stroke-width: 8px;
  stroke-dasharray: 276;
  stroke-dashoffset: 138;
}

#focusGauge.svelte-eje2my {
  stroke: dodgerblue;
  stroke-width: 8px;
  stroke-dasharray: 276;
  stroke-dashoffset: 414;
}

#nerfs.svelte-eje2my {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120px;
  background: red;
  padding: 0 4px;
  text-align: center;
}

#buffs.svelte-eje2my {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  background: green;
  padding: 0 4px;
  text-align: center;
}

.buff.svelte-eje2my {
  background: darkgreen;
}

.nerf.svelte-eje2my {
  background: darkred;
}

.damage.svelte-eje2my {
  background: darkorange;
}

/**** CHARACTER comments ****/
/* (unused) #occuranceBtn img {
  width: 24px;
}*/

.viewTabselect-clip.svelte-eje2my {
  height: 35px;
  overflow: hidden;
}

.viewTabselect-clip.high.svelte-eje2my {
  height: 65px;
}

#viewTabselect.svelte-eje2my {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  list-style-type: none;
  margin-block: 0;
  padding-inline: 0;
  border-bottom: 3px solid #085252;
  position: relative;
  gap: 5px;
  margin-top: 50px;
}

.viewTab.svelte-eje2my {
  padding: 5px 15px 10px 15px;
  flex: 1;
  border-radius: 10px 10px 0 0;
  text-align: center;
  cursor: pointer;
  transition: 0.5s;
  color: white;
  background-color: #373535;
  filter: drop-shadow(0 0 2px black);
  height: 70px;
  min-width: 100px;
  margin-top: -45px;
  position: relative;
}

.viewTab.svelte-eje2my:hover {
  filter: brightness(100%);
  background-color: #0D8989;
}

.viewTab.selected.svelte-eje2my {
  background-color: #867D7D;
  font-weight: 600;
  color: black;
}

.viewTab.selected.svelte-eje2my:hover {
  filter: none;
  background-color: #085252;
}

/**** CHARACTER combat ****/
.activityarea.svelte-eje2my {
  border-radius: 10px;
  border: 2px solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 6px;
  break-inside: avoid;
}

.masterView.svelte-eje2my .actdata:where(.svelte-eje2my) {
  grid-template-columns: 3fr 2fr 4ch;
}

.playerView.svelte-eje2my .actdata:where(.svelte-eje2my) {
  grid-template-columns: 3fr 2fr;
}

.vertical.svelte-eje2my {
  width: auto;
  height: auto;
  margin: 8px 8px 8px 16px;
  /*writing-mode: vertical-lr*/
  /*text-orientation: mixed*/
}

/* (unused) #combatTab {
  background-color: darkred;
}*/

/* (unused) #skillsTab {
  background-color: darkgreen;
}*/

/* (unused) #powersTab {
  background-color: darkblue;
}*/

/* (unused) #gearTab {
  background-color: black;
}*/

.tabContent.svelte-eje2my {
  margin-top: 1em;
}

#commentBox.svelte-eje2my {
  margin-bottom: 16px;
}

#commentBox.svelte-eje2my input:where(.svelte-eje2my) {
  background-color: black;
}
.upcoming.svelte-1qa59hx {
  margin: 12px 6px;
  display: grid;
  grid-template-columns: 4ch 4ch 3fr 2fr;
  /*justify-content: center*/
  grid-gap: 5px;
  row-gap: 0;
}

.upcoming.current.svelte-1qa59hx {
  font-weight: bold;
}
.heroActs.svelte-1ay4k74 {
  display: grid;
  grid-template-columns: 1fr 2fr 3ch;
}
label.svelte-1quzodd {
  display: block;
  font-weight: bold;
}

textarea.svelte-1quzodd {
  margin: 1em;
  width: 92%;
  height: calc(100vh - 160px);
}
.imagesGrid.svelte-wlprs1 {
  display: grid;
  grid-template-columns: 224px auto;
  grid-gap: 1em;
}

h4.svelte-wlprs1 {
  margin: 0;
}

img.svelte-wlprs1 {
  width: 100%;
}
.cash.svelte-1ynbc3w {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  column-gap: 1em;
  row-gap: 0.2em;
}
.cash.svelte-1ynbc3w b:where(.svelte-1ynbc3w) {
  margin-bottom: 12px;
  border-bottom: grey solid 1px;
  text-align: center;
}
.cash.svelte-1ynbc3w .number:where(.svelte-1ynbc3w) {
  width: 5ch;
  text-align: right;
}
.obtain.svelte-1iykhom {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* (unused) .gear {
  overflow-y: auto;
  scrollbar-width: none;
}*/
/* (unused) .gear::-webkit-scrollbar {
  display: none;
}*/

.obtainables.svelte-1iykhom {
  padding: 12px;
  background-color: #333333;
}

/* (unused) .grade {
  text-align: center;
}*/

/* (unused) .weight {
  width: 8ch;
}*/

/* (unused) .greyed {
  color: grey;
}*/

/* (unused) .rightAlign {
  padding: 0 8px;
  text-align: right;
}*/

.items.svelte-1iykhom {
  width: 95%;
  display: grid;
  grid-template-columns: 3ch 1fr 3fr 4ch 2fr 6ch 10ch;
  grid-gap: 8px;
  align-items: center;
}

input[type=checkbox].svelte-1iykhom {
  width: 24px;
}
iframe.svelte-1uhj1sy {
  width: 72%;
  height: calc(100% - 12px);
}
.card.svelte-1sjy390 {
  width: 264px;
  margin: 8px;
  border: grey 1px;
  border-radius: 4px;
  background-color: #333;
  padding: 0 4px;
  overflow: clip;
}
.card.exhibited.svelte-1sjy390 {
  border: rgb(13, 137, 137) 2px solid;
}
.card.svelte-1sjy390 img:where(.svelte-1sjy390) {
  width: 256px;
  max-height: 256px;
  margin: auto;
}
.card.svelte-1sjy390 p:where(.svelte-1sjy390) {
  max-width: 260px;
}

h3.svelte-1sjy390 {
  margin: 8px 0 4px 0;
}

.caption.svelte-1sjy390 {
  padding: 0 0 8px 0;
  max-height: 7ch;
  overflow: clip;
}
section.svelte-jbq06o {
  grid-area: 1/span 2;
}
#plot.svelte-14hq8x5 {
  width: 100%;
  height: calc(100vh - var(--menu-height) - 78px);
  resize: none;
}
#timerContainer.svelte-156vb80 {
  position: fixed;
  right: 0;
  top: 0;
  width: 240px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #111111;
  z-index: 9;
}

.master #timerContainer {
  width: 300px;
}

#clock.svelte-156vb80 {
  height: auto;
}

/* Very nice counter animation: http://fff.cmiscm.com/#!/section/flipclock*/
#clock.svelte-156vb80 .face:where(.svelte-156vb80) {
  display: inline-block;
  vertical-align: top;
  position: relative;
  font-family: "Open Sans", "Lucida Console", Monospaced, serif;
  font-weight: 300;
  font-size: 2em;
  line-height: 1.5em;
  text-align: center;
  color: #B0B0B0;
  border-radius: 10px;
  padding: 0.2em;
  background: linear-gradient(#202020, #404040, #202020);
  overflow: hidden;
}

#clock.svelte-156vb80 .face:where(.svelte-156vb80):after {
  content: "";
  display: block;
  height: 1px;
  border-top: 1px solid #111;
  width: 100%;
  position: absolute;
  top: 45%;
  left: 0;
}

#clock.svelte-156vb80 .label:where(.svelte-156vb80) {
  text-transform: uppercase;
  display: block;
  position: absolute;
  font-family: "Open Sans", cursive;
  font-weight: 700;
  line-height: normal;
  right: 6px;
  bottom: 4px;
  font-size: 8px;
  color: #B9B9B9;
}

#clock.stop.svelte-156vb80 div:where(.svelte-156vb80) {
  background: #550000;
}

#clock.script.svelte-156vb80 div:where(.svelte-156vb80) {
  background: #544d00;
}

#clock.running.svelte-156vb80 div:where(.svelte-156vb80) {
  background: #000055;
}

#proceedBtn.unready.svelte-156vb80 {
  filter: saturate(0);
}

.proceedModeSelection.svelte-156vb80 {
  position: absolute;
  background: black;
  left: -24px;
  top: 80px;
  width: 380px;
  display: flex;
  justify-content: space-between;
}

#modeSwitch.svelte-156vb80 {
  position: relative;
  width: 96px;
  height: 54px;
  display: flex;
  column-gap: 12px;
}

#modeSwitch.inactive.svelte-156vb80 {
  pointer-events: none;
}

#modeSwitch.svelte-156vb80 input:where(.svelte-156vb80) {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 100%;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

#modeSwitch.svelte-156vb80 input:where(.svelte-156vb80):checked {
  z-index: 1;
}

#modeSwitch.svelte-156vb80 .labels:where(.svelte-156vb80) {
  width: 76px;
}

#modeSwitch.svelte-156vb80 label:where(.svelte-156vb80) {
  color: #ffffff;
  opacity: 0.33;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
  font-size: 15px;
  line-height: 28px;
}

#modeSwitch.svelte-156vb80 input:where(.svelte-156vb80):checked + label:where(.svelte-156vb80) {
  opacity: 1;
  color: #ffffff;
  cursor: default;
}

#modeSwitch.svelte-156vb80 input:where(.svelte-156vb80):not(:checked) + label:where(.svelte-156vb80):hover {
  opacity: 0.5;
}

.toggle.svelte-156vb80 {
  position: relative;
  width: 23px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 17px;
  padding: 11px;
  overflow: hidden;
  transition: opacity 0.3s ease-in-out;
}

.toggle.svelte-156vb80 span:where(.svelte-156vb80) {
  position: absolute;
  left: 3px;
  top: calc(-24px + var(--selected) * 28px);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #424242;
  transition: all 0.3s ease-in-out;
}
.incident.svelte-1qk7sgk {
  margin: 12px 6px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 4ch 48px auto;
  color: black;
}

.incident.Instruct.svelte-1qk7sgk, .incident.Induce.svelte-1qk7sgk {
  grid-template-columns: 4ch auto 48px;
}

.tick-time.svelte-1qk7sgk {
  justify-self: center;
}

.subject.svelte-1qk7sgk {
  display: inline-block;
  position: relative;
  grid-column: 2;
  grid-row: span 3;
}

.target.svelte-1qk7sgk {
  display: inline-block;
  position: relative;
  grid-column: 3;
  grid-row: span 3;
}

.incident.svelte-1qk7sgk .shout:where(.svelte-1qk7sgk) {
  font-weight: bold;
}

.incident.current.svelte-1qk7sgk {
  font-weight: bold;
}

.incident.svelte-1qk7sgk .only:where(.svelte-1qk7sgk) {
  grid-column: 2/span 3;
}

.inferior.svelte-1qk7sgk {
  grid-column: 3/span 2;
}
.imminent.svelte-11k6nas {
  margin: 12px 6px;
  display: grid;
  grid-template-columns: 4ch 60px 3fr 1fr 0;
  grid-gap: 5px;
  row-gap: 0;
}

.imminent.masterView.svelte-11k6nas {
  grid-template-columns: 4ch 60px auto 4ch 36px;
}

.imminent.current.svelte-11k6nas {
  font-weight: bold;
}

.inferior.svelte-11k6nas {
  grid-column: 3/span 2;
}

.review.svelte-11k6nas {
  grid-row: span 3;
}

.sitWarning.svelte-11k6nas {
  position: relative;
  height: 40px;
  right: 20px;
  bottom: 20px;
}

.miniButton.svelte-11k6nas img:where(.svelte-11k6nas) {
  width: 71%;
}

.effectsList.svelte-11k6nas {
  grid-column: 3/span 2;
  display: inline-flex;
  gap: 8px;
}

.effect.svelte-11k6nas {
  border: darkgrey 1px solid;
  background-color: hsl(var(--hue), 50%, 50%);
  font-size: unset;
}

.effect.hurt.svelte-11k6nas {
  --hue: 0;
}

.effect.harm.svelte-11k6nas {
  --hue: 28;
}

.effect.nerf.svelte-11k6nas {
  --hue: 56;
}

.effect.heal.svelte-11k6nas {
  --hue: 120;
}

.effect.save.svelte-11k6nas {
  --hue: 180;
}

.effect.buff.svelte-11k6nas {
  --hue: 240;
}

.effect.envm.svelte-11k6nas {
  --hue: 270;
}

.effect.move.svelte-11k6nas {
  --hue: 300;
}
#timeline.svelte-wcvseo {
  position: absolute;
  right: 0;
  top: 80px;
  width: 360px;
  /* height: 100% */
  bottom: 0;
  padding: 4px 4px 0 4px;
  overflow: auto;
  scrollbar-width: none;
  background: black url("/images/background-light.png");
  opacity: 80%;
}

.master #timeline.svelte-wcvseo {
  width: 420px;
}

#timeline.svelte-wcvseo::-webkit-scrollbar {
  display: none;
}

/* (unused) #filterBox {
  height: 4em;
  margin-bottom: 13px;
  padding: 14px 6px;
}*/

/* (unused) #tickerFilter {
  height: 42px;
  background: papayawhip;
  opacity: 100%;
}*/

#occurredBox.svelte-wcvseo {
  background: #222222 url("/images/parchment.png") repeat 0 0;
  /* border-image: url(https://i.imgur.com/040pFDw.png) 20 / 20px round */
  box-sizing: border-box;
  color: black;
  /* overflow: hidden /* to prevent margin collapsing */
  display: flow-root;
}

#ongoingBox.svelte-wcvseo {
  background-color: navajowhite;
}

/**** IMMINENT box ****/
#imminentBox.svelte-wcvseo {
  bottom: 0;
  border-radius: 10px;
  border: 2px solid white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: #514545;
}

/* (unused) .timeline-bar {
  position: absolute;
  right: 0;
  width: 8px;
  height: 100%;
  background: #c6b492;
}*/
.sections-list.svelte-1xykr23 {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.section.svelte-1xykr23 {
  background: #373535;
  border-radius: 4px;
  padding: 8px;
  display: grid;
  grid-template-columns: auto 144px;
  row-gap: 16px;
}
.section.svelte-1xykr23 img:where(.svelte-1xykr23) {
  width: 128px;
  max-height: 128px;
}
#play.svelte-wplxt2 {
  --timeline-width: 0px;
  --header-height: 40px;
  --panel-width: 380px;
  display: grid;
  grid-gap: 12px;
  grid-template-columns: var(--panel-width) auto var(--timeline-width);
  grid-template-rows: var(--header-height) auto 30px;
  grid-template-areas: "pnav main time" "control main timeline" "control main foot";
}
#play.ismaster.svelte-wplxt2 {
  --header-height: 88px;
  --panel-width: 420px;
  grid-template-areas: "pnav head time" "control main timeline" "control main foot";
}
@media (width <= 1000px) {
  #play.svelte-wplxt2 {
    --help-width: 200px;
  }
}

/* (unused) .pnav .section-box {
  position: relative;
  text-align: center;
}*/
/* (unused) .pnav .section-box h3 {
  width: 60%;
  font-size: x-large;
  font-weight: bolder;
}*/
/* (unused) .pnav .section-box img {
  position: absolute;
  width: 48px;
  right: 4px;
  top: -10px;
}*/

.control.svelte-wplxt2 {
  grid-area: control;
}

.section-box.svelte-wplxt2 {
  display: flex;
}
.section-box.svelte-wplxt2 .section-button:where(.svelte-wplxt2) {
  background: unset;
  border: unset;
}
.section-box.svelte-wplxt2 .section-button:where(.svelte-wplxt2) img:where(.svelte-wplxt2) {
  width: 48px;
  height: 48px;
}
.section-box.svelte-wplxt2 .flag-button:where(.svelte-wplxt2) {
  margin: 18px;
}
.section-box.svelte-wplxt2 .flag-button.current:where(.svelte-wplxt2) {
  border: rgb(13, 137, 137) 2px solid;
}

#section-selection.svelte-wplxt2 {
  margin: unset;
  background-color: black;
  color: #ffffff;
  top: 52px;
  left: 500px;
}

.tabs-box.svelte-wplxt2 {
  grid-area: tabs;
  display: flex;
  margin-bottom: 10px;
}

.tab.svelte-wplxt2 {
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid transparent;
  margin-bottom: -1px;
  background-color: #373535;
  border-bottom-color: #867D7D;
}
.tab.svelte-wplxt2 img:where(.svelte-wplxt2) {
  width: 36px;
}

.tab.selected.svelte-wplxt2 {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-width: 8px;
  border-color: #0D8989 #867D7D #373535;
}

/* (unused) pinch-zoom {
  width: 100%;
  height: 100%;
}*/

/* (unused) .breadcrumbs {
  margin-left: 72px;
}*/

/* (unused) h1 {
  margin: 0;
}*/

/* (unused) aside#panel {
  position: fixed;
  left: 0;
  top: 58px;
  width: 380px;
  height: calc(100vh - 58px);
  overflow: auto;
  padding: 8px;
  scrollbar-width: none;
  background: black url("/images/background-light.png");
}*/
/* (unused) aside#panel.master {
  top: 102px;
  width: 420px;
  height: calc(100vh - 102px);
}*/

/*** Layout navigation via tabs next to dragon menu ***/
.tab.svelte-wplxt2 {
  cursor: pointer;
  padding: 4px 6px;
  border: 1px solid transparent;
  margin-bottom: -1px;
  background-color: #373535;
  border-bottom-color: #867D7D;
}

.tab.selected.svelte-wplxt2 {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-width: 8px;
  border-color: #0D8989 #867D7D #373535;
}

.tab.svelte-wplxt2 img:where(.svelte-wplxt2) {
  width: 36px;
}
dialog.svelte-mo3wk7 {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  min-height: 222px;
  background-color: #444444;
  overflow: hidden;
}

.close.svelte-mo3wk7 {
  position: absolute;
  float: right;
  width: 16px;
  right: 16px;
  top: 16px;
  padding: 0;
  color: grey;
}

.container.svelte-mo3wk7 {
  display: flex;
}

.container.svelte-mo3wk7 img:where(.svelte-mo3wk7) {
  width: 200px;
  padding: 8px;
  object-fit: contain;
  border-radius: 100%;
}

.datagrid.svelte-mo3wk7 {
  display: grid;
  grid-template-columns: 6ch 6ch 2ch 6ch 14ch;
  align-content: start;
  width: 340px;
  column-gap: 4px;
  margin: 4px;
  padding: 8px;
  background-color: #111111;
}

.buttonBar.svelte-mo3wk7 {
  width: 336px;
  margin: 32px 4px 4px 4px;
  display: flex;
  gap: 36px;
  justify-content: center;
}

h3.svelte-mo3wk7 {
  color: #ffffff;
  grid-column: span 2;
  justify-self: center;
}

/* (unused) input[type=checkbox] {
  color: lightgrey;
  accent-color: dimgrey;
}*/

/* (unused) input[type=checkbox]:not(:checked) {
  appearance: none;
  margin: 4px 34px;
  width: 20px;
  height: 20px;
  background: dimgrey;
}*/

.miniButton.svelte-mo3wk7 {
  width: 138px;
  height: auto;
}

/* (unused) .miniButton img {
  width: 48px;
}*/

/* (unused) .miniButton span {
  position: relative;
  top: -16px;
}*/
#actionMenu.svelte-iia669 {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 8px;
  box-shadow: 2px 2px 30px lightgrey;
  margin: 0;
  color: #ffffff;
  background-color: #000000;
  padding: 4px;
  transition: transform 0.2s, opacity 0.2s;
}

.menu-box.svelte-iia669 {
  background-color: #333333;
  padding: 0 8px;
  list-style: none;
}
.menu-box.svelte-iia669 menu:where(.svelte-iia669) {
  padding-left: 16px;
  margin-block: 0 8px;
}

.menu-item.svelte-iia669 {
  display: block;
  padding: 4px 8px;
  width: 100%;
  transition: 0.1s;
  color: #ffffff;
  background-color: #404040;
}

.menu-item.proactive.svelte-iia669 {
  font-style: italic;
}

.menu-item.reactive.svelte-iia669 {
  font-weight: bold;
  font-style: italic;
}

.menu-item.svelte-iia669:hover, .menu-item.svelte-iia669:focus {
  filter: saturate(200%) opacity(200%) brightness(150%);
  cursor: pointer;
}

.menu-item.disabled.svelte-iia669 {
  text-decoration: line-through;
  color: gray;
}

/*** action card ***/
.card-box.svelte-iia669 {
  position: fixed;
  left: 16px;
  bottom: 16px;
  background-color: #514545;
}

.close.svelte-iia669 {
  position: absolute;
  right: 0;
  top: -8px;
  float: right;
  font-size: larger;
  color: lightgray;
}

.close.svelte-iia669:hover {
  color: lightcoral;
}

/*impactHue =hurt: 0, harm: 28, nerf: 56, heal: 120, save: 150, buff: 180, abil: 240, envm: 270, move: 300, chrg: 330}*/
.menu-item.hurt.svelte-iia669 {
  --hue: 0;
}

.menu-item.harm.svelte-iia669 {
  --hue: 28;
}

.menu-item.nerf.svelte-iia669 {
  --hue: 56;
}

.menu-item.heal.svelte-iia669 {
  --hue: 120;
}

.menu-item.save.svelte-iia669 {
  --hue: 150;
}

.menu-item.buff.svelte-iia669 {
  --hue: 180;
}

.menu-item.abil.svelte-iia669 {
  --hue: 240;
}

.menu-item.envm.svelte-iia669 {
  --hue: 270;
}

.menu-item.move.svelte-iia669 {
  --hue: 300;
}

.menu-item.chrg.svelte-iia669 {
  --hue: 330;
}

.menu-item.cost.svelte-iia669, .menu-item.cost0.svelte-iia669 {
  background-color: hsl(var(--hue), 60%, 50%, 40%);
}

.menu-item.cost5.svelte-iia669 {
  background-color: hsl(var(--hue), 65%, 50%, 50%);
}

.menu-item.cost10.svelte-iia669 {
  background-color: hsl(var(--hue), 70%, 50%, 60%);
}

.menu-item.cost15.svelte-iia669 {
  background-color: hsl(var(--hue), 75%, 50%, 70%);
}

.menu-item.cost20.svelte-iia669 {
  background-color: hsl(var(--hue), 80%, 50%, 80%);
}

.menu-item.cost25.svelte-iia669 {
  background-color: hsl(var(--hue), 85%, 50%, 90%);
}

.menu-item.cost30.svelte-iia669 {
  background-color: hsl(var(--hue), 90%, 50%, 100%);
}

.difficult.svelte-iia669 {
  color: lightgrey;
}

.d100.svelte-iia669 {
  position: absolute;
  right: 20px;
  bottom: 18px;
}

.weaponSelect.svelte-iia669 {
  margin: 8px;
  display: grid;
  grid-template-columns: 8ch auto 4em;
  gap: 1em;
  font-size: large;
}
/* (unused) .weaponSelect label {
  font-weight: bold;
}*/
.weaponSelect.svelte-iia669 .icon:where(.svelte-iia669) {
  top: -12px;
}

.cardFooter.svelte-iia669 {
  background-color: #514545;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 0.5em 0.5em;
}
dialog.svelte-qpsqsj {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  min-height: 222px;
  background-color: #444444;
  overflow: hidden;
}

.close.svelte-qpsqsj {
  position: absolute;
  float: right;
  right: 12px;
  top: 8px;
  font-size: larger;
  color: lightgray;
}

.close.svelte-qpsqsj:hover {
  color: lightcoral;
}

.container.svelte-qpsqsj {
  display: flex;
}

.container.svelte-qpsqsj img:where(.svelte-qpsqsj) {
  width: 200px;
  padding: 8px;
  object-fit: contain;
}

.datagrid.svelte-qpsqsj {
  display: grid;
  grid-template-columns: 12ch 2fr 2ch 8ch 1fr;
  align-content: start;
  width: 500px;
  column-gap: 4px;
  margin: 4px;
  padding: 8px;
  background-color: #111111;
}

.datagrid.svelte-qpsqsj textarea:where(.svelte-qpsqsj) {
  width: 360px;
  margin: 8px;
}

/* (unused) .datagrid .firstCol {
  grid-column: 1;
}*/

/* (unused) .datagrid .secondCol {
  grid-column: 4;
}*/

/* (unused) .store {
  width: 100%;
}*/

.buttonBar.svelte-qpsqsj {
  margin: 32px 4px 4px 4px;
  display: flex;
  gap: 36px;
  justify-content: center;
}

h3.svelte-qpsqsj {
  color: #ffffff;
  grid-column: span 2;
  justify-self: center;
}

label.svelte-qpsqsj {
  line-height: 175%;
}

/* (unused) input[type=checkbox] {
  color: lightgrey;
  accent-color: dimgrey;
}*/

/* (unused) input[type=checkbox]:not(:checked) {
  appearance: none;
  margin: 4px 34px;
  width: 20px;
  height: 20px;
  background: dimgrey;
}*/

.miniButton.svelte-qpsqsj {
  width: 138px;
  height: auto;
}

.miniButton.svelte-qpsqsj img:where(.svelte-qpsqsj) {
  width: 48px;
}

.miniButton.svelte-qpsqsj span:where(.svelte-qpsqsj) {
  position: relative;
  top: -16px;
}
#effectPopup.svelte-igupox {
  position: absolute;
  max-width: 240px;
  border: rgb(13, 137, 137) 2px solid;
  border-radius: 5px;
  margin: 0;
  padding: 8px;
  color: #ffffff;
  background-color: #444;
  box-shadow: 2px 2px 30px lightgrey;
  transition: transform 0.2s, opacity 0.2s;
  list-style: none;
  overflow: hidden;
}

.name.svelte-igupox {
  margin: 0;
  padding: 8px;
  width: 100%;
  background-color: hsl(var(--hue), 50%, 50%);
  text-align: center;
  font-size: larger;
  font-weight: bold;
}

summary.svelte-igupox {
  font-size: unset;
}

.params.svelte-igupox {
  display: grid;
  grid-template-columns: auto 6ch 6ch;
  column-gap: 1ch;
}

.modValue.svelte-igupox {
  font-size: larger;
  text-align: right;
  padding-top: 2px;
}

.progress.svelte-igupox {
  display: flex;
  flex-flow: row nowrap;
  gap: 5px;
  padding: 10px 0;
}

.progress-bar.svelte-igupox {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.progress-indicator.svelte-igupox,
.progress-bar-background.svelte-igupox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-indicator.svelte-igupox {
  z-index: 1;
}

.progress-bar-background.svelte-igupox {
  background: #514545;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}
dialog.svelte-19u3ocx {
  max-width: 32em;
  right: 0;
  left: unset;
  bottom: 0;
  height: 98%;
  margin: 8px;
  padding: 12px;
}

dialog.demo.svelte-19u3ocx {
  top: unset;
}

dialog.svelte-19u3ocx::backdrop {
  background: rgba(0, 0, 0, 0.3);
}

dialog.svelte-19u3ocx > div:where(.svelte-19u3ocx) {
  padding: 1em;
}

dialog[open].svelte-19u3ocx {
  animation: svelte-19u3ocx-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes svelte-19u3ocx-zoom {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}
dialog[open].svelte-19u3ocx::backdrop {
  animation: svelte-19u3ocx-fade 0.2s ease-out;
}

@keyframes svelte-19u3ocx-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
h2.svelte-19u3ocx {
  margin: 8px;
}

button.svelte-19u3ocx {
  display: inline-block;
}

.close.svelte-19u3ocx {
  position: absolute;
  right: 0;
  top: -8px;
  float: right;
  font-size: larger;
  color: lightgray;
}

.close.svelte-19u3ocx:hover {
  color: lightcoral;
}

.terminate.svelte-19u3ocx {
  float: right;
}

.doc-text.svelte-19u3ocx {
  height: 85%;
  overflow-y: auto;
  scrollbar-width: none;
}
.doc-text.svelte-19u3ocx::-webkit-scrollbar {
  display: none;
}
#exhibit-dialog.svelte-1b5apn7 {
  border: grey 1px solid;
  background: black;
  overflow: hidden;
}

.media.svelte-1b5apn7 {
  display: flex;
  justify-content: center;
}
.media.svelte-1b5apn7 img:where(.svelte-1b5apn7) {
  max-width: 80vw;
  max-height: 75vh;
  anchor-name: --img-anchor;
}

.caption.svelte-1b5apn7 p:where(.svelte-1b5apn7) {
  margin: 1em;
  color: #ffffff;
  font-family: Garamond, serif;
  font-size: xx-large !important;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 36px;
}

#caption.svelte-1b5apn7 {
  margin: 12px;
  width: 78vw;
  field-sizing: content;
}
#charactersTab.svelte-5vqplq {
  position: relative;
}

/* (unused) button {
  position: absolute;
  top: 0;
  right: 0;
}*/

.section-character.svelte-5vqplq .infobox:where(.svelte-5vqplq) {
  background-color: #1C4674;
}
.actionLine.svelte-1e7wiqz {
  position: relative;
  display: inline-block;
}

.stopBtn.svelte-1e7wiqz {
  background-color: yellow;
  position: absolute;
  left: 320px;
  top: 0;
}

.endBtn.svelte-1e7wiqz {
  background-color: red;
  position: absolute;
  left: 320px;
  top: 0;
}

label.svelte-1e7wiqz {
  color: #ffffff;
}

textarea.svelte-1e7wiqz {
  height: 60%;
  width: 400px;
  resize: vertical;
  border: darkgrey 1px solid;
  background-color: black;
  color: #ffffff;
}

#sectionTable.svelte-1e7wiqz button:where(.svelte-1e7wiqz) {
  background-color: darkgrey;
}
/*** main navigation (dragon menu) ***/
nav#mnav.svelte-1u8c9lr {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
}

button#homeBtn.svelte-1u8c9lr {
  position: absolute;
  z-index: 10;
  grid-row: 1/span 3;
  width: 115px;
  height: 102px;
  border: none;
  background-color: #0D8989;
  padding: 0;
  border-radius: 0 0 50px 0;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
  color: #ffffff;
}

#homeBtn.svelte-1u8c9lr:hover {
  cursor: pointer;
}

/* (unused) #homeBtn.hidden {
  opacity: 0;
}*/

#homeBtn.svelte-1u8c9lr img:where(.svelte-1u8c9lr) {
  width: 112px;
  height: 101px;
  margin-top: 1px;
  margin-left: 1px;
}

#homeBtn.svelte-1u8c9lr .menu:where(.svelte-1u8c9lr) {
  font-size: 24px;
  position: absolute;
  left: 60px;
  top: 70px;
}

#mainMenu.svelte-1u8c9lr {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  display: unset;
  background-color: #3A3737;
  font-weight: bold;
  border-radius: 0 0 40px 0;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
}

/* (unused) #mainMenu ul {
  list-style-type: none;
  padding: 0;
  margin-top: 30px;
  margin-left: 35px;
}*/

#mainMenu.svelte-1u8c9lr .menu-open-header:where(.svelte-1u8c9lr) {
  display: flex;
  flex-flow: row nowrap;
  background-color: #0D8989;
  width: 300px;
  height: 103px;
  justify-content: space-between;
}

#mainMenu.svelte-1u8c9lr .menu-open-header:where(.svelte-1u8c9lr):hover {
  cursor: pointer;
}

#mainMenu.svelte-1u8c9lr .menu-open-header:where(.svelte-1u8c9lr) .logo:where(.svelte-1u8c9lr) {
  width: 250px;
  height: 150px;
  margin-left: 1px;
}

#mainMenu.svelte-1u8c9lr .menu-open-header:where(.svelte-1u8c9lr) .close:where(.svelte-1u8c9lr) {
  font-size: 28px;
  margin: 10px 10px 0 0;
  color: #ffffff;
}

menu.svelte-1u8c9lr {
  padding-inline-start: 12px;
}

.mainMenu-item.svelte-1u8c9lr {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 20px 0 20px 25px;
  height: 24px;
  gap: 10px;
  color: #ffffff;
  background-color: #373535;
  border: none;
  width: 100%;
}

.mainMenu-item-logo.svelte-1u8c9lr {
  width: 40px;
  font-size: 28px;
}

li.svelte-1u8c9lr:last-child .mainMenu-item:where(.svelte-1u8c9lr) {
  padding: 20px 0 40px 25px;
  width: calc(100% - 1px);
}

li.svelte-1u8c9lr:first-child .mainMenu-item:where(.svelte-1u8c9lr) {
  padding: 40px 0 20px 25px;
}

/* ----------- Menu fading in and out ------------ */
#mainMenu.svelte-1u8c9lr {
  transition-property: visibility, opacity;
  /*transition-duration: .5s, .0s   change only .5s opacity duration */
}

#mainMenu.fade-in.svelte-1u8c9lr {
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  visibility: visible;
  opacity: 1;
}

#mainMenu.fade-out.svelte-1u8c9lr {
  -webkit-transition: visibility 0s linear 0.4s, opacity 0.3s ease-in-out;
  transition: visibility 0s linear 0.4s, opacity 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

/* ----------------------- */
.mainMenu-item.svelte-1u8c9lr:hover {
  cursor: pointer;
}

.mainMenu-item.svelte-1u8c9lr .menuTitle:where(.svelte-1u8c9lr) {
  width: 100%;
  border-bottom: 1px solid transparent;
  text-align: left;
}

.mainMenu-item.svelte-1u8c9lr:hover .menuTitle:where(.svelte-1u8c9lr) {
  border-bottom: 1px solid white;
}

/* (unused) .mainMenu-item img {
  width: 24px;
  height: 24px;
  margin: 0 10px;
}*/

/* (unused) main {
  height: 100vh;
  overflow: hidden;
  background: rgb(20, 20, 20);
}*/

/* (unused) main.fullscreen {
  left: 0;
  width: 100vw;
}*/

.tabBar.svelte-1u8c9lr {
  padding-left: 112px;
}

/* (unused) .tabBar img {
  width: 44px;
}*/

/* (unused) #breadcrumbs {
  position: absolute;
  left: 120px;
  width: 296px;
  top: 0;
}*/

/* (unused) #breadcrumbs h2, #breadcrumbs h3, #breadcrumbs h4, #breadcrumbs ul {
  margin: 8px;
  white-space: nowrap;
  overflow: hidden;
}*/

/* ---- HELP ---- */
.help-button.svelte-1u8c9lr {
  position: fixed;
  z-index: 10;
  bottom: 16px;
  right: 16px;
  width: 48px;
  filter: brightness(90%);
}
.help-button.svelte-1u8c9lr::after {
  position: relative;
  top: -8px;
  margin: 0 0 0 10px;
  content: "\f05a";
  font-family: "Font Awesome 6 Free";
  font-size: smaller;
  font-weight: normal;
  font-style: normal;
  color: #0D8989;
  text-decoration: none;
  cursor: help;
}

.help-button.helping.svelte-1u8c9lr {
  color: #0D8989;
  filter: brightness(130%);
}
#register-dialog.svelte-jac2o1 {
  background-color: #252626;
  color: #ffffff;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 24px 32px 20px 32px;
  width: min(60%, 480px);
}

#register-dialog.svelte-jac2o1::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.title.svelte-jac2o1 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: bold;
}

.close.svelte-jac2o1 {
  position: absolute;
  top: 10px;
  right: 14px;
  color: #aaa;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
}

.close.svelte-jac2o1:hover {
  color: #ffffff;
}

.form-group.svelte-jac2o1 {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
}

.field.svelte-jac2o1 {
  display: flex;
  flex-flow: column nowrap;
}

.field-label.svelte-jac2o1 {
  color: #ffffff;
  margin-bottom: 4px;
  font-size: 13px;
}

.field-control.svelte-jac2o1 {
  background-color: #9C9797;
  border: none;
  border-radius: 5px;
  color: black;
  padding: 4px 6px;
}

.message.svelte-jac2o1 {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #6fcf97;
}

.message.error.svelte-jac2o1 {
  color: #eb5757;
}

.actions.svelte-jac2o1 {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.button-secondary.svelte-jac2o1 {
  background: none;
  border: 1px solid #555;
  color: #ffffff;
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
}

.button-secondary.svelte-jac2o1:hover {
  border-color: #ffffff;
}

.fa-user-plus.svelte-jac2o1::before {
  content: "\e541";
}
.form.svelte-z8syxt {
  position: absolute;
  right: 0;
  padding: 0 48px;
  display: flex;
  flex-flow: row nowrap;
  background-color: #252626;
  height: 85px;
}

.form-group.svelte-z8syxt {
  display: flex;
  flex-flow: row nowrap;
}

.field.svelte-z8syxt {
  display: flex;
  flex-flow: column nowrap;
  margin: 15px 10px 10px 10px;
  width: 180px;
}

.field-label.svelte-z8syxt {
  color: #ffffff;
}

.field-control.svelte-z8syxt {
  margin: 5px 0;
  background-color: #9C9797;
  border: none;
  border-radius: 5px;
  color: black;
}

.panel-login.svelte-z8syxt {
  padding-top: 15px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 20px;
}

.link-register.svelte-z8syxt {
  font-weight: bold;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
#welcomeSection.svelte-1fgtw05 {
  height: 85%;
}

.bg-image.svelte-1fgtw05 {
  background-image: url("/images/background.png");
  height: 100%;
}

.intro.svelte-1fgtw05 {
  background: linear-gradient(90deg, rgba(37, 38, 38, 0.7) 0%, rgba(37, 38, 38, 0.4) 100%);
  position: fixed;
  bottom: 100px;
  width: 100%;
  height: 240px;
  padding-left: 100px;
  margin-bottom: 75px;
}

.links.svelte-1fgtw05 {
  background: linear-gradient(90deg, rgba(12, 136, 136, 0.5) 0%, rgba(12, 136, 136, 0) 100%);
  display: flex;
  flex-flow: row nowrap;
  padding-top: 5px;
  padding-left: 432px;
  margin: 0 0 0 40px;
  padding-bottom: 5px;
}

.link.svelte-1fgtw05 {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding-right: 15px;
  font-weight: bold;
  justify-content: center;
  cursor: pointer;
}

.link.svelte-1fgtw05:after {
  content: "";
  /*content: "|"*/
  padding-left: 15px;
}

.link.svelte-1fgtw05:last-child:after {
  content: "";
}

.link.svelte-1fgtw05 div.fa:where(.svelte-1fgtw05) {
  width: 24px;
  /*height: 24px*/
  margin-right: 5px;
  /*display: none*/
  opacity: 0.5;
}

.link.svelte-1fgtw05 span:where(.svelte-1fgtw05) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

.logo.svelte-1fgtw05 {
  position: absolute;
  left: 85px;
  top: -155px;
  width: 375px;
  filter: drop-shadow(0px 0px 12px rgb(0, 0, 0));
}

.descript.svelte-1fgtw05 {
  display: flex;
  flex-flow: row nowrap;
}

.teaser-headline.svelte-1fgtw05 {
  padding: 30px 0 15px 190px;
  font-size: 24px;
}

.teaser-text.svelte-1fgtw05 {
  padding-left: 55px;
  line-height: 1.5;
  width: 750px;
  height: 100%;
  overflow: auto;
}

.demo.svelte-1fgtw05 {
  margin-left: 180px;
  position: absolute;
  left: 740px;
  top: 64px;
}
.demo.svelte-1fgtw05 img:where(.svelte-1fgtw05) {
  width: 115px;
  height: 115px;
}
.demo.svelte-1fgtw05 button:where(.svelte-1fgtw05) {
  position: absolute;
  top: 80px;
  left: -30px;
}

/* ----------- Running Games ------------ */
.running.svelte-1fgtw05 {
  position: absolute;
  right: 40px;
  top: 40px;
}
#rulesPage.svelte-fj9uke {
  height: 100vh;
  overflow: auto;
}

.cardsBox.svelte-fj9uke {
  display: flex;
  flex-wrap: wrap;
}

/* (unused) .powerBox {
  display: grid;
  grid-template-columns: 10ch 1fr 2fr;
  margin: 0 2ch;
  padding: 6px;
  grid-gap: 4px;
}*/

/* (unused) .powerDescript {
  grid-row: span 3;
  background: #666666;
}*/
#rules.svelte-jeb1p0 {
  --panel-width: 300px;
  display: grid;
  grid-template-columns: var(--panel-width) auto;
  grid-template-rows: 102px auto fit-content(30px);
  grid-template-areas: "... head" "panel main" "... foot";
}

section.svelte-jeb1p0 {
  height: 100%;
  overflow: auto;
  font-size: large;
}

h3 {
  margin: 0.5em 1em;
}

h4 {
  margin: 0.2em 2em;
}

.topics.svelte-jeb1p0 {
  margin: 0 3em;
}

.select.svelte-jeb1p0 {
  padding-left: 2em;
}

    main.svelte-19asswk {
        width: 100%;
        height: 100vh;
        overflow: auto;
	}



    h1.svelte-epy2ge {
        text-align: left;
        margin-top: 100px;
        margin-bottom: 50px;
	}

    h2.svelte-epy2ge {
        border-top:solid 1px rgba(255,255,255,0.8);
        padding: 20px 20px;
	}

    h3.svelte-epy2ge, ul.svelte-epy2ge li:where(.svelte-epy2ge) {
        margin-left: 20px;
	}

    ul.svelte-epy2ge {
        padding-bottom: 30px;
	}

    section.svelte-epy2ge {
        margin-left: 375px;
	}