/* @font-face { font-family: 'lichess' } is defined in layout.scala */
@font-face {
  font-family: "Noto Chess";
  font-display: block;
  src: url("../font/lichess-chess.woff2") format("woff2");
}
@font-face {
  font-family: racer-car;
  src: url("../font/racer-car.woff2") format("woff2");
}
@font-face {
  font-family: storm;
  src: url("../font/storm.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/noto-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans";
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/noto-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans";
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/noto-sans-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans";
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/noto-sans-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Noto Sans";
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/noto-sans-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Noto Sans";
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/noto-sans-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Noto Sans";
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/noto-sans-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Noto Sans";
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/noto-sans-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Roboto;
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Roboto;
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Roboto;
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/roboto-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Roboto;
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/roboto-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Roboto;
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/roboto-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: Roboto;
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/roboto-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: Roboto;
  font-display: swap;
  font-weight: 100 900;
  src: url("../font/roboto-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
:root {
  ---site-hue: 37deg;
  --c-bg: hsl(var(---site-hue) 7% 14%);
  --c-bg-box: var(--c-bg);
  --c-bg-high: var(--c-bg);
  --c-page-input: var(--c-bg);
  --c-bg-mid: hsl(var(---site-hue) 7% 16%);
  --c-bg-low: hsl(var(---site-hue) 7% 22%);
  --c-bg-popup: var(--c-bg-low);
  --c-bg-page: hsl(var(---site-hue) 10% 8%);
  --c-bg-zebra: hsl(var(---site-hue) 5% 19%);
  --c-bg-zebra2: hsl(var(---site-hue) 5% 24%);
  --c-bg-header-dropdown: var(--c-bg-popup);
  --c-bg-input: hsl(from var(--c-bg-page) h s 12% / alpha);
  --c-bg-variation: hsl(var(---site-hue) 5% 15%);
  --c-bg-opaque: hsl(var(---site-hue) 7% 14%);
  --c-body-gradient: hsl(var(---site-hue) 12% 16%);
  --c-font: hsl(0 0% 73%);
  --c-header-dropdown: var(--c-font);
  --c-shade: hsl(0 0% 30%);
  --c-dark: #333;
  --c-dimmer: black;
  --c-clearer: white;
  --c-clas: rgb(88 28 135);
  --c-future: hsl(274 48% 60%);
  --c-page-mask: hsl(0 0% 0% / 0.6);
  --c-metal-top: hsl(var(---site-hue) 7% 22%);
  --c-metal-bottom: hsl(var(---site-hue) 5% 19%);
  --c-metal-top-hover: hsl(var(---site-hue) 7% 25%);
  --c-metal-bottom-hover: hsl(var(---site-hue) 5% 22%);
  --c-font-dim: hsl(0 0% 58%);
  --c-font-dimmer: hsl(from var(--c-font) h s 42% / alpha);
  --c-font-clear: hsl(from var(--c-font) h s 80% / alpha);
  --c-font-clearer: hsl(from var(--c-font) h s 89% / alpha);
  --c-font-page: var(--c-font-dim);
  --c-font-shadow: hsl(0 0% 17% / 0.66);
  --c-primary-dim: color-mix(in oklab, var(--c-dimmer) 15%, var(--c-primary));
  --c-link-hover: color-mix(in oklab, var(--c-clearer) 25%, hsl(from var(--c-primary) h 100% l));
  --c-chat-host-bg: rgb(78 122 29 / 0.4);
  --c-chat-mention-bg: rgb(59 92 22 / 0.4);
  --c-fancy: hsl(294 62% 48%);
  --c-border: hsl(0 0% 25%);
  --c-border-page: hsl(0 0% 22%);
  --c-border-tour: color-mix(in oklab, var(--c-border-page) 50%, var(--c-bg-page));
  --c-border-light: hsl(0 0% 40%);
  --c-primary: hsl(209 79% 56%);
  --c-primary-clear: color-mix(in oklab, var(--c-clearer) 20%, var(--c-primary));
  --c-secondary: hsl(88 62% 37%);
  --c-secondary-dim: color-mix(in oklab, var(--c-dimmer) 20%, var(--c-secondary));
  --c-secondary-dimmer: color-mix(in oklab, var(--c-dimmer) 40%, var(--c-secondary));
  --c-link: var(--c-primary);
  --c-link-dim: var(--c-primary-dim);
  --c-link-clear: var(--c-primary-clear);
  --c-over: white;
  --c-brag: hsl(var(---site-hue) 74% 43%);
  --c-brag-hover: hsl(from var(--c-brag) h 100 70);
  --c-contours: color-mix(in oklab, var(--c-brag) 80%, var(--c-shade));
  --c-accent: hsl(22 100% 42%);
  --c-accent-dim: color-mix(in oklab, var(--c-dimmer) 20%, var(--c-accent));
  --c-accent-faint: hsl(22 100% 42% / 0.4);
  --c-accent-clear: color-mix(in oklab, var(--c-clearer) 20%, var(--c-accent));
  --c-accent-glass: hsl(from var(--c-accent) h s l / 0.2);
  --c-accent-cloud: hsl(from var(--c-accent) h s l / 0.5);
  --c-dasher: var(--c-secondary);
  --c-bot: var(--c-fancy);
  --c-good: hsl(88 62% 37%);
  --c-warn: var(--c-brag);
  --c-bad: hsl(0 60% 50%);
  --c-error: var(--c-bad);
  --c-live: var(--c-bad);
  --c-dasher-light: color-mix(in oklab, var(--c-secondary) 40%, var(--c-bg-low));
  --c-racer-boost: hsl(from var(--c-brag) h s 50% / 0.7);
  --c-marathon: hsl(from var(--c-primary) calc(h - 190) calc(s - 70%) l);
  --c-tutor-bg: hsl(from color-mix(in oklab, var(--c-secondary) 80%, var(--c-bg)) h calc(s - 10) l);
  --c-inaccuracy: hsl(202 78% 62%);
  --c-mistake: hsl(41 100% 45%);
  --c-blunder: hsl(0 69% 60%);
  --c-good-move: var(--c-good);
  --c-brilliant: hsl(129 71% 45%);
  --c-interesting: hsl(307 80% 70%);
  --c-mv-branch-white: white;
  --c-mv-branch-black: black;
  --c-pool-button: hsl(var(---site-hue), 7%, 19%, 0.66);
  --c-paper: hsl(60 56% 91%);
  --c-patron-1: hsl(90 52% 57%);
  --c-patron-2: hsl(120 32% 62%);
  --c-patron-3: hsl(151.9 62% 62%);
  --c-patron-4: hsl(190 52% 57%);
  --c-patron-5: hsl(207 63% 66%);
  --c-patron-6: hsl(220 62% 67%);
  --c-patron-7: hsl(270 72% 73%);
  --c-patron-8: hsl(310 52% 67%);
  --c-patron-9: hsl(0 52% 65%);
  --c-patron-10: hsl(37 74% 43%);
}

html.light {
  --c-bg: hsl(0 0% 100%);
  --c-bg-page: hsl(var(---site-hue) 10% 92%);
  --c-bg-low: hsl(0 0% 89%);
  --c-bg-mid: hsl(var(---site-hue) 7% 97%);
  --c-bg-zebra: hsl(var(---site-hue) 12% 96.5%);
  --c-bg-zebra2: hsl(var(---site-hue) 12% 92%);
  --c-bg-popup: hsl(0 0% 100%);
  --c-bg-opaque: hsl(0 0% 100%);
  --c-body-gradient: hsl(var(---site-hue) 12% 84%);
  --c-font: hsl(0 0% 30%);
  --c-font-dim: hsl(0 0% 47%);
  --c-primary: hsl(209 77% 46%);
  --c-brag: hsl(var(---site-hue) 74% 48%);
  --c-brag-hover: hsl(from var(--c-brag) h 100 30);
  --c-shade: hsl(0 0% 84%);
  --c-inaccuracy: hsl(202 78% 40%);
  --c-mistake: hsl(41 100% 35%);
  --c-blunder: hsl(0 68% 50%);
  --c-brilliant: hsl(129 71% 30%);
  --c-interesting: hsl(307 80% 59%);
  --c-future: hsl(274 65% 70%);
  --c-paper: hsl(60 56% 86%);
  --c-border: hsl(0 0% 85%);
  --c-dimmer: white;
  --c-clearer: black;
  --c-bg-input: hsl(from var(--c-bg-page) h s 97);
  --c-bg-variation: var(--c-bg-zebra2);
  --c-bg-header-dropdown: var(--c-bg);
  --c-page-input: var(--c-bg-low);
  --c-page-mask: hsl(0 0% 100% / 0.4);
  --c-metal-top: hsl(0 0% 96%);
  --c-metal-bottom: hsl(0 0% 93%);
  --c-metal-top-hover: hsl(0 0% 98%);
  --c-metal-bottom-hover: hsl(0 0% 95%);
  --c-font-dimmer: hsl(from var(--c-font) h s 70);
  --c-font-clear: hsl(from var(--c-font) h s 12);
  --c-font-clearer: black;
  --c-font-page: hsl(from var(--c-font) h s 37);
  --c-font-shadow: white;
  --c-primary-dim: color-mix(in oklab, var(--c-dimmer) 17%, var(--c-primary));
  --c-link-hover: color-mix(in oklab, var(--c-clearer) 35%, hsl(from var(--c-primary) h 100 l));
  --c-chat-host-bg: rgb(125 170 73 / 0.4);
  --c-chat-mention-bg: rgb(161 194 124 / 0.4);
  --c-fancy: hsl(294 61% 62%);
  --c-border-page: hsl(0 0% 80%);
  --c-border-light: hsl(0 0% 80%);
  --c-patron-1: hsl(90 60% 43%);
  --c-patron-2: hsl(120 52% 52%);
  --c-patron-3: hsl(162.9 65% 44%);
  --c-patron-4: hsl(190 57% 48%);
  --c-patron-5: hsl(207 78% 49%);
  --c-patron-6: hsl(220 60% 57%);
  --c-patron-7: hsl(270 62% 67%);
  --c-patron-8: hsl(310 56% 57%);
  --c-patron-9: hsl(0 52% 60%);
}

html.transp {
  --c-bg-font: hsl(0 0% 80%);
  --c-bg: hsl(0 0% 0% / 0.6);
  --c-bg-opaque: hsl(0 0% 0% / 0.9);
  --c-bg-low: hsl(0 0% 0% / 0.5);
  --c-bg-mid: hsl(0 0% 15% / 0.4);
  --c-bg-zebra: hsl(0 0% 100% / 0.05);
  --c-bg-zebra2: hsl(0 0% 100% / 0.1);
  --c-bg-popup: hsl(0 0% 0% / 0.6);
  --c-bg-input: hsl(0 0% 0% / 0.7);
  --c-bg-variation: hsl(0 0% 0% / 0.25);
  --c-bg-header-dropdown: hsl(0 0% 0% / 0.75);
  --c-body-gradient: hsl(var(---site-hue) 8% 16% / 0.8);
  --c-font-dim: hsl(from var(--c-font) h s 69%);
  --c-font-dimmer: hsl(from var(--c-font) h s 48%);
  --c-font-clear: hsl(from var(--c-font) h s 89%);
  --c-font-clearer: hsl(from var(--c-font) h s 97%);
  --c-font-page: hsl(from var(--c-font) h s 97%);
  --c-metal-top: hsl(37 7% 19% / 0.56);
  --c-metal-bottom: hsl(37 7% 19% / 0.66);
  --c-metal-top-hover: hsl(0 0% 42% / 0.4);
  --c-metal-bottom-hover: hsl(0 0% 42% / 0.45);
}

html.transp.light {
  --c-primary: hsl(209 79% 46%);
  --c-base: hsl(0 0% 15%);
  --c-font: hsl(0 0% 20%);
  --c-clearer: hsl(0 0% 5%);
  --c-dimmer: hsl(0 0% 90%);
  --c-border: hsl(0 0% 80% / 0.8);
  --c-body-gradient: hsl(var(---site-hue) 2% 86% / 0.8);
  --c-brag-hover: hsl(from var(--c-brag) h 100 30);
  --c-bg: hsl(0 0% 100% / 0.6);
  --c-bg-page: hsl(var(---site-hue) 10% 92%);
  --c-bg-font: hsl(0 0% 20%);
  --c-bg-opaque: hsl(0 0% 100% / 0.9);
  --c-bg-low: hsl(0 0% 100% / 0.5);
  --c-bg-mid: hsl(0 0% 85% / 0.4);
  --c-bg-zebra: hsl(0 0% 100% / 0.28);
  --c-bg-zebra2: hsl(0 0% 100% / 0.4);
  --c-bg-popup: hsl(0 0% 100% / 0.75);
  --c-bg-input: hsl(0 0% 100% / 0.7);
  --c-bg-variation: hsl(0 0% 100% / 0.25);
  --c-bg-header-dropdown: hsl(0 0% 100% / 0.75);
  --c-font-dim: hsl(from var(--c-font) h s 31%);
  --c-font-dimmer: hsl(from var(--c-font) h s 52%);
  --c-font-clear: hsl(from var(--c-font) h s 11%);
  --c-font-clearer: hsl(from var(--c-font) h s 7%);
  --c-font-page: hsl(from var(--c-font) h s 7%);
  --c-font-shadow: hsl(0 0% 83% / 0.66);
  --c-metal-top: hsl(37 5% 96% / 0.56);
  --c-metal-bottom: hsl(37 5% 93% / 0.66);
  --c-metal-top-hover: hsl(0 0% 78% / 0.4);
  --c-metal-bottom-hover: hsl(0 0% 78% / 0.45);
  --c-shade: hsl(0 0% 84%);
  --c-page-mask: hsl(0 0% 100% / 0.4);
}

.is2d .pawn.white {
  background-image: var(---white-pawn);
}

.is2d .knight.white {
  background-image: var(---white-knight);
}

.is2d .bishop.white {
  background-image: var(---white-bishop);
}

.is2d .rook.white {
  background-image: var(---white-rook);
}

.is2d .queen.white {
  background-image: var(---white-queen);
}

.is2d .king.white {
  background-image: var(---white-king);
}

.is2d .pawn.black {
  background-image: var(---black-pawn);
}

.is2d .knight.black {
  background-image: var(---black-knight);
}

.is2d .bishop.black {
  background-image: var(---black-bishop);
}

.is2d .rook.black {
  background-image: var(---black-rook);
}

.is2d .queen.black {
  background-image: var(---black-queen);
}

.is2d .king.black {
  background-image: var(---black-king);
}