.item.deco-neon {
  background: #111;
  color: #0ff;
  padding: 10px 16px;
  border: 2px solid #0ff;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 5px #0ff, 0 0 20px #0ff;
  transition: .3s;
}
.item.deco-neon:hover { box-shadow: 0 0 10px #0ff, 0 0 40px #0ff, 0 0 80px #0ff; }

.item.deco-gradient {
  padding: 12px 28px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(270deg,#ff6ec4,#7873f5,#4ade80);
  background-size: 600% 600%;
  animation: gradientMove 6s ease infinite;
}
@keyframes gradientMove { 0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;} }


/* Fancy Buttons */


.item.deco-sparkle {
  background: #673ab7;
  color: #fff;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.item.deco-sparkle::before, .btn-sparkle::after {
  position: absolute;
  font-size: 16px;
  animation: sparkleFly 3s linear infinite;
  opacity: .8;
}
.item.deco-sparkle::before { content: "✨"; top: 0; }
.item.deco-sparkle::after { content: "💫"; bottom: 0; animation-delay: 1.5s; }
@keyframes sparkleFly {
  0%{left:-20px;opacity:0;}20%{opacity:1;}50%{left:50%;}100%{left:120%;opacity:0;}
}

.btn-lightning {
  position: relative;
  background: #000;
  color: #fff;
  padding: 10px 20px;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}
.btn-lightning::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  animation: lightning 2s infinite;
}
@keyframes lightning { 0%{left:-100%;}50%{left:100%;}100%{left:100%;} }


.btn-hologram {
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 12px;
  background: linear-gradient(90deg,#0ff,#f0f,#0ff);
  background-size: 300% 300%;
  animation: hologram 6s linear infinite;
  cursor: pointer;
}
@keyframes hologram { 0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;} }

.btn-diag-stripe {
  background: repeating-linear-gradient(-45deg,#ff9a9e 0 10px,#fad0c4 10px 20px,#fbc2eb 20px 30px,#a1c4fd 30px 40px);
  color: #111;
  font-weight: bold;
  animation: stripeMove 3s linear infinite;
}
@keyframes stripeMove { 0%{background-position:0 0;}100%{background-position:60px 0;} }

.btn-confetti {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,#fef9c3,#fde68a);
  color: #111;
  font-weight: bold;
}
.btn-confetti::before, .btn-confetti::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -30px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: #ff0;
  animation: confettiFall 3s linear infinite;
}
.btn-confetti::before {
  box-shadow: -40px -10px #f00, -25px -5px #0ff, -15px 10px #8b5cf6, 0 -15px #60a5fa,
  20px -8px #34d399, 30px -12px #f59e0b, 45px -18px #ef4444, 60px -10px #3b82f6,
  75px -15px #e879f9, -50px -12px #22d3ee, -65px -8px #84cc16, -80px -16px #a855f7,
  90px -20px #fb923c, 110px -15px #06b6d4, -100px -18px #f87171, 130px -22px #4ade80;
  animation-duration: 3.2s;
}
.btn-confetti::after {
  box-shadow: -45px -18px #3b82f6, -20px -8px #f472b6, 15px -12px #a3e635, 35px -20px #f59e0b,
  55px -25px #10b981, 70px -10px #6366f1, 95px -15px #f43f5e, 115px -18px #22d3ee,
  135px -12px #fb923c, 150px -16px #c084fc, -60px -20px #facc15, -90px -15px #2dd4bf,
  -120px -22px #ef4444;
  animation-duration: 3.6s;
  animation-delay: 1.2s;
}
@keyframes confettiFall { 0%{transform:translateY(-30px);opacity:1;}100%{transform:translateY(120px);opacity:0;} }

@media (max-width:600px){ .item { font-size:1em; } }