:root {
  --kli-navy: #082b63;
  --kli-navy-deep: #061f4a;
  --kli-green: #00a651;
  --kli-green-dark: #008a44;
  --kli-yellow: #ffd23f;
  --kli-yellow-soft: #fff4c2;
  --kli-red: #ef3e42;
  --kli-blue: #2c8bff;
  --kli-purple: #8c5cf5;
  --kli-cream: #fffdf6;
  --kli-sky: #eaf2ff;
  --kli-muted: #f4f7fc;
  --kli-muted-text: #5a6d8a;
  --kli-border: #e6ecf5;
  --kli-shadow: 0 10px 30px -12px rgb(8 43 99 / 18%);
  --kli-card-shadow: 0 6px 20px -8px rgb(8 43 99 / 15%);
}

html { background: var(--kli-cream); }
body {
  font-family: "Nunito", sans-serif !important;
  color: var(--kli-navy);
  background: linear-gradient(180deg, #fff 0%, var(--kli-sky) 48%, var(--kli-cream) 100%) fixed !important;
}
h1, h2, h3, h4, h5, h6, .font-display {
  font-family: "Fredoka", "Nunito", sans-serif;
  letter-spacing: -0.02em;
}
::selection { background: var(--kli-yellow); color: var(--kli-navy-deep); }

.brand-blue { color: var(--kli-navy) !important; }
.brand-yellow { color: #b77b00 !important; }
.brand-green { color: var(--kli-green) !important; }
.brand-pink { color: var(--kli-red) !important; }
.bg-brand-blue { background: linear-gradient(135deg, #0a2f6e, var(--kli-navy) 50%, var(--kli-navy-deep)) !important; }
.bg-brand-yellow { background: linear-gradient(180deg, #ffe27a, var(--kli-yellow)) !important; }
.bg-brand-green { background: linear-gradient(180deg, #17c063, var(--kli-green)) !important; }
.bg-brand-pink { background-color: var(--kli-red) !important; }

header.bg-white\/80 {
  background: rgb(255 255 255 / 94%) !important;
  border-bottom: 1px solid var(--kli-border);
  box-shadow: 0 4px 18px rgb(8 43 99 / 8%) !important;
}
.nav-link {
  color: var(--kli-navy) !important;
  position: relative;
  transition: color .2s ease, transform .2s ease !important;
}
.nav-link:hover { color: var(--kli-green) !important; transform: translateY(-2px) !important; }

.cartoon-card, .kli-card {
  background: rgb(255 255 255 / 96%) !important;
  border: 1px solid var(--kli-border);
  border-radius: 1.75rem !important;
  box-shadow: var(--kli-card-shadow) !important;
}
.cartoon-card:hover, .kli-card:hover { box-shadow: var(--kli-shadow) !important; }

.btn {
  border: 1px solid rgb(8 43 99 / 8%);
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700 !important;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 38%), inset 0 -3px 0 rgb(8 43 99 / 14%), 0 7px 16px rgb(8 43 99 / 13%) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
.btn:hover { transform: translateY(-2px) !important; filter: brightness(1.02); }
.btn:active { transform: translateY(1px) !important; }
.btn-primary, .btn-secondary {
  background: linear-gradient(180deg, #ffe27a, var(--kli-yellow)) !important;
  color: var(--kli-navy-deep) !important;
}
.btn-submit { background: linear-gradient(180deg, #17c063, var(--kli-green)) !important; color: #fff !important; }
.btn-gemini { background: linear-gradient(135deg, var(--kli-navy), var(--kli-blue)) !important; color: #fff !important; }

.form-input,
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: var(--kli-border) !important;
  color: var(--kli-navy-deep);
}
.form-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--kli-green) !important;
  box-shadow: 0 0 0 4px rgb(0 166 81 / 13%) !important;
}

.footer-wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23082b63' d='M0,192L48,181.3C96,171,192,149,288,160C384,171,480,213,576,218.7C672,224,768,192,864,181.3C960,171,1056,181,1152,197.3C1248,213,1344,235,1392,245.3L1440,256V320H0Z'/%3E%3C/svg%3E") !important;
}
footer.bg-brand-blue { background: var(--kli-navy-deep) !important; }

/* Align the most common Tailwind accents without flattening the playful colors. */
.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800 { color: var(--kli-navy) !important; }
.hover\:text-pink-500:hover, .hover\:text-blue-600:hover { color: var(--kli-green) !important; }
.bg-blue-500, .bg-blue-600 { background-color: var(--kli-navy) !important; }
.hover\:bg-blue-600:hover { background-color: var(--kli-navy-deep) !important; }
.bg-blue-50, .bg-blue-100 { background-color: var(--kli-sky) !important; }
.bg-green-500, .bg-green-600 { background-color: var(--kli-green) !important; }
.bg-yellow-50, .bg-yellow-100 { background-color: var(--kli-yellow-soft) !important; }
.bg-yellow-300, .bg-yellow-400, .bg-yellow-500 { background-color: var(--kli-yellow) !important; }
.text-gray-500, .text-gray-600 { color: var(--kli-muted-text) !important; }
.text-gray-700, .text-gray-800, .text-gray-900 { color: var(--kli-navy) !important; }

/* Standalone game screens */
.kli-gameboard { background: linear-gradient(180deg, #fff 0%, var(--kli-sky) 55%, var(--kli-cream) 100%) !important; }
.kli-gameboard > header {
  background: rgb(255 255 255 / 94%) !important;
  border-bottom: 1px solid var(--kli-border);
  box-shadow: 0 4px 18px rgb(8 43 99 / 8%) !important;
}
.kli-featured-game, .kli-modal-heading { background: linear-gradient(135deg, #0a2f6e, var(--kli-navy) 55%, var(--kli-green)) !important; }
.kli-green-button {
  background: linear-gradient(180deg, #17c063, var(--kli-green));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 30%), inset 0 -3px 0 rgb(0 0 0 / 12%), 0 7px 16px rgb(8 43 99 / 18%);
}
.kli-yellow-button {
  background: linear-gradient(180deg, #ffe27a, var(--kli-yellow));
  color: var(--kli-navy-deep);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 45%), inset 0 -3px 0 rgb(8 43 99 / 13%), 0 7px 16px rgb(0 0 0 / 18%);
}
.kli-interactive-play { background: var(--kli-navy-deep) !important; }
.kli-game-header { background: linear-gradient(135deg, #0a2f6e, var(--kli-navy-deep)) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}