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

.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 {
  position: relative;
  width: calc(100vw - 420px);
  height: 100vh;
  overflow: auto;
  scroll-margin-left: 400px;
  scrollbar-width: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

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

#positions.svelte-1cd2q40 {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 248px;
  padding: 8px;
  background: black;
  opacity: 50%;
}

#positions.svelte-1cd2q40 > :where(.svelte-1cd2q40) {
  display: block;
}

#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;
}

@keyframes svelte-1cd2q40-colorCycle {
  from {
    color: white;
  }
  to {
    color: black;
  }
}
#positions.svelte-1cd2q40 > :where(.svelte-1cd2q40) {
  display: inline-block;
  font-weight: bolder;
}

#positions.svelte-1cd2q40 #mapSelect:where(.svelte-1cd2q40) {
  width: 8ch;
}

#positions.svelte-1cd2q40 label:where(.svelte-1cd2q40) {
  color: var(--color-white);
}

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%;
}

#positions.svelte-1cd2q40 img:where(.svelte-1cd2q40) {
  width: 100%;
}
h2.svelte-1fv031u {
  margin: 0;
}

button.svelte-1fv031u {
  background: none;
  color: var(--color-white);
  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;
}
.overview.svelte-d2m44x {
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
}

.groupBox.svelte-d2m44x {
  display: flex;
  flex-wrap: wrap;
}
.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: var(--color-white);
}

.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;
}


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

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

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

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

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


    main.svelte-1mgn86t {
        width: 100%;
        height: 100vh;
        overflow: auto;
	}




dialog.svelte-1spyc0d {
  max-width: 32em;
  right: 0;
  left: unset;
  bottom: 0;
  margin: 0;
}

dialog.tutorial.svelte-1spyc0d {
  left: 624px;
  max-width: 36em;
}

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

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

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

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

@keyframes svelte-1spyc0d-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
button.svelte-1spyc0d {
  display: inline-block;
}

.terminate.svelte-1spyc0d {
  float: right;
}
.incident.svelte-1qk7sgk {
  margin: 12px 6px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 4ch 48px auto;
  color: black;
}

.incident.Instruct.svelte-1qk7sgk, .incident.Incurrence.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;
}
#welcomeSection.svelte-18ikgp8 {
  height: 85%;
}

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

.intro.svelte-18ikgp8 {
  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-18ikgp8 {
  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-18ikgp8 {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding-right: 15px;
  font-weight: bold;
  justify-content: center;
  cursor: pointer;
}

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

.link.svelte-18ikgp8:last-child:after {
  content: "";
}

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

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

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

.descript.svelte-18ikgp8 {
  display: flex;
  flex-flow: row nowrap;
}

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

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

.tutorial.svelte-18ikgp8 {
  margin-left: 180px;
  position: absolute;
  left: 740px;
  top: 64px;
}

.tutorial-image-button.svelte-18ikgp8 {
  width: 115px;
  height: 115px;
}

.tutorial-text-button.svelte-18ikgp8 {
  position: absolute;
  top: 80px;
  left: -30px;
}
.games-list.svelte-1r7oysn {
  margin: 16px;
  display: grid;
  grid-template-columns: 4ch 2fr 2fr 1fr 12ch;
  gap: 0.5ch 2ch;
}

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

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

span.svelte-1r7oysn {
  align-self: center;
}
label.svelte-1wrjywa {
  display: block;
  color: #ccc;
}

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 grey;
  background-color: #222;
  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;
}

input.svelte-1wrjywa:focus {
  border-color: lightgrey;
  outline: none;
  transition: border-color 0.2s ease-out;
  will-change: border-color;
}
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: var(--color-white);
}

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;
}
dialog.svelte-1b0c6cb {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  min-height: 222px;
  background-color: #444444;
  overflow: hidden;
}

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

.container.svelte-1b0c6cb {
  display: flex;
}

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

.container.svelte-1b0c6cb img.enemy:where(.svelte-1b0c6cb) {
  background-color: darkred;
}

.container.svelte-1b0c6cb img.friend:where(.svelte-1b0c6cb) {
  background-color: darkgreen;
}

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

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

h3.svelte-1b0c6cb {
  color: var(--color-white);
  grid-column: span 2;
  justify-self: center;
}

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

input[type=checkbox].svelte-1b0c6cb {
  color: lightgrey;
  accent-color: dimgrey;
}

input[type=checkbox].svelte-1b0c6cb:not(:checked) {
  appearance: none;
  margin: 4px 34px;
  width: 20px;
  height: 20px;
  background: dimgrey;
}

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

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

.miniButton.svelte-1b0c6cb span:where(.svelte-1b0c6cb) {
  position: relative;
  top: -16px;
}
#advtStructure.svelte-jxe2rd {
  height: 100%;
}

/* (unused) input[type=file] {
  display: none;
}*/

#sections-table.svelte-jxe2rd {
  height: calc(100% - 60px);
  background-color: var(--color-grey-4);
  border-radius: 15px 15px 0 0;
}

.sections-grid.svelte-jxe2rd {
  display: grid;
  grid-template-columns: 10ch 32ch 160px 1fr 2fr;
  row-gap: 12px;
}

.sections-grid.svelte-jxe2rd > button:where(.svelte-jxe2rd),
.sections-grid.svelte-jxe2rd > span:where(.svelte-jxe2rd),
.sections-grid.svelte-jxe2rd > div:where(.svelte-jxe2rd) {
  padding: 0 10px;
  align-self: center;
}

.sections-grid.svelte-jxe2rd > .grid-header:where(.svelte-jxe2rd) {
  border-bottom: 1px solid var(--color-grey-2);
  background-color: var(--color-grey-3);
  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;
}

.sections-grid.scrollable.svelte-jxe2rd {
  height: calc(100% - 60px);
}

button.section.svelte-jxe2rd {
  background-color: var(--color-highlight-yellow-080-black);
  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;
}
#playScreen.svelte-15em3iq {
  height: calc(100% - 55px);
}

/* (unused) #tabNav {
  padding: 0 12px;
  z-index: 1;
}*/

/* (unused) .layoutTab {
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid transparent;
  margin-bottom: -1px;
  background-color: var(--color-grey-3);
  border-bottom-color: var(--color-grey-1);
}*/

/* (unused) .layoutTab.selected {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-width: 8px;
  border-color: var(--color-primary-100) var(--color-grey-1) var(--color-grey-3);
}*/

/* (unused) .layoutTab img {
  width: 36px;
}*/

/* (unused) #tabNav img {
  width: 36px;
}*/

pinch-zoom.svelte-15em3iq {
  width: 100%;
  height: 100%;
}

/* (unused) .controllerPanel.masterView {
  --topPadding: 72px;
}*/

/* (unused) .controllerPanel.playerView {
  flex: 0 0 380px;
  --topPadding: 0px;
}*/

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

h1.svelte-15em3iq {
  margin: 0;
}

iframe.svelte-15em3iq {
  width: calc(100% - 360px);
  height: 100%;
}

/* (unused) .master iframe {
  width: calc(100% - 420px);
}*/
.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;
}

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

.charPicture.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;
}

  .traitsBox.svelte-3ku42c {
    margin: 0 0 16px 16px;
    display: grid;
    grid-template-columns: 16ch 4ch auto;
    gap: 0.5ch 2ch;
  }

.actionCard.svelte-1f7ywc6 {
  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.aktiv.svelte-1f7ywc6 {
  font-style: normal;
  text-decoration: none;
}

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

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

.actionName.ultimativ.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;
}

/* (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: center;
  font-weight: bold;
}

.powerTyped_progressiv.svelte-1f7ywc6 {
  background: linear-gradient(to top, white 0%, lightgray 100%) !important;
}
#option-dialog.svelte-195mobt {
  position: absolute;
  width: 400px;
  resize: both;
  overflow: auto;
  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.aktiv {
  font-style: normal;
  text-decoration: none;
}*/

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

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

