/* Gradient theme: an optional, more colourful look on top of the Flex dark theme. */

:root[data-theme="gradient"] {
  color-scheme: dark;
}

:root[data-theme="gradient"] body {
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e, #1a0b2e);
  background-size: 300% 300%;
  background-attachment: fixed;
  animation: msx-gradient 20s ease infinite;
}

@keyframes msx-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

:root[data-theme="gradient"] aside {
  background: linear-gradient(180deg, rgba(48, 43, 99, .94), rgba(26, 11, 46, .97));
  border-right: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 10px 0 36px rgba(0, 0, 0, .22);
}

:root[data-theme="gradient"] aside a:hover,
:root[data-theme="gradient"] main nav a:hover {
  color: #ffd166;
}

:root[data-theme="gradient"] a {
  color: #ffa07a;
}

:root[data-theme="gradient"] a:hover {
  color: #ffd166;
}

:root[data-theme="gradient"] main article.index,
:root[data-theme="gradient"] main article.single {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:root[data-theme="gradient"] main article.index {
  padding: 22px 28px;
  margin: 0 auto 18px;
}

:root[data-theme="gradient"] main article.single {
  padding: 26px 34px;
}

:root[data-theme="gradient"] main article.index hr {
  display: none;
}

:root[data-theme="gradient"] main article.index header p,
:root[data-theme="gradient"] main article.single header p {
  color: #b9b3d4;
}

:root[data-theme="gradient"] a.btn,
:root[data-theme="gradient"] .game-actions button {
  background-color: transparent;
  background-image: linear-gradient(135deg, #7c3aed, #db2777 58%, #f97316);
  box-shadow: 0 6px 18px rgba(219, 39, 119, .32);
}

:root[data-theme="gradient"] a.btn:hover,
:root[data-theme="gradient"] .game-actions button:hover {
  background-image: linear-gradient(135deg, #8b5cf6, #ec4899 58%, #fb923c);
  filter: brightness(1.05);
}

:root[data-theme="gradient"] ::selection {
  background: rgba(219, 39, 119, .45);
  color: #fff;
}

:root[data-theme="gradient"] .theme-toggle {
  color: #e8e2ff;
  border-color: rgba(255, 255, 255, .22);
}

:root[data-theme="gradient"] .theme-toggle:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .42);
}

@media (max-width: 600px) {
  :root[data-theme="gradient"] main article.index {
    padding: 18px 16px;
    width: 92%;
  }

  :root[data-theme="gradient"] main article.single {
    padding: 20px 16px;
    width: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="gradient"] body {
    animation: none;
  }
}