:root {
  --white: #ffffff;
  --black: #000000;
  --red: #ff0000;
  --blue: #0000ff;
  --yellow: #ffff00;
  --green: #00ff00;
  --purple: #800080;
  --maroon: #800000;
  --orange: #ffa040;
  --azure: #00aeff;
  --pink: #ff80ff;
  --mint: #80ff80;
  --dark: #0d0d16;
  --gray: #808080;
  --border: #333333;
  --shadow: rgba(0,0,0,0.8);
  --faint: rgba(255,255,255,0.1);
}

@font-face {
  font-family: "8-bit operator";
  src: url("/assets/fonts/fnt_main.woff");
  font-display: swap;
}

/*//////////////////////////////////////////////////////////////////////*/

.font {
  position: relative;
  display: inline-block;
  line-height: var(--lh, 16px);
  font-family: "8-bit operator", monospace;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  filter: drop-shadow(1px 1px 0 var(--black));
}

.font .word {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top
}

.font .glyph {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: var(--gs);
  height: var(--lh, 16px);
  overflow: hidden;
  color: transparent;
  font-size: calc(var(--font-size, 16px) * 1.3);
  line-height: var(--lh, 16px);
  white-space: pre;
}

.fontlink {
  border-bottom: 2px solid var(--ink, var(--white));
  cursor: pointer
}

.font .glyph::before {
  content: "";
  position: absolute;
  top: 0; left: var(--go); width: var(--gw); height: var(--gh);
  background-color: var(--ink, var(--white));
  -webkit-mask-image: var(--atlas); mask-image: var(--atlas);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: var(--gp); mask-position: var(--gp);
  image-rendering: pixelated; pointer-events: none;
}

.font .glyphx {
  display: inline-block;
  vertical-align: top;
  line-height: var(--lh, 16px);
  color: var(--ink, var(--white));
}

.font ::selection {background-color: var(--azure); color: transparent}
.font ::-moz-selection {background-color: var(--azure); color: transparent}

.headicon {
  display: inline-block;
  width: 16px; height: 16px;
  vertical-align: top;
  image-rendering: pixelated;
}

/*//////////////////////////////////////////////////////////////////////*/

.tooltip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  background: var(--shadow);
  color: var(--white);
  padding: 4px 6px;
  max-width: 80vw;
  image-rendering: pixelated;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tooltip.show {opacity: 1}

.tipsub {
  margin-top: 4px;
  text-align: left;
  opacity: 0.7
}
.tipsub:empty, .tipmain:empty {display: none}

.tipicon {
  height: 15px;
  width: auto;
  vertical-align: -3px;
  margin-right: 5px;
  image-rendering: pixelated
}

/*//////////////////////////////////////////////////////////////////////*/

.drop {
  flex: 0 0 auto;
  display: inline-flex;
  min-width: 0
}

.dropbutton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  background: var(--dark);
  border: 2px solid var(--white);
  padding: 1px 8px;
  min-width: 150px;
  --ink: var(--white);
  text-align: left;
}
.dropbutton:hover {
  border-color: var(--yellow);
  --ink: var(--yellow)
}

.dropname {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap
}

.dropcaret {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  background-color: var(--ink, var(--white));
  -webkit-mask: url("/assets/images/down.png") center/contain no-repeat;
  mask: url("/assets/images/down.png") center/contain no-repeat;
  image-rendering: pixelated;
}

.droppop {
  position: fixed;
  z-index: 99998;
  max-height: 340px;
  overflow-y: auto;
  background: var(--dark);
  border: 2px solid var(--white);
  padding: 3px;
}

.dropopt {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  --ink: var(--white)
}
.dropopt:hover, .dropopt.hover {--ink: var(--yellow)}
.dropopt.on {--ink: var(--yellow)}
.dropopt.forbidden {--ink: var(--gray); cursor: default}

.dropoptname {
  overflow: hidden;
  white-space: nowrap
}

.dropoptbody {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0
}
.dropoptdesc {
  --ink: var(--gray);
  white-space: normal
}

.na {--ink: var(--border)}
.dropbutton:hover .na, .dropopt:hover .na, .dropopt.hover .na {--ink: var(--yellow)}

.heartcell {
  flex: 0 0 auto;
  width: 18px; height: 26px;
  display: inline-flex;
  align-items: center; justify-content: center;
  align-self: center
}
.heartimg {
  width: 16px; height: 16px;
  image-rendering: pixelated
}