/* (unused) .actionName.ultimativ {
  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 0 15px;
  width: calc(100% - 30px);
}

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

/* (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;
}*/
.sheetBox.svelte-74n34p {
  margin: 0 0 16px 16px;
  display: grid;
  grid-template-columns: 16ch 6ch 5ch 4ch 6ch 11ch auto;
  gap: 0.5ch 2ch;
}

h3.svelte-74n34p {
  margin: 2ch 0 1ch 0;
}

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

.bonus.svelte-74n34p {
  text-align: center;
  padding: 6px 0 0 0;
}

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

.learned-col.svelte-74n34p {
  grid-column: 3;
}

.xp-col.svelte-74n34p {
  grid-column: 6;
}

.domain.svelte-74n34p {
  margin: 0 1em;
  border: outset grey;
}

.powers-box.svelte-74n34p {
  grid-column: 1/span 7;
  margin: 0 1em;
  display: flex;
  flex-direction: column;
}

.spent.svelte-74n34p {
  text-align: right;
}

.powers.svelte-74n34p {
  display: grid;
  grid-template-columns: repeat(6, 20ch);
  justify-content: space-between;
  accent-color: var(--color-primary-100);
}

input[type=checkbox].svelte-74n34p:disabled:checked {
  outline: 2px solid var(--color-primary-100);
}
.sheetBox.svelte-tiapm6 {
  margin: 0 0 16px 16px;
  display: grid;
  grid-template-columns: 16ch 6ch 5ch 4ch 6ch 11ch auto;
  gap: 0.5ch 2ch;
}

h3.svelte-tiapm6 {
  margin: 2ch 0 1ch 0;
}

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

.bonus.svelte-tiapm6 {
  text-align: center;
  padding: 6px 0 0 0;
}

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

.spent.svelte-tiapm6 {
  text-align: right;
}

.domain.svelte-tiapm6 {
  margin: 0 1em;
  border: outset grey;
}

.xp-col.svelte-tiapm6 {
  grid-column: 6;
  text-align: right;
}

.powers-box.svelte-tiapm6 {
  grid-column: 1/span 7;
  margin: 0 1em 1em 1em;
  display: flex;
  flex-direction: column;
}

.talents.svelte-tiapm6 {
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
}

.powers.svelte-tiapm6 {
  display: grid;
  grid-template-columns: repeat(6, 20ch);
  justify-content: space-between;
  accent-color: var(--color-primary-100);
}

input[type=checkbox].svelte-tiapm6:disabled:checked {
  outline: 2px solid var(--color-primary-100);
}
.proficsBox.svelte-16gkorv {
  margin: 0 0 16px 16px;
  display: grid;
  grid-template-columns: 16ch auto 5ch 3ch 6ch 10ch auto;
  gap: 0.5ch 2ch;
}

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

.bonus.svelte-16gkorv {
  text-align: center;
  padding: 6px 0 0 0;
}

.spent.svelte-16gkorv {
  text-align: right;
}

    .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;
	}

#sheetsPage.svelte-t11tbo {
  position: absolute;
  width: min(100vw - 380px, 1140px);
  overflow-x: hidden;
  height: 100%;
}

#sheetsPage.svelte-t11tbo > nav:where(.svelte-t11tbo) {
  position: relative;
  left: 20px;
  top: -40px;
}

#sheetsPage.svelte-t11tbo > input[type=radio]:where(.svelte-t11tbo) {
  display: none;
}

/**** character banner ****/
#bannerBox.svelte-t11tbo {
  height: 180px;
  margin: 8px;
}

#banner.svelte-t11tbo {
  width: 100%;
  height: 180px;
}

#characterName.svelte-t11tbo {
  position: relative;
  left: 136px;
  top: -146px;
  color: black;
  font-size: 64px;
  font-weight: bold;
}

#characterLevel.svelte-t11tbo {
  position: relative;
  left: 850px;
  top: -200px;
  width: 2ch;
  text-align: center;
  color: black;
  font-size: 64px;
  font-weight: bold;
}

/**** character sheets navigation ****/
/* switch sheets on according to checked tab */
/* (unused) #traitsCharTab:checked ~ div #traitsSheet,
#combatCharTab:checked ~ div #combatSheet,
#skillsCharTab:checked ~ div #skillsSheet,
#gearCharTab:checked ~ div #gearSheet {
  display: block;
}*/

nav.svelte-t11tbo label:where(.svelte-t11tbo) {
  float: left;
  padding: 8px 16px;
  border-top: 1px solid silver;
  border-right: 1px solid silver;
  background: hsl(50, 50%, 80%);
  color: black;
}

nav.svelte-t11tbo label:where(.svelte-t11tbo):nth-child(1) {
  border-left: 1px solid silver;
}

nav.svelte-t11tbo label:where(.svelte-t11tbo):hover {
  background: hsl(50, 100%, 80%);
}

nav.svelte-t11tbo label:where(.svelte-t11tbo):active {
  background: hsl(50, 100%, 40%);
}

#traitsCharTab.svelte-t11tbo:checked ~ nav:where(.svelte-t11tbo) label[for=traitsCharTab]:where(.svelte-t11tbo),
#combatCharTab.svelte-t11tbo:checked ~ nav:where(.svelte-t11tbo) label[for=combatCharTab]:where(.svelte-t11tbo),
#skillsCharTab.svelte-t11tbo:checked ~ nav:where(.svelte-t11tbo) label[for=skillsCharTab]:where(.svelte-t11tbo),
#gearCharTab.svelte-t11tbo:checked ~ nav:where(.svelte-t11tbo) label[for=gearCharTab]:where(.svelte-t11tbo) {
  background: hsl(50, 100%, 40%);
  color: #111;
  position: relative;
  border-bottom: none;
}

#traitsCharTab.svelte-t11tbo:checked ~ nav:where(.svelte-t11tbo) label[for=traitsCharTab]:where(.svelte-t11tbo):after,
#combatCharTab.svelte-t11tbo:checked ~ nav:where(.svelte-t11tbo) label[for=combatCharTab]:where(.svelte-t11tbo):after,
#skillsCharTab.svelte-t11tbo:checked ~ nav:where(.svelte-t11tbo) label[for=skillsCharTab]:where(.svelte-t11tbo):after,
#gearCharTab.svelte-t11tbo:checked ~ nav:where(.svelte-t11tbo) label[for=gearCharTab]:where(.svelte-t11tbo):after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: hsl(50, 100%, 40%);
  left: 0;
  bottom: -1px;
}

/**** character sheets content ****/
/* (unused) #charSection > nav {
  height: 32px;
}*/

/* (unused) #sheetsBox {
  height: calc(100% - 218px);
}*/

/* (unused) .sheet {
  display: none;
  flex-flow: row wrap;
  height: calc(100% - 20px);
  width: 100%;
  margin: 0.5em;
  overflow: auto;
  scrollbar-width: none;
}*/

/* (unused) .sheet::-webkit-scrollbar {
  display: none;
}*/

/* (unused) .sheet table {
  width: auto;
}*/

/* (unused) #characterDescript {
  display: grid;
  grid-template-columns: 10ch auto 10ch auto;
}*/

.verticalScroll.svelte-t11tbo {
  overflow-y: auto;
  scrollbar-width: none;
}

.verticalScroll.svelte-t11tbo::-webkit-scrollbar {
  display: none;
}
#prepNav.svelte-itekzs {
  position: absolute;
  top: 100px;
  margin-top: 50px;
  height: calc(100vh - 160px);
  width: 48px;
  z-index: 10;
}

.back.svelte-itekzs {
  top: -40px;
  left: 4px;
}

.vertical.svelte-itekzs {
  left: -28px;
  margin-bottom: 5em;
  transform: rotate(-90deg);
}
.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;
}*/

dialog.svelte-1cgvigi {
  min-width: 300px;
  min-height: 200px;
  background-color: darkgrey;
}

dialog.svelte-1cgvigi fieldset:where(.svelte-1cgvigi) {
  display: grid;
  grid-template-columns: 8ch auto;
  background-color: #222;
}

