* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; font-family: 'Bricolage Grotesque', sans-serif; }

/* Font swap bounce */
@keyframes bounceIn {
  0%   { transform: scale(0.82) rotate(-1deg); opacity: 0.35; }
  55%  { transform: scale(1.06) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.font-swap { animation: bounceIn 0.38s cubic-bezier(.34,1.56,.64,1); }

/* Sparkle particles */
@keyframes sparkleFloat {
  0%   { transform: translate(-50%, 0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -90px) scale(0.3) rotate(60deg); opacity: 0; }
}
.sparkle {
  position: fixed;
  pointer-events: none;
  font-size: 26px;
  z-index: 60;
  animation: sparkleFloat 1s ease-out forwards;
}

/* Toast pop */
@keyframes toastIn {
  0% { transform: translateX(-50%) translateY(-16px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.toast { animation: toastIn 0.3s cubic-bezier(.34,1.56,.64,1); }

/* Hint pulse */
@keyframes softPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.hint { animation: softPulse 1.6s ease-in-out infinite; }

/* Interactive elements */
.ctl-btn { transition: transform .12s ease, filter .12s ease; }
.ctl-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.ctl-btn:active { transform: translateY(0) scale(0.97); }

.chip { transition: transform .12s ease; }
.chip:hover { transform: translateY(-3px) scale(1.03); }

.dropzone:hover { filter: brightness(1.02); }

/* Scrollbars */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(232,72,31,0.4); border-radius: 4px; }

/* Range input tidy on mobile */
input[type="range"] { cursor: pointer; height: 4px; }

@media (max-width: 640px) {
  .ctl-btn { flex: 1 1 auto; }
}