:root {
  color-scheme: light;
  --cat-ink: #241b2f;
  --cat-ink-soft: #594b66;
  --cat-cream: #f7f2d7;
  --cat-paper: #fffdf0;
  --cat-purple: #61358f;
  --cat-purple-dark: #3a2056;
  --cat-lilac: #bba1d5;
  --cat-green: #5e9c43;
  --cat-green-dark: #3d6c2c;
  --cat-lime: #dfff55;
  --cat-pink: #d888a1;
  --cat-line: rgba(36, 27, 47, 0.16);
  --cat-shadow: 0 16px 0 rgba(58, 32, 86, 0.12);
}

html {
  background: var(--cat-cream);
}

body {
  min-height: 100vh;
  color: var(--cat-ink);
  background-color: var(--cat-cream);
  background-image:
    linear-gradient(45deg, rgba(97, 53, 143, 0.045) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(97, 53, 143, 0.045) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(94, 156, 67, 0.045) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(94, 156, 67, 0.045) 75%);
  background-position: 0 0, 0 22px, 22px -22px, -22px 0;
  background-size: 44px 44px;
  font-family: "Nunito Sans", system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 4%, rgba(216, 136, 161, 0.28), transparent 23rem),
    radial-gradient(circle at 88% 10%, rgba(223, 255, 85, 0.22), transparent 22rem);
}

a {
  color: inherit;
}

header#header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 5px solid var(--cat-lime);
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.13), transparent 14rem),
    linear-gradient(110deg, var(--cat-purple-dark), var(--cat-purple) 58%, #7d4aa6);
  box-shadow: 0 7px 0 rgba(58, 32, 86, 0.18);
}

.header-bar {
  min-height: 72px;
}

.logo-text {
  color: var(--cat-paper);
  font-family: "Fredoka", "Nunito Sans", sans-serif;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 3px 3px 0 var(--cat-green-dark);
  filter: none;
  text-transform: none;
}

.menu-link {
  color: var(--cat-paper);
  text-shadow: none;
}

.menu-link:hover,
.menu-link:focus-visible {
  color: var(--cat-ink);
  background: var(--cat-lime);
}

.icon-menu-mobile svg {
  fill: var(--cat-lime);
}

.mobile-dropdown {
  position: sticky;
  top: 77px;
  z-index: 95;
  border-bottom: 3px solid var(--cat-lime);
  background: var(--cat-purple-dark);
}

.nav-mobile-controler > ul > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
}

.menu-link-mobile {
  color: var(--cat-paper);
  text-shadow: none;
}

#game-page {
  padding: 26px 0 12px;
}

.frame-box-game {
  overflow: hidden;
  border: 2px solid var(--cat-purple-dark);
  border-radius: 18px;
  background: var(--cat-paper);
  box-shadow: var(--cat-shadow);
}

.game-player__stage {
  background-color: var(--cat-purple-dark) !important;
}

.header-game {
  border-top: 3px solid var(--cat-lime);
  background:
    linear-gradient(90deg, var(--cat-purple-dark), var(--cat-purple)) !important;
}

.box-header h1 {
  color: var(--cat-paper);
  font-family: "Fredoka", "Nunito Sans", sans-serif;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.header-game-extend > span:hover {
  background: rgba(223, 255, 85, 0.16);
}

.uk-p10 {
  padding: clamp(12px, 2.5vw, 28px);
  border: 2px solid var(--cat-purple-dark);
  border-radius: 18px;
  background: rgba(255, 253, 240, 0.94);
  box-shadow: var(--cat-shadow);
}

.text-area {
  color: var(--cat-ink);
  line-height: 1.78;
}

.text-area--content {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 18px);
  font-size: 1.04rem;
}

.text-area--content > p {
  margin: 0 0 1.1rem;
}

.text-area h1,
.text-area h2,
.text-area h3,
.text-area h4,
.text-area h5,
.text-area h6 {
  color: var(--cat-purple-dark);
  font-family: "Fredoka", "Nunito Sans", sans-serif;
  text-transform: none;
}

.text-area h2 {
  margin: 2.5rem 0 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 4px solid var(--cat-lime);
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  line-height: 1.16;
}

.text-area h3 {
  margin: 1.8rem 0 0.55rem;
  font-size: 1.28rem;
  line-height: 1.25;
}

.text-area strong {
  color: #4d2874;
}