.buttonBar.svelte-1cgvigi {
  margin: 8px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

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

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

.miniButton.svelte-1cgvigi span:where(.svelte-1cgvigi) {
  position: relative;
  top: -16px;
}
#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;
  border: darkgray 1px solid;
}

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

label.svelte-jwhve4 {
  color: lightgrey;
}
.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;
}

.appear-attribs.svelte-8bf2l8 {
  grid-column: 1/span 5;
  margin: 8px;
  display: grid;
  grid-template-columns: 8ch 1fr 8ch 2fr;
}
#charactersTab.svelte-5vqplq {
  position: relative;
}

button.svelte-5vqplq {
  position: absolute;
  top: 0;
  right: 0;
}

.section-character.svelte-5vqplq .infobox:where(.svelte-5vqplq) {
  background-color: var(--color-highlight-blue-060-black);
}
.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;
}

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

.charPicture.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.skills.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;
}

button.variant.svelte-jg7jxn {
  display: block;
  background-color: darkgrey;
}

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

.close.svelte-jg7jxn {
  font-size: 20px;
  color: var(--color-grey);
}
.fa-map.svelte-7s4g91 {
  margin: 1em auto 2em auto;
}

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

h4.svelte-7s4g91 {
  margin: 0;
}
#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(70%, 640px);
}

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

/* (unused) #plotBox button {
  margin: 0 0 0 auto;
}*/

#siteBox.svelte-yey5w7 {
  width: 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;
}

.buttonBox.svelte-yey5w7 {
  display: flex;
  justify-content: space-around;
  gap: 16px;
}

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

.image.svelte-yey5w7 {
  position: relative;
}

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

.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 input[type=text]:where(.svelte-yey5w7) {
  border: none;
  margin: 4px 1ch;
  text-align: center;
}
.section.svelte-qgno8x {
  border-radius: 15px;
  padding: 20px;
  background-color: var(--color-grey-5);
}

.section-story.svelte-qgno8x {
  background-color: var(--color-highlight-yellow-040-black);
}

.section-story.svelte-qgno8x .infobox:where(.svelte-qgno8x) {
  background-color: var(--color-highlight-yellow-060-black);
}

/* (unused) .section-character {
  background-color: var(--color-highlight-blue-040-black);
}*/

/* (unused) .section h2 {
  margin: 0;
}*/

.infobox.svelte-qgno8x {
  position: relative;
  /* background-color: var(--color-grey-4) */
}

.infobox-header-button.svelte-qgno8x {
  position: absolute;
  right: 25px;
  top: 10px;
}
.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;
}
select.svelte-xhr4p8:invalid {
  color: grey;
}

select.svelte-xhr4p8 option:where(.svelte-xhr4p8) {
  color: var(--color-white);
}
.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%;
}

.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: var(--color-grey-2);
  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;
}*/
.talent.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");
}

#altRole.svelte-eje2my {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
}

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

#charName.svelte-eje2my {
  width: 100%;
  margin: 0;
  text-align: center;
}

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

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

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

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

.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 var(--color-primary-060-black);
  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: var(--color-grey-3);
  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: var(--color-primary-100);
}

.viewTab.selected.svelte-eje2my {
  background-color: var(--color-grey-1);
  font-weight: 600;
  color: black;
}

.viewTab.selected.svelte-eje2my:hover {
  filter: none;
  background-color: var(--color-primary-060-black);
}

/**** 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;
}

	tr.svelte-alrch td:where(.svelte-alrch):focus {
		background: black;
		color: var(--color-white);
	}

button.svelte-1cn0m3d {
  background-color: white;
}

/* (unused) .sections {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}*/

.section.svelte-1cn0m3d {
  border-radius: 15px;
  padding: 20px;
  background-color: var(--color-grey-5);
}

.section-story.svelte-1cn0m3d {
  background-color: var(--color-highlight-yellow-040-black);
}

.section-story.svelte-1cn0m3d .infobox:where(.svelte-1cn0m3d) {
  background-color: var(--color-highlight-yellow-060-black);
}

/* (unused) .section-character {
  background-color: var(--color-highlight-blue-040-black);
}*/

.section.svelte-1cn0m3d h2:where(.svelte-1cn0m3d) {
  margin: 0;
}

.infobox.svelte-1cn0m3d {
  position: relative;
  /* background-color: var(--color-grey-4) */
}

.infobox-header-button.svelte-1cn0m3d {
  position: absolute;
  right: 25px;
  top: 10px;
}
.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: var(--color-white);
}

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

#sectionTable.svelte-1e7wiqz button:where(.svelte-1e7wiqz) {
  background-color: darkgrey;
}
.imagesGrid.svelte-wlprs1 {
  display: grid;
  grid-template-columns: 140px auto;
  grid-row-gap: 16px;
}

h4.svelte-wlprs1 {
  margin: 0;
}

    h1.svelte-1bsiemj {
        margin: 0.5em;
	}


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

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

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

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

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

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

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

    .descript.svelte-1bsiemj {
        margin: 12px;
    }

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


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

.floatingBox.svelte-9xslh5 button:where(.svelte-9xslh5) {
  background-color: grey;
}

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

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

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

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

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

.dummyToken.svelte-9xslh5: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;
}
ul.svelte-j8uwpu li:where(.svelte-j8uwpu) {
  padding: 4px 0;
}

.overview.svelte-j8uwpu {
  margin: 1ch;
  background-color: darkslategrey;
}

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

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

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

.upgrades.svelte-j8uwpu {
  display: grid;
  margin: 2ch;
  grid-template-columns: auto 6ch;
}

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

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

.equipment.svelte-j8uwpu {
  display: grid;
  margin: 2ch;
  grid-template-columns: 1fr 2fr;
}
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: var(--color-white);
  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 {
  border: none;
  margin: 0;
  color: var(--color-white);
  background-color: #444;
  padding: 4px 0;
  border-radius: 5px;
  box-shadow: 2px 2px 30px lightgrey;
  position: absolute;
  transition: transform 0.2s, opacity 0.2s;
  list-style: none;
  overflow: hidden;
}

#actionMenu.svelte-iia669 ul: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: var(--color-white);
  background-color: #404040;
}

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

.menu-item.reaktiv.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.cooldown.svelte-iia669 {
  text-decoration: line-through;
  color: gray;
}

/*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;
}
label.svelte-1quzodd {
  display: block;
  font-weight: bold;
}

textarea.svelte-1quzodd {
  margin: 1em;
  width: 92%;
  height: calc(100vh - 160px);
}
#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: var(--color-white);
  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: var(--color-white);
  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;
}
.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);
}

.timeline-bar.svelte-wcvseo {
  position: absolute;
  right: 0;
  width: 8px;
  height: 100%;
  background: #c6b492;
}



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;
  border-radius: 100%;
}

/* (unused) .container img.enemy {
  background-color: darkred;
}*/

/* (unused) .container img.friend {
  background-color: darkgreen;
}*/

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

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

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

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

h3.svelte-qpsqsj {
  color: var(--color-white);
  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;
}
#rulesPage.svelte-1g6jo46 {
  height: 100vh;
  overflow: auto;
}

.cardsBox.svelte-1g6jo46 {
  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;
}*/
/* (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 var(--color-primary-060-black);
  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: var(--color-grey-4);
  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: var(--color-primary-100);
}*/

/* (unused) .tab-item.selected {
  background-color: var(--color-grey-3);
  font-weight: 600;
}*/

/* (unused) .tab-item.selected:hover {
  filter: none;
  background-color: var(--color-primary-060-black);
}*/

/* (unused) .tab-page {
  background-color: var(--color-grey-3);
}*/

/* (unused) .button-box {
  margin: 24px;
  display: flex;
  justify-content: center;
}*/
.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;
}
/* (unused) .tab-page {
  background-color: var(--color-grey-3);
}*/

