.pads { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; width:min(420px, 92vw); }
.pad { aspect-ratio:1; border-radius:22%; border:3px solid rgba(255,255,255,.25); padding:0; filter:saturate(.7) brightness(.55); transition:filter .1s, transform .1s; }
.pad.lit { filter:none; transform:scale(1.06); box-shadow:0 0 28px currentColor; } .pad:disabled { cursor:default; opacity:1; }
.p0 { background:#14b8a6; color:#14b8a6; border-radius:50% 22% 22% 22%; } .p1 { background:#f59e0b; color:#f59e0b; border-radius:22% 50% 22% 22%; }
.p2 { background:#fb7185; color:#fb7185; border-radius:22% 22% 50% 22%; } .p3 { background:#a78bfa; color:#a78bfa; border-radius:22% 22% 22% 50%; }
.p4 { background:#84cc16; color:#84cc16; border-radius:50%; } .p5 { background:#38bdf8; color:#38bdf8; border-radius:10%; }

.pads { position:relative; gap:10px; padding:14px; border:7px solid #244356; border-radius:26px; background:linear-gradient(145deg,#416378,#142b3d); box-shadow:inset 0 3px 8px #0c2033,0 18px 30px rgba(17,47,65,.28); }
.pads::after { content:''; position:absolute; left:50%; top:50%; width:36px; height:36px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 35% 30%,#e6f4f0,#4c6676 55%,#162d3d 70%); box-shadow:0 2px 8px #0d2639; pointer-events:none; }
.pad { border:3px solid rgba(255,255,255,.45); box-shadow:inset 0 5px 10px rgba(255,255,255,.27),inset 0 -8px 12px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.2); filter:saturate(.85) brightness(.82); }
.pad.lit { filter:saturate(1.25) brightness(1.28); transform:scale(1.04); }