.text-area a {
  color: #4f7f37;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--cat-lime);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.text-area ul,
.text-area ol {
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
}

.text-area li {
  margin: 0.45rem 0;
}

.us-game-info {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #eee5f5;
}

.bread-crumb-item {
  color: var(--cat-ink-soft);
  font-size: 0.92rem;
  font-weight: 800;
}

.bread-after::before {
  color: var(--cat-green);
}

.content-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-area--content .content-gallery-item {
  overflow: hidden;
  border: 2px solid var(--cat-line);
  border-radius: 14px;
  background: #f0ead0;
  box-shadow: 8px 8px 0 rgba(97, 53, 143, 0.1);
}

.text-area--content .content-gallery-item img {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 9px;
}

.text-area--content .content-gallery-item figcaption {
  color: var(--cat-ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}

.content-video {
  overflow: hidden;
  border: 2px solid var(--cat-purple-dark);
  border-radius: 14px;
  background: var(--cat-purple-dark);
  box-shadow: 8px 8px 0 rgba(94, 156, 67, 0.18);
}

.content-faq-item {
  margin: 0 0 12px;
  padding: 16px 18px;
  border: 1px solid var(--cat-line);
  border-left: 6px solid var(--cat-green);
  border-radius: 12px;
  background: #f7f3dc;
}

.content-faq-item p {
  margin: 0;
}

.content-faq-item p + p {
  margin-top: 6px;
  color: var(--cat-ink-soft);
}

.uk-grid-clayover {
  margin: 20px 0;
  border: 2px solid var(--cat-purple-dark);
  border-radius: 16px;
  background: #e6dded;
}

.uk-game-link {
  border-color: var(--cat-purple);
  background: var(--cat-paper);
}

.uk-game-link:hover,
.uk-game-link:focus-visible {
  border-color: var(--cat-lime) !important;
  background: var(--cat-lime);
  box-shadow: 0 0 0 5px rgba(223, 255, 85, 0.28);
}

.site-footer {
  border-top: 5px solid var(--cat-lime) !important;
  background:
    radial-gradient(circle at 85% 0, rgba(216, 136, 161, 0.18), transparent 20rem),
    linear-gradient(180deg, var(--cat-purple-dark), #24152f) !important;
}

.site-footer__title {
  font-family: "Fredoka", "Nunito Sans", sans-serif;
}

.site-footer__heading-icon,
.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--cat-lime) !important;
}

.back-to-top {
  border-color: var(--cat-lime) !important;
  background: linear-gradient(180deg, var(--cat-green), var(--cat-green-dark)) !important;
  color: var(--cat-paper) !important;
}

.legal-document__header,
.legal-document__section {
  border-color: var(--cat-line) !important;
  background: #f6f0d9 !important;
}

.legal-document__header {
  border-left-color: var(--cat-green) !important;
}

.legal-document__header h1,
.legal-document__header p,
.legal-document__section p {
  color: var(--cat-ink) !important;
}

.legal-document__section h2 {
  color: var(--cat-purple-dark) !important;
}

.legal-document__updated {
  background: var(--cat-lime) !important;
  color: var(--cat-ink) !important;
}

.hero.hero--game {
  max-width: 820px;
  margin: 40px auto;
  padding: clamp(26px, 5vw, 54px);
  border: 2px solid var(--cat-purple-dark);
  border-radius: 18px;
  background: var(--cat-paper);
  box-shadow: var(--cat-shadow);
}

.hero__copy {
  display: grid;
  gap: 14px;
}

.hero__copy h1 {
  color: var(--cat-purple-dark);
  font-family: "Fredoka", "Nunito Sans", sans-serif;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1;
}

.hero__lede {
  color: var(--cat-ink-soft);
}

.button--accent {
  width: fit-content;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--cat-green);
  color: white;
  font-weight: 900;
}

@media (max-width: 767px) {
  header#header {
    border-bottom-width: 4px;
  }

  .header-bar {
    min-height: 62px;
  }

  .bar-logo {
    max-width: calc(100vw - 170px);
  }

  .logo-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #game-page {
    padding-top: 16px;
  }

  .container {
    padding: 0 10px;
  }

  .frame-box-game,
  .uk-p10 {
    border-radius: 13px;
    box-shadow: 0 8px 0 rgba(58, 32, 86, 0.1);
  }

  .box-header h1 {
    max-width: calc(100vw - 202px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.98rem;
  }

  .text-area--content {
    padding: 4px;
    font-size: 1rem;
  }

  .text-area h2 {
    margin-top: 2rem;
  }

  .text-area ul,
  .text-area ol {
    padding-left: 1.2rem;
  }

  .content-gallery {
    grid-template-columns: 1fr;
  }

  .content-faq-item {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}