.button-box.svelte-1j1sajx {
  margin: 24px;
  display: flex;
  justify-content: center;
}
h3.svelte-y5ltcb {
  margin-block: 1.3em 0.2em;
}
.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;
}
#obstaclesPage.svelte-28zvxf {
  overflow: unset;
}

canvas.svelte-28zvxf {
  position: absolute;
  left: 420px;
  top: 0;
  width: 800px;
  height: 100%;
  z-index: 10;
}

header {
  overflow: unset;
}
@font-face {
  font-family: "EB Garamond";
  src: local("Garmond"), url("./fonts/EBGaramond-VariableFont_wght.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./fonts/fontawesome/fa-solid-900.woff2") format("woff2");
}
/*******************/
/**** VARIABLES ****/
/*******************/
:root {
  --color-white:	#ffffff;
  --color-black:	#000000;
  --color-grey: #666666;
  --color-primary-100:	#0D8989 /** rgba(13,137,137,1) */;
  --color-primary-020:	rgba(13,137,137,0.2);
  --color-primary-040-black:	#053737 /* rgba(13,137,137,0.4) in front of black background */;
  --color-primary-060-black:	#085252 /* rgba(13,137,137,0.6) in front of black background */;
  --color-primary-080-black:	#0A6E6E /* rgba(13,137,137,0.8) in front of black background */;
  --color-highlight-blue-100:	#2F74C2;
  --color-highlight-blue-040-black:	#132E4E /* rgba(13,137,137,0.4) in front of black background */;
  --color-highlight-blue-060-black:	#1C4674 /* rgba(13,137,137,0.6) in front of black background */;
  --color-highlight-blue-080-black:	#265D9B;
  --color-highlight-red-100:	#b00f0f;
  --color-highlight-red-040-black:	#460606 /* rgba(13,137,137,0.4) in front of black background */;
  --color-highlight-red-060-black:	#6A0909 /* rgba(13,137,137,0.6) in front of black background */;
  --color-highlight-red-080-black:	#8D0C0C;
  --color-highlight-yellow-100:	#b9970d;
  --color-highlight-yellow-040-black:	#4A3C05 /* rgba(13,137,137,0.4) in front of black background */;
  --color-highlight-yellow-060-black:	#6F5B08 /* rgba(13,137,137,0.6) in front of black background */;
  --color-highlight-yellow-080-black: #94790A;
  --color-grey-1:	#867D7D;
  --color-grey-2:	#514545;
  --color-grey-3:	#373535;
  --color-grey-4:	#222222;
  --color-grey-5:	#333333;
  --color-grey-6:	#ddd6d6;
}

/*********************/
/**** FONTAWESOME ****/
/*********************/
/* (unused) .fa {
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.65));
}*/

/* (unused) .fa-check::before {
  content: "\f00c";
}*/

/* (unused) .fa-chevron-down::before {
  content: "\f078";
}*/

/* (unused) .fa-chevron-right::before {
  content: "\f054";
}*/

/* (unused) .fa-book-open::before {
  content: "\f518";
}*/

/* (unused) .fa-pen-to-square::before {
  content: "\f044";
}*/

/* (unused) .fa-person::before {
  content: "\f183";
}*/

/* (unused) .fa-chess-rook::before {
  content: "\f447";
}*/

/* (unused) .fa-xmark::before {
  content: "\f00d";
}*/

/* (unused) .fa-square-xmark::before {
  content: "\f057";
}*/

/* (unused) .fa-square-xmark::before {
  content: "\f2d3";
}*/

/* (unused) .fa-bars::before {
  content: "\f0c9";
}*/

/* (unused) .fa-star::before {
  content: "\f005";
}*/

/* (unused) .fa-hand::before {
  content: "\f256";
}*/

/* (unused) .fa-play::before {
  content: "\f04b";
}*/

/* (unused) .fa-dice::before {
  content: "\f522";
}*/

/* (unused) .fa-plus::before {
  content: "+";
}*/

/* (unused) .fa-brands::before {
  content: "\f2b4";
}*/

/* (unused) .fa-right-to-bracket::before {
  content: "\f2f6";
}*/

/* (unused) .fa-right-from-bracket::before {
  content: "\f2f5";
}*/

/* (unused) .fa-pen::before {
  content: "\f304";
}*/

/* (unused) .fa-arrow-up::before {
  content: "\f062";
}*/

/* (unused) .fa-back::before {
  content: "\f1da";
}*/

/* (unused) .fa-trash::before {
  content: "\f1f8";
}*/

.fa-trash-arrow-up.svelte-igupox::before {
  content: "\f829";
}

/* (unused) .fa-scissors::before {
  content: "\f0c4";
}*/

/* (unused) .fa-refresh::before {
  content: "\f021";
}*/

/* (unused) .fa-clipboard-user::before {
  content: "\f7f3";
}*/

/* (unused) .fa-map::before {
  content: "\f279";
}*/

/* (unused) .fa-deploy::before {
  content: "\e538";
}*/

/* (unused) .fa-dungeon::before {
  content: "\f6d9";
}*/

/*Functional Styling*/
@media (pointer: coarse), (hover: none) {
  /* (unused) [title] {
    position: relative;
    display: inline-flex;
    /*justify-content: center*\/
  }*/
  /* (unused) [title]:focus::after {
    content: attr(title);
    position: absolute;
    top: 90%;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1px solid;
    width: fit-content;
    padding: 3px;
    font-size: 10px;
  }*/
}
.svelte-igupox {
  box-sizing: border-box;
}

/************************/
/**** GENERAL styles ****/
/************************/
/* (unused) .scrollable {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}*/

/*ToDo:  Conditionally hiding the scrollbar (https://blog.logrocket.com/hide-scrollbar-without-impacting-scrolling-css/) */
dialog.svelte-igupox {
  background-color: #DDD;
  border-radius: 1em;
  border: none;
  padding: 0;
  z-index: 10;
}

/* (unused) a, p,*/ button.svelte-igupox /* (unused) input, select, textarea*/ {
  margin: 0;
  padding-top: 4px;
  font-size: 110%;
}

button.svelte-igupox {
  border: 0;
  outline: none;
  background-color: transparent;
}

button.svelte-igupox:hover {
  cursor: pointer;
}

/* (unused) img {
  -webkit-touch-callout: none;
}*/

/* (unused) .text-button:hover {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}*/

/* (unused) .button {
  position: relative;
  background-size: auto 37px;
  height: 37px;
  width: max-content;
  border-radius: 45px;
  cursor: pointer;
}*/

/* (unused) .button:hover {
  filter: brightness(200%);
}*/

.button-primary.svelte-igupox {
  width: min-content;
  height: auto;
  height: 34px;
  background-image: linear-gradient(180deg, var(--color-grey-1), var(--color-grey-2) 44%);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.65));
  text-align: center;
  border-radius: 45px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-white);
  padding: 8px;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  min-width: 100px;
}

/* (unused) .button-primary.petrol {
  background-image: linear-gradient(180deg, var(--color-primary-100), var(--color-primary-040-black) 44%);
}*/

.button-primary.svelte-igupox:hover {
  background-image: linear-gradient(180deg, var(--color-grey-1), var(--color-grey-2) 75%);
}

/* (unused) .button-primary.petrol:hover {
  background-image: linear-gradient(180deg, var(--color-primary-100), var(--color-primary-040-black) 75%);
}*/

.button-primary-circle.svelte-igupox {
  padding: 8px 15px 8px 45px;
}

