:root{
  --bg: #0f1112;
  --btn: #e6e6e6;
  --accent: #ff6b6b;
  --shadow: rgba(0,0,0,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#0b0c0d, #0f1112);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:var(--btn);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

main{
  width:100%;
  max-width:420px;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

/* Button */
#playBtn{
  --size:84px;
  width:calc(var(--size) * 2);
  height:var(--size);
  border-radius:14px;
  border:0;
  background:linear-gradient(180deg,#ffffff 0%, #e6e6e6 100%);
  box-shadow: 0 8px 20px var(--shadow), inset 0 -6px 12px rgba(0,0,0,0.06);
  color:#0b0c0d;
  font-weight:600;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 18px;
  min-width:160px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transform-origin: center;
  perspective: 600px;
}

#playBtn:active{transform:translateY(1px)}
#playBtn.playing{
  background:linear-gradient(180deg,var(--accent), #ff4b4b);
  color:white;
  box-shadow: 0 10px 30px rgba(255,107,107,0.18), inset 0 -6px 12px rgba(0,0,0,0.08);
}

/* Warping effect when main audio ends */
#playBtn.warping {
  animation: warp 1200ms ease-in-out;
  transform-style: preserve-3d;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

@keyframes warp {
  0% { transform: rotateX(0deg) rotateY(0deg) translateZ(0) scale(1); }
  30% { transform: rotateX(-18deg) rotateY(10deg) translateZ(18px) scale(1.02); }
  60% { transform: rotateX(12deg) rotateY(-8deg) translateZ(8px) scale(0.99); }
  100% { transform: rotateX(0deg) rotateY(0deg) translateZ(0) scale(1); }
}

/* tiny visual shimmer to imply static */
#playBtn.warping::after{
  content:'';
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  border-radius:14px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02));
  mix-blend-mode:overlay;
  opacity:0.6;
  animation: static-flicker 150ms steps(2, end) 6;
}

@keyframes static-flicker {
  from { opacity:0.12; transform:translateX(-6%); }
  50% { opacity:0.6; transform:translateX(6%); }
  to { opacity:0.12; transform:translateX(-6%); }
}

.icon{
  width:28px;
  height:28px;
  display:inline-block;
  flex:0 0 28px;
}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Corner menu button */
.corner-btn{
  position:fixed;
  right:12px;
  top:12px;
  z-index:120;
  width:40px;
  height:40px;
  border-radius:8px;
  border:0;
  background:rgba(255,255,255,0.06);
  color:var(--btn);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
}
.corner-btn:active { transform: translateY(1px); }