@charset "UTF-8";
:root {
  /* Spacing and Layout */
  --radius: 5px;
  --unit: 50px;
  --gutter-grid: 40px;
  --easing: cubic-bezier(0.645, 0.045, 0.355, 1);
  --bounce: cubic-bezier(1, 0.22, 0.31, 1.64);
  /* Colors */
  --color-darker: #131314;
  --color-darkenize: rgba(12, 12, 12, 0.5);
  --color-dark: rgba(23, 23, 25, 1);
  --color-darkish: rgba(23, 23, 26, 0.5);
  --color-darken: rgba(12, 21, 27, 0.65);
  --color-softdark: rgba(12, 21, 27, 0.1);
  --color-bgdark: rgba(12, 21, 27, 0.02);
  --color-mid: rgba(67, 67, 69, 1);
  --color-midlow: rgba(36, 36, 39, 1);
  --color-midlowest: rgba(28, 28, 31, 1);
  --color-midlower: rgba(43, 43, 46, 1);
  --color-link: #24202B;
  --color-lighter: rgba(234, 233, 232, 0.8);
  --color-lightenize: rgba(234, 233, 232, 0.95);
  --color-light: #f3e9e8;
  --color-lighten: rgba(234, 233, 232, 0.6);
  --color-lightish: rgba(234, 233, 232, 0.5);
  --color-softlight: rgba(234, 233, 232, 0.1);
  --color-bglight: rgba(234, 233, 232, 0.05);
  --color-bglighter: rgba(232, 233, 233, 0.025);
  --color-green: #1eba76;
  --color-blue: #2E8BFF;
  --color-purple: #A06EF3;
  --color-yellow: #ffbe61;
  --color-orange: #fd8023;
  --color-red: #E97548;
  --color-red-bg: #f04f31;
  --color-grey: #E4E4E4;
  /* Z-Indexes */
  --index-footer: -100;
  --index-fonts-detail: 1000;
  --index-weight-slider: 1000;
  --index-main: 1000;
  --index-fonts-shuffler: 1050;
  --index-glyphs-shuffler: 500;
  --index-cart: 5000;
  --index-main-aside: 5000;
  --index-header: 5500;
  --index-cart-toggle: 10000;
  --index-fonts-list: 19000;
  --index-loader: 20000;
  --index-loader-logo: 21000;
  /* Font Sizes */
  --font-micro: 14px;
  --font-mini: 16px;
  --font-small: 18px;
  --font-subbase: 20px;
  --font-base: 22px;
  --font-supbase: 32px;
  --font-medium: 28px;
  --font-large: 40px;
  --font-larger: 66px;
  --font-huge: 60px;
  --font-mobile-micro: 11px;
  --font-mobile-mini: 12px;
  --font-mobile-small: 14px;
  --font-mobile-subbase: 16px;
  --font-mobile-base: 16px;
  --font-mobile-supbase: 18px;
  --font-mobile-medium: 32px;
  --font-mobile-large: 34px;
  --font-mobile-larger: 40px;
  --font-mobile-huge: 46px;
  /* Font Weights */
  --font-thin: 100;
  --font-light: 200;
  --font-normal: 300;
  --font-regular: 400;
  --font-demi: 500;
  --font-bold: 600;
  --font-heavy: 700;
  /* Fonts */
  --main-font: 'ND Intakt';
  --main-weight: 400;
  --sec-font: 'ND Intakt';
  /* Media Query Breakpoints */
  --mq-mobile: 420px;
  --mq-tablet: 1024px;
  --mq-desktop: 420px;
  /* Column Font Sizes */
  --font-column-phone-portrait: 2.25vh;
  --font-column-phone-landscape: 2vh;
}

html, body {
  touch-action: pan-x pan-y;
  overscroll-behavior: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

:root {
  --base: 1.175vh;
  --hud-top-h: 65px;
  --shadow-color: 23, 23, 26;
  --shadow-soft: radial-gradient(ellipse closest-side at 50% 50%,
  	rgba(var(--shadow-color), 0.9) 0%,
  	rgba(var(--shadow-color), 0.896) 8.1%,
  	rgba(var(--shadow-color), 0.887) 15.5%,
  	rgba(var(--shadow-color), 0.871) 22.5%,
  	rgba(var(--shadow-color), 0.850) 29%,
  	rgba(var(--shadow-color), 0.823) 35.3%,
  	rgba(var(--shadow-color), 0.790) 41.2%,
  	rgba(var(--shadow-color), 0.752) 47.1%,
  	rgba(var(--shadow-color), 0.708) 52.9%,
  	rgba(var(--shadow-color), 0.658) 58.8%,
  	rgba(var(--shadow-color), 0.600) 64.7%,
  	rgba(var(--shadow-color), 0.533) 71%,
  	rgba(var(--shadow-color), 0.456) 77.5%,
  	rgba(var(--shadow-color), 0.364) 84.5%,
  	rgba(var(--shadow-color), 0.245) 91.9%,
  	rgba(var(--shadow-color), 0.155) 95.5%,
  	rgba(var(--shadow-color), 0.072) 98%,
  	rgba(var(--shadow-color), 0) 100%);
}

#king .shadow,
.entity .shadow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--base) * var(--shadow-w, 5));
  height: calc(var(--base) * var(--shadow-h, 4.5));
  translate: -50% calc(-50% + var(--base) * var(--shadow-drop, 1));
  background: var(--shadow-soft);
  pointer-events: none;
  opacity: var(--shadow-opacity, 1);
}
#king .shadow::after,
.entity .shadow::after {
  content: "";
  position: absolute;
  inset: calc((1 - var(--shadow-wide, 2.4)) / 2 * 100%);
  background: var(--shadow-soft);
  opacity: var(--shadow-wide-opacity, 0.16);
  pointer-events: none;
}
#king .shadow,
.entity .shadow {
  z-index: 0;
}

#king .shadow {
  --shadow-w: 7;
  --shadow-h: 7;
  --shadow-drop: 0.75;
  --shadow-wide: 2.6;
  --shadow-wide-opacity: 0.18;
}

.entity .shadow {
  --shadow-w: 6.5;
  --shadow-h: 6.5;
  --shadow-drop: 0.75;
  --shadow-wide: 2.2;
  --shadow-wide-opacity: 0.12;
}

.show-hitbox .hitbox {
  display: block;
}

.show-shadows {
  --shadow-color: 0, 255, 90;
}

.hitbox {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: red;
  opacity: 0.5;
  display: none;
}

.obj {
  position: absolute;
  left: calc(var(--x, 0) * var(--base));
  bottom: calc(var(--y, 0) * var(--base));
  translate: calc((var(--dx, 0) + var(--shake-x, 0) + var(--knockback-x, 0)) * var(--base)) calc((var(--dy, 0) + var(--shake-y, 0) + var(--knockback-y, 0)) * var(--base) * -1);
  rotate: calc((var(--rotation, 0) + var(--shake-rotation, 0)) * 1deg);
  scale: calc(var(--scale-x, 1)) calc(var(--scale-y, 1));
  width: calc(var(--w, 0) * var(--base));
  height: calc(var(--h, 0) * var(--base));
}

#gameContainer {
  overflow: hidden;
  height: 100vh;
  container-name: gameContainer;
  container-type: size;
}

#game-wrap {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  justify-content: center;
  align-items: center;
  contain: layout;
}

#camera {
  --cam-x: 0;
  --cam-y: 0;
  display: flex;
  align-items: flex-end;
  contain: layout;
  transition: opacity 0.5s ease-out;
  transform: translate3d(calc(var(--base) * var(--cam-x)), calc(var(--base) * var(--cam-y)), 0);
  opacity: 0;
}
#camera.instant {
  transition: opacity 0.15s ease-out;
}
#camera.loaded {
  opacity: 1;
}
#camera.static {
  --cam-x: 0 !important;
  --cam-y: 0 !important;
}
#camera.fade-out {
  opacity: 0;
  transition: transform 0.53s cubic-bezier(0, 0.25, 0.75, 1), opacity 0.05s ease-out;
}

#world-bottom {
  z-index: 200000;
  position: absolute;
  opacity: 1;
  bottom: calc(var(--base) * -0.2);
  left: calc(var(--base) * -0.2);
  right: calc(var(--base) * -0.2);
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#world-bottom i {
  border-radius: 50%;
  display: block;
  width: calc(var(--base) * 0.4);
  height: calc(var(--base) * 0.4);
  background-color: rgb(173, 173, 176);
  opacity: 0;
}
#world-bottom i.glow {
  background: rgba(255, 255, 255, 0.8);
}

#scene-pos-1 {
  z-index: 50000;
}

[id^=scene],
.room {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  contain: layout;
}
[id^=scene] > *,
.room > * {
  position: absolute;
}

#particles,
#particlesFront {
  contain: layout;
}

#grid {
  will-change: transform;
}

#game-wrap {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3" fill="white"/></svg>') 8 8, auto;
}

.mouse-idle #game-wrap {
  cursor: none !important;
}

.blur-gradient {
  bottom: 0;
  position: absolute;
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: -100;
  display: none;
  gap: 0;
}
.blur-gradient div {
  flex: 1;
}
.blur-gradient div:nth-child(1) {
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}
.blur-gradient div:nth-child(2) {
  -webkit-backdrop-filter: blur(1.5px);
          backdrop-filter: blur(1.5px);
}
.blur-gradient div:nth-child(3) {
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.blur-gradient div:nth-child(4) {
  -webkit-backdrop-filter: blur(2.5px);
          backdrop-filter: blur(2.5px);
}
.blur-gradient div:nth-child(5) {
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.blur-gradient div:nth-child(6) {
  -webkit-backdrop-filter: blur(3.5px);
          backdrop-filter: blur(3.5px);
}
.blur-gradient div:nth-child(7) {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.blur-gradient div:nth-child(8) {
  -webkit-backdrop-filter: blur(4.5px);
          backdrop-filter: blur(4.5px);
}
.blur-gradient div:nth-child(9) {
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.blur-gradient div:nth-child(10) {
  -webkit-backdrop-filter: blur(5.5px);
          backdrop-filter: blur(5.5px);
}

#onlineIndicator {
  bottom: 20px;
  left: 20px;
  position: fixed;
  height: 6px;
  width: 6px;
  border-radius: 10px;
  transition: all 0.3s ease;
  display: none;
  z-index: 10000;
}
#onlineIndicator.online {
  background-color: transparent;
  border: 2px solid limegreen;
  box-shadow: 0 0 8px limegreen;
}
#onlineIndicator.online.excellent {
  border-color: limegreen;
  box-shadow: 0 0 8px limegreen;
}
#onlineIndicator.online.good {
  border-color: yellow;
  box-shadow: 0 0 8px yellow;
}
#onlineIndicator.online.poor {
  border-color: orange;
  box-shadow: 0 0 8px orange;
  animation: pulse 1s infinite;
}
#onlineIndicator.online.in-game {
  background-color: limegreen;
  border: 2px solid limegreen;
}
#onlineIndicator.online.in-game.excellent {
  background-color: limegreen;
  border-color: limegreen;
}
#onlineIndicator.online.in-game.good {
  background-color: yellow;
  border-color: yellow;
}
#onlineIndicator.online.in-game.poor {
  background-color: orange;
  border-color: orange;
  animation: pulse 1s infinite;
}
#onlineIndicator.offline {
  background-color: rgb(50, 50, 50);
  border: 2px solid rgb(50, 50, 50);
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

#versionTracker {
  line-height: 1;
  border-radius: 5px;
  padding: 0.25em 0.5em;
  padding-top: 0.4em;
  font-weight: bold;
  color: rgba(234, 233, 232, 0.5);
  background: rgba(234, 233, 232, 0.1);
}

#playVersus {
  width: 100px;
}
#playVersus:hover {
  width: 300px;
}
#playVersus:hover .spinner {
  opacity: 0;
  transform: scale(2);
}

.blank-spacer {
  flex: 10;
}

#gameOptions {
  contain: content;
  opacity: 0;
  transition: transform 0.2s 0.125s var(--easing), opacity 0.2s 0.125s var(--easing);
  transform: translateY(-100%);
  min-height: 65px;
  margin: 0;
  text-transform: uppercase;
  width: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 21px 0;
  padding: 0px 0;
  z-index: 100000;
  text-align: center;
  align-content: center;
  justify-content: center;
  align-content: center;
  align-items: center;
}
#gameOptions #home {
  position: relative;
}
#gameOptions h1 {
  left: 0;
  width: 100%;
  position: absolute;
  font-size: 12px;
  line-height: 22px;
  margin: 0;
  letter-spacing: 0.1em;
  font-weight: normal;
  text-align: center;
  display: inline-block;
  text-align: center;
  flex: 1;
  font-feature-settings: "tnum", "case" 1;
}
#gameOptions h1 .fade {
  opacity: 0.25;
}
#gameOptions h1.stacked {
  display: flex;
  flex-direction: column-reverse;
  line-height: 1;
  gap: 4px;
}
#gameOptions h1.stacked .room-index {
  letter-spacing: 0;
  opacity: 0.2;
}
#gameOptions > div {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 4px;
}
#gameOptions > div:first-child {
  text-align: left;
}
#gameOptions > div:last-child {
  text-align: right;
}
#gameOptions .menu-toggle-spacer {
  flex: 0;
  min-width: 64px;
}
#gameOptions > ul {
  flex: 1;
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
}
#gameOptions > ul > li {
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  line-height: 2;
  display: inline-block;
}
#gameOptions input, #gameOptions button, #gameOptions a, #gameOptions select {
  pointer-events: auto;
}
#gameOptions > ul li a {
  pointer-events: auto;
  text-shadow: 0 0 20px black, 0 0 40px black, 0 0 60px black;
}
#gameOptions li.dot:after {
  content: "·";
  margin: 0 0.5em;
  opacity: 0.5;
}

#gameContainer {
  contain: layout;
  container-type: size;
  position: relative;
  z-index: 0;
  transition: opacity 0.5s 0.5s var(--easing);
  opacity: 0;
}
#gameContainer.loaded {
  opacity: 1;
}
#gameContainer {
  height: 100vh;
  width: 100vw;
  padding-top: 5vh;
  padding-bottom: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
#gameContainer.nodrag {
  pointer-events: none;
}
@media only screen and (orientation: portrait) {
  #gameContainer {
    flex-direction: column;
  }
}
@media only screen and (orientation: landscape) {
  #gameContainer {
    flex-direction: column;
  }
}

.notation-322f9 {
  cursor: default;
  font-size: 14px;
  position: absolute;
}

.alpha-d2270,
.numeric-fc462 {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  color: rgba(243, 233, 232, 0.075);
  font-size: 12px;
  font-weight: 500;
  line-height: 2;
  text-transform: uppercase;
  padding: 0.15em 0.85em;
  pointer-events: none;
}
.alpha-d2270 b,
.numeric-fc462 b {
  position: relative;
  top: 0.05em;
}

.related-file .alpha-d2270,
.related-rank .numeric-fc462 {
  transition: color 0s ease-in-out 0s !important;
  color: rgba(243, 233, 232, 0.15) !important;
}

.numeric-fc462:not(.right) {
  right: 100%;
}
.numeric-fc462.right {
  left: 100%;
}

.alpha-d2270.top {
  bottom: 100%;
}

.alpha-d2270.bottom {
  top: 100%;
}

.row-5277c:first-child .alpha-d2270 {
  bottom: 100%;
}
.row-5277c:last-child .alpha-d2270 {
  top: 100%;
}

.alpha-d2270 {
  width: 100%;
}

.numeric-fc462 {
  height: 100%;
}

.spare-pieces-7492 {
  padding: 50px !important;
}

html:not(.pause) #gameOptions.loaded {
  transform: translateY(0%);
  pointer-events: auto;
  opacity: 1;
}
html:not(.pause) #playHero.fade {
  opacity: 0;
}

html.pointer-idle:not(.pause) #gameOptions.loaded,
html.pointer-idle:not(.pause) #mobile-nav-toggle {
  transform: translateY(-100%);
  pointer-events: none;
  opacity: 0;
}

#mobile-nav-toggle {
  transition: transform 0.2s 0.125s var(--easing), opacity 0.2s 0.125s var(--easing);
}

html.settings-open #mobile-nav-toggle span:nth-child(1) {
  transform: translateY(4px) rotate(-90deg) scale(0, 1);
}
html.settings-open #mobile-nav-toggle span:nth-child(2) {
  transform: translateY(-4px) rotate(0deg) scale(1, 1);
}
html.settings-open #mobile-nav-toggle span {
  transition: all 0.125s ease-in-out 0s;
}

#playHero {
  height: 100%;
  width: 100vw;
  display: flex;
  position: fixed;
  z-index: 80000;
  align-content: center;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out 0s;
}
#playHero.hide {
  display: none;
}
#playHero.playing #spinner {
  opacity: 0;
  transform: scale(0);
  animation-play-state: paused; /* Pause the animation */
}
#playHero #spinner {
  transform: scale(1);
  transition: all 0.25s ease-in-out 0s;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid rgba(243, 233, 232, 0.05);
  position: absolute;
  bottom: 0;
  left: 50%;
  margin: -25px;
  margin-bottom: 25px;
  animation: clock 1s infinite ease-in-out;
}
#playHero #spinner:after {
  position: absolute;
  top: 50%;
  left: 0;
  margin: -4px;
  display: inline-block;
  border-radius: 50%;
  content: "";
  height: 6px;
  width: 6px;
  box-shadow: 0 0 0 4px var(--color-dark);
  background-color: var(--color-light); /* Green color for positive evaluation */
}
#playHero.fade #game-title {
  transform: scale(0.8, 0.8) !important;
  transition: all 0.5s ease-in-out 0s;
  letter-spacing: 0.75em;
}
#playHero.playing #backdrop {
  height: 0px;
  transform: translateY(-100vh);
}
#playHero.playing #logo-font {
  transition: all 3s ease-in-out 0.125s;
  transform: scale(4, 4);
  letter-spacing: 0.35em;
  line-height: 100vmin;
}
#playHero.playing #game-title {
  opacity: 1;
}
#playHero #backdrop {
  transform: translateY(100vh);
  transition: all 1s ease-out 4s;
  position: fixed;
  width: 100vw;
  height: 50vh;
  background: linear-gradient(180deg, rgba(23, 23, 26, 0) 0%, rgb(23, 23, 26) 50%, rgba(23, 23, 26, 0) 100%);
}
#playHero #logo-font {
  pointer-events: none;
  margin-top: -0.1em;
  transform: scale(1, 1);
  position: relative;
  z-index: 1000;
  display: inline-block;
  vertical-align: middle;
  line-height: 11.125vmin;
  font-size: 14vmin;
  font-family: "SCLogo";
}
#playHero #logo-font.hide {
  display: none;
}
#playHero #game-title {
  opacity: 0;
  transition: all 0.5s ease-in-out 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  font-family: "ND Kern", futura, Sans-Serif;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 32px;
  margin: 0;
  letter-spacing: 0.25em;
  font-weight: normal;
  text-align: center;
  position: relative;
  top: 50%;
  position: fixed;
  height: 9vmin;
  margin-top: -4.5vmin;
  text-shadow: 0 0 50px rgb(23, 23, 26), 0 0 10px rgba(23, 23, 26, 0.5);
}
#playHero #game-title b {
  position: relative;
  display: inline-block;
  letter-spacing: 0;
}

.page-play {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.page-play main {
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

/*! chessboard.js v1.0.0 | (c) 2019 Chris Oakman | MIT License chessboardjs.com/license */
#gameContainer {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex: 10;
  width: 100%;
}

#gameOptions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@keyframes flicker {
  0%, 100% {
    transform: scale(1, 1);
  }
  0%, 3%, 6%, 9%, 12%, 15%, 18%, 21%, 24%, 27%, 30%, 33%, 36%, 39%, 42%, 45%, 48%, 51%, 54%, 57%, 60%, 63%, 66%, 69%, 72%, 75%, 78%, 81%, 84%, 87%, 90%, 93%, 96%, 99% {
    transform: scale(1.25, 1.25);
  }
  1%, 4%, 7%, 10%, 13%, 16%, 19%, 22%, 25%, 28%, 31%, 34%, 37%, 40%, 43%, 46%, 49%, 52%, 55%, 58%, 61%, 64%, 67%, 70%, 73%, 76%, 79%, 82%, 85%, 88%, 91%, 94%, 97% {
    transform: scale(2, 2);
  }
  2%, 5%, 8%, 11%, 14%, 17%, 20%, 23%, 26%, 29%, 32%, 35%, 38%, 41%, 44%, 47%, 50%, 53%, 56%, 59%, 62%, 65%, 68%, 71%, 74%, 77%, 80%, 83%, 86%, 89%, 92%, 95%, 98% {
    transform: scale(1.5, 1.5);
  }
}
@keyframes flickerBlood {
  0%, 100% {
    transform: scale(1, 1);
  }
  0%, 3%, 6%, 9%, 12%, 15%, 18%, 21%, 24%, 27%, 30%, 33%, 36%, 39%, 42%, 45%, 48%, 51%, 54%, 57%, 60%, 63%, 66%, 69%, 72%, 75%, 78%, 81%, 84%, 87%, 90%, 93%, 96%, 99% {
    transform: scale(1, 1.25);
  }
  1%, 4%, 7%, 10%, 13%, 16%, 19%, 22%, 25%, 28%, 31%, 34%, 37%, 40%, 43%, 46%, 49%, 52%, 55%, 58%, 61%, 64%, 67%, 70%, 73%, 76%, 79%, 82%, 85%, 88%, 91%, 94%, 97% {
    transform: scale(1, 3);
  }
  2%, 5%, 8%, 11%, 14%, 17%, 20%, 23%, 26%, 29%, 32%, 35%, 38%, 41%, 44%, 47%, 50%, 53%, 56%, 59%, 62%, 65%, 68%, 71%, 74%, 77%, 80%, 83%, 86%, 89%, 92%, 95%, 98% {
    transform: scale(1, 1.5);
  }
}
#score-container-top {
  bottom: 0;
  padding: 24px 4vmin;
  z-index: 1000;
}

#score-container-bottom {
  z-index: 100;
  bottom: 0;
  background: radial-gradient(at bottom center, rgb(23, 23, 26) 15%, rgba(23, 23, 26, 0) 30%);
}

.game-meta {
  font-size: 14px;
  white-space: nowrap;
  left: 0;
  right: 0;
  text-align: center;
  font-feature-settings: "tnum", "case" 1;
  font-weight: 500;
  font-size: 14px;
  line-height: 0.8;
  line-height: 2em;
  padding: 24px 0px;
  display: flex;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  z-index: 1000;
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
}
.game-meta.top {
  bottom: 100%;
}
.game-meta.bottom {
  top: 100%;
}
.game-meta.contained {
  left: 50%;
  width: 98vw;
  margin-left: -49vw;
}
.game-meta > span {
  display: flex;
  color: rgba(243, 233, 232, 0.25);
  color: rgba(243, 233, 232, 0.5);
}
.game-meta > span:first-child:last-child {
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.game-meta.thirds > span {
  width: 33%;
  line-height: 2em;
  justify-content: center;
}
.game-meta.thirds > span:last-child {
  text-align: right;
  justify-content: flex-end;
}
.game-meta.thirds > span:first-child {
  text-align: left;
  justify-content: flex-start;
}

.game-meta b {
  transition: color 0.5s ease-out 0s;
}
.game-meta b.flash {
  transition: color 0s ease-out 0s;
  opacity: 1;
  color: var(--color-light);
}
.game-meta {
  text-align: left;
}
.game-meta span:after, .game-meta span:before {
  opacity: 0.5;
}

#healthWrap {
  z-index: -20;
  position: relative;
  font-feature-settings: "tnum";
  overflow: hidden;
  height: 20px;
  color: rgba(243, 233, 232, 0.25);
  background: var(--color-dark);
}
#healthWrap b {
  height: 2em;
  font-size: 12px;
  line-height: 30px;
  display: inline-block;
}
#healthWrap #healthInner {
  transition: all 0.25s linear 0s;
  transform: translateY(-1%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#healthLight {
  top: 0;
  left: 0;
  position: absolute;
  height: 30vmin;
  width: 30vmin;
  cursor: none;
  transition: all 0.25s linear 0s;
  display: none;
}

.heart {
  width: 100%;
  position: absolute !important;
  bottom: 0px;
  padding: 1px;
  width: 100% !important;
  pointer-events: none;
  text-align: center;
  font-size: 0;
  justify-content: center;
}
.heart b {
  display: inline-block;
  height: 3vmin;
  width: 3vmin;
  text-align: center;
  align-items: center;
  justify-content: center;
  transition: all 0.25s 0s ease-in-out;
  transform: scale(0.25);
  transform-origin: center;
}
.heart b:after {
  transition: all 0.125s 0s ease-in-out;
  background: var(--color-softlight);
  content: "";
  display: inline-block;
  height: 3vmin;
  width: 3vmin;
  border-radius: 50%;
}
.heart b.full {
  width: 3vmin;
  transition: all 0.25s 0s ease-in-out;
}
.heart b.full:after {
  width: 3vmin;
  background: var(--color-light);
  transition: all 0.125s 0.25s ease-in-out;
  box-shadow: 0 0 5px 1px var(--color-light);
}

.key-carry {
  pointer-events: none;
  display: flex;
  align-items: center;
  margin-left: 0.9em;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.key-carry.has-key {
  opacity: 0.5;
}
.key-carry.key-spring {
  animation: key-hud-spring 0.9s ease-in-out;
}
.key-carry svg {
  display: block;
  width: 1.7em;
  height: 0.95em;
  overflow: visible;
  flex: none;
}
.key-carry svg ellipse,
.key-carry svg path {
  fill: none;
  stroke: rgb(243, 233, 232);
  stroke-width: 1.4px;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.key-carry[data-count]::after {
  content: attr(data-count);
  color: rgb(243, 233, 232);
  font-size: 14px;
  line-height: 1;
  margin-left: 0.4em;
}

@keyframes key-hud-spring {
  0% {
    transform: scale(1.9);
    opacity: 1;
  }
  16% {
    transform: scale(1.9);
    opacity: 1;
  }
  40% {
    transform: scale(0.94);
    opacity: 1;
  }
  57% {
    transform: scale(1.12);
    opacity: 0.85;
  }
  73% {
    transform: scale(0.97);
    opacity: 0.68;
  }
  87% {
    transform: scale(1.04);
    opacity: 0.56;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}
.coin-counter {
  position: fixed;
  margin: 12px;
  color: rgba(243, 233, 232, 0.5);
  font-size: 14px;
  line-height: 2em;
  pointer-events: none;
  padding-left: 0.5em;
  display: flex;
}
.coin-counter::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: middle;
  background: url("../../lonely-boing/_img/coin-stack.svg") no-repeat center/contain;
  opacity: 0.5;
}
.coin-counter b {
  display: flex;
  line-height: 1;
  vertical-align: middle;
}
.coin-counter .coin-digit {
  display: inline-block;
  overflow: hidden;
  height: 1em;
}
.coin-counter .coin-strip {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-out;
}
.coin-counter .coin-strip span {
  height: 1em;
  line-height: 1;
}

.ammo {
  width: 100% !important;
  overflow: hidden;
  text-align: center;
  line-height: 2.3em !important;
  letter-spacing: 0.1em;
}
.ammo [data-ammo-index="0"] {
  position: relative;
  display: inline-block;
  width: 8vmin;
  padding: 0em 1em;
}
.ammo span:not([data-ammo-index="0"]) {
  font-weigth: 600;
  font-size: 14px;
  line-height: 2;
  position: relative;
}
.ammo span:not([data-ammo-index="0"]):after, .ammo span:not([data-ammo-index="0"]):before {
  display: inline-block;
  width: 0.8em;
}
.ammo span:not([data-ammo-index="0"]):before {
  content: "I";
  opacity: 0.25;
}
.ammo span:not([data-ammo-index="0"]):after {
  opacity: 0;
  content: "🗡";
  position: absolute;
  left: 0;
  transition: all 0.05s ease-in-out 0s, text-shadow 0.1s 0s ease-in-out, color 0.1s 0s ease-in-out;
  transform: rotate(0deg) translateY(-100%);
  text-shadow: 0 0 10px white;
  color: white;
}
.ammo span:not([data-ammo-index="0"]).active:before {
  opacity: 0;
}
.ammo span:not([data-ammo-index="0"]).active:after {
  color: rgba(243, 233, 232, 0.25);
  opacity: 1;
  text-shadow: 0 0 0px transparent;
  transform: rotate(0deg) translateY(0%);
  transition: all 0.05s ease-in-out 0s, text-shadow 2s 0s ease-in-out, color 1s 0s ease-in-out;
}

#bestscore {
  justify-content: center;
}

.score-wrap {
  padding-top: 0.35em;
  padding-top: 10px;
  font-size: 0;
}
.score-wrap [data-label]::before {
  content: attr(data-label);
}
.score-wrap span {
  font-size: 12px;
  width: 8vmin;
}
.score-wrap span:before {
  padding-top: 0.45em;
}
.score-wrap span {
  padding-left: 0.75em;
  padding-right: 0.75em;
  line-height: 0.8;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

#volume {
  z-index: 10000;
  bottom: 0;
  right: 0;
  width: 65px;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}
#volume input[type=range] {
  position: absolute;
  bottom: 100%;
  left: 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: transparent;
  cursor: pointer;
  width: 200px;
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  margin-left: -10px;
  transform: rotate(-90deg);
  transform-origin: left top;
}
#volume {
  /* Removes default focus */
}
#volume input[type=range]:focus {
  outline: none;
}
#volume {
  /***** Chrome, Safari, Opera, and Edge Chromium styles *****/
  /* Slider track */
}
#volume input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(243, 233, 232, 0.1);
  border-radius: 20px;
  height: 20px;
  height: 32px;
  box-shadow: 0 0 5px 2px var(--color-gray-800);
}
#volume {
  /* Slider thumb */
}
#volume input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  background-color: #817e7f;
  height: 32px;
  width: 32px;
  background-clip: content-box;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
#volume {
  /* Slider thumb */
}
#volume input[type=range]::-webkit-slider-thumb:hover {
  background-color: #fff;
}
#volume input[type=range]::-moz-range-track {
  background-color: rgba(243, 233, 232, 0.1);
  border-radius: 20px;
  height: 20px;
}
#volume input[type=range]::-moz-range-thumb {
  background-color: #817e7f;
  height: 20px;
  width: 20px;
  background-clip: content-box;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
#volume input[type=range]:hover::-moz-range-thumb {
  background-color: rgb(243, 233, 232);
}
#volume {
  /* Firefox styles */
}
#volume input[type=range]::-moz-focus-outer {
  border: 0;
}
#volume {
  /* Firefox - Remove default track color */
}
#volume input[type=range]::-moz-range-progress {
  background-color: transparent;
}
#volume {
  /* Firefox - Remove default thumb styling */
}
#volume input[type=range]::-moz-range-thumb {
  -webkit-appearance: none; /* Override default look */
  -moz-appearance: none;
       appearance: none;
}
#volume {
  /* Firefox - Add custom styling to thumb on hover */
}
#volume input[type=range]:hover::-moz-range-thumb {
  background-color: rgb(243, 233, 232);
}

#gameFooterx {
  margin: 0;
  text-transform: uppercase;
  width: 100%;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 21px;
  z-index: 100000;
  transition: transform 1s 0.125s var(--easing), opacity 1s 0.125s var(--easing);
  opacity: 1;
  transform: translateY(0%);
  text-align: center;
  align-content: center;
  justify-content: center;
  align-content: center;
  align-items: center;
  display: flex;
}

#puzzleInfo {
  color: rgb(243, 233, 232);
  z-index: 20000000;
  bottom: 0;
  font-feature-settings: "tnum";
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  display: flex;
  justify-content: center;
  z-index: 200;
  display: none;
}
#puzzleInfo dl {
  margin: 0;
}
#puzzleInfo dl {
  white-space: nowrap;
}
#puzzleInfo dl dt, #puzzleInfo dl dd {
  padding: 0.2em;
  display: inline-block;
}
#puzzleInfo dt {
  margin: 0;
  opacity: 0.15;
  text-transform: uppercase;
}
#puzzleInfo dd {
  margin: 0;
  opacity: 0.25;
  text-transform: capitalize;
}
#puzzleInfo dd:not(:last-child):after {
  content: ", ";
}

@keyframes id-in {
  0% {
    min-width: 0;
    opacity: 1;
  }
  20% {
    min-width: 14.2857vw;
    opacity: 1;
  }
  100% {
    min-width: 14.2857vw;
    opacity: 0.1;
  }
}
#playedPuzzleIDs {
  white-space: nowrap;
  flex: 1;
  font-feature-settings: "tnum";
  font-weight: 500;
  margin: 0;
  z-index: 0;
  font-size: 0;
  display: flex;
  flex-direction: row;
  flex-direction: row-reverse;
  position: fixed;
  top: 0;
  padding: 26px 0;
  width: 100%;
  z-index: -1000;
  text-transform: uppercase;
  pointer-events: none;
}
#playedPuzzleIDs:before, #playedPuzzleIDs:after {
  pointer-events: none;
  content: "";
  position: absolute;
  z-index: 1000;
  background-repeat: no-repeat !important;
  height: 64px;
  top: 0px;
}
#playedPuzzleIDs:after {
  width: 250px;
  right: 0;
  background: linear-gradient(-90deg, rgb(23, 23, 26) 0%, rgba(23, 23, 26, 0) 100%);
}
#playedPuzzleIDs:before {
  left: 0;
  width: 150px;
  background: linear-gradient(-90deg, rgba(23, 23, 26, 0) 0%, rgb(23, 23, 26) 100%);
}
#playedPuzzleIDs li {
  text-align: center;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-name: id-in;
  width: 0;
  overflow: hidden;
  display: inline-block;
  font-size: 10px;
  margin: 0;
  color: var(--color-light);
  min-width: 200px;
}

@keyframes streak-in {
  0% {
    text-shadow: 0 0 10px orange, 0 0 5px orange;
    transform: scale(1, 0);
    min-width: 0;
    opacity: 1;
  }
  20% {
    text-shadow: 0 0 10px orange, 0 0 5px orange;
    transform: scale(1, 1);
    min-width: 1.5vmin;
    opacity: 1;
  }
  100% {
    text-shadow: 0 0 0px orange, 0 0 0px orange;
    transform: scale(1, 1);
    min-width: 1.5vmin;
    opacity: 0.25;
  }
}
.trail-square {
  background-color: red;
  opacity: 0.1;
  border-radius: 3px; /* Example styling */
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

#showHint:before {
  content: "";
  display: inline-block;
  height: 1em;
  width: 1px;
  background-color: var(--color-light);
  opacity: 0.3;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-bottom: 3px;
  margin-left: -1px;
  transform: rotate(-12deg);
  transform-origin: center bottom;
  transition: all 0.2s linear 0s;
}
#showHint:after {
  content: "";
  display: inline-block;
  height: 1em;
  width: 1px;
  background-color: var(--color-light);
  opacity: 0.3;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-bottom: 3px;
  margin-left: 0px;
  transform: rotate(12deg);
  transform-origin: center bottom;
  transition: all 0.2s linear 0s;
}
#showHint:hover:before {
  opacity: 1;
  transform: rotate(14deg);
}
#showHint:hover:after {
  opacity: 1;
  transform: rotate(-14deg);
}

#streakWrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
}

#streak {
  gap: 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  flex-shrink: 10;
}
@media only screen and (orientation: portrait) {
  #streak {
    max-width: 100vw;
  }
}
@media only screen and (orientation: landscape) {
  #streak {
    max-width: calc(70vmin + 140px);
  }
}
#streak .streak-result {
  display: flex;
  position: relative;
  height: 24px;
  animation-fill-mode: forwards;
  animation-duration: 0.7s;
  animation-name: streak-in;
  width: 0;
  text-align: center;
  border-radius: 4px;
  background-position: center;
  background-size: 90%;
  background-repeat: no-repeat;
  text-align: center;
  letter-spacing: 0;
  align-items: center;
  justify-content: center;
}
#streak .streak-result:before {
  padding-top: 2px;
  display: inline-block;
  font-size: 22px;
  line-height: 30px;
}
#streak .streak-result.empty:before, #streak .streak-result.loss:before {
  background-color: var(--color-light);
  content: "";
  height: 3px;
  width: 3px;
  display: inline-block;
  border-radius: 2px;
}
#streak .streak-result.empty, #streak .streak-result.loss {
  opacity: 0.35;
}
#streak .streak-result.win:before {
  border-radius: 2px;
  background-color: var(--color-light);
  content: "";
  height: 8px;
  width: 1.5px;
  display: inline-block;
}
#streak .streak-result.win {
  color: var(--color-light);
}

#constantFooter {
  z-index: 1000;
}

#gameFooter {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  align-items: stretch;
  padding: 12px 0;
  min-height: 65px;
}
#gameFooter.center {
  justify-content: center;
}
#gameFooter > .left,
#gameFooter > .right {
  padding: 0 20px;
  color: rgba(243, 233, 232, 0.3);
  font-feature-settings: "tnum";
  font-weight: 500;
  font-size: 14px;
  line-height: 40px;
  text-transform: uppercase;
  white-space: nowrap;
}

#playerRating span {
  display: inline-block;
  transition: all 1s linear 0s;
  margin-left: 0.5em;
}
#playerRating span.flash {
  transition: all 0s linear 0s;
  font-size: 20px;
}
#playerRating .flash.neutral {
  color: white;
  text-shadow: 0 0 10px white, 0 0 5px white;
}
#playerRating .flash.gain {
  color: orange;
  text-shadow: 0 0 10px orange, 0 0 5px orange;
}
#playerRating .flash.loss {
  color: red;
  text-shadow: 0 0 10px red, 0 0 5px red;
}

#tomove {
  position: absolute;
  left: 50%;
  width: 100px;
  margin-left: -50px;
  bottom: 100%;
  text-align: center;
  bottom: 0;
}

.evaluation-fill {
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}
.evaluation-fill:after {
  position: absolute;
  top: 50%;
  left: 0;
  margin: -4px;
  display: inline-block;
  border-radius: 50%;
  content: "";
  height: 6px;
  width: 6px;
  box-shadow: 0 0 0 4px var(--color-dark);
  background-color: var(--color-light); /* Green color for positive evaluation */
}

#spawnBar {
  margin-bottom: 10px;
  width: 80%;
  position: relative;
  display: flex;
  gap: 10px;
}
#spawnBar .spawnProgress {
  position: absolute;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.2s 0s linear;
}
#spawnBar .spawnPiece {
  transition: all 1s 0s linear;
}
#spawnBar .spawnPiece.completed {
  transition: all 0s 0s linear;
  border: 2px solid rgb(255, 255, 255);
}
#spawnBar .spawnPiece {
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  flex-grow: 1;
  border-radius: 6px;
  display: block;
  color: transparent;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#spawnBar #spawnLevelPawn {
  flex: 1;
}
#spawnBar #spawnLevelKnight {
  flex: 2;
}
#spawnBar #spawnLevelBishop {
  flex: 3;
}
#spawnBar #spawnLevelRook {
  flex: 5;
}
#spawnBar #spawnLevelQueen {
  flex: 9;
}
#spawnBar #spawnLevelPawn {
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
}
#spawnBar #spawnLevelKnight {
  background-image: url("/_img/chesspieces/sctheme-b/wN.png");
}
#spawnBar #spawnLevelBishop {
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
}
#spawnBar #spawnLevelRook {
  background-image: url("/_img/chesspieces/sctheme-b/wR.png");
}
#spawnBar #spawnLevelQueen {
  background-image: url("/_img/chesspieces/sctheme-b/wQ.png");
}

#puzzleRatio {
  margin-bottom: 10px;
  width: 70vmin;
  position: relative;
  display: flex;
  gap: 10px;
}
@media only screen and (orientation: portrait) {
  #puzzleRatio {
    display: none !important;
  }
}
#puzzleRatio > div {
  background: rgba(0, 0, 0, 0.125);
  transition: all 1s 0s linear;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  flex-grow: 1;
  border-radius: 6px;
  display: block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
}
#puzzleRatio > div span {
  line-height: 1;
  padding: 0 0.75em;
  padding-top: 0.2em;
  opacity: 0.5;
}
#puzzleRatio > div span:first-child {
  opacity: 0.15;
}

/* ===============================================
   DRAWER COMPONENT
   =============================================== */
/* Custom counter style with leading zeros */
@counter-style padded-decimal {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  pad: 2 "0"; /* Pad to 2 digits with leading zeros */
}
#drawer-wrap::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* ===============================================
   DRAWER BASE & LAYOUT
   =============================================== */
#drawer {
  position: relative;
  flex: 0 0 280px;
  width: 280px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-dark);
  border: 2px solid var(--color-dark);
  z-index: 1000;
  transition: flex-basis 0.35s 0s var(--easing), width 0.35s 0s var(--easing);
  overflow: visible;
}
#drawer.in {
  flex-basis: 0;
  width: 0;
}
#drawer.in #drawer-wrap {
  opacity: 0;
}
#drawer {
  /* Hide on portrait orientation */
}
@media only screen and (orientation: portrait) {
  #drawer {
    display: none;
  }
}
#drawer .status-indicator {
  display: inline-block;
  height: 2em;
  width: 2em;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  font-size: 80%;
  text-align: center;
  line-height: 2.2em;
  vertical-align: middle;
  font-weight: bold;
  margin-left: 0.2em;
  margin-top: -0.2em;
}

/* ===============================================
   LOGGING CONTROLS
   =============================================== */
#drawer-wrap {
  transition: all 0.35s 0s var(--easing);
  opacity: 1;
  overflow-y: scroll;
  position: absolute;
  right: 0;
  height: 100%;
  width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#drawer-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ===============================================
   TOGGLE BUTTON
   =============================================== */
#drawer-toggle {
  background: transparent;
  z-index: 1001;
  padding: 0;
  position: absolute;
  top: 50%;
  margin-top: -22px;
  right: -44px;
  height: 44px;
  width: 44px;
  opacity: 0.2;
  border: none;
  cursor: pointer;
}
#drawer-toggle:hover {
  opacity: 1;
}
#drawer-toggle:before, #drawer-toggle:after {
  content: "";
  width: 1em;
  height: 2px;
  background-color: var(--color-light);
  display: inline-block;
  position: absolute;
  left: 40%;
  top: 50%;
  transform-origin: left center;
  transition: all 0.1s 0s var(--easing);
}
#drawer-toggle:before {
  transform: rotate(90deg);
}
#drawer-toggle:after {
  transform: rotate(-90deg);
}
#drawer-toggle:hover:before {
  transform: rotate(110deg);
}
#drawer-toggle:hover:after {
  transform: rotate(-110deg);
}

/* Toggle button state when drawer is closed */
#drawer:not(.in) #drawer-toggle:before {
  transform: rotate(90deg);
}
#drawer:not(.in) #drawer-toggle:after {
  transform: rotate(-90deg);
}
#drawer:not(.in) #drawer-toggle:hover:before {
  transform: rotate(70deg);
}
#drawer:not(.in) #drawer-toggle:hover:after {
  transform: rotate(-70deg);
}

/* ===============================================
   TAB NAVIGATION
   =============================================== */
#drawer-tabs {
  position: sticky;
  top: 0;
  z-index: 1002;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  padding: 12px;
  background: var(--color-dark);
}
#drawer-tabs > button {
  max-width: 100% !important;
}

#drawer-tabs,
#drawer-options {
  position: sticky;
  bottom: 0;
  z-index: 1002;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  background: linear-gradient(0deg, rgba(23, 23, 26, 0) 0%, rgb(23, 23, 26) 30%);
}
#drawer-tabs:hover,
#drawer-options:hover {
  gap: 4px;
}
#drawer-tabs:hover .radio,
#drawer-options:hover .radio {
  max-width: 100%;
}
#drawer-tabs .radio,
#drawer-options .radio {
  transition: all 0.25s 0s ease-in-out;
  max-width: 0;
  padding: 0 8px;
  border-radius: 10px;
}
#drawer-tabs .radio:hover,
#drawer-options .radio:hover {
  flex: 1.5;
}
#drawer-tabs .radio.active,
#drawer-options .radio.active {
  max-width: 100%;
}
#drawer-tabs button,
#drawer-options button {
  flex: 1;
  max-width: 0;
  padding: 0 !important;
  overflow: hidden;
  outline: none;
  border: none;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px !important;
  line-height: 25px;
  padding: 0 8px;
}
#drawer-tabs button:hover,
#drawer-options button:hover {
  opacity: 1;
  background: rgba(234, 233, 232, 0.01);
  color: rgb(234, 233, 232);
}
#drawer-tabs button.active,
#drawer-options button.active {
  opacity: 1;
  background: rgba(234, 233, 232, 0.05);
}

.radios {
  background: var(--color-dark);
  display: flex;
  flex-direction: row;
  border-radius: 14px;
  width: 100%;
}

/* ===============================================
   CONTENT AREA
   =============================================== */
.drawer-pane {
  display: none;
}
.drawer-pane.active {
  display: block;
}

#drawer-controls {
  flex: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#drawer-controls details + details {
  border-top: 2px solid var(--color-dark);
}
#drawer-controls details summary {
  cursor: pointer;
  display: block;
  font-size: 14px;
  flex: 1;
  color: #cccccc;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1.5vmin 2vmin;
  line-height: 14px;
}
#drawer-controls details summary:after {
  content: "+";
  float: right;
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.1;
  line-height: 14px;
  margin-right: -0.2em;
}
#drawer-controls details summary:hover:after {
  opacity: 1;
}
#drawer-controls details[open] summary:after {
  content: "−";
}
#drawer-controls details .slider-group {
  padding: 1.5vmin 2vmin;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
#drawer-controls .slider-container {
  margin-bottom: 2vmin;
  display: flex;
  flex-wrap: wrap;
}
#drawer-controls .slider-container label {
  display: block;
  font-size: 10px;
  margin-bottom: 0.5vmin;
  flex: 1;
  color: #cccccc;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.2;
}
#drawer-controls .slider-container label span {
  float: right;
}
#drawer-controls .slider-container input[type=number] {
  width: 25%;
  font-size: 1.5vmin;
  background: transparent;
  color: #fff;
  padding: 0;
  border: none;
  text-align: right;
  opacity: 0.2;
  -moz-appearance: textfield;
}
#drawer-controls .slider-container input[type=number]::-webkit-inner-spin-button, #drawer-controls .slider-container input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#drawer-controls .slider-container input[type=range] {
  width: 100%;
  max-width: 220px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 8px;
  border-radius: 5px;
  outline: none;
  background: var(--color-dark);
  margin: 0 -4px;
}
#drawer-controls .slider-container input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-light);
  cursor: pointer;
}
#drawer-controls .slider-container input[type=range]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00c0ff;
  cursor: pointer;
}

/* ===============================================
   UNIFIED ROW STYLING
   =============================================== */
.drawer-row {
  width: 100%;
  min-width: 100%;
  line-height: 1.1;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  padding: 10px 0px;
  margin: 0;
  gap: 2px 8px;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  position: relative;
  color: var(--color-lighten);
  counter-increment: counterRows;
  flex: 1;
}
.drawer-row .drawer-row-progress {
  left: 0;
  position: absolute;
  background: var(--color-lighten);
  opacity: 0.15;
  height: 70%;
  border-radius: 8px;
  border: 2px solid var(--color-light);
}
.drawer-row.spy:after {
  content: "";
  display: block;
  position: absolute;
  right: -14px;
  top: 0;
  bottom: 0;
  border-right: 2px solid var(--color-light);
}
.drawer-row.verbose {
  font-size: 14px;
  line-height: 1.5;
  min-width: 100%;
  padding-right: 2px;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
}
.drawer-row.verbose dt {
  color: white;
  display: inline;
}
.drawer-row.verbose {
  flex-wrap: wrap;
}
.drawer-row.verbose dd {
  display: inline;
  margin: 0;
  width: 100%;
  text-wrap: pretty;
  -webkit-hyphens: auto;
          hyphens: auto;
  white-space: normal !important;
  text-wrap: balance;
}
.drawer-row {
  /* Use border-top on following siblings instead of border-bottom */
}
.drawer-row + .drawer-row {
  border-top: 3px dotted rgba(255, 255, 255, 0.075);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.drawer-row:hover {
  opacity: 1;
  color: var(--color-light);
}
.drawer-row {
  /* Active state for scrollspy */
}
.drawer-row.api-section.active:before {
  color: var(--color-light);
  content: "▶";
  font-size: 12px;
  opacity: 1;
}
.drawer-row.api-section.active dt {
  letter-spacing: 0.06em;
  font-weight: 900;
}
.drawer-row {
  /* Row number */
}
.drawer-row:before {
  left: 0;
  padding: 2px 8px;
  font-size: 9px;
  opacity: 0.5;
  content: counter(counterRows, padded-decimal);
  display: inline-block;
  font-variant-numeric: tabular-nums;
  position: absolute;
  display: none;
}
.drawer-row {
  /* For dl elements styled as drawer-row */
}
.drawer-row[data-path] dt, .drawer-row[data-path] dd {
  margin: 0;
  padding: 0;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.drawer-row[data-path] dt {
  flex: 5;
}
.drawer-row[data-path] dd {
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
.drawer-row[data-path] dd.false:after, .drawer-row[data-path] dd.true:after {
  display: inline-block;
  vertical-align: middle;
  opacity: 1;
}
.drawer-row[data-path] dd.false {
  color: tomato;
}
.drawer-row[data-path] dd.false:after {
  content: "✗ False";
}
.drawer-row[data-path] dd.true {
  color: lime;
}
.drawer-row[data-path] dd.true:after {
  content: "✓ True";
}
.drawer-row {
  /* Name/Label */
}
.drawer-row .row-name {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.drawer-row {
  /* Value */
}
.drawer-row .row-value {
  flex-shrink: 0;
  min-width: 3em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.drawer-row {
  /* Wrap variant for multi-line content */
}
.drawer-row.wrap {
  flex-wrap: wrap;
}
.drawer-row.wrap .row-value {
  width: 100%;
}
.drawer-row {
  /* Toggle row */
}
.drawer-row.toggle-row .ui-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.drawer-row.toggle-row .ui-toggle-input:checked ~ .ui-toggle .toggle-track {
  background: rgba(0, 200, 0, 0.2);
}
.drawer-row.toggle-row .ui-toggle-input:checked ~ .ui-toggle .toggle-track .toggle-thumb {
  left: calc(100% - 7px);
  background: lime;
}
.drawer-row {
  /* Select row */
}
.drawer-row.select-row {
  cursor: pointer;
}
.drawer-row.select-row .row-name {
  pointer-events: none;
}
.drawer-row.select-row .ui-select {
  flex-shrink: 0;
  opacity: 1;
  pointer-events: none;
}
.drawer-row.select-row .ui-select select {
  pointer-events: all;
}
.drawer-row {
  /* Slider row */
}
.drawer-row.slider-row {
  flex-wrap: wrap;
  cursor: default;
}
.drawer-row.slider-row .row-name {
  cursor: default;
  flex: 1 0 auto;
}
.drawer-row.slider-row .row-value {
  flex: 0 0 auto;
}
.drawer-row.slider-row .ui-slider {
  flex: 1 0 100%;
  margin-top: 4px;
}
.drawer-row {
  /* Action row (buttons) */
}
.drawer-row.action-row {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.drawer-row.action-row .action-arrow {
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.drawer-row.action-row:hover .action-arrow {
  opacity: 1;
  transform: translateX(2px);
}
.drawer-row.action-row:active {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ===============================================
   NESTED OBJECTS
   =============================================== */
.object {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  list-style: none;
  padding: 10px 16px;
  margin: 0;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  counter-reset: counterRows;
  /* Nested object containers */
}
.object .nested-object {
  color: white;
  padding: 0;
  width: 100%;
  padding: 0 16px;
}
.object .nested-object .object-label {
  display: block;
  line-height: 28px;
  padding: 8px 0;
  margin: 0;
  font-weight: bold;
}
.object .nested-object {
  /* Use border-top on following siblings */
}
.object .nested-object .object-label + .drawer-row,
.object .nested-object .drawer-row + .object-label {
  border-top: 3px dotted rgba(255, 255, 255, 0.075);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.object .nested-object {
  /* Collapse non-active nested objects */
}
.object .nested-object:not(.active) > .drawer-row {
  display: none;
}
.object {
  /* Only direct children of .object get the visual styling */
}
.object > .nested-object {
  border-radius: 10px;
  background: rgba(234, 233, 232, 0.02);
  margin-top: 8px;
  margin-bottom: 8px;
  /* Remove top margin from first nested object */
}
.object > .nested-object:first-child {
  margin-top: 0;
}
.object > .nested-object {
  /* Remove bottom margin from last nested object */
}
.object > .nested-object:last-child {
  margin-bottom: 0;
}
.object {
  /* But not nested objects within arrays at the top level */
}
.object > .array .nested-object {
  border-radius: 0;
  background: transparent;
  border: none;
}
.object {
  /* Nested object within array */
}
.object .array .nested-object {
  position: relative;
}
.object .array .nested-object > .object-label:hover {
  color: white;
  opacity: 1;
  cursor: pointer;
}
.object .array .nested-object > .object-label:hover:after {
  opacity: 0.25;
  float: right;
  content: "open";
  font-size: 70%;
}
.object .array .nested-object > .object-label:before {
  position: absolute;
  left: 0%;
  float: left;
  opacity: 0.5;
  font-size: 75%;
  content: "▼";
  width: 2em;
  text-align: center;
  display: inline-block;
}
.object .array .nested-object.active > .object-label:hover:after {
  content: "close";
}
.object .array .nested-object.active > .object-label:before {
  content: "▲";
}
.object {
  /* Spacing between nested objects */
}
.object .nested-object + .nested-object {
  margin-top: 8px;
}
.object {
  /* Deeply nested objects */
}
.object .nested-object .nested-object .object-label {
  opacity: 0.75;
}

/* ===============================================
   SCROLLBAR STYLING
   =============================================== */
#drawer-wrap::-webkit-scrollbar {
  width: 6px;
}
#drawer-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
#drawer-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* ===============================================
   ANIMATIONS & TRANSITIONS
   =============================================== */
/* Specific transition for toggle thumb to include left property */
#drawer .toggle-thumb {
  transition: left 0.3s ease, background-color 0.3s ease, transform 0.3s ease !important;
}

/* Focus states */
.drawer-row:focus-within {
  background-color: rgb(30, 30, 33);
  color: rgb(255, 255, 255);
}

button:focus {
  outline: none;
}

/* Log tab specific styles */
.drawer-row.recent-change {
  font-size: 0.9em;
}
.drawer-row.recent-change dt {
  flex: 2;
}
.drawer-row.recent-change dd {
  flex: 8;
  opacity: 0.9;
}

.debug-section + .debug-section {
  margin-top: 12px;
}

.debug-section {
  margin-left: 12px;
  margin-right: 12px;
  border-radius: 10px;
  background: var(--color-bglighter);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}
.debug-section.collapsed .debug-section-title:after {
  border-left: none;
  border-top: none;
  border-right: 0.15em solid white;
  border-bottom: 0.15em solid white;
  margin-top: -3px;
}
.debug-section.collapsed .debug-section-content {
  display: none !important;
}
.debug-section:not(.collapsed) .debug-section-title:hover:after {
  border-left: 0.15em solid white;
  border-top: 0.15em solid white;
  border-right: none;
  border-bottom: none;
}
.debug-section .debug-section-title {
  cursor: pointer;
  position: relative;
}
.debug-section .debug-section-title:hover:after {
  opacity: 0.5;
}
.debug-section .debug-section-title:after {
  transform-origin: 50% 50%;
  float: right;
  content: "";
  display: inline-block;
  margin-top: 1px;
  height: 0.6em;
  width: 0.6em;
  border-left: 0.15em solid white;
  border-top: 0.15em solid white;
  transform: rotate(45deg);
  opacity: 0.25;
}
.debug-section .debug-section-title {
  width: 100%;
  font-size: 14px;
  line-height: 0.7;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--color-light);
  text-shadow: 0 1px 1px var(--color-dark), 0 0 4px var(--color-dark);
  opacity: 0.8;
  white-space: nowrap;
  margin: 0;
  padding-bottom: 7px;
  padding-top: 10px;
  display: flex;
}
.debug-section .debug-section-title:first-child {
  margin-top: 0;
}
.debug-section .debug-section-title .section-count {
  font-feature-settings: "tnum";
  font-size: 80%;
  opacity: 0.2;
  font-weight: 900;
  margin-left: 0.3em;
  flex: 1;
  text-align: right;
  padding-right: 0.5em;
}
.debug-section .debug-section-description {
  text-wrap: balance;
  font-size: 0.9em;
  line-height: 1.2;
  opacity: 0.5;
  margin: 0 0 0.6em 0;
  font-weight: 300;
}
.debug-section .debug-section-header {
  background: var(--color-bglighter);
  padding: 4px 16px;
}
.debug-section .debug-section-content {
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}
.debug-section .debug-section-content .debug-copy-buttons {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 4px;
}
.debug-section .debug-section-content .debug-copy-buttons #debug-copy-single-btn {
  flex: 1;
}
.debug-section .debug-section-content .debug-copy-buttons #debug-copy-history-btn {
  flex: 6;
}
.debug-section .debug-section-content div > button {
  flex: 1;
  overflow: hidden;
  outline: none;
  border: none;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px !important;
  line-height: 25px;
  padding: 12px;
  border-radius: 10px;
  color: white;
  background: rgba(234, 233, 232, 0.025);
}
.debug-section .debug-section-content div > button:hover {
  opacity: 1;
  background: rgba(234, 233, 232, 0.1);
  color: rgb(234, 233, 232);
}
.debug-section .debug-section-content div > button.active {
  opacity: 1;
  background: rgba(234, 233, 232, 0.03);
}
.debug-section .debug-section-content {
  min-width: 100px;
  z-index: 10000;
  font-feature-settings: "tnum" 1;
}
.debug-section .debug-section-content dl:not(.half) + dl {
  border-top: 1px solid var(--color-bglight);
}
.debug-section .debug-section-content dl button {
  flex: 1;
  overflow: hidden;
  outline: none;
  border: none;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 17px !important;
  line-height: 0.9;
  padding: 6px;
  padding-bottom: 2px;
  border-radius: 4px;
  color: rgba(234, 233, 232, 0.5);
}
.debug-section .debug-section-content dl button:hover {
  background: rgba(234, 233, 232, 0.05);
  color: white;
}
.debug-section .debug-section-content dl .dec {
  opacity: 0.5;
  margin-left: 0.25em;
}
.debug-section .debug-section-content dl .unit {
  opacity: 0.25;
  margin-left: 0.25em;
  display: none;
}
.debug-section .debug-section-content dl {
  width: 100%;
}
.debug-section .debug-section-content dl.half {
  width: calc(50% - 5px);
  flex-direction: column;
}
.debug-section .debug-section-content dl {
  letter-spacing: 0.1em;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  margin: 0;
  text-shadow: 0 1px 1px var(--color-dark), 1px 0 1px var(--color-dark), 0 -1px 1px var(--color-dark), -1px 0 1px var(--color-dark), 0 0 4px var(--color-dark), 0 0 5px var(--color-dark), 0 0 6px var(--color-dark), 0 0 7px var(--color-dark);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  white-space: nowrap;
  padding-bottom: 10px;
  padding-top: 10px;
}
.debug-section .debug-section-content dl dt {
  opacity: 0.5;
}
.debug-section .debug-section-content dl dt,
.debug-section .debug-section-content dl dd {
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}
.debug-section .debug-section-content dl dt.has-incr,
.debug-section .debug-section-content dl dd.has-incr {
  border-radius: 8px;
  background: rgba(234, 233, 232, 0.025);
  padding: 4px;
  gap: 8px;
  align-items: center;
  display: flex;
  justify-items: space-between;
  flex-direction: row;
}
.debug-section .debug-section-content dl dt.has-incr span,
.debug-section .debug-section-content dl dd.has-incr span {
  text-align: center;
  flex: 4;
}
.debug-section .debug-section-content dl dt.false:before, .debug-section .debug-section-content dl dt.true:before,
.debug-section .debug-section-content dl dd.false:before,
.debug-section .debug-section-content dl dd.true:before {
  display: inline-block;
  vertical-align: middle;
  opacity: 1;
  padding-right: 0.5em;
}
.debug-section .debug-section-content dl dt.false,
.debug-section .debug-section-content dl dd.false {
  color: tomato;
}
.debug-section .debug-section-content dl dt.false:before,
.debug-section .debug-section-content dl dd.false:before {
  content: "✗";
}
.debug-section .debug-section-content dl dt.true,
.debug-section .debug-section-content dl dd.true {
  color: lime;
}
.debug-section .debug-section-content dl dt.true:before,
.debug-section .debug-section-content dl dd.true:before {
  content: "✓";
}

@keyframes snowFall {
  0% {
    transform: scale(1, 1) translateY(calc(var(--base) * 0)) translateX(0%);
  }
  100% {
    transform: scale(0, 0) translateY(calc(var(--base) * 64)) translateX(0%);
  }
}
@keyframes dustFloat {
  0% {
    transform: scale(1, 1) translateY(calc(var(--base) * 0)) translateX(0%);
    opacity: 0.25;
  }
  25% {
    transform: scale(0.9, 0.9) translateY(calc(var(--base) * -3)) translateX(-20%);
    opacity: 0.15;
  }
  50% {
    transform: scale(0.8, 0.8) translateY(calc(var(--base) * -6)) translateX(20%);
    opacity: 0.1;
  }
  75% {
    transform: scale(0.7, 0.7) translateY(calc(var(--base) * -9)) translateX(-20%);
    opacity: 0.05;
  }
  100% {
    transform: scale(0.6, 0.6) translateY(calc(var(--base) * -12)) translateX(0%);
    opacity: 0;
  }
}
@keyframes dustFloatLeft {
  0% {
    transform: scale(1, 1) translateY(calc(var(--base) * 0)) translateX(calc(var(--base) * 0));
    opacity: 0.25;
  }
  25% {
    transform: scale(0.9, 0.9) translateY(calc(var(--base) * -3)) translateX(calc(var(--base) * 4));
    opacity: 0.15;
  }
  50% {
    transform: scale(0.8, 0.8) translateY(calc(var(--base) * -6)) translateX(calc(var(--base) * 8));
    opacity: 0.1;
  }
  75% {
    transform: scale(0.7, 0.7) translateY(calc(var(--base) * -9)) translateX(calc(var(--base) * 12));
    opacity: 0.05;
  }
  100% {
    transform: scale(0.6, 0.6) translateY(calc(var(--base) * -12)) translateX(calc(var(--base) * 14));
    opacity: 0;
  }
}
@keyframes dustFloatRight {
  0% {
    transform: scale(1, 1) translateY(calc(var(--base) * 0)) translateX(calc(var(--base) * 0));
    opacity: 0.25;
  }
  25% {
    transform: scale(0.9, 0.9) translateY(calc(var(--base) * -3)) translateX(calc(var(--base) * -4));
    opacity: 0.15;
  }
  50% {
    transform: scale(0.8, 0.8) translateY(calc(var(--base) * -6)) translateX(calc(var(--base) * -8));
    opacity: 0.1;
  }
  75% {
    transform: scale(0.7, 0.7) translateY(calc(var(--base) * -9)) translateX(calc(var(--base) * -12));
    opacity: 0.05;
  }
  100% {
    transform: scale(0.6, 0.6) translateY(calc(var(--base) * -12)) translateX(calc(var(--base) * -14));
    opacity: 0;
  }
}
@keyframes dustSwirly {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes dustFall {
  from {
    transform: scale(0.7, 0.7) rotate(0deg) translateY(-10%);
  }
  to {
    transform: scale(1, 1) rotate(5deg) translateY(100%);
  }
}
@keyframes steamFade {
  0% {
    transform: scale(0.1);
  }
  10% {
    transform: scale(1.125);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes steamFadeB {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes shakeHorzPhased {
  0% {
    transform: translateY(-1.25px) translateX(-2.5px);
  }
  10% {
    transform: translateY(1.25px) translateX(2.25px);
  }
  20% {
    transform: translateY(-1px) translateX(-2.25px);
  }
  30% {
    transform: translateY(1px) translateX(2px);
  }
  40% {
    transform: translateY(-0.75px) translateX(-2px);
  }
  50% {
    transform: translateY(0.75px) translateX(1.5px);
  }
  60% {
    transform: translateY(-0.5px) translateX(-1.25px);
  }
  70% {
    transform: translateY(0.5px) translateX(1px);
  }
  80% {
    transform: translateY(-0.25px) translateX(-0.25px);
  }
  90% {
    transform: translateY(0.25px) translateX(0.25px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}
@keyframes shakeHorz {
  0% {
    transform: translateY(-1.25px) translateX(2.5px);
  }
  10% {
    transform: translateY(1.25px) translateX(-2.25px);
  }
  20% {
    transform: translateY(-1px) translateX(2.25px);
  }
  30% {
    transform: translateY(1px) translateX(-2px);
  }
  40% {
    transform: translateY(-0.75px) translateX(2px);
  }
  50% {
    transform: translateY(0.75px) translateX(-1.5px);
  }
  60% {
    transform: translateY(-0.5px) translateX(1.25px);
  }
  70% {
    transform: translateY(0.5px) translateX(-1px);
  }
  80% {
    transform: translateY(-0.25px) translateX(0.25px);
  }
  90% {
    transform: translateY(0.25px) translateX(-0.25px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}
@keyframes gridShake {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-2px, 2.5px);
  }
  20% {
    transform: translate(2px, -2.5px);
  }
  30% {
    transform: translate(1px, 2px);
  }
  40% {
    transform: translate(-1px, -2px);
  }
  50% {
    transform: translate(-1.25px, 1.5px);
  }
  60% {
    transform: translate(1.25px, -1.5px);
  }
  70% {
    transform: translate(0.5px, 1px);
  }
  80% {
    transform: translate(-0.25px, -0.5px);
  }
  90% {
    transform: translate(-0.25px, 0.5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes vibrateHorizontal {
  0% {
    transform: translate(-5px, 0);
  }
  10% {
    transform: translate(3px, 0);
  }
  20% {
    transform: translate(-2.5px, 0);
  }
  30% {
    transform: translate(2px, 0);
  }
  40% {
    transform: translate(-1.5px, 0);
  }
  50% {
    transform: translate(1px, 0);
  }
  60% {
    transform: translate(-0.75px, 0);
  }
  70% {
    transform: translate(0.5px, 0);
  }
  80% {
    transform: translate(-0.25px, 0);
  }
  90% {
    transform: translate(0.25px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes vibrateVertical {
  0% {
    transform: translate(0, -5px);
  }
  10% {
    transform: translate(0, 3px);
  }
  20% {
    transform: translate(0, -2.5px);
  }
  30% {
    transform: translate(0, 2px);
  }
  40% {
    transform: translate(0, -1.5px);
  }
  50% {
    transform: translate(0, 1px);
  }
  60% {
    transform: translate(0, -0.75px);
  }
  70% {
    transform: translate(0, 0.5px);
  }
  80% {
    transform: translate(0, -0.25px);
  }
  90% {
    transform: translate(0, 0.25px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes vibrate {
  0% {
    transform: translate(0, -2px);
  }
  10% {
    transform: translate(0, 1.5px);
  }
  20% {
    transform: translate(0, -1.5px);
  }
  30% {
    transform: translate(0, 1px);
  }
  40% {
    transform: translate(0, -0.75px);
  }
  50% {
    transform: translate(0, 0.5px);
  }
  60% {
    transform: translate(0, -0.25px);
  }
  70% {
    transform: translate(0, 0.25px);
  }
  80% {
    transform: translate(0, -0.125px);
  }
  90% {
    transform: translate(0, 0.125px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes vanishingShake {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  10% {
    transform: translate(-6px, 4px) rotate(-2deg) scale(1.02);
  }
  20% {
    transform: translate(6px, -4px) rotate(2deg) scale(1.02);
  }
  30% {
    transform: translate(-4px, 3px) rotate(-1.5deg) scale(1.01);
  }
  40% {
    transform: translate(4px, -3px) rotate(1.5deg) scale(1.01);
  }
  50% {
    transform: translate(-3px, 2px) rotate(-1deg) scale(1);
  }
  60% {
    transform: translate(3px, -2px) rotate(1deg) scale(1);
  }
  70% {
    transform: translate(-2px, 1px) rotate(-0.5deg) scale(1);
  }
  80% {
    transform: translate(2px, -1px) rotate(0.5deg) scale(1);
  }
  90% {
    transform: translate(-1px, 0.5px) rotate(-0.25deg) scale(1);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}
@keyframes portalB {
  0%, 100% {
    transform: scale(0) translateY(0%) translateX(0);
  }
  50% {
    transform: scale(1) translateY(0%) translateX(0);
  }
}
@keyframes portalC {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
}
@keyframes pulsateOpacity {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes invulnerabilityFlash {
  0%, 10%, 100% {
    opacity: 1;
  }
  40%, 70% {
    opacity: 0.1;
  }
}
@keyframes pulsateFire {
  0% {
    opacity: 0.8;
  }
  5% {
    opacity: 0.3;
  }
  10% {
    opacity: 0.6;
  }
  15% {
    opacity: 0.4;
  }
  20% {
    opacity: 0.7;
  }
  25% {
    opacity: 0.2;
  }
  30% {
    opacity: 0.9;
  }
  35% {
    opacity: 0.5;
  }
  40% {
    opacity: 0.6;
  }
  45% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  55% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.7;
  }
  65% {
    opacity: 0.3;
  }
  70% {
    opacity: 0.6;
  }
  75% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.9;
  }
  95% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}
@keyframes vanishingPulse {
  0% {
    opacity: 1;
    transform: scale(1, 1);
  }
  60% {
    opacity: 1;
    transform: scale(1, 1);
  }
  62% {
    opacity: 0.9;
    transform: scale(1, 1);
  }
  64% {
    opacity: 1;
    transform: scale(1, 1);
  }
  66% {
    opacity: 0.8;
    transform: scale(1, 1);
  }
  68% {
    opacity: 1;
    transform: scale(1, 1);
  }
  70% {
    opacity: 0.7;
    transform: scale(1, 1);
  }
  72% {
    opacity: 1;
    transform: scale(1, 1);
  }
  74% {
    opacity: 0.6;
    transform: scale(1, 1);
  }
  76% {
    opacity: 1;
    transform: scale(1, 1);
  }
  78% {
    opacity: 0.5;
    transform: scale(1, 1);
  }
  80% {
    opacity: 1;
    transform: scale(1, 1);
  }
  82% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
  84% {
    opacity: 1;
    transform: scale(1, 1);
  }
  86% {
    opacity: 0.3;
    transform: scale(1, 1);
  }
  88% {
    opacity: 1;
    transform: scale(1, 1);
  }
  90% {
    opacity: 0.2;
    transform: scale(1, 1);
  }
  92% {
    opacity: 1;
    transform: scale(1, 1);
  }
  94% {
    opacity: 0.1;
    transform: scale(1, 1);
  }
  96% {
    opacity: 1;
    transform: scale(1, 1);
  }
  98% {
    opacity: 0;
    transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadePinch {
  0% {
    opacity: 1;
    transform: scale(1, 1);
  }
  5% {
    opacity: 0.5;
    transform: scale(1.01, 1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeOut {
  0% {
    opacity: 0.3;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(1, 1);
  }
}
@keyframes chararacterBreathingCounter {
  0% {
    transform: scale(1, 1) translateY(0) translateX(0%);
  }
  50% {
    transform: scale(1, 1) translateY(2%) translateX(0%);
  }
  100% {
    transform: scale(1, 1) translateY(0) translateX(0%);
  }
}
@keyframes chararacterBreathing {
  0% {
    transform: scale(1, 1) translateY(0) translateX(0%);
  }
  50% {
    transform: scale(0.98, 0.97) translateY(0.6%) translateX(0%);
  }
  100% {
    transform: scale(1, 1) translateY(0) translateX(0%);
  }
}
@keyframes kingGlow {
  0%, 100% {
    transform: scale(1, 1);
  }
  0%, 3%, 6%, 9%, 12%, 15%, 18%, 21%, 30%, 33%, 36%, 39%, 42%, 45%, 48%, 60%, 63%, 66%, 69%, 72%, 75%, 78%, 81%, 84%, 87%, 90%, 93%, 96%, 99% {
    transform: scale(1.1, 0.9);
  }
  1%, 4%, 7%, 10%, 13%, 16%, 19%, 22%, 25%, 46%, 49%, 52%, 55%, 58%, 61%, 64%, 67%, 70%, 73%, 76%, 79%, 82%, 85%, 88%, 91%, 94%, 97% {
    transform: scale(1, 1.1);
  }
  95%, 11%, 86%, 89%, 92%, 28%, 31%, 34%, 40%, 43%, 24%, 27%, 5%, 37% {
    transform: scale(1.15, 1.15);
  }
  44%, 47%, 50%, 51%, 54%, 57%, 32%, 35%, 38%, 2%, 56% {
    transform: scale(1.1, 1);
  }
  8%, 14%, 17%, 20%, 23%, 26%, 29%, 41%, 53%, 59%, 62%, 65%, 68%, 71%, 74%, 77%, 80%, 83%, 98% {
    transform: scale(1, 1.1);
  }
}
@keyframes kingVignette {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.98, 0.98);
  }
}
@keyframes kingSlash {
  0%, 10% {
    opacity: 0;
    transform: rotate(270deg) scale(0);
  }
  20% {
    opacity: 1;
    transform: rotate(90deg) scale(1);
  }
  30%, 100% {
    opacity: 0;
    transform: rotate(-270deg) scale(1);
  }
}
@keyframes aggro {
  0%, 100% {
    transform: scale(1) translateY(-10%);
  }
  50% {
    transform: scale(0.95) translateY(0%);
  }
}
@keyframes platformShift {
  0% {
    transform: translateX(0%);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes crateSway {
  0%, 100% {
    transform: rotate(0deg) translateY(0%);
  }
  50% {
    transform: rotate(0deg) translateY(5%);
  }
}
@keyframes wiggle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes crossSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes death-loot-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
#king.ducking:before {
  height: calc(var(--base) * 4);
  background: orange;
}
#king:before {
  opacity: 0.5;
  z-index: 100;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: #00FF2A;
  display: none;
}
#king.invulnerable #king-sprite {
  animation-name: invulnerabilityFlash;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.proximity-left):not(.proximity-right).grounded.face-backward.slash #kingBalls {
  transform: rotate(-15deg) !important;
}
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.proximity-left):not(.proximity-right).grounded.face-forward.slash #kingBalls {
  transform: rotate(15deg) !important;
}
#king.face-forward.slash #kingCrossWrap {
  transition: all 0s 0s ease-in !important;
  transform: rotate(1.5deg) translateX(0%) scale(1);
}
#king.face-backward.slash #kingCrossWrap {
  transition: all 0s 0s ease-in !important;
  transform: rotate(-1.5deg) translateX(0%) scale(1);
}

.slash-a #kingSlash {
  transform: rotate(-240deg);
}
.slash-a #kingSlash.slash {
  transition: transform 0s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: rotate(40deg);
}

.slash-b #kingSlash {
  transform: rotate(240deg);
}
.slash-b #kingSlash.slash {
  transition: transform 0s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: rotate(-40deg);
}

.slash #kingSlashWrap {
  transition: all 0.05s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 1;
}

#kingSlashAngle {
  width: 100%;
  height: 100%;
  left: 0;
  top: calc(var(--base) * -2);
  position: absolute;
}

#kingSlashWrap {
  pointer-events: none;
  transform: scale(1, 0.3);
  transition: all 0s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0;
}
#kingSlashWrap #kingSlash {
  border-radius: 50%;
  background-image: url("/lonely-boing/_img/kingSlash.svg");
  transition: transform 0.2s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  transform-origin: center center; /* Set the transform origin to bottom center */
  position: absolute;
  top: calc(var(--base) * -19);
  left: calc(var(--base) * -19);
  bottom: calc(var(--base) * -19);
  right: calc(var(--base) * -19);
}

#kingGlowLarge {
  z-index: -100;
  content: "";
  position: absolute;
  top: calc(var(--base) * -28);
  bottom: calc(var(--base) * -28);
  left: calc(var(--base) * -28);
  right: calc(var(--base) * -28);
  aspect-ratio: 1;
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(234, 233, 232, 0.01) 5%, rgba(234, 233, 232, 0) 70%, transparent 60%);
  pointer-events: none;
}

#kingGlow {
  top: -100%;
  bottom: -70%;
  left: -150%;
  right: -150%;
  position: absolute;
  background: radial-gradient(at center center, rgba(234, 233, 232, 0.025) 40%, rgba(234, 233, 232, 0) 60.5%);
  display: none;
}

#kingSlashWrap,
#kingSkirtWrap,
#kingBallsWrap,
#kingCrossWrap {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

#kingPointer {
  display: inline-block;
  position: absolute;
  height: 6px;
  width: 6px;
  margin: -3px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  borderRadius: 50%;
  background-color: rgba(0, 255, 0, 0.3);
  pointerEvents: none;
  zIndex: 10000;
  transform: translate(-50%, -50%);
}

#king-sprite {
  min-width: calc(var(--base) * 8);
  min-height: calc(var(--base) * 8);
  transform: scale(0.95);
  transform-origin: bottom;
  position: relative;
  transition: transform 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#kingPain {
  pointer-events: none;
  z-index: 10000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  background: rgba(255, 255, 255, 0.1);
  transition: opacity 0.2s 0s ease-out;
  opacity: 0;
}
#kingPain.pain {
  transition: opacity 0s 0s linear;
  opacity: 1;
}
#kingPain.lightning {
  background: rgba(255, 255, 255, 0.25);
  transition: opacity 0s 0s linear;
  opacity: 1;
}

.king,
#king {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1 + var(--bob, 0) * -0.6vh);
  rotate: calc(var(--wiggle, 0) * 0.5deg);
  will-change: translate, rotate, scale;
  z-index: 20000;
  width: calc(var(--base) * 5);
  width: calc(var(--base) * 3.4);
  height: calc(var(--h, 6) * var(--base));
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.king.latching-right.forward #kingBalls,
.king.latching-right.forward #kingSkirt,
#king.latching-right.forward #kingBalls,
#king.latching-right.forward #kingSkirt {
  transform: rotate(-17.5deg) translateY(0%) translateX(10%);
  transition: all 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.latching-right.forward #kingCross,
#king.latching-right.forward #kingCross {
  transform: rotate(12deg) translateX(0%) scale(0.97);
  transition: all 1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.latching-left.backward #kingBalls,
.king.latching-left.backward #kingSkirt,
#king.latching-left.backward #kingBalls,
#king.latching-left.backward #kingSkirt {
  transform: rotate(17.5deg) translateY(0%) translateX(-10%);
  transition: all 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.latching-left.backward #kingCross,
#king.latching-left.backward #kingCross {
  transform: rotate(-12deg) translateX(0%) scale(0.97);
  transition: all 1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.dead #king-sprite,
#king.dead #king-sprite {
  opacity: 0;
  filter: blur(30px);
  transition: all 0.65s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(0%) scale(0);
}
.king.lean-right #kingSkirt, .king.slip-right.slip-off #kingSkirt,
#king.lean-right #kingSkirt,
#king.slip-right.slip-off #kingSkirt {
  transform: rotate(14.5deg) translateY(2.5%) skew(-10deg) translateX(-6%);
  transform-origin: bottom left;
}
.king.lean-right #kingBalls, .king.slip-right.slip-off #kingBalls,
#king.lean-right #kingBalls,
#king.slip-right.slip-off #kingBalls {
  transform: rotate(12.5deg) translateY(2.5%);
  transform-origin: bottom left;
}
.king.lean-left #kingSkirt, .king.slip-left.slip-off #kingSkirt,
#king.lean-left #kingSkirt,
#king.slip-left.slip-off #kingSkirt {
  transform: rotate(-14.5deg) translateY(2.5%) skew(10deg) translateX(6%);
  transform-origin: bottom right;
}
.king.lean-left #kingBalls, .king.slip-left.slip-off #kingBalls,
#king.lean-left #kingBalls,
#king.slip-left.slip-off #kingBalls {
  transform: rotate(-12.5deg) translateY(2.5%);
  transform-origin: bottom right;
}
.king.proximity-right #kingSkirt,
#king.proximity-right #kingSkirt {
  transform: rotate(2deg) translateY(2.5%) skew(-5deg) translateX(0%);
  transform-origin: bottom left;
}
.king.proximity-right #kingBalls,
#king.proximity-right #kingBalls {
  transform: rotate(7.25deg) translateY(-2.5%);
  transform-origin: bottom left;
}
.king.proximity-left #kingSkirt,
#king.proximity-left #kingSkirt {
  transform: rotate(-2deg) translateY(2.5%) skew(5deg) translateX(0%);
  transform-origin: bottom right;
}
.king.proximity-left #kingBalls,
#king.proximity-left #kingBalls {
  transform: rotate(-7.25deg) translateY(-2.5%);
  transform-origin: bottom right;
}
.king.slip-right #kingBalls,
.king.slip-right #kingSkirt,
#king.slip-right #kingBalls,
#king.slip-right #kingSkirt {
  transform: rotate(6.5deg) translateY(2.5%);
  transform-origin: bottom left;
}
.king.slip-left #kingBalls,
.king.slip-left #kingSkirt,
#king.slip-left #kingBalls,
#king.slip-left #kingSkirt {
  transform: rotate(-6.5deg) translateY(2.5%);
  transform-origin: bottom right;
}
.king.jumping-right #kingBalls,
.king.jumping-right #kingSkirt,
#king.jumping-right #kingBalls,
#king.jumping-right #kingSkirt {
  transform: rotate(12.5deg) translateY(2.5%);
  transform-origin: bottom left;
}
.king.jumping-left #kingBalls,
.king.jumping-left #kingSkirt,
#king.jumping-left #kingBalls,
#king.jumping-left #kingSkirt {
  transform: rotate(-12.5deg) translateY(2.5%);
  transform-origin: bottom right;
}
.king.jump #kingBalls,
#king.jump #kingBalls {
  transform: translateY(0%) scale(0.9, 1);
}
.king.jump #kingSkirt,
#king.jump #kingSkirt {
  transform: translateY(0%) scale(0.9, 0.9);
}
.king.slow #kingCross,
#king.slow #kingCross {
  transition: all 1s 0s ease-out;
}
.king.slow #kingBalls,
#king.slow #kingBalls {
  transition: transform 0.7s 0s ease-out;
}
.king.jiggle.forward #kingBalls,
#king.jiggle.forward #kingBalls {
  transform: translateX(2%);
  transition: transform 0.1s 0s ease-in-out;
}
.king.jiggle.backward #kingBalls,
#king.jiggle.backward #kingBalls {
  transform: translateX(-2%);
  transition: transform 0.1s 0s ease-in-out;
}
.king.wobble #kingBalls,
#king.wobble #kingBalls {
  transform: translateY(7%) scale(1.05, 0.8) !important;
}
.king.wobble #kingSkirt,
#king.wobble #kingSkirt {
  transform: translateY(0%) scale(1.05, 0.8) !important;
}
.king.wibble:not(.proximity-left):not(.proximity-right) #kingBalls,
#king.wibble:not(.proximity-left):not(.proximity-right) #kingBalls {
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  transform: translateY(9%) scale(1.2, 0.8) !important;
}
.king.wibble:not(.proximity-left):not(.proximity-right) #kingSkirt,
#king.wibble:not(.proximity-left):not(.proximity-right) #kingSkirt {
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  transform: translateY(0%) scale(1.2, 0.9) !important;
}
.king.wabble:not(.proximity-left):not(.proximity-right) #kingBalls,
#king.wabble:not(.proximity-left):not(.proximity-right) #kingBalls {
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  transform: translateY(5%) scale(1.1, 0.9) !important;
}
.king.wabble:not(.proximity-left):not(.proximity-right) #kingSkirt,
#king.wabble:not(.proximity-left):not(.proximity-right) #kingSkirt {
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  transform: translateY(0%) scale(1.1, 0.9) !important;
}
.king .kingBalls,
.king .kingSkirt,
.king #kingBody,
.king #kingBalls,
.king #kingSkirt,
#king .kingBalls,
#king .kingSkirt,
#king #kingBody,
#king #kingBalls,
#king #kingSkirt {
  will-change: margin-bottom, transform; /* Specify properties that are likely to change */
  transition: all 0.3s 0s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  transform-origin: bottom center; /* Set the transform origin to bottom center */
}
.king .kingBalls,
.king #kingBalls,
#king .kingBalls,
#king #kingBalls {
  transform-origin: center 60%;
}
.king #kingBody,
#king #kingBody {
  z-index: 10;
  height: 100%;
  width: 100%;
  transform-origin: center 80%;
  transition: none !important;
}
.king #kingBody #kingBodyLeft,
.king #kingBody #kingBodyRight,
#king #kingBody #kingBodyLeft,
#king #kingBody #kingBodyRight {
  transition: transform 1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  transform-origin: bottom center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.king #kingBody #kingBodyLeft,
#king #kingBody #kingBodyLeft {
  background-image: url("/_img/chesspieces/sctheme-b/wK-a-l.png");
  background-image: url("/lonely-boing/_img/kingBallL.svg");
}
.king #kingBody #kingBodyRight,
#king #kingBody #kingBodyRight {
  background-image: url("/_img/chesspieces/sctheme-b/wK-a-r.png");
  background-image: url("/lonely-boing/_img/kingBallR.svg");
}
.king.ascending #kingBodyLeft,
.king.ascending #kingBodyRight,
#king.ascending #kingBodyLeft,
#king.ascending #kingBodyRight {
  transition: transform 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.ascending #kingBodyLeft,
#king.ascending #kingBodyLeft {
  transform: rotate(-15deg) translateX(10%);
}
.king.ascending #kingBodyRight,
#king.ascending #kingBodyRight {
  transform: rotate(15deg) translateX(-10%);
}
.king.face-forward #kingBodyLeft,
#king.face-forward #kingBodyLeft {
  transform: rotate(-3deg);
  transition: transform 0.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.face-forward #kingBodyRight,
#king.face-forward #kingBodyRight {
  transition: transform 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.face-backward #kingBodyLeft,
#king.face-backward #kingBodyLeft {
  transition: transform 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.face-backward #kingBodyRight,
#king.face-backward #kingBodyRight {
  transform: rotate(3deg);
  transition: transform 0.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king .kingSkirt,
.king #kingSkirt,
#king .kingSkirt,
#king #kingSkirt {
  background-image: url("/_img/chesspieces/sctheme-b/wK-a-1.png");
  background-image: url("/lonely-boing/_img/kingSkirt.svg");
  transition: all 0.4s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.ascending #kingLegs,
#king.ascending #kingLegs {
  transform: translateY(60%);
  transition: all 0.01s 0s ease-in;
}
.king.ascending #kingLegs #kingLegL,
.king.ascending #kingLegs #kingLegR,
#king.ascending #kingLegs #kingLegL,
#king.ascending #kingLegs #kingLegR {
  transition: all 0.1s 0.15s ease-in;
}
.king.ascending #kingLegs #kingLegL,
#king.ascending #kingLegs #kingLegL {
  transform: rotate(10deg) !important;
}
.king.ascending #kingLegs #kingLegR,
#king.ascending #kingLegs #kingLegR {
  transform: rotate(-10deg) !important;
}
.king #kingLegs,
#king #kingLegs {
  display: none;
  transition: all 0.5s 0s ease-out;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 38%;
  top: 45%;
  opacity: 0.1;
  gap: calc(var(--base) * 0.4);
}
.king #kingLegs #kingLegL,
.king #kingLegs #kingLegR,
#king #kingLegs #kingLegL,
#king #kingLegs #kingLegR {
  transform-origin: top center;
  transition: all 1s 0s ease-out;
  background-color: var(--color-light);
  height: 100%;
  width: calc(var(--base) * 0.7);
  opacity: 1;
}
.king #kingEyes.blink #kingEyeL,
.king #kingEyes.blink #kingEyeR,
#king #kingEyes.blink #kingEyeL,
#king #kingEyes.blink #kingEyeR {
  transition: height 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  width: calc(var(--base) * 0.5);
  height: calc(var(--base) * 0.2) !important;
  border-radius: calc(var(--base) * 0);
}
.king #kingEyes,
#king #kingEyes {
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  gap: calc(var(--base) * 0.75);
  padding-top: calc(var(--base) * 2);
  padding-bottom: calc(var(--base) * 0.125);
}
.king #kingEyes #kingEyeL,
.king #kingEyes #kingEyeR,
#king #kingEyes #kingEyeL,
#king #kingEyes #kingEyeR {
  transition: height 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  background-color: var(--color-dark);
  height: calc(var(--base) * 0.75);
  width: calc(var(--base) * 0.6);
  border-radius: calc(var(--base) * 1);
  border-radius: 50%;
  opacity: 0.2;
}
.king .kingCross,
.king #kingCross,
#king .kingCross,
#king #kingCross {
  z-index: -2;
  transition: all 0.2s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 55%;
  right: 0;
  margin: -3.125%;
  transform-origin: bottom center;
  transform: none !important;
}
.king .kingCross #kingCrossInner,
.king #kingCross #kingCrossInner,
#king .kingCross #kingCrossInner,
#king #kingCross #kingCrossInner {
  position: absolute;
  height: 100%;
  width: 100%;
  transform-origin: bottom center;
  will-change: transform;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("/_img/chesspieces/sctheme-b/wK-b.png");
  background-image: url("/lonely-boing/_img/kingCross.svg");
}
.king #kingCrossWrap,
#king #kingCrossWrap {
  transition: all 0.1s 0s ease-in-out;
}
.king.face-backward #kingCrossWrap,
#king.face-backward #kingCrossWrap {
  transform: rotate(6deg) translateX(1%) scale(1);
}
.king.face-forward #kingCrossWrap,
#king.face-forward #kingCrossWrap {
  transform: rotate(-6deg) translateX(-1%) scale(1);
}
.king:not(.slip-right):not(.slip-left):not(.slip-off):not(.proximity-left):not(.proximity-right).grounded.face-forward #kingBalls,
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.proximity-left):not(.proximity-right).grounded.face-forward #kingBalls {
  transform: rotate(-5deg) translateX(-1%) scale(1);
}
.king:not(.slip-right):not(.slip-left):not(.slip-off):not(.proximity-left):not(.proximity-right).grounded.face-backward #kingBalls,
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.proximity-left):not(.proximity-right).grounded.face-backward #kingBalls {
  transform: rotate(5deg) translateX(1%) scale(1);
}
.king:not(.slip-right):not(.slip-left):not(.slip-off):not(.proximity-left):not(.proximity-right).grounded.face-backward.aim #kingBalls,
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.proximity-left):not(.proximity-right).grounded.face-backward.aim #kingBalls {
  transform: rotate(15deg) !important;
}
.king:not(.slip-right):not(.slip-left):not(.slip-off):not(.proximity-left):not(.proximity-right).grounded.face-forward.aim #kingBalls,
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.proximity-left):not(.proximity-right).grounded.face-forward.aim #kingBalls {
  transform: rotate(-15deg) !important;
}
.king:not(.lean-right):not(.lean-left).airborne.face-forward #kingBalls,
#king:not(.lean-right):not(.lean-left).airborne.face-forward #kingBalls {
  transform: rotate(-5deg) translateX(-1%) scale(1);
}
.king:not(.lean-right):not(.lean-left).airborne.face-backward #kingBalls,
#king:not(.lean-right):not(.lean-left).airborne.face-backward #kingBalls {
  transform: rotate(5deg) translateX(1%) scale(1);
}
.king:not(.lean-right):not(.lean-left).airborne.face-backward.aim #kingBalls,
#king:not(.lean-right):not(.lean-left).airborne.face-backward.aim #kingBalls {
  transform: rotate(15deg) !important;
}
.king:not(.lean-right):not(.lean-left).airborne.face-forward.aim #kingBalls,
#king:not(.lean-right):not(.lean-left).airborne.face-forward.aim #kingBalls {
  transform: rotate(-15deg) !important;
}
.king.ascending #kingCrossWrap,
#king.ascending #kingCrossWrap {
  top: calc(var(--base) * -0.5);
}
.king.descending #kingCrossWrap,
#king.descending #kingCrossWrap {
  top: calc(var(--base) * -0.75) !important;
  transition: top 1.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.1s 0s ease-in-out;
}
.king.descending #kingBalls,
#king.descending #kingBalls {
  top: calc(var(--base) * -0.75) !important;
  transition: top 1.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.1s 0s ease-in-out;
}
.king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking #kingCrossWrap,
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking #kingCrossWrap {
  top: calc(var(--base) * 0.4) !important;
}
.king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking #kingBallsWrap,
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking #kingBallsWrap {
  top: calc(var(--base) * 0.2) !important;
}
.king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking #kingBalls,
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking #kingBalls {
  transform: translateY(7%) scale(0.98, 0.98) !important;
}
.king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking #kingSkirt,
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking #kingSkirt {
  transform: translateY(0%) scale(0.98, 0.98) !important;
}
.king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking.face-backward #kingCross,
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking.face-backward #kingCross {
  transform: rotate(2deg) translateX(0%) scale(0.97);
}
.king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking.face-forward #kingCross,
#king:not(.slip-right):not(.slip-left):not(.slip-off):not(.latching).ducking.face-forward #kingCross {
  transform: rotate(-2deg) translateX(0%) scale(0.97);
}
.king.face-backward.stab #kingCross,
#king.face-backward.stab #kingCross {
  top: -15px;
  transform: rotate(25deg) translateX(-3%) scale(1);
}
.king.face-forward.stab #kingCross,
#king.face-forward.stab #kingCross {
  top: -15px;
  transform: rotate(-25deg) translateX(3%) scale(1);
}
.king.face-backward.aim #kingCrossWrap,
#king.face-backward.aim #kingCrossWrap {
  top: calc(var(--base) * -0.25);
  transform: rotate(15deg) translateX(-1%) translateY(-2%) scale(1);
}
.king.face-forward.aim #kingCrossWrap,
#king.face-forward.aim #kingCrossWrap {
  top: calc(var(--base) * -0.25);
  transform: rotate(-15deg) translateX(1%) translateY(-2%) scale(1);
}
.king.face-forward.unloaded #kingCrossWrap,
#king.face-forward.unloaded #kingCrossWrap {
  transition: all 0s 0s ease-in !important;
  transform: rotate(118.5deg) translateX(10%) scale(0.1);
}
.king.face-backward.unloaded #kingCrossWrap,
#king.face-backward.unloaded #kingCrossWrap {
  transition: all 0s 0s ease-in !important;
  transform: rotate(-118.5deg) translateX(-10%) scale(0.1);
}
.king.gather-in #kingCross,
#king.gather-in #kingCross {
  top: calc(var(--base) * -1.3) !important;
  transition: all 0s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.gather-out #kingCross,
#king.gather-out #kingCross {
  transition: all 1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.jumpup #kingCross,
#king.jumpup #kingCross {
  top: calc(var(--base) * -3.25) !important;
  bottom: 90%;
  transition: all 1.65s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.falling #kingCross,
#king.falling #kingCross {
  top: calc(var(--base) * -3.25) !important;
  bottom: 90%;
  transition: all 0.65s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.forward:before, .king:not(.sneaking).forward:before,
#king.forward:before,
#king:not(.sneaking).forward:before {
  transform: rotate(2deg);
  transform: rotate(3deg) translateX(3%);
  background-size: 98%;
}
.king.forward #kingCrossWrap, .king:not(.sneaking).forward #kingCrossWrap,
#king.forward #kingCrossWrap,
#king:not(.sneaking).forward #kingCrossWrap {
  transform: rotate(-16deg) translateX(3%);
}
.king.forward #kingCross, .king:not(.sneaking).forward #kingCross,
#king.forward #kingCross,
#king:not(.sneaking).forward #kingCross {
  transform: rotate(-6deg);
  transform: rotate(-16deg) translateX(3%);
}
.king.forward #kingBalls, .king:not(.sneaking).forward #kingBalls,
#king.forward #kingBalls,
#king:not(.sneaking).forward #kingBalls {
  transform: rotate(-4deg);
}
.king.forward #kingSkirt, .king:not(.sneaking).forward #kingSkirt,
#king.forward #kingSkirt,
#king:not(.sneaking).forward #kingSkirt {
  transform: skew(-10deg) translateX(-10%);
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.king.backward:before, .king:not(.sneaking).backward:before,
#king.backward:before,
#king:not(.sneaking).backward:before {
  transform: rotate(-2deg);
  transform: rotate(-3deg) translateX(-3%);
  background-size: 98%;
}
.king.backward #kingCrossWrap, .king:not(.sneaking).backward #kingCrossWrap,
#king.backward #kingCrossWrap,
#king:not(.sneaking).backward #kingCrossWrap {
  transform: rotate(16deg) translateX(-3%);
}
.king.backward #kingCross, .king:not(.sneaking).backward #kingCross,
#king.backward #kingCross,
#king:not(.sneaking).backward #kingCross {
  transform: rotate(6deg);
  transform: rotate(16deg) translateX(-3%);
}
.king.backward #kingBalls, .king:not(.sneaking).backward #kingBalls,
#king.backward #kingBalls,
#king:not(.sneaking).backward #kingBalls {
  transform: rotate(4deg);
}
.king.backward #kingSkirt, .king:not(.sneaking).backward #kingSkirt,
#king.backward #kingSkirt,
#king:not(.sneaking).backward #kingSkirt {
  transform: skew(10deg) translateX(10%);
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#kingBallsWrap,
#kingSkirtWrap {
  margin: -3.125%;
  transition: top 0.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.crate {
  z-index: 18000;
  transform-origin: bottom center;
}
.crate.lean-right {
  transition: transform 0.05s 0s ease-in;
  transform: scale(0.95, 0.95) rotate(-14.5deg) translateY(2.5%) translateX(-25%);
}
.crate.lean-left {
  transition: transform 0.05s 0s ease-in;
  transform: scale(0.95, 0.95) rotate(14.5deg) translateY(2.5%) translateX(25%);
}
.crate .crate-marks {
  z-index: 3000;
  position: absolute;
  height: 100%;
  width: 100%;
}
.crate .crate-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.crate .crate-inner:before {
  z-index: 20;
  position: absolute;
  margin: calc(var(--base) * -0.24) calc(var(--base) * -0.24);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: calc(var(--base) * 0.75);
  border: calc(var(--base) * 0.5) solid var(--color-light);
  display: block;
  transition: border 1s ease-out 0s;
  box-shadow: 0 0px 0px calc(var(--base) * 0.3) var(--color-dark), inset 0 0px 0px calc(var(--base) * 0.3) var(--color-dark);
}

.domino {
  z-index: 3000;
  transition: transform 0.15s var(--easing);
}
.domino.hit:before {
  border-color: white;
}
.domino:before {
  z-index: 20;
  position: absolute;
  margin: calc(var(--base) * -0.24) calc(var(--base) * -0.24);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: calc(var(--base) * 0.75);
  border: calc(var(--base) * 0.5) solid rgb(43, 43, 46) !important;
  display: block;
  transition: border 0.25s ease-out 0s, rotate 0.15s var(--easing);
  box-shadow: 0 2px 2px calc(var(--base) * 0.3) rgba(23, 23, 25, 0.5), inset 0 0px 0px calc(var(--base) * 0.3) var(--color-dark);
  background-color: rgba(23, 23, 25, 0.75);
}
.domino.tipped-right:before {
  transform-origin: bottom right;
  rotate: 90deg;
}
.domino.tipped-left:before {
  transform-origin: bottom left;
  rotate: -90deg;
}

.cloth {
  z-index: 1500;
  pointer-events: none;
  overflow: visible;
}
.cloth .cloth-svg {
  overflow: visible;
  pointer-events: none;
}
.cloth .cloth-svg path {
  --shade: 27;
  fill: none;
  stroke: rgb(var(--shade), var(--shade), calc(var(--shade) + 3));
  stroke-width: calc(var(--base) * 0.5);
  stroke-linecap: square;
}

.vineCatenary {
  position: absolute;
  z-index: 2000;
}

.grass,
.vine {
  z-index: 2000;
  overflow: visible;
}

.drip {
  pointer-events: none;
  z-index: 200000;
}

.warpgrid {
  pointer-events: none;
  z-index: 0;
  background: var(--color-dark);
  box-shadow: 0 0px 0px calc(var(--base) * 1) var(--color-dark);
}

.editor-mode .drip {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 26C10.3 26 6.6 19.8 9.3 14.7L16 2.1L22.7 14.7C25.4 19.8 21.7 26 16 26Z" stroke="white" stroke-width="2" fill="none" opacity="0.3"/></svg>') no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}

.torch {
  pointer-events: none;
  z-index: 1500;
}
.torch .torch-stand {
  position: absolute;
  z-index: 0;
}
.torch:nth-child(2n-1) .torch-flame:after {
  animation-duration: 1s;
  animation-delay: 1.5s;
}
.torch .torch-flame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  display: block;
  z-index: 30;
}
.torch .torch-fire {
  position: absolute;
  left: 50%;
  bottom: calc(var(--base) * -1);
  width: calc(var(--base) * 7);
  height: calc(var(--base) * 10.5);
  margin-left: calc(var(--base) * -3.5);
  filter: url(#torch-goo);
  pointer-events: none;
}
.torch .torch-fire > i {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  border-radius: 50%;
  background: var(--color-light);
  translate: -50% 0;
}
.torch .torch-fire > i:nth-child(1) {
  width: calc(var(--base) * 2);
  height: calc(var(--base) * 2);
  bottom: calc(var(--base) * 0);
  animation: torch-sway-1 2.3s ease-in-out infinite, torch-flutter 0.53s ease-in-out infinite alternate;
  animation-delay: calc(-1s + var(--torch-offset, 0s)), calc(-0.7s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(2) {
  width: calc(var(--base) * 1.55);
  height: calc(var(--base) * 1.55);
  bottom: calc(var(--base) * 0.62);
  animation: torch-sway-2 2.47s ease-in-out infinite, torch-flutter 0.67s ease-in-out infinite alternate;
  animation-delay: calc(-1.06s + var(--torch-offset, 0s)), calc(-0.81s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(3) {
  width: calc(var(--base) * 1.2);
  height: calc(var(--base) * 1.2);
  bottom: calc(var(--base) * 1.24);
  animation: torch-sway-3 2.13s ease-in-out infinite, torch-flutter 0.41s ease-in-out infinite alternate;
  animation-delay: calc(-1.12s + var(--torch-offset, 0s)), calc(-0.92s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(4) {
  width: calc(var(--base) * 0.92);
  height: calc(var(--base) * 0.92);
  bottom: calc(var(--base) * 1.86);
  animation: torch-sway-4 2.61s ease-in-out infinite, torch-flutter 0.53s ease-in-out infinite alternate;
  animation-delay: calc(-1.18s + var(--torch-offset, 0s)), calc(-1.03s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(5) {
  width: calc(var(--base) * 0.72);
  height: calc(var(--base) * 0.72);
  bottom: calc(var(--base) * 2.48);
  animation: torch-sway-5 2.29s ease-in-out infinite, torch-flutter 0.67s ease-in-out infinite alternate;
  animation-delay: calc(-1.24s + var(--torch-offset, 0s)), calc(-1.14s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(6) {
  width: calc(var(--base) * 0.56);
  height: calc(var(--base) * 0.56);
  bottom: calc(var(--base) * 3.1);
  animation: torch-sway-6 2.53s ease-in-out infinite, torch-flutter 0.41s ease-in-out infinite alternate;
  animation-delay: calc(-1.3s + var(--torch-offset, 0s)), calc(-1.25s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(7) {
  width: calc(var(--base) * 0.45);
  height: calc(var(--base) * 0.45);
  bottom: calc(var(--base) * 3.72);
  animation: torch-sway-7 2.19s ease-in-out infinite, torch-flutter 0.53s ease-in-out infinite alternate;
  animation-delay: calc(-1.36s + var(--torch-offset, 0s)), calc(-1.36s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(8) {
  width: calc(var(--base) * 0.38);
  height: calc(var(--base) * 0.38);
  bottom: calc(var(--base) * 4.34);
  animation: torch-sway-8 2.41s ease-in-out infinite, torch-flutter 0.67s ease-in-out infinite alternate;
  animation-delay: calc(-1.42s + var(--torch-offset, 0s)), calc(-1.47s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(9) {
  width: calc(var(--base) * 0.32);
  height: calc(var(--base) * 0.32);
  bottom: calc(var(--base) * 4.96);
  animation: torch-sway-9 2.71s ease-in-out infinite, torch-flutter 0.41s ease-in-out infinite alternate;
  animation-delay: calc(-1.48s + var(--torch-offset, 0s)), calc(-1.58s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(10) {
  width: calc(var(--base) * 0.7);
  height: calc(var(--base) * 0.7);
  bottom: calc(var(--base) * 5.6);
  animation: torch-sway-10 2.03s ease-in-out infinite, torch-tip 0.35s ease-in-out infinite alternate;
  animation-delay: calc(-1.48s + var(--torch-offset, 0s)), var(--torch-offset, 0s);
}
.torch .torch-fire > i:nth-child(11) {
  width: calc(var(--base) * 1.6);
  height: calc(var(--base) * 1.6);
  bottom: calc(var(--base) * 0.3);
  animation: torch-rise-1 0.83s ease-out infinite;
  animation-delay: calc(-0.13s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(12) {
  width: calc(var(--base) * 1.6);
  height: calc(var(--base) * 1.6);
  bottom: calc(var(--base) * 0.3);
  animation: torch-rise-2 1.07s ease-out infinite;
  animation-delay: calc(-0.71s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(13) {
  width: calc(var(--base) * 1.6);
  height: calc(var(--base) * 1.6);
  bottom: calc(var(--base) * 0.3);
  animation: torch-rise-3 0.91s ease-out infinite;
  animation-delay: calc(-0.29s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(14) {
  width: calc(var(--base) * 1.6);
  height: calc(var(--base) * 1.6);
  bottom: calc(var(--base) * 0.3);
  animation: torch-rise-4 1.19s ease-out infinite;
  animation-delay: calc(-1.01s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(15) {
  width: calc(var(--base) * 1.6);
  height: calc(var(--base) * 1.6);
  bottom: calc(var(--base) * 0.3);
  animation: torch-rise-5 0.79s ease-out infinite;
  animation-delay: calc(-0.47s + var(--torch-offset, 0s));
}
.torch .torch-fire > i:nth-child(16) {
  width: calc(var(--base) * 1.6);
  height: calc(var(--base) * 1.6);
  bottom: calc(var(--base) * 0.3);
  animation: torch-rise-6 0.97s ease-out infinite;
  animation-delay: calc(-0.83s + var(--torch-offset, 0s));
}
.torch .torch-flame > b {
  position: absolute;
  left: 50%;
  bottom: calc(var(--base) * 3);
  width: calc(var(--base) * 0.45);
  height: calc(var(--base) * 0.45);
  display: block;
  border-radius: 50%;
  background: var(--color-light);
  opacity: 0;
  pointer-events: none;
  animation: torch-ember-1 2.6s ease-out infinite;
  animation-delay: var(--torch-offset, 0s);
}
.torch .torch-flame > b:nth-of-type(2) {
  animation-name: torch-ember-2;
  animation-duration: 3.1s;
  animation-delay: calc(-1.2s + var(--torch-offset, 0s));
}
.torch .torch-flame > b:nth-of-type(3) {
  animation-name: torch-ember-3;
  animation-duration: 2.2s;
  animation-delay: calc(-2s + var(--torch-offset, 0s));
}
.torch .torch-flame:before {
  content: "";
  position: absolute;
  bottom: calc(100% - var(--base) * 6.5);
  left: 50%;
  margin-left: calc(var(--base) * -7);
  width: calc(var(--base) * 14);
  aspect-ratio: 1;
  background: radial-gradient(ellipse at center, rgba(234, 233, 232, 0.5) 0%, rgba(234, 233, 232, 0.08) 20%, rgba(234, 233, 232, 0.04) 40%, transparent 60%);
  pointer-events: none;
  animation: kingGlow 25s linear infinite forwards, torch-glow-flicker 0.7s linear calc(var(--torch-offset, 0s) * 2) infinite;
}
.torch .torch-flame:after {
  content: "";
  position: absolute;
  bottom: calc(100% - var(--base) * 13);
  left: 50%;
  margin-left: calc(var(--base) * -14);
  width: calc(var(--base) * 28);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(234, 233, 232, 0.0075) 20%, rgba(234, 233, 232, 0.0075) 90%);
  pointer-events: none;
  animation: kingGlow 0.5s linear infinite forwards;
}
.torch:nth-child(5n+1) .torch-flame {
  --torch-offset: -0.15s;
}
.torch:nth-child(5n+2) .torch-flame {
  --torch-offset: -0.35s;
}
.torch:nth-child(5n+3) .torch-flame {
  --torch-offset: -0.55s;
}
.torch:nth-child(5n+4) .torch-flame {
  --torch-offset: -0.75s;
}
.torch.variant-a .torch-stand {
  top: 0;
  bottom: 0;
  left: 44%;
  width: 12.5%;
}
.torch.variant-a .torch-stand:before {
  content: "";
  position: absolute;
  z-index: 20;
  margin: calc(var(--base) * -0.25);
  top: 0;
  left: 0;
  bottom: calc(var(--base) * 0.5);
  right: 0;
  display: block;
  border-top-left-radius: calc(var(--base) * 2);
  border-top-right-radius: calc(var(--base) * 2);
  background: linear-gradient(180deg, var(--color-light) 0%, var(--color-mid) 80%);
}
.torch.variant-b .torch-stand {
  top: calc(var(--base) * 2);
  bottom: calc(var(--base) * 0.225);
  left: 50%;
  width: calc(var(--base) * 1);
  margin-left: calc(var(--base) * -0.5);
  border-radius: calc(var(--base) * 0.25);
  background-color: rgb(26, 27, 29);
  overflow: hidden;
}
.torch.variant-b .torch-stand:before {
  content: "";
  position: absolute;
  z-index: 20;
  transform-origin: top;
  margin: calc(var(--base) * -0.24);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  background: linear-gradient(180deg, var(--color-light) 0%, var(--color-mid) 80%);
  animation: torch-stem-wobble 0.23s ease-out infinite;
}
.torch.variant-b:nth-child(2n) .torch-stand:before {
  animation-duration: 0.275s;
}
.torch.variant-b:nth-child(3n) .torch-stand:before {
  animation-duration: 0.225s;
}
.torch.variant-b .torch-flame {
  top: calc(var(--base) * 2);
}
.torch.variant-b .torch-fire {
  scale: 0.7;
  transform-origin: 50% 100%;
}

@keyframes torch-glow {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}
@keyframes torch-sway-1 {
  0% {
    translate: calc(-50% - 0.0282vh) 0;
  }
  14% {
    translate: calc(-50% + 0.141vh) 0;
  }
  26% {
    translate: calc(-50% + 0.04935vh) 0;
  }
  41% {
    translate: calc(-50% - 0.11985vh) 0;
  }
  52% {
    translate: calc(-50% - 0.0564vh) 0;
  }
  64% {
    translate: calc(-50% + 0.0987vh) 0;
  }
  83% {
    translate: calc(-50% - 0.141vh) 0;
  }
  100% {
    translate: calc(-50% - 0.0282vh) 0;
  }
}
@keyframes torch-sway-2 {
  0% {
    translate: calc(-50% - 0.0799vh) 0;
  }
  14% {
    translate: calc(-50% + 0.3995vh) 0;
  }
  26% {
    translate: calc(-50% + 0.139825vh) 0;
  }
  41% {
    translate: calc(-50% - 0.339575vh) 0;
  }
  52% {
    translate: calc(-50% - 0.1598vh) 0;
  }
  64% {
    translate: calc(-50% + 0.27965vh) 0;
  }
  83% {
    translate: calc(-50% - 0.3995vh) 0;
  }
  100% {
    translate: calc(-50% - 0.0799vh) 0;
  }
}
@keyframes torch-sway-3 {
  0% {
    translate: calc(-50% - 0.1316vh) 0;
  }
  14% {
    translate: calc(-50% + 0.658vh) 0;
  }
  26% {
    translate: calc(-50% + 0.2303vh) 0;
  }
  41% {
    translate: calc(-50% - 0.5593vh) 0;
  }
  52% {
    translate: calc(-50% - 0.2632vh) 0;
  }
  64% {
    translate: calc(-50% + 0.4606vh) 0;
  }
  83% {
    translate: calc(-50% - 0.658vh) 0;
  }
  100% {
    translate: calc(-50% - 0.1316vh) 0;
  }
}
@keyframes torch-sway-4 {
  0% {
    translate: calc(-50% - 0.1833vh) 0;
  }
  14% {
    translate: calc(-50% + 0.9165vh) 0;
  }
  26% {
    translate: calc(-50% + 0.320775vh) 0;
  }
  41% {
    translate: calc(-50% - 0.779025vh) 0;
  }
  52% {
    translate: calc(-50% - 0.3666vh) 0;
  }
  64% {
    translate: calc(-50% + 0.64155vh) 0;
  }
  83% {
    translate: calc(-50% - 0.9165vh) 0;
  }
  100% {
    translate: calc(-50% - 0.1833vh) 0;
  }
}
@keyframes torch-sway-5 {
  0% {
    translate: calc(-50% - 0.235vh) 0;
  }
  14% {
    translate: calc(-50% + 1.175vh) 0;
  }
  26% {
    translate: calc(-50% + 0.41125vh) 0;
  }
  41% {
    translate: calc(-50% - 0.99875vh) 0;
  }
  52% {
    translate: calc(-50% - 0.47vh) 0;
  }
  64% {
    translate: calc(-50% + 0.8225vh) 0;
  }
  83% {
    translate: calc(-50% - 1.175vh) 0;
  }
  100% {
    translate: calc(-50% - 0.235vh) 0;
  }
}
@keyframes torch-sway-6 {
  0% {
    translate: calc(-50% - 0.2867vh) 0;
  }
  14% {
    translate: calc(-50% + 1.4335vh) 0;
  }
  26% {
    translate: calc(-50% + 0.501725vh) 0;
  }
  41% {
    translate: calc(-50% - 1.218475vh) 0;
  }
  52% {
    translate: calc(-50% - 0.5734vh) 0;
  }
  64% {
    translate: calc(-50% + 1.00345vh) 0;
  }
  83% {
    translate: calc(-50% - 1.4335vh) 0;
  }
  100% {
    translate: calc(-50% - 0.2867vh) 0;
  }
}
@keyframes torch-sway-7 {
  0% {
    translate: calc(-50% - 0.3384vh) 0;
  }
  14% {
    translate: calc(-50% + 1.692vh) 0;
  }
  26% {
    translate: calc(-50% + 0.5922vh) 0;
  }
  41% {
    translate: calc(-50% - 1.4382vh) 0;
  }
  52% {
    translate: calc(-50% - 0.6768vh) 0;
  }
  64% {
    translate: calc(-50% + 1.1844vh) 0;
  }
  83% {
    translate: calc(-50% - 1.692vh) 0;
  }
  100% {
    translate: calc(-50% - 0.3384vh) 0;
  }
}
@keyframes torch-sway-8 {
  0% {
    translate: calc(-50% - 0.3901vh) 0;
  }
  14% {
    translate: calc(-50% + 1.9505vh) 0;
  }
  26% {
    translate: calc(-50% + 0.682675vh) 0;
  }
  41% {
    translate: calc(-50% - 1.657925vh) 0;
  }
  52% {
    translate: calc(-50% - 0.7802vh) 0;
  }
  64% {
    translate: calc(-50% + 1.36535vh) 0;
  }
  83% {
    translate: calc(-50% - 1.9505vh) 0;
  }
  100% {
    translate: calc(-50% - 0.3901vh) 0;
  }
}
@keyframes torch-sway-9 {
  0% {
    translate: calc(-50% - 0.4418vh) 0;
  }
  14% {
    translate: calc(-50% + 2.209vh) 0;
  }
  26% {
    translate: calc(-50% + 0.77315vh) 0;
  }
  41% {
    translate: calc(-50% - 1.87765vh) 0;
  }
  52% {
    translate: calc(-50% - 0.8836vh) 0;
  }
  64% {
    translate: calc(-50% + 1.5463vh) 0;
  }
  83% {
    translate: calc(-50% - 2.209vh) 0;
  }
  100% {
    translate: calc(-50% - 0.4418vh) 0;
  }
}
@keyframes torch-sway-10 {
  0% {
    translate: calc(-50% - 0.4935vh) 0;
  }
  14% {
    translate: calc(-50% + 2.4675vh) 0;
  }
  26% {
    translate: calc(-50% + 0.863625vh) 0;
  }
  41% {
    translate: calc(-50% - 2.097375vh) 0;
  }
  52% {
    translate: calc(-50% - 0.987vh) 0;
  }
  64% {
    translate: calc(-50% + 1.72725vh) 0;
  }
  83% {
    translate: calc(-50% - 2.4675vh) 0;
  }
  100% {
    translate: calc(-50% - 0.4935vh) 0;
  }
}
@keyframes torch-flutter {
  from {
    transform: translateY(0) scale(1, 1);
  }
  to {
    transform: translateY(-0.3525vh) scale(0.88, 1.14);
  }
}
@keyframes torch-tip {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-0.5875vh) scale(0.6);
  }
}
@keyframes torch-rise-1 {
  0% {
    transform: translate(0, 0) scale(1.1);
  }
  35% {
    transform: translate(-1.5275vh, -3.055vh) scale(0.72);
  }
  70% {
    transform: translate(0.9165vh, -6.345vh) scale(0.42);
  }
  100% {
    transform: translate(-0.45825vh, -9.635vh) scale(0.1);
  }
}
@keyframes torch-rise-2 {
  0% {
    transform: translate(0, 0) scale(1.1);
  }
  35% {
    transform: translate(2.2325vh, -3.055vh) scale(0.72);
  }
  70% {
    transform: translate(-1.3395vh, -6.345vh) scale(0.42);
  }
  100% {
    transform: translate(0.66975vh, -9.635vh) scale(0.1);
  }
}
@keyframes torch-rise-3 {
  0% {
    transform: translate(0, 0) scale(1.1);
  }
  35% {
    transform: translate(-0.8225vh, -3.055vh) scale(0.72);
  }
  70% {
    transform: translate(0.4935vh, -6.345vh) scale(0.42);
  }
  100% {
    transform: translate(-0.24675vh, -9.635vh) scale(0.1);
  }
}
@keyframes torch-rise-4 {
  0% {
    transform: translate(0, 0) scale(1.1);
  }
  35% {
    transform: translate(-2.4675vh, -3.055vh) scale(0.72);
  }
  70% {
    transform: translate(1.4805vh, -6.345vh) scale(0.42);
  }
  100% {
    transform: translate(-0.74025vh, -9.635vh) scale(0.1);
  }
}
@keyframes torch-rise-5 {
  0% {
    transform: translate(0, 0) scale(1.1);
  }
  35% {
    transform: translate(1.2925vh, -3.055vh) scale(0.72);
  }
  70% {
    transform: translate(-0.7755vh, -6.345vh) scale(0.42);
  }
  100% {
    transform: translate(0.38775vh, -9.635vh) scale(0.1);
  }
}
@keyframes torch-rise-6 {
  0% {
    transform: translate(0, 0) scale(1.1);
  }
  35% {
    transform: translate(1.88vh, -3.055vh) scale(0.72);
  }
  70% {
    transform: translate(-1.128vh, -6.345vh) scale(0.42);
  }
  100% {
    transform: translate(0.564vh, -9.635vh) scale(0.1);
  }
}
@keyframes torch-ember-1 {
  0% {
    translate: -50% 0;
    scale: 1;
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  40% {
    translate: calc(-50% + 1.88vh) -4.7vh;
  }
  100% {
    translate: calc(-50% + 0.752vh) -11.75vh;
    scale: 0.3;
    opacity: 0;
  }
}
@keyframes torch-ember-2 {
  0% {
    translate: -50% 0;
    scale: 1;
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  40% {
    translate: calc(-50% + -2.585vh) -4.7vh;
  }
  100% {
    translate: calc(-50% + -1.034vh) -11.75vh;
    scale: 0.3;
    opacity: 0;
  }
}
@keyframes torch-ember-3 {
  0% {
    translate: -50% 0;
    scale: 1;
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  40% {
    translate: calc(-50% + 0.705vh) -4.7vh;
  }
  100% {
    translate: calc(-50% + 0.282vh) -11.75vh;
    scale: 0.3;
    opacity: 0;
  }
}
@keyframes torch-glow-flicker {
  0% {
    opacity: 1;
  }
  9% {
    opacity: 0.7;
  }
  14% {
    opacity: 1;
  }
  31% {
    opacity: 0.85;
  }
  38% {
    opacity: 0.6;
  }
  43% {
    opacity: 0.95;
  }
  57% {
    opacity: 1;
  }
  66% {
    opacity: 0.65;
  }
  78% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}
@keyframes torch-stem-wobble {
  0%, 100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1.4);
  }
  75% {
    transform: scale(1, 1);
  }
}
.lantern {
  pointer-events: none;
  z-index: 1500;
}
.lantern .lantern-post {
  position: absolute;
  z-index: 0;
}
.lantern .lantern-glow {
  position: absolute;
  z-index: 10;
}
.lantern .lantern-glow:before {
  content: "";
  position: absolute;
  width: calc(var(--base) * 2.5);
  height: calc(var(--base) * 2.5);
  border-radius: 50%;
  background: radial-gradient(circle at center, rgb(234, 233, 232) 0%, rgba(234, 233, 232, 0.9) 40%, rgba(234, 233, 232, 0.3) 70%, transparent 100%);
  pointer-events: none;
}
.lantern .lantern-glow:after {
  content: "";
  position: absolute;
  width: calc(var(--base) * 16);
  height: calc(var(--base) * 16);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(234, 233, 232, 0.15) 0%, rgba(234, 233, 232, 0.05) 30%, rgba(234, 233, 232, 0.02) 50%, transparent 70%);
  pointer-events: none;
  animation: lantern-pulse 4s ease-in-out infinite;
}
.lantern.variant-a .lantern-post {
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(var(--base) * 0.5);
  margin-left: calc(var(--base) * -0.25);
  background: linear-gradient(180deg, rgb(56, 56, 59) 0%, rgb(46, 46, 49) 100%);
}
.lantern.variant-a .lantern-glow {
  top: 0;
  left: 50%;
}
.lantern.variant-a .lantern-glow:before {
  margin-left: calc(var(--base) * -1.25);
  margin-top: calc(var(--base) * -1.25);
}
.lantern.variant-a .lantern-glow:after {
  margin-left: calc(var(--base) * -8);
  margin-top: calc(var(--base) * -8);
}
.lantern.variant-b .lantern-post {
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(var(--base) * 4);
  margin-left: calc(var(--base) * -2);
}
.lantern.variant-b .lantern-post:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--base) * 0.5);
  margin-left: calc(var(--base) * -0.25);
  height: calc(var(--base) * 3);
  border-radius: calc(var(--base) * 2) calc(var(--base) * 2) 0 0;
  background: rgb(46, 46, 49);
}
.lantern.variant-b .lantern-post:after {
  content: "";
  position: absolute;
  top: calc(var(--base) * 3);
  left: 50%;
  width: calc(var(--base) * 3);
  height: calc(var(--base) * 6);
  margin-left: calc(var(--base) * -0.25);
  border: calc(var(--base) * 0.5) solid rgb(46, 46, 49);
  border-bottom: none;
  border-left: none;
  border-radius: 0 calc(var(--base) * 3) calc(var(--base) * 3) 0;
  background: transparent;
}
.lantern.variant-b .lantern-glow {
  top: calc(var(--base) * 6);
  left: calc(50% + var(--base) * 2.5);
}
.lantern.variant-b .lantern-glow:before {
  margin-left: calc(var(--base) * -1.25);
  margin-top: calc(var(--base) * -1.25);
}
.lantern.variant-b .lantern-glow:after {
  margin-left: calc(var(--base) * -8);
  margin-top: calc(var(--base) * -8);
}
.lantern.variant-c .lantern-post {
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(var(--base) * 4);
  margin-left: calc(var(--base) * -2);
}
.lantern.variant-c .lantern-post:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--base) * 0.5);
  margin-left: calc(var(--base) * -0.25);
  height: calc(var(--base) * 3);
  border-radius: calc(var(--base) * 2) calc(var(--base) * 2) 0 0;
  background: rgb(46, 46, 49);
}
.lantern.variant-c .lantern-post:after {
  content: "";
  position: absolute;
  top: calc(var(--base) * 3);
  right: 50%;
  width: calc(var(--base) * 3);
  height: calc(var(--base) * 6);
  margin-right: calc(var(--base) * -0.25);
  border: calc(var(--base) * 0.5) solid rgb(46, 46, 49);
  border-bottom: none;
  border-right: none;
  border-radius: calc(var(--base) * 3) 0 0 calc(var(--base) * 3);
  background: transparent;
}
.lantern.variant-c .lantern-glow {
  top: calc(var(--base) * 6);
  left: calc(50% - var(--base) * 2.5);
}
.lantern.variant-c .lantern-glow:before {
  margin-left: calc(var(--base) * -1.25);
  margin-top: calc(var(--base) * -1.25);
}
.lantern.variant-c .lantern-glow:after {
  margin-left: calc(var(--base) * -8);
  margin-top: calc(var(--base) * -8);
}

@keyframes lantern-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}
.grass-blade {
  --blade-thickness: 0.8;
  display: block;
  position: absolute;
  bottom: 0;
  width: calc(var(--base) * var(--blade-thickness));
  margin-left: calc(var(--base) * var(--blade-thickness) * -0.5);
  transform-origin: bottom center;
  overflow: visible;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.grass-blade.slashed {
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.grass-blade path {
  --shade: 30;
  --shade-blue: calc(var(--shade) + 3);
  stroke: rgb(var(--shade), var(--shade), var(--shade-blue));
  stroke-width: calc(var(--base) * var(--blade-thickness));
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.grass-blade {
  z-index: 100000000;
}
.grass-blade.grass-foreground {
  z-index: 300000;
}

@keyframes grassWind {
  0%, 100% {
    transform: rotate(-2.5deg);
  }
  50% {
    transform: rotate(2.5deg);
  }
}
.vine-strand {
  display: none;
}

.vine-strand-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.vine-strand-svg path {
  --shade: 35;
  stroke: rgb(var(--shade), var(--shade), calc(var(--shade) + 3));
  stroke-width: calc(var(--base) * 0.8);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.vine-dot, .vine-stick {
  display: none;
}

.slope {
  height: 0;
  opacity: 0.0125;
  background-size: 100% 100%;
  background-position: center;
}
.slope.incline {
  background-image: url("/_img/_svg/slide-inclined.svg");
}
.slope.decline {
  background-image: url("/_img/_svg/slide-declined.svg");
}

@keyframes ziggy {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.6);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes saw {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.saw .saw-blade {
  animation-name: saw;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}
.saw .saw-blade:nth-child(2n) {
  animation-delay: 0.25s;
}
.saw .saw-blade {
  position: absolute;
  z-index: 30;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.saw .saw-blade:before, .saw .saw-blade:after {
  position: absolute;
  z-index: 30;
  height: 70%;
  width: 70%;
  content: "";
  border: calc(var(--base) * 0.5) solid var(--color-light);
  transform: rotate(45deg);
}
.saw .saw-blade:after {
  display: none;
  transform: rotate(90deg);
}

.zigzag {
  z-index: 0;
}
.zigzag path {
  stroke: var(--color-light);
  stroke-width: 0.35vh;
  fill: var(--color-light);
}
.zigzag:nth-child(5n-4) {
  animation-delay: 0s;
}
.zigzag:nth-child(5n-3) {
  animation-delay: -0.1s;
}
.zigzag:nth-child(5n-2) {
  animation-delay: -0.2s;
}
.zigzag:nth-child(5n-1) {
  animation-delay: -0.3s;
}
.zigzag:nth-child(5n) {
  animation-delay: -0.4s;
}

.liquid {
  z-index: 2000;
  opacity: 0.4;
}
.liquid svg {
  margin: 0 calc(var(--base) * -0.25);
  height: 100%;
  width: 100%;
}
.liquid svg path {
  fill: rgb(36, 36, 39);
}

@keyframes glow-vertical {
  0% {
    transform: scaleY(1) skewX(0deg);
  }
  25% {
    transform: scaleY(1.3) skewX(4deg);
  }
  50% {
    transform: scaleY(0.97) skewX(-3deg);
  }
  75% {
    transform: scaleY(1.7) skewX(2deg);
  }
  100% {
    transform: scaleY(1) skewX(0deg);
  }
}
@keyframes glow-horizontal {
  0% {
    transform: scaleX(1) skewY(0deg);
  }
  25% {
    transform: scaleX(1.3) skewY(4deg);
  }
  50% {
    transform: scaleX(0.97) skewY(-3deg);
  }
  75% {
    transform: scaleX(1.7) skewY(2deg);
  }
  100% {
    transform: scaleX(1) skewY(0deg);
  }
}
.glow {
  z-index: 1320000;
  z-index: 200;
}
.glow:before {
  display: block;
  position: absolute;
  margin: calc(var(--base) * -0.24) calc(var(--base) * -0.3);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: calc(var(--base) * 0.35);
  background: linear-gradient(to top, rgba(234, 233, 232, 0.7) 0%, rgba(234, 233, 232, 0.04) 6%, rgba(234, 233, 232, 0.045) 28%, rgba(234, 233, 232, 0.02) 48%, rgba(234, 233, 232, 0.006) 72%, rgba(234, 233, 232, 0) 100%);
  transform-origin: center bottom;
  animation: glow-vertical 1s ease-in-out infinite;
}
.glow.facing-left:before {
  background: linear-gradient(to left, rgb(234, 233, 232) 0%, rgba(234, 233, 232, 0.08) 12%, rgba(234, 233, 232, 0.045) 28%, rgba(234, 233, 232, 0.02) 48%, rgba(234, 233, 232, 0.006) 72%, rgba(234, 233, 232, 0) 100%);
  transform-origin: right center;
  animation-name: glow-horizontal;
}
.glow.facing-right:before {
  background: linear-gradient(to right, rgb(234, 233, 232) 0%, rgba(234, 233, 232, 0.08) 12%, rgba(234, 233, 232, 0.045) 28%, rgba(234, 233, 232, 0.02) 48%, rgba(234, 233, 232, 0.006) 72%, rgba(234, 233, 232, 0) 100%);
  transform-origin: left center;
  animation-name: glow-horizontal;
}
.glow.facing-bottom:before {
  background: linear-gradient(to bottom, rgb(234, 233, 232) 0%, rgba(234, 233, 232, 0.2) 2%, rgba(234, 233, 232, 0.08) 6%, rgba(234, 233, 232, 0.045) 28%, rgba(234, 233, 232, 0.02) 48%, rgba(234, 233, 232, 0.006) 72%, rgba(234, 233, 232, 0) 100%);
  transform-origin: center top;
  animation-name: glow-vertical;
}
.glow.facing-top:before {
  background: linear-gradient(to top, rgb(234, 233, 232) 0%, rgba(234, 233, 232, 0.08) 12%, rgba(234, 233, 232, 0.045) 28%, rgba(234, 233, 232, 0.02) 48%, rgba(234, 233, 232, 0.006) 72%, rgba(234, 233, 232, 0) 100%);
  transform-origin: center bottom;
  animation-name: glow-vertical;
}
.glow:nth-child(5n-4):before {
  animation-duration: 0.64s;
  animation-delay: 0s;
}
.glow:nth-child(5n-3):before {
  animation-duration: 0.32s;
  animation-delay: -1.3s;
}
.glow:nth-child(5n-2):before {
  animation-duration: 0.41s;
  animation-delay: -2.1s;
}
.glow:nth-child(5n-1):before {
  animation-duration: 0.51s;
  animation-delay: -0.7s;
}
.glow:nth-child(5n):before {
  animation-duration: 0.33s;
  animation-delay: -3.2s;
}
.glow .flame {
  bottom: 0;
  left: calc(var(--base) * 2.25);
  position: absolute;
  width: 90%;
  width: calc(100% - var(--base) * 4.5);
  height: calc(100% + var(--base) * 1);
  background: linear-gradient(to top, rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 0));
}

.pillar {
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  gap: 1vh;
}
.pillar:before {
  z-index: 0;
  position: absolute;
  inset: calc(var(--base) * 1);
  content: "";
  display: block;
  background: linear-gradient(90deg, rgba(23, 23, 25, 0) 0%, rgba(23, 23, 25, 0.8) 20%, rgba(23, 23, 25, 0.8) 80%, rgba(23, 23, 25, 0) 100%);
}
.pillar span:last-child {
  opacity: 0.5;
}
.pillar span:first-child {
  opacity: 0.5;
}
.pillar span:nth-child(3) {
  opacity: 1;
}
.pillar span {
  z-index: 2;
  opacity: 0.8;
  width: 0.6vh;
  height: calc(100% - var(--base) * 1);
  background: rgb(34, 33, 34);
  background: linear-gradient(180deg, rgb(24, 23, 26) 0%, rgb(34, 33, 36) 3%, rgb(24, 23, 26) 100%);
}
.pillar.facing-up span {
  background: linear-gradient(0deg, rgb(24, 23, 26) 0%, rgb(34, 33, 36) 3%, rgb(24, 23, 26) 100%);
}
.pillar.facing-left {
  flex-direction: column;
}
.pillar.facing-left:before {
  background: linear-gradient(0deg, rgba(23, 23, 25, 0) 0%, rgba(23, 23, 25, 0.8) 20%, rgba(23, 23, 25, 0.8) 80%, rgba(23, 23, 25, 0) 100%);
}
.pillar.facing-left span {
  width: calc(100% - var(--base) * 1);
  height: 0.6vh;
  background: linear-gradient(270deg, rgb(24, 23, 26) 0%, rgb(34, 33, 36) 3%, rgb(24, 23, 26) 100%);
}
.pillar.facing-right {
  flex-direction: column;
}
.pillar.facing-right:before {
  background: linear-gradient(0deg, rgba(23, 23, 25, 0) 0%, rgba(23, 23, 25, 0.8) 20%, rgba(23, 23, 25, 0.8) 80%, rgba(23, 23, 25, 0) 100%);
}
.pillar.facing-right span {
  width: calc(100% - var(--base) * 1);
  height: 0.6vh;
  background: linear-gradient(90deg, rgb(24, 23, 26) 0%, rgb(34, 33, 36) 3%, rgb(24, 23, 26) 100%);
}

.cube {
  background-color: rgba(35, 35, 35, 0.5);
}

@keyframes portal {
  0% {
    transform: scale(1, 1) rotate(0deg);
  }
  25% {
    transform: scale(0.9, 0.9) rotate(-90deg);
  }
  50% {
    transform: scale(1, 1) rotate(-180deg);
  }
  76% {
    transform: scale(0.9, 0.9) rotate(-270deg);
  }
  100% {
    transform: scale(1, 1) rotate(-360deg);
  }
}
@keyframes portalVibe {
  0% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.05);
  }
}
.gate {
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--base) * 0);
  letter-spacing: 0;
  overflow: hidden;
  --portcullis-thickness: calc(var(--base) * 1.5);
}
.gate span {
  transition: opacity 0.25s linear 0s;
}
.gate .portcullis {
  position: absolute;
  pointer-events: none;
  transition: transform 0.4s ease-in-out;
  z-index: 100;
}
.gate .portcullis .spike {
  border-radius: calc(var(--base) * 0.75);
  border: calc(var(--base) * 0.5) solid var(--color-mid);
  box-shadow: 0 2px 2px calc(var(--base) * 0.3) rgba(23, 23, 25, 0.5), inset 0 0px 0px calc(var(--base) * 0.3) var(--color-dark);
  background-color: rgba(23, 23, 25, 0.75);
}
.gate.facing-right .portcullis {
  top: calc(var(--base) * 0.5);
  left: 0;
  width: var(--portcullis-thickness);
  height: 110%;
  transform: translateX(0%) translateY(-100%);
}
.gate.facing-right .portcullis .spike {
  width: 100%;
  height: 100%;
}
.gate.facing-right.locked .portcullis {
  transform: translateX(0%) translateY(0);
}
.gate.facing-left .portcullis {
  bottom: calc(var(--base) * 0.5);
  right: 0;
  width: var(--portcullis-thickness);
  height: 110%;
  transform: translateX(0%) translateY(100%);
}
.gate.facing-left .portcullis .spike {
  width: 100%;
  height: 100%;
}
.gate.facing-left.locked .portcullis {
  transform: translateX(0%) translateY(0);
}
.gate.facing-up .portcullis {
  left: calc(var(--base) * 0.5);
  bottom: 0;
  width: 110%;
  height: var(--portcullis-thickness);
  transform: translateY(0%) translateX(-100%);
}
.gate.facing-up .portcullis .spike {
  width: 100%;
  height: 100%;
}
.gate.facing-up.locked .portcullis {
  transform: translateY(0%) translateX(0);
}
.gate.facing-down .portcullis {
  left: calc(var(--base) * 0.5);
  top: 0;
  width: 110%;
  height: var(--portcullis-thickness);
  transform: translateY(0%) translateX(-100%);
}
.gate.facing-down .portcullis .spike {
  width: 100%;
  height: 100%;
}
.gate.facing-down.locked .portcullis {
  transform: translateY(0%) translateX(0);
}
.gate.saloon {
  overflow: visible;
  --door-swing-left: 0deg;
  --door-swing-right: 0deg;
  --door-thickness: calc(var(--base) * 3);
}
.gate.saloon .saloon-doors {
  position: absolute;
  width: 100%;
  height: 100%;
}
.gate.saloon .door-panel {
  position: absolute;
  background-color: var(--color-dark);
  border: calc(var(--base) * 0.4) solid var(--color-mid);
  border-radius: calc(var(--base) * 0.5);
  box-shadow: 0 2px 4px rgba(23, 23, 25, 0.5), inset 0 0 0 calc(var(--base) * 0.2) rgba(255, 255, 255, 0.05);
  transition: transform 0.15s ease-out;
  transform-style: flat;
}
.gate.saloon.locked .door-panel {
  box-shadow: 0 2px 4px rgba(23, 23, 25, 0.5), inset 0 0 0 calc(var(--base) * 0.3) var(--color-mid);
}
.gate.saloon.facing-up .door-panel {
  bottom: 0;
  width: 50%;
  height: var(--door-thickness);
}
.gate.saloon.facing-up .door-panel.left {
  left: 0;
  transform-origin: left center;
  transform: rotate(var(--door-swing-left));
}
.gate.saloon.facing-up .door-panel.right {
  right: 0;
  transform-origin: right center;
  transform: rotate(calc(var(--door-swing-right) * -1));
}
.gate.saloon.facing-down .door-panel {
  top: 0;
  width: 50%;
  height: var(--door-thickness);
}
.gate.saloon.facing-down .door-panel.left {
  left: 0;
  transform-origin: left center;
  transform: rotate(calc(var(--door-swing-left) * -1));
}
.gate.saloon.facing-down .door-panel.right {
  right: 0;
  transform-origin: right center;
  transform: rotate(var(--door-swing-right));
}
.gate.saloon.facing-right .door-panel {
  left: 0;
  width: var(--door-thickness);
  height: 50%;
}
.gate.saloon.facing-right .door-panel.left {
  top: 0;
  transform-origin: center top;
  transform: rotate(calc(var(--door-swing-left) * -1));
}
.gate.saloon.facing-right .door-panel.right {
  bottom: 0;
  transform-origin: center bottom;
  transform: rotate(var(--door-swing-right));
}
.gate.saloon.facing-left .door-panel {
  right: 0;
  width: var(--door-thickness);
  height: 50%;
}
.gate.saloon.facing-left .door-panel.left {
  top: 0;
  transform-origin: center top;
  transform: rotate(var(--door-swing-left));
}
.gate.saloon.facing-left .door-panel.right {
  bottom: 0;
  transform-origin: center bottom;
  transform: rotate(calc(var(--door-swing-right) * -1));
}

.portal {
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal:before {
  z-index: 30;
  height: calc(var(--base) * 8);
  width: calc(var(--base) * 8);
  content: "";
  border-color: var(--color-light);
  background: var(--color-dark);
  border-radius: 50%;
}
.portal:after {
  position: absolute;
  z-index: 100;
  height: calc(var(--base) * 8);
  width: calc(var(--base) * 8);
  content: "";
  box-shadow: 0 0 10px #222, inset 0 0 10px #222;
  border-radius: 50%;
  animation-name: portalVibe;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 0.25s;
}
.portal .portal-ring {
  position: absolute;
  height: 400%;
  aspect-ratio: 1;
  background-image: url("/_img/chesspieces/spiral.png");
  background-image: url("/lonely-boing/_img/spiral-b.svg");
  background-size: 100%;
  background-position: center center;
  animation-name: portal;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 5s;
}
.portal .point {
  transform-origin: center;
  animation-name: portalB;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.portal .point:nth-child(1) {
  animation-delay: 0s;
}
.portal .point:nth-child(2) {
  animation-delay: -0.1s;
}
.portal .point:nth-child(3) {
  animation-delay: -0.2s;
}
.portal .point:nth-child(4) {
  animation-delay: -0.3s;
}
.portal .point:nth-child(5) {
  animation-delay: -0.4s;
}
.portal .point:nth-child(6) {
  animation-delay: -0.5s;
}
.portal .point:nth-child(7) {
  animation-delay: -0.6s;
}
.portal .point:nth-child(8) {
  animation-delay: -0.7s;
}
.portal .point {
  position: absolute;
  border: calc(var(--base) * 0.5) solid #454345;
  border-radius: 50%;
  margin: calc(var(--base) * -0.5);
  display: none;
}
.portal .point.left {
  top: 50%;
  left: -20%;
}
.portal .point.top-left {
  top: 0%;
  left: 0;
}
.portal .point.top {
  top: -20%;
  left: 50%;
}
.portal .point.top-right {
  top: 0%;
  right: 0;
}
.portal .point.right {
  top: 50%;
  right: -20%;
}
.portal .point.bottom-left {
  bottom: 0%;
  left: 0;
}
.portal .point.bottom {
  bottom: -20%;
  left: 50%;
}
.portal .point.bottom-right {
  bottom: 0%;
  right: 0;
}

.nearby:after {
  z-index: 10000 !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  box-shadow: 0 0px 0px 1px green;
  display: block !important;
}

@keyframes boxShake {
  0% {
    transform: rotate(-0.25deg) translate(0, 3px);
  }
  10% {
    transform: rotate(0.25deg) translate(0, -2px);
  }
  20% {
    transform: rotate(-1.2deg) translate(0, 2.5px);
  }
  30% {
    transform: rotate(0.2deg) translate(0, -2px);
  }
  40% {
    transform: rotate(-0.15deg) translate(0, 1.5px);
  }
  50% {
    transform: rotate(1.15deg) translate(0, -1px);
  }
  60% {
    transform: rotate(-1.1deg) translate(0, 0.5px);
  }
  70% {
    transform: rotate(0.1deg) translate(0, -0.25px);
  }
  80% {
    transform: rotate(-0.05deg) translate(0, 0.125px);
  }
  90% {
    transform: rotate(0.05deg) translate(0, -0.125px);
  }
  100% {
    transform: rotate(0deg) translate(0, 0);
  }
}
.path:before {
  border: calc(var(--base) * 0.5) solid var(--color-midlow) !important;
}

.path,
.pad,
.cube,
.box,
.vanish,
.lock,
.circle {
  z-index: 15000;
  transform-origin: center center;
}
.path.hit:before,
.pad.hit:before,
.cube.hit:before,
.box.hit:before,
.vanish.hit:before,
.lock.hit:before,
.circle.hit:before {
  margin: calc(var(--base) * -0.3) calc(var(--base) * -0.3);
  border: calc(var(--base) * 0.6) solid white;
  border-color: white;
  transition: border 0s ease-out 0s;
}
.path:before,
.pad:before,
.cube:before,
.box:before,
.vanish:before,
.lock:before,
.circle:before {
  z-index: 20;
  position: absolute;
  margin: calc(var(--base) * -0.24) calc(var(--base) * -0.24);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: calc(var(--base) * 0.75);
  border: calc(var(--base) * 0.5) solid var(--color-mid);
  display: block;
  transition: border 0.25s ease-out 0s;
  box-shadow: 0 2px 2px calc(var(--base) * 0.3) rgba(23, 23, 25, 0.5), inset 0 0px 0px calc(var(--base) * 0.3) var(--color-dark);
  background-color: rgba(23, 23, 25, 0.775);
}
.path:after,
.pad:after,
.cube:after,
.box:after,
.vanish:after,
.lock:after,
.circle:after {
  z-index: 10;
  position: absolute;
  height: calc(var(--base) * 2);
  top: 0;
  left: 0;
  right: 0;
  content: "";
  display: block;
  display: none;
  background: linear-gradient(0deg, rgba(134, 133, 132, 0) 0%, rgba(134, 133, 132, 0.5) 100%);
}
.path.scene-bounds:before,
.pad.scene-bounds:before,
.cube.scene-bounds:before,
.box.scene-bounds:before,
.vanish.scene-bounds:before,
.lock.scene-bounds:before,
.circle.scene-bounds:before {
  border-color: rgb(43, 43, 46) !important;
}

.rim-lights {
  position: absolute;
  inset: calc(var(--base) * -0.24);
  z-index: 10000;
  pointer-events: none;
  opacity: var(--rim-opacity, 0.55);
}

.rim-lights > .rim-light {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--base) * 0.75);
  border: calc(var(--base) * 0.5) solid var(--color-light);
  --rim-hold: 48%;
  --rim-fade: 70%;
  -webkit-mask-image: radial-gradient(ellipse var(--rim-rx, var(--rim-radius, 8em)) var(--rim-ry, var(--rim-radius, 8em)) at var(--rim-x, 50%) var(--rim-y, 50%), rgba(0, 0, 0, var(--rim-strength, 1)) 0%, rgba(0, 0, 0, var(--rim-strength, 1)) var(--rim-hold), rgba(0, 0, 0, calc(var(--rim-strength, 1) * 0.9)) calc(var(--rim-hold) + (var(--rim-fade) - var(--rim-hold)) * 0.36), rgba(0, 0, 0, calc(var(--rim-strength, 1) * 0.18)) calc(var(--rim-hold) + (var(--rim-fade) - var(--rim-hold)) * 0.73), rgba(0, 0, 0, 0) var(--rim-fade));
          mask-image: radial-gradient(ellipse var(--rim-rx, var(--rim-radius, 8em)) var(--rim-ry, var(--rim-radius, 8em)) at var(--rim-x, 50%) var(--rim-y, 50%), rgba(0, 0, 0, var(--rim-strength, 1)) 0%, rgba(0, 0, 0, var(--rim-strength, 1)) var(--rim-hold), rgba(0, 0, 0, calc(var(--rim-strength, 1) * 0.9)) calc(var(--rim-hold) + (var(--rim-fade) - var(--rim-hold)) * 0.36), rgba(0, 0, 0, calc(var(--rim-strength, 1) * 0.18)) calc(var(--rim-hold) + (var(--rim-fade) - var(--rim-hold)) * 0.73), rgba(0, 0, 0, 0) var(--rim-fade));
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.rim-lights > .rim-light.vibrato {
  animation: rim-vibrato 0.7s linear calc(var(--rim-phase, 0) * -0.7s) infinite;
}

@keyframes rim-vibrato {
  0% {
    opacity: 1;
  }
  9% {
    opacity: 0.45;
  }
  14% {
    opacity: 1;
  }
  31% {
    opacity: 0.7;
  }
  38% {
    opacity: 0.25;
  }
  43% {
    opacity: 0.9;
  }
  57% {
    opacity: 1;
  }
  66% {
    opacity: 0.35;
  }
  71% {
    opacity: 0.8;
  }
  86% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.deco {
  z-index: 1;
}
.deco:before {
  z-index: 5;
  position: absolute;
  margin: calc(var(--base) * -0.24) calc(var(--base) * -0.24);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: calc(var(--base) * 0.75);
  border: calc(var(--base) * 0.5) solid var(--color-midlowest);
  display: block;
  background-color: rgba(23, 23, 25, 0.75);
}

.decal {
  z-index: 7000;
  pointer-events: none;
}
.decal img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.decal svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  vector-effect: non-scaling-stroke;
}
.decal.layer-fg {
  z-index: 10000;
}

.mask {
  pointer-events: none;
  z-index: 10;
}
.mask:before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: none !important;
  background: var(--color-dark) !important;
  box-shadow: none !important;
}
.mask.arch:before {
  border-radius: 0;
}
.mask.arch.facing-top:before {
  border-top-left-radius: 100%;
}
.mask.arch.facing-right:before {
  border-top-right-radius: 100%;
}
.mask.arch.facing-bottom:before {
  border-bottom-right-radius: 100%;
}
.mask.arch.facing-left:before {
  border-bottom-left-radius: 100%;
}

.vanish {
  z-index: 7000;
}
.vanish.king-on:before {
  transform: translateY(calc(var(--base) * 0.125)) !important;
}
.vanish:before {
  transition: transform 0.1s ease-in-out 0s;
  bottom: 0;
  border-color: var(--color-light);
}
.vanish.vanished:before {
  transition: transform 0.125s ease-in-out 1.875s, opacity 0.25s ease-in-out 1.75s;
  transform: scale(0, 0);
  opacity: 0;
}
.vanish.instant-vanish:before {
  transition: none !important;
  transform: scale(0, 0) !important;
  opacity: 0 !important;
}
.vanish.vanishing:before {
  transform: scale(0.5, 0.5);
  transition: transform 0.125s ease-in-out 1.375s, opacity 0.25s ease-in-out 1.25s;
  animation-name: vanishingPulse;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.vanish.emerging:before {
  transition: transform 0.125s ease-in-out 0s, opacity 0.125s ease-in-out 0s;
  opacity: 1;
}

.pad {
  z-index: 0 !important;
}
.pad:before {
  top: 10% !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  border-color: var(--color-light);
  transition: top 0.1s ease-out 0s, transform 0.25s ease-out 0s !important;
  transform: translateY(calc(var(--base) * 0));
}
.pad.facing-right:before {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  left: calc(var(--base) * 1) !important;
}
.pad.facing-left:before {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  right: calc(var(--base) * 1) !important;
}
.pad.facing-bottom:before {
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  top: calc(var(--base) * 1) !important;
}
.pad.facing-top:before {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  bottom: calc(var(--base) * 1) !important;
}

.floor {
  z-index: 2000;
}
.floor:after {
  display: block;
  height: calc(var(--base) * 12);
  width: calc(var(--base) * 0.5);
  content: "";
  background: linear-gradient(to bottom, rgb(43, 43, 46), rgba(255, 0, 0, 0));
  z-index: 1500;
  margin: calc(var(--base) * -0.25) calc(var(--base) * -0.25);
  position: relative;
  display: none;
}
.floor:before {
  height: calc(var(--base) * 32);
  border-radius: calc(var(--base) * 0.75);
  z-index: 1000;
  position: relative;
  content: "";
  border-left: calc(var(--base) * 0.5) solid rgb(43, 43, 46);
  border-top: calc(var(--base) * 0.5) solid rgb(43, 43, 46);
  border-right: calc(var(--base) * 0.5) solid rgb(43, 43, 46);
  box-shadow: 0 0px 0px calc(var(--base) * 0.3) var(--color-dark), inset 0 0px 0px calc(var(--base) * 0.3) var(--color-dark);
  display: block;
  margin: calc(var(--base) * -0.25) calc(var(--base) * -0.25);
  transition: all 0.075s ease-out 0s;
  box-shadow: 0 2px 2px calc(var(--base) * 0.3) rgba(23, 23, 25, 0.5), inset 0 0px 0px calc(var(--base) * 0.3) var(--color-dark);
}
.floor > .rim-lights {
  inset: auto;
  top: calc(var(--base) * -0.25);
  left: calc(var(--base) * -0.25);
  right: calc(var(--base) * -0.25);
  height: calc(var(--base) * 32);
}
.floor > .rim-lights > .rim-light {
  border-bottom: 0;
}

.stair.king-on.king-on-left-edge svg {
  transform: rotate(-2.5deg) translateY(calc(var(--base) * 0.65));
}
.stair.king-on.king-on-right-edge svg {
  transform: rotate(2.5deg) translateY(calc(var(--base) * 0.65));
}

.platform .edit {
  position: absolute;
  color: var(--color-dark);
  border-radius: calc(var(--base) * 2);
  box-shadow: 0 0px 5px 5px var(--color-dark);
  background: rgba(43, 43, 46, 0.8);
  z-index: 1000;
  display: flex;
  margin: calc(var(--base) * -1.5) calc(var(--base) * -1.5);
  flex-wrap: nowrap;
}
.platform .edit#handle-row {
  flex-direction: column;
  z-index: 10000;
}
.platform .edit button {
  margin: 0;
  outline: none;
  background: rgba(139, 131, 129, 0.1);
  background: rgba(43, 43, 46, 0.8);
  font-size: calc(var(--base) * 1.5);
  padding: 0;
  border: none;
  color: var(--color-dark);
  font-weight: 700;
  width: calc(var(--base) * 3);
  height: calc(var(--base) * 3);
  line-height: calc(var(--base) * 3.25);
  border-radius: calc(var(--base) * 2);
}
.platform .edit span {
  color: rgba(139, 131, 129, 0.85);
  display: inline-block;
  font-size: calc(var(--base) * 1.5);
  line-height: calc(var(--base) * 3.2);
  width: calc(var(--base) * 3);
  height: calc(var(--base) * 3);
  text-align: center;
}
.platform .edit#handle-width {
  bottom: calc(var(--base) * -3);
  left: 50%;
  margin-left: calc(var(--base) * 1.75);
}
.platform .edit#handle-row {
  bottom: calc(var(--base) * -3);
  right: 50%;
}
.platform .edit#handle-column {
  bottom: calc(var(--base) * -3);
  right: 50%;
  margin-right: calc(var(--base) * 1.75);
}
.platform .edit#handle-move {
  bottom: calc(var(--base) * -6.5);
  right: 50%;
  margin-right: calc(var(--base) * -3);
}
.platform .edit#plus-width {
  top: 40%;
  right: 0;
}
.platform .edit#minus-width {
  top: 60%;
  right: 0;
}
.platform .edit#minus-row {
  top: 0%;
  left: 40%;
}
.platform .edit#plus-row {
  top: 0%;
  left: 60%;
}
.platform .edit#minus-column {
  bottom: 0%;
  left: 40%;
}
.platform .edit#plus-column {
  bottom: 0%;
  left: 60%;
}
.platform .edit button:hover {
  color: var(--color-light);
}

.platform,
.stair {
  z-index: 1000;
}
.platform.king-on svg,
.stair.king-on svg {
  transition-duration: 0s;
  transform: translateY(calc(var(--base) * 0.2));
}
.platform:before,
.stair:before {
  z-index: 2000;
  position: relative;
  content: "";
  border-top: calc(var(--base) * 0.5) solid var(--color-light);
  display: block;
  margin: calc(var(--base) * -0.25) calc(var(--base) * -0.25);
  transition: all 0.075s ease-out 0s;
  display: none;
}
.platform svg,
.stair svg {
  margin: 0 calc(var(--base) * -0.25);
}
.platform svg path,
.stair svg path {
  stroke: var(--color-light);
}

.stairs {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0s, left 0.125s cubic-bezier(0.2, 0.8, 0.2, 1) 0s, width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0s, height 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0s, opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
  transform-origin: bottom center; /* Set the transform origin to bottom center */
}
.stairs.shaded {
  z-index: 0;
}
.stairs.shaded:before {
  border-color: #252527;
}
.stairs.ladder {
  min-width: calc(var(--base) * 0);
  transition: all 1s ease-out 0s;
}
.stairs.ladder.king-on {
  transition: all 0s ease-out 0s;
}
.stairs.king-on.king-on-left-edge:before {
  transform: rotate(-2.5deg) translateY(calc(var(--base) * 0.65));
}
.stairs.king-on.king-on-right-edge:before {
  transform: rotate(2.5deg) translateY(calc(var(--base) * 0.65));
}
.stairs.king-on:before {
  transition-duration: 0s;
  transform: translateY(calc(var(--base) * 0.65));
}
.stairs.vibrate {
  animation-name: vibrate;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
.stairs:before {
  z-index: 2000;
  position: relative;
  content: "";
  border-top: calc(var(--base) * 0.5) solid var(--color-light);
  display: block;
  margin: calc(var(--base) * -0.25) calc(var(--base) * -0.25);
  transition: all 0.075s ease-out 0s;
}
.stairs.plate.king-on:before {
  transition: all 0s ease-out 0s;
}
.stairs.plate:before {
  transition: all 0.125s ease-out 0.125s;
}
.stairs .platform-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: calc(var(--base) * -0.25);
  border-left: calc(var(--base) * 0.5) solid #252527;
  border-bottom: calc(var(--base) * 0.5) solid #252527;
  border-right: calc(var(--base) * 0.5) solid #252527;
  border-radius: calc(var(--base) * 0.25);
  box-shadow: inset 0px 0 0px 5px var(--color-dark), 0px 0 5px 5px var(--color-dark);
}

.ladder {
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-direction: column-reverse;
  align-items: center;
}
.ladder span {
  position: relative;
  z-index: -1;
  border-radius: calc(var(--base) * 0.25);
  width: 100%;
  display: block;
  border-top: 0.6svh solid var(--color-midlow);
  opacity: 1;
  transition: transform 0.1s ease-in-out 0s;
  box-shadow: 0 0px 0px calc(var(--base) * 0.3) var(--color-dark);
}
.ladder:after, .ladder:before {
  position: absolute;
  top: 0;
  bottom: 0;
  content: "";
  border-radius: 0;
  border-left: calc(var(--base) * 0.6) solid var(--color-midlow);
  border-radius: calc(var(--base) * 0.25);
  display: block;
  margin: calc(var(--base) * -0.24) calc(var(--base) * -0.24);
  transition: all 0.05s ease-out 0s;
}
.ladder:after {
  left: 0;
}
.ladder:before {
  right: 0;
}

.arch {
  pointer-events: none;
  z-index: 1000;
}
.arch:before {
  z-index: 20;
  position: absolute;
  margin: calc(var(--base) * -0.3);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  display: block;
  background: transparent;
  border: none;
  border-top: calc(var(--base) * 0.6) solid var(--color-midlowest);
  border-left: calc(var(--base) * 0.6) solid var(--color-midlowest);
  border-top-left-radius: 100%;
}
.arch.orient-right:before {
  border-left: none;
  border-right: calc(var(--base) * 0.5) solid var(--color-midlowest);
  border-top-left-radius: 0;
  border-top-right-radius: 100%;
}
.arch.orient-bottom:before {
  border-top: none;
  border-left: none;
  border-bottom: calc(var(--base) * 0.5) solid var(--color-midlowest);
  border-right: calc(var(--base) * 0.5) solid var(--color-midlowest);
  border-top-left-radius: 0;
  border-bottom-right-radius: 100%;
}
.arch.orient-left:before {
  border-top: none;
  border-bottom: calc(var(--base) * 0.5) solid var(--color-midlowest);
  border-top-left-radius: 0;
  border-bottom-left-radius: 100%;
}

.semicircle {
  pointer-events: none;
  z-index: 500;
}
.semicircle:before {
  z-index: 20;
  position: absolute;
  margin: calc(var(--base) * -0.3);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  display: block;
  background: transparent;
  border: calc(var(--base) * 0.5) solid var(--color-midlowest);
  box-sizing: border-box;
  box-shadow: 0 0 0 calc(var(--base) * 0.3) var(--color-dark), inset 0 0 0 calc(var(--base) * 0.3) var(--color-dark);
}
.semicircle.orient-top:before {
  border-bottom: none;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.semicircle.orient-bottom:before {
  border-top: none;
  border-bottom-left-radius: 100% 200%;
  border-bottom-right-radius: 100% 200%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.semicircle.orient-right:before {
  border-left: none;
  border-top-right-radius: 200% 100%;
  border-bottom-right-radius: 200% 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.semicircle.orient-left:before {
  border-right: none;
  border-top-left-radius: 200% 100%;
  border-bottom-left-radius: 200% 100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ring {
  pointer-events: none;
  z-index: 1500;
  --ring-fill: rgba(23, 23, 25, 0.75);
  --ring-thickness: calc(var(--base) * 0.5);
  --ring-border: calc(var(--base) * 0.5);
}
.ring .ring-inner {
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
}
.ring.facing-north-west .ring-inner {
  border-top: var(--ring-thickness) solid var(--ring-fill);
  border-left: var(--ring-thickness) solid var(--ring-fill);
  border-top-left-radius: 100%;
}
.ring.facing-north-east .ring-inner {
  border-top: var(--ring-thickness) solid var(--ring-fill);
  border-right: var(--ring-thickness) solid var(--ring-fill);
  border-top-right-radius: 100%;
}
.ring.facing-south-east .ring-inner {
  border-bottom: var(--ring-thickness) solid var(--ring-fill);
  border-right: var(--ring-thickness) solid var(--ring-fill);
  border-bottom-right-radius: 100%;
}
.ring.facing-south-west .ring-inner {
  border-bottom: var(--ring-thickness) solid var(--ring-fill);
  border-left: var(--ring-thickness) solid var(--ring-fill);
  border-bottom-left-radius: 100%;
}
.ring:before {
  position: absolute;
  content: "";
  display: block;
  margin: calc(var(--ring-border) * -0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1;
}
.ring:after {
  position: absolute;
  content: "";
  display: block;
  margin: calc(var(--ring-border) * -0.5);
  background: transparent;
  z-index: 1;
}
.ring.facing-north-west:before {
  border: none;
  border-top: var(--ring-border) solid var(--color-midlowest);
  border-left: var(--ring-border) solid var(--color-midlowest);
  border-top-left-radius: 100%;
}
.ring.facing-north-west:after {
  top: var(--ring-thickness);
  left: var(--ring-thickness);
  right: 0;
  bottom: 0;
  border: none;
  border-top: var(--ring-border) solid var(--color-midlowest);
  border-left: var(--ring-border) solid var(--color-midlowest);
  border-top-left-radius: 100%;
}
.ring.facing-north-east:before {
  border: none;
  border-top: var(--ring-border) solid var(--color-midlowest);
  border-right: var(--ring-border) solid var(--color-midlowest);
  border-top-right-radius: 100%;
}
.ring.facing-north-east:after {
  top: var(--ring-thickness);
  left: 0;
  right: var(--ring-thickness);
  bottom: 0;
  border: none;
  border-top: var(--ring-border) solid var(--color-midlowest);
  border-right: var(--ring-border) solid var(--color-midlowest);
  border-top-right-radius: 100%;
}
.ring.facing-south-east:before {
  border: none;
  border-bottom: var(--ring-border) solid var(--color-midlowest);
  border-right: var(--ring-border) solid var(--color-midlowest);
  border-bottom-right-radius: 100%;
}
.ring.facing-south-east:after {
  top: 0;
  left: 0;
  right: var(--ring-thickness);
  bottom: var(--ring-thickness);
  border: none;
  border-bottom: var(--ring-border) solid var(--color-midlowest);
  border-right: var(--ring-border) solid var(--color-midlowest);
  border-bottom-right-radius: 100%;
}
.ring.facing-south-west:before {
  border: none;
  border-bottom: var(--ring-border) solid var(--color-midlowest);
  border-left: var(--ring-border) solid var(--color-midlowest);
  border-bottom-left-radius: 100%;
}
.ring.facing-south-west:after {
  top: 0;
  left: var(--ring-thickness);
  right: 0;
  bottom: var(--ring-thickness);
  border: none;
  border-bottom: var(--ring-border) solid var(--color-midlowest);
  border-left: var(--ring-border) solid var(--color-midlowest);
  border-bottom-left-radius: 100%;
}

.circle {
  pointer-events: none;
  z-index: 0;
}
.circle:before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border: calc(var(--base) * 0.5) solid var(--color-midlow);
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 0 0 0 calc(var(--base) * 0.3) var(--color-dark), inset 0 0 0 calc(var(--base) * 0.3) var(--color-dark);
}

.lever {
  pointer-events: none;
  z-index: 100000;
  position: absolute;
}
.lever .lever-base {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 12.5%;
  width: 75%;
  height: 30%;
  margin: calc(var(--base) * -0.24);
  border: calc(var(--base) * 0.5) solid var(--color-mid);
  border-radius: calc(var(--base) * 2);
  box-shadow: 0 2px 2px calc(var(--base) * 0.3) rgba(23, 23, 25, 0.5);
}
.lever .lever-handle {
  z-index: 0;
  position: absolute;
  bottom: 0%;
  left: 50%;
  width: calc(var(--base) * 0.25);
  margin-left: calc(var(--base) * -0.5);
  height: 60%;
  border: calc(var(--base) * 0.25) solid rgb(43, 43, 46);
  border-radius: calc(var(--base) * 0.5);
  background-color: rgba(23, 23, 25, 0.775);
  box-shadow: 0 2px 2px calc(var(--base) * 0.3) rgba(23, 23, 25, 0.5), inset 0 0 0 calc(var(--base) * 0.3) var(--color-dark);
  transform-origin: bottom center;
  transition: transform 0.2s ease-out;
}
.lever .lever-knob {
  position: absolute;
  bottom: 100%;
  left: calc(var(--base) * -1);
  width: calc(var(--base) * 2);
  height: calc(var(--base) * 2);
  border: calc(var(--base) * 0.5) solid rgb(43, 43, 46);
  border-radius: 50%;
  background-color: rgba(23, 23, 25, 0.775);
}
.lever.orient-right {
  transform: rotate(90deg);
}
.lever.orient-bottom {
  transform: rotate(180deg);
}
.lever.orient-left {
  transform: rotate(270deg);
}
.lever.hit .lever-base, .lever.hit .lever-handle, .lever.hit .lever-knob {
  border-color: white;
}
.lever.lever--off .lever-handle {
  transform: rotate(-20deg);
}
.lever.lever--on .lever-handle {
  transform: rotate(20deg);
}
.lever.lever--neutral .lever-handle {
  transform: rotate(0deg);
}
.lever.lever--forward .lever-handle {
  transform: rotate(20deg);
}
.lever.lever--reverse .lever-handle {
  transform: rotate(-20deg);
}

.key {
  pointer-events: none;
  position: absolute;
  z-index: 100000;
  transform-origin: 50% 50%;
  animation: key-float 2.6s ease-in-out infinite;
}
.key .key-bow {
  position: absolute;
  left: 0;
  top: 20%;
  width: 42%;
  height: 60%;
  border: calc(var(--base) * 0.5) solid var(--color-light);
  border-radius: 50%;
}
.key .key-stem {
  position: absolute;
  right: 0;
  top: 42%;
  width: 62%;
  height: calc(var(--base) * 0.5);
  background-color: var(--color-light);
}
.key .key-stem i {
  position: absolute;
  top: 100%;
  width: calc(var(--base) * 0.5);
  height: calc(var(--base) * 0.7);
  background-color: var(--color-light);
}
.key .key-stem i:nth-child(1) {
  right: calc(var(--base) * 1.15);
}
.key .key-stem i:nth-child(2) {
  right: 0;
}

@keyframes key-float {
  0%, 100% {
    transform: translateY(calc(var(--base) * -0.18)) rotate(-7deg);
  }
  50% {
    transform: translateY(calc(var(--base) * 0.18)) rotate(7deg);
  }
}
.lock {
  pointer-events: none;
  position: absolute;
}
.lock .lock-slot {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.lock b {
  width: calc(var(--base) * 1.7);
  height: calc(var(--base) * 1.7);
  border-radius: 50%;
  background-color: var(--color-mid);
  transition: background-color 0.25s ease-out;
}
.lock i {
  width: 0;
  height: 0;
  margin-top: calc(var(--base) * -0.44);
  border-left: calc(var(--base) * 0.8) solid transparent;
  border-right: calc(var(--base) * 0.8) solid transparent;
  border-bottom: calc(var(--base) * 1.9) solid var(--color-mid);
  transition: border-bottom-color 0.25s ease-out;
}
.lock.filled:before {
  border-color: var(--color-light);
}
.lock.filled b {
  background-color: var(--color-light);
}
.lock.filled i {
  border-bottom-color: var(--color-light);
}

#leapBlood {
  display: none;
  z-index: 10000;
  position: fixed;
  width: 100vw;
  height: 0%;
  left: 0vw;
  bottom: 0;
  transition: all 1s 0s var(--easing);
  background-image: linear-gradient(rgba(42, 28, 30, 0), rgba(242, 28, 30, 0.1), rgba(255, 28, 30, 0.1));
  background-image: linear-gradient(rgba(42, 28, 30, 0), 55%, rgba(242, 28, 30, 0.075), 90%, rgba(255, 28, 30, 0.3));
}

#near {
  opacity: 1;
  position: fixed;
  width: auto;
  height: auto;
  right: -20%;
  left: -20%;
  bottom: calc(var(--base) * -12);
  top: calc(var(--base) * -12);
  pointer-events: none;
}
#near .archer {
  height: 80vh;
  width: 90vw;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border: 5vh solid rgb(20, 20, 22);
  border-top: none;
  position: absolute;
  top: -50vh;
  left: -25vw;
}
#near .grade {
  height: 140vh;
  width: 3vw;
  background: rgb(20, 20, 22);
  position: absolute;
  bottom: 0;
}
#near .grade.grade-1 {
  left: 15%;
  rotate: 1deg;
}
#near .grade.grade-2 {
  left: 30%;
  rotate: 6deg;
}
#near .grade.grade-3 {
  left: 70%;
  rotate: -3deg;
}
#near .grade.grade-4 {
  left: 65%;
  rotate: 1deg;
}
#near .grade.grade-5 {
  left: 50%;
  rotate: 3deg;
}
#near .particle {
  height: calc(var(--base) * 16);
  width: calc(var(--base) * 16);
  border-radius: 50%;
  background: rgba(22, 20, 22, 0.55);
  background: rgba(17, 17, 19, 0.75);
  position: absolute;
}

#near {
  z-index: 30000;
}
.room-vectors {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  position: absolute;
  pointer-events: none;
}

#overShootLeft,
#overShootRight {
  border-top: calc(var(--base) * 0.5) solid #252527;
  border-bottom: calc(var(--base) * 0.5) solid #252527;
  top: 0;
  bottom: 0;
  position: absolute;
  width: 50vw;
  margin: calc(var(--base) * -0.125) calc(var(--base) * 1);
  opacity: 0.25;
}

#overShootLeft {
  right: 100%;
}

#overShootRight {
  left: 100%;
}

.crack-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.crack-overlay .crack-line {
  fill: none;
  stroke: var(--color-mid);
  stroke-width: calc(var(--base) * 0.5);
  stroke-linecap: round;
}

.starfield {
  position: absolute;
  background: var(--color-darker);
  z-index: 1000;
  overflow: hidden;
  border-radius: calc(var(--w) * var(--base) / 2) calc(var(--w) * var(--base) / 2) 0 0;
  clip-path: inset(calc(var(--base) * 0.35) round calc(var(--w) * var(--base) / 2) calc(var(--w) * var(--base) / 2) 0 0);
}
.starfield.lightning {
  background: var(--color-light);
}
.starfield .starfield-stars {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
}
.starfield .star {
  position: absolute;
  width: calc(var(--base) * 0.5);
  height: calc(var(--base) * 0.5);
  background: var(--color-light);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--base) * 2) var(--color-lighten);
}
.starfield .star:nth-child(3n) {
  width: calc(var(--base) * 0.5);
  height: calc(var(--base) * 0.5);
}
.starfield .star:nth-child(7n) {
  width: calc(var(--base) * 0.65);
  height: calc(var(--base) * 0.65);
  box-shadow: 0 0 calc(var(--base) * 0.75) var(--color-light);
}
.starfield .starfield-group {
  position: absolute;
  inset: 0;
}
.starfield .starfield-group.group-a {
  animation: twinkle-a 4.7s ease-in-out infinite;
}
.starfield .starfield-group.group-b {
  animation: twinkle-b 5.3s ease-in-out infinite;
}
.starfield .starfield-group.group-c {
  animation: twinkle-c 6.1s ease-in-out infinite;
}

@keyframes twinkle-a {
  0%, 100% {
    opacity: 0.35;
  }
  23% {
    opacity: 0.9;
  }
  31% {
    opacity: 1;
  }
  67% {
    opacity: 0.5;
  }
}
@keyframes twinkle-b {
  0%, 100% {
    opacity: 0.2;
  }
  15% {
    opacity: 0.7;
  }
  42% {
    opacity: 1;
  }
  58% {
    opacity: 0.85;
  }
  79% {
    opacity: 0.3;
  }
}
@keyframes twinkle-c {
  0%, 100% {
    opacity: 0.5;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
  71% {
    opacity: 0.6;
  }
}
#particlesFront {
  z-index: 100000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  pointer-events: none;
}

#particles {
  z-index: 10000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Prevents particles from intercepting mouse events */
}

.sub-particle {
  z-index: 13000;
  width: calc(var(--base) * 0.5);
  height: calc(var(--base) * 0.5);
  margin: calc(var(--base) * -0.25);
  border-radius: calc(var(--base) * 0.25);
  background-color: rgb(63, 63, 66); /* var(--color-light) */
  background-color: rgba(73, 73, 76, 0.75); /* var(--color-light) */
  position: absolute;
  left: 50%;
  top: 50%;
}
.sub-particle.mini {
  width: calc(var(--base) * 0.25);
  height: calc(var(--base) * 0.25);
  margin: calc(var(--base) * -0.125);
}

.particle-pearl {
  --pearl-fall: calc(var(--base) * 7.75);
  --pearl-trail: 15.5;
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
  width: calc(var(--w, 0) * var(--base));
  height: calc(var(--h, 0) * var(--base));
  will-change: translate;
  z-index: 13000;
  margin: calc(var(--base) * -0.25);
}
.particle-pearl.slow > div, .particle-pearl.slow > div > i {
  transition: all 30s var(--easing);
}
.particle-pearl.medium > div, .particle-pearl.medium > div > i {
  transition: all 15s var(--easing);
}
.particle-pearl.fast > div, .particle-pearl.fast > div > i {
  transition: all 5s var(--easing);
}
.particle-pearl > div {
  position: relative;
  margin-top: calc(var(--base) * -1);
  height: calc(var(--base) * 0.5);
  width: calc(var(--base) * 0.5);
  translate: 0 0;
}
.particle-pearl > div::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: rgb(123, 123, 126);
}
.particle-pearl > div > i {
  position: absolute;
  left: 0;
  bottom: 50%;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform-origin: bottom center;
  scale: 1 1;
  background: linear-gradient(to top, rgba(63, 63, 66, 0.75) 0%, rgba(63, 63, 66, 0.2) 60%, rgba(63, 63, 66, 0) 100%);
}
.particle-pearl.fade > div {
  translate: 0 var(--pearl-fall);
  opacity: 0;
}
.particle-pearl.fade > div > i {
  scale: 1 var(--pearl-trail);
}

.particle-dive {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
  width: calc(var(--w, 0) * var(--base));
  height: calc(var(--h, 0) * var(--base));
  will-change: transform;
  z-index: 13000;
  margin: calc(var(--base) * -4);
  margin-bottom: calc(var(--base) * -8);
  opacity: 1;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0s, opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
  transform: scale(0);
}
.particle-dive .sub-dive-particle {
  position: absolute;
  transition: all 2s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
  border-radius: calc(var(--base) * 4);
  background-color: var(--color-midlow); /* var(--color-light) */
  width: calc(var(--base) * 4);
  height: calc(var(--base) * 4);
  margin: calc(var(--base) * -2);
}
.particle-dive.fade {
  transform: scale(1);
}
.particle-dive.fade .sub-dive-particle {
  transform: scale(0) !important;
}

.particle-splash {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
  width: calc(var(--w, 0) * var(--base));
  height: calc(var(--h, 0) * var(--base));
  will-change: transform;
  z-index: 13000;
  margin: calc(var(--base) * -4);
  opacity: 0.75;
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0s, opacity 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
}
.particle-splash.fade {
  transform: translateY(30%) scale(1.5);
  opacity: 0;
}
.particle-splash.fade .pearling-particle {
  height: calc(var(--base) * 10);
}

@keyframes floaterGlow {
  0% {
    transform: scale(1);
    background-color: rgba(120, 180, 255, 0.6);
  }
  30% {
    transform: scale(1.2);
    background-color: rgba(150, 200, 255, 0.8);
  }
  60% {
    transform: scale(0.8);
    background-color: rgba(100, 160, 255, 0.4);
  }
  100% {
    transform: scale(1);
    background-color: rgba(120, 180, 255, 0.6);
  }
}
@keyframes snowVibrato {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.75);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.75);
  }
  70% {
    transform: scale(0.5);
  }
  90% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes snowVibratoB {
  0% {
    transform: rotate(0deg) scale(1, 1);
    background-color: rgba(100, 100, 100, 0.5);
  }
  20% {
    transform: rotate(-45deg) scale(0, 1);
    background-color: rgba(100, 100, 100, 0.1);
  }
  30% {
    transform: rotate(-90deg) scale(1, 1);
    background-color: rgba(100, 100, 100, 0.8);
  }
  50% {
    transform: rotate(-135deg) scale(0, 1);
    background-color: rgba(100, 100, 100, 0.1);
  }
  60% {
    transform: rotate(-180deg) scale(1, 1);
    background-color: rgba(100, 100, 100, 0.8);
  }
  70% {
    transform: rotate(-225deg) scale(0, 1);
    background-color: rgba(100, 100, 100, 0.1);
  }
  80% {
    transform: rotate(-270deg) scale(1, 1);
    background-color: rgba(100, 100, 100, 0.2);
  }
  90% {
    transform: rotate(-315deg) scale(0, 1);
    background-color: rgba(100, 100, 100, 0.1);
  }
  100% {
    transform: rotate(-360deg) scale(1, 1);
    background-color: rgba(100, 100, 100, 0.5);
  }
}
@keyframes snowOut {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }
  10% {
    transform: scale(5);
    opacity: 0.1;
  }
  50% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
.splatter-container {
  z-index: 1000000;
  height: calc(var(--base) * 8);
  width: calc(var(--base) * 8);
  position: absolute;
  transition: all 0.25s 0s var(--easing);
  transform: scale(0);
}
.splatter-container.full {
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--base) * 100);
}
.splatter-container.another {
  background: green;
}
.splatter-container.fade {
  transform: scale(1);
}
.splatter-container.fade .splatter:nth-child(2) {
  height: calc(var(--base) * 12);
  transition: height 5s 0s ease-out, opacity 2s 0s ease-out, filter 1s 0s ease-out, transform 6s 0.1s ease-out;
  transform: translateY(200%);
}
.splatter-container.fade .splatter:nth-child(3) {
  height: calc(var(--base) * 18);
  transition: height 3s 0s ease-out, opacity 1s 0s ease-out, filter 1s 0s ease-out, transform 4s 0s ease-out;
  transform: translateY(500%);
}
.splatter-container.fade .splatter:nth-child(5) {
  height: calc(var(--base) * 24);
  transition: height 10s 0s ease-out, opacity 1.5s 0s ease-out, filter 1s 0s ease-out, transform 3s 0.1s ease-out;
  transform: translateY(150%);
}
.splatter-container.fade .splatter {
  opacity: 0;
  transition: height 6s 0s ease-out, opacity 3s 0s ease-out, filter 1s 0s ease-out, transform 5s 0s ease-out;
  transform: translateY(50%);
}
.splatter-container .splatter {
  height: calc(var(--base) * 6);
  width: calc(var(--base) * 6);
  border-radius: calc(var(--base) * 3);
  background: rgba(205, 20, 20, 0.25);
  position: absolute;
}

.particle-trail {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
  width: calc(var(--w, 0) * var(--base));
  height: calc(var(--h, 0) * var(--base));
  will-change: transform;
  z-index: 2000;
  margin: calc(var(--base) * -0.25);
  border-radius: 50%;
  background: var(--color-light);
  transition: all 2s 0s ease-out;
}

.particle-dust {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
  width: calc(var(--w, 0) * var(--base));
  height: calc(var(--h, 0) * var(--base));
  will-change: transform, opacity;
  z-index: 2000;
  animation-name: dustFloat;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  margin: calc(var(--base) * -0.25);
  border-radius: 50%;
  background: rgba(243, 233, 232, 0.75);
  opacity: 0.25;
}
.particle-dust.swirly {
  background: transparent;
}
.particle-dust.swirly.size-1 {
  margin: calc(var(--base) * -4);
}
.particle-dust.swirly.size-2 {
  margin: calc(var(--base) * -2);
}
.particle-dust.swirly.size-3 {
  margin: calc(var(--base) * -1);
}
.particle-dust.swirly.size-4 {
  margin: calc(var(--base) * -0.5);
}
.particle-dust.swirly.ccw > div {
  animation-direction: reverse; /* Play animation backwards */
}
.particle-dust.swirly > div {
  animation: dustSwirly 7s linear; /* Adjust the duration as needed */
  position: absolute;
  height: 100%;
  width: 100%;
}
.particle-dust.swirly > div > div {
  width: calc(var(--base) * 0.75);
  height: calc(var(--base) * 0.75);
  margin: calc(var(--base) * -0.375);
  border-radius: 50%;
  background: rgba(243, 233, 232, 0.75);
}
.particle-dust.left {
  animation-name: dustFloatLeft;
  animation-timing-function: linear;
}
.particle-dust.right {
  animation-name: dustFloatRight;
  animation-timing-function: linear;
}
.particle-dust.speed-1 {
  animation-duration: 10s;
  animation-duration: 4s;
}
.particle-dust.speed-2 {
  animation-duration: 8s;
  animation-duration: 3s;
}
.particle-dust.speed-3 {
  animation-duration: 6s;
  animation-duration: 2s;
}
.particle-dust.speed-4 {
  animation-duration: 4s;
  animation-duration: 1s;
}
.particle-dust.speed-5 {
  animation-duration: 2s;
  animation-duration: 0.5s;
}

.explosion.light {
  box-shadow: 0 0 6px 4px rgba(243, 233, 232, 0.35), inset 0 0 6px 4px rgba(243, 233, 232, 0.3);
}

.effect-wrap,
.particle {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
}

.king-steam-wrap {
  position: absolute;
  animation-name: steamFade;
  animation-duration: 8s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  z-index: 1000;
  filter: blur(0.5em);
  height: 100%;
  width: 100%;
}
.king-steam-wrap div {
  border-radius: 50%;
  position: absolute;
  animation-name: steamFade;
  background: var(--color-midlow);
  animation-duration: 0.8s;
  animation-timing-function: var(--easing);
  animation-fill-mode: forwards;
}
.king-steam-wrap .king-steam-minor {
  width: calc(var(--base) * 4);
  height: calc(var(--base) * 4);
  margin: calc(var(--base) * -2);
}
.king-steam-wrap .king-steam-mini {
  width: calc(var(--base) * 2);
  height: calc(var(--base) * 2);
  margin: calc(var(--base) * -1);
}
.king-steam-wrap .king-steam-major {
  margin: calc(var(--base) * -4);
  width: calc(var(--base) * 8);
  height: calc(var(--base) * 8);
}

.king-clone {
  position: absolute;
  left: 0;
  bottom: 0;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
}
.king-clone.dur-1 {
  transition: all 0.5s 0s linear;
}
.king-clone.dur-2 {
  transition: all 0.75s 0s linear;
}
.king-clone.dur-3 {
  transition: all 1s 0s linear;
}
.king-clone.dur-4 {
  transition: all 1.25s 0s linear;
}
.king-clone.size-1 {
  width: calc(var(--base) * 8);
  height: calc(var(--base) * 8);
  margin: calc(var(--base) * -4);
}
.king-clone.size-2 {
  width: calc(var(--base) * 6);
  height: calc(var(--base) * 6);
  margin: calc(var(--base) * -3);
}
.king-clone.size-3 {
  width: calc(var(--base) * 4);
  height: calc(var(--base) * 4);
  margin: calc(var(--base) * -2);
}
.king-clone.size-4 {
  width: calc(var(--base) * 2);
  height: calc(var(--base) * 2);
  margin: calc(var(--base) * -1);
}
.king-clone {
  transition: all 2s 0s cubic-bezier(0.9, 0.8, 0.2, 1);
  border-radius: 50%;
  background: rgba(33, 33, 36, 0.7);
  width: calc(var(--base) * 8);
  height: calc(var(--base) * 8);
  margin: calc(var(--base) * -4);
  filter: blur(6px);
  transform-origin: top center;
}
.king-clone.fade {
  opacity: 0;
  transform: scale(0) translateY(-50%) translateX(-1500%) !important;
}

.p-snow, .p-snow-fg, .p-snow-gust, .p-snow-fg-gust,
.p-pour, .p-pour-fg, .p-pour-gust, .p-pour-fg-gust,
.p-pour-long, .p-pour-long-fg,
.p-shower,
.p-floaters, .p-floaters-fg, .p-floaters-gust, .p-floaters-fg-gust {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * 1px) calc(var(--y, 0) * -1px);
  rotate: calc(var(--rotation, 0) * 1deg);
  z-index: 10000;
  margin: calc(var(--base) * -0.25);
  transition: translate 0s, rotate 0s, opacity 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.p-snow, .p-snow-gust {
  background-color: rgb(73, 73, 76);
  border-radius: calc(var(--base) * 1);
  width: calc(var(--base) * 1);
  height: calc(var(--base) * 1);
}
.p-snow.fade, .p-snow-gust.fade {
  animation: snowOut 0.5s ease-out 0s 1 forwards !important;
}

.p-snow-gust {
  background-color: var(--color-light);
}

.p-snow-fg, .p-snow-fg-gust {
  animation: snowVibratoB 5s linear infinite forwards;
  background-color: rgba(100, 100, 100, 0.1);
  border-radius: calc(var(--base) * 1);
  width: calc(var(--base) * 2);
  height: calc(var(--base) * 2);
}
.p-snow-fg.speed-1, .p-snow-fg-gust.speed-1 {
  animation-duration: 9s;
}
.p-snow-fg.speed-2, .p-snow-fg-gust.speed-2 {
  animation-duration: 3s;
}
.p-snow-fg.speed-3, .p-snow-fg-gust.speed-3 {
  animation-duration: 4s;
}
.p-snow-fg.speed-4, .p-snow-fg-gust.speed-4 {
  animation-duration: 2s;
}
.p-snow-fg.speed-5, .p-snow-fg-gust.speed-5 {
  animation-duration: 5s;
}
.p-snow-fg.speed-6, .p-snow-fg-gust.speed-6 {
  animation-duration: 6s;
}
.p-snow-fg.speed-7, .p-snow-fg-gust.speed-7 {
  animation-duration: 7s;
}
.p-snow-fg.speed-8, .p-snow-fg-gust.speed-8 {
  animation-duration: 8s;
}
.p-snow-fg.fade, .p-snow-fg-gust.fade {
  animation: snowOut 0.5s ease-out 0s 1 forwards !important;
}

.p-snow-fg-gust {
  background-color: rgba(200, 200, 200, 0.3);
}

.p-pour, .p-pour-gust {
  border-radius: calc(var(--base) * 0.125);
  height: calc(var(--base) * 60);
  width: calc(var(--base) * 0.5);
  transform-origin: bottom center;
  background: linear-gradient(180deg, rgba(63, 63, 66, 0) 0%, rgba(63, 63, 66, 0.1) 80%, rgba(63, 63, 66, 0.75) 98%);
}
.p-pour.fade, .p-pour-gust.fade {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scaleY(0.01);
  opacity: 0;
}

.p-pour-gust {
  background: linear-gradient(180deg, rgba(234, 233, 232, 0) 0%, rgba(234, 233, 232, 0.75) 95%);
}

.p-pour-fg, .p-pour-fg-gust {
  border-radius: calc(var(--base) * 1);
  height: calc(var(--base) * 24);
  width: calc(var(--base) * 2);
  transform-origin: bottom center;
  background: linear-gradient(180deg, rgba(53, 53, 56, 0) 0%, rgba(53, 53, 56, 0.5) 75%);
}
.p-pour-fg.fade, .p-pour-fg-gust.fade {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scaleY(0.01);
  opacity: 0;
}

.p-pour-fg-gust {
  background: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, rgba(200, 200, 200, 0.6) 75%);
}

.p-pour-long {
  border-radius: calc(var(--base) * 0.125);
  height: calc(var(--base) * 60);
  width: calc(var(--base) * 0.5);
  transform-origin: bottom center;
  background: linear-gradient(180deg, rgba(63, 63, 66, 0) 0%, rgba(63, 63, 66, 0.25) 80%);
}
.p-pour-long.fade {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scaleY(0.01);
  opacity: 0;
}

.p-pour-long-fg {
  border-radius: calc(var(--base) * 1);
  height: calc(var(--base) * 24);
  width: calc(var(--base) * 1.5);
  transform-origin: bottom center;
  background: linear-gradient(180deg, rgba(53, 53, 56, 0) 0%, rgba(53, 53, 56, 0.5) 75%);
}
.p-pour-long-fg.fade {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scaleY(0.01);
  opacity: 0;
}

.p-shower {
  height: calc(var(--base) * 24);
  width: calc(var(--base) * 0.5);
  border-radius: calc(var(--base) * 1);
  background: linear-gradient(180deg, rgba(53, 53, 56, 0) 0%, rgba(53, 53, 56, 0.2) 75%, rgba(53, 53, 56, 0.5) 100%);
}
.p-shower.fade {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scaleY(0.01);
  opacity: 0;
}

.p-window {
  position: absolute;
  top: 0;
  left: 0;
  translate: calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px);
  rotate: calc(var(--rotation, 0) * 1deg);
  transform-origin: top center;
  height: calc(var(--base) * 8);
  width: calc(var(--base) * 0.5);
  border-radius: calc(var(--base) * 0.5);
  background: linear-gradient(180deg, rgba(150, 150, 153, 0) 0%, rgba(150, 150, 153, 0.5) 80%);
  pointer-events: none;
}

.p-floaters, .p-floaters-gust {
  background-color: var(--color-mid);
  width: calc(var(--base) * 0.75);
  height: calc(var(--base) * 0.75);
  border-radius: 50%;
}
.p-floaters.out, .p-floaters-gust.out {
  animation: snowOut 1s ease-out forwards !important;
}

.p-floaters-fg, .p-floaters-fg-gust {
  animation: none;
  width: calc(var(--base) * 8);
  height: calc(var(--base) * 8);
  border-radius: 50%;
  background: radial-gradient(at center, rgb(25, 25, 28) 10%, rgba(25, 25, 28, 0) 40%);
}

@keyframes debriSpin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: -360deg;
  }
}
.p-debris.size-1 {
  width: calc(var(--base) * 1.5);
}
.p-debris.size-2 {
  width: calc(var(--base) * 2.5);
}
.p-debris.size-3 {
  width: calc(var(--base) * 0.5);
}
.p-debris.speed-1 {
  animation-speed: 0.5s;
}
.p-debris.speed-2 {
  animation-speed: 0.5s;
}
.p-debris.speed-3 {
  animation-speed: 0.5s;
}
.p-debris {
  animation: debriSpin 1.5s linear infinite;
  height: calc(var(--base) * 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * 1px) calc(var(--y, 0) * -1px);
  background-color: var(--color-mid);
  background-color: var(--color-light);
  opacity: 0.9;
  will-change: translate;
}
.p-debris.out {
  animation: snowOut 0.8s ease-out forwards !important;
}

.p-impact {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * 1px) calc(var(--y, 0) * -1px);
  rotate: calc(var(--rotation, 0) * 1deg);
  width: calc(var(--w, 1) * 1vh);
  height: calc(var(--h, 1) * 1vh);
  will-change: translate, rotate;
  z-index: 10000;
  border-radius: 50%;
  transform-origin: center;
  background-color: var(--color-mid, rgb(67, 67, 69));
}
.p-impact.light {
  background-color: var(--color-light);
}
.p-impact.hex {
  border-radius: 0;
  -webkit-mask-image: var(--coin-shape);
          mask-image: var(--coin-shape);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.p-impact.red {
  background-color: var(--color-light);
}
.p-impact.dark {
  background-color: var(--color-mid);
}
.p-impact.gray {
  background-color: var(--color-midlow);
}
.p-impact.water {
  background-color: var(--color-mid);
  opacity: 0.5;
}
.p-impact.blade-bit {
  background-color: var(--color-midlowest);
  width: calc(var(--base) * 1) !important;
  height: calc(var(--base) * var(--blade-height, 2.4)) !important;
}
.p-impact.cloth-thread {
  background-color: var(--color-midlowest);
  width: calc(var(--base) * 0.4) !important;
  height: calc(var(--base) * 1.8) !important;
}
.p-impact.fade {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.p-impact.out {
  transform: scale(0);
  opacity: 0;
}

.particle-ember {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
  width: calc(var(--base) * 4);
  height: calc(var(--base) * 4);
  margin-left: calc(var(--base) * -0.75);
  margin-bottom: calc(var(--base) * -0.75);
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.particle-ember.wind-calm {
  animation-name: ember-rise-calm;
}
.particle-ember.wind-west {
  animation-name: ember-rise-west;
}
.particle-ember.wind-east {
  animation-name: ember-rise-east;
}
.particle-ember.ccw > div {
  animation-direction: reverse;
}
.particle-ember > div {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: ember-spin 3s linear infinite;
}
.particle-ember > div > div {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--base) * 1);
  height: calc(var(--base) * 1);
  margin-left: calc(var(--base) * -0.5);
  border-radius: 50%;
  background: var(--color-light);
}

@keyframes ember-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ember-rise-calm {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(calc(var(--base) * -10));
  }
}
@keyframes ember-rise-west {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--base) * -4), calc(var(--base) * -5));
  }
}
@keyframes ember-rise-east {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--base) * 4), calc(var(--base) * -5));
  }
}
#world .loot .file,
.world .loot .file {
  top: calc(var(--base) * -2);
}
#world .loot.collected .loot-cross,
.world .loot.collected .loot-cross {
  display: none;
}
#world .loot.uncollected,
.world .loot.uncollected {
  filter: blur(0.05em);
}
#world .loot.uncollected .loot-cross span,
.world .loot.uncollected .loot-cross span {
  transition: all 0.25s 0s ease-out;
  box-shadow: 0 0px 0px var(--color-light);
  box-shadow: 0 0px 0px 0px var(--color-light);
}
#world .loot.uncollected,
.world .loot.uncollected {
  transition: all 0.25s 0s ease-out;
}
#world .loot.uncollected .horz,
.world .loot.uncollected .horz {
  transform: scale(1, 0);
}
#world .loot.uncollected .vert,
.world .loot.uncollected .vert {
  transform: scale(0, 1);
}
#world .loot .loot-cross,
.world .loot .loot-cross {
  position: absolute;
  display: inline-block;
  height: calc(var(--base) * 8);
  width: calc(var(--base) * 8);
  filter: blur(0.025em);
}
#world .loot .loot-cross span,
.world .loot .loot-cross span {
  border-radius: 1px;
  box-shadow: 0 0px 10px var(--color-light);
  background: rgb(239, 231, 229);
  display: block;
  position: absolute;
}
#world .loot .loot-cross .vert,
.world .loot .loot-cross .vert {
  height: calc(var(--base) * 5);
  width: calc(var(--base) * 0.5);
  left: 50%;
  margin-left: calc(var(--base) * -0.25);
}
#world .loot .loot-cross .horz,
.world .loot .loot-cross .horz {
  height: calc(var(--base) * 0.5);
  width: calc(var(--base) * 3.2);
  top: 13%;
  left: 50%;
  margin-left: calc(var(--base) * -1.6);
}
#world .loot,
.world .loot {
  transform: scale(1) translateY(0%);
  opacity: 1;
  transition: transform 0.5s 0s ease-in-out, opacity 0.25s 0s ease-in-out;
}
#world .loot.float,
.world .loot.float {
  transform: scale(1) translateY(50%);
  transition: transform 3s 0s linear, opacity 0.25s 0s ease-in-out;
}
#world .loot.pop,
.world .loot.pop {
  opacity: 0;
  transform: scale(0.9) translateY(-100%);
}
#world .loot.kill-loot.float,
.world .loot.kill-loot.float {
  transform: scale(1) translateY(-50%);
  transition: transform 4s 0s linear, opacity 0.25s 0s ease-in-out;
}
#world .loot.kill-loot.pop,
.world .loot.kill-loot.pop {
  opacity: 0;
  transform: scale(0.9) translateY(50%);
  transition: transform 0.25s 0s ease-in-out, opacity 0.25s 0s ease-in-out;
}

#scene > .kingCross {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 8vh;
  height: 8vh;
  transition: transform 5s 0s ease-out;
  z-index: 1000;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/lonely-boing/_img/kingCross.svg");
}
#scene > .kingCross.forward {
  transform: rotate(0deg);
}
#scene > .kingCross.backward {
  transform: rotate(0deg);
}
#scene > .kingCross:not(.new).forward {
  transform: rotate(2000deg);
}
#scene > .kingCross:not(.new).backward {
  transform: rotate(-2000deg);
}

.coin {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc((var(--x, 0) + var(--shake-x, 0) + var(--knockback-x, 0)) * var(--base)) calc((var(--y, 0) + var(--shake-y, 0) + var(--knockback-y, 0)) * var(--base) * -1);
  scale: calc(var(--scale-x, 1)) calc(var(--scale-y, 1));
  width: calc(var(--w, 0) * var(--base));
  height: calc(var(--h, 0) * var(--base));
  z-index: 20000;
  opacity: 1;
}
.coin .coin-disc {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.coin .coin-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-light);
  -webkit-mask-image: var(--coin-shape);
          mask-image: var(--coin-shape);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.coin::after {
  content: "";
  position: absolute;
  inset: -75%;
  z-index: -2;
  background: var(--shadow-soft);
  opacity: 0.14;
  pointer-events: none;
}

.coin-glow {
  --glow-len: 330%;
  --glow-peak: 0.12;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.coin-glow .coin-rays {
  position: absolute;
  inset: 0;
  animation: coin-spin calc(var(--coin-spin-s, 15) * 1s) linear calc(var(--coin-phase, 0) * -15s) infinite;
}
.coin-glow i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: var(--glow-len);
  translate: -50% -50%;
  background: linear-gradient(to bottom, transparent 0%, rgba(234, 233, 232, var(--glow-peak)) 50%, transparent 100%);
}
.coin-glow i:nth-child(2) {
  rotate: 60deg;
}
.coin-glow i:nth-child(3) {
  rotate: 120deg;
}

@keyframes coin-spin {
  to {
    rotate: calc(var(--coin-spin, 1) * 360deg);
  }
}
.coin-moth {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--base) * 0.8);
  height: calc(var(--base) * 0.8);
  margin: calc(var(--base) * -0.4);
  border-radius: 50%;
  background: var(--color-light);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: moth-visit calc(var(--moth-visit-s, 9) * 1s) linear calc(var(--moth-phase, 0) * -12s) infinite;
}

@keyframes moth-visit {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  13% {
    opacity: 0.45;
  }
  19% {
    opacity: 0.9;
  }
  31% {
    opacity: 0.3;
  }
  37% {
    opacity: 0.85;
  }
  50% {
    opacity: 0.6;
  }
  56% {
    opacity: 0.9;
  }
  62% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.coin-eye {
  position: absolute;
  width: 15%;
  height: 15%;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

.coin-eye-left {
  left: 30%;
  top: 35%;
}

.coin-eye-right {
  left: 70%;
  top: 35%;
}

.coin-smile {
  position: absolute;
  width: 30%;
  height: 15%;
  border-bottom: 3px solid black;
  border-radius: 50%;
  left: 35%;
  top: 45%;
  opacity: 0.4;
}

:root {
  --coin-shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 86.6"><polygon points="25,0 75,0 100,43.3 75,86.6 25,86.6 0,43.3"/></svg>');
}

@property --glow-peak {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.12;
}
.coin.collected .coin-disc::before {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  transform: scale(1.5);
  opacity: 0;
}
.coin.collected .coin-eye,
.coin.collected .coin-smile,
.coin.collected .coin-exclaim {
  transform: scale(0);
}
.coin.collected .coin-glow {
  transition: scale 0.3s ease-out, opacity 0.3s ease-in, --glow-peak 0.12s ease-out;
  --glow-peak: 0.6;
  scale: 1.8;
  opacity: 0;
}
.coin.collected::after {
  transition: opacity 0.3s ease-out;
  opacity: 0;
}
.coin.collected .coin-moth {
  animation: none;
  transition: opacity 0.15s ease-out;
  opacity: 0;
}

.coin-crack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: var(--coin-shape);
          mask-image: var(--coin-shape);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.coin-crack::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: calc(var(--crack-x, 50) * 1%);
  width: 6%;
  margin-left: -3%;
  background: var(--color-dark);
  opacity: 0.35;
  rotate: calc(var(--crack-rot, 0) * 1deg);
  transform-origin: 50% 50%;
}

.coin.tip-right .coin-disc {
  transform-origin: 75% 93.3%;
  animation: coin-tip-right 0.34s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.coin.tip-left .coin-disc {
  transform-origin: 25% 93.3%;
  animation: coin-tip-left 0.34s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes coin-tip-right {
  0% {
    transform: rotate(0deg);
  }
  28% {
    transform: rotate(26deg);
  }
  62% {
    transform: rotate(-5deg);
  }
  84% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes coin-tip-left {
  0% {
    transform: rotate(0deg);
  }
  28% {
    transform: rotate(-26deg);
  }
  62% {
    transform: rotate(5deg);
  }
  84% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.coin-shard {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
  rotate: calc(var(--shard-rot, 0) * 1deg);
  z-index: 20000;
  pointer-events: none;
  transition: scale 0.25s ease-out, opacity 0.25s ease-out;
}
.coin-shard::before {
  content: "";
  position: absolute;
  inset: -130%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(234, 233, 232, 0.48) 0%, rgba(234, 233, 232, 0.339) 8.3%, rgba(234, 233, 232, 0.252) 16.7%, rgba(234, 233, 232, 0.189) 25%, rgba(234, 233, 232, 0.139) 33.3%, rgba(234, 233, 232, 0.101) 41.7%, rgba(234, 233, 232, 0.07) 50%, rgba(234, 233, 232, 0.046) 58.3%, rgba(234, 233, 232, 0.028) 66.7%, rgba(234, 233, 232, 0.015) 75%, rgba(234, 233, 232, 0.007) 83.3%, rgba(234, 233, 232, 0.002) 91.7%, rgba(234, 233, 232, 0) 100%);
  pointer-events: none;
}
.coin-shard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-light);
  -webkit-mask-image: var(--coin-shape);
          mask-image: var(--coin-shape);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.coin-shard.collected {
  scale: 1.6;
  opacity: 0;
}

.coin-exclaim {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding-bottom: 0.08em;
  font-size: 260%;
  line-height: 1;
  color: #000;
  opacity: 0.35;
}

.death-loot {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: calc((var(--x, 0) + var(--shake-x, 0) + var(--knockback-x, 0)) * var(--base)) calc((var(--y, 0) + var(--shake-y, 0) + var(--knockback-y, 0)) * var(--base) * -1);
  scale: calc(var(--scale-x, 1)) calc(var(--scale-y, 1));
  width: calc(var(--w, 0) * var(--base));
  height: calc(var(--h, 0) * var(--base));
  border-radius: 50%;
  background: var(--color-light);
  opacity: 0.8;
  animation: death-loot-pulse 1.5s ease-in-out infinite;
  z-index: 100;
  box-shadow: 0 0 calc(var(--base) * 0.5) var(--color-light);
}

.death-loot-cross {
  position: absolute;
  width: 30%;
  height: 60%;
  left: 35%;
  top: 20%;
  background: var(--color-dark);
}
.death-loot-cross::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 30%;
  left: -50%;
  top: 20%;
  background: var(--color-dark);
}

#playLonelyBoing .entity.slug, #playLonelyBoing .enemy.slug,
.playLonelyBoing .entity.slug,
.playLonelyBoing .enemy.slug {
  border-radius: 0.5vmin;
  background-color: var(--color-mid);
}
#playLonelyBoing .entity.slug.dead, #playLonelyBoing .enemy.slug.dead,
.playLonelyBoing .entity.slug.dead,
.playLonelyBoing .enemy.slug.dead {
  transition: all 0.2s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLonelyBoing .entity.slug.dead-left, #playLonelyBoing .enemy.slug.dead-left,
.playLonelyBoing .entity.slug.dead-left,
.playLonelyBoing .enemy.slug.dead-left {
  transform: rotate(90deg) translateX(-60%) !important;
}
#playLonelyBoing .entity.slug.dead-right, #playLonelyBoing .enemy.slug.dead-right,
.playLonelyBoing .entity.slug.dead-right,
.playLonelyBoing .enemy.slug.dead-right {
  transform: rotate(-90deg) translateX(60%) !important;
}
#playLonelyBoing .entity:empty.wanderer, #playLonelyBoing .enemy:empty.wanderer,
.playLonelyBoing .entity:empty.wanderer,
.playLonelyBoing .enemy:empty.wanderer {
  background: #87CEEB;
}
#playLonelyBoing .entity:empty.pawn, #playLonelyBoing .enemy:empty.pawn,
.playLonelyBoing .entity:empty.pawn,
.playLonelyBoing .enemy:empty.pawn {
  background: #9932CC;
}
#playLonelyBoing .entity:empty.bouncer, #playLonelyBoing .enemy:empty.bouncer,
.playLonelyBoing .entity:empty.bouncer,
.playLonelyBoing .enemy:empty.bouncer {
  background: #FF8C00;
}
#playLonelyBoing .entity:empty.floater, #playLonelyBoing .enemy:empty.floater,
.playLonelyBoing .entity:empty.floater,
.playLonelyBoing .enemy:empty.floater {
  background: #90EE90;
}
#playLonelyBoing .entity:empty.rook, #playLonelyBoing .enemy:empty.rook,
.playLonelyBoing .entity:empty.rook,
.playLonelyBoing .enemy:empty.rook {
  background: #228B22;
}
#playLonelyBoing .entity:empty.hunter, #playLonelyBoing .enemy:empty.hunter,
.playLonelyBoing .entity:empty.hunter,
.playLonelyBoing .enemy:empty.hunter {
  background: #8B0000;
}
#playLonelyBoing .entity:empty.bishop, #playLonelyBoing .enemy:empty.bishop,
.playLonelyBoing .entity:empty.bishop,
.playLonelyBoing .enemy:empty.bishop {
  background: #FFD700;
}
#playLonelyBoing .entity:empty.knight, #playLonelyBoing .enemy:empty.knight,
.playLonelyBoing .entity:empty.knight,
.playLonelyBoing .enemy:empty.knight {
  background: #A0522D;
}
#playLonelyBoing .entity:empty.teleporter, #playLonelyBoing .enemy:empty.teleporter,
.playLonelyBoing .entity:empty.teleporter,
.playLonelyBoing .enemy:empty.teleporter {
  background: #FF69B4;
}
#playLonelyBoing .entity, #playLonelyBoing .enemy,
.playLonelyBoing .entity,
.playLonelyBoing .enemy {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transform-origin: bottom center;
  --bob-x: 0;
  --bob-y: 0;
  --wiggle: 0;
  --knockback-rotation: 0;
  translate: calc((var(--x, 0) + var(--shake-x, 0) + var(--knockback-x, 0) + var(--bob-x, 0)) * var(--base) + var(--bob-x, 0) * 0.6vh) calc((var(--y, 0) + var(--shake-y, 0) + var(--knockback-y, 0) + var(--bob-y, 0)) * var(--base) * -1 + var(--bob-y, 0) * -0.6vh);
  rotate: calc((var(--rotation, 0) + var(--wiggle) * 0.5 + var(--knockback-rotation) + var(--shake-rotation, 0)) * 1deg);
  scale: calc(var(--scale-x, 1)) calc(var(--scale-y, 1));
  will-change: translate, rotate, scale;
  z-index: 12000;
  transition: transform 0.05s 0s ease-out, opacity 0.3s ease;
  width: 3vmin;
  height: 6vmin;
  width: var(--logical-width);
  height: var(--logical-height);
}
#playLonelyBoing .entity.spawning, #playLonelyBoing .enemy.spawning,
.playLonelyBoing .entity.spawning,
.playLonelyBoing .enemy.spawning {
  --spawn-scale: 0;
  filter: blur(8px) drop-shadow(0px calc(var(--base) * 2.5) 20px rgb(23, 23, 26));
  opacity: 0;
  animation: enemySpawn 0.4s ease-out forwards;
}
#playLonelyBoing .entity.dying, #playLonelyBoing .enemy.dying,
.playLonelyBoing .entity.dying,
.playLonelyBoing .enemy.dying {
  --spawn-scale: 1;
  animation: enemyDeath 0.15s cubic-bezier(0.7, 0, 1, 0.5) forwards;
  pointer-events: none;
}
#playLonelyBoing .entity.corpse, #playLonelyBoing .enemy.corpse,
.playLonelyBoing .entity.corpse,
.playLonelyBoing .enemy.corpse {
  transform-origin: center;
  pointer-events: none;
  z-index: 1;
}
#playLonelyBoing .entity.hit-flash, #playLonelyBoing .enemy.hit-flash,
.playLonelyBoing .entity.hit-flash,
.playLonelyBoing .enemy.hit-flash {
  filter: brightness(0) invert(1) drop-shadow(0px calc(var(--base) * 2.5) 20px rgb(23, 23, 26));
}
@keyframes enemySpawn {
  0% {
    --spawn-scale: 0;
    filter: blur(8px) drop-shadow(0px calc(var(--base) * 2.5) 20px rgb(23, 23, 26));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    --spawn-scale: 1;
    filter: blur(0) drop-shadow(0px calc(var(--base) * 2.5) 20px rgb(23, 23, 26));
    opacity: 1;
  }
}
@keyframes enemyDeath {
  0% {
    --spawn-scale: 1;
    filter: blur(0) drop-shadow(0px calc(var(--base) * 2.5) 20px rgb(23, 23, 26));
    opacity: 1;
  }
  40% {
    --spawn-scale: 0.3;
    opacity: 0.6;
  }
  100% {
    --spawn-scale: 0;
    filter: blur(8px) drop-shadow(0px calc(var(--base) * 2.5) 20px rgb(23, 23, 26));
    opacity: 0;
  }
}
#playLonelyBoing .entity .sprite, #playLonelyBoing .enemy .sprite,
.playLonelyBoing .entity .sprite,
.playLonelyBoing .enemy .sprite {
  height: 8vmin;
  aspect-ratio: 1;
  position: absolute;
  bottom: 0;
  transform: scale(var(--spawn-scale, 1));
}
#playLonelyBoing .entity .sprite .base-wrap, #playLonelyBoing .entity .sprite .body-wrap, #playLonelyBoing .entity .sprite .head-wrap, #playLonelyBoing .entity .sprite .eyes-wrap, #playLonelyBoing .entity .sprite .prop-wrap, #playLonelyBoing .entity .sprite .streak-wrap, #playLonelyBoing .entity .sprite .foot-wrap, #playLonelyBoing .enemy .sprite .base-wrap, #playLonelyBoing .enemy .sprite .body-wrap, #playLonelyBoing .enemy .sprite .head-wrap, #playLonelyBoing .enemy .sprite .eyes-wrap, #playLonelyBoing .enemy .sprite .prop-wrap, #playLonelyBoing .enemy .sprite .streak-wrap, #playLonelyBoing .enemy .sprite .foot-wrap,
.playLonelyBoing .entity .sprite .base-wrap,
.playLonelyBoing .entity .sprite .body-wrap,
.playLonelyBoing .entity .sprite .head-wrap,
.playLonelyBoing .entity .sprite .eyes-wrap,
.playLonelyBoing .entity .sprite .prop-wrap,
.playLonelyBoing .entity .sprite .streak-wrap,
.playLonelyBoing .entity .sprite .foot-wrap,
.playLonelyBoing .enemy .sprite .base-wrap,
.playLonelyBoing .enemy .sprite .body-wrap,
.playLonelyBoing .enemy .sprite .head-wrap,
.playLonelyBoing .enemy .sprite .eyes-wrap,
.playLonelyBoing .enemy .sprite .prop-wrap,
.playLonelyBoing .enemy .sprite .streak-wrap,
.playLonelyBoing .enemy .sprite .foot-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
#playLonelyBoing .entity .sprite .wrap,
#playLonelyBoing .entity .sprite .part, #playLonelyBoing .enemy .sprite .wrap,
#playLonelyBoing .enemy .sprite .part,
.playLonelyBoing .entity .sprite .wrap,
.playLonelyBoing .entity .sprite .part,
.playLonelyBoing .enemy .sprite .wrap,
.playLonelyBoing .enemy .sprite .part {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
#playLonelyBoing .entity .sprite .part, #playLonelyBoing .enemy .sprite .part,
.playLonelyBoing .entity .sprite .part,
.playLonelyBoing .enemy .sprite .part {
  transition: transform 1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLonelyBoing .entity.spawning .sprite .part, #playLonelyBoing .enemy.spawning .sprite .part,
.playLonelyBoing .entity.spawning .sprite .part,
.playLonelyBoing .enemy.spawning .sprite .part {
  transition: none;
}
#playLonelyBoing .entity::after, #playLonelyBoing .enemy::after,
.playLonelyBoing .entity::after,
.playLonelyBoing .enemy::after {
  transition: transform 0.125s 0s ease-in-out;
  position: absolute;
  transform-origin: bottom center;
  left: 50%;
  margin-left: -3.25vmin;
  margin-bottom: 0vmin;
  bottom: 0;
  height: 6.5vmin;
  width: 6.5vmin;
  background-size: cover;
  content: "";
  display: block;
  display: none;
}
#playLonelyBoing .entity.destroyed, #playLonelyBoing .enemy.destroyed,
.playLonelyBoing .entity.destroyed,
.playLonelyBoing .enemy.destroyed {
  opacity: 0;
  pointer-events: none;
}
#playLonelyBoing .entity.emerging, #playLonelyBoing .enemy.emerging,
.playLonelyBoing .entity.emerging,
.playLonelyBoing .enemy.emerging {
  animation: enemyEmerge 0.5s ease-out;
}
#playLonelyBoing .entity.vanishing, #playLonelyBoing .enemy.vanishing,
.playLonelyBoing .entity.vanishing,
.playLonelyBoing .enemy.vanishing {
  animation: enemyVanish 0.3s ease-in forwards;
}
#playLonelyBoing .entity.moving-left, #playLonelyBoing .enemy.moving-left,
.playLonelyBoing .entity.moving-left,
.playLonelyBoing .enemy.moving-left {
  transform: scaleX(-1);
}
#playLonelyBoing .entity.moving-right, #playLonelyBoing .enemy.moving-right,
.playLonelyBoing .entity.moving-right,
.playLonelyBoing .enemy.moving-right {
  transform: scaleX(1);
}
#playLonelyBoing .entity.taking-damage, #playLonelyBoing .enemy.taking-damage,
.playLonelyBoing .entity.taking-damage,
.playLonelyBoing .enemy.taking-damage {
  animation: enemyDamage 0.2s ease-in-out;
}
#playLonelyBoing .entity.stunned, #playLonelyBoing .enemy.stunned,
.playLonelyBoing .entity.stunned,
.playLonelyBoing .enemy.stunned {
  animation: enemyStun 0.5s ease-in-out infinite;
}
#playLonelyBoing .entity.targeted::before, #playLonelyBoing .enemy.targeted::before,
.playLonelyBoing .entity.targeted::before,
.playLonelyBoing .enemy.targeted::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--color-warning, #f59e0b);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: targetPulse 1s ease-in-out infinite;
}
#playLonelyBoing .entity.persuit, #playLonelyBoing .entity.alert, #playLonelyBoing .entity.aggro, #playLonelyBoing .enemy.persuit, #playLonelyBoing .enemy.alert, #playLonelyBoing .enemy.aggro,
.playLonelyBoing .entity.persuit,
.playLonelyBoing .entity.alert,
.playLonelyBoing .entity.aggro,
.playLonelyBoing .enemy.persuit,
.playLonelyBoing .enemy.alert,
.playLonelyBoing .enemy.aggro {
  transform: scale(1.15, 1.15);
}
#playLonelyBoing .entity.aggro, #playLonelyBoing .enemy.aggro,
.playLonelyBoing .entity.aggro,
.playLonelyBoing .enemy.aggro {
  filter: hue-rotate(30deg) saturate(1.2);
}
#playLonelyBoing .entity.rook::after, #playLonelyBoing .enemy.rook::after,
.playLonelyBoing .entity.rook::after,
.playLonelyBoing .enemy.rook::after {
  background-image: url("/_img/chesspieces/sctheme-b/bR.png");
}
#playLonelyBoing .entity.damaged::after, #playLonelyBoing .enemy.damaged::after,
.playLonelyBoing .entity.damaged::after,
.playLonelyBoing .enemy.damaged::after {
  background-image: url("/_img/chesspieces/sctheme-b/bP-red.png");
}
#playLonelyBoing.debug-enemies .entity, #playLonelyBoing.debug-enemies .enemy,
.playLonelyBoing.debug-enemies .entity,
.playLonelyBoing.debug-enemies .enemy {
  outline: 2px solid rgba(255, 0, 0, 0.5);
}
#playLonelyBoing.debug-enemies .entity::after, #playLonelyBoing.debug-enemies .enemy::after,
.playLonelyBoing.debug-enemies .entity::after,
.playLonelyBoing.debug-enemies .enemy::after {
  content: attr(data-enemy-type);
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 4px;
  border-radius: 2px;
}

.show-hitbox .entity::before, .show-hitbox .enemy::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.3);
  border: 2px solid red;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 10000;
}
.show-hitbox #king::before {
  display: block !important;
  background: rgba(0, 255, 0, 0.7) !important;
  border: 2px solid lime !important;
}

@keyframes enemyEmerge {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes enemyVanish {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes enemyDamage {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(2) hue-rotate(0deg);
  }
}
@keyframes enemyStun {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-2deg);
  }
  75% {
    transform: rotate(2deg);
  }
}
@keyframes targetPulse {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-50%) scale(1.3);
  }
}
#playLonelyBoing .entity.crawler, #playLonelyBoing .enemy.crawler,
.playLonelyBoing .entity.crawler,
.playLonelyBoing .enemy.crawler {
  transform-origin: center center;
  transition: opacity 0.3s ease;
}
#playLonelyBoing .entity.crawler .sprite, #playLonelyBoing .enemy.crawler .sprite,
.playLonelyBoing .entity.crawler .sprite,
.playLonelyBoing .enemy.crawler .sprite {
  height: calc(var(--base) * 6);
  position: absolute;
  bottom: calc(var(--base) * -0.5) !important;
  transform-origin: center bottom;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLonelyBoing .entity.crawler.snooze .sprite, #playLonelyBoing .enemy.crawler.snooze .sprite,
.playLonelyBoing .entity.crawler.snooze .sprite,
.playLonelyBoing .enemy.crawler.snooze .sprite {
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLonelyBoing .entity.crawler.snooze.facing-right .sprite, #playLonelyBoing .enemy.crawler.snooze.facing-right .sprite,
.playLonelyBoing .entity.crawler.snooze.facing-right .sprite,
.playLonelyBoing .enemy.crawler.snooze.facing-right .sprite {
  transform: translateX(-10%) scaleY(0.8) scaleX(0.95);
  transform-origin: bottom right;
}
#playLonelyBoing .entity.crawler.snooze.facing-left .sprite, #playLonelyBoing .enemy.crawler.snooze.facing-left .sprite,
.playLonelyBoing .entity.crawler.snooze.facing-left .sprite,
.playLonelyBoing .enemy.crawler.snooze.facing-left .sprite {
  transform: translateX(10%) scaleY(0.8) scaleX(0.95);
  transform-origin: bottom left;
}
#playLonelyBoing .entity.crawler.challenge .sprite, #playLonelyBoing .enemy.crawler.challenge .sprite,
.playLonelyBoing .entity.crawler.challenge .sprite,
.playLonelyBoing .enemy.crawler.challenge .sprite {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scaleY(1.15) scaleX(1.1);
}
#playLonelyBoing .entity.crawler.challenge .eye, #playLonelyBoing .enemy.crawler.challenge .eye,
.playLonelyBoing .entity.crawler.challenge .eye,
.playLonelyBoing .enemy.crawler.challenge .eye {
  opacity: 0.8;
  transform: scale(1.3);
}
#playLonelyBoing .entity.crawler.cautious .sprite, #playLonelyBoing .enemy.crawler.cautious .sprite,
.playLonelyBoing .entity.crawler.cautious .sprite,
.playLonelyBoing .enemy.crawler.cautious .sprite {
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scaleY(0.85) scaleX(1.05);
}
#playLonelyBoing .entity.crawler.cautious .eye, #playLonelyBoing .enemy.crawler.cautious .eye,
.playLonelyBoing .entity.crawler.cautious .eye,
.playLonelyBoing .enemy.crawler.cautious .eye {
  opacity: 0.6;
}
#playLonelyBoing .entity.crawler .body-wrap, #playLonelyBoing .enemy.crawler .body-wrap,
.playLonelyBoing .entity.crawler .body-wrap,
.playLonelyBoing .enemy.crawler .body-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
}
#playLonelyBoing .entity.crawler .body, #playLonelyBoing .enemy.crawler .body,
.playLonelyBoing .entity.crawler .body,
.playLonelyBoing .enemy.crawler .body {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  transform: scaleY(calc(1 + var(--body-bob, 0) * 0.35)) scaleX(calc(1 - var(--body-bob, 0) * 0.15));
}
#playLonelyBoing .entity.crawler.black .body, #playLonelyBoing .enemy.crawler.black .body,
.playLonelyBoing .entity.crawler.black .body,
.playLonelyBoing .enemy.crawler.black .body {
  background-image: url("/lonely-boing/_img/crawler/base-dark.svg");
}
#playLonelyBoing .entity.crawler.white .body, #playLonelyBoing .enemy.crawler.white .body,
.playLonelyBoing .entity.crawler.white .body,
.playLonelyBoing .enemy.crawler.white .body {
  background-image: url("/lonely-boing/_img/crawler/base-light.svg");
}
#playLonelyBoing .entity.crawler.corpse .eye, #playLonelyBoing .enemy.crawler.corpse .eye,
.playLonelyBoing .entity.crawler.corpse .eye,
.playLonelyBoing .enemy.crawler.corpse .eye {
  top: 50%;
  height: 10%;
  width: 20%;
}
#playLonelyBoing .entity.crawler .eyes-wrap, #playLonelyBoing .enemy.crawler .eyes-wrap,
.playLonelyBoing .entity.crawler .eyes-wrap,
.playLonelyBoing .enemy.crawler .eyes-wrap {
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 50%;
  top: auto;
  bottom: 0;
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLonelyBoing .entity.crawler .eye, #playLonelyBoing .enemy.crawler .eye,
.playLonelyBoing .entity.crawler .eye,
.playLonelyBoing .enemy.crawler .eye {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 20%;
  height: 35%;
  margin-left: -10%;
  border-radius: 100%;
  background: var(--color-dark);
  opacity: 0.35;
}
#playLonelyBoing .entity.crawler.black .eye, #playLonelyBoing .enemy.crawler.black .eye,
.playLonelyBoing .entity.crawler.black .eye,
.playLonelyBoing .enemy.crawler.black .eye {
  background: var(--color-light);
}
#playLonelyBoing .entity.crawler.facing-right .eye, #playLonelyBoing .enemy.crawler.facing-right .eye,
.playLonelyBoing .entity.crawler.facing-right .eye,
.playLonelyBoing .enemy.crawler.facing-right .eye {
  transform: translateX(120%);
}
#playLonelyBoing .entity.crawler.facing-left .eye, #playLonelyBoing .enemy.crawler.facing-left .eye,
.playLonelyBoing .entity.crawler.facing-left .eye,
.playLonelyBoing .enemy.crawler.facing-left .eye {
  transform: translateX(-120%);
}
#playLonelyBoing .entity.crawlerMini, #playLonelyBoing .enemy.crawlerMini,
.playLonelyBoing .entity.crawlerMini,
.playLonelyBoing .enemy.crawlerMini {
  transform-origin: center center;
  transition: opacity 0.3s ease;
}
#playLonelyBoing .entity.crawlerMini .sprite, #playLonelyBoing .enemy.crawlerMini .sprite,
.playLonelyBoing .entity.crawlerMini .sprite,
.playLonelyBoing .enemy.crawlerMini .sprite {
  height: calc(var(--base) * 3);
  position: absolute;
  bottom: calc(var(--base) * 0);
  transform-origin: center bottom;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLonelyBoing .entity.crawlerMini .body-wrap, #playLonelyBoing .enemy.crawlerMini .body-wrap,
.playLonelyBoing .entity.crawlerMini .body-wrap,
.playLonelyBoing .enemy.crawlerMini .body-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
}
#playLonelyBoing .entity.crawlerMini .body, #playLonelyBoing .enemy.crawlerMini .body,
.playLonelyBoing .entity.crawlerMini .body,
.playLonelyBoing .enemy.crawlerMini .body {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  transform: scaleY(calc(1 + var(--body-bob, 0) * 0.05)) scaleX(calc(1 - var(--body-bob, 0) * 0.08));
}
#playLonelyBoing .entity.crawlerMini.black .body, #playLonelyBoing .enemy.crawlerMini.black .body,
.playLonelyBoing .entity.crawlerMini.black .body,
.playLonelyBoing .enemy.crawlerMini.black .body {
  background-image: url("/lonely-boing/_img/crawler/base-dark.svg");
}
#playLonelyBoing .entity.crawlerMini.white .body, #playLonelyBoing .enemy.crawlerMini.white .body,
.playLonelyBoing .entity.crawlerMini.white .body,
.playLonelyBoing .enemy.crawlerMini.white .body {
  background-image: url("/lonely-boing/_img/crawler/base-light.svg");
}
#playLonelyBoing .entity.crawlerMini .eyes-wrap, #playLonelyBoing .enemy.crawlerMini .eyes-wrap,
.playLonelyBoing .entity.crawlerMini .eyes-wrap,
.playLonelyBoing .enemy.crawlerMini .eyes-wrap {
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 50%;
  top: auto;
  bottom: 0;
}
#playLonelyBoing .entity.crawlerMini .eye, #playLonelyBoing .enemy.crawlerMini .eye,
.playLonelyBoing .entity.crawlerMini .eye,
.playLonelyBoing .enemy.crawlerMini .eye {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 20%;
  height: 35%;
  margin-left: -10%;
  border-radius: 100%;
  background: var(--color-dark);
  opacity: 0.35;
}
#playLonelyBoing .entity.crawlerMini.black .eye, #playLonelyBoing .enemy.crawlerMini.black .eye,
.playLonelyBoing .entity.crawlerMini.black .eye,
.playLonelyBoing .enemy.crawlerMini.black .eye {
  background: var(--color-light);
}
#playLonelyBoing .entity.crawlerMini.facing-right .eye, #playLonelyBoing .enemy.crawlerMini.facing-right .eye,
.playLonelyBoing .entity.crawlerMini.facing-right .eye,
.playLonelyBoing .enemy.crawlerMini.facing-right .eye {
  transform: translateX(120%);
}
#playLonelyBoing .entity.crawlerMini.facing-left .eye, #playLonelyBoing .enemy.crawlerMini.facing-left .eye,
.playLonelyBoing .entity.crawlerMini.facing-left .eye,
.playLonelyBoing .enemy.crawlerMini.facing-left .eye {
  transform: translateX(-120%);
}
#playLonelyBoing .entity.crawlerMini.challenge .sprite, #playLonelyBoing .enemy.crawlerMini.challenge .sprite,
.playLonelyBoing .entity.crawlerMini.challenge .sprite,
.playLonelyBoing .enemy.crawlerMini.challenge .sprite {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scaleY(1.15) scaleX(1.1);
}
#playLonelyBoing .entity.crawlerMini.challenge .eye, #playLonelyBoing .enemy.crawlerMini.challenge .eye,
.playLonelyBoing .entity.crawlerMini.challenge .eye,
.playLonelyBoing .enemy.crawlerMini.challenge .eye {
  opacity: 0.8;
  transform: scale(1.3);
}
#playLonelyBoing .entity.crawlerMini.cautious .sprite, #playLonelyBoing .enemy.crawlerMini.cautious .sprite,
.playLonelyBoing .entity.crawlerMini.cautious .sprite,
.playLonelyBoing .enemy.crawlerMini.cautious .sprite {
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scaleY(0.85) scaleX(1.05);
}
#playLonelyBoing .entity.crawlerMini.cautious .eye, #playLonelyBoing .enemy.crawlerMini.cautious .eye,
.playLonelyBoing .entity.crawlerMini.cautious .eye,
.playLonelyBoing .enemy.crawlerMini.cautious .eye {
  opacity: 0.6;
}
#playLonelyBoing .entity.crawlerMini.frozen .sprite, #playLonelyBoing .enemy.crawlerMini.frozen .sprite,
.playLonelyBoing .entity.crawlerMini.frozen .sprite,
.playLonelyBoing .enemy.crawlerMini.frozen .sprite {
  transition: transform 0.2s ease-out;
  transform: scaleY(0.9) scaleX(1.05);
}
#playLonelyBoing .entity.crawlerMini.frozen .eye, #playLonelyBoing .enemy.crawlerMini.frozen .eye,
.playLonelyBoing .entity.crawlerMini.frozen .eye,
.playLonelyBoing .enemy.crawlerMini.frozen .eye {
  opacity: 0.9;
  transform: scale(1.2);
}
#playLonelyBoing .entity.crawlerMini.frozen.shock .sprite, #playLonelyBoing .enemy.crawlerMini.frozen.shock .sprite,
.playLonelyBoing .entity.crawlerMini.frozen.shock .sprite,
.playLonelyBoing .enemy.crawlerMini.frozen.shock .sprite {
  transition: transform 0.08s ease-out;
  transform: scaleY(1.25) scaleX(0.9) translateY(-15%);
}
#playLonelyBoing .entity.crawlerMini.frozen.wiggle .sprite, #playLonelyBoing .enemy.crawlerMini.frozen.wiggle .sprite,
.playLonelyBoing .entity.crawlerMini.frozen.wiggle .sprite,
.playLonelyBoing .enemy.crawlerMini.frozen.wiggle .sprite {
  transition: transform 0.08s ease-out;
  transform: scaleY(0.975) scaleX(0.95) rotate(-4deg);
}
#playLonelyBoing .entity.crawlerMini.frozen.woggle .sprite, #playLonelyBoing .enemy.crawlerMini.frozen.woggle .sprite,
.playLonelyBoing .entity.crawlerMini.frozen.woggle .sprite,
.playLonelyBoing .enemy.crawlerMini.frozen.woggle .sprite {
  transition: transform 0.08s ease-out;
  transform: scaleY(0.975) scaleX(0.95) rotate(4deg);
}

#playLonelyBoing .entity.bishop.facing-left, #playLonelyBoing .enemy.bishop.facing-left,
.playLonelyBoing .entity.bishop.facing-left,
.playLonelyBoing .enemy.bishop.facing-left {
  --rotation: 8;
}
#playLonelyBoing .entity.bishop.facing-right, #playLonelyBoing .enemy.bishop.facing-right,
.playLonelyBoing .entity.bishop.facing-right,
.playLonelyBoing .enemy.bishop.facing-right {
  --rotation: -8;
}
#playLonelyBoing .entity.bishop.bounce-left, #playLonelyBoing .enemy.bishop.bounce-left,
.playLonelyBoing .entity.bishop.bounce-left,
.playLonelyBoing .enemy.bishop.bounce-left {
  --rotation: 8;
  --scale-x: 0.8;
  --scale-y: 1.15;
}
#playLonelyBoing .entity.bishop.bounce-right, #playLonelyBoing .enemy.bishop.bounce-right,
.playLonelyBoing .entity.bishop.bounce-right,
.playLonelyBoing .enemy.bishop.bounce-right {
  --rotation: -8;
  --scale-x: 0.8;
  --scale-y: 1.15;
}
#playLonelyBoing .entity.bishop.bounce-top, #playLonelyBoing .enemy.bishop.bounce-top,
.playLonelyBoing .entity.bishop.bounce-top,
.playLonelyBoing .enemy.bishop.bounce-top {
  --scale-x: 1.15;
  --scale-y: 0.8;
}
#playLonelyBoing .entity.bishop.bounce-bottom, #playLonelyBoing .enemy.bishop.bounce-bottom,
.playLonelyBoing .entity.bishop.bounce-bottom,
.playLonelyBoing .enemy.bishop.bounce-bottom {
  --scale-x: 1.15;
  --scale-y: 0.8;
}
#playLonelyBoing .entity.bishop .sprite, #playLonelyBoing .enemy.bishop .sprite,
.playLonelyBoing .entity.bishop .sprite,
.playLonelyBoing .enemy.bishop .sprite {
  height: calc(var(--base) * 8);
  top: calc(var(--base) * -1);
  aspect-ratio: 1;
}
#playLonelyBoing .entity.bishop .head-wrap, #playLonelyBoing .enemy.bishop .head-wrap,
.playLonelyBoing .entity.bishop .head-wrap,
.playLonelyBoing .enemy.bishop .head-wrap {
  transition: transform 0.1s ease-out;
}
#playLonelyBoing .entity.bishop .head, #playLonelyBoing .enemy.bishop .head,
.playLonelyBoing .entity.bishop .head,
.playLonelyBoing .enemy.bishop .head {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
#playLonelyBoing .entity.bishop.black .head, #playLonelyBoing .enemy.bishop.black .head,
.playLonelyBoing .entity.bishop.black .head,
.playLonelyBoing .enemy.bishop.black .head {
  background-image: url("/lonely-boing/_img/bishop/base-dark.svg");
}
#playLonelyBoing .entity.bishop.white .head, #playLonelyBoing .enemy.bishop.white .head,
.playLonelyBoing .entity.bishop.white .head,
.playLonelyBoing .enemy.bishop.white .head {
  background-image: url("/lonely-boing/_img/bishop/base-light.svg");
}

#playLonelyBoing .entity.pawn,
#playLonelyBoing .entity.npc,
#playLonelyBoing .enemy.pawn,
#playLonelyBoing .enemy.npc,
.playLonelyBoing .entity.pawn,
.playLonelyBoing .entity.npc,
.playLonelyBoing .enemy.pawn,
.playLonelyBoing .enemy.npc {
  --head-offset: 0;
  --fidget-rotation: 0;
}
#playLonelyBoing .entity.pawn .sprite,
#playLonelyBoing .entity.npc .sprite,
#playLonelyBoing .enemy.pawn .sprite,
#playLonelyBoing .enemy.npc .sprite,
.playLonelyBoing .entity.pawn .sprite,
.playLonelyBoing .entity.npc .sprite,
.playLonelyBoing .enemy.pawn .sprite,
.playLonelyBoing .enemy.npc .sprite {
  height: calc(var(--base) * 6.5);
  aspect-ratio: 1;
  left: 50%;
  translate: -50% 0;
}
#playLonelyBoing .entity.pawn .base-wrap,
#playLonelyBoing .entity.npc .base-wrap,
#playLonelyBoing .enemy.pawn .base-wrap,
#playLonelyBoing .enemy.npc .base-wrap,
.playLonelyBoing .entity.pawn .base-wrap,
.playLonelyBoing .entity.npc .base-wrap,
.playLonelyBoing .enemy.pawn .base-wrap,
.playLonelyBoing .enemy.npc .base-wrap {
  transform-origin: center 60%;
}
#playLonelyBoing .entity.pawn .prop-wrap,
#playLonelyBoing .entity.npc .prop-wrap,
#playLonelyBoing .enemy.pawn .prop-wrap,
#playLonelyBoing .enemy.npc .prop-wrap,
.playLonelyBoing .entity.pawn .prop-wrap,
.playLonelyBoing .entity.npc .prop-wrap,
.playLonelyBoing .enemy.pawn .prop-wrap,
.playLonelyBoing .enemy.npc .prop-wrap {
  top: calc(var(--base) * -0.625);
  transform-origin: center 60%;
}
#playLonelyBoing .entity.pawn .head-wrap,
#playLonelyBoing .entity.npc .head-wrap,
#playLonelyBoing .enemy.pawn .head-wrap,
#playLonelyBoing .enemy.npc .head-wrap,
.playLonelyBoing .entity.pawn .head-wrap,
.playLonelyBoing .entity.npc .head-wrap,
.playLonelyBoing .enemy.pawn .head-wrap,
.playLonelyBoing .enemy.npc .head-wrap {
  top: calc(var(--base) * -0.125);
  transform-origin: center 40%;
  transform: rotate(calc(var(--head-offset) * 15deg));
  transition: transform 0.3s ease-out;
}
#playLonelyBoing .entity.pawn .body-wrap,
#playLonelyBoing .entity.npc .body-wrap,
#playLonelyBoing .enemy.pawn .body-wrap,
#playLonelyBoing .enemy.npc .body-wrap,
.playLonelyBoing .entity.pawn .body-wrap,
.playLonelyBoing .entity.npc .body-wrap,
.playLonelyBoing .enemy.pawn .body-wrap,
.playLonelyBoing .enemy.npc .body-wrap {
  top: calc(var(--base) * -0.075);
  transform-origin: center 80%;
  transform: rotate(calc(var(--fidget-rotation) * 1deg));
}
#playLonelyBoing .entity.pawn.damaged .part,
#playLonelyBoing .entity.npc.damaged .part,
#playLonelyBoing .enemy.pawn.damaged .part,
#playLonelyBoing .enemy.npc.damaged .part,
.playLonelyBoing .entity.pawn.damaged .part,
.playLonelyBoing .entity.npc.damaged .part,
.playLonelyBoing .enemy.pawn.damaged .part,
.playLonelyBoing .enemy.npc.damaged .part {
  transition: transform 0s 0s ease-in-out;
}
#playLonelyBoing .entity.pawn.facing-left .eye,
#playLonelyBoing .entity.npc.facing-left .eye,
#playLonelyBoing .enemy.pawn.facing-left .eye,
#playLonelyBoing .enemy.npc.facing-left .eye,
.playLonelyBoing .entity.pawn.facing-left .eye,
.playLonelyBoing .entity.npc.facing-left .eye,
.playLonelyBoing .enemy.pawn.facing-left .eye,
.playLonelyBoing .enemy.npc.facing-left .eye {
  transform: translateX(calc(var(--base) * -0.2));
}
#playLonelyBoing .entity.pawn.facing-right .eye,
#playLonelyBoing .entity.npc.facing-right .eye,
#playLonelyBoing .enemy.pawn.facing-right .eye,
#playLonelyBoing .enemy.npc.facing-right .eye,
.playLonelyBoing .entity.pawn.facing-right .eye,
.playLonelyBoing .entity.npc.facing-right .eye,
.playLonelyBoing .enemy.pawn.facing-right .eye,
.playLonelyBoing .enemy.npc.facing-right .eye {
  transform: translateX(calc(var(--base) * 0.2));
}
#playLonelyBoing .entity.pawn.facing-left .head,
#playLonelyBoing .entity.npc.facing-left .head,
#playLonelyBoing .enemy.pawn.facing-left .head,
#playLonelyBoing .enemy.npc.facing-left .head,
.playLonelyBoing .entity.pawn.facing-left .head,
.playLonelyBoing .entity.npc.facing-left .head,
.playLonelyBoing .enemy.pawn.facing-left .head,
.playLonelyBoing .enemy.npc.facing-left .head {
  transform: translate(-10%) rotate(-17deg);
}
#playLonelyBoing .entity.pawn.facing-right .head,
#playLonelyBoing .entity.npc.facing-right .head,
#playLonelyBoing .enemy.pawn.facing-right .head,
#playLonelyBoing .enemy.npc.facing-right .head,
.playLonelyBoing .entity.pawn.facing-right .head,
.playLonelyBoing .entity.npc.facing-right .head,
.playLonelyBoing .enemy.pawn.facing-right .head,
.playLonelyBoing .enemy.npc.facing-right .head {
  transform: translate(10%) rotate(17deg);
}
#playLonelyBoing .entity.pawn.facing-left .body,
#playLonelyBoing .entity.npc.facing-left .body,
#playLonelyBoing .enemy.pawn.facing-left .body,
#playLonelyBoing .enemy.npc.facing-left .body,
.playLonelyBoing .entity.pawn.facing-left .body,
.playLonelyBoing .entity.npc.facing-left .body,
.playLonelyBoing .enemy.pawn.facing-left .body,
.playLonelyBoing .enemy.npc.facing-left .body {
  transform: translateY(-5%) translateX(8%) rotate(-15deg);
}
#playLonelyBoing .entity.pawn.facing-right .body,
#playLonelyBoing .entity.npc.facing-right .body,
#playLonelyBoing .enemy.pawn.facing-right .body,
#playLonelyBoing .enemy.npc.facing-right .body,
.playLonelyBoing .entity.pawn.facing-right .body,
.playLonelyBoing .entity.npc.facing-right .body,
.playLonelyBoing .enemy.pawn.facing-right .body,
.playLonelyBoing .enemy.npc.facing-right .body {
  transform: translateY(-5%) translateX(-8%) rotate(15deg);
}
#playLonelyBoing .entity.pawn.facing-left .base,
#playLonelyBoing .entity.npc.facing-left .base,
#playLonelyBoing .enemy.pawn.facing-left .base,
#playLonelyBoing .enemy.npc.facing-left .base,
.playLonelyBoing .entity.pawn.facing-left .base,
.playLonelyBoing .entity.npc.facing-left .base,
.playLonelyBoing .enemy.pawn.facing-left .base,
.playLonelyBoing .enemy.npc.facing-left .base {
  transform: scale(0.9, 1.1) translate(1%) skew(2deg);
}
#playLonelyBoing .entity.pawn.facing-right .base,
#playLonelyBoing .entity.npc.facing-right .base,
#playLonelyBoing .enemy.pawn.facing-right .base,
#playLonelyBoing .enemy.npc.facing-right .base,
.playLonelyBoing .entity.pawn.facing-right .base,
.playLonelyBoing .entity.npc.facing-right .base,
.playLonelyBoing .enemy.pawn.facing-right .base,
.playLonelyBoing .enemy.npc.facing-right .base {
  transform: scale(0.9, 1.1) translate(-1%) skew(-2deg);
}
#playLonelyBoing .entity.pawn,
#playLonelyBoing .entity.npc,
#playLonelyBoing .enemy.pawn,
#playLonelyBoing .enemy.npc,
.playLonelyBoing .entity.pawn,
.playLonelyBoing .entity.npc,
.playLonelyBoing .enemy.pawn,
.playLonelyBoing .enemy.npc {
  transition: transform 1s ease-out;
}
#playLonelyBoing .entity.pawn.bow.facing-left,
#playLonelyBoing .entity.npc.bow.facing-left,
#playLonelyBoing .enemy.pawn.bow.facing-left,
#playLonelyBoing .enemy.npc.bow.facing-left,
.playLonelyBoing .entity.pawn.bow.facing-left,
.playLonelyBoing .entity.npc.bow.facing-left,
.playLonelyBoing .enemy.pawn.bow.facing-left,
.playLonelyBoing .enemy.npc.bow.facing-left {
  transform: scaleY(0.9) rotate(-1deg);
  transition: transform 0.3s ease-out;
}
#playLonelyBoing .entity.pawn.bow.facing-left .head,
#playLonelyBoing .entity.npc.bow.facing-left .head,
#playLonelyBoing .enemy.pawn.bow.facing-left .head,
#playLonelyBoing .enemy.npc.bow.facing-left .head,
.playLonelyBoing .entity.pawn.bow.facing-left .head,
.playLonelyBoing .entity.npc.bow.facing-left .head,
.playLonelyBoing .enemy.pawn.bow.facing-left .head,
.playLonelyBoing .enemy.npc.bow.facing-left .head {
  transform: translateY(10%) translateX(-5%) rotate(-12deg) !important;
}
#playLonelyBoing .entity.pawn.bow.facing-left .body,
#playLonelyBoing .entity.npc.bow.facing-left .body,
#playLonelyBoing .enemy.pawn.bow.facing-left .body,
#playLonelyBoing .enemy.npc.bow.facing-left .body,
.playLonelyBoing .entity.pawn.bow.facing-left .body,
.playLonelyBoing .entity.npc.bow.facing-left .body,
.playLonelyBoing .enemy.pawn.bow.facing-left .body,
.playLonelyBoing .enemy.npc.bow.facing-left .body {
  transform: translateY(5%) translateX(3%) rotate(-6deg) !important;
}
#playLonelyBoing .entity.pawn.bow.facing-right,
#playLonelyBoing .entity.npc.bow.facing-right,
#playLonelyBoing .enemy.pawn.bow.facing-right,
#playLonelyBoing .enemy.npc.bow.facing-right,
.playLonelyBoing .entity.pawn.bow.facing-right,
.playLonelyBoing .entity.npc.bow.facing-right,
.playLonelyBoing .enemy.pawn.bow.facing-right,
.playLonelyBoing .enemy.npc.bow.facing-right {
  transform: scaleY(0.9) rotate(1deg);
  transition: transform 0.3s ease-out;
}
#playLonelyBoing .entity.pawn.bow.facing-right .head,
#playLonelyBoing .entity.npc.bow.facing-right .head,
#playLonelyBoing .enemy.pawn.bow.facing-right .head,
#playLonelyBoing .enemy.npc.bow.facing-right .head,
.playLonelyBoing .entity.pawn.bow.facing-right .head,
.playLonelyBoing .entity.npc.bow.facing-right .head,
.playLonelyBoing .enemy.pawn.bow.facing-right .head,
.playLonelyBoing .enemy.npc.bow.facing-right .head {
  transform: translateY(10%) translateX(5%) rotate(12deg) !important;
}
#playLonelyBoing .entity.pawn.bow.facing-right .body,
#playLonelyBoing .entity.npc.bow.facing-right .body,
#playLonelyBoing .enemy.pawn.bow.facing-right .body,
#playLonelyBoing .enemy.npc.bow.facing-right .body,
.playLonelyBoing .entity.pawn.bow.facing-right .body,
.playLonelyBoing .entity.npc.bow.facing-right .body,
.playLonelyBoing .enemy.pawn.bow.facing-right .body,
.playLonelyBoing .enemy.npc.bow.facing-right .body {
  transform: translateY(5%) translateX(-3%) rotate(6deg) !important;
}
#playLonelyBoing .entity.pawn.dead,
#playLonelyBoing .entity.npc.dead,
#playLonelyBoing .enemy.pawn.dead,
#playLonelyBoing .enemy.npc.dead,
.playLonelyBoing .entity.pawn.dead,
.playLonelyBoing .entity.npc.dead,
.playLonelyBoing .enemy.pawn.dead,
.playLonelyBoing .enemy.npc.dead {
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLonelyBoing .entity.pawn.dead.dead-left,
#playLonelyBoing .entity.npc.dead.dead-left,
#playLonelyBoing .enemy.pawn.dead.dead-left,
#playLonelyBoing .enemy.npc.dead.dead-left,
.playLonelyBoing .entity.pawn.dead.dead-left,
.playLonelyBoing .entity.npc.dead.dead-left,
.playLonelyBoing .enemy.pawn.dead.dead-left,
.playLonelyBoing .enemy.npc.dead.dead-left {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateX(-20%) scale(1, 0.8) !important;
}
#playLonelyBoing .entity.pawn.dead.dead-left .prop,
#playLonelyBoing .entity.npc.dead.dead-left .prop,
#playLonelyBoing .enemy.pawn.dead.dead-left .prop,
#playLonelyBoing .enemy.npc.dead.dead-left .prop,
.playLonelyBoing .entity.pawn.dead.dead-left .prop,
.playLonelyBoing .entity.npc.dead.dead-left .prop,
.playLonelyBoing .enemy.pawn.dead.dead-left .prop,
.playLonelyBoing .enemy.npc.dead.dead-left .prop {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(0%) rotate(70deg) scale(0) !important;
}
#playLonelyBoing .entity.pawn.dead.dead-left .head,
#playLonelyBoing .entity.npc.dead.dead-left .head,
#playLonelyBoing .enemy.pawn.dead.dead-left .head,
#playLonelyBoing .enemy.npc.dead.dead-left .head,
.playLonelyBoing .entity.pawn.dead.dead-left .head,
.playLonelyBoing .entity.npc.dead.dead-left .head,
.playLonelyBoing .enemy.pawn.dead.dead-left .head,
.playLonelyBoing .enemy.npc.dead.dead-left .head {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(-10%) translateX(5%) rotate(35deg) !important;
}
#playLonelyBoing .entity.pawn.dead.dead-left .body,
#playLonelyBoing .entity.npc.dead.dead-left .body,
#playLonelyBoing .enemy.pawn.dead.dead-left .body,
#playLonelyBoing .enemy.npc.dead.dead-left .body,
.playLonelyBoing .entity.pawn.dead.dead-left .body,
.playLonelyBoing .entity.npc.dead.dead-left .body,
.playLonelyBoing .enemy.pawn.dead.dead-left .body,
.playLonelyBoing .enemy.npc.dead.dead-left .body {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(0.8, 1) translate(10%, -5%) rotate(90deg) !important;
}
#playLonelyBoing .entity.pawn.dead.dead-left .base,
#playLonelyBoing .entity.npc.dead.dead-left .base,
#playLonelyBoing .enemy.pawn.dead.dead-left .base,
#playLonelyBoing .enemy.npc.dead.dead-left .base,
.playLonelyBoing .entity.pawn.dead.dead-left .base,
.playLonelyBoing .entity.npc.dead.dead-left .base,
.playLonelyBoing .enemy.pawn.dead.dead-left .base,
.playLonelyBoing .enemy.npc.dead.dead-left .base {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(0.8, 0.8) translate(-5%) skew(-30deg) !important;
}
#playLonelyBoing .entity.pawn.dead.dead-right,
#playLonelyBoing .entity.npc.dead.dead-right,
#playLonelyBoing .enemy.pawn.dead.dead-right,
#playLonelyBoing .enemy.npc.dead.dead-right,
.playLonelyBoing .entity.pawn.dead.dead-right,
.playLonelyBoing .entity.npc.dead.dead-right,
.playLonelyBoing .enemy.pawn.dead.dead-right,
.playLonelyBoing .enemy.npc.dead.dead-right {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateX(20%) scale(1, 0.8) !important;
}
#playLonelyBoing .entity.pawn.dead.dead-right .prop,
#playLonelyBoing .entity.npc.dead.dead-right .prop,
#playLonelyBoing .enemy.pawn.dead.dead-right .prop,
#playLonelyBoing .enemy.npc.dead.dead-right .prop,
.playLonelyBoing .entity.pawn.dead.dead-right .prop,
.playLonelyBoing .entity.npc.dead.dead-right .prop,
.playLonelyBoing .enemy.pawn.dead.dead-right .prop,
.playLonelyBoing .enemy.npc.dead.dead-right .prop {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(0%) rotate(-70deg) scale(0) !important;
}
#playLonelyBoing .entity.pawn.dead.dead-right .head,
#playLonelyBoing .entity.npc.dead.dead-right .head,
#playLonelyBoing .enemy.pawn.dead.dead-right .head,
#playLonelyBoing .enemy.npc.dead.dead-right .head,
.playLonelyBoing .entity.pawn.dead.dead-right .head,
.playLonelyBoing .entity.npc.dead.dead-right .head,
.playLonelyBoing .enemy.pawn.dead.dead-right .head,
.playLonelyBoing .enemy.npc.dead.dead-right .head {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(-10%) translateX(-5%) rotate(-25deg) !important;
}
#playLonelyBoing .entity.pawn.dead.dead-right .body,
#playLonelyBoing .entity.npc.dead.dead-right .body,
#playLonelyBoing .enemy.pawn.dead.dead-right .body,
#playLonelyBoing .enemy.npc.dead.dead-right .body,
.playLonelyBoing .entity.pawn.dead.dead-right .body,
.playLonelyBoing .entity.npc.dead.dead-right .body,
.playLonelyBoing .enemy.pawn.dead.dead-right .body,
.playLonelyBoing .enemy.npc.dead.dead-right .body {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(0.8, 1) translate(-10%, 0%) rotate(-90deg) !important;
}
#playLonelyBoing .entity.pawn.dead.dead-right .base,
#playLonelyBoing .entity.npc.dead.dead-right .base,
#playLonelyBoing .enemy.pawn.dead.dead-right .base,
#playLonelyBoing .enemy.npc.dead.dead-right .base,
.playLonelyBoing .entity.pawn.dead.dead-right .base,
.playLonelyBoing .entity.npc.dead.dead-right .base,
.playLonelyBoing .enemy.pawn.dead.dead-right .base,
.playLonelyBoing .enemy.npc.dead.dead-right .base {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(0.8, 0.8) translate(5%) skew(30deg) !important;
}
#playLonelyBoing .entity.pawn.damaged-left .head,
#playLonelyBoing .entity.npc.damaged-left .head,
#playLonelyBoing .enemy.pawn.damaged-left .head,
#playLonelyBoing .enemy.npc.damaged-left .head,
.playLonelyBoing .entity.pawn.damaged-left .head,
.playLonelyBoing .entity.npc.damaged-left .head,
.playLonelyBoing .enemy.pawn.damaged-left .head,
.playLonelyBoing .enemy.npc.damaged-left .head {
  transform: translate(-10%) rotate(-17deg) !important;
}
#playLonelyBoing .entity.pawn.damaged-right .head,
#playLonelyBoing .entity.npc.damaged-right .head,
#playLonelyBoing .enemy.pawn.damaged-right .head,
#playLonelyBoing .enemy.npc.damaged-right .head,
.playLonelyBoing .entity.pawn.damaged-right .head,
.playLonelyBoing .entity.npc.damaged-right .head,
.playLonelyBoing .enemy.pawn.damaged-right .head,
.playLonelyBoing .enemy.npc.damaged-right .head {
  transform: translate(10%) rotate(-17deg) !important;
}
#playLonelyBoing .entity.pawn.damaged-left .body,
#playLonelyBoing .entity.npc.damaged-left .body,
#playLonelyBoing .enemy.pawn.damaged-left .body,
#playLonelyBoing .enemy.npc.damaged-left .body,
.playLonelyBoing .entity.pawn.damaged-left .body,
.playLonelyBoing .entity.npc.damaged-left .body,
.playLonelyBoing .enemy.pawn.damaged-left .body,
.playLonelyBoing .enemy.npc.damaged-left .body {
  transform: translateY(-5%) translateX(20%) rotate(15deg) !important;
}
#playLonelyBoing .entity.pawn.damaged-right .body,
#playLonelyBoing .entity.npc.damaged-right .body,
#playLonelyBoing .enemy.pawn.damaged-right .body,
#playLonelyBoing .enemy.npc.damaged-right .body,
.playLonelyBoing .entity.pawn.damaged-right .body,
.playLonelyBoing .entity.npc.damaged-right .body,
.playLonelyBoing .enemy.pawn.damaged-right .body,
.playLonelyBoing .enemy.npc.damaged-right .body {
  transform: translateY(-5%) translateX(-20%) rotate(-15deg) !important;
}
#playLonelyBoing .entity.pawn.damaged-left .base,
#playLonelyBoing .entity.npc.damaged-left .base,
#playLonelyBoing .enemy.pawn.damaged-left .base,
#playLonelyBoing .enemy.npc.damaged-left .base,
.playLonelyBoing .entity.pawn.damaged-left .base,
.playLonelyBoing .entity.npc.damaged-left .base,
.playLonelyBoing .enemy.pawn.damaged-left .base,
.playLonelyBoing .enemy.npc.damaged-left .base {
  transform: scale(0.9, 1.1) translate(-5%) skew(-25deg);
}
#playLonelyBoing .entity.pawn.damaged-right .base,
#playLonelyBoing .entity.npc.damaged-right .base,
#playLonelyBoing .enemy.pawn.damaged-right .base,
#playLonelyBoing .enemy.npc.damaged-right .base,
.playLonelyBoing .entity.pawn.damaged-right .base,
.playLonelyBoing .entity.npc.damaged-right .base,
.playLonelyBoing .enemy.pawn.damaged-right .base,
.playLonelyBoing .enemy.npc.damaged-right .base {
  transform: scale(0.9, 1.1) translate(5%) skew(25deg);
}
#playLonelyBoing .entity.pawn .prop,
#playLonelyBoing .entity.npc .prop,
#playLonelyBoing .enemy.pawn .prop,
#playLonelyBoing .enemy.npc .prop,
.playLonelyBoing .entity.pawn .prop,
.playLonelyBoing .entity.npc .prop,
.playLonelyBoing .enemy.pawn .prop,
.playLonelyBoing .enemy.npc .prop {
  transition: transform 0.18s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: rotate(-60deg);
  top: 0%;
  z-index: 1000;
}
#playLonelyBoing .entity.pawn.facing-right .prop,
#playLonelyBoing .entity.npc.facing-right .prop,
#playLonelyBoing .enemy.pawn.facing-right .prop,
#playLonelyBoing .enemy.npc.facing-right .prop,
.playLonelyBoing .entity.pawn.facing-right .prop,
.playLonelyBoing .entity.npc.facing-right .prop,
.playLonelyBoing .enemy.pawn.facing-right .prop,
.playLonelyBoing .enemy.npc.facing-right .prop {
  transform: rotate(60deg);
}
#playLonelyBoing .entity.pawn .eye,
#playLonelyBoing .entity.npc .eye,
#playLonelyBoing .enemy.pawn .eye,
#playLonelyBoing .enemy.npc .eye,
.playLonelyBoing .entity.pawn .eye,
.playLonelyBoing .entity.npc .eye,
.playLonelyBoing .enemy.pawn .eye,
.playLonelyBoing .enemy.npc .eye {
  transition: transform 1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  background-color: var(--color-dark);
  height: calc(var(--base) * 0.8);
  width: calc(var(--base) * 0.6);
  border-radius: 50%;
  opacity: 0.3;
  position: absolute;
  top: calc(var(--base) * 0.45);
  transform-origin: center;
  left: calc(50% - var(--base) * 0.3);
}
#playLonelyBoing .entity.pawn .eye.blink,
#playLonelyBoing .entity.npc .eye.blink,
#playLonelyBoing .enemy.pawn .eye.blink,
#playLonelyBoing .enemy.npc .eye.blink,
.playLonelyBoing .entity.pawn .eye.blink,
.playLonelyBoing .entity.npc .eye.blink,
.playLonelyBoing .enemy.pawn .eye.blink,
.playLonelyBoing .enemy.npc .eye.blink {
  transform: scaleY(0.1);
  transition: transform 0.05s ease-out;
}
#playLonelyBoing .entity.pawn .head,
#playLonelyBoing .entity.npc .head,
#playLonelyBoing .enemy.pawn .head,
#playLonelyBoing .enemy.npc .head,
.playLonelyBoing .entity.pawn .head,
.playLonelyBoing .entity.npc .head,
.playLonelyBoing .enemy.pawn .head,
.playLonelyBoing .enemy.npc .head {
  transform-origin: center 20%;
}
#playLonelyBoing .entity.pawn .body,
#playLonelyBoing .entity.npc .body,
#playLonelyBoing .enemy.pawn .body,
#playLonelyBoing .enemy.npc .body,
.playLonelyBoing .entity.pawn .body,
.playLonelyBoing .entity.npc .body,
.playLonelyBoing .enemy.pawn .body,
.playLonelyBoing .enemy.npc .body {
  transform-origin: center 80%;
}
#playLonelyBoing .entity.pawn .base,
#playLonelyBoing .entity.npc .base,
#playLonelyBoing .enemy.pawn .base,
#playLonelyBoing .enemy.npc .base,
.playLonelyBoing .entity.pawn .base,
.playLonelyBoing .entity.npc .base,
.playLonelyBoing .enemy.pawn .base,
.playLonelyBoing .enemy.npc .base {
  transform-origin: bottom center;
}
#playLonelyBoing .entity.pawn .prop,
#playLonelyBoing .entity.npc .prop,
#playLonelyBoing .enemy.pawn .prop,
#playLonelyBoing .enemy.npc .prop,
.playLonelyBoing .entity.pawn .prop,
.playLonelyBoing .entity.npc .prop,
.playLonelyBoing .enemy.pawn .prop,
.playLonelyBoing .enemy.npc .prop {
  transform-origin: center 60%;
}
#playLonelyBoing .entity.pawn.white .head,
#playLonelyBoing .entity.npc.white .head,
#playLonelyBoing .enemy.pawn.white .head,
#playLonelyBoing .enemy.npc.white .head,
.playLonelyBoing .entity.pawn.white .head,
.playLonelyBoing .entity.npc.white .head,
.playLonelyBoing .enemy.pawn.white .head,
.playLonelyBoing .enemy.npc.white .head {
  background-image: url("/lonely-boing/_img/pawn/head-light.svg");
}
#playLonelyBoing .entity.pawn.white .body,
#playLonelyBoing .entity.npc.white .body,
#playLonelyBoing .enemy.pawn.white .body,
#playLonelyBoing .enemy.npc.white .body,
.playLonelyBoing .entity.pawn.white .body,
.playLonelyBoing .entity.npc.white .body,
.playLonelyBoing .enemy.pawn.white .body,
.playLonelyBoing .enemy.npc.white .body {
  background-image: url("/lonely-boing/_img/pawn/chest-light.svg");
}
#playLonelyBoing .entity.pawn.white .base,
#playLonelyBoing .entity.npc.white .base,
#playLonelyBoing .enemy.pawn.white .base,
#playLonelyBoing .enemy.npc.white .base,
.playLonelyBoing .entity.pawn.white .base,
.playLonelyBoing .entity.npc.white .base,
.playLonelyBoing .enemy.pawn.white .base,
.playLonelyBoing .enemy.npc.white .base {
  background-image: url("/lonely-boing/_img/pawn/base-light.svg");
}
#playLonelyBoing .entity.pawn.white .prop,
#playLonelyBoing .entity.npc.white .prop,
#playLonelyBoing .enemy.pawn.white .prop,
#playLonelyBoing .enemy.npc.white .prop,
.playLonelyBoing .entity.pawn.white .prop,
.playLonelyBoing .entity.npc.white .prop,
.playLonelyBoing .enemy.pawn.white .prop,
.playLonelyBoing .enemy.npc.white .prop {
  display: none;
}
#playLonelyBoing .entity.pawn.black .head,
#playLonelyBoing .entity.npc.black .head,
#playLonelyBoing .enemy.pawn.black .head,
#playLonelyBoing .enemy.npc.black .head,
.playLonelyBoing .entity.pawn.black .head,
.playLonelyBoing .entity.npc.black .head,
.playLonelyBoing .enemy.pawn.black .head,
.playLonelyBoing .enemy.npc.black .head {
  background-image: url("/lonely-boing/_img/pawn/head-dark.svg");
}
#playLonelyBoing .entity.pawn.black .body,
#playLonelyBoing .entity.npc.black .body,
#playLonelyBoing .enemy.pawn.black .body,
#playLonelyBoing .enemy.npc.black .body,
.playLonelyBoing .entity.pawn.black .body,
.playLonelyBoing .entity.npc.black .body,
.playLonelyBoing .enemy.pawn.black .body,
.playLonelyBoing .enemy.npc.black .body {
  background-image: url("/lonely-boing/_img/pawn/chest-dark.svg");
}
#playLonelyBoing .entity.pawn.black .base,
#playLonelyBoing .entity.npc.black .base,
#playLonelyBoing .enemy.pawn.black .base,
#playLonelyBoing .enemy.npc.black .base,
.playLonelyBoing .entity.pawn.black .base,
.playLonelyBoing .entity.npc.black .base,
.playLonelyBoing .enemy.pawn.black .base,
.playLonelyBoing .enemy.npc.black .base {
  background-image: url("/lonely-boing/_img/pawn/base-dark.svg");
}
#playLonelyBoing .entity.pawn.black .prop,
#playLonelyBoing .entity.npc.black .prop,
#playLonelyBoing .enemy.pawn.black .prop,
#playLonelyBoing .enemy.npc.black .prop,
.playLonelyBoing .entity.pawn.black .prop,
.playLonelyBoing .entity.npc.black .prop,
.playLonelyBoing .enemy.pawn.black .prop,
.playLonelyBoing .enemy.npc.black .prop {
  background-image: url("/lonely-boing/_img/pawn/staff-dark.svg");
}
#playLonelyBoing .entity.pawn.black .eye,
#playLonelyBoing .entity.npc.black .eye,
#playLonelyBoing .enemy.pawn.black .eye,
#playLonelyBoing .enemy.npc.black .eye,
.playLonelyBoing .entity.pawn.black .eye,
.playLonelyBoing .entity.npc.black .eye,
.playLonelyBoing .enemy.pawn.black .eye,
.playLonelyBoing .enemy.npc.black .eye {
  opacity: 0.6;
}
#playLonelyBoing .entity.pawn::after,
#playLonelyBoing .entity.npc::after,
#playLonelyBoing .enemy.pawn::after,
#playLonelyBoing .enemy.npc::after,
.playLonelyBoing .entity.pawn::after,
.playLonelyBoing .entity.npc::after,
.playLonelyBoing .enemy.pawn::after,
.playLonelyBoing .enemy.npc::after {
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}

#playLonelyBoing .entity.rook .sprite, #playLonelyBoing .enemy.rook .sprite,
.playLonelyBoing .entity.rook .sprite,
.playLonelyBoing .enemy.rook .sprite {
  height: 135%;
  bottom: calc(var(--base) * -0.45);
  aspect-ratio: 1;
}
#playLonelyBoing .entity.rook .streak-wrap, #playLonelyBoing .enemy.rook .streak-wrap,
.playLonelyBoing .entity.rook .streak-wrap,
.playLonelyBoing .enemy.rook .streak-wrap {
  z-index: -1;
}
#playLonelyBoing .entity.rook .foot-wrap, #playLonelyBoing .enemy.rook .foot-wrap,
.playLonelyBoing .entity.rook .foot-wrap,
.playLonelyBoing .enemy.rook .foot-wrap {
  transform-origin: center bottom;
  z-index: 0;
  display: none;
}
#playLonelyBoing .entity.rook .base-wrap, #playLonelyBoing .enemy.rook .base-wrap,
.playLonelyBoing .entity.rook .base-wrap,
.playLonelyBoing .enemy.rook .base-wrap {
  transform-origin: center bottom;
  z-index: 1;
  transform: translateX(var(--base-x, 0%)) translateY(calc((1 - var(--base-scale-y, 1)) * 0.5%)) scale(var(--base-scale-x, 1), calc(1 + (var(--base-scale-y, 1) - 1) * 0.3)) skewX(var(--base-skew, 0deg)) rotate(var(--base-rotate, 0deg));
}
#playLonelyBoing .entity.rook .head-wrap, #playLonelyBoing .enemy.rook .head-wrap,
.playLonelyBoing .entity.rook .head-wrap,
.playLonelyBoing .enemy.rook .head-wrap {
  transform-origin: bottom 60%;
  z-index: 2;
  transform: translateX(var(--head-x, 0%)) translateY(var(--head-y, 0%)) rotate(var(--head-rotate, 0deg));
}
#playLonelyBoing .entity.rook .eyes-wrap, #playLonelyBoing .enemy.rook .eyes-wrap,
.playLonelyBoing .entity.rook .eyes-wrap,
.playLonelyBoing .enemy.rook .eyes-wrap {
  transform-origin: center 60%;
  z-index: 3;
  border-radius: 50%;
  top: 10%;
  left: 24%;
  right: 24%;
  bottom: 50%;
  overflow: hidden;
}
#playLonelyBoing .entity.rook .foot, #playLonelyBoing .enemy.rook .foot,
.playLonelyBoing .entity.rook .foot,
.playLonelyBoing .enemy.rook .foot {
  transform-origin: center bottom;
  background-image: url("/lonely-boing/_img/rook/foot.svg");
  background-position: center center;
}
#playLonelyBoing .entity.rook .base, #playLonelyBoing .enemy.rook .base,
.playLonelyBoing .entity.rook .base,
.playLonelyBoing .enemy.rook .base {
  transform-origin: center bottom;
  background-position: center center;
  transition: transform 0.15s ease-out;
}
#playLonelyBoing .entity.rook .head, #playLonelyBoing .enemy.rook .head,
.playLonelyBoing .entity.rook .head,
.playLonelyBoing .enemy.rook .head {
  transform-origin: center 60%;
  background-position: center center;
}
#playLonelyBoing .entity.rook .eyes, #playLonelyBoing .enemy.rook .eyes,
.playLonelyBoing .entity.rook .eyes,
.playLonelyBoing .enemy.rook .eyes {
  transform: translateX(calc(var(--eye-x, 0%))) translateY(var(--eye-y, 0%));
}
#playLonelyBoing .entity.rook .streak, #playLonelyBoing .enemy.rook .streak,
.playLonelyBoing .entity.rook .streak,
.playLonelyBoing .enemy.rook .streak {
  position: absolute;
  right: 50%;
  top: 20%;
  height: 60%;
  width: calc(var(--base) * 20);
  background-image: url("/lonely-boing/_img/rook/streak.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  transform: scaleX(0);
  transform-origin: right center;
  opacity: 0.6;
  transition: transform 0.2s ease-out;
}
#playLonelyBoing .entity.rook.streak-fast.streak-left .streak, #playLonelyBoing .enemy.rook.streak-fast.streak-left .streak,
.playLonelyBoing .entity.rook.streak-fast.streak-left .streak,
.playLonelyBoing .enemy.rook.streak-fast.streak-left .streak {
  transform: scaleX(-2);
  transition: transform 0.08s ease-out;
}
#playLonelyBoing .entity.rook.streak-fast.streak-right .streak, #playLonelyBoing .enemy.rook.streak-fast.streak-right .streak,
.playLonelyBoing .entity.rook.streak-fast.streak-right .streak,
.playLonelyBoing .enemy.rook.streak-fast.streak-right .streak {
  transform: scaleX(2);
  transition: transform 0.08s ease-out;
}
#playLonelyBoing .entity.rook.white .base, #playLonelyBoing .enemy.rook.white .base,
.playLonelyBoing .entity.rook.white .base,
.playLonelyBoing .enemy.rook.white .base {
  background-image: url("/lonely-boing/_img/rook/base-light.svg");
}
#playLonelyBoing .entity.rook.white .head, #playLonelyBoing .enemy.rook.white .head,
.playLonelyBoing .entity.rook.white .head,
.playLonelyBoing .enemy.rook.white .head {
  background-image: url("/lonely-boing/_img/rook/head-light.svg");
}
#playLonelyBoing .entity.rook.black .base, #playLonelyBoing .enemy.rook.black .base,
.playLonelyBoing .entity.rook.black .base,
.playLonelyBoing .enemy.rook.black .base {
  background-image: url("/lonely-boing/_img/rook/base-dark.svg");
}
#playLonelyBoing .entity.rook.black .head, #playLonelyBoing .enemy.rook.black .head,
.playLonelyBoing .entity.rook.black .head,
.playLonelyBoing .enemy.rook.black .head {
  background-image: url("/lonely-boing/_img/rook/head-dark.svg");
}
#playLonelyBoing .entity.rook.black .eye-l, #playLonelyBoing .entity.rook.black .eye-r, #playLonelyBoing .enemy.rook.black .eye-l, #playLonelyBoing .enemy.rook.black .eye-r,
.playLonelyBoing .entity.rook.black .eye-l,
.playLonelyBoing .entity.rook.black .eye-r,
.playLonelyBoing .enemy.rook.black .eye-l,
.playLonelyBoing .enemy.rook.black .eye-r {
  opacity: 0.6;
}
#playLonelyBoing .entity.rook.black.hit-flash .base, #playLonelyBoing .enemy.rook.black.hit-flash .base,
.playLonelyBoing .entity.rook.black.hit-flash .base,
.playLonelyBoing .enemy.rook.black.hit-flash .base {
  background-image: url("/lonely-boing/_img/rook/base-light.svg");
}
#playLonelyBoing .entity.rook.black.hit-flash .head, #playLonelyBoing .enemy.rook.black.hit-flash .head,
.playLonelyBoing .entity.rook.black.hit-flash .head,
.playLonelyBoing .enemy.rook.black.hit-flash .head {
  background-image: url("/lonely-boing/_img/rook/head-light.svg");
}
#playLonelyBoing .entity.rook.black.hit-flash .eye-l, #playLonelyBoing .entity.rook.black.hit-flash .eye-r, #playLonelyBoing .enemy.rook.black.hit-flash .eye-l, #playLonelyBoing .enemy.rook.black.hit-flash .eye-r,
.playLonelyBoing .entity.rook.black.hit-flash .eye-l,
.playLonelyBoing .entity.rook.black.hit-flash .eye-r,
.playLonelyBoing .enemy.rook.black.hit-flash .eye-l,
.playLonelyBoing .enemy.rook.black.hit-flash .eye-r {
  opacity: 0.2;
}
#playLonelyBoing .entity.rook .eyes, #playLonelyBoing .enemy.rook .eyes,
.playLonelyBoing .entity.rook .eyes,
.playLonelyBoing .enemy.rook .eyes {
  position: absolute;
  top: 10%;
  bottom: 0;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  overflow: hidden;
  left: 20%;
  right: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20%;
  transition: transform 0.15s ease-out;
}
#playLonelyBoing .entity.rook .eyes.blink .eye-l, #playLonelyBoing .entity.rook .eyes.blink .eye-r, #playLonelyBoing .enemy.rook .eyes.blink .eye-l, #playLonelyBoing .enemy.rook .eyes.blink .eye-r,
.playLonelyBoing .entity.rook .eyes.blink .eye-l,
.playLonelyBoing .entity.rook .eyes.blink .eye-r,
.playLonelyBoing .enemy.rook .eyes.blink .eye-l,
.playLonelyBoing .enemy.rook .eyes.blink .eye-r {
  height: calc(var(--base) * 0.15);
}
#playLonelyBoing .entity.rook .eye-l, #playLonelyBoing .entity.rook .eye-r, #playLonelyBoing .enemy.rook .eye-l, #playLonelyBoing .enemy.rook .eye-r,
.playLonelyBoing .entity.rook .eye-l,
.playLonelyBoing .entity.rook .eye-r,
.playLonelyBoing .enemy.rook .eye-l,
.playLonelyBoing .enemy.rook .eye-r {
  background-color: var(--color-dark);
  height: 20%;
  width: 24%;
  border-radius: 100%;
  opacity: 0.2;
  transition: height 0.08s ease-out;
}
#playLonelyBoing .entity.rook.rook-charging .base, #playLonelyBoing .enemy.rook.rook-charging .base,
.playLonelyBoing .entity.rook.rook-charging .base,
.playLonelyBoing .enemy.rook.rook-charging .base {
  animation: rookBaseShake 0.2s ease-in-out infinite;
}
#playLonelyBoing .entity.rook.rook-charging .head, #playLonelyBoing .enemy.rook.rook-charging .head,
.playLonelyBoing .entity.rook.rook-charging .head,
.playLonelyBoing .enemy.rook.rook-charging .head {
  animation: rookTopGlow 1s ease-in-out infinite alternate;
}
#playLonelyBoing .entity.rook.rook-attacking .head, #playLonelyBoing .enemy.rook.rook-attacking .head,
.playLonelyBoing .entity.rook.rook-attacking .head,
.playLonelyBoing .enemy.rook.rook-attacking .head {
  transform: translateX(-50%) scale(1.1);
  transition: transform 0.15s ease-out;
}
#playLonelyBoing .entity.rook.moving .base, #playLonelyBoing .enemy.rook.moving .base,
.playLonelyBoing .entity.rook.moving .base,
.playLonelyBoing .enemy.rook.moving .base {
  animation: rookWalk 0.6s ease-in-out infinite;
}
#playLonelyBoing .entity.rook.damaged-left .head, #playLonelyBoing .enemy.rook.damaged-left .head,
.playLonelyBoing .entity.rook.damaged-left .head,
.playLonelyBoing .enemy.rook.damaged-left .head {
  transform: translateX(-4%) translateY(10%) rotate(-12deg);
}
#playLonelyBoing .entity.rook.damaged-right .head, #playLonelyBoing .enemy.rook.damaged-right .head,
.playLonelyBoing .entity.rook.damaged-right .head,
.playLonelyBoing .enemy.rook.damaged-right .head {
  transform: translateX(4%) translateY(10%) rotate(12deg);
}
#playLonelyBoing .entity.rook.damaged-left .base, #playLonelyBoing .enemy.rook.damaged-left .base,
.playLonelyBoing .entity.rook.damaged-left .base,
.playLonelyBoing .enemy.rook.damaged-left .base {
  transform: translateX(4%) scale(1, 0.85) skew(-10deg);
}
#playLonelyBoing .entity.rook.damaged-right .base, #playLonelyBoing .enemy.rook.damaged-right .base,
.playLonelyBoing .entity.rook.damaged-right .base,
.playLonelyBoing .enemy.rook.damaged-right .base {
  transform: translateX(-4%) scale(1, 0.85) skew(10deg);
}
#playLonelyBoing .entity.rook.rook-sleeping .head, #playLonelyBoing .enemy.rook.rook-sleeping .head,
.playLonelyBoing .entity.rook.rook-sleeping .head,
.playLonelyBoing .enemy.rook.rook-sleeping .head {
  transform: translateY(15%) rotate(-5deg);
}
#playLonelyBoing .entity.rook.rook-sleeping .base, #playLonelyBoing .enemy.rook.rook-sleeping .base,
.playLonelyBoing .entity.rook.rook-sleeping .base,
.playLonelyBoing .enemy.rook.rook-sleeping .base {
  transform: scaleY(0.95);
}
#playLonelyBoing .entity.rook.rook-sleeping .eye-l, #playLonelyBoing .entity.rook.rook-sleeping .eye-r, #playLonelyBoing .enemy.rook.rook-sleeping .eye-l, #playLonelyBoing .enemy.rook.rook-sleeping .eye-r,
.playLonelyBoing .entity.rook.rook-sleeping .eye-l,
.playLonelyBoing .entity.rook.rook-sleeping .eye-r,
.playLonelyBoing .enemy.rook.rook-sleeping .eye-l,
.playLonelyBoing .enemy.rook.rook-sleeping .eye-r {
  height: calc(var(--base) * 0.15) !important;
}
#playLonelyBoing .entity.rook.rook-waking .head, #playLonelyBoing .enemy.rook.rook-waking .head,
.playLonelyBoing .entity.rook.rook-waking .head,
.playLonelyBoing .enemy.rook.rook-waking .head {
  transform: translateY(-5%);
}
#playLonelyBoing .entity.rook.rook-waking .base, #playLonelyBoing .enemy.rook.rook-waking .base,
.playLonelyBoing .entity.rook.rook-waking .base,
.playLonelyBoing .enemy.rook.rook-waking .base {
  transform: scaleY(1.05);
}
#playLonelyBoing .entity.rook.walk-pause .head, #playLonelyBoing .enemy.rook.walk-pause .head,
.playLonelyBoing .entity.rook.walk-pause .head,
.playLonelyBoing .enemy.rook.walk-pause .head {
  transform: translateY(8%);
}
#playLonelyBoing .entity.rook.walk-pause .base, #playLonelyBoing .enemy.rook.walk-pause .base,
.playLonelyBoing .entity.rook.walk-pause .base,
.playLonelyBoing .enemy.rook.walk-pause .base {
  transform: scaleY(0.92) scaleX(1.06);
}
#playLonelyBoing .entity.rook.rook-dash-windup .head, #playLonelyBoing .entity.rook.rook-dash-windup .base, #playLonelyBoing .enemy.rook.rook-dash-windup .head, #playLonelyBoing .enemy.rook.rook-dash-windup .base,
.playLonelyBoing .entity.rook.rook-dash-windup .head,
.playLonelyBoing .entity.rook.rook-dash-windup .base,
.playLonelyBoing .enemy.rook.rook-dash-windup .head,
.playLonelyBoing .enemy.rook.rook-dash-windup .base {
  transition: transform 0.2s ease-out;
}
#playLonelyBoing .entity.rook.rook-dash-windup .head, #playLonelyBoing .enemy.rook.rook-dash-windup .head,
.playLonelyBoing .entity.rook.rook-dash-windup .head,
.playLonelyBoing .enemy.rook.rook-dash-windup .head {
  transform: translateX(-8%) translateY(4%) rotate(-14deg) scale(1.08);
}
#playLonelyBoing .entity.rook.rook-dash-windup .base, #playLonelyBoing .enemy.rook.rook-dash-windup .base,
.playLonelyBoing .entity.rook.rook-dash-windup .base,
.playLonelyBoing .enemy.rook.rook-dash-windup .base {
  transform: translateX(-6%) scaleX(1.12) scaleY(0.9) skewX(-10deg);
}
#playLonelyBoing .entity.rook.rook-dash-windup.facing-left .head, #playLonelyBoing .enemy.rook.rook-dash-windup.facing-left .head,
.playLonelyBoing .entity.rook.rook-dash-windup.facing-left .head,
.playLonelyBoing .enemy.rook.rook-dash-windup.facing-left .head {
  transform: translateX(8%) translateY(4%) rotate(14deg) scale(1.08);
}
#playLonelyBoing .entity.rook.rook-dash-windup.facing-left .base, #playLonelyBoing .enemy.rook.rook-dash-windup.facing-left .base,
.playLonelyBoing .entity.rook.rook-dash-windup.facing-left .base,
.playLonelyBoing .enemy.rook.rook-dash-windup.facing-left .base {
  transform: translateX(6%) scaleX(1.12) scaleY(0.9) skewX(10deg);
}
#playLonelyBoing .entity.rook.rook-dashing .head, #playLonelyBoing .entity.rook.rook-dashing .base, #playLonelyBoing .enemy.rook.rook-dashing .head, #playLonelyBoing .enemy.rook.rook-dashing .base,
.playLonelyBoing .entity.rook.rook-dashing .head,
.playLonelyBoing .entity.rook.rook-dashing .base,
.playLonelyBoing .enemy.rook.rook-dashing .head,
.playLonelyBoing .enemy.rook.rook-dashing .base {
  transition: transform 0.04s ease-out;
}
#playLonelyBoing .entity.rook.rook-dashing .head, #playLonelyBoing .enemy.rook.rook-dashing .head,
.playLonelyBoing .entity.rook.rook-dashing .head,
.playLonelyBoing .enemy.rook.rook-dashing .head {
  transform: translateX(14%) rotate(12deg);
}
#playLonelyBoing .entity.rook.rook-dashing .base, #playLonelyBoing .enemy.rook.rook-dashing .base,
.playLonelyBoing .entity.rook.rook-dashing .base,
.playLonelyBoing .enemy.rook.rook-dashing .base {
  transform: translateX(-4%) scaleX(0.92) skewX(-6deg);
}
#playLonelyBoing .entity.rook.rook-dashing.facing-left .head, #playLonelyBoing .enemy.rook.rook-dashing.facing-left .head,
.playLonelyBoing .entity.rook.rook-dashing.facing-left .head,
.playLonelyBoing .enemy.rook.rook-dashing.facing-left .head {
  transform: translateX(-14%) rotate(-12deg);
}
#playLonelyBoing .entity.rook.rook-dashing.facing-left .base, #playLonelyBoing .enemy.rook.rook-dashing.facing-left .base,
.playLonelyBoing .entity.rook.rook-dashing.facing-left .base,
.playLonelyBoing .enemy.rook.rook-dashing.facing-left .base {
  transform: translateX(4%) scaleX(0.92) skewX(6deg);
}
#playLonelyBoing .entity.rook.rook-stomp-windup .head, #playLonelyBoing .enemy.rook.rook-stomp-windup .head,
.playLonelyBoing .entity.rook.rook-stomp-windup .head,
.playLonelyBoing .enemy.rook.rook-stomp-windup .head {
  transform: translateY(-14%) scaleY(1.08);
}
#playLonelyBoing .entity.rook.rook-stomp-windup .base, #playLonelyBoing .enemy.rook.rook-stomp-windup .base,
.playLonelyBoing .entity.rook.rook-stomp-windup .base,
.playLonelyBoing .enemy.rook.rook-stomp-windup .base {
  transform: scaleY(1.18) scaleX(0.88);
}
#playLonelyBoing .entity.rook.rook-stomping .head, #playLonelyBoing .enemy.rook.rook-stomping .head,
.playLonelyBoing .entity.rook.rook-stomping .head,
.playLonelyBoing .enemy.rook.rook-stomping .head {
  transform: translateY(10%) scaleY(0.85);
}
#playLonelyBoing .entity.rook.rook-stomping .base, #playLonelyBoing .enemy.rook.rook-stomping .base,
.playLonelyBoing .entity.rook.rook-stomping .base,
.playLonelyBoing .enemy.rook.rook-stomping .base {
  transform: scaleY(0.8) scaleX(1.2);
}
#playLonelyBoing .entity.rook.proximity-right:not(.slip-right):not(.slip-left):not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base, #playLonelyBoing .enemy.rook.proximity-right:not(.slip-right):not(.slip-left):not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .entity.rook.proximity-right:not(.slip-right):not(.slip-left):not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .enemy.rook.proximity-right:not(.slip-right):not(.slip-left):not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base {
  transform: rotate(3deg);
}
#playLonelyBoing .entity.rook.proximity-left:not(.slip-right):not(.slip-left):not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base, #playLonelyBoing .enemy.rook.proximity-left:not(.slip-right):not(.slip-left):not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .entity.rook.proximity-left:not(.slip-right):not(.slip-left):not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .enemy.rook.proximity-left:not(.slip-right):not(.slip-left):not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base {
  transform: rotate(-3deg);
}
#playLonelyBoing .entity.rook.slip-right:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base, #playLonelyBoing .enemy.rook.slip-right:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .entity.rook.slip-right:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .enemy.rook.slip-right:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base {
  transform: rotate(8deg);
}
#playLonelyBoing .entity.rook.slip-left:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base, #playLonelyBoing .enemy.rook.slip-left:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .entity.rook.slip-left:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .enemy.rook.slip-left:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base {
  transform: rotate(-8deg);
}
#playLonelyBoing .entity.rook.slip-right.slip-off:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base, #playLonelyBoing .enemy.rook.slip-right.slip-off:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .entity.rook.slip-right.slip-off:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .enemy.rook.slip-right.slip-off:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base {
  transform: rotate(14deg);
}
#playLonelyBoing .entity.rook.slip-left.slip-off:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base, #playLonelyBoing .enemy.rook.slip-left.slip-off:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .entity.rook.slip-left.slip-off:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base,
.playLonelyBoing .enemy.rook.slip-left.slip-off:not(.rook-stomping):not(.rook-stomp-windup):not(.corpse) .base {
  transform: rotate(-14deg);
}
#playLonelyBoing .entity.rook.corpse, #playLonelyBoing .enemy.rook.corpse,
.playLonelyBoing .entity.rook.corpse,
.playLonelyBoing .enemy.rook.corpse {
  transform-origin: center bottom;
}
#playLonelyBoing .entity.rook.corpse .base-wrap, #playLonelyBoing .enemy.rook.corpse .base-wrap,
.playLonelyBoing .entity.rook.corpse .base-wrap,
.playLonelyBoing .enemy.rook.corpse .base-wrap {
  transform: none !important;
}
#playLonelyBoing .entity.rook.corpse .head-wrap, #playLonelyBoing .enemy.rook.corpse .head-wrap,
.playLonelyBoing .entity.rook.corpse .head-wrap,
.playLonelyBoing .enemy.rook.corpse .head-wrap {
  transform: translateX(-8%) translateY(20%) rotate(-90deg) !important;
}
#playLonelyBoing .entity.rook.corpse .eye-l, #playLonelyBoing .entity.rook.corpse .eye-r, #playLonelyBoing .enemy.rook.corpse .eye-l, #playLonelyBoing .enemy.rook.corpse .eye-r,
.playLonelyBoing .entity.rook.corpse .eye-l,
.playLonelyBoing .entity.rook.corpse .eye-r,
.playLonelyBoing .enemy.rook.corpse .eye-l,
.playLonelyBoing .enemy.rook.corpse .eye-r {
  height: calc(var(--base) * 0.25) !important;
  opacity: 0.4;
}
#playLonelyBoing .entity.rook.corpse.dead-left .head-wrap, #playLonelyBoing .enemy.rook.corpse.dead-left .head-wrap,
.playLonelyBoing .entity.rook.corpse.dead-left .head-wrap,
.playLonelyBoing .enemy.rook.corpse.dead-left .head-wrap {
  transform: translateX(-10%) translateY(10%) rotate(-90deg) !important;
}
#playLonelyBoing .entity.rook.corpse.dead-right .head-wrap, #playLonelyBoing .enemy.rook.corpse.dead-right .head-wrap,
.playLonelyBoing .entity.rook.corpse.dead-right .head-wrap,
.playLonelyBoing .enemy.rook.corpse.dead-right .head-wrap {
  transform: translateX(10%) translateY(10%) rotate(90deg) !important;
}

#playLonelyBoing .entity.knight .sprite, #playLonelyBoing .enemy.knight .sprite,
.playLonelyBoing .entity.knight .sprite,
.playLonelyBoing .enemy.knight .sprite {
  height: calc(var(--base) * 6);
  aspect-ratio: 1;
}
#playLonelyBoing .entity.knight .base, #playLonelyBoing .enemy.knight .base,
.playLonelyBoing .entity.knight .base,
.playLonelyBoing .enemy.knight .base {
  transform-origin: center bottom;
}
#playLonelyBoing .entity.knight .body, #playLonelyBoing .enemy.knight .body,
.playLonelyBoing .entity.knight .body,
.playLonelyBoing .enemy.knight .body {
  transform-origin: center 60%;
}
#playLonelyBoing .entity.knight .head, #playLonelyBoing .enemy.knight .head,
.playLonelyBoing .entity.knight .head,
.playLonelyBoing .enemy.knight .head {
  transform-origin: center 40%;
}
#playLonelyBoing .entity.knight.facing-left .head, #playLonelyBoing .enemy.knight.facing-left .head,
.playLonelyBoing .entity.knight.facing-left .head,
.playLonelyBoing .enemy.knight.facing-left .head {
  transform: translateX(-5%);
}
#playLonelyBoing .entity.knight.facing-right .head, #playLonelyBoing .enemy.knight.facing-right .head,
.playLonelyBoing .entity.knight.facing-right .head,
.playLonelyBoing .enemy.knight.facing-right .head {
  transform: translateX(5%);
}
#playLonelyBoing .entity.knight.hop-windup .base, #playLonelyBoing .enemy.knight.hop-windup .base,
.playLonelyBoing .entity.knight.hop-windup .base,
.playLonelyBoing .enemy.knight.hop-windup .base {
  transform: scaleY(0.85) scaleX(1.1);
}
#playLonelyBoing .entity.knight.hop-windup .body, #playLonelyBoing .enemy.knight.hop-windup .body,
.playLonelyBoing .entity.knight.hop-windup .body,
.playLonelyBoing .enemy.knight.hop-windup .body {
  transform: scaleY(0.9) translateY(5%);
}
#playLonelyBoing .entity.knight.hop-windup .head, #playLonelyBoing .enemy.knight.hop-windup .head,
.playLonelyBoing .entity.knight.hop-windup .head,
.playLonelyBoing .enemy.knight.hop-windup .head {
  transform: translateY(10%);
}
#playLonelyBoing .entity.knight.hopping .base, #playLonelyBoing .enemy.knight.hopping .base,
.playLonelyBoing .entity.knight.hopping .base,
.playLonelyBoing .enemy.knight.hopping .base {
  transform: scaleY(1.1) scaleX(0.9);
}
#playLonelyBoing .entity.knight.hopping .body, #playLonelyBoing .enemy.knight.hopping .body,
.playLonelyBoing .entity.knight.hopping .body,
.playLonelyBoing .enemy.knight.hopping .body {
  transform: scaleY(1.1);
}
#playLonelyBoing .entity.knight.hopping .head, #playLonelyBoing .enemy.knight.hopping .head,
.playLonelyBoing .entity.knight.hopping .head,
.playLonelyBoing .enemy.knight.hopping .head {
  transform: translateY(-10%);
}
#playLonelyBoing .entity.knight.landing .base, #playLonelyBoing .enemy.knight.landing .base,
.playLonelyBoing .entity.knight.landing .base,
.playLonelyBoing .enemy.knight.landing .base {
  transform: scaleY(0.8) scaleX(1.15);
}
#playLonelyBoing .entity.knight.landing .body, #playLonelyBoing .enemy.knight.landing .body,
.playLonelyBoing .entity.knight.landing .body,
.playLonelyBoing .enemy.knight.landing .body {
  transform: scaleY(0.85) translateY(8%);
}
#playLonelyBoing .entity.knight.landing .head, #playLonelyBoing .enemy.knight.landing .head,
.playLonelyBoing .entity.knight.landing .head,
.playLonelyBoing .enemy.knight.landing .head {
  transform: translateY(12%);
}
#playLonelyBoing .entity.knight:empty, #playLonelyBoing .enemy.knight:empty,
.playLonelyBoing .entity.knight:empty,
.playLonelyBoing .enemy.knight:empty {
  background: #A0522D;
}
#playLonelyBoing .entity.knight .eye, #playLonelyBoing .enemy.knight .eye,
.playLonelyBoing .entity.knight .eye,
.playLonelyBoing .enemy.knight .eye {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 20%;
  height: 25%;
  margin-left: -10%;
  border-radius: 50%;
  background: var(--color-dark);
  opacity: 0.3;
}
#playLonelyBoing .entity.knight.facing-right .eye, #playLonelyBoing .enemy.knight.facing-right .eye,
.playLonelyBoing .entity.knight.facing-right .eye,
.playLonelyBoing .enemy.knight.facing-right .eye {
  transform: translateX(30%);
}
#playLonelyBoing .entity.knight.facing-left .eye, #playLonelyBoing .enemy.knight.facing-left .eye,
.playLonelyBoing .entity.knight.facing-left .eye,
.playLonelyBoing .enemy.knight.facing-left .eye {
  transform: translateX(-30%);
}
#playLonelyBoing .entity.knight.white .base, #playLonelyBoing .enemy.knight.white .base,
.playLonelyBoing .entity.knight.white .base,
.playLonelyBoing .enemy.knight.white .base {
  background-image: url("/lonely-boing/_img/knight/base-light.svg");
}
#playLonelyBoing .entity.knight.white .body, #playLonelyBoing .enemy.knight.white .body,
.playLonelyBoing .entity.knight.white .body,
.playLonelyBoing .enemy.knight.white .body {
  background-image: url("/lonely-boing/_img/knight/body-light.svg");
}
#playLonelyBoing .entity.knight.white .head, #playLonelyBoing .enemy.knight.white .head,
.playLonelyBoing .entity.knight.white .head,
.playLonelyBoing .enemy.knight.white .head {
  background-image: url("/lonely-boing/_img/knight/head-light.svg");
}
#playLonelyBoing .entity.knight.black .base, #playLonelyBoing .enemy.knight.black .base,
.playLonelyBoing .entity.knight.black .base,
.playLonelyBoing .enemy.knight.black .base {
  background-image: url("/lonely-boing/_img/knight/base-dark.svg");
}
#playLonelyBoing .entity.knight.black .body, #playLonelyBoing .enemy.knight.black .body,
.playLonelyBoing .entity.knight.black .body,
.playLonelyBoing .enemy.knight.black .body {
  background-image: url("/lonely-boing/_img/knight/body-dark.svg");
}
#playLonelyBoing .entity.knight.black .head, #playLonelyBoing .enemy.knight.black .head,
.playLonelyBoing .entity.knight.black .head,
.playLonelyBoing .enemy.knight.black .head {
  background-image: url("/lonely-boing/_img/knight/head-dark.svg");
}
#playLonelyBoing .entity.knight.black .eye, #playLonelyBoing .enemy.knight.black .eye,
.playLonelyBoing .entity.knight.black .eye,
.playLonelyBoing .enemy.knight.black .eye {
  opacity: 0.5;
}

#playLonelyBoing .entity.walker,
#playLonelyBoing .entity.stool,
.playLonelyBoing .entity.walker,
.playLonelyBoing .entity.stool {
  rotate: 0deg;
  scale: 1 1;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
}
#playLonelyBoing .entity.walker .sprite,
#playLonelyBoing .entity.stool .sprite,
.playLonelyBoing .entity.walker .sprite,
.playLonelyBoing .entity.stool .sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#playLonelyBoing .entity.walker .legs,
#playLonelyBoing .entity.stool .legs,
.playLonelyBoing .entity.walker .legs,
.playLonelyBoing .entity.stool .legs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#playLonelyBoing .entity.walker .legs path,
#playLonelyBoing .entity.stool .legs path,
.playLonelyBoing .entity.walker .legs path,
.playLonelyBoing .entity.stool .legs path {
  fill: none;
  stroke: var(--color-light);
  stroke-linecap: butt;
  stroke-linejoin: round;
}
#playLonelyBoing .entity.walker .legs path.bar,
#playLonelyBoing .entity.stool .legs path.bar,
.playLonelyBoing .entity.walker .legs path.bar,
.playLonelyBoing .entity.stool .legs path.bar {
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
}
#playLonelyBoing .entity.walker .body,
#playLonelyBoing .entity.stool .body,
.playLonelyBoing .entity.walker .body,
.playLonelyBoing .entity.stool .body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 28%;
  background: var(--color-light);
  border-radius: calc(var(--base) * 0.08);
}
#playLonelyBoing .entity.walker .eye,
#playLonelyBoing .entity.stool .eye,
.playLonelyBoing .entity.walker .eye,
.playLonelyBoing .entity.stool .eye {
  position: absolute;
  left: 90%;
  top: 8%;
  height: calc(var(--base) * 0.42);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-dark);
  opacity: 0.2;
}
#playLonelyBoing .entity.walker .eye.blink,
#playLonelyBoing .entity.stool .eye.blink,
.playLonelyBoing .entity.walker .eye.blink,
.playLonelyBoing .entity.stool .eye.blink {
  transform: translate(-50%, -50%) scaleY(0.12);
}
#playLonelyBoing .entity.walker.corpse .body,
#playLonelyBoing .entity.stool.corpse .body,
.playLonelyBoing .entity.walker.corpse .body,
.playLonelyBoing .entity.stool.corpse .body {
  opacity: 0.6;
}
#playLonelyBoing .entity.walker.corpse .eye,
#playLonelyBoing .entity.stool.corpse .eye,
.playLonelyBoing .entity.walker.corpse .eye,
.playLonelyBoing .entity.stool.corpse .eye {
  display: none;
}

#playLonelyBoing .entity.chick,
.playLonelyBoing .entity.chick {
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
  rotate: 0deg;
  scale: 1 1;
  transition: none;
}
#playLonelyBoing .entity.chick .sprite,
.playLonelyBoing .entity.chick .sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center;
  --chick-raise: 0.3;
  translate: calc(var(--roll-x, 0) * var(--base)) calc((var(--roll-lift, 0) + var(--chick-raise)) * var(--base) * -1);
  rotate: calc(var(--roll-rot, 0) * 1deg);
}
#playLonelyBoing .entity.chick .shadow,
.playLonelyBoing .entity.chick .shadow {
  --shadow-w: 2.8;
  --shadow-h: 1.2;
  --shadow-drop: 0.95;
  --shadow-opacity: 0.5;
  --shadow-wide: 5.2;
  --shadow-wide-opacity: 0.4;
}
#playLonelyBoing .entity.chick .legs,
.playLonelyBoing .entity.chick .legs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#playLonelyBoing .entity.chick .legs path,
.playLonelyBoing .entity.chick .legs path {
  fill: none;
  stroke: var(--color-light);
  stroke-linecap: butt;
  stroke-linejoin: round;
}
#playLonelyBoing .entity.chick .legs path.bar,
.playLonelyBoing .entity.chick .legs path.bar {
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
}
#playLonelyBoing .entity.chick .body,
.playLonelyBoing .entity.chick .body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: none;
}
#playLonelyBoing .entity.chick .eye,
.playLonelyBoing .entity.chick .eye {
  position: absolute;
  left: 78%;
  top: 15%;
  height: calc(var(--base) * 0.3);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-dark);
  opacity: 0.2;
}
#playLonelyBoing .entity.chick .eye.blink,
.playLonelyBoing .entity.chick .eye.blink {
  transform: translate(-50%, -50%) scaleY(0.12);
}

#playLonelyBoing .entity.owl,
.playLonelyBoing .entity.owl {
  rotate: 0deg;
  scale: 1 1;
  translate: calc(var(--x, 0) * var(--base)) calc(var(--y, 0) * var(--base) * -1);
  transition: none;
}
#playLonelyBoing .entity.owl .sprite,
.playLonelyBoing .entity.owl .sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#playLonelyBoing .entity.owl .shadow,
.playLonelyBoing .entity.owl .shadow {
  --shadow-w: 3.2;
  --shadow-h: 1.1;
  --shadow-drop: 0.95;
  --shadow-opacity: 0.5;
  --shadow-wide: 5;
  --shadow-wide-opacity: 0.4;
}
#playLonelyBoing .entity.owl .body,
#playLonelyBoing .entity.owl .ear,
#playLonelyBoing .entity.owl .head-l,
#playLonelyBoing .entity.owl .head-r,
.playLonelyBoing .entity.owl .body,
.playLonelyBoing .entity.owl .ear,
.playLonelyBoing .entity.owl .head-l,
.playLonelyBoing .entity.owl .head-r {
  position: absolute;
  background: var(--color-light);
}
#playLonelyBoing .entity.owl .shade,
.playLonelyBoing .entity.owl .shade {
  position: absolute;
  left: -18%;
  right: -18%;
  top: 6%;
  height: 150%;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 42%, color-mix(in srgb, var(--color-dark) 26%, transparent) 0%, color-mix(in srgb, var(--color-dark) 12%, transparent) 40%, transparent 68%);
}
#playLonelyBoing .entity.owl .ear,
.playLonelyBoing .entity.owl .ear {
  top: 12.7%;
  width: 45%;
  height: 18.5%;
  will-change: rotate;
}
#playLonelyBoing .entity.owl .ear-l,
.playLonelyBoing .entity.owl .ear-l {
  left: 5%;
  transform-origin: 100% 0;
  rotate: 36deg;
}
#playLonelyBoing .entity.owl .ear-r,
.playLonelyBoing .entity.owl .ear-r {
  right: 5%;
  transform-origin: 0 0;
  rotate: -36deg;
}
#playLonelyBoing .entity.owl .torso,
#playLonelyBoing .entity.owl .body-wrap,
.playLonelyBoing .entity.owl .torso,
.playLonelyBoing .entity.owl .body-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
#playLonelyBoing .entity.owl .body-wrap,
.playLonelyBoing .entity.owl .body-wrap {
  transform-origin: 50% 66.25%;
}
#playLonelyBoing .entity.owl .head-wrap,
.playLonelyBoing .entity.owl .head-wrap {
  position: absolute;
  left: -6%;
  top: 32%;
  width: 112%;
  height: 41%;
  transform-origin: 50% 100%;
  will-change: transform;
}
#playLonelyBoing .entity.owl .legs,
.playLonelyBoing .entity.owl .legs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#playLonelyBoing .entity.owl .legs path,
.playLonelyBoing .entity.owl .legs path {
  fill: none;
  stroke: var(--color-light);
  stroke-linecap: butt;
  stroke-linejoin: round;
}
#playLonelyBoing .entity.owl .body,
.playLonelyBoing .entity.owl .body {
  left: 9.5%;
  bottom: 9%;
  width: 81%;
  aspect-ratio: 1;
  height: auto;
  transform-origin: center;
  border-radius: 50% 50% 50% 0;
  rotate: 0deg;
  transition: rotate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
#playLonelyBoing .entity.owl.facing-left .body,
.playLonelyBoing .entity.owl.facing-left .body {
  rotate: -90deg;
}
#playLonelyBoing .entity.owl .head,
.playLonelyBoing .entity.owl .head {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 95%;
  will-change: transform;
}
#playLonelyBoing .entity.owl .head-l,
#playLonelyBoing .entity.owl .head-r,
.playLonelyBoing .entity.owl .head-l,
.playLonelyBoing .entity.owl .head-r {
  top: 0;
  width: 60%;
  height: 100%;
}
#playLonelyBoing .entity.owl .head-l,
.playLonelyBoing .entity.owl .head-l {
  left: 0;
  border-radius: 50% 50% 0 50%;
}
#playLonelyBoing .entity.owl .head-r,
.playLonelyBoing .entity.owl .head-r {
  right: 0;
  border-radius: 50% 50% 50% 0;
}
#playLonelyBoing .entity.owl .eye,
.playLonelyBoing .entity.owl .eye {
  position: absolute;
  top: 38.7%;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  transform-origin: center;
  will-change: transform;
}
#playLonelyBoing .entity.owl .eye-l,
.playLonelyBoing .entity.owl .eye-l {
  left: 17.5%;
}
#playLonelyBoing .entity.owl .eye-r,
.playLonelyBoing .entity.owl .eye-r {
  right: 16.5%;
}
#playLonelyBoing .entity.owl .pupil,
.playLonelyBoing .entity.owl .pupil {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-dark) 30%, transparent);
  will-change: transform;
}
#playLonelyBoing .entity.owl .beak,
.playLonelyBoing .entity.owl .beak {
  position: absolute;
  left: 42.5%;
  top: 78%;
  width: 15%;
  height: 22%;
  will-change: transform;
  background: color-mix(in srgb, var(--color-dark) 30%, transparent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#playLonelyBoing .slash-ray-debug,
.playLonelyBoing .slash-ray-debug {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px;
  background-color: #ff0000;
  border-radius: 50%;
  z-index: 9999;
  pointer-events: none;
  display: none;
}
@keyframes hitOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
#playLonelyBoing .slash-hit,
.playLonelyBoing .slash-hit {
  position: absolute;
  width: calc(var(--base) * 1);
  height: calc(var(--base) * 1);
  background-color: var(--color-dark);
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--base) * 1) calc(var(--base) * 0.5) var(--color-dark);
  opacity: 0.5;
}
#playLonelyBoing .slash-hit.size-1,
.playLonelyBoing .slash-hit.size-1 {
  width: calc(var(--base) * 0.4);
  height: calc(var(--base) * 0.4);
}
#playLonelyBoing .slash-hit.size-2,
.playLonelyBoing .slash-hit.size-2 {
  width: calc(var(--base) * 0.6);
  height: calc(var(--base) * 0.6);
}
#playLonelyBoing .slash-hit.size-3,
.playLonelyBoing .slash-hit.size-3 {
  width: calc(var(--base) * 1);
  height: calc(var(--base) * 1);
}
#playLonelyBoing .slash-hit.size-4,
.playLonelyBoing .slash-hit.size-4 {
  opacity: 0.2;
  width: calc(var(--base) * 1.5);
  height: calc(var(--base) * 1.5);
}
#playLonelyBoing .slash-hit.size-5,
.playLonelyBoing .slash-hit.size-5 {
  opacity: 0.2;
  width: calc(var(--base) * 2);
  height: calc(var(--base) * 2);
}
#playLonelyBoing .slash-sparkle,
.playLonelyBoing .slash-sparkle {
  position: absolute;
  width: calc(var(--base) * 0.5);
  height: calc(var(--base) * 0.5);
  margin-bottom: calc(var(--base) * -0.25);
  z-index: 9998;
  pointer-events: none;
  transform-origin: left center;
  opacity: 0.8;
  background: white;
  border-radius: 50%;
  animation-iteration-count: 1;
  animation-name: slashSparkle;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
@keyframes slashSparkle {
  0% {
    transform: rotate(var(--sparkle-angle, 0deg)) translateX(calc(var(--base) * 8));
    opacity: 1;
  }
  100% {
    transform: rotate(var(--sparkle-angle, 0deg)) translateX(calc(var(--base) * 15));
    opacity: 0;
  }
}
#playLonelyBoing .slash-spark,
.playLonelyBoing .slash-spark {
  position: absolute;
  height: 4px;
  margin-bottom: -2px;
  z-index: 9998;
  pointer-events: none;
  transform-origin: left center;
  opacity: 0.8;
}
#playLonelyBoing .slash-spark.size-1:after,
.playLonelyBoing .slash-spark.size-1:after {
  width: 40%;
}
#playLonelyBoing .slash-spark.size-2:after,
.playLonelyBoing .slash-spark.size-2:after {
  width: 60%;
}
#playLonelyBoing .slash-spark.size-3:after,
.playLonelyBoing .slash-spark.size-3:after {
  width: 80%;
}
#playLonelyBoing .slash-spark.dull:after,
.playLonelyBoing .slash-spark.dull:after {
  background: linear-gradient(90deg, rgba(105, 105, 105, 0) 0%, rgb(105, 105, 105) 60%);
}
#playLonelyBoing .slash-spark:after,
.playLonelyBoing .slash-spark:after {
  transform-origin: center;
  display: block;
  content: "";
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%);
  animation-iteration-count: 1;
  animation-name: slashStrike;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
@keyframes slashStrike {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(50%);
    opacity: 1;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}
#playLonelyBoing .slash-ray-trail.critical,
.playLonelyBoing .slash-ray-trail.critical {
  border-top-color: #ff0000;
  background-color: #ffaaaa;
  opacity: 1;
}
#playLonelyBoing .slash-ray-trail.weak,
.playLonelyBoing .slash-ray-trail.weak {
  border-top-color: #cccccc;
  background-color: #eeeeee;
  opacity: 0.5;
}
#playLonelyBoing .slash-ray-hit-debug.critical-hit,
.playLonelyBoing .slash-ray-hit-debug.critical-hit {
  background-color: #ff4444;
  border-color: #ffff00;
  animation: hitPulse 0.3s ease-out;
}
@keyframes hitPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
#playLonelyBoing .slashAngle,
.playLonelyBoing .slashAngle {
  width: 100%;
  height: 100%;
  left: 0%;
  position: absolute;
  pointer-events: none;
}
#playLonelyBoing .slashWrap,
.playLonelyBoing .slashWrap {
  transform: scale(1, 0.4);
  transition: all 1.1s 0s ease-out;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}
#playLonelyBoing .slashVisual,
.playLonelyBoing .slashVisual {
  border-radius: 50%;
  background-image: url("/lonely-boing/_img/kingSlashFade.svg");
  transition: transform 0s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  transform-origin: center center;
  position: absolute;
  top: calc(var(--base) * -18);
  left: calc(var(--base) * -18);
  bottom: calc(var(--base) * -18);
  right: calc(var(--base) * -18);
  transform: rotate(0deg);
}
#playLonelyBoing .slashEffect,
.playLonelyBoing .slashEffect {
  position: absolute;
  left: calc(var(--base) * var(--x));
  bottom: calc(var(--base) * var(--y));
  pointer-events: none;
  z-index: 8;
  height: calc(var(--base) * 8) !important;
  width: calc(var(--base) * 8) !important;
}
#playLonelyBoing .slashEffect.slash-a .slashWrap,
.playLonelyBoing .slashEffect.slash-a .slashWrap {
  opacity: 0.6;
  animation: slashEffectFadeA 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
#playLonelyBoing .slashEffect.slash-b .slashWrap,
.playLonelyBoing .slashEffect.slash-b .slashWrap {
  opacity: 0.6;
  animation: slashEffectFadeB 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes slashEffectFadeA {
  0% {
    opacity: 0.8;
    transform: scale(1, 0.3) rotate(-30deg);
  }
  100% {
    opacity: 0;
    transform: scale(1, 0.3) rotate(-60deg);
  }
}
@keyframes slashEffectFadeB {
  0% {
    opacity: 0.8;
    transform: scale(1, 0.3) rotate(30deg);
  }
  100% {
    opacity: 0;
    transform: scale(1, 0.3) rotate(60deg);
  }
}
#playLonelyBoing .slash-ellipse-debug,
.playLonelyBoing .slash-ellipse-debug {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  background-color: #ff00ff;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 9999;
  pointer-events: none;
  opacity: 0.8;
}
#playLonelyBoing .slash-ellipse-debug.center,
.playLonelyBoing .slash-ellipse-debug.center {
  background-color: #ff88ff;
}
#playLonelyBoing .shatter-fragment,
.playLonelyBoing .shatter-fragment {
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 50;
  will-change: transform, opacity;
}
#playLonelyBoing .shatter-fragment svg,
.playLonelyBoing .shatter-fragment svg {
  overflow: visible;
  display: block;
}
#playLonelyBoing .shatter-fragment svg path,
.playLonelyBoing .shatter-fragment svg path {
  fill: none;
  stroke-linecap: round;
}

#playLonelyBoing .indicator-container,
.playLonelyBoing .indicator-container {
  transition: transform 0.3s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 10000;
  white-space: nowrap;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#playLonelyBoing .indicator-container .state-indicator,
.playLonelyBoing .indicator-container .state-indicator {
  letter-spacing: 0 !important;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  color: red;
  font-size: 3vmin;
  line-height: 0.8;
  font-weight: 800;
  filter: drop-shadow(0px 0vmin 5px var(--color-dark));
  display: inline-block;
  transform: scale(0);
  transition: transform 0.175s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLonelyBoing .indicator-container .state-indicator.active,
.playLonelyBoing .indicator-container .state-indicator.active {
  transform: scale(1);
  transition: transform 0.175s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLonelyBoing .indicator-container .state-indicator.aggro, #playLonelyBoing .indicator-container .state-indicator.alert, #playLonelyBoing .indicator-container .state-indicator.pursuit,
.playLonelyBoing .indicator-container .state-indicator.aggro,
.playLonelyBoing .indicator-container .state-indicator.alert,
.playLonelyBoing .indicator-container .state-indicator.pursuit {
  color: #ff1414;
  filter: drop-shadow(0px 0vmin 10px rgb(255, 20, 20));
}
#playLonelyBoing .indicator-container .state-indicator.damaged,
.playLonelyBoing .indicator-container .state-indicator.damaged {
  color: #ff6b6b;
  animation: damageFlash 0.3s ease-in-out;
}
#playLonelyBoing .indicator-container .state-indicator.stunned,
.playLonelyBoing .indicator-container .state-indicator.stunned {
  color: #ffd93d;
  animation: stunPulse 0.5s ease-in-out infinite;
}
#playLonelyBoing .indicator-container .state-indicator.idle,
.playLonelyBoing .indicator-container .state-indicator.idle {
  color: #8cc8ff;
  filter: drop-shadow(0px 0vmin 3px var(--color-dark));
}
#playLonelyBoing .entity.dead .indicator-container, #playLonelyBoing .enemy.dead .indicator-container,
.playLonelyBoing .entity.dead .indicator-container,
.playLonelyBoing .enemy.dead .indicator-container {
  transform: scale(0) !important;
}
#playLonelyBoing .entity.facing-neutral .indicator-container, #playLonelyBoing .enemy.facing-neutral .indicator-container,
.playLonelyBoing .entity.facing-neutral .indicator-container,
.playLonelyBoing .enemy.facing-neutral .indicator-container {
  transform: translateX(0%) translateY(-50%);
}
#playLonelyBoing .entity.facing-left .indicator-container, #playLonelyBoing .enemy.facing-left .indicator-container,
.playLonelyBoing .entity.facing-left .indicator-container,
.playLonelyBoing .enemy.facing-left .indicator-container {
  transform: translateX(-80%) translateY(-25%);
}
#playLonelyBoing .entity.facing-right .indicator-container, #playLonelyBoing .enemy.facing-right .indicator-container,
.playLonelyBoing .entity.facing-right .indicator-container,
.playLonelyBoing .enemy.facing-right .indicator-container {
  transform: translateX(80%) translateY(-25%);
}
#playLonelyBoing .entity.persuit .state-indicator, #playLonelyBoing .enemy.persuit .state-indicator,
#playLonelyBoing .entity.alert .state-indicator, #playLonelyBoing .enemy.alert .state-indicator,
#playLonelyBoing .entity.aggro .state-indicator, #playLonelyBoing .enemy.aggro .state-indicator,
.playLonelyBoing .entity.persuit .state-indicator,
.playLonelyBoing .enemy.persuit .state-indicator,
.playLonelyBoing .entity.alert .state-indicator,
.playLonelyBoing .enemy.alert .state-indicator,
.playLonelyBoing .entity.aggro .state-indicator,
.playLonelyBoing .enemy.aggro .state-indicator {
  filter: drop-shadow(0px 0vmin 10px rgb(255, 20, 20));
}
#playLonelyBoing .entity.size-boss .indicator-container, #playLonelyBoing .enemy.size-boss .indicator-container,
.playLonelyBoing .entity.size-boss .indicator-container,
.playLonelyBoing .enemy.size-boss .indicator-container {
  top: -1vmin;
  font-size: 2.5vmin;
}
#playLonelyBoing .entity.size-mini .indicator-container, #playLonelyBoing .enemy.size-mini .indicator-container,
.playLonelyBoing .entity.size-mini .indicator-container,
.playLonelyBoing .enemy.size-mini .indicator-container {
  top: 0.5vmin;
  font-size: 1.5vmin;
}
#playLonelyBoing .entity.size-elite .indicator-container .state-indicator, #playLonelyBoing .enemy.size-elite .indicator-container .state-indicator,
.playLonelyBoing .entity.size-elite .indicator-container .state-indicator,
.playLonelyBoing .enemy.size-elite .indicator-container .state-indicator {
  filter: drop-shadow(0px 0vmin 8px rgba(255, 255, 255, 0.8));
}

#playLonelyBoing.debug-enemies .indicator-container,
.playLonelyBoing.debug-enemies .indicator-container {
  outline: 1px dashed rgba(0, 255, 0, 0.5);
}

@keyframes damageFlash {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.2);
  }
}
@keyframes stunPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}
@keyframes indicatorEmerge {
  from {
    opacity: 0;
    transform: scale(0) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes indicatorVanish {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}
.combo-text-animated {
  position: absolute;
  z-index: 9999;
  font-weight: bold;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 1;
  transition: none;
}

.combo-text-exit {
  transform: translateX(-50%) translateY(-100px);
  opacity: 0;
  transition: all 1.2s ease-out;
}

#zoneTitle {
  pointer-events: none;
  z-index: 10000000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  font-family: "ND Kern", futura, Sans-Serif;
  text-transform: uppercase;
  font-size: calc(var(--base) * 3.5);
  line-height: calc(var(--base) * 5);
  margin: 0;
  font-weight: normal;
  text-align: center;
  position: relative;
  top: 50%;
  position: fixed;
  height: calc(var(--base) * 9);
  margin-top: calc(var(--base) * -5.5);
  text-shadow: 0 0 20px black;
  transition: all 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
  opacity: 0;
  letter-spacing: 0em;
  letter-spacing: 1.75em;
}
#zoneTitle.in {
  transition: all 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
  opacity: 1;
  letter-spacing: 0.25em;
}
#zoneTitle.out {
  filter: blur(15px);
  transition: all 2s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
  opacity: 0;
  letter-spacing: 0.75em;
}

.wasted-container {
  height: calc(var(--base) * 8);
  width: calc(var(--base) * 8);
  position: absolute;
  transition: all 0.25s 0s var(--easing);
  transform: scale(0);
  z-index: 10000;
}
.wasted-container span {
  position: relative;
  z-index: 10000;
  transition: all 0.25s 0s var(--easing);
  transform: scale(0);
  opacity: 0;
  letter-spacing: 2em;
  margin-top: calc(var(--base) * 1);
  display: inline-block;
  line-height: calc(var(--base) * 7.75);
  color: red;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 10px red, 0 0 5px red;
  font-size: calc(var(--base) * 10);
  opacity: 0;
  letter-spacing: 0.1em;
  transform: rotate(-15deg);
}
.wasted-container span {
  transition: all 0.5s 0s var(--easing);
  font-size: calc(var(--base) * 5);
  opacity: 1;
  letter-spacing: 0;
  transform: rotate(-5deg);
}
.wasted-container.wasted {
  transform: scale(1);
}

.hurt-indicator {
  transition: all 1s 0s linear;
  margin-top: calc(var(--base) * -4);
  position: absolute;
  height: calc(var(--base) * 8);
  width: calc(var(--base) * 8);
}
.hurt-indicator span {
  position: relative;
  z-index: 10000;
  opacity: 0;
  letter-spacing: 2em;
  display: inline-block;
  color: red;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 10px red, 0 0 5px red;
  font-size: calc(var(--base) * 10);
  opacity: 0;
  transform: rotate(-15deg);
  transition: all 1s 0.1s var(--easing);
  font-size: calc(var(--base) * 5);
  opacity: 1;
  letter-spacing: 0;
  transform: rotate(-5deg);
}
.hurt-indicator.fade {
  transform: translateY(-100%);
}
.hurt-indicator.fade span {
  opacity: 0;
  transform: rotate(5deg);
}

.grid .cell,
#grid .cell {
  position: relative;
  height: calc(var(--base) * 8);
  width: calc(var(--base) * 8);
}
.grid .cell:before,
#grid .cell:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3.125%;
  content: "";
  z-index: -5;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/lonely-boing/_img/square-faint.svg");
  background-size: 100%;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.5s ease-in-cout 0.25s;
}
.grid .cell:before,
#grid .cell:before {
  transition: opacity 0.35s 0s var(--easing);
  transition: opacity 0.35s 0s var(--easing);
}
.grid .cell.highlighted:not(.checkmate-square):before,
#grid .cell.highlighted:not(.checkmate-square):before {
  transition: opacity 0s 0s var(--easing);
  background-image: url("/_img/chesspieces/sctheme/square-white.png") !important;
  opacity: 0.15;
}

#options-menu {
  contain: content;
  position: fixed;
  z-index: 2000000;
  border-radius: 10px;
  padding: 0;
  background: rgba(23, 23, 26, 0.75);
  width: 100%;
  padding: 0;
  display: flex;
  gap: calc(var(--base) * 2);
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  justify-content: flex-start;
  overflow: scroll;
  height: calc(var(--base) * 100);
  display: none;
}
#options-menu h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
}
#options-menu .tabs {
  display: flex;
  justify-content: space-around;
  display: none;
}
#options-menu .tabs .tab-button {
  flex: 1;
  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  text-align: center;
  text-wrap: balance;
  font-size: 12px;
  line-height: calc(var(--base) * 4);
  margin: 0;
  letter-spacing: 0.1em;
  font-weight: normal;
  text-transform: uppercase;
}
#options-menu .tabs .tab-button:hover {
  color: #ffffff;
}
#options-menu .tabs .tab-button.active {
  background-color: transparent;
  color: #ffffff;
}
#options-menu .tab-content + .tab-content {
  margin-top: 0;
}
#options-menu .tab-content {
  width: 440px;
  margin-top: 64px;
}
#options-menu .tab-content:last-child {
  margin-bottom: 64px;
}
#options-menu section {
  margin: 0;
  padding: 0;
  display: flex;
  gap: calc(var(--base) * 2);
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#options-menu section h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #f2f2f2;
  display: none;
}
#options-menu section label {
  cursor: pointer;
  width: 100%;
  display: block;
  margin-bottom: 5px;
  color: #cccccc;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  height: 64px;
  border-radius: 32px;
  margin: 0;
  padding: calc(var(--base) * 0) 24px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.25);
  background-color: rgba(0, 0, 0, 0.15);
  background-color: var(--color-midlow);
  color: #cccccc;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 16px;
}
#options-menu section label span {
  position: relative;
  top: 0.075em;
}
#options-menu section label:hover {
  background-color: rgb(30, 30, 33);
  color: rgb(255, 255, 255);
}
#options-menu section {
  /* Hide the default checkbox */
}
#options-menu section .toggle input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
}
#options-menu section {
  /* Toggle container */
}
#options-menu section .toggle {
  margin: 0 -4px;
  position: relative;
  width: 40px;
  height: 8px;
  display: inline-block;
  cursor: pointer;
  background: var(--color-dark);
  border-radius: 34px;
  transition: background-color 0.4s;
}
#options-menu section .toggle .thumb {
  position: absolute;
  height: 20px;
  width: 20px;
  top: 50%;
  left: 0;
  margin-top: -10px;
  border-radius: 50%;
  transition: all 0.2s;
  background-color: rgb(43, 43, 46);
}
#options-menu section {
  /* Checkbox checked state */
}
#options-menu section .toggle input:checked + .thumb {
  transform: translateX(20px); /* Move the thumb to the right */
}
#options-menu section {
  /* Checkbox checked background */
}
#options-menu section .toggle input:checked {
  background-color: rgba(0, 200, 0, 0.75); /* Green background when checked */
  background-color: white;
}
#options-menu section .toggle input:checked + .thumb {
  background-color: white; /* Thumb color remains white */
}
#options-menu section {
  /* Add focus styles */
}
#options-menu section .toggle input:focus + .thumb {
  box-shadow: 0 0 1px rgba(0, 200, 0, 0.75);
}
#options-menu section {
  /* Optional: hover effect */
}
#options-menu section .toggle:hover .thumb {
  background-color: rgb(53, 53, 56);
}
#options-menu section {
  /* Container for the select box */
}
#options-menu section .select {
  position: relative;
  display: block;
  width: 100%; /* Adjust as needed */
  background-color: transparent; /* Transparent background for the container */
  background: var(--color-dark);
  border-radius: 34px;
  max-width: 220px;
  margin-right: -4px;
}
#options-menu section {
  /* Style the select element */
}
#options-menu section .select select {
  appearance: none; /* Remove default select styling */
  -webkit-appearance: none; /* Remove default styling in Safari */
  -moz-appearance: none; /* Remove default styling in Firefox */
  background-color: transparent; /* Make select background transparent */
  border: none; /* Remove border */
  color: #ffffff; /* Text color */
  font-size: 14px; /* Adjust font size */
  line-height: 32px;
  padding: 0;
  margin: 0;
  width: 100%; /* Full width */
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  text-indent: 0.25em;
  padding-top: 0.1em;
  color: #cccccc;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
}
#options-menu section {
  /* Remove the focus outline from the select */
}
#options-menu section .select select:focus {
  outline: none; /* Remove default focus outline */
}
#options-menu section {
  /* Style the dropdown options */
}
#options-menu section .select select option {
  background-color: rgb(33, 33, 36); /* Background color for the options */
  color: #ffffff; /* Text color */
}
#options-menu section input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 5px;
  height: 8px;
  border-radius: 5px;
  outline: none;
  background: var(--color-dark);
  margin: 0 -4px;
  max-width: 220px;
}
#options-menu section input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--color-light);
  cursor: pointer;
}
#options-menu section input[type=range]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00c0ff;
  cursor: pointer;
}
#options-menu section input[type=checkbox] {
  margin-right: 10px;
  transform: scale(1.2);
  cursor: pointer;
}
#options-menu #menu-buttons {
  display: flex;
  justify-content: space-between;
  padding: 24px;
}
#options-menu #menu-buttons button {
  width: 48%;
  padding: 10px;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: rgba(255, 255, 255, 0.25);
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 32px;
}
#kingVignette {
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
  contain: strict;
  transition: transform 0.125s cubic-bezier(0.125, 0.15, 0.5, 0.95);
  opacity: 0.97;
  top: -6200%;
  left: -11500%;
  right: -11500%;
  bottom: -6200%;
  position: absolute;
  background: radial-gradient(at center center, rgba(23, 23, 25, 0) 5%, rgb(23, 23, 25) 5.5%);
}
#kingVignette:after {
  display: block;
  content: "";
  position: absolute;
  height: 20%;
  width: 20%;
  left: 40%;
  top: 40%;
  background: radial-gradient(at center center, rgba(23, 23, 25, 0) 10%, rgba(23, 23, 25, 0.75) 12%);
}
#kingVignette.no-transition {
  transition: none;
}

/**
 * Blur Vignette - radial blur centered on king
 * JS sets left/top to king screen position
 * CSS transform centers element on that point
 */
#blurVignette {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(var(--base) * 260);
  height: calc(var(--base) * 260);
  transform: translate(calc(var(--x, 50vw) - 50%), calc(var(--y, 50vh) - 50%));
  pointer-events: none;
  will-change: transform;
  z-index: 40000;
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  -webkit-mask: radial-gradient(ellipse 33% 33% at center, transparent 0%, transparent 41%, black 53%);
          mask: radial-gradient(ellipse 33% 33% at center, transparent 0%, transparent 41%, black 53%);
  display: none;
}

/**
 * Noise overlay - film grain in scene space
 *
 * A child of #camera covering the whole room (the camera's box is the
 * scene's box), tiled with a grey grain image (_img/noise.png, 1024px,
 * 8-bit). Lives in camera space so it scrolls with the architecture, which
 * reads as texture of the world; a fixed overlay slid against it and looked
 * wrong. The tile is sized in base steps so grain scale is world-relative.
 *
 * The source (noise.png, 1954px RGBA) baked its strength into a flat 10%
 * alpha over a mean-93 grey. The tile drops the alpha to stay small and
 * --noise-opacity sets the strength; 0.1 is the source as drawn.
 *
 * Above the architecture (boxes 15000), below the king (20000). Static:
 * nothing writes to it per frame. Disable with `body.no-noise`.
 */
#noiseOverlay {
  display: none;
  --noise-opacity: 0.01;
  --noise-tile: calc(var(--base) * 120);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 18000;
  background-image: url("/lonely-boing/_img/noise.png");
  background-repeat: repeat;
  background-size: var(--noise-tile) var(--noise-tile);
  opacity: var(--noise-opacity);
}

body.noise-on #noiseOverlay {
  display: block;
}

#settings-menu {
  contain: content;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8vh;
  z-index: 1000000;
  opacity: 0;
  transition: all 0.125s ease-in-out 0s;
  transform: translateY(-20px);
}
.settings-open #settings-menu {
  transition: all 0.25s ease-in-out 0.15s;
  transform: translateY(0px);
  opacity: 1;
  pointer-events: auto;
}

#settings-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-dark);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.97) 46%, rgba(0, 0, 0, 0.82) 70%, rgba(0, 0, 0, 0.36) 88%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.97) 46%, rgba(0, 0, 0, 0.82) 70%, rgba(0, 0, 0, 0.36) 88%, rgba(0, 0, 0, 0) 100%);
}

#settings-menu-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 560px;
  height: 100%;
  padding: 0;
}
#settings-menu-main h2 {
  font-size: 2rem;
  font-weight: 400;
  color: white;
  text-align: center;
  margin: 0 0 20px 0;
  flex-shrink: 0;
}

.settings-tabs {
  display: flex;
  gap: 32px;
  margin-bottom: 40px;
  flex-shrink: 0;
  justify-content: center;
}

.settings-tab {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 14px;
  font-weight: 400;
  padding: 8px 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: color 0.15s ease;
  position: relative;
}
.settings-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}
.settings-tab.active {
  color: white;
}
.settings-tab.menu-focus {
  color: white;
}

.settings-body {
  flex: 1;
  width: 100%;
  padding: 0 0 64px 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.settings-body::-webkit-scrollbar {
  display: none;
}

.settings-panel {
  display: none;
}
.settings-panel.active {
  display: block;
}

.settings-group {
  margin-bottom: 8px;
}
.settings-group:last-child {
  margin-bottom: 0;
}

.settings-group-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.25);
  margin: 0 0 8px 0;
  padding: 0 24px 0 24px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px;
  margin-bottom: 6px;
  background: rgb(33, 33, 36);
  border-radius: 32px;
  gap: 32px;
  transition: background 0.15s ease;
}
.setting-row:hover {
  background: rgb(30, 30, 33);
}
.setting-row:hover > label {
  color: white;
}
.setting-row > label {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.setting-row > label .slider-value {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
  min-width: 45px;
}
.setting-row.radio-row .radio-group {
  flex: 1;
  max-width: 320px;
}

.slider-control {
  display: flex;
  align-items: center;
  flex: 1;
}
.slider-control input[type=range] {
  flex: 1;
  height: 8px;
  border-radius: 5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  outline: none;
  background: var(--color-dark);
}
.slider-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-light);
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.slider-control input[type=range]:hover::-webkit-slider-thumb {
  transform: scale(1.1);
}
.slider-control input[type=range].menu-focus::-webkit-slider-thumb {
  transform: scale(1.2);
}
.slider-control input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-light);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.toggle-control {
  position: relative;
  width: 40px;
  height: 8px;
  background: var(--color-dark);
  border-radius: 34px;
}
.toggle-control .toggle-checkbox {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.toggle-control::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: rgb(43, 43, 46);
  border-radius: 50%;
  transition: all 0.2s ease;
  pointer-events: none;
}
.toggle-control:hover::after {
  background: rgb(53, 53, 56);
}
.toggle-control:has(.toggle-checkbox:checked)::after {
  transform: translateX(20px);
  background: var(--color-light);
}
.toggle-control:has(.toggle-checkbox.menu-focus)::after {
  transform: scale(1.15);
}
.toggle-control:has(.toggle-checkbox.menu-focus:checked)::after {
  transform: translateX(20px) scale(1.15);
}

.keybind-capture {
  background: var(--color-dark);
  border: none;
  border-radius: 34px;
  padding: 0 20px;
  min-width: 80px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.keybind-capture kbd {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  background: none;
  border: none;
  padding: 0;
}
.keybind-capture:hover kbd {
  color: white;
}
.keybind-capture.capturing {
  animation: pulse-bg 1s ease infinite;
}
.keybind-capture.capturing kbd {
  color: rgba(255, 255, 255, 0.4);
}
.keybind-capture.menu-focus kbd {
  color: white;
}

@keyframes pulse-bg {
  0%, 100% {
    background: var(--color-dark);
  }
  50% {
    background: rgb(53, 53, 56);
  }
}
.radio-group {
  display: flex;
  background: var(--color-dark);
  border-radius: 34px;
  padding: 4px;
}

.radio-option {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 30px;
  transition: all 0.15s ease;
  flex: 1;
}
.radio-option:hover span {
  color: white;
}
.radio-option input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  width: 0;
  height: 0;
}
.radio-option input[type=radio]:checked + span {
  color: var(--color-dark);
}
.radio-option input[type=radio].menu-focus + span {
  color: white;
}
.radio-option:has(input:checked) {
  background: var(--color-light);
}
.radio-option span {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.15s ease;
}

.btn-reset {
  background: rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 32px;
  height: 64px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}
.btn-reset:hover {
  background: rgb(33, 33, 36);
  color: white;
}
.btn-reset.btn-danger {
  color: rgba(255, 120, 120, 0.5);
}
.btn-reset.btn-danger:hover {
  color: rgb(255, 140, 140);
}
.btn-reset.menu-focus {
  background: rgb(33, 33, 36);
  color: white;
}

.settings-open {
  overflow: hidden;
}

/**
 * Lonely Boing - Logger Controls
 * Minimal styles for logger-specific elements inside the drawer
 * Uses existing global drawer-row and button-text styles
 */
.log-emoji {
  font-size: 1.4em;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  display: none;
}

#playLonelyBoing #king,
.playLonelyBoing #king {
  overflow: visible;
}
#playLonelyBoing .king-robe-svg,
.playLonelyBoing .king-robe-svg {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  opacity: 0.8;
}
#playLonelyBoing .king-robe-svg.is-detached,
.playLonelyBoing .king-robe-svg.is-detached {
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#playLonelyBoing .king-robe-svg .robe-strand,
.playLonelyBoing .king-robe-svg .robe-strand {
  fill: none;
  stroke-width: calc(var(--base) * 3);
  stroke-linecap: none;
  stroke-linejoin: none;
  stroke: var(--color-midlow);
}

@font-face {
  font-family: "Alte Schwabacher";
  src: url("/lonely-boing/_fonts/alte-schwabacher/AlteSchwabacher.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Alte Schwabacher";
  src: url("/lonely-boing/_fonts/alte-schwabacher/AlteSchwabacher-DemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Alte Schwabacher Shadow";
  src: url("/lonely-boing/_fonts/alte-schwabacher/AlteSchwabacher-Shadow.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Wieynk Fraktur";
  src: url("/lonely-boing/_fonts/wieynk-fraktur.regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Deutsch Gotisch";
  src: url("/lonely-boing/_fonts/deutsch-gotisch/Deutsch-Gotisch.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Deutsch Gotisch";
  src: url("/lonely-boing/_fonts/deutsch-gotisch/Deutsch-Gotisch-Heavy.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Deutsch Gotisch Shadow";
  src: url("/lonely-boing/_fonts/deutsch-gotisch/Deutsch-Gotisch-Shadow.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Deutsch Gotisch Outline";
  src: url("/lonely-boing/_fonts/deutsch-gotisch/Deutsch-Gotisch-Outline.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Grobe Deutschmeister";
  src: url("/lonely-boing/_fonts/grobe-deutschmeister/GrobeDeutschmeister.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Gutenberg Textura";
  src: url("/lonely-boing/_fonts/gutenberg-textura/GutenbergTextura.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Son of Time";
  src: url("/lonely-boing/_fonts/sonoftime/SonOfTmU.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "ND Zirka Rough";
  src: url("/lonely-boing/_fonts/NDZirka-Rough.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "ND Zirka Upright";
  src: url("/lonely-boing/_fonts/NDZirka-Upright.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "ND Zirka Thin";
  src: url("/lonely-boing/_fonts/NDZirka-Thin.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "AEIOU";
  src: url("/lonely-boing/_fonts/a-e-i-o-u/_aeiou2U.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Break Roman";
  src: url("/lonely-boing/_fonts/break-roman/BreakRoman-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "DS Luthersche";
  src: url("/lonely-boing/_fonts/ds-luthersche.regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "DS Luthersche";
  src: url("/lonely-boing/_fonts/ds-luthersche.halbfett.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "DS Luthersche Titel";
  src: url("/lonely-boing/_fonts/ds-luthersche.titel.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Fette Trump Deutsch";
  src: url("/lonely-boing/_fonts/fette-trump-deutsch/FetteTrumpDeutsch.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Kabinett Fraktur";
  src: url("/lonely-boing/_fonts/kabinett-fraktur.fraktur-mager.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Kabinett Fraktur";
  src: url("/lonely-boing/_fonts/kabinett-fraktur.fraktur-halbfett.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Koenig Type";
  src: url("/lonely-boing/_fonts/koenig-type/Koenigtype-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Koenig Type";
  src: url("/lonely-boing/_fonts/koenig-type/Koenigtype-reg.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Koenig Type";
  src: url("/lonely-boing/_fonts/koenig-type/Koenigtype-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Kuenstler Gotisch";
  src: url("/lonely-boing/_fonts/kuenstler-gotisch.regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Schwaben Alt";
  src: url("/lonely-boing/_fonts/schwaben-alt.bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Xenippa";
  src: url("/lonely-boing/_fonts/xenippa.regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
#playLonelyBoing .dialog-container,
.playLonelyBoing .dialog-container {
  position: fixed;
  bottom: calc(var(--base) * 3);
  left: 50%;
  transform: translateX(-50%) translateY(50%) scale(1, 0);
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
#playLonelyBoing .dialog-container.active,
.playLonelyBoing .dialog-container.active {
  transform: translateX(-50%) translateY(0%) scale(1, 1);
  opacity: 1;
  pointer-events: auto;
}
#playLonelyBoing .dialog-container.top,
.playLonelyBoing .dialog-container.top {
  bottom: auto;
  top: var(--hud-top-h);
  transform: translateX(-50%) translateY(-50%) scale(1, 0);
}
#playLonelyBoing .dialog-container.top.active,
.playLonelyBoing .dialog-container.top.active {
  transform: translateX(-50%) translateY(0%) scale(1, 1);
}
#playLonelyBoing .dialog-box,
.playLonelyBoing .dialog-box {
  position: relative;
  background: var(--color-darker, rgba(23, 23, 26, 0.95));
  border-radius: calc(var(--base) * 1);
  padding: calc(var(--base) * 2.5) calc(var(--base) * 2.75);
  width: min(var(--base) * 65, 100vw - var(--base) * 6);
  overflow: hidden;
}
#playLonelyBoing .particle-pearl,
.playLonelyBoing .particle-pearl {
  bottom: auto;
  top: 0;
}
#playLonelyBoing .dialog-speaker,
.playLonelyBoing .dialog-speaker {
  color: var(--color-light, #f3e9e8);
  font-family: inherit;
  font-size: calc(var(--base) * 1.125);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: calc(var(--base) * -0.25);
  margin-bottom: calc(var(--base) * 1);
  opacity: 0.5;
}
#playLonelyBoing .dialog-history,
.playLonelyBoing .dialog-history {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: calc(var(--base) * 1);
}
#playLonelyBoing .dialog-history .dialog-history-line,
.playLonelyBoing .dialog-history .dialog-history-line {
  color: var(--color-light, #f3e9e8);
  font-size: calc(var(--base) * 2);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-wrap: balance;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
}
#playLonelyBoing .dialog-history .dialog-history-line.visible,
.playLonelyBoing .dialog-history .dialog-history-line.visible {
  max-height: calc(var(--base) * 8);
  opacity: 0.35;
}
#playLonelyBoing .dialog-history .dialog-history-line.fading,
.playLonelyBoing .dialog-history .dialog-history-line.fading {
  opacity: 0.15;
}
#playLonelyBoing .dialog-text,
.playLonelyBoing .dialog-text {
  color: var(--color-light, #f3e9e8);
  font-family: "Crimson Pro", serif;
  font-family: "Alte Schwabacher";
  font-family: "Wieynk Fraktur";
  font-family: "Deutsch Gotisch";
  font-family: "Grobe Deutschmeister";
  font-family: "ND Zirka Thin", serif;
  letter-spacing: 0;
  font-weight: 600;
  font-size: calc(var(--base) * 4.5);
  line-height: 1.5;
  line-height: 1;
  text-wrap: balance;
  white-space: pre-wrap;
  font-feature-settings: "liga" 1, "fina" 1, "init" 1;
}
#playLonelyBoing .dialog-text .char-hidden,
.playLonelyBoing .dialog-text .char-hidden {
  color: transparent;
}
#playLonelyBoing .dialog-text .char-visible,
.playLonelyBoing .dialog-text .char-visible {
  color: inherit;
}
#playLonelyBoing .dialog-indicator,
.playLonelyBoing .dialog-indicator {
  position: absolute;
  bottom: calc(var(--base) * 1.5);
  right: calc(var(--base) * 2);
  color: var(--color-light, #f3e9e8);
  font-size: calc(var(--base) * 1.5);
  opacity: 0;
  transition: opacity 0.2 0s sease-out;
}
#playLonelyBoing .dialog-indicator.visible,
.playLonelyBoing .dialog-indicator.visible {
  opacity: 0.7;
  transition: opacity 0.2 0.4s sease-out;
}
@keyframes dialogIndicatorPulse {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(calc(var(--base) * 0.4));
    opacity: 0.4;
  }
}
#playLonelyBoing .dialog-box.font-crimson .dialog-text, #playLonelyBoing .dialog-box.font-crimson .dialog-history-line,
.playLonelyBoing .dialog-box.font-crimson .dialog-text,
.playLonelyBoing .dialog-box.font-crimson .dialog-history-line {
  font-family: "Crimson Pro", serif;
}
#playLonelyBoing .dialog-box.font-schwabacher .dialog-text, #playLonelyBoing .dialog-box.font-schwabacher .dialog-history-line,
.playLonelyBoing .dialog-box.font-schwabacher .dialog-text,
.playLonelyBoing .dialog-box.font-schwabacher .dialog-history-line {
  font-family: "Alte Schwabacher", serif;
  letter-spacing: 0.02em;
}
#playLonelyBoing .dialog-box.font-schwabacher-shadow .dialog-text, #playLonelyBoing .dialog-box.font-schwabacher-shadow .dialog-history-line,
.playLonelyBoing .dialog-box.font-schwabacher-shadow .dialog-text,
.playLonelyBoing .dialog-box.font-schwabacher-shadow .dialog-history-line {
  font-family: "Alte Schwabacher Shadow", serif;
  letter-spacing: 0.02em;
}
#playLonelyBoing .dialog-box.font-fraktur .dialog-text, #playLonelyBoing .dialog-box.font-fraktur .dialog-history-line,
.playLonelyBoing .dialog-box.font-fraktur .dialog-text,
.playLonelyBoing .dialog-box.font-fraktur .dialog-history-line {
  font-family: "Wieynk Fraktur", serif;
  letter-spacing: 0.01em;
}
#playLonelyBoing .dialog-box.font-deutsch .dialog-text, #playLonelyBoing .dialog-box.font-deutsch .dialog-history-line,
.playLonelyBoing .dialog-box.font-deutsch .dialog-text,
.playLonelyBoing .dialog-box.font-deutsch .dialog-history-line {
  font-family: "Deutsch Gotisch", serif;
}
#playLonelyBoing .dialog-box.font-deutsch-shadow .dialog-text, #playLonelyBoing .dialog-box.font-deutsch-shadow .dialog-history-line,
.playLonelyBoing .dialog-box.font-deutsch-shadow .dialog-text,
.playLonelyBoing .dialog-box.font-deutsch-shadow .dialog-history-line {
  font-family: "Deutsch Gotisch Shadow", serif;
}
#playLonelyBoing .dialog-box.font-deutschmeister .dialog-text, #playLonelyBoing .dialog-box.font-deutschmeister .dialog-history-line,
.playLonelyBoing .dialog-box.font-deutschmeister .dialog-text,
.playLonelyBoing .dialog-box.font-deutschmeister .dialog-history-line {
  font-family: "Grobe Deutschmeister", serif;
}
#playLonelyBoing .dialog-box.font-gutenberg .dialog-text, #playLonelyBoing .dialog-box.font-gutenberg .dialog-history-line,
.playLonelyBoing .dialog-box.font-gutenberg .dialog-text,
.playLonelyBoing .dialog-box.font-gutenberg .dialog-history-line {
  font-family: "Gutenberg Textura", serif;
}
#playLonelyBoing .dialog-box.font-sonoftime .dialog-text, #playLonelyBoing .dialog-box.font-sonoftime .dialog-history-line,
.playLonelyBoing .dialog-box.font-sonoftime .dialog-text,
.playLonelyBoing .dialog-box.font-sonoftime .dialog-history-line {
  font-family: "Son of Time", serif;
}
#playLonelyBoing .dialog-box.font-zirka .dialog-text, #playLonelyBoing .dialog-box.font-zirka .dialog-history-line,
.playLonelyBoing .dialog-box.font-zirka .dialog-text,
.playLonelyBoing .dialog-box.font-zirka .dialog-history-line {
  font-family: "ND Zirka Rough", serif;
}
#playLonelyBoing .dialog-box.font-zirka-upright .dialog-text, #playLonelyBoing .dialog-box.font-zirka-upright .dialog-history-line,
.playLonelyBoing .dialog-box.font-zirka-upright .dialog-text,
.playLonelyBoing .dialog-box.font-zirka-upright .dialog-history-line {
  font-family: "ND Zirka Upright", serif;
}
#playLonelyBoing .dialog-box.font-zirka-thin .dialog-text, #playLonelyBoing .dialog-box.font-zirka-thin .dialog-history-line,
.playLonelyBoing .dialog-box.font-zirka-thin .dialog-text,
.playLonelyBoing .dialog-box.font-zirka-thin .dialog-history-line {
  font-family: "ND Zirka Thin", serif;
}
#playLonelyBoing .dialog-box.font-aeiou .dialog-text, #playLonelyBoing .dialog-box.font-aeiou .dialog-history-line,
.playLonelyBoing .dialog-box.font-aeiou .dialog-text,
.playLonelyBoing .dialog-box.font-aeiou .dialog-history-line {
  font-family: "AEIOU", serif;
}
#playLonelyBoing .dialog-box.font-break .dialog-text, #playLonelyBoing .dialog-box.font-break .dialog-history-line,
.playLonelyBoing .dialog-box.font-break .dialog-text,
.playLonelyBoing .dialog-box.font-break .dialog-history-line {
  font-family: "Break Roman", serif;
}
#playLonelyBoing .dialog-box.font-luthersche .dialog-text, #playLonelyBoing .dialog-box.font-luthersche .dialog-history-line,
.playLonelyBoing .dialog-box.font-luthersche .dialog-text,
.playLonelyBoing .dialog-box.font-luthersche .dialog-history-line {
  font-family: "DS Luthersche", serif;
}
#playLonelyBoing .dialog-box.font-luthersche-titel .dialog-text, #playLonelyBoing .dialog-box.font-luthersche-titel .dialog-history-line,
.playLonelyBoing .dialog-box.font-luthersche-titel .dialog-text,
.playLonelyBoing .dialog-box.font-luthersche-titel .dialog-history-line {
  font-family: "DS Luthersche Titel", serif;
}
#playLonelyBoing .dialog-box.font-trump .dialog-text, #playLonelyBoing .dialog-box.font-trump .dialog-history-line,
.playLonelyBoing .dialog-box.font-trump .dialog-text,
.playLonelyBoing .dialog-box.font-trump .dialog-history-line {
  font-family: "Fette Trump Deutsch", serif;
}
#playLonelyBoing .dialog-box.font-kabinett .dialog-text, #playLonelyBoing .dialog-box.font-kabinett .dialog-history-line,
.playLonelyBoing .dialog-box.font-kabinett .dialog-text,
.playLonelyBoing .dialog-box.font-kabinett .dialog-history-line {
  font-family: "Kabinett Fraktur", serif;
}
#playLonelyBoing .dialog-box.font-koenig .dialog-text, #playLonelyBoing .dialog-box.font-koenig .dialog-history-line,
.playLonelyBoing .dialog-box.font-koenig .dialog-text,
.playLonelyBoing .dialog-box.font-koenig .dialog-history-line {
  font-family: "Koenig Type", serif;
}
#playLonelyBoing .dialog-box.font-kuenstler .dialog-text, #playLonelyBoing .dialog-box.font-kuenstler .dialog-history-line,
.playLonelyBoing .dialog-box.font-kuenstler .dialog-text,
.playLonelyBoing .dialog-box.font-kuenstler .dialog-history-line {
  font-family: "Kuenstler Gotisch", serif;
}
#playLonelyBoing .dialog-box.font-schwaben .dialog-text, #playLonelyBoing .dialog-box.font-schwaben .dialog-history-line,
.playLonelyBoing .dialog-box.font-schwaben .dialog-text,
.playLonelyBoing .dialog-box.font-schwaben .dialog-history-line {
  font-family: "Schwaben Alt", serif;
}
#playLonelyBoing .dialog-box.font-xenippa .dialog-text, #playLonelyBoing .dialog-box.font-xenippa .dialog-history-line,
.playLonelyBoing .dialog-box.font-xenippa .dialog-text,
.playLonelyBoing .dialog-box.font-xenippa .dialog-history-line {
  font-family: "Xenippa", serif;
}
#playLonelyBoing .dialog-choices,
.playLonelyBoing .dialog-choices {
  --item-height: calc(var(--base) * 3);
  --visible-items: 3;
  --chevron-space: calc(var(--base) * 2);
  position: relative;
  margin-top: calc(var(--base) * 1.5);
  height: calc(var(--item-height) * var(--visible-items));
  overflow: hidden;
  padding-left: var(--chevron-space);
  margin-left: calc(var(--chevron-space) * -1);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgb(0, 0, 0) 33%, rgb(0, 0, 0) 67%, rgba(0, 0, 0, 0.3) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgb(0, 0, 0) 33%, rgb(0, 0, 0) 67%, rgba(0, 0, 0, 0.3) 100%);
}
#playLonelyBoing .dialog-choices-inner,
.playLonelyBoing .dialog-choices-inner {
  position: relative;
  transition: transform 0.2s ease-out;
}
#playLonelyBoing .dialog-choice,
.playLonelyBoing .dialog-choice {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--item-height);
  display: flex;
  align-items: center;
  font-feature-settings: "liga" 1, "fina" 1, "init" 1;
  background: transparent;
  text-align: left;
  color: var(--color-light, #f3e9e8);
  border: none;
  padding: 0;
  font-family: "ND Zirka Thin", serif;
  font-size: calc(var(--base) * 2.5);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
#playLonelyBoing .dialog-choice::before,
.playLonelyBoing .dialog-choice::before {
  content: "›";
  position: absolute;
  right: 100%;
  margin-right: calc(var(--base) * 0.5);
  opacity: 0;
  transition: opacity 0.15s;
}
#playLonelyBoing .dialog-choice,
.playLonelyBoing .dialog-choice {
  opacity: 0.3;
}
#playLonelyBoing .dialog-choice.selected,
.playLonelyBoing .dialog-choice.selected {
  opacity: 1;
}
#playLonelyBoing .dialog-choice.selected::before,
.playLonelyBoing .dialog-choice.selected::before {
  opacity: 1;
}
#playLonelyBoing .dialog-choice:hover:not(.selected),
.playLonelyBoing .dialog-choice:hover:not(.selected) {
  opacity: 0.5;
}
#playLonelyBoing .dialog-choice:disabled,
.playLonelyBoing .dialog-choice:disabled {
  opacity: 0.15;
  cursor: not-allowed;
}
#playLonelyBoing .dialog-choices.simple-list,
.playLonelyBoing .dialog-choices.simple-list {
  height: auto;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
#playLonelyBoing .dialog-choices.simple-list .dialog-choices-inner,
.playLonelyBoing .dialog-choices.simple-list .dialog-choices-inner {
  display: flex;
  flex-direction: column;
  gap: calc(var(--base) * 0.5);
}
#playLonelyBoing .dialog-choices.simple-list .dialog-choice,
.playLonelyBoing .dialog-choices.simple-list .dialog-choice {
  position: relative;
  height: auto;
  padding: calc(var(--base) * 0.5) 0;
}

.dialog-prompt {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: calc(var(--base) * 2);
  margin-bottom: calc(var(--base) * 1);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(calc(var(--base) * -2)) scale(0.5);
  transition: opacity 0.125s, transform 0.25s ease-out;
}
.dialog-prompt.visible {
  opacity: 0.5;
  transform: translateX(-50%) translateY(0) scale(1);
}

#playLonelyBoing.pointer-less,
.playLonelyBoing.pointer-less {
  cursor: none;
}
#playLonelyBoing body:not(.doc-body),
.playLonelyBoing body:not(.doc-body) {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
#playLonelyBoing #bulge,
.playLonelyBoing #bulge {
  position: absolute;
  width: calc(var(--base) * 8 * 21);
  height: calc(var(--base) * 8 * 8);
  z-index: -2;
}
#playLonelyBoing .dot,
.playLonelyBoing .dot {
  position: absolute;
}
#playLonelyBoing .dot:after,
.playLonelyBoing .dot:after {
  position: absolute;
  content: "";
  display: block;
  margin: calc(var(--base) * -0.25);
  width: calc(var(--base) * 0.5);
  height: calc(var(--base) * 0.5);
  background-color: rgb(53, 53, 56); /* var(--color-light) */
  background-color: rgb(153, 153, 156); /* var(--color-light) */
  background-color: rgb(63, 63, 66); /* var(--color-light) */
  border-radius: 50%;
  pointer-events: none;
}
#playLonelyBoing .kingMove,
#playLonelyBoing .enemyMove,
.playLonelyBoing .kingMove,
.playLonelyBoing .enemyMove {
  display: inline-block;
  position: absolute;
  height: 8px;
  width: 8px;
  margin: -4px;
  background: red;
  border-radius: 50%;
}
#playLonelyBoing .kingMove.is-ladder,
#playLonelyBoing .enemyMove.is-ladder,
.playLonelyBoing .kingMove.is-ladder,
.playLonelyBoing .enemyMove.is-ladder {
  background: purple; /* Purple for ladder movement */
}
#playLonelyBoing .kingMove.is-airborne,
#playLonelyBoing .enemyMove.is-airborne,
.playLonelyBoing .kingMove.is-airborne,
.playLonelyBoing .enemyMove.is-airborne {
  background: red; /* Red for airborne movement */
}
#playLonelyBoing .kingMove.is-grounded,
#playLonelyBoing .enemyMove.is-grounded,
.playLonelyBoing .kingMove.is-grounded,
.playLonelyBoing .enemyMove.is-grounded {
  background: blue; /* Blue for grounded movement */
}
#playLonelyBoing .cornerIndicator,
.playLonelyBoing .cornerIndicator {
  display: inline-block;
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}
#playLonelyBoing .cornerIndicator.concave,
.playLonelyBoing .cornerIndicator.concave {
  background: rgba(255, 50, 50, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 10000;
}
#playLonelyBoing .cornerIndicator.safe,
.playLonelyBoing .cornerIndicator.safe {
  background: rgba(50, 255, 50, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
#playLonelyBoing .gateEntryMarker,
.playLonelyBoing .gateEntryMarker {
  display: inline-block;
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  background: rgba(0, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}
#playLonelyBoing .before,
.playLonelyBoing .before {
  border-right: calc(var(--base) * 0.5) solid blue !important;
}
#playLonelyBoing .after,
.playLonelyBoing .after {
  border-left: calc(var(--base) * 0.5) solid yellow !important;
}
#playLonelyBoing .below,
.playLonelyBoing .below {
  border-top: calc(var(--base) * 0.5) solid red !important;
}
#playLonelyBoing .above,
.playLonelyBoing .above {
  border-bottom: calc(var(--base) * 0.5) solid green !important;
}
#playLonelyBoing [data-level="1"] span:nth-child(1),
#playLonelyBoing [data-level="2"] span:nth-child(2),
#playLonelyBoing [data-level="3"] span:nth-child(3),
#playLonelyBoing [data-level="4"] span:nth-child(4),
#playLonelyBoing [data-level="5"] span:nth-child(5),
#playLonelyBoing [data-level="6"] span:nth-child(6),
#playLonelyBoing [data-level="7"] span:nth-child(7),
#playLonelyBoing [data-level="8"] span:nth-child(8),
#playLonelyBoing [data-level="9"] span:nth-child(9),
.playLonelyBoing [data-level="1"] span:nth-child(1),
.playLonelyBoing [data-level="2"] span:nth-child(2),
.playLonelyBoing [data-level="3"] span:nth-child(3),
.playLonelyBoing [data-level="4"] span:nth-child(4),
.playLonelyBoing [data-level="5"] span:nth-child(5),
.playLonelyBoing [data-level="6"] span:nth-child(6),
.playLonelyBoing [data-level="7"] span:nth-child(7),
.playLonelyBoing [data-level="8"] span:nth-child(8),
.playLonelyBoing [data-level="9"] span:nth-child(9) {
  transform: translateY(3px);
}
#playLonelyBoing #scene svg,
.playLonelyBoing #scene svg {
  margin: 0;
  vector-effect: non-scaling-stroke;
}
#playLonelyBoing .vibrate-horizontal,
.playLonelyBoing .vibrate-horizontal {
  animation-name: vibrateHorizontal;
  animation-duration: 0.35s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playLonelyBoing .vibrate-vertical,
.playLonelyBoing .vibrate-vertical {
  animation-name: vibrateVertical;
  animation-duration: 0.35s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playLonelyBoing .shake,
.playLonelyBoing .shake {
  animation-name: gridShake;
  animation-duration: 0.35s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playLonelyBoing .shakeHorz,
.playLonelyBoing .shakeHorz {
  animation-name: shakeHorz;
  animation-duration: 0.5s;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: bottom left;
}
#playLonelyBoing .shakeHorzPhased,
.playLonelyBoing .shakeHorzPhased {
  animation-name: shakeHorzPhased;
  animation-duration: 0.5s;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: bottom right;
}
#playLonelyBoing .effect-cell,
.playLonelyBoing .effect-cell {
  height: calc(var(--base) * 8);
  width: calc(var(--base) * 8);
  position: absolute;
  bottom: 0;
  left: 0;
}