.button-primary-circle.svelte-igupox::before {
  width: 30px;
  height: 30px;
  background-color: var(--color-grey-3);
  border: 2px solid var(--color-grey-1);
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  border-radius: 45px;
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* (unused) .button-primary-circle.petrol::before {
  background-color: var(--color-primary-040-black);
  border: 2px solid var(--color-primary-100);
}*/

.button-primary:hover.button-primary-circle.svelte-igupox::before {
  background-color: var(--color-grey-2);
}

/* (unused) .button-primary.petrol:hover.button-primary-circle::before {
  background-color: var(--color-primary-060-black);
}*/

/* (unused) .button-circle {
  position: relative;
  background-color: var(--color-grey-3);
  border: 2px solid var(--color-grey-1);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.65));
  width: 36px;
  height: 36px;
  border-radius: 45px;
  color: var(--color-white);
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
}*/

/* (unused) .button-icon {
  width: 20px;
  height: 20px;
}*/

/* (unused) .button-label {
  color: var(--color-white);
  font-weight: bold;
  padding-left: 40px;
  padding-right: 10px;
  display: block;
}*/

/* (unused) h1 {
  text-align: center;
  font-size: xx-large;
}*/

/*h3
 * margin: 0.5em  */
/* (unused) label {
  color: #ccc;
}*/

/* (unused) textarea {
  color: var(--color-white);
  background-color: var(--color-black);
  border: darkgrey 1px solid;
  font-size: 110%;
}*/

/* (unused) .text {
  /*padding: 0*\/
  /*position: relative*\/
  /*background: var(--color-grey-2)*\/
  color: var(--color-white);
  /*vertical-align: baseline*\/
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--color-grey-2);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
  padding-top: 4px \9 ;
}*/

/* (unused) input, select {
  background: black;
  color: var(--color-white);
  -webkit-user-select: text;
  overflow: visible;
  line-height: normal;
}*/

/* (unused) output {
  text-align: right;
}*/

/* (unused) input:disabled {
  color: #ccc;
}*/

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

/* (unused) input[type=file] {
  display: none;
}*/

/* (unused) .text input[type=text]:hover {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}*/

/* (unused) .text input[type=text]:focus {
  box-shadow: 0 0 0 3px #80a62d;
}*/

/* Chrome, Safari, Edge, Opera */
/* (unused) input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}*/

/* Firefox */
/* (unused) input[type=number] {
  -moz-appearance: textfield;
  text-align: right;
}*/

/* (unused) .text input[type=submit]:hover, .text-rounded input[type=submit]:hover, .text input[type=submit]:focus, .text-rounded input[type=submit]:focus {
  background-position: center -30px;
}*/

/* (unused) .button {
  position: relative;
  display: inline-block;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  user-select: none;
}*/

/* (unused) .button:disabled {
  opacity: 20%;
}*/

/* (unused) .button:hover, .button:focus {
  filter: brightness(150%);
  box-shadow: 0 0 30px 10px grey;
}*/

/* (unused) .button:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 1px 1px 1px rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.5);
  background: #777777 linear-gradient(45deg, #cccccc, #777777);
}*/

/* (unused) .button > img {
  pointer-events: none;
}*/

/* (unused) .button.close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
}*/

/* (unused) .miniButton {
  height: 30px;
  width: 42px;
  background-color: darkgrey;
  border: 2px outset lightgrey;
  padding: 0;
  justify-self: center;
}*/

/* (unused) .minimenu {
  position: absolute;
  right: 0;
  top: 0;
  height: 20px;
  width: 16px;
  cursor: pointer;
  background: #444;
  color: #AAA;
  padding: 0;
}*/

/* (unused) .dropzone:hover {
  filter: brightness(1.5);
}*/

/* (unused) .hint {
  cursor: help;
}*/

/* (unused) .invisible {
  display: none;
}*/

/* (unused) .button.icon {
  height: 50px;
  width: 50px;
}*/

/* (unused) table {
  table-layout: initial;
  width: 100%;
  /* border: 1px solid dimgrey *\/
  border-collapse: collapse;
}*/

/* (unused) th, td {
  border: 1px solid grey;
  padding: 3px;
}*/

/* (unused) .headerCol {
  text-align: left;
  font-size: larger;
  font-weight: bold;
  padding: 1em 12px 8px;
  border: 0;
}*/

/* (unused) .numberCol {
  text-align: right;
}*/

/**** GENERAL icons anywhere on the page **** */
/* (unused) .clickable {
  cursor: pointer;
}*/

/* (unused) .icon {
  /* display: inline-block *\/
  position: relative;
  margin: 0;
}*/

/* (unused) .icon img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}*/

/* (unused) .icon figcaption {
  position: absolute;
  left: 15px;
  top: 40px;
  width: 3ch;
  text-align: center;
  margin: 0;
  background: #555;
  font-size: small;
}*/

/* (unused) .icon a {
  position: absolute;
  left: -5px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  font-size: 80%;
}*/

/* (unused) .icon p {
  position: relative;
  bottom: 8px;
  width: 55px;
  /* height: 15px *\/
  font-size: 80%;
  text-align: center;
  overflow: hidden;
}*/

/* (unused) .icon.spanRows {
  grid-row: 1/span 5;
}*/

/* (unused) figure > img {
  pointer-events: none;
}*/

.doublespan.svelte-igupox {
  grid-column: span 2;
  white-space: nowrap;
}

/* (unused) .triplespan {
  grid-column: span 3;
}*/

/* (unused) .quadspan {
  grid-column: span 4;
}*/

/* (unused) .centered {
  text-align: center !important;
}*/

/* (unused) .hidden {
  display: none;
}*/

/**** combined selectors not supported by svelte **** */
/* (unused) .actdata {
  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;
}*/

/* (unused) .affil-fellow {
  background-color: #0000ff;
}*/

/* (unused) .affil-friend {
  background-color: #1f991f;
}*/

/* (unused) .affil-neutral {
  background-color: #999999;
}*/

/* (unused) .affil-enemy.rank1 {
  background-color: #e6e60b;
}*/

/* (unused) .affil-enemy.rank2 {
  background-color: #e6780b;
}*/

/* (unused) .affil-enemy.rank3 {
  background-color: #cc1414;
}*/

/* (unused) .affil-enemy.rank {
  background-color: #7e17e6;
}*/

/* (unused) .areaEffect {
  position: absolute;
  border-radius: 50%;
  opacity: 70%;
}*/

/**** MAP arrows **** */
/* (unused) .hole {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  --rect-size: 75px;
  /* can cut through all this * *\/
  background-color: rgba(10, 161, 232, 0.3);
  backdrop-filter: blur(3px);
  justify-content: center;
}*/

/**** common TIMELINE styles **** */
/* (unused) .tick-time {
  grid-column: 1;
}*/

/* (unused) .tick-char {
  justify-self: center;
}*/

/* (unused) .tick-actor {
  display: inline-block;
  position: relative;
  grid-column: 2;
  grid-row: span 3;
}*/

/* (unused) .tick-double {
  grid-column: 3/span 2;
}*/

/* (unused) .review {
  grid-row: span 3;
}*/

/* (unused) .playerView .review {
  display: none;
}*/

details.svelte-igupox {
  max-width: 500px;
  padding: 16px 8px;
}

summary.svelte-igupox {
  display: flex;
  font-size: 20px;
  font-weight: bold;
}

/* (unused) summary + div {
  padding: 10px 0;
}*/

summary.svelte-igupox:hover {
  cursor: pointer;
}

summary.svelte-igupox::after {
  content: "\f059";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.65));
  padding-left: 8px;
}

details[open].svelte-igupox > summary:where(.svelte-igupox)::after {
  content: "\f078";
}

/* (unused) summary.incident::after {
  content: "\f05a";
  color: var(--color-grey-6);
}*/

/* (unused) details[open] > summary.incident::after {
  content: "\f00d";
  color: var(--color-grey-6);
}*/

/* (unused) summary.incident.dark::after {
  color: var(--color-grey-1);
}*/

/* (unused) details[open] > summary.incident.dark::after {
  color: var(--color-grey-1);
}*/

/* (unused) details .explanation {
  margin: 8px;
}*/

/*Info-Box* */
/* (unused) .infobox {
  display: flex;
  flex-flow: column nowrap;
  background-color: var(--color-primary-040-black);
  border-radius: 15px;
  padding: 20px 20px 0 20px;
  margin: 15px 0;
}*/

/* (unused) .infobox details {
  padding: 0 0 15px 0;
}*/

