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

:root {
  --bg:#080808; --panel:#111115; --border:#1e1e26;
  --text:#dddde8; --muted:#3a3a50;
  --red:#ff1a00; --red2:#cc1500; --orange:#ff6600; --amber:#ffaa00;
  --glow:rgba(255,26,0,0.6);
}

body {
  background:var(--bg); color:var(--text);
  font-family:'Share Tech Mono',monospace;
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; padding:20px 20px 40px;
  overflow-x:hidden; user-select:none;
}

body::before {
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(255,26,0,0.12) 0%, transparent 70%),
    repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(255,255,255,0.008) 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(255,255,255,0.008) 50px);
  pointer-events:none; z-index:0;
}

.container { position:relative; z-index:1; width:100%; max-width:960px; }

/* HEADER */
header {
  display:flex; align-items:center; gap:16px;
  margin-bottom:20px; border-bottom:1px solid var(--border); padding-bottom:16px;
}
h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(28px,5vw,52px); letter-spacing:6px; line-height:1; }
h1 span { color:var(--red); text-shadow:0 0 20px var(--red), 0 0 40px rgba(255,26,0,0.3); }
.subtitle { font-size:10px; color:var(--muted); letter-spacing:3px; text-transform:uppercase; }

/* KIT INFO */
.kit-badge {
  margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.kit-badge .engine { font-size:9px; color:var(--muted); letter-spacing:2px; }
.kit-badge .kit-name { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:3px; color:var(--red); }

/* VU */
.vu-row { display:flex; gap:3px; margin-bottom:14px; align-items:flex-end; }
.vu-bar { width:5px; background:var(--border); border-radius:2px; transition:background 0.06s, opacity 0.12s; }

/* PADS */
.drums { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

.pad {
  position:relative; background:var(--panel);
  border:1px solid var(--border); border-radius:4px;
  padding:16px 12px; cursor:pointer;
  transition:border-color 0.08s, background 0.08s, box-shadow 0.08s;
  overflow:hidden; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; min-height:100px;
}
.pad::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, var(--pc,var(--red)), transparent 65%);
  opacity:0; transition:opacity 0.06s;
}
.pad.active::after { opacity:0.3; }
.pad.active {
  border-color:var(--pc,var(--red));
  background:color-mix(in srgb, var(--pc,var(--red)) 12%, var(--panel));
  box-shadow:0 0 28px color-mix(in srgb, var(--pc,var(--red)) 50%, transparent),
             inset 0 0 14px color-mix(in srgb, var(--pc,var(--red)) 14%, transparent);
}
.pad:hover { border-color:color-mix(in srgb, var(--pc,var(--red)) 45%, var(--border)); }
.pad.wide { grid-column:span 2; }
.pad.span3 { grid-column:span 3; }

.ripple {
  position:absolute; border-radius:50%; width:8px; height:8px;
  background:var(--pc,var(--red)); opacity:0.6; transform:scale(0);
  animation:rip 0.5s ease-out forwards; pointer-events:none;
}
@keyframes rip { to { transform:scale(25); opacity:0; } }

.pad-icon { font-size:26px; line-height:1; transition:transform 0.07s; position:relative; z-index:1; }
.pad.active .pad-icon { transform:scale(0.85); }
.pad-name {
  font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:2px;
  color:var(--text); position:relative; z-index:1; text-align:center;
}
.pad-key {
  position:absolute; top:6px; right:8px;
  font-size:9px; color:var(--muted); background:rgba(255,255,255,0.03);
  padding:1px 4px; border-radius:2px; border:1px solid var(--border);
}

/* CONTROLS */
.controls {
  margin-top:14px; display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  padding:10px 16px; background:var(--panel); border:1px solid var(--border); border-radius:4px;
}
.controls label { font-size:9px; color:var(--muted); letter-spacing:2px; }
input[type=range] {
  -webkit-appearance:none; width:80px; height:2px;
  background:var(--border); border-radius:2px; outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:10px; height:10px; border-radius:50%;
  background:var(--red); cursor:pointer;
}

.status { margin-left:auto; display:flex; align-items:center; gap:8px; }
.dot { width:5px; height:5px; border-radius:50%; background:var(--red); animation:blink 1.5s ease-in-out infinite; }
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 6px var(--red)}50%{opacity:0.2;box-shadow:none}}
.last-hit { font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:3px; color:var(--red); min-width:120px; }

.note { font-size:9px; color:var(--muted); letter-spacing:1px; margin-top:6px; text-align:center; }

@media(max-width:560px){
  .drums{grid-template-columns:repeat(2,1fr);}
  .pad.wide,.pad.span3{grid-column:span 1;}
}