:root {
  /* NOTE: --section-text and --action-text should be the same because some components are shown over both. */
  --action-text: white;
  --action-bg: black;
  --action-hover-bg: #222;
  --action-disabled-text: #555;
  --section-text: #eee;
  --section-bg: #333d;
  --section-bg-solid: #333;
  --section-accent-bg: #224166; /* highlighting part of a section */
  --section-accent-text: white;
  --section-disabled-text: gray;
  --play-section-bg: #a58e6eaa;
  --play-section-text: white;
  /* --subsection-bg  Should work with --section-text */
  --subsection-bg: #5a462e88;
  --button-bg: #5a462e;
  --button-disabled-bg: #5a462e55;
  --button-disabled-text: #999;
  --button-hover-bg: #4b3c2b;
  --button-active-bg: #4b3c2b;
  --button-border: #aaa8;
  --button-text: #eee;
  --button-accent-bg: #222;
  --button-accent-text: #eee;
  --bg-gloomhaven: url('/public/images/gloomhaven-cover.webp');
  --bg-travel: url('/public/images/cropped-world-map.webp');
  --bg-party: url('/public/images/sleeping-lion.webp');
  --bg-page: url('/public/images/cropped-page-left.webp');
  --bg-color: #1b1b1b;
  --bg-text: #e5e5e5;
  --image-bg: #0008; /* Show on top of images. */
  --image-text: white; /* Show on top of images. */
  --section-title-width: 4.5em; /* portrait width minus section padding */
  --portrait-width: 5em;
  --unique-width: 10em;
  --ability-card-width: 10.5em;
  --tracker-width: 39.5em;
  /* #39250E dark red border */
  /* #5A462E medium red border */
  /* #8FAB7B tan bg #191919 black fg */
  /* #224166 blue fg */
}
[button-theme='gold'] {
  --subsection-bg: #ffd70033;
  --button-bg: gold;
  --button-disabled-bg: #ffd70055;
  --button-disabled-text: #555;
  --button-hover-bg: #e1c20d;
  --button-active-bg: #e1c20d;
  --button-border: #444;
  --button-text: black;
  --button-accent-bg: #224166;
  --button-accent-text: white;
}
[button-theme='white'] {
  --subsection-bg: #0004;
  --button-bg: white;
  --button-disabled-bg: #777;
  --button-disabled-text: #555;
  --button-hover-bg: #ddd;
  --button-active-bg: #aaa;
  --button-border: lightgrey;
  --button-text: black;
  --button-accent-bg: #224166;
  --button-accent-text: white;
}
[button-theme='brown'] {
  --subsection-bg: #5a462e88;
  --button-bg: #5a462e;
  --button-disabled-bg: #5a462e55;
  --button-disabled-text: #999;
  --button-hover-bg: #4b3c2b;
  --button-active-bg: #4b3c2b;
  --button-border: #aaa8;
  --button-text: #eee;
  --button-accent-bg: #222;
  --button-accent-text: #eee;
}
[bg-theme='page'] {
  --bg-gloomhaven: url('/public/images/cropped-page-left.webp');
  --bg-travel: url('/public/images/cropped-page-left.webp');
  --bg-party: url('/public/images/cropped-page-left.webp');
  --bg-page: url('/public/images/cropped-page-left.webp');
}
[bg-theme='black'] {
  --play-section-bg: #a58e6e88;
  --bg-gloomhaven: none;
  --bg-travel: none;
  --bg-party: none;
  --bg-page: none;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
}
body {
  touch-action: manipulation;
}
html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  font-family: OpenSans;
  overscroll-behavior-x: none;
}
.svelte-div {
  /* The div wrapper in src/app.html */
  position: fixed; /* prevent bounce on iOS */
  width: 100%;
  height: 100%;
  overflow: auto;
}
body {
  color: var(--bg-text);
  background-color: var(--bg-color);
}
a.button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0.5em;
  border: 1px solid var(--button-border);
  min-height: 2em;
  min-width: 4em;
  padding-inline: 0.5em;
  background-color: var(--button-bg);
  color: var(--button-text);
  font-weight: 500;
}
button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
}
button.default {
  border-radius: 0.5em;
  border: 1px solid var(--button-border);
  min-height: 2em;
  min-width: 4em;
  padding-inline: 0.5em;
  background-color: var(--button-bg);
  color: var(--button-text);
  font-weight: 500;
}
button.default.max {
  min-width: max-content;
}
button.default[disabled] {
  background-color: var(--button-disabled-bg);
  color: var(--button-disabled-text);
  font-weight: normal;
}
button.default:hover:not([disabled]) {
  background-color: var(--button-hover-bg);
}
button.default:active:not([disabled]) {
  background-color: var(--button-active-bg);
}
button.default.brown {
  border: 1px solid #aaa8;
  background-color: #5a462e;
  color: #eee;
}
button.default.brown[disabled] {
  background-color: #5a462e55;
  color: #999;
}
button.default.brown:hover:not([disabled]) {
  background-color: #4b3c2b;
}
button.default.brown:active:not([disabled]) {
  background-color: #4b3c2b;
}
button.nav {
  /* Larger and fully rounded radius than default */
  color: var(--button-text);
  background-color: var(--button-bg);
  border-radius: 5em;
  border: 1px solid var(--button-border);
  padding: 0.25em;
  min-width: 5em;
  height: 2.5em;
}
button.nav:hover {
  background-color: var(--button-hover-bg);
}
button.icon {
  /* Assumed to have a section bg */
  background: transparent;
  color: var(--section-text);
}
button.icon:disabled,
button.icon[disabled] {
  color: var(--section-disabled-text);
  filter: brightness(50%);
}
button.transparent {
  background: transparent;
}
button.stat {
  /* Assumed to have a section bg */
  background-color: var(--action-bg);
  color: var(--action-text);
  border: 1px solid var(--action-text);
  border-radius: 0.25em;
  padding: 0.125em;
}
button.stat:disabled,
button.stat[disabled] {
  color: var(--section-disabled-text);
}
button.menu,
button.action {
  /* Assumed to have a --action-bg */
  background: transparent;
  color: var(--action-text);
}
button.menu:disabled,
button.menu[disabled],
button.action:disabled,
button.action[disabled] {
  color: var(--action-disabled-text);
}
button.menu:hover,
button.action:hover {
  background-color: var(--action-hover-bg);
}
button.menu {
  text-align: start;
  width: 100%;
}
button.image-overlay {
  /* icon buttons over images */
  width: max-content;
  height: max-content;
  background-color: var(--image-bg);
  color: var(--image-text);
  padding: 0.25em;
  border-radius: 0.25em;
}
button.image,
button.overlay-card,
button.overlay-image {
  background-color: transparent;
  width: max-content;
  height: max-content;
  border-radius: 0.25em;
}
button.red {
  color: #d55e00;
}
button.link {
  border-bottom: 1px dashed #aaa;
}
button svg {
  display: block;
}
svg * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
hr {
  grid-column: 1/-1;
  width: 100%;
  height: 1px;
}
hr.dashed {
  border-style: dashed;
}
.notes-checkboxes {
  border: 1px dashed #888;
  border-radius: 0.25em;
  padding: 0.25em;
}
.subsection {
  /* A section inside a section, typically a row of buttons */
  padding: 0.5em;
  border: 1px solid #fff4;
  border-radius: 10em;
  background-color: var(--subsection-bg);
  color: var(--section-text);
  max-width: max-content;
}
section {
  padding: 0.5em;
  border: 1px solid #fff4;
  border-radius: 0.5em;
  background-color: var(--section-bg);
  color: var(--section-text);
  min-width: min(41em, 100%);
}
section a {
  color: aqua;
}
ul > p,
ol > p {
  padding-bottom: 0.5em;
}
li,
p {
  max-width: 38em;
}
.mw-21 {
  max-width: 21em;
}
.height100 {
  height: 100%;
}
.width100 {
  width: 100%;
}
.width50 {
  width: 50%;
}
.width-max {
  width: max-content;
}
.list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: start;
}
.list-center {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: center;
}
.list.center {
  align-items: center;
}
.subsection,
.row {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
.inline-row {
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
  vertical-align: bottom;
}
.row-reverse {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.5em;
  align-items: center;
}
.wrap {
  flex-wrap: wrap;
}
.flex0 {
  flex: 0;
}
.flex1 {
  flex: 1;
}
.overflow {
  overflow: auto;
}
.gutter {
  scrollbar-gutter: stable;
}
.list.stretch,
.row.stretch {
  align-items: stretch;
}
.row.start {
  align-items: start;
}
.list.end,
.row.end {
  align-items: end;
}
.overflowy {
  overflow-y: auto;
  width: 100%;
}
.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5em;
}
.grid2 {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.5em;
}
.row1 {
  grid-row: 1;
}
.row2 {
  grid-row: 2;
}
.row3 {
  grid-row: 3;
}
.row4 {
  grid-row: 4;
}
.row5 {
  grid-row: 5;
}
.row6 {
  grid-row: 6;
}
.row7 {
  grid-row: 7;
}
.row8 {
  grid-row: 8;
}
.row9 {
  grid-row: 9;
}
.col1 {
  grid-column: 1;
}
.col2 {
  grid-column: 2;
}
.col3 {
  grid-column: 3;
}
.col4 {
  grid-column: 4;
}
.col5 {
  grid-column: 5;
}
.col6 {
  grid-column: 6;
}
.col7 {
  grid-column: 7;
}
.col8 {
  grid-column: 8;
}
.col9 {
  grid-column: 9;
}
.col10 {
  grid-column: 10;
}
.span2 {
  grid-column-end: span 2;
}
.span3 {
  grid-column-end: span 3;
}
.span4 {
  grid-column-end: span 4;
}
.span5 {
  grid-column-end: span 5;
}
.span-row {
  grid-column: 1 / -1;
}
.span-end {
  grid-column-end: -1;
}
.justify-start {
  justify-self: start;
}
.justify-center {
  justify-self: center;
}
.justify-end {
  justify-self: end;
}
.align-start {
  align-self: start;
}
.align-center {
  align-self: center;
}
.align-end {
  align-self: end;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.text-center {
  text-align: center;
}
.background {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: var(--bg-color);
  background-image: var(--bg-page);
  color: var(--bg-text);
}
.page {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
}
.no-bullets {
  list-style-type: none;
}
.italic {
  font-style: italic;
}
.font-1p5 {
  font-size: 1.5em;
}
.font-p85 {
  font-size: 0.85em;
}
.font-p75 {
  font-size: 0.75em;
}
.font-p65 {
  font-size: 0.65em;
}
.font-p55 {
  font-size: 0.55em;
}
.font-p5 {
  font-size: 0.5em;
}
.margin-p5 {
  margin: 0.5em;
}
.margin-p25 {
  margin: 0.25em;
}
.pad-1 {
  padding: 1em;
}
.pad-p5 {
  padding: 0.5em;
}
.pad-p25 {
  padding: 0.25em;
}
.gap-1 {
  gap: 1em;
}
.gap-p5 {
  gap: 0.5em;
}
.gap-p25 {
  gap: 0.25em;
}
.gap-p125 {
  gap: 0.125em;
}
.gap-0 {
  gap: 0;
}
.w10 {
  width: 10em;
}
.w11 {
  width: 11em;
}
.w12 {
  width: 12em;
}
.w13 {
  width: 13em;
}
.w14 {
  width: 14em;
}
.w15 {
  width: 15em;
}
.ml1 {
  width: 1em;
}
.ml2 {
  width: 2em;
}
.ml3 {
  width: 3em;
}
.ml1 {
  margin-left: 1em;
}
.ml2 {
  margin-left: 2em;
}
.mlm1 {
  margin-left: -1em;
}
.mlm2 {
  margin-left: -2em;
}
.mtm1 {
  margin-top: -1em;
}
.mtm2 {
  margin-top: -2em;
}
.mbm1 {
  margin-bottom: -1em;
}
.mbm2 {
  margin-bottom: -2em;
}
.aoe1e3 {
  grid-column: 4 !important;
  grid-row: 1/3;
}
.aoe1e4 {
  grid-column: 4 !important;
  grid-row: 1/4;
}
.aoe1e5 {
  grid-column: 4 !important;
  grid-row: 1/5;
}
.aoe1e6 {
  grid-column: 4 !important;
  grid-row: 1/6;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.nowrap {
  white-space: nowrap;
}
.overlay-image {
  display: grid;
  align-items: center;
  justify-items: center;
  color: var(--image-text);
  font-family: OpenSans;
  text-shadow: black 1px 1px 1px;
}
.overlay-image > * {
  grid-area: 1/1;
}
.overlay-card {
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-items: center;
  color: var(--image-text);
  font-family: OpenSans;
}
.overlay-card > * {
  /* Setting a filter in CSS changes the order things are rendered,
     potentially hiding one element behind another. This explicitly sets a
     no-effect filter to force rendering order to be unchanged if one of the
     children adds a custom filter. */
  filter: grayscale(0%);
}
.overlay-card :first-child {
  grid-row: 1 / -1;
  grid-column: 1;
}
.overlay-card > .top-half {
  grid-row: 1;
  grid-column: 1;
  margin: 0.25em;
}
.overlay-card > .bottom-half {
  grid-row: 2;
  grid-column: 1;
  margin: 0.25em;
}
.overlay-card > .full {
  grid-row: 1 / -1;
  grid-column: 1;
  margin: 0.25em;
}
.contents {
  display: contents;
}
span.icon {
  display: inline-block;
}
.icon.tiny {
  width: 0.875em;
  height: 0.875em;
  min-width: 0.875em;
}
.icon.small {
  width: 1.25em;
  height: 1.25em;
  min-width: 1.25em;
}
.icon.medium {
  width: 1.5em;
  height: 1.5em;
  min-width: 1.5em;
}
.icon.normal {
  width: 1.75em;
  height: 1.75em;
  min-width: 1.75em;
}
.icon.big {
  width: 3em;
  height: 3em;
  min-width: 3em;
}
.icon.portrait {
  width: 4em;
  height: 4em;
}
svg,
svg *,
.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.capitalize {
  text-transform: capitalize;
}
.book-pages.dim {
  filter: brightness(75%);
}
details[open] summary {
  margin-bottom: 0.5em;
}
.elite {
  color: #f0e442;
}
.germania {
  font-family: GermaniaOne;
}
.pirata {
  font-family: PirataOne;
}
.markazi {
  font-family: Markazi;
}
@font-face {
  font-family: PirataOne;
  src: url('/public/fonts/PirataOne-Gloomhaven.eot');
  src: url('/public/fonts/PirataOne-Gloomhaven.woff') format('woff'),
    url('/public/fonts/PirataOne-Gloomhaven.ttf') format('truetype'),
    url('/public/fonts/PirataOne-Gloomhaven.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: OpenSans;
  src: url('/public/fonts/opensans/OpenSans-Regular.ttf');
}
@font-face {
  font-family: Majalla;
  src: url('/public/fonts/majallab.eot');
  src: url('/public/fonts/majallab.woff') format('woff'),
    url('/public/fonts/majallab.ttf') format('truetype'),
    url('/public/fonts/majallab.svg') format('svg');
}
@font-face {
  font-family: HighTower;
  src: url('/public/fonts/HighTower.eot');
  src: url('/public/fonts/HighTower.woff') format('woff'),
    url('/public/fonts/HighTower.ttf') format('truetype'),
    url('/public/fonts/HighTower.svg') format('svg');
}
@font-face {
  font-family: Nyala;
  src: url('/public/fonts/nyala.eot');
  src: url('/public/fonts/nyala.woff') format('woff'),
    url('/public/fonts/nyala.ttf') format('truetype'),
    url('/public/fonts/nyala.svg') format('svg');
}
@font-face {
  font-family: Markazi;
  src: url('/public/fonts/markazi.eot');
  src: url('/public/fonts/markazi.woff') format('woff'),
    url('/public/fonts/markazi.ttf') format('truetype'),
    url('/public/fonts/markazi.svg') format('svg');
}
@font-face {
  font-family: GermaniaOne;
  src: url('/public/fonts/germaniaone.eot');
  src: url('/public/fonts/germaniaone.woff') format('woff'),
    url('/public/fonts/germaniaone.ttf') format('truetype'),
    url('/public/fonts/germaniaone.svg') format('svg');
}