/* (unused) .infobox summary {
  font-size: 18px;
  font-weight: bold;
}*/

/* (unused) .tabContent,
#gearPanel,
.combatPanel {
  padding: 5px;
  background-color: var(--color-grey-1);
  /* border: 2px solid var(--color-grey-1) * *\/
}*/

/* (unused) .tabContent tr:nth-child(even) td,
#gearPanel tr:nth-child(even) td {
  background-color: var(--color-grey-4);
}*/

/* (unused) .tabContent tr:nth-child(odd) td,
#gearPanel tr:nth-child(odd) td {
  background-color: var(--color-grey-3);
}*/

/* (unused) .tabContent thead,
#gearPanel thead,
.combatPanel thead {
  background-color: var(--color-primary-060-black);
  font-style: italic;
}*/

/* (unused) .tabContent table, .tabContent th, .tabContent td,
#gearPanel table, #gearPanel th, #gearPanel td,
.combatPanel table, #gearPanel th, #gearPanel td {
  border: none;
  outline: none;
  border-collapse: collapse;
}*/

/* (unused) .tabContent td,
#gearPanel td,
.combatPanel td {
  padding: 5px 5px;
}*/

/* (unused) .tabContent h3,
#gearPanel h3,
.combatPanel h3 {
  background-color: var(--color-primary-040-black);
  padding: 5px 0;
  margin-bottom: 0;
  text-align: center;
  border-radius: 15px 15px 0 0;
}*/

/* (unused) .combatPanel {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  padding: 20px 10px;
}*/

/* (unused) .combatPanel .activityarea {
  position: relative;
  border-radius: 15px;
  border: 2px solid var(--color-primary-040-black);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  break-inside: avoid;
  background-color: var(--color-grey-4);
  padding: 0;
}*/

/* (unused) .combatPanel .activityarea-inner {
  padding: 20px 10px;
}*/

/* (unused) .combatPanel .activityarea h3 {
  margin: 0;
}*/

#effectPopup.svelte-igupox {
  position: absolute;
  max-width: 240px;
  border: rgb(13, 137, 137) 2px solid;
  border-radius: 5px;
  margin: 0;
  padding: 8px;
  color: var(--color-white);
  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: var(--color-grey-2);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}
@font-face {
  font-family: "EB Garamond";
  src: local("Garmond"), url("./fonts/EBGaramond-VariableFont_wght.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./fonts/fontawesome/fa-solid-900.woff2") format("woff2");
}
/*******************/
/**** VARIABLES ****/
/*******************/
:root {
  --color-white:	#ffffff;
  --color-black:	#000000;
  --color-grey: #666666;
  --color-primary-100:	#0D8989 /** rgba(13,137,137,1) */;
  --color-primary-020:	rgba(13,137,137,0.2);
  --color-primary-040-black:	#053737 /* rgba(13,137,137,0.4) in front of black background */;
  --color-primary-060-black:	#085252 /* rgba(13,137,137,0.6) in front of black background */;
  --color-primary-080-black:	#0A6E6E /* rgba(13,137,137,0.8) in front of black background */;
  --color-highlight-blue-100:	#2F74C2;
  --color-highlight-blue-040-black:	#132E4E /* rgba(13,137,137,0.4) in front of black background */;
  --color-highlight-blue-060-black:	#1C4674 /* rgba(13,137,137,0.6) in front of black background */;
  --color-highlight-blue-080-black:	#265D9B;
  --color-highlight-red-100:	#b00f0f;
  --color-highlight-red-040-black:	#460606 /* rgba(13,137,137,0.4) in front of black background */;
  --color-highlight-red-060-black:	#6A0909 /* rgba(13,137,137,0.6) in front of black background */;
  --color-highlight-red-080-black:	#8D0C0C;
  --color-highlight-yellow-100:	#b9970d;
  --color-highlight-yellow-040-black:	#4A3C05 /* rgba(13,137,137,0.4) in front of black background */;
  --color-highlight-yellow-060-black:	#6F5B08 /* rgba(13,137,137,0.6) in front of black background */;
  --color-highlight-yellow-080-black: #94790A;
  --color-grey-1:	#867D7D;
  --color-grey-2:	#514545;
  --color-grey-3:	#373535;
  --color-grey-4:	#222222;
  --color-grey-5:	#333333;
  --color-grey-6:	#ddd6d6;
}

/*********************/
/**** FONTAWESOME ****/
/*********************/
.fa.svelte-1u8c9lr {
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.65));
}

.fa-check.svelte-1u8c9lr::before {
  content: "\f00c";
}

.fa-chevron-down.svelte-1u8c9lr::before {
  content: "\f078";
}

.fa-chevron-right.svelte-1u8c9lr::before {
  content: "\f054";
}

.fa-book-open.svelte-1u8c9lr::before {
  content: "\f518";
}

.fa-pen-to-square.svelte-1u8c9lr::before {
  content: "\f044";
}

.fa-person.svelte-1u8c9lr::before {
  content: "\f183";
}

.fa-chess-rook.svelte-1u8c9lr::before {
  content: "\f447";
}

.fa-xmark.svelte-1u8c9lr::before {
  content: "\f00d";
}

.fa-square-xmark.svelte-1u8c9lr::before {
  content: "\f057";
}

.fa-square-xmark.svelte-1u8c9lr::before {
  content: "\f2d3";
}

.fa-bars.svelte-1u8c9lr::before {
  content: "\f0c9";
}

.fa-star.svelte-1u8c9lr::before {
  content: "\f005";
}

.fa-hand.svelte-1u8c9lr::before {
  content: "\f256";
}

.fa-play.svelte-1u8c9lr::before {
  content: "\f04b";
}

.fa-dice.svelte-1u8c9lr::before {
  content: "\f522";
}

.fa-plus.svelte-1u8c9lr::before {
  content: "+";
}

.fa-brands.svelte-1u8c9lr::before {
  content: "\f2b4";
}

.fa-right-to-bracket.svelte-1u8c9lr::before {
  content: "\f2f6";
}

.fa-right-from-bracket.svelte-1u8c9lr::before {
  content: "\f2f5";
}

.fa-pen.svelte-1u8c9lr::before {
  content: "\f304";
}

.fa-arrow-up.svelte-1u8c9lr::before {
  content: "\f062";
}

.fa-back.svelte-1u8c9lr::before {
  content: "\f1da";
}

.fa-trash.svelte-1u8c9lr::before {
  content: "\f1f8";
}

.fa-trash-arrow-up.svelte-1u8c9lr::before {
  content: "\f829";
}

.fa-scissors.svelte-1u8c9lr::before {
  content: "\f0c4";
}

.fa-refresh.svelte-1u8c9lr::before {
  content: "\f021";
}

.fa-clipboard-user.svelte-1u8c9lr::before {
  content: "\f7f3";
}

.fa-map.svelte-1u8c9lr::before {
  content: "\f279";
}

.fa-deploy.svelte-1u8c9lr::before {
  content: "\e538";
}

.fa-dungeon.svelte-1u8c9lr::before {
  content: "\f6d9";
}

/*Functional Styling*/
@media (pointer: coarse), (hover: none) {
  [title].svelte-1u8c9lr {
    position: relative;
    display: inline-flex;
    /*justify-content: center*/
  }
  [title].svelte-1u8c9lr:focus::after {
    content: attr(title);
    position: absolute;
    top: 90%;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1px solid;
    width: fit-content;
    padding: 3px;
    font-size: 10px;
  }
}
.svelte-1u8c9lr {
  box-sizing: border-box;
}

