*::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html,
 body {
   height: 100%;
   overflow: hidden;
 }

 :root {
   --pink: #ff6eb4;
   --yellow: #ffe135;
   --cyan: #00e5ff;
   --orange: #ff9f43;
   --green: #00e676;
   --purple: #ce93d8;
   --red: #ff5252;
   --card: #1e1040;
   --card2: #2a1560;
 }

 body {
   font-family: 'Nunito', sans-serif;
   background: #0f0024;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   overflow: hidden;
   position: relative;
 }

 /* ===== BG ===== */
 .aurora {
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background:
     radial-gradient(ellipse 80% 50% at 15% 85%, rgba(255, 110, 180, 0.2) 0%, transparent 60%),
     radial-gradient(ellipse 60% 40% at 85% 15%, rgba(0, 229, 255, 0.15) 0%, transparent 60%),
     radial-gradient(ellipse 70% 60% at 50% 50%, rgba(30, 10, 80, 0.7) 0%, transparent 70%);
   animation: hueShift 9s ease-in-out infinite alternate;
 }

 @keyframes hueShift {
   0% {
     filter: hue-rotate(0deg);
   }

   100% {
     filter: hue-rotate(25deg);
   }
 }

 .grid {
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background-image:
     linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 44px 44px;
 }

 /* ===== STARS ===== */
 .stars {
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
 }

 .star {
   position: absolute;
   border-radius: 50%;
   background: #fff;
   opacity: 0;
   animation: twinkle var(--d) ease-in-out infinite var(--dl);
 }

 @keyframes twinkle {

   0%,
   100% {
     opacity: 0;
     transform: scale(0.4);
   }

   50% {
     opacity: 1;
     transform: scale(1);
   }
 }

 /* ===== NOTES ===== */
 .notes-wrap {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 1;
   overflow: hidden;
 }

 .note {
   position: absolute;
   bottom: -50px;
   opacity: 0;
   animation: floatUp var(--dur) ease-in var(--dl2) infinite;
   filter: drop-shadow(0 0 6px currentColor);
 }

 @keyframes floatUp {
   0% {
     opacity: 0;
     transform: translateY(0) rotate(-10deg);
   }

   10% {
     opacity: 0.85;
   }

   90% {
     opacity: 0.5;
   }

   100% {
     opacity: 0;
     transform: translateY(-105vh) rotate(30deg);
   }
 }

 /* ===== CANVAS ===== */
 #pcanvas {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 5;
 }

 /* ===== WRAPPER ===== */
 .wrapper {
   position: relative;
   z-index: 10;
   width: 100%;
   max-width: 860px;
   padding: 0 clamp(10px, 3vw, 24px);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: clamp(8px, 2vh, 20px);
 }

 /* ===== TITLE ===== */
 .title {
   font-family: 'Boogaloo', cursive;
   font-size: clamp(34px, 9vw, 78px);
   line-height: 1;
   letter-spacing: 0.02em;
   text-align: center;
   background: linear-gradient(130deg, var(--pink) 0%, var(--yellow) 50%, var(--cyan) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: titleGlow 3s ease-in-out infinite;
 }

 @keyframes titleGlow {

   0%,
   100% {
     filter: drop-shadow(0 0 18px rgba(255, 110, 180, 0.5));
   }

   50% {
     filter: drop-shadow(0 0 36px rgba(0, 229, 255, 0.7));
   }
 }

 .title-sub {
   font-size: clamp(10px, 2vw, 14px);
   color: rgba(255, 255, 255, 0.4);
   font-weight: 800;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   text-align: center;
 }

 /* ===== VISUALIZER ===== */
 .viz {
   display: flex;
   align-items: flex-end;
   gap: 3px;
   height: clamp(24px, 5.5vh, 44px);
   width: clamp(110px, 28vw, 220px);
 }

 .vbar {
   flex: 1;
   border-radius: 3px 3px 0 0;
   min-height: 4px;
   background: linear-gradient(to top, var(--pink), var(--cyan));
   opacity: 0.65;
   transition: height 0.06s ease;
   height: 4px;
 }

 /* ===== SET GRID ===== */
 .set {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: clamp(6px, 1.4vw, 13px);
   width: 100%;
 }

 /* ===== DRUM BUTTON ===== */
 .drum {
   position: relative;
   aspect-ratio: 1;
   border: none;
   border-radius: clamp(12px, 2.5vw, 22px);
   cursor: pointer;
   outline: none;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 3px;
   -webkit-tap-highlight-color: transparent;
   transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
 }

 .drum-img {
   width: 70%;
   height: 70%;
   object-fit: contain;
   pointer-events: none;
   transition: transform 0.15s, filter 0.15s;
   filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
 }

 .drum-key {
   font-family: 'Boogaloo', cursive;
   font-size: clamp(14px, 3.5vw, 26px);
   color: rgba(255, 255, 255, 0.92);
   line-height: 1;
   pointer-events: none;
 }

 .drum-lbl {
   font-size: clamp(6px, 1.1vw, 10px);
   font-weight: 800;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.5);
   pointer-events: none;
 }

 /* PER-DRUM COLORS */
 .w {
   --c: #ff6eb4;
   --cs: #c4206a;
   background: linear-gradient(150deg, rgba(255, 110, 180, 0.22), #1e1040);
   border: 2px solid rgba(255, 110, 180, 0.35);
   box-shadow: 0 6px 0 #c4206a, 0 8px 22px rgba(255, 110, 180, 0.25);
 }

 .a {
   --c: #ff9f43;
   --cs: #c45a00;
   background: linear-gradient(150deg, rgba(255, 159, 67, 0.22), #1e1040);
   border: 2px solid rgba(255, 159, 67, 0.35);
   box-shadow: 0 6px 0 #c45a00, 0 8px 22px rgba(255, 159, 67, 0.25);
 }

 .s {
   --c: #ffe135;
   --cs: #b8940d;
   background: linear-gradient(150deg, rgba(255, 225, 53, 0.22), #1e1040);
   border: 2px solid rgba(255, 225, 53, 0.35);
   box-shadow: 0 6px 0 #b8940d, 0 8px 22px rgba(255, 225, 53, 0.25);
 }

 .d {
   --c: #00e676;
   --cs: #007830;
   background: linear-gradient(150deg, rgba(0, 230, 118, 0.22), #1e1040);
   border: 2px solid rgba(0, 230, 118, 0.35);
   box-shadow: 0 6px 0 #007830, 0 8px 22px rgba(0, 230, 118, 0.25);
 }

 .j {
   --c: #00e5ff;
   --cs: #005f8a;
   background: linear-gradient(150deg, rgba(0, 229, 255, 0.22), #1e1040);
   border: 2px solid rgba(0, 229, 255, 0.35);
   box-shadow: 0 6px 0 #005f8a, 0 8px 22px rgba(0, 229, 255, 0.25);
 }

 .k {
   --c: #ce93d8;
   --cs: #7b2d8b;
   background: linear-gradient(150deg, rgba(206, 147, 216, 0.22), #1e1040);
   border: 2px solid rgba(206, 147, 216, 0.35);
   box-shadow: 0 6px 0 #7b2d8b, 0 8px 22px rgba(206, 147, 216, 0.25);
 }

 .l {
   --c: #ff5252;
   --cs: #950000;
   background: linear-gradient(150deg, rgba(255, 82, 82, 0.22), #1e1040);
   border: 2px solid rgba(255, 82, 82, 0.35);
   box-shadow: 0 6px 0 #950000, 0 8px 22px rgba(255, 82, 82, 0.25);
 }

 .drum:hover {
   transform: translateY(-4px) scale(1.05);
 }

 .drum:hover .drum-img {
   transform: scale(1.12);
   filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)) brightness(1.2);
 }

 .drum.pressed {
   transform: translateY(5px) scale(0.94) !important;
   box-shadow: 0 1px 0 var(--cs), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
   background: linear-gradient(150deg, color-mix(in srgb, var(--c) 55%, #fff), color-mix(in srgb, var(--c) 30%, #1e1040)) !important;
   border-color: var(--c) !important;
 }

 .drum.pressed .drum-key {
   text-shadow: 0 0 16px var(--c), 0 0 32px var(--c);
   color: #fff;
 }

 .drum.pressed::after {
   content: '';
   position: absolute;
   inset: -3px;
   border-radius: inherit;
   box-shadow: 0 0 28px 6px var(--c), inset 0 0 16px rgba(255, 255, 255, 0.12);
   animation: glowBurst 0.35s ease forwards;
   pointer-events: none;
 }

 @keyframes glowBurst {
   0% {
     opacity: 1;
     transform: scale(1);
   }

   100% {
     opacity: 0;
     transform: scale(1.4);
   }
 }

 /* RIPPLE */
 .ripple {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
   transform: scale(0);
   pointer-events: none;
   animation: ripAnim 0.5s ease-out forwards;
 }

 @keyframes ripAnim {
   to {
     transform: scale(4);
     opacity: 0;
   }
 }

 /* HINT */
 .hint {
   font-size: clamp(10px, 1.8vw, 13px);
   color: rgba(255, 255, 255, 0.32);
   font-weight: 800;
   letter-spacing: 0.1em;
   text-align: center;
 }

 .hint span {
   color: var(--cyan);
   font-family: 'Boogaloo', cursive;
   font-size: 1.15em;
 }

 /* RESPONSIVE */
 @media(max-width:560px) {
   .set {
     grid-template-columns: repeat(4, 1fr);
   }

   .drum-lbl {
     display: none;
   }
 }

 @media(max-height:580px) {
   .wrapper {
     gap: 5px;
   }

   .title {
     font-size: 26px;
   }

   .title-sub,
   .hint {
     display: none;
   }

   .viz {
     height: 20px;
   }
 }