@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;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#board960 {
  margin: 0;
}

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

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.55;
  padding: 1em 1.25em;
  text-transform: uppercase;
}

.link-datenschutz {
  z-index: 10000;
  font-size: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.55;
  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 + p {
  margin-top: 1.25em;
}
.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: 100% !important;
  max-width: 100% !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.45em !important;
  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.1em;
}
.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.5;
  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: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.daily-overview::-webkit-scrollbar {
  display: none;
}
.daily-overview {
  width: 100%;
  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;
  text-wrap: balance;
  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%);
}

#mobile-nav-main {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#nav-deck {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  translate: calc(var(--sc-panel-active, 0) * -100%) 0;
  transition: translate 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#nav-deck.no-segue {
  transition: none;
}

.nav-panel {
  pointer-events: none;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  overflow-y: auto;
  padding: 4.2rem 0 2.5rem;
  scrollbar-width: none;
}
.nav-panel::-webkit-scrollbar {
  display: none;
}
.nav-panel {
  visibility: hidden;
  transition: visibility 0s linear 0.28s;
}
.nav-panel.is-live {
  visibility: visible;
  transition-delay: 0s;
}
.nav-panel > h2 {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 22px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-light);
  opacity: 0.6;
  text-align: center;
}

.mobile-nav .nav-panel {
  pointer-events: auto;
}

.nav-empty {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-light);
  opacity: 0.4;
  margin: 0;
}

.nav-lead,
.nav-stat {
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-light);
}

.nav-lead {
  font-size: 5vmin;
  font-weight: 400;
  line-height: 1.4;
}

.nav-stat {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 4vmin;
}

.sc-board {
  display: grid;
  grid-template-columns: auto repeat(calc(var(--sc-cols, 4) - 1), auto);
  align-items: baseline;
  -moz-column-gap: 1.6em;
       column-gap: 1.6em;
  row-gap: 0.55em;
  width: -moz-max-content;
  width: max-content;
  max-width: 84vw;
  font-variant-numeric: tabular-nums;
}

.sc-board-head {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-light);
  opacity: 0.35;
  padding-bottom: 0.4em;
}
.sc-board-head.is-right {
  text-align: right;
}

.sc-board-row {
  display: contents;
}

.sc-board-cell {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-light);
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
}
.sc-board-cell.is-right {
  text-align: right;
}

.sc-board-row.is-latest .sc-board-cell {
  opacity: 1;
  font-weight: 600;
}

.sc-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  width: min(60vmin, 84vw);
}

.sc-setting {
  width: 100%;
}
.sc-setting button,
.sc-setting label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
}
.sc-setting .sc-value {
  font-weight: 400;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.sc-setting-range label {
  flex-wrap: wrap;
  justify-content: center;
}

.sc-setting-range input[type=range] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 44vmin;
  margin-top: 0.8em;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 10px;
  border-radius: 5px;
  outline: none;
  background: var(--color-bglight);
}
.sc-setting-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-light);
  cursor: pointer;
}
.sc-setting-range input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--color-light);
  cursor: pointer;
}

.sc-offer-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(24px, 6vw, 80px);
}

.sc-offer-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-light);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.sc-offer-chip:hover, .sc-offer-chip:focus-visible {
  opacity: 1;
  outline: none;
}
.sc-offer-chip i {
  display: block;
  width: 7vmin;
  height: 7vmin;
}
.sc-offer-chip svg {
  width: 100%;
  height: 100%;
}
.sc-offer-chip .ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}
.sc-offer-chip span {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#mobile-nav .game-list li.is-current a {
  opacity: 0.35;
  pointer-events: none;
}

@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;
  }
}
.online-status {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 1.6em;
  padding: 0.2em 0.75em;
  font-size: 0.85rem;
  opacity: 0.8;
}
.online-status.in {
  display: flex;
}
.online-status .online-action {
  font-size: 0.8em;
  padding: 0.2em 0.8em;
}

#playOnline {
  position: relative;
}
#playOnline.has-game span::after {
  content: "";
  position: absolute;
  top: 0.35em;
  right: -0.6em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
}
#playOnline.offline span::after {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

.board-lobby-dialog .friend-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  overflow: hidden;
  cursor: default;
}
.board-lobby-dialog .friend-tile .time-label {
  position: static;
  margin: 0;
}
.board-lobby-dialog .friend-tile .button {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 0.35em 0.9em;
  line-height: 1.2;
}
.board-lobby-dialog .friend-tile .friend-code-out {
  font-size: 0.75rem;
  min-height: 1em;
  letter-spacing: 0.05em;
}
.board-lobby-dialog .friend-tile .friend-join-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  max-width: 100%;
}
.board-lobby-dialog .friend-tile .friend-code-in {
  width: 3.6rem;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  padding: 0.3em 0.3em;
  background: rgba(234, 233, 232, 0.08);
  border: 0;
  border-radius: 4px;
  color: inherit;
  font-family: inherit;
}
.board-lobby-dialog .dialog-footer {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.8em;
  opacity: 0.7;
}

