@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Manrope:wght@400;500;700;800&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

.kf-display {
  font-family: 'Bangers', 'Manrope', cursive;
  letter-spacing: 0.04em;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #12111c; }
::-webkit-scrollbar-thumb { background: #f97316; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #fb923c; }

.kf-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kf-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.kf-halftone {
  background-image: radial-gradient(rgba(250, 204, 21, 0.16) 1.4px, transparent 1.6px);
  background-size: 16px 16px;
}

.kf-hero-slant {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

.kf-sticker {
  transform: rotate(-6deg);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  border: 2px solid #181825;
}

.kf-sticker:hover {
  transform: rotate(-3deg) scale(1.03);
}

.kf-card {
  background: linear-gradient(160deg, #201a33 0%, #251d3d 60%, #1c1730 100%);
}

.kf-card-notch {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.kf-img-slant {
  clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
}

.kf-count-box {
  background: #12111c;
  border: 2px solid #f97316;
}

#kf-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #12111c;
  border-top: 3px solid #f97316;
}
#kf-cookie-banner.kf-hidden { display: none; }

.kf-copy-flash {
  animation: kf-flash 0.6s ease;
}
@keyframes kf-flash {
  0% { background-color: rgba(249, 115, 22, 0.35); }
  100% { background-color: transparent; }
}

.kf-pill-active {
  background: #f97316;
  color: #181825;
}

.kf-zigzag-divider {
  height: 10px;
  background-image: linear-gradient(135deg, #f97316 25%, transparent 25%), linear-gradient(225deg, #f97316 25%, transparent 25%);
  background-position: 0 0;
  background-size: 14px 14px;
  background-repeat: repeat-x;
  opacity: 0.7;
}