/************************/
/**** GENERAL styles ****/
/************************/
.scrollable.svelte-1u8c9lr {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

/*ToDo:  Conditionally hiding the scrollbar (https://blog.logrocket.com/hide-scrollbar-without-impacting-scrolling-css/) */
/* (unused) dialog {
  background-color: #DDD;
  border-radius: 1em;
  border: none;
  padding: 0;
  z-index: 10;
}*/

/* (unused) a, p,*/ button.svelte-1u8c9lr /* (unused) input, select, textarea*/ {
  margin: 0;
  padding-top: 4px;
  font-size: 110%;
}

button.svelte-1u8c9lr {
  border: 0;
  outline: none;
  background-color: transparent;
}

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

img.svelte-1u8c9lr {
  -webkit-touch-callout: none;
}

.text-button.svelte-1u8c9lr:hover {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.button.svelte-1u8c9lr {
  position: relative;
  background-size: auto 37px;
  height: 37px;
  width: max-content;
  border-radius: 45px;
  cursor: pointer;
}

.button.svelte-1u8c9lr:hover {
  filter: brightness(200%);
}

.button-primary.svelte-1u8c9lr {
  width: min-content;
  height: auto;
  height: 34px;
  background-image: linear-gradient(180deg, var(--color-grey-1), var(--color-grey-2) 44%);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.65));
  text-align: center;
  border-radius: 45px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-white);
  padding: 8px;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  min-width: 100px;
}

.button-primary.petrol.svelte-1u8c9lr {
  background-image: linear-gradient(180deg, var(--color-primary-100), var(--color-primary-040-black) 44%);
}

.button-primary.svelte-1u8c9lr:hover {
  background-image: linear-gradient(180deg, var(--color-grey-1), var(--color-grey-2) 75%);
}

.button-primary.petrol.svelte-1u8c9lr:hover {
  background-image: linear-gradient(180deg, var(--color-primary-100), var(--color-primary-040-black) 75%);
}

.button-primary-circle.svelte-1u8c9lr {
  padding: 8px 15px 8px 45px;
}

.button-primary-circle.svelte-1u8c9lr::before {
  width: 30px;
  height: 30px;
  background-color: var(--color-grey-3);
  border: 2px solid var(--color-grey-1);
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  border-radius: 45px;
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-primary-circle.petrol.svelte-1u8c9lr::before {
  background-color: var(--color-primary-040-black);
  border: 2px solid var(--color-primary-100);
}

.button-primary:hover.button-primary-circle.svelte-1u8c9lr::before {
  background-color: var(--color-grey-2);
}

.button-primary.petrol:hover.button-primary-circle.svelte-1u8c9lr::before {
  background-color: var(--color-primary-060-black);
}

.button-circle.svelte-1u8c9lr {
  position: relative;
  background-color: var(--color-grey-3);
  border: 2px solid var(--color-grey-1);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.65));
  width: 36px;
  height: 36px;
  border-radius: 45px;
  color: var(--color-white);
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
}

.button-icon.svelte-1u8c9lr {
  width: 20px;
  height: 20px;
}

.button-label.svelte-1u8c9lr {
  color: var(--color-white);
  font-weight: bold;
  padding-left: 40px;
  padding-right: 10px;
  display: block;
}

/* (unused) h1 {
  text-align: center;
  font-size: xx-large;
}*/

/*h3
 * margin: 0.5em  */
/* (unused) label {
  color: #ccc;
}*/

/* (unused) textarea {
  color: var(--color-white);
  background-color: var(--color-black);
  border: darkgrey 1px solid;
  font-size: 110%;
}*/

.text.svelte-1u8c9lr {
  /*padding: 0*/
  /*position: relative*/
  /*background: var(--color-grey-2)*/
  color: var(--color-white);
  /*vertical-align: baseline*/
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--color-grey-2);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
  padding-top: 4px \9 ;
}

/* (unused) input, select {
  background: black;
  color: var(--color-white);
  -webkit-user-select: text;
  overflow: visible;
  line-height: normal;
}*/

/* (unused) output {
  text-align: right;
}*/

/* (unused) input:disabled {
  color: #ccc;
}*/

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

/* (unused) input[type=file] {
  display: none;
}*/

/* (unused) .text input[type=text]:hover {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}*/

/* (unused) .text input[type=text]:focus {
  box-shadow: 0 0 0 3px #80a62d;
}*/

/* Chrome, Safari, Edge, Opera */
/* (unused) input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}*/

/* Firefox */
/* (unused) input[type=number] {
  -moz-appearance: textfield;
  text-align: right;
}*/

/* (unused) .text input[type=submit]:hover, .text-rounded input[type=submit]:hover, .text input[type=submit]:focus, .text-rounded input[type=submit]:focus {
  background-position: center -30px;
}*/

.button.svelte-1u8c9lr {
  position: relative;
  display: inline-block;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  user-select: none;
}

.button.svelte-1u8c9lr:disabled {
  opacity: 20%;
}

.button.svelte-1u8c9lr:hover, .button.svelte-1u8c9lr:focus {
  filter: brightness(150%);
  box-shadow: 0 0 30px 10px grey;
}

.button.svelte-1u8c9lr:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 1px 1px 1px rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.5);
  background: #777777 linear-gradient(45deg, #cccccc, #777777);
}

.button.svelte-1u8c9lr > img:where(.svelte-1u8c9lr) {
  pointer-events: none;
}

.button.close.svelte-1u8c9lr {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
}

.miniButton.svelte-1u8c9lr {
  height: 30px;
  width: 42px;
  background-color: darkgrey;
  border: 2px outset lightgrey;
  padding: 0;
  justify-self: center;
}

.minimenu.svelte-1u8c9lr {
  position: absolute;
  right: 0;
  top: 0;
  height: 20px;
  width: 16px;
  cursor: pointer;
  background: #444;
  color: #AAA;
  padding: 0;
}

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

.hint.svelte-1u8c9lr {
  cursor: help;
}

.invisible.svelte-1u8c9lr {
  display: none;
}

.button.icon.svelte-1u8c9lr {
  height: 50px;
  width: 50px;
}

/* (unused) table {
  table-layout: initial;
  width: 100%;
  /* border: 1px solid dimgrey *\/
  border-collapse: collapse;
}*/

/* (unused) th, td {
  border: 1px solid grey;
  padding: 3px;
}*/

.headerCol.svelte-1u8c9lr {
  text-align: left;
  font-size: larger;
  font-weight: bold;
  padding: 1em 12px 8px;
  border: 0;
}

.numberCol.svelte-1u8c9lr {
  text-align: right;
}

/**** GENERAL icons anywhere on the page **** */
.clickable.svelte-1u8c9lr {
  cursor: pointer;
}

.icon.svelte-1u8c9lr {
  /* display: inline-block */
  position: relative;
  margin: 0;
}

/* (unused) .icon img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}*/

/* (unused) .icon figcaption {
  position: absolute;
  left: 15px;
  top: 40px;
  width: 3ch;
  text-align: center;
  margin: 0;
  background: #555;
  font-size: small;
}*/

/* (unused) .icon a {
  position: absolute;
  left: -5px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  font-size: 80%;
}*/

/* (unused) .icon p {
  position: relative;
  bottom: 8px;
  width: 55px;
  /* height: 15px *\/
  font-size: 80%;
  text-align: center;
  overflow: hidden;
}*/

.icon.spanRows.svelte-1u8c9lr {
  grid-row: 1/span 5;
}

/* (unused) figure > img {
  pointer-events: none;
}*/

.doublespan.svelte-1u8c9lr {
  grid-column: span 2;
  white-space: nowrap;
}

.triplespan.svelte-1u8c9lr {
  grid-column: span 3;
}

.quadspan.svelte-1u8c9lr {
  grid-column: span 4;
}

.centered.svelte-1u8c9lr {
  text-align: center !important;
}

.hidden.svelte-1u8c9lr {
  display: none;
}

/**** combined selectors not supported by svelte **** */
.actdata.svelte-1u8c9lr {
  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;
}*/

.affil-fellow.svelte-1u8c9lr {
  background-color: #0000ff;
}

.affil-friend.svelte-1u8c9lr {
  background-color: #1f991f;
}

.affil-neutral.svelte-1u8c9lr {
  background-color: #999999;
}

.affil-enemy.rank1.svelte-1u8c9lr {
  background-color: #e6e60b;
}

