/* Clickaroo Games brand kit - include in every game:
   <link rel="stylesheet" href="https://clickaroo.jonabalos.com/games/brand/brand.css?v=1">
   Gives you the logo colors as CSS variables, the Fredoka display font,
   and a few ready-made pieces (.ck-btn, .ck-card, .ck-title). */
@font-face {
  font-family: "Fredoka";
  src: url("fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
:root {
  /* the logo's letters, left to right */
  --ck-teal: #16b2ae;
  --ck-purple: #8b4fc8;
  --ck-pink: #e8457f;
  --ck-orange: #f5922b;
  --ck-yellow: #ffc933;
  --ck-green: #7cbf2e;
  /* the "3D PRINTS" badge and the kangaroo */
  --ck-navy: #1f2340;
  --ck-roo: #e8a55a;
  /* surfaces */
  --ck-cream: #fff9ef;
  --ck-paper: #ffffff;
  --ck-ink: #22232a;
  --ck-ink-soft: #5a5c66;
  --ck-line: #ece6da;
  --ck-radius: 20px;
  --ck-display: "Fredoka", "Baloo 2", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --ck-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.ck-title { font-family: var(--ck-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; }
.ck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--ck-display); font-weight: 600; font-size: 1.08rem; text-decoration: none;
  color: #fff; background: var(--ck-teal);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ck-teal) 70%, #000);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.ck-btn:hover { text-decoration: none; filter: brightness(1.05); }
.ck-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ck-teal) 70%, #000); }
.ck-btn:focus-visible { outline: 3px solid var(--ck-yellow); outline-offset: 3px; }
.ck-btn.alt { background: var(--ck-purple); box-shadow: 0 4px 0 color-mix(in srgb, var(--ck-purple) 70%, #000); }
.ck-card { background: var(--ck-paper); border-radius: var(--ck-radius); box-shadow: 0 2px 4px rgba(20, 20, 30, 0.04), 0 12px 30px rgba(20, 20, 30, 0.08); }
@media (prefers-reduced-motion: reduce) { .ck-btn { transition: none; } }