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

@font-face {
  font-family: "SCLogo";
  src: url("/_fonts/SCLogo-Regular.woff2?v=1") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block; /* Use "swap" value to ensure text is displayed immediately */
}
@font-face {
  font-family: "HOWLINLogo";
  src: url("/_fonts/HOWLINLogo-Regular.woff2?v=1") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block; /* Use "swap" value to ensure text is displayed immediately */
}
@font-face {
  font-family: "ND Kern";
  src: url("/_fonts/kern/NDKern-Book.woff2?v=1") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap; /* Use "swap" value to ensure text is displayed immediately */
}
@font-face {
  font-family: "ND Kern";
  src: url("/_fonts/kern/NDKern-Regular.woff2?v=1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Use "swap" value to ensure text is displayed immediately */
}
@font-face {
  font-family: "ND Kern";
  src: url("/_fonts/kern/NDKern-Bold.woff2?v=1") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap; /* Use "swap" value to ensure text is displayed immediately */
}
@font-face {
  font-family: "ND Kern";
  src: url("/_fonts/kern/NDKern-ExtraBold.woff2?v=1") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap; /* Use "swap" value to ensure text is displayed immediately */
}
@font-face {
  font-family: "Lora";
  src: url("/_fonts/lora/lora-regular-webfont.woff2?v=1") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Use "swap" value to ensure text is displayed immediately */
}
.ot-none {
  font-feature-settings: normal;
}

.ot-tnum-onum {
  font-feature-settings: "onum" 1, "tnum" 1;
}

.ot-ordn {
  font-variant-numeric: ordinal;
}

.ot-tnum {
  font-feature-settings: "tnum" 1;
}

.ot-onum {
  font-feature-settings: "onum" 1;
  font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
}

.ot-frac {
  font-feature-settings: "frac" 1;
}

.ot-liga {
  font-feature-settings: "liga" on;
  font-variant-ligatures: normal;
}

.ot-dlig {
  font-feature-settings: "dlig" on;
}

.ot-smcp {
  font-feature-settings: "smcp" 1;
}

.ot-pcap {
  font-feature-settings: "pcap" 1;
}

.ot-case {
  text-transform: uppercase;
  font-feature-settings: "case" 1;
}

.ot-sinf {
  font-feature-settings: "sinf" 1;
}

.ot-sups {
  font-feature-settings: "sups" 1;
}

.ot-calt {
  font-feature-settings: "calt" on;
}

.ot-aalt {
  font-feature-settings: "aalt" 1;
}

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: 700;
  font-weight: 500;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
/* Grouping content
   ========================================================================== */
/**
 * Remove margin
 */
figure {
  margin: 0;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */ /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: 700;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* Blockquote
   ========================================================================== */
blockquote {
  margin: 0;
}

html {
  background-color: var(--color-dark);
  color: var(--color-light);
  font-family: "ND Kern", futura, Sans-Serif;
}

.mode-indoor .outdoor-only {
  display: none !important;
}

.mode-outdoor .indoor-only {
  display: none !important;
}

#hold-my-knight {
  margin: auto;
  display: inline-block;
}
#hold-my-knight img {
  display: inline-block;
  margin: auto;
  width: 5vw;
  margin-right: 2.75vw;
  margin-bottom: 2.75vw;
}

.no-p-t {
  padding-top: 0 !important;
}

.no-p-b {
  padding-bottom: 0 !important;
}

.no-p-v {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.no-p-h {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.no-m-t {
  margin-top: 0 !important;
}

.no-m-b {
  margin-bottom: 0 !important;
}

.no-m-v {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.no-m-h {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html,
body {
  -webkit-tap-highlight-color: transparent;
  padding: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

body {
  max-width: 100vw;
  padding: 0px;
  cursor: default;
}

.sr-only {
  position: absolute;
  left: -9999px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

main + #footer {
  border-top: none;
}

#header ul,
#header h1 {
  line-height: 64px;
}

#footer,
#header {
  position: relative;
  text-align: center;
  padding: 4em 0;
  margin: 0;
  text-transform: uppercase;
  font-size: 0;
  width: 100vw;
}
#footer #home,
#header #home {
  position: fixed;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 667px) {
  #footer,
  #header {
    padding: 1em 0;
  }
}
#footer h1,
#header h1 {
  opacity: 0;
}
#footer h1.low,
#header h1.low {
  opacity: 0.2;
}
#footer h1.opac,
#header h1.opac {
  opacity: 1;
}
#footer ul,
#footer h1,
#header ul,
#header h1 {
  text-wrap: balance;
  font-size: 12px;
  margin: 0;
  letter-spacing: 0.1em;
  font-weight: normal;
}
#footer ul a,
#footer h1 a,
#header ul a,
#header h1 a {
  pointer-events: auto;
}
#footer ul a + a:before,
#footer h1 a + a:before,
#header ul a + a:before,
#header h1 a + a:before {
  content: " · ";
}
#footer ul > span + span:before,
#footer h1 > span + span:before,
#header ul > span + span:before,
#header h1 > span + span:before {
  content: " · ";
}
#footer ul a.active,
#footer h1 a.active,
#header ul a.active,
#header h1 a.active {
  font-weight: 900;
}
#footer h2,
#header h2 {
  font-size: 0;
}
#footer > ul,
#header > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer > ul.subnav,
#header > ul.subnav {
  position: relative;
}
#footer > ul.subnav:after,
#header > ul.subnav:after {
  pointer-events: none;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: radial-gradient(at top center, rgba(23, 23, 26, 0.5) 1%, rgba(23, 23, 26, 0) 70%);
  content: "";
  height: 10vh;
  width: 100%;
  display: block;
}
#footer > ul.subnav li,
#header > ul.subnav li {
  padding: 0 10px;
}
#footer > ul > li.active a,
#header > ul > li.active a {
  text-shadow: none;
  border-radius: 3px;
  display: inline-block;
  color: var(--color-light);
  width: auto;
  padding: 4px 8px;
  padding-bottom: 0.15em;
  padding-right: 0.5em;
  text-align: center;
  text-transform: uppercase;
  bottom: 0px;
  position: relative;
  line-height: 1.3;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--color-dark);
  background: black;
  color: var(--color-light);
}
#footer > ul > li a:hover,
#header > ul > li a:hover {
  opacity: 1;
}
#footer > ul > li,
#header > ul > li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
#footer > ul > li a,
#header > ul > li a {
  font-size: 12px;
  letter-spacing: 0.08em;
  display: inline-block;
  margin: 0;
  padding: 0;
}

#footer > ul > li {
  line-height: 22px;
}
#footer > ul > li a {
  padding: 0.5em 1em;
}
#home {
  cursor: pointer;
  font-size: 11px;
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  position: absolute;
  top: 0;
  bottom: 80px;
  left: 0;
  text-transform: uppercase;
  z-index: 10001;
  font-weight: 100;
  height: 65px;
  transition: all 0.25s ease-in-out 0s;
  outline: none;
  background: radial-gradient(at center center, rgba(23, 23, 26, 0.5) 1%, rgba(23, 23, 26, 0) 50%);
}
#home.howlin:before {
  background-image: url("/_img/howlin-wolf.png");
}
@media (hover: hover) {
  #home:not(.home):focus:before, #home:not(.home):hover:before {
    background-size: 40%;
    transform: translateX(-100%);
  }
  #home:not(.home):focus:after, #home:not(.home):hover:after {
    transform: translateX(-50%);
    opacity: 1;
  }
}
#home:before {
  transition: all 0.125s ease-in-out 0s;
  display: inline-block;
  height: 65px;
  width: 65px;
  content: "";
  background-image: url("/_img/avatar-4.svg");
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: center center;
  top: -1px;
  position: relative;
  pointer-events: none;
}
#home:after {
  pointer-events: none;
  transition: all 0.125s ease-in-out 0s;
  display: inline-block;
  height: 65px;
  width: 65px;
  margin-left: -32px;
  content: "";
  background-image: url("/_img/arrow.svg");
  background-image: url("/_svg/arrow-left.svg");
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: center center;
  opacity: 0.3;
}
#home.home:after {
  display: none !important;
}

.drawer {
  z-index: 20000;
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
  will-change: auto;
  transition: all 0.3s ease-in-out 0s;
}
.drawer .daily-overview {
  transition: opacity 0.3s ease-in-out 0s;
}
.drawer.drawer-closed .daily-overview {
  opacity: 0;
}

#merch-link {
  display: inline-block;
  color: var(--color-light);
  height: 65px;
  width: 65px;
  border-radius: 50%;
  padding: 17px 10px;
  text-align: center;
  text-transform: uppercase;
  bottom: -5px;
  position: relative;
  line-height: 1.1;
  z-index: 100000;
  font-size: 12px;
}

#locations {
  height: 100vh;
  padding: 5vmin 5vmin;
  max-width: 750px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}
#locations p {
  margin-top: 1em;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 30px;
}
#locations p b {
  font-weight: 900;
}
#locations p b:after {
  content: " – ";
}
#locations > div > div {
  margin: auto;
  display: flex;
  align-items: stretch;
}
#locations > div > div img, #locations > div > div div {
  flex: 1;
  width: 50%;
}
#locations div + div {
  display: block;
}
#locations iframe {
  display: block;
  filter: grayscale(100%) brightness(75%) contrast(140%);
}

#island {
  padding: 10px;
  z-index: 20000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
#island .island-wrap {
  overflow: hidden;
  border-radius: 24px;
  transition: all 0.2s ease-in-out 0s;
  display: flex;
  justify-content: center;
}
#island .island-inner {
  padding: 0 6px;
  border-radius: 24px;
  background: var(--color-dark);
  background: black;
  white-space: nowrap;
  display: inline-flex;
}
#island .island-inner a:hover {
  opacity: 1;
}
#island .island-inner a {
  opacity: 0.3;
  display: inline-block;
  justify-content: center;
  align-content: center;
  align-items: center;
  min-height: 48px;
  min-width: 48px;
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: center center;
}
#island .island-inner a.island-tickets {
  background-image: url("/_img/nav/deck.svg");
}
#island .island-inner a.island-shop {
  background-image: url("/_img/nav/shop.svg");
}
#island .island-inner a.island-blog {
  background-image: url("/_img/nav/outdoor.svg");
}

.sticky-header {
  aspect-ratio: 3;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media only screen and (max-width: 768px) {
  .sticky-header {
    aspect-ratio: 1.5;
  }
}
.sticky-header #header {
  position: sticky;
  top: 0;
}

#header ul {
  white-space: nowrap;
}

#footer button,
#header button {
  text-shadow: none;
  color: var(--color-light);
  width: auto;
  padding: 4px 8px;
  padding-bottom: 0.2em;
  padding-right: 0.5em;
  position: relative;
  line-height: 1.3;
  border: none;
  pointer-events: auto;
  letter-spacing: 0.05em;
  font-size: 12px;
  text-align: center;
  text-transform: initial;
  border-radius: 3px;
  display: inline-blockx;
  bottom: 0px;
  color: var(--color-dark);
  background: black;
  color: var(--color-light);
}
#footer button b,
#header button b {
  font-weight: 900;
}

#header-cta button,
#header-cta a {
  text-shadow: none;
  border-radius: 3px;
  display: inline-block;
  color: var(--color-light);
  width: auto;
  padding: 4px 8px !important;
  padding-bottom: 0.15em;
  padding-right: 0.5em;
  text-align: center;
  text-transform: initial;
  bottom: 0px;
  position: relative;
  line-height: 1.3 !important;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--color-dark);
  background: black;
  color: var(--color-light);
}
#header-cta button:hover,
#header-cta a:hover {
  background: var(--color-light);
  color: black;
  opacity: 1;
}
#header-cta button b,
#header-cta a b {
  font-weight: 900;
}

@media only screen and (min-width: 600px) {
  #header > ul > li {
    display: inline-block;
  }
}

#header {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(23, 23, 26, 0) 0%, rgba(23, 23, 26, 0.125) 75%);
  z-index: 100000;
}
#header.sticky {
  position: sticky;
}
#header.relative {
  position: relative;
}
#header.fixed {
  position: fixed;
}
#header > a {
  pointer-events: auto;
}
#header > ul li a {
  pointer-events: auto;
  text-shadow: 0 0 20px var(--color-dark), 0 0 40px var(--color-dark), 0 0 60px var(--color-dark);
}
#header li.dot:after {
  content: "·";
  margin: 0 0.5em;
  opacity: 0.5;
}

#footer {
  padding: 5vmin;
  padding-bottom: 60px;
}
#footer.fixed {
  position: fixed;
  bottom: 0;
  line-height: 1;
  border-top: none;
  padding: 2.5vmin 5vmin;
}
#footer ul {
  margin: auto !important;
}

#hero {
  text-align: center;
  border-bottom: 2px solid rgba(243, 233, 232, 0.05);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: block;
  position: relative;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 0;
  opacity: 0.85;
  font-size: 0;
  white-space: nowrap;
}
.bg img {
  margin: 12.5vh 7.5vh;
  height: 75vh;
  border-radius: 10px;
  width: 75vh;
  display: inline-block;
  vertical-align: middle;
}
@media only screen and (hover: none) and (orientation: portrait) {
  .bg img {
    margin: calc(20vh - 40px) 5vmin;
    height: 60vh;
    width: 60vh;
  }
}
@media only screen and (hover: none) and (orientation: landscape) {
  .bg img {
    margin: calc(12.5vh - 10px) 7.5vh;
    height: 70vh;
    width: 70vh;
  }
}

.hero-tournament #logo-wrap {
  height: 100vh;
  width: 100vw;
  position: absolute;
  z-index: 100;
  background-repeat: no-repeat;
  background-size: 75vw;
  background-position: center;
}
@media only screen and (orientation: portrait) {
  .hero-tournament #logo-wrap {
    background-size: 95%;
  }
}

.sc-logo {
  position: relative;
  z-index: 100;
  display: inline-block;
  vertical-align: middle;
  animation: sc-scale 100s infinite;
  animation-timing-function: linear;
}
@media only screen and (orientation: portrait) {
  .sc-logo {
    width: 85vmin;
  }
}
@media only screen and (max-width: 600px) {
  .sc-logo {
    width: 90vmin;
  }
}
@media only screen and (orientation: landscape) {
  .sc-logo {
    width: 90vmin;
  }
}

.sc-logo-mini {
  position: relative;
  z-index: 100;
  width: 150px;
  display: block;
  margin: auto;
  margin-top: 40px;
  vertical-align: middle;
  animation: sc-scale 100s infinite;
  animation-timing-function: linear;
}

.bg {
  animation: sc-scroll 80s infinite linear;
}
.mobile-nav .bg {
  animation-play-state: paused;
}

@keyframes sc-scale {
  0% {
    transform: scale(0.75, 0.75);
  }
  50% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.75, 0.75);
  }
}
@keyframes sc-scale-howlin {
  0% {
    transform: scale(0.95, 0.95);
  }
  50% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.95, 0.95);
  }
}
@keyframes sc-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
cite {
  line-height: 1.55;
  border-left: 1px solid rgba(243, 233, 232, 0.2);
  padding-left: 1em;
  display: block;
  margin-bottom: 20px;
}
cite .stars {
  display: block;
  height: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
}
cite .avatar {
  display: block;
  height: 32px;
  margin-right: 10px;
  float: left;
}
cite a {
  display: block;
}

::-webkit-scrollbar-thumb {
  background: #fff;
}

.img-link {
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.img-link img {
  cursor: pointer;
}
.img-link img:hover {
  transform: scale(1.05, 1.05);
}

@media only screen and (max-width: 1000px) {
  div > span img {
    pointer-events: none;
  }
}

.page-error #header {
  position: absolute !important;
}
.page-error {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#board960 {
  margin: 0;
}

#num960 {
  display: block;
  text-align: center;
  opacity: 0.2;
}

main.fullscreen {
  height: 100vh !important;
  width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 100vh;
  background-color: var(--color-dark);
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  float: none !important;
  z-index: 1000000;
}

#origin .fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh !important;
  width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 100vh;
  background-color: var(--color-dark);
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  float: none !important;
  z-index: 1000000;
}
#origin .fullscreen img {
  height: 100vmin;
  display: inline-block;
  cursor: zoom-out;
  border-radius: 0px;
}

#imprint {
  padding: 2.5em 0;
  max-width: 325px;
  margin: auto;
  text-align: left;
  display: inline-block;
  vertical-align: middle;
}

#datenschutz {
  margin: auto;
  padding: 2.5em;
  margin: auto;
  padding-top: 50px;
}
#datenschutz section {
  margin: auto;
}
#datenschutz h2 {
  font-size: 25px;
  text-transform: uppercase;
  font-weight: normal;
}
#datenschutz h2:not(:first-child) {
  padding-top: 50px;
  margin-top: 50px;
  border-top: 2px dotted rgba(243, 233, 232, 0.1);
}
#datenschutz p + h3 {
  margin-top: 25px;
}
#datenschutz p + h4 {
  margin-top: 25px;
}
#datenschutz h3 {
  margin: 0;
  font-size: 14px;
  margin-bottom: 0.35em;
  line-height: 1.5;
  text-transform: uppercase;
  margin-top: 25px;
}
#datenschutz ul,
#datenschutz h4,
#datenschutz p {
  margin: 0;
  font-size: 14px;
  margin-bottom: 0.35em;
  line-height: 1.5;
  -webkit-hyphens: auto;
          hyphens: auto;
}
#datenschutz ul {
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 0;
}

.page-optin main {
  min-height: 100vh;
  line-height: 100vh;
}

#error {
  display: flex;
}
#error p {
  text-wrap: balance;
}

#thanks {
  padding: 6vmin 6vmin;
  border-radius: 1em;
  max-width: 350px;
  margin-top: -2.5em;
  margin-bottom: -5em;
  text-align: left;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.4;
  text-align: center;
  background: rgb(20, 20, 20);
  position: relative;
  z-index: 100000;
}
#thanks h3 {
  font-size: 45px;
  line-height: 1;
  text-align: center;
  margin: 0;
  margin-bottom: 0.25em;
}
#thanks h3 img {
  margin-bottom: 0.3em;
}
#thanks a.button {
  margin-top: 1em;
  line-height: 1.4;
  display: inline-block;
}
#thanks p {
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

p + h2 {
  margin-top: 1.5em;
}

.hero-buttons {
  display: inline-block;
  position: absolute;
  z-index: 10;
  bottom: 0px;
  width: 100%;
  padding-bottom: 3em;
  text-align: center;
  z-index: 10000;
}
.hero-buttons.gap {
  padding: 0;
  bottom: 0px;
  background: var(--color-light);
  height: 2px;
}
.hero-buttons.gap a {
  margin-top: -39px;
}

.hero-button-slim {
  display: inline-block;
  text-align: left;
  margin: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: black;
  font-size: 13px;
  font-weight: 900;
  border-radius: 5px;
  padding: 0.3em 0.85em;
  padding-bottom: 0.4em;
  border: 2px dotted rgba(243, 233, 232, 0);
  line-height: 1.4;
  letter-spacing: 0.05em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-button-slim:hover {
  background: var(--color-dark);
  color: var(--color-light);
  border: 2px dotted rgba(243, 233, 232, 0);
}
.hero-button-slim:hover img {
  filter: invert(100%);
}
.hero-button-slim span {
  font-weight: 500;
  opacity: 0.65;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 1;
  text-align: left;
  letter-spacing: 0.05em;
  margin-top: 0.5em;
  display: block;
  margin-bottom: -0.01em;
}

.hero-buttons-wrap {
  position: relative;
  text-align: center;
}
.hero-buttons-wrap .hero-button {
  margin: 1.5EM;
}
.hero-buttons-wrap .sticky-button {
  margin-top: -140px;
  height: 140px;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero .hero-buttons {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  z-index: 100;
  text-align: center;
  padding-bottom: 7.5vh;
}

.hero-tournament .bg {
  opacity: 0.75;
}

.hero-button {
  display: inline-block;
  text-align: left;
  margin-top: 5px;
  position: relative;
  z-index: 1000;
  background: #111113;
  font-size: 14px;
  font-weight: 900;
  border-radius: 50px;
  padding: 0.5em 1em;
  padding-bottom: 0.3em;
  border: 2px dotted rgba(243, 233, 232, 0);
  line-height: 1.4;
  letter-spacing: 0.05em;
  font-size: clamp(15px, 3vw, 22px) !important;
  letter-spacing: 0.1em;
  padding: 0.8em 1.5em;
  padding-bottom: 0.65em;
}
.hero-button i {
  font-style: normal;
  font-weight: 400;
}
.hero-button:hover {
  background: var(--color-dark);
  color: var(--color-light);
  border: 2px dotted rgba(243, 233, 232, 0);
}
.hero-button:hover img {
  filter: invert(100%);
}
.hero-button.dark:hover {
  background: var(--color-light);
  color: var(--color-dark);
  border: 2px dotted rgba(243, 233, 232, 0);
}
.hero-button.dark:hover img {
  filter: invert(100%);
}
.hero-button img {
  height: 1.35em;
  width: 1.35em;
  vertical-align: middle;
  margin-left: 0.25em;
  margin-right: 0.25em;
  margin-top: -0.175em;
}
.hero-button.pin {
  position: absolute !important;
  bottom: 15px;
  left: 15px;
}
.hero-button span {
  opacity: 0.65;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1;
  text-align: left;
  letter-spacing: 0.05em;
  margin-top: 0.5em;
  display: block;
  margin-bottom: -0.15em;
}
.hero-button.light {
  background: var(--color-light);
  color: var(--color-dark);
  font-weight: 700;
}
.hero-button.light img {
  filter: invert(100%);
}
.hero-button.light:hover {
  background: black;
  color: var(--color-light);
  border: 2px dotted rgba(243, 233, 232, 0);
}
.hero-button.light:hover img {
  filter: invert(0%);
}
.hero-button.black {
  background: black;
  color: var(--color-light);
  font-weight: 700;
}
.hero-button.wide {
  padding-left: 4em;
  padding-right: 4em;
}

.fundamentals-cta {
  position: relative;
  height: 89vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fundamentals-cta .left, .fundamentals-cta .right {
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 50vw;
  position: absolute;
  top: 0;
  z-index: -1;
}
.fundamentals-cta .left {
  left: 0;
  background-position: left center;
}
@media only screen and (max-width: 1000px) {
  .fundamentals-cta .left {
    width: 100vw;
  }
}
.fundamentals-cta .right {
  right: 0;
  background-position: right center;
}
@media only screen and (max-width: 1000px) {
  .fundamentals-cta .right {
    display: none;
  }
}

.tournament-title {
  z-index: 100;
  position: relative;
  max-width: 100vw !important;
  min-height: 95vh;
}
.tournament-title > div {
  background: #111113;
}
.tournament-title {
  margin: 0;
  height: 100vh;
  height: 100vh;
}
.tournament-title.tournament-title-profile {
  min-height: 100vh;
  height: auto;
  padding-top: 72px;
}
.tournament-title.img-top {
  background-position: center top;
}
.tournament-title.img-middle {
  background-position: center center;
}
.tournament-title.img-bottom {
  background-position: center bottom;
}
.tournament-title.img-right {
  background-position: right center;
}
.tournament-title {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-color: #232426;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.tournament-title:before {
  background-color: rgba(0, 0, 0, 0.125);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}
@media (hover: hover) {
  .tournament-title {
    background-attachment: fixed;
  }
}

.mobile-nav .howlin-wordmark {
  opacity: 0;
}
.howlin-wordmark {
  transition: opacity 0.125s ease-in-out 0s;
  pointer-events: none;
  z-index: 100;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
}
.howlin-wordmark #howlin-logo-font-wrap {
  position: absolute;
  text-align: center;
  width: 300vw;
  top: 26%;
  left: 100%;
  top: 50%;
  margin-top: -13.5vw;
  margin-left: -200vw;
  line-height: 0.8;
  letter-spacing: 0em;
  font-size: 21vw;
  font-family: "HOWLINLogo";
  display: inline-block;
}

h2 {
  margin: 0;
  font-size: 24px;
  margin-bottom: 0.25em;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.065em;
  font-weight: 700;
  font-feature-settings: "ss01";
}

h3 {
  margin: 0;
  font-size: 14px;
  font-size: 20px;
  letter-spacing: 0.075em;
  margin-bottom: 0.35em;
  margin-top: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}
h3 i {
  font-style: normal;
  font-size: inherit;
  line-height: 1;
  margin-left: -0.065em;
  font-weight: 800;
}

h4 {
  margin: 0;
  font-size: 14px;
  margin-bottom: 0.35em;
  line-height: 1;
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 1em;
}

p + h3 {
  margin-top: 2em !important;
}

quote,
p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0em;
  margin-top: 0em;
}
@media only screen and (min-width: 1300px) {
  quote,
  p {
    font-size: 13px;
    line-height: 1.6;
  }
}
b {
  text-transform: uppercase;
}

li a:hover,
p a:hover {
  opacity: 0.25;
}

a {
  color: var(--color-light);
  text-decoration: none;
}

.golden-rules {
  -moz-column-gap: 32px;
       column-gap: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.board-square {
  background: rgba(255, 255, 255, 0.025);
  padding: 40px !important;
}

.mini-board {
  aspect-ratio: 1;
  flex-grow: 1;
}
.mini-board .arrow:after {
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -0.25vmin;
  margin-left: -71%;
  width: 142%;
  border-top: 0.5vmin solid white;
  content: "";
  display: block;
  transform: rotate(-45deg);
}

.golden-rule-description {
  padding: 40px !important;
  display: flex;
}
.golden-rule-description p .objective {
  display: block;
  opacity: 0.5;
  margin-top: 1em;
}
.golden-rule-description p b {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.065em;
}
.golden-rule-description p a {
  text-decoration: underline;
}
.golden-rule-description p {
  bottom: 0px;
  margin: 0;
  left: 0px;
  padding: 0;
  text-align: left;
  font-weight: 300;
  font-size: 16px;
  font-size: clamp(14px, 3vw, 18px) !important;
  line-height: 1.64;
  line-height: 1.5;
  list-style: none;
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-line-clamp: 20;
}
.golden-rule-description p li:not(:first-child) {
  border-top: 1px solid rgba(243, 233, 232, 0.05);
}
@media only screen and (max-width: 1000px) {
  .golden-rule-description p {
    top: 0px;
    bottom: auto;
  }
}

.golden-rule {
  counter-increment: tip;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 128px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 601px) {
  .golden-rule {
    max-width: 1000px;
  }
}
@media only screen and (max-width: 900px) {
  .golden-rule {
    max-width: 600px !important;
    margin: auto;
  }
}
@media only screen and (min-width: 1024px) {
  .golden-rule {
    max-width: 1200px;
  }
}
@media only screen and (max-width: 1280px) {
  .golden-rule {
    margin-right: 4.5vmin;
    margin-left: 4.5vmin;
  }
}
@media only screen and (max-width: 900px) {
  .golden-rule {
    flex-direction: column;
    justify-content: space-between;
  }
}
.golden-rule > div {
  overflow: hidden;
  border-radius: 10px;
  width: calc(49% - 0px);
  position: relative;
  width: 50%;
}
@media only screen and (max-width: 900px) {
  .golden-rule > div {
    width: 100%;
  }
}

h2 {
  font-size: clamp(34px, 3vw, 55px);
  text-wrap: balance;
}

h3.sticky.counter:before {
  content: counter(tip) " / 10";
  opacity: 0.25;
  margin-right: 1em;
}
h3.sticky {
  line-height: 1.5;
  font-size: 16px;
  font-weight: 900;
  font-weight: normal;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  position: sticky;
  z-index: 100;
  top: -1px;
  background: linear-gradient(0deg, rgba(23, 23, 26, 0) 0%, rgb(23, 23, 26) 60%);
  text-align: center;
  font-size: 12px;
  font-size: 11px;
  line-height: 64px;
  letter-spacing: 0.1em;
  font-weight: normal;
}

.page-tips main .tips-content {
  padding-top: 0px;
}
.page-tips main .tips-content .scrollspy {
  counter-increment: tip;
}
.page-tips main .tips-content h3:before {
  content: counter(tip) " / 11";
  opacity: 0.25;
  margin-right: 1em;
}
.page-tips main div:not(:first-child) {
  border-top: 2px dotted rgba(243, 233, 232, 0.1);
  margin-top: 80px;
}
.page-tips main div {
  padding-top: 30px;
}
.page-tips main div:last-child {
  margin-bottom: 100px;
}
.page-tips main .tips-pic {
  max-width: 100%;
  padding: 65px;
}
.page-tips main p + h3 {
  margin-top: 70px;
  padding-top: 70px;
  border-top: 2px dotted rgba(243, 233, 232, 0.1);
}
.page-tips main h3 {
  line-height: 1.5;
  font-size: 16px;
  font-weight: 900;
  font-weight: normal;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  position: sticky;
  z-index: 0;
  top: -1px;
  background: linear-gradient(0deg, rgba(23, 23, 26, 0) 0%, rgb(23, 23, 26) 60%);
  text-align: center;
  font-size: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: normal;
  padding-top: 26px;
  padding-bottom: 25px;
  margin-bottom: -65px;
}
.page-tips main h4 {
  line-height: 1.5;
  font-size: 34px;
  font-weight: normal;
  text-transform: none;
  margin-bottom: 35px;
}
@media only screen and (max-width: 1000px) {
  .page-tips main h4 {
    font-size: 28px;
    line-height: 1.3;
  }
}
.page-tips main p > b {
  font-family: "ND Kern", futura, Sans-Serif;
  text-transform: none;
  border-bottom: 1px solid rgba(243, 233, 232, 0.25);
  font-size: 95%;
}
.page-tips main p > b:hover {
  cursor: pointer;
}
.page-tips main p > b:hover:before {
  z-index: 20000;
  font-size: 18px;
  width: 400px;
  padding: 25px 30px;
  content: attr(data-hover);
  display: inline-block;
  background: black;
  position: absolute;
  left: 50%;
  border-radius: 10px;
  margin-top: 50px;
  margin-left: -200px;
  box-shadow: 0 0 20px 10px black;
  box-shadow: 0 0 30px 10px rgba(243, 233, 232, 0.125);
}
.page-tips main p {
  font-size: 20px;
  font-family: "Lora", Georgia, Serif;
  line-height: 1.5;
  letter-spacing: 0.0175em;
}
@media only screen and (max-width: 1000px) {
  .page-tips main p {
    font-size: 18px;
  }
}

.long-read p {
  font-size: 21px;
  font-family: "Lora", Georgia, Serif;
  line-height: 1.7;
  letter-spacing: 0.0175em;
}
.long-read p.indent {
  border: 2px dotted rgba(243, 233, 232, 0.3);
  padding: 0.7em 1.25em;
  opacity: 0.5;
  font-size: 130%;
}
.long-read p a {
  border-bottom: 1px solid rgba(243, 233, 232, 0.25);
}
@media only screen and (max-width: 1000px) {
  .long-read p {
    font-size: 19px;
  }
}
@media only screen and (max-width: 600px) {
  .long-read p {
    font-size: 17px;
  }
}

.page-imprint main {
  text-align: center;
  line-height: 100vh;
}

.address span {
  float: left;
}

#logo-wrap {
  line-height: 100vh;
  pointer-events: none;
}
@media (hover: none) {
  #logo-wrap {
    line-height: calc(100vh - 70px);
  }
}

#logo-wrap + #logo-wrap {
  position: absolute;
  top: 0;
  width: 100%;
}

.link-impressum {
  z-index: 10000;
  font-size: 8px;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.35;
  padding: 1em 1.25em;
  text-transform: uppercase;
}

.link-datenschutz {
  z-index: 10000;
  font-size: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.35;
  padding: 1em 1.25em;
  text-transform: uppercase;
}

.promotion-short + .promotion {
  margin-top: 20px !important;
}

.promotion-short.caption {
  position: relative !important;
  z-index: 1000;
  margin-bottom: 20px;
  display: none;
}
.promotion-short {
  background: var(--color-dark);
  z-index: 10000;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0;
  list-style: none;
  margin: auto;
  padding-top: 10px;
  background: linear-gradient(to bottom, rgb(23, 23, 26) 0%, rgb(23, 23, 26) 30%, rgba(23, 23, 26, 0) 100%);
}
@media only screen and (max-width: 600px) {
  .promotion-short {
    display: none;
  }
}
@media only screen and (max-width: 900px) {
  .promotion-short {
    max-width: 600px !important;
  }
}
@media only screen and (min-width: 1024px) {
  .promotion-short {
    max-width: 1200px;
  }
}
@media only screen and (max-width: 900px) {
  .promotion-short li:nth-last-child(2) {
    display: none;
  }
}
@media only screen and (max-width: 1000px) {
  .promotion-short li:nth-last-child(1) {
    display: none;
  }
}
.promotion-short li {
  flex: 1;
}
.promotion-short li a {
  position: relative;
  box-shadow: 0 0 5px var(--color-dark);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  background: #0b0b0d;
  display: block;
  padding: 0.8em 1.1em;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1;
  font-size: 18px;
}
.promotion-short li a:hover {
  opacity: 1;
  background: black;
}
.promotion-short li a:hover img {
  opacity: 1;
  transform: scale(1.3, 1.3);
}
.promotion-short li p {
  font-size: 10px;
  line-height: 1.2;
  margin-bottom: 13px;
  text-align: center;
  opacity: 0.2;
}
.promotion-short li i {
  font-weight: 400;
  font-style: normal;
  display: block;
}
.promotion-short li img {
  transition: all 0.1s var(--easing) 0s;
  transform: scale(1, 1);
  opacity: 0.15;
  top: 0;
  padding: 10px;
  right: 2px;
  height: 100%;
  position: absolute;
}

#quick-nav {
  background: linear-gradient(0deg, rgba(23, 23, 19, 0.3) 0%, rgba(23, 23, 19, 0) 100%);
  z-index: 10000;
  position: absolute;
  bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -69px;
}
@media only screen and (max-width: 1000px) {
  #quick-nav {
    padding-top: 200px;
  }
}
#quick-nav a {
  position: relative;
}
#quick-nav a:after {
  opacity: 0.25;
  content: "";
  display: block;
  background: var(--color-light);
  height: 2px;
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: scale(0, 1);
  transition: all 0.125s ease-in-out 0s;
}
#quick-nav a:hover:after {
  opacity: 1;
  transform: scale(1, 1);
}
#quick-nav a {
  display: inline-block;
  font-weight: bold;
  color: var(--color-light);
  height: 12.5vh;
  line-height: 12.5vh;
  text-align: center;
  text-transform: uppercase;
}
@media only screen and (min-width: 850px) {
  #quick-nav a {
    padding-right: 1em;
  }
}
#quick-nav a img {
  display: inline-block;
  vertical-align: middle;
  height: 32px;
  width: 32px;
  margin-top: -3px;
}
@media only screen and (max-width: 850px) {
  #quick-nav a img {
    height: 44px;
    width: 44px;
    padding: 4px;
  }
}
#quick-nav a i {
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
}
@media only screen and (max-width: 900px) {
  #quick-nav a i {
    display: none;
  }
}

@media only screen and (min-width: 600px) {
  article {
    padding: 10vmin 4vmin;
  }
}

#aside {
  border-top: 2px solid rgba(243, 233, 232, 0.05);
  border-bottom: 2px solid rgba(243, 233, 232, 0.05);
}
@media only screen and (min-width: 600px) {
  #aside {
    padding: 5vmin;
  }
}

#header > .features {
  background: none;
  padding: 1.6em;
}
#header > .features > li {
  padding: 0 1.6em;
  font-size: 11px;
  line-height: 1.2 !important;
}

.cta-tournament .features img {
  display: none;
}

.features {
  background: linear-gradient(0deg, rgba(23, 23, 26, 0) 0%, rgba(23, 23, 26, 0.95) 50%);
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 20px 2vmin;
  margin: 0;
}
.features.features-left li {
  text-align: left;
}
.features b {
  font-weight: 900;
}
.features a {
  text-shadow: none;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid var(--color-light);
  color: var(--color-light);
  width: auto;
  padding: 6px 10px;
  padding-bottom: 0.4em;
  text-align: center;
  text-transform: initial;
  bottom: 0px;
  position: relative;
  line-height: 1.3;
  background: var(--color-light);
  color: var(--color-dark);
  font-size: 14px;
}
.features a:hover {
  background: black;
  color: var(--color-light);
  opacity: 1;
  border: 1px solid black;
}
@media only screen and (max-width: 1024px) {
  .features a {
    font-size: 13px;
    margin-top: -0.15em;
  }
}
@media only screen and (max-width: 670px) {
  .features a {
    font-size: 13px;
    margin-top: -0.15em;
  }
}
@media only screen and (max-width: 1024px) {
  .features {
    flex-wrap: wrap;
    padding: 3vmin 0vmin;
  }
}
@media only screen and (max-width: 670px) {
  .features .break {
    display: block !important;
  }
}
@media only screen and (max-width: 670px) {
  .features .mobile {
    display: none !important;
  }
}
.features img {
  display: block;
  margin: auto;
  height: 20px;
  margin-bottom: 7px;
}
.features li + li {
  border-left: 1px solid rgba(243, 233, 232, 0.1);
}
.features li {
  padding: 0 1.35vmin;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.05em;
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
@media only screen and (max-width: 670px) {
  .features li {
    margin: 1vmin 0;
    padding: 0 1.5vmin;
  }
}
@media only screen and (max-width: 1024px) {
  .features li {
    font-size: 11px;
  }
}
@media only screen and (max-width: 670px) {
  .features li {
    font-size: 10px;
  }
}

.tips-breakdown {
  background: linear-gradient(0deg, rgba(23, 23, 26, 0) 0%, rgba(23, 23, 26, 0.95) 50%);
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 25px 2vmin;
  margin: 0;
  padding-bottom: 48px;
  margin-bottom: -24px;
  margin-bottom: -64px;
  margin-top: -1px;
  display: none;
}
.tips-breakdown a {
  line-height: 65px;
  margin-top: -24px;
  display: block;
}
.tips-breakdown a.active {
  font-weight: 900;
  letter-spacing: -0.025em;
}
@media only screen and (min-width: 1024px) {
  .tips-breakdown {
    position: sticky;
    top: -1px;
  }
}
@media only screen and (max-width: 1024px) {
  .tips-breakdown {
    flex-wrap: wrap;
    padding: 5vmin 5vmin;
  }
}
@media only screen and (max-width: 670px) {
  .tips-breakdown .break {
    display: block !important;
  }
}
@media only screen and (max-width: 670px) {
  .tips-breakdown .mobile {
    display: none !important;
  }
}
.tips-breakdown li {
  height: 1.5em;
  padding: 0 1vmin;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
@media only screen and (max-width: 670px) {
  .tips-breakdown li {
    margin: 1vmin 0;
    padding: 0 2vmin;
  }
}
@media only screen and (max-width: 670px) {
  .tips-breakdown li {
    font-size: 10px;
  }
}
.tips-breakdown li + li {
  border-left: 1px solid rgba(243, 233, 232, 0.05);
}

.figures-wrap {
  width: 100%;
  display: flex;
}
.figures-wrap img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
.figures-wrap > * {
  flex: 1;
  margin-bottom: 15px;
}
.figures-wrap > * + * {
  margin-left: 15px;
}

.figures {
  width: 100vw;
  display: flex;
  flex-flow: column wrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: left;
  padding: 0 10vmin;
  text-align: left;
}
.figures em {
  font-style: normal;
  margin-bottom: 10px;
  display: block;
  font-size: 30px;
}
.figures figure {
  border: 1.5vmin solid var(--color-dark);
  flex: 1;
  min-width: 400px;
}
.figures figure .caption b {
  font-weight: 900;
  text-transform: none;
}
.figures figure .caption {
  line-height: 1.55;
  display: block;
  margin-bottom: 1.25em;
  text-align: left;
  width: 72.5%;
}
.figures figure .caption + .caption {
  width: 100%;
  font-size: 20px;
  display: none;
}
.figures figure img {
  max-width: 100%;
  margin-bottom: 10px;
}

#blog {
  padding: 5vmin 0;
}
#blog h2 {
  margin-bottom: 2.5vmin;
}
@media only screen and (min-width: 600px) {
  #blog {
    padding: 10vmin 0;
  }
}

@media only screen and (max-width: 1000px) {
  .mobile-collapse .promotion .figure-background,
  .mobile-collapse .promotion .deck-overview .text-square p,
  .mobile-collapse .promotion .deck-overview .text-square .stats,
  .mobile-collapse .promotion .deck-overview .text-square time {
    display: none !important;
  }
  .mobile-collapse .promotion .deck-overview .text-square > b {
    margin: 0 !important;
  }
  .mobile-collapse .promotion .deck-overview .text-square {
    padding: 5vmin !important;
  }
}

.blog-section {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  align-content: center;
  align-items: center;
}
.blog-section .blog-entry {
  max-width: 1024px;
  border-radius: 10px;
  list-style: none;
  background: rgba(0, 0, 0, 0.5);
}
.blog-section .blog-entry h4 {
  margin: 0;
  opacity: 0.5;
}
@media only screen and (max-width: 800px) {
  .blog-section .blog-entry {
    padding: 6.5vmin 6.5vmin;
  }
}
@media only screen and (min-width: 801px) {
  .blog-section .blog-entry {
    padding: 40px 45px;
  }
}

@media only screen and (min-width: 700px) {
  .page-nav + .glossary,
  .press-nav + section,
  .press-nav + .press-section {
    margin-top: -100vh !important;
  }
}

.page-nav,
.press-nav {
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  height: 100%;
  position: sticky;
  height: 100vh;
  display: inline-flex;
  align-items: center;
}
.page-nav:before,
.press-nav:before {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  height: 30vh;
  left: 0;
  background: linear-gradient(0deg, rgb(23, 23, 26) 0%, rgba(23, 23, 26, 0) 20%, rgba(23, 23, 26, 0) 80%, rgb(23, 23, 26) 100%);
  top: 50%;
  margin-top: -15vh;
  z-index: 1000;
  pointer-events: none;
}
.page-nav ul,
.press-nav ul {
  padding: 50px 0;
  margin: 0;
  top: 0;
  height: 100vh;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  gap: 5px;
  list-style: none;
  height: 30vh;
  overflow: hidden;
  top: 50%;
}
.page-nav li,
.press-nav li {
  line-height: 1.2;
  font-size: 9px;
}
@media only screen and (max-width: 700px) {
  .page-nav,
  .press-nav {
    display: none;
  }
}

.press-nav a {
  max-width: 6em;
}

.page-nav a {
  min-width: 1em;
  text-align: center;
}

.page-nav a,
.press-nav a {
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  opacity: 0.25;
  text-wrap: balance;
}
@media only screen and (max-width: 1024px) {
  .page-nav a span,
  .press-nav a span {
    display: none;
  }
}
.page-nav a:before,
.press-nav a:before {
  content: "";
  border-radius: 50%;
  height: 5px;
  width: 5px;
  background: var(--color-light);
  opacity: 0.5;
  display: inline-block;
  margin-top: -4px;
  left: 0;
  top: 50%;
  display: inline-block;
}
@media only screen and (min-width: 1024px) {
  .page-nav a:before,
  .press-nav a:before {
    display: none;
  }
}
.page-nav a:hover, .page-nav a.active,
.press-nav a:hover,
.press-nav a.active {
  opacity: 1;
  font-weight: bold;
}
.page-nav a.active:before,
.press-nav a.active:before {
  opacity: 1;
}
@media only screen and (max-width: 1024px) {
  .page-nav a.active:before,
  .press-nav a.active:before {
    display: inline-block;
  }
}

.press-section {
  padding-top: 0;
  margin-bottom: 10vmin;
  display: flex;
}
.press-section blockquote {
  border-top: 2px dotted rgba(243, 233, 232, 0.1);
  padding-top: 1em;
  margin-top: 0.4em;
  font-size: clamp(30px, 3.5vw, 40px) !important;
  margin-bottom: 2em;
  font-family: "Lora", Georgia, Serif;
  line-height: 1.2;
  letter-spacing: 0.0175em;
  text-wrap: balance;
}
.press-section blockquote cite {
  margin-top: 1.5em;
  font-size: 12px;
  opacity: 0.5;
}
.press-section .press-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.press-section .press-item > * {
  min-width: 100%;
}
.press-section .press-item p + figure {
  margin-top: 9vmin;
  margin-bottom: 9vmin;
}
.press-section .press-item figcaption {
  position: absolute;
  top: 100%;
  opacity: 0.25;
  padding-top: 0.75em;
}
.press-section .press-item > figure {
  margin-bottom: 30px;
  position: relative;
}
.press-section .press-item > figure i {
  display: block;
  background: rgba(243, 233, 232, 0.025);
  padding-top: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.press-section .press-item > figure img {
  position: absolute;
  top: 0;
}
.press-section h2 {
  font-size: clamp(44px, 4.5vw, 70px) !important;
  margin-top: 25px;
  margin-bottom: 5px;
  text-wrap: balance;
}
.press-section h2 span {
  letter-spacing: 0.035em;
  font-size: clamp(12px, 3vw, 12px) !important;
  font-weight: 500;
  display: block;
  margin-bottom: 0.25em;
  margin-bottom: 10px;
  opacity: 0.5;
  display: none;
}
.press-section h4 {
  font-size: 12px;
  opacity: 0.5;
}

section {
  padding: 5vmin 5vmin;
  max-width: 750px;
  margin: auto;
  text-align: left;
}
section img {
  max-width: 100%;
}
section.whide {
  width: 100vw !important;
  max-width: 100vw !important;
}
section.large, section.large-text {
  padding: 7.5vmin 5vmin;
  max-width: 1000px;
  max-width: 900px;
}
@media only screen and (max-width: 601px) {
  section.large, section.large-text {
    padding: 10vmin 5vmin;
  }
}
section.large-text h2 {
  font-weight: 900;
  font-family: "ND Kern", futura, Sans-Serif;
  font-size: 32px;
  font-size: 40px;
  font-size: 42px;
  font-size: clamp(40px, 5.5vw, 65px) !important;
  line-height: 1;
  position: relative;
  top: -0.05em;
  margin: auto;
}
section.large-text h2 span {
  font-weight: 400;
}
@media only screen and (min-width: 1000px) {
  section.large-text h2 span {
    display: block;
  }
}
section.large-text h3 {
  font-weight: 600;
  line-height: 1.65;
  font-family: "ND Kern", futura, Sans-Serif;
  font-size: clamp(20px, 5.5vw, 28px) !important;
  position: relative;
  margin-bottom: 0;
}
section.large-text h2 + h4 {
  margin-bottom: 2em;
}
section.large-text ul {
  padding: 0;
  list-style: none;
}
section.large-text ul li {
  text-wrap: balance;
  padding: 0.35em 0;
}
section.large-text ul li:not(:last-child) {
  border-bottom: 2px dotted rgba(243, 233, 232, 0.1);
}
section.large-text ul,
section.large-text p {
  line-height: 1.5;
  text-wrap: balance;
}
section.large-text ul:not(:last-child),
section.large-text p:not(:last-child) {
  margin-bottom: 1.5em;
}
section.large-text ul s,
section.large-text p s {
  text-decoration: line-through;
}
section.large-text ul s b,
section.large-text p s b {
  display: inline !important;
  text-decoration: line-through;
}
section.large-text ul b.block,
section.large-text p b.block {
  display: block;
}
section.large-text ul b,
section.large-text p b {
  letter-spacing: 0.045em;
  font-weight: 700;
  font-family: "ND Kern", futura, Sans-Serif;
}
section.large-text ul a,
section.large-text p a {
  border-bottom: 0.05em dashed rgba(243, 233, 232, 0.25);
}
section.large-text ul,
section.large-text p {
  font-family: "Lora", Georgia, Serif;
  font-size: 32px;
  font-size: 28px;
  font-size: clamp(17px, 3.5vw, 28px) !important;
}
@media only screen and (max-width: 601px) {
  section.large-text ul,
  section.large-text p {
    font-size: 18px;
    line-height: 1.6;
  }
}
section p {
  font-size: 20px;
  text-wrap: balance;
}
section p.intro {
  -webkit-hyphens: none;
          hyphens: none;
  font-size: 290%;
  line-height: 1.3;
  font-size: 300%;
  line-height: 1.25;
  font-weight: 500;
}
@media only screen and (max-width: 601px) {
  section p.intro {
    -webkit-hyphens: auto;
            hyphens: auto;
    font-size: 250%;
  }
}
@media only screen and (max-width: 601px) {
  section p {
    font-size: 17px;
  }
}
section .faq + .faq {
  border-top: 2px dotted rgba(243, 233, 232, 0.1);
}
section .faq a {
  text-decoration: underline;
  opacity: 0.5;
}
section .faq a:hover {
  opacity: 1;
}
section .faq {
  font-size: 18px;
  line-height: 1.75;
  margin: 0;
  padding-bottom: 15px;
  list-style: none;
}
section .faq dd, section .faq dt {
  padding: 0;
  margin: 0;
  display: block;
}
section .faq:hover dt:after {
  opacity: 1;
}
section .faq dt {
  cursor: pointer;
  padding-right: 30px;
  padding-top: 35px;
  padding-bottom: 30px;
  margin-bottom: -15px;
  display: block;
  position: relative;
  font-size: clamp(22px, 3vw, 40px) !important;
  line-height: 1;
  text-wrap: balance;
}
section .faq dt:after {
  padding-top: 20px;
  padding-bottom: 20px;
  right: 0;
  top: -5px;
  position: absolute;
  content: "⌃";
  transform: rotate(-180deg);
  font-weight: normal;
  opacity: 0.2;
  font-size: 20px;
  transition: all 0.125s ease-in-out 0s;
}
section .faq dd {
  overflow: hidden;
  transition: max-height 0.35s ease-in-out 0s, opacity 0.35s ease-in-out 0s;
  max-height: 0px;
  opacity: 0;
  font-size: clamp(17px, 3vw, 24px) !important;
}
section .faq.open dt:after {
  transform: rotate(0deg);
}
section .faq.open dd {
  display: block;
  max-height: 500px;
  opacity: 1;
}
section .faq dt {
  font-weight: 900;
  text-transform: uppercase;
}
@media only screen and (max-width: 601px) {
  section .faq {
    font-size: 16px;
  }
}
section .crashcourse {
  margin-top: 5vmin;
  font-size: 20px;
  line-height: 1.3;
  border-radius: 10px;
  list-style: none;
  background: rgba(243, 233, 232, 0.025);
  border: 2px dotted rgba(243, 233, 232, 0.1);
  display: flex;
  flex-flow: column wrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: left;
  padding: 15px 0px;
}
section .crashcourse dd, section .crashcourse dt {
  padding: 8px 30px;
  margin: 0;
  width: 33.3333%;
  width: 25%;
  width: 50%;
  width: 100%;
}
section .crashcourse dt {
  font-weight: 900;
  text-transform: uppercase;
}
section .crashcourse dt + dd,
section .crashcourse dd + dd {
  border-top: 2px dotted rgba(243, 233, 232, 0.1);
  border-right: 2px dotted rgba(243, 233, 232, 0.1);
}
@media only screen and (max-width: 601px) {
  section .crashcourse {
    font-size: 16px;
  }
}

.variants {
  background-color: rgba(243, 233, 232, 0.025);
  display: flex;
  list-style: none;
  margin: 0;
  padding: 5vmin;
  width: 100%;
}
.variants li {
  margin: 0;
  padding: 0;
  width: 200%;
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
}
.variants img {
  display: block;
  margin: auto;
}

.questions {
  display: flex;
  width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: X mandatory;
  padding-bottom: 20px;
  margin-bottom: -20px;
}
.questions img {
  width: 33.333%;
  display: block;
}

@keyframes pulsate-wear {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes rotate-wear {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
.tracks {
  padding: 0;
  margin: 0;
}
.tracks .tracks-embedded {
  position: relative;
  display: flex;
  width: 100vw;
  padding: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: X mandatory;
  padding: 30vw 0;
}
.tracks .tracks-embedded div {
  max-width: 40vw;
  min-width: 40vw;
  scroll-snap-align: center;
}
.tracks .tracks-embedded div iframe {
  box-shadow: 0 0 100px rgba(243, 233, 232, 0.125);
  margin: auto;
  display: block;
  width: 30vw;
}
@media only screen and (max-width: 1000px) {
  .tracks .tracks-embedded {
    flex-direction: column;
  }
}

.shop-inline {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100% !important;
  border: 0.5vmin solid var(--color-dark);
}
.shop-inline p {
  display: none;
}
.shop-inline {
  width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: X mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shop-inline::-webkit-scrollbar {
  display: none;
}
.shop-inline {
  margin-bottom: 30px;
  padding: 0 3.5vmin;
}
.shop-inline a {
  border-radius: 10px;
  transform: scale(1, 1);
}
.shop-inline a figure {
  background: rgba(243, 233, 232, 0.025);
  padding-top: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
.shop-inline a figure img {
  position: absolute;
  top: 0;
}
.shop-inline a.button {
  display: none;
}
@media only screen and (max-width: 600px) {
  .shop-inline a:nth-child(1) {
    width: 100% !important;
  }
}
.shop-inline a.soon {
  pointer-events: none;
}
.shop-inline a {
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  display: block;
  width: calc(50% - 5px);
}
@media only screen and (min-width: 601px) {
  .shop-inline a {
    min-width: 515px;
  }
}
.shop-inline a .details {
  background: linear-gradient(0deg, rgba(23, 23, 26, 0) 70%, rgba(23, 23, 26, 0.2) 95%);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 30px;
  padding: 20px 25px;
  z-index: 1000;
  padding-bottom: 200px;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  letter-spacing: 0.075em;
}
.shop-inline a .details i {
  background: var(--color-dark);
  color: var(--color-light);
  display: inline-block;
  padding: 0.8em 1.1em;
  font-weight: 900;
  text-transform: uppercase;
  position: absolute;
  left: 30px;
  bottom: 25px;
  margin: 0;
  left: 0;
  bottom: 0;
  margin: 15px 20px;
  margin: 10px;
  border-radius: 5px;
  padding: 0.6em 0.9em;
  padding-bottom: 0.4em;
  font-style: normal;
  box-shadow: 0 0 40px rgba(243, 233, 232, 0.125);
  letter-spacing: 0.15em;
}
@media (hover: hover) {
  .shop-inline a .details i:hover {
    background: var(--color-light);
    color: var(--color-dark);
  }
}
.shop-inline a .details i span {
  font-weight: normal;
  letter-spacing: 0.1em;
}
.shop-inline a .details b {
  text-shadow: 0 0 20px rgba(23, 23, 26, 0.5), 0 0 2px rgba(23, 23, 26, 0.5), 0 0 30px rgba(23, 23, 26, 0.5);
  display: block;
}
.shop-inline a .details b:first-child {
  font-weight: 700;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 600px) {
  .shop-inline a .details b {
    display: none;
  }
}
.shop-inline a .mini {
  opacity: 0.9;
  position: absolute;
  bottom: 35px;
  right: 35px;
  z-index: 10000;
  width: 105px;
  border: 10px solid white;
  border-radius: 5px;
  float: left;
}
.shop-inline a .variants {
  z-index: 10000;
  position: absolute;
  bottom: 35px;
  left: 35px;
  right: 35px;
  font-size: 0;
  display: none;
}
.shop-inline a .variants img {
  transition: all 0s ease-in-out 0s;
  width: 15%;
  margin-right: 3px;
  margin-top: 3px;
  float: left;
}
.shop-inline a img {
  transition: all 0s ease-in-out 0s;
  width: 100%;
  display: block;
  z-index: 10;
}
.shop-inline a .overlay {
  transform: scale(1.05, 1.05);
  position: absolute;
  opacity: 0;
  z-index: 100;
}
@media (hover: hover) {
  .shop-inline a:hover {
    opacity: 1;
  }
  .shop-inline a:hover .main {
    opacity: 0.8;
    transform: scale(1.05, 1.05);
  }
  .shop-inline a:hover .overlay {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@media only screen and (max-width: 1000px) {
  .shop-inline.button {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 20px;
    line-height: 3;
    border: none !important;
    background: black;
    margin-top: 0px;
    margin-bottom: 50px;
  }
  .shop-inline:nth-child(1), .shop-inline:nth-child(2), .shop-inline:nth-child(3) {
    display: block;
  }
}
@media only screen and (max-width: 600px) {
  .shop-inline {
    flex-direction: wrap;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 600px) {
  .shop-inline {
    border: 2px solid var(--color-dark);
  }
}
@media only screen and (max-width: 600px) {
  .shop-inline {
    min-width: 0;
    width: calc(50% - 5px);
  }
}

a.whatever {
  margin-top: 100px !important;
  margin-bottom: 40px !important;
}
a.whatever:last-child {
  margin-bottom: 0px !important;
}
a.whatever.soon {
  pointer-events: none;
}
a.whatever {
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  transition: all 0.5s ease-in-out 0s;
}
a.whatever > span {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 75%);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 30px;
  z-index: 1000;
  padding-bottom: 125px;
  font-size: 13px;
}
a.whatever > span i {
  background: var(--color-dark);
  color: var(--color-light);
  display: inline-block;
  padding: 0.8em 1.1em;
  font-weight: 900;
  text-transform: uppercase;
  position: absolute;
  left: 30px;
  bottom: 25px;
  margin: 0;
  font-style: normal;
  box-shadow: 0 0 40px rgba(243, 233, 232, 0.125);
}
@media (hover: hover) {
  a.whatever > span i:hover {
    background: var(--color-light);
    color: var(--color-dark);
  }
}
a.whatever > span i span {
  font-weight: normal;
}
a.whatever > span b {
  display: block;
}
a.whatever > span b:first-child {
  font-weight: 900;
}
a.whatever .mini {
  opacity: 0.9;
  position: absolute;
  bottom: 35px;
  right: 35px;
  z-index: 10000;
  width: 105px;
  border: 10px solid white;
  border-radius: 5px;
  float: left;
}
a.whatever .variants {
  z-index: 10000;
  position: absolute;
  bottom: 35px;
  left: 35px;
  right: 35px;
  font-size: 0;
  display: none;
}
a.whatever .variants img {
  transition: all 0.125s ease-in-out 0s;
  width: 15%;
  margin-right: 3px;
  margin-top: 3px;
  float: left;
}
a.whatever img {
  transition: all 0.125s ease-in-out 0s;
  width: 100%;
  display: block;
  z-index: 10;
}
a.whatever div {
  overflow: hidden;
  float: left;
}
@media only screen and (min-width: 601px) {
  a.whatever div {
    width: 100%;
  }
}
@media only screen and (max-width: 601px) {
  a.whatever div:last-child {
    display: none;
  }
}
@media only screen and (max-width: 601px) {
  a.whatever {
    margin-bottom: 2.5vmin !important;
  }
}
@media only screen and (min-width: 601px) {
  a.whatever {
    width: calc(100% + 100px);
    margin-left: -50px;
  }
}
@media only screen and (max-width: 1000px) {
  a.whatever {
    min-width: 0px;
    width: 100%;
  }
}
@media (hover: hover) {
  a.whatever:hover {
    opacity: 1;
  }
  a.whatever:hover .main {
    opacity: 0.8;
    transform: scale(1.05, 1.05);
  }
}

.glossary {
  position: relative;
  margin: auto;
  text-align: left;
  max-width: 1480px;
}
.glossary::before {
  content: attr(id);
  line-height: 1.5;
  font-size: 16px;
  font-weight: 900;
  font-weight: normal;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  position: sticky;
  z-index: 100;
  top: -1px;
  background: linear-gradient(0deg, rgba(23, 23, 26, 0) 0%, rgb(23, 23, 26) 60%);
  text-align: center;
  font-size: 12px;
  font-size: 11px;
  line-height: 64px;
  letter-spacing: 0.1em;
  font-weight: normal;
  display: block;
}
.glossary:not(:last-child) .glossary-inner {
  border-bottom: 2px dotted rgba(243, 233, 232, 0.125);
}
.glossary {
  padding-bottom: 0;
}
.glossary .glossary-inner {
  orphans: 1;
  widows: 1;
  -moz-column-count: 6;
       column-count: 6;
  -moz-column-gap: 50px;
       column-gap: 50px;
  -moz-column-width: 300px;
       column-width: 300px;
}
.glossary dl {
  display: inline-block;
  padding: 0;
  margin: 0;
  margin-bottom: 3em;
  font-size: 15px;
  font-family: "Lora", Georgia, Serif;
  line-height: 1.5;
  letter-spacing: 0.0175em;
}
.glossary dl a {
  border-bottom: 1px solid rgba(243, 233, 232, 0.25);
}
.glossary dl dt {
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  font-style: normal;
}
.glossary dl dt dfn {
  font-style: normal;
  font-family: "ND Kern", futura, Sans-Serif;
  font-weight: 600;
}
.glossary dl dd {
  padding: 0;
  margin: 0;
}
@media only screen and (max-width: 1000px) {
  .glossary dl {
    font-size: 14px;
  }
}

.calendar-articles {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.calendar-articles.expandable li {
  text-wrap: unset;
  padding: 0.75em 0;
}
.calendar-articles.expandable li:after {
  padding-top: 0.75em;
  padding-bottom: 24px;
  right: 0;
  top: 0;
  position: absolute;
  content: "⌃";
  transform: scale(1, -1);
  font-weight: normal;
  opacity: 0.2;
  font-size: inherit;
  line-height: inherit;
  transition: all 0.125s ease-in-out 0s;
  transform-origin: center 42%;
}
.calendar-articles.expandable li.open p {
  display: block;
}
.calendar-articles.expandable li.open:after {
  transform: scale(1, 1);
  opacity: 1;
}
.calendar-articles.expandable li .calendar-title {
  display: block;
  padding-right: 2.25em;
  text-wrap: balance;
}
.calendar-articles.expandable li p {
  margin-top: 1em;
  display: none;
  -webkit-hyphens: auto;
          hyphens: auto;
  text-wrap: pretty;
}
.calendar-articles.expandable li:hover {
  cursor: pointer;
}
.calendar-articles.expandable li:hover:after {
  opacity: 1;
}
.calendar-articles li {
  position: relative;
  font-size: 175%;
  line-height: 1.1;
  padding: 0.5em 0;
  font-family: "ND Kern", futura, Sans-Serif;
}

.calendar-author {
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "ND Kern", futura, Sans-Serif;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
}
.calendar-author:before {
  content: "— ";
}

.calendar-details {
  margin-top: 1em;
  display: flex;
  justify-content: center;
}
.calendar-details dl + dl {
  margin-left: 1.5em;
}
@media only screen and (min-width: 850px) {
  .calendar-details dl + dl {
    margin-left: 1.5em;
  }
}
.calendar-details dl {
  white-space: nowrap;
}
.calendar-details dl:not(:last-child) {
  border-right: 2px dotted rgba(243, 233, 232, 0.1);
  padding-right: 1.5em;
}
.calendar-details dl {
  display: inline-block;
}
@media only screen and (max-width: 850px) {
  .calendar-details dl {
    margin: 0;
    display: block;
    min-width: 16px;
    float: left;
  }
  .calendar-details dl {
    display: block;
  }
}
.calendar-details dt {
  text-transform: uppercase;
  font-weight: bold;
}
.calendar-details dd {
  margin: 0;
}
@media only screen and (max-width: 850px) {
  .calendar-details {
    display: flex;
    flex-wrap: wrap;
  }
}
.calendar-contributors-mini {
  padding: 6.5vmin;
  padding-top: 0;
  display: flex;
  gap: 12px;
  flex-direction: column;
}
@media only screen and (min-width: 800px) {
  .calendar-contributors-mini {
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: X mandatory;
  }
}
.calendar-contributors-mini li {
  padding: 0;
  scroll-snap-align: center;
  font-weight: 600;
  max-height: 100% !important;
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-light);
  position: relative;
  display: flex;
  justify-content: space-between;
  border-radius: 12px;
  padding: 16px;
  gap: 16px;
}
.calendar-contributors-mini li img {
  height: 100px !important;
}
.calendar-contributors-mini li div {
  flex: 1;
}
.calendar-contributors-mini li .calendar-contributor-name {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 0.5em;
  display: block;
}
.calendar-contributors-mini li .calendar-contributor-name br {
  display: none;
}
.calendar-contributors-mini li p {
  width: 15em;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: "Lora", Georgia, Serif;
}

.calendar-contributors {
  padding: 6.5vmin;
  padding-top: 0;
  display: flex;
  gap: 12px;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: X mandatory;
}
.calendar-contributors li {
  scroll-snap-align: center;
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  max-height: 100% !important;
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-light);
  position: relative;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
}
@media only screen and (max-width: 800px) {
  .calendar-contributors li {
    min-width: 100%;
  }
}
@media only screen and (min-width: 800px) {
  .calendar-contributors li {
    min-width: 650px;
  }
}
.calendar-contributors li .calendar-contributor-country {
  text-transform: uppercase;
  opacity: 0.3;
}
.calendar-contributors li .calendar-contributor-name {
  display: block;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 5px;
}
@media only screen and (max-width: 800px) {
  .calendar-contributors li div {
    padding: 6.5vmin 6.5vmin;
  }
}
@media only screen and (min-width: 801px) {
  .calendar-contributors li div {
    padding: 40px 45px;
  }
}
.calendar-contributors li p {
  line-height: 1.4;
  font-size: 16px;
  font-family: "Lora", Georgia, Serif;
  text-wrap: balance;
}
.calendar-contributors li img {
  width: auto !important;
  height: 280px !important;
  display: block;
}
@media only screen and (max-width: 800px) {
  .calendar-contributors li img {
    display: none;
  }
}

.calendar-content {
  padding-top: 6.5vh;
  display: flex;
  flex-wrap: wrap;
}
.calendar-content br {
  display: none;
}
.calendar-content dl {
  margin: 0;
  font-size: 18px;
  padding-right: 3.25em;
  width: 100%;
}
.calendar-content dl:not(:last-child) {
  border-bottom: 2px dotted rgba(243, 233, 232, 0.1);
}
.calendar-content dt {
  font-weight: bold;
  margin-top: 0.5em;
  display: inline-block;
}
.calendar-content dd {
  display: inline-block;
  margin: 0;
  margin-left: 0.65em;
  margin-bottom: 0.5em;
  opacity: 0.5;
}

.shop {
  position: relative;
  margin: auto;
  text-align: left;
  padding: 0 5vmin;
  padding-bottom: 40px;
  text-align: left;
  font-size: 0;
  margin-top: -1.75vmin;
}
.shop#retro a {
  text-align: left;
  flex: 1;
  display: inline-block;
  width: 50%;
}
@media only screen and (min-width: 768px) {
  .shop#retro a {
    width: 33.3333%;
  }
}
@media only screen and (min-width: 1240px) {
  .shop#retro a {
    width: 20%;
  }
}
.shop a figure {
  background: rgba(243, 233, 232, 0.025);
  padding-top: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  transform: scale(1, 1);
}
.shop a figure img {
  position: absolute;
  top: 0;
}
.shop a {
  background: var(--color-dark);
  text-align: left;
  flex: 1;
  display: inline-block;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .shop a {
    width: 50%;
  }
}
@media only screen and (min-width: 1240px) {
  .shop a {
    width: 33.3333%;
  }
}
.shop p {
  font-size: 28px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  overflow: hidden !important;
  text-overflow: ellipsis;
  position: relative;
  top: -0.25em;
}
.shop a {
  border: 1.75vmin solid var(--color-dark) !important;
  border: 5px solid var(--color-dark) !important;
  border: 1.75vmin solid var(--color-dark) !important;
}
.shop a:last-child {
  margin-bottom: 0px !important;
}
.shop a.soon {
  pointer-events: none;
}
.shop a {
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  display: block;
  display: inline-block;
  transition: all 0s ease-in-out 0s;
}
.shop a .details {
  background: linear-gradient(0deg, rgba(23, 23, 26, 0) 70%, rgba(23, 23, 26, 0.3) 95%);
  text-shadow: 0 0 1px rgba(23, 23, 26, 0.25), 0 0 2px rgba(23, 23, 26, 0.25), 0 0 3px rgba(23, 23, 26, 0.25);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 30px;
  padding: 15px 17px;
  z-index: 1000;
  padding-bottom: 200px;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
}
.shop a .details i[data-price]::before {
  content: attr(data-price) " ";
}
.shop a .details i {
  background: var(--color-dark);
  color: var(--color-light);
  display: inline-block;
  padding: 0.8em 1.1em;
  font-weight: 900;
  text-transform: uppercase;
  position: absolute;
  left: 30px;
  bottom: 25px;
  margin: 0;
  left: 0;
  bottom: 0;
  margin: 7px;
  border-radius: 5px;
  padding: 0.6em 0.85em;
  padding-bottom: 0.45em;
  font-style: normal;
  text-shadow: none;
  box-shadow: 0 0 40px rgba(243, 233, 232, 0.125);
}
@media (hover: hover) {
  .shop a .details i:hover {
    background: var(--color-light);
    color: var(--color-dark);
  }
}
.shop a .details i span {
  font-weight: normal;
}
.shop a .details b {
  display: block;
}
.shop a .details b:first-child {
  font-weight: 900;
}
.shop a .mini {
  opacity: 0.9;
  position: absolute;
  bottom: 35px;
  right: 35px;
  z-index: 10000;
  width: 105px;
  border: 10px solid white;
  border-radius: 5px;
  float: left;
}
.shop a .variants {
  z-index: 10000;
  position: absolute;
  bottom: 35px;
  left: 35px;
  right: 35px;
  font-size: 0;
  display: none;
}
.shop a .variants img {
  transition: all 0s ease-in-out 0s;
  width: 15%;
  margin-right: 3px;
  margin-top: 3px;
  float: left;
}
.shop a img {
  transition: all 0s ease-in-out 0s;
  width: 100%;
  display: block;
}
.shop a .overlay {
  transform: scale(1.05, 1.05);
  position: absolute;
  opacity: 0;
  z-index: 100;
}
@media (hover: hover) {
  .shop a:hover {
    opacity: 1;
  }
  .shop a:hover .main {
    opacity: 0.85;
    transform: scale(1.05, 1.05);
  }
  .shop a:hover .overlay {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@media only screen and (orientation: portrait) {
  .shop {
    padding: 0 1.75vmin;
  }
}

.flex {
  margin: auto;
  display: flex;
  flex-flow: column wrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: left;
  justify-content: center;
  text-align: left;
}
.flex p {
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  overflow: hidden !important;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-line-clamp: 6;
  font-size: 15px;
  font-family: "Lora", Georgia, Serif;
  line-height: 1.6;
  letter-spacing: 0.0175em;
}
.flex p {
  margin-bottom: 1em;
}
.flex {
  max-width: 1000px;
}
.flex a.item {
  border-radius: 10px;
}
.flex a.item:hover {
  background: rgba(0, 0, 0, 0.5);
}
.flex a.item:hover .button {
  border: 2px dotted rgba(243, 233, 232, 0.75) !important;
}
.flex .item p.address {
  text-transform: uppercase;
  margin-top: 1.1em;
  letter-spacing: 0.04em;
}
.flex .item.two {
  max-width: 100%;
}
.flex .item.two p {
  font-size: 30px;
  text-align: center;
}
.flex .item {
  max-width: 33.3333%;
  max-width: 25%;
  padding: 30px 25px;
  padding: 28px 30px;
}
.flex .item.large {
  max-width: 100%;
}
.flex .item.large p {
  font-size: 36px;
}
.flex .item.large p a {
  top: -10px;
  position: relative;
  margin-left: 10px;
}
.flex .item.cta {
  max-width: 100%;
  min-width: 100%;
  padding: 3em 0;
}
.flex .item.cta p {
  margin: 0;
  margin-bottom: -25px;
}
.flex .item.cta p + p {
  margin-top: -0.5em;
}
.flex .item.cta {
  text-align: center;
}
.flex .item.cta h2 {
  font-weight: normal;
  display: block;
  margin-bottom: 0em;
  text-transform: uppercase;
  line-height: 1.1;
}
@media only screen and (max-width: 650px) {
  .flex .item.cta h2 {
    font-size: 7vw;
  }
}
@media only screen and (min-width: 650px) {
  .flex .item.cta h2 {
    font-size: 40px;
  }
}
.flex .item.cta .button-alt {
  display: block;
  text-transform: uppercase;
  padding: 10px;
}
.flex .item.cta .button {
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
  margin-top: 0.5em;
  font-size: 75%;
  text-shadow: none;
  border-radius: 6px;
  display: inline-block;
  border: 1px solid var(--color-light);
  color: var(--color-light);
  width: auto;
  padding: 0.4em 0.7em;
  padding-bottom: 0.25em;
  text-align: center;
  text-transform: initial;
  bottom: 0px;
  position: relative;
  line-height: 1.3;
  background: var(--color-light);
  color: var(--color-dark);
  transition: all 0.125s ease-in-out 0s;
  letter-spacing: 0em;
}
.flex .item.cta .button.button-sec {
  background: transparent;
  color: var(--color-light);
  border: 1px solid rgba(243, 233, 232, 0.1);
}
.flex .item.cta .button b {
  letter-spacing: 0.015em;
  font-weight: 800;
}
@media only screen and (max-width: 650px) {
  .flex .item.cta .button {
    font-size: 5vw;
  }
}
@media only screen and (min-width: 650px) {
  .flex .item.cta .button {
    font-size: 28px;
    font-size: 30px;
  }
}
@media only screen and (max-width: 650px) {
  .flex .item p {
    font-size: 13.5px;
    -webkit-line-clamp: 5;
  }
}
@media only screen and (min-width: 600px) and (max-width: 1100px) {
  .flex .item {
    max-width: 50%;
    padding: 30px 30px;
    padding: 35px 35px;
  }
}
@media only screen and (max-width: 650px) {
  .flex .item {
    padding: 27px 35px;
    padding: 27px 0px;
    max-width: 100%;
    padding: 20px 9px;
    padding: 25px 25px;
    padding: 10px 10px;
    max-width: 50%;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 1300px) {
  .flex {
    max-width: 1300px;
    max-width: 1250px;
  }
}
@media only screen and (max-width: 1000px) {
  .flex {
    max-width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  .flex {
    margin: 4vmin 4vmin;
  }
}
@media only screen and (max-width: 1000px) {
  .flex#get-there {
    max-width: 100%;
  }
}
@media only screen and (min-width: 600px) and (max-width: 1100px) {
  .flex {
    max-width: 700px;
  }
}

@keyframes track-pulse {
  0% {
    border: 2px dotted rgba(243, 233, 232, 0.25);
    color: rgb(243, 233, 232);
  }
  50% {
    border: 2px dotted rgb(243, 233, 232);
    color: rgba(243, 233, 232, 0.12);
  }
  100% {
    border: 2px dotted rgba(243, 233, 232, 0.25);
    color: rgb(243, 233, 232);
  }
}
article.bump {
  padding-top: 70px;
}
article .item {
  position: relative;
}
article section + section .item:after {
  content: "";
  display: block;
  position: absolute;
  top: -7.5vmin;
  left: 0;
  right: 0;
  border-top: 2px dotted rgba(243, 233, 232, 0.1);
}
@media only screen and (max-width: 601px) {
  article section + section .item:after {
    top: -10vmin;
  }
}

#deck {
  position: relative;
  display: flex;
  flex-flow: column;
  flex-direction: row;
}
@media only screen and (max-width: 900px) {
  #deck {
    flex-direction: column;
  }
}
#deck img {
  display: block;
}
@media only screen and (min-width: 900px) {
  #deck img {
    width: 50%;
    margin-left: 0%;
  }
}
#deck .deck-signup,
#deck #mc_embed_signup {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
  position: absolute;
  align-items: center;
  justify-content: center;
  align-content: center;
}

#deckwrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#deckwrap #deckcard {
  z-index: 100;
}
#deckwrap .card {
  display: inline-block;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
#deckwrap .card h3, #deckwrap .card h4 {
  margin: 0;
  line-height: 1.1;
  font-size: 20px;
}
#deckwrap .card {
  max-width: 285px;
  padding: 30px;
  border-radius: 20px;
  background-color: var(--color-dark);
}
#deckwrap .card p {
  line-height: 1.6;
  margin-top: 15px;
}
#deckwrap .card p:last-child {
  margin-bottom: 0px;
}
#deckwrap .card p.fine {
  font-size: 11px;
  text-transform: uppercase;
}
#deckwrap .card .button {
  min-width: 100%;
  display: block;
  margin: 0;
  font-size: 14px;
  margin-top: 25px;
  text-shadow: none;
  border-radius: 3px;
  display: block;
  border: 1px solid var(--color-light);
  color: var(--color-light);
  width: auto;
  padding: 0.4em 0.8em;
  text-align: center;
  text-transform: initial;
  bottom: 0px;
  position: relative;
  line-height: 1.3;
  background: var(--color-light);
  color: var(--color-dark);
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
}

.mc-field-groups {
  display: flex;
  flex-flow: column wrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: left;
  margin: auto;
}
.mc-field-groups .mc-field-group {
  position: relative;
  width: 33.333%;
  width: 100%;
  margin-bottom: 10px;
}
.mc-field-groups label {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  padding: 0.95em 1.4em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.5;
}
.mc-field-groups .button {
  margin: 0;
  margin-top: 1em;
  font-size: 70%;
  text-shadow: none;
  border-radius: 3px;
  display: block;
  border: 1px solid var(--color-light);
  color: var(--color-light);
  width: auto;
  padding: 0.4em 0.8em;
  text-align: center;
  text-transform: initial;
  bottom: 0px;
  position: relative;
  line-height: 1.3;
  background: var(--color-light);
  color: var(--color-dark);
}
.mc-field-groups .button b {
  font-weight: 900;
}

#create-profile,
input[type=email],
input[type=text] {
  width: 100%;
  background: none;
  border-radius: 30px;
  border-radius: 0px;
  padding-right: 0em;
  padding-left: 1em;
  padding-bottom: 0.5em;
  padding-top: 2.2em;
  margin: 0em;
  display: block;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 14px;
  border: 2px dotted rgba(243, 233, 232, 0.25);
  border: none;
  outline: none;
  color: rgb(243, 233, 232);
  letter-spacing: 0.035em;
}

.faq-link {
  text-align: center;
  margin-top: -7vmin;
  margin-bottom: 7vmin;
}

.faq-button {
  background: none;
  border-radius: 30px;
  border-radius: 0px;
  padding: 0.5em 0.8em;
  padding-right: 0.7em;
  margin-top: 0.5em;
  margin-right: 0.5em;
  display: inline-block;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 14px;
  color: rgb(243, 233, 232);
  transition: all 0.1s ease-in-out 0s;
  letter-spacing: 0.035em;
}

.button {
  background: none;
  border-radius: 0px;
  padding: 0.15em 0.6em;
  padding-top: 0.3em;
  display: inline-block;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 14px;
  border: 2px dotted rgba(243, 233, 232, 0.15);
  color: rgb(243, 233, 232);
  letter-spacing: 0.1em;
  text-decoration: none !important;
}
.button.inactive {
  cursor: default;
  pointer-events: none;
  opacity: 0.25;
}
.button.pill {
  border: none !important;
  color: black;
  border-radius: 50px;
  padding: 0.35em 1.2em;
  padding-top: 0.5em;
  font-size: 13px;
  font-weight: 900;
  font-size: 15px;
  font-size: clamp(14px, 3vw, 16px) !important;
  background: rgba(243, 233, 232, 0);
  box-shadow: 0 0 20px rgba(243, 233, 232, 0.1);
  color: var(--color-light);
  background: black;
  font-weight: 400;
  padding: 0.55em 1.3em;
  padding-top: 0.7em;
  margin-top: 0.5em;
}
.button.pill:before {
  content: "→ ";
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin-left: -0.15em;
  margin-right: 0.35em;
  position: relative;
  top: 0.05em;
}
.button.pill:hover {
  border: 1.5px solid rgb(243, 233, 232);
  color: var(--color-dark);
  font-weight: 700;
  background: var(--color-light);
}
.button.pill:hover:before {
  opacity: 1 !important;
}
.button.pill.white {
  background: var(--color-light);
  color: black;
  font-weight: 700;
}
.button.pill.white:before {
  display: none;
}
.button.punch {
  color: black;
  background: var(--color-light);
  border-radius: 100px;
  font-size: 24px;
}
.button.punch:hover img {
  filter: invert(0%);
}
.button.punch img {
  filter: invert(100%);
  height: 1.35em;
  width: 1.35em;
  vertical-align: middle;
  margin-left: 0.45em;
  margin-right: 0.45em;
  margin-top: -0.175em;
}
.button.punch {
  font-size: clamp(15px, 3vw, 22px) !important;
}
.button.punch.inline {
  display: inline-block;
}
.button.punch.black {
  background: black;
  color: var(--color-light);
  font-weight: 700;
}
.button.punch.wide {
  padding-left: 4em;
  padding-right: 4em;
}
.button.punch.less {
  background: black;
  color: var(--color-light);
}
.button.punch.less:hover {
  border: none;
  background: var(--color-light);
  color: black;
}
.button.punch i {
  font-style: normal;
}
.button.punch {
  padding: 0.65em 1.5em;
  padding-top: 0.8em;
  font-weight: 700;
  display: block;
  border: none;
}
.button.punch:hover {
  border: none;
  background: black;
  color: var(--color-light);
}
@media only screen and (max-width: 601px) {
  .button.punch {
    line-height: 2;
  }
}
.button:hover {
  border: 2px dotted rgb(243, 233, 232);
  color: rgb(243, 233, 232);
  opacity: 1;
}
@media only screen and (max-width: 600px) {
  .button {
    font-size: 12px;
  }
}

.soft {
  font-weight: 700;
  font-size: 75%;
  display: inline-block;
  top: -0.1em;
  position: relative;
  letter-spacing: 0.1em;
}

.hello {
  width: 100%;
  display: block;
}

.deck-share img {
  height: 50px;
}
.deck-share path {
  fill: var(--color-light) !important;
}

.deck-details {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 2px dotted rgba(243, 233, 232, 0.1);
  margin-bottom: 5vmin;
  margin-top: 5vmin;
  font-size: 18px;
  line-height: 1.3;
  border-radius: 10px;
  list-style: none;
  background: rgba(243, 233, 232, 0.025);
  border: 2px dotted rgba(243, 233, 232, 0.1);
  padding: 30px 25px;
}
.deck-details li + li {
  border-top: 2px dotted rgba(243, 233, 232, 0.1);
  padding-top: 15px;
  margin-top: 15px;
}
@media only screen and (max-width: 601px) {
  .deck-details {
    font-size: 16px;
  }
}

.deck-intro + p {
  margin-top: 1.25em;
}

.headline-mini {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.125em;
  font-weight: normal;
  text-align: center;
  margin-top: 10px;
}
.headline-mini .date {
  opacity: 0.5;
  display: inline-block !important;
}
.headline-mini .date:not(:last-child):after {
  content: " ·";
}
.headline-mini .date.next {
  opacity: 1;
  font-weight: bold;
}

.carousel + .tournament-details {
  margin-top: 50px !important;
}

.last-update {
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.1em;
  font-weight: normal;
  text-align: center;
  opacity: 0.25;
  padding: 20px;
  height: 51px;
  position: relative;
  top: 1px;
}

.deck-intro.balance {
  text-wrap: balance;
}
.deck-intro {
  font-size: 400%;
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-align: center;
  font-weight: 400 !important;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}
@media only screen and (max-width: 601px) {
  .deck-intro {
    font-size: 250%;
  }
}

.deck-contents {
  margin: auto;
  padding: 50px 0;
  font-size: clamp(14px, 2vw, 19px) !important;
  overflow: hidden;
  width: 110%;
  margin-left: -5%;
  position: relative;
}
.deck-contents:before {
  content: "";
  height: 100%;
  width: 10%;
  display: inline-block;
  position: absolute;
  z-index: 50;
  background: linear-gradient(270deg, rgba(23, 23, 26, 0) 0%, rgb(23, 23, 26) 100%);
}
.deck-contents:after {
  content: "";
  height: 100%;
  width: 10%;
  display: inline-block;
  right: 0;
  top: 0;
  position: absolute;
  z-index: 50;
  background: linear-gradient(90deg, rgba(23, 23, 26, 0) 0%, rgb(23, 23, 26) 100%);
}
.deck-contents.deck-contents-fast .deck-contents-inner {
  animation: sc-scroll 150s infinite;
}
.deck-contents .deck-contents-inner {
  white-space: nowrap;
  width: auto;
  display: inline-block;
  animation: sc-scroll 400s infinite;
  animation-timing-function: linear;
}
.deck-contents i + i {
  margin-left: 15px;
}
.deck-contents i {
  display: inline-block;
  text-shadow: none;
  border-radius: 10px;
  letter-spacing: 0.05em;
  background-color: rgba(0, 0, 0, 0.5);
  color: rgb(243, 233, 232);
  width: auto;
  padding: 0.5em 0.9em;
  padding-bottom: 0.4em;
  text-align: center;
  text-transform: initial;
  line-height: 1.3;
  text-transform: uppercase;
  font-weight: normal;
  font-style: normal;
  font-weight: 300;
}
main .carousel:first-child {
  margin-top: 50px;
}

.carousel {
  text-align: center;
  z-index: 0;
  padding: 10px;
  font-size: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100vw;
  white-space: nowrap;
  scroll-snap-type: X mandatory;
  counter-reset: carousel;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.carousel.full {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  background: rgba(23, 23, 26, 0.95);
  padding: 15vmin !important;
  white-space: nowrap;
  margin: 0 !important;
}
.carousel.full figure {
  display: inline-block;
}
.carousel.full figure i {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 10vmin;
}
.carousel.full figure i img {
  transform: scale(1.05, 1.05);
  transition: transform 0.125s ease-in-out 0s;
  cursor: zoom-out;
  height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  height: 70vmin;
  width: 70vmin;
}
@media only screen and (max-width: 768px) {
  .carousel.full figure i img {
    height: 75vmin;
    width: 75vmin;
  }
}
.carousel i:hover img {
  transform: scale(1.05, 1.05);
}
.carousel img {
  transition: transform 0.125s ease-in-out 0s;
  cursor: zoom-in;
}
.carousel figure {
  border-radius: 5px;
  margin: 0 5px;
  scroll-snap-align: center;
  display: inline-block;
  overflow: hidden;
}
.carousel figure:hover img {
  margin-left: 0vh;
  margin-right: 0vh;
}
.carousel figure i {
  counter-increment: carousel;
  font-style: normal;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 5px;
}
.carousel figure i:hover img {
  transform: scale(1.1, 1.1);
}
.carousel figure i:after {
  display: block;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
  content: counter(carousel);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  font-size: 11px;
  color: var(--color-light);
}
.carousel figure img {
  height: 28vmax;
  width: 28vmax;
}
@media only screen and (max-width: 768px) {
  .carousel figure img {
    height: 75vmin;
    width: 75vmin;
  }
}

.daily-overview {
  padding: 10px;
  font-size: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100vw;
  white-space: nowrap;
  scroll-snap-type: X mandatory;
}
.daily-overview a {
  background: #1C1D1F;
  display: inline-block;
  overflow: hidden;
  border-radius: 5px;
  margin: 10px;
  width: calc(60% - 10px);
}
@media only screen and (min-width: 600px) {
  .daily-overview a {
    width: calc(40% - 10px);
  }
}
@media only screen and (min-width: 1000px) {
  .daily-overview a {
    width: calc(30% - 10px);
  }
}
@media only screen and (min-width: 1200px) {
  .daily-overview a {
    width: calc(23% - 10px);
  }
}
.daily-overview img {
  width: 100%;
  scroll-snap-align: center;
  display: inline-block;
  transition: opacity 0.1s ease-in-out 0s;
}
@media only screen and (min-width: 600px) {
  .daily-overview img {
    transition: all 0.1s ease-in-out 0s !important;
    transform: scale(1);
    cursor: pointer;
  }
  .daily-overview img:hover {
    transform: scale(0.95);
  }
  .daily-overview.full img {
    display: none;
  }
  .daily-overview.full img.focus {
    display: inline-block;
    width: calc(100% - 10px);
    cursor: zoom-out;
  }
}
.deck-overview + .features {
  margin-top: 5vmin;
}

main + .deck-overview {
  margin-top: 5vmin;
}

.deck-overview + .deck-overview {
  margin-top: 5vmin;
}

.simple-carousel + .details {
  pointer-events: none;
}
.simple-carousel + .details i {
  pointer-events: auto;
}

.simple-carousel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-decoration: none;
}
@media (hover: hover) {
  .simple-carousel {
    border-radius: 10px;
    overflow: hidden;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }
  .simple-carousel:hover i:first-child figcaption {
    opacity: 0;
  }
  .simple-carousel:hover i:first-child img {
    opacity: 0;
  }
  .simple-carousel i {
    counter-increment: image;
    display: table-cell;
    padding-top: 100%;
  }
  .simple-carousel i:first-child figcaption {
    opacity: 1;
  }
  .simple-carousel i:first-child img {
    opacity: 1;
  }
  .simple-carousel i figcaption {
    opacity: 0;
  }
  .simple-carousel i.active figcaption, .simple-carousel i:hover figcaption {
    opacity: 1 !important;
  }
  .simple-carousel i.active img, .simple-carousel i:hover img {
    opacity: 1 !important;
  }
  .simple-carousel i img {
    cursor: pointer;
    transition: all 0s ease-in-out 0s;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    width: 100%;
  }
}
@media (hover: none) {
  .simple-carousel {
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: X mandatory;
    white-space: nowrap;
  }
  .simple-carousel i {
    scroll-snap-align: center;
    display: inline-block;
    width: 100%;
  }
}

.deck-overview .figure-background img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto !important;
  height: 26px;
  margin: 18px;
}

.figure-background {
  display: block;
}
.figure-background span,
.figure-background a {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: block;
  position: absolute;
  padding-top: 100%;
  width: 100%;
  min-height: 100%;
  transition: transform 0.125s ease-in-out 0s;
}
.figure-background span:hover,
.figure-background a:hover {
  transform: scale(1.05, 1.05);
}
.figure-background {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition: background 0.125s ease-in-out 0s;
}
.figure-background:after {
  content: "";
  display: block;
  padding-top: 100%;
}

@media (hover: hover) {
  .deck-overview .figure-carousel {
    border-radius: 10px;
    overflow: hidden;
    display: flex;
  }
  .deck-overview .figure-carousel img {
    border-radius: 10px;
  }
  .deck-overview .figure-carousel:hover i:first-child figcaption {
    opacity: 0;
  }
  .deck-overview .figure-carousel:hover i:first-child span {
    opacity: 0;
  }
  .deck-overview .figure-carousel:hover i:first-child img {
    opacity: 0;
  }
  .deck-overview .figure-carousel a,
  .deck-overview .figure-carousel i {
    counter-increment: image;
    /* padding-top: 100%; */
    display: block;
    flex: 1;
    padding-top: 100%;
  }
  .deck-overview .figure-carousel a:first-child figcaption,
  .deck-overview .figure-carousel i:first-child figcaption {
    opacity: 1;
  }
  .deck-overview .figure-carousel a:first-child span,
  .deck-overview .figure-carousel i:first-child span {
    opacity: 1;
  }
  .deck-overview .figure-carousel a:first-child img,
  .deck-overview .figure-carousel i:first-child img {
    opacity: 1;
  }
  .deck-overview .figure-carousel a figcaption,
  .deck-overview .figure-carousel i figcaption {
    opacity: 0;
  }
  .deck-overview .figure-carousel a.active figcaption, .deck-overview .figure-carousel a:hover figcaption,
  .deck-overview .figure-carousel i.active figcaption,
  .deck-overview .figure-carousel i:hover figcaption {
    opacity: 1 !important;
  }
  .deck-overview .figure-carousel a.active span, .deck-overview .figure-carousel a:hover span,
  .deck-overview .figure-carousel i.active span,
  .deck-overview .figure-carousel i:hover span {
    opacity: 1 !important;
  }
  .deck-overview .figure-carousel a.active img, .deck-overview .figure-carousel a:hover img,
  .deck-overview .figure-carousel i.active img,
  .deck-overview .figure-carousel i:hover img {
    opacity: 1 !important;
  }
  .deck-overview .figure-carousel a span,
  .deck-overview .figure-carousel i span {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
  }
  .deck-overview .figure-carousel a img,
  .deck-overview .figure-carousel i img {
    cursor: pointer;
    transition: all 0s ease-in-out 0s;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    width: 100%;
  }
}
@media (hover: none) {
  .deck-overview .figure-carousel {
    height: 95vmin;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: X mandatory;
    white-space: nowrap;
  }
  .deck-overview .figure-carousel i {
    width: 95vmin;
    height: 95vmin;
    scroll-snap-align: center;
    display: inline-block;
  }
  .deck-overview .figure-carousel i span {
    display: block;
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {
  .page-history-of-games .deck-overview {
    margin-right: 0vmin;
    margin-left: 0vmin;
    margin-top: 0vmin !important;
  }
  .page-history-of-games .deck-overview .text-square,
  .page-history-of-games .deck-overview .figure-carousel,
  .page-history-of-games .deck-overview img {
    border-radius: 0 !important;
  }
}

.fide-link {
  font-size: 0;
  background-image: url("/_img/fide.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 20px;
  width: 25px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.promotion-wrap .promotion + .promotion {
  margin-top: 3.5vmin;
}

.promotion-wrap {
  padding: 0 3.5vmin;
}
.promotion-wrap .promotion + .promotion {
  margin-top: 3.5vmin;
}

.slice-container {
  overflow: hidden;
  max-width: 100vw;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.slice-container.fifth {
  aspect-ratio: 3;
}
.slice-container.fifth img {
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 768px) {
  .slice-container.fifth {
    padding-top: 75%;
  }
}

.slice {
  width: 100%;
  display: block;
}
@media only screen and (max-width: 768px) {
  .slice {
    width: 200%;
    margin-left: -50%;
    margin-right: -50%;
  }
}

.tickets {
  width: 100%;
  display: block;
}

@media only screen and (min-width: 601px) {
  .mobile-only {
    display: none !important;
  }
}

@media only screen and (max-width: 601px) {
  .mobile-hidden {
    display: none !important;
  }
}

@media only screen and (min-width: 601px) {
  .mobile-no-block {
    display: inline-block !important;
  }
}

@media only screen and (max-width: 801px) {
  .tablet-hidden {
    display: none !important;
  }
}

@media only screen and (min-width: 601px) {
  .desktop-hidden {
    display: none !important;
  }
}

@media only screen and (min-width: 601px) {
  .desktop-block {
    display: block !important;
  }
}

@media only screen and (max-width: 601px) {
  .mobile-block {
    display: block;
  }
  .mobile-none {
    display: none;
  }
}
#fundamentals {
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  min-height: 100vh;
  max-width: 700px;
  margin: auto;
}
#fundamentals img {
  max-width: 100%;
}
#fundamentals > div {
  max-width: 1000px;
}

.howlin-wolf {
  height: 60px;
  margin-left: 10px;
  margin-right: 10px;
}

.tournament-nav {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tournament-nav > li {
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  line-height: 2;
  display: inline-block;
  text-transform: uppercase;
}
.tournament-nav li + li {
  margin-left: 1.25em;
}

.tournament-details {
  text-align: center;
  margin: auto;
  width: 100%;
}
.tournament-details {
  padding-top: 6vmin;
  padding-bottom: 6vmin;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: X mandatory;
}
.tournament-details div:first-child {
  margin-left: 5vmin;
}
.tournament-details div:last-child {
  margin-right: 5vmin;
}
.tournament-details div {
  background: rgba(0, 0, 0, 0.5);
  padding: 3.5vmin 3.5vmin;
  margin-right: 10px;
  border-radius: 10px;
  text-align: center;
  display: inline-block;
}
@media only screen and (max-width: 700px) {
  .tournament-details div {
    padding: 5vmin 5vmin;
  }
}
.tournament-details div img {
  height: 30px;
  margin-bottom: 10px;
}
.tournament-details div p b {
  display: block;
  font-weight: 800;
  font-family: "ND Kern", futura, Sans-Serif;
  letter-spacing: 0.1em;
}
.tournament-details div p {
  font-family: "Lora", Georgia, Serif;
  font-family: "ND Kern", futura, Sans-Serif;
  font-size: 32px;
  text-transform: uppercase;
  font-size: 16px;
  font-size: clamp(15px, 2vw, 19px) !important;
  letter-spacing: 0.055em;
  line-height: 1.1;
}
.spaeti-details {
  justify-content: center;
  align-items: stretch;
  margin: auto;
  text-align: left;
  padding: 0 20px;
  text-align: center;
}
.spaeti-details .metric + .imperial {
  display: none;
}
.spaeti-details {
  margin-top: 5vmin;
  margin-bottom: 5vmin;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: X mandatory;
}
.spaeti-details div {
  display: inline-block;
  scroll-snap-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 3.5vmin 3.5vmin;
  margin-right: 10px;
  border-radius: 10px;
}
@media only screen and (max-width: 700px) {
  .spaeti-details div {
    padding: 5vmin 5vmin;
  }
}
.spaeti-details div img {
  height: 40px;
  margin-bottom: 5px;
}
.spaeti-details div p b {
  display: block;
  font-weight: 800;
  font-family: "ND Kern", futura, Sans-Serif;
  letter-spacing: 0.1em;
}
.spaeti-details div p {
  font-family: "Lora", Georgia, Serif;
  font-family: "ND Kern", futura, Sans-Serif;
  font-size: 32px;
  text-transform: uppercase;
  font-size: 16px;
  font-size: clamp(14px, 2vw, 19px) !important;
  letter-spacing: 0.055em;
  line-height: 1.1;
}
.cta-tournament {
  margin: auto;
  position: relative;
}
.cta-tournament .features {
  background: rgba(23, 23, 26, 0);
  margin-bottom: 10px;
  margin-top: -10px;
}
.cta-tournament {
  max-width: 1200px;
  text-align: center;
  padding: 12.5vmin;
  margin-top: 5vmin;
  margin-bottom: 5vmin;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  position: relative;
}
.cta-tournament .deck-share {
  margin-bottom: -30px;
}
.cta-tournament h5 {
  position: absolute;
  top: 27px;
  right: 0;
  left: 0;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.1em;
  font-weight: normal;
  margin-bottom: 55px !important;
}
.cta-tournament h5 img {
  margin-bottom: -11px;
}
.cta-tournament h2 {
  font-weight: 500;
}
.cta-tournament h2 b {
  font-weight: 900;
  display: block;
}
.cta-tournament h2 em {
  font-weight: 900;
  font-style: normal;
}
.cta-tournament h2 em i {
  font-style: normal;
  font-weight: 700;
}
.cta-tournament h2 {
  display: block;
  margin: 0;
  margin-bottom: 23px;
  margin-bottom: 0px;
  text-transform: uppercase;
  line-height: 1;
}
@media only screen and (max-width: 601px) {
  .cta-tournament h2 {
    font-size: 8vw;
  }
}
@media only screen and (min-width: 601px) {
  .cta-tournament h2 {
    font-size: 45px;
  }
}
.cta-tournament p {
  margin-top: 1em;
  font-size: 11px !important;
  font-family: "ND Kern", futura !important;
}
.cta-tournament p a {
  text-decoration: underline;
}
.cta-tournament #create-profile,
.cta-tournament input[type=email],
.cta-tournament input[type=text] {
  border-radius: 6px;
  background: var(--color-light);
  color: var(--color-dark);
  line-height: 20px;
  padding: 20px;
  padding-top: 17px;
  padding-bottom: 13px;
  font-size: 15px;
}
.cta-tournament #create-profile {
  font-weight: 800;
  border-radius: 500px;
  margin-bottom: 15px;
}
.cta-tournament .submit {
  text-transform: uppercase;
  line-height: 1.1;
  font-size: 30px;
  text-shadow: none;
  border-radius: 3px;
  display: inline-block;
  border: none;
  color: var(--color-light);
  width: 100%;
  padding: 0;
  height: 55px;
  line-height: 60px;
  text-align: center;
  text-transform: initial;
  bottom: 0px;
  position: relative;
  line-height: 1.4;
  background: transparent;
  color: var(--color-dark);
  transition: all 0.05s ease-in-out 0s;
  letter-spacing: 0em;
  transition: all 0.05s ease-in-out 0s;
}
.cta-tournament .submit:hover {
  transform: scale(1.2, 1.2);
}
.cta-tournament .submit b {
  letter-spacing: 0.015em;
  font-weight: 800;
}
@media only screen and (max-width: 601px) {
  .cta-tournament {
    width: calc(100% - 9vmin);
  }
  .cta-tournament b {
    display: block;
  }
  .cta-tournament br {
    display: none;
  }
}
@media only screen and (max-width: 1280px) {
  .cta-tournament {
    margin-right: 4.5vmin;
    margin-left: 4.5vmin;
    padding: 12.5vmin 7.5vmin;
  }
}

.test {
  border-radius: 6px;
  background: #f3e9e8;
  color: #17171a;
  line-height: 20px;
  padding: 17px 20px 13px;
  font-size: 15px;
  cursor: text;
}

.figure-carousel:hover i ~ .pager b {
  opacity: 0.5;
}

.figure-carousel i:nth-child(1):hover ~ .pager b:nth-child(1),
.figure-carousel i:nth-child(2):hover ~ .pager b:nth-child(2),
.figure-carousel i:nth-child(3):hover ~ .pager b:nth-child(3) {
  opacity: 1;
  background: var(--color-light);
}

.pager {
  text-align: center !important;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
}
@media (hover: none) {
  .pager {
    display: none;
  }
}
.pager b {
  display: inline-block;
  border-radius: 50%;
  height: 5px;
  width: 5px;
  background: var(--color-light);
  margin: 0 5px;
  opacity: 0.5;
  box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.25);
}
.pager b:first-child {
  opacity: 1;
}

.cta-form {
  text-align: center;
}
.cta-form #create-profile,
.cta-form input[type=email],
.cta-form input[type=text] {
  border-radius: 6px;
  background: var(--color-light);
  color: var(--color-dark);
  line-height: 20px;
  padding: 20px;
  padding-top: 17px;
  padding-bottom: 13px;
  font-size: 15px;
  cursor: text;
}
.cta-form #create-profile {
  font-weight: 800;
  border-radius: 500px;
  margin-bottom: 15px;
}
.cta-form .primary,
.cta-form .submit {
  text-transform: uppercase;
  line-height: 1.1;
  font-size: 30px;
  text-shadow: none;
  border-radius: 3px;
  display: inline-block;
  border: none;
  color: var(--color-light);
  width: 100%;
  padding: 0;
  height: 55px;
  line-height: 60px;
  text-align: center;
  text-transform: initial;
  bottom: 0px;
  position: relative;
  line-height: 1.4;
  background: transparent;
  color: var(--color-dark);
  transition: all 0.05s ease-in-out 0s;
  letter-spacing: 0em;
}
.cta-form .primary:hover,
.cta-form .submit:hover {
  transform: scale(1.2, 1.2);
}
.cta-form .primary b,
.cta-form .submit b {
  letter-spacing: 0.015em;
  font-weight: 800;
}
.cta-form h3 {
  padding-top: 1em;
  margin-bottom: 0.75em;
  border-top: 1px solid rgba(243, 233, 232, 0.05);
}
.cta-form p {
  margin-top: 1em;
  font-size: 11px !important;
  font-family: "ND Kern", futura !important;
}
.cta-form p a {
  text-decoration: underline;
}

.cta-fundamentals {
  margin: auto;
}
.cta-fundamentals .features {
  background: rgba(23, 23, 26, 0);
}
.cta-fundamentals {
  max-width: 1200px;
  text-align: center;
  padding: 12.5vmin;
  margin-top: 5vmin;
  margin-bottom: 5vmin;
  background: rgba(0, 0, 0, 0.5);
  padding: 10vmin;
  background: black !important;
  box-shadow: 0 0 40px 10px rgba(30, 30, 30, 0.5);
  border-radius: 10px;
  position: relative;
}
.cta-fundamentals .deck-share {
  margin-bottom: -30px;
}
.cta-fundamentals h5 {
  position: absolute;
  top: 27px;
  right: 0;
  left: 0;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.1em;
  font-weight: normal;
}
.cta-fundamentals h2 {
  font-weight: 500;
}
.cta-fundamentals h2 b {
  font-weight: 900;
  display: block;
}
.cta-fundamentals h2 em {
  font-weight: 900;
  font-style: normal;
}
.cta-fundamentals h2 {
  display: block;
  margin: 0;
  margin-bottom: 23px;
  margin-bottom: 10px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 601px) {
  .cta-fundamentals h2 {
    font-size: 8vw;
  }
}
@media only screen and (min-width: 601px) {
  .cta-fundamentals h2 {
    font-size: 45px;
  }
}
.cta-fundamentals p {
  margin-top: 1em;
  font-size: 11px !important;
  font-family: "ND Kern", futura !important;
}
.cta-fundamentals p a {
  text-decoration: underline;
}
.cta-fundamentals #create-profile,
.cta-fundamentals input[type=email],
.cta-fundamentals input[type=text] {
  border-radius: 6px;
  background: var(--color-light);
  color: var(--color-dark);
  line-height: 20px;
  padding: 20px;
  padding-top: 17px;
  padding-bottom: 13px;
  font-size: 15px;
  cursor: text;
}
.cta-fundamentals #create-profile {
  font-weight: 800;
  border-radius: 500px;
  margin-bottom: 15px;
}
.cta-fundamentals .primary,
.cta-fundamentals .submit {
  text-transform: uppercase;
  line-height: 1.1;
  font-size: 30px;
  text-shadow: none;
  border-radius: 3px;
  display: inline-block;
  border: none;
  color: var(--color-light);
  width: 100%;
  padding: 0;
  height: 55px;
  line-height: 60px;
  text-align: center;
  text-transform: initial;
  bottom: 0px;
  position: relative;
  line-height: 1.4;
  background: transparent;
  color: var(--color-dark);
  transition: all 0.05s ease-in-out 0s;
  letter-spacing: 0em;
}
.cta-fundamentals .primary:hover,
.cta-fundamentals .submit:hover {
  transform: scale(1.2, 1.2);
}
.cta-fundamentals .primary b,
.cta-fundamentals .submit b {
  letter-spacing: 0.015em;
  font-weight: 800;
}
@media only screen and (max-width: 601px) {
  .cta-fundamentals {
    width: calc(100% - 9vmin);
  }
  .cta-fundamentals b {
    display: block;
  }
}
@media only screen and (max-width: 900px) {
  .cta-fundamentals {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media only screen and (max-width: 1280px) {
  .cta-fundamentals {
    margin-right: 4.5vmin;
    margin-left: 4.5vmin;
    padding: 12.5vmin 7.5vmin;
  }
}

.custom-checkbox-radio-list {
  font-size: 0;
  display: block;
  text-align: left;
  margin-right: -8px;
  display: flex;
  flex-wrap: wrap;
}
.custom-checkbox-radio-list.five .custom-control.custom-radio {
  min-width: calc(20% - 8px);
}
.custom-checkbox-radio-list .custom-control.custom-radio {
  text-align: center;
  display: inline-block;
  flex: 1;
  margin-right: 8px;
  margin-bottom: 8px;
  min-width: 20%;
  min-width: calc(25% - 8px);
  background: var(--color-dark);
  background: rgba(243, 233, 232, 0.06);
  border-radius: 6px;
  position: relative;
}
.custom-checkbox-radio-list .custom-control.custom-radio.active label {
  background: rgba(243, 233, 232, 0.075);
  opacity: 1;
  font-weight: 700;
}
.custom-checkbox-radio-list .custom-control.custom-radio.active label:after {
  content: "✓";
}
.custom-checkbox-radio-list .custom-control.custom-radio input {
  position: absolute;
  opacity: 0;
}
.custom-checkbox-radio-list label:hover {
  opacity: 1;
  cursour: pointer;
  background: rgba(243, 233, 232, 0.075);
}
.custom-checkbox-radio-list label {
  opacity: 0.5;
  border-radius: 6px;
  color: var(--color-light);
  line-height: 20px;
  padding: 14px;
  padding-top: 17px;
  padding-bottom: 13px;
  font-size: 17px;
  display: block;
  margin: 0;
}

p.center {
  text-align: center !important;
}

.inline-block {
  display: inline-block;
}

.contact-box + p {
  margin-top: 10px !important;
}

.contact-box + div {
  margin-top: 20px !important;
}

@media only screen and (max-width: 601px) {
  .inset {
    overflow: hidden;
  }
}
@media only screen and (min-width: 601px) {
  .inset {
    margin-left: 50px;
  }
}

.read + .inset {
  margin-top: 30px;
}

p.read + .personal-message {
  margin-top: 15px;
}

.personal-message + .contact-box + .punch {
  margin-top: 20px;
}

.punch + p b {
  font-weight: 700;
}

.secondary {
  font-size: 13px;
  text-transform: uppercase;
  background: rgba(243, 233, 232, 0.025);
  display: inline-block;
  border-radius: 30px;
  padding: 0.75em 1.6em;
  padding-bottom: 0.6em;
  color: var(--color-light);
}
.secondary:hover {
  background: black;
}

.personal-message {
  background: rgba(243, 233, 232, 0.06);
  border-radius: 10px;
  border-top-left-radius: 0px;
  position: relative;
  text-align: left;
  padding: 1.1em 1.35em;
  margin-bottom: 15px;
  font-size: 20px;
}
@media only screen and (max-width: 670px) {
  .personal-message {
    font-size: 17px;
  }
}
.personal-message > a, .personal-message > span {
  display: block;
}
.personal-message > a.link, .personal-message > span.link {
  font-size: 13px;
  text-transform: uppercase;
  margin-top: 1.5em;
  background: rgba(243, 233, 232, 0.06);
  display: inline-block;
  border-radius: 10px;
  padding: 0.5em 1.1em;
  padding-bottom: 0.3em;
  color: var(--color-light);
}
.personal-message > a.link:hover, .personal-message > span.link:hover {
  background: black;
}
.personal-message > a.name, .personal-message > span.name {
  opacity: 0.65;
  font-size: 12px;
  text-transform: uppercase;
}
.personal-message > a.name:first-child, .personal-message > span.name:first-child {
  margin-bottom: 0.75em;
}
.personal-message > a.name:last-child, .personal-message > span.name:last-child {
  margin-top: 0.75em;
}
.personal-message > a .message + .message, .personal-message > span .message + .message {
  margin-top: 0.75em;
}
.personal-message > a.messages, .personal-message > span.messages {
  -webkit-hyphens: auto;
          hyphens: auto;
  font-weight: 300;
  font-family: "Lora", Georgia, Serif !important;
  line-height: 1.5;
}
.personal-message > a.messages .message:first-child:before, .personal-message > span.messages .message:first-child:before {
  content: '"';
}
.personal-message > a.messages .message:last-child:after, .personal-message > span.messages .message:last-child:after {
  content: '"';
}
.personal-message > a .message, .personal-message > span .message {
  display: block;
  text-wrap: balance;
}
.personal-message > a .message a, .personal-message > span .message a {
  display: inline-block;
  line-height: 1;
  border-bottom: 1px solid rgba(243, 233, 232, 0.36);
}
.personal-message img {
  position: absolute;
  top: 0;
  right: 100%;
  height: 60px;
  margin-right: 10px;
  border-radius: 50%;
}

#donate-button {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
#donate-button img {
  opacity: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.contact-boxes {
  margin-bottom: 25px;
}
.contact-boxes:last-child {
  margin-top: 13px;
  margin-bottom: 0;
}
.contact-boxes {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 600px) {
  .contact-boxes {
    flex-direction: row;
  }
  .contact-boxes .contact-box + .contact-box {
    margin-left: 15px;
  }
  .contact-boxes .contact-box {
    width: 50%;
  }
}
.contact-boxes .contact-box {
  width: 100%;
  margin-top: 0;
  margin-bottom: 10px;
  background: black;
}
.contact-boxes .contact-box:hover {
  background: rgb(243, 233, 232);
  color: var(--color-dark);
}

.contact-box {
  background: rgba(243, 233, 232, 0.06);
  border-radius: 10px;
  display: flex;
  margin-top: 10px;
  text-align: left;
  justify-content: space-between;
  display: flex;
  align-content: center;
  align-items: center;
  height: 70px;
}
.contact-box:hover {
  background: var(--color-light);
  background: black;
}
.contact-box > span {
  flex: 1;
  display: block;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  padding-left: 23px;
  text-align: left !important;
}
.contact-box > span em {
  font-weight: 900;
  letter-spacing: 0.07em;
  display: block;
  font-style: normal;
  text-transform: uppercase;
}
.contact-box img {
  float: left;
  height: 70px;
  margin-right: 5px;
  margin-left: 5px;
}
.contact-box img.wolf {
  padding: 10px;
  padding-right: 13px;
  padding-bottom: 15px;
}

.cta-tournament-contribute {
  padding: 10vmin;
  padding-bottom: 5vmin;
  padding-top: 85px;
  max-width: 850px;
}
@media only screen and (max-width: 670px) {
  .cta-tournament-contribute {
    padding: 6.5vmin;
    padding-top: 20vmin;
    max-width: 100%;
    width: 100%;
    margin: 0;
  }
}
.cta-tournament-contribute p {
  margin: 0;
}
.cta-tournament-contribute p em {
  text-transform: uppercase;
  font-style: normal;
}
.cta-tournament-contribute .button + p {
  line-height: 1.4;
}
.cta-tournament-contribute * + .button {
  margin-top: 15px !important;
}
.cta-tournament-contribute .button + * {
  margin-top: 15px !important;
}
.cta-tournament-contribute .button {
  letter-spacing: 0.075em;
  transition: all 0s ease-in-out 0s;
}
.cta-tournament-contribute .button.less svg * {
  fill: var(--color-light);
}
.cta-tournament-contribute .button.less:hover svg * {
  fill: black !important;
}
.cta-tournament-contribute .button:hover svg * {
  fill: white;
}
.cta-tournament-contribute .button svg {
  display: inline-block;
  vertical-align: middle;
  height: 2em;
  width: 2em;
  padding: 0;
  margin: -0.4em;
  margin-left: -0.65em;
  position: relative;
  top: -0.08em;
}
.cta-tournament-contribute .button svg * {
  fill: black;
}

.cta-tournament {
  transition: opacity 0.125s ease-in-out 0s;
}
.mobile-nav .cta-tournament {
  opacity: 0;
}
.cta-tournament p.read + p.read {
  margin-top: 1em;
}
.cta-tournament p.read + .button {
  margin-top: 40px;
}
.cta-tournament p.read {
  margin-top: 0;
  font-size: 23px !important;
  font-size: clamp(15px, 3vw, 23px) !important;
  margin-top: -10px;
  text-align: left;
  line-height: 1.5;
  margin: 1em 0;
}
.cta-tournament p.read b {
  text-transform: none;
  font-weight: 700;
}

.cta-tournament-winner {
  max-width: 760px;
  padding: 10vmin;
  padding-bottom: 5vmin;
  padding-top: 85px;
}
.cta-tournament-winner .message {
  -webkit-hyphens: none;
          hyphens: none;
}
.cta-tournament-winner h2 {
  margin-bottom: 20px;
}
.cta-tournament-winner button[type=submit] {
  text-transform: uppercase;
  font-size: 20px;
  text-shadow: none;
  border-radius: 50px;
  display: inline-block;
  border: none;
  background: var(--color-light);
  color: var(--color-dark);
  width: 200px;
  padding: 0;
  text-align: center;
  text-transform: initial;
  position: relative;
  line-height: 1.2;
  transition: all 0.05s ease-in-out 0s;
  letter-spacing: 0.05em;
  font-weight: 600;
  width: 100%;
  background: var(--color-light);
  border-radius: 100px;
  font-size: 24px;
  font-size: clamp(16px, 3vw, 22px) !important;
  padding: 0.65em 1.5em;
  padding-top: 0.8em;
  font-weight: 700;
}
.cta-tournament-winner button[type=submit]:hover {
  border: none;
  background: var(--color-light);
  color: black;
}
.cta-tournament-winner button[type=submit] i {
  font-style: normal;
  margin-right: -0.05em;
}
.cta-tournament-winner button[type=submit] b {
  letter-spacing: 0.015em;
  font-weight: 800;
}
@media only screen and (max-width: 601px) {
  .cta-tournament-winner button[type=submit] {
    line-height: 2;
  }
}

.cta-tournament-profile {
  padding: 10vmin;
  padding-bottom: 5vmin;
  padding-top: 85px;
  max-width: 850px;
}
.cta-tournament-profile h2 {
  margin-bottom: 20px;
}
.cta-tournament-profile p.intro {
  text-align: left;
  margin-top: 0;
  font-size: 14px !important;
  margin-top: -10px;
  margin-bottom: 25px;
}
.cta-tournament-profile button[type=submit] {
  text-transform: uppercase;
  font-size: 20px;
  text-shadow: none;
  border-radius: 50px;
  display: inline-block;
  border: none;
  background: var(--color-light);
  color: var(--color-dark);
  width: 200px;
  padding: 0;
  text-align: center;
  text-transform: initial;
  position: relative;
  line-height: 1.2;
  transition: all 0.05s ease-in-out 0s;
  letter-spacing: 0.05em;
  font-weight: 600;
  width: 100%;
  background: var(--color-light);
  border-radius: 100px;
  font-size: 24px;
  font-size: clamp(16px, 3vw, 22px) !important;
  padding: 0.65em 1.5em;
  padding-top: 0.8em;
  font-weight: 700;
}
.cta-tournament-profile button[type=submit]:hover {
  border: none;
  background: var(--color-light);
  color: black;
}
.cta-tournament-profile button[type=submit] i {
  font-style: normal;
  margin-right: -0.05em;
}
.cta-tournament-profile button[type=submit] b {
  letter-spacing: 0.015em;
  font-weight: 800;
}
@media only screen and (max-width: 601px) {
  .cta-tournament-profile button[type=submit] {
    line-height: 2;
  }
}
@media only screen and (min-width: 601px) {
  .cta-tournament-profile .ml-form-fieldRow:nth-child(2),
  .cta-tournament-profile .ml-form-fieldRow:nth-child(3) {
    width: 50%;
    float: left;
    width: calc(50% - 4px);
  }
}
@media only screen and (min-width: 601px) {
  .cta-tournament-profile .ml-form-fieldRow:nth-child(2) {
    margin-right: 8px;
  }
}
@media only screen and (max-width: 670px) {
  .cta-tournament-profile {
    padding: 6.5vmin;
    padding-top: 20vmin;
    max-width: 100%;
    width: 100%;
    margin: 0;
  }
}

.ml-error input {
  box-shadow: inset 0 0 50px 50px rgba(255, 0, 0, 0.1);
}

.ml-form-fieldRow .ml-field-group > label {
  display: block;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ml-form-fieldRow .ml-field-group > label span {
  opacity: 0.5;
  float: right;
}
.ml-form-fieldRow {
  margin-bottom: 20px;
}
.ml-form-fieldRow select,
.ml-form-fieldRow input[type=email],
.ml-form-fieldRow input[type=text] {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 6px;
  background: var(--color-dark);
  color: var(--color-light);
  line-height: 20px;
  padding: 20px;
  padding-top: 17px;
  padding-bottom: 13px;
  font-size: 17px;
  background: rgba(243, 233, 232, 0.06);
}
.ml-form-fieldRow select:not(:empty), .ml-form-fieldRow select:focus, .ml-form-fieldRow select:hover,
.ml-form-fieldRow input[type=email]:not(:empty),
.ml-form-fieldRow input[type=email]:focus,
.ml-form-fieldRow input[type=email]:hover,
.ml-form-fieldRow input[type=text]:not(:empty),
.ml-form-fieldRow input[type=text]:focus,
.ml-form-fieldRow input[type=text]:hover {
  opacity: 1;
  cursour: pointer;
  background: rgba(243, 233, 232, 0.1);
}
.ml-form-fieldRow input::-moz-placeholder {
  color: rgba(243, 233, 232, 0.125);
}
.ml-form-fieldRow input::placeholder {
  color: rgba(243, 233, 232, 0.125);
}

.ml-form-horizontalRow {
  max-width: 100%;
  margin: auto;
  position: relative;
}
.ml-form-horizontalRow .ml-input-horizontal {
  display: flex;
}
.ml-form-horizontalRow .ml-input-horizontal div + div {
  margin-left: 10px;
}
.ml-form-horizontalRow .button {
  width: 100% !important;
  margin: 0 !important;
}
.ml-form-horizontalRow .button:hover {
  background: var(--color-dark);
  color: var(--color-light);
}
.ml-form-horizontalRow > div {
  margin: 0;
  width: 100%;
  display: inline-block;
  vertical-align: top;
}
.ml-form-horizontalRow > div.primary {
  width: 50px;
  position: absolute;
  right: 0;
  top: 0;
  margin: 0px;
}

.location-box {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
.location-box a {
  flex: 1;
  display: flex;
  align-content: center;
  align-items: center;
}
.location-box .pin {
  flex: 1;
}
.location-box .pin > span {
  display: block;
  font-size: 22px;
  line-height: 1.2;
}
.location-box .pin > span b {
  font-weight: 900;
  letter-spacing: 0.07em;
}
@media only screen and (max-width: 601px) {
  .location-box .pin > span {
    font-size: 18px;
  }
}
.location-box .pin img {
  float: left;
}

.blog-features {
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
@media only screen and (max-width: 850px) {
  .blog-features dl + dl {
    margin-top: 0.75em;
    padding-top: 0.75em;
    border-top: 2px dotted rgba(243, 233, 232, 0.1);
  }
}
@media only screen and (min-width: 850px) {
  .blog-features dl + dl {
    padding-left: 1.5em;
    margin-left: 1.5em;
    border-left: 2px dotted rgba(243, 233, 232, 0.1);
  }
}
.blog-features dl {
  white-space: nowrap;
}
.blog-features dl {
  display: inline-block;
}
@media only screen and (max-width: 850px) {
  .blog-features dl {
    margin: 0;
    display: block;
    min-width: 16px;
    float: left;
  }
  .blog-features dl {
    display: block;
  }
}
.blog-features dt {
  text-transform: uppercase;
  font-weight: bold;
}
.blog-features dd {
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis;
  margin: 0;
}
@media only screen and (max-width: 850px) {
  .blog-features {
    display: flex;
    flex-direction: column;
  }
}
@media only screen and (max-width: 850px) {
  .blog-features {
    margin-bottom: 3em;
  }
}

.ui-toggle {
  display: inline-block;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  height: 10px;
}
.ui-toggle input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.ui-toggle .toggle-track {
  display: inline-block;
  width: 24px;
  height: 10px;
  background: var(--color-softlight, rgb(43, 43, 46));
  border-radius: 10px;
  position: relative;
  transition: background 0.3s ease;
}
.ui-toggle .toggle-track .toggle-thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  width: 5px;
  height: 5px;
  background: var(--color-light, rgb(255, 255, 255));
  border-radius: 50%;
  transition: all 0.3s ease;
}
.ui-toggle input[type=checkbox]:checked ~ .toggle-track {
  background: rgba(0, 200, 0, 0.2);
}
.ui-toggle input[type=checkbox]:checked ~ .toggle-track .toggle-thumb {
  left: calc(100% - 7px);
  background: lime;
}
.ui-toggle:hover .toggle-track {
  background: rgba(255, 255, 255, 0.1);
}
.ui-toggle:hover .toggle-track .toggle-thumb {
  transform: translateY(-50%) scale(1.1);
}
.ui-toggle input[type=checkbox]:checked ~ .toggle-track:hover {
  background: rgba(0, 200, 0, 0.3);
}
.ui-toggle.small .toggle-track {
  width: 30px;
  height: 8px;
}
.ui-toggle.small .toggle-track .toggle-thumb {
  width: 4px;
  height: 4px;
}
.ui-toggle.small input[type=checkbox]:checked ~ .toggle-track .toggle-thumb {
  left: calc(100% - 6px);
}
.ui-toggle.large .toggle-track {
  width: 50px;
  height: 12px;
}
.ui-toggle.large .toggle-track .toggle-thumb {
  width: 6px;
  height: 6px;
}
.ui-toggle.large input[type=checkbox]:checked ~ .toggle-track .toggle-thumb {
  left: calc(100% - 8px);
}
.ui-toggle.danger input[type=checkbox]:checked ~ .toggle-track {
  background: rgba(255, 0, 0, 0.2);
}
.ui-toggle.danger input[type=checkbox]:checked ~ .toggle-track .toggle-thumb {
  background: #ff4444;
}
.ui-toggle.danger input[type=checkbox]:checked ~ .toggle-track:hover {
  background: rgba(255, 0, 0, 0.3);
}
.ui-toggle.warning input[type=checkbox]:checked ~ .toggle-track {
  background: rgba(255, 193, 7, 0.2);
}
.ui-toggle.warning input[type=checkbox]:checked ~ .toggle-track .toggle-thumb {
  background: #ffc107;
}
.ui-toggle.warning input[type=checkbox]:checked ~ .toggle-track:hover {
  background: rgba(255, 193, 7, 0.3);
}
.ui-toggle.disabled {
  opacity: 0.3;
}
.ui-button {
  display: inline-block;
  outline: none;
  padding: 0.4em 1em;
  line-height: 25px;
  border-radius: 14px;
  border: 2px solid rgba(234, 233, 232, 0.1);
  background: rgba(234, 233, 232, 0.03);
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
}
.ui-button:hover {
  background: rgba(234, 233, 232, 0.1);
  border-color: rgba(234, 233, 232, 0.3);
  transform: translateY(-1px);
}
.ui-button:active {
  transform: translateY(0);
}
.ui-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.ui-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-button:disabled:hover {
  transform: none;
  background: rgba(234, 233, 232, 0.03);
  border-color: rgba(234, 233, 232, 0.1);
}
.ui-button .button-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.15);
  pointer-events: none;
  transition: width 0.1s linear;
}
.ui-button .button-label {
  position: relative;
  z-index: 1;
}
.ui-button.small {
  padding: 0.25em 0.75em;
  font-size: 0.875em;
  line-height: 20px;
  border-radius: 10px;
}
.ui-button.large {
  padding: 0.6em 1.5em;
  font-size: 1.125em;
  line-height: 30px;
  border-radius: 18px;
}
.ui-button.primary {
  background: rgba(0, 123, 255, 0.2);
  border-color: rgba(0, 123, 255, 0.5);
  color: #4da3ff;
}
.ui-button.primary:hover {
  background: rgba(0, 123, 255, 0.3);
  border-color: rgba(0, 123, 255, 0.7);
}
.ui-button.primary .button-progress {
  background: rgba(0, 123, 255, 0.3);
}
.ui-button.success {
  background: rgba(0, 200, 0, 0.2);
  border-color: rgba(0, 200, 0, 0.5);
  color: lime;
}
.ui-button.success:hover {
  background: rgba(0, 200, 0, 0.3);
  border-color: rgba(0, 200, 0, 0.7);
}
.ui-button.success .button-progress {
  background: rgba(0, 200, 0, 0.3);
}
.ui-button.danger {
  background: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.5);
  color: #ff6666;
}
.ui-button.danger:hover {
  background: rgba(255, 0, 0, 0.3);
  border-color: rgba(255, 0, 0, 0.7);
}
.ui-button.danger .button-progress {
  background: rgba(255, 0, 0, 0.3);
}
.ui-button.ghost {
  background: transparent;
  border-color: transparent;
}
.ui-button.ghost:hover {
  background: rgba(234, 233, 232, 0.05);
  border-color: rgba(234, 233, 232, 0.1);
}
.ui-button.block {
  display: block;
  width: 100%;
}
.ui-button .button-icon {
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: middle;
}
.ui-button.icon-only {
  padding: 0.4em;
}
.ui-button.icon-only .button-icon {
  margin: 0;
}
.ui-button.loading {
  color: transparent;
  pointer-events: none;
}
.ui-button.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.ui-button-group {
  display: flex;
  gap: 4px;
}
.ui-button-group .ui-button {
  flex: 1;
}
.ui-button-group.vertical {
  flex-direction: column;
}

.ui-slider {
  display: flex;
  position: relative;
  width: 100%;
}
.ui-slider input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 10px;
  border-radius: 10px;
  outline: none;
  background: var(--color-dark, rgb(43, 43, 46));
  cursor: pointer;
  width: auto;
  width: 100%;
}
.ui-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-light, rgb(255, 255, 255));
  cursor: pointer;
  -webkit-transition: transform 0.1s ease;
  transition: transform 0.1s ease;
}
.ui-slider input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.ui-slider input[type=range]::-moz-range-thumb {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-light, rgb(255, 255, 255));
  cursor: pointer;
  border: none;
  -moz-transition: transform 0.1s ease;
  transition: transform 0.1s ease;
}
.ui-slider input[type=range]::-moz-range-thumb:hover {
  transform: scale(1.1);
}
.ui-slider .slider-value {
  display: inline-block;
  min-width: 3em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.ui-slider:hover .slider-value {
  opacity: 0.8;
}
.ui-slider.small input[type=range] {
  height: 8px;
}
.ui-slider.small input[type=range]::-webkit-slider-thumb {
  width: 4px;
  height: 4px;
}
.ui-slider.small input[type=range]::-moz-range-thumb {
  width: 4px;
  height: 4px;
}
.ui-slider.large input[type=range] {
  height: 12px;
}
.ui-slider.large input[type=range]::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
}
.ui-slider.large input[type=range]::-moz-range-thumb {
  width: 10px;
  height: 10px;
}
.ui-slider.accent input[type=range]::-webkit-slider-thumb {
  background: #00c0ff;
}
.ui-slider.accent input[type=range]::-moz-range-thumb {
  background: #00c0ff;
}
.ui-slider.success input[type=range] {
  background: rgba(0, 200, 0, 0.1);
}
.ui-slider.success input[type=range]::-webkit-slider-thumb {
  background: lime;
}
.ui-slider.success input[type=range]::-moz-range-thumb {
  background: lime;
}
.ui-slider.danger input[type=range] {
  background: rgba(255, 0, 0, 0.1);
}
.ui-slider.danger input[type=range]::-webkit-slider-thumb {
  background: #ff4444;
}
.ui-slider.danger input[type=range]::-moz-range-thumb {
  background: #ff4444;
}
.ui-slider.disabled {
  opacity: 0.5;
}
.ui-slider.disabled input[type=range] {
  cursor: not-allowed;
}
.ui-slider.disabled input[type=range]::-webkit-slider-thumb {
  cursor: not-allowed;
}
.ui-slider.disabled input[type=range]::-moz-range-thumb {
  cursor: not-allowed;
}
.ui-slider.with-labels {
  display: flex;
  align-items: center;
  gap: 1em;
}
.ui-slider.with-labels .slider-label {
  flex-shrink: 0;
  opacity: 0.7;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ui-slider.with-labels input[type=range] {
  flex: 1;
}

.log-level-select {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  padding-rigt: 1em;
  padding-left: 1em;
  padding-top: 0.25em;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align: center;
  width: auto;
  opacity: 0.35;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.log-level-select:hover {
  opacity: 1;
}
.log-level-select:focus {
  opacity: 1;
}
.log-level-select option {
  background: var(--color-dark, rgb(43, 43, 46));
  color: inherit;
  padding: 0.5em;
}
.log-level-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.log-level-select:disabled:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
}

.ui-select {
  position: relative;
  display: inline-block;
}
.ui-select select {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  padding: 0 1.35em 0 0;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align: right;
  min-width: 80px;
  width: auto;
  opacity: 0.8;
}
.ui-select select:hover {
  opacity: 1;
}
.ui-select select:focus {
  opacity: 1;
}
.ui-select select option {
  background: var(--color-dark, rgb(43, 43, 46));
  color: inherit;
  padding: 0.5em;
}
.ui-select select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-select select:disabled:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
}
.ui-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-90%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transition: border-color 0.2s ease;
}
.ui-select:hover::after {
  border-right-color: rgb(255, 255, 255);
  border-bottom-color: rgb(255, 255, 255);
}
select:focus ~ .ui-select::after {
  border-right-color: rgb(255, 255, 255);
  border-bottom-color: rgb(255, 255, 255);
}
.ui-select.small select {
  padding: 0.25em 2em 0.25em 0.6em;
  font-size: 0.875em;
  min-width: 100px;
}
.ui-select.small::after {
  right: 0.6em;
  border-left-width: 3px;
  border-right-width: 3px;
  border-top-width: 4px;
}
.ui-select.large select {
  padding: 0.6em 3em 0.6em 1em;
  font-size: 1.125em;
  min-width: 150px;
}
.ui-select.large::after {
  right: 1em;
  border-left-width: 5px;
  border-right-width: 5px;
  border-top-width: 6px;
}
.ui-select.block {
  display: block;
}
.ui-select.block select {
  width: 100%;
}
.ui-select.borderless select {
  border-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding-left: 0;
}
.ui-select.borderless select:hover {
  border-bottom-color: rgba(255, 255, 255, 0.4);
  background: transparent;
}
.ui-select.borderless select:focus {
  border-bottom-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}

#kingDebug input[type=text],
#kingDebug input[type=number],
#kingDebug input[type=email],
#kingDebug input[type=password],
#kingDebug input[type=search],
#kingDebug input[type=tel],
#kingDebug input[type=url],
.ui-input input[type=text],
.ui-input input[type=number],
.ui-input input[type=email],
.ui-input input[type=password],
.ui-input input[type=search],
.ui-input input[type=tel],
.ui-input input[type=url] {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  outline: none;
  padding: 0.4em 0.8em;
  transition: all 0.2s ease;
  width: 100%;
}
#kingDebug input[type=text]:hover,
#kingDebug input[type=number]:hover,
#kingDebug input[type=email]:hover,
#kingDebug input[type=password]:hover,
#kingDebug input[type=search]:hover,
#kingDebug input[type=tel]:hover,
#kingDebug input[type=url]:hover,
.ui-input input[type=text]:hover,
.ui-input input[type=number]:hover,
.ui-input input[type=email]:hover,
.ui-input input[type=password]:hover,
.ui-input input[type=search]:hover,
.ui-input input[type=tel]:hover,
.ui-input input[type=url]:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.02);
}
#kingDebug input[type=text]:focus,
#kingDebug input[type=number]:focus,
#kingDebug input[type=email]:focus,
#kingDebug input[type=password]:focus,
#kingDebug input[type=search]:focus,
#kingDebug input[type=tel]:focus,
#kingDebug input[type=url]:focus,
.ui-input input[type=text]:focus,
.ui-input input[type=number]:focus,
.ui-input input[type=email]:focus,
.ui-input input[type=password]:focus,
.ui-input input[type=search]:focus,
.ui-input input[type=tel]:focus,
.ui-input input[type=url]:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}
#kingDebug input[type=text]::-moz-placeholder, #kingDebug input[type=number]::-moz-placeholder, #kingDebug input[type=email]::-moz-placeholder, #kingDebug input[type=password]::-moz-placeholder, #kingDebug input[type=search]::-moz-placeholder, #kingDebug input[type=tel]::-moz-placeholder, #kingDebug input[type=url]::-moz-placeholder, .ui-input input[type=text]::-moz-placeholder, .ui-input input[type=number]::-moz-placeholder, .ui-input input[type=email]::-moz-placeholder, .ui-input input[type=password]::-moz-placeholder, .ui-input input[type=search]::-moz-placeholder, .ui-input input[type=tel]::-moz-placeholder, .ui-input input[type=url]::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
#kingDebug input[type=text]::placeholder,
#kingDebug input[type=number]::placeholder,
#kingDebug input[type=email]::placeholder,
#kingDebug input[type=password]::placeholder,
#kingDebug input[type=search]::placeholder,
#kingDebug input[type=tel]::placeholder,
#kingDebug input[type=url]::placeholder,
.ui-input input[type=text]::placeholder,
.ui-input input[type=number]::placeholder,
.ui-input input[type=email]::placeholder,
.ui-input input[type=password]::placeholder,
.ui-input input[type=search]::placeholder,
.ui-input input[type=tel]::placeholder,
.ui-input input[type=url]::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
#kingDebug input[type=text]:disabled,
#kingDebug input[type=number]:disabled,
#kingDebug input[type=email]:disabled,
#kingDebug input[type=password]:disabled,
#kingDebug input[type=search]:disabled,
#kingDebug input[type=tel]:disabled,
#kingDebug input[type=url]:disabled,
.ui-input input[type=text]:disabled,
.ui-input input[type=number]:disabled,
.ui-input input[type=email]:disabled,
.ui-input input[type=password]:disabled,
.ui-input input[type=search]:disabled,
.ui-input input[type=tel]:disabled,
.ui-input input[type=url]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#kingDebug input[type=text]:disabled:hover,
#kingDebug input[type=number]:disabled:hover,
#kingDebug input[type=email]:disabled:hover,
#kingDebug input[type=password]:disabled:hover,
#kingDebug input[type=search]:disabled:hover,
#kingDebug input[type=tel]:disabled:hover,
#kingDebug input[type=url]:disabled:hover,
.ui-input input[type=text]:disabled:hover,
.ui-input input[type=number]:disabled:hover,
.ui-input input[type=email]:disabled:hover,
.ui-input input[type=password]:disabled:hover,
.ui-input input[type=search]:disabled:hover,
.ui-input input[type=tel]:disabled:hover,
.ui-input input[type=url]:disabled:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
}
#kingDebug input[type=number],
.ui-input input[type=number] {
  -moz-appearance: textfield;
}
#kingDebug input[type=number]::-webkit-inner-spin-button, #kingDebug input[type=number]::-webkit-outer-spin-button,
.ui-input input[type=number]::-webkit-inner-spin-button,
.ui-input input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#kingDebug.small input,
.ui-input.small input {
  padding: 0.25em 0.6em;
  font-size: 0.875em;
}
#kingDebug.large input,
.ui-input.large input {
  padding: 0.6em 1em;
  font-size: 1.125em;
}
#kingDebug.borderless input,
.ui-input.borderless input {
  border-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
#kingDebug.borderless input:hover,
.ui-input.borderless input:hover {
  border-bottom-color: rgba(255, 255, 255, 0.4);
  background: transparent;
}
#kingDebug.borderless input:focus,
.ui-input.borderless input:focus {
  border-bottom-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}
#kingDebug.rounded input,
.ui-input.rounded input {
  border-radius: 25px;
  padding-left: 1.2em;
  padding-right: 1.2em;
}
#kingDebug.with-icon,
.ui-input.with-icon {
  position: relative;
}
#kingDebug.with-icon input,
.ui-input.with-icon input {
  padding-left: 2.5em;
}
#kingDebug.with-icon .input-icon,
.ui-input.with-icon .input-icon {
  position: absolute;
  top: 50%;
  left: 0.8em;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}
#kingDebug.with-icon.icon-right input,
.ui-input.with-icon.icon-right input {
  padding-left: 0.8em;
  padding-right: 2.5em;
}
#kingDebug.with-icon.icon-right .input-icon,
.ui-input.with-icon.icon-right .input-icon {
  left: auto;
  right: 0.8em;
}
#kingDebug.error input,
.ui-input.error input {
  border-color: rgba(255, 0, 0, 0.5);
}
#kingDebug.error input:hover,
.ui-input.error input:hover {
  border-color: rgba(255, 0, 0, 0.7);
}
#kingDebug.error input:focus,
.ui-input.error input:focus {
  border-color: rgba(255, 0, 0, 0.9);
  background: rgba(255, 0, 0, 0.05);
}
#kingDebug.success input,
.ui-input.success input {
  border-color: rgba(0, 200, 0, 0.5);
}
#kingDebug.success input:hover,
.ui-input.success input:hover {
  border-color: rgba(0, 200, 0, 0.7);
}
#kingDebug.success input:focus,
.ui-input.success input:focus {
  border-color: rgba(0, 200, 0, 0.9);
  background: rgba(0, 200, 0, 0.05);
}

.ui-textarea textarea {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  outline: none;
  padding: 0.8em;
  transition: all 0.2s ease;
  resize: vertical;
  min-height: 80px;
  width: 100%;
}
.ui-textarea textarea:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.02);
}
.ui-textarea textarea:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}
.ui-textarea textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.ui-textarea textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.ui-textarea textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  resize: none;
}
.ui-textarea textarea:disabled:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
}
.ui-textarea.small textarea {
  padding: 0.6em;
  font-size: 0.875em;
  min-height: 60px;
}
.ui-textarea.large textarea {
  padding: 1em;
  font-size: 1.125em;
  min-height: 120px;
}
.ui-textarea.fixed textarea {
  resize: none;
}

.ui-checkbox {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.ui-checkbox input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  vertical-align: middle;
  margin: 0;
}
.ui-checkbox input[type=checkbox]:checked {
  background: #007bff;
  border-color: #007bff;
}
.ui-checkbox input[type=checkbox]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  color: white;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.ui-checkbox input[type=checkbox]:hover {
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}
.ui-checkbox input[type=checkbox]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.ui-checkbox input[type=checkbox]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-checkbox input[type=checkbox]:disabled:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.3);
}
.ui-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
}
.ui-checkbox label input[type=checkbox] {
  flex-shrink: 0;
}

.ui-radio {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.ui-radio input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  vertical-align: middle;
  margin: 0;
}
.ui-radio input[type=radio]:checked {
  border-color: #007bff;
}
.ui-radio input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #007bff;
}
.ui-radio input[type=radio]:hover {
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}
.ui-radio input[type=radio]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.ui-radio input[type=radio]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-radio input[type=radio]:disabled:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.3);
}
.ui-radio label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
}
.ui-radio label input[type=radio] {
  flex-shrink: 0;
}

.radios-wrap {
  position: relative;
  z-index: 1002;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  border: 2px solid rgba(234, 233, 232, 0.1);
  background-color: var(--color-dark);
  border-radius: 14px;
  transition: all 0.25s 0s ease-in-out;
  pointer-events: auto;
}
.radios-wrap.glow {
  box-shadow: 0 0 20px 30px var(--color-darkish);
}
.radios-wrap .radio {
  border-radius: 10px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  gap: 4px;
  transition: all 0.25s 0s ease-in-out;
  max-width: 0;
}
.radios-wrap .radio.active {
  max-width: 100%;
}
.radios-wrap .radio.active .unit {
  max-width: 100%;
}
.radios-wrap .radio span {
  display: flex;
  max-width: 100%;
  transition: all 0.25s 0s ease-in-out;
  overflow: hidden;
}
.radios-wrap .radio span.unit {
  max-width: 0;
  transition: all 0.25s 0s ease-in-out;
}
.radios-wrap .radio.toggle, .radios-wrap .radio.active {
  max-width: 100%;
}
.radios-wrap .radio.toggle {
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 1;
  pointer-events: none !important;
}
.radios-wrap .radio:hover {
  flex: 1.5;
}
.radios-wrap button {
  overflow: hidden;
  outline: none;
  flex: 1;
  border: none;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px !important;
  line-height: 25px;
  color: rgb(234, 233, 232);
  padding: 0;
  white-space: nowrap;
}
.radios-wrap button .em-dash {
  display: inline-block;
  vertical-align: middle;
  border-top: 1px solid var(--color-light);
  width: 20px;
  margin: 3px;
  opacity: 0.2;
}
.radios-wrap button:hover {
  opacity: 1;
  background: rgba(234, 233, 232, 0.01);
  color: rgb(234, 233, 232);
}
.radios-wrap button.active {
  opacity: 1;
  color: rgba(234, 233, 232, 0.5);
  background: rgba(234, 233, 232, 0.03);
}
.radios-wrap:hover {
  gap: 4px;
}
.radios-wrap:hover .radio:not(.toggle) {
  max-width: 100%;
}
.radios-wrap:hover .radio.toggle {
  pointer-events: none !important;
  opacity: 0;
}
.radios-wrap .radios {
  background: var(--color-dark);
  display: flex;
  flex-direction: row;
  width: 100%;
  border-radius: 12px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.spinner-wrap {
  transition: all 0.2s 0s var(--easing);
  height: 40px;
  width: 40px;
  display: inline-block;
  position: relative;
  opacity: 1;
}
.spinner-wrap.mute {
  opacity: 0;
  width: 0px;
}

.spinner {
  pointer-events: none;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.1s 0s var(--easing);
  position: absolute;
  display: block;
}
.spinner.center {
  margin: -8px;
  top: 50%;
  left: 50%;
}
.spinner:not(.center) {
  margin: 16px;
}
.spinner.top {
  top: 0;
}
.spinner.bottom {
  bottom: 0;
}
.spinner.left {
  left: 0;
}
.spinner.right {
  right: 0;
}
.spinner:not(.on):after {
  animation-play-state: paused;
}
.spinner.on {
  opacity: 1;
  transform: scale(1);
  transition: all 0.1s 0.1s var(--easing);
}
.spinner:after {
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid #ccc;
  border-radius: 50%;
  animation: spin 10s linear infinite;
}
.spinner.spin-fast:after {
  animation-duration: 1s;
}
.spinner.spin-medium:after {
  animation-duration: 3s;
}
.spinner.spin-slow:after {
  animation-duration: 10s;
}
.spinner.spin-xfast:after {
  animation-duration: 0.5s;
}

#ai-solo-spinner {
  left: 50%;
}

#ai-w-spinner {
  left: 26px;
}

#ai-b-spinner {
  right: 26px;
  left: auto;
}
#ai-b-spinner:after {
  animation-direction: reverse;
}

.volume-control {
  padding: 16px 0;
  pointer-events: auto;
  gap: 0;
  display: flex;
  align-items: center;
  border-radius: 30px;
}
.volume-control .range-wrap {
  transition: all 0.25s ease-in-out 0s;
  opacity: 0;
  max-width: 0;
  margin-right: 0;
}
.volume-control:hover {
  opacity: 1;
}
.volume-control:hover .range-wrap {
  margin-left: 6px;
  margin-right: 6px;
  opacity: 1;
  max-width: 200px;
}
.volume-control input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 10px;
  border-radius: 5px;
  outline: none;
  background: var(--color-bglight);
  max-width: 220px;
  display: block;
}
.volume-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-light);
  cursor: pointer;
}
.volume-control input[type=range]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00c0ff;
  cursor: pointer;
}

.contextual-panel, .contextual-footer, .contextual-header {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  transition: transform 0.35s 0s var(--easing), opacity 0.25s 0s var(--easing);
  opacity: 0;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
}
.contextual-panel.in, .in.contextual-footer, .in.contextual-header {
  transition: transform 0.35s 0.125s var(--easing), opacity 0.25s 0.125s var(--easing);
  opacity: 1;
  transform: translateY(0%);
}
.contextual-panel.in button, .in.contextual-footer button, .in.contextual-header button {
  pointer-events: auto;
}
.contextual-panel > div.out, .contextual-footer > div.out, .contextual-header > div.out {
  opacity: 0;
}
.contextual-panel > div, .contextual-footer > div, .contextual-header > div {
  transition: transform 0.35s 0s var(--easing), opacity 0.25s 0s var(--easing);
  z-index: 100;
  text-align: center;
  font-feature-settings: "tnum";
  font-weight: 500;
  font-size: 14px;
  line-height: 40px;
  padding: 0 20px;
  text-transform: uppercase;
  color: rgba(243, 233, 232, 0.3);
  opacity: 1;
  white-space: nowrap;
}
.contextual-panel > div.left, .contextual-footer > div.left, .contextual-header > div.left {
  left: 0;
  text-align: left;
}
.contextual-panel > div.right, .contextual-footer > div.right, .contextual-header > div.right {
  right: 0;
  text-align: right;
}
.contextual-panel > div.left, .contextual-footer > div.left, .contextual-header > div.left, .contextual-panel > div.right, .contextual-footer > div.right, .contextual-header > div.right {
  position: absolute;
}

.contextual-panel--header, .contextual-header {
  transform: translateY(-50%);
  top: 0;
}
.contextual-panel--header > div.out, .contextual-header > div.out {
  transform: translateY(-50%);
}

.contextual-panel--footer, .contextual-footer {
  transform: translateY(50%);
  bottom: 0;
}
.contextual-panel--footer > div.out, .contextual-footer > div.out {
  transform: translateY(50%);
}

@font-face {
  font-family: "Pieces";
  src: url("/_fonts/StrangerChessPiecesVF.ttf") format("truetype");
  font-weight: 10 240;
}
:root {
  --animation-speed-slow: 0.3s;
  --animation-speed: 0.125s;
  --animation-speed-fast: 0.1s;
  --animation-speed-navigating: 0.075s;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body.board {
  display: flex;
  height: 100vh;
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.chess-container {
  display: flex;
  align-items: center;
  align-items: stretch;
}
@media only screen and (orientation: portrait) {
  .chess-container {
    flex-direction: column-reverse;
    gap: 60px;
  }
}
@media only screen and (orientation: landscape) {
  .chess-container {
    flex-direction: row;
    gap: 20px;
  }
}

@media only screen and (orientation: portrait) {
  #board {
    width: 100%;
  }
}
#board.rotating-out .square, #board.rotating-in .square {
  pointer-events: none !important;
}
#board.rotating-out {
  transition: all 0.3s ease-out !important;
}
#board.rotating-out .captured-pieces,
#board.rotating-out .clock,
#board.rotating-out .alpha,
#board.rotating-out .numeric,
#board.rotating-out .piece {
  transition: all 0.3s ease-out !important;
}
#board.rotating-in .square {
  transition: all 0s 0.3s ease-out !important;
}
#board.rotating-in {
  transition: all 0.3s ease-in !important;
  opacity: 0;
  filter: blur(2px);
}
#board.rotating-in .captured-pieces,
#board.rotating-in .clock,
#board.rotating-in .alpha,
#board.rotating-in .numeric,
#board.rotating-in .piece {
  transition: all 0.3s ease-in !important;
}

@keyframes boardShake {
  0% {
    transform: translate(0, 0) rotate(0) scale(1);
  }
  20% {
    transform: translate(-0.1%, 0) rotate(-0.1deg) scale(1);
  }
  40% {
    transform: translate(0.1%, 0) rotate(0.2deg) scale(1);
  }
  60% {
    transform: translate(-0.1%, 0) rotate(-0.2deg) scale(1);
  }
  80% {
    transform: translate(0.1%, 0) rotate(0.1deg) scale(1);
  }
  100% {
    transform: translate(0, 0) rotate(0) scale(1);
  }
}
div.board {
  will-change: transform;
  letter-spacing: 0;
  display: grid;
  aspect-ratio: 1;
  grid-template: repeat(8, 1fr)/repeat(8, 1fr);
  container-name: board;
  -o-object-fit: contain;
     object-fit: contain;
}
div.board.line {
  grid-template: 1fr/repeat(8, 1fr);
  aspect-ratio: 8/1;
  max-width: 600px;
  margin: 2rem auto;
}
@media only screen and (orientation: portrait) {
  div.board {
    min-width: 100%;
  }
}
@media only screen and (orientation: landscape) {
  div.board {
    min-width: 70vmin;
  }
}
div.board {
  max-width: 866px;
}
div.board.shake {
  animation-name: shake;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-duration: 0.1s;
}
div.board:not(.game-over) .piece {
  cursor: grab;
}
div.board:not(.game-over) .piece:active {
  cursor: grabbing;
}
div.board:not(.game-over) .piece.dragging {
  pointer-events: none;
  z-index: 20000;
  cursor: grabbing !important;
  transition: none;
  filter: drop-shadow(0px 10px 20px rgb(23, 23, 26));
}

.piece.fallen {
  transform-origin: center center;
  transform: rotate(-90deg);
  transition: transform var(--animation-speed-fast) ease-in-out;
}

.knockout-piece {
  pointer-events: none;
  transform-origin: bottom center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  filter: drop-shadow(0px 0px 1px rgb(23, 23, 26)) drop-shadow(0px 0px 5px rgb(23, 23, 26)) drop-shadow(0px 0px 10px rgb(23, 23, 26));
}

.navigating .piece:hover {
  transition: none;
}

.ghost {
  pointer-events: none;
  opacity: 0.035;
}
.ghost.out {
  transition: all 0.35s 0s linear;
  opacity: 0;
}
.ghost.premove-ghost {
  position: relative;
  z-index: 100;
}
.ghost.premove-ghost:before {
  transition: color var(--animation-speed) ease-in-out;
  color: rgb(110, 110, 114);
  position: absolute;
  transform: scale(1);
  pointer-events: none;
  width: 100%;
  height: 100%;
  margin: 0%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Pieces";
  font-size: 7.4vw;
  line-height: 0.855;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-weight: 110;
  text-align: center;
  font-size: 143cqh;
  content: "⬚";
  font-weight: 120;
  box-shadow: 0 0 20px 0 orange, inset 0 0 20px 0 orange;
  color: orange;
}
.ghost.premove-ghost {
  opacity: 1;
}
.ghost.premove-ghost .inner:before {
  color: orange;
  font-weight: 80;
  opacity: 0.1;
}
.ghost.premove-ghost .inner:after {
  opacity: 0.1;
}
.ghost.premove-ghost.draggable-ghost {
  cursor: grab;
  pointer-events: auto;
}
.ghost.premove-ghost.draggable-ghost:hover .inner:before {
  opacity: 1;
}
.ghost.premove-ghost.draggable-ghost.dragging {
  cursor: grabbing;
}
@keyframes premove-pulse {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(1);
  }
}
.premove {
  position: relative;
  z-index: 100;
  pointer-events: none;
  opacity: 1;
  height: 100%;
  width: 100%;
}
.premove:before {
  content: "⬚";
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: "Pieces";
  font-size: 143cqh;
  line-height: 0.855;
  font-weight: 120;
  color: orange;
  box-shadow: 0 0 20px 0 orange, inset 0 0 20px 0 orange;
  pointer-events: none;
  transition: color var(--animation-speed) ease-in-out;
}
.premove .inner:before {
  color: orange;
  font-weight: 80;
  opacity: 0.1;
}
.premove .inner:after {
  opacity: 0.1;
}
.premove.draggable-ghost {
  cursor: grab;
  pointer-events: auto;
}
.premove.draggable-ghost .inner:before {
  opacity: 0.3;
}
.premove.draggable-ghost:hover .inner:before {
  opacity: 0.5;
}

@keyframes sequential-pulse {
  0%, 100% {
    opacity: 0.15;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.25;
    transform: scale(1.02);
  }
}
.board .ghost,
.board .knockout-piece,
.board .piece {
  will-change: left, top, transform;
  height: 100%;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: transform var(--animation-speed) ease-in-out;
  transform: scale(1);
  container-type: size;
  text-transform: unset;
  transform-origin: center center;
}
.board .ghost.promoting, .board .ghost.captured,
.board .knockout-piece.promoting,
.board .knockout-piece.captured,
.board .piece.promoting,
.board .piece.captured {
  transform: scale(0);
  pointer-events: none;
}
.board .ghost.transitioning-in, .board .ghost.transitioning-out,
.board .knockout-piece.transitioning-in,
.board .knockout-piece.transitioning-out,
.board .piece.transitioning-in,
.board .piece.transitioning-out {
  transform: scale(0);
  pointer-events: none;
  transition: transform 0.2s ease-in-out !important;
}
.board .ghost.dropped,
.board .knockout-piece.dropped,
.board .piece.dropped {
  transition: transform 0.025s ease-in-out !important;
}
.board .ghost.bending .inner, .board .ghost.dragging,
.board .knockout-piece.bending .inner,
.board .knockout-piece.dragging,
.board .piece.bending .inner,
.board .piece.dragging {
  transition: none !important;
}
.board .ghost:hover .inner,
.board .knockout-piece:hover .inner,
.board .piece:hover .inner {
  font-weight: 105;
}

.ghost .inner,
.piece .inner,
.knockout-piece .inner,
.premove .inner {
  transform-origin: bottom center;
  position: absolute;
  transition: transform var(--animation-speed-fast) ease-in-out;
  transform: scale(1);
  pointer-events: none;
  width: 100%;
  height: 100%;
  margin: 0%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Pieces";
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  font-size: 7.4vw;
  line-height: 0.855;
  font-size: 143cqh;
  font-weight: 90;
  font-weight: 110;
}
.ghost .inner:after,
.piece .inner:after,
.knockout-piece .inner:after,
.premove .inner:after {
  z-index: -1;
  color: var(--color-dark);
  position: absolute;
  filter: blur(3px);
}
.ghost.bP .inner:after,
.piece.bP .inner:after,
.knockout-piece.bP .inner:after,
.premove.bP .inner:after {
  content: "P";
}
.ghost.bN .inner:after,
.piece.bN .inner:after,
.knockout-piece.bN .inner:after,
.premove.bN .inner:after {
  content: "N";
}
.ghost.bB .inner:after,
.piece.bB .inner:after,
.knockout-piece.bB .inner:after,
.premove.bB .inner:after {
  content: "B";
}
.ghost.bR .inner:after,
.piece.bR .inner:after,
.knockout-piece.bR .inner:after,
.premove.bR .inner:after {
  content: "R";
}
.ghost.bQ .inner:after,
.piece.bQ .inner:after,
.knockout-piece.bQ .inner:after,
.premove.bQ .inner:after {
  content: "Q";
}
.ghost.bK .inner:after,
.piece.bK .inner:after,
.knockout-piece.bK .inner:after,
.premove.bK .inner:after {
  content: "K";
}
.ghost.bP .inner:before,
.piece.bP .inner:before,
.knockout-piece.bP .inner:before,
.premove.bP .inner:before {
  content: "p";
}
.ghost.bN .inner:before,
.piece.bN .inner:before,
.knockout-piece.bN .inner:before,
.premove.bN .inner:before {
  content: "n";
}
.ghost.bB .inner:before,
.piece.bB .inner:before,
.knockout-piece.bB .inner:before,
.premove.bB .inner:before {
  content: "b";
}
.ghost.bR .inner:before,
.piece.bR .inner:before,
.knockout-piece.bR .inner:before,
.premove.bR .inner:before {
  content: "r";
}
.ghost.bQ .inner:before,
.piece.bQ .inner:before,
.knockout-piece.bQ .inner:before,
.premove.bQ .inner:before {
  content: "q";
}
.ghost.bK .inner:before,
.piece.bK .inner:before,
.knockout-piece.bK .inner:before,
.premove.bK .inner:before {
  content: "k";
}
.ghost.wP .inner:before,
.piece.wP .inner:before,
.knockout-piece.wP .inner:before,
.premove.wP .inner:before {
  content: "P";
}
.ghost.wN .inner:before,
.piece.wN .inner:before,
.knockout-piece.wN .inner:before,
.premove.wN .inner:before {
  content: "N";
}
.ghost.wB .inner:before,
.piece.wB .inner:before,
.knockout-piece.wB .inner:before,
.premove.wB .inner:before {
  content: "B";
}
.ghost.wR .inner:before,
.piece.wR .inner:before,
.knockout-piece.wR .inner:before,
.premove.wR .inner:before {
  content: "R";
}
.ghost.wQ .inner:before,
.piece.wQ .inner:before,
.knockout-piece.wQ .inner:before,
.premove.wQ .inner:before {
  content: "Q";
}
.ghost.wK .inner:before,
.piece.wK .inner:before,
.knockout-piece.wK .inner:before,
.premove.wK .inner:before {
  content: "K";
}

.white-player:not(.game-over) .piece.white:active .inner,
.black-player:not(.game-over) .piece.black:active .inner {
  transform: scale(1.125) !important;
}

#dragged-piece {
  display: block !important;
  width: 12.5%;
  height: 12.5%;
}

.captured-square .piece {
  z-index: 1000000000;
}

.marker-path,
.marker-danger,
.marker-selected,
.marker-last-target,
.marker-last-source,
.square {
  transition: opacity var(--animation-speed) ease-in-out;
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.marker-path.visible,
.marker-danger.visible,
.marker-selected.visible,
.marker-last-target.visible,
.marker-last-source.visible,
.square.visible {
  opacity: 1;
}
.marker-path:before,
.marker-danger:before,
.marker-selected:before,
.marker-last-target:before,
.marker-last-source:before,
.square:before {
  transition: color var(--animation-speed) ease-in-out;
  color: rgb(110, 110, 114);
  position: absolute;
  transform: scale(1);
  pointer-events: none;
  width: 100%;
  height: 100%;
  margin: 0%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Pieces";
  font-size: 7.4vw;
  line-height: 0.855;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-weight: 110;
  text-align: center;
  font-size: 143cqh;
  content: "⬚";
}

.marker-last-target.visible,
.marker-last-source.visible {
  opacity: 1;
}

.marker-selected {
  z-index: 500;
}
.marker-selected:before {
  color: var(--color-light);
}

.marker-path {
  background-color: rgba(255, 0, 0, 0.1);
}
.marker-path:before {
  color: red;
}

.marker-danger {
  z-index: 400;
}
.marker-danger:before {
  font-weight: 150;
  box-shadow: 0 0 20px 0 red, inset 0 0 20px 0 red;
  color: red;
}

.marker-path,
.marker-danger {
  transition: opacity var(--animation-speed-slow) ease-in;
}
.marker-path.visible,
.marker-danger.visible {
  transition: opacity var(--animation-speed-navigating) ease-in-out;
  opacity: 1;
}

.marker-pseudo-legal {
  pointer-events: none;
  position: absolute;
  width: 7.5%;
  height: 7.5%;
  background: var(--color-light);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -3.25%;
  z-index: 5;
  transition: transform 0.15s 0s ease-in-out, opacity 0.15s 0s ease-in-out;
  animation-name: legal-out;
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
}
.marker-pseudo-legal.visible {
  animation-name: legal-in;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
}

.marker-legal {
  pointer-events: none;
  position: absolute;
  width: 20%;
  height: 20%;
  border: 4px solid var(--color-light);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -10%;
  z-index: 5;
  transition: transform 0.15s 0s ease-in-out, opacity 0.15s 0s ease-in-out;
  box-shadow: 0 0 10px var(--color-lighten), inset 0 0 10px var(--color-lighten);
  cursor: pointer;
  animation-name: legal-out;
  animation-fill-mode: forwards;
  animation-duration: 0.4s;
}
.marker-legal.visible {
  animation-name: legal-in;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
}
.marker-legal:not(.visible) {
  transform: scale(0);
  opacity: 0;
}

.marker-target {
  pointer-events: none;
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -45%;
  z-index: 5;
  transition: transform 0.15s 0s ease-in-out, opacity 0.15s 0s ease-in-out;
  box-shadow: 0 0 10px var(--color-lighten), inset 0 0 10px var(--color-lighten);
  cursor: pointer;
  animation-name: legal-out;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
}
.marker-target.visible {
  animation-name: legal-in;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
}
.marker-target:not(.visible) {
  transform: scale(0);
  opacity: 0;
}

.square:hover .marker-legal.visible {
  transform: scale(1.3);
}

.hover .marker-legal.visible,
.hover .marker-pseudo-legal.visible {
  animation-name: legal-out !important;
}

.square {
  position: relative;
  aspect-ratio: 1;
  pointer-events: auto;
  opacity: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  container-type: size;
}
.square > * {
  position: absolute !important;
}
.square.light {
  background: rgba(243, 233, 232, 0.025);
}
.rotation-even .square.light {
  background: rgba(243, 233, 232, 0.025);
}
.square.dark {
  background: transparent;
}
.rotation-odd .square.dark {
  background: rgba(243, 233, 232, 0.025);
}
.square:hover:before {
  font-weight: 120;
  opacity: 1;
}
.square.hover:before {
  color: var(--color-light);
}
.square:before {
  opacity: 0.2;
}

.coordinate-label {
  position: absolute;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-light);
  line-height: 1;
  padding: 0.75em;
  pointer-events: none;
  text-align: center;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  opacity: 0.25;
  z-index: 2;
}

.square:nth-child(4n-3) .coordinate-label, .square:nth-child(4n-2) .coordinate-label, .square:nth-child(4n-1) .coordinate-label, .square:nth-child(4n) .coordinate-label {
  justify-content: flex-start;
}

.square:nth-child(8n-3) .coordinate-label, .square:nth-child(8n-2) .coordinate-label, .square:nth-child(8n-1) .coordinate-label, .square:nth-child(8n) .coordinate-label {
  justify-content: flex-end;
}

.coordinate-left {
  right: 100%;
  top: 0%;
  height: 100%;
}

.coordinate-right {
  left: 100%;
  top: 0%;
  height: 100%;
}

.coordinate-top {
  bottom: 100%;
  left: 0%;
  width: 100%;
}

.coordinate-bottom {
  top: 100%;
  left: 0%;
  width: 100%;
}

.coordinate-left-corner {
  right: 100%;
}

.coordinate-right-corner {
  left: 100%;
}

.related-file .alpha,
.related-rank .numeric {
  opacity: 0.5;
}

.promotion-menu {
  position: absolute;
  left: 0;
  width: 106.25%;
  margin: -3.125%;
  height: 0%;
  display: flex;
  flex-direction: column;
  z-index: 30000;
  background-color: var(--color-dark);
  box-shadow: 0 0 30px 20px var(--color-dark);
  transition: all 0.1s ease-in-out;
  overflow: hidden;
  padding: 3.125%;
}
.promotion-menu.top {
  top: 0;
  flex-direction: column;
}
.promotion-menu.bottom {
  bottom: 0;
  flex-direction: column-reverse;
}
.promotion-menu.open {
  height: 406.25%;
}
.promotion-menu.open .piece {
  transform: scale(1);
}
.promotion-menu .piece {
  display: block;
  transform: scale(0);
  transition: transform 0.25s ease-in-out;
}

.promotion-option {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  cursor: pointer;
  position: relative;
}
.promotion-option:before {
  color: rgba(110, 110, 114, 0.5);
  position: absolute;
  transform: scale(1);
  pointer-events: none;
  width: 100%;
  height: 100%;
  margin: 0%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Pieces";
  font-size: 7.4vw;
  line-height: 0.855;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-weight: 110;
  text-align: center;
  font-size: 143cqh;
  content: "⬚";
  font-weight: 100;
}
.promotion-option .piece {
  opacity: 0.1;
}
.promotion-option:hover .piece {
  opacity: 1;
}
.promotion-option:hover:before {
  z-index: 1000;
  color: rgb(110, 110, 114);
  color: var(--color-lighten);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes legal-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.25;
  }
  100% {
    transform: scale(1);
    opacity: 0.25;
  }
}
@keyframes legal-out {
  0% {
    transform: scale(1);
    opacity: 0.25;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes pieceWobbleLeft {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(5deg);
  }
  20% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-4deg);
  }
  40% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg);
  }
  60% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(-2deg);
  }
  80% {
    transform: rotate(0deg);
  }
  90% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes pieceWobbleRight {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-5deg);
  }
  20% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(4deg);
  }
  40% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  60% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(2deg);
  }
  80% {
    transform: rotate(0deg);
  }
  90% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes pieceVibrate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.vibrate > .piece:not(.dragging) .inner {
  transform-origin: bottom center;
  animation-name: pieceVibrate;
  animation-duration: 0.1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.square.exit-left .piece:not(.dragging) .inner,
.square.exit-right .piece:not(.dragging) .inner {
  transform-origin: bottom center;
  animation-duration: 0.2s;
  animation-fill-mode: none;
  animation-timing-function: linear;
}

.square.exit-left .piece:not(.dragging) .inner {
  animation-name: pieceWobbleLeft;
}

.square.exit-right .piece:not(.dragging) .inner {
  animation-name: pieceWobbleRight;
}

:root {
  --dialog-speed: 0.3s;
  --dialog-speed-in: 0.3s;
  --dialog-speed-out: 0.15s;
}

@keyframes dialog-in {
  0% {
    transform: scale(1.1) translateY(30%);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0%);
    opacity: 1;
  }
}
@keyframes dialog-out {
  0% {
    transform: scale(1) translateY(0%);
    opacity: 1;
  }
  100% {
    transform: scale(0.9) translateY(30%);
    opacity: 0;
  }
}
#board {
  position: relative;
}

.board-dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dialog-content *, .viewport-dialog .dialog-content * {
  margin: 0;
}
.dialog-content, .viewport-dialog .dialog-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  gap: 10px;
  z-index: 30000;
  text-shadow: 0 1px 4px var(--color-dark);
}
.dialog-content::after, .viewport-dialog .dialog-content::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background-color: var(--color-dark);
  box-shadow: 0 0 20px 20px var(--color-dark);
  opacity: 1;
}
.dialog-content h2, .viewport-dialog .dialog-content h2 {
  margin: 0;
  font-size: 40px;
  letter-spacing: -0.025em;
  text-align: center;
}
.dialog-content h2 br, .viewport-dialog .dialog-content h2 br {
  display: none;
}
.dialog-content h2, .viewport-dialog .dialog-content h2, .dialog-content p, .viewport-dialog .dialog-content p {
  text-align: center;
}
.dialog-content .dialog-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dialog-content .dialog-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.dialog-content .dialog-buttons .button {
  position: relative;
  padding: 0.4em 1em;
  line-height: 25px;
  border: 2px solid rgba(234, 233, 232, 0.1);
  border-radius: 14px;
  background: rgba(234, 233, 232, 0.03);
  outline: none;
  overflow: hidden;
}
.dialog-content .dialog-buttons .button .button-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  pointer-events: none;
  transition: width 0.1s linear;
}
.dialog-content .dialog-buttons .button .button-label {
  position: relative;
  z-index: 1;
}

.game-end-dialog.in .dialog-content,
.confirmation-dialog.in .dialog-content,
.alert-dialog.in .dialog-content,
.board-lobby-dialog.in .dialog-content,
.board-dialog.in .dialog-content {
  animation: dialog-in var(--dialog-speed-in) ease-out forwards;
}
.game-end-dialog.out .dialog-content,
.confirmation-dialog.out .dialog-content,
.alert-dialog.out .dialog-content,
.board-lobby-dialog.out .dialog-content,
.board-dialog.out .dialog-content {
  animation: dialog-out var(--dialog-speed-out) ease-in forwards;
}
.game-end-dialog .dialog-content,
.confirmation-dialog .dialog-content,
.alert-dialog .dialog-content,
.board-lobby-dialog .dialog-content,
.board-dialog .dialog-content {
  transform-origin: center center;
}

.game-end-dialog .dialog-content {
  position: relative;
  text-align: center;
}
.game-end-dialog .game-end-reason {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.7);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.game-end-dialog .dialog-message {
  font-size: 2.5em;
  font-weight: 600;
}
.auto-rematch-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  color: #666;
  font-size: 0.9em;
  text-align: center;
}
.auto-rematch-text .ui-toggle {
  margin: 0;
}

.countdown {
  font-weight: bold;
  font-variant-numeric: tabular-nums lining-nums;
}

.viewport-dialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}
.board-lobby-dialog {
  width: 100%;
  height: 100%;
}

#human-setup-dialog .section-label,
#ai-setup-dialog .section-label,
#watch-setup-dialog .section-label,
.game-end-dialog[data-dialog-type=online-setup] .section-label {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  margin: 0;
  text-align: center;
  position: relative;
  bottom: -8px;
}

@keyframes shimmer-green {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}
@keyframes shimmer-blue {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}
.button[data-action=rematch] {
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}
.button[data-action=rematch].opponent-seeking {
  background-color: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.5);
  color: rgb(76, 175, 80);
}
.button[data-action=rematch].opponent-seeking::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, transparent 30%, rgba(76, 175, 80, 0.3) 50%, transparent 70%);
  animation: shimmer-green 3s infinite;
  pointer-events: none;
  z-index: 0;
}
.button[data-action=rematch].opponent-seeking .button-label {
  position: relative;
  z-index: 1;
}
.button[data-action=rematch].opponent-seeking:hover {
  background-color: rgba(76, 175, 80, 0.25);
  border-color: rgba(76, 175, 80, 0.7);
  color: rgb(76, 175, 80);
}
.button[data-action=rematch].opponent-seeking:hover::before {
  animation-play-state: paused;
}
.button[data-action=rematch].my-seek {
  background-color: rgba(33, 150, 243, 0.15);
  border-color: rgba(33, 150, 243, 0.5);
  color: rgb(33, 150, 243);
}
.button[data-action=rematch].my-seek::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, transparent 30%, rgba(33, 150, 243, 0.3) 50%, transparent 70%);
  animation: shimmer-blue 3s infinite;
  pointer-events: none;
  z-index: 0;
}
.button[data-action=rematch].my-seek .button-label {
  position: relative;
  z-index: 1;
}
.button[data-action=rematch].my-seek:hover {
  background-color: rgba(33, 150, 243, 0.25);
  border-color: rgba(33, 150, 243, 0.7);
  color: rgb(33, 150, 243);
}
.button[data-action=rematch].my-seek:hover::before {
  animation-play-state: paused;
}

.button-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background-color: rgba(76, 175, 80, 0.3);
  width: 0;
  transition: width linear;
  border-radius: 0 0 4px 4px;
  z-index: 1;
}

.board-lobby-dialog .dialog-content {
  border-radius: 10px;
  background: var(--color-dark);
}
@media only screen and (orientation: portrait) {
  .board-lobby-dialog .dialog-content {
    width: 75%;
  }
}
@media only screen and (orientation: landscape) {
  .board-lobby-dialog .dialog-content {
    width: 52.5vmin;
  }
}
.board-lobby-dialog h2 {
  text-align: center;
  margin: 0 0 1.5rem 0;
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}
.board-lobby-dialog .time-control-pools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.5rem;
}
.board-lobby-dialog .time-control {
  display: flex;
  font-size: 24cqh;
  gap: 2px;
}
.board-lobby-dialog .time-control .time-increment {
  opacity: 0.3;
  vertical-align: top;
}
.board-lobby-dialog .time-label {
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  font-size: 12px;
  opacity: 0.3;
  margin-top: auto;
}
.board-lobby-dialog .button-tile.time-pool {
  container-type: size;
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  font-size: 32px;
  line-height: 1;
  font-weight: 400;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: rgba(234, 233, 232, 0.03);
  transition: all 0.15s ease;
  border: 2px solid rgba(255, 255, 255, 0.05);
}
.board-lobby-dialog .button-tile.time-pool:hover {
  background: rgba(234, 233, 232, 0.07);
  opacity: 1;
}
.board-lobby-dialog .button-tile.time-pool:hover .time-increment {
  opacity: 1;
}
.board-lobby-dialog .button-tile.time-pool:active {
  transform: translateY(0);
}
.board-lobby-dialog .button-tile.time-pool.seeking .time-increment, .board-lobby-dialog .button-tile.time-pool.my-seek .time-increment {
  opacity: 0.5;
}
.board-lobby-dialog .button-tile.time-pool.seeking {
  position: relative;
  overflow: hidden;
  opacity: 1;
  border: 2px solid rgba(76, 175, 80, 0.4);
  background: rgba(76, 175, 80, 0.15);
  color: #4CAF50;
}
.board-lobby-dialog .button-tile.time-pool.seeking::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, transparent 30%, rgba(76, 175, 80, 0.3) 50%, transparent 70%);
  animation: shimmer 3s infinite;
  pointer-events: none;
}
.board-lobby-dialog .button-tile.time-pool.seeking:hover {
  background: rgba(76, 175, 80, 0.25);
  border-color: rgba(76, 175, 80, 0.6);
}
.board-lobby-dialog .button-tile.time-pool.seeking:hover::before {
  animation-play-state: paused;
}
.board-lobby-dialog .button-tile.time-pool.my-seek {
  position: relative;
  overflow: hidden;
  opacity: 1;
  border: 2px solid rgba(33, 150, 243, 0.4);
  background: rgba(33, 150, 243, 0.15);
  color: #2196F3;
}
.board-lobby-dialog .button-tile.time-pool.my-seek::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, transparent 30%, rgba(33, 150, 243, 0.3) 50%, transparent 70%);
  animation: shimmer-blue 3s infinite;
  pointer-events: none;
}
.board-lobby-dialog .button-tile.time-pool.my-seek:hover {
  background: rgba(33, 150, 243, 0.25);
  border-color: rgba(33, 150, 243, 0.6);
}
.board-lobby-dialog .button-tile.time-pool.my-seek:hover::before {
  animation-play-state: paused;
}
.board-lobby-dialog .button-tile.time-pool.custom {
  opacity: 0.5;
}
.board-lobby-dialog .button-tile.time-pool.custom .custom-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.board-lobby-dialog .button-tile.time-pool.custom:hover {
  opacity: 0.8;
}
.board-lobby-dialog .dialog-footer {
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
  margin-top: 0.5rem;
}
.board-lobby-dialog .dialog-footer .button {
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}
@keyframes shimmer-blue {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}
.time-pool:not(.my-seek) .tile-spinner {
  display: none;
}
.time-pool.my-seek .tile-spinner {
  display: block;
}

.time-pool {
  position: relative;
  transition: all 0.3s ease;
  overflow: visible;
}
.time-pool.seeking {
  background-color: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.5);
}
.time-pool.seeking:hover {
  background-color: rgba(76, 175, 80, 0.25);
  border-color: rgba(76, 175, 80, 0.7);
}
.time-pool.my-seek {
  background-color: rgba(33, 150, 243, 0.15);
  border-color: rgba(33, 150, 243, 0.5);
}
.time-pool.my-seek .time-control,
.time-pool.my-seek .time-label {
  opacity: 0.7;
}
.time-pool.my-seek:hover {
  background-color: rgba(33, 150, 243, 0.25);
  border-color: rgba(33, 150, 243, 0.7);
}
.time-pool.my-seek.seeking {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(76, 175, 80, 0.15) 100%);
  border-color: rgba(33, 150, 243, 0.5);
}

.board-lobby-dialog.has-active-seek .dialog-content::before {
  content: "Seeking opponent...";
  position: absolute;
  top: -35px;
  left: 0;
  right: 0;
  text-align: center;
  color: #2196F3;
  font-size: 0.9em;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
/* AI Thinking Stream in Footer */
#ai-thinking-indicator {
  display: flex;
  align-items: center;
  min-width: 200px;
  max-width: 400px;
  flex: 1;
}

#ai-thinking-stream {
  width: 100%;
  max-height: 2em;
  height: 2em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 10px;
}

.ai-thinking-line {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 17px;
  font-size: 12px;
  position: relative;
  transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
  flex-shrink: 0;
  opacity: 0;
  background: rgba(255, 255, 255, 0.05);
  color: #ccc;
}

.ai-thinking-line.expanded {
  max-height: 2em;
  opacity: 1;
}

.ai-thinking-line.removing {
  max-height: 0 !important;
  opacity: 0 !important;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.ai-line-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2em;
  gap: 8px;
}

.ai-depth {
  color: #888;
  font-weight: bold;
  font-size: 10px;
}

.ai-move {
  flex: 1;
  color: inherit;
  letter-spacing: 0.5px;
}

.ai-eval {
  color: #aaa;
  font-size: 10px;
}

/* Simple Evaluation Bar - Black and White Only */
#eval {
  padding: 10px 16px;
  height: 100%;
  position: fixed !important;
  right: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}
#eval.hidden {
  opacity: 0;
  pointer-events: none;
}
#eval[style*="display: none"] {
  display: none !important;
}

/* Evaluation bar container */
.eval-bar-container {
  height: 70vmin;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

/* Main evaluation bar */
.eval-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* White and black evaluation sections */
.eval-white {
  border-left: 2px solid var(--color-light);
  opacity: 0.3;
  transition: flex 0.1s ease-out;
  flex: 1;
  position: relative;
  min-height: 1px;
  order: 1;
}

.eval-black {
  background: var(--color-light);
  opacity: 0.05;
  transition: flex 0.1s ease-out;
  flex: 1;
  position: relative;
  min-height: 1px;
}

/* Evaluation text display */
.eval-text {
  position: fixed !important;
  bottom: 0;
  right: 0;
  pointer-events: none;
  z-index: 10;
  width: -moz-max-content;
  width: max-content;
  color: var(--color-text);
  color: rgba(243, 233, 232, 0.3);
  padding: 0 15px;
  z-index: 1000;
  position: fixed;
  bottom: 0;
  text-align: center;
  font-feature-settings: "tnum";
  font-weight: 500;
  font-size: 14px;
  line-height: 40px;
  white-space: nowrap;
}

/* Toggle button active state */
#toggleEval.active {
  background: var(--color-primary);
  color: var(--color-light);
}

/* Board integration positioning */
#board #eval {
  left: 0px;
  z-index: 5;
}
#board #eval.right {
  left: auto;
  right: -8px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #eval .eval-white,
  #eval .eval-black {
    transition: none;
  }
}
/* Print styles */
@media print {
  #eval {
    display: none;
  }
}
/* Notification Styles */
.notification {
  position: fixed;
  bottom: 10px;
  left: 10px;
  padding: 12px 20px;
  border-radius: 14px;
  border: 2px solid rgba(234, 233, 232, 0.1);
  color: rgba(234, 233, 232, 0.5);
  letter-spacing: 0.05em;
  font-size: 12px !important;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform: translateY(-10px);
  word-wrap: break-word;
  cursor: pointer;
  text-transform: uppercase;
  display: none;
}

/* Notification variants */
.notification-info {
  background: rgba(234, 233, 232, 0.03);
}

.notification-success {
  background-color: #10b981;
}

.notification-warning {
  background-color: #f59e0b;
}

.notification-error {
  background-color: #ef4444;
}

/* Animation states */
.notification.show {
  opacity: 1;
  transform: translateY(0);
}

.notification.hide {
  opacity: 0;
  transform: translateY(-10px);
}

.board-badge {
  position: absolute;
  top: -20%;
  right: -20%;
  z-index: 10000;
  display: flex;
  width: 40%;
  height: 40%;
  background: var(--color-light);
  color: var(--color-dark);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--color-dark);
  font-size: 2.3vh;
  line-height: 3.3vh;
  font-weight: 800;
  justify-content: center;
  pointer-events: none;
  transform: scale(0) rotate(90deg);
  transition: all 0.25s 0s var(--easing);
}
.board-badge.pop {
  transition: all 0.125s 0s var(--easing);
  transform: scale(1) rotate(0deg);
}
.board-badge.pop .badge-pulse {
  transition: all 0.5s 0s var(--easing);
  transform: scale(0);
  opacity: 1;
}
.board-badge .badge-pulse {
  transition: all 0.5s 0s var(--easing);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.1);
  transform: scale(10);
  opacity: 0;
}
.board-badge:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.board-badge.skull {
  background-color: red;
  box-shadow: 0 0 20px red;
}
.board-badge.skull:after {
  background-image: url("/_svg/badge-skull-black.svg");
}
.board-badge.fail {
  background-color: red;
  box-shadow: 0 0 20px red;
}
.board-badge.fail:after {
  background-image: url("/_svg/badge-cross-black.svg");
}
.board-badge.success {
  background-color: red;
  box-shadow: 0 0 20px red, 0 0 5px red;
}
.board-badge.success:after {
  background-image: url("/_svg/badge-check-black.svg");
}
.board-badge.win {
  background-color: red;
  box-shadow: 0 0 20px red;
}
.board-badge.win:after {
  background-image: url("/_svg/badge-star-black.svg");
}

.board-api-documentation {
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 300000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--color-dark);
  color: var(--color-lighten);
  opacity: 0;
  pointer-events: none;
  font-size: 18px;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateX(-2.5%) scale(1.05, 1);
}
.board-api-documentation.in {
  transform: translateX(0px) scale(1, 1);
  transform: translateX(0px);
  pointer-events: auto;
  opacity: 1;
}
.board-api-documentation .api-header {
  position: sticky;
  top: 0;
  background: var(--color-dark);
  border-bottom: 1px solid var(--color-mid);
  z-index: 10;
  display: none;
}
.board-api-documentation .api-header h1 {
  font-size: 24px;
  margin: 0;
  color: var(--color-light);
}
.board-api-documentation .api-header .api-version {
  font-size: 14px;
  color: var(--color-lighter);
  margin: 5px 0 0 0;
}
.board-api-documentation .api-header .api-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--color-bglight);
  border: none;
  color: var(--color-light);
  font-size: 24px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.2s ease;
}
.board-api-documentation .api-header .api-close:hover {
  background: var(--color-mid);
}
.board-api-documentation .api-content section {
  padding: 10vmin;
  border-top: 1px solid var(--color-bglight);
}
.board-api-documentation .api-content {
  margin: 0 auto;
}
.board-api-documentation .api-content section {
  max-width: 100% !important;
}
.board-api-documentation .api-content section#api-overview {
  margin-top: 0;
}
.board-api-documentation .api-content h2 {
  z-index: 1000;
  top: 0;
  font-size: 52px;
  color: var(--color-light);
  text-transform: uppercase;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0em;
  font-weight: normal;
  text-transform: none;
}
.board-api-documentation .api-content h3 {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0.025em;
  text-transform: none;
  margin: 30px 0 10px 0;
  color: var(--color-light);
  margin-top: 2em;
}
.board-api-documentation .api-content h4 {
  text-transform: unset;
  font-size: 28px;
  line-height: 1;
  margin: 50px 0 10px 0;
  color: var(--color-light);
}
.board-api-documentation .api-content p {
  line-height: 1.6;
  color: var(--color-lighter);
  margin: 15px 0 15px 0;
  max-width: 800px;
  text-wrap: balance;
}
.board-api-documentation .api-content .feature-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.board-api-documentation .api-content .feature-items .feature-item {
  flex: 1;
  min-width: 250px;
  counter-increment: counterFeature;
}
.board-api-documentation .api-content .feature-items dt:before {
  content: counter(counterFeature, padded-decimal);
  display: inline-block;
  margin-right: 0.5em;
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
  font-weight: normal;
}
.board-api-documentation .api-content .feature-item {
  float: left;
  position: relative;
  border-radius: 16px;
  padding: 24px 24px;
  margin: 0;
  border: none;
  vertical-align: middle;
  background: var(--color-bglighter, rgba(232, 233, 234, 0.025));
  color: var(--color-lighten, rgba(234, 233, 232, 0.6));
  overflow: hidden;
}
.board-api-documentation .api-content .feature-item dd, .board-api-documentation .api-content .feature-item dt {
  margin: 0;
  text-wrap: balance;
}
.board-api-documentation .api-content .feature-item dt {
  color: white;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.board-api-documentation .api-content .feature-item i {
  background: rgba(255, 255, 255, 0.025);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 60px;
  padding-top: 0.2em;
  height: 100%;
  width: 140px;
  font-style: normal;
  display: none;
}
.board-api-documentation .api-content dl.columns {
  -moz-column-width: 300px;
       column-width: 300px;
  -moz-column-gap: 50px;
       column-gap: 50px;
  line-height: 1.6;
  color: var(--color-lighter);
  margin-top: 40px;
}
.board-api-documentation .api-content dl.columns dt {
  color: var(--color-light);
  font-weight: bold;
  -moz-column-break-after: avoid;
       break-after: avoid;
  page-break-after: avoid;
}
.board-api-documentation .api-content dl.columns dd {
  margin: 5px 0 0 0;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-bglight);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  page-break-inside: avoid;
  text-wrap: pretty;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.board-api-documentation .api-content .module-list {
  list-style: normal;
  padding: 0;
  margin-left: 0;
}
.board-api-documentation .api-content .module-list > li {
  background: var(--color-bglighter);
  border-radius: 16px;
  padding: 24px 32px;
  margin: 0 0 20px 0;
  overflow-x: auto;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  line-height: 2;
}
.board-api-documentation .api-content .module-list ol, .board-api-documentation .api-content .module-list ul {
  margin-top: 2em;
}
.board-api-documentation .api-content ul, .board-api-documentation .api-content ol {
  margin: 0;
  margin-top: 1em;
  padding-left: 0.75em;
}
.board-api-documentation .api-content ul li + li, .board-api-documentation .api-content ol li + li {
  padding-top: 0.125em;
  margin-top: 0.125em;
  border-top: 1px solid var(--color-bglight);
}
.board-api-documentation .api-content ul li, .board-api-documentation .api-content ol li {
  line-height: 2;
  color: var(--color-lighter);
}
.board-api-documentation .api-content ul li strong, .board-api-documentation .api-content ol li strong {
  color: var(--color-light);
}
.board-api-documentation .api-content pre {
  background: var(--color-bglighter);
  border-radius: 16px;
  padding: 24px 32px;
  margin: 0 0 0px 0;
  overflow-x: auto;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  line-height: 2;
}
.board-api-documentation .api-content pre code {
  border: none;
  background: none;
  padding: 0;
  display: block;
  color: rgba(255, 255, 255, 0.7);
}
.board-api-documentation .api-content pre code.hljs {
  white-space: pre;
  overflow-x: auto;
}
.board-api-documentation .api-content pre code .hljs-comment,
.board-api-documentation .api-content pre code .hljs-quote {
  color: rgba(92, 99, 112, 0.9) !important;
  font-style: italic;
}
.board-api-documentation .api-content pre code .hljs-string,
.board-api-documentation .api-content pre code .hljs-doctag {
  color: rgba(152, 195, 121, 0.9) !important;
}
.board-api-documentation .api-content pre code .hljs-number,
.board-api-documentation .api-content pre code .hljs-literal,
.board-api-documentation .api-content pre code .hljs-built_in {
  color: rgba(209, 154, 102, 0.9) !important;
}
.board-api-documentation .api-content pre code .hljs-variable.constant,
.board-api-documentation .api-content pre code .hljs-params {
  color: rgba(86, 182, 194, 0.9) !important;
}
.board-api-documentation .api-content pre code .hljs-keyword,
.board-api-documentation .api-content pre code .hljs-selector-tag,
.board-api-documentation .api-content pre code .hljs-type {
  color: rgba(198, 120, 221, 0.9) !important;
}
.board-api-documentation .api-content pre code .hljs-class,
.board-api-documentation .api-content pre code .hljs-title.class_,
.board-api-documentation .api-content pre code .hljs-title.class_.inherited__ {
  color: rgba(97, 174, 238, 0.9) !important;
  font-style: italic;
}
.board-api-documentation .api-content pre code .hljs-title.function_,
.board-api-documentation .api-content pre code .hljs-function .hljs-title,
.board-api-documentation .api-content pre code .hljs-attr {
  color: rgba(97, 174, 238, 0.9) !important;
}
.board-api-documentation .api-content pre code .hljs-variable,
.board-api-documentation .api-content pre code .hljs-params {
  color: rgba(209, 154, 102, 0.9) !important;
  font-style: italic;
}
.board-api-documentation .api-content pre code .hljs-variable.language_ {
  color: rgba(230, 192, 123, 0.9) !important;
  font-style: italic;
}
.board-api-documentation .api-content pre code .hljs-built_in {
  color: rgba(230, 192, 123, 0.9) !important;
}
.board-api-documentation .api-content pre code .hljs-tag,
.board-api-documentation .api-content pre code .hljs-name,
.board-api-documentation .api-content pre code .hljs-selector-id,
.board-api-documentation .api-content pre code .hljs-selector-class {
  color: rgba(198, 120, 221, 0.9) !important;
}
.board-api-documentation .api-content pre code .hljs-attribute {
  color: rgba(209, 154, 102, 0.9) !important;
}
.board-api-documentation .api-content pre code .hljs-regexp,
.board-api-documentation .api-content pre code .hljs-symbol,
.board-api-documentation .api-content pre code .hljs-meta {
  color: rgba(86, 182, 194, 0.9) !important;
}
.board-api-documentation .api-content pre code .hljs-addition {
  color: rgba(152, 195, 121, 0.9) !important;
  background: rgba(152, 195, 121, 0.15) !important;
}
.board-api-documentation .api-content pre code .hljs-deletion {
  color: rgba(255, 0, 0, 0.9) !important;
  background: rgba(255, 0, 0, 0.15) !important;
}
.board-api-documentation .api-content code {
  text-transform: none;
  display: inline-block;
  font-family: monospace;
  font-size: 15px;
  border-radius: var(--radius);
  color: var(--color-lighten);
  background: var(--color-softlight);
  padding: 0.1em 0.4em;
  line-height: 1.7;
  border-radius: 6px;
  margin: 0.25em 0;
}
.board-api-documentation .api-content .api-migration-notice {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  padding: 1.5em 1.5em;
  margin: 20px 0;
  color: rgba(255, 193, 7, 0.9);
}
.board-api-documentation .api-content .api-migration-notice strong {
  color: rgb(255, 193, 7);
}
.board-api-documentation .api-content .api-method {
  margin-top: 24px;
  background: transparent;
  border: none;
  border: 3px solid var(--color-bglight);
  counter-increment: counterRows;
  margin-bottom: 50px;
  padding: 2em;
  border-radius: 32px;
}
.board-api-documentation .api-content .api-method h4 {
  /* Row number */
}
.board-api-documentation .api-content .api-method h4: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;
}
.board-api-documentation .api-content .api-method h4 {
  margin-top: 0;
  font-size: 18px;
}
.board-api-documentation .api-content .api-method h4 code {
  font-size: 15px;
}
.board-api-documentation .api-content .api-method p {
  margin: 10px 0;
}
.board-api-documentation .api-content .api-method ul {
  margin: 48px 0;
}
.board-api-documentation .api-content .project-structure {
  margin-bottom: 64px;
}
.board-api-documentation .api-content table,
.board-api-documentation .api-content .api-table,
.board-api-documentation .api-content .project-structure {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: var(--font-micro, 14px);
  font-family: var(--main-font, "ND Intakt"), -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--color-bgdark, rgba(12, 21, 27, 0.02));
  border-radius: var(--radius, 5px);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}
.board-api-documentation .api-content table code,
.board-api-documentation .api-content .api-table code,
.board-api-documentation .api-content .project-structure code {
  white-space: nowrap;
}
.board-api-documentation .api-content table tbody .directory-header + tr td:first-child,
.board-api-documentation .api-content table tbody tr:first-child td:first-child,
.board-api-documentation .api-content .api-table tbody .directory-header + tr td:first-child,
.board-api-documentation .api-content .api-table tbody tr:first-child td:first-child,
.board-api-documentation .api-content .project-structure tbody .directory-header + tr td:first-child,
.board-api-documentation .api-content .project-structure tbody tr:first-child td:first-child {
  border-top-left-radius: 16px;
}
.board-api-documentation .api-content table tbody .directory-header + tr td:last-child,
.board-api-documentation .api-content table tbody tr:first-child td:last-child,
.board-api-documentation .api-content .api-table tbody .directory-header + tr td:last-child,
.board-api-documentation .api-content .api-table tbody tr:first-child td:last-child,
.board-api-documentation .api-content .project-structure tbody .directory-header + tr td:last-child,
.board-api-documentation .api-content .project-structure tbody tr:first-child td:last-child {
  border-top-right-radius: 16px;
}
.board-api-documentation .api-content table tbody tr:last-child td:first-child,
.board-api-documentation .api-content .api-table tbody tr:last-child td:first-child,
.board-api-documentation .api-content .project-structure tbody tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}
.board-api-documentation .api-content table tbody tr:last-child td:last-child,
.board-api-documentation .api-content .api-table tbody tr:last-child td:last-child,
.board-api-documentation .api-content .project-structure tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}
.board-api-documentation .api-content table tr:not(.directory-header):not(.api-assessment),
.board-api-documentation .api-content .api-table tr:not(.directory-header):not(.api-assessment),
.board-api-documentation .api-content .project-structure tr:not(.directory-header):not(.api-assessment) {
  counter-increment: counterTable;
}
.board-api-documentation .api-content table tr:not(.api-assessment) td:nth-child(1):before,
.board-api-documentation .api-content .api-table tr:not(.api-assessment) td:nth-child(1):before,
.board-api-documentation .api-content .project-structure tr:not(.api-assessment) td:nth-child(1):before {
  content: counter(counterTable, padded-decimal);
  display: inline-block;
  margin-right: 0.5em;
  font-size: 70%;
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
  font-weight: normal;
}
.board-api-documentation .api-content table th,
.board-api-documentation .api-content .api-table th,
.board-api-documentation .api-content .project-structure th {
  background: var(--color-dark, rgb(23, 23, 25));
  color: var(--color-lighten, rgba(234, 233, 232, 0.6));
  padding: 12px 16px;
  text-align: left;
  border: none;
  font-weight: var(--font-demi, 500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--font-mini, 16px);
}
.board-api-documentation .api-content table tr:not(.directory-header) + tr td,
.board-api-documentation .api-content .api-table tr:not(.directory-header) + tr td,
.board-api-documentation .api-content .project-structure tr:not(.directory-header) + tr td {
  border-top: 2px dotted rgba(255, 255, 255, 0.075);
}
.board-api-documentation .api-content table th,
.board-api-documentation .api-content table td,
.board-api-documentation .api-content .api-table th,
.board-api-documentation .api-content .api-table td,
.board-api-documentation .api-content .project-structure th,
.board-api-documentation .api-content .project-structure td {
  font-variant-numeric: tabular-nums;
}
.board-api-documentation .api-content table th:nth-child(2),
.board-api-documentation .api-content table td:nth-child(2),
.board-api-documentation .api-content .api-table th:nth-child(2),
.board-api-documentation .api-content .api-table td:nth-child(2),
.board-api-documentation .api-content .project-structure th:nth-child(2),
.board-api-documentation .api-content .project-structure td:nth-child(2) {
  text-wrap: balance;
}
.board-api-documentation .api-content table th:first-child,
.board-api-documentation .api-content table td:first-child,
.board-api-documentation .api-content .api-table th:first-child,
.board-api-documentation .api-content .api-table td:first-child,
.board-api-documentation .api-content .project-structure th:first-child,
.board-api-documentation .api-content .project-structure td:first-child {
  text-align: left;
  width: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: 16px;
}
.board-api-documentation .api-content table th:last-child:not(:first-child),
.board-api-documentation .api-content table td:last-child:not(:first-child),
.board-api-documentation .api-content .api-table th:last-child:not(:first-child),
.board-api-documentation .api-content .api-table td:last-child:not(:first-child),
.board-api-documentation .api-content .project-structure th:last-child:not(:first-child),
.board-api-documentation .api-content .project-structure td:last-child:not(:first-child) {
  text-align: right;
  padding-right: 16px;
}
.board-api-documentation .api-content table td,
.board-api-documentation .api-content .api-table td,
.board-api-documentation .api-content .project-structure td {
  padding: 14px 8px;
  border: none;
  vertical-align: middle;
  background: var(--color-bglighter, rgba(232, 233, 234, 0.025));
  color: var(--color-lighten, rgba(234, 233, 232, 0.6));
}
.board-api-documentation .api-content table tr:hover td,
.board-api-documentation .api-content .api-table tr:hover td,
.board-api-documentation .api-content .project-structure tr:hover td {
  color: var(--color-light, #f3e9e8);
}
.board-api-documentation .api-content table .directory-header,
.board-api-documentation .api-content .api-table .directory-header,
.board-api-documentation .api-content .project-structure .directory-header {
  background: var(--color-darkish, rgba(23, 23, 26, 0.5)) !important;
}
.board-api-documentation .api-content table .directory-header th,
.board-api-documentation .api-content .api-table .directory-header th,
.board-api-documentation .api-content .project-structure .directory-header th {
  padding-top: 2em;
}
.board-api-documentation .api-content table .directory-header:first-child th,
.board-api-documentation .api-content .api-table .directory-header:first-child th,
.board-api-documentation .api-content .project-structure .directory-header:first-child th {
  border-top: none;
}
.board-api-documentation .api-content table strong,
.board-api-documentation .api-content .api-table strong,
.board-api-documentation .api-content .project-structure strong {
  color: white;
}
.board-api-documentation .api-content table code,
.board-api-documentation .api-content .api-table code,
.board-api-documentation .api-content .project-structure code {
  background: var(--color-dark, rgb(23, 23, 25));
  color: var(--color-light, #f3e9e8);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius, 5px);
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 15px;
  border: 1px solid var(--color-darkish, rgba(23, 23, 26, 0.5));
}
.board-api-documentation .api-content .file-type {
  white-space: nowrap;
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  font-size: 0.85em;
  font-weight: var(--font-demi, 500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid;
}
.board-api-documentation .api-content .file-type.entry {
  border-color: rgba(46, 139, 255, 0.3);
  color: var(--color-blue, #2E8BFF);
}
.board-api-documentation .api-content .file-type.compiled {
  border-color: rgba(253, 128, 35, 0.3);
  color: var(--color-orange, #fd8023);
}
.board-api-documentation .api-content .file-type.source {
  border-color: rgba(160, 110, 243, 0.3);
  color: var(--color-purple, #A06EF3);
}
.board-api-documentation .api-content .file-type.docs {
  border-color: rgba(30, 186, 118, 0.3);
  color: var(--color-green, #1eba76);
}
.board-api-documentation .api-content .file-type.core {
  border-color: rgba(255, 190, 97, 0.3);
  color: var(--color-yellow, #ffbe61);
}
.board-api-documentation .api-content .file-type.coordinator {
  border-color: rgba(233, 117, 72, 0.3);
  color: var(--color-red, #E97548);
}
.board-api-documentation .api-content .file-type.ui {
  border-color: rgba(30, 186, 118, 0.3);
  color: var(--color-green, #1eba76);
}
.board-api-documentation .api-content .file-type.ui-manager {
  border-color: rgba(46, 139, 255, 0.3);
  color: var(--color-blue, #2E8BFF);
}
.board-api-documentation .api-content .file-type.ui-component {
  border-color: rgba(30, 186, 118, 0.3);
  color: var(--color-green, #1eba76);
}
.board-api-documentation .api-content .file-type.ui-effect {
  border-color: rgba(160, 110, 243, 0.3);
  color: var(--color-purple, #A06EF3);
}
.board-api-documentation .api-content .file-type.input {
  border-color: rgba(255, 190, 97, 0.3);
  color: var(--color-yellow, #ffbe61);
}
.board-api-documentation .api-content .file-type.input-feature {
  border-color: rgba(253, 128, 35, 0.3);
  color: var(--color-orange, #fd8023);
}
.board-api-documentation .api-content .file-type.feature {
  border-color: rgba(233, 117, 72, 0.3);
  color: var(--color-red, #E97548);
}
.board-api-documentation .api-content .file-type.ai {
  border-color: rgba(160, 110, 243, 0.3);
  color: var(--color-purple, #A06EF3);
}
.board-api-documentation .api-content .file-type.audio {
  border-color: rgba(253, 128, 35, 0.3);
  color: var(--color-orange, #fd8023);
}
.board-api-documentation .api-content .file-type.network {
  border-color: rgba(46, 139, 255, 0.3);
  color: var(--color-blue, #2E8BFF);
}
.board-api-documentation .api-content .file-type.utility {
  border-color: rgba(228, 228, 228, 0.3);
  color: var(--color-grey, #E4E4E4);
}
.board-api-documentation .api-content .file-type.worker {
  border-color: rgba(240, 79, 49, 0.3);
  color: var(--color-red-bg, #f04f31);
}
.board-api-documentation .api-content [class^=emitter-] {
  white-space: nowrap;
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  font-size: 0.85em;
  font-weight: var(--font-demi, 500);
  text-transform: none;
  letter-spacing: 0.02em;
  border: 2px solid;
}
.board-api-documentation .api-content .emitter-game {
  border-color: rgba(46, 139, 255, 0.3);
  color: var(--color-blue, #2E8BFF);
}
.board-api-documentation .api-content .emitter-chess-engine {
  border-color: rgba(255, 190, 97, 0.3);
  color: var(--color-yellow, #ffbe61);
}
.board-api-documentation .api-content .emitter-game-state {
  border-color: rgba(30, 186, 118, 0.3);
  color: var(--color-green, #1eba76);
}
.board-api-documentation .api-content .emitter-game-state-machine {
  border-color: rgba(160, 110, 243, 0.3);
  color: var(--color-purple, #A06EF3);
}
.board-api-documentation .api-content .emitter-ui {
  border-color: rgba(253, 128, 35, 0.3);
  color: var(--color-orange, #fd8023);
}
.board-api-documentation .api-content .emitter-input {
  border-color: rgba(233, 117, 72, 0.3);
  color: var(--color-red, #E97548);
}
.board-api-documentation .api-content .emitter-dialog-controller {
  border-color: rgba(255, 99, 132, 0.3);
  color: #ff6384;
}
.board-api-documentation .api-content .emitter-move-animator {
  border-color: rgba(75, 192, 192, 0.3);
  color: #4bc0c0;
}
.board-api-documentation .api-content .emitter-premove-manager {
  border-color: rgba(153, 102, 255, 0.3);
  color: #9966ff;
}
.board-api-documentation .api-content .emitter-chess-clock {
  border-color: rgba(255, 159, 64, 0.3);
  color: #ff9f40;
}
.board-api-documentation .api-content .emitter-game-mode-coordinator {
  border-color: rgba(54, 162, 235, 0.3);
  color: #36a2eb;
}
.board-api-documentation .api-content .emitter-stockfish-engine {
  border-color: rgba(240, 79, 49, 0.3);
  color: var(--color-red-bg, #f04f31);
}
.board-api-documentation .api-content .size-bar {
  display: block;
  margin-top: 1.25em;
  margin-left: 0.5em;
  font-size: 0.5em;
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0.9;
}
.board-api-documentation .api-content .size-tiny,
.board-api-documentation .api-content .size-good,
.board-api-documentation .api-content .size-medium,
.board-api-documentation .api-content .size-large,
.board-api-documentation .api-content .size-huge,
.board-api-documentation .api-content .size-critical {
  color: rgba(255, 255, 255, 0.3);
  display: inline-block;
  line-height: 1.3;
  font-size: 12px;
}
.board-api-documentation .api-content .size-tiny .size-bar {
  color: #00ff00;
}
.board-api-documentation .api-content .size-good .size-bar {
  color: var(--color-green, #1eba76);
}
.board-api-documentation .api-content .size-medium .size-bar {
  color: var(--color-yellow, #ffbe61);
}
.board-api-documentation .api-content .size-large .size-bar {
  color: #ff8c00;
}
.board-api-documentation .api-content .size-huge .size-bar {
  color: #7A66F4;
}
.board-api-documentation .api-content .size-critical .size-bar {
  color: #ff0000;
}
.board-api-documentation .api-content .empty-dots {
  opacity: 0.3;
}
.board-api-documentation .api-content .api-assessment {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.board-api-documentation .api-content .api-assessment td {
  background: rgba(255, 193, 7, 0.1);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: 1.5em;
  color: rgba(255, 193, 7, 0.9);
  padding-left: 3.5em !important;
  position: relative;
}
.board-api-documentation .api-content .api-assessment:hover td {
  background: rgba(255, 193, 7, 0.15);
}
.board-api-documentation .api-content .api-assessment strong {
  color: rgb(255, 193, 7);
}
.board-api-documentation .api-content .api-assessment .assessment-toggle {
  transition: transform 0.125s ease, opacity 0.3s ease;
  transform-origin: center;
  display: inline-block;
  font-size: 2em;
  width: 2em;
  height: 2em;
  color: rgb(255, 193, 7);
  position: absolute;
  left: 0em;
  top: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-api-documentation .api-content .api-assessment .assessment-toggle:after {
  position: relative;
  top: -0.1em;
  content: "›";
}
.board-api-documentation .api-content .api-assessment .assessment-details {
  display: none;
  margin-top: 1em;
  line-height: 1.6;
}
.board-api-documentation .api-content .api-assessment.expanded .assessment-toggle {
  transform: rotate(90deg);
}
.board-api-documentation .api-content .api-assessment.expanded .assessment-details {
  display: block;
}
.board-api-documentation .api-footer {
  padding: 40px;
  border-top: 1px solid var(--color-mid);
  text-align: center;
}
.board-api-documentation .api-footer p {
  color: var(--color-lighter);
  font-size: 14px;
  margin: 5px 0;
}
@media (max-width: 768px) {
  .board-api-documentation .api-content {
    padding: 20px;
  }
  .board-api-documentation .api-content .project-structure {
    font-size: var(--font-mobile-micro, 11px);
  }
  .board-api-documentation .api-content .project-structure th,
  .board-api-documentation .api-content .project-structure td {
    padding: 8px 12px;
  }
  .board-api-documentation .api-content .file-type {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
  }
  .board-api-documentation .api-header {
    padding: 15px 20px;
  }
  .board-api-documentation .api-header h1 {
    font-size: 20px;
  }
}

.body-changelog {
  background: var(--color-darker);
  color: var(--color-light);
  min-height: 100vh;
}

#changelog-page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

#changelog-page header.changelog-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  min-height: 44px;
}
#changelog-page header.changelog-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-light);
}
#changelog-page header.changelog-header a.changelog-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--color-light);
  text-decoration: none;
  transition: background 0.15s ease;
}
#changelog-page header.changelog-header a.changelog-back svg {
  width: 16px;
  height: 16px;
  display: block;
}
#changelog-page header.changelog-header a.changelog-back:hover, #changelog-page header.changelog-header a.changelog-back:focus-visible {
  background: var(--color-bglight);
  outline: none;
}

.changelog-stats {
  display: block;
  margin-bottom: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--color-softlight);
  border-bottom: 1px solid var(--color-softlight);
}
.changelog-stats dl {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 24px;
}
.changelog-stats dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-lighten);
  margin-bottom: 4px;
}
.changelog-stats dd {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-light);
}
.changelog-stats dd .muted {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-lightish);
  margin-left: 4px;
  letter-spacing: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.changelog {
  display: block;
}

.changelog-entry {
  padding: 24px 0;
  border-bottom: 1px solid var(--color-softlight);
}
.changelog-entry:first-child {
  padding-top: 0;
}
.changelog-entry:last-child {
  border-bottom: none;
}

.changelog-title {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--color-light);
}
.changelog-title .changelog-version {
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 500;
  color: var(--color-lightish);
  margin-left: 6px;
}

.changelog-meta {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-lightish);
  margin: 4px 0 14px;
  letter-spacing: 0.02em;
}

.changelog-section {
  margin: 14px 0 0;
}
.changelog-section .changelog-section-name {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-lighten);
  margin: 8px 0 4px;
}
.changelog-section .changelog-section-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-lightish);
  letter-spacing: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.changelog-section ul {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-lighten);
}
.changelog-section li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-bglight);
  text-wrap: balance;
}
.changelog-section li:last-child {
  border-bottom: none;
}
.changelog-section li code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--color-bglight);
  color: var(--color-light);
}
.changelog-section .changelog-date {
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--color-lightish);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.changelog-section .changelog-msg {
  color: var(--color-lighten);
  text-transform: none;
}
.changelog-section .changelog-hash {
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--color-lightish);
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
  opacity: 0.6;
}

.changelog-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--color-lightish);
  font-size: 14px;
}

.changelog-overflow {
  margin: 6px 0 0;
  padding-left: 68px;
  font-size: 12px;
  color: var(--color-lightish);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

.changelog-rollups {
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--color-softlight);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.changelog-rollup-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--color-bglight);
  color: var(--color-lightish);
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0;
  text-transform: none;
}

.captured-pieces {
  white-space: nowrap;
  opacity: 0.2;
  display: flex;
  min-height: 20px;
  width: 100%;
  justify-content: center;
}
.captured-pieces .piece-group {
  height: 20px;
}
.captured-pieces div {
  display: flex;
}
.captured-pieces .R:not(.active) + .R,
.captured-pieces .r:not(.active) + .r,
.captured-pieces .B:not(.active) + .B,
.captured-pieces .b:not(.active) + .b,
.captured-pieces .N:not(.active) + .N,
.captured-pieces .n:not(.active) + .n,
.captured-pieces .P:not(.active) + .P,
.captured-pieces .p:not(.active) + .p {
  margin-left: -10px;
}
.captured-pieces .captured,
.captured-pieces .active {
  display: none;
  width: 0;
}
.captured-pieces span {
  transition: all 0.25s linear 0s;
  filter: drop-shadow(-1px 0px 1px rgb(23, 23, 26));
  height: 20px;
  width: 20px;
  display: inline-block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.captured-pieces span.P {
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
}
.captured-pieces span.N {
  background-image: url("/_img/chesspieces/sctheme-b/wN.png");
}
.captured-pieces span.B {
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
}
.captured-pieces span.R {
  background-image: url("/_img/chesspieces/sctheme-b/wR.png");
}
.captured-pieces span.Q {
  background-image: url("/_img/chesspieces/sctheme-b/wQ.png");
}
.captured-pieces span.p {
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}
.captured-pieces span.n {
  background-image: url("/_img/chesspieces/sctheme-b/bN.png");
}
.captured-pieces span.b {
  background-image: url("/_img/chesspieces/sctheme-b/bB.png");
}
.captured-pieces span.r {
  background-image: url("/_img/chesspieces/sctheme-b/bR.png");
}
.captured-pieces span.q {
  background-image: url("/_img/chesspieces/sctheme-b/bQ.png");
}

@keyframes move-in {
  0% {
    min-height: 0;
    opacity: 1;
  }
  20% {
    min-height: 8.75vmin;
    opacity: 1;
  }
  100% {
    min-height: 8.75vmin;
    opacity: 0.15;
  }
}
@keyframes move-in-2 {
  0% {
    min-width: 0;
    opacity: 1;
  }
  20% {
    min-width: 12.5vmin;
    opacity: 1;
  }
  100% {
    min-width: 12.5vmin;
    opacity: 0.15;
  }
}
@keyframes move-out {
  0% {
    min-height: 8.75vmin;
    opacity: 0.15;
  }
  100% {
    min-height: 0;
    opacity: 0;
  }
}
@keyframes move-out-2 {
  100% {
    min-width: 12.5vmin;
    opacity: 0.15;
  }
  0% {
    min-width: 0;
    opacity: 0;
  }
}
@keyframes move-still-in {
  0% {
    min-height: 8.75vmin;
    opacity: 0.15;
  }
  50% {
    min-height: 8.75vmin;
    opacity: 1;
  }
  100% {
    min-height: 8.75vmin;
    opacity: 0.15;
  }
}
.move-history-wrap:after {
  pointer-events: none;
  content: "";
  position: absolute;
  z-index: 1000;
  background-repeat: no-repeat !important;
}
@media only screen and (orientation: landscape) {
  .move-history-wrap:after {
    width: 100%;
    height: 50%;
  }
}
@media only screen and (orientation: portrait) {
  .move-history-wrap:after {
    width: 20%;
    height: 100%;
  }
}
@media only screen and (orientation: landscape) {
  .move-history-wrap.left:after {
    top: 0;
    background: linear-gradient(180deg, rgb(23, 23, 26) 0%, rgba(23, 23, 26, 0) 100%);
  }
}
@media only screen and (orientation: portrait) {
  .move-history-wrap.left:after {
    right: 0;
    background: linear-gradient(-90deg, rgb(23, 23, 26) 0%, rgba(23, 23, 26, 0) 100%);
  }
}
@media only screen and (orientation: landscape) {
  .move-history-wrap.right:after {
    bottom: 0;
    background: linear-gradient(0deg, rgb(23, 23, 26) 0%, rgba(23, 23, 26, 0) 100%);
  }
}
@media only screen and (orientation: portrait) {
  .move-history-wrap.right:after {
    left: 0;
    background: linear-gradient(90deg, rgb(23, 23, 26) 0%, rgba(23, 23, 26, 0) 100%);
  }
}

.move-history {
  pointer-events: none;
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  border-collapse: collapse;
  font-size: 20px;
  line-height: 20px;
  overflow: scroll;
  min-width: 70px;
  text-align: center;
  container-type: size;
  position: absolute;
}
@media only screen and (orientation: portrait) {
  .move-history {
    width: 62.5vmin;
    width: 100vmin;
    height: 11vmin;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
}
@media only screen and (orientation: landscape) {
  .move-history {
    height: 70vmin;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
}
.move-history.left {
  text-align: center;
  justify-content: flex-end;
}
.move-history.left .piece-symbol {
  display: block;
}
@media only screen and (orientation: landscape) {
  .move-history.left {
    flex-direction: column;
    right: 100%;
  }
}
@media only screen and (orientation: portrait) {
  .move-history.left {
    justify-content: flex-start;
    order: 2;
    top: 100%;
  }
}
.move-history.right {
  text-align: center;
  justify-content: flex-end;
  flex-direction: column-reverse;
}
.move-history.right .piece-symbol {
  display: block;
}
@media only screen and (orientation: landscape) {
  .move-history.right {
    left: 100%;
  }
}
@media only screen and (orientation: portrait) {
  .move-history.right {
    align-items: flex-end;
    flex-direction: row;
    order: -2;
    bottom: 100%;
  }
}
.move-history #move-history-table {
  flex: 1;
}
.move-history li.still {
  animation-name: move-still-in !important;
}
.move-history li {
  animation-fill-mode: forwards;
  animation-duration: 1s;
  overflow: hidden;
  margin: 0;
  font-weight: 800;
  display: flex;
  justify-content: center;
  counter-increment: move;
  flex-direction: column;
  align-items: center;
}
.move-history li:hover {
  opacity: 1;
}
@media only screen and (orientation: landscape) {
  .move-history li {
    animation-name: move-in;
  }
  .move-history li.removing, .move-history li.exiting {
    animation-duration: 0.2s;
    animation-name: move-out;
  }
  .move-history li {
    height: 0;
  }
}
@media only screen and (orientation: portrait) {
  .move-history li {
    animation-name: move-in-2;
  }
  .move-history li.removing, .move-history li.exiting {
    animation-duration: 0.2s;
    animation-name: move-out-2;
  }
  .move-history li {
    width: 0;
    height: 60px;
  }
}
@media only screen and (orientation: landscape) {
  .move-history li {
    width: 100%;
  }
}
@media only screen and (orientation: portrait) {
  .move-history li {
    min-width: 30px;
  }
}
.move-history span {
  vertical-align: middle;
  display: inline-block;
  color: var(--color-light);
}
.move-history .move-text {
  font-weight: 700;
  font-size: 13px;
}
.move-history .piece,
.move-history .piece-symbol {
  margin-top: 10px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  height: 30px;
  width: 30px;
  position: relative;
  display: inline-block;
}
.move-history .piece .inner,
.move-history .piece-symbol .inner {
  font-weight: 130;
}
.move-history [data-symbol=wp] {
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
}
.move-history [data-symbol=wn] {
  background-image: url("/_img/chesspieces/sctheme-b/wN.png");
  margin-left: -3px;
}
.move-history [data-symbol=wb] {
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
}
.move-history [data-symbol=wr] {
  background-image: url("/_img/chesspieces/sctheme-b/wR.png");
}
.move-history [data-symbol=wq] {
  background-image: url("/_img/chesspieces/sctheme-b/wQ.png");
}
.move-history [data-symbol=wk] {
  background-image: url("/_img/chesspieces/sctheme-b/wK.png");
}
.move-history [data-symbol=bp] {
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}
.move-history [data-symbol=bn] {
  background-image: url("/_img/chesspieces/sctheme-b/bN.png");
  margin-left: -3px;
}
.move-history [data-symbol=bb] {
  background-image: url("/_img/chesspieces/sctheme-b/bB.png");
}
.move-history [data-symbol=br] {
  background-image: url("/_img/chesspieces/sctheme-b/bR.png");
}
.move-history [data-symbol=bq] {
  background-image: url("/_img/chesspieces/sctheme-b/bQ.png");
}
.move-history [data-symbol=bk] {
  background-image: url("/_img/chesspieces/sctheme-b/bK.png");
}

/* ===============================================
   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: "✓";
}

.performance-profiler {
  position: fixed;
  bottom: 10px;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  background: var(--color-darker);
  color: var(--color-lighten);
  font-variant-numeric: tabular-nums;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  padding: 5px 10px;
  z-index: 10000;
  display: flex;
  gap: 10px;
}
.performance-profiler span[data-path=fps], .performance-profiler span[data-path=frametime] {
  flex: 0 0 auto;
  margin-right: 4px;
}
.performance-profiler span[data-path=topfunc] {
  flex: 1 1 auto;
  text-align: right;
  margin-left: 12px;
}
.performance-profiler span[data-path=topbudget] {
  flex: 0 0 auto;
  text-align: right;
  min-width: 50px;
}
.performance-profiler span.performance-profiler__metrics-value--good {
  color: var(--color-success, #22c55e);
}
.performance-profiler span.performance-profiler__metrics-value--warning {
  color: var(--color-warning, #f59e0b);
}
.performance-profiler span.performance-profiler__metrics-value--critical {
  color: var(--color-error, #ef4444);
}
.performance-profiler span {
  transition: color 0.3s ease;
}
.performance-profiler__loading {
  color: var(--color-lighten);
  opacity: 0.6;
  font-style: italic;
}
.performance-profiler.hidden {
  display: none;
}
.performance-profiler.loading {
  justify-content: center;
}

#reviews-timer {
  background: rgba(243, 233, 232, 0.05);
  height: 1px;
}
#reviews-timer span.notrans {
  transition: all 0s ease-in-out 0s;
}
#reviews-timer span {
  transition: all 0.5s ease-in-out 0s;
  display: block;
  height: 1px;
  background: white;
}

#reviews {
  position: relative;
  padding: 10vmax 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  max-width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: X mandatory;
  background: transparent;
}
#reviews > div {
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  display: block;
  margin: auto;
  display: inline-block;
  scroll-snap-align: center;
  text-align: center;
  counter-increment: review;
}
#reviews > div cite {
  margin-bottom: 0;
}
#reviews > div q + cite {
  margin-top: 35px;
}
#reviews > div cite {
  font-style: normal;
}
#reviews > div cite:before {
  display: block;
  height: 32px;
  width: 32px;
  line-height: 32px;
  margin-right: 6px;
  float: left;
  text-align: center;
  content: counter(review) "/6 ";
  display: none;
}
#reviews > div cite {
  display: inline-block;
  margin: auto;
  white-space: nowrap;
  text-align: left;
  border-left: none;
  padding-left: 0;
}
#reviews > div q {
  margin-left: auto;
  margin-right: auto;
  display: block;
  line-height: 1.3;
  font-size: inherit;
  padding: 0;
  -webkit-hyphens: auto;
          hyphens: auto;
}
#reviews > div blockquote {
  white-space: normal;
  background: rgba(0, 0, 0, 0.5);
  background: #0b0b0d;
  min-width: auto !important;
  display: inline-block;
  width: auto;
  padding: 45px 50px;
  padding-right: 40px;
  padding-bottom: 100px;
  border-radius: 10px;
  text-align: left;
  max-width: 900px !important;
  font-size: 32px;
  text-wrap: balance;
  min-height: 10em;
}
#reviews > div blockquote q {
  text-align: left;
  -webkit-hyphens: none;
          hyphens: none;
}
#reviews > div blockquote cite {
  font-size: 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 45px 50px;
}
@media only screen and (max-width: 667px) {
  #reviews > div blockquote cite {
    padding: 35px 40px;
  }
}
@media only screen and (max-width: 1000px) {
  #reviews > div blockquote {
    padding: 35px 40px;
    font-size: 28px;
    max-width: 500px !important;
  }
}
@media only screen and (max-width: 666px) {
  #reviews > div blockquote {
    padding: 25px 30px;
    font-size: 20px;
  }
}
@media only screen and (min-width: 1000px) {
  #reviews > div:first-child {
    margin-left: calc(50vw - 500px + 5vmin);
  }
  #reviews > div:last-child {
    margin-right: calc(50vw - 450px);
  }
}
@media only screen and (max-width: 667px) {
  #reviews {
    padding: 7.5vmax 5vmin;
  }
}

#quotes {
  position: relative;
  padding: 10vmax 10vmin;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  max-width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: X mandatory;
  background: transparent;
}
#quotes > div cite {
  margin-bottom: 0;
}
#quotes > div q + cite {
  margin-top: 35px;
}
#quotes > div {
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  display: block;
  margin: auto;
  display: inline-block;
  scroll-snap-align: center;
  text-align: center;
  counter-increment: review;
}
#quotes > div cite {
  font-style: normal;
}
#quotes > div cite:before {
  display: block;
  height: 32px;
  width: 32px;
  line-height: 32px;
  margin-right: 6px;
  float: left;
  text-align: center;
  content: counter(review) "/6 ";
  display: none;
}
#quotes > div cite {
  display: inline-block;
  margin: auto;
  white-space: nowrap;
  text-align: left;
  border-left: none;
  padding-left: 0;
}
#quotes > div blockquote {
  white-space: normal;
  background: rgba(0, 0, 0, 0.5);
  background: #0b0b0d;
  min-width: auto !important;
  display: inline-block;
  width: auto;
  padding: 45px 50px;
  padding-bottom: 100px !important;
  padding-right: 40px;
  border-radius: 10px;
  text-align: left;
  font-size: clamp(20px, 5.5vw, 40px) !important;
  max-width: 840px;
  min-height: 13em;
}
#quotes > div blockquote q {
  text-align: left;
  -webkit-hyphens: none;
          hyphens: none;
}
#quotes > div blockquote cite {
  opacity: 0.2;
  font-size: 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 45px 50px;
}
@media only screen and (max-width: 667px) {
  #quotes > div blockquote cite {
    padding: 35px 40px;
  }
}
@media only screen and (max-width: 667px) {
  #quotes > div blockquote {
    padding: 25px 30px;
  }
}
#quotes > div q {
  margin-left: auto;
  margin-right: auto;
  display: block;
  line-height: 1.3;
  font-size: inherit;
  padding: 0;
  -webkit-hyphens: auto;
          hyphens: auto;
}
@media only screen and (max-width: 667px) {
  #quotes {
    padding: 7.5vmax 5vmin;
  }
}

.deck-overview {
  position: relative;
  font-size: 0;
  margin: auto;
  max-width: 100%;
  display: flex;
}
.deck-overview .buy-button {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px;
  margin: 0;
  z-index: 100;
  line-height: 1;
  display: inline-block;
}
.deck-overview .buy-button b {
  text-transform: uppercase;
  font-style: normal;
  text-shadow: none;
  font-size: 12px;
  box-shadow: 0 0 40px rgba(243, 233, 232, 0.125);
  font-weight: 900;
  border-radius: 3px;
  padding: 0.6em 0.7em;
  padding-bottom: 0.45em;
  background: var(--color-dark);
  color: var(--color-light);
  display: inline-block;
}
.deck-overview .buy-button b span {
  font-weight: normal;
}
@media (hover: hover) {
  .deck-overview .buy-button:hover b {
    background: var(--color-light);
    color: var(--color-dark);
  }
}
.promotion .deck-overview:last-child {
  margin-bottom: 0vmin;
}
.deck-overview:last-child {
  margin-bottom: 10vmin;
}
.deck-overview figure + figure {
  background: rgba(0, 0, 0, 0.5);
}
@media only screen and (max-width: 601px) {
  .deck-overview figure + figure {
    max-height: 175px;
    overflow: hidden;
  }
}
.deck-overview > *,
.deck-overview figure {
  overflow: hidden;
  border-radius: 10px;
  display: inline-block;
  width: calc(49% - 0px);
  width: 50%;
  position: relative;
  counter-increment: fundamentals;
}
.deck-overview > * img + img,
.deck-overview figure img + img {
  position: absolute;
  top: 0;
  left: 0;
}
.deck-overview > *.text-square,
.deck-overview figure.text-square {
  max-height: 100% !important;
  background: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  color: var(--color-light);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.deck-overview > *.text-square button.copy,
.deck-overview figure.text-square button.copy {
  background: transparent;
  border: none;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url("/_img/howlin/link.png");
  background-size: 13px;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.25;
}
.deck-overview > *.text-square button.copy.flash,
.deck-overview figure.text-square button.copy.flash {
  background-image: url("/_img/howlin/check.png");
  opacity: 1;
}
.deck-overview > *.text-square button.copy:hover,
.deck-overview figure.text-square button.copy:hover {
  opacity: 1;
}
.deck-overview > *.text-square time,
.deck-overview figure.text-square time {
  text-transform: uppercase;
  text-align: left;
  order: 0;
  margin-bottom: auto;
  opacity: 0.5;
  margin-top: -1em;
}
.deck-overview > *.text-square > a,
.deck-overview figure.text-square > a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (max-width: 800px) {
  .deck-overview > *.text-square > a,
  .deck-overview figure.text-square > a {
    padding: 6.5vmin 6.5vmin;
  }
}
@media only screen and (min-width: 801px) {
  .deck-overview > *.text-square > a,
  .deck-overview figure.text-square > a {
    padding: 40px 45px;
  }
}
.deck-overview > *.text-square h2,
.deck-overview > *.text-square > a > b,
.deck-overview > *.text-square > b,
.deck-overview figure.text-square h2,
.deck-overview figure.text-square > a > b,
.deck-overview figure.text-square > b {
  top: 0px;
  left: 0px;
  text-align: left;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  font-size: 44px;
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1;
  display: block;
  font-weight: 900;
  font-weight: 700;
  text-transform: none;
  text-transform: uppercase;
  order: -1;
  margin-bottom: 0.25em;
  margin-bottom: 0.5em;
}
.deck-overview > *.text-square h2 img,
.deck-overview > *.text-square > a > b img,
.deck-overview > *.text-square > b img,
.deck-overview figure.text-square h2 img,
.deck-overview figure.text-square > a > b img,
.deck-overview figure.text-square > b img {
  margin-left: 0.25em;
  margin-top: -0.2em;
  height: 0.7em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.deck-overview > *.text-square h2 i,
.deck-overview > *.text-square > a > b i,
.deck-overview > *.text-square > b i,
.deck-overview figure.text-square h2 i,
.deck-overview figure.text-square > a > b i,
.deck-overview figure.text-square > b i {
  font-weight: 100;
  font-style: normal !important;
  border: 1.75px solid rgb(243, 233, 232);
  color: var(--color-light);
  font-size: 45%;
  padding: 0.35em;
  padding-bottom: 0.2em;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  margin-top: 0.1em;
  letter-spacing: 0;
}
@media only screen and (max-width: 600px) {
  .deck-overview > *.text-square h2 i,
  .deck-overview > *.text-square > a > b i,
  .deck-overview > *.text-square > b i,
  .deck-overview figure.text-square h2 i,
  .deck-overview figure.text-square > a > b i,
  .deck-overview figure.text-square > b i {
    border: 1px solid rgb(243, 233, 232);
    padding-bottom: 0.2em;
    margin-top: 0.15em;
    font-size: 42%;
  }
}
.deck-overview > *.text-square h2,
.deck-overview figure.text-square h2 {
  margin-bottom: 0;
}
.deck-overview > *.text-square p,
.deck-overview figure.text-square p {
  bottom: 0px;
  margin: 0;
  left: 0px;
  padding: 0;
  text-align: left;
  font-weight: 300;
  font-size: 16px;
  font-size: clamp(14px, 3vw, 18px) !important;
  line-height: 1.64;
  line-height: 1.5;
  list-style: none;
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-line-clamp: 20;
}
.deck-overview > *.text-square p .objective,
.deck-overview figure.text-square p .objective {
  display: block;
  opacity: 0.5;
  margin-top: 1em;
}
.deck-overview > *.text-square p b,
.deck-overview figure.text-square p b {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.065em;
}
.deck-overview > *.text-square p a,
.deck-overview figure.text-square p a {
  text-decoration: underline;
}
.deck-overview > *.text-square p li:not(:first-child),
.deck-overview figure.text-square p li:not(:first-child) {
  border-top: 1px solid rgba(243, 233, 232, 0.05);
}
@media only screen and (max-width: 1000px) {
  .deck-overview > *.text-square p,
  .deck-overview figure.text-square p {
    top: 0px;
    bottom: auto;
  }
}
.deck-overview > *.text-square .stats,
.deck-overview figure.text-square .stats {
  text-align: left;
  text-transform: uppercase;
  background: none !important;
  display: block !important;
  padding: 0;
  margin: 0;
  margin-top: 10px;
  list-style: none;
  margin-bottom: auto;
}
.deck-overview > *.text-square .stats li,
.deck-overview figure.text-square .stats li {
  display: inline-block;
  vertical-align: middle;
  border: none;
  padding: 0;
  line-height: 1.3;
  font-size: 12px;
  font-weight: 400;
  margin-right: 0.55em;
  padding-right: 0.55em;
  padding-bottom: 1em;
}
.deck-overview > *.text-square .stats li b,
.deck-overview figure.text-square .stats li b {
  font-weight: 900;
}
@media only screen and (max-width: 800px) {
  .deck-overview > *.text-square .stats li,
  .deck-overview figure.text-square .stats li {
    font-size: 11px;
  }
}
@media only screen and (max-width: 800px) {
  .deck-overview > *.text-square,
  .deck-overview figure.text-square {
    padding: 6.5vmin 6.5vmin;
  }
}
@media only screen and (min-width: 801px) {
  .deck-overview > *.text-square,
  .deck-overview figure.text-square {
    padding: 40px 45px;
  }
}
.deck-overview > *.text-only,
.deck-overview figure.text-only {
  background: rgba(33, 32, 34, 0.5);
}
.deck-overview > *.text-only figcaption,
.deck-overview figure.text-only figcaption {
  padding: 40px 45px;
  width: 100%;
  height: 100%;
  white-space: normal;
  font-size: 52px;
  line-height: 1.25;
  background: none;
}
.deck-overview > *.text-only figcaption:after,
.deck-overview figure.text-only figcaption:after {
  display: none;
}
.deck-overview > *.text-only figcaption b,
.deck-overview figure.text-only figcaption b {
  display: block;
  font-weight: 900;
}
.deck-overview > *.text-only figcaption small,
.deck-overview figure.text-only figcaption small {
  width: 100%;
  padding: 40px;
  display: block;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.7;
  position: absolute;
  bottom: 0;
  left: 0;
}
.deck-overview > *.text-only img,
.deck-overview figure.text-only img {
  opacity: 0;
}
.deck-overview > * figcaption.credit,
.deck-overview figure figcaption.credit {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  text-shadow: 0 0 2px var(--color-dark);
}
.deck-overview > * figcaption,
.deck-overview figure figcaption {
  font-style: normal;
  pointer-events: none;
  display: inline-block;
  position: absolute;
  bottom: 0;
  z-index: 100;
  font-size: 12px;
  width: auto;
  left: 0;
  right: 0;
  padding: 1em 1.25em;
  letter-spacing: 0.035em;
  text-align: right;
  opacity: 0.75;
  padding-top: 10em;
  text-shadow: 0 0 2px var(--color-dark), 0 0 4px var(--color-dark), 0 0 6px var(--color-dark);
}
.deck-overview > * figcaption:after,
.deck-overview figure figcaption:after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: -1;
  opacity: 0.8;
  background-image: linear-gradient(rgba(23, 23, 26, 0) 0%, rgba(23, 23, 26, 0.6) 100%);
}
@media only screen and (max-width: 1000px) {
  .deck-overview > *,
  .deck-overview figure {
    width: 100%;
  }
}
@media (hover: hover) {
  .deck-overview > *:hover img + img,
  .deck-overview figure:hover img + img {
    opacity: 0;
  }
}
.deck-overview img {
  width: 100%;
}
@media only screen and (max-width: 1000px) {
  .deck-overview {
    flex-direction: column;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .deck-overview img {
    cursor: zoom-in;
  }
  .deck-overview img:hover {
    opacity: 0.9;
  }
  .deck-overview.full img {
    display: none;
  }
  .deck-overview.full img.focus {
    display: inline-block;
    width: calc(100% - 10px);
    margin: 5px;
    cursor: zoom-out;
  }
}
@media only screen and (min-width: 601px) {
  .deck-overview {
    max-width: 1000px;
  }
}
@media only screen and (max-width: 1000px) {
  .deck-overview {
    max-width: 600px !important;
    margin: auto;
  }
}
@media only screen and (min-width: 1024px) {
  .deck-overview {
    max-width: 1200px;
  }
}

main + #promotions {
  padding-top: 5vw;
}

.promotions-indicator {
  text-align: center;
  line-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: stretch;
  background: transparent !important;
}
.promotions-indicator button {
  background: none;
  border: none;
  display: inline-block;
  vertical-align: middle;
  height: 47px;
  width: 47px;
  border-radius: 50%;
  font-size: 16px;
  opacity: 0.25;
  margin: 0 -0.27em;
}
.promotions-indicator button:hover {
  opacity: 1;
}
.promotions-indicator ul {
  list-style: none;
  padding: 0px 0px;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  display: flex;
}
.promotions-indicator ul * + * {
  margin-left: 12px;
}
.promotions-indicator ul * {
  transition: all 0.35s ease-in-out 0s;
  margin: 0;
  display: inline-block;
  text-transform: uppercase;
  line-height: 1.2;
  font-size: 10px;
  letter-spacing: 0.1em;
  overflow: hidden;
  opacity: 0.25;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.promotions-indicator ul *:before {
  margin: 0 10px;
  content: "";
  display: inline-block;
  background: var(--color-light);
  height: 4px;
  width: 4px;
  border-radius: 50%;
}
.promotions-indicator ul *:hover, .promotions-indicator ul *.active {
  opacity: 1;
  transition: all 0s ease-in-out 0s;
}
@media only screen and (max-width: 900px) {
  .promotions-indicator {
    margin-top: -2.5vmin !important;
  }
}
@media only screen and (min-width: 900px) {
  .promotions-indicator {
    margin-top: -20px !important;
  }
}
@media only screen and (max-width: 900px) {
  .promotions-indicator {
    display: none;
  }
}

#golden-rules .promotion + .promotion {
  margin-top: 50px;
}

.claim {
  padding: 10vmin;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.claim h2 {
  text-align: center;
  margin-bottom: -6px;
  font-size: 7vmax;
  line-height: 0.85 !important;
  font-weight: 100;
  letter-spacing: 0;
}

#board960 {
  margin: 0;
}

#num960 {
  display: block;
  text-align: center;
  opacity: 0.2;
  margin-bottom: 10px;
}

.promotions,
#promotions {
  font-size: 0;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
}
.promotions .promotion,
#promotions .promotion {
  white-space: normal;
  display: inline-block;
  min-width: 90vw;
  text-align: center;
}
.promotions .promotion > *,
#promotions .promotion > * {
  height: 100%;
  scroll-snap-align: center;
  margin: auto !important;
}
@media only screen and (max-width: 1000px) {
  .promotions .promotion,
  #promotions .promotion {
    width: 100%;
    padding: 0px;
    margin-bottom: 2.5vmin !important;
  }
  .promotions .promotion:not(:last-child),
  #promotions .promotion:not(:last-child) {
    margin-bottom: 2.5vmin !important;
  }
}
@media only screen and (min-width: 1001px) {
  .promotions .promotion,
  #promotions .promotion {
    margin-bottom: 20px !important;
  }
  .promotions .promotion:not(:last-child),
  #promotions .promotion:not(:last-child) {
    margin-bottom: 20px !important;
  }
  .promotions .promotion,
  #promotions .promotion {
    min-width: 77.5vw;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
  }
}
@media only screen and (min-width: 1001px) {
  .promotions,
  #promotions {
    padding-left: 5vw;
    padding-right: 5vw;
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: X mandatory;
    scroll-padding-left: 5vw;
    scroll-padding-right: 5vw;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .promotions::-webkit-scrollbar,
  #promotions::-webkit-scrollbar {
    display: none;
  }
  .promotions .promotion:first-child,
  #promotions .promotion:first-child {
    margin-left: 6.25vw;
  }
  .promotions .promotion:last-child,
  #promotions .promotion:last-child {
    margin-right: 6.25vw;
  }
}

@keyframes sc-in {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes sc-out {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}
.mobile-nav {
  overflow: hidden !important;
  overflow-y: hidden !important;
  touch-action: none;
}

#mobile-nav-background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 900000;
  pointer-events: none;
  overflow: hidden;
}

#mobile-nav-background {
  background-color: #1a1a1c;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 900000;
  pointer-events: none;
  transform: translateY(-100%);
  animation-fill-mode: forwards;
  animation-duration: 0.75s;
  background: rgba(26, 26, 29, 0.95);
  background: rgba(26, 26, 29, 0.85);
}
.mobile-in #mobile-nav-background {
  transform: translateY(0%);
  transition: transform 0.35s ease-in-out 0s;
}
.mobile-out #mobile-nav-background {
  transition: transform 0.35s ease-in-out 0s;
  transform: translateY(100%);
}

#compass {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  margin: -15vmin;
  width: 30vmin; /* Adjust as needed */
  height: 30vmin; /* Adjust as needed */
  border-radius: 50%;
  pointer-events: none;
}
#compass:after {
  position: absolute;
  margin: -3px;
  bottom: 0;
  left: 50%;
  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 */
}

#colorChoice {
  perspective: 1000px;
  position: absolute;
  display: flex;
  width: 100vw;
  height: 100%;
  flex-direction: column;
  padding-top: 1.25vh;
  padding-bottom: 1.25vh;
}
#colorChoice .divider {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#colorChoice button {
  background: none;
  border: none;
  text-transform: uppercase;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.1em;
  font-weight: 200;
  font-size: 5vmin;
}
#colorChoice button.active {
  font-weight: 900;
}
#colorChoice button {
  transition: font-weight 0.125s ease-in-out 0s;
}
@media only screen and (max-width: 600px) {
  #colorChoice button {
    font-size: 10vmin;
  }
}

#mobile-nav h2 {
  font-size: 12px;
  color: white;
  position: absolute;
  width: 100%;
  top: 0;
  text-align: center;
  padding: 22px;
}
#mobile-nav ul {
  padding: 0;
}
#mobile-nav {
  pointer-events: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  z-index: 1000000;
  opacity: 0;
  text-transform: uppercase;
  transition: all 0.125s ease-in-out 0s;
  transform: translateY(-20px);
}
.mobile-nav #mobile-nav {
  transition: all 0.25s ease-in-out 0.15s;
  transform: translateY(0px);
  opacity: 1;
  pointer-events: auto;
}
#mobile-nav ul {
  pointer-events: none;
}
#mobile-nav ul:nth-child(1) {
  transition-delay: 0s;
}
#mobile-nav ul:nth-child(2) {
  transition-delay: 0s;
}
#mobile-nav ul:nth-child(3) {
  transition-delay: 0s;
}
#mobile-nav ul:nth-child(4) {
  transition-delay: 0s;
}
.mobile-nav #mobile-nav ul:nth-child(1) {
  transition-delay: 0.05s;
}
.mobile-nav #mobile-nav ul:nth-child(2) {
  transition-delay: 0.1s;
}
.mobile-nav #mobile-nav ul:nth-child(3) {
  transition-delay: 0.15s;
}
.mobile-nav #mobile-nav ul:nth-child(4) {
  transition-delay: 0.2s;
}
.mobile-nav #mobile-nav ul {
  opacity: 1;
  pointer-events: auto;
}

#mobile-nav-directions {
  border-bottom: 2px dotted rgba(243, 233, 232, 0.125);
  margin-bottom: 20px;
  display: none;
}

#mobile-nav-secondary {
  z-index: 1000010;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  text-transform: uppercase;
  font-size: 12px;
  z-index: 100000;
  padding: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 2;
  padding: 4.5vmin !important;
  text-wrap: balance;
}
#mobile-nav-secondary > li {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  padding: 1vmin 1.25vmin;
  margin: 0;
}

#mobile-nav-tertiary {
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: none;
}
#mobile-nav-tertiary a img {
  display: block;
  height: 20px;
}
#mobile-nav-tertiary button,
#mobile-nav-tertiary a {
  display: inline-block;
  color: var(--color-light);
  height: 44px;
  text-align: center;
  text-transform: uppercase;
  line-height: 44px;
}
#mobile-nav-tertiary button:not(:last-child) i,
#mobile-nav-tertiary a:not(:last-child) i {
  margin-right: 1em;
}
#mobile-nav-tertiary button img,
#mobile-nav-tertiary a img {
  display: inline-block;
  vertical-align: middle;
}
#mobile-nav-tertiary button i,
#mobile-nav-tertiary a i {
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
}
@media only screen and (max-width: 700px) {
  #mobile-nav-tertiary button i,
  #mobile-nav-tertiary a i {
    display: none;
  }
}

.invert {
  filter: invert(100%) hue-rotate(180deg);
}
.invert .personal-message img {
  filter: invert(100%) hue-rotate(180deg);
}
.invert #day-toggle .sun span {
  margin-left: -5px;
  width: 10px;
}

#day-toggle {
  outline: none;
  transition: transform 0.35s ease-in-out 0.1s;
  pointer-events: auto;
  position: fixed;
  z-index: 1000010;
  top: 0;
  right: 50px;
  background: transparent;
  background: black;
  border: none;
  border-radius: 50px;
  padding: 0;
  height: 45px;
  width: 45px;
  margin: 6px;
  display: none;
}
#day-toggle .moon {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-light);
  display: inline-block;
  background: black;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -7px;
  margin-top: -7px;
}
#day-toggle:hover .sun span {
  width: 18px;
  margin-left: -9px;
}
#day-toggle .sun {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-light);
  display: inline-block;
}
#day-toggle .sun span {
  transition: all 0.25s ease-in-out 0s;
  width: 24px;
  height: 2px;
  background: var(--color-light);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -12px;
}
#day-toggle .sun span:nth-child(1) {
  transform: rotate(0deg);
}
#day-toggle .sun span:nth-child(2) {
  transform: rotate(45deg);
}
#day-toggle .sun span:nth-child(3) {
  transform: rotate(90deg);
}
#day-toggle .sun span:nth-child(4) {
  transform: rotate(135deg);
}
#day-toggle > i span {
  font-size: 20px;
  font-style: normal;
}
#day-toggle > i {
  border-radius: 50%;
  height: 45px;
  width: 45px;
  margin: 6px;
  background: black;
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  justify-content: center;
}

#scroll-top-trigger {
  transition: opacity 0.25s ease-in-out 0s, transform 0.25s ease-in-out 0s;
  bottom: 0;
  transform: scale(1);
}
.mobile-nav #scroll-top-trigger, .top #scroll-top-trigger {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
#scroll-top-trigger:hover span:nth-child(1) {
  transform-origin: center right;
  transform: translateY(-8px) rotate(-45deg) scale(1.25, 1);
}
#scroll-top-trigger:hover span:nth-child(2) {
  transform: translateY(-6px) scale(1, 1);
  height: 18px;
}
#scroll-top-trigger:hover span:nth-child(3) {
  transform-origin: center left;
  transform: translateY(-8px) rotate(45deg) scale(1.25, 1);
}
#scroll-top-trigger:hover span {
  transition: all 0.125s ease-in-out 0s;
}
#scroll-top-trigger > i {
  background: rgba(23, 23, 26, 0.5);
  box-shadow: 0 0 20px 7px rgb(23, 23, 26);
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: row;
  justify-content: center;
  position: relative;
}
#scroll-top-trigger > i span:nth-child(1) {
  transform-origin: center right;
  transform: translateY(-4px) rotate(-35deg) scale(1, 1);
}
#scroll-top-trigger > i span:nth-child(3) {
  transform-origin: center left;
  transform: translateY(-4px) rotate(35deg) scale(1, 1);
}
#scroll-top-trigger i > span {
  transition: all 0.5s ease-in-out 0s;
  display: block;
  background: white;
  height: 2px;
  width: 100%;
  margin: 0 -0.5px;
  border-radius: 1px;
}
#scroll-top-trigger i > span:nth-child(2) {
  transform: translateY(-2px) scale(1, 1);
  transform-origin: top center;
  left: 50%;
  top: 0;
  margin: 0 -1px;
  position: absolute;
  width: 2px;
  height: 0;
}
#mobile-nav-toggle {
  top: 0;
}
.mobile-nav #mobile-nav-toggle span:nth-child(1) {
  transform: translateY(4px) rotate(-90deg) scale(0, 1);
}
.mobile-nav #mobile-nav-toggle span:nth-child(2) {
  transform: translateY(-4px) rotate(0deg) scale(1, 1);
}
.mobile-nav #mobile-nav-toggle span {
  transition: all 0.125s ease-in-out 0s;
}
#mobile-nav-toggle:hover span:nth-child(1) {
  transform: translateY(4px) rotate(-90deg) scale(1, 1);
}
#mobile-nav-toggle:hover span:nth-child(2) {
  transform: translateY(-5px) rotate(0) scale(1, 1);
}
.mobile-nav #mobile-nav-toggle:hover span:nth-child(1) {
  transform: translateY(4px) rotate(-90deg) scale(0, 1);
}
.mobile-nav #mobile-nav-toggle:hover span:nth-child(2) {
  transform: translateY(-5px) rotate(0deg) scale(1, 1);
}
#mobile-nav-toggle:hover span {
  transition: all 0.125s ease-in-out 0s;
}
#mobile-nav-toggle > i {
  background: rgba(23, 23, 26, 0.5);
  box-shadow: 0 0 20px 7px rgb(23, 23, 26);
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  justify-content: center;
}
#mobile-nav-toggle span + span {
  margin-top: 7px;
}
#mobile-nav-toggle span {
  transition: all 0.125s ease-in-out 0s;
  display: block;
  background: white;
  height: 2px;
  width: 20px;
}
#scroll-top-trigger,
#mobile-nav-toggle {
  min-width: 60px;
  right: 0;
  position: fixed !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  pointer-events: auto;
  z-index: 1000010;
  background: transparent;
  border: none;
  padding: 0;
  width: 64px;
  height: 64px;
}

#mobile-nav-main {
  padding: 0;
  flex: 100;
  justify-content: center;
  display: flex;
  flex-direction: column;
  white-space: normal;
  align-content: center;
  align-items: center;
  text-align: center;
}
#mobile-nav-main #playLevels {
  padding-left: 17.5vw;
  padding-right: 17.5vw;
  display: flex;
  flex-direction: row;
  height: 100vh;
  justify-content: space-evenly;
}
#mobile-nav-main #playLevels li {
  display: flex;
  flex: 1;
}
#mobile-nav-main #playLevels li:last-child button b {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
#mobile-nav-main #playLevels li button {
  position: relative;
  font-size: 14px;
  line-height: 1;
  background: none;
  border: none;
  text-transform: uppercase;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: letter-spacing 0.125s ease-in-out 0s;
  letter-spacing: 0.1em;
  letter-spacing: 0.1em;
  opacity: 1;
  color: var(--color-softlight);
  display: inline-block;
}
#mobile-nav-main #playLevels li button.active {
  color: var(--color-light);
  z-index: 10000;
}
#mobile-nav-main #playLevels li button b {
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  height: 50%;
}
#mobile-nav-main #playLevels li button b:first-child {
  bottom: 0;
}
#mobile-nav-main #playLevels li button b:last-child {
  top: 0;
}
#mobile-nav-main #playLevels li button span {
  display: inline-block;
  position: relative;
  line-height: 100px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
#mobile-nav-main ul {
  text-align: center;
  width: 100vw;
  margin: 0;
  list-style: none;
}
#mobile-nav-main li {
  margin: 0;
  min-width: 20px;
  cursor: pointer;
  position: relative;
  padding: 0;
}
#mobile-nav-main li button,
#mobile-nav-main li a {
  width: 100%;
  background: transparent;
  border: none;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: none;
  position: relative;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.7;
  line-height: 7vh;
  letter-spacing: 0.05em;
  font-weight: 500;
  padding: 5px 5px;
  display: block;
  font-size: 5vmin;
}
#mobile-nav-main li button.active, #mobile-nav-main li button:hover,
#mobile-nav-main li a.active,
#mobile-nav-main li a:hover {
  opacity: 1;
  opacity: 1;
  font-weight: 900;
  transition: font-weight 0.125s ease-in-out 0s;
}
#mobile-nav-main li button.active img, #mobile-nav-main li button:hover img,
#mobile-nav-main li a.active img,
#mobile-nav-main li a:hover img {
  opacity: 1;
  transform: scale(1, 1);
}
#mobile-nav-main li button.active svg path, #mobile-nav-main li button:hover svg path,
#mobile-nav-main li a.active svg path,
#mobile-nav-main li a:hover svg path {
  stroke-width: 9px; /*Between 1px and 2px*/
}
#mobile-nav-main li button > .x:hover span,
#mobile-nav-main li a > .x:hover span {
  display: flex;
}
#mobile-nav-main li button > .x > span,
#mobile-nav-main li a > .x > span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: fixed;
  top: 0;
  display: inline-block;
  font-weight: 100 !important;
  font-size: 18px;
  vertical-align: middle;
  margin-top: -0.25em;
  text-align: center;
  transition: all 0.125s ease-in-out 0s;
  letter-spacing: 0.025em;
  opacity: 0.5;
  display: none;
}
#mobile-nav-main li button > .x > span:hover,
#mobile-nav-main li a > .x > span:hover {
  opacity: 1;
}
#mobile-nav-main li button > .x > span:first-child,
#mobile-nav-main li a > .x > span:first-child {
  left: 0%;
  right: 55%;
}
#mobile-nav-main li button > .x > span:last-child,
#mobile-nav-main li a > .x > span:last-child {
  left: 55%;
  right: 0%;
}
#mobile-nav-main li button p,
#mobile-nav-main li a p {
  letter-spacing: 0.0125em;
  padding: 15px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: normal;
  text-transform: none;
  margin: 0;
  display: none;
}
#mobile-nav-main li button svg,
#mobile-nav-main li a svg {
  cursor: pointer;
  padding: 10px;
  padding-bottom: 20px;
  transform: scale(0.96, 0.96);
  transition: all 0.5s ease-in-out 0s;
  transform: scale(1.25, 1.25);
  opacity: 0;
  display: none;
}
.mobile-nav #mobile-nav-main li button svg,
.mobile-nav #mobile-nav-main li a svg {
  opacity: 1;
  transition: all 0.5s ease-in-out 0.3s;
  transform: scale(1, 1);
}
#mobile-nav-main li button svg path,
#mobile-nav-main li a svg path {
  transition: stroke-width 0.1s ease-in-out 0s;
  stroke-width: 3px; /*Between 1px and 2px*/
}
@media only screen and (max-width: 600px) {
  #mobile-nav-main li button,
  #mobile-nav-main li a {
    font-size: 10vmin;
    font-size: clamp(14px, 10vmin, 32px) !important;
  }
}

#mobile-nav-avatar {
  position: relative;
  display: inline-block;
}
#mobile-nav-avatar:hover .flag {
  transform: translateY(-10%);
}
#mobile-nav-avatar img {
  display: block;
  height: 80px;
}
@media only screen and (max-width: 600px) {
  #mobile-nav-avatar img {
    height: 55px;
  }
}
#mobile-nav-avatar .flag {
  transition: transform 0.125s ease-in-out 0s;
  top: 0;
  left: 0;
  height: 55%;
  width: 100%;
  position: absolute;
  background-image: url("/_img/avatar-flag.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

#error {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@keyframes boardScale {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.75, 0.75);
  }
}
@keyframes backgroundSize {
  0% {
    background-size: 0%;
  }
  100% {
    background-size: 100%;
  }
}
#playSnake .score-pawns#score-eaten-total {
  right: 100%;
  align-content: flex-end;
  display: none;
}
#playSnake .score-pawns#score-eaten-progress {
  align-content: flex-start;
  left: 100%;
}
#playSnake .score-pawns {
  position: absolute;
  top: 0;
  height: 100%;
  margin: 0;
  padding: 0 4vmin;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
}
#playSnake .score-pawns div.active {
  opacity: 1;
}
#playSnake .score-pawns div {
  opacity: 0.1;
  margin: 3px 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  height: 2vmin;
  width: 2vmin;
  position: relative;
  display: inline-block;
}
#playSnake .score-pawns div.dot {
  opacity: 1;
  background-image: url("/_img/chesspieces/sctheme/ping.png");
}
#playSnake .score-pawns div.pawn {
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}
#playSnake #snake-container-wrap {
  position: relative;
}
#playSnake #snake-container-wrap:after {
  content: "";
  display: block;
  box-shadow: 0 0 20px 20px var(--color-dark), inset 0 0 70px 70px var(--color-dark) !important;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
}
#playSnake #snake-container-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  flex-direction: column;
}
#playSnake #snake-meta-container {
  position: absolute;
}
#playSnake #snake-container {
  display: grid;
  transform-origin: center;
  transition: all 0.35s ease-out 0s;
}
#playSnake .cell.checkmate-square:before {
  box-shadow: 0 0 20px red, inset 0 0 20px red !important;
  background-image: url("/_img/chesspieces/sctheme/square-red.png") !important;
  opacity: 1;
}
#playSnake .cell {
  transition: all 0.65s ease-out 0s;
  position: relative;
}
#playSnake .cell:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3.125%;
  content: "";
  z-index: -5;
  background-image: url("/_img/chesspieces/sctheme/white.png");
  background-size: contain;
  background-position: center center;
  background-image: url("/_img/chesspieces/sctheme/square.png");
  background-size: 100%;
  background-image: url("/_img/chesspieces/sctheme/square-white-corner.png");
  opacity: 0.1;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out 0.25s;
}
#playSnake .cell:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: backgroundSize;
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
  background-size: 0%; /* Initial size */
}
#playSnake .tail {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/_img/chesspieces/sctheme/ping.png");
  background-size: 75%;
}
#playSnake #snake {
  position: absolute;
  bottom: 50%;
  left: 50%;
}
#playSnake #snake,
#playSnake .block,
#playSnake .snake,
#playSnake .pawn {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
#playSnake [direction=up] #direction {
  transform: translate(0%, -100%);
}
#playSnake [direction=down] #direction {
  transform: translate(0%, 100%);
}
#playSnake [direction=left] #direction {
  transform: translate(-100%, 0%);
}
#playSnake [direction=right] #direction {
  transform: translate(100%, 0%);
}
#playSnake #snake {
  background-image: url("/_img/chesspieces/sctheme-b/wK.png");
  transition: all 0.25s ease-in-out 0s;
  border-radius: 50%;
}
#playSnake #snake #direction {
  transition: all 0.125s ease-in-out 0s;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/_img/chesspieces/sctheme/dot.png");
  background-size: 20%;
  display: none;
}
#playSnake .added:before {
  background-image: url("/_img/chesspieces/sctheme/square-white.png");
  opacity: 1;
  transition: opacity 0.1s ease-in-out 0s;
}
#playSnake .pawn:after {
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
  transition: all 0.25s ease-in-out 0s;
  background-size: 100%;
  background-repeat: no-repeat;
}
#playSnake .block:after {
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
  transition: all 0.25s ease-in-out 0s;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#playSnake .added:after {
  background-size: 0%; /* Initial size */
  transition: all 0s ease-in-out 0s;
}

#game-container-wrap {
  position: relative;
}

#playMemory .container {
  text-align: center;
}
#playMemory #score-container {
  justify-content: center;
}
#playMemory #startGame {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -16px;
  margin-bottom: 12px;
}
#playMemory #memory {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0px;
  margin: 20px auto;
}
#playMemory #memory.blocked {
  pointer-events: none;
}
#playMemory .memory-card .wave {
  box-shadow: 0 0 1px 1px rgba(243, 233, 232, 0.05), inset 0 0 1px 1px rgba(243, 233, 232, 0.05); /* Green color for positive evaluation */
}
#playMemory .memory-card {
  position: relative;
}
#playMemory .memory-card:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3.125%;
  content: "";
  background-image: url("/_img/chesspieces/sctheme/square.png");
  background-size: 100%;
  background-image: url("/_img/chesspieces/sctheme/square-white-corner.png");
  opacity: 0.1;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 0.125s 0s var(--easing);
  pointer-events: none;
}
#playMemory .memory-card:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.12s 0s ease-in-out;
}
#playMemory .memory-card:after {
  opacity: 1;
  transition: all 0.35s ease-in-out 0s;
  transform: rotateY(0deg);
  backface-visibility: hidden !important;
}
#playMemory #memory:not(.blocked) .memory-card:not(.memory-card-hidden):before {
  z-index: 1005;
  opacity: 1;
  background-image: url("/_img/chesspieces/sctheme/square-white.png");
}
#playMemory .memory-card {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  perspective: 1000px; /* Set the perspective distance */
}
@media only screen and (orientation: portrait) {
  #playMemory .memory-card {
    min-width: 17vw;
    min-height: 17vw;
  }
}
@media only screen and (orientation: landscape) {
  #playMemory .memory-card {
    min-width: 12.5vmin;
    min-height: 12.5vmin;
  }
}
#playMemory .memory-card-hidden:after {
  opacity: 0;
  transform: rotateY(180deg);
}
#playMemory .memory-card-hidden:hover:before {
  z-index: 1005;
  opacity: 0.25;
  background-image: url("/_img/chesspieces/sctheme/square-white.png");
}
#playMemory .memory-card-hidden:before {
  background-image: url("/_img/chesspieces/sctheme/square-white-corner.png");
  opacity: 0.1;
}
#playMemory [data-symbol=wp]:after {
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
}
#playMemory [data-symbol=wn]:after {
  background-image: url("/_img/chesspieces/sctheme-b/wN.png");
}
#playMemory [data-symbol=wb]:after {
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
}
#playMemory [data-symbol=wr]:after {
  background-image: url("/_img/chesspieces/sctheme-b/wR.png");
}
#playMemory [data-symbol=wq]:after {
  background-image: url("/_img/chesspieces/sctheme-b/wQ.png");
}
#playMemory [data-symbol=wk]:after {
  background-image: url("/_img/chesspieces/sctheme-b/wK.png");
}
#playMemory [data-symbol=bp]:after {
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}
#playMemory [data-symbol=bn]:after {
  background-image: url("/_img/chesspieces/sctheme-b/bN.png");
}
#playMemory [data-symbol=bb]:after {
  background-image: url("/_img/chesspieces/sctheme-b/bB.png");
}
#playMemory [data-symbol=br]:after {
  background-image: url("/_img/chesspieces/sctheme-b/bR.png");
}
#playMemory [data-symbol=bq]:after {
  background-image: url("/_img/chesspieces/sctheme-b/bQ.png");
}
#playMemory [data-symbol=bk]:after {
  background-image: url("/_img/chesspieces/sctheme-b/bK.png");
}
#playMemory [data-symbol=empty]:after {
  background-image: url("/_img/chesspieces/sctheme/ping.png");
}

@keyframes moveHistory {
  0%, 30% {
    box-shadow: 0 0 5px rgba(243, 233, 232, 0), inset 0 0 5px rgba(243, 233, 232, 0);
  }
  50% {
    box-shadow: 0 0 15px rgba(243, 233, 232, 0.35), inset 0 0 15px rgba(243, 233, 232, 0.35);
  }
  87%, 100% {
    box-shadow: 0 0 5px rgba(243, 233, 232, 0), inset 0 0 5px rgba(243, 233, 232, 0);
  }
}
.mini-board-wrap {
  overflow: hidden;
}

.mini-board {
  margin: 5px;
  display: flex;
  flex-wrap: wrap;
}
.mini-board .white.pawn {
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
}
.mini-board .white.knight {
  background-image: url("/_img/chesspieces/sctheme-b/wN.png");
}
.mini-board .white.bishop {
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
}
.mini-board .white.rook {
  background-image: url("/_img/chesspieces/sctheme-b/wR.png");
}
.mini-board .white.queen {
  background-image: url("/_img/chesspieces/sctheme-b/wQ.png");
}
.mini-board .white.king {
  background-image: url("/_img/chesspieces/sctheme-b/wK.png");
}
.mini-board .black.pawn {
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}
.mini-board .black.knight {
  background-image: url("/_img/chesspieces/sctheme-b/bN.png");
}
.mini-board .black.bishop {
  background-image: url("/_img/chesspieces/sctheme-b/bB.png");
}
.mini-board .black.rook {
  background-image: url("/_img/chesspieces/sctheme-b/bR.png");
}
.mini-board .black.queen {
  background-image: url("/_img/chesspieces/sctheme-b/bQ.png");
}
.mini-board .black.king {
  background-image: url("/_img/chesspieces/sctheme-b/bK.png");
}
.mini-board .piece {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3.125%;
  background-size: contain;
  background-position: center center;
}
.mini-board .cell {
  aspect-ratio: 1;
  width: 20%;
  position: relative;
}
.mini-board .cell.current {
  animation-delay: 1s !important;
}
.mini-board .cell.previous, .mini-board .cell.current {
  animation-name: moveHistory;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  z-index: 10000;
  opacity: 1;
}
.mini-board .cell.previous:before, .mini-board .cell.current:before {
  background-image: url("/_img/chesspieces/sctheme/square-white.png") !important;
  opacity: 1;
}
.mini-board .cell.previous, .mini-board .cell.current {
  transform: translateZ(-10px);
}
.mini-board .cell:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3.125%;
  content: "";
  z-index: 2;
  background-image: url("/_img/chesspieces/sctheme/white.png");
  background-size: contain;
  background-position: center center;
  background-image: url("/_img/chesspieces/sctheme/square.png");
  background-size: 100%;
  background-image: url("/_img/chesspieces/sctheme/square-white-corner.png");
  opacity: 0.1;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out 0.25s;
}
.mini-board .cell:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: backgroundSize;
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
  background-size: 0%; /* Initial size */
}
html.game-over body {
  transition: background 0.3s 0s var(--easing);
  background: rgba(255, 0, 0, 0.4);
}

#elements {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 10000000000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  pointer-events: none;
  animation: turbulence-c 15s infinite ease-in-out;
  transition: opacity 2s 0s var(--easing);
}
#elements.playing {
  opacity: 0;
}
#elements.hide {
  display: none;
}
#elements div {
  height: 100%;
  aspect-ratio: 1;
  width: auto;
  flex: 1;
  animation: turbulence-a 10s infinite ease-in-out;
}
#elements div:nth-child(1) {
  animation-delay: -0.26s;
}
#elements div:nth-child(1):after {
  animation-delay: 1.26s;
}
#elements div:nth-child(2) {
  animation-delay: -1.6s;
}
#elements div:nth-child(2):after {
  animation-delay: 1s;
}
#elements div:nth-child(3) {
  animation-delay: 1.83s;
}
#elements div:nth-child(3):after {
  animation-delay: -2s;
}
#elements div:nth-child(4) {
  animation-delay: 2.6s;
}
#elements div:nth-child(4):after {
  animation-delay: -5s;
}
#elements div:nth-child(4) {
  animation-delay: -1.26s;
}
#elements div:nth-child(4):after {
  animation-delay: 0.26s;
}
#elements div:nth-child(5) {
  animation-delay: -1.76s;
}
#elements div:nth-child(5):after {
  animation-delay: -20.26s;
}
#elements div:nth-child(6) {
  animation-delay: -2.86s;
}
#elements div:nth-child(6):after {
  animation-delay: -4s;
}
#elements div:nth-child(7) {
  animation-delay: -3.26s;
}
#elements div:nth-child(7):after {
  animation-delay: -0.5s;
}
#elements div:after {
  content: "";
  display: inline-block;
  box-shadow: 0 0 30px 20px rgb(43, 43, 46); /* Green color for positive evaluation */
  background-color: rgb(43, 43, 46); /* Green color for positive evaluation */
  width: 1px;
  height: 1px;
  border-radius: 50%;
  animation: turbulence-b 10s infinite ease-in-out;
}

@keyframes turbulence-a {
  0% {
    transform: scale(1) rotate(-20deg) translate(-20vw, 10vh);
  }
  50% {
    transform: scale(1.5) rotate(20deg) translate(20vw, -10vh);
  }
  100% {
    transform: scale(1) rotate(-20deg) translate(-20vw, 10vh);
  }
}
@keyframes turbulence-b {
  0% {
    transform: scale(1) translate(100vw, -10vh);
  }
  50% {
    transform: scale(3) translate(0vw, 10vh);
  }
  100% {
    transform: scale(1) translate(-100vw, -10vh);
  }
}
@keyframes turbulence-c {
  0% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-20deg);
  }
}
#playChess {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 100%;
  overflow: hidden;
  position: fixed;
  overscroll-behavior: none;
  user-select: none;
}
#playChess body {
  overscroll-behavior: none;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-content: center;
  overflow: hidden;
  position: fixed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

@keyframes clock {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.clock-face {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.digit-container {
  display: inline-block;
  position: relative;
  width: 1em; /* Adjust as needed */
  line-height: 1em;
  height: 1em; /* Adjust as needed */
  overflow: hidden;
}

.digit {
  position: absolute;
  top: 0;
  left: 0;
  transition: top 1s linear;
  background: var(--color-dark);
}

.digit-container .digit {
  text-align: center;
}

.digit-container .digit:last-child {
  top: 100%;
}

#nextPuzzleButton .progress {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  border-radius: 4px;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(243, 233, 232, 0.2);
}
#nextPuzzleButton .progress > span {
  color: var(--color-light);
  display: inline-block;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 3px;
  padding-bottom: 0px;
  line-height: 19px;
}

.button-mini select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  background: url("/_svg/chevron-down.svg") no-repeat right center;
  background-size: 10px;
  padding-right: 10px; /* Adjust for the arrow space */
}

.button-mini {
  outline: none;
  min-height: 22px;
  white-space: nowrap;
  text-transform: uppercase;
}
.button-mini:hover {
  box-shadow: inset 0 0 0 1px rgb(243, 233, 232);
  color: rgb(243, 233, 232);
  opacity: 1 !important;
}
.button-mini {
  border: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(243, 233, 232, 0.3);
  color: rgba(243, 233, 232, 0.3);
  background: transparent !important;
  z-index: 10;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 0;
  padding-bottom: 2px;
  line-height: 20px;
  margin: 0;
  letter-spacing: 0.05em;
  transition: all 0.05s 0s var(--easing);
  background: black;
  background-color: var(--color-dark); /* Green color for positive evaluation */
}
.button-mini:hover {
  box-shadow: inset 0 0 0 1px rgb(243, 233, 232), 0 0 105px 1px rgba(243, 233, 232, 0.3);
}

.dotted-grid {
  height: 70vmin;
  width: 70vmin;
  display: flex;
  flex-wrap: wrap;
}

.dotted-square-wrap {
  height: 12.5%;
  width: auto;
  aspect-ratio: 1;
  position: relative;
}

.dotted-square {
  height: auto;
  width: auto;
  display: flex;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.dotted-square:hover {
  z-index: 1000;
}
.dotted-square:hover i {
  opacity: 1;
  transform: scale(1);
  background-color: #ffffff;
}
.dotted-square div {
  display: flex;
  justify-content: space-between;
}
.dotted-square div i {
  transition: all 0.1s 0s var(--easing);
  border-radius: 5px;
  height: 4px;
  width: 4px;
  background-color: #393939;
  background-color: #ffffff;
  opacity: 0.2;
  display: inline-block;
}

#backgroundVideo {
  position: fixed;
  height: 1px;
  width: 1px;
  z-index: 2;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
}

.distance-0 .ping {
  animation-delay: 0s;
}

.distance-1 .ping {
  animation-delay: 0.2s;
}

.distance-2 .ping {
  animation-delay: 0.4s;
}

.distance-3 .ping {
  animation-delay: 0.6s;
}

.distance-4 .ping {
  animation-delay: 0.8s;
}

.distance-5 .ping {
  animation-delay: 1s;
}

.distance-6 .ping {
  animation-delay: 1.2s;
}

.distance-7 .ping {
  animation-delay: 1.4s;
}

.highlight1-32417 .ping,
.highlight2-9c5d2 .ping {
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

.ping {
  border-radius: 50%;
  animation-name: ping-in;
  animation-fill-mode: forwards;
  animation-duration: 0.25s;
  pointer-events: none;
  transform: scale(0);
  opacity: 0;
  transition: inset 0.1s 0s var(--easing);
}
.ping.del {
  animation-duration: 0.5s;
  animation-name: ping-out;
}
.ping {
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 20%;
  right: 20%;
  background-image: url("/_img/chesspieces/sctheme/ping.png");
  background-size: contain;
  background-position: center center;
}

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

#playLevels-wrap {
  box-shadow: 0 0 30px 40px var(--color-dark); /* Green color for positive evaluation */
  background-color: var(--color-dark); /* Green color for positive evaluation */
  z-index: 1000000;
  position: fixed;
  border-radius: 9vmin;
  width: 18vmin;
  height: 18vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all 1s 0s var(--easing);
  transform: rotate(0deg);
}
.no-menu #playLevels-wrap {
  box-shadow: 0 0 0px 0px var(--color-dark); /* Green color for positive evaluation */
  transition: all 0.5s 0.5s var(--easing);
  height: 0;
  width: 0;
}
.no-menu #playLevels-wrap #playLevels {
  transition: all 1s 0s var(--easing);
  opacity: 0;
}
.no-menu #playLevels-wrap #playLevels button {
  transition: margin 1s 0s var(--easing);
  margin: 0px;
}
#playLevels-wrap #playLevels {
  transition: all 0.75s 0s var(--easing);
  opacity: 1;
  width: 13vmin;
  height: 13vmin;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#playLevels-wrap #playLevels button {
  transition: margin 0.5s 0.25s var(--easing);
  margin: 4px;
  white-space: nowrap;
  opacity: 0.5;
  background: none;
  border: none;
  font-size: 12px;
  letter-spacing: 0.05em;
}
#playLevels-wrap #playLevels button.active {
  font-weight: 600;
  opacity: 1;
}
#playLevels-wrap #playLevels button:hover {
  opacity: 1;
}

@media (hover: hover) {
  button:hover .tooltip {
    transform: translateY(0%);
    opacity: 1;
  }
}
.tooltip {
  transform: translateY(100%);
  position: absolute;
  top: 100%;
}
.tooltip.bottom {
  top: auto;
  bottom: 100%;
}
.tooltip {
  left: 50%;
  margin-left: -100px;
  width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.125s ease-in-out 0s;
  text-wrap: nowrap;
  font-size: 12px;
  line-height: 1;
  text-transform: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.button-text {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px !important;
  line-height: 40px;
  opacity: 0.25;
}
.button-text:hover {
  opacity: 1;
}

.button-text,
.button-icon {
  pointer-events: auto;
  position: relative;
  border: none;
  display: inline-block;
  padding: 0px;
  color: var(--color-light);
  background: transparent;
  pointer-events: auto;
}
.button-text.hidden,
.button-icon.hidden {
  display: none !important;
}
.button-text,
.button-icon {
  border: none;
  outline: none;
  display: inline-block;
  vertical-align: middle;
}
.button-text.active svg, .button-text:hover svg,
.button-icon.active svg,
.button-icon:hover svg {
  opacity: 1;
}
.button-text.disabled,
.button-icon.disabled {
  pointer-events: none !important;
  opacity: 0.5;
}
.button-text svg,
.button-icon svg {
  position: relative;
  display: block;
  height: 24px;
  width: 24px;
  margin: -1px;
  padding: 0px;
  opacity: 0.3;
}
.button-text span + span,
.button-text svg + svg,
.button-icon span + span,
.button-icon svg + svg {
  display: none;
}
.button-text.toggled > span,
.button-text.toggled > svg,
.button-icon.toggled > span,
.button-icon.toggled > svg {
  display: none;
}
.button-text.toggled span + span,
.button-text.toggled svg + svg,
.button-icon.toggled span + span,
.button-icon.toggled svg + svg {
  display: block;
}

.button-toggle {
  position: relative;
  padding: 4px;
  display: inline-block;
  vertical-align: middle;
}
.button-toggle button {
  text-transform: uppercase;
}
.button-toggle button:hover {
  color: rgb(243, 233, 232);
  opacity: 1 !important;
}
.button-toggle button {
  border: none;
  opacity: 0.25;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgb(243, 233, 232);
  color: rgb(243, 233, 232);
  background: transparent !important;
  z-index: 10;
  position: relative;
  display: inline-block;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 3px;
  padding-bottom: 0px;
  line-height: 19px;
  margin: 0;
  display: none !important;
  letter-spacing: 0.05em;
}
.button-toggle button #playLevel {
  font-feature-settings: "tnum";
  margin-left: -0.3em;
  position: relative;
  right: -2px;
}
.button-toggle button.active {
  display: block !important;
  opacity: 0.25;
}

.button-toggle {
  position: relative;
}

#boardWrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: auto;
  align-items: center;
  justify-content: center;
}

#boardSpinner {
  background: var(--color-dark);
  z-index: 10000;
  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: 50%;
  left: 50%;
  margin: -25px;
  box-shadow: 0 0 0 10px var(--cofirelor-dark);
  opacity: 0;
  animation: clock 3s infinite linear;
  display: none;
}
#boardSpinner.loading {
  display: block;
  opacity: 1;
  transform: scale(1);
}
#boardSpinner: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 */
}

#board {
  position: relative;
  margin: none;
  line-height: 2;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
@media only screen and (orientation: portrait) {
  #board {
    max-width: 100vw;
  }
}
@media only screen and (orientation: landscape) {
  #board {
    max-width: 70vmin;
  }
}

.clearfix-7da63 {
  clear: both;
  backface-visibility: hidden;
}

.resizing img {
  display: none;
}

#player-moves,
#engine-moves {
  margin-bottom: 10px;
}

#play ul {
  list-style-type: none;
  padding: 0;
}
#play li {
  margin-bottom: 5px;
  font-size: 14px;
}

.chessboard-63f37 {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

#youtube {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.25;
  display: none;
}

@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0) scale(1);
  }
  20% {
    transform: translate(-0.1%, 0) rotate(-0.1deg) scale(1);
  }
  40% {
    transform: translate(0.1%, 0) rotate(0.2deg) scale(1);
  }
  60% {
    transform: translate(-0.1%, 0) rotate(-0.2deg) scale(1);
  }
  80% {
    transform: translate(0.1%, 0) rotate(0.1deg) scale(1);
  }
  100% {
    transform: translate(0, 0) rotate(0) scale(1);
  }
}
#board {
  perspective: 1000px; /* Set the perspective distance */
}

#gameContainer {
  perspective: 1000px; /* Add perspective to create a 3D effect */
}

.square-55d63 {
  perspective: 16vmin; /* Add perspective to create a 3D effect */
}

#board.rotating.rotateAnimateTrue.fast {
  transition: all 0.5s 0s var(--easing);
}
#board.rotating.rotateAnimateTrue.fast .clock,
#board.rotating.rotateAnimateTrue.fast .move-history li,
#board.rotating.rotateAnimateTrue.fast .piece-417db {
  transition: all 0.5s 0s var(--easing);
}
#board.rotating.rotateAnimateTrue {
  transition: all 0.5s 0.5s var(--easing);
}
#board.rotating.rotateAnimateTrue .clock,
#board.rotating.rotateAnimateTrue .move-history li,
#board.rotating.rotateAnimateTrue .piece-417db {
  transition: all 0.5s 0s var(--easing);
}
#board.blur {
  opacity: 0;
  filter: blur(2px);
}
#board.shake #myBoard {
  transform-origin: top center;
  animation-name: shake;
  animation-fill-mode: forwards;
  animation-timing-function: lineart;
  animation-duration: 0.1s;
}

#boardWrapper .player {
  font-feature-settings: "tnum", "case" 1;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  padding: 12px 0px;
  color: rgba(243, 233, 232, 0.4);
  flex: 1;
}
#boardWrapper .player span {
  display: block;
}
#boardWrapper .player .player-rating {
  font-feature-settings: "tnum", "case" 1;
  color: rgba(243, 233, 232, 0.2);
}
@media only screen and (orientation: portrait) {
  #boardWrapper .player {
    max-width: 100vw;
  }
}
@media only screen and (orientation: landscape) {
  #boardWrapper .player {
    max-width: 70vmin;
  }
}

#board-vignette {
  pointer-events: none;
  transform: scale(1.1) !important;
  border-radius: 10px;
  position: absolute;
  z-index: 10000;
  box-shadow: inset 0 0 50px 35vmin var(--color-dark), 0 0 50px 35vmin var(--color-dark);
  transition: box-shadow 0.6s ease-in-out 0.6s;
}
#board-vignette.off {
  box-shadow: inset 0 0 0 0 var(--color-dark), 0 0 0 0 var(--color-dark);
}
@media only screen and (orientation: portrait) {
  #board-vignette {
    width: 100vmin;
    max-width: 70vh;
  }
}
@media only screen and (orientation: landscape) {
  #board-vignette {
    height: 70vmin;
    width: 70vmin;
  }
}

#myBoard {
  z-index: 1000;
  aspect-ratio: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
@media only screen and (orientation: portrait) {
  #myBoard {
    width: 100vmin;
    max-width: 70vh;
  }
}
@media only screen and (orientation: landscape) {
  #myBoard {
    height: 70vmin;
    width: 70vmin;
  }
}

#myBoard.downloading {
  margin: -32px;
  padding: 70px;
  pointer-events: none;
}
#myBoard.downloading .notation-322f9 {
  font-size: 24px;
}
#myBoard.downloading {
  background-color: var(--color-dark);
  box-shadow: 0 0 0 40px var(--color-dark);
}
@media only screen and (orientation: portrait) {
  #myBoard.downloading {
    min-width: 140vmin;
    min-height: 140vmin;
    max-width: 140vh;
  }
}
@media only screen and (orientation: landscape) {
  #myBoard.downloading {
    min-height: 140vmin;
    min-width: 140vmin;
    max-width: 140vmin;
  }
}

.board-b72b1 {
  box-sizing: content-box;
  z-index: 1000;
  backface-visibility: hidden;
}

/* Define custom cursor styles */
@keyframes pieceWiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg); /* Gentle right rotation */
  }
  50% {
    transform: rotate(0deg); /* Gentle right rotation */
  }
  75% {
    transform: rotate(-15deg); /* Gentle right rotation */
  }
  100% {
    transform: rotate(0deg); /* Gentle right rotation */
  }
}
body > .piece-417db {
  filter: drop-shadow(0px 10px 20px rgb(23, 23, 26));
}
body > .piece-417db:hover {
  cursor: none !important;
}

@keyframes pieceJiggle-a {
  0% {
    transform: scale(1.035) rotate(0deg);
  }
  10% {
    transform: scale(1.035) rotate(5deg);
  }
  20% {
    transform: scale(1.035) rotate(0deg);
  }
  30% {
    transform: scale(1.035) rotate(-4deg);
  }
  40% {
    transform: scale(1.035) rotate(0deg);
  }
  50% {
    transform: scale(1.035) rotate(3deg);
  }
  60% {
    transform: scale(1.035) rotate(0deg);
  }
  70% {
    transform: scale(1.035) rotate(-2deg);
  }
  80% {
    transform: scale(1.035) rotate(0deg);
  }
  90% {
    transform: scale(1.035) rotate(1deg);
  }
  100% {
    transform: scale(1.035) rotate(0deg);
  }
}
@keyframes pieceJiggle-b {
  0% {
    transform: scale(1.035) rotate(0deg);
  }
  10% {
    transform: scale(1.035) rotate(-5deg);
  }
  20% {
    transform: scale(1.035) rotate(0deg);
  }
  30% {
    transform: scale(1.035) rotate(4deg);
  }
  40% {
    transform: scale(1.035) rotate(0deg);
  }
  50% {
    transform: scale(1.035) rotate(-3deg);
  }
  60% {
    transform: scale(1.035) rotate(0deg);
  }
  70% {
    transform: scale(1.035) rotate(2deg);
  }
  80% {
    transform: scale(1.035) rotate(0deg);
  }
  90% {
    transform: scale(1.035) rotate(-1deg);
  }
  100% {
    transform: scale(1.035) rotate(0deg);
  }
}
@keyframes pieceJiggle-c {
  0% {
    transform: scale(1.035) translateZ(0px) rotate(0deg);
  }
  25% {
    transform: scale(1.05) translateZ(-2px) rotate(-2deg);
  }
  50% {
    transform: scale(1.035) translateZ(0px) rotate(0deg);
  }
  75% {
    transform: scale(1.05) translateZ(1px) rotate(1deg);
  }
  100% {
    transform: scale(1.035) translateZ(0px) rotate(0deg);
  }
}
.hover .piece-417db {
  cursor: grab;
}

.vibrate .piece-417db {
  transform-origin: bottom center;
  animation-name: pieceJiggle-c;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-fill-mode: none;
}

.hover-a .piece-417db {
  transform-origin: bottom center;
  animation-name: pieceJiggle-a;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-fill-mode: none;
}

.hover-b .piece-417db {
  transform-origin: bottom center;
  animation-name: pieceJiggle-b;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-fill-mode: none;
}

.piece-417db {
  display: inherit;
  z-index: 1000;
  position: relative;
  pointer-events: none;
  filter: drop-shadow(0px 10px 10px rgb(23, 23, 26));
}

.ghost-piece {
  display: inherit;
  z-index: 1000;
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0px 10px 10px rgb(23, 23, 26));
  opacity: 0.035;
  background-size: 99%;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  transform: scale(1.07) translateY(0%);
  width: 100%;
  height: 100%;
}
.ghost-piece.out {
  transition: all 0.125s 0s linear;
  opacity: 0;
}
.ghost-piece.wP {
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
}
.ghost-piece.wN {
  background-image: url("/_img/chesspieces/sctheme-b/wN.png");
}
.ghost-piece.wB {
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
}
.ghost-piece.wR {
  background-image: url("/_img/chesspieces/sctheme-b/wR.png");
}
.ghost-piece.wQ {
  background-image: url("/_img/chesspieces/sctheme-b/wQ.png");
}
.ghost-piece.wK {
  background-image: url("/_img/chesspieces/sctheme-b/wK.png");
}
.ghost-piece.bP {
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}
.ghost-piece.bN {
  background-image: url("/_img/chesspieces/sctheme-b/bN.png");
}
.ghost-piece.bB {
  background-image: url("/_img/chesspieces/sctheme-b/bB.png");
}
.ghost-piece.bR {
  background-image: url("/_img/chesspieces/sctheme-b/bR.png");
}
.ghost-piece.bQ {
  background-image: url("/_img/chesspieces/sctheme-b/bQ.png");
}
.ghost-piece.bK {
  background-image: url("/_img/chesspieces/sctheme-b/bK.png");
}

.particle-snow {
  z-index: 2000;
  animation-name: dustFloat;
  animation-duration: 10s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  position: absolute;
  width: 0.6vmin;
  height: 0.6vmin;
  margin: -0.25vmin;
  border-radius: 50%;
  background: rgba(243, 233, 232, 0.75);
  opacity: 0.25;
}
.particle-snow.left {
  animation-name: dustFloatLeft;
  animation-timing-function: linear;
}
.particle-snow.right {
  animation-name: dustFloatRight;
  animation-timing-function: linear;
}
.particle-snow.speed-1 {
  animation-duration: 10s;
}
.particle-snow.speed-2 {
  animation-duration: 8s;
}
.particle-snow.speed-3 {
  animation-duration: 6s;
}
.particle-snow.speed-4 {
  animation-duration: 4s;
}
.particle-snow.speed-5 {
  animation-duration: 2s;
}

.particle-snow {
  animation-name: snowFall;
  background: rgba(243, 233, 232, 0.75);
  opacity: 1;
}
.particle-snow.speed-1 {
  animation-duration: 20s;
}
.particle-snow.speed-2 {
  animation-duration: 14.25s;
}
.particle-snow.speed-3 {
  animation-duration: 10s;
}
.particle-snow.speed-4 {
  animation-duration: 8s;
}
.particle-snow.speed-5 {
  animation-duration: 6s;
}

/* Container for all capture particles within the target square */
.capture-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Ensure the particles don't interfere with interactions */
  transition: opacity 0.2s 0.3s linear, transform 1s 0s linear;
  opacity: 1;
}
.capture-particles.fade {
  opacity: 0;
}
.capture-particles.fade .particle:nth-child(1n) {
  transform: translateY(50%) scale(0);
}
.capture-particles.fade .particle:nth-child(2n) {
  transform: translateY(40%) scale(0);
}
.capture-particles.fade .particle:nth-child(3n) {
  transform: translateY(30%) scale(0);
}
.capture-particles.fade .particle {
  transition: all 0.4s 0s ease-out;
  transform: scale(0);
}
.capture-particles.mini .particle {
  height: 1vmin;
  width: 1vmin;
  margin: -0.5vmin;
}
.capture-particles {
  /* Individual particle styles */
}
.capture-particles .particle {
  height: 5vmin;
  width: 5vmin;
  margin: -2.5vmin;
  border-radius: 3vmin;
  background: rgba(255, 0, 0, 0.25);
  position: absolute;
  opacity: 1;
  top: 50%;
  left: 50%;
}

.square-55d63 {
  float: left;
  position: relative;
  /* disable any native browser highlighting */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.square-55d63:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3.125%;
  content: "";
  z-index: -5;
  background-image: url("/_img/chesspieces/sctheme/white.png");
  background-size: contain;
  background-position: center center;
  background-image: url("/_img/chesspieces/sctheme/square.png");
  background-size: 100%;
  background-image: url("/_img/chesspieces/sctheme/square-white-corner.png");
  background-image: url("/_img/chesspieces/sctheme/square-white-corner.svg");
  opacity: 0.1;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.square-55d63 {
  transition: box-shadow 0.5s 0s ease-in-out;
  box-shadow: 0 0 3px rgba(243, 233, 232, 0), inset 0 0 3px rgba(243, 233, 232, 0);
}
.square-55d63.hover:before {
  z-index: 805;
  opacity: 1;
}

.square-55d63:after {
  border-radius: 3px;
  content: "";
  box-shadow: 0 0 0 var(--color-dark), inset 0 0 0 var(--color-dark);
  display: block;
  z-index: 1000000000;
  transition: box-shadow 0.12s 0s ease-in-out;
}

.square-55d63.draw-square:before {
  box-shadow: 0 0 20px red, inset 0 0 20px red;
}

.square-55d63.stalemate-square:before {
  box-shadow: 0 0 20px red, inset 0 0 20px red;
}

.square-55d63.check-square:before {
  box-shadow: 0 0 20px red, inset 0 0 20px red;
}

.square-55d63.winning-square:before {
  box-shadow: 0 0 20px red, inset 0 0 20px red;
}

.square-55d63.winning-square:before,
.square-55d63.resign-square:before,
.square-55d63.checkmate-square:before {
  box-shadow: 0 0 20px red, inset 0 0 20px red !important;
  background-image: url("/_img/chesspieces/sctheme/square-red.png") !important;
}

.captured-square {
  z-index: 1000000000;
}

.square-55d63.check-square:before,
.square-55d63.captured-square:before {
  opacity: 1 !important;
  box-shadow: 0 0 20px red, inset 0 0 20px red !important;
  background-image: url("/_img/chesspieces/sctheme/square-red.png") !important;
}

.captured-square .piece-417db {
  background-color: block;
}

.square-55d63.draw-square:before,
.square-55d63.stalemate-square:before,
.square-55d63.check-square:before,
.square-55d63.winning-square:before,
.square-55d63.resign-square:before,
.square-55d63.checkmate-square:before {
  opacity: 1 !important;
}

.draw-square:before,
.stalemate-square:before,
.check-square:before,
.winning-square:before,
.resign-square:before,
.checkmate-square:before {
  transition: opacity 0.125s 0s var(--easing);
  opacity: 1;
}

.square-55d63.selected,
.highlight1-32417,
.highlight2-9c5d2 {
  opacity: 1;
}
.square-55d63.selected:before,
.highlight1-32417:before,
.highlight2-9c5d2:before {
  background-image: url("/_img/chesspieces/sctheme/square-white.png") !important;
  opacity: 1;
}

.square-highlight {
  opacity: 1;
  background: red;
}

@keyframes badge-in {
  0% {
    transform: scale(0) rotate(-15deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
.badge-55d63 {
  pointer-events: none;
  z-index: 10000;
  position: absolute;
  top: -20%;
  right: -20%;
  background: var(--color-light);
  color: var(--color-dark);
  display: inline-block;
  box-shadow: 0 0 0 4px var(--color-dark); /* Green color for positive evaluation */
  width: 40%;
  height: 40%;
  border-radius: 50%;
  display: flex;
  font-size: 2.3vh;
  line-height: 3.3vh;
  justify-content: center;
  font-weight: 800;
  transition: all 0.125s 0s var(--easing);
}
.badge-55d63 .wave-pulse {
  position: absolute;
  top: 0;
  left: 0;
}
.badge-55d63:after {
  content: "";
  display: inline-block;
  position: absolute;
  height: 100%;
  width: 100%;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-name: badge-in;
  background-size: contain;
  background-position: center center;
}
.badge-55d63.skull {
  background-color: red;
  box-shadow: 0 0 20px red;
}
.badge-55d63.skull:after {
  background-image: url("/_svg/badge-skull-black.svg");
}
.badge-55d63.fail {
  background-color: red;
  box-shadow: 0 0 20px red;
}
.badge-55d63.fail:after {
  background-image: url("/_svg/badge-cross-black.svg");
}
.badge-55d63.success {
  box-shadow: 0 0 20px red, 0 0 5px red;
  background-color: red;
}
.badge-55d63.success:after {
  background-image: url("/_svg/badge-check-black.svg");
}
.badge-55d63.win {
  background-color: red;
  box-shadow: 0 0 20px red;
}
.badge-55d63.win:after {
  background-image: url("/_svg/badge-star-black.svg");
}
.badge-55d63 {
  transform: scale(0) rotate(90deg);
}
.badge-55d63.pop {
  transform: scale(1) rotate(0deg);
}

.row-5277c:nth-child(2n) .square-55d63:nth-child(2n) {
  background: rgba(243, 233, 232, 0.025);
}
.row-5277c:nth-child(2n-1) .square-55d63:nth-child(2n-1) {
  background: rgba(243, 233, 232, 0.025);
}

.square-55d63:before {
  transition: all 0.125s 0s var(--easing);
}

.captured-417db {
  transform-origin: bottom center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  filter: drop-shadow(0px 0px 1px rgb(23, 23, 26)) drop-shadow(0px 0px 5px rgb(23, 23, 26)) drop-shadow(0px 0px 10px rgb(23, 23, 26));
}

.board-puzzle .piece-417db {
  transform-origin: bottom center;
  transition: transform 0.25s 0s var(--easing), background-size 2s 0s var(--easing);
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}
.ready .board-puzzle .piece-417db {
  background-size: 100%;
  transform: scale(1.035) translateY(0%);
  transition: background-size 2s 0s var(--easing);
}
.board-puzzle .piece-417db {
  transform: scale(0) translateY(50%);
}

.piece-417db {
  background-size: 99%;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  transform: scale(1.07) translateY(0%);
}

.resign-square,
.draw-square,
.stalemate-square,
.check-square,
.checkmate-square {
  z-index: 1000;
}
.resign-square:before,
.draw-square:before,
.stalemate-square:before,
.check-square:before,
.checkmate-square:before {
  z-index: 1000;
  opacity: 1;
}

.white-1e1d7 {
  backface-visibility: hidden;
  position: relative;
}

.black-3c85d {
  background-color: #b58863;
  color: #f0d9b5;
  background-color: transparent;
}

.delta-rating {
  z-index: 1000;
  transition: all 2s 0s linear;
  margin-top: -4vmin;
  position: absolute;
  width: 100%;
  text-align: center;
}
.delta-rating 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: 10vh;
  opacity: 0;
  transform: rotate(-15deg);
  transition: all 2s 0.1s var(--easing);
  font-size: 5vh;
  opacity: 1;
  letter-spacing: 0;
  transform: rotate(-5deg);
}
.delta-rating.fade {
  transform: translateY(-100%);
}
.delta-rating.fade span {
  transform: scale(1.2);
}
.delta-rating.out span {
  opacity: 0;
  transform: scale(0) rotate(0deg);
  transition: all 0.125s 0s var(--easing);
}

@keyframes card-popup {
  0% {
    transform: scale(0, 0);
  }
  90% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
.couple-hover:hover a:before, .couple-hover:hover button:before {
  background-size: 40%;
  transform: translateX(-100%);
}
.couple-hover:hover a:after, .couple-hover:hover button:after {
  transform: translateX(-50%);
  opacity: 1;
}

.hide-home-link #home {
  opacity: 0;
  pointer-events: none !important;
}

.hide-deck-link .back-to-decks {
  opacity: 0;
  pointer-events: none !important;
}

.page-talk *,
.page-talk *:before,
.page-talk *:after {
  box-sizing: border-box;
}
.page-talk html,
.page-talk body {
  margin: 0;
  padding: 0;
  font-family: "ND Kern";
  background: black;
  position: fixed;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  background-color: #1B1B1B;
}
.page-talk .screen {
  height: 100vh;
  width: 100vw;
  position: fixed;
  overflow: hidden;
}
.page-talk .card {
  perspective: 1000px; /* Set the perspective distance */
}
.page-talk .card .question:after {
  content: "Question";
}
.page-talk .card .answer:after {
  content: "Answer";
}
.page-talk .card .question:after {
  opacity: 0.25;
  content: "Q";
}
.page-talk .card .answer:after {
  opacity: 0.25;
  content: "A";
}
.page-talk .card:not(.no-flip) .question {
  transform: rotateX(0deg);
}
.page-talk .card:not(.no-flip) .answer {
  transform: rotateX(180deg);
}
.page-talk .card:not(.no-flip).show-answer .question, .show-answer .page-talk .card:not(.no-flip) .question {
  transform: rotateX(180deg);
}
.page-talk .card:not(.no-flip).show-answer .answer, .show-answer .page-talk .card:not(.no-flip) .answer {
  transform: rotateX(360deg);
}
.page-talk .cover {
  box-shadow: 0 0 40px 0px rgba(255, 255, 255, 0);
  position: relative;
  will-change: auto;
  cursor: pointer !important;
  transform: translateX(-50%) translateY(-50%) scale(1);
  transition: all 0.5s ease-in-out 0s;
}
.page-talk .cover i {
  position: absolute;
  top: -10px;
  right: -10px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  color: black;
  background: var(--color-light);
  text-align: center;
  font-style: normal;
  line-height: 45px;
  font-weight: 800;
  font-size: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}
.page-talk .cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  flex-direction: column-reverse;
}
.page-talk .cover > * {
  pointer-events: none;
}
.page-talk .cover .title {
  margin: 0;
  font-size: 60px;
  line-height: 0.9;
  font-weight: 700;
  padding-bottom: 0.2em;
}
.page-talk .cover .subtitle {
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}
.page-talk .no-flip .answer {
  position: relative !important;
}
.page-talk .card-inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  width: 375px;
  height: 500px;
  padding: 30px 35px;
  padding-bottom: 24px;
  border-radius: 15px;
  color: var(--color-light);
  background-color: #0b0b0d;
  transition: all 0.35s ease-in-out 0s;
  backface-visibility: hidden !important;
}
.mobile-nav .page-talk .card-inner {
  transition: opacity 0.1s ease-in-out 0s;
  opacity: 0;
}
.page-talk .card-inner:after {
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  padding-top: 1em;
}
.page-talk .card-inner.answer {
  position: absolute;
  top: 0;
}
.page-talk .card-inner.answer p {
  -webkit-hyphens: auto;
          hyphens: auto;
}
.page-talk .card-inner.answer p:not(:first-child) {
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.page-talk .card-inner.question p:last-child:not(:first-child) {
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.page-talk .card-inner p {
  transition: all 0.35s ease-in-out 0s;
  color: #f3e9e8;
  outline: none;
  margin: 0;
  font-size: 35px;
  line-height: 1;
  font-family: "ND Kern";
  font-weight: 500;
  /*overflow: hidden;*/
  /*display: -webkit-box;*/
  /*-webkit-line-clamp: 6;*/
  /*-webkit-box-orient: vertical;*/
  /*scroll-behavior: smooth;*/
  /*overflow-y: scroll;*/
  /*overflow-x: hidden;*/
  margin-top: 0.0125em;
}
.page-talk #screen-deck {
  transition: all 0.5s ease-in-out 0s;
  pointer-events: none;
}
.page-talk #screen-deck #backgrounds {
  transition: all 0.125s ease-in-out 0s;
  opacity: 0;
}
.page-talk #screen-deck.active {
  pointer-events: auto;
}
.page-talk #screen-deck.active #deck {
  transform: translateX(0%) scale(1, 1);
  transition: all 0.35s ease-out 0.2s;
}
.page-talk #screen-deck.active #backgrounds {
  transition: all 0.125s ease-in-out 0.2s;
  opacity: 1;
}
.page-talk #screen-deck.active .header {
  transform: translateY(0%);
  opacity: 1;
  transition: all 0.35s ease-in-out 0.2s;
}
.page-talk #screen-deck.active .footer {
  transform: translateY(0%);
  opacity: 1;
  transition: all 0.35s ease-in-out 0.2s;
}
.page-talk #screen-deck.active .card {
  pointer-events: auto;
}
.page-talk #screen-deck.active.open-menu .footer {
  opacity: 0;
  transition: all 0.35s ease-in-out 0s;
}
.page-talk #screen-deck.active.open-menu #deck {
  transition: all 0.5s ease-in-out 0s;
  transform: translateX(0%) scale(0);
}
.page-talk #screen-decks .card {
  transform: translateX(0vw) translateY(-50%) scale(1);
}
.page-talk #screen-decks.active .card {
  transform: translateX(-100vw) translateY(-50%) scale(1);
}
.page-talk #screen-deck #deck {
  transform: translateX(100%);
}
.page-talk #screen-deck.active {
  transform: translateX(0%);
}
.page-talk #screen-deck.active #backgrounds {
  transform: translateX(0%);
}
.page-talk #screen-deck.active #deck {
  transform: translateX(0%);
}
.page-talk #card-previewer {
  transform-origin: 0% 0%;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  gap: 100px;
  padding: 50px 25px;
  justify-content: center;
}
.page-talk #card-previewer .card-pair {
  display: flex;
  gap: 4px;
}
.page-talk #screen-decks {
  transition: opacity 0.25s ease-in-out 0s;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
}
.page-talk #screen-decks.no-scroll {
  overflow: hidden;
}
.page-talk #screen-decks .deck {
  position: relative;
  scroll-snap-align: center;
  height: 100vmin;
  width: 100vw;
  overflow: hidden;
  transition: height 0.25s ease-in-out 0s;
}
.page-talk #screen-decks .deck .header {
  transition: all 0.25s ease-in-out 0s;
  display: none;
}
.page-talk #screen-decks .deck.open {
  transition: all 0.25s ease-in-out 0s;
  height: 100vh;
}
.page-talk #screen-decks .deck.open .header {
  opacity: 0;
}
.page-talk #screen-decks .deck.open .deck-background {
  transition: all 0.65s ease-in-out 0s;
  animation-play-state: paused;
}
.page-talk #screen-decks .deck .deck-background {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  position: absolute;
  height: 100vh;
  width: 100vw;
}
@media (hover: hover) {
  .page-talk #screen-decks .deck .deck-background {
    background-attachment: fixed;
  }
}
@keyframes pulsate-background {
  0% {
    background-size: 100%;
  }
  50% {
    background-size: 150%;
  }
  100% {
    background-size: 100%;
  }
}
.page-talk #backgrounds {
  pointer-events: none;
  width: 100vw;
  width: 100vmin;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  z-index: 0;
  transform-origin: 50% 50%;
  overflow: hidden;
}
.page-talk #backgrounds .image {
  left: 50%;
  position: absolute;
  background-size: cover;
  background-position: right center;
  background-position: center;
  transform: scale(1, 1);
  transform: translateX(0);
  height: 102vh;
  width: 102vh;
  margin: -1vh;
  margin-left: -51vh;
  transition: opacity 0.25s ease-in-out 0s;
}
@media only screen and (min-width: 1000px) {
  .page-talk #backgrounds .image {
    height: 102vmin;
    width: 102vmin;
    margin: -1vmin;
    margin-left: -51vmin;
  }
}
.page-talk #deck {
  transition: transform 0.25s ease-in-out 0s;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 100000;
  pointer-events: none;
}
.page-talk .deck .card,
.page-talk #deck .card {
  transform: translateX(-50%) translateY(-50%) scale(0);
  position: absolute;
  will-change: auto;
  margin-top: -5px;
  cursor: grab;
  top: 50%;
  left: 50%;
}
.deck .page-talk .card {
  transform: translateX(-50%) translateY(-50%) scale(1);
}
.page-talk .card:active {
  cursor: grabbing !important;
}
.page-talk .card .card-inner p {
  text-wrap: balance;
}
.page-talk .card .card-inner p::after {
  opacity: 0.25;
  text-transform: uppercase;
  padding: 30px;
  bottom: 0;
  right: 0;
  font-size: 10px;
  position: absolute;
  content: attr(class);
}
.page-talk .card .card-inner .finer {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 300;
  margin-top: 0.15em;
}
.page-talk .card .card-inner .fine {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 300;
  margin-top: 0.15em;
}
.page-talk .card .card-inner .surpass {
  font-size: 26px;
  line-height: 1.3;
}
.page-talk .card .card-inner .over {
  font-size: 28px;
  line-height: 1.25;
}
.page-talk .card .card-inner .long {
  font-size: 35px;
  line-height: 1.2;
}
.page-talk .card .card-inner .normal {
  font-size: 47px;
  line-height: 1.15;
}
.page-talk .card .card-inner .short {
  font-size: 55px;
  line-height: 1.05;
}
.page-talk .card .card-inner .brief {
  font-size: 60px;
  line-height: 1.05;
  margin-right: -0.125em;
}
.page-talk #deck-header {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 1000000;
  color: var(--color-light);
  text-shadow: 0 2px 25px rgba(0, 0, 0, 0.25);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.05em;
  pointer-events: none;
  background: radial-gradient(at top left, rgba(23, 23, 26, 0.9) 1%, rgba(23, 23, 26, 0) 70%);
  height: 20vh;
  width: 20vh;
}
.page-talk #deck-header > * {
  pointer-events: auto;
}
.page-talk #deck-header .back {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  position: absolute;
  top: 0;
  bottom: 80px;
  left: 0;
  text-transform: uppercase;
  z-index: 10001;
  font-weight: 100;
  height: 65px;
  transition: all 0.25s ease-in-out 0s;
}
.page-talk #deck-header .back:hover:before {
  background-size: 40%;
  transform: translateX(-100%);
}
.page-talk #deck-header .back:hover:after {
  transform: translateX(-50%);
  opacity: 1;
  background-image: url("/_img/cross.svg");
}
.page-talk #deck-header .back:before {
  transition: all 0.125s ease-in-out 0s;
  display: inline-block;
  height: 65px;
  width: 65px;
  content: "";
  background-image: url("/_img/stack.svg");
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: center center;
  top: -1px;
  position: relative;
  pointer-events: none;
}
.page-talk #deck-header .back:after {
  pointer-events: none;
  transition: all 0.125s ease-in-out 0s;
  display: inline-block;
  height: 65px;
  width: 65px;
  margin-left: -32px;
  content: "";
  background-image: url("/_img/arrow.svg");
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: center center;
  opacity: 0.2;
}
.page-talk .audio {
  position: fixed;
  top: 20px;
  right: 25px;
  height: 40px;
  width: 150px;
  z-index: 1000000;
  display: none;
}
.page-talk #counter {
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: center;
  font-feature-settings: "tnum";
  font-weight: 500;
  font-size: 14px;
  line-height: 40px;
  padding: 0 15px;
  opacity: 0.25;
  text-transform: uppercase;
}

#playLeap {
  overflow: hidden;
}
#playLeap #gameContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}
#playLeap .game-header {
  margin-bottom: 20px;
}
#playLeap #world {
  padding: 80px;
  position: relative;
  overflow: hidden;
}
#playLeap #world:after {
  top: 0;
  left: 0;
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  box-shadow: inset 0 0 15px 20px var(--color-dark);
  z-index: 10000;
}
#playLeap #leapSlash {
  position: fixed;
  height: 4vmin;
  bottom: 0;
  width: 100%;
  height: 10%;
  z-index: 110;
}
#playLeap #leapSlash .particle {
  transition: height 5s 0s ease-out, opacity 2s 0s ease-out, filter 1s 0s ease-out, transform 6s 0.1s ease-out;
  height: 6vmin;
  width: 6vmin;
  border-radius: 3vmin;
  background: rgba(255, 0, 0, 0.25);
  position: absolute;
}
#playLeap #leapSlash .particle.fade {
  opacity: 0;
}
#playLeap #leapScreen {
  z-index: -100000;
  top: 0;
  height: 10%;
  width: 100%;
  position: fixed;
  transition: all 0.35s 0s linear;
}
#playLeap #leapScreen .particle {
  transition: all 30s 0s ease-in-out;
  height: 4vmin;
  width: 4vmin;
  border-radius: 50%;
  background: rgba(38, 32, 34, 0.2);
  position: absolute;
}
#playLeap #leapScreen .particle:nth-child(2n) {
  box-shadow: none;
  height: 0.5vmin;
  width: 0.5vmin;
  box-shadow: none;
  background: rgb(38, 32, 34);
}
#playLeap #leapScreen .particle:nth-child(3n-1) {
  box-shadow: none;
  height: 10vmin;
  width: 10vmin;
  box-shadow: none;
  background: rgba(32, 22, 22, 0.3);
}
#playLeap #leapScreen .particle.fade {
  transform: translateY(100vh);
}
#playLeap #leapBackground,
#playLeap #leapForeground {
  opacity: 1;
  position: fixed;
  width: 120%;
  height: 25%;
  left: -10%;
  bottom: -5%;
  transition: all 0.5s 0s linear;
}
#playLeap #leapBackground .particle,
#playLeap #leapForeground .particle {
  height: 16vmin;
  width: 16vmin;
  border-radius: 50%;
  background: rgba(32, 28, 30, 0.4);
  position: absolute;
}
#playLeap #leapForeground {
  filter: blur(10px);
  z-index: 10000;
}
#playLeap #leapBackground {
  filter: blur(5px);
  z-index: -10000;
}
#playLeap #leapBackground .particle {
  height: 4vmin;
  width: 4vmin;
  border-radius: 4vmin;
}
#playLeap #leapBlood {
  z-index: 10000;
  position: absolute;
  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));
}
#playLeap #leapPoem {
  width: 100%;
  text-align: center;
  position: absolute;
  z-index: 10000;
  color: gray;
  opacity: 0.025;
  font-size: 33vh;
  line-height: 0.8;
  text-transform: uppercase;
  animation: poem-scroll 3000s infinite;
  animation-timing-function: linear;
  display: none;
}
#playLeap #leap {
  position: relative;
  background-color: transparent;
}
#playLeap #leap .cell {
  width: 8vmin;
  height: 8vmin;
}
#playLeap #leap .platform {
  position: absolute;
  width: 8vmin;
  bottom: 8vmin;
  height: 0;
  z-index: 1000;
}
#playLeap #leap .platform:before {
  z-index: 1000;
  position: relative;
  content: "";
  border-radius: 50px;
  border-top: 0.5vmin solid var(--color-light);
  display: block;
  margin: -0.25vmin;
  box-shadow: 0 2px 10px var(--color-dark);
}
#playLeap #leap .platform:after {
  margin: 0 -1vmin;
  content: "";
  display: block;
  height: 6vmin;
  background: red;
  background: radial-gradient(at top center, rgba(23, 23, 26, 0.5) 1%, rgba(23, 23, 26, 0) 70%);
}
#playLeap #leap [data-elevation="0"] {
  bottom: 0vmin;
  left: 0vmin;
  width: 100%;
  opacity: 0;
}
#playLeap #leap [data-elevation="1"] {
  bottom: 8vmin;
  left: 8vmin;
  width: 40vmin;
}
#playLeap #leap [data-elevation="2"] {
  width: 24vmin;
  left: 16vmin;
  bottom: 16vmin;
}
#playLeap #leap [data-elevation="3"] {
  left: 24vmin;
  bottom: 24vmin;
}
#playLeap #leapGrid {
  box-sizing: border-box;
}
#playLeap #leapGrid .cell:before {
  transition: opacity 0s 0s var(--easing);
}
#playLeap #leapGrid .cell.highlighted:not(.checkmate-square):before {
  background-image: url("/_img/chesspieces/sctheme/square-white.png") !important;
  opacity: 0.4;
}
#playLeap .cell {
  display: flex;
  justify-content: center;
  align-items: center;
}
#playLeap .cell span {
  position: relative;
  z-index: 10000;
  transition: all 0.25s 0s var(--easing);
  transform: scale(0);
  opacity: 0;
  letter-spacing: 2em;
  margin-top: 1vmin;
  display: inline-block;
  line-height: 7.75vmin;
  color: red;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 10px red, 0 0 5px red;
  font-size: 10vh;
  opacity: 0;
  letter-spacing: 0.1em;
  transform: rotate(-15deg);
}
#playLeap .cell.checkmate-square span {
  transition: all 0.25s 0.1s var(--easing);
  font-size: 5vh;
  opacity: 1;
  letter-spacing: 0;
  transform: rotate(-5deg);
}
#playLeap .cell.checkmate-square.wasted span {
  transition: all 0.25s 0s var(--easing);
  font-size: 0vh;
  opacity: 0;
  letter-spacing: 2em;
  transform: rotate(45deg);
}
#playLeap .axe {
  transition: transform 3s 0s ease-out;
  bottom: 0;
  position: absolute;
  width: 4vmin;
  height: 4vmin;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#playLeap .axe.forward {
  transform: rotate(0deg) translate(0%, 0%);
}
#playLeap .axe.backward {
  transform: rotate(0deg) translate(0%, 0%);
}
#playLeap .axe:not(.new).forward {
  transform: translateX(120vw);
  transform: rotate(0deg) translate(7500%, 50%);
}
#playLeap .axe:not(.new).backward {
  transform: translateX(-7500%);
  transform: rotate(0deg) translate(-7500%, 50%);
}
#playLeap .axe.aim-up.forward {
  transform: rotate(-85deg) translate(0%, 0%);
}
#playLeap .axe.aim-up.backward {
  transform: rotate(85deg) translate(0%, 0%);
}
#playLeap .axe.aim-up:not(.new).forward {
  transform: translateX(7500%);
  transform: rotate(-85deg) translate(7500%, 0%);
}
#playLeap .axe.aim-up:not(.new).backward {
  transform: translateX(-7500%);
  transform: rotate(85deg) translate(-7500%, 0%);
}
#playLeap .axe.aim-high.forward {
  transform: rotate(-10deg) translate(0%, 0%);
}
#playLeap .axe.aim-high.backward {
  transform: rotate(10deg) translate(0%, 0%);
}
#playLeap .axe.aim-high:not(.new).forward {
  transform: translateX(7500%);
  transform: rotate(-10deg) translate(7500%, 0%);
}
#playLeap .axe.aim-high:not(.new).backward {
  transform: translateX(-7500%);
  transform: rotate(10deg) translate(-7500%, 0%);
}
#playLeap .axe:not(.new).forward:after {
  transform: rotate(1440deg);
}
#playLeap .axe:not(.new).backward:after {
  transform: rotate(-1440deg);
}
#playLeap .axe:after {
  transition: transform 1.5s 0s linear;
  position: absolute;
  content: "";
  top: 0;
  left: -2vmin;
  right: -2vmin;
  bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("/_img/chesspieces/sctheme-b/wK-b.png");
  margin: -3.125%;
  transform-origin: center center; /* Set the transform origin to bottom center */
}
#playLeap #leap .loot .file {
  top: -2vmin;
}
#playLeap #leap .loot.collected .loot-cross {
  display: none;
}
#playLeap #leap .loot.uncollected {
  filter: blur(0.05em);
}
#playLeap #leap .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);
}
#playLeap #leap .loot.uncollected {
  transition: all 0.25s 0s ease-out;
}
#playLeap #leap .loot.uncollected .horz {
  transform: scale(1, 0);
}
#playLeap #leap .loot.uncollected .vert {
  transform: scale(0, 1);
}
#playLeap #leap .loot:nth-child(1) .loot-cross {
  animation-delay: -0.26s;
}
#playLeap #leap .loot:nth-child(2) .loot-cross {
  animation-delay: -1.6s;
}
#playLeap #leap .loot:nth-child(3) .loot-cross {
  animation-delay: 1.83s;
}
#playLeap #leap .loot .loot-cross {
  position: absolute;
  display: inline-block;
  height: 8vmin;
  width: 8vmin;
  filter: blur(0.025em);
}
#playLeap #leap .loot .loot-cross span {
  border-radius: 1px;
  box-shadow: 0 0px 10px var(--color-light);
  background: rgb(239, 231, 229);
  display: block;
  position: absolute;
}
#playLeap #leap .loot .loot-cross .vert {
  height: 5vmin;
  width: 0.5vmin;
  left: 50%;
  margin-left: -0.25vmin;
}
#playLeap #leap .loot .loot-cross .horz {
  height: 0.5vmin;
  width: 3.2vmin;
  top: 13%;
  left: 50%;
  margin-left: -1.6vmin;
}
#playLeap #leap .loot {
  bottom: 0;
  width: 8vmin;
  height: 8vmin;
  position: absolute;
  transform: scale(1) translateY(0%);
  opacity: 1;
  transition: transform 0.25s 0s ease-in-out, opacity 0.25s 0s ease-in-out;
}
#playLeap #leap .loot.float {
  transform: scale(1) translateY(-50%);
  transition: transform 3s 0s linear, opacity 0.25s 0s ease-in-out;
}
#playLeap #leap .loot.pop {
  opacity: 0;
  transform: scale(0.9) translateY(-100%);
}
#playLeap .splatter {
  width: 8vmin;
  height: 8vmin;
  position: absolute;
  bottom: 0;
}
#playLeap #king,
#playLeap .piece,
#playLeap .knight,
#playLeap .bishop,
#playLeap .rook {
  will-change: left, right, bottom; /* Specify properties that are likely to change */
  z-index: 900;
  filter: drop-shadow(0px 10px 10px rgb(23, 23, 26));
  bottom: 0;
  position: absolute;
  width: 8vmin;
  height: 8vmin;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#playLeap #king.killed:before,
#playLeap .piece.killed:before,
#playLeap .knight.killed:before,
#playLeap .bishop.killed:before,
#playLeap .rook.killed:before {
  transform: scale(0);
  transition: transform 0.125s 0s ease-out, opacity 0.5s 0s ease-in-out; /* Added left to the transition */
  opacity: 0.2;
  filter: blur(10px);
}
#playLeap #king:before,
#playLeap .piece:before,
#playLeap .knight:before,
#playLeap .bishop:before,
#playLeap .rook:before {
  transition: all 0.35s 0s ease-in-out;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: -3.125%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
}
#playLeap .rook {
  transition: all 0.4s 0s ease-in-out; /* Added left to the transition */
}
#playLeap #leap > .particle-container {
  bottom: 0%;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  width: auto;
  margin-left: -14.5%;
  transform: scale(0.9);
  transition: all 0.05s 0s var(--easing);
}
#playLeap #leap > .particle-container.fade {
  transform: scale(1);
}
#playLeap .hurt-indicator {
  transition: all 1s 0s linear;
  margin-top: -4vmin;
  position: absolute;
  bottom: 75%;
  height: 8vmin;
  width: 8mvin;
}
#playLeap .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: 10vh;
  opacity: 0;
  transform: rotate(-15deg);
  transition: all 1s 0.1s var(--easing);
  font-size: 5vh;
  opacity: 1;
  letter-spacing: 0;
  transform: rotate(-5deg);
}
#playLeap .hurt-indicator.fade {
  transform: translateY(-100%);
}
#playLeap .hurt-indicator.fade span {
  opacity: 0;
  transform: rotate(5deg);
}
#playLeap .particle-container {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all 0.25s 0s var(--easing);
  transform: scale(0);
}
#playLeap .particle-container.fade {
  transform: scale(1);
}
#playLeap .particle-container.fade .particle:nth-child(2) {
  height: 12vmin;
  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%);
}
#playLeap .particle-container.fade .particle:nth-child(3) {
  height: 18vmin;
  transition: height 3s 0s ease-out, opacity 1s 0s ease-out, filter 1s 0s ease-out, transform 4s 0s ease-out;
  transform: translateY(500%);
}
#playLeap .particle-container.fade .particle:nth-child(5) {
  height: 24vmin;
  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%);
}
#playLeap .particle-container.fade .particle {
  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%);
}
#playLeap .particle-container .particle {
  height: 6vmin;
  width: 6vmin;
  border-radius: 3vmin;
  background: rgba(255, 0, 0, 0.25);
  position: absolute;
}
#playLeap #king {
  z-index: 1000 !important;
}
#playLeap #king.flash.inside .shine {
  transform: scale(1);
  transition: transform 0.5s 0s ease-out;
}
#playLeap #king .shine {
  display: none;
  transition: transform 0.5s 0s ease-in;
  transform: scale(0);
  position: absolute;
  top: -10vmin;
  bottom: -10vmin;
  left: -10vmin;
  right: -10vmin;
  background: radial-gradient(circle, rgba(243, 233, 232, 0.4) 0%, rgba(243, 233, 232, 0.05) 30%, rgba(243, 233, 232, 0) 50%);
}
#playLeap #king.pause .feet {
  top: -10vmin;
  bottom: -10vmin;
  left: -10vmin;
  right: -10vmin;
  background: radial-gradient(circle, rgba(243, 233, 232, 0.4) 0%, rgba(243, 233, 232, 0.05) 30%, rgba(243, 233, 232, 0) 50%);
  display: block;
}
#playLeap #king .feet {
  position: absolute;
  top: 100%;
  bottom: 0vmin;
  left: 1.75vmin;
  right: 1.75vmin;
  margin: 0 -3.125%;
  top: 50%;
  bottom: -2vmin;
  display: none;
}
#playLeap #king.jumpdown .feet {
  display: block;
}
#playLeap #king.jumpup .feet {
  display: block;
}
#playLeap #king .swoosh {
  z-index: -1;
  transition: all 0.25s 0s ease-out;
  position: absolute;
  top: 90%;
  bottom: 0px;
  left: 1.75vmin;
  right: 1.75vmin;
  margin: -3.125%;
  background: linear-gradient(to bottom, rgba(243, 233, 232, 0.25) 0%, rgba(243, 233, 232, 0) 100%);
  opacity: 0;
  display: none;
}
#playLeap #king {
  z-index: 100;
  left: 0vmin;
  filter: drop-shadow(0px 10px 10px rgb(23, 23, 26));
  transition: left 0.1s 0s linear;
}
#playLeap #king:not(.forward):not(.backward).jumpdown .swoosh {
  transition: all 0.25s 0.25s ease-in-out;
  bottom: 20px;
}
#playLeap #king:not(.forward):not(.backward).jumpup .swoosh {
  transition: all 0.25s 0s ease-in-out;
  bottom: -18vmin;
  opacity: 1;
}
#playLeap #king:not(.forward):not(.backward).jumpdown:after {
  transform: translateY(0%);
  transition: transform 0.1s 0.1s ease-out;
}
#playLeap #king:not(.forward):not(.backward).jumpup:after {
  transition: transform 0.1s 0.1s ease-out;
  transform: translateY(-50%);
}
#playLeap #king:before {
  transition: all 0.1s 0s ease-in-out;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: -3.125%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url("/_img/chesspieces/sctheme-b/wK-a.png");
}
#playLeap #king:after {
  z-index: -2;
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 55%;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("/_img/chesspieces/sctheme-b/wK-b.png");
  margin: -3.125%;
  transform-origin: bottom center; /* Set the transform origin to bottom center */
}
#playLeap #king.face-backward:after {
  transform: rotate(5deg) translateX(-1%) scale(1);
}
#playLeap #king.face-forward:after {
  transform: rotate(-5deg) translateX(1%) scale(1);
}
#playLeap #king.face-backward.stab:after {
  top: -15px;
  transform: rotate(25deg) translateX(-3%) scale(1);
}
#playLeap #king.face-forward.stab:after {
  top: -15px;
  transform: rotate(-2s5deg) translateX(3%) scale(1);
}
#playLeap #king.face-backward.aim:after {
  top: -5px;
  transform: rotate(15deg) translateX(-3%) scale(1);
}
#playLeap #king.face-forward.aim:after {
  top: -5px;
  transform: rotate(-15deg) translateX(3%) scale(1);
}
#playLeap #king.face-forward.unloaded:after {
  transform: rotate(22.5deg) translateX(50%) scale(0);
  opacity: 0;
}
#playLeap #king.face-backward.unloaded:after {
  transform: rotate(-22.5deg) translateX(-50%) scale(0);
  opacity: 0;
}
#playLeap #king.crouch:before {
  background-size: 95%;
  background-position: center bottom;
}
#playLeap #king.forward:before {
  transform: rotate(2deg);
  transform: rotate(3deg) translateX(3%);
  background-size: 98%;
}
#playLeap #king.forward:after {
  transform: rotate(-6deg);
  transform: rotate(-16deg) translateX(3%);
}
#playLeap #king.forward.jumpup {
  transition: transform 0.25s 0s ease-in, left 0.5s 0s linear; /* Added left to the transition */
  transform: rotate(180deg);
}
#playLeap #king.forward.jumpdown {
  transition: transform 0.25s 0s ease-out, left 0.5s 0s linear; /* Added left to the transition */
  transform: rotate(360deg);
}
#playLeap #king.backward:before {
  transform: rotate(-2deg);
  transform: rotate(-3deg) translateX(-3%);
  background-size: 98%;
}
#playLeap #king.backward:after {
  transform: rotate(6deg);
  transform: rotate(16deg) translateX(-3%);
}
#playLeap #king.backward.jumpup {
  transition: transform 0.25s 0s ease-in, left 0.5s 0s linear; /* Added left to the transition */
  transform: rotate(-180deg);
}
#playLeap #king.backward.jumpdown {
  transition: transform 0.25s 0s ease-out, left 0.5s 0s linear; /* Added left to the transition */
  transform: rotate(-360deg);
}
#playLeap .pawn {
  transition: all 1s 0s var(--easing);
  bottom: 100%;
  opacity: 0;
}
#playLeap .pawn.dropping {
  opacity: 1;
  transition: all 1s 0s linear, opacity 0.25s 0s var(--easing);
}
#playLeap .pawn.dropped {
  transition: all 0.5s 0s var(--easing);
  bottom: 0;
  opacity: 1;
}
#playLeap .pawn.seeking {
  transition: all 60s 0s linear;
  transition: all 0.4s 0s ease-in-out;
  bottom: 0;
  opacity: 1;
}
#playLeap .pawn.creeping {
  transition: all 60s 0s linear;
  bottom: 0;
  opacity: 1;
}
#playLeap .pawn.from-left {
  transform: scale(1, 1) translateY(0%) translateX(0%) rotate(0deg);
}
#playLeap .pawn.from-left.dropping {
  transform: scale(1, 1) translateY(100%) translateX(0%) rotate(1deg);
}
#playLeap .pawn.from-left.dropped {
  transform: scale(1, 1) translateY(0px) translateX(0%) rotate(360deg);
}
#playLeap .pawn.from-right {
  transform: scale(1, 1) translateY(0%) translateX(0%) rotate(0deg);
}
#playLeap .pawn.from-right.dropping {
  transform: scale(1, 1) translateY(100%) translateX(0%) rotate(-1deg);
}
#playLeap .pawn.from-right.dropped {
  transform: scale(1, 1) translateY(0px) translateX(0%) rotate(-360deg);
}
#playLeap .pawn:before {
  transition: all 0.1s 0s ease-in-out;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: -3.125%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}
#playLeap .rook.from-left {
  left: 0;
}
#playLeap .rook.from-right {
  right: 0;
}
#playLeap .rook {
  transition: transform 0.6s 0s var(--easing), background-size 0.3s 0s var(--easing), opacity 0.1s 0s var(--easing);
  background-size: 100%;
  opacity: 1;
}
#playLeap .rook.dead {
  transition: background-size 0.1s 0s var(--easing), opacity 0.1s 0s var(--easing);
  background-size: 0%;
}
#playLeap .rook.new:before {
  opacity: 0;
  background-size: 0%;
}
#playLeap .rook.push-0 {
  bottom: 0vmin;
}
#playLeap .rook.push-1 {
  bottom: 8vmin;
}
#playLeap .rook.push-2 {
  bottom: 16vmin;
}
#playLeap .rook.push-3 {
  bottom: 24vmin;
}
#playLeap .rook:before {
  background-image: url("/_img/chesspieces/sctheme-b/bR.png");
}
#playLeap .knight {
  transition: background-size 0.3s 0s var(--easing), opacity 0.1s 0s var(--easing);
  background-size: 100%;
  opacity: 1;
}
#playLeap .knight.from-left {
  transform: scaleX(-1);
  left: 0vmin;
}
#playLeap .knight.from-right {
  right: 0vmin;
}
#playLeap .knight.new:before {
  opacity: 0;
  background-size: 0%;
}
#playLeap .knight:before {
  background-image: url("/_img/chesspieces/sctheme-b/bN.png");
}
#playLeap .bishop.from-left {
  left: 0vmin;
}
#playLeap .bishop.from-right {
  right: 0vmin;
}
#playLeap .bishop {
  transition: background-size 0.3s 0s var(--easing), opacity 0.1s 0s var(--easing);
  background-size: 100%;
  opacity: 1;
}
#playLeap .bishop.new:before {
  opacity: 0;
  background-size: 0%;
}
#playLeap .bishop:before {
  background-image: url("/_img/chesspieces/sctheme-b/bB.png");
}
#playLeap #toggleMonsters {
  position: absolute;
  left: 0;
  bottom: 0;
  margin-left: 6px;
  margin-bottom: 12px;
}
#playLeap #startGame {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-right: 6px;
  margin-bottom: 12px;
}

@keyframes lantern {
  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(0.9, 0.9);
  }
  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.05, 1.05);
  }
  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(0.92, 0.92);
  }
}
@keyframes kingBreathe {
  0%, 20% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(0.95, 0.95);
  }
  40% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.97, 0.97);
  }
  70%, 100% {
    transform: scale(1, 1);
  }
}
#gameControls {
  position: fixed;
  bottom: 0;
  display: flex;
  width: 100%;
  align-content: center;
  justify-content: center;
  display: none;
}
#gameControls button {
  height: 100px;
  width: 100px;
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: center center;
  opacity: 0.2;
  font-size: 0;
}
#gameControls button:hover, #gameControls button:active {
  opacity: 1;
}
#gameControls #keyLeft {
  background-image: url("/_img/arrow-left.svg");
}
#gameControls #keyUp {
  background-image: url("/_img/arrow-up.svg");
}
#gameControls #keyRight {
  background-image: url("/_img/arrow-right.svg");
}

@keyframes moveRook {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100vw);
  }
}
.castle {
  z-index: 50;
  background-image: url("/_img/leap/castle.svg");
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: -0.29vmin;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
@keyframes poem-scroll {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes lootVibrate {
  0% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-5%);
  }
  50% {
    transform: translateX(0%);
  }
  75% {
    transform: translateX(5%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes lootSrink {
  0% {
    transform: scale(1, 1);
  }
  90% {
    transform: scale(0.95, 0.95);
  }
  100% {
    transform: scale(0, 0);
  }
}
@keyframes lootBounce {
  0% {
    transform: translateY(0%) scale3d(1, 1, 1) rotateY(0deg);
  }
  50% {
    transform: translateY(-5%) scale3d(0.95, 0.95, 0.95) rotateY(0deg);
  }
  100% {
    transform: translateY(0%) scale3d(1, 1, 1) rotateY(0deg);
  }
}
@keyframes liquidAnimation {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes pulsateOpacity {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.3;
  }
}
@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 snowFall {
  0% {
    transform: scale(1, 1) translateY(0vmin) translateX(0%);
    opacity: 0.3;
  }
  25% {
    transform: scale(0.9, 0.9) translateY(16vmin) translateX(-500%);
    opacity: 0.2;
  }
  50% {
    transform: scale(0.8, 0.8) translateY(32vmin) translateX(500%);
    opacity: 0.1;
  }
  75% {
    transform: scale(0.7, 0.7) translateY(48vmin) translateX(-500%);
    opacity: 0.05;
  }
  100% {
    transform: scale(0.6, 0.6) translateY(64vmin) translateX(0%);
    opacity: 0;
  }
}
@keyframes dustFloat {
  0% {
    transform: scale(1, 1) translateY(0vmin) translateX(0%);
    opacity: 0.25;
  }
  25% {
    transform: scale(0.9, 0.9) translateY(-3vmin) translateX(-20%);
    opacity: 0.15;
  }
  50% {
    transform: scale(0.8, 0.8) translateY(-6vmin) translateX(20%);
    opacity: 0.1;
  }
  75% {
    transform: scale(0.7, 0.7) translateY(-9vmin) translateX(-20%);
    opacity: 0.05;
  }
  100% {
    transform: scale(0.6, 0.6) translateY(-12vmin) translateX(0%);
    opacity: 0;
  }
}
@keyframes dustFloatLeft {
  0% {
    transform: scale(1, 1) translateY(0vmin) translateX(0vmin);
    opacity: 0.25;
  }
  25% {
    transform: scale(0.9, 0.9) translateY(-3vmin) translateX(4vmin);
    opacity: 0.15;
  }
  50% {
    transform: scale(0.8, 0.8) translateY(-6vmin) translateX(8vmin);
    opacity: 0.1;
  }
  75% {
    transform: scale(0.7, 0.7) translateY(-9vmin) translateX(12vmin);
    opacity: 0.05;
  }
  100% {
    transform: scale(0.6, 0.6) translateY(-12vmin) translateX(16vmin);
    opacity: 0;
  }
}
@keyframes dustFloatRight {
  0% {
    transform: scale(1, 1) translateY(0vmin) translateX(0vmin);
    opacity: 0.25;
  }
  25% {
    transform: scale(0.9, 0.9) translateY(-3vmin) translateX(-4vmin);
    opacity: 0.15;
  }
  50% {
    transform: scale(0.8, 0.8) translateY(-6vmin) translateX(-8vmin);
    opacity: 0.1;
  }
  75% {
    transform: scale(0.7, 0.7) translateY(-9vmin) translateX(-12vmin);
    opacity: 0.05;
  }
  100% {
    transform: scale(0.6, 0.6) translateY(-12vmin) translateX(-16vmin);
    opacity: 0;
  }
}
#playPong {
  /* Define the keyframes for the rotation */
}
@keyframes dustSwirly {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#playPong {
  /* Define the keyframes for the rotation */
}
@keyframes dustFall {
  from {
    transform: scale(0.7, 0.7) rotate(0deg) translateY(-10%);
  }
  to {
    transform: scale(1, 1) rotate(5deg) translateY(100%);
  }
}
@keyframes cloneFade {
  0% {
    transform: scale(0.1);
  }
  10% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.1);
  }
}
@keyframes cloneFadeB {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#playPong {
  /* Define the keyframes for the rotation */
}
@keyframes wiggle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@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, 0) translateX(0, 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, 0) translateX(0, 0);
  }
}
@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 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 platformShift {
  0% {
    transform: translateX(0%);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
#playPong #particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Prevents particles from intercepting mouse events */
  will-change: contents; /* Hint that contents will change */
  contain: layout style; /* Isolate layout calculations */
}
#playPong .sub-particle {
  z-index: 13000;
  width: 0.5vmin;
  height: 0.5vmin;
  margin: -0.25vmin;
  border-radius: 0.25vmin;
  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%;
  transition: height 2s linear;
}
#playPong .sub-particle.mini {
  width: 0.25vmin;
  height: 0.25vmin;
  margin: -0.125vmin;
}
#playPong .particle-pearl {
  z-index: 13000;
  position: absolute;
  height: 0.25vmin;
  width: 0.25vmin;
  margin: -0.25vmin;
}
#playPong .particle-pearl.slow > div {
  transition: all 30s var(--easing);
}
#playPong .particle-pearl.medium > div {
  transition: all 15s var(--easing);
}
#playPong .particle-pearl.fast > div {
  transition: all 5s var(--easing);
}
#playPong .particle-pearl > div {
  position: relative;
  border-radius: 0.125vmin;
  margin-top: -1vmin;
  height: 0.25vmin;
  width: 0.25vmin;
  background: linear-gradient(180deg, rgba(63, 63, 66, 0.2) 0%, rgba(63, 63, 66, 0.75) 85%, rgb(123, 123, 126) 100%);
}
#playPong .particle-pearl > div div {
  border-radius: 0.25vmin;
  background: rgb(73, 73, 76);
  bottom: 0;
  position: absolute;
  margin-left: -0.125vmin;
  margin-bottom: -0.125vmin;
  height: 0.5vmin;
  width: 0.5vmin;
  transition: all 2s linear;
  display: none;
}
#playPong .particle-pearl.fade > div {
  background-color: rgba(73, 73, 76, 0); /* var(--color-light) */
  height: 8vmin;
  opacity: 0;
}
#playPong .particle-splash {
  z-index: 13000;
  position: absolute;
  width: 8vmin;
  height: 8vmin;
  margin: -4vmin;
  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;
}
#playPong .particle-splash.fade {
  transform: translateY(30%) scale(1.5);
  opacity: 0;
}
#playPong .particle-splash.fade .pearling-particle {
  height: 10vmin;
}
#playPong .particle {
  /* Base styles for all particles */
  position: absolute;
  z-index: 10000;
  width: 0.5vmin;
  height: 0.5vmin;
  margin: -0.25vmin;
  border-radius: 0.25vmin;
  background-color: rgba(63, 63, 66, 0.75); /* var(--color-light) */
  transition: transform 0s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: left, bottom, transform, opacity; /* Optimize for animations */
  contain: layout style paint; /* Contain layout calculations */
}
#playPong .particle.pour {
  height: 6vmin;
  width: 0.25vmin;
  transform-origin: bottom center;
  background: linear-gradient(180deg, rgba(63, 63, 66, 0) 0%, rgba(63, 63, 66, 0.75) 75%);
}
#playPong .particle.shower {
  height: 4vmin;
  width: 0.25vmin;
  transform-origin: bottom center;
  background: linear-gradient(180deg, rgba(63, 63, 66, 0) 0%, rgba(63, 63, 66, 0.5) 100%);
}
#playPong .particle {
  /* Fade state for non-shower/non-pour particles (e.g., snow) */
}
#playPong .particle:not(.shower):not(.pour).fade {
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(5); /* Replaced translateY(1vmin) */
  opacity: 0;
}
#playPong .particle {
  /* Fade state for shower and pour */
}
#playPong .particle.shower.fade, #playPong .particle.pour.fade {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  height: 0.5vmin; /* Shrinks from 16vmin */
  opacity: 0; /* Fade out on collision */
  /* Removed commented-out transform: translateY(1vmin) */
}
#playPong #gameContainer {
  overflow: hidden;
  height: 100vh;
}
#playPong body {
  flex-direction: row;
}
#playPong #leapBackground,
#playPong #leapForeground {
  opacity: 1;
  position: fixed;
  width: 120%;
  height: 25%;
  left: -10%;
  bottom: -5%;
  transition: all 0.5s 0s linear;
  pointer-events: none;
}
#playPong #leapBackground .particle,
#playPong #leapForeground .particle {
  height: 16vmin;
  width: 16vmin;
  border-radius: 50%;
  background: rgba(32, 28, 30, 0.4);
  position: absolute;
}
#playPong #leapForeground {
  filter: blur(10px);
  z-index: 10000;
}
#playPong #leapBackground {
  filter: blur(5px);
  z-index: -10000;
}
#playPong #leapBackground .particle {
  height: 4vmin;
  width: 4vmin;
  border-radius: 4vmin;
}
#playPong .wasted-container {
  height: 8vmin;
  width: 8vmin;
  position: absolute;
  transition: all 0.25s 0s var(--easing);
  transform: scale(0);
  z-index: 10000;
}
#playPong .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: 1vmin;
  display: inline-block;
  line-height: 7.75vmin;
  color: red;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 10px red, 0 0 5px red;
  font-size: 10vh;
  opacity: 0;
  letter-spacing: 0.1em;
  transform: rotate(-15deg);
}
#playPong .wasted-container span {
  transition: all 0.5s 0s var(--easing);
  font-size: 5vh;
  opacity: 1;
  letter-spacing: 0;
  transform: rotate(-5deg);
}
#playPong .wasted-container.wasted {
  transform: scale(1);
  /*      span {
          transition: all 0.5s 0s var(--easing);
          // transform: scale(1); 
          font-size: 0vh;
          opacity: 0;
          letter-spacing: 2em;
          transform: rotate(45deg);
        }*/
}
#playPong #bulge {
  position: absolute;
  width: 168vmin;
  height: 64vmin;
  z-index: -2;
}
#playPong .dot {
  position: absolute;
}
#playPong .dot:after {
  position: absolute;
  content: "";
  display: block;
  margin: -0.25vmin;
  width: 0.5vmin;
  height: 0.5vmin;
  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;
}
#playPong .splatter-container {
  height: 8vmin;
  width: 8vmin;
  position: absolute;
  transition: all 0.25s 0s var(--easing);
  transform: scale(0);
}
#playPong .splatter-container.full {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#playPong .splatter-container.fade {
  transform: scale(1);
}
#playPong .splatter-container.fade .splatter:nth-child(2) {
  height: 12vmin;
  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%);
}
#playPong .splatter-container.fade .splatter:nth-child(3) {
  height: 18vmin;
  transition: height 3s 0s ease-out, opacity 1s 0s ease-out, filter 1s 0s ease-out, transform 4s 0s ease-out;
  transform: translateY(500%);
}
#playPong .splatter-container.fade .splatter:nth-child(5) {
  height: 24vmin;
  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%);
}
#playPong .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%);
}
#playPong .splatter-container .splatter {
  height: 6vmin;
  width: 6vmin;
  border-radius: 3vmin;
  background: rgba(255, 0, 0, 0.25);
  position: absolute;
}
#playPong .particle-container {
  width: 16vmin;
  height: 16vmin;
  margin: -8vmin;
  animation-name: dustFall;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  position: absolute;
}
#playPong .particle-trail {
  z-index: 2000;
  position: absolute;
  width: 0.5vmin;
  height: 0.5vmin;
  margin: -0.25vmin;
  border-radius: 50%;
  background: var(--color-light);
  transition: all 2s 0s ease-out;
}
#playPong .particle-snow.swirly,
#playPong .particle-dust.swirly {
  background: transparent;
  width: 8vmin;
  height: 8vmin;
  margin: -4vmin;
}
#playPong .particle-snow.swirly.ccw > div,
#playPong .particle-dust.swirly.ccw > div {
  animation-direction: reverse; /* Play animation backwards */
}
#playPong .particle-snow.swirly > div,
#playPong .particle-dust.swirly > div {
  animation: dustSwirly 7s linear; /* Adjust the duration as needed */
  position: absolute;
  height: 100%;
  width: 100%;
}
#playPong .particle-snow.swirly > div > div,
#playPong .particle-dust.swirly > div > div {
  width: 0.5vmin;
  height: 0.5vmin;
  margin: -0.25vmin;
  border-radius: 50%;
  background: rgba(243, 233, 232, 0.75);
}
#playPong .particle-snow,
#playPong .particle-dust {
  z-index: 2000;
  animation-name: dustFloat;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  position: absolute;
  width: 0.5vmin;
  height: 0.5vmin;
  margin: -0.25vmin;
  border-radius: 50%;
  background: rgba(243, 233, 232, 0.75);
  opacity: 0.25;
}
#playPong .particle-snow.left,
#playPong .particle-dust.left {
  animation-name: dustFloatLeft;
  animation-timing-function: linear;
}
#playPong .particle-snow.right,
#playPong .particle-dust.right {
  animation-name: dustFloatRight;
  animation-timing-function: linear;
}
#playPong .particle-snow.speed-1,
#playPong .particle-dust.speed-1 {
  animation-duration: 10s;
}
#playPong .particle-snow.speed-2,
#playPong .particle-dust.speed-2 {
  animation-duration: 8s;
}
#playPong .particle-snow.speed-3,
#playPong .particle-dust.speed-3 {
  animation-duration: 6s;
}
#playPong .particle-snow.speed-4,
#playPong .particle-dust.speed-4 {
  animation-duration: 4s;
}
#playPong .particle-snow.speed-5,
#playPong .particle-dust.speed-5 {
  animation-duration: 2s;
}
#playPong .particle-snow {
  animation-name: snowFall;
  background: rgba(243, 233, 232, 0.75);
  opacity: 1;
}
#playPong .particle-snow.speed-1 {
  animation-duration: 20s;
}
#playPong .particle-snow.speed-2 {
  animation-duration: 14.25s;
}
#playPong .particle-snow.speed-3 {
  animation-duration: 10s;
}
#playPong .particle-snow.speed-4 {
  animation-duration: 8s;
}
#playPong .particle-snow.speed-5 {
  animation-duration: 6s;
}
#playPong .king-steam-wrap {
  position: absolute;
  animation-name: cloneFadeB;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
#playPong .king-steam-minor {
  position: absolute;
  width: 4vmin;
  height: 4vmin;
  margin: -2vmin;
  border-radius: 50%;
  z-index: 1000;
  background: var(--color-light);
  background: rgb(70, 70, 70);
  animation-name: cloneFade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
#playPong .king-steam-mini {
  position: absolute;
  width: 2vmin;
  height: 2vmin;
  margin: -1vmin;
  border-radius: 50%;
  z-index: 1000;
  background: var(--color-light);
  background: rgb(70, 70, 70);
  animation-name: cloneFade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
#playPong .king-steam-major {
  position: absolute;
  margin: -4vmin;
  width: 8vmin;
  height: 8vmin;
  filter: none;
  animation-name: cloneFade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  background: var(--color-light);
  background: rgb(70, 70, 70);
  border-radius: 50%;
  transform: scale(0.85);
}
#playPong .king {
  opacity: 0.01;
  transition: all 3s 0s linear;
  transform: translateY(0%) scale(0.9);
}
#playPong .king.fade.left {
  transform: translateX(-50%) scale(1);
}
#playPong .king.fade.right {
  transform: translateX(50%) scale(0);
}
#playPong .king.fade {
  opacity: 0;
  transform: scale(0);
}
#playPong .king.fade.south {
  transform: translateY(100%) translateX(0%) scale(3);
}
#playPong .king.fade.north {
  transform: translateY(-100%) translateX(0%) scale(3);
}
#playPong .king.fade.east {
  transform: translateX(100%) scale(3);
}
#playPong .king.fade.west {
  transform: translateX(-100%) scale(3);
}
#playPong .king.fade {
  /* Diagonal directions */
}
#playPong .king.fade.north-east {
  transform: translateY(-100%) translateX(100%) scale(3);
}
#playPong .king.fade.north-west {
  transform: translateY(-100%) translateX(-100%) scale(3);
}
#playPong .king.fade.south-east {
  transform: translateY(100%) translateX(100%) scale(3);
}
#playPong .king.fade.south-west {
  transform: translateY(100%) translateX(-100%) scale(3);
}
#playPong #kingBallsWrap,
#playPong #kingSkirtWrap {
  margin: -3.125%;
}
#playPong #kingSkirtWrap,
#playPong #kingBallsWrap,
#playPong #kingCrossWrap {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}
#playPong .king,
#playPong #king {
  will-change: left, bottom; /* Specify properties that are likely to change */
  z-index: 12000;
  filter: drop-shadow(0px 2.5vmin 10px rgba(23, 23, 26, 0.9));
  bottom: 0;
  position: absolute;
  width: 8vmin;
  height: 8vmin;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#playPong .king.latching-right.forward #kingBalls,
#playPong .king.latching-right.forward #kingSkirt,
#playPong #king.latching-right.forward #kingBalls,
#playPong #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);
}
#playPong .king.latching-right.forward #kingCross,
#playPong #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);
}
#playPong .king.latching-left.backward #kingBalls,
#playPong .king.latching-left.backward #kingSkirt,
#playPong #king.latching-left.backward #kingBalls,
#playPong #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);
}
#playPong .king.latching-left.backward #kingCross,
#playPong #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);
}
#playPong .king.lean-right #kingSkirt, #playPong .king.sliding-right.sliding-off #kingSkirt,
#playPong #king.lean-right #kingSkirt,
#playPong #king.sliding-right.sliding-off #kingSkirt {
  transform: rotate(14.5deg) translateY(2.5%) skew(-10deg) translateX(-6%);
  transform-origin: bottom left;
}
#playPong .king.lean-right #kingBalls, #playPong .king.sliding-right.sliding-off #kingBalls,
#playPong #king.lean-right #kingBalls,
#playPong #king.sliding-right.sliding-off #kingBalls {
  transform: rotate(12.5deg) translateY(2.5%);
  transform-origin: bottom left;
}
#playPong .king.lean-left #kingSkirt, #playPong .king.sliding-left.sliding-off #kingSkirt,
#playPong #king.lean-left #kingSkirt,
#playPong #king.sliding-left.sliding-off #kingSkirt {
  transform: rotate(-14.5deg) translateY(2.5%) skew(10deg) translateX(6%);
  transform-origin: bottom right;
}
#playPong .king.lean-left #kingBalls, #playPong .king.sliding-left.sliding-off #kingBalls,
#playPong #king.lean-left #kingBalls,
#playPong #king.sliding-left.sliding-off #kingBalls {
  transform: rotate(-12.5deg) translateY(2.5%);
  transform-origin: bottom right;
}
#playPong .king.proximity-right #kingSkirt,
#playPong #king.proximity-right #kingSkirt {
  transform: rotate(0deg) translateY(2.5%) skew(-5deg) translateX(0%);
  transform-origin: bottom left;
}
#playPong .king.proximity-right #kingBalls,
#playPong #king.proximity-right #kingBalls {
  transform: rotate(7.25deg) translateY(-2.5%);
  transform-origin: bottom left;
}
#playPong .king.proximity-left #kingSkirt,
#playPong #king.proximity-left #kingSkirt {
  transform: rotate(0deg) translateY(2.5%) skew(5deg) translateX(0%);
  transform-origin: bottom right;
}
#playPong .king.proximity-left #kingBalls,
#playPong #king.proximity-left #kingBalls {
  transform: rotate(-7.25deg) translateY(-2.5%);
  transform-origin: bottom right;
}
#playPong .king.sliding-right #kingBalls,
#playPong .king.sliding-right #kingSkirt,
#playPong #king.sliding-right #kingBalls,
#playPong #king.sliding-right #kingSkirt {
  transform: rotate(6.5deg) translateY(2.5%);
  transform-origin: bottom left;
}
#playPong .king.sliding-left #kingBalls,
#playPong .king.sliding-left #kingSkirt,
#playPong #king.sliding-left #kingBalls,
#playPong #king.sliding-left #kingSkirt {
  transform: rotate(-6.5deg) translateY(2.5%);
  transform-origin: bottom right;
}
#playPong .king.jumping-right #kingBalls,
#playPong .king.jumping-right #kingSkirt,
#playPong #king.jumping-right #kingBalls,
#playPong #king.jumping-right #kingSkirt {
  transform: rotate(12.5deg) translateY(2.5%);
  transform-origin: bottom left;
}
#playPong .king.jumping-left #kingBalls,
#playPong .king.jumping-left #kingSkirt,
#playPong #king.jumping-left #kingBalls,
#playPong #king.jumping-left #kingSkirt {
  transform: rotate(-12.5deg) translateY(2.5%);
  transform-origin: bottom right;
}
#playPong .king.jump #kingBalls,
#playPong #king.jump #kingBalls {
  transform: translateY(0%) scale(0.9, 1);
}
#playPong .king.jump #kingSkirt,
#playPong #king.jump #kingSkirt {
  transform: translateY(0%) scale(0.9, 0.9);
}
#playPong .king.slow #kingCross,
#playPong #king.slow #kingCross {
  transition: all 1s 0s ease-out;
}
#playPong .king.slow #kingBalls,
#playPong #king.slow #kingBalls {
  transition: transform 0.7s 0s ease-out;
}
#playPong .king.duck #kingCross,
#playPong #king.duck #kingCross {
  top: -0.125vmin !important;
}
#playPong .king.duck #kingBalls,
#playPong #king.duck #kingBalls {
  transform: translateY(7%) scale(0.98, 0.98);
}
#playPong .king.duck #kingSkirt,
#playPong #king.duck #kingSkirt {
  transform: translateY(0%) scale(0.98, 0.98);
}
#playPong .king.duck.face-backward #kingCross,
#playPong #king.duck.face-backward #kingCross {
  transform: rotate(2deg) translateX(0%) scale(0.97);
}
#playPong .king.duck.face-forward #kingCross,
#playPong #king.duck.face-forward #kingCross {
  transform: rotate(-2deg) translateX(0%) scale(0.97);
}
#playPong .king.jiggle.forward #kingBalls,
#playPong #king.jiggle.forward #kingBalls {
  transform: translateX(2%);
  transition: transform 0.1s 0s ease-in-out;
}
#playPong .king.jiggle.backward #kingBalls,
#playPong #king.jiggle.backward #kingBalls {
  transform: translateX(-2%);
  transition: transform 0.1s 0s ease-in-out;
}
#playPong .king.wobble #kingBalls,
#playPong #king.wobble #kingBalls {
  transform: translateY(0%) scale(1.3, 0.7);
}
#playPong .king.wobble #kingSkirt,
#playPong #king.wobble #kingSkirt {
  transform: translateY(0%) scale(1.2, 0.8);
}
#playPong .king.wibble #kingBalls,
#playPong #king.wibble #kingBalls {
  transform: translateY(0%) scale(1.1, 0.9);
}
#playPong .king.wibble #kingSkirt,
#playPong #king.wibble #kingSkirt {
  transform: translateY(0%) scale(1.1, 0.9);
}
#playPong .king .kingBalls,
#playPong .king .kingSkirt,
#playPong .king #kingBalls,
#playPong .king #kingSkirt,
#playPong #king .kingBalls,
#playPong #king .kingSkirt,
#playPong #king #kingBalls,
#playPong #king #kingSkirt {
  will-change: margin-bottom, transform; /* Specify properties that are likely to change */
  transition: all 0.2s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  transform-origin: bottom center; /* Set the transform origin to bottom center */
}
#playPong .king .kingBalls,
#playPong .king #kingBalls,
#playPong #king .kingBalls,
#playPong #king #kingBalls {
  z-index: 10;
  background-image: url("/_img/chesspieces/sctheme-b/wK-a-2.png");
}
#playPong .king .kingSkirt,
#playPong .king #kingSkirt,
#playPong #king .kingSkirt,
#playPong #king #kingSkirt {
  background-image: url("/_img/chesspieces/sctheme-b/wK-a-1.png");
  transition: all 0.4s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playPong .king.blink #kingEyeL,
#playPong .king.blink #kingEyeR,
#playPong #king.blink #kingEyeL,
#playPong #king.blink #kingEyeR {
  height: 0.2vmin !important;
}
#playPong .king #kingEyes,
#playPong #king #kingEyes {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  gap: 0.75vmin;
  padding-top: 3.5vmin;
  padding-bottom: 1vmin;
}
#playPong .king #kingEyes #kingEyeL,
#playPong .king #kingEyes #kingEyeR,
#playPong #king #kingEyes #kingEyeL,
#playPong #king #kingEyes #kingEyeR {
  transition: all 0.2s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  background-color: var(--color-dark);
  height: 0.7vmin;
  width: 0.5vmin;
  border-radius: 2vmin;
  border-radius: 50%;
  opacity: 0.1;
}
@keyframes wiggle {
  0% {
    transform: rotate(-1deg);
  }
  25% {
    transform: rotate(1deg);
  }
  40% {
    transform: rotate(-1.5deg);
  }
  60% {
    transform: rotate(0.5deg);
  }
  80% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(-1deg);
  }
}
#playPong .king #kingCross,
#playPong #king #kingCross {
  z-index: -2;
  transition: all 0.1s 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; /* Set the transform origin to bottom center */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("/_img/chesspieces/sctheme-b/wK-b.png");
}
#playPong .king.face-backward #kingCrossWrap, #playPong .king.face-backward #kingCross,
#playPong #king.face-backward #kingCrossWrap,
#playPong #king.face-backward #kingCross {
  transform: rotate(5deg) translateX(-1%) scale(1);
}
#playPong .king.face-forward #kingCrossWrap, #playPong .king.face-forward #kingCross,
#playPong #king.face-forward #kingCrossWrap,
#playPong #king.face-forward #kingCross {
  transform: rotate(-5deg) translateX(1%) scale(1);
}
#playPong .king.idle.face-forward #kingBalls,
#playPong #king.idle.face-forward #kingBalls {
  transform: rotate(4deg) translateX(-1%) scale(1);
}
#playPong .king.idle.face-backward #kingBalls,
#playPong #king.idle.face-backward #kingBalls {
  transform: rotate(-4deg) translateX(1%) scale(1);
}
#playPong .king.face-backward.stab #kingCross,
#playPong #king.face-backward.stab #kingCross {
  top: -15px;
  transform: rotate(25deg) translateX(-3%) scale(1);
}
#playPong .king.face-forward.stab #kingCross,
#playPong #king.face-forward.stab #kingCross {
  top: -15px;
  transform: rotate(-2s5deg) translateX(3%) scale(1);
}
#playPong .king.face-backward.aim #kingCross,
#playPong #king.face-backward.aim #kingCross {
  top: -5px;
  transform: rotate(15deg) translateX(-3%) scale(1);
}
#playPong .king.face-forward.aim #kingCross,
#playPong #king.face-forward.aim #kingCross {
  top: -5px;
  transform: rotate(-15deg) translateX(3%) scale(1);
}
#playPong .king.face-forward.unloaded #kingCross,
#playPong #king.face-forward.unloaded #kingCross {
  transform: rotate(22.5deg) translateX(50%) scale(0);
  opacity: 0;
}
#playPong .king.face-backward.unloaded #kingCross,
#playPong #king.face-backward.unloaded #kingCross {
  transform: rotate(-22.5deg) translateX(-50%) scale(0);
  opacity: 0;
}
#playPong .king.forward:before,
#playPong #king.forward:before {
  transform: rotate(2deg);
  transform: rotate(3deg) translateX(3%);
  background-size: 98%;
}
#playPong .king.forward #kingCross,
#playPong #king.forward #kingCross {
  transform: rotate(-6deg);
  transform: rotate(-16deg) translateX(3%);
}
#playPong .king.forward #kingBalls,
#playPong #king.forward #kingBalls {
  transform: rotate(-4deg);
}
#playPong .king.forward #kingSkirt,
#playPong #king.forward #kingSkirt {
  transform: skew(-10deg) translateX(-10%);
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playPong .king.gather-in #kingCross,
#playPong #king.gather-in #kingCross {
  top: -1.3vmin !important;
  transition: all 0s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playPong .king.gather-out #kingCross,
#playPong #king.gather-out #kingCross {
  transition: all 1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playPong .king.jumpup #kingCross,
#playPong #king.jumpup #kingCross {
  top: -3.25vmin !important;
  bottom: 90%;
  transition: all 1.65s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playPong .king.falling #kingCross,
#playPong #king.falling #kingCross {
  top: -3.25vmin !important;
  bottom: 90%;
  transition: all 0.65s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playPong .king.backward:before,
#playPong #king.backward:before {
  transform: rotate(-2deg);
  transform: rotate(-3deg) translateX(-3%);
  background-size: 98%;
}
#playPong .king.backward #kingCross,
#playPong #king.backward #kingCross {
  transform: rotate(6deg);
  transform: rotate(16deg) translateX(-3%);
}
#playPong .king.backward #kingBalls,
#playPong #king.backward #kingBalls {
  transform: rotate(4deg);
}
#playPong .king.backward #kingSkirt,
#playPong #king.backward #kingSkirt {
  transform: skew(10deg) translateX(10%);
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playPong .crate {
  z-index: 2000;
  bottom: 0;
  position: absolute;
  height: 8vmin;
  width: 8vmin;
  border-radius: 5px;
  border: 0.5vmin solid var(--color-light);
  filter: drop-shadow(0px 10px 10px rgb(23, 23, 26));
}
#playPong .slope {
  position: absolute;
  height: 8vmin;
  width: 8vmin;
  bottom: 0;
  height: 0;
  opacity: 0.0125;
  background-size: 100% 100%; /* Stretch the background image to fill the container */
  background-position: center; /* Optional: Center the background image */
}
#playPong .slope.incline {
  background-image: url("/_img/_svg/slide-inclined.svg");
}
#playPong .slope.decline {
  background-image: url("/_img/_svg/slide-declined.svg");
}
#playPong .platform .edit {
  position: absolute;
  color: var(--color-dark);
  border-radius: 2vmin;
  box-shadow: 0 0px 5px 5px var(--color-dark);
  background: rgba(43, 43, 46, 0.8);
  z-index: 4000;
  display: flex;
  margin: -1.5vmin -1.5vmin;
  flex-wrap: nowrap;
}
#playPong .platform .edit#handle-row {
  flex-direction: column;
  z-index: 10000;
}
#playPong .platform .edit button {
  margin: 0;
  outline: none;
  background: rgba(139, 131, 129, 0.1);
  background: rgba(43, 43, 46, 0.8);
  font-size: 1.5vmin;
  padding: 0;
  border: none;
  color: var(--color-dark);
  font-weight: 700;
  width: 3vmin;
  height: 3vmin;
  line-height: 3.25vmin;
  border-radius: 2vmin;
}
#playPong .platform .edit span {
  color: rgba(139, 131, 129, 0.85);
  display: inline-block;
  font-size: 1.5vmin;
  line-height: 3.2vmin;
  width: 3vmin;
  height: 3vmin;
  text-align: center;
}
#playPong .platform .edit#handle-width {
  bottom: -3vmin;
  left: 50%;
  margin-left: 1.75vmin;
}
#playPong .platform .edit#handle-row {
  bottom: -3vmin;
  right: 50%;
}
#playPong .platform .edit#handle-column {
  bottom: -3vmin;
  right: 50%;
  margin-right: 1.75vmin;
}
#playPong .platform .edit#handle-move {
  bottom: -6.5vmin;
  right: 50%;
  margin-right: -3vmin;
}
#playPong .platform .edit#plus-width {
  top: 40%;
  right: 0;
}
#playPong .platform .edit#minus-width {
  top: 60%;
  right: 0;
}
#playPong .platform .edit#minus-row {
  top: 0%;
  left: 40%;
}
#playPong .platform .edit#plus-row {
  top: 0%;
  left: 60%;
}
#playPong .platform .edit#minus-column {
  bottom: 0%;
  left: 40%;
}
#playPong .platform .edit#plus-column {
  bottom: 0%;
  left: 60%;
}
#playPong .platform .edit button:hover {
  color: var(--color-light);
}
#playPong .before {
  border-right: 0.5vmin solid blue !important;
}
#playPong .after {
  border-left: 0.5vmin solid yellow !important;
}
#playPong .below {
  border-top: 0.5vmin solid red !important;
}
#playPong .above {
  border-bottom: 0.5vmin solid green !important;
}
#playPong [data-level="1"] span:nth-child(1),
#playPong [data-level="2"] span:nth-child(2),
#playPong [data-level="3"] span:nth-child(3),
#playPong [data-level="4"] span:nth-child(4),
#playPong [data-level="5"] span:nth-child(5),
#playPong [data-level="6"] span:nth-child(6),
#playPong [data-level="7"] span:nth-child(7),
#playPong [data-level="8"] span:nth-child(8),
#playPong [data-level="9"] span:nth-child(9) {
  transform: translateY(3px);
}
#playPong .hurt-indicator {
  transition: all 1s 0s linear;
  margin-top: -4vmin;
  position: absolute;
  height: 8vmin;
  width: 8mvin;
}
#playPong .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: 10vh;
  opacity: 0;
  transform: rotate(-15deg);
  transition: all 1s 0.1s var(--easing);
  font-size: 5vh;
  opacity: 1;
  letter-spacing: 0;
  transform: rotate(-5deg);
}
#playPong .hurt-indicator.fade {
  transform: translateY(-100%);
}
#playPong .hurt-indicator.fade span {
  opacity: 0;
  transform: rotate(5deg);
}
#playPong .ladder {
  z-index: 1;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-direction: column-reverse;
  align-items: center;
}
#playPong .ladder span {
  border-radius: 0.25vmin;
  width: 100%;
  display: block;
  border-top: 0.5vmin solid rgb(44, 43, 44);
  transition: transform 0.1s ease-in-out 0s;
}
#playPong .ladder:before {
  z-index: 2000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 0;
  border-right: 0.5vmin solid rgb(44, 43, 44);
  border-left: 0.5vmin solid rgb(44, 43, 44);
  display: block;
  margin: -0.24vmin -0.24vmin;
  transition: all 0.05s ease-out 0s;
}
#playPong .liquid {
  position: absolute;
  display: flex;
  justify-content: space-between;
}
#playPong .liquid:after {
  display: block;
  content: "";
  height: 100%;
  width: 100%;
  z-index: 4000;
  position: absolute;
  background: rgba(43, 43, 46, 0.35);
}
#playPong .liquid .drop:after {
  position: absolute;
  content: "";
  display: block;
  margin: -0.2vmin;
  width: 0.4vmin;
  height: 0.4vmin;
  background-color: rgb(53, 53, 56); /* var(--color-light) */
  background-color: rgb(73, 73, 76); /* var(--color-light) */
  border-radius: 50%;
  pointer-events: none;
}
#playPong .spike {
  position: absolute;
  bottom: 0;
  height: 0;
  z-index: 2000;
  background: linear-gradient(to top, rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 0));
  animation-name: pulsateFire;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  margin-bottom: 0.25vmin;
  background-image: linear-gradient(rgba(42, 28, 30, 0), 55%, rgba(242, 28, 30, 0.075), 90%, rgba(255, 28, 30, 0.3));
}
#playPong .spike .flame {
  bottom: 0;
  left: 2.25vmin;
  position: absolute;
  width: 90%;
  width: calc(100% - 4.5vmin);
  height: calc(100% + 1vmin);
  background: linear-gradient(to top, rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 0));
}
#playPong .cube {
  background-color: rgba(35, 35, 35, 0.5);
}
#playPong .cube,
#playPong .box {
  position: absolute;
  width: 8vmin;
  bottom: 0;
  height: 0;
  height: 32vmin;
  width: 32vmin;
  left: 24vmin;
  z-index: 2000;
}
#playPong .cube:before,
#playPong .box:before {
  z-index: 2000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 0.75vmin;
  border: 0.5vmin solid #454345;
  display: block;
  margin: -0.24vmin -0.24vmin;
  transition: all 0.05s ease-out 0s;
}
#playPong .cube:after,
#playPong .box:after {
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 1vmin;
  border: 0.5vmin solid var(--color-dark);
  display: block;
  margin: -0.5vmin -0.5vmin;
  opacity: 0.95;
}
#playPong .stair,
#playPong .platform {
  position: absolute;
  width: 8vmin;
  bottom: 0;
  height: 0;
  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 */
}
#playPong .stair.shaded,
#playPong .platform.shaded {
  z-index: 0;
}
#playPong .stair.shaded:before,
#playPong .platform.shaded:before {
  border-color: #252527;
}
#playPong .stair.ladder,
#playPong .platform.ladder {
  min-width: 0vmin;
  transition: all 1s ease-out 0s;
}
#playPong .stair.ladder.king-on,
#playPong .platform.ladder.king-on {
  transition: all 0s ease-out 0s;
}
#playPong .stair.king-on.king-on-left-edge:before,
#playPong .platform.king-on.king-on-left-edge:before {
  transform: rotate(-2.5deg) translateY(0.65vmin);
}
#playPong .stair.king-on.king-on-right-edge:before,
#playPong .platform.king-on.king-on-right-edge:before {
  transform: rotate(2.5deg) translateY(0.65vmin);
}
#playPong .stair.king-on:before,
#playPong .platform.king-on:before {
  transition-duration: 0s;
  transform: translateY(0.65vmin);
}
#playPong .stair.vibrate,
#playPong .platform.vibrate {
  animation-name: vibrate;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playPong .stair:before,
#playPong .platform:before {
  z-index: 2000;
  position: relative;
  content: "";
  border-top: 0.5vmin solid var(--color-light);
  display: block;
  margin: -0.25vmin -0.25vmin;
  transition: all 0.05s ease-out 0s;
}
#playPong .stair.plate.king-on:before,
#playPong .platform.plate.king-on:before {
  transition: all 0s ease-out 0s;
}
#playPong .stair.plate:before,
#playPong .platform.plate:before {
  transition: all 0.125s ease-out 0.125s;
}
#playPong .stair .platform-inner,
#playPong .platform .platform-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -0.25vmin;
  border-left: 0.5vmin solid #252527;
  border-bottom: 0.5vmin solid #252527;
  border-right: 0.5vmin solid #252527;
  border-radius: 0.25vmin;
  box-shadow: inset 0px 0 0px 5px var(--color-dark), 0px 0 5px 5px var(--color-dark);
}
#playPong #game-wrap {
  position: relative;
}
#playPong #camera {
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
#playPong #overShootLeft,
#playPong #overShootRight {
  border-top: 0.5vmin solid #252527;
  border-bottom: 0.5vmin solid #252527;
  top: 0;
  bottom: 0;
  position: absolute;
  width: 50vw;
  margin: -0.125vmin 1vmin;
  opacity: 0.25;
}
#playPong #overShootLeft {
  right: 100%;
}
#playPong #overShootRight {
  left: 100%;
}
#playPong #world-bottom {
  z-index: 200000;
  position: absolute;
  opacity: 1;
  bottom: -0.2vmin;
  left: -0.2vmin;
  right: -0.2vmin;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#playPong #world-bottom i {
  border-radius: 50%;
  display: block;
  width: 0.4vmin;
  height: 0.4vmin;
  background-color: rgb(173, 173, 176); /* var(--color-light) */
  opacity: 0;
}
#playPong #world-bottom i.glow {
  background: rgba(255, 255, 255, 0.8); /* Glow color when opacity > 0 */
}
#playPong #world {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
}
#playPong #scene,
#playPong .room {
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}
#playPong .vibrate-horizontal {
  animation-name: vibrateHorizontal;
  animation-duration: 0.35s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playPong .vibrate-vertical {
  animation-name: vibrateVertical;
  animation-duration: 0.35s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playPong .shake {
  animation-name: gridShake;
  animation-duration: 0.35s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playPong .shakeHorz {
  animation-name: shakeHorz;
  animation-duration: 0.5s;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: bottom left;
}
#playPong .shakeHorzPhased {
  animation-name: shakeHorzPhased;
  animation-duration: 0.5s;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: bottom right;
}
#playPong .effect-cell {
  height: 8vmin;
  width: 8vmin;
  position: absolute;
  bottom: 0;
  left: 0;
}
#playPong #grid {
  opacity: 0.65;
}
#playPong #grid .cell {
  position: relative;
  height: 8vmin;
  width: 8vmin;
}
#playPong #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("/_img/chesspieces/sctheme/square-white-corner.png");
  background-size: 100%;
  opacity: 0.1;
  pointer-events: none;
  transition: opacity 0.5s ease-in-cout 0.25s;
}
#playPong #grid .cell:before {
  transition: opacity 0.35s 0s var(--easing);
}
#playPong #grid .cell.highlighted:not(.checkmate-square) {
  z-index: 500;
}
#playPong #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.3;
}
#playPong #world .loot .file {
  top: -2vmin;
}
#playPong #world .loot.collected .loot-cross {
  display: none;
}
#playPong #world .loot.uncollected {
  filter: blur(0.05em);
}
#playPong #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);
}
#playPong #world .loot.uncollected {
  transition: all 0.25s 0s ease-out;
}
#playPong #world .loot.uncollected .horz {
  transform: scale(1, 0);
}
#playPong #world .loot.uncollected .vert {
  transform: scale(0, 1);
}
#playPong #world .loot:nth-child(1) .loot-cross {
  animation-delay: -0.26s;
}
#playPong #world .loot:nth-child(2) .loot-cross {
  animation-delay: -1.6s;
}
#playPong #world .loot:nth-child(3) .loot-cross {
  animation-delay: 1.83s;
}
#playPong #world .loot .loot-cross {
  position: absolute;
  display: inline-block;
  height: 8vmin;
  width: 8vmin;
  filter: blur(0.025em);
}
#playPong #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;
}
#playPong #world .loot .loot-cross .vert {
  height: 5vmin;
  width: 0.5vmin;
  left: 50%;
  margin-left: -0.25vmin;
}
#playPong #world .loot .loot-cross .horz {
  height: 0.5vmin;
  width: 3.2vmin;
  top: 13%;
  left: 50%;
  margin-left: -1.6vmin;
}
#playPong #world .loot {
  bottom: 0;
  width: 8vmin;
  height: 8vmin;
  position: absolute;
  transform: scale(1) translateY(0%);
  opacity: 1;
  transition: transform 0.25s 0s ease-in-out, opacity 0.25s 0s ease-in-out;
}
#playPong #world .loot.float {
  transform: scale(1) translateY(-50%);
  transition: transform 3s 0s linear, opacity 0.25s 0s ease-in-out;
}
#playPong #world .loot.pop {
  opacity: 0;
  transform: scale(0.9) translateY(-100%);
}
#playPong .kingCross {
  transition: transform 3s 0s ease-out;
  bottom: 0;
  position: absolute;
  width: 4vmin;
  height: 4vmin;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#playPong .kingCross.forward {
  transform: rotate(0deg) translate(0%, 0%);
}
#playPong .kingCross.backward {
  transform: rotate(0deg) translate(0%, 0%);
}
#playPong .kingCross:not(.new).forward {
  transform: translateX(120vw);
  transform: rotate(0deg) translate(7500%, 50%);
}
#playPong .kingCross:not(.new).backward {
  transform: translateX(-7500%);
  transform: rotate(0deg) translate(-7500%, 50%);
}
#playPong .kingCross.aim-up.forward {
  transform: rotate(-85deg) translate(0%, 0%);
}
#playPong .kingCross.aim-up.backward {
  transform: rotate(85deg) translate(0%, 0%);
}
#playPong .kingCross.aim-up:not(.new).forward {
  transform: translateX(7500%);
  transform: rotate(-85deg) translate(7500%, 0%);
}
#playPong .kingCross.aim-up:not(.new).backward {
  transform: translateX(-7500%);
  transform: rotate(85deg) translate(-7500%, 0%);
}
#playPong .kingCross.aim-down {
  background-color: red;
}
#playPong .kingCross.aim-down.forward {
  transform: rotate(-270deg) translate(0%, -50%);
}
#playPong .kingCross.aim-down.backward {
  transform: rotate(270deg) translate(0%, 50%);
}
#playPong .kingCross.aim-down:not(.new).forward {
  transform: rotate(-270deg) translate(7500%, 0%);
}
#playPong .kingCross.aim-down:not(.new).backward {
  transform: rotate(270deg) translate(-7500%, 0%);
}
#playPong .kingCross.aim-high.forward {
  transform: rotate(-10deg) translate(0%, 0%);
}
#playPong .kingCross.aim-high.backward {
  transform: rotate(10deg) translate(0%, 0%);
}
#playPong .kingCross.aim-high:not(.new).forward {
  transform: translateX(7500%);
  transform: rotate(-10deg) translate(7500%, 0%);
}
#playPong .kingCross.aim-high:not(.new).backward {
  transform: translateX(-7500%);
  transform: rotate(10deg) translate(-7500%, 0%);
}
#playPong .kingCross:not(.new).forward:after {
  transform: rotate(1440deg);
}
#playPong .kingCross:not(.new).backward:after {
  transform: rotate(-1440deg);
}
#playPong .kingCross:after {
  transition: transform 1.5s 0s linear;
  position: absolute;
  content: "";
  top: 0;
  left: -2vmin;
  right: -2vmin;
  bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("/_img/chesspieces/sctheme-b/wK-b.png");
  margin: -3.125%;
  transform-origin: center center; /* Set the transform origin to bottom center */
}
#playPong #options-menu {
  position: fixed;
  z-index: 2000000;
  border-radius: 10px;
  padding: 0;
  background: rgba(23, 23, 26, 0.75);
  width: 100%;
  padding: 0;
  display: flex;
  gap: 2vmin;
  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: 100vh;
  display: none;
}
#playPong #options-menu h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
}
#playPong #options-menu .tabs {
  display: flex;
  justify-content: space-around;
  display: none;
}
#playPong #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: 4vmin;
  margin: 0;
  letter-spacing: 0.1em;
  font-weight: normal;
  text-transform: uppercase;
}
#playPong #options-menu .tabs .tab-button:hover {
  color: #ffffff;
}
#playPong #options-menu .tabs .tab-button.active {
  background-color: transparent;
  color: #ffffff;
}
#playPong #options-menu .tab-content + .tab-content {
  margin-top: 0;
}
#playPong #options-menu .tab-content {
  width: 440px;
  margin-top: 64px;
}
#playPong #options-menu .tab-content:last-child {
  margin-bottom: 64px;
}
#playPong #options-menu section {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2vmin;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#playPong #options-menu section h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #f2f2f2;
  display: none;
}
#playPong #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: 0vmin 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: rgb(33, 33, 36);
  color: #cccccc;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 16px;
}
#playPong #options-menu section label span {
  position: relative;
  top: 0.075em;
}
#playPong #options-menu section label:hover {
  background-color: rgb(30, 30, 33);
  color: rgb(255, 255, 255);
}
#playPong #options-menu section {
  /* Hide the default checkbox */
}
#playPong #options-menu section .toggle input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
}
#playPong #options-menu section {
  /* Toggle container */
}
#playPong #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;
}
#playPong #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);
}
#playPong #options-menu section {
  /* Checkbox checked state */
}
#playPong #options-menu section .toggle input:checked + .thumb {
  transform: translateX(20px); /* Move the thumb to the right */
}
#playPong #options-menu section {
  /* Checkbox checked background */
}
#playPong #options-menu section .toggle input:checked {
  background-color: rgba(0, 200, 0, 0.75); /* Green background when checked */
  background-color: white;
}
#playPong #options-menu section .toggle input:checked + .thumb {
  background-color: white; /* Thumb color remains white */
}
#playPong #options-menu section {
  /* Add focus styles */
}
#playPong #options-menu section .toggle input:focus + .thumb {
  box-shadow: 0 0 1px rgba(0, 200, 0, 0.75);
}
#playPong #options-menu section {
  /* Optional: hover effect */
}
#playPong #options-menu section .toggle:hover .thumb {
  background-color: rgb(53, 53, 56);
}
#playPong #options-menu section {
  /* Container for the select box */
}
#playPong #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;
}
#playPong #options-menu section {
  /* Style the select element */
}
#playPong #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;
}
#playPong #options-menu section {
  /* Remove the focus outline from the select */
}
#playPong #options-menu section .select select:focus {
  outline: none; /* Remove default focus outline */
}
#playPong #options-menu section {
  /* Style the dropdown options */
}
#playPong #options-menu section .select select option {
  background-color: rgb(33, 33, 36); /* Background color for the options */
  color: #ffffff; /* Text color */
}
#playPong #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;
}
#playPong #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;
}
#playPong #options-menu section input[type=range]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00c0ff;
  cursor: pointer;
}
#playPong #options-menu section input[type=checkbox] {
  margin-right: 10px;
  transform: scale(1.2);
  cursor: pointer;
}
#playPong #options-menu #menu-buttons {
  display: flex;
  justify-content: space-between;
  padding: 24px;
}
#playPong #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;
}
#playDiagonals {
  overflow: hidden;
  max-height: 100vh;
}
#playDiagonals .explosion {
  box-shadow: 0 0 10px 10px rgba(35, 35, 35, 0.75), inset 0 0 10px 10px rgba(35, 35, 35, 0.75); /* Green color for positive evaluation */
}
#playDiagonals .splatter-container {
  height: 4vmin;
  width: 4vmin;
  position: absolute;
  transition: all 0.25s 0s var(--easing);
  transform: scale(0);
}
#playDiagonals .splatter-container.full {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#playDiagonals .splatter-container.fade {
  transform: scale(1);
}
#playDiagonals .splatter-container.fade .splatter:nth-child(2) {
  height: 12vmin;
  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%);
}
#playDiagonals .splatter-container.fade .splatter:nth-child(3) {
  height: 18vmin;
  transition: height 3s 0s ease-out, opacity 1s 0s ease-out, filter 1s 0s ease-out, transform 4s 0s ease-out;
  transform: translateY(500%);
}
#playDiagonals .splatter-container.fade .splatter:nth-child(5) {
  height: 24vmin;
  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%);
}
#playDiagonals .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%);
}
#playDiagonals .splatter-container .splatter {
  height: 4vmin;
  width: 4vmin;
  border-radius: 3vmin;
  background: rgba(255, 0, 0, 0.25);
  position: absolute;
}
@keyframes courtShake {
  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 courtBoost {
  0% {
    transform: translate(0, 0);
  }
  5% {
    transform: translate(-10px, 2px);
  } /* More horizontal */
  10% {
    transform: translate(12px, -2px);
  } /* More horizontal */
  15% {
    transform: translate(8px, 3px);
  } /* More horizontal */
  20% {
    transform: translate(-7px, -3px);
  } /* More horizontal */
  25% {
    transform: translate(-8px, 2px);
  } /* More horizontal */
  30% {
    transform: translate(6px, -4px);
  } /* More horizontal */
  35% {
    transform: translate(4px, 1px);
  } /* More horizontal */
  40% {
    transform: translate(-3px, -1px);
  } /* More horizontal */
  45% {
    transform: translate(-5px, 2px);
  } /* More horizontal */
  50% {
    transform: translate(0, 0);
  }
  55% {
    transform: translate(5px, 2px);
  } /* More horizontal */
  60% {
    transform: translate(-6px, -3px);
  } /* More horizontal */
  65% {
    transform: translate(4px, 1px);
  } /* More horizontal */
  70% {
    transform: translate(-5px, 2px);
  } /* More horizontal */
  75% {
    transform: translate(6px, -4px);
  } /* More horizontal */
  80% {
    transform: translate(3px, 1px);
  } /* More horizontal */
  85% {
    transform: translate(-4px, -1px);
  } /* More horizontal */
  90% {
    transform: translate(3px, 2px);
  } /* More horizontal */
  95% {
    transform: translate(-2px, -1px);
  } /* More horizontal */
  100% {
    transform: translate(0, 0);
  }
}
@keyframes cloneFade {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
#playDiagonals .boost {
  animation-name: courtBoost;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playDiagonals .shake {
  animation-name: courtShake;
  animation-duration: 0.125s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playDiagonals #ball-container-wrap {
  position: relative;
}
#playDiagonals #court-top,
#playDiagonals #court-bottom {
  transition: border 1s ease-in-out 0s;
  position: absolute;
  content: "";
  display: block;
  left: -0.2vmin;
  right: -0.2vmin;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s linear 0s;
}
#playDiagonals #court-top i,
#playDiagonals #court-bottom i {
  border-radius: 50%;
  display: block;
  width: 0.4vmin;
  height: 0.4vmin;
  background-color: #f3e9e8;
}
#playDiagonals #court-left,
#playDiagonals #court-right,
#playDiagonals #court-center {
  position: absolute;
  content: "";
  display: block;
  top: -0.2vmin;
  bottom: -0.2vmin;
  flex-direction: column;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#playDiagonals #court-left i,
#playDiagonals #court-right i,
#playDiagonals #court-center i {
  border-radius: 50%;
  display: block;
  width: 0.4vmin;
  height: 0.4vmin;
  background-color: #f3e9e8;
}
#playDiagonals #court-left i,
#playDiagonals #court-right i {
  transform: scale(0);
  transition: all 2s ease-in-out 0s;
}
#playDiagonals #court-left {
  left: -0.2vmin;
}
#playDiagonals #court-right {
  right: -0.2vmin;
}
#playDiagonals #court-left,
#playDiagonals #court-right {
  opacity: 0;
  transition: opacity 2s linear 0s;
}
#playDiagonals #court-center {
  width: 0.4vmin;
  background-color: rgb(40, 40, 40);
  left: 50%;
  margin-left: -0.2vmin;
}
#playDiagonals #court-top {
  opacity: 1;
  top: -0.2vmin;
}
#playDiagonals #court-bottom {
  opacity: 1;
  bottom: -0.2vmin;
}
#playDiagonals #ball-container {
  position: relative;
}
#playDiagonals #ball-container.left #court-left, #playDiagonals #ball-container.right #court-right {
  transition: opacity 0s linear 0s;
  opacity: 0.5;
}
#playDiagonals #ball-container.left #court-left i, #playDiagonals #ball-container.right #court-right i {
  transition: transform 0s linear 0s;
  transform: scale(1);
}
#playDiagonals #ball-container #effects {
  pointer-events: none;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}
#playDiagonals #ball-container #grid .cell {
  height: 8vmin;
  width: 8vmin;
}
#playDiagonals #ball-container .ring {
  position: absolute;
  height: 8vmin;
  width: 8vmin;
}
#playDiagonals #ball-container .ring div {
  border-radius: 50%;
  animation-name: wave;
  animation-fill-mode: forwards;
  animation-duration: 0.75s;
  pointer-events: none;
  box-shadow: 0 0 1px 1px rgba(243, 233, 232, 0.15), inset 0 0 1px 1px rgba(243, 233, 232, 0.15); /* Green color for positive evaluation */
  height: 100%;
  position: absolute;
  width: 100%;
}
#playDiagonals #ball-container .ring div.wave-small {
  margin: 25%;
  height: 50%;
  width: 50%;
}
#playDiagonals #ball-container .ring div.wave-fast {
  animation-name: axe;
  margin: 30%;
  height: 40%;
  width: 40%;
  animation-duration: 0.5s;
}
#playDiagonals #ball-container .wave-pulse {
  height: 8vmin;
  width: 8vmin;
}
#playDiagonals #ball-container .paddle-clone {
  position: absolute;
  height: 12vmin;
  width: 0.8vmin;
  opacity: 0.05;
  border-radius: 5px;
  background-color: gray;
}
#playDiagonals #ball-container .paddle-clone.left {
  left: -0.4vmin;
}
#playDiagonals #ball-container .paddle-clone.right {
  right: -0.4vmin;
}
#playDiagonals #ball-container .paddle {
  z-index: 1000;
  top: 0;
  position: absolute;
  height: 12vmin;
  width: 0.8vmin;
  background-color: #f3e9e8;
  border-radius: 5px;
  transition: transform 0.5s linear 0s;
}
#playDiagonals #ball-container .paddle.active {
  background-color: red !important;
}
#playDiagonals #ball-container .paddle.touch {
  transition: transform 0s ease-in-out 0s;
}
#playDiagonals #ball-container .paddle:after {
  top: 50%;
  margin-top: -4vmin;
  content: "";
  position: absolute;
  height: 8vmin;
  width: 8vmin;
  background-size: contain;
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
  transition: all 0s ease-in-out 0s;
  transform: scale(0);
}
#playDiagonals #ball-container .paddle.serve:after {
  transition: all 0.25s ease-in-out 0s;
  transform: scale(1);
}
#playDiagonals #ball-container #paddle-left {
  left: -0.4vmin;
}
#playDiagonals #ball-container #paddle-left:after {
  left: 100%;
}
#playDiagonals #ball-container #paddle-left.touch {
  transform: translateX(100%);
}
#playDiagonals #ball-container #paddle-right {
  right: -0.4vmin;
}
#playDiagonals #ball-container #paddle-right:after {
  right: 100%;
}
#playDiagonals #ball-container #paddle-right.touch {
  transform: translateX(-100%);
}
#playDiagonals #ball-container #bishop-ball {
  z-index: 1000;
}
#playDiagonals #ball-container #bishop-ball {
  transition: transform 0.2s linear 0s;
}
#playDiagonals #ball-container #bishop-ball.touched {
  transition: transform 0s linear 0s;
  transform: scale(0.9, 1.1);
}
#playDiagonals #ball-container #bishop-ball.out {
  opacity: 0.1;
}
#playDiagonals #ball-container #bishop-ball {
  position: absolute;
  height: 8vmin;
  width: 8vmin;
  background-size: contain;
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
}
#playDiagonals #ball-container .ball-clone {
  position: absolute;
  height: 8vmin;
  width: 8vmin;
  background-size: contain;
  animation-name: cloneFade;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  background-image: url("/_img/chesspieces/sctheme-b/wB-grey.png");
}

#playBreakout {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 100%;
  overflow: hidden;
  position: fixed;
  overscroll-behavior: none;
  user-select: none;
}
#playBreakout body {
  overscroll-behavior: none;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-direction: row;
}
#playBreakout #gameContainer {
  overflow: hidden;
  height: 100vh;
}
#playBreakout #ball-container-wrap {
  position: relative;
}
#playBreakout #ball-container {
  position: relative;
  cursor: crosshair;
}
#playBreakout .event-button {
  width: 20vw;
  top: 50%;
  left: 50%;
  margin-left: -10vw;
  position: absolute;
  line-height: 6vw;
  font-size: 1vw;
  background: black;
  border: navajowhite;
  font-size: 3vw;
  margin-top: -3vw;
}
#playBreakout #game-countdown {
  top: 50%;
  left: 50%;
  width: 20vw;
  margin-left: -10vw;
  position: absolute;
  margin-top: -3vw;
  line-height: 6vw;
  font-size: 1vw;
  background: transparent;
  border: none;
  font-size: 3vw;
  text-align: center;
}
#playBreakout #ball-meta-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
#playBreakout #grid .cell {
  height: 8vmin;
  width: 8vmin;
}
#playBreakout .wave-pulse {
  height: 8vmin;
  width: 8vmin;
}
#playBreakout #paddle {
  z-index: 10;
  position: absolute;
  bottom: 0;
  height: 0.8vmin;
  width: 16vmin;
  background: var(--color-light);
  border-radius: 5px;
  transition: left 0.05s ease-out; /* Fast response for main paddle */
}
#playBreakout #paddle .spread {
  background: red;
  background: var(--color-dark);
  position: absolute;
  top: 0.2vmin;
  bottom: 0.2vmin;
  left: 0;
  right: 0;
}
#playBreakout .paddle-clone {
  z-index: 1;
  position: absolute;
  bottom: 0;
  height: 0.8vmin;
  width: 16vmin;
  background: radial-gradient(circle at center, rgb(45, 45, 45) 0%, rgba(45, 45, 45, 0) 100%);
  border-radius: 5px;
  opacity: 1; /* Slightly faded for trail effect */
}
#playBreakout .paddle-clone {
  transition: left 0.1s linear;
}
#playBreakout .pulse {
  position: absolute;
  height: 4vmin;
  width: 4vmin;
}
#playBreakout .pulse div {
  border-radius: 50%;
  animation-name: wave;
  animation-fill-mode: forwards;
  animation-duration: 0.75s;
  pointer-events: none;
  box-shadow: 0 0 1px 1px rgba(243, 233, 232, 0.15), inset 0 0 1px 1px rgba(243, 233, 232, 0.15); /* Green color for positive evaluation */
  height: 100%;
  position: absolute;
  width: 100%;
}
#playBreakout .pulse div.small {
  margin: 25%;
  height: 50%;
  width: 50%;
}
#playBreakout .ball {
  z-index: 100;
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
#playBreakout .ball.out {
  opacity: 0.125;
}
#playBreakout .target {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.1);
  font-size: 2vmin;
  transition: all 0.1s ease-out; /* Keep for other transitions */
  transform: scale(2);
  opacity: 0;
}
#playBreakout .target span {
  position: relative;
  color: rgb(255, 255, 255);
  z-index: 1000;
  display: inline-block;
  width: 2em;
  line-height: 2;
  height: 2em;
  text-align: center;
  border-radius: 1em;
  font-size: 1vmin;
  position: absolute;
  top: 0;
  right: 0;
  background: radial-gradient(circle at center, rgb(45, 45, 45) 0%, rgba(45, 45, 45, 0) 50%);
}
#playBreakout .target:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3.125%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#playBreakout .target.black.pawn:after {
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}
#playBreakout .target.black.knight:after {
  background-image: url("/_img/chesspieces/sctheme-b/bN.png");
}
#playBreakout .target.black.bishop:after {
  background-image: url("/_img/chesspieces/sctheme-b/bB.png");
}
#playBreakout .target.black.rook:after {
  background-image: url("/_img/chesspieces/sctheme-b/bR.png");
}
#playBreakout .target.black.queen:after {
  background-image: url("/_img/chesspieces/sctheme-b/bQ.png");
}
#playBreakout .target.black.king:after {
  background-image: url("/_img/chesspieces/sctheme-b/bK.png");
}
#playBreakout .target.white.pawn:after {
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
}
#playBreakout .target.white.knight:after {
  background-image: url("/_img/chesspieces/sctheme-b/wN.png");
}
#playBreakout .target.white.bishop:after {
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
}
#playBreakout .target.white.rook:after {
  background-image: url("/_img/chesspieces/sctheme-b/wR.png");
}
#playBreakout .target.white.queen:after {
  background-image: url("/_img/chesspieces/sctheme-b/wQ.png");
}
#playBreakout .target.white.king:after {
  background-image: url("/_img/chesspieces/sctheme-b/wK.png");
}
#playBreakout .target.spawned {
  transform: scale(1);
  opacity: 1;
}
#playBreakout .target.flash {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/_img/chesspieces/sctheme/square-white.png") !important;
  opacity: 1;
}
@keyframes targetFlash {
  0% {
    background-color: rgba(255, 255, 255, 0.03);
  }
  50% {
    background-color: white;
  }
  100% {
    background-color: rgba(255, 255, 255, 0.03);
  }
}
#playBreakout .target.killed {
  animation: targetKilled 0.5s ease; /* 150ms to match original intent */
}
@keyframes targetKilled {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}
#playBreakout #gameOver {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: none;
}
#playBreakout #restart {
  margin-top: 10px;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
}
#playBreakout #drawer {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  flex: 3;
  display: flex;
  flex-direction: column;
  background: rgba(234, 233, 232, 0.03);
  border: 2px solid var(--color-dark);
  z-index: 1000;
  transition: all 0.35s 0s var(--easing);
  max-width: 20vmin;
}
#playBreakout #drawer.in {
  max-width: 0;
}
#playBreakout #drawer.in #drawer-wrap {
  opacity: 0;
}
#playBreakout #drawer #drawer-toggle {
  z-index: 1001;
  padding: 0;
  position: absolute;
  top: 50%;
  margin-top: -22px;
  right: -44px;
  height: 44px;
  width: 44px;
  opacity: 0.4;
  border: none;
  cursor: pointer;
}
#playBreakout #drawer #drawer-toggle:hover {
  opacity: 1;
}
#playBreakout #drawer #drawer-toggle:before, #playBreakout #drawer #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);
}
#playBreakout #drawer #drawer-toggle:before {
  transform: rotate(90deg);
}
#playBreakout #drawer #drawer-toggle:after {
  transform: rotate(-90deg);
}
#playBreakout #drawer #drawer-toggle:hover:before {
  transform: rotate(110deg);
}
#playBreakout #drawer #drawer-toggle:hover:after {
  transform: rotate(-110deg);
}
#playBreakout #drawer:not(.in) #drawer-toggle:before {
  transform: rotate(90deg);
}
#playBreakout #drawer:not(.in) #drawer-toggle:after {
  transform: rotate(-90deg);
}
#playBreakout #drawer:not(.in) #drawer-toggle:hover:before {
  transform: rotate(70deg);
}
#playBreakout #drawer:not(.in) #drawer-toggle:hover:after {
  transform: rotate(-70deg);
}
#playBreakout #drawer #drawer-options {
  z-index: 1002;
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  padding: 0 10px;
  justify-content: space-between;
  order: 10;
}
#playBreakout #drawer #drawer-options .button-text {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px !important;
  line-height: 40px;
  opacity: 0.25;
}
#playBreakout #drawer #drawer-options .button-text:hover {
  opacity: 1;
}
#playBreakout #drawer #drawer-wrap {
  transition: all 0.35s 0s var(--easing);
  opacity: 1;
  overflow: scroll;
  position: absolute;
  right: 0;
  height: 100%;
  width: 20vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#playBreakout #drawer #drawer-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#playBreakout #drawer #drawer-controls {
  flex: 1;
  color: #fff;
}
#playBreakout #drawer #drawer-controls details + details {
  border-top: 2px solid var(--color-dark);
}
#playBreakout #drawer #drawer-controls details[open] summary:after {
  content: "−";
}
#playBreakout #drawer #drawer-controls details summary:hover:after {
  opacity: 1;
}
#playBreakout #drawer #drawer-controls details summary {
  cursor: pointer;
  display: block;
  font-size: 1.5vmin;
  flex: 1;
  color: #cccccc;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  padding: 1.5vmin 2vmin;
  line-height: 14px;
}
#playBreakout #drawer #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;
}
#playBreakout #drawer #drawer-controls details .slider-group {
  padding: 1.5vmin 2vmin;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out; /* Animation timing */
}
#playBreakout #drawer #drawer-controls {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#playBreakout #drawer #drawer-controls .slider-container {
  margin-bottom: 2vmin;
  display: flex;
  flex-wrap: wrap;
}
#playBreakout #drawer #drawer-controls .slider-container label {
  display: block;
  font-size: 1.5vmin;
  margin-bottom: 0.5vmin;
  flex: 1;
  color: #cccccc;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.2;
}
#playBreakout #drawer #drawer-controls .slider-container label span {
  float: right;
}
#playBreakout #drawer #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;
}
#playBreakout #drawer #drawer-controls .slider-container input[type=number]::-webkit-inner-spin-button, #playBreakout #drawer #drawer-controls .slider-container input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#playBreakout #drawer #drawer-controls .slider-container input[type=number] {
  -moz-appearance: textfield;
}
#playBreakout #drawer #drawer-controls .slider-container 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;
}
#playBreakout #drawer #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;
}
#playBreakout #drawer #drawer-controls .slider-container input[type=range]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00c0ff;
  cursor: pointer;
}
@media only screen and (orientation: portrait) {
  #playBreakout #drawer {
    display: none;
  }
}
@keyframes cloneFade {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
#playBreakout .ball-clone {
  z-index: 1;
  position: absolute;
  transition: opacity 0.5s ease;
  background: gray;
  animation-name: cloneFade;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playBreakout .splatter-container {
  position: absolute;
  transform: translate(-50%, -50%);
}
#playBreakout .splatter {
  position: absolute;
  width: 1vmin;
  height: 1vmin;
  background: white;
  border-radius: 50%;
  transition: opacity 1s ease, transform 1s ease;
}
#playBreakout .splatter-container.fade .splatter {
  opacity: 0;
  transform: translate(0, 0) scale(0.5);
}

#playFlaggy #game-wrap {
  position: relative;
}
#playFlaggy #score-container {
  position: absolute;
}
#playFlaggy #camera {
  position: relative;
}
#playFlaggy #world {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#playFlaggy #grid .cell {
  height: 8vmin;
  width: 8vmin;
}
#playFlaggy .platform {
  position: absolute;
  width: 8vmin;
  bottom: 0;
  height: 0;
  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 */
}
#playFlaggy .platform.shaded {
  z-index: 0;
}
#playFlaggy .platform.shaded:before {
  border-color: #252527;
}
#playFlaggy .platform.ladder {
  min-width: 0vmin;
  transition: all 1s ease-out 0s;
}
#playFlaggy .platform.ladder.king-on {
  transition: all 0s ease-out 0s;
}
#playFlaggy .platform.king-on.king-on-left-edge:before {
  transform: rotate(-2.5deg) translateY(0.65vmin);
}
#playFlaggy .platform.king-on.king-on-right-edge:before {
  transform: rotate(2.5deg) translateY(0.65vmin);
}
#playFlaggy .platform.king-on:before {
  transition-duration: 0s;
  transform: translateY(0.65vmin);
}
#playFlaggy .platform.vibrate {
  animation-name: vibrate;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#playFlaggy .platform:before {
  z-index: 2000;
  position: relative;
  content: "";
  border-top: 0.5vmin solid var(--color-light);
  display: block;
  margin: -0.25vmin -0.25vmin;
  transition: all 0.05s ease-out 0s;
}
#playFlaggy .platform.plate.king-on:before {
  transition: all 0s ease-out 0s;
}
#playFlaggy .platform.plate:before {
  transition: all 0.125s ease-out 0.125s;
}
#playFlaggy .platform .platform-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -0.25vmin;
  border-left: 0.5vmin solid #252527;
  border-bottom: 0.5vmin solid #252527;
  border-right: 0.5vmin solid #252527;
  border-radius: 0.25vmin;
  box-shadow: inset 0px 0 0px 5px var(--color-dark), 0px 0 5px 5px var(--color-dark);
}
@keyframes pipeMove {
  0% {
    transform: translate(0vw, 0);
  }
  100% {
    transform: translate(-116vw, 0);
  }
}
#playFlaggy .pipe {
  background: rgba(23, 23, 26, 0.8);
  position: absolute;
  min-height: 8vmin;
  width: 8vmin;
  z-index: 2000;
  right: 0vw;
}
#playFlaggy .pipe.bottom {
  bottom: 0;
}
#playFlaggy .pipe.top {
  top: 0;
}
#playFlaggy .pipe:before {
  z-index: 2000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 0.75vmin;
  border: 0.5vmin solid #454345;
  display: block;
  margin: -0.24vmin -0.24vmin;
  transition: all 0.05s ease-out 0s;
}
#playFlaggy .pipe:after {
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 1vmin;
  border: 1vmin solid var(--color-dark);
  display: block;
  margin: -0.5vmin -0.5vmin;
  opacity: 0.95;
}
#playFlaggy #king {
  will-change: left, right, bottom; /* Specify properties that are likely to change */
  z-index: 3000;
  filter: drop-shadow(0px 2.5vmin 10px rgba(23, 23, 26, 0.9));
  bottom: 0;
  position: absolute;
  width: 8vmin;
  height: 8vmin;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#playFlaggy #king.sliding {
  background: red !important;
}
#playFlaggy #king.latching-right.forward #kingBalls,
#playFlaggy #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);
}
#playFlaggy #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);
}
#playFlaggy #king.latching-left.backward #kingBalls,
#playFlaggy #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);
}
#playFlaggy #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);
}
#playFlaggy #king.sliding-right #kingBalls,
#playFlaggy #king.sliding-right #kingSkirt {
  transform: rotate(6.5deg) translateY(2.5%);
  transform-origin: bottom left;
}
#playFlaggy #king.sliding-right #kingCross {
  top: -0.5vmin !important;
}
#playFlaggy #king.sliding-left #kingBalls,
#playFlaggy #king.sliding-left #kingSkirt {
  transform: rotate(-6.5deg) translateY(2.5%);
  transform-origin: bottom right;
}
#playFlaggy #king.sliding-left #kingCross {
  top: -0.5vmin !important;
}
#playFlaggy #king.sliding-right.sliding-off #kingSkirt {
  transform: rotate(12.5deg) translateY(2.5%) skew(-10deg) translateX(-5%);
  transform-origin: bottom left;
}
#playFlaggy #king.sliding-right.sliding-off #kingBalls {
  transform: rotate(12.5deg) translateY(2.5%);
  transform-origin: bottom left;
}
#playFlaggy #king.sliding-left.sliding-off #kingSkirt {
  transform: rotate(-12.5deg) translateY(2.5%) skew(10deg) translateX(5%);
  transform-origin: bottom right;
}
#playFlaggy #king.sliding-left.sliding-off #kingBalls {
  transform: rotate(-12.5deg) translateY(2.5%);
  transform-origin: bottom right;
}
#playFlaggy #king.jumping-right #kingBalls,
#playFlaggy #king.jumping-right #kingSkirt {
  transform: rotate(12.5deg) translateY(2.5%);
  transform-origin: bottom left;
}
#playFlaggy #king.jumping-left #kingBalls,
#playFlaggy #king.jumping-left #kingSkirt {
  transform: rotate(-12.5deg) translateY(2.5%);
  transform-origin: bottom right;
}
#playFlaggy #king.jump #kingBalls {
  transform: translateY(0%) scale(0.9, 1);
}
#playFlaggy #king.jump #kingSkirt {
  transform: translateY(0%) scale(0.9, 0.9);
}
#playFlaggy #king.slow #kingCross {
  transition: all 1s 0s ease-out;
}
#playFlaggy #king.slow #kingBalls {
  transition: transform 0.7s 0s ease-out;
}
#playFlaggy #king.duck #kingCross {
  top: -0.125vmin !important;
}
#playFlaggy #king.duck #kingBalls {
  transform: translateY(7%) scale(0.98, 0.98);
}
#playFlaggy #king.duck #kingSkirt {
  transform: translateY(0%) scale(0.98, 0.98);
}
#playFlaggy #king.duck.face-backward #kingCross {
  transform: rotate(2deg) translateX(0%) scale(0.97);
}
#playFlaggy #king.duck.face-forward #kingCross {
  transform: rotate(-2deg) translateX(0%) scale(0.97);
}
#playFlaggy #king.jiggle.forward #kingBalls {
  transform: translateX(2%);
  transition: transform 0.1s 0s ease-in-out;
}
#playFlaggy #king.jiggle.backward #kingBalls {
  transform: translateX(-2%);
  transition: transform 0.1s 0s ease-in-out;
}
#playFlaggy #king.wobble #kingBalls {
  transform: translateY(0%) scale(1.3, 0.7);
}
#playFlaggy #king.wobble #kingSkirt {
  transform: translateY(0%) scale(1.2, 0.8);
}
#playFlaggy #king.wibble #kingBalls {
  transform: translateY(0%) scale(1.1, 0.9);
}
#playFlaggy #king.wibble #kingSkirt {
  transform: translateY(0%) scale(1.1, 0.9);
}
#playFlaggy #king .kingBalls,
#playFlaggy #king .kingSkirt,
#playFlaggy #king #kingBalls,
#playFlaggy #king #kingSkirt {
  transition: all 0.2s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: -3.125%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  transform-origin: bottom center; /* Set the transform origin to bottom center */
}
#playFlaggy #king .kingBalls,
#playFlaggy #king #kingBalls {
  z-index: 10;
  background-image: url("/_img/chesspieces/sctheme-b/wK-a-2.png");
}
#playFlaggy #king .kingSkirt,
#playFlaggy #king #kingSkirt {
  background-image: url("/_img/chesspieces/sctheme-b/wK-a-1.png");
  transition: all 0.4s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playFlaggy #king.blink #kingEyeL,
#playFlaggy #king.blink #kingEyeR {
  height: 0.2vmin !important;
}
#playFlaggy #king #kingEyes {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  gap: 0.75vmin;
  padding-top: 3.5vmin;
  padding-bottom: 1vmin;
}
#playFlaggy #king #kingEyes #kingEyeL,
#playFlaggy #king #kingEyes #kingEyeR {
  transition: all 0.2s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  background-color: var(--color-dark);
  height: 0.7vmin;
  width: 0.5vmin;
  border-radius: 2vmin;
  border-radius: 50%;
  opacity: 0.1;
}
#playFlaggy #king #kingCross {
  z-index: -2;
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 55%;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("/_img/chesspieces/sctheme-b/wK-b.png");
  margin: -3.125%;
  transform-origin: bottom center; /* Set the transform origin to bottom center */
}
#playFlaggy #king.face-backward #kingCross {
  transform: rotate(5deg) translateX(-1%) scale(1);
}
#playFlaggy #king.face-forward #kingCross {
  transform: rotate(-5deg) translateX(1%) scale(1);
}
#playFlaggy #king.idle.face-forward #kingBalls {
  transform: rotate(4deg) translateX(-1%) scale(1);
}
#playFlaggy #king.idle.face-backward #kingBalls {
  transform: rotate(-4deg) translateX(1%) scale(1);
}
#playFlaggy #king.face-backward.stab #kingCross {
  top: -15px;
  transform: rotate(25deg) translateX(-3%) scale(1);
}
#playFlaggy #king.face-forward.stab #kingCross {
  top: -15px;
  transform: rotate(-2s5deg) translateX(3%) scale(1);
}
#playFlaggy #king.face-backward.aim #kingCross {
  top: -5px;
  transform: rotate(15deg) translateX(-3%) scale(1);
}
#playFlaggy #king.face-forward.aim #kingCross {
  top: -5px;
  transform: rotate(-15deg) translateX(3%) scale(1);
}
#playFlaggy #king.face-forward.unloaded #kingCross {
  transform: rotate(22.5deg) translateX(50%) scale(0);
  opacity: 0;
}
#playFlaggy #king.face-backward.unloaded #kingCross {
  transform: rotate(-22.5deg) translateX(-50%) scale(0);
  opacity: 0;
}
#playFlaggy #king.forward:before {
  transform: rotate(2deg);
  transform: rotate(3deg) translateX(3%);
  background-size: 98%;
}
#playFlaggy #king.forward #kingCross {
  transform: rotate(-6deg);
  transform: rotate(-16deg) translateX(3%);
}
#playFlaggy #king.forward #kingBalls {
  transform: rotate(-4deg);
}
#playFlaggy #king.forward #kingSkirt {
  transform: skew(-10deg) translateX(-10%);
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playFlaggy #king.gather-in #kingCross {
  top: -1.3vmin !important;
  transition: all 0s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playFlaggy #king.gather-out #kingCross {
  transition: all 1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playFlaggy #king.jumpup #kingCross {
  top: -3.25vmin !important;
  bottom: 90%;
  transition: all 1.65s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playFlaggy #king.falling #kingCross {
  top: -3.25vmin !important;
  bottom: 90%;
  transition: all 0.65s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playFlaggy #king.backward:before {
  transform: rotate(-2deg);
  transform: rotate(-3deg) translateX(-3%);
  background-size: 98%;
}
#playFlaggy #king.backward #kingCross {
  transform: rotate(6deg);
  transform: rotate(16deg) translateX(-3%);
}
#playFlaggy #king.backward #kingBalls {
  transform: rotate(4deg);
}
#playFlaggy #king.backward #kingSkirt {
  transform: skew(10deg) translateX(10%);
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#grid .cell {
  position: relative;
}
#grid .cell:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3.125%;
  content: "";
  z-index: -5;
  background-image: url("/_img/chesspieces/sctheme/white.png");
  background-size: contain;
  background-position: center center;
  background-image: url("/_img/chesspieces/sctheme/square.png");
  background-size: 100%;
  background-image: url("/_img/chesspieces/sctheme/square-white-corner.png");
  opacity: 0.1;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out 0.25s;
}
#grid .cell:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: backgroundSize;
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
  background-size: 0%; /* Initial size */
}
#playAscend .cell {
  width: 8vmin;
  height: 8vmin;
}
#playAscend .square {
  position: absolute;
  width: 8vmin;
  height: 8vmin;
}
#playAscend .piece {
  will-change: left, right, bottom; /* Specify properties that are likely to change */
  z-index: 1000;
  filter: drop-shadow(0px 10px 10px rgb(23, 23, 26));
  bottom: 0;
  position: absolute;
  width: 8vmin;
  height: 8vmin;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#playAscend .piece.pawn {
  top: 0;
}
#playAscend .piece.pawn:before {
  transition: all 0.25s 0s ease-in-out;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: -3.125%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}
#playAscend .piece.pawn.new:before {
  background-size: 0%;
}
#playAscend .dot {
  position: absolute;
  height: 5px;
  width: 5px;
  margin-top: -2.5px;
  margin-left: -2.5px;
  background: var(--color-light);
  border-radius: 50%;
  opacity: 0.1;
}
#playAscend #king {
  will-change: left, right, bottom; /* Specify properties that are likely to change */
  z-index: 1000;
  filter: drop-shadow(0px 10px 10px rgb(23, 23, 26));
  bottom: 0;
  position: absolute;
  width: 8vmin;
  height: 8vmin;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 2000 !important;
  left: 50%;
  margin-left: -4vmin;
  filter: drop-shadow(0px 10px 10px rgb(23, 23, 26));
  transition: left 0.1s 0s linear;
}
#playAscend #king:before {
  transition: all 0.1s 0s ease-in-out;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: -3.125%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url("/_img/chesspieces/sctheme-b/wK-a.png");
}
#playAscend #king:after {
  z-index: -2;
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 55%;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("/_img/chesspieces/sctheme-b/wK-b.png");
  margin: -3.125%;
  transform-origin: bottom center; /* Set the transform origin to bottom center */
}
#playAscend #ascend {
  position: relative;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
#playAscend #ascend #aimer {
  position: absolute;
  height: 2vmin;
  width: 2vmin;
  margin-top: -1vmin;
  margin-left: -1vmin;
  background: var(--color-light);
  border-radius: 50%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  transition: all 0.25s 0s var(--easing);
}
#playAscend #ascend #aimer.active {
  transition: transform 0.125s 0s var(--easing);
  transform: scale(1);
}
#playAscend #ascend #aimer.active #force {
  transition: none;
}
#playAscend #ascend #aimer.active #force:before {
  transform: scale(1);
}
#playAscend #ascend #aimer #force {
  transition: all 0.125s 0s var(--easing);
  height: 0%;
  width: 100%;
  border-bottom-left-radius: 1vmin;
  border-bottom-right-radius: 1vmin;
  background: rgba(255, 255, 255, 0.025);
  opacity: 1;
  position: relative;
}
#playAscend #ascend #aimer #force:before {
  transform: scale(0);
  transition: transform 0.125s 0s var(--easing);
  content: ""; /* Required for the pseudo-element */
  position: absolute;
  top: -10px;
  left: 0%; /* Adjust to position the triangle horizontally */
  border-style: solid;
  border-width: 0 10px 10px 10px; /* Adjust the size of the triangle */
  border-color: transparent transparent rgb(255, 255, 255) transparent; /* Adjust the color */
}

#playPawnsweeper {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#playPawnsweeper #pawnsweeper-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
#playPawnsweeper #gameOptions h1 {
  z-index: 1;
  pointer-events: none;
}
#playPawnsweeper .ms-clock {
  position: relative;
  z-index: 500;
  text-align: center;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  font-size: 14px;
  padding: 0.5em;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
#playPawnsweeper .ms-clock.running {
  opacity: 1;
}
#playPawnsweeper .ms-clock time {
  display: flex;
  justify-content: center;
}
#playPawnsweeper .ms-clock time i {
  font-style: normal;
}
#playPawnsweeper .ms-clock .colon {
  margin: 0 0.1em;
}
#playPawnsweeper #pawnsweeper-container {
  position: relative;
  overflow: visible;
}
#playPawnsweeper #ms-warpgrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
  overflow: visible;
}
#playPawnsweeper #ms-warpgrid-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
  pointer-events: none;
  overflow: visible;
}
#playPawnsweeper #ms-warpgrid-hover circle {
  transition: opacity 0.35s ease-out;
}
#playPawnsweeper #ms-warpgrid-hover circle.active {
  transition: opacity 0.06s ease-out;
}
#playPawnsweeper .cell {
  position: relative;
  cursor: pointer;
}
#playPawnsweeper .cell-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: scale(0);
  will-change: transform;
  z-index: 300;
  font-family: "ND Kern", futura, sans-serif;
  font-weight: bold;
  font-size: min(4vmin, 24px);
  line-height: 1;
  color: var(--color-lightish);
}
#playPawnsweeper .cell-content img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#playPawnsweeper .notation {
  position: absolute;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(243, 233, 232, 0.15);
  font-size: 12px;
  font-weight: 500;
  line-height: 2;
  text-transform: uppercase;
  padding: 0.15em 0.85em;
  pointer-events: none;
  cursor: default;
}
#playPawnsweeper .alpha {
  width: 100%;
}
#playPawnsweeper .alpha.top {
  bottom: 100%;
}
#playPawnsweeper .alpha.bottom {
  top: 100%;
}
#playPawnsweeper .numeric {
  height: 100%;
}
#playPawnsweeper .numeric.left {
  right: 100%;
}
#playPawnsweeper .numeric.right {
  left: 100%;
}
#playPawnsweeper .explosion,
#playPawnsweeper .wave,
#playPawnsweeper .pulse {
  z-index: 400;
}
#playPawnsweeper #ms-fog {
  position: absolute;
  top: calc(-1 * min(9vh, 11vw));
  left: calc(-1 * min(9vh, 11vw));
  width: calc(10 * min(9vh, 11vw));
  height: calc(10 * min(9vh, 11vw));
  background: rgb(23, 23, 25);
  opacity: 0.65;
  pointer-events: none;
  z-index: 200;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}
#playPawnsweeper #ms-floaters {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}
#playPawnsweeper .ms-floater {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.88vh;
  height: 0.88vh;
  border-radius: 50%;
  background-color: var(--color-mid, rgb(67, 67, 69));
  opacity: 0.4;
  pointer-events: none;
  will-change: translate;
  animation: msBreath 13s ease-in-out infinite;
}
#playPawnsweeper .ms-floater.speed-1 {
  animation-duration: 2.5s;
}
#playPawnsweeper .ms-floater.speed-2 {
  animation-duration: 13.2s;
}
#playPawnsweeper .ms-floater.speed-3 {
  animation-duration: 4s;
}
#playPawnsweeper .ms-floater.speed-4 {
  animation-duration: 12s;
}
#playPawnsweeper .ms-floater.speed-5 {
  animation-duration: 3.7s;
}
#playPawnsweeper .ms-floater.speed-6 {
  animation-duration: 8.2s;
}
#playPawnsweeper .ms-floater.speed-7 {
  animation-duration: 6.5s;
}
#playPawnsweeper .ms-floater.speed-8 {
  animation-duration: 10s;
}
#playPawnsweeper .ms-floater-fg {
  width: 9.4vh;
  height: 9.4vh;
  background: radial-gradient(at center, rgb(25, 25, 28) 10%, rgba(25, 25, 28, 0) 40%);
  opacity: 0.4;
  animation: none;
}
@keyframes msBreath {
  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 msFlagPop {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes msFlagOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
#playPawnsweeper .cell-flagged .cell-content {
  animation: msFlagPop 0.25s ease-out forwards;
}
#playPawnsweeper .cell-content-out {
  animation: msFlagOut 0.15s ease-in forwards;
}
@keyframes msRevealContent {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
#playPawnsweeper .cell-revealed .cell-content {
  animation: msRevealContent 320ms cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
#playPawnsweeper .cell-mine .cell-content,
#playPawnsweeper .cell-exploded .cell-content {
  transform: scale(0);
}
#playPawnsweeper .ps-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  padding: 1.5em;
  opacity: 0;
  transform: translateY(50%);
  pointer-events: none;
  transition: opacity 0.25s ease 0.125s, transform 0.35s ease;
}
#playPawnsweeper .ps-footer.in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#playPawnsweeper .volume-control .muted-icon {
  display: none;
}
#playPawnsweeper .volume-control .unmuted-icon {
  display: block;
}
#playPawnsweeper .volume-control.muted .muted-icon {
  display: block;
}
#playPawnsweeper .volume-control.muted .unmuted-icon {
  display: none;
}
#playPawnsweeper .volume-control #mute-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
#playPawnsweeper .volume-control #mute-toggle:hover {
  opacity: 1;
}
#playPawnsweeper .volume-control #mute-toggle svg {
  width: 24px;
  height: 24px;
  display: block;
}
#playPawnsweeper #ps-retry {
  display: inline-block;
  outline: none;
  padding: 0 1.5em;
  height: 40px;
  line-height: 25px;
  border-radius: 14px;
  border: 2px solid rgba(234, 233, 232, 0.1);
  background: rgba(234, 233, 232, 0.03);
  color: rgba(234, 233, 232, 0.5);
  font-size: 11px;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s ease;
}
#playPawnsweeper #ps-retry:hover {
  background: rgba(234, 233, 232, 0.05);
  color: rgb(234, 233, 232);
}
#playPawnsweeper #ps-retry:active {
  background: rgba(234, 233, 232, 0.03);
}

#playCheckman {
  --base: 1.175vh;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#playCheckman #checkman-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
#playCheckman #gameOptions h1 {
  z-index: 1;
  pointer-events: none;
}
#playCheckman .cm-hud {
  position: relative;
  z-index: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  padding: 0.5em;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: rgba(243, 233, 232, 0.5);
}
#playCheckman .cm-lives {
  display: flex;
  gap: 0.25em;
}
#playCheckman .cm-life {
  width: 1.5em;
  height: 1.5em;
  background: url("/_img/chesspieces/sctheme-b/wK.png") center/contain no-repeat;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
#playCheckman .cm-life.lost {
  opacity: 0.15;
}
#playCheckman #checkman-container {
  position: relative;
  overflow: visible;
}
#playCheckman #cm-warpgrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
  overflow: visible;
}
#playCheckman .cell {
  position: relative;
  cursor: default;
  box-sizing: border-box;
}
#playCheckman .explosion {
  z-index: 400;
}
#playCheckman .notation {
  position: absolute;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(243, 233, 232, 0.15);
  font-size: 12px;
  font-weight: 500;
  line-height: 2;
  text-transform: uppercase;
  padding: 0.15em 0.85em;
  pointer-events: none;
  cursor: default;
}
#playCheckman .alpha {
  width: 100%;
}
#playCheckman .alpha.top {
  bottom: 100%;
}
#playCheckman .alpha.bottom {
  top: 100%;
}
#playCheckman .numeric {
  height: 100%;
}
#playCheckman .numeric.left {
  right: 100%;
}
#playCheckman .numeric.right {
  left: 100%;
}
#playCheckman .cm-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16%;
  height: 16%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 200;
  background: rgba(243, 233, 232, 0.4);
  border-radius: 50%;
}
#playCheckman .cm-power {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55%;
  height: 55%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 200;
  background: var(--color-light);
  border-radius: 50%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
  animation: cmPowerPulse 0.5s ease-in-out infinite alternate;
}
#playCheckman .cm-power .cm-dot-eye {
  position: absolute;
  width: 15%;
  height: 15%;
  background: #000;
  border-radius: 50%;
  opacity: 0.3;
}
#playCheckman .cm-power .cm-dot-eye-left {
  left: 30%;
  top: 35%;
}
#playCheckman .cm-power .cm-dot-eye-right {
  left: 55%;
  top: 35%;
}
#playCheckman .cm-power .cm-dot-smile {
  position: absolute;
  width: 30%;
  height: 15%;
  border-bottom: 2px solid black;
  border-radius: 50%;
  left: 35%;
  top: 50%;
  opacity: 0.4;
}
@keyframes cmPowerPulse {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes cmGhostScaredFlicker {
  0%, 10%, 100% {
    opacity: 0.6;
  }
  40%, 70% {
    opacity: 0.15;
  }
}
@keyframes cmGhostWarningFlicker {
  0%, 10%, 100% {
    opacity: 0.9;
  }
  40%, 70% {
    opacity: 0.1;
  }
}
@keyframes cmGhostFadeIn {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
#playCheckman .cm-entity {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
  z-index: 300;
}
#playCheckman .cm-entity img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#playCheckman .cm-player {
  z-index: 350;
  translate: calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px + var(--bob, 0) * -0.6vh);
  rotate: calc(var(--wiggle, 0) * 0.5deg);
  will-change: translate, rotate;
}
#playCheckman .cm-player .cm-king-sprite {
  min-width: calc(var(--base) * 8);
  min-height: calc(var(--base) * 8);
  transform: scale(0.95);
  transform-origin: bottom;
  position: relative;
  transition: all 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0px calc(var(--base) * 1.5) calc(var(--base) * 1) rgba(23, 23, 26, 0.9));
}
#playCheckman .cm-player .cm-kingSkirtWrap,
#playCheckman .cm-player .cm-kingBallsWrap {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  margin: -3.125%;
  transition: all 0.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playCheckman .cm-player .cm-kingSkirt {
  background-image: url("/checkman/_img/kingSkirt.svg");
  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;
  transition: all 0.4s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playCheckman .cm-player .cm-kingBalls {
  will-change: margin-bottom, transform;
  transition: all 0.3s 0s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  transform-origin: center 60%;
}
#playCheckman .cm-player .cm-kingBody {
  z-index: 10;
  height: 100%;
  width: 100%;
  transform-origin: center 80%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#playCheckman .cm-player .cm-kingBodyLeft,
#playCheckman .cm-player .cm-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;
}
#playCheckman .cm-player .cm-kingBodyLeft {
  background-image: url("/checkman/_img/kingBallL.svg");
}
#playCheckman .cm-player .cm-kingBodyRight {
  background-image: url("/checkman/_img/kingBallR.svg");
}
#playCheckman .cm-player .cm-kingEyes.cm-blink .cm-kingEyeL, #playCheckman .cm-player .cm-kingEyes.cm-blink .cm-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);
}
#playCheckman .cm-player .cm-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);
}
#playCheckman .cm-player .cm-kingEyeL,
#playCheckman .cm-player .cm-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: 50%;
  opacity: 0.2;
}
#playCheckman .cm-player .cm-kingCrossWrap {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  transition: all 0.1s 0s ease-in-out;
}
#playCheckman .cm-player .cm-kingCross {
  z-index: -2;
  transition: all 0.2s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 55%;
  right: 0;
  margin: -3.125%;
  transform-origin: bottom center;
  background-image: url("/checkman/_img/kingCross.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
#playCheckman .cm-player.face-forward .cm-kingBodyLeft {
  transform: rotate(-3deg);
  transition: transform 0.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playCheckman .cm-player.face-forward .cm-kingBodyRight {
  transition: transform 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playCheckman .cm-player.face-forward .cm-kingCrossWrap {
  transform: rotate(-6deg) translateX(-1%) scale(1);
}
#playCheckman .cm-player.face-forward .cm-kingBalls {
  transform: rotate(-5deg) translateX(-1%) scale(1);
}
#playCheckman .cm-player.face-backward .cm-kingBodyLeft {
  transition: transform 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playCheckman .cm-player.face-backward .cm-kingBodyRight {
  transform: rotate(3deg);
  transition: transform 0.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playCheckman .cm-player.face-backward .cm-kingCrossWrap {
  transform: rotate(6deg) translateX(1%) scale(1);
}
#playCheckman .cm-player.face-backward .cm-kingBalls {
  transform: rotate(5deg) translateX(1%) scale(1);
}
#playCheckman .cm-player.forward .cm-kingCrossWrap {
  transform: rotate(-16deg) translateX(3%);
}
#playCheckman .cm-player.forward .cm-kingBalls {
  transform: rotate(-4deg);
}
#playCheckman .cm-player.forward .cm-kingSkirt {
  transform: skew(-10deg) translateX(-10%);
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playCheckman .cm-player.backward .cm-kingCrossWrap {
  transform: rotate(16deg) translateX(-3%);
}
#playCheckman .cm-player.backward .cm-kingBalls {
  transform: rotate(4deg);
}
#playCheckman .cm-player.backward .cm-kingSkirt {
  transform: skew(10deg) translateX(10%);
  transition: all 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playCheckman .cm-ghost {
  z-index: 300;
  will-change: transform;
  transition: opacity 0.3s ease;
}
#playCheckman .cm-ghost.cm-ghost-scared:not(.cm-ghost-clone):not(.cm-ghost-eaten) {
  animation: cmGhostScaredFlicker 0.25s ease-in-out infinite;
}
#playCheckman .cm-ghost.cm-ghost-warning:not(.cm-ghost-clone):not(.cm-ghost-eaten) {
  animation: cmGhostWarningFlicker 0.12s ease-in-out infinite;
}
#playCheckman .cm-ghost.cm-ghost-fading:not(.cm-ghost-clone) {
  animation: cmGhostFadeIn 0.4s ease-out forwards;
}
#playCheckman .cm-ghost.cm-ghost-clone {
  opacity: 0 !important;
}
#playCheckman .cm-ghost.cm-ghost-clone.cm-tunnel-active {
  opacity: inherit !important;
}
#playCheckman .cm-ghost.cm-ghost-eaten {
  opacity: 0 !important;
  animation: none !important;
}
#playCheckman .cm-ghost img {
  width: 100%;
  height: 100%;
}
#playCheckman #checkman-container.power-mode {
  box-shadow: 0 0 20px rgba(234, 233, 232, 0.15);
}
#playCheckman .cm-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding: 1.5em;
  opacity: 0;
  transform: translateY(50%);
  pointer-events: none;
  transition: opacity 0.25s ease 0.125s, transform 0.35s ease;
}
#playCheckman .cm-footer.in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#playCheckman #cm-message {
  font-family: "ND Kern", futura, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: var(--color-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#playCheckman #cm-retry {
  display: inline-block;
  outline: none;
  padding: 0 1.5em;
  height: 40px;
  line-height: 25px;
  border-radius: 14px;
  border: 2px solid rgba(234, 233, 232, 0.1);
  background: rgba(234, 233, 232, 0.03);
  color: rgba(234, 233, 232, 0.5);
  font-size: 11px;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s ease;
}
#playCheckman #cm-retry:hover {
  background: rgba(234, 233, 232, 0.05);
  color: rgb(234, 233, 232);
}
#playCheckman .volume-control .muted-icon {
  display: none;
}
#playCheckman .volume-control .unmuted-icon {
  display: block;
}
#playCheckman .volume-control.muted .muted-icon {
  display: block;
}
#playCheckman .volume-control.muted .unmuted-icon {
  display: none;
}
#playCheckman .volume-control #mute-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
#playCheckman .volume-control #mute-toggle:hover {
  opacity: 1;
}
#playCheckman .volume-control #mute-toggle svg {
  width: 24px;
  height: 24px;
  display: block;
}

.product + .shop-inline {
  margin-top: 4vmin;
}

.products-header {
  position: relative !important;
  opacity: 1 !important;
}
.product {
  counter-increment: product;
  position: relative;
  display: flex;
}
.product .product-thumbnails-listed > div {
  gap: 2vmin;
  padding: 5vmin 5vmin;
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0px;
}
.product .product-thumbnails-listed > div .thumbnail {
  border-radius: 5px;
  height: 15vmin;
  width: auto;
  aspect-ratio: 1;
  background-size: cover;
}
@media only screen and (orientation: portrait) {
  .product .product-thumbnails-listed > div {
    flex-direction: row;
  }
}
@media only screen and (orientation: landscape) {
  .product .product-thumbnails-listed > div {
    flex-direction: column;
    height: 100vh;
  }
}
@media only screen and (orientation: portrait) {
  .product .product-thumbnails-listed {
    display: none;
  }
}
.product .product-thumbnails {
  flex-direction: column;
}
.product .product-thumbnails .thumbnail {
  scroll-snap-align: center;
  aspect-ratio: 1;
  width: auto;
  height: 100vh;
  background-repeat: no-repeat;
}
@media only screen and (orientation: portrait) {
  .product .product-thumbnails .thumbnail {
    height: 100vw;
    background-size: contain;
    background-position: center;
    background-attachment: scroll !important;
    height: 88vw;
    border-radius: 10px;
    display: inline-block !important;
  }
}
@media only screen and (orientation: landscape) {
  .product .product-thumbnails .thumbnail {
    background-size: 100vh;
  }
}
@media (hover: hover) {
  .product .product-thumbnails .thumbnail {
    background-attachment: fixed;
  }
}
@media only screen and (orientation: portrait) {
  .product .product-thumbnails .thumbnail + .thumbnail {
    margin-left: 3vmin;
  }
}
@media only screen and (orientation: portrait) {
  .product .product-thumbnails {
    display: block;
    overflow: scroll;
    width: 100vw;
    scroll-snap-type: X mandatory;
    white-space: nowrap;
    padding: 0 3vmin;
    font-size: 0;
  }
}
.product .product-details {
  flex: 2;
  padding: 0;
}
.product .product-details p {
  font-family: "Lora", Georgia, Serif;
  font-size: 17px;
  margin-top: 3vmin;
  text-wrap: balance;
}
@media only screen and (orientation: portrait) {
  .product .product-details {
    order: 1;
  }
}
.product .product-details:before {
  display: block;
  height: 32px;
  width: 32px;
  line-height: 32px;
  margin-right: 6px;
}
.product .product-details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (orientation: portrait) {
  .product .product-details .product-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    justify-content: space-between;
  }
}
.product .product-details > div:first-child {
  position: sticky;
  top: 40px;
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media only screen and (orientation: portrait) {
  .product .product-details > div:first-child {
    padding: 20px 50px;
    background: linear-gradient(0deg, rgba(20, 21, 22, 0) 0%, rgba(24, 25, 27, 0.5) 100%);
  }
}
@media only screen and (orientation: portrait) {
  .product .product-details > div:first-child {
    flex-direction: row;
    align-items: center;
    top: 0px;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media only screen and (orientation: landscape) {
  .product .product-details > div:first-child {
    height: 100vh;
  }
}
.product .product-details .product-features {
  margin-bottom: 2em;
  margin-top: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.product .product-details .product-features li {
  flex: 1;
}
.product .product-details .product-features li b {
  font-weight: 800;
  display: block;
  letter-spacing: 0.1em;
}
.product .product-details .product-features li + li {
  margin-left: 1em;
  padding-left: 1em;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.product .product-details h2 {
  bottom: 40px;
  font-size: 8vmin;
  margin-bottom: 0.1em;
  letter-spacing: 0;
  line-height: 0.775;
  text-shadow: 0 0 10px black;
}
@media only screen and (orientation: portrait) {
  .product .product-details h2 {
    font-weight: 400;
    margin: 0;
    margin-top: 0.1em;
    margin-right: 0.65em;
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 900;
    font-size: 48px;
    letter-spacing: 0.04em;
  }
  .product .product-details h2 br {
    display: none;
  }
}
.product .product-details .product-button {
  text-shadow: none;
  border-radius: 0.3em;
  display: inline-block;
  color: var(--color-light);
  width: auto;
  padding: 4px 8px;
  padding-bottom: 0.2em;
  padding-right: 0.5em;
  text-align: center;
  text-transform: initial;
  bottom: 0px;
  position: relative;
  line-height: 1.3;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--color-dark);
  background: black;
  color: var(--color-light);
  white-space: nowrap;
}
.product .product-details .product-button:hover {
  background: var(--color-light);
  color: black;
  opacity: 1;
}
.product .product-details .product-button b {
  font-weight: 900;
}
@media only screen and (orientation: portrait) {
  .product .product-details .product-button {
    font-size: 16px;
    padding: 0.5em 0.8em;
    padding-bottom: 0.3em;
    margin-top: -5px;
  }
}
@media only screen and (orientation: landscape) {
  .product .product-details .product-button {
    font-size: 22px;
    padding: 0.5em 0.8em;
    padding-bottom: 0.3em;
  }
}
@media only screen and (orientation: portrait) {
  .product {
    flex-direction: column;
    margin-bottom: 6.5vmin;
  }
}
@media only screen and (orientation: landscape) {
  .product {
    flex-direction: row;
  }
}

#header.product-header {
  position: absolute;
}
@media only screen and (orientation: portrait) {
  #header.product-header {
    position: relative;
  }
}

#product-hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100vh;
  position: relative;
}
#product-hero.shirt {
  width: 50vw;
  background-size: contain;
  background-position: left center;
}
#product-hero .product-intro {
  font-size: 125%;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 400 !important;
  text-transform: uppercase;
  margin: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-top: 10em;
  padding-bottom: 2.5em;
  background: linear-gradient(180deg, rgba(20, 21, 22, 0) 0%, rgba(24, 25, 27, 0.5) 100%);
}
@media only screen and (max-width: 601px) {
  #product-hero .product-intro {
    font-size: 110%;
  }
}
@media (hover: hover) {
  #product-hero {
    background-attachment: fixed;
    height: 95vh;
  }
}

#origin section {
  scroll-snap-align: start; /* Snap to top by default */
  width: 100%; /* Full width */
  margin: 0 auto; /* Center horizontally */
  padding: 5vmin;
  display: flex; /* Use Flexbox for layout */
  flex-direction: column; /* Stack content vertically */
  justify-content: flex-start; /* Align content at top */
  max-width: 1000px; /* Default max-width */
  text-align: left;
  margin-bottom: 15vh; /* Spacing between sections */
  /* Media query adjustments */
}
@media only screen and (max-width: 601px) {
  #origin section {
    padding: 0vmin;
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 601px) {
  #origin section:nth-child(2) {
    padding-top: 10vh;
  }
}
@media only screen and (min-width: 601px) {
  #origin section:last-child {
    padding-bottom: 10vh;
  }
}
#origin section.whide {
  width: 100vw;
  max-width: 100vw;
}
@media only screen and (min-width: 601px) {
  #origin section {
    scroll-snap-align: center; /* Snap to center on larger screens */
  }
}
@media only screen and (max-width: 1140px) {
  #origin section {
    max-width: 650px;
  }
}
@media only screen and (max-width: 1140px) and (hover: none) and (orientation: portrait) {
  #origin section {
    max-width: 650px;
  }
}
@media only screen and (max-width: 1140px) and (hover: none) and (orientation: landscape) {
  #origin section {
    max-width: 900px;
  }
}
#origin section {
  /* Nested section styling */
}
#origin section section {
  width: calc(40% - 30px); /* Mimic original float width */
}
@media only screen and (max-width: 1140px) {
  #origin section section {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  #origin cite {
    margin-left: 30px;
  }
}

#origin quote,
#origin p {
  display: block;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.035em;
  position: relative;
  top: -2px;
}
#origin quote:not(:last-child),
#origin p:not(:last-child) {
  margin-bottom: 1em;
}
@media only screen and (max-width: 600px) {
  #origin quote,
  #origin p {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* Flexbox layout for section content (figure + div) */
#origin section {
  display: flex;
  flex-direction: row; /* Side-by-side layout */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  align-items: flex-start; /* Align content at top */
  gap: 30px; /* Replace margin-right from float */
}

/* Figure styling */
#origin figure {
  display: block;
  width: 60%; /* Default width */
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 1140px) {
  #origin figure {
    width: 100%;
    margin-bottom: 20px;
  }
}
#origin figure i {
  position: relative;
  padding-top: 100%; /* Maintain aspect ratio */
  display: block;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  transform: scale(1);
}
#origin figure img {
  position: absolute;
  width: 100%;
  top: 0;
  border-radius: 10px;
  max-width: 100%;
  display: block;
  transition: transform 0.125s ease-in-out;
  transform: scale(1);
}

/* Flexbox for div (text content) */
#origin section > div {
  flex: 1; /* Take remaining space */
  min-width: 0; /* Prevent overflow issues */
}

/* Window (image grid) styling */
#origin .window {
  position: relative;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  width: calc(60% + 20px); /* Original width */
  margin: 0;
  padding: 0;
  gap: 20px;
}
@media only screen and (max-width: 1140px) {
  #origin .window {
    width: calc(100% + 20px);
    margin-right: -10px;
  }
}
#origin .window.fine li {
  flex: 3;
  min-width: 30%; /* Three columns */
}
#origin .window.finer li {
  width: 25%; /* Four columns */
}
#origin .window.row {
  width: calc(100vw - 40px);
  margin: 0 auto;
  flex-wrap: nowrap;
  justify-content: center;
}
#origin .window.row li {
  padding: 0;
}
#origin .window.row li + li {
  margin-left: 15px;
}
#origin .window li {
  flex: 1;
  display: block;
  min-width: 45%; /* Two columns by default */
  padding: 0px;
  margin: 0;
}
#origin .window li figure {
  width: 100%;
  margin: 0;
}

#playChess .toggle {
  background: rgba(23, 23, 26, 0.5);
  border-radius: 19px;
  margin: 12px;
  color: rgba(243, 233, 232, 0.5);
  display: flex;
  align-items: center;
  text-align: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}
#playChess .toggle.toggle-row {
  flex-direction: row;
}
#playChess .toggle.toggle-row span + span {
  margin-left: -15px;
}
#playChess .toggle.toggle-stack {
  flex-direction: column;
  align-items: stretch;
}
#playChess .toggle span {
  border-radius: 50px;
  margin: 2px;
  flex: 1;
  display: inline-block;
  line-height: 1;
  padding: 1em;
  text-align: center;
}
#playChess .toggle span.active {
  color: var(--color-light);
  background: rgb(23, 23, 26);
}
#playChess .toggle span:hover {
  color: var(--color-light);
}
#playChess .toggle .toggle-button {
  width: 50%;
  position: absolute;
  background: rgb(23, 23, 26);
  display: none;
}
#playChess .completion-grid {
  padding: 12px;
  display: flex;
  justify-content: center;
  gap: 4px;
  width: 100%;
  flex-wrap: wrap;
}
#playChess .completion-grid .completion-entry {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
#playChess .completion-grid .completion-entry.empty {
  opacity: 0.5;
}
#playChess .completion-grid .completion-entry.today {
  color: var(--color-light);
  font-weight: 600;
}
#playChess .completion-grid .completion-entry {
  position: relative;
  min-width: 12.2857142857%;
  background: var(--color-dark);
  color: rgba(243, 233, 232, 0.5);
  aspect-ratio: 1/1;
}
#playChess .completion-grid .completion-entry span {
  font-size: 14px;
  line-height: 1.1;
}
#playChess .completion-grid .completion-entry .completion-duration {
  font-weight: 500;
  color: rgba(243, 233, 232, 0.25);
}
#playChess #deltaHistory {
  width: 100%;
  position: absolute;
  top: 5vh;
  left: 0;
  padding: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  opacity: 0.25;
}
#playChess #deltaHistory > span {
  border-radius: 50%;
  height: 0.5vmin;
  min-width: 0.5vmin;
  margin: 0.5vmin;
  font-size: 0;
  background: rgba(243, 233, 232, 0.25);
}
#playChess #puzzlecalendar {
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
}
#playChess #puzzlecalendar .month-label {
  font-feature-settings: "tnum", "case" 1;
  font-weight: 500;
  font-size: 14px;
  line-height: 2em;
  text-transform: uppercase;
  color: rgba(243, 233, 232, 0.25);
  display: none;
}
#playChess #puzzlecalendar .weeks-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#playChess #puzzlecalendar .weeks-container .week-row:first-child .day-entry:last-child {
  border-top-right-radius: 10px;
}
#playChess #puzzlecalendar .weeks-container .week-row:first-child .day-entry:first-child {
  border-top-left-radius: 10px;
}
#playChess #puzzlecalendar .weeks-container .week-row:last-child .day-entry:last-child {
  border-bottom-right-radius: 10px;
}
#playChess #puzzlecalendar .weeks-container .week-row:last-child .day-entry:first-child {
  border-bottom-left-radius: 10px;
}
#playChess #puzzlecalendar .weeks-container .week-row {
  display: flex;
  flex-direction: row;
  gap: 2px;
}
#playChess #puzzlecalendar .weeks-container .week-row div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  align-items: center;
  justify-content: center;
}
#playChess #puzzlecalendar .weeks-container .week-row .day-header {
  font-feature-settings: "tnum", "case" 1;
  font-weight: 500;
  font-size: 12px;
  line-height: 2em;
  text-transform: uppercase;
  color: rgba(243, 233, 232, 0.25);
}
#playChess #puzzlecalendar .weeks-container .week-row .day-entry.empty {
  opacity: 0.5;
}
#playChess #puzzlecalendar .weeks-container .week-row .day-entry.today {
  color: rgb(243, 233, 232);
  font-weight: 600;
}
#playChess #puzzlecalendar .weeks-container .week-row .day-entry {
  position: relative;
  width: 12.2857142857%;
  background: var(--color-dark);
  color: rgba(243, 233, 232, 0.5);
  aspect-ratio: 1/1.3;
}
#playChess #puzzlecalendar .weeks-container .week-row .day-entry span {
  font-size: 14px;
  line-height: 1.1;
}
#playChess #puzzlecalendar .weeks-container .week-row .day-entry .day-number {
  font-weight: 500;
  color: rgba(243, 233, 232, 0.25);
}
#playChess #tags-container {
  background: var(--color-dark);
  position: fixed;
  -moz-column-width: 220px;
       column-width: 220px;
  width: 100vw;
  height: 100vh;
  left: 0;
  z-index: 100000;
  -moz-column-gap: 32px;
       column-gap: 32px;
  padding: 32px;
  overflow: scroll;
  font-size: 0;
}
#playChess #tags-container #tags-container-inner div {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(243, 233, 232, 0.2);
  line-height: 1.5;
  font-size: 12px;
}
#playChess #tags-container #tags-container-inner div:hover {
  color: rgb(243, 233, 232);
}
#playChess #local-storage-toggle {
  z-index: 1000;
  padding: 0;
  position: absolute;
  top: 50%;
  margin-top: -22px;
  left: 100%;
  height: 44px;
  width: 44px;
  opacity: 0.4;
}
#playChess #local-storage-toggle:before, #playChess #local-storage-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);
}
#playChess #local-storage-toggle:before {
  transform: rotate(90deg);
}
#playChess #local-storage-toggle:after {
  transform: rotate(-90deg);
}
#playChess #local-storage-toggle:hover:before {
  transform: rotate(110deg);
}
#playChess #local-storage-toggle:hover:after {
  transform: rotate(-110deg);
}
#playChess #local-storage:not(.in) #local-storage-toggle:before {
  transform: rotate(90deg);
}
#playChess #local-storage:not(.in) #local-storage-toggle:after {
  transform: rotate(-90deg);
}
#playChess #local-storage:not(.in) #local-storage-toggle:hover:before {
  transform: rotate(70deg);
}
#playChess #local-storage:not(.in) #local-storage-toggle:hover:after {
  transform: rotate(-70deg);
}
#playChess #local-storage {
  top: 0;
  bottom: 0px;
  left: 0;
  height: 100%;
  flex: 3;
  display: flex;
  flex-direction: column;
  background: rgba(243, 233, 232, 0.03);
  position: relative;
  border: 2px solid var(--color-dark);
  z-index: 100000;
  transition: all 0.35s 0s var(--easing);
  max-width: 21.4285714286vw;
}
#playChess #local-storage.in {
  max-width: 0px;
}
#playChess #local-storage.in #local-storage-wrap {
  opacity: 0;
}
#playChess #local-storage #local-storage-options {
  z-index: 1000;
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  justify-content: space-between;
}
#playChess #local-storage #local-storage-wrap {
  transition: all 0.35s 0s var(--easing);
  opacity: 1;
  overflow: hidden;
  height: 100%;
}
#playChess #local-storage #local-storage-inner {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#playChess #local-storage #puzzleData,
#playChess #local-storage #localStorage {
  pointer-events: auto;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
  font-family: "consolas", Courier, monospace;
  font-size: 13px;
  letter-spacing: 0;
  overflow: scroll;
  width: 100%;
  width: 300px;
  flex: 1;
  max-height: 100vh;
}
#playChess #local-storage #puzzleData:empty,
#playChess #local-storage #localStorage:empty {
  display: flex;
  align-content: center;
  justify-content: center;
  align-content: center;
  align-items: center;
  display: none;
}
#playChess #local-storage #puzzleData:empty:after,
#playChess #local-storage #localStorage:empty:after {
  display: inline-block;
  content: "So empty inside";
  opacity: 0.2;
}
#playChess #local-storage #puzzleData span,
#playChess #local-storage #localStorage span {
  margin-right: 14px;
  margin-left: 14px;
  position: relative;
}
#playChess #local-storage #puzzleData span.copied, #playChess #local-storage #puzzleData span:hover,
#playChess #local-storage #localStorage span.copied,
#playChess #local-storage #localStorage span:hover {
  color: rgba(243, 233, 232, 0.25);
}
#playChess #local-storage #puzzleData span.copied:after, #playChess #local-storage #puzzleData span:hover:after,
#playChess #local-storage #localStorage span.copied:after,
#playChess #local-storage #localStorage span:hover:after {
  position: absolute;
  top: 0;
  right: 0;
  color: rgb(243, 233, 232);
  font-size: 13px;
  font-family: "ND Kern", futura, Sans-Serif;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 2.1;
  font-weight: 600;
  letter-spacing: 0.05em;
}
#playChess #local-storage #puzzleData span:hover:after,
#playChess #local-storage #localStorage span:hover:after {
  content: " copy";
}
#playChess #local-storage #puzzleData span.copied:after,
#playChess #local-storage #localStorage span.copied:after {
  content: " copied";
}
#playChess #local-storage #puzzleData span,
#playChess #local-storage #localStorage span {
  display: block;
  white-space: pre;
  opacity: 0.5;
}
#playChess #local-storage #puzzleData span:hover,
#playChess #local-storage #localStorage span:hover {
  opacity: 1;
}
@media only screen and (orientation: portrait) {
  #playChess #local-storage {
    display: none;
  }
}

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

.page-error {
  overflow: hidden;
}

.blank-spacer {
  flex: 10;
}

#gameOptions {
  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 {
  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.15);
  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.3) !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;
}

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

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

.splatter-container {
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all 0.25s 0s var(--easing);
  transform: scale(0);
  pointer-events: none;
}
.splatter-container.full {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.splatter-container.fade {
  transform: scale(1);
}
.splatter-container.fade .splatter:nth-child(2) {
  height: 12vmin;
  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: 18vmin;
  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: 24vmin;
  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: 6vmin;
  width: 6vmin;
  border-radius: 3vmin;
  background: rgba(255, 0, 0, 0.25);
  position: absolute;
}

.cell .effect-wrap {
  top: 50%;
  left: 50%;
}

.effect-wrap {
  position: absolute;
  height: 8vmin;
  width: 8vmin;
  margin: -4vmin;
  z-index: 10000;
  pointer-events: none;
  transform-origin: center center; /* Set the transform origin to bottom center */
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

@keyframes ploing {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  30% {
    transform: scale(1, 1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5, 1.5);
    opacity: 0;
  }
}
.ploing {
  height: 100%;
  width: 100%;
  position: relative;
  animation-name: ploing;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-duration: 0.75s;
}
.ploing .point {
  transform-origin: center;
  position: absolute;
  border: 0.25vmin solid #454345;
  border-radius: 50%;
  margin: -0.25vmin;
}
.ploing .point.left {
  top: 50%;
  left: -25%;
}
.ploing .point.top-left {
  top: 0%;
  left: 0;
}
.ploing .point.top {
  top: -25%;
  left: 50%;
}
.ploing .point.top-right {
  top: 0%;
  right: 0;
}
.ploing .point.right {
  top: 50%;
  right: -25%;
}
.ploing .point.bottom-left {
  bottom: 0%;
  left: 0;
}
.ploing .point.bottom {
  bottom: -25%;
  left: 50%;
}
.ploing .point.bottom-right {
  bottom: 0%;
  right: 0;
}

@keyframes tileShine {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}
.tile {
  will-change: opacity;
  background: var(--color-light);
  pointer-events: none;
  position: absolute;
  animation-name: tileShine;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
  height: 100%;
  width: 100%;
}

.explosion {
  pointer-events: none;
  position: absolute;
  border-radius: 50%;
  animation-name: explode;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-duration: 0.5s;
  height: 100%;
  width: 100%;
  box-shadow: 0 0 10px 10px rgba(243, 233, 232, 0.1), inset 0 0 10px 10px rgba(243, 233, 232, 0.1); /* Green color for positive evaluation */
  box-shadow: 0 0 10px 10px rgba(50, 50, 50, 0.5), inset 0 0 10px 10px rgba(50, 50, 50, 0.5); /* Green color for positive evaluation */
}
.explosion.red {
  box-shadow: 0 0 10px 10px rgba(255, 0, 0, 0.2), inset 0 0 10px 10px rgba(255, 0, 0, 0.1); /* Green color for positive evaluation */
}
.explosion.mini {
  box-shadow: 0 0 10px 5px rgb(150, 50, 50), inset 0 0 10px 5px rgb(50, 50, 50); /* Green color for positive evaluation */
  animation-duration: 0.5s;
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  margin: -20%;
}

@keyframes badgePop {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes mateWave {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(50);
    opacity: 0;
  }
}
@keyframes pingWave {
  0% {
    transform: scale(10);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 1;
  }
}
@keyframes hintWave {
  0% {
    transform: scale(10);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 1;
  }
}
@keyframes explode {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}
@keyframes axe {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}
@keyframes wave {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  5% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}
@keyframes sec-in {
  0% {
    min-height: 10px;
    opacity: 0;
  }
  10% {
    min-height: 0px;
    opacity: 1;
  }
  90% {
    min-height: 32px;
    opacity: 1;
  }
  100% {
    min-height: 30px;
    opacity: 1;
  }
}
@keyframes ping-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ping-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes axis-x {
  0% {
    transform: scale(0.125, 0);
    opacity: 0;
  }
  2% {
    transform: scale(0.125, 1.5);
    opacity: 1;
  }
  100% {
    transform: scale(0.125, 30);
    opacity: 0;
  }
}
@keyframes axis-y {
  0% {
    transform: scale(0, 0.125);
    opacity: 0;
  }
  2% {
    transform: scale(1.5, 0.125);
    opacity: 1;
  }
  100% {
    transform: scale(30, 0.125);
    opacity: 0;
  }
}
@keyframes crisscrossbleep {
  0% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}
@keyframes criss {
  0% {
    transform: rotate(45deg) scale(0.125, 0.125);
    opacity: 0;
  }
  2% {
    transform: rotate(45deg) scale(0.125, 1.5);
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) scale(0.125, 25);
    opacity: 0;
  }
}
@keyframes cross {
  0% {
    transform: rotate(45deg) scale(0.125, 0.125);
    opacity: 0;
  }
  2% {
    transform: rotate(45deg) scale(1.5, 0.125);
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) scale(25, 0.125);
    opacity: 0;
  }
}
@keyframes spark {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}
.criss,
.cross {
  animation-fill-mode: forwards;
  animation-duration: 1s;
  pointer-events: none;
  height: 100%;
  position: absolute;
  width: 100%;
  background: rgba(243, 233, 232, 0.05);
  border-radius: 50%;
}

.criss {
  animation-name: criss;
}

.cross {
  animation-name: cross;
}

.file,
.rank {
  animation-fill-mode: forwards;
  animation-duration: 1s;
  pointer-events: none;
  height: 100%;
  position: absolute;
  width: 100%;
}

.spark {
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  pointer-events: none;
  height: 200%;
  position: absolute;
  width: 10%;
  top: -50%;
  left: 45%;
  background: linear-gradient(0deg, rgba(243, 233, 232, 0) 0%, rgba(243, 233, 232, 0.5) 20%, rgba(243, 233, 232, 0) 50%, rgba(243, 233, 232, 0.5) 80%, rgba(243, 233, 232, 0) 100%);
}

.file {
  animation-name: axis-y;
  background: rgba(243, 233, 232, 0.05);
}

.rank {
  animation-name: axis-x;
  background: rgba(243, 233, 232, 0.05);
}

.burst {
  border-radius: 50%;
  animation-name: wave;
  animation-fill-mode: forwards;
  animation-duration: 0.75s;
  pointer-events: none;
  box-shadow: 0 0 1px 1px rgba(243, 233, 232, 0.25), inset 0 0 1px 1px rgba(243, 233, 232, 0.25); /* Green color for positive evaluation */
  position: absolute;
  animation-name: axe;
  margin: 30%;
  height: 40%;
  width: 40%;
  animation-duration: 0.5s;
}

@keyframes dustFloat {
  0% {
    transform: scale(1, 1) translateY(0vmin) translateX(0%);
    opacity: 0.25;
  }
  25% {
    transform: scale(0.9, 0.9) translateY(-3vmin) translateX(-20%);
    opacity: 0.15;
  }
  50% {
    transform: scale(0.8, 0.8) translateY(-6vmin) translateX(20%);
    opacity: 0.1;
  }
  75% {
    transform: scale(0.7, 0.7) translateY(-9vmin) translateX(-20%);
    opacity: 0.05;
  }
  100% {
    transform: scale(0.6, 0.6) translateY(-12vmin) translateX(0%);
    opacity: 0;
  }
}
@keyframes dustFloatLeft {
  0% {
    transform: scale(1, 1) translateY(0vmin) translateX(0vmin);
    opacity: 0.25;
  }
  25% {
    transform: scale(0.9, 0.9) translateY(-3vmin) translateX(4vmin);
    opacity: 0.15;
  }
  50% {
    transform: scale(0.8, 0.8) translateY(-6vmin) translateX(8vmin);
    opacity: 0.1;
  }
  75% {
    transform: scale(0.7, 0.7) translateY(-9vmin) translateX(12vmin);
    opacity: 0.05;
  }
  100% {
    transform: scale(0.6, 0.6) translateY(-12vmin) translateX(16vmin);
    opacity: 0;
  }
}
@keyframes dustFloatRight {
  0% {
    transform: scale(1, 1) translateY(0vmin) translateX(0vmin);
    opacity: 0.25;
  }
  25% {
    transform: scale(0.9, 0.9) translateY(-3vmin) translateX(-4vmin);
    opacity: 0.15;
  }
  50% {
    transform: scale(0.8, 0.8) translateY(-6vmin) translateX(-8vmin);
    opacity: 0.1;
  }
  75% {
    transform: scale(0.7, 0.7) translateY(-9vmin) translateX(-12vmin);
    opacity: 0.05;
  }
  100% {
    transform: scale(0.6, 0.6) translateY(-12vmin) translateX(-16vmin);
    opacity: 0;
  }
}
/* Define the keyframes for the rotation */
@keyframes dustSwirly {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.exploded-particle {
  background: red;
  width: 10px;
  height: 10px;
  position: absolute;
  display: inline-block;
  border-radius: 50%;
  transform-origin: center; /* Set the transform origin to bottom center */
  background: rgb(255, 0, 0);
}
.exploded-particle.light {
  background: var(--color-light);
}
.exploded-particle.red {
  background: rgba(255, 0, 0, 0.65);
}
.exploded-particle.gray {
  background: rgb(39, 37, 39);
  border: 1px solid var(--color-dark);
}
.exploded-particle.blade-bit {
  background: rgb(32, 32, 35);
  border: none;
  border-radius: 1px;
  width: calc(var(--base) * 0.6) !important;
  height: calc(var(--base) * var(--blade-height, 2.4)) !important;
}
.exploded-particle.dark {
  background: var(--color-mid);
}
.exploded-particle.water {
  background: var(--color-mid);
  opacity: 0.5;
}

#particles.debug-particles .exploded-particle {
  outline: 2px solid lime;
  outline-offset: 1px;
}

.exploded-particle.fade {
  transition: all 0.25s 0s ease-out;
  transform: scale(1);
  opacity: 1;
}
.exploded-particle.fade.out {
  transform-origin: center; /* Set the transform origin to bottom center */
  transform: scale(0);
  opacity: 0;
}

.particle-snow.swirly,
.particle-dust.swirly {
  background: transparent;
  width: 8vmin;
  height: 8vmin;
  margin: -4vmin;
}
.particle-snow.swirly.ccw > div,
.particle-dust.swirly.ccw > div {
  animation-direction: reverse; /* Play animation backwards */
}
.particle-snow.swirly > div,
.particle-dust.swirly > div {
  animation: dustSwirly 7s linear; /* Adjust the duration as needed */
  position: absolute;
  height: 100%;
  width: 100%;
}
.particle-snow.swirly > div > div,
.particle-dust.swirly > div > div {
  width: 0.5vmin;
  height: 0.5vmin;
  margin: -0.25vmin;
  border-radius: 50%;
  background: rgba(243, 233, 232, 0.75);
}
.particle-snow,
.particle-dust {
  pointer-events: none;
  z-index: 2000;
  animation-name: dustFloat;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  position: absolute;
  width: 0.5vmin;
  height: 0.5vmin;
  margin: -0.25vmin;
  border-radius: 50%;
  background: rgba(243, 233, 232, 0.75);
  opacity: 0.25;
}
.particle-snow.left,
.particle-dust.left {
  animation-name: dustFloatLeft;
  animation-timing-function: linear;
}
.particle-snow.right,
.particle-dust.right {
  animation-name: dustFloatRight;
  animation-timing-function: linear;
}
.particle-snow.speed-1,
.particle-dust.speed-1 {
  animation-duration: 10s;
}
.particle-snow.speed-2,
.particle-dust.speed-2 {
  animation-duration: 8s;
}
.particle-snow.speed-3,
.particle-dust.speed-3 {
  animation-duration: 6s;
}
.particle-snow.speed-4,
.particle-dust.speed-4 {
  animation-duration: 4s;
}
.particle-snow.speed-5,
.particle-dust.speed-5 {
  animation-duration: 12s;
}

.wave-zoom,
.wave-pulse,
.wave-check,
.wave-live,
.wave-mate {
  border-radius: 50%;
  animation-name: mateWave;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  pointer-events: none;
  background: rgba(255, 0, 0, 0.1);
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.wave-zoom.live,
.wave-pulse.live,
.wave-check.live,
.wave-live.live,
.wave-mate.live {
  background: rgba(255, 165, 0, 0.1);
}
.wave-zoom.hint,
.wave-pulse.hint,
.wave-check.hint,
.wave-live.hint,
.wave-mate.hint {
  animation-name: hintWave;
  animation-timing-function: ease-in;
  background: rgba(243, 233, 232, 0.025);
  animation-duration: 0.5s;
}
.wave-zoom.mate,
.wave-pulse.mate,
.wave-check.mate,
.wave-live.mate,
.wave-mate.mate {
  background: rgba(255, 0, 0, 0.1);
  animation-duration: 1.5s;
}
.wave-zoom.ping,
.wave-pulse.ping,
.wave-check.ping,
.wave-live.ping,
.wave-mate.ping {
  animation-name: pingWave;
  background: rgba(255, 0, 0, 0.1);
  animation-duration: 0.5s;
}

.wave {
  border-radius: 50%;
  animation-name: wave;
  animation-fill-mode: forwards;
  animation-duration: 0.75s;
  pointer-events: none;
  box-shadow: 0 0 1px 1px rgba(243, 233, 232, 0.15), inset 0 0 1px 1px rgba(243, 233, 232, 0.15); /* Green color for positive evaluation */
  box-shadow: 0 0 1px 1px rgba(67, 67, 69, 0.8), inset 0 0 1px 1px rgba(67, 67, 69, 0.8); /* Green color for positive evaluation */
  height: 100%;
  position: absolute;
  width: 100%;
}
.wave.wave-small {
  margin: 25%;
  height: 50%;
  width: 50%;
}
.wave.wave-fast {
  animation-name: axe;
  margin: 30%;
  height: 40%;
  width: 40%;
  animation-duration: 0.5s;
}

@keyframes pulse-in {
  0% {
    transform: scale(10);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 1;
  }
}
@keyframes pulse-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(25);
    opacity: 0;
  }
}
@keyframes pulse-out-large {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(50);
    opacity: 0;
  }
}
.pulse {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  background: rgba(255, 0, 0, 0.1);
  animation-name: mateWave;
}
.pulse.pulse-in {
  animation-name: pulse-in;
  animation-duration: 0.5s;
}
.pulse.pulse-out {
  animation-name: pulse-out;
  animation-duration: 0.5s;
}
.pulse.pulse-out-large {
  animation-name: pulse-out-large;
  animation-duration: 1.5s;
}
.pulse.pulse-red {
  background: rgba(255, 0, 0, 0.15);
}
.pulse.pulse-fast {
  animation-duration: 0.3s;
}
.pulse.pulse-slow {
  animation-duration: 1.2s;
}

.clock {
  z-index: -10;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  font-feature-settings: "tnum" 1, "case" 1;
  font-weight: 500;
  font-weight: 600;
  line-height: 30px;
  font-size: 12px;
  transition: all 0.15s 0s ease-in-out;
  font-weight: bold;
  font-weight: 500;
  line-height: 1;
  padding: 0.75em;
}
.clock .colon {
  margin: 0.1em;
}
.clock.low {
  font-size: 40px;
}
.clock {
  z-index: 2000;
}
.clock.stopped time {
  opacity: 0.25;
}
.clock time {
  position: relative;
}
.clock time i {
  font-style: normal;
}
.clock.full {
  left: 0;
  position: absolute;
  width: 100%;
}

.cta-prizes {
  padding: 0 !important;
  border-radius: 10px;
}

.cta-results {
  margin-bottom: 72px;
  border-radius: 10px;
}

.table-pic {
  height: 40vmin;
  position: relative;
  z-index: 1000;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: block;
  margin-left: -1.5vmin !important;
  margin-right: -1.5vmin !important;
  margin-top: 0vmin;
  border-radius: 5px;
}

.tournament-results,
.tournament-prizes {
  text-align: left;
  font-size: 15px;
  line-height: 1.35;
}
.tournament-results:not(.results),
.tournament-prizes:not(.results) {
  margin-left: 5vmin;
  margin-right: 5vmin;
}
.tournament-results:not(.results) td:not(:last-child),
.tournament-prizes:not(.results) td:not(:last-child) {
  padding-right: 2.5vw !important;
}
.tournament-results:not(.results) tr:first-child th,
.tournament-prizes:not(.results) tr:first-child th {
  padding-top: 2vw !important;
}
.tournament-results:not(.results) thead tr:last-child td,
.tournament-results:not(.results) tbody tr:last-child td,
.tournament-prizes:not(.results) thead tr:last-child td,
.tournament-prizes:not(.results) tbody tr:last-child td {
  border-bottom: 2px solid rgba(243, 233, 232, 0.1);
}
.tournament-results:not(.results) tfoot tr:last-child td,
.tournament-results:not(.results) thead tr:last-child td,
.tournament-results:not(.results) tbody tr:last-child td,
.tournament-prizes:not(.results) tfoot tr:last-child td,
.tournament-prizes:not(.results) thead tr:last-child td,
.tournament-prizes:not(.results) tbody tr:last-child td {
  padding-bottom: 3em !important;
}
.tournament-results:not(.results) tr:not(.table-mobile-hidden) + tr,
.tournament-prizes:not(.results) tr:not(.table-mobile-hidden) + tr {
  border-top: 1px solid rgba(243, 233, 232, 0.05);
}
@media only screen and (max-width: 960px) {
  .tournament-results:not(.results) .table-mobile-only td,
  .tournament-prizes:not(.results) .table-mobile-only td {
    padding-top: 3em !important;
  }
}
@media only screen and (min-width: 960px) {
  .tournament-results:not(.results) .table-mobile-only + tr td,
  .tournament-prizes:not(.results) .table-mobile-only + tr td {
    padding-top: 3em !important;
  }
}
.tournament-results.results,
.tournament-prizes.results {
  margin-left: 4vmin;
  margin-right: 4vmin;
}
@media only screen and (max-width: 960px) {
  .tournament-results.results tbody tr,
  .tournament-prizes.results tbody tr {
    background-color: rgba(243, 233, 232, 0);
  }
  .tournament-results.results tbody tr:nth-child(2n),
  .tournament-prizes.results tbody tr:nth-child(2n) {
    background-color: rgba(243, 233, 232, 0.035);
  }
}
@media only screen and (min-width: 960px) {
  .tournament-results.results tbody tr,
  .tournament-prizes.results tbody tr {
    background-color: rgba(243, 233, 232, 0);
  }
  .tournament-results.results tbody tr:nth-child(4n+2),
  .tournament-prizes.results tbody tr:nth-child(4n+2) {
    background-color: rgba(243, 233, 232, 0.035);
  }
}
.tournament-results.results tr th:first-child,
.tournament-results.results tr td:first-child,
.tournament-prizes.results tr th:first-child,
.tournament-prizes.results tr td:first-child {
  padding-left: 1em !important;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.tournament-results.results tr th:last-child,
.tournament-results.results tr td:last-child,
.tournament-prizes.results tr th:last-child,
.tournament-prizes.results tr td:last-child {
  padding-right: 1em !important;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
@media only screen and (max-width: 960px) {
  .tournament-results.results tr .table-mobile-hidden + th,
  .tournament-results.results tr .table-mobile-hidden + td,
  .tournament-prizes.results tr .table-mobile-hidden + th,
  .tournament-prizes.results tr .table-mobile-hidden + td {
    padding-left: 1em !important;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
}
.tournament-results.results .table-mobile-only + tr td,
.tournament-prizes.results .table-mobile-only + tr td {
  padding-top: 0.8em !important;
  padding-bottom: 0.8em !important;
}
.tournament-results.results p,
.tournament-prizes.results p {
  padding-top: 1vmin;
  font-size: 20px;
  font-family: "Lora", Georgia, Serif;
  line-height: 1.5;
  letter-spacing: 0.0175em;
  max-width: 800px;
  white-space: normal;
  text-align: center;
  display: inline-block;
  -webkit-hyphens: none;
          hyphens: none;
}
@media only screen and (max-width: 1000px) {
  .tournament-results.results p,
  .tournament-prizes.results p {
    font-size: 18px;
  }
}
.tournament-results.results b img,
.tournament-prizes.results b img {
  float: left;
  margin-right: 0.25em;
}
.tournament-results.results tfoot th:last-child,
.tournament-results.results tfoot td:last-child,
.tournament-prizes.results tfoot th:last-child,
.tournament-prizes.results tfoot td:last-child {
  text-align: center !important;
  padding: 0;
  padding-top: 2.5vh;
  padding-bottom: 5vh;
}
.tournament-results.results thead tr:nth-child(2),
.tournament-prizes.results thead tr:nth-child(2) {
  border: none !important;
  padding-top: 30px;
}
.tournament-results.results thead td,
.tournament-prizes.results thead td {
  padding-top: 30px;
}
.tournament-results.results th, .tournament-results.results td,
.tournament-prizes.results th,
.tournament-prizes.results td {
  line-height: 1.25;
  min-width: 10%;
}
.tournament-results.results tr th, .tournament-results.results tr td,
.tournament-prizes.results tr th,
.tournament-prizes.results tr td {
  text-align: center !important;
}
.tournament-results.results tr th:nth-child(1),
.tournament-results.results tr td:nth-child(1),
.tournament-prizes.results tr th:nth-child(1),
.tournament-prizes.results tr td:nth-child(1) {
  text-align: center !important;
}
.tournament-results.results tr th:nth-child(2),
.tournament-results.results tr td:nth-child(2),
.tournament-prizes.results tr th:nth-child(2),
.tournament-prizes.results tr td:nth-child(2) {
  text-align: left !important;
  padding-left: 1.75vw !important;
  padding-right: 1.75vw !important;
  font-weight: 700;
  text-transform: uppercase;
}
.tournament-results.results th:last-child,
.tournament-results.results td:last-child,
.tournament-prizes.results th:last-child,
.tournament-prizes.results td:last-child {
  text-align: right !important;
}
@media only screen and (max-width: 960px) {
  .tournament-results.results .table-mobile-only + tr td,
  .tournament-prizes.results .table-mobile-only + tr td {
    padding-bottom: 0.8em !important;
  }
}
@media only screen and (max-width: 960px) {
  .tournament-results.results .table-mobile-only td br,
  .tournament-prizes.results .table-mobile-only td br {
    display: none;
  }
  .tournament-results.results .table-mobile-only td,
  .tournament-prizes.results .table-mobile-only td {
    padding-top: 1em !important;
    font-weight: bold;
    text-transform: uppercase;
  }
}

.tournament-results tr th:last-child,
.tournament-results tr td:last-child,
.tournament-prizes tr th:last-child,
.tournament-prizes tr td:last-child {
  padding-right: 0em;
}
.tournament-results tr th,
.tournament-results tr td,
.tournament-prizes tr th,
.tournament-prizes tr td {
  vertical-align: top;
  vertical-align: middle;
  padding: 0.7vw 0.2vw;
}
.tournament-results tr th:first-child,
.tournament-results tr td:first-child,
.tournament-prizes tr th:first-child,
.tournament-prizes tr td:first-child {
  white-space: nowrap;
}
.tournament-results tr th div,
.tournament-results tr td div,
.tournament-prizes tr th div,
.tournament-prizes tr td div {
  padding-top: 0.5em;
}
.tournament-results tr th span,
.tournament-results tr td span,
.tournament-prizes tr th span,
.tournament-prizes tr td span {
  text-transform: uppercase;
  border-radius: 10px;
  display: block;
  white-space: nowrap;
  opacity: 0.35;
  font-size: 75%;
  margin-top: 3px;
  letter-spacing: 0.05em;
}
.tournament-results tr th small,
.tournament-results tr td small,
.tournament-prizes tr th small,
.tournament-prizes tr td small {
  text-transform: uppercase;
  border-radius: 10px;
  display: block;
  white-space: nowrap;
  opacity: 0.35;
  font-size: 75%;
  margin-top: 10px;
  letter-spacing: 0.05em;
}
.tournament-results tr th b img,
.tournament-results tr td b img,
.tournament-prizes tr th b img,
.tournament-prizes tr td b img {
  margin-top: 0px;
  margin-bottom: 4px;
}
.tournament-results tr th img,
.tournament-results tr td img,
.tournament-prizes tr th img,
.tournament-prizes tr td img {
  margin-top: -8px;
  height: 25px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
@media only screen and (min-width: 960px) {
  .tournament-results tr th img,
  .tournament-results tr td img,
  .tournament-prizes tr th img,
  .tournament-prizes tr td img {
    margin-left: 0em;
    display: block;
  }
}
.tournament-results tr th b,
.tournament-results tr td b,
.tournament-prizes tr th b,
.tournament-prizes tr td b {
  top: 0px;
  left: 0px;
  text-align: left;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  font-size: 44px;
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.1;
  display: block;
  font-weight: 900;
  font-weight: 700;
  text-transform: none;
  text-transform: uppercase;
  order: -1;
}
.tournament-results tr th b i,
.tournament-results tr td b i,
.tournament-prizes tr th b i,
.tournament-prizes tr td b i {
  font-weight: 100;
  font-style: normal !important;
  border: 1.75px solid rgb(243, 233, 232);
  color: var(--color-light);
  font-size: 45%;
  padding: 0.35em;
  padding-bottom: 0.2em;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  margin-top: 0.1em;
  display: none;
}
@media only screen and (max-width: 600px) {
  .tournament-results tr th b i,
  .tournament-results tr td b i,
  .tournament-prizes tr th b i,
  .tournament-prizes tr td b i {
    border: 1px solid rgb(243, 233, 232);
    padding-bottom: 0.2em;
    margin-top: 0.15em;
    font-size: 42%;
  }
}
@media only screen and (min-width: 960px) {
  .tournament-results tr th b,
  .tournament-results tr td b,
  .tournament-prizes tr th b,
  .tournament-prizes tr td b {
    font-size: clamp(24px, 3vw, 28px) !important;
  }
}
@media only screen and (max-width: 960px) {
  .tournament-results tr th,
  .tournament-results tr td,
  .tournament-prizes tr th,
  .tournament-prizes tr td {
    width: 33.3333%;
    padding: 0.4em 0.5vw;
  }
}

@media only screen and (min-width: 960px) {
  .table-mobile-only {
    display: none !important;
  }
}

@media only screen and (max-width: 960px) {
  .table-mobile-hidden {
    display: none !important;
  }
}

@media only screen and (min-width: 960px) {
  .tournament-prizes:not(.results) .table-mobile-only {
    display: none !important;
  }
}
@media only screen and (max-width: 960px) {
  .tournament-prizes:not(.results) .table-mobile-hidden {
    display: none !important;
  }
}

.debug-only {
  display: none !important;
}

.hidden {
  display: none !important;
}

#hero-wrap {
  width: 100vw;
  overflow: hidden;
}

#hero {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100vw;
}
#hero .particle {
  position: absolute;
  width: 50px; /* Fixed size */
  height: 50px; /* Fixed size */
  pointer-events: none;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
}
#hero .particle.white.pawn {
  background-image: url("/_img/chesspieces/sctheme-b/wP.png");
}
#hero .particle.white.knight {
  background-image: url("/_img/chesspieces/sctheme-b/wN.png");
}
#hero .particle.white.bishop {
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
}
#hero .particle.white.rook {
  background-image: url("/_img/chesspieces/sctheme-b/wR.png");
}
#hero .particle.white.queen {
  background-image: url("/_img/chesspieces/sctheme-b/wQ.png");
}
#hero .particle.white.king {
  background-image: url("/_img/chesspieces/sctheme-b/wK.png");
}
#hero .particle.black.pawn {
  background-image: url("/_img/chesspieces/sctheme-b/bP.png");
}
#hero .particle.black.knight {
  background-image: url("/_img/chesspieces/sctheme-b/bN.png");
}
#hero .particle.black.bishop {
  background-image: url("/_img/chesspieces/sctheme-b/bB.png");
}
#hero .particle.black.rook {
  background-image: url("/_img/chesspieces/sctheme-b/bR.png");
}
#hero .particle.black.queen {
  background-image: url("/_img/chesspieces/sctheme-b/bQ.png");
}
#hero .particle.black.king {
  background-image: url("/_img/chesspieces/sctheme-b/bK.png");
}

.mobile-nav #logo-font {
  opacity: 0;
}
#logo-font {
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.125s ease-in-out 0s;
  letter-spacing: 0em;
  margin-top: -0.1em;
  transform: scale(1, 1);
  line-height: 1;
  transform: scale(1, 1);
}
#logo-font span {
  display: block;
}
#logo-font {
  position: relative;
  z-index: 1000;
  display: inline-block;
  vertical-align: middle;
  line-height: 0.8;
  font-size: 15vmin;
  font-family: "SCLogo";
}