.affil-enemy.rank2.svelte-1u8c9lr {
  background-color: #e6780b;
}

.affil-enemy.rank3.svelte-1u8c9lr {
  background-color: #cc1414;
}

.affil-enemy.rank.svelte-1u8c9lr {
  background-color: #7e17e6;
}

.areaEffect.svelte-1u8c9lr {
  position: absolute;
  border-radius: 50%;
  opacity: 70%;
}

/**** MAP arrows **** */
.hole.svelte-1u8c9lr {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  --rect-size: 75px;
  /* can cut through all this * */
  background-color: rgba(10, 161, 232, 0.3);
  backdrop-filter: blur(3px);
  justify-content: center;
}

/**** common TIMELINE styles **** */
.tick-time.svelte-1u8c9lr {
  grid-column: 1;
}

.tick-char.svelte-1u8c9lr {
  justify-self: center;
}

.tick-actor.svelte-1u8c9lr {
  display: inline-block;
  position: relative;
  grid-column: 2;
  grid-row: span 3;
}

.tick-double.svelte-1u8c9lr {
  grid-column: 3/span 2;
}

.review.svelte-1u8c9lr {
  grid-row: span 3;
}

/* (unused) .playerView .review {
  display: none;
}*/

/* (unused) details {
  max-width: 500px;
  padding: 16px 8px;
}*/

/* (unused) summary {
  display: flex;
  font-size: 20px;
  font-weight: bold;
}*/

/* (unused) summary + div {
  padding: 10px 0;
}*/

/* (unused) summary:hover {
  cursor: pointer;
}*/

/* (unused) summary::after {
  content: "\f059";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.65));
  padding-left: 8px;
}*/

/* (unused) details[open] > summary::after {
  content: "\f078";
}*/

/* (unused) summary.incident::after {
  content: "\f05a";
  color: var(--color-grey-6);
}*/

/* (unused) details[open] > summary.incident::after {
  content: "\f00d";
  color: var(--color-grey-6);
}*/

/* (unused) summary.incident.dark::after {
  color: var(--color-grey-1);
}*/

/* (unused) details[open] > summary.incident.dark::after {
  color: var(--color-grey-1);
}*/

/* (unused) details .explanation {
  margin: 8px;
}*/

/*Info-Box* */
.infobox.svelte-1u8c9lr {
  display: flex;
  flex-flow: column nowrap;
  background-color: var(--color-primary-040-black);
  border-radius: 15px;
  padding: 20px 20px 0 20px;
  margin: 15px 0;
}

/* (unused) .infobox details {
  padding: 0 0 15px 0;
}*/

/* (unused) .infobox summary {
  font-size: 18px;
  font-weight: bold;
}*/

.tabContent.svelte-1u8c9lr /* (unused) #gearPanel*/,
.combatPanel.svelte-1u8c9lr {
  padding: 5px;
  background-color: var(--color-grey-1);
  /* border: 2px solid var(--color-grey-1) * */
}

/* (unused) .tabContent tr:nth-child(even) td,
#gearPanel tr:nth-child(even) td {
  background-color: var(--color-grey-4);
}*/

/* (unused) .tabContent tr:nth-child(odd) td,
#gearPanel tr:nth-child(odd) td {
  background-color: var(--color-grey-3);
}*/

/* (unused) .tabContent thead,
#gearPanel thead,
.combatPanel thead {
  background-color: var(--color-primary-060-black);
  font-style: italic;
}*/

/* (unused) .tabContent table, .tabContent th, .tabContent td,
#gearPanel table, #gearPanel th, #gearPanel td,
.combatPanel table, #gearPanel th, #gearPanel td {
  border: none;
  outline: none;
  border-collapse: collapse;
}*/

/* (unused) .tabContent td,
#gearPanel td,
.combatPanel td {
  padding: 5px 5px;
}*/

/* (unused) .tabContent h3,
#gearPanel h3,
.combatPanel h3 {
  background-color: var(--color-primary-040-black);
  padding: 5px 0;
  margin-bottom: 0;
  text-align: center;
  border-radius: 15px 15px 0 0;
}*/

.combatPanel.svelte-1u8c9lr {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  padding: 20px 10px;
}

/* (unused) .combatPanel .activityarea {
  position: relative;
  border-radius: 15px;
  border: 2px solid var(--color-primary-040-black);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  break-inside: avoid;
  background-color: var(--color-grey-4);
  padding: 0;
}*/

/* (unused) .combatPanel .activityarea-inner {
  padding: 20px 10px;
}*/

/* (unused) .combatPanel .activityarea h3 {
  margin: 0;
}*/

/** framework of application (header and main) **/
body {
  position: fixed;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  margin: 0;
  background: black;
  color: white;
  accent-color: rgb(13, 137, 137);
  font-family: Arial, Helvetica, sans-serif;
  text-decoration-thickness: 1px;
  user-select: none;
  padding: 0;
}

main {
  position: fixed;
  left: 380px;
  top: 0;
  width: calc(100vw - 380px);
  height: 100vh;
  /*padding: 30px*/
}

.master main.svelte-1u8c9lr {
  left: 420px;
  width: calc(100vw - 420px);
}

@media (min-width: 640px) {
  main.svelte-1u8c9lr {
    max-width: none;
  }
}
header.svelte-1u8c9lr {
  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");
}

/*header::-webkit-scrollbar display: none }*/
.master header.svelte-1u8c9lr {
  top: 102px;
  width: 420px;
  height: calc(100vh - 102px);
}

header.prep.svelte-1u8c9lr {
  top: 102px;
  left: 40px;
  width: 372px;
  margin: 0 4px;
}

/*** main navigation (dragon menu) ***/
#modeNav.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: var(--color-primary-100);
  padding: 0;
  border-radius: 0 0 50px 0;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
  color: var(--color-white);
}

#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;
  /*** Layout navigation via tabs next to dragon menu ***/
}

#layoutButtonBox.svelte-1u8c9lr {
  position: absolute;
  left: 120px;
  display: flex;
  justify-content: space-evenly;
}

.layoutTab.svelte-1u8c9lr {
  cursor: pointer;
  padding: 4px 6px;
  border: 1px solid transparent;
  margin-bottom: -1px;
  background-color: var(--color-grey-3);
  border-bottom-color: var(--color-grey-1);
}

.layoutTab.selected.svelte-1u8c9lr {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-width: 8px;
  border-color: var(--color-primary-100) var(--color-grey-1) var(--color-grey-3);
}

.layoutTab.svelte-1u8c9lr img:where(.svelte-1u8c9lr) {
  width: 36px;
}

#layoutButtonBox.svelte-1u8c9lr img:where(.svelte-1u8c9lr) {
  width: 36px;
}

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

#mainMenu.svelte-1u8c9lr ul:where(.svelte-1u8c9lr) {
  list-style-type: none;
  padding: 0;
  margin-top: 30px;
  margin-left: 17px;
}

#mainMenu.svelte-1u8c9lr .menu-open-header:where(.svelte-1u8c9lr) {
  display: flex;
  flex-flow: row nowrap;
  background-color: var(--color-primary-100);
  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: var(--color-white);
}

.mainMenu-item.svelte-1u8c9lr {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 20px 0 20px 25px;
  height: 24px;
  gap: 10px;
  color: var(--color-white);
  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;
}*/

main.svelte-1u8c9lr {
  height: 100vh;
  overflow: hidden;
  background: rgb(20, 20, 20);
}

main.fullscreen.svelte-1u8c9lr {
  left: 0;
  width: 100vw;
}

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

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

#breadcrumbs.svelte-1u8c9lr {
  position: absolute;
  left: 120px;
  width: 296px;
  top: 0;
}

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

/* (unused) #prepTabs {
  position: absolute;
  left: 8px;
  top: 114px;
  width: 64px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}*/

.playMenu.svelte-1u8c9lr {
  position: absolute;
  left: -16px;
  width: max-content;
}

/* (unused) .playMenu button {
  border: 4px solid black;
}*/