/* 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 {
  white-space: nowrap;
}
.performance-profiler span[data-path=fps] {
  flex: 0 0 58px;
}
.performance-profiler span[data-path=frametime] {
  flex: 0 0 48px;
}
.performance-profiler span[data-path=tail] {
  flex: 0 0 64px;
}
.performance-profiler span[data-path=topfunc] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  margin-left: 12px;
}
.performance-profiler span[data-path=topbudget] {
  flex: 0 0 50px;
  text-align: right;
}
.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.2em 0.35em 0.24em;
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.5em;
  border-radius: 5px;
  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);
    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;
  text-wrap: balance;
  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.5;
  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;
  }
}

#games {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 5vmin 10vmin;
}
#games .gm-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 6vmin;
}
#games .gm-intro p {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  opacity: 0.75;
  text-wrap: balance;
}
#games .gm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vmin;
}
@media only screen and (max-width: 900px) {
  #games .gm-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 560px) {
  #games .gm-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5vmin 4vmin;
  }
}
#games .gm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 7% 6% 8%;
  border-radius: 14px;
  background: rgba(234, 233, 232, 0.025);
  text-align: center;
  text-decoration: none;
  color: var(--color-light);
  transition: background 0.25s ease;
}
@media (hover: hover) {
  #games .gm-card:hover, #games .gm-card:focus-visible {
    background: rgba(234, 233, 232, 0.05);
  }
}
#games .gm-card .gm-shot {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(190px, 25vw, 380px);
  margin-bottom: 1em;
}
@media only screen and (max-width: 560px) {
  #games .gm-card .gm-shot {
    height: 52vw;
  }
}
#games .gm-card .gm-shot img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#games .gm-card .gm-blurb {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(11px, 1.05vw, 13.5px);
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  text-wrap: balance;
}
#games .gm-card b {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(12px, 1.4vw, 16px);
  line-height: 1.2;
}
#games .gm-card small {
  display: block;
  margin-top: 0.35em;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}
#games .gm-card:focus-visible {
  outline: none;
}
@media (hover: hover) {
  #games .gm-card:hover .gm-shot img, #games .gm-card:focus-visible .gm-shot img {
    opacity: 0.18;
    transform: scale(1.04);
  }
  #games .gm-card:hover .gm-blurb, #games .gm-card:focus-visible .gm-blurb {
    opacity: 0.95;
    transform: none;
  }
}
@media (hover: none) {
  #games .gm-card .gm-blurb {
    position: static;
    display: block;
    padding: 6% 4% 3%;
    opacity: 0.7;
    transform: none;
  }
}

@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:not(:has(#nav-deck)) {
  min-height: 0;
  overflow-y: auto;
  justify-content: safe center;
  padding: 4.2rem 0 2.5rem;
  scrollbar-width: none;
  touch-action: pan-y;
}
#mobile-nav-main:not(:has(#nav-deck))::-webkit-scrollbar {
  display: none;
}
.mobile-nav #mobile-nav-main:not(:has(#nav-deck)) {
  pointer-events: auto;
}
#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 #leapPile {
  position: fixed;
  bottom: -3vmin;
  height: 34vh;
  left: 0;
  width: 100vw;
  z-index: 9999;
  pointer-events: none;
  overflow: visible;
  opacity: 0.3;
}
#playLeap .corpse {
  position: absolute;
  left: 0;
  width: 8vmin;
  height: 8vmin;
  filter: none;
  z-index: auto;
  will-change: auto;
}
#playLeap .corpse.piece:before {
  background: rgb(96, 37, 40);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
          mask-position: center bottom;
}
#playLeap .corpse.rook:before {
  -webkit-mask-image: url("/_img/chesspieces/sctheme-b/hollow/bR.png");
          mask-image: url("/_img/chesspieces/sctheme-b/hollow/bR.png");
}
#playLeap .corpse.knight:before {
  -webkit-mask-image: url("/_img/chesspieces/sctheme-b/hollow/bN.png");
          mask-image: url("/_img/chesspieces/sctheme-b/hollow/bN.png");
}
#playLeap .corpse.bishop:before {
  -webkit-mask-image: url("/_img/chesspieces/sctheme-b/hollow/bB.png");
          mask-image: url("/_img/chesspieces/sctheme-b/hollow/bB.png");
}
#playLeap .corpse.pawn:before {
  -webkit-mask-image: url("/_img/chesspieces/sctheme-b/hollow/bP.png");
          mask-image: url("/_img/chesspieces/sctheme-b/hollow/bP.png");
}
#playLeap .corpse.queen:before {
  -webkit-mask-image: url("/_img/chesspieces/sctheme-b/hollow/bQ.png");
          mask-image: url("/_img/chesspieces/sctheme-b/hollow/bQ.png");
}
#playLeap .corpse.king:before {
  -webkit-mask-image: url("/_img/chesspieces/sctheme-b/hollow/bK.png");
          mask-image: url("/_img/chesspieces/sctheme-b/hollow/bK.png");
}
#playLeap .corpse {
  transform-origin: center bottom;
  transition: none;
}
#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);
  }
}
#playLeap.leap-v2 #king,
#playLeap.leap-v2 .piece,
#playLeap.leap-v2 .knight,
#playLeap.leap-v2 .bishop,
#playLeap.leap-v2 .rook,
#playLeap.leap-v2 .pawn,
#playLeap.leap-v2 .axe {
  will-change: transform;
}
#playLeap.leap-v2 #startGate {
  position: absolute;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, rgba(23, 23, 26, 0) 0%, rgba(23, 23, 26, 0.55) 40%, rgba(23, 23, 26, 0.55) 60%, rgba(23, 23, 26, 0) 100%);
  transition: opacity 0.4s 0s var(--easing);
}
#playLeap.leap-v2 #startGate.hidden {
  opacity: 0;
  pointer-events: none;
}
#playLeap.leap-v2 #startGate #startGame {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: var(--color-light);
  cursor: pointer;
  font-family: "ND Kern", futura, Sans-Serif;
  text-transform: uppercase;
  font-weight: normal;
  text-shadow: 0 0 50px rgb(23, 23, 26), 0 0 10px rgba(23, 23, 26, 0.5);
  transition: letter-spacing 0.4s 0s var(--easing), opacity 0.3s 0s var(--easing);
}
#playLeap.leap-v2 #startGate #startGame b {
  font-weight: normal;
  font-size: 3.2vmin;
  height: 8vmin;
  line-height: 8vmin;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
}
#playLeap.leap-v2 #startGate #startGame .start-hint {
  height: 8vmin;
  line-height: 8vmin;
  font-size: 1.2vmin;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--color-lightish);
}
#playLeap.leap-v2 #startGate #startGame:hover b {
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}
#playLeap.leap-v2 .wavecount {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -180%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-lightish);
  white-space: nowrap;
}
#playLeap.leap-v2 .wavecount:before {
  content: attr(data-label);
  order: 2;
  font-size: 1.1vmin;
  letter-spacing: 0.15vmin;
  text-transform: uppercase;
}
#playLeap.leap-v2 .wavecount b {
  order: 1;
  font-size: 2vmin;
  color: var(--color-light);
}
#playLeap.leap-v2 .wavecount .mm-odo-cell {
  font-size: 5vmin;
}
#playLeap.leap-v2 #waveAnnounce {
  position: absolute;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  color: var(--color-light);
  font-family: "ND Kern", futura, Sans-Serif;
  font-size: 3.2vmin;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  text-transform: uppercase;
  text-shadow: 0 0 50px rgb(23, 23, 26), 0 0 10px rgba(23, 23, 26, 0.5);
  transform: scale(0.94);
  transition: opacity 0.35s 0s var(--easing), transform 0.35s 0s var(--easing);
}
#playLeap.leap-v2 #waveAnnounce.show {
  opacity: 0.85;
  transform: scale(1);
}
#playLeap.leap-v2 #waveAnnounce i {
  font-style: normal;
  font-size: 0.45em;
  letter-spacing: 0.35em;
  opacity: 0.6;
}
#playLeap.leap-v2 .rook,
#playLeap.leap-v2 .knight,
#playLeap.leap-v2 .bishop {
  transition-property: opacity, background-size, filter !important;
}
#playLeap.leap-v2 .pawn {
  transition-property: opacity, background-size, filter !important;
}
#playLeap.leap-v2 #king {
  transition-property: opacity, filter !important;
}
#playLeap.leap-v2 .axe {
  transition: none !important;
}
#playLeap.leap-v2 .axe:after {
  transition: none !important;
  transform: rotate(calc(var(--spin, 0) * 1deg)) !important;
}
#playLeap.leap-v2.pause * {
  animation-play-state: paused !important;
}
#playLeap.leap-v2 .castle:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/_img/leap/castle-fill.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: 1;
}
#playLeap.leap-v2 .castle {
  background-image: none;
}
#playLeap.leap-v2 #leap .piece,
#playLeap.leap-v2 #leap .axe,
#playLeap.leap-v2 #leap .loot,
#playLeap.leap-v2 #leap .splatter {
  translate: calc(var(--x, 0) * 8vmin) calc(var(--y, 0) * -8vmin);
}
#playLeap.leap-v2 .pawn {
  left: 0;
  right: auto;
  bottom: 0;
}
#playLeap.leap-v2 #king {
  left: 0;
  translate: calc(var(--x, 0) * 8vmin) calc(var(--y, 0) * -8vmin);
}
#playLeap.leap-v2 #king .shine {
  display: block;
  transform: scale(1);
  background: radial-gradient(circle, rgba(243, 233, 232, 0.16) 0%, rgba(243, 233, 232, 0.03) 30%, rgba(243, 233, 232, 0) 50%);
}
#playLeap.leap-v2 #king.pause .shine {
  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.leap-v2 #king.pause .feet {
  display: none;
}
#playLeap.leap-v2 #grid .cell:before {
  transition: opacity 0.35s 0s var(--easing);
}
#playLeap.leap-v2 #grid .cell.highlighted:not(.checkmate-square):before {
  transition: opacity 0s 0s var(--easing);
  opacity: 0.4;
}
#playLeap.leap-v2 .castle .keep-rim {
  --keep-rim-radius: 26vmin;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("/_img/leap/castle-light.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  -webkit-mask-image: radial-gradient(circle var(--keep-rim-radius) at var(--king-x, 50%) calc(100% - var(--king-lift, 0px)), rgba(0, 0, 0, 0.81) 0%, rgba(0, 0, 0, 0.78) 18%, rgba(0, 0, 0, 0.57) 34%, rgba(0, 0, 0, 0.42) 50%, rgba(0, 0, 0, 0) 100%);
          mask-image: radial-gradient(circle var(--keep-rim-radius) at var(--king-x, 50%) calc(100% - var(--king-lift, 0px)), rgba(0, 0, 0, 0.81) 0%, rgba(0, 0, 0, 0.78) 18%, rgba(0, 0, 0, 0.57) 34%, rgba(0, 0, 0, 0.42) 50%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
          mask-position: center bottom;
}
#playLeap.leap-v2 .castle:after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/_img/leap/castle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: filter 0.1s 0s var(--easing);
}
#playLeap.leap-v2 .castle.healing:after {
  transition: filter 0.04s 0s var(--easing);
  filter: brightness(3.4);
}
#playLeap.leap-v2 .mm-odo {
  display: inline-flex;
  align-items: flex-start;
}
#playLeap.leap-v2 .mm-odo-col {
  display: block;
  height: 1em;
  line-height: 1;
  overflow: hidden;
}
#playLeap.leap-v2 .mm-odo-reel {
  display: block;
  translate: 0 calc(var(--n, 0) * -1em);
  transition: translate var(--mm-odo-roll, 0.26s) cubic-bezier(0.3, 0.85, 0.4, 1);
}
#playLeap.leap-v2 .mm-odo-cell {
  display: block;
  height: 1em;
  line-height: 1;
  font-weight: inherit;
  font-style: normal;
  font-feature-settings: "tnum" 1;
}
@media (prefers-reduced-motion: reduce) {
  #playLeap.leap-v2 .mm-odo-reel {
    transition: none;
  }
}
#playLeap.leap-v2 .wavecount,
#playLeap.leap-v2 #waveCountdown {
  --cell: 8vmin;
}
#playLeap.leap-v2 .wavecount .mm-odo-col,
#playLeap.leap-v2 #waveCountdown .mm-odo-col {
  height: var(--cell);
}
#playLeap.leap-v2 .wavecount .mm-odo-reel,
#playLeap.leap-v2 #waveCountdown .mm-odo-reel {
  translate: 0 calc(var(--n, 0) * -1 * var(--cell));
}
#playLeap.leap-v2 .wavecount .mm-odo-cell,
#playLeap.leap-v2 #waveCountdown .mm-odo-cell {
  height: var(--cell);
  line-height: var(--cell);
  text-align: center;
}
#playLeap.leap-v2 #waveCountdown {
  position: absolute;
  top: 16vmin;
  left: 0;
  right: 0;
  height: 8vmin;
  z-index: 8400;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s 0s var(--easing);
  color: var(--color-light);
  font-family: "ND Kern", futura, Sans-Serif;
  font-size: 5vmin;
  line-height: 1;
  text-shadow: 0 0 50px rgb(23, 23, 26), 0 0 10px rgba(23, 23, 26, 0.5);
}
#playLeap.leap-v2 #waveCountdown.show {
  opacity: 0.9;
}
#playLeap.leap-v2 #paused {
  position: absolute;
  top: 8vmin;
  left: 0;
  right: 0;
  height: 8vmin;
  line-height: 8vmin;
  z-index: 8500;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  color: var(--color-light);
  font-family: "ND Kern", futura, Sans-Serif;
  font-size: 3.2vmin;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  text-transform: uppercase;
  text-shadow: 0 0 50px rgb(23, 23, 26), 0 0 10px rgba(23, 23, 26, 0.5);
  transition: opacity 0.25s 0s var(--easing);
}
#playLeap.leap-v2 #paused.show {
  opacity: 0.85;
}
#playLeap.leap-v2 #kingEyes {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75vmin;
  padding-top: 2vmin;
  padding-bottom: 0.125vmin;
  pointer-events: none;
}
#playLeap.leap-v2 #kingEyes #kingEyeL,
#playLeap.leap-v2 #kingEyes #kingEyeR {
  background-color: var(--color-dark);
  width: 0.6vmin;
  height: 0.75vmin;
  border-radius: 50%;
  opacity: 0.2;
  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);
}
#playLeap.leap-v2 #kingEyes.blink #kingEyeL,
#playLeap.leap-v2 #kingEyes.blink #kingEyeR {
  width: 0.5vmin;
  height: 0.2vmin !important;
  border-radius: 0;
}
#playLeap.leap-v2 #king.dead #kingEyes #kingEyeL,
#playLeap.leap-v2 #king.dead #kingEyes #kingEyeR {
  height: 0.2vmin !important;
  border-radius: 0;
}
#playLeap.leap-v2 #king {
  --bob: 0;
  --wiggle: 0;
}
#playLeap.leap-v2 #king:before, #playLeap.leap-v2 #king:after {
  content: none;
}
#playLeap.leap-v2 #king-sprite {
  position: absolute;
  inset: 0;
  transform: scale(0.95);
  transform-origin: bottom center;
}
#playLeap.leap-v2 #kingSkirt,
#playLeap.leap-v2 #kingBallsWrap,
#playLeap.leap-v2 #kingBalls,
#playLeap.leap-v2 #kingBody,
#playLeap.leap-v2 #kingCrossWrap {
  position: absolute;
  inset: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  transform-origin: bottom center;
  transition: transform 0.3s 0s cubic-bezier(0.2, 0.8, 0.2, 1), transform-origin 0.3s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #kingCrossWrap {
  transform-origin: center center;
}
#playLeap.leap-v2 #kingBallsWrap,
#playLeap.leap-v2 #kingSkirt {
  margin: -3.125%;
}
#playLeap.leap-v2 #kingBallsWrap {
  transition: transform 0.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #kingSkirt {
  background-image: url("/lonely-boing/_img/kingSkirt.svg");
  transition: transform 0.4s 0s cubic-bezier(0.2, 0.8, 0.2, 1), transform-origin 0.4s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #kingBalls {
  transform-origin: center 60%;
}
#playLeap.leap-v2 #kingBody {
  z-index: 10;
  transform-origin: center 80%;
}
#playLeap.leap-v2 #kingBody #kingBodyLeft,
#playLeap.leap-v2 #kingBody #kingBodyRight {
  position: absolute;
  inset: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  transform-origin: bottom center;
  transition: transform 1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #kingBody #kingBodyLeft {
  background-image: url("/lonely-boing/_img/kingBallL.svg");
}
#playLeap.leap-v2 #kingBody #kingBodyRight {
  background-image: url("/lonely-boing/_img/kingBallR.svg");
}
#playLeap.leap-v2 #kingCrossWrap {
  transition: transform 0.1s 0s ease-in-out, top 0.1s 0s ease-in-out;
}
#playLeap.leap-v2 #kingCross {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 55%;
  margin: -3.125%;
  z-index: -2;
  transform-origin: bottom center;
  transition: transform 0.2s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #kingCross #kingCrossInner {
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("/lonely-boing/_img/kingCross.svg");
}
#playLeap.leap-v2 #king.face-forward #kingCrossWrap {
  transform: rotate(-6deg) translateX(-1%);
}
#playLeap.leap-v2 #king.face-forward #kingBodyLeft {
  transform: rotate(-3deg);
  transition: transform 0.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #king.face-backward #kingCrossWrap {
  transform: rotate(6deg) translateX(1%);
}
#playLeap.leap-v2 #king.face-backward #kingBodyRight {
  transform: rotate(3deg);
  transition: transform 0.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #king.forward #kingCrossWrap {
  transform: rotate(-16deg) translateX(3%);
}
#playLeap.leap-v2 #king.forward #kingBalls {
  transform: rotate(-4deg);
}
#playLeap.leap-v2 #king.forward #kingSkirt {
  transform: skew(-10deg) translateX(-10%);
  transition: transform 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #king.backward #kingCrossWrap {
  transform: rotate(16deg) translateX(-3%);
}
#playLeap.leap-v2 #king.backward #kingBalls {
  transform: rotate(4deg);
}
#playLeap.leap-v2 #king.backward #kingSkirt {
  transform: skew(10deg) translateX(10%);
  transition: transform 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #king.lean-left #kingSkirt,
#playLeap.leap-v2 #king.lean-right #kingSkirt {
  transition: transform 0.4s 0s cubic-bezier(0.2, 0.8, 0.2, 1), transform-origin 0.4s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #king.lean-left #kingBalls,
#playLeap.leap-v2 #king.lean-right #kingBalls {
  transition: transform 0.3s 0s cubic-bezier(0.2, 0.8, 0.2, 1), transform-origin 0.3s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #king.lean-right #kingSkirt {
  transform: rotate(14.5deg) translateY(2.5%) skew(-10deg) translateX(-6%);
  transform-origin: bottom left;
}
#playLeap.leap-v2 #king.lean-right #kingBalls {
  transform: rotate(12.5deg) translateY(2.5%);
  transform-origin: bottom left;
}
#playLeap.leap-v2 #king.lean-left #kingSkirt {
  transform: rotate(-14.5deg) translateY(2.5%) skew(10deg) translateX(6%);
  transform-origin: bottom right;
}
#playLeap.leap-v2 #king.lean-left #kingBalls {
  transform: rotate(-12.5deg) translateY(2.5%);
  transform-origin: bottom right;
}
#playLeap.leap-v2 #king.hanging #kingSkirt {
  transform: scale(1.06, 0.94) translateY(-3%);
  transition: transform 0.12s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #king.hanging #kingBodyLeft {
  transform: rotate(-22deg) translateX(14%);
}
#playLeap.leap-v2 #king.hanging #kingBodyRight {
  transform: rotate(22deg) translateX(-14%);
}
#playLeap.leap-v2 #king.hanging #kingCrossWrap {
  top: -0.9vmin;
  transition: top 0.12s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #king.hanging.lean-right #kingSkirt {
  transform: rotate(14.5deg) translateY(-1%) skew(-10deg) translateX(-6%) scale(1.06, 0.94);
  transform-origin: bottom left;
}
#playLeap.leap-v2 #king.hanging.lean-left #kingSkirt {
  transform: rotate(-14.5deg) translateY(-1%) skew(10deg) translateX(6%) scale(1.06, 0.94);
  transform-origin: bottom right;
}
#playLeap.leap-v2 #king.jumpup #kingBodyLeft {
  transform: rotate(-15deg) translateX(10%);
  transition: transform 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #king.jumpup #kingBodyRight {
  transform: rotate(15deg) translateX(-10%);
  transition: transform 0.25s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#playLeap.leap-v2 #king.jumpup #kingCrossWrap {
  top: -0.5vmin;
}
#playLeap.leap-v2 #king.jumpdown #kingCrossWrap {
  top: -0.75vmin;
  transition: top 1.5s 0s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.1s 0s ease-in-out;
}
#playLeap.leap-v2 #king.aim.face-forward #kingCrossWrap {
  top: -0.25vmin;
  transform: rotate(-15deg) translateX(1%) translateY(-2%);
}
#playLeap.leap-v2 #king.aim.face-backward #kingCrossWrap {
  top: -0.25vmin;
  transform: rotate(15deg) translateX(-1%) translateY(-2%);
}
#playLeap.leap-v2 #king.aim.face-forward #kingBalls {
  transform: rotate(-15deg);
}
#playLeap.leap-v2 #king.aim.face-backward #kingBalls {
  transform: rotate(15deg);
}
#playLeap.leap-v2 #king.aim-up #kingCrossWrap {
  top: -0.5vmin;
  transform: rotate(0deg) translateY(-4%);
}
#playLeap.leap-v2 #king.unloaded.face-forward #kingCrossWrap {
  transition: none;
  transform: rotate(118.5deg) translateX(10%) scale(0.1);
}
#playLeap.leap-v2 #king.unloaded.face-backward #kingCrossWrap {
  transition: none;
  transform: rotate(-118.5deg) translateX(-10%) scale(0.1);
}
#playLeap.leap-v2 #king.stab.face-forward #kingCross {
  transform: rotate(-25deg) translateX(3%);
}
#playLeap.leap-v2 #king.stab.face-backward #kingCross {
  transform: rotate(25deg) translateX(-3%);
}
#playLeap.leap-v2 #king.wabble #kingBalls {
  transition: transform 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(5%) scale(1.1, 0.9);
}
#playLeap.leap-v2 #king.wabble #kingSkirt {
  transition: transform 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(1.1, 0.9);
}
#playLeap.leap-v2 #king.wibble #kingBalls {
  transition: transform 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(9%) scale(1.2, 0.8);
}
#playLeap.leap-v2 #king.wibble #kingSkirt {
  transition: transform 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(1.2, 0.9);
}
#playLeap.leap-v2 #king.wobble #kingBalls {
  transition: transform 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(7%) scale(1.05, 0.8);
}
#playLeap.leap-v2 #king.wobble #kingSkirt {
  transition: transform 0.1s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(1.05, 0.8);
}
#playLeap.leap-v2 #king.dead #kingSkirt,
#playLeap.leap-v2 #king.dead #kingBallsWrap {
  transition: transform 0.65s 0s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.65s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(0);
  opacity: 0;
}
#playLeap.leap-v2 #king.dead #kingBallsWrap {
  transform: scale(0) !important;
}
#playLeap.leap-v2 #king.dead .shine {
  transition: opacity 0.65s 0s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0;
}
#playLeap.leap-v2 #wasted {
  position: absolute;
  top: 16vmin;
  left: 0;
  right: 0;
  height: 8vmin;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#playLeap.leap-v2 #wasted b {
  display: inline-block;
  font-weight: normal;
  color: red;
  text-shadow: 0 0 10px red, 0 0 5px red;
  font-size: 7vmin;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.2) rotate(45deg);
  letter-spacing: 2em;
  text-indent: 2em;
  transition: opacity 0.3s 0s var(--easing), transform 0.35s 0s var(--easing), letter-spacing 0.35s 0s var(--easing);
}
#playLeap.leap-v2 #wasted.show b {
  opacity: 1;
  transform: scale(1) rotate(-5deg);
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}
#playLeap.leap-v2 #startGate.over #startGame {
  transform: translateY(8vmin);
}
#playLeap.leap-v2 .piece.struck {
  filter: brightness(2.4);
}
#playLeap.leap-v2 .piece.elite:before {
  box-shadow: 0 0 2vmin var(--color-red);
}

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

@keyframes mm-killer-breathe {
  0%, 100% {
    opacity: 0.9;
    scale: 1;
  }
  50% {
    opacity: 0.35;
    scale: 1.09;
  }
}
.mm-changelog #changelog-page {
  max-width: 780px;
  padding-top: 96px;
}
.mm-changelog .changelog-header h1 {
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.mm-changelog #changelog-page .changelog-title {
  text-wrap: balance;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-light);
  margin-bottom: 0.5em;
}
.mm-changelog .changelog-version,
.mm-changelog .changelog-section-name i {
  font-weight: 100;
  font-size: 45%;
  border: 1.75px solid rgb(243, 233, 232);
  color: var(--color-light);
  padding: 0.2em 0.35em 0.24em;
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  border-radius: 5px;
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
}
@media only screen and (max-width: 600px) {
  .mm-changelog .changelog-version,
  .mm-changelog .changelog-section-name i {
    border-width: 1px;
    font-size: 42%;
  }
}
.mm-changelog .changelog-meta {
  font-size: clamp(14px, 3vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-light);
  text-transform: none;
  max-width: 60ch;
}
.mm-changelog .changelog-section-name,
.mm-changelog .changelog-version,
.mm-changelog .changelog-section-name i {
  font-weight: 100;
  font-size: 45%;
  border: 1.75px solid rgb(243, 233, 232);
  color: var(--color-light);
  padding: 0.24em 0.35em 0.22em;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  letter-spacing: 0;
  text-transform: none;
}
.mm-changelog .changelog-section-name {
  display: block;
  border: none;
  padding: 0;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--color-light);
  margin: 0 0 0.5em;
}
.mm-changelog .changelog-section-name i {
  margin-top: 0.1em;
}
@media only screen and (max-width: 600px) {
  .mm-changelog .changelog-section-name i {
    border-width: 1px;
    margin-top: 0.15em;
    font-size: 42%;
  }
}
.mm-changelog #changelog-page .changelog-section ul.stats {
  display: block;
  margin: 0 0 1.5em;
  padding: 0;
  list-style: none;
  text-transform: uppercase;
}
.mm-changelog #changelog-page .changelog-section ul.stats li {
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0 1.7em 0.4em 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-light);
}
.mm-changelog #changelog-page .changelog-section ul.stats li b {
  font-weight: 900;
}
@media only screen and (max-width: 800px) {
  .mm-changelog #changelog-page .changelog-section ul.stats li {
    font-size: 11px;
    margin-right: 1.2em;
  }
}
.mm-changelog #changelog-page .changelog-blurb {
  font-size: clamp(14px, 3vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-light);
  text-transform: none;
  max-width: 62ch;
  margin: 0;
  text-wrap: pretty;
}
.mm-changelog #changelog-page .changelog-section li {
  display: block;
  font-size: clamp(14px, 3vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-light);
  padding: 0;
  border-bottom: none;
  text-wrap: pretty;
}
.mm-changelog #changelog-page .changelog-section {
  margin: 2.6em 0 0;
}
.mm-changelog #changelog-page .changelog-section ul {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  margin: 0.9em 0 0;
  padding: 0;
  list-style: none;
}
.mm-changelog #changelog-page .changelog-entry {
  max-width: none;
  border: none;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 44px 45px 48px;
}
@media only screen and (max-width: 800px) {
  .mm-changelog #changelog-page .changelog-entry {
    padding: 6.5vmin;
  }
}
.mm-changelog #changelog-page .changelog-entry + .changelog-entry {
  margin-top: clamp(28px, 4vh, 56px);
}
.mm-changelog #changelog-page .changelog-title {
  margin-bottom: 0.4em;
}
.mm-changelog #changelog-page .changelog-meta {
  margin: 0;
}

#playMiniMate {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#playMiniMate #game-container-wrap {
  --mm-cell: min(
    calc(100vw / (var(--mm-cols, 12) + 1.6)),
    calc(86vh / (var(--mm-rows, 8) + 1.6))
  );
  --mm-frame-h: 72vh;
  position: relative;
  width: calc(var(--mm-cell) * var(--mm-cols, 12));
  margin: 6em auto 4em;
}
#playMiniMate #mm-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: content-box;
  width: calc(var(--mm-cell) * var(--mm-cols, 12));
  padding: calc(var(--mm-cell) * 0.9);
  margin: 0 calc(var(--mm-cell) * -0.9);
  touch-action: none;
  height: calc(var(--mm-frame-h) - var(--mm-cell) * 1.8);
  pointer-events: none;
}
#playMiniMate #mm-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: calc(var(--mm-cell) * (var(--mm-cols, 12) + 1.8));
  height: calc(var(--mm-cell) * (var(--mm-rows, 8) + 1.8));
  pointer-events: auto;
}
#playMiniMate #mm-board {
  position: relative;
  width: calc(var(--mm-cell) * var(--mm-cols, 12));
  height: calc(var(--mm-cell) * var(--mm-rows, 8));
  pointer-events: none;
}
#playMiniMate #mm-river,
#playMiniMate #mm-warpgrid,
#playMiniMate #mm-warpgrid-hover,
#playMiniMate #mm-lines,
#playMiniMate #mm-stations,
#playMiniMate #mm-trains,
#playMiniMate #mm-fx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
#playMiniMate #mm-river {
  z-index: 50;
}
#playMiniMate #mm-warpgrid {
  z-index: 100;
}
#playMiniMate #mm-lines {
  z-index: 200;
}
#playMiniMate #mm-trains {
  z-index: 300;
}
#playMiniMate #mm-warpgrid-hover {
  z-index: 400;
}
#playMiniMate #mm-stations {
  z-index: 500;
}
#playMiniMate #mm-fx {
  z-index: 600;
}
#playMiniMate #mm-fx .mm-passenger {
  position: absolute;
}
#playMiniMate .mm-shock {
  position: absolute;
  left: calc(var(--cx) * var(--mm-cell));
  top: calc(var(--cy) * var(--mm-cell));
  width: calc(var(--mm-cell) * 0.9);
  height: calc(var(--mm-cell) * 0.9);
  margin: calc(var(--mm-cell) * -0.45);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--mm-cell) * 0.012) calc(var(--mm-cell) * 0.012) rgba(67, 67, 69, 0.8), inset 0 0 calc(var(--mm-cell) * 0.012) calc(var(--mm-cell) * 0.012) rgba(67, 67, 69, 0.8);
  animation: mm-shock 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes mm-shock {
  0% {
    scale: 0;
    opacity: 0;
  }
  8% {
    scale: 0.85;
    opacity: 1;
  }
  100% {
    scale: var(--shock-spread, 2.8);
    opacity: 0;
  }
}
#playMiniMate #mm-warpgrid-hover circle {
  transition: opacity 0.35s ease-out;
}
#playMiniMate #mm-warpgrid-hover circle.active {
  transition: opacity 0.06s ease-out;
}
#playMiniMate {
  --mm-water: color-mix(in srgb, var(--color-darker) 84%, var(--color-mid));
}
#playMiniMate.mm-unfordable {
  --mm-water: color-mix(in srgb, var(--color-red-bg) 42%, var(--color-darker));
}
#playMiniMate #mm-river .mm-river-water {
  fill: none;
  stroke: var(--mm-water);
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 0.22s ease-out;
}
#playMiniMate #mm-lines .mm-line {
  fill: none;
  stroke: #3c3a3a;
  stroke-width: 0.1326;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#playMiniMate #mm-lines .mm-under {
  stroke-dasharray: none;
  stroke: #322f30;
  display: none;
}
#playMiniMate #mm-lines.mm-ident-stroke .mm-line.mm-under {
  display: block;
  stroke-dasharray: none;
  stroke-linecap: butt;
  stroke: #322f30;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-1 {
  stroke-dasharray: 0.42 0.26;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-0 {
  stroke: #807c7c;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-1 {
  stroke: #635f5f;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-2 {
  stroke: #4c4848;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-3 {
  stroke: #3a3636;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-4 {
  stroke: #2d2a2a;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-5 {
  stroke: #252223;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-6 {
  stroke: #1f1c1d;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-2 {
  stroke-dasharray: 0.13 0.13;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-3 {
  stroke-dasharray: 0.44 0.13 0.13 0.13;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-4 {
  stroke-dasharray: 0.18 0.18;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-5 {
  stroke-dasharray: 0.85 0.3;
}
#playMiniMate #mm-lines.mm-ident-stroke .line-6 {
  stroke-dasharray: 0.44 0.13 0.13 0.13 0.13 0.13;
}
#playMiniMate #mm-lines.mm-ident-stroke .mm-line.mm-under.line-0 {
  stroke: #6f6b6b;
}
#playMiniMate #mm-lines.mm-ident-stroke .mm-line.mm-under.line-1 {
  stroke: #545050;
}
#playMiniMate #mm-lines.mm-ident-stroke .mm-line.mm-under.line-2 {
  stroke: #3f3b3b;
}
#playMiniMate #mm-lines.mm-ident-stroke .mm-line.mm-under.line-3 {
  stroke: #302c2c;
}
#playMiniMate #mm-lines.mm-ident-stroke .mm-line.mm-under.line-4 {
  stroke: #262323;
}
#playMiniMate #mm-lines.mm-ident-stroke .mm-line.mm-under.line-5 {
  stroke: #1f1c1d;
}
#playMiniMate #mm-lines.mm-ident-stroke .mm-line.mm-under.line-6 {
  stroke: #1a1718;
}
#playMiniMate #mm-lines.mm-ident-color .line-0 {
  stroke: #e04b3c;
}
#playMiniMate #mm-lines.mm-ident-color .line-1 {
  stroke: #3f86d6;
}
#playMiniMate #mm-lines.mm-ident-color .line-2 {
  stroke: #e8c033;
}
#playMiniMate #mm-lines.mm-ident-color .line-3 {
  stroke: #45a35b;
}
#playMiniMate #mm-lines.mm-ident-color .line-4 {
  stroke: #a163bd;
}
#playMiniMate #mm-lines.mm-ident-color .line-5 {
  stroke: #e8883a;
}
#playMiniMate #mm-lines.mm-ident-color .line-6 {
  stroke: #29a89a;
}
#playMiniMate #mm-lines.mm-ident-color .mm-line.mm-under {
  display: none;
}
#playMiniMate #mm-lines.mm-ident-color .mm-line {
  stroke-dasharray: none;
}
#playMiniMate #mm-lines.mm-ident-shade .line-0 {
  stroke: #9a9695;
}
#playMiniMate #mm-lines.mm-ident-shade .line-1 {
  stroke: #7f7b7a;
}
#playMiniMate #mm-lines.mm-ident-shade .line-2 {
  stroke: #696564;
}
#playMiniMate #mm-lines.mm-ident-shade .line-3 {
  stroke: #565251;
}
#playMiniMate #mm-lines.mm-ident-shade .line-4 {
  stroke: #474443;
}
#playMiniMate #mm-lines.mm-ident-shade .line-5 {
  stroke: #3b3838;
}
#playMiniMate #mm-lines.mm-ident-shade .line-6 {
  stroke: #322f2f;
}
#playMiniMate #mm-lines .mm-line.editing {
  opacity: 0;
}
#playMiniMate #mm-lines .mm-ghost {
  opacity: 0.26;
  transition: opacity 0.45s ease;
}
#playMiniMate #mm-lines .mm-ghost.fading {
  opacity: 0;
}
#playMiniMate #mm-lines.mm-ident-stroke .mm-ghost .mm-line.mm-under {
  display: none;
}
#playMiniMate #mm-lines .mm-cut {
  stroke: var(--color-darker);
  stroke-width: 0.062;
  stroke-dasharray: none;
  stroke-linecap: butt;
  fill: none;
}
#playMiniMate #mm-lines .mm-tunnel-wash {
  fill: none;
  stroke-width: 0.1326;
  stroke-linecap: butt;
  opacity: 0.46;
}
#playMiniMate #mm-lines .mm-tunnel-wash.editing {
  opacity: 0;
}
#playMiniMate #mm-lines .mm-tunnel-wash.invalid {
  stroke: var(--color-orange);
}
#playMiniMate #mm-lines .mm-tunnel-dot {
  fill: none;
  stroke-width: 0.13;
  stroke-linecap: round;
  stroke-dasharray: none;
}
#playMiniMate #mm-lines .mm-tunnel-dot.editing {
  opacity: 0;
}
#playMiniMate #mm-lines .mm-tunnel-dot.invalid {
  stroke: var(--color-orange);
}
#playMiniMate #mm-lines .mm-preview {
  stroke: #6b6b6e;
}
#playMiniMate #mm-lines .mm-preview.invalid {
  stroke: var(--color-orange);
}
#playMiniMate #mm-lines .mm-handle-stub,
#playMiniMate #mm-lines .mm-handle {
  stroke-dasharray: none;
  stroke-linecap: butt;
  fill: none;
  stroke: #565658;
}
#playMiniMate #mm-lines .mm-handle-stub {
  stroke-width: 0.1326;
}
#playMiniMate #mm-lines .mm-handle-stub.invalid,
#playMiniMate #mm-lines .mm-handle.invalid {
  stroke: var(--color-orange);
}
#playMiniMate #mm-lines .mm-handle {
  stroke-width: 0.15;
  transform-box: stroke-box;
  transform-origin: center;
  transition: stroke 0.15s ease, scale 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#playMiniMate #mm-lines .mm-handle.hover {
  stroke: var(--color-light);
  scale: 1.35;
}
#playMiniMate .mm-notation {
  position: absolute;
  z-index: 150;
  color: rgba(243, 233, 232, 0.15);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
}
#playMiniMate .mm-notation.alpha {
  left: calc((var(--cx) + 0.5) * var(--mm-cell));
  translate: -50% 0;
}
#playMiniMate .mm-notation.numeric {
  top: calc((var(--cy) + 0.5) * var(--mm-cell));
  translate: 0 -50%;
}
#playMiniMate .mm-notation.top {
  top: -1.6em;
}
#playMiniMate .mm-notation.bottom {
  bottom: -1.6em;
}
#playMiniMate .mm-notation.left {
  left: -1.6em;
}
#playMiniMate .mm-notation.right {
  right: -1.6em;
}
#playMiniMate .mm-station {
  position: absolute;
  left: calc((var(--cx) + 0.5) * var(--mm-cell));
  top: calc((var(--cy) + 0.5) * var(--mm-cell));
  width: var(--mm-cell);
  height: var(--mm-cell);
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  scale: 0;
  transition: scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#playMiniMate .mm-station.seeded {
  scale: 0.26;
  transition: scale 0.42s cubic-bezier(0.6, 0, 0.9, 0.4);
}
#playMiniMate .mm-station.placed {
  scale: 1;
  transition: scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#playMiniMate .mm-station.placed.connected {
  scale: 1.1;
}
#playMiniMate .mm-station.placed.connected.braced {
  scale: 1.18;
}
#playMiniMate .mm-station.placed.tick {
  scale: 1.08;
  transition: scale 0.06s ease-out;
}
#playMiniMate .mm-station.placed.connected.tick {
  scale: 1.18;
  transition: scale 0.06s ease-out;
}
#playMiniMate .mm-station .mm-station-glyph {
  position: relative;
  z-index: 2;
  width: 84%;
  height: 84%;
  color: var(--color-light);
  overflow: visible;
}
#playMiniMate .mm-station .mm-station-glyph path:not(.mm-outline) {
  stroke: color-mix(in srgb, var(--color-darker) 10%, transparent);
  stroke-width: 16;
  stroke-linejoin: round;
  paint-order: stroke;
}
#playMiniMate .mm-station .mm-station-glyph {
  filter: drop-shadow(0 0 calc(var(--mm-cell) * 0.02) color-mix(in srgb, var(--color-darker) 10%, transparent)) drop-shadow(0 0 calc(var(--mm-cell) * 0.04) color-mix(in srgb, var(--color-darker) 10%, transparent));
}
#playMiniMate .mm-station .mm-seed {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: var(--color-light);
  opacity: 0;
  transition: opacity 0.18s ease, scale 0.2s ease;
}
#playMiniMate .mm-station.seeded .mm-seed {
  opacity: 1;
}
#playMiniMate .mm-station.placed .mm-seed {
  opacity: 0;
  scale: 0.35;
}
#playMiniMate .mm-station .mm-station-glyph {
  opacity: 0;
  transition: opacity 0.22s ease;
}
#playMiniMate .mm-station.placed .mm-station-glyph {
  opacity: 1;
}
#playMiniMate .mm-station .mm-ring {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: conic-gradient(rgba(243, 233, 232, 0.55) calc(var(--fill, 0) * 360deg), rgba(243, 233, 232, 0.07) 0);
  mask: radial-gradient(closest-side, transparent 82%, black 83%);
  -webkit-mask: radial-gradient(closest-side, transparent 82%, black 83%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
#playMiniMate .mm-station.is-killer::after {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  border: 2px solid #e04b3c;
  pointer-events: none;
  animation: mm-killer-breathe 2.4s ease-in-out infinite;
}
#playMiniMate .mm-station.overcrowded .mm-ring {
  opacity: 1;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger {
  animation: mm-wave 1.1s ease-in-out infinite;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(1) {
  animation-delay: -0.085s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(2) {
  animation-delay: -0.17s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(3) {
  animation-delay: -0.255s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(4) {
  animation-delay: -0.34s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(5) {
  animation-delay: -0.425s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(6) {
  animation-delay: -0.51s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(7) {
  animation-delay: -0.595s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(8) {
  animation-delay: -0.68s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(9) {
  animation-delay: -0.765s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(10) {
  animation-delay: -0.85s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(11) {
  animation-delay: -0.935s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(12) {
  animation-delay: -1.02s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(13) {
  animation-delay: -1.105s;
}
#playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger:nth-child(14) {
  animation-delay: -1.19s;
}
#playMiniMate .mm-station .mm-queue {
  z-index: 3;
  position: absolute;
  bottom: 88%;
  left: 50%;
  translate: calc(var(--mm-cell) * -0.13) 0;
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-end;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;
}
#playMiniMate .mm-station .mm-queue .mm-passenger,
#playMiniMate .mm-station .mm-queue .mm-queue-mark {
  margin-right: calc(var(--mm-cell) * -0.01);
}
#playMiniMate .mm-station .mm-queue .mm-queue-mark {
  flex: 0 0 auto;
  width: calc(var(--mm-cell) * 0.26);
  height: calc(var(--mm-cell) * 0.26);
  display: block;
  color: var(--color-lighter);
  filter: drop-shadow(0 0 calc(var(--mm-cell) * 0.035) rgba(0, 0, 0, 0.85));
}
#playMiniMate .mm-station .mm-queue .mm-queue-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#playMiniMate .mm-station .mm-queue .mm-queue-mark .ring {
  fill: none;
  stroke: currentColor;
  r: 7.4;
  stroke-width: 3;
}
#playMiniMate .mm-station .mm-queue .mm-queue-mark .hub {
  fill: currentColor;
}
#playMiniMate .mm-station .mm-queue {
  width: calc(var(--mm-cell) * 2.2);
  pointer-events: none;
}
@keyframes mm-wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-28%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #playMiniMate .mm-station.overcrowded .mm-queue .mm-passenger {
    animation: none;
    transform: none;
  }
  #playMiniMate .mm-station.seeded {
    scale: 1;
    transition: none;
  }
  #playMiniMate .mm-station.seeded .mm-station-glyph {
    opacity: 1;
  }
  #playMiniMate .mm-station .mm-seed {
    display: none;
  }
  #playMiniMate .mm-shock {
    display: none;
  }
}
#playMiniMate .mm-passenger {
  width: calc(var(--mm-cell) * 0.26);
  height: calc(var(--mm-cell) * 0.26);
  flex: 0 0 auto;
  color: var(--color-lighter);
}
#playMiniMate .mm-passenger path {
  stroke: none;
  paint-order: normal;
}
#playMiniMate .mm-passenger {
  filter: drop-shadow(0 0 calc(var(--mm-cell) * 0.035) rgba(0, 0, 0, 0.85));
  transition: translate 0.3s cubic-bezier(0.22, 0.85, 0.35, 1), opacity 0.35s ease, scale 0.35s ease;
}
#playMiniMate .mm-passenger.arriving, #playMiniMate .mm-passenger.delivered {
  opacity: 0;
  scale: 0.4;
}
#playMiniMate .mm-car.loco .mm-car-body {
  clip-path: polygon(0% 0%, 76% 0%, 100% 50%, 76% 100%, 0% 100%);
}
#playMiniMate #mm-trains .mm-car:not(.is-placed) {
  visibility: hidden;
}
#playMiniMate .mm-car.grabbable .mm-car-body {
  filter: brightness(1.35);
}
#playMiniMate .mm-car {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--mm-cell) * 0.7);
  height: calc(var(--mm-cell) * 0.7);
  pointer-events: none;
}
#playMiniMate .mm-car .mm-car-body {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--mm-cell) * 0.13);
  background: var(--color-darker);
}
#playMiniMate .mm-car.loco {
  width: calc(var(--mm-cell) * 0.92);
  z-index: 2;
}
#playMiniMate .mm-car.loco .mm-car-slots {
  right: 23.8%;
  transform-origin: 65.6% 50%;
}
#playMiniMate .mm-car .mm-car-slots {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  place-items: center;
  padding: calc(var(--mm-cell) * 0.07);
}
#playMiniMate .mm-car .mm-car-slots .mm-passenger {
  width: calc(var(--mm-cell) * 0.26);
  height: calc(var(--mm-cell) * 0.26);
  color: #8d8785;
}
#playMiniMate #clock-container,
#playMiniMate #score-container {
  pointer-events: none;
  padding: 4px 0;
}
#playMiniMate #clock-container {
  font-feature-settings: "tnum" 1;
}
#playMiniMate #mm-version {
  position: fixed;
  right: 1.6em;
  bottom: 1.2em;
  z-index: 800;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-feature-settings: "tnum" 1;
  color: rgba(243, 233, 232, 0.22);
  text-decoration: none;
  transition: color 0.25s ease;
}
#playMiniMate #mm-version:hover {
  color: var(--color-lighten);
}
#playMiniMate #mm-timebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
#playMiniMate #mm-timebar:empty {
  display: none;
}
#playMiniMate #gameOptions h1 #mm-clock {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-feature-settings: "tnum" 1;
}
#playMiniMate #mm-delivered {
  display: flex;
  align-items: center;
  position: relative;
}
#playMiniMate #mm-delivered #mm-speed {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.5em;
}
#playMiniMate #mm-delivered #mm-speed,
#playMiniMate #mm-delivered #mm-speed .mm-speed-btn {
  line-height: 1;
}
#playMiniMate #mm-delivered .mm-delivered-total {
  font-size: 38px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
  color: var(--color-light);
}
#playMiniMate #mm-delivered .mm-best-inline {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0.2em;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum" 1;
  color: rgba(243, 233, 232, 0.35);
  white-space: nowrap;
}
#playMiniMate .mm-odo {
  display: inline-flex;
  align-items: flex-start;
}
#playMiniMate .mm-odo-col {
  display: block;
  height: 1em;
  line-height: 1;
  overflow: hidden;
}
#playMiniMate .mm-odo-reel {
  display: block;
  translate: 0 calc(var(--n, 0) * -1em);
  transition: translate var(--mm-odo-roll, 0.26s) cubic-bezier(0.3, 0.85, 0.4, 1);
}
#playMiniMate .mm-odo-cell {
  display: block;
  height: 1em;
  line-height: 1;
  font-weight: inherit;
  font-style: normal;
  font-feature-settings: "tnum" 1;
}
@media (prefers-reduced-motion: reduce) {
  #playMiniMate .mm-odo-reel {
    transition: none;
  }
}
#playMiniMate #mm-clock {
  color: rgba(243, 233, 232, 0.38);
}
#playMiniMate #mm-speed {
  display: flex;
  align-items: center;
  gap: 0.9em;
}
#playMiniMate #mm-speed .mm-speed-btn {
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.25;
  font-size: 11px;
  letter-spacing: -0.08em;
  transition: opacity 0.2s ease;
}
#playMiniMate #mm-speed .mm-speed-btn.active {
  opacity: 1;
}
#playMiniMate #mm-pips {
  display: flex;
  align-items: center;
}
#playMiniMate.mm-offering #gameOptions h1, #playMiniMate.mm-over #gameOptions h1 {
  opacity: 0;
  pointer-events: none;
}
#playMiniMate.mm-archiving #gameOptions h1 {
  opacity: 1;
}
#playMiniMate #mm-warpgrid,
#playMiniMate #mm-river,
#playMiniMate #mm-lines,
#playMiniMate #mm-stations,
#playMiniMate #mm-trains,
#playMiniMate #mm-fx,
#playMiniMate #mm-warpgrid-hover,
#playMiniMate .mm-notation,
#playMiniMate #mm-delivered,
#playMiniMate #mm-timebar,
#playMiniMate #mm-clockface,
#playMiniMate #mm-pips,
#playMiniMate #mm-demand,
#playMiniMate #mm-tray-slots {
  transition: opacity 0.18s ease 0.18s;
}
#playMiniMate.mm-over #mm-warpgrid,
#playMiniMate.mm-over #mm-river,
#playMiniMate.mm-over #mm-lines,
#playMiniMate.mm-over #mm-stations,
#playMiniMate.mm-over #mm-trains,
#playMiniMate.mm-over #mm-fx,
#playMiniMate.mm-over #mm-warpgrid-hover,
#playMiniMate.mm-over .mm-notation,
#playMiniMate.mm-over #mm-delivered,
#playMiniMate.mm-over #mm-timebar,
#playMiniMate.mm-over #mm-clockface,
#playMiniMate.mm-over #mm-pips,
#playMiniMate.mm-over #mm-demand,
#playMiniMate.mm-over #mm-tray-slots {
  opacity: 0;
  transition-delay: 0s;
  pointer-events: none;
}
#playMiniMate #mm-offer {
  position: fixed;
  inset: 0;
  z-index: 900001;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  text-align: center;
  background: rgba(26, 26, 29, 0.62);
  opacity: 0;
  translate: 0 -20px;
  transition: opacity 0.25s ease-in-out, translate 0.25s ease-in-out;
}
#playMiniMate #mm-offer.show {
  display: flex;
  opacity: 1;
  translate: 0 0;
}
#playMiniMate #mm-offer::before {
  content: "The week's assets";
  position: absolute;
  top: 0;
  width: 100%;
  padding: 22px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-light);
  opacity: 0.6;
}
#playMiniMate .mm-offer-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(24px, 6vw, 80px);
}
#playMiniMate .mm-offer-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  color: var(--color-light);
  cursor: pointer;
  opacity: 1;
  scale: 1;
  transition: scale 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
  animation: mm-offer-pop 0.2s cubic-bezier(0.34, 1.28, 0.64, 1) backwards;
}
#playMiniMate .mm-offer-chip:hover, #playMiniMate .mm-offer-chip:focus-visible {
  outline: none;
  scale: 1.08;
}
#playMiniMate .mm-offer-chip:hover svg, #playMiniMate .mm-offer-chip:focus-visible svg {
  scale: 1.22;
}
#playMiniMate .mm-offer-chip i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(96px, 15vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-light);
}
#playMiniMate .mm-offer-chip i svg {
  display: block;
  width: 62%;
  height: 62%;
  scale: 1;
  transition: none;
}
#playMiniMate .mm-offer-chip i .body,
#playMiniMate .mm-offer-chip i .hub {
  fill: var(--color-darker);
}
#playMiniMate .mm-offer-chip i .seat {
  fill: var(--color-light);
}
#playMiniMate .mm-offer-chip i .ring {
  fill: none;
  stroke: var(--color-darker);
  stroke-width: 3;
}
#playMiniMate .mm-offer-chip i .track {
  fill: none;
  stroke: var(--color-darker);
  stroke-width: 2.6;
  stroke-linecap: butt;
}
#playMiniMate .mm-offer-chip span {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#playMiniMate .mm-offer-chip b {
  font-weight: 700;
}
@keyframes mm-offer-pop {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #playMiniMate #mm-offer .mm-offer-chip {
    animation: none;
  }
}
#playMiniMate .mm-station-glyph .mm-outline {
  fill: none;
  stroke: transparent;
  stroke-width: 0;
  stroke-linejoin: round;
  transition: stroke-width 0.44s cubic-bezier(0.34, 1.62, 0.64, 1);
}
#playMiniMate .mm-station.mm-live .mm-station-glyph .mm-outline {
  stroke-width: 31;
}
#playMiniMate .mm-station.mm-live-0 .mm-station-glyph .mm-outline {
  stroke: #e04b3c;
}
#playMiniMate .mm-station.mm-live-1 .mm-station-glyph .mm-outline {
  stroke: #3f86d6;
}
#playMiniMate .mm-station.mm-live-2 .mm-station-glyph .mm-outline {
  stroke: #e8c033;
}
#playMiniMate .mm-station.mm-live-3 .mm-station-glyph .mm-outline {
  stroke: #45a35b;
}
#playMiniMate .mm-station.mm-live-4 .mm-station-glyph .mm-outline {
  stroke: #a163bd;
}
#playMiniMate .mm-station.mm-live-5 .mm-station-glyph .mm-outline {
  stroke: #e8883a;
}
#playMiniMate .mm-station.mm-live-6 .mm-station-glyph .mm-outline {
  stroke: #29a89a;
}
#playMiniMate.mm-over #mm-offer.show, #playMiniMate.mm-archiving #mm-offer.show {
  opacity: 0;
  pointer-events: none;
}
#playMiniMate.mm-over #mm-carry, #playMiniMate.mm-archiving #mm-carry {
  display: none !important;
}
#playMiniMate.mm-archiving #score-container.bottom, #playMiniMate.mm-archiving #score-container.bottom .mm-pip, #playMiniMate.mm-archiving #score-container.bottom .mm-pip.used, #playMiniMate.mm-archiving #mm-tray-slots, #playMiniMate.mm-archiving #mm-tray-slots .mm-asset {
  pointer-events: none;
}
#playMiniMate.mobile-nav:not(.mm-over) #mm-offer.show,
#playMiniMate body.mobile-nav #mm-offer.show {
  opacity: 1;
  translate: 0;
  pointer-events: none;
}
#playMiniMate.mobile-nav:not(.mm-over) #mm-offer.show > *, #playMiniMate.mobile-nav:not(.mm-over) #mm-offer.show::before,
#playMiniMate body.mobile-nav #mm-offer.show > *,
#playMiniMate body.mobile-nav #mm-offer.show::before {
  opacity: 0;
  translate: 0 -20px;
}
#playMiniMate #mm-offer > *,
#playMiniMate #mm-offer::before {
  transition: opacity 0.25s ease-in-out, translate 0.25s ease-in-out;
}
#playMiniMate #mm-archive {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900002;
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 1em;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  padding: 0 22px 20px;
  opacity: 0;
  translate: 0 -12px;
  transition: opacity 0.25s ease-in-out, translate 0.25s ease-in-out;
  pointer-events: none;
}
#playMiniMate.mm-archiving #mm-archive {
  display: flex;
  opacity: 1;
  translate: 0 0;
}
#playMiniMate #mm-archive-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-light);
  opacity: 0.75;
  font-feature-settings: "tnum" 1;
}
#playMiniMate #mm-archive-back {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  border: none;
  pointer-events: auto;
  padding: 0 1.4em;
  height: 30px;
  border-radius: 11px;
  background: rgba(234, 233, 232, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-lighten);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
#playMiniMate #mm-archive-back:hover {
  background: rgba(234, 233, 232, 0.13);
  color: var(--color-light);
}
#playMiniMate #mm-archive-back:active {
  background: rgba(234, 233, 232, 0.05);
}
#playMiniMate.mm-archiving #clock-container {
  opacity: 0;
  pointer-events: none;
}
#playMiniMate #mm-carry {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 900002;
  display: none;
  pointer-events: none;
  scale: 1.15;
  filter: drop-shadow(0 0.35em 0.5em rgba(0, 0, 0, 0.55));
  transition: rotate 0.18s ease-out, scale 0.18s ease-out, filter 0.18s ease-out;
}
#playMiniMate #mm-carry.locked-on {
  scale: 1;
  filter: drop-shadow(0 0.08em 0.16em rgba(0, 0, 0, 0.75));
  transition: translate 0.09s linear, rotate 0.18s ease-out, scale 0.18s ease-out, filter 0.18s ease-out;
}
#playMiniMate .mm-carry-carriage {
  width: calc(var(--mm-cell) * 0.7);
  height: calc(var(--mm-cell) * 0.7);
}
#playMiniMate .mm-carry-train {
  width: calc(var(--mm-cell) * (0.92 + (var(--mm-cars, 1) - 1) * 0.82));
  height: calc(var(--mm-cell) * 0.7);
}
#playMiniMate .mm-carry-carriage .mm-car,
#playMiniMate .mm-carry-train .mm-car {
  top: 50%;
  translate: 0 -50%;
  left: calc(var(--mm-cell) * ((var(--mm-cars, 1) - 1 - var(--i, 0)) * 0.82 + 0.11));
}
#playMiniMate .mm-carry-train .mm-car.loco {
  left: calc(var(--mm-cell) * (var(--mm-cars, 1) - 1) * 0.82);
}
#playMiniMate .mm-carry-carriage .mm-car {
  left: 0;
}
@keyframes mm-car-drop {
  0% {
    scale: 0.52;
  }
  34% {
    scale: 1.16;
  }
  52% {
    scale: 0.91;
  }
  70% {
    scale: 1.06;
  }
  85% {
    scale: 0.97;
  }
  100% {
    scale: 1;
  }
}
#playMiniMate .mm-car.dropped {
  animation: mm-car-drop 0.62s cubic-bezier(0.3, 0.85, 0.4, 1);
}
#playMiniMate .mm-carry-obj .mm-car-body {
  background: var(--color-softlight);
  box-shadow: inset 0 0 0 1px var(--color-bglight);
}
#playMiniMate .mm-carry-interchange {
  width: calc(var(--mm-cell) * 0.8);
  height: calc(var(--mm-cell) * 0.8);
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--mm-cell) * 0.09) var(--color-light);
}
#playMiniMate #mm-tray-slots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6em;
  pointer-events: auto;
}
#playMiniMate .mm-asset {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.2em;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.3s ease, scale 0.18s ease, translate 0.18s ease;
  translate: 0 0;
}
#playMiniMate .mm-asset.empty {
  opacity: 0.28;
  cursor: default;
}
#playMiniMate .mm-asset:active {
  cursor: grabbing;
}
#playMiniMate .mm-asset b {
  font-size: inherit;
  font-weight: 800;
  color: var(--color-lighten);
  font-feature-settings: "tnum" 1;
  line-height: 1;
  margin-left: -0.35em;
}
#playMiniMate .mm-asset i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.35em;
  height: 3.35em;
}
#playMiniMate .mm-asset i svg {
  display: block;
  width: 100%;
  height: 100%;
}
#playMiniMate .mm-asset i .body,
#playMiniMate .mm-asset i .hub {
  fill: var(--color-light);
}
#playMiniMate .mm-asset i .seat {
  fill: var(--color-darker);
}
#playMiniMate .mm-asset i .ring {
  fill: none;
  stroke: var(--color-light);
  stroke-width: 3;
}
#playMiniMate .mm-asset i .track {
  fill: none;
  stroke: var(--color-light);
  stroke-width: 2.6;
  stroke-linecap: butt;
}
#playMiniMate .mm-asset.mm-stock {
  cursor: default;
}
#playMiniMate .mm-asset.mm-denied {
  animation: mm-deny-shake 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
#playMiniMate .mm-asset.mm-denied b {
  animation: mm-deny-shake 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.03s;
}
@keyframes mm-deny-shake {
  0% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(-0.28em);
  }
  38% {
    transform: translateX(0.22em);
  }
  58% {
    transform: translateX(-0.13em);
  }
  78% {
    transform: translateX(0.07em);
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #playMiniMate .mm-asset.mm-denied,
  #playMiniMate .mm-asset.mm-denied b {
    animation: none;
  }
}
#playMiniMate.mm-carrying, .mm-carrying #playMiniMate {
  cursor: grabbing;
}
#playMiniMate #mm-lines .mm-line.drop-target {
  filter: brightness(1.28);
  transition: filter 0.12s ease;
}
#playMiniMate #mm-lines .mm-line.drop-refused {
  filter: brightness(0.55) saturate(0.4);
  transition: filter 0.12s ease;
}
#playMiniMate #mm-lines .mm-line.mm-blocked {
  animation: mm-blocked-pulse 0.44s ease-in-out;
}
@keyframes mm-blocked-pulse {
  0%, 100% {
    filter: none;
  }
  22%, 68% {
    filter: brightness(1.75);
  }
  45% {
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #playMiniMate #mm-lines .mm-line.mm-blocked {
    animation: none;
  }
}
#playMiniMate .mm-station.drop-target .mm-station-glyph {
  color: var(--color-light);
  scale: 1.12;
}
#playMiniMate .mm-station.interchange .mm-ring {
  opacity: 0.35;
}
#playMiniMate #mm-clockface {
  position: fixed;
  left: 1.4rem;
  bottom: 1.4rem;
  z-index: 1000;
  width: 3.45em;
  height: 3.45em;
  pointer-events: none;
  overflow: visible;
}
#playMiniMate #mm-clockface .face {
  fill: #000;
  stroke: none;
  transition: fill 0.6s ease;
}
#playMiniMate #mm-clockface .tick {
  fill: #fff;
  opacity: 0.32;
  transition: fill 0.6s ease;
}
#playMiniMate #mm-clockface .hand {
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  transform-origin: 12px 12px;
  transition: stroke 0.6s ease;
}
#playMiniMate #mm-clockface.night .face {
  fill: #fff;
}
#playMiniMate #mm-clockface.night .tick {
  fill: #000;
}
#playMiniMate #mm-clockface.night .hand {
  stroke: #000;
}
#playMiniMate #mm-endgame {
  --mm-score-cell: clamp(44px, min(8.4vw, 10.5vh), 116px);
  --mm-score-dot: calc(var(--mm-score-cell) / 6);
  position: fixed;
  inset: 0;
  z-index: 900003;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  background: none;
  opacity: 0;
  pointer-events: none;
  scale: 1.01;
  transition: opacity 0.18s ease, scale 0.18s ease;
}
#playMiniMate #mm-endgame.show {
  opacity: 1;
  pointer-events: auto;
  scale: 1;
  transition-delay: 0.18s;
}
#playMiniMate #mm-endgame .mm-endgame-eyebrow {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-lightish);
  margin-bottom: 0.4em;
}
#playMiniMate #mm-endgame .mm-endgame-result {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#playMiniMate #mm-endgame .mm-endgame-verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  width: calc(var(--mm-score-cell) * 4);
  margin-top: 1.2em;
  min-height: 2.4em;
  font-size: calc(var(--mm-score-cell, 75px) * 0.17);
  font-weight: 400;
  letter-spacing: 0.06em;
  font-feature-settings: "tnum" 1;
}
#playMiniMate #mm-endgame .mm-endgame-cause {
  display: flex;
  align-items: center;
  gap: 1.2em;
  color: var(--color-lighten);
  opacity: 0.55;
  text-align: left;
  text-wrap: balance;
}
#playMiniMate #mm-endgame .mm-endgame-cause .mm-cause-stone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.9em;
  height: 2.5em;
  background: rgba(234, 233, 232, 0.13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50% 50% 3px 3px/32% 32% 3px 3px;
}
#playMiniMate #mm-endgame .mm-endgame-cause .mm-cause-cross {
  position: relative;
  display: block;
  width: 0.72em;
  height: 0.95em;
  opacity: 1;
}
#playMiniMate #mm-endgame .mm-endgame-cause .mm-cause-cross::before, #playMiniMate #mm-endgame .mm-endgame-cause .mm-cause-cross::after {
  content: "";
  position: absolute;
  background: var(--color-dark);
}
#playMiniMate #mm-endgame .mm-endgame-cause .mm-cause-cross::before {
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  transform: translateX(-50%);
}
#playMiniMate #mm-endgame .mm-endgame-cause .mm-cause-cross::after {
  left: 0;
  top: 28%;
  width: 100%;
  height: 3px;
}
#playMiniMate #mm-endgame .mm-endgame-best {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-lightish);
  margin-bottom: 0.8em;
  font-feature-settings: "tnum" 1;
}
#playMiniMate #mm-endgame .mm-endgame-best.is-record {
  color: var(--color-light);
}
#playMiniMate #mm-endgame .mm-endgame-headline {
  --mm-score-ink: rgba(243, 233, 232, 0.1);
  --mm-score-r: calc(var(--mm-score-cell) * 0.031);
  --mm-headline-size: calc(var(--mm-score-cell) * 0.56);
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, var(--mm-score-cell));
  grid-auto-rows: var(--mm-score-cell);
  justify-content: center;
  font-size: var(--mm-headline-size);
  position: relative;
}
#playMiniMate #mm-endgame .mm-score-lattice {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
#playMiniMate #mm-endgame .mm-initials {
  grid-column: 1/-1;
  grid-row: 1;
}
#playMiniMate #mm-endgame .mm-endgame-score {
  grid-column: 1/-1;
  grid-row: 2;
}
#playMiniMate #mm-endgame .mm-endgame-score {
  position: relative;
  display: block;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  color: var(--color-light);
  font-feature-settings: "tnum" 1;
}
#playMiniMate #mm-endgame #mm-count {
  display: grid;
  grid-template-columns: repeat(4, var(--mm-score-cell));
}
#playMiniMate #mm-endgame .mm-score-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--mm-score-cell);
  font-weight: inherit;
  letter-spacing: 0;
}
#playMiniMate #mm-endgame .mm-score-cell.is-pad {
  color: rgba(243, 233, 232, 0.1);
}
#playMiniMate #mm-endgame .mm-endgame-caption {
  margin-top: 0.9em;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-lighten);
}
#playMiniMate #mm-endgame .mm-count-pad {
  opacity: 0.09;
}
#playMiniMate #mm-endgame #mm-delta {
  display: inline-block;
  text-align: right;
  white-space: nowrap;
  line-height: 1;
  font-weight: 700;
  vertical-align: baseline;
  color: var(--color-lighten);
  font-feature-settings: "tnum" 1;
  transition: translate 0.75s cubic-bezier(0.22, 1.2, 0.36, 1), opacity 0.35s ease-out;
}
#playMiniMate #mm-endgame #mm-delta.is-up {
  color: #45a35b;
}
#playMiniMate #mm-endgame #mm-delta.is-down {
  color: #e04b3c;
}
#playMiniMate #mm-endgame .mm-initials {
  position: relative;
}
#playMiniMate #mm-endgame .mm-initials-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#playMiniMate #mm-endgame .mm-initials-cells {
  display: grid;
  grid-template-columns: repeat(4, var(--mm-score-cell));
  font-size: inherit;
}
#playMiniMate #mm-endgame .mm-initials-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mm-score-cell);
  height: var(--mm-score-cell);
  overflow: hidden;
  cursor: text;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-light);
  background-color: transparent;
  transition: background-color 0.2s ease;
}
#playMiniMate #mm-endgame .mm-initials-cell:focus-within {
  background-color: rgba(234, 233, 232, 0.06);
}
#playMiniMate #mm-endgame .mm-initials-field {
  position: absolute;
  inset: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  outline: none;
  padding: 0;
  background: none;
  font: inherit;
  text-align: center;
  color: transparent;
  caret-color: transparent;
}
#playMiniMate #mm-endgame .mm-initials-field::-moz-selection {
  background: none;
}
#playMiniMate #mm-endgame .mm-initials-field::selection {
  background: none;
}
#playMiniMate #mm-endgame .mm-initials-window {
  pointer-events: none;
  width: var(--mm-score-cell);
  height: var(--mm-score-cell);
}
#playMiniMate #mm-endgame .mm-initials-window .mm-odo-cell {
  width: var(--mm-score-cell);
  height: var(--mm-score-cell);
  line-height: var(--mm-score-cell);
  text-align: center;
}
#playMiniMate #mm-endgame .mm-initials-window .mm-odo-reel {
  translate: 0 calc(var(--n, 0) * var(--mm-score-cell) * -1);
}
#playMiniMate #mm-endgame .mm-endgame-actions {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-direction: row;
}
#playMiniMate #mm-endgame #mm-retry,
#playMiniMate #mm-endgame #mm-view {
  display: inline-block;
  outline: none;
  border: none;
  padding: 0 2em;
  height: 40px;
  border-radius: 14px;
  background: rgba(234, 233, 232, 0.07);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--color-lighten);
  font-size: 12px;
  font-family: inherit;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
#playMiniMate #mm-endgame #mm-retry:hover,
#playMiniMate #mm-endgame #mm-view:hover {
  background: rgba(234, 233, 232, 0.13);
  color: var(--color-light);
}
#playMiniMate #mm-endgame #mm-retry:active,
#playMiniMate #mm-endgame #mm-view:active {
  background: rgba(234, 233, 232, 0.05);
}
#playMiniMate #mm-endgame #mm-retry[hidden],
#playMiniMate #mm-endgame #mm-view[hidden] {
  display: none;
}
#playMiniMate #mm-endgame #mm-view {
  background: rgba(234, 233, 232, 0.04);
  color: var(--color-lightish);
}
#playMiniMate.mobile-nav #mm-endgame {
  opacity: 0;
  pointer-events: none;
}

#playMiniMate .mm-trend {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  -moz-column-gap: 1.1em;
       column-gap: 1.1em;
  row-gap: calc(var(--mm-score-cell, 75px) * 0.1);
  width: min(var(--mm-score-cell, 4.4em) * 4, 84vw);
  grid-row: 1;
  height: 100%;
  align-content: safe end;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
#playMiniMate .mm-trend::-webkit-scrollbar {
  display: none;
}
#playMiniMate .mm-trend {
  padding-top: 2.4em;
  padding-bottom: calc(var(--mm-score-cell, 75px) * 0.34);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.4em, #000 calc(100% - var(--mm-score-cell, 75px) * 0.34), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 2.4em, #000 calc(100% - var(--mm-score-cell, 75px) * 0.34), transparent 100%);
}
#playMiniMate .mm-trend-row {
  display: contents;
}
#playMiniMate button.mm-trend-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
@media (hover: hover) {
  #playMiniMate button.mm-trend-row:hover .mm-trend-rank,
  #playMiniMate button.mm-trend-row:hover .mm-trend-name,
  #playMiniMate button.mm-trend-row:hover .mm-trend-score,
  #playMiniMate button.mm-trend-row:hover .mm-trend-time {
    color: var(--color-light);
    opacity: 1;
  }
}
#playMiniMate button.mm-trend-row:focus-visible {
  outline: none;
}
#playMiniMate button.mm-trend-row:focus-visible .mm-trend-rank,
#playMiniMate button.mm-trend-row:focus-visible .mm-trend-name,
#playMiniMate button.mm-trend-row:focus-visible .mm-trend-score,
#playMiniMate button.mm-trend-row:focus-visible .mm-trend-time {
  color: var(--color-light);
  opacity: 1;
  outline: 1px solid rgba(243, 233, 232, 0.5);
  outline-offset: 2px;
}
#playMiniMate .mm-trend-rank,
#playMiniMate .mm-trend-name,
#playMiniMate .mm-trend-score,
#playMiniMate .mm-trend-time {
  font-size: calc(var(--mm-score-cell, 75px) * 0.17);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-lighten);
  font-feature-settings: "tnum" 1;
  opacity: 0.55;
}
#playMiniMate .mm-trend-row.is-latest .mm-trend-rank,
#playMiniMate .mm-trend-row.is-latest .mm-trend-name,
#playMiniMate .mm-trend-row.is-latest .mm-trend-score,
#playMiniMate .mm-trend-row.is-latest .mm-trend-time {
  opacity: 1;
  color: var(--color-light);
}
#playMiniMate .mm-trend-rank {
  text-align: right;
  min-width: 1.4em;
}
#playMiniMate .mm-trend-name {
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#playMiniMate .mm-trend-name.is-unclaimed {
  opacity: 0.45;
}
#playMiniMate .mm-trend-rank,
#playMiniMate .mm-trend-score,
#playMiniMate .mm-trend-time {
  font-feature-settings: "tnum" 1;
}
#playMiniMate .mm-trend-score,
#playMiniMate .mm-trend-time {
  text-align: right;
}
#playMiniMate .mm-trend-time {
  opacity: 0.55;
}
#playMiniMate .mm-trend-row.is-latest .mm-trend-time {
  opacity: 0.8;
}

#playMiniMate #clock-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#playMiniMate #clock-container > * {
  flex: 0 0 auto;
  width: auto;
}
#playMiniMate #clock-container {
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 0;
  right: 0;
}
#playMiniMate #score-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6em;
}
#playMiniMate #score-container > * {
  flex: 0 0 auto;
  width: auto;
}
#playMiniMate #mm-demand {
  position: fixed;
  left: 1.1em;
  top: 50%;
  translate: 0 -50%;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7em;
  pointer-events: none;
  font-size: 15px;
  font-feature-settings: "tnum" 1;
  transition: opacity 0.3s ease;
}
@media only screen and (max-width: 600px) {
  #playMiniMate #mm-demand {
    font-size: 11px;
    left: 0.4em;
    gap: 0.5em;
  }
}
#playMiniMate .mm-demand-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45em;
  color: rgba(243, 233, 232, 0.45);
  transition: translate 0.3s cubic-bezier(0.22, 0.85, 0.35, 1), opacity 0.35s ease, scale 0.35s ease;
  opacity: 1;
  scale: 1;
}
#playMiniMate .mm-demand-row i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
}
#playMiniMate .mm-demand-row i svg {
  display: block;
  width: 100%;
  height: 100%;
}
#playMiniMate .mm-demand-row b {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: inherit;
}
#playMiniMate .mm-demand-row.empty {
  opacity: 0.34;
}
#playMiniMate .mm-demand-row.arriving {
  opacity: 0;
  scale: 0.4;
}
#playMiniMate #mm-pips {
  gap: 0.75em;
  pointer-events: none;
}
#playMiniMate #mm-pips .mm-pip {
  width: 40px;
  height: 40px;
}
#playMiniMate #mm-pips .mm-pip {
  transition: scale 0.3s ease;
  scale: 1;
}
#playMiniMate #mm-pips .mm-pip-dot {
  transition: fill 0.3s ease;
}
#playMiniMate #mm-pips .mm-pip:not(.used) {
  scale: 0.44;
}
#playMiniMate #mm-pips .mm-pip.locked {
  scale: 0.34;
}
#playMiniMate #mm-pips .mm-pip.locked .mm-pip-dot {
  fill: rgba(243, 233, 232, 0.09);
}
#playMiniMate #mm-pips .mm-pip.cooling {
  scale: 0.34;
  opacity: 0.45;
}
#playMiniMate #mm-pips .mm-pip.used {
  pointer-events: auto;
  cursor: pointer;
  transition: scale 0.18s ease, translate 0.18s ease;
  translate: 0 0;
}
#playMiniMate #mm-pips .mm-pip-x {
  fill: none;
  stroke: var(--color-light);
  stroke-width: 2;
  stroke-linecap: butt;
  opacity: 0;
  transition: opacity 0.16s ease;
}
@media (hover: hover) {
  #playMiniMate #mm-pips .mm-pip.used:hover {
    scale: 1.24;
    translate: 0 -3px;
  }
  #playMiniMate #mm-pips .mm-pip.used:hover .mm-pip-x {
    opacity: 1;
  }
}
#playMiniMate #mm-pips .mm-pip.used.armed {
  scale: 1.42;
  translate: 0 -5px;
}
#playMiniMate #mm-pips .mm-pip.used.armed .mm-pip-x {
  opacity: 1;
}
@media (hover: hover) {
  #playMiniMate #mm-tray-slots .mm-asset:not(.empty):hover {
    scale: 1.18;
    translate: 0 -3px;
  }
}
#playMiniMate #mm-carry {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 900002;
  display: none;
  pointer-events: none;
  scale: 1.15;
  filter: drop-shadow(0 0.35em 0.5em rgba(0, 0, 0, 0.55));
  transition: rotate 0.18s ease-out, scale 0.18s ease-out, filter 0.18s ease-out;
}
#playMiniMate #mm-carry.locked-on {
  scale: 1;
  filter: drop-shadow(0 0.08em 0.16em rgba(0, 0, 0, 0.75));
  transition: translate 0.09s linear, rotate 0.18s ease-out, scale 0.18s ease-out, filter 0.18s ease-out;
}
#playMiniMate #mm-carry.returning {
  scale: 0.35;
  opacity: 0;
  pointer-events: none;
  transition: translate 0.3s cubic-bezier(0.32, 0.72, 0.3, 1), scale 0.3s cubic-bezier(0.32, 0.72, 0.3, 1), rotate 0.2s ease-out, opacity 0.3s ease-in;
}
#playMiniMate #mm-carry.is-refused {
  scale: 0.92;
  opacity: 0.5;
  filter: grayscale(0.85) drop-shadow(0 0.16em 0.2em rgba(0, 0, 0, 0.6));
}
#playMiniMate #mm-carry.mm-carry-in {
  animation: mm-carry-pick 0.42s cubic-bezier(0.3, 0.85, 0.4, 1);
}
@keyframes mm-carry-pick {
  0% {
    scale: 0;
  }
  34% {
    scale: 1.33;
  }
  52% {
    scale: 1.05;
  }
  70% {
    scale: 1.22;
  }
  85% {
    scale: 1.12;
  }
  100% {
    scale: 1.15;
  }
}
@media (prefers-reduced-motion: reduce) {
  #playMiniMate #mm-carry.mm-carry-in {
    animation: none;
  }
}
#playMiniMate .mm-carry-carriage {
  width: calc(var(--mm-cell) * 0.7);
  height: calc(var(--mm-cell) * 0.7);
}
#playMiniMate .mm-carry-train {
  width: calc(var(--mm-cell) * (0.92 + (var(--mm-cars, 1) - 1) * 0.82));
  height: calc(var(--mm-cell) * 0.7);
}
#playMiniMate .mm-carry-carriage .mm-car,
#playMiniMate .mm-carry-train .mm-car {
  top: 50%;
  translate: 0 -50%;
  left: calc(var(--mm-cell) * ((var(--mm-cars, 1) - 1 - var(--i, 0)) * 0.82 + 0.11));
}
#playMiniMate .mm-carry-train .mm-car.loco {
  left: calc(var(--mm-cell) * (var(--mm-cars, 1) - 1) * 0.82);
}
#playMiniMate .mm-carry-carriage .mm-car {
  left: 0;
}
@keyframes mm-car-drop {
  0% {
    scale: 0.52;
  }
  34% {
    scale: 1.16;
  }
  52% {
    scale: 0.91;
  }
  70% {
    scale: 1.06;
  }
  85% {
    scale: 0.97;
  }
  100% {
    scale: 1;
  }
}
#playMiniMate .mm-car.dropped {
  animation: mm-car-drop 0.62s cubic-bezier(0.3, 0.85, 0.4, 1);
}
#playMiniMate .mm-carry-obj .mm-car-body {
  background: var(--color-softlight);
  box-shadow: inset 0 0 0 1px var(--color-bglight);
}
#playMiniMate .mm-carry-interchange {
  width: calc(var(--mm-cell) * 0.8);
  height: calc(var(--mm-cell) * 0.8);
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--mm-cell) * 0.09) var(--color-light);
}
#playMiniMate #mm-tray-slots {
  pointer-events: auto;
}

#playMiniMate.mm-ident-color .mm-car.line-0 .mm-car-body {
  background: #9e3529;
}
#playMiniMate.mm-ident-color .mm-car.line-1 .mm-car-body {
  background: #2c5e96;
}
#playMiniMate.mm-ident-color .mm-car.line-2 .mm-car-body {
  background: #a38724;
}
#playMiniMate.mm-ident-color .mm-car.line-3 .mm-car-body {
  background: #307240;
}
#playMiniMate.mm-ident-color .mm-car.line-4 .mm-car-body {
  background: #714585;
}
#playMiniMate.mm-ident-color .mm-car.line-5 .mm-car-body {
  background: #a35f28;
}
#playMiniMate.mm-ident-color .mm-car.line-6 .mm-car-body {
  background: #1d766c;
}
#playMiniMate.mm-ident-color .mm-car.line-0 .mm-car-slots .mm-passenger {
  color: #f0a69f;
}
#playMiniMate.mm-ident-color .mm-car.line-1 .mm-car-slots .mm-passenger {
  color: #a3c7ec;
}
#playMiniMate.mm-ident-color .mm-car.line-2 .mm-car-slots .mm-passenger {
  color: #f2e0a1;
}
#playMiniMate.mm-ident-color .mm-car.line-3 .mm-car-slots .mm-passenger {
  color: #a6d3b1;
}
#playMiniMate.mm-ident-color .mm-car.line-4 .mm-car-slots .mm-passenger {
  color: #d3b5e0;
}
#playMiniMate.mm-ident-color .mm-car.line-5 .mm-car-slots .mm-passenger {
  color: #f3c69f;
}
#playMiniMate.mm-ident-color .mm-car.line-6 .mm-car-slots .mm-passenger {
  color: #98d6cf;
}

#playMiniMate.mm-ident-color #mm-pips .mm-pip.pip-0:not(.locked) .mm-pip-dot {
  fill: #e04b3c;
}
#playMiniMate.mm-ident-color #mm-pips .mm-pip.pip-1:not(.locked) .mm-pip-dot {
  fill: #3f86d6;
}
#playMiniMate.mm-ident-color #mm-pips .mm-pip.pip-2:not(.locked) .mm-pip-dot {
  fill: #e8c033;
}
#playMiniMate.mm-ident-color #mm-pips .mm-pip.pip-3:not(.locked) .mm-pip-dot {
  fill: #45a35b;
}
#playMiniMate.mm-ident-color #mm-pips .mm-pip.pip-4:not(.locked) .mm-pip-dot {
  fill: #a163bd;
}
#playMiniMate.mm-ident-color #mm-pips .mm-pip.pip-5:not(.locked) .mm-pip-dot {
  fill: #e8883a;
}
#playMiniMate.mm-ident-color #mm-pips .mm-pip.pip-6:not(.locked) .mm-pip-dot {
  fill: #29a89a;
}

#playMiniMate #mm-timebar {
  flex-direction: row;
  align-items: center;
  gap: 0.7em;
}
#playMiniMate #mm-speed {
  pointer-events: auto;
  cursor: pointer;
  gap: 0;
}
#playMiniMate #mm-speed .mm-speed-btn {
  display: none;
  opacity: 0.75;
}
#playMiniMate #mm-speed .mm-speed-btn.active {
  display: inline-block;
  opacity: 1;
}
#playMiniMate #mm-speed:hover .mm-speed-btn.active {
  opacity: 1;
}

#playMiniMate #mobile-nav-main {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#playMiniMate #nav-deck {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  translate: 0 0;
  transition: translate 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#playMiniMate #nav-deck.no-segue {
  transition: none;
}
#playMiniMate .nav-panel {
  pointer-events: none;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  overflow-y: auto;
  padding: 4.2rem 0 2.5rem;
  scrollbar-width: none;
}
#playMiniMate .nav-panel::-webkit-scrollbar {
  display: none;
}
#playMiniMate .nav-panel {
  visibility: hidden;
  transition: visibility 0s linear 0.28s;
}
#playMiniMate .nav-panel.is-live {
  visibility: visible;
  transition-delay: 0s;
}
#playMiniMate .nav-panel > h2 {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 22px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-light);
  opacity: 0.6;
  text-align: center;
}
#playMiniMate.mobile-nav .nav-panel {
  pointer-events: auto;
}
#playMiniMate[data-nav-panel=scores] #nav-deck {
  translate: -100% 0;
}
#playMiniMate[data-nav-panel=options] #nav-deck {
  translate: -200% 0;
}
#playMiniMate[data-nav-panel=exit] #nav-deck {
  translate: -300% 0;
}
#playMiniMate[data-nav-panel=confirm] #nav-deck {
  translate: -400% 0;
}
#playMiniMate[data-nav-panel=changelog] #nav-deck {
  translate: -500% 0;
}
#playMiniMate .nav-panel-doc {
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
}
#playMiniMate .nav-panel-doc {
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  text-transform: none;
}
#playMiniMate .nav-panel-doc .changelog-title {
  position: static;
  width: auto;
  padding: 0;
  text-align: left;
}
#playMiniMate .nav-panel-doc ul {
  width: auto;
  max-width: 100%;
  text-align: left;
}
#playMiniMate .nav-lead,
#playMiniMate .nav-stat {
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-light);
}
#playMiniMate .nav-lead {
  font-size: 5vmin;
  font-weight: 400;
  line-height: 1.4;
}
@media only screen and (max-width: 600px) {
  #playMiniMate .nav-lead {
    font-size: clamp(14px, 10vmin, 32px);
  }
}
#playMiniMate .nav-lead {
  font-size: 5vmin;
  font-weight: 400;
  line-height: 1.4;
}
@media only screen and (max-width: 600px) {
  #playMiniMate .nav-lead {
    font-size: clamp(14px, 10vmin, 32px);
  }
}
#playMiniMate .nav-stat {
  margin-top: 0.5em;
  margin-bottom: 1.4em;
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.5;
}
#playMiniMate .nav-stat b {
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  color: var(--color-light);
  opacity: 1;
}
#playMiniMate #mobile-nav-main li a,
#playMiniMate #mobile-nav-main li button {
  display: block;
  scale: 1;
  transition: scale 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), font-weight 0.125s ease-in-out;
}
@media (hover: hover) {
  #playMiniMate #mobile-nav-main li a:hover,
  #playMiniMate #mobile-nav-main li button:hover {
    scale: 1.045;
  }
}
#playMiniMate #mobile-nav-main li a:focus-visible,
#playMiniMate #mobile-nav-main li button:focus-visible {
  scale: 1.045;
}
#playMiniMate #mobile-nav-main .game-list [aria-current=page]:hover {
  scale: 1;
}
#playMiniMate #mobile-nav-main li a > span,
#playMiniMate #mobile-nav-main li button > span {
  position: relative;
  display: inline-block;
}
#playMiniMate #mobile-nav-main li button[data-nav-push] > span::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0.26em;
  height: 0.26em;
  margin-left: 0.3em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  translate: 0 -50%;
  rotate: 45deg;
  opacity: 0.4;
  transition: opacity 0.125s ease-in-out, translate 0.125s ease-in-out;
}
#playMiniMate #mobile-nav-main li button[data-nav-push]:hover > span::after,
#playMiniMate #mobile-nav-main li button[data-nav-push]:focus-visible > span::after {
  opacity: 1;
  translate: 0.15em -50%;
}
#playMiniMate .nav-value {
  font-weight: 400;
  opacity: 0.45;
  margin-left: 0.5em;
}
#playMiniMate .nav-empty {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-lighten);
  opacity: 0.4;
  margin: 0;
}
#playMiniMate #mobile-nav-main .nav-panel[data-panel=exit] li a {
  font-size: clamp(13px, 3.6vmin, 26px) !important;
  line-height: min(5.2vh, 46px);
}
#playMiniMate .nav-out {
  margin-top: 1.2em !important;
  padding-top: 1.2em !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  width: min(20em, 60vw) !important;
}
#playMiniMate .game-list [aria-current=page] {
  opacity: 0.35;
  cursor: default;
  font-weight: 500 !important;
}
#playMiniMate.mobile-nav #home {
  z-index: 1000010;
}
#playMiniMate.mobile-nav #home:before {
  background-size: 40%;
  transform: translateX(-100%);
}
#playMiniMate.mobile-nav #home:after {
  transform: translateX(-50%);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #playMiniMate #nav-deck {
    transition: none;
  }
  #playMiniMate .nav-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.18s linear, visibility 0s linear 0.18s;
  }
  #playMiniMate .nav-panel.is-live {
    opacity: 1;
  }
}

#drawer.mm-dev {
  position: fixed;
  left: 0;
  top: 72px;
  height: calc(100vh - 72px);
  flex: none;
}
@media only screen and (orientation: portrait) {
  #drawer.mm-dev {
    display: flex;
  }
}

#drawer.mm-dev #drawer-toggle {
  z-index: 10002;
  opacity: 0.55;
}

main.mg {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: var(--color-darker);
}
main.mg .mg-grid {
  position: absolute;
  z-index: -1;
  display: grid;
  pointer-events: none;
}
main.mg .mg-grid i {
  position: relative;
  display: block;
}
main.mg .mg-grid i::before {
  content: "";
  position: absolute;
  inset: -3.125%;
  background: url("/_img/chesspieces/sctheme/square-white-corner.png") center/100% no-repeat;
  opacity: 0.1;
  transition: opacity 0.3s ease;
}
main.mg .mg-grid i.lit::before, main.mg .mg-grid i.hot::before {
  background-image: url("/_img/chesspieces/sctheme/square-white.png");
  transition: none;
}
main.mg .mg-grid i.lit::before {
  opacity: 0.35;
}
main.mg .mg-grid i.hot::before {
  opacity: 0.8;
}
main.mg .mg-grid b {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-style: normal;
  line-height: 2;
  text-transform: uppercase;
  color: rgba(243, 233, 232, 0.15);
}
main.mg .mg-grid b.top {
  bottom: 100%;
  left: 0;
  right: 0;
}
main.mg .mg-grid b.bottom {
  top: 100%;
  left: 0;
  right: 0;
}
main.mg .mg-grid b.left {
  right: 100%;
  top: 0;
  bottom: 0;
  padding: 0 0.85em;
}
main.mg .mg-grid b.right {
  left: 100%;
  top: 0;
  bottom: 0;
  padding: 0 0.85em;
}
main.mg .mg-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
main.mg #gameOptions h1 {
  z-index: 1;
  pointer-events: none;
}
main.mg #gameOptions h1.big {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.14em;
}
main.mg .mg-meta {
  display: flex;
  justify-content: center;
  gap: 2.5em;
  font-feature-settings: "tnum" 1;
}
main.mg #gameOptions .mg-meta {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  pointer-events: none;
}
main.mg #gameOptions .mg-meta .mg-meta-l,
main.mg #gameOptions .mg-meta .mg-meta-r {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
main.mg #gameOptions .mg-meta .mg-meta-l {
  right: calc(50% + 8em);
}
main.mg #gameOptions .mg-meta .mg-meta-r {
  left: calc(50% + 8em);
}
main.mg #gameOptions .mg-meta .mg-stat {
  min-width: 4.5em;
  gap: 3px;
}
main.mg #gameOptions .mg-meta .mg-stat b {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(243, 233, 232, 0.5);
  transition: color 0.5s ease-out;
}
main.mg #gameOptions .mg-meta .mg-stat b.bump {
  color: var(--color-light);
  transition: color 0s;
}
main.mg #gameOptions .mg-meta .mg-stat i {
  font-size: 7.5px;
  letter-spacing: 0.15em;
  opacity: 1;
  color: rgba(243, 233, 232, 0.25);
}
main.mg .mg-meta.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  height: 2.8em;
  padding-left: 110px;
  gap: 1.25em;
  pointer-events: none;
}
main.mg .mg-meta.foot .mg-meta-l,
main.mg .mg-meta.foot .mg-meta-r {
  display: flex;
  align-items: center;
  gap: 1.25em;
}
main.mg .mg-meta.foot .mg-stat {
  flex-direction: row;
  align-items: baseline;
  gap: 0.4em;
  min-width: 0;
}
main.mg .mg-meta.foot .mg-stat b {
  font-size: 13px;
}
main.mg .mg-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3em;
}
main.mg .mg-stat b {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-lighter);
  display: inline-block;
}
main.mg .mg-stat b.bump {
  animation: mgBump 0.35s var(--bounce);
}
main.mg .mg-stat i {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lightish);
  opacity: 0.6;
}
main.mg .mg-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
  position: relative;
}
main.mg .mg-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.5em;
  z-index: 300;
  display: flex;
  justify-content: center;
  gap: 0.75em;
  transition: opacity 0.3s ease;
}
@media only screen and (max-width: 640px) {
  main.mg .mg-actions {
    bottom: 3.6em;
  }
}
main.mg.mg-ended .mg-actions {
  opacity: 0;
  pointer-events: none;
}
main.mg .mg-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  padding: 1.5em;
  opacity: 0;
  transform: translateY(50%);
  pointer-events: none;
  transition: opacity 0.25s ease 0.125s, transform 0.35s ease;
}
main.mg .mg-footer.in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
main.mg .mg-verdict {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lightish);
}
main.mg .mg-button {
  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;
}
main.mg .mg-button:hover {
  border-color: rgba(234, 233, 232, 0.3);
  color: rgba(234, 233, 232, 0.9);
}
main.mg .volume-control .muted-icon {
  display: none;
}
main.mg .volume-control .unmuted-icon {
  display: block;
}
main.mg .volume-control.muted .muted-icon {
  display: block;
}
main.mg .volume-control.muted .unmuted-icon {
  display: none;
}
main.mg .volume-control #mute-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
main.mg .volume-control #mute-toggle:hover {
  opacity: 1;
}
main.mg .volume-control #mute-toggle svg {
  width: 24px;
  height: 24px;
  display: block;
}

@keyframes mgBump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
.mg-help {
  position: fixed;
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.mg-help > * {
  pointer-events: auto;
}

.mg-help-toggle {
  border: none;
  background: transparent;
  color: var(--color-lightish);
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.mg-help-toggle:hover {
  color: var(--color-lighter);
}

.mg-help-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  padding: 12px;
  color: var(--color-lighten);
  font-size: 12px;
  line-height: 1.5;
  scrollbar-width: none;
}
.mg-help-scroll::-webkit-scrollbar {
  display: none;
}

.mg-help-tab {
  display: flex;
  justify-content: center;
  padding: 0 8px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(234, 233, 232, 0.05);
  line-height: 25px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-lighter);
}

.mg-card {
  margin: 0 0 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(234, 233, 232, 0.02);
}
.mg-card:last-child {
  margin-bottom: 0;
}
.mg-card summary {
  display: block;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.mg-card summary::-webkit-details-marker {
  display: none;
}
.mg-card summary b {
  display: block;
  position: relative;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 20px;
  color: var(--color-lighter);
}
.mg-card summary b::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-left: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.35;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.mg-card summary small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-lightish);
}
.mg-card summary:hover b::after {
  opacity: 1;
}
.mg-card:not([open]) summary b::after {
  transform: rotate(225deg) translate(-1px, -1px);
}
.mg-card > :not(summary) {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mg-card-text {
  margin: 0;
  padding: 10px 0 6px;
  font-size: 12px;
  line-height: 1.55;
}

.mg-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 10px 0;
  margin: 0;
  color: var(--color-lighten);
}
.mg-row + .mg-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mg-row dt, .mg-row > b {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--color-lighter);
}
.mg-row dd {
  flex: 1;
  margin: 0;
  text-align: right;
  color: var(--color-lightish);
}
.mg-row.verbose {
  display: block;
  text-wrap: pretty;
}
.mg-row.verbose > b {
  display: inline;
}

@media only screen and (orientation: portrait) {
  .mg-help {
    left: 0;
    right: 0;
    bottom: 0;
    align-items: flex-start;
    transform: translateY(calc(100% - 2.8em));
    transition: transform 0.38s var(--easing);
  }
  .mg-help.open {
    transform: none;
  }
  .mg-help-toggle {
    height: 2.8em;
    margin-left: 12px;
    padding: 0 1.4em;
    border-radius: 14px 14px 0 0;
    background: var(--color-midlowest);
  }
  .mg-help-toggle::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0.9em 1px 0;
    border-left: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
  }
  .open .mg-help-toggle::before {
    transform: rotate(225deg) translate(-1px, -1px);
  }
  .mg-help-scroll {
    width: 100%;
    max-height: min(50vh, 32em);
    background: var(--color-dark);
    box-shadow: 0 -1px 0 var(--color-softlight);
  }
  .mg-help-scroll > * {
    width: min(34em, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (orientation: landscape) {
  .mg-help {
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    align-items: stretch;
    background: var(--color-dark);
    border: 2px solid var(--color-dark);
    border-left: 0;
    transform: translateX(-100%);
    transition: transform 0.35s var(--easing);
  }
  .mg-help.open {
    transform: none;
  }
  .mg-help-toggle {
    position: absolute;
    top: 50%;
    right: -44px;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    font-size: 0;
    opacity: 0.2;
    transition: opacity 0.2s ease;
  }
  .mg-help-toggle:hover {
    opacity: 1;
  }
  .mg-help-toggle::before, .mg-help-toggle::after {
    content: "";
    position: absolute;
    left: 40%;
    top: 50%;
    width: 1em;
    height: 2px;
    font-size: 14px;
    background: var(--color-light);
    transform-origin: left center;
    transition: transform 0.1s var(--easing);
  }
  .mg-help-toggle::before {
    transform: rotate(90deg);
  }
  .mg-help-toggle::after {
    transform: rotate(-90deg);
  }
  .mg-help-toggle:hover::before {
    transform: rotate(110deg);
  }
  .mg-help-toggle:hover::after {
    transform: rotate(-110deg);
  }
  .open .mg-help-toggle:hover::before {
    transform: rotate(70deg);
  }
  .open .mg-help-toggle:hover::after {
    transform: rotate(-70deg);
  }
  .mg-help-scroll {
    flex: 1;
    height: 100%;
    padding-top: 4.6em;
  }
}
main.mg .mg-bot {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 0.4em 1em;
  border: 0;
  background: none;
  color: var(--color-light);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
main.mg .mg-bot[hidden] {
  display: none;
}
main.mg .mg-bot:hover, main.mg .mg-bot[aria-pressed=true] {
  opacity: 1;
}
main.mg .mg-bot[aria-pressed=true]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.8em;
  border-radius: 50%;
  background: var(--color-light);
  vertical-align: middle;
  animation: mg-bot-pulse 1s ease-in-out infinite;
}

@keyframes mg-bot-pulse {
  50% {
    opacity: 0.2;
  }
}
#playCrush {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --cr-cell: min(calc((100vh - 175px) / 8), 11.5vw);
}
#playCrush #cr-board {
  position: relative;
  width: calc(8 * var(--cr-cell));
  height: calc(8 * var(--cr-cell));
  touch-action: none;
  transition: opacity 0.26s ease;
}
#playCrush #cr-board.shuffling {
  opacity: 0.15;
}
#playCrush #cr-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, var(--cr-cell));
  grid-template-rows: repeat(8, var(--cr-cell));
  border-radius: 6px;
  overflow: hidden;
}
#playCrush #cr-pieces {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
#playCrush .cr-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cr-cell);
  height: var(--cr-cell);
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
}
#playCrush .cr-piece .cr-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.22s ease;
}
#playCrush .cr-piece .cr-glyph img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
#playCrush .cr-piece.sel .cr-glyph {
  transform: scale(1.18);
}
#playCrush .cr-piece.sel .cr-glyph img {
  opacity: 1;
}
#playCrush .cr-piece.out .cr-glyph {
  transform: scale(0);
  opacity: 0;
}
#playCrush .cr-piece.born .cr-glyph {
  animation: crBorn 0.35s var(--bounce);
}
#playCrush .cr-piece.is-line::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--color-lightish);
  border-radius: 1px;
}
#playCrush .cr-piece.is-line::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--color-lightish);
  border-radius: 1px;
}
#playCrush .cr-piece.is-bomb::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 2px solid var(--color-lightish);
  animation: crBreath 1.6s ease-in-out infinite;
}
#playCrush .cr-piece.is-bomb .cr-glyph img {
  opacity: 1;
}
@keyframes crBorn {
  0% {
    transform: scale(0.4);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes crBreath {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.88);
    opacity: 1;
  }
}

#playPromote {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --pr-cell: min(calc((100vh - 230px) / 4), 20vw, 170px);
  --pr-gap: 6px;
}
#playPromote #pr-board {
  position: relative;
  width: calc(4 * var(--pr-cell));
  height: calc(4 * var(--pr-cell));
  touch-action: none;
  cursor: grab;
}
#playPromote #pr-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, var(--pr-cell));
  grid-template-rows: repeat(4, var(--pr-cell));
  border-radius: 10px;
}
#playPromote .pr-square {
  margin: var(--pr-gap);
}
#playPromote #pr-tiles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#playPromote .pr-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pr-cell);
  height: var(--pr-cell);
  will-change: transform;
  transition: transform 0.13s cubic-bezier(0.33, 1, 0.68, 1);
}
#playPromote .pr-tile .pr-glyph {
  position: absolute;
  inset: var(--pr-gap);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
#playPromote .pr-tile .pr-glyph img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.9;
}
#playPromote .pr-tile.under {
  z-index: 0;
}
#playPromote .pr-tile.pop .pr-glyph {
  animation: prPop 0.2s cubic-bezier(0.33, 1, 0.68, 1) backwards;
  animation-delay: 0.1s;
}
#playPromote .pr-tile.merged {
  z-index: 2;
}
#playPromote .pr-tile.merged .pr-glyph {
  animation: prMerge 0.24s var(--bounce);
}
@keyframes prPop {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes prMerge {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
#playPromote .pr-ladder {
  display: flex;
  gap: 0.35em;
  opacity: 0.9;
}
#playPromote .pr-rung {
  width: calc(var(--pr-cell) * 0.34);
  height: calc(var(--pr-cell) * 0.34);
  position: relative;
  opacity: 0.18;
  transition: opacity 0.3s ease;
}
#playPromote .pr-rung.lit {
  opacity: 0.85;
}
#playPromote .pr-rung .pr-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#playPromote .pr-rung .pr-glyph img {
  width: 80%;
  height: 80%;
  -o-object-fit: contain;
     object-fit: contain;
}

#playRepertoire {
  --rp-pad: min(calc((100vh - 180px) / 2), 40vw, 300px);
  --rp-gap: 10px;
}
#playRepertoire .rp-board {
  display: grid;
  grid-template-columns: repeat(2, var(--rp-pad));
  grid-template-rows: repeat(2, var(--rp-pad));
  gap: var(--rp-gap);
  padding: var(--rp-gap);
  border-radius: 14px;
  touch-action: manipulation;
}
#playRepertoire .rp-board.playing .rp-pad {
  pointer-events: none;
}
#playRepertoire .rp-board.over {
  opacity: 0.7;
}
#playRepertoire .rp-pad {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
#playRepertoire .rp-pad img {
  width: 62%;
  height: 62%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.35;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
#playRepertoire .rp-pad:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-lightish);
}
#playRepertoire .rp-pad.lit {
  transform: scale(0.97);
}
#playRepertoire .rp-pad.lit img {
  opacity: 1;
  transform: scale(1.08);
}
#playRepertoire .rp-pad.wanted::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid var(--color-lighter);
  animation: rpWanted 1.2s ease-in-out;
}
#playRepertoire .rp-status {
  min-height: 1.4em;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lightish);
}
@keyframes rpWanted {
  0%, 100% {
    opacity: 0;
  }
  20%, 80% {
    opacity: 1;
  }
}

#playRank {
  --rk-cell: min(3.4vh, 7.5vw, 30px);
  --rk-gap: 1px;
}
#playRank .mg-grid i::before {
  transition: none;
}
#playRank .mg-wrap {
  gap: 0.75em;
}
#playRank .rk-table {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
}
#playRank .rk-well {
  display: grid;
  grid-template-columns: repeat(10, var(--rk-cell));
  grid-template-rows: repeat(20, var(--rk-cell));
  gap: var(--rk-gap);
  padding: var(--rk-gap);
  touch-action: none;
  transition: opacity 0.3s ease;
}
#playRank .rk-well.paused {
  opacity: 0.35;
}
#playRank .rk-well.over {
  opacity: 0.5;
}
#playRank .rk-cell {
  display: block;
  border-radius: 3px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
#playRank .rk-cell.ghost {
  background-image: none !important;
}
#playRank .t-I {
  background-image: url("/_img/chesspieces/sctheme-b/wR.png");
}
#playRank .t-O {
  background-image: url("/_img/chesspieces/sctheme-b/wK.png");
}
#playRank .t-T {
  background-image: url("/_img/chesspieces/sctheme-b/wQ.png");
}
#playRank .t-S {
  background-image: url("/_img/chesspieces/sctheme-b/wN.png");
}
#playRank .t-Z {
  background-image: url("/_img/chesspieces/sctheme-b/hollow/bN.png");
}
#playRank .t-J {
  background-image: url("/_img/chesspieces/sctheme-b/wB.png");
}
#playRank .t-L {
  background-image: url("/_img/chesspieces/sctheme-b/hollow/bB.png");
}
#playRank .rk-side {
  width: calc(var(--rk-cell) * 4 + 1em);
  display: flex;
  flex-direction: column;
}
#playRank .rk-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.5em;
  border: none;
  border-radius: 6px;
  background: var(--color-bglighter);
  color: inherit;
  font-family: inherit;
  cursor: default;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
#playRank .rk-box i {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lightish);
  opacity: 0.6;
}
#playRank button.rk-box {
  cursor: pointer;
}
#playRank button.rk-box.used {
  opacity: 0.45;
}
#playRank .rk-mini {
  display: flex;
  flex-direction: column;
  gap: var(--rk-gap);
  min-height: calc(var(--rk-cell) * 1.5);
  justify-content: center;
}
#playRank .rk-mini-row {
  display: flex;
  gap: var(--rk-gap);
}
#playRank .rk-mini-cell {
  width: calc(var(--rk-cell) * 0.75);
  height: calc(var(--rk-cell) * 0.75);
  border-radius: 2px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
#playRank .rk-toast {
  min-height: 1.4em;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lightish);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#playRank .rk-toast.in {
  opacity: 1;
}
@media (max-width: 480px) {
  #playRank .rk-table {
    flex-wrap: wrap;
    justify-content: center;
  }
  #playRank .rk-side-left {
    order: 2;
  }
  #playRank .rk-side-right {
    order: 3;
  }
  #playRank .rk-well {
    order: 1;
  }
  #playRank .rk-side .rk-box {
    flex-direction: row;
  }
}

#playOpening {
  --op-tile: min(calc((100vh - 330px) / 6), 15vw, 72px);
  --op-gap: 6px;
}
#playOpening .mg-wrap {
  gap: 1.25em;
}
#playOpening .mg-footer {
  position: relative;
  padding: 1em 1.5em 2em;
}
#playOpening .op-grid {
  display: flex;
  flex-direction: column;
  gap: var(--op-gap);
}
#playOpening .op-row {
  display: flex;
  gap: var(--op-gap);
}
#playOpening .op-tile {
  width: var(--op-tile);
  height: var(--op-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--color-lighter);
  font-family: "ND Kern", futura, sans-serif;
  font-weight: 600;
  font-size: calc(var(--op-tile) * 0.48);
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
#playOpening .op-tile.pop {
  animation: opPop 0.12s ease-out;
}
#playOpening .op-tile.flip {
  animation: opFlip 0.32s ease-in-out;
}
#playOpening .op-tile.absent {
  color: var(--color-mid);
}
#playOpening .op-tile.present {
  box-shadow: inset 0 0 0 2px var(--color-lighter);
}
#playOpening .op-tile.dance {
  animation: opDance 0.5s var(--bounce);
}
#playOpening .op-toast {
  min-height: 1.4em;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lightish);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#playOpening .op-toast.in {
  opacity: 1;
}
#playOpening .op-keys {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#playOpening .op-key-row {
  display: flex;
  gap: 5px;
}
#playOpening .op-key {
  min-width: min(8.6vw, 42px);
  height: 52px;
  padding: 0 0.4em;
  border: none;
  border-radius: 6px;
  background: var(--color-bglight);
  color: var(--color-lighter);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
#playOpening .op-key.wide {
  min-width: min(13vw, 64px);
  font-size: 11px;
  letter-spacing: 0.05em;
}
#playOpening .op-key:hover {
  background: var(--color-softlight);
}
#playOpening .op-key.absent {
  background: transparent;
  color: var(--color-mid);
}
#playOpening .op-key.present {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--color-lighter);
}
#playOpening .op-key.correct {
  background: var(--color-lighter);
  color: var(--color-dark);
}
@keyframes opPop {
  0% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes opFlip {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes opDance {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-28%);
  }
  100% {
    transform: translateY(0);
  }
}

#playBlindfold {
  --bl-cell: min(calc((100vh - 200px) / 5), 17vw, 130px);
  --bl-gap: 6px;
}
#playBlindfold .bl-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.2em;
}
#playBlindfold .bl-piece img {
  height: 1.3em;
  width: auto;
  opacity: 0.85;
}
#playBlindfold #bl-board {
  display: grid;
  padding: var(--bl-gap);
  border-radius: 10px;
}
#playBlindfold .bl-square {
  position: relative;
  width: var(--bl-cell);
  height: var(--bl-cell);
  padding: var(--bl-gap);
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
#playBlindfold .bl-square:focus-visible .bl-light {
  box-shadow: inset 0 0 0 2px var(--color-lightish);
}
#playBlindfold .bl-light {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
#playBlindfold .bl-square::after {
  content: "";
  position: absolute;
  inset: var(--bl-gap);
  border-radius: 8px;
  border: 2px solid var(--color-lighter);
  opacity: 0;
  pointer-events: none;
}
#playBlindfold .bl-square.pressed::after {
  animation: blRing 0.45s ease-out;
}
#playBlindfold .bl-square.hint::after {
  animation: blHint 1.4s ease-in-out;
}
@keyframes blRing {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes blHint {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  20%, 80% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}

#playMatejong {
  overflow: hidden;
  --mt-fg: var(--color-light);
  --mt-bg: var(--color-dark);
  --mt-felt: var(--color-midlowest);
  --mt-face: var(--color-light);
  --mt-ink: var(--color-darker);
  --mt-line: var(--color-softlight);
  --mt-dim: var(--color-lightish);
  --mt-red: var(--color-red);
  --mt-suit-0: var(--color-blue);
  --mt-suit-1: var(--color-green);
  --mt-suit-2: var(--color-red);
  --mt-radius: var(--radius);
  --mt-ease: var(--easing);
  --mt-bounce: var(--bounce);
  --mt-h: calc(100vh - 65px - 56px);
  --mt-w: min(94vw, var(--mt-h));
  --mt-table: min(var(--mt-w), var(--mt-h));
  --mt-zoom: 1;
  --mt-tile: calc(min(calc(var(--mt-w) * 0.041), calc(var(--mt-h) * 0.09)) * var(--mt-zoom));
  --mt-tile-h: calc(var(--mt-tile) * 1.42);
  --mt-gap: calc(var(--mt-tile) * 0.06);
  --mt-scale: 1;
  --mt-primary-bg: color-mix(in srgb, var(--color-green) 24%, var(--mt-felt));
  --mt-primary-bg-hover: color-mix(in srgb, var(--color-green) 36%, var(--mt-felt));
  --mt-primary-bg-active: color-mix(in srgb, var(--color-green) 40%, var(--mt-felt));
  --mt-primary-fg: var(--color-green);
  --mt-band: 26px;
  --mt-band-in: 8px;
}
#playMatejong #gameContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  padding: 65px 0 0;
  position: relative;
}
#playMatejong #game-container-wrap {
  flex: none;
}
#playMatejong .game-header {
  margin-bottom: 0;
}
#playMatejong #game-container-wrap {
  position: relative;
  width: var(--mt-w);
  height: var(--mt-h);
}
#playMatejong #mt-foot {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.4%;
  box-sizing: border-box;
  font-family: "ND Kern", futura, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mt-fg);
  pointer-events: none;
}
#playMatejong #mt-foot .mt-foot-side {
  color: var(--mt-dim);
  font-feature-settings: "tnum";
}
#playMatejong #mt-foot .mt-foot-right {
  text-align: right;
}
#playMatejong #mt-foot .mt-foot-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
}
#playMatejong #mt-foot .mt-clock {
  margin-right: 0;
}
#playMatejong #mt-foot .mt-foot-hint:empty {
  display: none;
}
#playMatejong #mt-foot .mt-foot-mid:has(.mt-clock:not(:empty)) .mt-foot-hint.mt-quiet {
  display: none;
}
#playMatejong #mt-foot .mt-foot-mid:has(.mt-foot-hint.mt-quiet:not(:empty)) .mt-clock {
  color: var(--mt-fg);
}
#playMatejong.mt-narrow #mt-foot, #playMatejong.mt-land #mt-foot {
  display: none;
}
#playMatejong #mt-table {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--mt-radius) * 3);
  background: var(--mt-felt);
}
#playMatejong .mt-seat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mt-w);
  height: calc(var(--mt-h) - 2 * var(--mt-band));
  --mt-turn: 0deg;
  transform: translate(-50%, -50%) rotate(var(--mt-turn));
  pointer-events: none;
}
#playMatejong .mt-seat[data-seat="1"] {
  --mt-turn: -90deg;
  width: calc(var(--mt-h) - 2 * var(--mt-band));
  height: var(--mt-w);
}
#playMatejong .mt-seat[data-seat="2"] {
  --mt-turn: 180deg;
}
#playMatejong .mt-seat[data-seat="3"] {
  --mt-turn: 90deg;
  width: calc(var(--mt-h) - 2 * var(--mt-band));
  height: var(--mt-w);
}
#playMatejong .mt-area {
  position: absolute;
  left: 1.4%;
  right: 1.4%;
  bottom: 1.4%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--mt-gap);
  pointer-events: auto;
}
#playMatejong .mt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  gap: var(--mt-gap) calc(var(--mt-tile) * 0.3);
  width: 100%;
}
#playMatejong .mt-hand,
#playMatejong .mt-melds,
#playMatejong .mt-meld,
#playMatejong .mt-drawn {
  display: flex;
  align-items: flex-end;
  gap: var(--mt-gap);
}
#playMatejong .mt-hand,
#playMatejong .mt-melds {
  flex-wrap: nowrap;
  align-content: flex-end;
}
#playMatejong .mt-break {
  flex-basis: 100%;
  height: 0;
}
#playMatejong .mt-melds {
  gap: calc(var(--mt-tile) * 0.3);
  margin-left: 0;
  flex-basis: 100%;
  order: -1;
  margin-bottom: calc(var(--mt-tile) * 0.3 - var(--mt-gap));
}
#playMatejong .mt-melds:empty {
  display: none;
}
#playMatejong .mt-pond {
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  justify-content: flex-start;
  gap: var(--mt-gap);
  width: calc(8 * var(--mt-tile) + 7 * var(--mt-gap));
  --mt-scale: 1;
  min-height: var(--mt-tile-h);
  max-width: 100%;
  margin-bottom: calc(var(--mt-tile) * 0.3 - var(--mt-gap));
}
#playMatejong .mt-tile {
  position: relative;
  width: calc(var(--mt-tile) * var(--mt-scale));
  height: calc(var(--mt-tile-h) * var(--mt-scale));
  border-radius: calc(var(--mt-radius) * 0.8 * var(--mt-scale));
  background: var(--mt-face);
  color: var(--mt-ink);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  transition: transform 0.18s var(--mt-ease), opacity 0.3s var(--mt-ease), box-shadow 0.18s var(--mt-ease);
}
#playMatejong .mt-tile.mt-back {
  background: var(--color-midlow);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
}
#playMatejong .mt-tile.mt-last, #playMatejong .mt-tile.mt-win-tile {
  filter: brightness(1.18);
}
@keyframes mt-sheen {
  from {
    transform: translate(-75%, 75%);
  }
  to {
    transform: translate(75%, -75%);
  }
}
#playMatejong .mt-tile:not(.mt-back).mt-s0 {
  --mt-tile-suit: var(--mt-suit-0);
}
#playMatejong .mt-tile:not(.mt-back).mt-s1 {
  --mt-tile-suit: var(--mt-suit-1);
}
#playMatejong .mt-tile:not(.mt-back).mt-s2 {
  --mt-tile-suit: var(--mt-suit-2);
}
#playMatejong .mt-tile:not(.mt-back)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(45deg, transparent 32%, color-mix(in srgb, var(--mt-tile-suit, var(--mt-fg)) 40%, transparent) 50%, transparent 68%);
  transform: translate(-75%, 75%);
}
@keyframes mt-glint {
  0% {
    transform: translate(-75%, 75%);
  }
  16% {
    transform: translate(75%, -75%);
  }
  100% {
    transform: translate(75%, -75%);
  }
}
#playMatejong.mt-motion .mt-tile.mt-last::after, #playMatejong.mt-motion .mt-tile.mt-win-tile::after {
  animation: mt-glint 4s cubic-bezier(0.4, 0, 0.2, 1) 1.2s infinite;
}
#playMatejong .mt-seat[data-seat="0"] .mt-hand .mt-tile,
#playMatejong .mt-seat[data-seat="0"] .mt-drawn .mt-tile {
  cursor: pointer;
}
@media (hover: hover) {
  #playMatejong .mt-seat[data-seat="0"] .mt-slot:hover .mt-tile::after,
  #playMatejong .mt-seat[data-seat="0"] .mt-drawn .mt-tile:hover::after {
    animation: mt-sheen 0.65s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
  }
}
#playMatejong .mt-seat[data-seat="0"] .mt-hand .mt-tile,
#playMatejong .mt-seat[data-seat="0"] .mt-drawn .mt-tile {
  --mt-lift: calc(var(--mt-table) * 0.02);
}
#playMatejong .mt-seat[data-seat="0"] .mt-hand .mt-tile.mt-selected,
#playMatejong .mt-seat[data-seat="0"] .mt-drawn .mt-tile.mt-selected {
  transform: translateY(calc(var(--mt-lift) * -1));
  box-shadow: 0 0 0 2px var(--mt-fg);
}
#playMatejong .mt-seat[data-seat="0"] .mt-hand .mt-tile.mt-premove,
#playMatejong .mt-seat[data-seat="0"] .mt-drawn .mt-tile.mt-premove {
  transform: translateY(calc(var(--mt-lift) * -1));
  box-shadow: 0 0 0 2px var(--mt-dim);
}
#playMatejong .mt-slot {
  position: relative;
  display: flex;
  align-items: flex-end;
}
#playMatejong .mt-slot::after {
  content: "";
  position: absolute;
  inset: calc(var(--mt-gap) * -0.5);
}
#playMatejong.mt-manual .mt-seat[data-seat="0"] .mt-hand {
  touch-action: none;
}
#playMatejong .mt-tile.mt-dragging {
  z-index: 40;
  scale: 1.08;
  transition: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(243, 233, 232, 0.06) !important;
  pointer-events: none;
}
#playMatejong.mt-motion .mt-hand.mt-sorting .mt-slot {
  transition: translate 0.18s var(--mt-ease);
}
#playMatejong .mt-hand.mt-sorting .mt-slot:has(.mt-dragging) {
  transition: none;
  z-index: 40;
}
#playMatejong .mt-slot.mt-drop::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--mt-radius) * 0.8 * var(--mt-scale));
  background: rgba(243, 233, 232, 0.12);
  pointer-events: none;
}
#playMatejong .mt-slot:has(.mt-selected)::before,
#playMatejong .mt-slot:has(.mt-premove)::before,
#playMatejong .mt-drawn:has(.mt-selected)::before,
#playMatejong .mt-drawn:has(.mt-premove)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--mt-radius) * 0.8 * var(--mt-scale));
  background: rgba(243, 233, 232, 0.08);
  pointer-events: none;
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face {
  inset: auto;
  left: 50%;
  top: 50%;
  width: calc(var(--mt-tile-h) * var(--mt-scale) * (1 - 2 * var(--mt-iy)));
  height: calc(var(--mt-tile) * var(--mt-scale) * (1 - 2 * var(--mt-ix)));
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.r2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.r6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.r7, #playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.r8 {
  grid-auto-flow: column;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  --mt-g: 0.34;
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.r7 i, #playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.r8 i {
  grid-column: auto;
  grid-row: span 2;
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.r7 i:nth-child(7) {
  grid-row: 3/5;
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.r8 i:nth-child(7) {
  grid-row: 2/4;
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.r8 i:nth-child(8) {
  grid-row: 4/6;
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.r9 {
  --mt-g: 0.34;
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.mt-num {
  grid-auto-flow: row;
  grid-template-columns: auto auto;
  grid-template-rows: minmax(0, 1fr);
  justify-content: center;
  padding-top: calc(var(--mt-tile) * var(--mt-scale) * 0.04);
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.mt-num i, #playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.mt-num b {
  grid-row: auto;
  grid-column: auto;
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.mt-num {
  -moz-column-gap: calc(var(--mt-tile) * var(--mt-scale) * 0.06);
       column-gap: calc(var(--mt-tile) * var(--mt-scale) * 0.06);
  align-items: baseline;
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.mt-num b {
  align-self: baseline;
  font-size: calc(var(--mt-tile) * var(--mt-scale) * 0.56);
  transform: translateY(-0.08em);
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.mt-num.s0 {
  padding-right: calc(var(--mt-tile) * var(--mt-scale) * 0.06);
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.mt-num.s0 b {
  margin-left: calc(var(--mt-tile) * var(--mt-scale) * -0.1);
}
#playMatejong .mt-side .mt-tile:not(.mt-back) .mt-face.mt-num i:nth-child(n) {
  --mt-g: 0.72;
  width: auto;
  height: auto;
  align-self: baseline;
  transform: none;
  display: inline;
}
#playMatejong .mt-seat[data-seat="1"] .mt-tile:not(.mt-back) .mt-face, #playMatejong .mt-lay[data-seat="1"] .mt-tile:not(.mt-back) .mt-face {
  transform: translate(-50%, -50%) rotate(90deg);
}
#playMatejong .mt-seat[data-seat="3"] .mt-tile:not(.mt-back) .mt-face, #playMatejong .mt-lay[data-seat="3"] .mt-tile:not(.mt-back) .mt-face {
  transform: translate(-50%, -50%) rotate(-90deg);
}
#playMatejong .mt-seat[data-seat="2"] .mt-tile:not(.mt-back) .mt-face, #playMatejong .mt-lay[data-seat="2"] .mt-tile:not(.mt-back) .mt-face {
  transform: rotate(180deg);
}
#playMatejong .mt-drawn {
  margin-left: 0;
  min-width: calc(var(--mt-tile) * var(--mt-scale));
  min-height: calc(var(--mt-tile-h) * var(--mt-scale));
  position: relative;
}
#playMatejong #mt-dust {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
#playMatejong .mt-dust {
  position: absolute;
  border-radius: 50%;
  background: rgba(243, 233, 232, 0.75);
  will-change: transform, opacity;
}
#playMatejong .mt-ring {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px rgba(243, 233, 232, 0.25), inset 0 0 1px 1px rgba(243, 233, 232, 0.25);
  will-change: transform, opacity;
}
#playMatejong .mt-ghost {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--mt-radius) * 0.8 * var(--mt-scale));
  background: rgba(243, 233, 232, 0.08);
  pointer-events: none;
}
#playMatejong .mt-leaving {
  pointer-events: none;
  will-change: transform, opacity;
}
#playMatejong .mt-seat:not([data-seat="0"]) .mt-meld.mt-concealed .mt-tile:first-child,
#playMatejong .mt-seat:not([data-seat="0"]) .mt-meld.mt-concealed .mt-tile:last-child {
  background: var(--color-midlow);
}
#playMatejong .mt-seat:not([data-seat="0"]) .mt-meld.mt-concealed .mt-tile:first-child .mt-face,
#playMatejong .mt-seat:not([data-seat="0"]) .mt-meld.mt-concealed .mt-tile:last-child .mt-face {
  visibility: hidden;
}
#playMatejong.mt-tiles-inverted .mt-tile.mt-s0 {
  background: var(--mt-suit-0);
}
#playMatejong.mt-tiles-inverted .mt-tile.mt-s1 {
  background: var(--mt-suit-1);
}
#playMatejong.mt-tiles-inverted .mt-tile.mt-s2 {
  background: var(--mt-suit-2);
}
#playMatejong.mt-tiles-inverted .mt-tile:not(.mt-back) .mt-face {
  color: var(--mt-fg);
}
#playMatejong.mt-tiles-inverted .mt-tile:not(.mt-back) {
  box-shadow: none;
}
#playMatejong.mt-tiles-tinted .mt-tile.mt-s0 {
  background: color-mix(in srgb, var(--mt-suit-0) 22%, var(--mt-felt));
}
#playMatejong.mt-tiles-tinted .mt-tile.mt-s1 {
  background: color-mix(in srgb, var(--mt-suit-1) 22%, var(--mt-felt));
}
#playMatejong.mt-tiles-tinted .mt-tile.mt-s2 {
  background: color-mix(in srgb, var(--mt-suit-2) 22%, var(--mt-felt));
}
#playMatejong.mt-tiles-tinted .mt-tile:not(.mt-back) {
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
}
#playMatejong.mt-tiles-tinted .mt-tile.mt-last, #playMatejong.mt-tiles-tinted .mt-tile.mt-win-tile {
  filter: none;
}
#playMatejong.mt-tiles-tinted .mt-tile.mt-last.mt-s0, #playMatejong.mt-tiles-tinted .mt-tile.mt-win-tile.mt-s0 {
  background: color-mix(in srgb, var(--mt-suit-0) 40%, var(--mt-felt));
}
#playMatejong.mt-tiles-tinted .mt-tile.mt-last.mt-s1, #playMatejong.mt-tiles-tinted .mt-tile.mt-win-tile.mt-s1 {
  background: color-mix(in srgb, var(--mt-suit-1) 40%, var(--mt-felt));
}
#playMatejong.mt-tiles-tinted .mt-tile.mt-last.mt-s2, #playMatejong.mt-tiles-tinted .mt-tile.mt-win-tile.mt-s2 {
  background: color-mix(in srgb, var(--mt-suit-2) 40%, var(--mt-felt));
}
@media (hover: hover) {
  #playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-slot:hover .mt-tile.mt-s0,
  #playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-drawn .mt-tile:hover.mt-s0 {
    background: color-mix(in srgb, var(--mt-suit-0) 48%, var(--mt-felt));
  }
  #playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-slot:hover .mt-tile.mt-s1,
  #playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-drawn .mt-tile:hover.mt-s1 {
    background: color-mix(in srgb, var(--mt-suit-1) 36%, var(--mt-felt));
  }
  #playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-slot:hover .mt-tile.mt-s2,
  #playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-drawn .mt-tile:hover.mt-s2 {
    background: color-mix(in srgb, var(--mt-suit-2) 36%, var(--mt-felt));
  }
}
#playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-tile.mt-selected {
  box-shadow: 0 0 0 2px var(--mt-fg);
}
#playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-tile.mt-selected.mt-s0 {
  background: color-mix(in srgb, var(--mt-suit-0) 70%, var(--mt-felt));
}
#playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-tile.mt-selected.mt-s1 {
  background: color-mix(in srgb, var(--mt-suit-1) 70%, var(--mt-felt));
}
#playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-tile.mt-selected.mt-s2 {
  background: color-mix(in srgb, var(--mt-suit-2) 70%, var(--mt-felt));
}
#playMatejong.mt-tiles-tinted .mt-seat[data-seat="0"] .mt-tile.mt-selected .mt-face {
  color: var(--mt-fg);
}
#playMatejong .mt-face {
  font-family: "Pieces";
  font-weight: 230;
  line-height: 1;
  position: absolute;
  --mt-ix: 0.06;
  --mt-iy: 0.07;
  inset: calc(var(--mt-iy) * 100%) calc(var(--mt-ix) * 100%);
  display: grid;
  gap: 0;
  grid-auto-rows: minmax(0, 1fr);
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  --mt-g: 0.5;
}
#playMatejong .mt-face i {
  font-style: normal;
  font-size: calc(var(--mt-tile) * var(--mt-scale) * var(--mt-g));
  line-height: 1;
  min-width: 0;
  min-height: 0;
}
#playMatejong .mt-face.s0 {
  color: var(--mt-suit-0);
}
#playMatejong .mt-face.s1 {
  color: var(--mt-suit-1);
}
#playMatejong .mt-face.s2 {
  color: var(--mt-suit-2);
}
#playMatejong .mt-face.r1 {
  grid-template-columns: minmax(0, 1fr);
  --mt-g: 0.85;
}
#playMatejong .mt-face.r2 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  --mt-g: 0.55;
}
#playMatejong .mt-face.r3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  --mt-g: 0.44;
}
#playMatejong .mt-face.r3 i:nth-child(1) {
  grid-area: 1/1;
}
#playMatejong .mt-face.r3 i:nth-child(2) {
  grid-area: 2/2;
}
#playMatejong .mt-face.r3 i:nth-child(3) {
  grid-area: 3/3;
}
#playMatejong .mt-face.r4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  --mt-g: 0.5;
}
#playMatejong .mt-face.r3, #playMatejong .mt-face.r5 {
  --mt-ix: 0.15;
  --mt-iy: 0.13;
}
#playMatejong .mt-face.r7, #playMatejong .mt-face.r8, #playMatejong .mt-face.r9 {
  --mt-ix: 0.11;
}
#playMatejong .mt-face.r5 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  --mt-g: 0.44;
}
#playMatejong .mt-face.r5 i:nth-child(1) {
  grid-area: 1/1;
}
#playMatejong .mt-face.r5 i:nth-child(2) {
  grid-area: 1/3;
}
#playMatejong .mt-face.r5 i:nth-child(3) {
  grid-area: 2/2;
}
#playMatejong .mt-face.r5 i:nth-child(4) {
  grid-area: 3/1;
}
#playMatejong .mt-face.r5 i:nth-child(5) {
  grid-area: 3/3;
}
#playMatejong .mt-face.r6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  --mt-g: 0.46;
}
#playMatejong .mt-face.r7, #playMatejong .mt-face.r8 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  --mt-g: 0.42;
}
#playMatejong .mt-face.r7 i, #playMatejong .mt-face.r8 i {
  grid-column: span 2;
}
#playMatejong .mt-face.r7 i:nth-child(7) {
  grid-column: 3/5;
}
#playMatejong .mt-face.r8 i:nth-child(7) {
  grid-column: 2/4;
}
#playMatejong .mt-face.r8 i:nth-child(8) {
  grid-column: 4/6;
}
#playMatejong .mt-face.r9 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  --mt-g: 0.42;
}
#playMatejong .mt-face i {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transform: translateY(0.07em);
}
#playMatejong .mt-face.mt-num {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  --mt-ix: 0.15;
  --mt-iy: 0.13;
}
#playMatejong .mt-face.mt-num b {
  font-family: "ND Kern", futura, sans-serif;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-size: calc(var(--mt-tile) * var(--mt-scale) * 0.58);
  line-height: 1;
  align-self: end;
}
#playMatejong .mt-face.mt-num i:nth-child(n) {
  grid-area: auto;
  grid-column: auto;
  --mt-g: 0.66;
  align-self: center;
}
#playMatejong #mobile-nav-main .nav-stat {
  margin-bottom: 1.4em;
}
#playMatejong #mobile-nav-main .sc-offer-row {
  width: min(28em, 100% - 2 * var(--mt-inset));
  gap: 12px;
}
#playMatejong #mobile-nav-main .sc-offer-chip {
  flex: 1 1 0;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  padding: 0 1.1em;
  box-sizing: border-box;
  border-radius: calc(var(--mt-radius) * 0.8);
  background: rgba(243, 233, 232, 0.08);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
  color: var(--mt-fg);
  opacity: 1;
  font-family: "ND Kern", futura, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: scale 0.08s var(--mt-ease), background 0.2s;
  align-items: baseline;
}
#playMatejong #mobile-nav-main .sc-offer-chip i {
  --cap: 0.71em;
  width: calc(var(--cap) * 24 / 14);
  height: calc(var(--cap) * 24 / 14);
  translate: 0 20.8333333333%;
}
#playMatejong #mobile-nav-main .sc-offer-chip .ring {
  stroke-width: 2.5;
}
#playMatejong #mobile-nav-main .sc-offer-chip span {
  font: inherit;
  letter-spacing: inherit;
}
#playMatejong #mobile-nav-main .sc-offer-chip b {
  font-weight: inherit;
}
@media (hover: hover) {
  #playMatejong #mobile-nav-main .sc-offer-chip:hover {
    opacity: 1;
    background: rgba(243, 233, 232, 0.16);
  }
}
#playMatejong #mobile-nav-main .sc-offer-chip:active {
  scale: 0.96;
  background: rgba(243, 233, 232, 0.22);
}
#playMatejong #mobile-nav-main .sc-offer-chip[data-nav-restart] {
  background: color-mix(in srgb, var(--color-green) 24%, var(--mt-felt));
  color: var(--color-green);
}
@media (hover: hover) {
  #playMatejong #mobile-nav-main .sc-offer-chip[data-nav-restart]:hover {
    background: color-mix(in srgb, var(--color-green) 36%, var(--mt-felt));
  }
}
#playMatejong #mobile-nav-main .sc-offer-chip[data-nav-restart]:active {
  background: color-mix(in srgb, var(--color-green) 40%, var(--mt-felt));
}
#playMatejong.mobile-nav #gameOptions h1, #playMatejong.mobile-nav #home {
  visibility: hidden;
}
#playMatejong #mobile-nav-main li[hidden], #playMatejong #mobile-nav-main [hidden] {
  display: none !important;
}
#playMatejong #mobile-nav .link-impressum, #playMatejong #mobile-nav .link-datenschutz {
  display: none;
}
#playMatejong #mobile-nav {
  background: rgba(23, 23, 25, 0.88);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
}
#playMatejong #mobile-nav-main .sc-settings {
  width: min(38em, 100% - 2 * var(--mt-inset, 16px));
  max-width: 100%;
  box-sizing: border-box;
  align-items: stretch;
  gap: 0;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting button,
#playMatejong #mobile-nav-main .sc-settings .sc-setting label {
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
}
#playMatejong #mobile-nav-main .sc-settings .sc-icon {
  display: block !important;
  flex: none;
  width: 1.3em !important;
  height: 1.3em !important;
  padding: 0 !important;
  margin: 0 0.15em 0 0 !important;
  transform: translateY(-0.02em) !important;
  transition: none !important;
  opacity: 0.85 !important;
  fill: currentColor;
  color: var(--mt-fg);
  cursor: inherit;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-toggle button {
  display: flex;
  width: 100%;
  max-width: 100%;
  font-size: 17px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.25;
  padding: 0.9em 0;
  gap: 0.6em;
  align-items: center;
  color: var(--mt-fg);
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-toggle button > span {
  font-weight: 700;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-toggle button .sc-value {
  color: var(--mt-dim);
  font-weight: 300;
  margin-right: auto;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-toggle button::before {
  content: "";
  order: 3;
  flex: none;
  display: inline-block;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  margin-left: 1em;
  background-color: rgba(243, 233, 232, 0.12);
  background-image: radial-gradient(circle, var(--color-light) 8px, transparent 9px);
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: 20px 0;
  transition: background-position 0.18s var(--mt-ease), background-color 0.18s;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-toggle button.is-off::before {
  background-position: 0 0;
  background-color: rgba(243, 233, 232, 0.06);
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-toggle button.is-off .sc-value {
  opacity: 0.7;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-text label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 17px !important;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mt-fg);
  padding: 0.6em 0;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-text label input {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  max-width: 60%;
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: right;
  color: var(--mt-fg);
  background: rgba(243, 233, 232, 0.06);
  border: 0;
  border-radius: calc(var(--mt-radius) * 0.8);
  padding: 0.35em 0.7em;
  outline: 0;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-text label input:focus {
  background: rgba(243, 233, 232, 0.12);
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-text label input::-moz-placeholder {
  color: var(--mt-dim);
  font-weight: 300;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-text label input::placeholder {
  color: var(--mt-dim);
  font-weight: 300;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-range label {
  display: flex;
  flex-wrap: wrap;
  font-size: 17px !important;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mt-fg);
  padding: 0.9em 0;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-range label .sc-value {
  color: var(--mt-dim);
  font-weight: 300;
  margin-left: 0.6em;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-range label input[type=range] {
  max-width: none;
  width: 100%;
  margin-top: 0.7em;
}
#playMatejong #mobile-nav-main .sc-settings .mt-group {
  width: 100%;
  margin: 1.6em 0 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  background: none;
  text-align: left;
}
#playMatejong #mobile-nav-main .sc-settings .mt-group:first-child {
  margin-top: 0.4em;
}
#playMatejong #mobile-nav-main .sc-settings .mt-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#playMatejong #mobile-nav-main .sc-settings .mt-group .mt-eyebrow {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mt-dim);
  margin: 0 0 0.3em;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting {
  text-align: left;
  padding: 0;
  border-top: 2px solid rgba(243, 233, 232, 0.05);
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting:first-child {
  border-top: 0;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-action {
  border-top: 0;
  margin-top: 1.6em;
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-action button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  padding: 0.4em 1em;
  margin: 0;
  border: 0;
  border-radius: calc(var(--mt-radius) * 0.8);
  background: rgba(243, 233, 232, 0.08);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
  color: var(--mt-fg);
  opacity: 1;
  font-family: "ND Kern", futura, sans-serif;
  font-weight: 700;
  font-size: 24px !important;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  transition: scale 0.08s var(--mt-ease), background 0.2s;
}
@media (hover: hover) {
  #playMatejong #mobile-nav-main .sc-settings .sc-setting-action button:hover {
    background: rgba(243, 233, 232, 0.16);
    transform: none;
  }
}
#playMatejong #mobile-nav-main .sc-settings .sc-setting-action button:active {
  scale: 0.96;
  background: rgba(243, 233, 232, 0.22);
  transform: none;
}
#playMatejong .mt-seat.mt-done .mt-area .mt-tile {
  background: var(--color-midlow);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
  filter: none;
}
#playMatejong .mt-seat.mt-done .mt-area .mt-tile .mt-face {
  color: var(--mt-dim);
}
#playMatejong .mt-waits {
  display: flex;
  gap: var(--mt-gap);
  margin-left: calc(var(--mt-tile) * 0.3);
  pointer-events: none;
}
#playMatejong .mt-waits:empty {
  display: none;
}
#playMatejong .mt-waits .mt-tile.mt-tile {
  translate: 0 calc(var(--mt-lift) * -1);
}
#playMatejong .mt-tile.mt-tile.mt-ghost-tile {
  background: var(--color-midlow);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
}
#playMatejong .mt-tile.mt-tile.mt-ghost-tile .mt-face {
  color: var(--mt-dim);
}
#playMatejong #mt-table.mt-preview-s0 .mt-seat[data-seat="0"] :is(.mt-hand, .mt-drawn) .mt-tile.mt-tile.mt-s0,
#playMatejong #mt-table.mt-preview-s1 .mt-seat[data-seat="0"] :is(.mt-hand, .mt-drawn) .mt-tile.mt-tile.mt-s1,
#playMatejong #mt-table.mt-preview-s2 .mt-seat[data-seat="0"] :is(.mt-hand, .mt-drawn) .mt-tile.mt-tile.mt-s2 {
  background: var(--color-midlow);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
}
#playMatejong #mt-table.mt-preview-s0 .mt-seat[data-seat="0"] :is(.mt-hand, .mt-drawn) .mt-tile.mt-tile.mt-s0 .mt-face,
#playMatejong #mt-table.mt-preview-s1 .mt-seat[data-seat="0"] :is(.mt-hand, .mt-drawn) .mt-tile.mt-tile.mt-s1 .mt-face,
#playMatejong #mt-table.mt-preview-s2 .mt-seat[data-seat="0"] :is(.mt-hand, .mt-drawn) .mt-tile.mt-tile.mt-s2 .mt-face {
  color: var(--mt-dim);
}
#playMatejong .mt-seat[data-seat="0"] .mt-row {
  position: relative;
}
#playMatejong .mt-seat[data-seat="0"] .mt-waits {
  position: absolute;
  margin: 0;
  z-index: 2;
  left: var(--mt-waits-x, 0);
  top: var(--mt-waits-y, 0);
  align-items: flex-end;
}
#playMatejong .mt-seat[data-seat="0"] .mt-waits .mt-tile + .mt-tile {
  margin-left: calc(var(--mt-tile) * -0.3);
}
#playMatejong .mt-seat[data-seat="0"] .mt-waits:has(> :nth-child(3)) .mt-tile + .mt-tile {
  margin-left: calc(var(--mt-tile) * -0.4);
}
#playMatejong .mt-seat[data-seat="0"] .mt-waits:has(> :nth-child(5)) .mt-tile + .mt-tile {
  margin-left: calc(var(--mt-tile) * -0.45);
}
#playMatejong .mt-seat[data-seat="0"] .mt-waits .mt-tile.mt-tile {
  box-shadow: -3px 0 5px color-mix(in srgb, var(--mt-felt) 90%, transparent), inset 0 0 0 2px rgba(243, 233, 232, 0.04);
}
#playMatejong .mt-seat[data-seat="0"] .mt-waits {
  transition: opacity 0.32s var(--mt-ease);
}
#playMatejong .mt-seat[data-seat="0"] .mt-drawn:has(.mt-tile) + .mt-waits {
  opacity: 0;
}
@keyframes mt-wait-in {
  from {
    opacity: 0;
    translate: 0 0;
  }
  to {
    opacity: 1;
    translate: 0 calc(var(--mt-lift) * -1);
  }
}
#playMatejong.mt-motion .mt-waits .mt-tile.mt-tile {
  animation: mt-wait-in 0.32s var(--mt-ease) both;
}
#playMatejong.mt-short:not(.mt-narrow) {
  --mt-tile: calc(min(calc(var(--mt-w) * 0.042), calc(var(--mt-h) * 0.042)) * var(--mt-zoom));
}
#playMatejong.mt-short:not(.mt-narrow) .mt-melds {
  flex-wrap: wrap;
  gap: calc(var(--mt-tile) * 0.3);
}
#playMatejong.mt-short.mt-tall:not(.mt-narrow) {
  --mt-tile: calc(min(calc(var(--mt-w) / 17.4), calc(var(--mt-h) / 32)) * var(--mt-zoom));
}
#playMatejong.mt-short.mt-wide:not(.mt-narrow) {
  --mt-tile: calc(min(calc(var(--mt-w) / 32), calc(var(--mt-h) / 17.4)) * var(--mt-zoom));
}
#playMatejong.mt-zoom1 {
  --mt-zoom: 1.2;
}
#playMatejong.mt-zoom2 {
  --mt-zoom: 1.35;
}
#playMatejong .mt-btn:focus-visible, #playMatejong #mobile-nav-main button:focus-visible, #playMatejong #mobile-nav-main a:focus-visible, #playMatejong #mobile-nav-main input:focus-visible {
  outline: 2px solid var(--color-light);
  outline-offset: 3px;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold .mt-row, #playMatejong.mt-land .mt-seat.mt-fold .mt-row {
  max-width: calc(8.6 * var(--mt-tile) + 7 * var(--mt-gap));
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold .mt-hand, #playMatejong.mt-land .mt-seat.mt-fold .mt-hand {
  display: contents;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold .mt-row, #playMatejong.mt-land .mt-seat.mt-fold .mt-row {
  gap: var(--mt-gap);
  flex-wrap: wrap;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold .mt-drawn, #playMatejong.mt-land .mt-seat.mt-fold .mt-drawn {
  order: 1;
  margin-left: calc(var(--mt-tile) * 0.3);
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold .mt-waits, #playMatejong.mt-land .mt-seat.mt-fold .mt-waits {
  order: 1;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold .mt-break, #playMatejong.mt-land .mt-seat.mt-fold .mt-break {
  order: 2;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold .mt-hand .mt-tail, #playMatejong.mt-land .mt-seat.mt-fold .mt-hand .mt-tail {
  order: 3;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold:not([data-seat="0"]) .mt-drawn:empty, #playMatejong.mt-land .mt-seat.mt-fold:not([data-seat="0"]) .mt-drawn:empty {
  display: none;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="1"] .mt-row, #playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="3"] .mt-row, #playMatejong.mt-land .mt-seat.mt-fold[data-seat="1"] .mt-row, #playMatejong.mt-land .mt-seat.mt-fold[data-seat="3"] .mt-row {
  flex-wrap: wrap-reverse;
  gap: var(--mt-gap);
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="1"] .mt-hand .mt-tail, #playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="3"] .mt-hand .mt-tail, #playMatejong.mt-land .mt-seat.mt-fold[data-seat="1"] .mt-hand .mt-tail, #playMatejong.mt-land .mt-seat.mt-fold[data-seat="3"] .mt-hand .mt-tail {
  order: 0;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="1"] .mt-break, #playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="3"] .mt-break, #playMatejong.mt-land .mt-seat.mt-fold[data-seat="1"] .mt-break, #playMatejong.mt-land .mt-seat.mt-fold[data-seat="3"] .mt-break {
  order: 1;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="1"] .mt-hand .mt-tile:not(.mt-tail), #playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="3"] .mt-hand .mt-tile:not(.mt-tail), #playMatejong.mt-land .mt-seat.mt-fold[data-seat="1"] .mt-hand .mt-tile:not(.mt-tail), #playMatejong.mt-land .mt-seat.mt-fold[data-seat="3"] .mt-hand .mt-tile:not(.mt-tail) {
  order: 2;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="1"] .mt-drawn, #playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="3"] .mt-drawn, #playMatejong.mt-land .mt-seat.mt-fold[data-seat="1"] .mt-drawn, #playMatejong.mt-land .mt-seat.mt-fold[data-seat="3"] .mt-drawn {
  order: 3;
}
#playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="1"] .mt-melds, #playMatejong.mt-short:not(.mt-narrow) .mt-seat.mt-fold[data-seat="3"] .mt-melds, #playMatejong.mt-land .mt-seat.mt-fold[data-seat="1"] .mt-melds, #playMatejong.mt-land .mt-seat.mt-fold[data-seat="3"] .mt-melds {
  flex-basis: auto;
  order: 4;
  margin-bottom: calc(var(--mt-tile) * 0.3 - var(--mt-gap));
  margin-left: 0;
}
#playMatejong .mt-lay {
  --mt-scale: 1;
  --mt-turn: 0deg;
  --la: calc(var(--mt-tile) * var(--mt-scale));
  --lb: calc(var(--mt-tile-h) * var(--mt-scale));
  --ls: calc(var(--la) + var(--lb) + var(--mt-gap));
  position: absolute;
  display: flex;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform: rotate(var(--mt-turn));
}
#playMatejong .mt-lay[data-seat="0"] {
  left: calc(50% - var(--ls) / 2);
  top: calc(50% + var(--ls) / 2 - var(--lb));
}
#playMatejong .mt-lay[data-seat="1"] {
  --mt-turn: -90deg;
  left: calc(50% + var(--ls) / 2 - var(--lb) / 2 - var(--la) / 2);
  top: calc(50% + var(--ls) / 2 - var(--la) / 2 - var(--lb) / 2);
}
#playMatejong .mt-lay[data-seat="2"] {
  --mt-turn: 180deg;
  left: calc(50% + var(--ls) / 2 - var(--la));
  top: calc(50% - var(--ls) / 2);
}
#playMatejong .mt-lay[data-seat="3"] {
  --mt-turn: 90deg;
  left: calc(50% - var(--ls) / 2 + var(--lb) / 2 - var(--la) / 2);
  top: calc(50% - var(--ls) / 2 + var(--la) / 2 - var(--lb) / 2);
}
#playMatejong .mt-glow {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.45s var(--mt-ease), transform 0.45s var(--mt-ease);
  background: radial-gradient(ellipse 50% 100% at var(--mt-glow-x) var(--mt-glow-y), rgba(243, 233, 232, 0.04) 0%, rgba(243, 233, 232, 0.0392) 7%, rgba(243, 233, 232, 0.0367) 14%, rgba(243, 233, 232, 0.0325) 21%, rgba(243, 233, 232, 0.0267) 28%, rgba(243, 233, 232, 0.02) 35%, rgba(243, 233, 232, 0.0133) 42%, rgba(243, 233, 232, 0.0075) 49%, rgba(243, 233, 232, 0.0033) 56%, rgba(243, 233, 232, 0.0008) 63%, rgba(243, 233, 232, 0) 70%);
}
#playMatejong .mt-glow.mt-on {
  opacity: 1;
  transform: scale(1);
  transition-duration: 0.5s;
}
#playMatejong .mt-glow[data-seat="0"] {
  left: 5%;
  right: 5%;
  bottom: 0;
  height: 28%;
  --mt-glow-x: 50%;
  --mt-glow-y: 100%;
  transform-origin: 50% 100%;
}
#playMatejong .mt-glow[data-seat="2"] {
  left: 5%;
  right: 5%;
  top: 0;
  height: 28%;
  --mt-glow-x: 50%;
  --mt-glow-y: 0%;
  transform-origin: 50% 0%;
}
#playMatejong .mt-glow[data-seat="1"] {
  top: 5%;
  bottom: 5%;
  right: 0;
  width: 28%;
  --mt-glow-x: 100%;
  --mt-glow-y: 50%;
  transform-origin: 100% 50%;
}
#playMatejong .mt-glow[data-seat="3"] {
  top: 5%;
  bottom: 5%;
  left: 0;
  width: 28%;
  --mt-glow-x: 0%;
  --mt-glow-y: 50%;
  transform-origin: 0% 50%;
}
#playMatejong .mt-round {
  display: none;
}
#playMatejong .mt-label {
  position: absolute;
  display: flex;
  align-items: center;
}
#playMatejong .mt-label.mt-ai .mt-piece, #playMatejong .mt-label.mt-ai .mt-name {
  opacity: 0.55;
}
#playMatejong .mt-label.mt-away .mt-piece, #playMatejong .mt-label.mt-away .mt-name {
  opacity: 0.35;
}
#playMatejong .mt-label {
  gap: 0.3em;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mt-dim);
  font-feature-settings: "tnum";
  white-space: nowrap;
  transition: color 0.3s var(--mt-ease);
  height: var(--mt-band);
}
#playMatejong .mt-label[data-seat="0"] {
  left: 1.4%;
  bottom: var(--mt-band-in);
}
#playMatejong .mt-label[data-seat="1"] {
  right: 1.4%;
  bottom: var(--mt-band-in);
  flex-direction: row-reverse;
}
#playMatejong .mt-label[data-seat="2"] {
  right: 1.4%;
  top: var(--mt-band-in);
  flex-direction: row-reverse;
}
#playMatejong .mt-label[data-seat="3"] {
  left: 1.4%;
  top: var(--mt-band-in);
}
#playMatejong .mt-label .mt-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: stretch;
  gap: 10px;
}
#playMatejong .mt-label:where([data-seat="2"], [data-seat="3"]) .mt-lines {
  flex-direction: column-reverse;
}
#playMatejong .mt-label[data-seat="1"] .mt-lines, #playMatejong .mt-label[data-seat="2"] .mt-lines {
  align-items: flex-end;
}
#playMatejong .mt-label .mt-tags {
  font-size: 11px;
  line-height: 0.9;
}
#playMatejong .mt-label .mt-tags .mt-void {
  font-size: 40px;
  line-height: 0.475;
  top: 0.078em;
}
#playMatejong .mt-label:where([data-seat="0"], [data-seat="1"]) .mt-tags .mt-void {
  top: 0.108em;
}
#playMatejong .mt-label .mt-line {
  display: none;
  align-items: center;
  gap: 0.45em;
}
#playMatejong .mt-label .mt-line:has(> :not(:empty)) {
  display: flex;
}
#playMatejong .mt-label[data-seat="1"] .mt-line, #playMatejong .mt-label[data-seat="2"] .mt-line {
  flex-direction: row-reverse;
}
#playMatejong .mt-label .mt-name {
  color: var(--mt-dim);
  transition: color 0.3s var(--mt-ease), opacity 0.3s var(--mt-ease);
}
#playMatejong .mt-label.mt-current .mt-name {
  color: var(--mt-fg);
  opacity: 1;
  font-weight: 700;
}
#playMatejong .mt-label .mt-piece {
  display: none;
}
#playMatejong .mt-label .mt-piece {
  font-family: "Pieces";
  font-weight: 120;
  font-size: 48px;
  line-height: 1;
  color: var(--mt-fg);
  position: relative;
  top: 0.07em;
  text-transform: none;
}
#playMatejong .mt-label .mt-score {
  font-weight: 300;
}
#playMatejong .mt-label .mt-score, #playMatejong .mt-label .mt-delta {
  display: none;
}
#playMatejong .mt-label .mt-place {
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--mt-dim);
}
#playMatejong .mt-label .mt-place:empty {
  display: none;
}
#playMatejong .mt-label .mt-delta {
  font-weight: 300;
}
#playMatejong .mt-label .mt-delta.up {
  color: var(--color-green);
}
#playMatejong .mt-label .mt-delta.down {
  color: var(--mt-red);
}
#playMatejong .mt-label .mt-delta:empty {
  display: none;
}
#playMatejong .mt-label.mt-finished {
  opacity: 0.55;
}
#playMatejong .mt-label.mt-finished .mt-name, #playMatejong .mt-label.mt-finished .mt-piece, #playMatejong .mt-label.mt-finished .mt-void, #playMatejong .mt-label.mt-finished .mt-score, #playMatejong .mt-label.mt-finished .mt-delta, #playMatejong .mt-label.mt-finished .mt-delta.up, #playMatejong .mt-label.mt-finished .mt-delta.down {
  color: var(--mt-dim);
}
#playMatejong .mt-label-rail {
  display: none;
  position: static;
}
#playMatejong #clock-container, #playMatejong #score-container {
  align-items: center;
}
#playMatejong #clock-container {
  display: none;
}
#playMatejong .mt-void {
  font-family: "Pieces";
  font-style: normal;
  font-weight: 200;
  font-size: 18px;
  line-height: 1;
  color: var(--mt-red);
}
#playMatejong .mt-void.mt-s0 {
  color: var(--mt-suit-0);
}
#playMatejong .mt-void.mt-s1 {
  color: var(--mt-suit-1);
}
#playMatejong .mt-void.mt-s2 {
  color: var(--mt-suit-2);
}
#playMatejong .mt-void {
  text-transform: none;
  position: relative;
  top: 0.08em;
}
#playMatejong .mt-void:empty {
  display: none;
}
#playMatejong .mt-void {
  display: inline-block;
  transform-origin: 50% 60%;
  animation: mt-grow 300ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes mt-grow {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
#playMatejong .mt-title {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  font-family: "ND Kern", futura, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, var(--mt-tile) * 0.5, 32px);
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mt-fg);
  opacity: 0;
  transition: opacity 0.5s var(--mt-ease);
}
#playMatejong .mt-title b {
  display: inline-block;
  font-weight: inherit;
}
#playMatejong .mt-title i {
  display: inline-block;
  width: 0.5em;
}
#playMatejong .mt-title.mt-on {
  opacity: 1;
  transition: none;
}
#playMatejong .mt-title.mt-prompt {
  font-size: clamp(16px, var(--mt-tile) * 0.55, 30px);
  letter-spacing: 0.16em;
  line-height: 1.55;
  white-space: normal;
  text-align: center;
  max-width: min(60%, 22em);
  width: -moz-max-content;
  width: max-content;
}
#playMatejong .mt-title.mt-prompt b {
  white-space: nowrap;
}
#playMatejong.mt-motion .mt-title b {
  animation: mt-title-in 0.5s var(--mt-ease) both;
  animation-delay: calc(var(--i) * 45ms);
}
#playMatejong.mt-motion .mt-title.mt-prompt b {
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes mt-title-in {
  from {
    opacity: 0;
    translate: 0 0.35em;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
#playMatejong #gameOptions h1 {
  min-width: 12em;
  text-align: center;
}
#playMatejong #gameOptions h1 #mt-hint {
  display: inline-block;
  color: var(--mt-fg);
  letter-spacing: 0.1em;
  transition: opacity 0.25s var(--mt-ease);
}
#playMatejong #gameOptions h1 #mt-hint:empty {
  opacity: 0;
}
#playMatejong #gameOptions h1 .mt-wait {
  font-family: "Pieces";
  font-style: normal;
  font-weight: 200;
  text-transform: none;
  letter-spacing: 0;
  margin-right: 0.15em;
}
#playMatejong #gameOptions h1 .mt-wait.mt-s0 {
  color: var(--mt-suit-0);
}
#playMatejong #gameOptions h1 .mt-wait.mt-s1 {
  color: var(--mt-suit-1);
}
#playMatejong #gameOptions h1 .mt-wait.mt-s2 {
  color: var(--mt-suit-2);
}
#playMatejong #gameOptions h1 #mt-status {
  display: inline-block;
  margin-left: 1.2em;
  color: var(--mt-dim);
  letter-spacing: 0.1em;
  font-feature-settings: "tnum";
}
#playMatejong #gameOptions h1 #mt-status:empty {
  display: none;
}
#playMatejong .mt-clock {
  color: var(--mt-fg);
  font-weight: 700;
  margin-right: 0.8em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 3ch;
  text-align: right;
}
#playMatejong .mt-clock i {
  font-style: normal;
  text-transform: none;
  font-weight: 500;
  opacity: 0.7;
}
#playMatejong .mt-clock.mt-bank {
  color: var(--mt-dim);
}
#playMatejong .mt-clock:empty {
  display: none;
}
#playMatejong .mt-clock {
  transform-origin: 0 60%;
  animation: mt-grow 300ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
#playMatejong .mt-label .mt-clock {
  display: none;
}
#playMatejong #score-container {
  justify-content: center;
  padding: 12px 0;
}
#playMatejong #mt-actions {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: calc(100% - var(--mt-rack-top, 60%) + var(--mt-gap) * 2 + var(--mt-tile) * 0.35);
  transform: translate(-50%, 0);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: -moz-max-content;
  width: max-content;
}
#playMatejong #mt-actions > .mt-btn {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}
#playMatejong #mt-actions .mt-btn:not(.mt-suited) {
  min-height: max(44px, var(--mt-tile) * 1.3);
  border-radius: calc(var(--mt-radius) * 0.8);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 0 calc(var(--mt-tile) * 1.3 * 0.35);
  font-family: "ND Kern", futura, sans-serif;
  font-weight: 700;
  font-size: calc(var(--mt-tile) * 1.3 * 0.56 * 0.7);
  letter-spacing: 0.06em;
  gap: 0.35em;
}
#playMatejong #mt-actions .mt-btn:not(.mt-suited) .mt-icon {
  font-size: 0.8em;
  font-weight: 400;
}
#playMatejong #mt-actions .mt-btn.mt-primary:not(.mt-suited) {
  background: var(--mt-primary-bg);
  color: var(--mt-primary-fg);
}
@media (hover: hover) {
  #playMatejong #mt-actions .mt-btn.mt-primary:not(.mt-suited):hover {
    background: var(--mt-primary-bg-hover);
  }
}
#playMatejong #mt-actions .mt-btn.mt-primary.mt-muted:not(.mt-suited) {
  background: color-mix(in srgb, var(--mt-fg) 2.5%, var(--mt-felt));
  color: rgba(243, 233, 232, 0.16);
}
#playMatejong #mt-actions .mt-btn.mt-tint {
  background: color-mix(in srgb, var(--mt-btn-suit) 22%, var(--mt-felt));
  color: var(--mt-btn-suit);
}
@media (hover: hover) {
  #playMatejong #mt-actions .mt-btn.mt-tint:hover {
    background: color-mix(in srgb, var(--mt-btn-suit) 36%, var(--mt-felt));
  }
}
#playMatejong #mt-actions .mt-btn.mt-suited {
  padding: 0;
  min-height: 0;
}
#playMatejong #mt-actions::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--mt-radius) * 0.8);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--mt-felt) 85%, transparent), 0 3px 8px color-mix(in srgb, var(--mt-felt) 75%, transparent);
  pointer-events: none;
}
#playMatejong #mt-actions {
  flex-wrap: nowrap;
  gap: 12px;
  width: -moz-max-content;
  width: max-content;
  max-width: 60%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
}
#playMatejong #mt-actions:empty {
  display: none;
}
#playMatejong .mt-alt {
  display: flex;
  gap: 0.6em;
  width: 100%;
  justify-content: center;
}
#playMatejong .mt-alt .mt-btn {
  flex: 1 1 0;
}
@keyframes mt-pop {
  from {
    opacity: 0;
    transform: translateY(-28px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mt-shrink {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes mt-stamp {
  from {
    opacity: 0;
    transform: scale(1.14) translateY(-0.25em);
  }
  55% {
    opacity: 1;
    transform: scale(0.985) translateY(0.04em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mt-swing {
  from {
    opacity: 0;
    transform: scale(1.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#playMatejong.mt-motion #mt-actions .mt-btn {
  animation: mt-pop 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#playMatejong.mt-motion #mt-actions .mt-btn.mt-out {
  pointer-events: none;
  animation: mt-shrink 0.2s var(--mt-ease) forwards;
  animation-delay: 0ms !important;
}
#playMatejong:not(.mt-motion) .mt-btn.mt-out {
  display: none;
}
@keyframes mt-urge {
  0%, 100% {
    transform: none;
  }
  35% {
    transform: scale(1.07);
  }
  70% {
    transform: scale(0.99);
  }
}
#playMatejong.mt-motion #mt-actions.mt-urge .mt-btn {
  animation: mt-urge 0.6s var(--mt-ease) both;
  animation-delay: 0ms !important;
}
#playMatejong:not(.mt-motion) #mt-actions.mt-urge .mt-btn {
  transform: translateY(-2px);
}
#playMatejong .mt-btn {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mt-fg);
  line-height: 26px;
  padding: 0.55em 1.6em;
  border: 0;
  border-radius: 999px;
  background: rgba(243, 233, 232, 0.08);
  font-size: 14px;
  font-weight: 500;
  min-height: 44px;
}
@media (hover: hover) {
  #playMatejong .mt-btn:hover {
    background: rgba(243, 233, 232, 0.16);
    border: 0;
  }
}
#playMatejong .mt-btn:focus {
  box-shadow: 0 0 0 2px rgba(243, 233, 232, 0.4);
}
#playMatejong .mt-btn.mt-primary {
  background: rgba(243, 233, 232, 0.2);
}
@media (hover: hover) {
  #playMatejong .mt-btn.mt-primary:hover {
    background: rgba(243, 233, 232, 0.28);
  }
}
#playMatejong .mt-btn.mt-quiet {
  opacity: 0.6;
}
#playMatejong .mt-btn.mt-quiet[href] {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#playMatejong .mt-btn.mt-s0 {
  --mt-btn-suit: var(--mt-suit-0);
}
#playMatejong .mt-btn.mt-s1 {
  --mt-btn-suit: var(--mt-suit-1);
}
#playMatejong .mt-btn.mt-s2 {
  --mt-btn-suit: var(--mt-suit-2);
}
#playMatejong .mt-btn.mt-muted {
  --mt-btn-suit: rgba(243, 233, 232, 0.16);
  pointer-events: none;
}
#playMatejong .mt-btn.mt-muted .mt-tf {
  background: color-mix(in srgb, var(--mt-fg) 2.5%, var(--mt-felt));
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.02);
}
#playMatejong .mt-btn.mt-muted:not(.mt-suited) {
  background: color-mix(in srgb, var(--mt-fg) 2.5%, var(--mt-felt));
  color: rgba(243, 233, 232, 0.16);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.02);
}
#playMatejong .mt-btn.mt-suited {
  --mt-btn-tile: max(44px, calc(var(--mt-tile) * 1.3));
  background: none;
  box-shadow: none;
  border-radius: calc(var(--mt-radius) * 0.8);
  overflow: visible;
  padding: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  color: var(--mt-btn-suit);
  letter-spacing: 0;
}
#playMatejong .mt-btn.mt-suited .mt-tf {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  justify-content: center;
  align-content: center;
  align-items: baseline;
  padding-top: calc(var(--mt-btn-tile) * 0.08);
  box-sizing: border-box;
  -moz-column-gap: calc(var(--mt-btn-tile) * 0.06);
       column-gap: calc(var(--mt-btn-tile) * 0.06);
  width: calc(var(--mt-btn-tile) * 1.42);
  height: var(--mt-btn-tile);
  min-height: 44px;
  border-radius: calc(var(--mt-radius) * 0.8);
  background: color-mix(in srgb, var(--mt-btn-suit) 22%, var(--mt-felt));
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
}
#playMatejong .mt-btn.mt-suited .mt-tf .mt-piece {
  font-size: calc(var(--mt-btn-tile) * 0.72);
}
#playMatejong .mt-btn.mt-suited .mt-tf .mt-piece.mt-blank {
  color: transparent;
}
#playMatejong .mt-btn.mt-suited .mt-tf:has(.mt-x) {
  padding-right: calc(var(--mt-btn-tile) * 0.12);
}
#playMatejong .mt-btn.mt-suited .mt-tf span:not(.mt-piece) {
  font-family: "ND Kern", futura, sans-serif;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-size: calc(var(--mt-btn-tile) * 0.56);
  transform: translateY(-0.08em);
}
#playMatejong .mt-btn.mt-suited .mt-tf .mt-x {
  font-weight: 400;
  font-size: calc(var(--mt-btn-tile) * 0.5);
}
#playMatejong .mt-btn.mt-suited .mt-tf .mt-arrow {
  font-weight: 400;
  font-size: calc(var(--mt-btn-tile) * 0.5);
  letter-spacing: 0;
  opacity: 0.8;
}
#playMatejong .mt-btn.mt-suited .mt-tf.mt-wide {
  width: auto;
  grid-template-columns: none;
  grid-auto-flow: column;
  padding-left: calc(var(--mt-btn-tile) * 0.35);
  padding-right: calc(var(--mt-btn-tile) * 0.3);
  -moz-column-gap: calc(var(--mt-btn-tile) * 0.14);
       column-gap: calc(var(--mt-btn-tile) * 0.14);
}
#playMatejong .mt-btn.mt-suited .mt-tf.mt-wide span:not(.mt-piece) {
  letter-spacing: 0.04em;
}
@media (hover: hover) {
  #playMatejong .mt-btn.mt-suited:hover {
    background: none;
  }
  #playMatejong .mt-btn.mt-suited:hover .mt-tf {
    background: color-mix(in srgb, var(--mt-btn-suit) 36%, var(--mt-felt));
  }
}
#playMatejong .mt-btn.mt-suited:focus {
  box-shadow: none;
}
#playMatejong .mt-btn.mt-suited:focus .mt-tf {
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04), 0 0 0 2px rgba(243, 233, 232, 0.4);
}
#playMatejong .mt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
#playMatejong .mt-btn .mt-piece {
  font-family: "Pieces";
  font-weight: 160;
  font-size: 20px;
  line-height: 1;
  text-transform: none;
}
#playMatejong .mt-btn {
  align-items: baseline;
  align-content: center;
}
#playMatejong .mt-btn:not(:has(.mt-piece)) {
  align-items: center;
}
#playMatejong .mt-btn.mt-big {
  padding: 0.45em 1.2em;
  font-size: 16px;
}
#playMatejong .mt-btn.mt-big .mt-piece {
  font-size: 34px;
}
#playMatejong #mt-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(38em, 92%);
  max-height: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 1.2em;
  --mt-pad-y: 2.6em;
  --mt-pad-x: 2.8em;
  padding: var(--mt-pad-y) var(--mt-pad-x) 2.4em;
  box-sizing: border-box;
  border-radius: calc(var(--mt-radius) * 3);
  background: rgba(23, 23, 25, 0.88);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  box-shadow: none;
  color: var(--mt-fg);
  text-align: center;
  z-index: 20;
  overflow: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  pointer-events: none;
  transition: opacity 0.3s var(--mt-ease), transform 0.3s var(--mt-ease), box-shadow 0.28s var(--mt-ease);
}
#playMatejong #mt-banner.mt-open {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--mt-felt) 62%, transparent);
}
#playMatejong #mt-banner .mt-btn.mt-primary {
  margin-top: 0;
}
#playMatejong #mt-banner .mt-alt {
  gap: 12px;
  margin-top: calc(12px - 1.2em);
}
#playMatejong #mt-banner .mt-alt .mt-btn {
  margin-top: 0;
  white-space: nowrap;
  padding-left: 0.6em;
  padding-right: 0.6em;
}
#playMatejong.mt-motion #mt-banner.mt-staged .mt-result {
  opacity: 0.28;
  filter: grayscale(1);
  transition: opacity 420ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#playMatejong.mt-motion #mt-banner.mt-staged .mt-result.mt-in {
  opacity: 1;
  filter: none;
  animation: none;
}
#playMatejong.mt-motion #mt-banner.mt-staged .mt-result .mt-score .mt-num + .mt-num {
  opacity: 0;
}
#playMatejong.mt-motion #mt-banner.mt-staged .mt-result .mt-score .mt-num + .mt-num.mt-in {
  animation: mt-swing 300ms cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}

#playMatejong #mt-banner h2 {
  font-size: clamp(26px, 3.2vmin, 34px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0;
}
#playMatejong #mt-banner .mt-tabs {
  display: flex;
  flex: 0 0 auto;
  width: calc(100% + 2 * var(--mt-pad-x));
  margin: calc(-1 * var(--mt-pad-y)) calc(-1 * var(--mt-pad-x)) 0;
  box-shadow: inset 0 -2px 0 rgba(243, 233, 232, 0.05);
}
#playMatejong #mt-banner .mt-tabs .mt-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 60px;
  margin: 0;
  padding: 0 0.5em;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "ND Kern", futura, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mt-dim);
}
#playMatejong #mt-banner .mt-tabs .mt-tab:focus-visible {
  outline: 0;
  background: rgba(243, 233, 232, 0.06);
}
#playMatejong #mt-banner .mt-tabs .mt-tab.mt-on {
  color: var(--mt-fg);
  box-shadow: inset 0 -2px 0 var(--mt-fg);
}
@media (hover: hover) {
  #playMatejong #mt-banner .mt-tabs .mt-tab:hover {
    color: var(--mt-fg);
  }
}
#playMatejong #mt-banner .mt-tabs + .mt-sub {
  margin-top: 0;
}
#playMatejong #mt-banner .mt-sub {
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--mt-dim);
}
#playMatejong #mt-banner h2 + .mt-sub {
  margin-top: -0.7em;
}
#playMatejong #mt-banner .mt-btn {
  width: 100%;
  min-height: 60px;
  font-size: 24px;
  padding: 0.4em 1em;
  justify-content: center;
  text-align: center;
  margin-top: 0.4em;
}
#playMatejong #mt-banner .mt-win {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  width: 100%;
}
#playMatejong #mt-banner .mt-win .mt-win-line {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#playMatejong #mt-banner .mt-win .mt-win-line b {
  color: var(--mt-fg);
}
#playMatejong #mt-banner .mt-win .mt-win-line span {
  color: var(--mt-dim);
}
#playMatejong #mt-banner .mt-table-scores {
  margin-top: 0.8em;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.3em 1.5em;
  font-size: 13px;
  font-feature-settings: "tnum";
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#playMatejong #mt-banner .mt-table-scores .mt-name {
  text-align: left;
}
#playMatejong #mt-banner .mt-table-scores .mt-num {
  text-align: right;
  font-weight: 300;
}
#playMatejong #mt-banner .mt-table-scores .up {
  color: var(--color-green);
}
#playMatejong #mt-banner .mt-table-scores .down {
  color: var(--mt-red);
}
#playMatejong #mt-banner .mt-table-scores .mt-me {
  color: var(--mt-fg);
  font-weight: 700;
}
#playMatejong #mt-banner .mt-results {
  width: 100%;
  margin-top: 0.4em;
  font-size: 17px;
  font-feature-settings: "tnum";
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
}
#playMatejong #mt-banner .mt-results .mt-result {
  --mt-void-h: 67px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "void name how" "void score how" "void status how";
  -moz-column-gap: 1em;
       column-gap: 1em;
  row-gap: 0.1em;
  line-height: 1.25;
  align-items: baseline;
  padding: 1.1em 0;
  border-top: 2px solid rgba(243, 233, 232, 0.05);
}
#playMatejong #mt-banner .mt-results .mt-result:first-child {
  border-top: 0;
}
#playMatejong #mt-banner .mt-results .mt-void {
  grid-area: void;
  align-self: center;
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--mt-void-h);
  width: calc(var(--mt-void-h) / 1.42);
  font-size: calc(var(--mt-void-h) / 1.42 * 0.95);
  line-height: 0;
  top: 0;
  margin: 0;
  padding: 0.1em 0 0 0.06em;
  box-sizing: border-box;
  border-radius: var(--mt-radius);
  background: var(--color-midlow);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
}
#playMatejong #mt-banner .mt-results .mt-void.mt-s0 {
  background: color-mix(in srgb, var(--mt-suit-0) 22%, var(--mt-felt));
}
#playMatejong #mt-banner .mt-results .mt-void.mt-s1 {
  background: color-mix(in srgb, var(--mt-suit-1) 22%, var(--mt-felt));
}
#playMatejong #mt-banner .mt-results .mt-void.mt-s2 {
  background: color-mix(in srgb, var(--mt-suit-2) 22%, var(--mt-felt));
}
#playMatejong #mt-banner .mt-results .mt-name {
  grid-area: name;
  color: var(--mt-fg);
  font-weight: 700;
}
#playMatejong #mt-banner .mt-results .mt-score {
  grid-area: score;
  display: flex;
  gap: 0.6em;
}
#playMatejong #mt-banner .mt-results .mt-num {
  font-weight: 300;
}
#playMatejong #mt-banner .mt-results .mt-status {
  grid-area: status;
  color: var(--mt-dim);
  font-weight: 300;
}
#playMatejong #mt-banner .mt-results .mt-status:empty {
  display: none;
}
#playMatejong #mt-banner .mt-results .mt-how {
  grid-area: how;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
  color: var(--mt-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
}
#playMatejong #mt-banner .mt-results .up {
  color: var(--color-green);
}
#playMatejong #mt-banner .mt-results .down {
  color: var(--mt-red);
}
#playMatejong #mt-banner .mt-lobby {
  width: 100%;
  margin-top: 0.4em;
  font-size: 17px;
  font-feature-settings: "tnum";
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "name meta acts";
  -moz-column-gap: 1em;
       column-gap: 1em;
  align-items: center;
  padding: 0.8em 0;
  border-top: 2px solid rgba(243, 233, 232, 0.05);
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-row:first-child {
  border-top: 0;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-row.mt-full .mt-name {
  color: var(--mt-dim);
}
#playMatejong #mt-banner .mt-lobby .mt-name {
  grid-area: name;
  color: var(--mt-fg);
  font-weight: 700;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-meta {
  grid-area: meta;
  justify-self: end;
  text-align: right;
  color: var(--mt-dim);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.06em;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-acts {
  grid-area: acts;
  display: flex;
  gap: 0.5em;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-go {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 2px solid rgba(243, 233, 232, 0.05);
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  border-radius: 0;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-go:first-child {
  border-top: 0;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-go:focus-visible {
  outline: 0;
  background: rgba(243, 233, 232, 0.06);
}
@media (hover: hover) {
  #playMatejong #mt-banner .mt-lobby .mt-lobby-go:hover .mt-chevron {
    color: var(--mt-fg);
    transform: translateX(3px);
  }
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-go:active .mt-chevron {
  transform: translateX(5px);
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-go .mt-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
  line-height: 1.1;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-sub {
  display: block;
  color: var(--mt-dim);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.08em;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-row:not(:has(.mt-lobby-acts, .mt-chevron)) {
  grid-template-columns: auto 1fr;
  grid-template-areas: "name meta";
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-row:not(:has(.mt-lobby-acts, .mt-chevron)) .mt-lobby-meta {
  margin-right: -0.06em;
}
#playMatejong #mt-banner .mt-lobby .mt-open-seat .mt-name {
  color: var(--mt-dim);
  opacity: 0.55;
  font-weight: 300;
}
#playMatejong #mt-banner .mt-lobby .mt-check {
  width: 1.3em;
  height: 1.3em;
  color: var(--mt-fg);
  vertical-align: middle;
}
#playMatejong #mt-banner .mt-lobby .mt-chevron {
  grid-area: acts;
  width: 1.3em;
  height: 1.3em;
  color: var(--mt-dim);
  transition: transform 0.2s var(--mt-ease), color 0.2s var(--mt-ease);
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-empty {
  color: var(--mt-dim);
  font-weight: 300;
  padding: 1em 0;
  margin: 0;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-name, #playMatejong #mt-banner .mt-lobby .mt-lobby-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.6em 0;
  border-bottom: 2px solid rgba(243, 233, 232, 0.05);
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-name span, #playMatejong #mt-banner .mt-lobby .mt-lobby-link span {
  color: var(--mt-dim);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-name input, #playMatejong #mt-banner .mt-lobby .mt-lobby-link input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--mt-fg);
  background: rgba(243, 233, 232, 0.05);
  border: 0;
  border-radius: calc(var(--mt-radius) * 0.8);
  padding: 0.5em 0.8em;
  outline: 0;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-name input:focus, #playMatejong #mt-banner .mt-lobby .mt-lobby-link input:focus {
  background: rgba(243, 233, 232, 0.1);
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-name input[readonly], #playMatejong #mt-banner .mt-lobby .mt-lobby-link input[readonly] {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 13px;
}
#playMatejong #mt-banner .mt-lobby .mt-btn.mt-small {
  width: auto;
  min-height: 40px;
  height: 40px;
  font-size: 15px;
  padding: 0 1em;
  margin: 0;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-clock {
  display: block;
  padding: 12px 0 0;
  margin-bottom: calc(12px - 1.2em);
  border-top: 0;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-clock .mt-lobby-acts {
  display: flex;
  gap: 12px;
  width: 100%;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-clock .mt-btn {
  flex: 1 1 0;
  min-height: 44px;
  height: 44px;
  white-space: nowrap;
  padding: 0 0.5em;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-clock .mt-lobby-meta {
  display: block;
  text-align: center;
  margin-top: 0.6em;
}
#playMatejong #mt-banner .mt-lobby .mt-lobby-clock:not(:has(.mt-lobby-meta)) {
  margin-bottom: 0;
  padding-bottom: 12px;
}
#playMatejong #mt-banner .mt-btn {
  margin-top: 0.8em;
  min-height: 52px;
  border-radius: calc(var(--mt-radius) * 0.8);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04);
  padding: 0 1.4em;
  font-family: "ND Kern", futura, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
#playMatejong #mt-banner .mt-btn.mt-primary {
  background: var(--mt-primary-bg-hover);
  color: var(--mt-primary-fg);
  min-height: 80px;
  font-size: 30px;
  letter-spacing: 0.1em;
}
#playMatejong #mt-banner .mt-btn.mt-primary:active {
  background: var(--mt-primary-bg-active);
}
@media (hover: hover) {
  #playMatejong #mt-banner .mt-btn.mt-primary:hover {
    background: var(--mt-primary-bg-active);
  }
}
#playMatejong #mt-banner .mt-btn.mt-quiet {
  opacity: 1;
}
#playMatejong #mt-banner .mt-btn.mt-small {
  white-space: nowrap;
}
#playMatejong #mt-banner .mt-btn.mt-on {
  background: rgba(243, 233, 232, 0.22);
  color: var(--mt-fg);
}
#playMatejong #mt-banner.mt-page, #playMatejong #mt-banner.mt-page.mt-open {
  box-shadow: none;
  gap: 0.8em;
  padding-bottom: var(--mt-pad-y);
}
#playMatejong #mt-banner.mt-page > .mt-lobby:not(.mt-sheet-out), #playMatejong #mt-banner .mt-sheet-out.mt-page > .mt-lobby {
  margin-top: 0;
}
#playMatejong #mt-banner.mt-page > :not(.mt-sheet-out) .mt-lobby-row, #playMatejong #mt-banner .mt-sheet-out.mt-page .mt-lobby-row {
  padding: 0.6em 0;
}
#playMatejong #mt-banner.mt-page > :not(.mt-sheet-out) .mt-lobby-list > .mt-lobby-row:first-child, #playMatejong #mt-banner .mt-sheet-out.mt-page .mt-lobby-list > .mt-lobby-row:first-child {
  padding-top: 0;
}
#playMatejong #mt-banner.mt-page > .mt-tabs:not(.mt-sheet-out) + .mt-sub, #playMatejong #mt-banner.mt-page > :not(.mt-sheet-out) .mt-tabs + .mt-sub, #playMatejong #mt-banner .mt-sheet-out.mt-page .mt-tabs + .mt-sub {
  margin-top: 0;
}
#playMatejong #mt-banner .mt-alt .mt-btn {
  height: 52px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
#playMatejong #mt-banner .mt-sheet-out {
  position: absolute;
  left: var(--mt-pad-x);
  right: var(--mt-pad-x);
  top: var(--mt-pad-y);
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: inherit;
  pointer-events: none;
  z-index: 1;
}
#playMatejong .mt-tile.mt-turning {
  background: var(--color-midlow) !important;
  box-shadow: inset 0 0 0 2px rgba(243, 233, 232, 0.04) !important;
}
#playMatejong .mt-tile.mt-turning .mt-face {
  visibility: hidden;
}
#playMatejong .mt-seat.mt-flying {
  z-index: 1;
}
#playMatejong .mt-seat:not([data-seat="0"]) .mt-area {
  pointer-events: none;
}
@keyframes mt-land {
  from {
    transform: translateY(-20%) scale(1.06);
    opacity: 0.4;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes mt-deal {
  from {
    opacity: 0;
    transform: translateY(20%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#playMatejong:not(.mt-motion) .mt-pond .mt-tile.mt-last {
  animation: mt-land 0.22s var(--mt-ease);
}
@media (prefers-reduced-motion: reduce) {
  #playMatejong .mt-tile, #playMatejong .mt-pond .mt-tile.mt-last, #playMatejong .mt-void, #playMatejong .mt-clock, #playMatejong .mt-title, #playMatejong .mt-title b {
    animation: none;
    transition: none;
  }
  #playMatejong #mt-actions.mt-urge .mt-btn, #playMatejong #mt-actions .mt-btn {
    animation: none;
  }
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat {
  --mt-turn: 0deg;
  width: var(--mt-w);
  height: calc(var(--mt-h) - 2 * var(--mt-band));
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-tile:not(.mt-back) .mt-face,
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="2"] .mt-tile:not(.mt-back) .mt-face,
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="3"] .mt-tile:not(.mt-back) .mt-face {
  transform: none;
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="3"] .mt-area {
  top: 1.4%;
  bottom: auto;
  left: 1.4%;
  right: 50%;
  flex-direction: column-reverse;
  justify-content: flex-end;
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="2"] .mt-area {
  top: 1.4%;
  bottom: auto;
  left: 50%;
  right: 1.4%;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: flex-end;
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-area {
  left: 50%;
  right: 1.4%;
  align-items: flex-end;
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="0"] .mt-area {
  right: 50%;
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-row, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-pond, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-melds, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="2"] .mt-row, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="2"] .mt-pond, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="2"] .mt-melds {
  justify-content: flex-end;
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-row, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="3"] .mt-row {
  flex-wrap: wrap;
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-hand .mt-tail, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="3"] .mt-hand .mt-tail {
  order: 3;
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-break, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="3"] .mt-break {
  order: 2;
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-hand .mt-tile:not(.mt-tail), #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="3"] .mt-hand .mt-tile:not(.mt-tail) {
  order: 0;
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-drawn, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="3"] .mt-drawn {
  order: 1;
  margin-left: calc(var(--mt-tile) * 0.3);
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="1"] .mt-melds, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="3"] .mt-melds {
  flex-basis: 100%;
  order: -1;
  margin-left: 0;
  margin-bottom: calc(var(--mt-tile) * 0.3 - var(--mt-gap));
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="2"] .mt-melds, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="3"] .mt-melds {
  order: 4;
  margin-bottom: 0;
  margin-top: calc(var(--mt-tile) * 0.3 - var(--mt-gap));
}
#playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="2"] .mt-pond, #playMatejong.mt-rows:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="3"] .mt-pond {
  flex-wrap: wrap;
}
#playMatejong.mt-centred:not(.mt-narrow):not(.mt-land) .mt-area {
  left: 1.4%;
  right: 1.4%;
  align-items: center;
}
#playMatejong.mt-centred:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="0"], #playMatejong.mt-centred:not(.mt-narrow):not(.mt-land) .mt-seat[data-seat="2"] {
  height: var(--mt-h);
}
#playMatejong.mt-centred:not(.mt-narrow):not(.mt-land) .mt-row {
  justify-content: center;
  max-width: none;
}
#playMatejong.mt-centred:not(.mt-narrow):not(.mt-land) .mt-melds {
  justify-content: center;
}
#playMatejong.mt-centred:not(.mt-narrow):not(.mt-land) .mt-break {
  display: none;
}
#playMatejong .mt-btn {
  transition: scale 0.08s var(--mt-ease);
}
#playMatejong .mt-btn:hover, #playMatejong .mt-btn:active {
  transform: none;
}
#playMatejong .mt-btn:active {
  scale: 0.96;
  background: rgba(243, 233, 232, 0.22);
}
#playMatejong .mt-btn.mt-primary:active {
  background: rgba(243, 233, 232, 0.34);
}
#playMatejong .mt-btn.mt-tint:active {
  background: color-mix(in srgb, var(--mt-btn-suit) 44%, var(--mt-felt));
}
#playMatejong .mt-btn.mt-suited:active {
  background: none;
}
#playMatejong .mt-btn.mt-suited:active .mt-tf {
  background: color-mix(in srgb, var(--mt-btn-suit) 44%, var(--mt-felt));
}
#playMatejong #mt-actions .mt-btn.mt-primary:not(.mt-suited):active,
#playMatejong #mt-banner .mt-btn.mt-primary:active {
  background: var(--mt-primary-bg-active);
}
#playMatejong .mt-seat[data-seat="0"] .mt-tile.mt-tile[data-kind] {
  transition: scale 0.08s var(--mt-ease);
}
#playMatejong .mt-seat[data-seat="0"] .mt-tile.mt-tile[data-kind]:active:not(.mt-dragging),
#playMatejong .mt-seat[data-seat="0"] .mt-slot:active .mt-tile.mt-tile:not(.mt-dragging) {
  scale: 0.96;
}
#playMatejong .mt-seat[data-seat="0"] .mt-tile.mt-tile[data-kind]:active:not(.mt-dragging).mt-s0,
#playMatejong .mt-seat[data-seat="0"] .mt-slot:active .mt-tile.mt-tile:not(.mt-dragging).mt-s0 {
  background: color-mix(in srgb, var(--mt-suit-0) 40%, var(--mt-felt));
}
#playMatejong .mt-seat[data-seat="0"] .mt-tile.mt-tile[data-kind]:active:not(.mt-dragging).mt-s1,
#playMatejong .mt-seat[data-seat="0"] .mt-slot:active .mt-tile.mt-tile:not(.mt-dragging).mt-s1 {
  background: color-mix(in srgb, var(--mt-suit-1) 40%, var(--mt-felt));
}
#playMatejong .mt-seat[data-seat="0"] .mt-tile.mt-tile[data-kind]:active:not(.mt-dragging).mt-s2,
#playMatejong .mt-seat[data-seat="0"] .mt-slot:active .mt-tile.mt-tile:not(.mt-dragging).mt-s2 {
  background: color-mix(in srgb, var(--mt-suit-2) 40%, var(--mt-felt));
}
@media only screen and (orientation: portrait) and (max-width: 600px) {
  #playMatejong #gameOptions h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 72px;
  }
  #playMatejong #gameOptions h1 #mt-hint, #playMatejong #gameOptions h1 #mt-status {
    font-size: 11px;
    letter-spacing: 0.1em;
    margin-left: 0;
  }
  #playMatejong #volume-control {
    display: none;
  }
  #playMatejong {
    --mt-w: 100vw;
    --mt-h: 100vh;
  }
  #playMatejong #gameOptions {
    z-index: 100000;
    pointer-events: none;
  }
  #playMatejong #gameOptions h1 {
    pointer-events: none;
  }
  #playMatejong #mobile-nav, #playMatejong #mobile-nav-toggle {
    pointer-events: auto;
  }
  #playMatejong #mobile-nav-toggle {
    z-index: 100001;
  }
  #playMatejong.mobile-nav #mobile-nav-toggle {
    z-index: 1000010;
  }
  #playMatejong {
    --mt-tile: calc((var(--mt-w) - 2 * var(--mt-inset)) / 8.5);
  }
  #playMatejong #home::after {
    display: none;
  }
  @supports (height: 100svh) {
    #playMatejong {
      --mt-h: 100svh;
    }
    #playMatejong #gameContainer {
      height: 100svh;
    }
  }
  #playMatejong #gameContainer {
    position: relative;
    z-index: 100001;
    display: block;
    height: 100vh;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
  }
  #playMatejong #gameContainer::before {
    content: "";
    display: block;
    height: 65px;
    scroll-snap-align: start;
  }
  #playMatejong #game-container-wrap {
    pointer-events: auto;
    scroll-snap-align: start;
    height: var(--mt-h);
    margin-top: 0;
    position: relative;
    z-index: 100002;
  }
  #playMatejong .mt-round {
    display: flex;
    align-items: center;
    position: absolute;
    right: var(--mt-inset);
    bottom: var(--mt-band-in);
    height: var(--mt-band);
    transform: translateY(-2px);
  }
  #playMatejong .mt-round.mt-round-mid {
    right: auto;
    left: 50%;
    transform: translate(-50%, -2px);
  }
  #playMatejong .mt-round {
    font-size: 19px;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mt-dim);
    font-feature-settings: "tnum";
    white-space: nowrap;
    z-index: 3;
  }
  #playMatejong .mt-round .mt-wait {
    font-family: "Pieces";
    font-style: normal;
    font-weight: 200;
    text-transform: none;
    letter-spacing: 0;
    margin-right: 0.15em;
  }
  #playMatejong #mobile-nav-main .sc-offer-row {
    width: calc(100% - 2 * var(--mt-inset));
  }
  #playMatejong #mobile-nav-main .sc-offer-chip {
    min-height: 64px;
    font-size: 28px;
  }
  #playMatejong #gameContainer {
    perspective: none;
    container-type: normal;
  }
  #playMatejong #gameOptions {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
  }
  #playMatejong #mt-table {
    border-radius: 0;
  }
  #playMatejong {
    --mt-inset: 16px;
  }
  #playMatejong .mt-area {
    bottom: var(--mt-inset);
  }
  #playMatejong #clock-container, #playMatejong #score-container {
    display: none;
  }
  #playMatejong .mt-label {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  #playMatejong .mt-label[data-seat="0"], #playMatejong .mt-label[data-seat="3"] {
    left: var(--mt-inset);
  }
  #playMatejong .mt-label[data-seat="1"], #playMatejong .mt-label[data-seat="2"] {
    right: var(--mt-inset);
  }
  #playMatejong .mt-lay {
    --mt-tile-h: calc((var(--mt-far-w) - 2 * var(--mt-gap)) / 3);
    --mt-tile: calc(var(--mt-tile-h) / 1.42);
    --mt-scale: 1;
    translate: 0 calc(var(--mt-h) * 0.03);
  }
  #playMatejong.mt-layover #mt-actions, #playMatejong #mt-actions {
    top: auto;
    bottom: calc(100% - var(--mt-rack-top, 60%) + var(--mt-gap) * 2);
    left: var(--mt-inset);
    right: var(--mt-inset);
    height: auto;
    width: auto;
    max-width: none;
    transform: none;
    justify-content: stretch;
    align-items: center;
    gap: calc(var(--mt-gap) * 2);
    flex-wrap: nowrap;
  }
  #playMatejong.mt-layover #mt-actions .mt-btn, #playMatejong #mt-actions .mt-btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
  #playMatejong.mt-layover #mt-actions .mt-btn.mt-suited .mt-tf, #playMatejong #mt-actions .mt-btn.mt-suited .mt-tf {
    width: 100%;
  }
  #playMatejong #mt-actions .mt-btn:not(.mt-suited) {
    min-height: var(--mt-tile-h);
    height: var(--mt-tile-h);
    box-sizing: border-box;
    padding: 0 calc(var(--mt-tile) * 0.85);
    font-size: calc(var(--mt-tile) * 0.56);
    letter-spacing: 0.04em;
  }
  #playMatejong #mt-actions .mt-btn:not(.mt-suited):has(.mt-icon) {
    padding-right: calc(var(--mt-tile) * 0.97);
  }
  #playMatejong #mt-actions .mt-btn:not(.mt-suited) .mt-icon {
    font-size: 0.8em;
    margin-right: -0.15em;
  }
  #playMatejong #mt-actions .mt-btn.mt-suited {
    --mt-btn-tile: var(--mt-tile);
    min-height: var(--mt-tile-h);
    height: var(--mt-tile-h);
  }
  #playMatejong #mt-actions .mt-btn.mt-suited .mt-tf {
    min-height: var(--mt-tile-h);
    height: var(--mt-tile-h);
    min-width: calc(var(--mt-tile-h) * 1.42);
    box-sizing: border-box;
  }
  #playMatejong #mt-actions {
    max-width: 90%;
    gap: 8px;
  }
  #playMatejong #mt-actions .mt-btn {
    padding: 0.4em 1.1em;
    font-size: 12px;
    min-height: 40px;
  }
  #playMatejong #mt-actions .mt-btn.mt-big:not(.mt-suited) {
    padding: 0.3em 0.8em;
    font-size: 14px;
  }
  #playMatejong #mt-actions .mt-btn.mt-big:not(.mt-suited) .mt-piece {
    font-size: 26px;
  }
  #playMatejong .mt-hand {
    display: contents;
  }
  #playMatejong .mt-row {
    gap: var(--mt-gap);
    flex-wrap: wrap;
  }
  #playMatejong .mt-drawn {
    order: 1;
    margin-left: calc(var(--mt-tile) * 0.3);
  }
  #playMatejong .mt-break {
    order: 2;
  }
  #playMatejong .mt-hand .mt-tail {
    order: 3;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-drawn:empty {
    display: none;
  }
  #playMatejong #game-container-wrap:has(#mt-actions:not(:empty)) .mt-seat[data-seat="0"] .mt-waits {
    opacity: 0;
  }
  #playMatejong .mt-melds {
    margin-left: 0;
  }
  #playMatejong .mt-seat[data-seat="1"] .mt-row, #playMatejong .mt-seat[data-seat="3"] .mt-row {
    flex-wrap: wrap-reverse;
    gap: calc(var(--mt-tile) * 0.3) var(--mt-gap);
  }
  #playMatejong .mt-seat[data-seat="1"] .mt-hand .mt-tail, #playMatejong .mt-seat[data-seat="3"] .mt-hand .mt-tail {
    order: 0;
  }
  #playMatejong .mt-seat[data-seat="1"] .mt-break, #playMatejong .mt-seat[data-seat="3"] .mt-break {
    order: 1;
  }
  #playMatejong .mt-seat[data-seat="1"] .mt-hand .mt-tile:not(.mt-tail), #playMatejong .mt-seat[data-seat="3"] .mt-hand .mt-tile:not(.mt-tail) {
    order: 2;
  }
  #playMatejong .mt-seat[data-seat="1"] .mt-drawn, #playMatejong .mt-seat[data-seat="3"] .mt-drawn {
    order: 3;
  }
  #playMatejong .mt-seat[data-seat="1"] .mt-melds, #playMatejong .mt-seat[data-seat="3"] .mt-melds {
    flex-basis: auto;
    order: 4;
    margin-bottom: 0;
    margin-left: 0;
  }
  #playMatejong .mt-seat[data-seat="0"].mt-done .mt-melds {
    flex-wrap: wrap;
    gap: calc(var(--mt-tile) * 0.3);
    max-width: 100%;
    margin-bottom: 0;
  }
  #playMatejong .mt-seat[data-seat="0"].mt-done .mt-drawn:empty {
    display: none;
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-area {
    left: var(--mt-inset);
    right: var(--mt-inset);
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-pond {
    display: none;
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-row {
    flex-wrap: wrap;
    max-width: 100%;
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-melds {
    flex-basis: 100%;
    margin-left: 0;
    order: -1;
    flex-wrap: wrap;
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-pond {
    width: calc(8 * var(--mt-tile) + 7 * var(--mt-gap));
    max-width: 100%;
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-row {
    gap: var(--mt-gap) calc(var(--mt-gap) * 2);
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-slot::after {
    inset: calc(var(--mt-gap) * -0.5) calc(var(--mt-gap) * -1);
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-meld {
    gap: calc(var(--mt-gap) * 2);
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-melds {
    margin-bottom: calc(var(--mt-tile) * 0.5 - var(--mt-gap));
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-drawn {
    margin-left: calc(var(--mt-tile) * 0.3);
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-pond {
    margin-bottom: calc(var(--mt-tile) * 0.5);
  }
  #playMatejong {
    --mt-gutter: 12px;
    --mt-far-w: calc((var(--mt-w) - 2 * var(--mt-inset) - 2 * var(--mt-gutter)) / 3);
  }
  #playMatejong .mt-seat:not([data-seat="0"]) {
    --mt-tile-h: calc((var(--mt-far-w) - 2 * var(--mt-gap)) / 3);
    --mt-tile: calc(var(--mt-tile-h) / 1.42);
    --mt-scale: 1;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-pond {
    --mt-scale: 1;
    margin-bottom: 0;
  }
  #playMatejong .mt-seat[data-seat="1"], #playMatejong .mt-seat[data-seat="2"] {
    --mt-turn: 90deg;
    width: calc(var(--mt-h) - 2 * var(--mt-band));
    height: var(--mt-w);
  }
  #playMatejong .mt-seat[data-seat="1"] .mt-tile:not(.mt-back) .mt-face,
  #playMatejong .mt-seat[data-seat="2"] .mt-tile:not(.mt-back) .mt-face {
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-area {
    left: var(--mt-inset);
    right: 54%;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-area {
    left: calc(var(--mt-band-in) - var(--mt-band) + var(--mt-tile) + var(--mt-gap));
  }
  #playMatejong .mt-seat[data-seat="3"] .mt-area {
    bottom: var(--mt-inset);
  }
  #playMatejong .mt-seat[data-seat="2"] .mt-area {
    bottom: calc(var(--mt-inset) + var(--mt-far-w) + var(--mt-gutter));
  }
  #playMatejong .mt-seat[data-seat="1"] .mt-area {
    bottom: calc(var(--mt-inset) + 2 * var(--mt-far-w) + 2 * var(--mt-gutter));
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-area {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: calc(var(--mt-tile) * 0.8);
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-row, #playMatejong .mt-seat:not([data-seat="0"]) .mt-pond {
    display: grid;
    grid-template-rows: repeat(3, max-content);
    grid-auto-flow: column dense;
    grid-auto-columns: max-content;
    justify-content: start;
    align-content: start;
    width: auto;
    height: auto;
    max-width: none;
    min-height: 0;
    gap: var(--mt-gap);
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-pond > :nth-child(3n+1) {
    grid-row: 3;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-pond > :nth-child(3n+2) {
    grid-row: 2;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-pond > :nth-child(3n) {
    grid-row: 1;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-row {
    min-width: calc(5 * var(--mt-tile) + 4 * var(--mt-gap));
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-row .mt-hand > :nth-child(3n+1) {
    grid-row: 3;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-row .mt-hand > :nth-child(3n+2) {
    grid-row: 2;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-row .mt-hand > :nth-child(3n) {
    grid-row: 1;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-row > .mt-drawn {
    display: contents;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-row > .mt-drawn > .mt-tile {
    grid-row: var(--mt-flow, 3);
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-row > .mt-melds {
    grid-row: 1/-1;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-melds {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: calc(var(--mt-tile) * 0.3);
    margin: 0;
    height: auto;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-melds:not(:empty) {
    margin-left: calc(var(--mt-tile) * 0.3 - var(--mt-gap));
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-hand:empty ~ .mt-melds:not(:empty) {
    margin-left: 0;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-meld {
    display: grid;
    grid-template-rows: repeat(3, max-content);
    grid-auto-flow: column dense;
    grid-auto-columns: max-content;
    gap: var(--mt-gap);
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-meld > :nth-child(3n+1) {
    grid-row: 3;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-meld > :nth-child(3n+2) {
    grid-row: 2;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-meld > :nth-child(3n) {
    grid-row: 1;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-meld > :nth-child(-n+4) {
    grid-column: 1;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-meld > :nth-child(3) {
    z-index: 1;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-meld > :nth-child(4) {
    grid-row: 1;
    z-index: 0;
    translate: -22% 0;
    box-shadow: 0 0 6px color-mix(in srgb, var(--mt-felt) 90%, transparent), inset 0 0 0 2px rgba(243, 233, 232, 0.04);
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-pond {
    order: 2;
    margin: 0;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-hand .mt-tail, #playMatejong .mt-seat:not([data-seat="0"]) .mt-hand .mt-tile:not(.mt-tail), #playMatejong .mt-seat:not([data-seat="0"]) .mt-drawn, #playMatejong .mt-seat:not([data-seat="0"]) .mt-melds {
    order: 0;
  }
  #playMatejong {
    --mt-band: 36px;
  }
  #playMatejong .mt-label {
    font-size: 19px;
    letter-spacing: 0.03em;
    margin-left: 6px;
    transform: translateY(-2px);
  }
  #playMatejong .mt-label .mt-void {
    font-size: 1.45em;
    top: 0.08em;
  }
  #playMatejong .mt-round .mt-clock {
    margin-right: 0;
  }
  #playMatejong .mt-label:not([data-seat="0"]) {
    top: calc(var(--mt-band-in) + 3px);
    bottom: auto;
    right: auto;
    margin-left: 6px;
    flex-direction: row;
    align-items: flex-start;
  }
  #playMatejong .mt-label:not([data-seat="0"]) .mt-lines {
    align-items: flex-start;
    gap: 0.05em;
  }
  #playMatejong .mt-label:not([data-seat="0"]) .mt-line {
    flex-direction: row;
  }
  #playMatejong .mt-label:not([data-seat="0"]) .mt-void {
    top: 0.08em;
  }
  #playMatejong .mt-label .mt-lines {
    flex-direction: row;
    align-items: center;
    gap: 0.12em;
  }
  #playMatejong .mt-label .mt-tags {
    order: 2;
    font-size: 0.7em;
  }
  #playMatejong .mt-label .mt-tags .mt-void {
    font-size: 2.07em;
    line-height: 1;
    top: 0.04em;
  }
  #playMatejong .mt-label[data-seat="3"] {
    left: var(--mt-inset);
  }
  #playMatejong .mt-label[data-seat="2"] {
    left: calc(var(--mt-inset) + var(--mt-far-w) + var(--mt-gutter));
  }
  #playMatejong .mt-label[data-seat="1"] {
    left: calc(var(--mt-inset) + 2 * var(--mt-far-w) + 2 * var(--mt-gutter));
  }
  #playMatejong .mt-glow {
    background: radial-gradient(ellipse 100% 100% at var(--mt-glow-x) var(--mt-glow-y), rgba(243, 233, 232, 0.06) 0%, rgba(243, 233, 232, 0.0588) 7%, rgba(243, 233, 232, 0.055) 14%, rgba(243, 233, 232, 0.0488) 21%, rgba(243, 233, 232, 0.04) 28%, rgba(243, 233, 232, 0.03) 35%, rgba(243, 233, 232, 0.02) 42%, rgba(243, 233, 232, 0.0113) 49%, rgba(243, 233, 232, 0.005) 56%, rgba(243, 233, 232, 0.0012) 63%, rgba(243, 233, 232, 0) 70%);
  }
  #playMatejong .mt-glow[data-seat="0"] {
    left: 0;
    right: 0;
    bottom: 0;
    height: 7%;
  }
  #playMatejong .mt-glow[data-seat="1"], #playMatejong .mt-glow[data-seat="2"], #playMatejong .mt-glow[data-seat="3"] {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 7%;
    --mt-glow-x: 50%;
    --mt-glow-y: 0%;
    transform-origin: 50% 0%;
  }
  #playMatejong.mt-upright .mt-seat[data-seat="1"], #playMatejong.mt-upright .mt-seat[data-seat="2"], #playMatejong.mt-upright .mt-seat[data-seat="3"] {
    --mt-turn: 0deg;
    width: var(--mt-w);
    height: calc(var(--mt-h) - 2 * var(--mt-band));
  }
  #playMatejong.mt-upright .mt-seat[data-seat="1"] .mt-tile:not(.mt-back) .mt-face,
  #playMatejong.mt-upright .mt-seat[data-seat="2"] .mt-tile:not(.mt-back) .mt-face,
  #playMatejong.mt-upright .mt-seat[data-seat="3"] .mt-tile:not(.mt-back) .mt-face {
    transform: none;
  }
  #playMatejong.mt-upright .mt-seat:not([data-seat="0"]) .mt-area {
    top: var(--mt-inset);
    bottom: auto;
    right: auto;
    width: var(--mt-far-w);
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--mt-tile) * 0.3);
  }
  #playMatejong.mt-upright .mt-seat:not([data-seat="0"]) .mt-row, #playMatejong.mt-upright .mt-seat:not([data-seat="0"]) .mt-pond, #playMatejong.mt-upright .mt-seat:not([data-seat="0"]) .mt-melds {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    height: auto;
    min-height: 0;
    width: calc(5 * var(--mt-tile) * var(--mt-scale) + 4 * var(--mt-gap));
    max-width: none;
    gap: var(--mt-gap);
  }
  #playMatejong.mt-upright .mt-seat:not([data-seat="0"]) .mt-meld {
    flex-direction: row;
  }
  #playMatejong.mt-upright .mt-seat:not([data-seat="0"]) .mt-pond {
    order: 0;
    margin: 0;
  }
  #playMatejong.mt-upright .mt-seat[data-seat="3"] .mt-area {
    left: var(--mt-inset);
  }
  #playMatejong.mt-upright .mt-seat[data-seat="2"] .mt-area {
    left: calc(var(--mt-inset) + var(--mt-far-w) + var(--mt-gutter));
  }
  #playMatejong.mt-upright .mt-seat[data-seat="1"] .mt-area {
    left: calc(var(--mt-inset) + 2 * var(--mt-far-w) + 2 * var(--mt-gutter));
  }
  #playMatejong #mt-banner {
    left: 0;
    top: 0;
    width: 100%;
    max-height: 82%;
    border-radius: 0 0 calc(var(--mt-radius) * 3) calc(var(--mt-radius) * 3);
    box-shadow: none;
    transform: translateY(-100%);
  }
  #playMatejong #mt-banner.mt-open {
    transform: translateY(0);
  }
  #playMatejong #mt-banner {
    --mt-pad-y: 2.2em;
    --mt-pad-x: 1.8em;
    padding: var(--mt-pad-y) var(--mt-pad-x) 1.8em;
    gap: 1.2em;
  }
  #playMatejong #mt-banner h2 {
    font-size: 30px;
  }
  #playMatejong #mt-banner .mt-sub {
    font-size: 15px;
    letter-spacing: 0.08em;
    line-height: 1.5;
  }
  #playMatejong #mt-banner h2 + .mt-sub {
    margin-top: -0.7em;
  }
  #playMatejong #mt-banner .mt-win .mt-win-line {
    font-size: 15px;
    line-height: 1.5;
  }
  #playMatejong #mt-banner .mt-table-scores {
    font-size: 17px;
    gap: 0.5em 1em;
  }
  #playMatejong #mt-banner .mt-results {
    font-size: 17px;
  }
  #playMatejong #mt-banner .mt-results .mt-result {
    padding: 1.1em 0;
    row-gap: 0.15em;
    grid-template-columns: auto auto 1fr;
    -moz-column-gap: 1em;
         column-gap: 1em;
  }
  #playMatejong #mt-banner .mt-results .mt-status {
    font-size: 15px;
  }
  #playMatejong #mt-banner .mt-results .mt-how {
    font-size: 12px;
  }
  #playMatejong #mt-banner .mt-btn {
    width: 100%;
    min-height: 64px;
    font-size: 28px;
    padding: 0.4em 1em;
    justify-content: center;
    text-align: center;
    margin-top: 0.4em;
  }
  #playMatejong #mt-banner .mt-btn.mt-primary {
    min-height: 84px;
    font-size: 32px;
  }
  #playMatejong #mt-banner.mt-final {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    justify-content: flex-start;
  }
  #playMatejong #mt-banner.mt-final .mt-results {
    flex: 1 0 auto;
  }
  #playMatejong #mt-banner.mt-final .mt-btn.mt-primary {
    margin-top: auto;
  }
  #playMatejong #mt-banner.mt-final .mt-alt {
    gap: 12px;
    margin-top: calc(12px - 1.2em);
  }
  #playMatejong #mt-banner.mt-final .mt-alt .mt-btn {
    margin-top: 0;
    height: 64px;
  }
}
@media only screen and (orientation: landscape) and (max-height: 520px) {
  #playMatejong {
    --mt-w: 100vw;
    --mt-h: 100vh;
    --mt-band: 22px;
    --mt-band-in: 4px;
    --mt-inset: 12px;
  }
  #playMatejong #gameOptions {
    min-height: 22px;
    height: 22px;
    padding: 0;
  }
  #playMatejong #gameOptions h1 {
    line-height: 22px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  #playMatejong #gameOptions h1 #mt-hint, #playMatejong #gameOptions h1 #mt-status {
    font-size: 10px;
  }
  #playMatejong #home {
    display: none;
  }
  #playMatejong #mobile-nav-toggle {
    transform: scale(0.55);
    transform-origin: 100% 0;
  }
  #playMatejong .mt-label[data-seat="2"] {
    right: 40px;
  }
  #playMatejong, #playMatejong.mt-short.mt-wide:not(.mt-narrow), #playMatejong.mt-short:not(.mt-narrow) {
    --mt-tile: calc(min(100vw, 100vh) * 0.9 / 10.5);
  }
  #playMatejong #volume-control {
    display: none;
  }
  #playMatejong #gameContainer {
    padding: 0;
    justify-content: flex-start;
  }
  #playMatejong #game-container-wrap {
    flex: none;
    margin-top: 0;
  }
  #playMatejong #mt-table {
    border-radius: 0;
  }
  #playMatejong #clock-container, #playMatejong #score-container {
    display: none;
  }
  #playMatejong .mt-label {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  #playMatejong .mt-label[data-seat="0"], #playMatejong .mt-label[data-seat="3"] {
    left: var(--mt-inset);
  }
  #playMatejong .mt-label[data-seat="1"] {
    right: var(--mt-inset);
  }
  #playMatejong .mt-area {
    bottom: var(--mt-inset);
  }
  #playMatejong #mt-actions {
    max-width: 70%;
    gap: 8px;
  }
  #playMatejong #mt-actions .mt-btn:not(.mt-suited) {
    min-height: 30px;
    height: 30px;
    padding: 0 0.8em;
    font-size: 12px;
  }
  #playMatejong #mt-actions .mt-btn.mt-suited {
    --mt-btn-tile: 30px;
  }
  #playMatejong #mt-actions .mt-btn.mt-suited .mt-tf {
    min-height: 30px;
    height: 30px;
  }
  #playMatejong #mt-actions {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #playMatejong.mt-layover #mt-actions {
    top: calc(50% + (var(--mt-tile) + var(--mt-tile-h) + var(--mt-gap)) * 0.25 + 6px - var(--mt-h) * 0.04);
    transform: translate(-50%, 0);
  }
  #playMatejong .mt-lay {
    --mt-scale: 0.5;
    translate: 0 calc(var(--mt-h) * -0.04);
  }
  #playMatejong .mt-seat:not([data-seat="0"]) {
    --mt-scale: 0.5;
  }
  #playMatejong .mt-seat:not([data-seat="0"]) .mt-pond {
    --mt-scale: 0.5;
  }
  #playMatejong .mt-melds {
    flex-wrap: wrap;
    gap: calc(var(--mt-tile) * 0.3);
  }
  #playMatejong .mt-seat[data-seat="0"].mt-done .mt-melds {
    --mt-scale: 0.7;
  }
  #playMatejong .mt-seat[data-seat="0"].mt-done .mt-drawn:empty {
    display: none;
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-area {
    left: var(--mt-inset);
    right: var(--mt-inset);
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-pond {
    display: none;
  }
  #playMatejong .mt-seat[data-seat="0"] .mt-melds {
    margin-bottom: calc(var(--mt-tile) * 0.5 - var(--mt-gap));
  }
  #playMatejong .mt-seat[data-seat="2"] .mt-area {
    left: var(--mt-inset);
    right: 50%;
  }
  #playMatejong .mt-seat[data-seat="2"] .mt-row, #playMatejong .mt-seat[data-seat="2"] .mt-pond {
    justify-content: flex-start;
  }
  #playMatejong .mt-seat[data-seat="3"] .mt-area, #playMatejong .mt-seat[data-seat="1"] .mt-area {
    left: var(--mt-inset);
    right: 50%;
  }
  #playMatejong .mt-seat[data-seat="1"] .mt-row, #playMatejong .mt-seat[data-seat="1"] .mt-pond {
    justify-content: flex-start;
  }
  #playMatejong #mt-banner {
    max-height: 94%;
    --mt-pad-y: 1em;
    --mt-pad-x: 1.2em;
    padding: var(--mt-pad-y) var(--mt-pad-x);
    gap: 0.5em;
  }
}

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

#playDrop {
  --dp-cell: min(calc((100vh - 190px) / 7.4), 14vw, 120px);
  --dp-gap: 5px;
}
#playDrop .dp-frame {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5em;
  width: calc(6 * var(--dp-cell));
  touch-action: none;
  cursor: pointer;
}
#playDrop .dp-hand {
  position: relative;
  width: var(--dp-cell);
  height: var(--dp-cell);
  will-change: transform;
  transition: transform 0.12s ease-out, opacity 0.15s ease;
}
#playDrop .dp-hand.empty {
  opacity: 0;
}
#playDrop .dp-hand.blocked .dp-glyph {
  opacity: 0.3;
}
#playDrop .dp-board {
  position: relative;
  width: calc(6 * var(--dp-cell));
  height: calc(6 * var(--dp-cell));
  border-radius: 10px;
  overflow: hidden;
  transition: opacity 0.3s ease;
}
#playDrop .dp-board.over {
  opacity: 0.55;
}
#playDrop #dp-files {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, var(--dp-cell));
}
#playDrop .dp-file {
  margin: 0 1px;
}
#playDrop #dp-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#playDrop .dp-piece .dp-glyph,
#playDrop .dp-hand .dp-glyph {
  position: absolute;
  inset: var(--dp-gap);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.2s ease;
}
#playDrop .dp-piece .dp-glyph img,
#playDrop .dp-hand .dp-glyph img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.9;
}
#playDrop .dp-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dp-cell);
  height: var(--dp-cell);
  will-change: transform;
  transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1);
}
#playDrop .dp-piece.face-cracked .dp-glyph::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--color-lightish);
  transform: rotate(-32deg);
  border-radius: 1px;
}
#playDrop .dp-piece.out .dp-glyph {
  transform: scale(0);
  opacity: 0;
}
#playDrop .dp-dots {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  height: 10px;
}
#playDrop .dp-dots i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bglight);
  transition: background 0.25s ease;
}
#playDrop .dp-dots i.on {
  background: var(--color-lightish);
}
#playDrop .dp-toast {
  min-height: 1.4em;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lightish);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#playDrop .dp-toast.in {
  opacity: 1;
}

#playPipes {
  --pp-bore: 22%;
}
#playPipes .pp-board {
  --pp-n: 5;
  --pp-cell: min(calc(min(100vh - 160px, 92vw) / var(--pp-n)), 160px);
  display: grid;
  grid-template-columns: repeat(var(--pp-n), var(--pp-cell));
  grid-template-rows: repeat(var(--pp-n), var(--pp-cell));
  padding: 6px;
  border-radius: 10px;
}
#playPipes .pp-cell {
  position: relative;
  width: var(--pp-cell);
  height: var(--pp-cell);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  color: var(--color-light);
}
#playPipes .pp-cell::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  border: 2px solid var(--color-lighter);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#playPipes .pp-cell.hint::after {
  animation: ppHint 1.4s ease-in-out;
}
#playPipes .pp-pipe {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
  will-change: transform;
  background-repeat: no-repeat;
}
#playPipes .pp-cell.lit .pp-pipe,
#playPipes .pp-cell.king .pp-pipe {
  opacity: 1;
}
#playPipes .pp-board.solved .pp-cell::after,
#playPipes .pp-board.solved .mg-grid i.hot::before {
  opacity: 0;
}
#playPipes .pp-pipe::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pp-bore);
  height: var(--pp-bore);
  margin: calc(var(--pp-bore) / -2) 0 0 calc(var(--pp-bore) / -2);
  border-radius: 30%;
  background: currentColor;
}
#playPipes .pp-end {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: var(--pp-bore) 50%;
  background-position: 50% 0;
}
#playPipes .pp-straight {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: var(--pp-bore) 100%;
  background-position: 50% 50%;
}
#playPipes .pp-corner {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: var(--pp-bore) 50%, 50% var(--pp-bore);
  background-position: 50% 0, 100% 50%;
}
#playPipes .pp-tee {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: var(--pp-bore) 100%, 50% var(--pp-bore);
  background-position: 50% 50%, 100% 50%;
}
#playPipes .pp-cross {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: var(--pp-bore) 100%, 100% var(--pp-bore);
  background-position: 50% 50%, 50% 50%;
}
#playPipes .pp-end::before {
  border-radius: 50%;
  width: calc(var(--pp-bore) * 2);
  height: calc(var(--pp-bore) * 2);
  margin: calc(var(--pp-bore) * -1) 0 0 calc(var(--pp-bore) * -1);
}
#playPipes .pp-piece {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#playPipes .pp-cell.king .pp-piece,
#playPipes .pp-cell.pawn .pp-piece {
  opacity: 1;
}
#playPipes .pp-cell.pawn .pp-piece {
  width: 32%;
}
#playPipes .pp-cell.king .pp-pipe::before {
  width: calc(var(--pp-bore) * 2.4);
  height: calc(var(--pp-bore) * 2.4);
  margin: calc(var(--pp-bore) * -1.2) 0 0 calc(var(--pp-bore) * -1.2);
  border-radius: 50%;
  background: var(--color-midlow);
  box-shadow: 0 0 0 2px currentColor;
}
#playPipes .pp-cell.pawn .pp-pipe::before {
  background: var(--color-midlow);
  box-shadow: 0 0 0 2px currentColor;
}
#playPipes .pp-cell.woke .pp-piece {
  animation: ppWake 0.35s var(--bounce);
}
#playPipes .pp-actions {
  transition: opacity 0.3s ease;
}
#playPipes .pp-board.solved + .pp-actions {
  opacity: 0;
  pointer-events: none;
}
@keyframes ppWake {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes ppHint {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  20%, 80% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}

#playTour {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#playTour .tr-board {
  --tr-n: 5;
  --tr-cell: min(calc(min(100vh - 250px, 92vw) / var(--tr-n)), 120px);
  display: grid;
  grid-template-columns: repeat(var(--tr-n), var(--tr-cell));
  grid-template-rows: repeat(var(--tr-n), var(--tr-cell));
  padding: 6px;
  border-radius: 10px;
}
#playTour .tr-cell {
  position: relative;
  width: var(--tr-cell);
  height: var(--tr-cell);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#playTour .tr-cell::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  border: 2px solid var(--color-lighter);
  opacity: 0;
  pointer-events: none;
}
#playTour .tr-cell.hint::after {
  animation: trHint 1.4s ease-in-out;
}
#playTour .tr-piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#playTour .tr-cell.head .tr-piece {
  opacity: 1;
}
#playTour .tr-cell.legal .tr-piece {
  opacity: 0.28;
}
#playTour .tr-cell.legal:hover .tr-piece {
  opacity: 0.6;
}
#playTour .tr-cell.landed .tr-piece {
  animation: trLand 0.3s var(--bounce);
}
#playTour .tr-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--tr-cell) * 0.3);
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  color: rgba(243, 233, 232, 0.35);
  pointer-events: none;
}
#playTour .tr-board.over .tr-cell.legal .tr-piece,
#playTour .tr-board.over .tr-cell::after {
  opacity: 0;
}
@keyframes trLand {
  0% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes trHint {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  20%, 80% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}

#playChain {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --ch-cols: 12;
  --ch-rows: 12;
  --ch-cell: min(calc((100vh - 200px) / var(--ch-rows)), calc(92vw / var(--ch-cols)), 60px);
}
#playChain .ch-board {
  position: relative;
  width: calc(var(--ch-cols) * var(--ch-cell));
  height: calc(var(--ch-rows) * var(--ch-cell));
  touch-action: none;
  cursor: pointer;
}
#playChain .ch-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--ch-cols), var(--ch-cell));
  grid-template-rows: repeat(var(--ch-rows), var(--ch-cell));
}
#playChain .ch-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#playChain .ch-link,
#playChain .ch-food {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ch-cell);
  height: var(--ch-cell);
  will-change: transform;
  transition: transform 0.2s linear;
}
#playChain .ch-link img,
#playChain .ch-food img {
  display: block;
  width: 100%;
  height: 100%;
}
#playChain .ch-link img {
  opacity: 0.5;
}
#playChain .ch-link.ch-king img {
  opacity: 1;
}
#playChain .ch-food img {
  animation: chBeckon 1.2s ease-in-out infinite;
}
#playChain .ch-toast {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243, 233, 232, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#playChain .ch-toast.in {
  opacity: 1;
}
@keyframes chBeckon {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

#playCastling {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --cs-cell: min(calc((100vh - 250px) / 4), 22vw, 150px);
}
#playCastling .cs-board {
  position: relative;
  width: calc(4 * var(--cs-cell));
  height: calc(4 * var(--cs-cell));
  touch-action: none;
  cursor: pointer;
}
#playCastling .cs-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, var(--cs-cell));
  grid-template-rows: repeat(4, var(--cs-cell));
}
#playCastling .cs-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#playCastling .cs-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cs-cell);
  height: var(--cs-cell);
  will-change: transform;
  transition: transform 0.18s cubic-bezier(0.33, 1, 0.68, 1);
}
#playCastling .cs-piece img {
  display: block;
  width: 100%;
  height: 100%;
}
#playCastling .cs-king img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#playCastling .cs-board.solved .cs-king img {
  opacity: 0.8;
}
#playCastling .cs-board.solved .cs-piece img {
  animation: csHome 0.5s var(--bounce);
}
@keyframes csHome {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

#playStorm {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#playStorm .st-board {
  --st-n: 8;
  --st-cell: min(calc(min(100vh - 250px, 92vw) / var(--st-n)), 76px);
  display: grid;
  grid-template-columns: repeat(var(--st-n), var(--st-cell));
  grid-template-rows: repeat(var(--st-n), var(--st-cell));
  padding: 6px;
  border-radius: 10px;
}
#playStorm .st-cell {
  position: relative;
  width: var(--st-cell);
  height: var(--st-cell);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#playStorm .st-cell::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  border: 2px solid var(--color-lighter);
  opacity: 0;
  pointer-events: none;
}
#playStorm .st-cell.hint::after {
  animation: stHint 1.4s ease-in-out;
}
#playStorm .st-piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#playStorm .st-cell.ground .st-piece {
  opacity: 1;
}
#playStorm .st-cell.woke .st-piece {
  animation: stWake 0.35s var(--bounce);
}
#playStorm .st-board.over .st-cell::after {
  opacity: 0;
}
@keyframes stWake {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes stHint {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  20%, 80% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

#playExchange {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --ex-cols: 10;
  --ex-rows: 10;
  --ex-cell: min(calc((100vh - 250px) / var(--ex-rows)), calc(92vw / var(--ex-cols)), 68px);
}
#playExchange .ex-board {
  position: relative;
  width: calc(var(--ex-cols) * var(--ex-cell));
  height: calc(var(--ex-rows) * var(--ex-cell));
  touch-action: manipulation;
  cursor: pointer;
}
#playExchange .ex-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--ex-cols), var(--ex-cell));
  grid-template-rows: repeat(var(--ex-rows), var(--ex-cell));
}
#playExchange .ex-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#playExchange .ex-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ex-cell);
  height: var(--ex-cell);
  will-change: transform;
  transition: transform 0.26s cubic-bezier(0.33, 1, 0.68, 1);
}
#playExchange .ex-piece img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#playExchange .ex-piece.lit img {
  opacity: 1;
}
#playExchange .ex-piece.out img {
  opacity: 0;
  transform: scale(0.4);
}

#playClearance {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --cl-cell: min(calc((100vh - 250px) / 7), 13vw, 84px);
}
#playClearance .cl-board {
  position: relative;
  width: calc(7 * var(--cl-cell));
  height: calc(7 * var(--cl-cell));
  touch-action: manipulation;
  cursor: pointer;
}
#playClearance .cl-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, var(--cl-cell));
  grid-template-rows: repeat(7, var(--cl-cell));
}
#playClearance .cl-square {
  position: relative;
}
#playClearance .cl-square::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  border: 2px solid var(--color-lighter);
  opacity: 0;
  pointer-events: none;
}
#playClearance .cl-square.hint::after {
  animation: clHint 1.4s ease-in-out;
}
#playClearance .mg-grid > i.void {
  visibility: hidden;
}
#playClearance .cl-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#playClearance .cl-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cl-cell);
  height: var(--cl-cell);
  will-change: transform;
  transition: transform 0.18s cubic-bezier(0.33, 1, 0.68, 1);
}
#playClearance .cl-piece img {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.15s ease, opacity 0.3s ease;
}
#playClearance .cl-piece.picked img {
  transform: scale(1.14) translateY(-4%);
}
#playClearance .cl-piece.taken img {
  opacity: 0;
  transform: scale(0.4);
}
#playClearance .cl-board.over .cl-piece img {
  animation: clCrown 0.5s var(--bounce);
}
@keyframes clCrown {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes clHint {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  20%, 80% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

#playBreakthrough {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#playBreakthrough .bt-board {
  --bt-n: 5;
  --bt-cell: min(calc(min(100vh - 250px, 92vw) / var(--bt-n)), 96px);
  position: relative;
  width: calc(var(--bt-n) * var(--bt-cell));
  height: calc(var(--bt-n) * var(--bt-cell));
  touch-action: none;
  cursor: pointer;
}
#playBreakthrough .bt-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--bt-n), var(--bt-cell));
  grid-template-rows: repeat(var(--bt-n), var(--bt-cell));
}
#playBreakthrough .bt-square {
  position: relative;
}
#playBreakthrough .bt-square img {
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
  opacity: 0.35;
  pointer-events: none;
}
#playBreakthrough .bt-square::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  border: 2px solid var(--color-lighter);
  opacity: 0;
  pointer-events: none;
}
#playBreakthrough .bt-square.hint::after {
  animation: btHint 1.4s ease-in-out;
}
#playBreakthrough .bt-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#playBreakthrough .bt-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bt-cell);
  height: var(--bt-cell);
  will-change: transform;
  transition: transform 0.11s cubic-bezier(0.33, 1, 0.68, 1);
}
#playBreakthrough .bt-piece img {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s ease;
}
#playBreakthrough .bt-pawn img {
  opacity: 0.5;
}
#playBreakthrough .bt-pawn.home img {
  opacity: 1;
}
#playBreakthrough .bt-board.over .bt-pawn img {
  animation: btHome 0.5s var(--bounce);
}
@keyframes btHome {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes btHint {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  20%, 80% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

#playBattery {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --by-cell: min(calc((100vh - 290px) / 6), 13vw, 92px);
}
#playBattery .by-board {
  position: relative;
  width: calc(7 * var(--by-cell));
  height: calc(6 * var(--by-cell));
  touch-action: manipulation;
  cursor: pointer;
  overflow: hidden;
}
#playBattery .by-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, var(--by-cell));
  grid-template-rows: repeat(6, var(--by-cell));
}
#playBattery .by-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#playBattery .by-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--by-cell);
  height: var(--by-cell);
  will-change: transform;
  transition: transform 0.26s cubic-bezier(0.5, 0, 0.75, 0.4);
}
#playBattery .by-piece img {
  display: block;
  width: 100%;
  height: 100%;
}
#playBattery .by-piece.house img {
  opacity: 0.8;
}
#playBattery .by-toast {
  min-height: 1.4em;
  margin-top: 10px;
  text-align: center;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  opacity: 0.6;
}
#playBattery .by-board.over .by-piece img {
  opacity: 0.45;
  transition: opacity 0.4s ease;
}

#playDiagram {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#playDiagram .dg-frame {
  --dg-n: 5;
  --dg-gutter: 3em;
  --dg-cell: min(calc((min(100vh - 250px, 92vw) - var(--dg-gutter)) / var(--dg-n)), 80px);
  display: grid;
  grid-template-columns: var(--dg-gutter) auto;
  grid-template-rows: var(--dg-gutter) auto;
  font-size: clamp(10px, var(--dg-cell) * 0.3, 15px);
}
#playDiagram .dg-corner {
  grid-area: 1/1;
}
#playDiagram .mg-grid b {
  display: none;
}
#playDiagram .dg-cols {
  grid-area: 1/2;
  display: grid;
  grid-template-columns: repeat(var(--dg-n), var(--dg-cell));
  align-items: end;
}
#playDiagram .dg-cols .dg-clue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1em;
  padding-bottom: 0.5em;
}
#playDiagram .dg-rows {
  grid-area: 2/1;
  display: grid;
  grid-template-rows: repeat(var(--dg-n), var(--dg-cell));
  justify-items: end;
}
#playDiagram .dg-rows .dg-clue {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35em;
  padding-right: 0.6em;
}
#playDiagram .dg-clue {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--color-lighter);
  transition: opacity 0.3s ease;
}
#playDiagram .dg-clue b {
  font-weight: 600;
  line-height: 1;
}
#playDiagram .dg-clue.ok {
  opacity: 0.3;
}
#playDiagram .dg-board {
  grid-area: 2/2;
  display: grid;
  grid-template-columns: repeat(var(--dg-n), var(--dg-cell));
  grid-template-rows: repeat(var(--dg-n), var(--dg-cell));
}
#playDiagram .dg-cell {
  position: relative;
  width: var(--dg-cell);
  height: var(--dg-cell);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#playDiagram .dg-cell img {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: scale(0.7);
}
#playDiagram .dg-cell.pawn .dg-pawn {
  opacity: 1;
  transform: scale(1);
}
#playDiagram .dg-cell.cross .dg-cross {
  opacity: 0.25;
  transform: scale(0.6);
}
#playDiagram .dg-cell::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  border: 2px solid var(--color-lighter);
  opacity: 0;
  pointer-events: none;
}
#playDiagram .dg-cell.hint::after {
  animation: dgHint 1.4s ease-in-out;
}
#playDiagram .dg-cell.woke.pawn .dg-pawn {
  animation: dgWake 0.3s var(--bounce);
}
#playDiagram .dg-actions .mg-button.on {
  background: var(--color-lighter);
  color: var(--color-darker);
}
#playDiagram .dg-frame.over .dg-cell.pawn .dg-pawn {
  animation: dgWake 0.5s var(--bounce);
}
#playDiagram .dg-frame.over .dg-cell.cross .dg-cross {
  opacity: 0;
}
@keyframes dgWake {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dgHint {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  20%, 80% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

#playSkewer {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --sk-cell: min(calc((100vh - 290px) / 8), 11.5vw, 72px);
}
#playSkewer .sk-board {
  position: relative;
  width: calc(8 * var(--sk-cell));
  height: calc(8 * var(--sk-cell));
  touch-action: manipulation;
  cursor: pointer;
}
#playSkewer .sk-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, var(--sk-cell));
  grid-template-rows: repeat(8, var(--sk-cell));
}
#playSkewer .sk-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#playSkewer .sk-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--sk-cell);
  height: var(--sk-cell);
  will-change: transform;
}
#playSkewer .sk-piece img {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.12s ease-in, opacity 0.2s ease;
}
#playSkewer .sk-piece.house img {
  opacity: 0.8;
}
#playSkewer .sk-piece.in img {
  animation: skIn 0.3s var(--bounce);
}
#playSkewer .sk-piece.turning img {
  transform: scale(0.2);
}
#playSkewer .sk-toast {
  min-height: 1.4em;
  margin-top: 10px;
  text-align: center;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  opacity: 0.6;
}
#playSkewer .sk-board.over .sk-piece.house img {
  opacity: 0.4;
}
@keyframes skIn {
  0% {
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

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

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