* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #030305;
  cursor: crosshair;
}

#canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#btn-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 50;
  cursor: pointer;
  perspective: 800px;
}

#btn {
  position: relative;
  width: 86px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: btnHoverFloat 3.2s ease-in-out infinite alternate;
}

#btn:hover {
  transform: scale(1.15) translateY(-4px) rotateX(10deg);
}

#btn:active {
  transform: scale(0.92) translateY(2px);
}

@keyframes btnHoverFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-2deg); }
  100% { transform: translateY(2px) rotate(2deg); }
}

.btn-aura {
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 16px;
  z-index: 1;
  filter: blur(10px);
  opacity: 0.7;
  transition: all 0.4s ease;
}

.btn-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(8, 12, 20, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: all 0.4s ease;
}

.btn-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

#btn:hover .btn-img {
  transform: scale(1.08);
}

.btn-shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-25deg);
  animation: btnShine 3.6s infinite ease-in-out;
  z-index: 4;
  pointer-events: none;
}

@keyframes btnShine {
  0%, 30% { left: -120%; }
  70%, 100% { left: 160%; }
}

.btn-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  z-index: 5;
  pointer-events: none;
  transition: all 0.4s ease;
}

.style-0 .btn-aura { background: linear-gradient(90deg, #00ff66, #00f0ff, #ff0077); }
.style-0 .btn-frame { border: 1.5px solid rgba(0, 255, 102, 0.6); }
.style-0 .btn-border { box-shadow: inset 0 0 8px rgba(0, 255, 102, 0.3); }

.style-1 .btn-aura { background: radial-gradient(circle, #ff00aa, #00f0ff); }
.style-1 .btn-frame { border: 1.5px dashed #00f0ff; border-radius: 20px; }
.style-1 .btn-border { box-shadow: inset 0 0 10px rgba(255, 0, 170, 0.4); }

.style-2 .btn-aura { background: #00f0ff; opacity: 0.85; }
.style-2 .btn-frame { border: 2px solid #00f0ff; box-shadow: 0 0 16px #00f0ff; }
.style-2 .btn-border { border: 1px solid rgba(255, 255, 255, 0.6); }

.style-3 .btn-aura { background: #bc13fe; }
.style-3 .btn-frame { border: 1.5px solid #bc13fe; border-radius: 24px; }
.style-3 .btn-border { box-shadow: inset 0 0 12px #bc13fe; }

.style-4 .btn-aura { background: #00ff66; opacity: 0.8; }
.style-4 .btn-frame { border: 1.5px solid #00ff66; background: rgba(0, 20, 10, 0.85); }
.style-4 .btn-border { box-shadow: inset 0 0 10px #00ff66; }

.style-5 .btn-aura { background: linear-gradient(135deg, #ff5e00, #ff0055); }
.style-5 .btn-frame { border: 1.5px solid #ff7700; }
.style-5 .btn-border { box-shadow: inset 0 0 12px #ff5500; }

.style-6 .btn-aura { background: linear-gradient(90deg, #ff007f, #00f0ff); }
.style-6 .btn-frame { border: 2px solid #ff007f; box-shadow: 0 0 14px #00f0ff; }
.style-6 .btn-border { border-bottom: 2px solid #00f0ff; }

.style-7 .btn-aura { background: linear-gradient(135deg, #134074, #8da9c4); }
.style-7 .btn-frame { border: 1.5px solid #8da9c4; border-radius: 18px; }
.style-7 .btn-border { box-shadow: inset 0 0 8px #8da9c4; }

.style-8 .btn-aura { background: radial-gradient(circle, #f05941, #22092c); }
.style-8 .btn-frame { border: 2px solid #f05941; }
.style-8 .btn-border { box-shadow: inset 0 0 14px #be3144; }

.style-9 .btn-aura { background: #1ba098; }
.style-9 .btn-frame { border: 1.5px solid #1ba098; box-shadow: 0 0 12px #1ba098; }
.style-9 .btn-border { border-left: 3px solid #deb992; border-right: 3px solid #deb992; }

.style-10 .btn-aura { background: #ff7700; opacity: 0.9; }
.style-10 .btn-frame { border: 2px solid #ffd000; box-shadow: 0 0 15px #ff3c00; }
.style-10 .btn-border { box-shadow: inset 0 0 10px #ffd000; }

.style-11 .btn-aura { background: #e94560; }
.style-11 .btn-frame { border: 1.5px solid #e94560; }
.style-11 .btn-border { box-shadow: inset 0 0 10px #e94560; }

.style-12 .btn-aura { background: #3282b8; }
.style-12 .btn-frame { border: 1.5px solid #bbe1fa; border-radius: 20px; }
.style-12 .btn-border { box-shadow: inset 0 0 12px #3282b8; }

.style-13 .btn-aura { background: #c72c41; }
.style-13 .btn-frame { border: 2px solid #ee4540; }
.style-13 .btn-border { box-shadow: inset 0 0 12px #c72c41; }

.style-14 .btn-aura { background: radial-gradient(circle, #f72585, #4cc9f0); }
.style-14 .btn-frame { border: 2px solid #4cc9f0; box-shadow: 0 0 16px #f72585; border-radius: 20px; }
.style-14 .btn-border { box-shadow: inset 0 0 12px #f72585; }