/* MuteChess / Quiet Signal. Keep native Lichess geometry and chess semantics. */
html[data-brand="mutechess"] {
  --c-bg: #1c2728;
  --c-bg-box: #1c2728;
  --c-bg-high: #263332;
  --c-bg-mid: #202d2c;
  --c-bg-low: #2c3b36;
  --c-bg-popup: #24322e;
  --c-bg-page: #101719;
  --c-bg-zebra: #202d2b;
  --c-bg-zebra2: #293932;
  --c-bg-header-dropdown: var(--c-bg-popup);
  --c-bg-input: #151f1e;
  --c-page-input: var(--c-bg-input);
  --c-bg-variation: #172320;
  --c-bg-opaque: #1c2728;
  --c-body-gradient: #101719;
  --c-font: #e7e9dc;
  --c-font-dim: #a2b0ac;
  --c-font-dimmer: #92a39b;
  --c-font-clear: #e7e9dc;
  --c-font-clearer: #f3f4ea;
  --c-font-page: #a2b0ac;
  --c-font-shadow: transparent;
  --c-primary: #a7d6bb;
  --c-primary-clear: #c4e4ce;
  --c-primary-dim: #8ab79e;
  --c-secondary: #9bbfa8;
  --c-secondary-dim: #82a88f;
  --c-secondary-dimmer: #62846e;
  --c-link: #a7d6bb;
  --c-link-clear: #c4e4ce;
  --c-link-dim: #8ab79e;
  --c-link-hover: #d5efdb;
  --c-border: #3d4e47;
  --c-border-page: #304139;
  --c-border-light: #62776b;
  --c-pool-button: #1c2728;
  --c-metal-top: #263332;
  --c-metal-bottom: #202d2b;
  --c-metal-top-hover: #31463b;
  --c-metal-bottom-hover: #293c33;
  --mutechess-on-action: #101719;
}

html[data-brand="mutechess"].light {
  --c-bg: #fafbf6;
  --c-bg-box: #fafbf6;
  --c-bg-high: #e5ece2;
  --c-bg-mid: #f1f5ec;
  --c-bg-low: #dce5d9;
  --c-bg-popup: #fafbf6;
  --c-bg-page: #eef2e9;
  --c-bg-zebra: #f0f4e9;
  --c-bg-zebra2: #e3ebdf;
  --c-bg-input: #f6f9f0;
  --c-bg-variation: #e3ebdf;
  --c-bg-opaque: #fafbf6;
  --c-body-gradient: #eef2e9;
  --c-font: #24312d;
  --c-font-dim: #53635b;
  --c-font-dimmer: #64756b;
  --c-font-clear: #172620;
  --c-font-clearer: #101719;
  --c-font-page: #53635b;
  --c-primary: #315f4d;
  --c-primary-clear: #244e3b;
  --c-primary-dim: #3a6d54;
  --c-secondary: #3b6a54;
  --c-secondary-dim: #315b47;
  --c-secondary-dimmer: #244e3b;
  --c-link: #315f4d;
  --c-link-clear: #244e3b;
  --c-link-dim: #3a6d54;
  --c-link-hover: #193d2d;
  --c-border: #c0cdbf;
  --c-border-page: #c6d1c7;
  --c-border-light: #a0b39e;
  --c-pool-button: #fafbf6;
  --c-metal-top: #f4f7ee;
  --c-metal-bottom: #e8eee2;
  --c-metal-top-hover: #e0e9d9;
  --c-metal-bottom-hover: #d6e2cf;
  --mutechess-on-action: #ffffff;
}

/* Preserve the user's native transparent background and its image. */
html[data-brand="mutechess"].transp {
  --c-bg-page: transparent;
  --c-body-gradient: transparent;
  --c-bg-box: rgb(28 39 40 / 92%);
  --c-bg-popup: rgb(28 39 40 / 97%);
}
html[data-brand="mutechess"].transp.light {
  --c-bg-box: rgb(250 251 246 / 94%);
  --c-bg-popup: rgb(250 251 246 / 98%);
}
html[data-brand="mutechess"]:not(.transp) body {
  background: var(--c-bg-page);
}

html[data-brand="mutechess"] .site-title .nosweat-header-icon {
  width: 38px;
  height: 38px;
  margin-inline-end: 7px;
}
html[data-brand="mutechess"] .site-title .nosweat-wordmark {
  width: 174px;
  height: 50px;
  object-fit: contain;
}
html[data-brand="mutechess"] .nosweat-login-wordmark {
  width: 300px;
  max-width: 100%;
  height: 72px;
}
html[data-brand="mutechess"] .site-title .nosweat-light {
  display: none;
}
html[data-brand="mutechess"].light .site-title .nosweat-dark {
  display: none;
}
html[data-brand="mutechess"].light .site-title .nosweat-light {
  display: block;
}

/* Contrasting ink on primary/positive surfaces, without recoloring errors. */
html[data-brand="mutechess"]
  .button:not(.button-red):not(.button-brag):not(.button-metal):not(
    .button-empty
  ),
html[data-brand="mutechess"] .fbt.active,
html[data-brand="mutechess"] .mselect__item {
  --c-over: var(--mutechess-on-action);
  text-shadow: none;
}
html[data-brand="mutechess"] .button:not(.button-empty) {
  box-shadow: none;
}
html[data-brand="mutechess"] .button-metal {
  background: var(--c-bg-high);
  border: 1px solid var(--c-border);
  text-shadow: none;
}
html[data-brand="mutechess"] .button.active:not(.button-red):not(.button-metal),
html[data-brand="mutechess"]
  .button.active:not(.button-red):not(.button-metal):hover {
  color: var(--mutechess-on-action);
}
html[data-brand="mutechess"]
  :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}
html[data-brand="mutechess"] .lobby__app__content {
  background-size: min(55%, 230px);
  background-position: center;
  background-repeat: no-repeat;
}
html[data-brand="mutechess"] .tabs-horiz :is(span, button).active {
  color: var(--c-primary);
  border-color: var(--c-primary);
}
html[data-brand="mutechess"] .mutechess-intro {
  padding: 0.4rem 0 1rem;
  color: var(--c-font-dim);
  font-size: 0.9rem;
  line-height: 1.6;
}
html[data-brand="mutechess"] .mutechess-intro strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--c-font);
  font-size: 1rem;
}
/* Only the new board theme changes; existing native board choices survive. */
html[data-brand="mutechess"]
  body[data-board="quiet-signal"]
  .is2d
  square.last-move {
  background-color: rgb(217 178 95 / 42%);
}
@media (max-width: 799px) {
  html[data-brand="mutechess"] .site-title {
    display: flex;
    padding-inline: 0.35rem;
    gap: 0;
  }
  html[data-brand="mutechess"] .site-title .nosweat-wordmark {
    display: none !important;
  }
  html[data-brand="mutechess"] .site-title .nosweat-header-icon {
    width: 36px;
    height: 36px;
    margin-inline-end: 0;
  }
}